Merge branch 'master' into refactoring/text-heading
This commit is contained in:
commit
d3f06c8d3e
@ -63,7 +63,7 @@ RUN apt-get -y update && \
|
||||
jq \
|
||||
git \
|
||||
yarn \
|
||||
dotnet-sdk-3.0 \
|
||||
dotnet-sdk-3.1 \
|
||||
supervisor \
|
||||
mysql-client \
|
||||
mysql-server
|
||||
|
@ -8,39 +8,39 @@
|
||||
"asc-web-components": "file:../../../packages/asc-web-components",
|
||||
"axios": "^0.19.0",
|
||||
"bootstrap": "4.3.1",
|
||||
"connected-react-router": "6.5.2",
|
||||
"connected-react-router": "6.6.1",
|
||||
"copy-to-clipboard": "^3.2.0",
|
||||
"history": "4.9.0",
|
||||
"i18next": "17.0.12",
|
||||
"i18next-browser-languagedetector": "3.0.3",
|
||||
"i18next-xhr-backend": "3.1.2",
|
||||
"history": "4.10.1",
|
||||
"i18next": "19.0.1",
|
||||
"i18next-browser-languagedetector": "4.0.1",
|
||||
"i18next-xhr-backend": "3.2.2",
|
||||
"jquery": "3.4.1",
|
||||
"lodash": "4.17.15",
|
||||
"lodash-es": "4.17.15",
|
||||
"merge": "^1.2.1",
|
||||
"node-sass": "^4.12.0",
|
||||
"oidc-client": "^1.9.0",
|
||||
"node-sass": "^4.13.0",
|
||||
"oidc-client": "^1.9.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.9.0",
|
||||
"react-device-detect": "^1.7.5",
|
||||
"react-dom": "^16.9.0",
|
||||
"react-i18next": "10.12.2",
|
||||
"react-redux": "7.1.1",
|
||||
"react-router": "5.0.1",
|
||||
"react-router-dom": "5.0.1",
|
||||
"react": "^16.12.0",
|
||||
"react-device-detect": "^1.11.14",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-i18next": "11.2.5",
|
||||
"react-redux": "7.1.3",
|
||||
"react-router": "5.1.2",
|
||||
"react-router-dom": "5.1.2",
|
||||
"react-virtualized-auto-sizer": "^1.0.2",
|
||||
"react-window": "^1.8.5",
|
||||
"redux": "4.0.4",
|
||||
"redux-thunk": "2.3.0",
|
||||
"styled-components": "^4.3.2"
|
||||
"styled-components": "^4.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"copy-webpack-plugin": "^5.0.4",
|
||||
"cross-env": "^5.2.0",
|
||||
"react-app-rewired": "^2.1.3",
|
||||
"react-scripts": "3.1.1",
|
||||
"copy-webpack-plugin": "^5.0.5",
|
||||
"cross-env": "^6.0.3",
|
||||
"react-app-rewired": "^2.1.5",
|
||||
"react-scripts": "3.3.0",
|
||||
"redux-devtools-extension": "^2.13.8",
|
||||
"rimraf": "2.6.3"
|
||||
"rimraf": "3.0.0"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
|
@ -3,7 +3,6 @@ $font-family-base: 'Open Sans', sans-serif;
|
||||
|
||||
// Import Bootstrap and its default variables
|
||||
@import '~bootstrap/scss/bootstrap.scss';
|
||||
@import '~react-toastify/dist/ReactToastify.min.css';
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -7,35 +7,35 @@
|
||||
"asc-web-components": "file:../../packages/asc-web-components",
|
||||
"axios": "^0.19.0",
|
||||
"bootstrap": "4.3.1",
|
||||
"connected-react-router": "6.5.2",
|
||||
"history": "4.9.0",
|
||||
"i18next": "17.0.12",
|
||||
"i18next-browser-languagedetector": "3.0.3",
|
||||
"i18next-xhr-backend": "3.1.2",
|
||||
"connected-react-router": "6.6.1",
|
||||
"history": "4.10.1",
|
||||
"i18next": "19.0.1",
|
||||
"i18next-browser-languagedetector": "4.0.1",
|
||||
"i18next-xhr-backend": "3.2.2",
|
||||
"jquery": "3.4.1",
|
||||
"lodash": "4.17.15",
|
||||
"lodash-es": "4.17.15",
|
||||
"merge": "^1.2.1",
|
||||
"node-sass": "^4.12.0",
|
||||
"oidc-client": "^1.9.0",
|
||||
"node-sass": "^4.13.0",
|
||||
"oidc-client": "^1.9.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.9.0",
|
||||
"react-dom": "^16.9.0",
|
||||
"react-i18next": "10.12.2",
|
||||
"react-redux": "7.1.1",
|
||||
"react-router": "5.0.1",
|
||||
"react-router-dom": "5.0.1",
|
||||
"react": "^16.12.0",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-i18next": "11.2.5",
|
||||
"react-redux": "7.1.3",
|
||||
"react-router": "5.1.2",
|
||||
"react-router-dom": "5.1.2",
|
||||
"redux": "4.0.4",
|
||||
"redux-thunk": "2.3.0",
|
||||
"styled-components": "^4.3.2"
|
||||
"styled-components": "^4.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"copy-webpack-plugin": "^5.0.4",
|
||||
"cross-env": "^5.2.0",
|
||||
"react-app-rewired": "^2.1.3",
|
||||
"react-scripts": "3.1.1",
|
||||
"copy-webpack-plugin": "^5.0.5",
|
||||
"cross-env": "^6.0.3",
|
||||
"react-app-rewired": "^2.1.5",
|
||||
"react-scripts": "3.3.0",
|
||||
"redux-devtools-extension": "^2.13.8",
|
||||
"rimraf": "2.6.3"
|
||||
"rimraf": "3.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-app-rewired start",
|
||||
|
@ -3,7 +3,6 @@ $font-family-base: 'Open Sans', sans-serif;
|
||||
|
||||
// Import Bootstrap and its default variables
|
||||
@import '~bootstrap/scss/bootstrap.scss';
|
||||
@import '~react-toastify/dist/ReactToastify.min.css';
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -4,5 +4,4 @@ It can also be an scss file, however,
|
||||
you have to go to `webpack.config.js` file
|
||||
and enable the options in there
|
||||
*/
|
||||
@import '../node_modules/bootstrap/dist/css/bootstrap.css';
|
||||
@import '../node_modules/react-toastify/dist/ReactToastify.min.css';
|
||||
@import '../node_modules/bootstrap/dist/css/bootstrap.css';
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "asc-web-common",
|
||||
"version": "1.0.11",
|
||||
"version": "1.0.13",
|
||||
"description": "Ascensio System SIA common components and solutions library",
|
||||
"license": "AGPL-3.0",
|
||||
"files": [
|
||||
@ -33,85 +33,86 @@
|
||||
"universal-cookie": "^4.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.5.5",
|
||||
"@babel/core": "^7.5.5",
|
||||
"@babel/plugin-proposal-class-properties": "^7.5.5",
|
||||
"@babel/plugin-proposal-export-default-from": "^7.5.2",
|
||||
"@babel/plugin-proposal-export-namespace-from": "^7.5.2",
|
||||
"@babel/plugin-transform-runtime": "^7.5.5",
|
||||
"@babel/preset-env": "^7.5.5",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@emotion/babel-preset-css-prop": "^10.0.17",
|
||||
"@storybook/addon-a11y": "^5.1.11",
|
||||
"@storybook/addon-actions": "^5.2.5",
|
||||
"@babel/cli": "^7.7.5",
|
||||
"@babel/core": "^7.7.5",
|
||||
"@babel/plugin-proposal-class-properties": "^7.7.4",
|
||||
"@babel/plugin-proposal-export-default-from": "^7.7.4",
|
||||
"@babel/plugin-proposal-export-namespace-from": "^7.7.4",
|
||||
"@babel/plugin-transform-runtime": "^7.7.6",
|
||||
"@babel/preset-env": "^7.7.6",
|
||||
"@babel/preset-react": "^7.7.4",
|
||||
"@emotion/babel-preset-css-prop": "^10.0.23",
|
||||
"@emotion/styled": "^10.0.23",
|
||||
"@storybook/addon-a11y": "^5.2.8",
|
||||
"@storybook/addon-actions": "^5.2.8",
|
||||
"@storybook/addon-console": "^1.2.1",
|
||||
"@storybook/addon-knobs": "^5.2.5",
|
||||
"@storybook/addon-links": "^5.2.5",
|
||||
"@storybook/addon-options": "^5.2.5",
|
||||
"@storybook/addon-storysource": "^5.2.5",
|
||||
"@storybook/addon-viewport": "^5.2.5",
|
||||
"@storybook/addons": "^5.2.5",
|
||||
"@storybook/react": "^5.2.5",
|
||||
"@storybook/addon-knobs": "^5.2.8",
|
||||
"@storybook/addon-links": "^5.2.8",
|
||||
"@storybook/addon-options": "^5.2.8",
|
||||
"@storybook/addon-storysource": "^5.2.8",
|
||||
"@storybook/addon-viewport": "^5.2.8",
|
||||
"@storybook/addons": "^5.2.8",
|
||||
"@storybook/react": "^5.2.8",
|
||||
"@svgr/rollup": "^4.3.3",
|
||||
"@svgr/webpack": "^4.3.2",
|
||||
"@testing-library/react": "^8.0.8",
|
||||
"@types/jest": "^24.0.17",
|
||||
"@svgr/webpack": "^4.3.3",
|
||||
"@testing-library/react": "^9.3.2",
|
||||
"@types/jest": "^24.0.23",
|
||||
"asc-web-components": "file:../../packages/asc-web-components",
|
||||
"babel-eslint": "^10.0.2",
|
||||
"babel-jest": "^24.8.0",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"babel-jest": "^24.9.0",
|
||||
"babel-loader": "^8.0.6",
|
||||
"babel-plugin-inline-react-svg": "^1.1.0",
|
||||
"babel-plugin-transform-dynamic-import": "^2.1.0",
|
||||
"babel-plugin-transform-rename-import": "^2.3.0",
|
||||
"bootstrap": "^4.3.1",
|
||||
"cross-env": "^5.2.0",
|
||||
"css-loader": "^3.2.0",
|
||||
"cross-env": "^6.0.3",
|
||||
"css-loader": "^3.2.1",
|
||||
"enzyme": "^3.10.0",
|
||||
"enzyme-adapter-react-16": "^1.14.0",
|
||||
"eslint": "^6.3.0",
|
||||
"eslint-plugin-react": "^7.14.3",
|
||||
"i18next": "17.0.12",
|
||||
"jest": "^24.8.0",
|
||||
"jest-enzyme": "^7.1.0",
|
||||
"jest-junit": "^8.0.0",
|
||||
"postcss": "^7.0.17",
|
||||
"enzyme-adapter-react-16": "^1.15.1",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-react": "^7.17.0",
|
||||
"i18next": "19.0.1",
|
||||
"jest": "^24.9.0",
|
||||
"jest-enzyme": "^7.1.2",
|
||||
"jest-junit": "^10.0.0",
|
||||
"postcss": "^7.0.24",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.9.0",
|
||||
"react-dom": "^16.9.0",
|
||||
"react-i18next": "10.12.2",
|
||||
"react-redux": "7.1.1",
|
||||
"react-router": "5.0.1",
|
||||
"react-router-dom": "5.0.1",
|
||||
"react": "^16.12.0",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-i18next": "11.2.5",
|
||||
"react-redux": "7.1.3",
|
||||
"react-router": "5.1.2",
|
||||
"react-router-dom": "5.1.2",
|
||||
"react-values": "^0.3.3",
|
||||
"rollup": "^1.21.1",
|
||||
"rollup": "^1.27.9",
|
||||
"rollup-plugin-babel": "^4.3.3",
|
||||
"rollup-plugin-cleanup": "^3.1.1",
|
||||
"rollup-plugin-commonjs": "^10.1.0",
|
||||
"rollup-plugin-copy": "^3.1.0",
|
||||
"rollup-plugin-generate-package-json": "^3.1.3",
|
||||
"rollup-plugin-generate-package-json": "^3.2.0",
|
||||
"rollup-plugin-json": "^4.0.0",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-peer-deps-external": "^2.2.0",
|
||||
"rollup-plugin-postcss": "^2.0.3",
|
||||
"rollup-plugin-replace": "^2.2.0",
|
||||
"rollup-plugin-url": "^2.2.2",
|
||||
"rollup-plugin-url": "^3.0.1",
|
||||
"storybook-readme": "^5.0.8",
|
||||
"styled-components": "^4.3.2",
|
||||
"styled-components": "^4.4.1",
|
||||
"svg-inline-loader": "^0.8.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"asc-web-components": "file:../../packages/asc-web-components",
|
||||
"bootstrap": "^4.3.1",
|
||||
"i18next": "17.0.12",
|
||||
"i18next": "19.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.9.0",
|
||||
"react-dom": "^16.9.0",
|
||||
"react-i18next": "10.12.2",
|
||||
"react-redux": "7.1.1",
|
||||
"react-router": "5.0.1",
|
||||
"react-router-dom": "5.0.1",
|
||||
"react": "^16.12.0",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-i18next": "11.2.5",
|
||||
"react-redux": "7.1.3",
|
||||
"react-router": "5.1.2",
|
||||
"react-router-dom": "5.1.2",
|
||||
"react-values": "^0.3.3",
|
||||
"styled-components": "^4.3.2"
|
||||
"styled-components": "^4.4.1"
|
||||
},
|
||||
"resolutions": {
|
||||
"js-yaml": "3.13.1"
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -5,4 +5,9 @@ you have to go to `webpack.config.js` file
|
||||
and enable the options in there
|
||||
*/
|
||||
@import '../node_modules/bootstrap/dist/css/bootstrap.css';
|
||||
@import '../node_modules/react-toastify/dist/ReactToastify.min.css';
|
||||
|
||||
.Toastify__toast-container--top-center {
|
||||
top: 1em;
|
||||
left: 50%;
|
||||
margin-left: -160px;
|
||||
}
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "asc-web-components",
|
||||
"version": "1.0.215",
|
||||
"version": "1.0.219",
|
||||
"description": "Ascensio System SIA component library",
|
||||
"license": "AGPL-3.0",
|
||||
"main": "dist/asc-web-components.js",
|
||||
@ -36,82 +36,83 @@
|
||||
"styled-components": "^4.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.5.5",
|
||||
"@babel/core": "^7.5.5",
|
||||
"@babel/plugin-proposal-class-properties": "^7.5.5",
|
||||
"@babel/plugin-proposal-export-default-from": "^7.5.2",
|
||||
"@babel/plugin-proposal-export-namespace-from": "^7.5.2",
|
||||
"@babel/plugin-transform-runtime": "^7.5.5",
|
||||
"@babel/preset-env": "^7.5.5",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@emotion/babel-preset-css-prop": "^10.0.17",
|
||||
"@storybook/addon-a11y": "^5.1.11",
|
||||
"@storybook/addon-actions": "^5.2.5",
|
||||
"@babel/cli": "^7.7.5",
|
||||
"@babel/core": "^7.7.5",
|
||||
"@babel/plugin-proposal-class-properties": "^7.7.4",
|
||||
"@babel/plugin-proposal-export-default-from": "^7.7.4",
|
||||
"@babel/plugin-proposal-export-namespace-from": "^7.7.4",
|
||||
"@babel/plugin-transform-runtime": "^7.7.6",
|
||||
"@babel/preset-env": "^7.7.6",
|
||||
"@babel/preset-react": "^7.7.4",
|
||||
"@emotion/babel-preset-css-prop": "^10.0.23",
|
||||
"@emotion/styled": "^10.0.23",
|
||||
"@storybook/addon-a11y": "^5.2.8",
|
||||
"@storybook/addon-actions": "^5.2.8",
|
||||
"@storybook/addon-console": "^1.2.1",
|
||||
"@storybook/addon-knobs": "^5.2.5",
|
||||
"@storybook/addon-links": "^5.2.5",
|
||||
"@storybook/addon-options": "^5.2.5",
|
||||
"@storybook/addon-storysource": "^5.2.5",
|
||||
"@storybook/addon-viewport": "^5.2.5",
|
||||
"@storybook/addons": "^5.2.5",
|
||||
"@storybook/react": "^5.2.5",
|
||||
"@storybook/addon-knobs": "^5.2.8",
|
||||
"@storybook/addon-links": "^5.2.8",
|
||||
"@storybook/addon-options": "^5.2.8",
|
||||
"@storybook/addon-storysource": "^5.2.8",
|
||||
"@storybook/addon-viewport": "^5.2.8",
|
||||
"@storybook/addons": "^5.2.8",
|
||||
"@storybook/react": "^5.2.8",
|
||||
"@svgr/rollup": "^4.3.3",
|
||||
"@svgr/webpack": "^4.3.2",
|
||||
"@testing-library/react": "^8.0.8",
|
||||
"@types/jest": "^24.0.17",
|
||||
"babel-eslint": "^10.0.2",
|
||||
"babel-jest": "^24.8.0",
|
||||
"@svgr/webpack": "^4.3.3",
|
||||
"@testing-library/react": "^9.3.2",
|
||||
"@types/jest": "^24.0.23",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"babel-jest": "^24.9.0",
|
||||
"babel-loader": "^8.0.6",
|
||||
"babel-plugin-inline-react-svg": "^1.1.0",
|
||||
"babel-plugin-transform-dynamic-import": "^2.1.0",
|
||||
"babel-plugin-transform-rename-import": "^2.3.0",
|
||||
"cross-env": "^5.2.0",
|
||||
"css-loader": "^3.2.0",
|
||||
"cross-env": "^6.0.3",
|
||||
"css-loader": "^3.2.1",
|
||||
"enzyme": "^3.10.0",
|
||||
"enzyme-adapter-react-16": "^1.14.0",
|
||||
"eslint": "^6.3.0",
|
||||
"eslint-plugin-react": "^7.14.3",
|
||||
"jest": "^24.8.0",
|
||||
"jest-enzyme": "^7.1.0",
|
||||
"jest-junit": "^8.0.0",
|
||||
"postcss": "^7.0.17",
|
||||
"react": "^16.9.0",
|
||||
"react-dom": "^16.9.0",
|
||||
"enzyme-adapter-react-16": "^1.15.1",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-react": "^7.17.0",
|
||||
"jest": "^24.9.0",
|
||||
"jest-enzyme": "^7.1.2",
|
||||
"jest-junit": "^10.0.0",
|
||||
"postcss": "^7.0.24",
|
||||
"react": "^16.12.0",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-values": "^0.3.3",
|
||||
"rollup": "^1.21.1",
|
||||
"rollup": "^1.27.9",
|
||||
"rollup-plugin-babel": "^4.3.3",
|
||||
"rollup-plugin-cleanup": "^3.1.1",
|
||||
"rollup-plugin-commonjs": "^10.1.0",
|
||||
"rollup-plugin-copy": "^3.1.0",
|
||||
"rollup-plugin-generate-package-json": "^3.1.3",
|
||||
"rollup-plugin-generate-package-json": "^3.2.0",
|
||||
"rollup-plugin-json": "^4.0.0",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-peer-deps-external": "^2.2.0",
|
||||
"rollup-plugin-postcss": "^2.0.3",
|
||||
"rollup-plugin-replace": "^2.2.0",
|
||||
"rollup-plugin-url": "^2.2.2",
|
||||
"rollup-plugin-url": "^3.0.1",
|
||||
"storybook-readme": "^5.0.8",
|
||||
"styled-components": "^4.3.2",
|
||||
"styled-components": "^4.4.1",
|
||||
"svg-inline-loader": "^0.8.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^4.3.1",
|
||||
"email-addresses": "^3.0.3",
|
||||
"email-addresses": "^3.1.0",
|
||||
"html-to-react": "^1.4.2",
|
||||
"lodash": "4.17.15",
|
||||
"lodash-es": "4.17.15",
|
||||
"moment": "^2.24.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"punycode": "^2.1.1",
|
||||
"rc-tree": "^2.1.2",
|
||||
"rc-tree": "^2.1.3",
|
||||
"react-autosize-textarea": "^7.0.0",
|
||||
"react-avatar-edit": "^0.8.3",
|
||||
"react-avatar-editor": "^11.0.7",
|
||||
"react-custom-scrollbars": "^4.2.1",
|
||||
"react-dropzone": "^10.1.8",
|
||||
"react-dropzone": "^10.2.1",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"react-text-mask": "^5.4.3",
|
||||
"react-toastify": "^5.3.2",
|
||||
"react-toastify": "^5.4.1",
|
||||
"react-tooltip": "^3.11.1",
|
||||
"react-virtualized-auto-sizer": "^1.0.2",
|
||||
"react-window": "^1.8.5"
|
||||
|
530
web/ASC.Web.Components/src/components/all/all.stories.js
Normal file
530
web/ASC.Web.Components/src/components/all/all.stories.js
Normal file
@ -0,0 +1,530 @@
|
||||
import React from "react";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import { BooleanValue, StringValue } from "react-values";
|
||||
import Section from "../../../.storybook/decorators/section";
|
||||
import Avatar from "../avatar";
|
||||
import Button from "../button";
|
||||
//import HelpButton from "../help-button";
|
||||
//import IconButton from "../icon-button";
|
||||
import ToggleButton from "../toggle-button";
|
||||
import Calendar from "../calendar";
|
||||
import Checkbox from "../checkbox";
|
||||
import ComboBox from "../combobox";
|
||||
import InputBlock from "../input-block";
|
||||
import RadioButtonGroup from "../radio-button-group";
|
||||
import TextInput from "../text-input";
|
||||
import Textarea from "../textarea";
|
||||
import ContextMenuButton from "../context-menu-button";
|
||||
import DatePicker from "../date-picker";
|
||||
import FieldContainer from "../field-container";
|
||||
import Header from "../header";
|
||||
import Heading from "../heading";
|
||||
import Link from "../link";
|
||||
import Loader from "../loader";
|
||||
import Row from "../row";
|
||||
import Scrollbar from "../scrollbar";
|
||||
import TabContainer from "../tabs-container";
|
||||
import Text from "../text";
|
||||
import Toast from "../toast";
|
||||
import toastr from "../toast/toastr";
|
||||
import ToggleContent from "../toggle-content";
|
||||
import Tooltip from "../tooltip";
|
||||
import { Icons } from "../icons";
|
||||
|
||||
const array_items = [
|
||||
{
|
||||
key: "0",
|
||||
title: "Tab 1",
|
||||
content: <div>Tab 1 content</div>
|
||||
},
|
||||
{
|
||||
key: "1",
|
||||
title: "Tab 2",
|
||||
content: <div>Tab 2 content</div>
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
title: "Tab 3",
|
||||
content: <div>Tab 3 content</div>
|
||||
}
|
||||
];
|
||||
|
||||
const options = [
|
||||
{
|
||||
key: 0,
|
||||
icon: "CatalogEmployeeIcon", // optional item
|
||||
label: "Option 1",
|
||||
disabled: false, // optional item
|
||||
onClick: () => {} // optional item
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
icon: "CatalogEmployeeIcon", // optional item
|
||||
label: "Option 2",
|
||||
disabled: false, // optional item
|
||||
onClick: () => {} // optional item
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
icon: "CatalogEmployeeIcon", // optional item
|
||||
label: "Option 3",
|
||||
disabled: true, // optional item
|
||||
onClick: () => {} // optional item
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
icon: "CatalogEmployeeIcon", // optional item
|
||||
label: "Option 4",
|
||||
disabled: false, // optional item
|
||||
onClick: () => {} // optional item
|
||||
}
|
||||
];
|
||||
|
||||
const arrayUsers = [
|
||||
{ key: "user_1", name: "Bob", email: "Bob@gmail.com", position: "developer" },
|
||||
{
|
||||
key: "user_2",
|
||||
name: "John",
|
||||
email: "John@gmail.com",
|
||||
position: "developer"
|
||||
},
|
||||
{
|
||||
key: "user_3",
|
||||
name: "Kevin",
|
||||
email: "Kevin@gmail.com",
|
||||
position: "developer"
|
||||
}
|
||||
];
|
||||
|
||||
const element = "Icon";
|
||||
|
||||
const elementAvatar = (
|
||||
<Avatar size="small" role="user" userName="Demo Avatar" />
|
||||
);
|
||||
const elementIcon = <Icons.CatalogFolderIcon size="big" />;
|
||||
const elementComboBox = (
|
||||
<ComboBox
|
||||
options={[
|
||||
{ key: 1, icon: "ItemActiveIcon", label: "Open" },
|
||||
{ key: 2, icon: "CheckIcon", label: "Closed" }
|
||||
]}
|
||||
onSelect={option => console.log(option)}
|
||||
selectedOption={{
|
||||
key: 0,
|
||||
icon: "ItemActiveIcon",
|
||||
label: ""
|
||||
}}
|
||||
scaled={false}
|
||||
size="content"
|
||||
isDisabled={false}
|
||||
/>
|
||||
);
|
||||
|
||||
const checkedProps = { checked: false };
|
||||
const getElementProps = element =>
|
||||
element === "Avatar"
|
||||
? { element: elementAvatar }
|
||||
: element === "Icon"
|
||||
? { element: elementIcon }
|
||||
: element === "ComboBox"
|
||||
? { element: elementComboBox }
|
||||
: {};
|
||||
|
||||
const elementProps = getElementProps(element);
|
||||
|
||||
const rowContent = (
|
||||
<>
|
||||
<Row
|
||||
key="1"
|
||||
{...checkedProps}
|
||||
{...elementProps}
|
||||
contextOptions={[
|
||||
{
|
||||
key: "key1",
|
||||
label: "Edit",
|
||||
onClick: () => console.log("Context action: Edit")
|
||||
},
|
||||
{
|
||||
key: "key2",
|
||||
label: "Delete",
|
||||
onClick: () => console.log("Context action: Delete")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Text truncate={true}>Sample text</Text>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
|
||||
let rowCount = 5;
|
||||
const rowArray = [];
|
||||
while (rowCount != 0) {
|
||||
rowArray.push(rowContent);
|
||||
rowCount--;
|
||||
}
|
||||
|
||||
storiesOf("Components|All", module)
|
||||
.addParameters({ options: { showAddonPanel: false } })
|
||||
.add("all", () => (
|
||||
<Section>
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridGap: 15,
|
||||
//gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))"
|
||||
gridTemplateColumns: "repeat(auto-fill, 300px)"
|
||||
}}
|
||||
>
|
||||
<div style={{ justifySelf: "center" }}>
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<Heading level={1} title="Some title">
|
||||
Heading text
|
||||
</Heading>
|
||||
</div>
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<Header type="content" title="Some title" isInline>
|
||||
Header text
|
||||
</Header>
|
||||
</div>
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<Text as="p" title="Some title">
|
||||
Text as "p"
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<Link type="page" href="https://github.com">
|
||||
Black page link
|
||||
</Link>
|
||||
<br />
|
||||
<Link type="page" href="https://github.com" isHovered={true}>
|
||||
Black hovered page link
|
||||
</Link>
|
||||
<br />
|
||||
<Link type="action">Black action link</Link>
|
||||
<br />
|
||||
<Link type="action" isHovered={true}>
|
||||
Black hovered action link
|
||||
</Link>
|
||||
</div>
|
||||
<div style={{ padding: "24px 0 8px 0" }}>
|
||||
<Link data-for="group" data-tip={0}>
|
||||
Bob
|
||||
</Link>
|
||||
<br />
|
||||
<Link data-for="group" data-tip={1}>
|
||||
John
|
||||
</Link>
|
||||
<br />
|
||||
<Link data-for="group" data-tip={2}>
|
||||
Kevin
|
||||
</Link>
|
||||
<Tooltip
|
||||
id="group"
|
||||
offsetRight={90}
|
||||
getContent={dataTip =>
|
||||
dataTip ? (
|
||||
<div>
|
||||
<Text isBold={true} fontSize={16}>
|
||||
{arrayUsers[dataTip].name}
|
||||
</Text>
|
||||
<Text color="#A3A9AE" fontSize={13}>
|
||||
{arrayUsers[dataTip].email}
|
||||
</Text>
|
||||
<Text fontSize={13}>{arrayUsers[dataTip].position}</Text>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ marginRight: 16 }}>
|
||||
<Button
|
||||
size="big"
|
||||
isDisabled={false}
|
||||
onClick={() => {}}
|
||||
label="Button"
|
||||
primary
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
size="big"
|
||||
isDisabled={false}
|
||||
onClick={() => {}}
|
||||
label="Button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<Toast />
|
||||
<Button
|
||||
label="Show toastr"
|
||||
onClick={() =>
|
||||
toastr.success(
|
||||
"Some text for toast",
|
||||
"Some text for title",
|
||||
true
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
{/*
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<ContextMenuButton
|
||||
iconName="VerticalDotsIcon"
|
||||
size={16}
|
||||
color="#A3A9AE"
|
||||
isDisabled={false}
|
||||
title="Actions"
|
||||
getData={() => [
|
||||
{
|
||||
key: "key",
|
||||
label: "label",
|
||||
onClick: () => {}
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
*/}
|
||||
{/*<div style={{ padding: "8px 0" }}>
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ marginRight: 16 }}>
|
||||
<IconButton
|
||||
size="25"
|
||||
isDisabled={false}
|
||||
onClick={() => {}}
|
||||
iconName={"SearchIcon"}
|
||||
isFill={true}
|
||||
isClickable={false}
|
||||
/>
|
||||
</div>
|
||||
<HelpButton tooltipContent="Paste you tooltip content here" />
|
||||
</div>
|
||||
</div>
|
||||
*/}
|
||||
</div>
|
||||
<div style={{ justifySelf: "center" }}>
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<ComboBox
|
||||
options={options}
|
||||
isDisabled={false}
|
||||
selectedOption={{
|
||||
key: 0,
|
||||
label: "Select"
|
||||
}}
|
||||
dropDownMaxHeight={200}
|
||||
noBorder={false}
|
||||
scaledOptions={true}
|
||||
size="content"
|
||||
onSelect={option => console.log("selected", option)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<StringValue>
|
||||
{({ value, set }) => (
|
||||
<TextInput
|
||||
placeholder="Add input text"
|
||||
value={value}
|
||||
onChange={e => set(e.target.value)}
|
||||
/>
|
||||
)}
|
||||
</StringValue>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<StringValue>
|
||||
{({ value, set }) => (
|
||||
<InputBlock
|
||||
placeholder="Add input text"
|
||||
iconName={"SearchIcon"}
|
||||
onIconClick={() => {}}
|
||||
onChange={e => set(e.target.value)}
|
||||
value={value}
|
||||
>
|
||||
<Icons.SettingsIcon size="medium" />
|
||||
</InputBlock>
|
||||
)}
|
||||
</StringValue>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<DatePicker
|
||||
onChange={date => {
|
||||
console.log("Selected date", date);
|
||||
}}
|
||||
selectedDate={new Date()}
|
||||
minDate={new Date("1970/01/01")}
|
||||
maxDate={new Date(new Date().getFullYear() + 1 + "/01/01")}
|
||||
isDisabled={false}
|
||||
isReadOnly={false}
|
||||
hasError={false}
|
||||
isOpen={false}
|
||||
themeColor="#ED7309"
|
||||
locale="en"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<StringValue>
|
||||
{({ value, set }) => (
|
||||
<Textarea
|
||||
placeholder="Add comment"
|
||||
onChange={event => set(event.target.value)}
|
||||
value={value}
|
||||
/>
|
||||
)}
|
||||
</StringValue>
|
||||
</div>
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<StringValue>
|
||||
{({ value, set }) => (
|
||||
<FieldContainer
|
||||
place="top"
|
||||
isRequired
|
||||
tooltipContent="Paste you tooltip content here"
|
||||
labelText="Name:"
|
||||
>
|
||||
<TextInput
|
||||
value={value}
|
||||
onChange={e => set(e.target.value)}
|
||||
/>
|
||||
</FieldContainer>
|
||||
)}
|
||||
</StringValue>
|
||||
</div>
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<RadioButtonGroup
|
||||
name="fruits"
|
||||
selected="banana"
|
||||
options={[
|
||||
{ value: "apple", label: "Sweet apple" },
|
||||
{ value: "banana", label: "Banana" },
|
||||
{ value: "Mandarin" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<BooleanValue>
|
||||
{({ value, toggle }) => (
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ marginRight: 24 }}>
|
||||
<Checkbox
|
||||
id="id"
|
||||
name="name"
|
||||
value="value"
|
||||
label="Checkbox"
|
||||
isChecked={value}
|
||||
isIndeterminate={false}
|
||||
isDisabled={false}
|
||||
onChange={e => toggle(e.target.checked)}
|
||||
/>
|
||||
</div>
|
||||
<Checkbox
|
||||
id="id"
|
||||
name="name"
|
||||
value="value"
|
||||
label="Checkbox indeterminate"
|
||||
isIndeterminate={true}
|
||||
isDisabled={false}
|
||||
onChange={() => {}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</BooleanValue>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: "8px 0 24px 0" }}>
|
||||
<BooleanValue>
|
||||
{({ value, toggle }) => (
|
||||
<ToggleButton
|
||||
label="Toggle button"
|
||||
onChange={e => toggle(e.target.checked)}
|
||||
isChecked={value}
|
||||
/>
|
||||
)}
|
||||
</BooleanValue>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ justifySelf: "center" }}>
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<Calendar
|
||||
onChange={() => {}}
|
||||
disabled={false}
|
||||
themeColor="#ED7309"
|
||||
selectedDate={new Date()}
|
||||
openToDate={new Date()}
|
||||
minDate={new Date("1970/01/01")}
|
||||
maxDate={new Date("3000/01/01")}
|
||||
locale="ru"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ justifySelf: "center" }}>
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
{rowArray[0]}
|
||||
{rowArray.map((item, index) => {
|
||||
return <div key={index}>{item}</div>;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ justifySelf: "center" }}>
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<Avatar
|
||||
size="max"
|
||||
role="admin"
|
||||
source=""
|
||||
userName=""
|
||||
editing={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ justifySelf: "center" }}>
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<Loader type="base" color="black" size={30} label="Loading..." />
|
||||
</div>
|
||||
<div style={{ padding: "8px 0", marginLeft: 45 }}>
|
||||
<Loader type="oval" color="black" size={30} label="Loading" />
|
||||
</div>
|
||||
<div style={{ padding: "8px 0", marginLeft: 45 }}>
|
||||
<Loader type="dual-ring" color="black" size={30} label="Loading" />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ justifySelf: "center" }}>
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<Scrollbar stype="mediumBlack" style={{ width: 300, height: 200 }}>
|
||||
================================================================
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||||
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
|
||||
sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||||
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
|
||||
sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
================================================================
|
||||
</Scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<TabContainer>{array_items}</TabContainer>
|
||||
</div>
|
||||
<div style={{ padding: "16px 0" }}>
|
||||
<ToggleContent label="ToggleContent">
|
||||
<span>Toggle content text</span>
|
||||
</ToggleContent>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
));
|
@ -9,7 +9,60 @@ const Fade = cssTransition({
|
||||
});
|
||||
|
||||
const StyledToastContainer = styled(ToastContainer)`
|
||||
width: 365px !important;
|
||||
width: 365px !important;
|
||||
z-index: 9999;
|
||||
-webkit-transform: translateZ(9999px);
|
||||
position: fixed;
|
||||
padding: 4px;
|
||||
width: 320px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
width: 100vw;
|
||||
padding: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.Toastify__progress-bar--animated {
|
||||
animation: Toastify__trackProgress linear 1 forwards;
|
||||
}
|
||||
.Toastify__toast-body {
|
||||
margin: auto 0;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.Toastify__close-button {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: 0.3s ease;
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.Toastify__close-button:focus,
|
||||
.Toastify__close-button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes Toastify__trackProgress {
|
||||
0% {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
to {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.Toastify__toast--success{
|
||||
background-color: #cae796;
|
||||
@ -97,6 +150,15 @@ width: 365px !important;
|
||||
/* .Toastily__toast or & > div (less productive) */
|
||||
.Toastify__toast
|
||||
{
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-height: 800px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user