From 2dbe05b46d6bdd78092f634c97b847c35d492819 Mon Sep 17 00:00:00 2001 From: Platon Rov Date: Wed, 29 Dec 2021 14:53:58 +0200 Subject: [PATCH 1/4] feat: storybook 6.4, eslint addon --- .eslintrc.json | 5 +- .storybook/custom/components/DocsPage.js | 8 +- .storybook/main.js | 6 +- .storybook/manager.js | 10 + .storybook/preview.js | 12 +- package-lock.json | 1564 ++++++++++------------ package.json | 9 +- 7 files changed, 767 insertions(+), 847 deletions(-) create mode 100644 .storybook/manager.js diff --git a/.eslintrc.json b/.eslintrc.json index 565c173adf..3738355930 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,5 +1,8 @@ { - "extends": "eslint:recommended", + "extends": [ + "eslint:recommended", + "plugin:storybook/recommended" + ], "parser": "babel-eslint", "env": { "node": true, diff --git a/.storybook/custom/components/DocsPage.js b/.storybook/custom/components/DocsPage.js index 4e6b838c7c..1a99e4294a 100644 --- a/.storybook/custom/components/DocsPage.js +++ b/.storybook/custom/components/DocsPage.js @@ -60,14 +60,14 @@ const DocsPage = () => { }); previousDirectionality.current = directionalityState; } - + if (!previousTheme.current || previousTheme.current !== themeState) { changeDocumentTheme(themeState, context?.parameters?.components || []) } }, [themeState, directionalityState]); // do not display disabled stories (dev only) - const stories = context.storyStore?.getStoriesForKind(context.kind)?.filter((s) => !s.parameters?.docs?.disable); + const stories = context.componentStories().filter(story => story.kind === context.kind && !story.parameters?.docs?.disable); const renderInfoLabels = (tags) => { let infoLabels = [] @@ -87,6 +87,7 @@ const DocsPage = () => { return ( <>
setThemeState(e.target.value)} onDirectionalityChange={(e) => setDirectionalityState(e.target.value)} /> + {/* wrapping intro content in the sb-docs-intro class for appropriate text color in all themes */}
@@ -95,12 +96,15 @@ const DocsPage = () => { {renderInfoLabels(context?.parameters?.tags)} {context?.parameters?.description && <Description desc={context?.parameters?.description} />} </div> + <Heading>Examples</Heading> + {stories.map((story) => story && <DocsStory key={story.id} {...story} expanded withToolbar />)} + <Community /> <Footer /> </> diff --git a/.storybook/main.js b/.storybook/main.js index 0e68108396..e71d1dc12b 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -37,6 +37,7 @@ module.exports = { test: /\.stories\.js?$/, use: [{ loader: 'story-description-loader' }], }); + config.module.rules.push({ test: /\.css?$/, use: [ @@ -46,8 +47,9 @@ module.exports = { injectType: 'lazyStyleTag' } } - ] + ] }); + config.plugins.push({ // Custom plugin to add scss files to webpack watcher apply: (compiler) => { @@ -57,12 +59,14 @@ module.exports = { dot: true, absolute: true, }); + files.forEach((file) => { comp.fileDependencies.add(path.resolve(file)); }); }); }, }); + config.plugins.push({ // Custom plugin to rebuild css styles for each scss change apply: (compiler) => { diff --git a/.storybook/manager.js b/.storybook/manager.js new file mode 100644 index 0000000000..8c57b449cf --- /dev/null +++ b/.storybook/manager.js @@ -0,0 +1,10 @@ +import { addons } from '@storybook/addons'; + +import fundamentals from './custom/fundamentals'; + +addons.setConfig({ + sidebar: { + showRoots: false + }, + theme: fundamentals +}); \ No newline at end of file diff --git a/.storybook/preview.js b/.storybook/preview.js index 58b0037d77..ce3dbd02af 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,16 +1,12 @@ -import fundamentals from './custom/fundamentals'; import { withCssResources } from "@storybook/addon-cssresources"; -import { withThemeProvider } from './custom/themeProvider'; import { DocsContainer } from '@storybook/addon-docs'; -import DocsPage from './custom/components/DocsPage'; -import { makeDecorator } from '@storybook/addons'; import prettify from 'pretty'; +import { withThemeProvider } from './custom/themeProvider'; +import DocsPage from './custom/components/DocsPage'; +import fundamentals from './custom/fundamentals'; + export const parameters = { - options: { - showRoots: true, - theme: fundamentals - }, cssresources: [ { id: "normalize", diff --git a/package-lock.json b/package-lock.json index 4b94ef93cc..5a253ee440 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1786,9 +1786,9 @@ } }, "@base2/pretty-print-object": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@base2/pretty-print-object/-/pretty-print-object-1.0.0.tgz", - "integrity": "sha512-4Th98KlMHr5+JkxfcoDT//6vY8vM+iSPrLNpHhRyLx2CFYi8e2RfqPLdpbnpo0Q5lQC5hNB79yes07zb02fvCw==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz", + "integrity": "sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==", "dev": true }, "@bcoe/v8-coverage": { @@ -2658,9 +2658,9 @@ "dev": true }, "@discoveryjs/json-ext": { - "version": "0.5.5", - "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.5.tgz", - "integrity": "sha512-6nFkfkmSeV/rqSaS4oWHgmpnYw194f6hmWF5is6b0J1naJZoiD0NTc9AiUwPHvWsowkjuHErCZT1wa0jg+BLIA==", + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz", + "integrity": "sha512-ws57AidsDvREKrZKYffXddNkyaF14iHNHm8VQnZH6t99E8gczjNN0GpvcGny0imC80yQ0tHz1xVUKk/KFQSUyA==", "dev": true }, "@emotion/cache": { @@ -4862,9 +4862,9 @@ } }, "@storybook/addon-docs": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.3.12.tgz", - "integrity": "sha512-iUrqJBMTOn2PgN8AWNQkfxfIPkh8pEg27t8UndMgfOpeGK/VWGw2UEifnA82flvntcilT4McxmVbRHkeBY9K5A==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.4.9.tgz", + "integrity": "sha512-sJvnbp6Z+e7B1+vDE8gZVhCg1eNotIa7bx9LYd1Y2QwJ4PEv9hE2YxnzmWt3NZJGtrn4gdGaMCk7pmksugHi7g==", "dev": true, "requires": { "@babel/core": "^7.12.10", @@ -4876,20 +4876,21 @@ "@mdx-js/loader": "^1.6.22", "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", - "@storybook/addons": "6.3.12", - "@storybook/api": "6.3.12", - "@storybook/builder-webpack4": "6.3.12", - "@storybook/client-api": "6.3.12", - "@storybook/client-logger": "6.3.12", - "@storybook/components": "6.3.12", - "@storybook/core": "6.3.12", - "@storybook/core-events": "6.3.12", - "@storybook/csf": "0.0.1", - "@storybook/csf-tools": "6.3.12", - "@storybook/node-logger": "6.3.12", - "@storybook/postinstall": "6.3.12", - "@storybook/source-loader": "6.3.12", - "@storybook/theming": "6.3.12", + "@storybook/addons": "6.4.9", + "@storybook/api": "6.4.9", + "@storybook/builder-webpack4": "6.4.9", + "@storybook/client-logger": "6.4.9", + "@storybook/components": "6.4.9", + "@storybook/core": "6.4.9", + "@storybook/core-events": "6.4.9", + "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/csf-tools": "6.4.9", + "@storybook/node-logger": "6.4.9", + "@storybook/postinstall": "6.4.9", + "@storybook/preview-web": "6.4.9", + "@storybook/source-loader": "6.4.9", + "@storybook/store": "6.4.9", + "@storybook/theming": "6.4.9", "acorn": "^7.4.1", "acorn-jsx": "^5.3.1", "acorn-walk": "^7.2.0", @@ -4901,11 +4902,12 @@ "html-tags": "^3.1.0", "js-string-escape": "^1.0.1", "loader-utils": "^2.0.0", - "lodash": "^4.17.20", + "lodash": "^4.17.21", + "nanoid": "^3.1.23", "p-limit": "^3.1.0", - "prettier": "~2.2.1", + "prettier": "^2.2.1", "prop-types": "^15.7.2", - "react-element-to-jsx-string": "^14.3.2", + "react-element-to-jsx-string": "^14.3.4", "regenerator-runtime": "^0.13.7", "remark-external-links": "^8.0.0", "remark-slug": "^6.0.0", @@ -4913,21 +4915,13 @@ "util-deprecate": "^1.0.2" }, "dependencies": { - "@storybook/addons": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.3.12.tgz", - "integrity": "sha512-UgoMyr7Qr0FS3ezt8u6hMEcHgyynQS9ucr5mAwZky3wpXRPFyUTmMto9r4BBUdqyUvTUj/LRKIcmLBfj+/l0Fg==", + "@storybook/csf": { + "version": "0.0.2--canary.87bc651.0", + "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.87bc651.0.tgz", + "integrity": "sha512-ajk1Uxa+rBpFQHKrCcTmJyQBXZ5slfwHVEaKlkuFaW77it8RgbPJp/ccna3sgoi8oZ7FkkOyvv1Ve4SmwFqRqw==", "dev": true, "requires": { - "@storybook/api": "6.3.12", - "@storybook/channels": "6.3.12", - "@storybook/client-logger": "6.3.12", - "@storybook/core-events": "6.3.12", - "@storybook/router": "6.3.12", - "@storybook/theming": "6.3.12", - "core-js": "^3.8.2", - "global": "^4.4.0", - "regenerator-runtime": "^0.13.7" + "lodash": "^4.17.15" } }, "p-limit": { @@ -5086,20 +5080,22 @@ } }, "@storybook/addon-storyshots": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/addon-storyshots/-/addon-storyshots-6.3.12.tgz", - "integrity": "sha512-plpy/q3pPpXtK9DyofE0trTeCZIyU0Z+baybbxltsM/tKFuQxbHSxTwgluq/7LOMkaRPgbddGyHForHoRLjsWg==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/addon-storyshots/-/addon-storyshots-6.4.9.tgz", + "integrity": "sha512-sTj+o1k2JbKbJ0Dc0aGmiQP1Vw4lNugDEugFTYv3xBZebyLDfv7WHJ1Yhy+h0ZtMg3Tfuie7i8Ukr6c7/jPhtg==", "dev": true, "requires": { "@jest/transform": "^26.6.2", - "@storybook/addons": "6.3.12", - "@storybook/client-api": "6.3.12", - "@storybook/core": "6.3.12", - "@storybook/core-common": "6.3.12", + "@storybook/addons": "6.4.9", + "@storybook/babel-plugin-require-context-hook": "1.0.1", + "@storybook/client-api": "6.4.9", + "@storybook/core": "6.4.9", + "@storybook/core-client": "6.4.9", + "@storybook/core-common": "6.4.9", + "@storybook/csf": "0.0.2--canary.87bc651.0", "@types/glob": "^7.1.3", "@types/jest": "^26.0.16", "@types/jest-specific-snapshot": "^0.5.3", - "babel-plugin-require-context-hook": "^1.0.0", "core-js": "^3.8.2", "glob": "^7.1.6", "global": "^4.4.0", @@ -5112,21 +5108,13 @@ "ts-dedent": "^2.0.0" }, "dependencies": { - "@storybook/addons": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.3.12.tgz", - "integrity": "sha512-UgoMyr7Qr0FS3ezt8u6hMEcHgyynQS9ucr5mAwZky3wpXRPFyUTmMto9r4BBUdqyUvTUj/LRKIcmLBfj+/l0Fg==", + "@storybook/csf": { + "version": "0.0.2--canary.87bc651.0", + "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.87bc651.0.tgz", + "integrity": "sha512-ajk1Uxa+rBpFQHKrCcTmJyQBXZ5slfwHVEaKlkuFaW77it8RgbPJp/ccna3sgoi8oZ7FkkOyvv1Ve4SmwFqRqw==", "dev": true, "requires": { - "@storybook/api": "6.3.12", - "@storybook/channels": "6.3.12", - "@storybook/client-logger": "6.3.12", - "@storybook/core-events": "6.3.12", - "@storybook/router": "6.3.12", - "@storybook/theming": "6.3.12", - "core-js": "^3.8.2", - "global": "^4.4.0", - "regenerator-runtime": "^0.13.7" + "lodash": "^4.17.15" } } } @@ -5593,26 +5581,23 @@ } }, "@storybook/api": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.3.12.tgz", - "integrity": "sha512-LScRXUeCWEW/OP+jiooNMQICVdusv7azTmULxtm72fhkXFRiQs2CdRNTiqNg46JLLC9z95f1W+pGK66X6HiiQA==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.4.9.tgz", + "integrity": "sha512-U+YKcDQg8xal9sE5eSMXB9vcqk8fD1pSyewyAjjbsW5hV0B3L3i4u7z/EAD9Ujbnor+Cvxq+XGvp+Qnc5Gd40A==", "dev": true, "requires": { - "@reach/router": "^1.3.4", - "@storybook/channels": "6.3.12", - "@storybook/client-logger": "6.3.12", - "@storybook/core-events": "6.3.12", - "@storybook/csf": "0.0.1", - "@storybook/router": "6.3.12", + "@storybook/channels": "6.4.9", + "@storybook/client-logger": "6.4.9", + "@storybook/core-events": "6.4.9", + "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/router": "6.4.9", "@storybook/semver": "^7.3.2", - "@storybook/theming": "6.3.12", - "@types/reach__router": "^1.3.7", + "@storybook/theming": "6.4.9", "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", "global": "^4.4.0", - "lodash": "^4.17.20", + "lodash": "^4.17.21", "memoizerific": "^1.11.3", - "qs": "^6.10.0", "regenerator-runtime": "^0.13.7", "store2": "^2.12.0", "telejson": "^5.3.2", @@ -5620,56 +5605,27 @@ "util-deprecate": "^1.0.2" }, "dependencies": { - "@storybook/semver": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz", - "integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==", - "dev": true, - "requires": { - "core-js": "^3.6.5", - "find-up": "^4.1.0" - } - }, - "find-up": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", - "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "dev": true, - "requires": { - "locate-path": "^5.0.0", - "path-exists": "^4.0.0" - } - }, - "locate-path": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", - "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "dev": true, - "requires": { - "p-locate": "^4.1.0" - } - }, - "p-locate": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", - "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", + "@storybook/csf": { + "version": "0.0.2--canary.87bc651.0", + "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.87bc651.0.tgz", + "integrity": "sha512-ajk1Uxa+rBpFQHKrCcTmJyQBXZ5slfwHVEaKlkuFaW77it8RgbPJp/ccna3sgoi8oZ7FkkOyvv1Ve4SmwFqRqw==", "dev": true, "requires": { - "p-limit": "^2.2.0" + "lodash": "^4.17.15" } - }, - "path-exists": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "dev": true } } }, + "@storybook/babel-plugin-require-context-hook": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@storybook/babel-plugin-require-context-hook/-/babel-plugin-require-context-hook-1.0.1.tgz", + "integrity": "sha512-WM4vjgSVi8epvGiYfru7BtC3f0tGwNs7QK3Uc4xQn4t5hHQvISnCqbNrHdDYmNW56Do+bBztE8SwP6NGUvd7ww==", + "dev": true + }, "@storybook/builder-webpack4": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/builder-webpack4/-/builder-webpack4-6.3.12.tgz", - "integrity": "sha512-Dlm5Fc1svqpFDnVPZdAaEBiM/IDZHMV3RfEGbUTY/ZC0q8b/Ug1czzp/w0aTIjOFRuBDcG6IcplikaqHL8CJLg==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/builder-webpack4/-/builder-webpack4-6.4.9.tgz", + "integrity": "sha512-nDbXDd3A8dvalCiuBZuUT6/GQP14+fuxTj5g+AppCgV1gLO45lXWtX75Hc0IbZrIQte6tDg5xeFQamZSLPMcGg==", "dev": true, "requires": { "@babel/core": "^7.12.10", @@ -5693,34 +5649,34 @@ "@babel/preset-env": "^7.12.11", "@babel/preset-react": "^7.12.10", "@babel/preset-typescript": "^7.12.7", - "@storybook/addons": "6.3.12", - "@storybook/api": "6.3.12", - "@storybook/channel-postmessage": "6.3.12", - "@storybook/channels": "6.3.12", - "@storybook/client-api": "6.3.12", - "@storybook/client-logger": "6.3.12", - "@storybook/components": "6.3.12", - "@storybook/core-common": "6.3.12", - "@storybook/core-events": "6.3.12", - "@storybook/node-logger": "6.3.12", - "@storybook/router": "6.3.12", + "@storybook/addons": "6.4.9", + "@storybook/api": "6.4.9", + "@storybook/channel-postmessage": "6.4.9", + "@storybook/channels": "6.4.9", + "@storybook/client-api": "6.4.9", + "@storybook/client-logger": "6.4.9", + "@storybook/components": "6.4.9", + "@storybook/core-common": "6.4.9", + "@storybook/core-events": "6.4.9", + "@storybook/node-logger": "6.4.9", + "@storybook/preview-web": "6.4.9", + "@storybook/router": "6.4.9", "@storybook/semver": "^7.3.2", - "@storybook/theming": "6.3.12", - "@storybook/ui": "6.3.12", + "@storybook/store": "6.4.9", + "@storybook/theming": "6.4.9", + "@storybook/ui": "6.4.9", "@types/node": "^14.0.10", "@types/webpack": "^4.41.26", "autoprefixer": "^9.8.6", - "babel-loader": "^8.2.2", + "babel-loader": "^8.0.0", "babel-plugin-macros": "^2.8.0", "babel-plugin-polyfill-corejs3": "^0.1.0", "case-sensitive-paths-webpack-plugin": "^2.3.0", "core-js": "^3.8.2", "css-loader": "^3.6.0", - "dotenv-webpack": "^1.8.0", "file-loader": "^6.2.0", "find-up": "^5.0.0", "fork-ts-checker-webpack-plugin": "^4.1.6", - "fs-extra": "^9.0.1", "glob": "^7.1.6", "glob-promise": "^3.4.0", "global": "^4.4.0", @@ -5730,7 +5686,7 @@ "postcss-flexbugs-fixes": "^4.2.1", "postcss-loader": "^4.2.0", "raw-loader": "^4.0.2", - "react-dev-utils": "^11.0.3", + "react-dev-utils": "^11.0.4", "stable": "^0.1.8", "style-loader": "^1.3.0", "terser-webpack-plugin": "^4.2.3", @@ -5740,7 +5696,7 @@ "webpack": "4", "webpack-dev-middleware": "^3.7.3", "webpack-filter-warnings-plugin": "^1.2.1", - "webpack-hot-middleware": "^2.25.0", + "webpack-hot-middleware": "^2.25.1", "webpack-virtual-modules": "^0.2.2" }, "dependencies": { @@ -5760,49 +5716,10 @@ "semver": "^6.1.2" } }, - "@storybook/addons": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.3.12.tgz", - "integrity": "sha512-UgoMyr7Qr0FS3ezt8u6hMEcHgyynQS9ucr5mAwZky3wpXRPFyUTmMto9r4BBUdqyUvTUj/LRKIcmLBfj+/l0Fg==", - "dev": true, - "requires": { - "@storybook/api": "6.3.12", - "@storybook/channels": "6.3.12", - "@storybook/client-logger": "6.3.12", - "@storybook/core-events": "6.3.12", - "@storybook/router": "6.3.12", - "@storybook/theming": "6.3.12", - "core-js": "^3.8.2", - "global": "^4.4.0", - "regenerator-runtime": "^0.13.7" - } - }, - "@storybook/semver": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz", - "integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==", - "dev": true, - "requires": { - "core-js": "^3.6.5", - "find-up": "^4.1.0" - }, - "dependencies": { - "find-up": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", - "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "dev": true, - "requires": { - "locate-path": "^5.0.0", - "path-exists": "^4.0.0" - } - } - } - }, "@types/node": { - "version": "14.17.27", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.17.27.tgz", - "integrity": "sha512-94+Ahf9IcaDuJTle/2b+wzvjmutxXAEXU6O81JHblYXUg2BDG+dnBy7VxIPHKAyEEDHzCMQydTJuWvrE+Aanzw==", + "version": "14.18.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.3.tgz", + "integrity": "sha512-GtTH2crF4MtOIrrAa+jgTV9JX/PfoUCYr6MiZw7O/dkZu5b6gm5dc1nAL0jwGo4ortSBBtGyeVaxdC8X6V+pLg==", "dev": true }, "babel-plugin-polyfill-corejs3": { @@ -5844,47 +5761,6 @@ "requires": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" - }, - "dependencies": { - "locate-path": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", - "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", - "dev": true, - "requires": { - "p-locate": "^5.0.0" - } - }, - "p-limit": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", - "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", - "dev": true, - "requires": { - "yocto-queue": "^0.1.0" - } - }, - "p-locate": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", - "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", - "dev": true, - "requires": { - "p-limit": "^3.0.2" - } - } - } - }, - "fs-extra": { - "version": "9.1.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz", - "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==", - "dev": true, - "requires": { - "at-least-node": "^1.0.0", - "graceful-fs": "^4.2.0", - "jsonfile": "^6.0.1", - "universalify": "^2.0.0" } }, "json5": { @@ -5908,21 +5784,30 @@ } }, "locate-path": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", - "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", + "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", "dev": true, "requires": { - "p-locate": "^4.1.0" + "p-locate": "^5.0.0" + } + }, + "p-limit": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", + "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", + "dev": true, + "requires": { + "yocto-queue": "^0.1.0" } }, "p-locate": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", - "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", + "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", "dev": true, "requires": { - "p-limit": "^2.2.0" + "p-limit": "^3.0.2" } }, "path-exists": { @@ -5967,9 +5852,9 @@ } }, "loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz", + "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==", "dev": true, "requires": { "big.js": "^5.2.2", @@ -5982,24 +5867,37 @@ } }, "@storybook/channel-postmessage": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.3.12.tgz", - "integrity": "sha512-Ou/2Ga3JRTZ/4sSv7ikMgUgLTeZMsXXWLXuscz4oaYhmOqAU9CrJw0G1NitwBgK/+qC83lEFSLujHkWcoQDOKg==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.4.9.tgz", + "integrity": "sha512-0Oif4e6/oORv4oc2tHhIRts9faE/ID9BETn4uqIUWSl2CX1wYpKYDm04rEg3M6WvSzsi+6fzoSFvkr9xC5Ns2w==", "dev": true, "requires": { - "@storybook/channels": "6.3.12", - "@storybook/client-logger": "6.3.12", - "@storybook/core-events": "6.3.12", + "@storybook/channels": "6.4.9", + "@storybook/client-logger": "6.4.9", + "@storybook/core-events": "6.4.9", "core-js": "^3.8.2", "global": "^4.4.0", "qs": "^6.10.0", "telejson": "^5.3.2" } }, + "@storybook/channel-websocket": { + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/channel-websocket/-/channel-websocket-6.4.9.tgz", + "integrity": "sha512-R1O5yrNtN+dIAghqMXUqoaH7XWBcrKi5miVRn7QelKG3qZwPL8HQa7gIPc/b6S2D6hD3kQdSuv/zTIjjMg7wyw==", + "dev": true, + "requires": { + "@storybook/channels": "6.4.9", + "@storybook/client-logger": "6.4.9", + "core-js": "^3.8.2", + "global": "^4.4.0", + "telejson": "^5.3.2" + } + }, "@storybook/channels": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.3.12.tgz", - "integrity": "sha512-l4sA+g1PdUV8YCbgs47fIKREdEQAKNdQIZw0b7BfTvY9t0x5yfBywgQhYON/lIeiNGz2OlIuD+VUtqYfCtNSyw==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.4.9.tgz", + "integrity": "sha512-DNW1qDg+1WFS2aMdGh658WJXh8xBXliO5KAn0786DKcWCsKjfsPPQg/QCHczHK0+s5SZyzQT5aOBb4kTRHELQA==", "dev": true, "requires": { "core-js": "^3.8.2", @@ -6008,54 +5906,48 @@ } }, "@storybook/client-api": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.3.12.tgz", - "integrity": "sha512-xnW+lKKK2T774z+rOr9Wopt1aYTStfb86PSs9p3Fpnc2Btcftln+C3NtiHZl8Ccqft8Mz/chLGgewRui6tNI8g==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.4.9.tgz", + "integrity": "sha512-1IljlTr+ea2pIr6oiPhygORtccOdEb7SqaVzWDfLCHOhUnJ2Ka5UY9ADqDa35jvSSdRdynfk9Yl5/msY0yY1yg==", "dev": true, "requires": { - "@storybook/addons": "6.3.12", - "@storybook/channel-postmessage": "6.3.12", - "@storybook/channels": "6.3.12", - "@storybook/client-logger": "6.3.12", - "@storybook/core-events": "6.3.12", - "@storybook/csf": "0.0.1", + "@storybook/addons": "6.4.9", + "@storybook/channel-postmessage": "6.4.9", + "@storybook/channels": "6.4.9", + "@storybook/client-logger": "6.4.9", + "@storybook/core-events": "6.4.9", + "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/store": "6.4.9", "@types/qs": "^6.9.5", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", "global": "^4.4.0", - "lodash": "^4.17.20", + "lodash": "^4.17.21", "memoizerific": "^1.11.3", "qs": "^6.10.0", "regenerator-runtime": "^0.13.7", - "stable": "^0.1.8", "store2": "^2.12.0", + "synchronous-promise": "^2.0.15", "ts-dedent": "^2.0.0", "util-deprecate": "^1.0.2" }, "dependencies": { - "@storybook/addons": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.3.12.tgz", - "integrity": "sha512-UgoMyr7Qr0FS3ezt8u6hMEcHgyynQS9ucr5mAwZky3wpXRPFyUTmMto9r4BBUdqyUvTUj/LRKIcmLBfj+/l0Fg==", + "@storybook/csf": { + "version": "0.0.2--canary.87bc651.0", + "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.87bc651.0.tgz", + "integrity": "sha512-ajk1Uxa+rBpFQHKrCcTmJyQBXZ5slfwHVEaKlkuFaW77it8RgbPJp/ccna3sgoi8oZ7FkkOyvv1Ve4SmwFqRqw==", "dev": true, "requires": { - "@storybook/api": "6.3.12", - "@storybook/channels": "6.3.12", - "@storybook/client-logger": "6.3.12", - "@storybook/core-events": "6.3.12", - "@storybook/router": "6.3.12", - "@storybook/theming": "6.3.12", - "core-js": "^3.8.2", - "global": "^4.4.0", - "regenerator-runtime": "^0.13.7" + "lodash": "^4.17.15" } } } }, "@storybook/client-logger": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.3.12.tgz", - "integrity": "sha512-zNDsamZvHnuqLznDdP9dUeGgQ9TyFh4ray3t1VGO7ZqWVZ2xtVCCXjDvMnOXI2ifMpX5UsrOvshIPeE9fMBmiQ==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.4.9.tgz", + "integrity": "sha512-BVagmmHcuKDZ/XROADfN3tiolaDW2qG0iLmDhyV1gONnbGE6X5Qm19Jt2VYu3LvjKF1zMPSWm4mz7HtgdwKbuQ==", "dev": true, "requires": { "core-js": "^3.8.2", @@ -6063,15 +5955,15 @@ } }, "@storybook/components": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.3.12.tgz", - "integrity": "sha512-kdQt8toUjynYAxDLrJzuG7YSNL6as1wJoyzNUaCfG06YPhvIAlKo7le9tS2mThVFN5e9nbKrW3N1V1sp6ypZXQ==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.4.9.tgz", + "integrity": "sha512-uOUR97S6kjptkMCh15pYNM1vAqFXtpyneuonmBco5vADJb3ds0n2a8NeVd+myIbhIXn55x0OHKiSwBH/u7swCQ==", "dev": true, "requires": { "@popperjs/core": "^2.6.0", - "@storybook/client-logger": "6.3.12", - "@storybook/csf": "0.0.1", - "@storybook/theming": "6.3.12", + "@storybook/client-logger": "6.4.9", + "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/theming": "6.4.9", "@types/color-convert": "^2.0.0", "@types/overlayscrollbars": "^1.12.0", "@types/react-syntax-highlighter": "11.0.5", @@ -6079,7 +5971,7 @@ "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", "global": "^4.4.0", - "lodash": "^4.17.20", + "lodash": "^4.17.21", "markdown-to-jsx": "^7.1.3", "memoizerific": "^1.11.3", "overlayscrollbars": "^1.13.1", @@ -6094,6 +5986,15 @@ "util-deprecate": "^1.0.2" }, "dependencies": { + "@storybook/csf": { + "version": "0.0.2--canary.87bc651.0", + "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.87bc651.0.tgz", + "integrity": "sha512-ajk1Uxa+rBpFQHKrCcTmJyQBXZ5slfwHVEaKlkuFaW77it8RgbPJp/ccna3sgoi8oZ7FkkOyvv1Ve4SmwFqRqw==", + "dev": true, + "requires": { + "lodash": "^4.17.15" + } + }, "color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -6112,33 +6013,36 @@ } }, "@storybook/core": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.3.12.tgz", - "integrity": "sha512-FJm2ns8wk85hXWKslLWiUWRWwS9KWRq7jlkN6M9p57ghFseSGr4W71Orcoab4P3M7jI97l5yqBfppbscinE74g==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.4.9.tgz", + "integrity": "sha512-Mzhiy13loMSd3PCygK3t7HIT3X3L35iZmbe6+2xVbVmc/3ypCmq4PQALCUoDOGk37Ifrhop6bo6sl4s9YQ6UFw==", "dev": true, "requires": { - "@storybook/core-client": "6.3.12", - "@storybook/core-server": "6.3.12" + "@storybook/core-client": "6.4.9", + "@storybook/core-server": "6.4.9" } }, "@storybook/core-client": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-6.3.12.tgz", - "integrity": "sha512-8Smd9BgZHJpAdevLKQYinwtjSyCZAuBMoetP4P5hnn53mWl0NFbrHFaAdT+yNchDLZQUbf7Y18VmIqEH+RCR5w==", - "dev": true, - "requires": { - "@storybook/addons": "6.3.12", - "@storybook/channel-postmessage": "6.3.12", - "@storybook/client-api": "6.3.12", - "@storybook/client-logger": "6.3.12", - "@storybook/core-events": "6.3.12", - "@storybook/csf": "0.0.1", - "@storybook/ui": "6.3.12", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-6.4.9.tgz", + "integrity": "sha512-LZSpTtvBlpcn+Ifh0jQXlm/8wva2zZ2v13yxYIxX6tAwQvmB54U0N4VdGVmtkiszEp7TQUAzA8Pcyp4GWE+UMA==", + "dev": true, + "requires": { + "@storybook/addons": "6.4.9", + "@storybook/channel-postmessage": "6.4.9", + "@storybook/channel-websocket": "6.4.9", + "@storybook/client-api": "6.4.9", + "@storybook/client-logger": "6.4.9", + "@storybook/core-events": "6.4.9", + "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/preview-web": "6.4.9", + "@storybook/store": "6.4.9", + "@storybook/ui": "6.4.9", "airbnb-js-shims": "^2.2.1", "ansi-to-html": "^0.6.11", "core-js": "^3.8.2", "global": "^4.4.0", - "lodash": "^4.17.20", + "lodash": "^4.17.21", "qs": "^6.10.0", "regenerator-runtime": "^0.13.7", "ts-dedent": "^2.0.0", @@ -6146,29 +6050,21 @@ "util-deprecate": "^1.0.2" }, "dependencies": { - "@storybook/addons": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.3.12.tgz", - "integrity": "sha512-UgoMyr7Qr0FS3ezt8u6hMEcHgyynQS9ucr5mAwZky3wpXRPFyUTmMto9r4BBUdqyUvTUj/LRKIcmLBfj+/l0Fg==", - "dev": true, + "@storybook/csf": { + "version": "0.0.2--canary.87bc651.0", + "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.87bc651.0.tgz", + "integrity": "sha512-ajk1Uxa+rBpFQHKrCcTmJyQBXZ5slfwHVEaKlkuFaW77it8RgbPJp/ccna3sgoi8oZ7FkkOyvv1Ve4SmwFqRqw==", + "dev": true, "requires": { - "@storybook/api": "6.3.12", - "@storybook/channels": "6.3.12", - "@storybook/client-logger": "6.3.12", - "@storybook/core-events": "6.3.12", - "@storybook/router": "6.3.12", - "@storybook/theming": "6.3.12", - "core-js": "^3.8.2", - "global": "^4.4.0", - "regenerator-runtime": "^0.13.7" + "lodash": "^4.17.15" } } } }, "@storybook/core-common": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-6.3.12.tgz", - "integrity": "sha512-xlHs2QXELq/moB4MuXjYOczaxU64BIseHsnFBLyboJYN6Yso3qihW5RB7cuJlGohkjb4JwY74dvfT4Ww66rkBA==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-6.4.9.tgz", + "integrity": "sha512-wVHRfUGnj/Tv8nGjv128NDQ5Zp6c63rSXd1lYLzfZPTJmGOz4rpPPez2IZSnnDwbAWeqUSMekFVZPj4v6yuujQ==", "dev": true, "requires": { "@babel/core": "^7.12.10", @@ -6192,13 +6088,11 @@ "@babel/preset-react": "^7.12.10", "@babel/preset-typescript": "^7.12.7", "@babel/register": "^7.12.1", - "@storybook/node-logger": "6.3.12", + "@storybook/node-logger": "6.4.9", "@storybook/semver": "^7.3.2", - "@types/glob-base": "^0.3.0", - "@types/micromatch": "^4.0.1", "@types/node": "^14.0.10", "@types/pretty-hrtime": "^1.0.0", - "babel-loader": "^8.2.2", + "babel-loader": "^8.0.0", "babel-plugin-macros": "^3.0.1", "babel-plugin-polyfill-corejs3": "^0.1.0", "chalk": "^4.1.0", @@ -6207,15 +6101,18 @@ "file-system-cache": "^1.0.5", "find-up": "^5.0.0", "fork-ts-checker-webpack-plugin": "^6.0.4", + "fs-extra": "^9.0.1", "glob": "^7.1.6", - "glob-base": "^0.3.0", + "handlebars": "^4.7.7", "interpret": "^2.2.0", "json5": "^2.1.3", "lazy-universal-dotenv": "^3.0.1", - "micromatch": "^4.0.2", + "picomatch": "^2.3.0", "pkg-dir": "^5.0.0", "pretty-hrtime": "^1.0.3", "resolve-from": "^5.0.0", + "slash": "^3.0.0", + "telejson": "^5.3.2", "ts-dedent": "^2.0.0", "util-deprecate": "^1.0.2", "webpack": "4" @@ -6237,32 +6134,10 @@ "semver": "^6.1.2" } }, - "@storybook/semver": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz", - "integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==", - "dev": true, - "requires": { - "core-js": "^3.6.5", - "find-up": "^4.1.0" - }, - "dependencies": { - "find-up": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", - "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "dev": true, - "requires": { - "locate-path": "^5.0.0", - "path-exists": "^4.0.0" - } - } - } - }, "@types/node": { - "version": "14.17.27", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.17.27.tgz", - "integrity": "sha512-94+Ahf9IcaDuJTle/2b+wzvjmutxXAEXU6O81JHblYXUg2BDG+dnBy7VxIPHKAyEEDHzCMQydTJuWvrE+Aanzw==", + "version": "14.18.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.3.tgz", + "integrity": "sha512-GtTH2crF4MtOIrrAa+jgTV9JX/PfoUCYr6MiZw7O/dkZu5b6gm5dc1nAL0jwGo4ortSBBtGyeVaxdC8X6V+pLg==", "dev": true }, "ansi-styles": { @@ -6328,41 +6203,12 @@ "requires": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" - }, - "dependencies": { - "locate-path": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", - "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", - "dev": true, - "requires": { - "p-locate": "^5.0.0" - } - }, - "p-limit": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", - "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", - "dev": true, - "requires": { - "yocto-queue": "^0.1.0" - } - }, - "p-locate": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", - "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", - "dev": true, - "requires": { - "p-limit": "^3.0.2" - } - } } }, "fork-ts-checker-webpack-plugin": { - "version": "6.3.4", - "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.3.4.tgz", - "integrity": "sha512-z0dns2NXH9NHH0wpW6iuUmyXYRN9BI2Lqnv+RCdL+9GXSW6tKUqYnwf+h3ZaucJsbsrdobdxuOELGgm1xVZITA==", + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.0.tgz", + "integrity": "sha512-cS178Y+xxtIjEUorcHddKS7yCMlrDPV31mt47blKKRfMd70Kxu5xruAFE2o9sDY6wVC5deuob/u/alD04YYHnw==", "dev": true, "requires": { "@babel/code-frame": "^7.8.3", @@ -6423,21 +6269,30 @@ "dev": true }, "locate-path": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", - "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", + "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", "dev": true, "requires": { - "p-locate": "^4.1.0" + "p-locate": "^5.0.0" + } + }, + "p-limit": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", + "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", + "dev": true, + "requires": { + "yocto-queue": "^0.1.0" } }, "p-locate": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", - "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", + "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", "dev": true, "requires": { - "p-limit": "^2.2.0" + "p-limit": "^3.0.2" } }, "path-exists": { @@ -6478,70 +6333,77 @@ } }, "@storybook/core-events": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.3.12.tgz", - "integrity": "sha512-SXfD7xUUMazaeFkB92qOTUV8Y/RghE4SkEYe5slAdjeocSaH7Nz2WV0rqNEgChg0AQc+JUI66no8L9g0+lw4Gw==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.4.9.tgz", + "integrity": "sha512-YhU2zJr6wzvh5naYYuy/0UKNJ/SaXu73sIr0Tx60ur3bL08XkRg7eZ9vBhNBTlAa35oZqI0iiGCh0ljiX7yEVQ==", "dev": true, "requires": { "core-js": "^3.8.2" } }, "@storybook/core-server": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-6.3.12.tgz", - "integrity": "sha512-T/Mdyi1FVkUycdyOnhXvoo3d9nYXLQFkmaJkltxBFLzAePAJUSgAsPL9odNC3+p8Nr2/UDsDzvu/Ow0IF0mzLQ==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-6.4.9.tgz", + "integrity": "sha512-Ht/e17/SNW9BgdvBsnKmqNrlZ6CpHeVsClEUnauMov8I5rxjvKBVmI/UsbJJIy6H6VLiL/RwrA3RvLoAoZE8dA==", "dev": true, "requires": { "@discoveryjs/json-ext": "^0.5.3", - "@storybook/builder-webpack4": "6.3.12", - "@storybook/core-client": "6.3.12", - "@storybook/core-common": "6.3.12", - "@storybook/csf-tools": "6.3.12", - "@storybook/manager-webpack4": "6.3.12", - "@storybook/node-logger": "6.3.12", + "@storybook/builder-webpack4": "6.4.9", + "@storybook/core-client": "6.4.9", + "@storybook/core-common": "6.4.9", + "@storybook/core-events": "6.4.9", + "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/csf-tools": "6.4.9", + "@storybook/manager-webpack4": "6.4.9", + "@storybook/node-logger": "6.4.9", "@storybook/semver": "^7.3.2", + "@storybook/store": "6.4.9", "@types/node": "^14.0.10", "@types/node-fetch": "^2.5.7", "@types/pretty-hrtime": "^1.0.0", "@types/webpack": "^4.41.26", "better-opn": "^2.1.1", - "boxen": "^4.2.0", + "boxen": "^5.1.2", "chalk": "^4.1.0", "cli-table3": "0.6.0", "commander": "^6.2.1", "compression": "^1.7.4", "core-js": "^3.8.2", - "cpy": "^8.1.1", + "cpy": "^8.1.2", "detect-port": "^1.3.0", "express": "^4.17.1", "file-system-cache": "^1.0.5", "fs-extra": "^9.0.1", "globby": "^11.0.2", "ip": "^1.1.5", + "lodash": "^4.17.21", "node-fetch": "^2.6.1", "pretty-hrtime": "^1.0.3", "prompts": "^2.4.0", "regenerator-runtime": "^0.13.7", "serve-favicon": "^2.5.0", + "slash": "^3.0.0", + "telejson": "^5.3.3", "ts-dedent": "^2.0.0", "util-deprecate": "^1.0.2", - "webpack": "4" + "watchpack": "^2.2.0", + "webpack": "4", + "ws": "^8.2.3" }, "dependencies": { - "@storybook/semver": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz", - "integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==", + "@storybook/csf": { + "version": "0.0.2--canary.87bc651.0", + "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.87bc651.0.tgz", + "integrity": "sha512-ajk1Uxa+rBpFQHKrCcTmJyQBXZ5slfwHVEaKlkuFaW77it8RgbPJp/ccna3sgoi8oZ7FkkOyvv1Ve4SmwFqRqw==", "dev": true, "requires": { - "core-js": "^3.6.5", - "find-up": "^4.1.0" + "lodash": "^4.17.15" } }, "@types/node": { - "version": "14.17.27", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.17.27.tgz", - "integrity": "sha512-94+Ahf9IcaDuJTle/2b+wzvjmutxXAEXU6O81JHblYXUg2BDG+dnBy7VxIPHKAyEEDHzCMQydTJuWvrE+Aanzw==", + "version": "14.18.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.3.tgz", + "integrity": "sha512-GtTH2crF4MtOIrrAa+jgTV9JX/PfoUCYr6MiZw7O/dkZu5b6gm5dc1nAL0jwGo4ortSBBtGyeVaxdC8X6V+pLg==", "dev": true }, "ansi-styles": { @@ -6584,35 +6446,6 @@ "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==", "dev": true }, - "debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, - "requires": { - "ms": "2.0.0" - } - }, - "detect-port": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.3.0.tgz", - "integrity": "sha512-E+B1gzkl2gqxt1IhUzwjrxBKRqx1UzC3WLONHinn8S3T6lwV/agVCyitiFOsGJ/eYuEUBvD71MZHy3Pv1G9doQ==", - "dev": true, - "requires": { - "address": "^1.0.1", - "debug": "^2.6.0" - } - }, - "find-up": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", - "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "dev": true, - "requires": { - "locate-path": "^5.0.0", - "path-exists": "^4.0.0" - } - }, "fs-extra": { "version": "9.1.0", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz", @@ -6625,6 +6458,12 @@ "universalify": "^2.0.0" } }, + "glob-to-regexp": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz", + "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==", + "dev": true + }, "globby": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz", @@ -6645,44 +6484,30 @@ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", "dev": true }, - "locate-path": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", - "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", "dev": true, "requires": { - "p-locate": "^4.1.0" + "has-flag": "^4.0.0" } }, - "ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", - "dev": true - }, - "p-locate": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", - "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", + "watchpack": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz", + "integrity": "sha512-x0t0JuydIo8qCNctdDrn1OzH/qDzk2+rdCOC3YzumZ42fiMqmQ7T3xQurykYMhYfHaPHTp4ZxAx2NfUo1K6QaA==", "dev": true, "requires": { - "p-limit": "^2.2.0" + "glob-to-regexp": "^0.4.1", + "graceful-fs": "^4.1.2" } }, - "path-exists": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "ws": { + "version": "8.4.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.4.0.tgz", + "integrity": "sha512-IHVsKe2pjajSUIl4KYMQOdlyliovpEPquKkqbwswulszzI7r0SfQrxnXdWAEqOlDCLrVSJzo+O1hAwdog2sKSQ==", "dev": true - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "requires": { - "has-flag": "^4.0.0" - } } } }, @@ -6696,11 +6521,12 @@ } }, "@storybook/csf-tools": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-6.3.12.tgz", - "integrity": "sha512-wNrX+99ajAXxLo0iRwrqw65MLvCV6SFC0XoPLYrtBvyKr+hXOOnzIhO2f5BNEii8velpC2gl2gcLKeacpVYLqA==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-6.4.9.tgz", + "integrity": "sha512-zbgsx9vY5XOA9bBmyw+KyuRspFXAjEJ6I3d/6Z3G1kNBeOEj9i3DT7O99Rd/THfL/3mWl8DJ/7CJVPk1ZYxunA==", "dev": true, "requires": { + "@babel/core": "^7.12.10", "@babel/generator": "^7.12.11", "@babel/parser": "^7.12.11", "@babel/plugin-transform-react-jsx": "^7.12.12", @@ -6708,15 +6534,26 @@ "@babel/traverse": "^7.12.11", "@babel/types": "^7.12.11", "@mdx-js/mdx": "^1.6.22", - "@storybook/csf": "^0.0.1", + "@storybook/csf": "0.0.2--canary.87bc651.0", "core-js": "^3.8.2", "fs-extra": "^9.0.1", + "global": "^4.4.0", "js-string-escape": "^1.0.1", - "lodash": "^4.17.20", - "prettier": "~2.2.1", - "regenerator-runtime": "^0.13.7" + "lodash": "^4.17.21", + "prettier": "^2.2.1", + "regenerator-runtime": "^0.13.7", + "ts-dedent": "^2.0.0" }, "dependencies": { + "@storybook/csf": { + "version": "0.0.2--canary.87bc651.0", + "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.87bc651.0.tgz", + "integrity": "sha512-ajk1Uxa+rBpFQHKrCcTmJyQBXZ5slfwHVEaKlkuFaW77it8RgbPJp/ccna3sgoi8oZ7FkkOyvv1Ve4SmwFqRqw==", + "dev": true, + "requires": { + "lodash": "^4.17.15" + } + }, "fs-extra": { "version": "9.1.0", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz", @@ -6732,15 +6569,18 @@ } }, "@storybook/html": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/html/-/html-6.3.12.tgz", - "integrity": "sha512-UFo1ImPBv8LsFJ/d3FCrRpSZgDX0Pkin8KjidBg3gBJCWzRIFEP+soqyWUCxmpu5v9UKws2s96LDPYm63pMWbw==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/html/-/html-6.4.9.tgz", + "integrity": "sha512-x2nFqV1oadkr2i4naB/O+3eTnjLdkogfuqTtw/nY0xDEDf8ow7xfkokjnYtsrZQ6Uks+vfvst4QXWt9S2wYF1w==", "dev": true, "requires": { - "@storybook/addons": "6.3.12", - "@storybook/client-api": "6.3.12", - "@storybook/core": "6.3.12", - "@storybook/core-common": "6.3.12", + "@storybook/addons": "6.4.9", + "@storybook/client-api": "6.4.9", + "@storybook/core": "6.4.9", + "@storybook/core-common": "6.4.9", + "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/preview-web": "6.4.9", + "@storybook/store": "6.4.9", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -6752,21 +6592,13 @@ "ts-dedent": "^2.0.0" }, "dependencies": { - "@storybook/addons": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.3.12.tgz", - "integrity": "sha512-UgoMyr7Qr0FS3ezt8u6hMEcHgyynQS9ucr5mAwZky3wpXRPFyUTmMto9r4BBUdqyUvTUj/LRKIcmLBfj+/l0Fg==", + "@storybook/csf": { + "version": "0.0.2--canary.87bc651.0", + "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.87bc651.0.tgz", + "integrity": "sha512-ajk1Uxa+rBpFQHKrCcTmJyQBXZ5slfwHVEaKlkuFaW77it8RgbPJp/ccna3sgoi8oZ7FkkOyvv1Ve4SmwFqRqw==", "dev": true, "requires": { - "@storybook/api": "6.3.12", - "@storybook/channels": "6.3.12", - "@storybook/client-logger": "6.3.12", - "@storybook/core-events": "6.3.12", - "@storybook/router": "6.3.12", - "@storybook/theming": "6.3.12", - "core-js": "^3.8.2", - "global": "^4.4.0", - "regenerator-runtime": "^0.13.7" + "lodash": "^4.17.15" } }, "react": { @@ -6805,28 +6637,27 @@ } }, "@storybook/manager-webpack4": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/manager-webpack4/-/manager-webpack4-6.3.12.tgz", - "integrity": "sha512-OkPYNrHXg2yZfKmEfTokP6iKx4OLTr0gdI5yehi/bLEuQCSHeruxBc70Dxm1GBk1Mrf821wD9WqMXNDjY5Qtug==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/manager-webpack4/-/manager-webpack4-6.4.9.tgz", + "integrity": "sha512-828x3rqMuzBNSb13MSDo2nchY7fuywh+8+Vk+fn00MvBYJjogd5RQFx5ocwhHzmwXbnESIerlGwe81AzMck8ng==", "dev": true, "requires": { "@babel/core": "^7.12.10", "@babel/plugin-transform-template-literals": "^7.12.1", "@babel/preset-react": "^7.12.10", - "@storybook/addons": "6.3.12", - "@storybook/core-client": "6.3.12", - "@storybook/core-common": "6.3.12", - "@storybook/node-logger": "6.3.12", - "@storybook/theming": "6.3.12", - "@storybook/ui": "6.3.12", + "@storybook/addons": "6.4.9", + "@storybook/core-client": "6.4.9", + "@storybook/core-common": "6.4.9", + "@storybook/node-logger": "6.4.9", + "@storybook/theming": "6.4.9", + "@storybook/ui": "6.4.9", "@types/node": "^14.0.10", "@types/webpack": "^4.41.26", - "babel-loader": "^8.2.2", + "babel-loader": "^8.0.0", "case-sensitive-paths-webpack-plugin": "^2.3.0", "chalk": "^4.1.0", "core-js": "^3.8.2", "css-loader": "^3.6.0", - "dotenv-webpack": "^1.8.0", "express": "^4.17.1", "file-loader": "^6.2.0", "file-system-cache": "^1.0.5", @@ -6849,27 +6680,10 @@ "webpack-virtual-modules": "^0.2.2" }, "dependencies": { - "@storybook/addons": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.3.12.tgz", - "integrity": "sha512-UgoMyr7Qr0FS3ezt8u6hMEcHgyynQS9ucr5mAwZky3wpXRPFyUTmMto9r4BBUdqyUvTUj/LRKIcmLBfj+/l0Fg==", - "dev": true, - "requires": { - "@storybook/api": "6.3.12", - "@storybook/channels": "6.3.12", - "@storybook/client-logger": "6.3.12", - "@storybook/core-events": "6.3.12", - "@storybook/router": "6.3.12", - "@storybook/theming": "6.3.12", - "core-js": "^3.8.2", - "global": "^4.4.0", - "regenerator-runtime": "^0.13.7" - } - }, "@types/node": { - "version": "14.17.27", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.17.27.tgz", - "integrity": "sha512-94+Ahf9IcaDuJTle/2b+wzvjmutxXAEXU6O81JHblYXUg2BDG+dnBy7VxIPHKAyEEDHzCMQydTJuWvrE+Aanzw==", + "version": "14.18.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.3.tgz", + "integrity": "sha512-GtTH2crF4MtOIrrAa+jgTV9JX/PfoUCYr6MiZw7O/dkZu5b6gm5dc1nAL0jwGo4ortSBBtGyeVaxdC8X6V+pLg==", "dev": true }, "ansi-styles": { @@ -7044,9 +6858,9 @@ } }, "loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz", + "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==", "dev": true, "requires": { "big.js": "^5.2.2", @@ -7068,18 +6882,24 @@ } }, "@storybook/node-logger": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.3.12.tgz", - "integrity": "sha512-iktOem/Ls2+dsZY9PhPeC6T1QhX/y7OInP88neLsqEPEbB2UXca3Ydv7OZBhBVbvN25W45b05MRzbtNUxYLNRw==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.4.9.tgz", + "integrity": "sha512-giil8dA85poH+nslKHIS9tSxp4MP4ensOec7el6GwKiqzAQXITrm3b7gw61ETj39jAQeLIcQYGHLq1oqQo4/YQ==", "dev": true, "requires": { "@types/npmlog": "^4.1.2", "chalk": "^4.1.0", "core-js": "^3.8.2", - "npmlog": "^4.1.2", + "npmlog": "^5.0.1", "pretty-hrtime": "^1.0.3" }, "dependencies": { + "ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true + }, "ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", @@ -7089,6 +6909,16 @@ "color-convert": "^2.0.1" } }, + "are-we-there-yet": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz", + "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==", + "dev": true, + "requires": { + "delegates": "^1.0.0", + "readable-stream": "^3.6.0" + } + }, "chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -7114,12 +6944,61 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "gauge": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz", + "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==", + "dev": true, + "requires": { + "aproba": "^1.0.3 || ^2.0.0", + "color-support": "^1.1.2", + "console-control-strings": "^1.0.0", + "has-unicode": "^2.0.1", + "object-assign": "^4.1.1", + "signal-exit": "^3.0.0", + "string-width": "^4.2.3", + "strip-ansi": "^6.0.1", + "wide-align": "^1.1.2" + } + }, "has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", "dev": true }, + "npmlog": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz", + "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==", + "dev": true, + "requires": { + "are-we-there-yet": "^2.0.0", + "console-control-strings": "^1.1.0", + "gauge": "^3.0.0", + "set-blocking": "^2.0.0" + } + }, + "string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "requires": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + } + }, + "strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "requires": { + "ansi-regex": "^5.0.1" + } + }, "supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -7132,9 +7011,9 @@ } }, "@storybook/postinstall": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-6.3.12.tgz", - "integrity": "sha512-HkZ+abtZ3W6JbGPS6K7OSnNXbwaTwNNd5R02kRs4gV9B29XsBPDtFT6vIwzM3tmVQC7ihL5a8ceWp2OvzaNOuw==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-6.4.9.tgz", + "integrity": "sha512-LNI5ku+Q4DI7DD3Y8liYVgGPasp8r/5gzNLSJZ1ad03OW/mASjhSsOKp2eD8Jxud2T5JDe3/yKH9u/LP6SepBQ==", "dev": true, "requires": { "core-js": "^3.8.2" @@ -7146,21 +7025,57 @@ "integrity": "sha512-o9Iz6wxPeNENrQa2mKlsDKynBfqU2uWaRP80HeWp4TkGgf7/x3DVF2O7yi9N0x/PI1qzzTTpxlQ90D62XmpiTw==", "dev": true }, + "@storybook/preview-web": { + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/preview-web/-/preview-web-6.4.9.tgz", + "integrity": "sha512-fMB/akK14oc+4FBkeVJBtZQdxikOraXQSVn6zoVR93WVDR7JVeV+oz8rxjuK3n6ZEWN87iKH946k4jLoZ95tdw==", + "dev": true, + "requires": { + "@storybook/addons": "6.4.9", + "@storybook/channel-postmessage": "6.4.9", + "@storybook/client-logger": "6.4.9", + "@storybook/core-events": "6.4.9", + "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/store": "6.4.9", + "ansi-to-html": "^0.6.11", + "core-js": "^3.8.2", + "global": "^4.4.0", + "lodash": "^4.17.21", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7", + "synchronous-promise": "^2.0.15", + "ts-dedent": "^2.0.0", + "unfetch": "^4.2.0", + "util-deprecate": "^1.0.2" + }, + "dependencies": { + "@storybook/csf": { + "version": "0.0.2--canary.87bc651.0", + "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.87bc651.0.tgz", + "integrity": "sha512-ajk1Uxa+rBpFQHKrCcTmJyQBXZ5slfwHVEaKlkuFaW77it8RgbPJp/ccna3sgoi8oZ7FkkOyvv1Ve4SmwFqRqw==", + "dev": true, + "requires": { + "lodash": "^4.17.15" + } + } + } + }, "@storybook/router": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.3.12.tgz", - "integrity": "sha512-G/pNGCnrJRetCwyEZulHPT+YOcqEj/vkPVDTUfii2qgqukup6K0cjwgd7IukAURnAnnzTi1gmgFuEKUi8GE/KA==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.4.9.tgz", + "integrity": "sha512-GT2KtVHo/mBjxDBFB5ZtVJVf8vC+3p5kRlQC4jao68caVp7H24ikPOkcY54VnQwwe4A1aXpGbJXUyTisEPFlhQ==", "dev": true, "requires": { - "@reach/router": "^1.3.4", - "@storybook/client-logger": "6.3.12", - "@types/reach__router": "^1.3.7", + "@storybook/client-logger": "6.4.9", "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", "global": "^4.4.0", - "lodash": "^4.17.20", + "history": "5.0.0", + "lodash": "^4.17.21", "memoizerific": "^1.11.3", "qs": "^6.10.0", + "react-router": "^6.0.0", + "react-router-dom": "^6.0.0", "ts-dedent": "^2.0.0" } }, @@ -7211,44 +7126,36 @@ } }, "@storybook/source-loader": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.3.12.tgz", - "integrity": "sha512-Lfe0LOJGqAJYkZsCL8fhuQOeFSCgv8xwQCt4dkcBd0Rw5zT2xv0IXDOiIOXGaWBMDtrJUZt/qOXPEPlL81Oaqg==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.4.9.tgz", + "integrity": "sha512-J/Jpcc15hnWa2DB/EZ4gVJvdsY3b3CDIGW/NahuNXk36neS+g4lF3qqVNAEqQ1pPZ0O8gMgazyZPGm0MHwUWlw==", "dev": true, "requires": { - "@storybook/addons": "6.3.12", - "@storybook/client-logger": "6.3.12", - "@storybook/csf": "0.0.1", + "@storybook/addons": "6.4.9", + "@storybook/client-logger": "6.4.9", + "@storybook/csf": "0.0.2--canary.87bc651.0", "core-js": "^3.8.2", "estraverse": "^5.2.0", "global": "^4.4.0", "loader-utils": "^2.0.0", - "lodash": "^4.17.20", - "prettier": "~2.2.1", + "lodash": "^4.17.21", + "prettier": "^2.2.1", "regenerator-runtime": "^0.13.7" }, "dependencies": { - "@storybook/addons": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.3.12.tgz", - "integrity": "sha512-UgoMyr7Qr0FS3ezt8u6hMEcHgyynQS9ucr5mAwZky3wpXRPFyUTmMto9r4BBUdqyUvTUj/LRKIcmLBfj+/l0Fg==", + "@storybook/csf": { + "version": "0.0.2--canary.87bc651.0", + "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.87bc651.0.tgz", + "integrity": "sha512-ajk1Uxa+rBpFQHKrCcTmJyQBXZ5slfwHVEaKlkuFaW77it8RgbPJp/ccna3sgoi8oZ7FkkOyvv1Ve4SmwFqRqw==", "dev": true, "requires": { - "@storybook/api": "6.3.12", - "@storybook/channels": "6.3.12", - "@storybook/client-logger": "6.3.12", - "@storybook/core-events": "6.3.12", - "@storybook/router": "6.3.12", - "@storybook/theming": "6.3.12", - "core-js": "^3.8.2", - "global": "^4.4.0", - "regenerator-runtime": "^0.13.7" + "lodash": "^4.17.15" } }, "estraverse": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz", - "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", + "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", "dev": true } } @@ -7401,133 +7308,59 @@ } }, "@storybook/theming": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.3.12.tgz", - "integrity": "sha512-wOJdTEa/VFyFB2UyoqyYGaZdym6EN7RALuQOAMT6zHA282FBmKw8nL5DETHEbctpnHdcrMC/391teK4nNSrdOA==", - "dev": true, - "requires": { - "@emotion/core": "^10.1.1", - "@emotion/is-prop-valid": "^0.8.6", - "@emotion/styled": "^10.0.27", - "@storybook/client-logger": "6.3.12", - "core-js": "^3.8.2", - "deep-object-diff": "^1.1.0", - "emotion-theming": "^10.0.27", - "global": "^4.4.0", - "memoizerific": "^1.11.3", - "polished": "^4.0.5", - "resolve-from": "^5.0.0", - "ts-dedent": "^2.0.0" - } - }, - "@storybook/ui": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-6.3.12.tgz", - "integrity": "sha512-PC2yEz4JMfarq7rUFbeA3hCA+31p5es7YPEtxLRvRwIZhtL0P4zQUfHpotb3KgWdoAIfZesAuoIQwMPQmEFYrw==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.4.9.tgz", + "integrity": "sha512-Do6GH6nKjxfnBg6djcIYAjss5FW9SRKASKxLYxX2RyWJBpz0m/8GfcGcRyORy0yFTk6jByA3Hs+WFH3GnEbWkw==", "dev": true, - "requires": { - "@emotion/core": "^10.1.1", - "@storybook/addons": "6.3.12", - "@storybook/api": "6.3.12", - "@storybook/channels": "6.3.12", - "@storybook/client-logger": "6.3.12", - "@storybook/components": "6.3.12", - "@storybook/core-events": "6.3.12", - "@storybook/router": "6.3.12", - "@storybook/semver": "^7.3.2", - "@storybook/theming": "6.3.12", - "@types/markdown-to-jsx": "^6.11.3", - "copy-to-clipboard": "^3.3.1", - "core-js": "^3.8.2", - "core-js-pure": "^3.8.2", - "downshift": "^6.0.15", - "emotion-theming": "^10.0.27", - "fuse.js": "^3.6.1", - "global": "^4.4.0", - "lodash": "^4.17.20", - "markdown-to-jsx": "^6.11.4", - "memoizerific": "^1.11.3", - "polished": "^4.0.5", - "qs": "^6.10.0", - "react-draggable": "^4.4.3", - "react-helmet-async": "^1.0.7", - "react-sizeme": "^3.0.1", - "regenerator-runtime": "^0.13.7", - "resolve-from": "^5.0.0", - "store2": "^2.12.0" - }, - "dependencies": { - "@storybook/addons": { - "version": "6.3.12", - "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.3.12.tgz", - "integrity": "sha512-UgoMyr7Qr0FS3ezt8u6hMEcHgyynQS9ucr5mAwZky3wpXRPFyUTmMto9r4BBUdqyUvTUj/LRKIcmLBfj+/l0Fg==", - "dev": true, - "requires": { - "@storybook/api": "6.3.12", - "@storybook/channels": "6.3.12", - "@storybook/client-logger": "6.3.12", - "@storybook/core-events": "6.3.12", - "@storybook/router": "6.3.12", - "@storybook/theming": "6.3.12", - "core-js": "^3.8.2", - "global": "^4.4.0", - "regenerator-runtime": "^0.13.7" - } - }, - "@storybook/semver": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz", - "integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==", - "dev": true, - "requires": { - "core-js": "^3.6.5", - "find-up": "^4.1.0" - } - }, - "find-up": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", - "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "dev": true, - "requires": { - "locate-path": "^5.0.0", - "path-exists": "^4.0.0" - } - }, - "locate-path": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", - "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "dev": true, - "requires": { - "p-locate": "^4.1.0" - } - }, - "markdown-to-jsx": { - "version": "6.11.4", - "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-6.11.4.tgz", - "integrity": "sha512-3lRCD5Sh+tfA52iGgfs/XZiw33f7fFX9Bn55aNnVNUd2GzLDkOWyKYYD8Yju2B1Vn+feiEdgJs8T6Tg0xNokPw==", - "dev": true, - "requires": { - "prop-types": "^15.6.2", - "unquote": "^1.1.0" - } - }, - "p-locate": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", - "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", - "dev": true, - "requires": { - "p-limit": "^2.2.0" - } - }, - "path-exists": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "dev": true - } + "requires": { + "@emotion/core": "^10.1.1", + "@emotion/is-prop-valid": "^0.8.6", + "@emotion/styled": "^10.0.27", + "@storybook/client-logger": "6.4.9", + "core-js": "^3.8.2", + "deep-object-diff": "^1.1.0", + "emotion-theming": "^10.0.27", + "global": "^4.4.0", + "memoizerific": "^1.11.3", + "polished": "^4.0.5", + "resolve-from": "^5.0.0", + "ts-dedent": "^2.0.0" + } + }, + "@storybook/ui": { + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-6.4.9.tgz", + "integrity": "sha512-lJbsaMTH4SyhqUTmt+msSYI6fKSSfOnrzZVu6bQ73+MfRyGKh1ki2Nyhh+w8BiGEIOz02WlEpZC0y11FfgEgXw==", + "dev": true, + "requires": { + "@emotion/core": "^10.1.1", + "@storybook/addons": "6.4.9", + "@storybook/api": "6.4.9", + "@storybook/channels": "6.4.9", + "@storybook/client-logger": "6.4.9", + "@storybook/components": "6.4.9", + "@storybook/core-events": "6.4.9", + "@storybook/router": "6.4.9", + "@storybook/semver": "^7.3.2", + "@storybook/theming": "6.4.9", + "copy-to-clipboard": "^3.3.1", + "core-js": "^3.8.2", + "core-js-pure": "^3.8.2", + "downshift": "^6.0.15", + "emotion-theming": "^10.0.27", + "fuse.js": "^3.6.1", + "global": "^4.4.0", + "lodash": "^4.17.21", + "markdown-to-jsx": "^7.1.3", + "memoizerific": "^1.11.3", + "polished": "^4.0.5", + "qs": "^6.10.0", + "react-draggable": "^4.4.3", + "react-helmet-async": "^1.0.7", + "react-sizeme": "^3.0.1", + "regenerator-runtime": "^0.13.7", + "resolve-from": "^5.0.0", + "store2": "^2.12.0" } }, "@stylelint/postcss-css-in-js": { @@ -7761,12 +7594,6 @@ "@babel/types": "^7.3.0" } }, - "@types/braces": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/braces/-/braces-3.0.1.tgz", - "integrity": "sha512-+euflG6ygo4bn0JHtn4pYqcXwRtLvElQ7/nnjDu7iYG56H0+OhCd7d6Ug0IE3WcFpZozBKW2+80FUbv5QGk5AQ==", - "dev": true - }, "@types/color-convert": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.0.tgz", @@ -7808,12 +7635,6 @@ "@types/node": "*" } }, - "@types/glob-base": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/@types/glob-base/-/glob-base-0.3.0.tgz", - "integrity": "sha1-pYHWiDR+EOUN18F9byiAoQNUMZ0=", - "dev": true - }, "@types/graceful-fs": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz", @@ -7899,15 +7720,6 @@ "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", "dev": true }, - "@types/markdown-to-jsx": { - "version": "6.11.3", - "resolved": "https://registry.npmjs.org/@types/markdown-to-jsx/-/markdown-to-jsx-6.11.3.tgz", - "integrity": "sha512-30nFYpceM/ZEvhGiqWjm5quLUxNeld0HCzJEXMZZDpq53FPkS85mTwkWtCXzCqq8s5JYLgM5W392a02xn8Bdaw==", - "dev": true, - "requires": { - "@types/react": "*" - } - }, "@types/mdast": { "version": "3.0.10", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz", @@ -7917,15 +7729,6 @@ "@types/unist": "*" } }, - "@types/micromatch": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@types/micromatch/-/micromatch-4.0.2.tgz", - "integrity": "sha512-oqXqVb0ci19GtH0vOA/U2TmHTcRY9kuZl4mqUxe0QmJAlIW13kzhuK5pi1i9+ngav8FjpSb9FVS/GE00GLX1VA==", - "dev": true, - "requires": { - "@types/braces": "*" - } - }, "@types/minimatch": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz", @@ -8694,6 +8497,12 @@ "integrity": "sha1-gTWEAhliqenm/QOflA0S9WynhZ4=", "dev": true }, + "ansi-html-community": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz", + "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==", + "dev": true + }, "ansi-regex": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", @@ -9625,12 +9434,6 @@ "@babel/helper-define-polyfill-provider": "^0.2.2" } }, - "babel-plugin-require-context-hook": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/babel-plugin-require-context-hook/-/babel-plugin-require-context-hook-1.0.0.tgz", - "integrity": "sha512-EMZD1563QUqLhzrqcThk759RhuNVX/ZJdrtGK6drwzgvnR+ARjWyXIHPbu+tUNaMGtPz/gQeAM2M6VUw2UiUeA==", - "dev": true - }, "babel-plugin-syntax-jsx": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", @@ -10206,19 +10009,19 @@ "dev": true }, "boxen": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/boxen/-/boxen-4.2.0.tgz", - "integrity": "sha512-eB4uT9RGzg2odpER62bBwSLvUeGC+WbRjjyyFhGsKnc8wp/m0+hQsMUvUe3H2V0D5vw0nBdO1hCJoZo5mKeuIQ==", + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/boxen/-/boxen-5.1.2.tgz", + "integrity": "sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==", "dev": true, "requires": { "ansi-align": "^3.0.0", - "camelcase": "^5.3.1", - "chalk": "^3.0.0", - "cli-boxes": "^2.2.0", - "string-width": "^4.1.0", - "term-size": "^2.1.0", - "type-fest": "^0.8.1", - "widest-line": "^3.1.0" + "camelcase": "^6.2.0", + "chalk": "^4.1.0", + "cli-boxes": "^2.2.1", + "string-width": "^4.2.2", + "type-fest": "^0.20.2", + "widest-line": "^3.1.0", + "wrap-ansi": "^7.0.0" }, "dependencies": { "ansi-styles": { @@ -10230,10 +10033,16 @@ "color-convert": "^2.0.1" } }, + "camelcase": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.1.tgz", + "integrity": "sha512-tVI4q5jjFV5CavAU8DXfza/TJcZutVKo/5Foskmsqcm0MsL91moHvwiGNnqaa2o6PF/7yT5ikDRcVcl8Rj6LCA==", + "dev": true + }, "chalk": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", - "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", "dev": true, "requires": { "ansi-styles": "^4.1.0", @@ -10271,9 +10080,9 @@ } }, "type-fest": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", - "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", "dev": true } } @@ -13291,6 +13100,33 @@ "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==", "dev": true }, + "detect-port": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.3.0.tgz", + "integrity": "sha512-E+B1gzkl2gqxt1IhUzwjrxBKRqx1UzC3WLONHinn8S3T6lwV/agVCyitiFOsGJ/eYuEUBvD71MZHy3Pv1G9doQ==", + "dev": true, + "requires": { + "address": "^1.0.1", + "debug": "^2.6.0" + }, + "dependencies": { + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + } + } + }, "detect-port-alt": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz", @@ -13504,38 +13340,12 @@ "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==", "dev": true }, - "dotenv-defaults": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-1.1.1.tgz", - "integrity": "sha512-6fPRo9o/3MxKvmRZBD3oNFdxODdhJtIy1zcJeUSCs6HCy4tarUpd+G67UTU9tF6OWXeSPqsm4fPAB+2eY9Rt9Q==", - "dev": true, - "requires": { - "dotenv": "^6.2.0" - }, - "dependencies": { - "dotenv": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-6.2.0.tgz", - "integrity": "sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==", - "dev": true - } - } - }, "dotenv-expand": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz", "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==", "dev": true }, - "dotenv-webpack": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-1.8.0.tgz", - "integrity": "sha512-o8pq6NLBehtrqA8Jv8jFQNtG9nhRtVqmoD4yWbgUyoU3+9WBlPe+c2EAiaJok9RB28QvrWvdWLZGeTT5aATDMg==", - "dev": true, - "requires": { - "dotenv-defaults": "^1.0.2" - } - }, "dotgitignore": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/dotgitignore/-/dotgitignore-2.1.0.tgz", @@ -13936,9 +13746,9 @@ } }, "es5-shim": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.6.2.tgz", - "integrity": "sha512-n0XTVMGps+Deyr38jtqKPR5F5hb9owYeRQcKJW39eFvzUk/u/9Ww315werRzbiNMnHCUw/YHDPBphTlEnzdi+A==", + "version": "4.6.4", + "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.6.4.tgz", + "integrity": "sha512-Z0f7OUYZ8JfqT12d3Tgh2ErxIH5Shaz97GE8qyDG9quxb2Hmh2vvFHlOFjx6lzyD0CRgvJfnNYcisjdbRp7MPw==", "dev": true }, "es6-iterator": { @@ -14611,6 +14421,139 @@ "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==", "dev": true }, + "eslint-plugin-storybook": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.5.5.tgz", + "integrity": "sha512-o4BxfmYTi1mCNdSjBKb59XCkRP4zzd/eLImXiF3KU4i8bQxG8aF+WDQ1b+gM5ixejmmsTyw/cBkOZQmPk1Kb2g==", + "dev": true, + "requires": { + "@storybook/csf": "^0.0.1", + "@typescript-eslint/experimental-utils": "^5.3.0", + "requireindex": "^1.1.0" + }, + "dependencies": { + "@typescript-eslint/experimental-utils": { + "version": "5.8.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.8.0.tgz", + "integrity": "sha512-KN5FvNH71bhZ8fKtL+lhW7bjm7cxs1nt+hrDZWIqb6ViCffQcWyLunGrgvISgkRojIDcXIsH+xlFfI4RCDA0xA==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.9", + "@typescript-eslint/scope-manager": "5.8.0", + "@typescript-eslint/types": "5.8.0", + "@typescript-eslint/typescript-estree": "5.8.0", + "eslint-scope": "^5.1.1", + "eslint-utils": "^3.0.0" + } + }, + "@typescript-eslint/scope-manager": { + "version": "5.8.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.8.0.tgz", + "integrity": "sha512-x82CYJsLOjPCDuFFEbS6e7K1QEWj7u5Wk1alw8A+gnJiYwNnDJk0ib6PCegbaPMjrfBvFKa7SxE3EOnnIQz2Gg==", + "dev": true, + "requires": { + "@typescript-eslint/types": "5.8.0", + "@typescript-eslint/visitor-keys": "5.8.0" + } + }, + "@typescript-eslint/types": { + "version": "5.8.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.8.0.tgz", + "integrity": "sha512-LdCYOqeqZWqCMOmwFnum6YfW9F3nKuxJiR84CdIRN5nfHJ7gyvGpXWqL/AaW0k3Po0+wm93ARAsOdzlZDPCcXg==", + "dev": true + }, + "@typescript-eslint/typescript-estree": { + "version": "5.8.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.8.0.tgz", + "integrity": "sha512-srfeZ3URdEcUsSLbkOFqS7WoxOqn8JNil2NSLO9O+I2/Uyc85+UlfpEvQHIpj5dVts7KKOZnftoJD/Fdv0L7nQ==", + "dev": true, + "requires": { + "@typescript-eslint/types": "5.8.0", + "@typescript-eslint/visitor-keys": "5.8.0", + "debug": "^4.3.2", + "globby": "^11.0.4", + "is-glob": "^4.0.3", + "semver": "^7.3.5", + "tsutils": "^3.21.0" + } + }, + "@typescript-eslint/visitor-keys": { + "version": "5.8.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.8.0.tgz", + "integrity": "sha512-+HDIGOEMnqbxdAHegxvnOqESUH6RWFRR2b8qxP1W9CZnnYh4Usz6MBL+2KMAgPk/P0o9c1HqnYtwzVH6GTIqug==", + "dev": true, + "requires": { + "@typescript-eslint/types": "5.8.0", + "eslint-visitor-keys": "^3.0.0" + } + }, + "eslint-scope": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", + "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", + "dev": true, + "requires": { + "esrecurse": "^4.3.0", + "estraverse": "^4.1.1" + } + }, + "eslint-utils": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz", + "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==", + "dev": true, + "requires": { + "eslint-visitor-keys": "^2.0.0" + }, + "dependencies": { + "eslint-visitor-keys": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz", + "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==", + "dev": true + } + } + }, + "eslint-visitor-keys": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.1.0.tgz", + "integrity": "sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA==", + "dev": true + }, + "globby": { + "version": "11.0.4", + "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz", + "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==", + "dev": true, + "requires": { + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.1.1", + "ignore": "^5.1.4", + "merge2": "^1.3.0", + "slash": "^3.0.0" + } + }, + "is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "requires": { + "is-extglob": "^2.1.1" + } + }, + "semver": { + "version": "7.3.5", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", + "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", + "dev": true, + "requires": { + "lru-cache": "^6.0.0" + } + } + } + }, "eslint-plugin-testing-library": { "version": "3.10.2", "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-3.10.2.tgz", @@ -16424,42 +16367,6 @@ "path-is-absolute": "^1.0.0" } }, - "glob-base": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz", - "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=", - "dev": true, - "requires": { - "glob-parent": "^2.0.0", - "is-glob": "^2.0.0" - }, - "dependencies": { - "glob-parent": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz", - "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=", - "dev": true, - "requires": { - "is-glob": "^2.0.0" - } - }, - "is-extglob": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz", - "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=", - "dev": true - }, - "is-glob": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz", - "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=", - "dev": true, - "requires": { - "is-extglob": "^1.0.0" - } - } - } - }, "glob-parent": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", @@ -18162,12 +18069,12 @@ "dev": true }, "is-weakref": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.1.tgz", - "integrity": "sha512-b2jKc2pQZjaeFYWEf7ScFj+Be1I+PXmlu572Q8coTXZ+LD/QQZ7ShPMst8h16riVgyXTQwUsFEl74mDvc/3MHQ==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz", + "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==", "dev": true, "requires": { - "call-bind": "^1.0.0" + "call-bind": "^1.0.2" } }, "is-whitespace": { @@ -26203,9 +26110,9 @@ "dev": true }, "prettier": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz", - "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz", + "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==", "dev": true }, "pretty": { @@ -27096,19 +27003,20 @@ } }, "react-element-to-jsx-string": { - "version": "14.3.2", - "resolved": "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.2.tgz", - "integrity": "sha512-WZbvG72cjLXAxV7VOuSzuHEaI3RHj10DZu8EcKQpkKcAj7+qAkG5XUeSdX5FXrA0vPrlx0QsnAzZEBJwzV0e+w==", + "version": "14.3.4", + "resolved": "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.4.tgz", + "integrity": "sha512-t4ZwvV6vwNxzujDQ+37bspnLwA4JlgUPWhLjBJWsNIDceAf6ZKUTCjdm08cN6WeZ5pTMKiCJkmAYnpmR4Bm+dg==", "dev": true, "requires": { - "@base2/pretty-print-object": "1.0.0", - "is-plain-object": "3.0.1" + "@base2/pretty-print-object": "1.0.1", + "is-plain-object": "5.0.0", + "react-is": "17.0.2" }, "dependencies": { "is-plain-object": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz", - "integrity": "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", "dev": true } } @@ -27126,9 +27034,9 @@ "dev": true }, "react-helmet-async": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.1.2.tgz", - "integrity": "sha512-LTTzDDkyIleT/JJ6T/uqx7Y8qi1EuPPSiJawQY/nHHz0h7SPDT6HxP1YDDQx/fzcVxCqpWEEMS3QdrSrNkJYhg==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.2.2.tgz", + "integrity": "sha512-XgSQezeCbLfCxdZhDA3T/g27XZKnOYyOkruopTLSJj8RvFZwdXnM4djnfYaiBSDzOidDgTo1jcEozoRu/+P9UQ==", "dev": true, "requires": { "@babel/runtime": "^7.12.5", @@ -28736,6 +28644,12 @@ "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", "dev": true }, + "requireindex": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz", + "integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==", + "dev": true + }, "requires-port": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", @@ -31485,12 +31399,6 @@ } } }, - "term-size": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.1.tgz", - "integrity": "sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==", - "dev": true - }, "terminal-link": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz", @@ -33793,12 +33701,6 @@ "strip-ansi": "^6.0.0" }, "dependencies": { - "ansi-html-community": { - "version": "0.0.8", - "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz", - "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==", - "dev": true - }, "html-entities": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz", diff --git a/package.json b/package.json index 99ab3bddb3..20fed8d186 100644 --- a/package.json +++ b/package.json @@ -63,15 +63,15 @@ "@sap-theming/theming-base-content": "11.1.34", "@storybook/addon-a11y": "6.4.9", "@storybook/addon-actions": "6.4.9", - "@storybook/addon-controls": "^6.3.12", + "@storybook/addon-controls": "6.4.9", "@storybook/addon-cssresources": "6.2.9", - "@storybook/addon-docs": "6.3.12", + "@storybook/addon-docs": "6.4.9", "@storybook/addon-links": "6.4.9", - "@storybook/addon-storyshots": "6.3.12", + "@storybook/addon-storyshots": "6.4.9", "@storybook/addon-toolbars": "6.4.9", "@storybook/addon-viewport": "6.4.9", "@storybook/addons": "6.4.9", - "@storybook/html": "6.3.12", + "@storybook/html": "6.4.9", "@storybook/preset-scss": "^1.0.3", "babel-eslint": "^10.1.0", "babel-jest": "^27.1.0", @@ -84,6 +84,7 @@ "css-loader": "^5.2.4", "cssnano": "^4.1.11", "eslint": "^7.25.0", + "eslint-plugin-storybook": "^0.5.5", "fs-extra": "^10.0.0", "gh-pages": "^3.2.3", "github-assistant": "^0.3.3", From 6892757446faf52e16983aab8d1bace1a8f6e31d Mon Sep 17 00:00:00 2001 From: Platon Rov <platon.rov@gmail.com> Date: Wed, 29 Dec 2021 15:51:03 +0200 Subject: [PATCH 2/4] fix: eslint errors --- stories/action-bar/action-bar.stories.js | 51 +- stories/action-sheet/action-sheet.stories.js | 34 +- stories/avatar-group/avatar-group.stories.js | 24 +- stories/avatar/avatar.stories.js | 42 +- stories/bar/bar.stories.js | 2 +- stories/breadcrumb/breadcrumb.stories.js | 10 +- .../busy-indicator/busy-indicator.stories.js | 14 +- stories/button/button.stories.js | 118 +-- stories/calendar/calendar.stories.js | 62 +- stories/card/card.stories.js | 76 +- stories/carousel/carousel.stories.js | 306 +++--- stories/checkbox/checkbox.stories.js | 28 +- stories/code/code.stories.js | 10 +- .../combobox-input/combobox-input.stories.js | 42 +- stories/context-menu/context-menu.stories.js | 4 +- stories/counter/counter.stories.js | 23 +- stories/datepicker/datepicker.stories.js | 50 +- stories/dialog/dialog.stories.js | 30 +- .../dnd-icon-tab-bar.stories.js | 20 +- stories/dynamic-page/dynamic-page.stories.js | 348 +++---- .../dynamic-side-content.stories.js | 31 +- stories/facets/facets.stories.js | 131 ++- stories/feed-input/feed-input.stories.js | 169 ++- stories/feed-list/feed-list.stories.js | 982 +++++++++--------- .../file-uploader/file-uploader.stories.js | 98 +- .../fixed-card-layout.stories.js | 6 +- .../flexible-column-layout.stories.js | 37 +- stories/fn-avatar/fn-avatar.stories.js | 86 +- stories/fn-button/fn-button.stories.js | 54 +- stories/fn-dialog/fn-dialog.stories.js | 8 +- .../fn-generic-tag/fn-generic-tag.stories.js | 25 +- stories/fn-input/fn-input.stories.js | 25 +- stories/fn-link/fn-link.stories.js | 8 +- .../fn-message-box/fn-message-box.stories.js | 36 +- .../fn-progress-bar.stories.js | 5 +- stories/fn-search/fn-search.stories.js | 6 +- stories/fn-select/fn-select.stories.js | 6 +- stories/fn-slider/fn-slider.stories.js | 10 +- stories/fn-tabs/fn-tabs.stories.js | 26 +- stories/fn-tag/fn-tag.stories.js | 6 +- stories/fn-title/title.stories.js | 17 +- stories/fn-toggles/fn-toggles.stories.js | 122 ++- .../form-fieldset/form-fieldset.stories.js | 8 +- stories/form-grid/form-grid.stories.js | 152 +-- stories/form-group/form-group.stories.js | 42 +- stories/form-header/form-header.stories.js | 6 +- stories/form-item/form-item.stories.js | 18 +- stories/form-label/form-label.stories.js | 21 +- stories/form-message/form-message.stories.js | 22 +- stories/generic-tile/generic-tile.stories.js | 76 +- .../horizontal-navigation.stories.js | 28 +- stories/icon-tab-bar/icon-tab-bar.stories.js | 304 +++--- .../iconBusinessSuite.stories.js | 10 +- stories/icon/SAPIcons/icon.stories.js | 10 +- stories/icon/TNTIcons/iconTnt.stories.js | 10 +- .../illustrated-message.stories.js | 3 - stories/info-label/info-label.stories.js | 14 +- stories/input-group/input-group.stories.js | 74 +- stories/input/input.stories.js | 8 +- stories/layout-grid/layout-grid.stories.js | 136 +-- stories/layout-panel/layout-panel.stories.js | 2 +- stories/link/link.stories.js | 16 +- stories/list-grid/list-grid.stories.js | 86 +- stories/list/byline/byline-list.stories.js | 85 +- .../list/standard/standard-list.stories.js | 101 +- stories/margins/margins.stories.js | 8 +- stories/menu/menu.stories.js | 33 +- stories/message-box/message-box.stories.js | 39 +- stories/message-page/message-page.stories.js | 44 +- .../message-strip/message-strip.stories.js | 42 +- .../message-toast/message-toast.stories.js | 8 +- .../micro-process-flow.stories.js | 44 +- .../multi-combo-box.stories.js | 56 +- stories/multi-input/multi-input.stories.js | 56 +- stories/notification/notification.stories.js | 59 +- .../numeric-content.stories.js | 24 +- .../object-identifier.stories.js | 31 +- stories/object-list/object-list.stories.js | 68 +- .../object-marker/object-marker.stories.js | 16 +- .../object-number/object-number.stories.js | 6 +- .../object-status/object-status.stories.js | 18 +- stories/off-screen/off-screen.stories.js | 4 +- stories/page-footer/page-footer.stories.js | 20 +- stories/page/page.stories.js | 26 +- stories/pagination/pagination.stories.js | 36 +- stories/panel/panel.stories.js | 100 +- stories/popover/popover.stories.js | 20 +- .../product-switch/product-switch.stories.js | 10 +- .../progress-indicator.stories.js | 39 +- stories/quick-view/quick-view.stories.js | 22 +- stories/radio/radio.stories.js | 14 +- .../rating-indicator.stories.js | 226 ++-- .../resizable-card-layout.stories.js | 26 +- stories/scrollbar/scrollbar.stories.js | 8 +- stories/section/section.stories.js | 54 +- stories/select/select.stories.js | 112 +- stories/shellbar/shellbar.stories.js | 48 +- .../side-navigation.stories.js | 206 ++-- stories/slider/slider.stories.js | 31 +- .../status-indicator.stories.js | 30 +- stories/step-input/step-input.stories.js | 106 +- stories/switch/switch.stories.js | 30 +- stories/table/table.stories.js | 214 ++-- stories/tabs/tabs.stories.js | 82 +- stories/text/text.stories.js | 37 +- stories/textarea/textarea.stories.js | 20 +- stories/time-picker/time-picker.stories.js | 10 +- stories/time/time.stories.js | 62 +- stories/title/title.stories.js | 23 +- stories/token/token.stories.js | 51 +- stories/tool-header/tool-header.stories.js | 44 +- stories/toolbar/toolbar.stories.js | 32 +- stories/tree/tree.stories.js | 52 +- .../upload-collection.stories.js | 18 +- stories/user-menu/user-menu.stories.js | 34 +- .../vertical-navigation.stories.js | 34 +- stories/wizard/wizard.stories.js | 22 +- 117 files changed, 3352 insertions(+), 3523 deletions(-) diff --git a/stories/action-bar/action-bar.stories.js b/stories/action-bar/action-bar.stories.js index 4c4c983b4a..dd235a67e4 100644 --- a/stories/action-bar/action-bar.stories.js +++ b/stories/action-bar/action-bar.stories.js @@ -2,7 +2,7 @@ export default { title: 'Components/Action Bar', parameters: { description: `The action bar displays at the top of the page, and includes the page’s title, description, back button and action buttons. - + ##Usage **Use action bar if:** @@ -21,7 +21,7 @@ Note: You may want to display components from right to left on the screen for in } }; -export const backBtn = () => `<div class="fd-action-bar"> +export const BackBtn = () => `<div class="fd-action-bar"> <div class="fd-action-bar__header"> <div class="fd-action-bar__back"> <button aria-label="Go Back" class="fd-button fd-button--transparent fd-button--compact"> @@ -40,8 +40,8 @@ export const backBtn = () => `<div class="fd-action-bar"> </div> `; -backBtn.storyName = 'Default'; -backBtn.parameters = { +BackBtn.storyName = 'Default'; +BackBtn.parameters = { docs: { description: { story: 'The default action bar displays a page title, description, back button and action buttons. To display a back button, add the `fd-action-bar__description--back` modifier class to the description element.' @@ -49,7 +49,7 @@ backBtn.parameters = { } }; -export const noBackBtn = () => `<div class="fd-action-bar"> +export const NoBackBtn = () => `<div class="fd-action-bar"> <div class="fd-action-bar__header"> <div class="fd-action-bar__title"> <h1 class="fd-title fd-title--h3">Page Title</h1> @@ -63,14 +63,14 @@ export const noBackBtn = () => `<div class="fd-action-bar"> </div> `; -noBackBtn.storyName = 'No back button'; -noBackBtn.parameters = { +NoBackBtn.storyName = 'No back button'; +NoBackBtn.parameters = { docs: { iframeHeight: 400, storyDescription: 'This action bar doesn’t display a back button.' } }; -export const backBtnNoDescription = () => `<div class="fd-action-bar"> +export const BackBtnNoDescription = () => `<div class="fd-action-bar"> <div class="fd-action-bar__header"> <div class="fd-action-bar__back"> <button aria-label="Go Back" class="fd-button fd-button--transparent fd-button--compact"> @@ -88,14 +88,14 @@ export const backBtnNoDescription = () => `<div class="fd-action-bar"> </div> `; -backBtnNoDescription.storyName = 'No description'; -backBtnNoDescription.parameters = { +BackBtnNoDescription.storyName = 'No description'; +BackBtnNoDescription.parameters = { docs: { iframeHeight: 400, storyDescription: 'This action bar doesn’t display a description.' } }; -export const longTitleDescription = () => `<div class="fd-action-bar"> +export const LongTitleDescription = () => `<div class="fd-action-bar"> <div class="fd-action-bar__header"> <div class="fd-action-bar__back"> <button aria-label="Go Back" class="fd-button fd-button--transparent fd-button--compact"> @@ -116,15 +116,15 @@ export const longTitleDescription = () => `<div class="fd-action-bar"> </div> `; -longTitleDescription.storyName = 'Descriptive'; -longTitleDescription.parameters = { +LongTitleDescription.storyName = 'Descriptive'; +LongTitleDescription.parameters = { docs: { iframeHeight: 400, storyDescription: 'The descriptive action bar displays a long page title and description.' } }; -export const actions = () => `<div class="fd-action-bar"> +export const Actions = () => `<div class="fd-action-bar"> <div class="fd-action-bar__header"> <div class="fd-action-bar__title"> <h1 class="fd-title fd-title--h3">Page Title</h1> @@ -176,15 +176,15 @@ export const actions = () => `<div class="fd-action-bar"> <div style="min-height: 200px"></div> `; -actions.storyName = 'Contextual'; -actions.parameters = { +Actions.storyName = 'Contextual'; +Actions.parameters = { docs: { iframeHeight: 400, storyDescription: 'The contextual action bar displays a page title and contextual menu with several main actions. To display a contextual menu, add the `fd-popover` class to the`fd-action-bar__actions` element.' } }; -export const responsiveL = () => `<div class="fd-action-bar fd-action-bar--m_l"> +export const ResponsiveL = () => `<div class="fd-action-bar fd-action-bar--m_l"> <div class="fd-action-bar__header"> <div class="fd-action-bar__back"> <button aria-label="Go Back" class="fd-button fd-button--transparent fd-button--compact"> @@ -203,15 +203,15 @@ export const responsiveL = () => `<div class="fd-action-bar fd-action-bar--m_l"> </div> `; -responsiveL.storyName = 'Responsive (M-L)'; -responsiveL.parameters = { +ResponsiveL.storyName = 'Responsive (M-L)'; +ResponsiveL.parameters = { docs: { iframeHeight: 400, storyDescription: 'This action bar is responsive and fits the M and L sizes required for tablet and small desktop screens. To display this size, add the `fd-action-bar--m\\_l` modifier class to the main element.' } }; -export const responsiveXL = () => `<div class=" fd-action-bar fd-action-bar--xl"> +export const ResponsiveXL = () => `<div class=" fd-action-bar fd-action-bar--xl"> <div class="fd-action-bar__header"> <div class="fd-action-bar__back"> <button aria-label="Go Back" class="fd-button fd-button--transparent fd-button--compact"> @@ -230,16 +230,16 @@ export const responsiveXL = () => `<div class=" fd-action-bar fd-action-bar--xl" </div> `; -responsiveXL.storyName = 'Responsive (XL)'; -responsiveXL.parameters = { +ResponsiveXL.storyName = 'Responsive (XL)'; +ResponsiveXL.parameters = { docs: { iframeHeight: 400, storyDescription: 'This action bar is responsive and fits the XL size required for larger screens of 1440px or more. To display this size, add the `fd-action-bar--xl` modifier class to the main element.' } }; -export const mobile = () => `<div style="width:319px;"> - <div class="fd-action-bar fd-action-bar--s"> +export const Mobile = () => `<div style="width:319px;"> + <div class="fd-action-bar fd-action-bar--s"> <div class="fd-action-bar__header"> <div class="fd-action-bar__back"> <button aria-label="Go Back" class="fd-button fd-button--transparent"> @@ -291,8 +291,7 @@ export const mobile = () => `<div style="width:319px;"> <div style="min-height: 200px"></div> `; -mobile.storyName = 'Mobile'; -mobile.parameters = { +Mobile.parameters = { docs: { iframeHeight: 400, storyDescription: 'This action bar is mobile responsive. To display the mobile action bar, add the `fd-action-bar--s` modifier class to the main element.' diff --git a/stories/action-sheet/action-sheet.stories.js b/stories/action-sheet/action-sheet.stories.js index 0abc555171..de4615cea0 100644 --- a/stories/action-sheet/action-sheet.stories.js +++ b/stories/action-sheet/action-sheet.stories.js @@ -4,7 +4,7 @@ export default { description: ` An action sheet consists of a list of options a user can select from to complete an action. Actions can be clustered if there is not enough space on the screen. - + ## Usage **Use the action sheet if:** @@ -24,11 +24,11 @@ clustered if there is not enough space on the screen. } }; -export const actionSheetDesktop = () => ` +export const ActionSheetDesktop = () => ` <div class="fd-popover"> <div class="fd-popover__control"> - <button class="fd-button fd-button--compact fd-button--transparent" - aria-label="More Options" aria-controls="actionSheetDesktop" aria-expanded="true" + <button class="fd-button fd-button--compact fd-button--transparent" + aria-label="More Options" aria-controls="actionSheetDesktop" aria-expanded="true" aria-haspopup="true" onclick="onPopoverClick('actionSheetDesktop');"> <i class="sap-icon--settings"></i> </button> @@ -71,7 +71,7 @@ export const actionSheetDesktop = () => ` <div style="height: 300px"></div> `; -actionSheetDesktop.parameters = { +ActionSheetDesktop.parameters = { docs: { iframeHeight: 300, storyDescription: @@ -79,13 +79,13 @@ actionSheetDesktop.parameters = { } }; -actionSheetDesktop.storyName = 'Desktop'; +ActionSheetDesktop.storyName = 'Desktop'; -export const actionSheetTablet = () => ` +export const ActionSheetTablet = () => ` <div class="fd-popover"> <div class="fd-popover__control"> - <button class="fd-button fd-button--transparent" - aria-label="More Options" aria-controls="actionSheetTablet" aria-expanded="true" + <button class="fd-button fd-button--transparent" + aria-label="More Options" aria-controls="actionSheetTablet" aria-expanded="true" aria-haspopup="true" onclick="onPopoverClick('actionSheetTablet');"> <i class="sap-icon--settings"></i> </button> @@ -128,7 +128,7 @@ export const actionSheetTablet = () => ` <div style="height: 300px"></div> `; -actionSheetTablet.parameters = { +ActionSheetTablet.parameters = { docs: { iframeHeight: 300, storyDescription: @@ -136,11 +136,11 @@ actionSheetTablet.parameters = { } }; -actionSheetTablet.storyName = 'Tablet'; +ActionSheetTablet.storyName = 'Tablet'; -export const actionSheetMobile = () => `<div style="width: 350px; height: 600px; position: relative"> +export const ActionSheetMobile = () => `<div style="width: 350px; height: 600px; position: relative"> <button class="fd-button fd-button--transparent" - aria-label="More Options" aria-controls="actionSheetPhone" aria-expanded="true" + aria-label="More Options" aria-controls="actionSheetPhone" aria-expanded="true" aria-haspopup="true" onclick="toggleClass('actionSheetPhone', 'fd-action-sheet__wrapper--active');"> <i class="sap-icon--settings"></i> </button> @@ -174,7 +174,7 @@ export const actionSheetMobile = () => `<div style="width: 350px; height: 600px; <li class="fd-action-sheet__item" role="listitem"> <button class="fd-button fd-button--full-width fd-button--transparent fd-button--text-alignment-left" onclick="toggleClass('actionSheetPhone', 'fd-action-sheet__wrapper--active');"> - <span class="fd-button__text">Decide Later</span> + <span class="fd-button__text">Decide Later</span> </button> </li> <li class="fd-action-sheet__item" role="listitem"> @@ -188,12 +188,12 @@ export const actionSheetMobile = () => `<div style="width: 350px; height: 600px; </div> `; -actionSheetMobile.parameters = { +ActionSheetMobile.parameters = { docs: { iframeHeight: 800, - storyDescription: `To display the action sheet on mobile screens, + storyDescription: `To display the action sheet on mobile screens, the container requires a \`fd-action-sheet--mobile\` modifier class and is additionally wrapped by \`fd-action-sheet__wrapper\`.` } }; -actionSheetMobile.storyName = 'Mobile'; +ActionSheetMobile.storyName = 'Mobile'; diff --git a/stories/avatar-group/avatar-group.stories.js b/stories/avatar-group/avatar-group.stories.js index b9c29ca100..7b610b8985 100644 --- a/stories/avatar-group/avatar-group.stories.js +++ b/stories/avatar-group/avatar-group.stories.js @@ -48,7 +48,7 @@ To change the background color of the button, add the \`fd-avatar-group__more-bu } }; -export const individualType = () => `<div class="fd-avatar-group fd-avatar-group--individual-type fd-avatar-group--s"> +export const IndividualType = () => `<div class="fd-avatar-group fd-avatar-group--individual-type fd-avatar-group--s"> <div class="fd-popover"> <div class="fd-popover__control"> <div class="fd-avatar-group__item" tabindex="0" aria-haspopup="true" aria-expanded="false" onclick="onPopoverClick('popover_avatar_5z28edb');"> @@ -62,7 +62,7 @@ export const individualType = () => `<div class="fd-avatar-group fd-avatar-group <div class="fd-bar__element">Business Card</div> </div> </div> - + <div class="fd-quick-view__content"> <div class="fd-bar fd-bar--header-with-subheader"> <div class="fd-bar__left"> @@ -109,7 +109,7 @@ export const individualType = () => `<div class="fd-avatar-group fd-avatar-group <div class="fd-bar__element">Business Card</div> </div> </div> - + <div class="fd-quick-view__content"> <div class="fd-bar fd-bar--header-with-subheader"> <div class="fd-bar__left"> @@ -153,7 +153,7 @@ export const individualType = () => `<div class="fd-avatar-group fd-avatar-group <div class="fd-bar__element">Business Card</div> </div> </div> - + <div class="fd-quick-view__content"> <div class="fd-bar fd-bar--header-with-subheader"> <div class="fd-bar__left"> @@ -198,7 +198,7 @@ export const individualType = () => `<div class="fd-avatar-group fd-avatar-group <div class="fd-bar__element">Business Card</div> </div> </div> - + <div class="fd-quick-view__content"> <div class="fd-bar fd-bar--header-with-subheader"> <div class="fd-bar__left"> @@ -241,7 +241,7 @@ export const individualType = () => `<div class="fd-avatar-group fd-avatar-group <bdi class="fd-button__text fd-avatar-group__button-text">+4</bdi> </button> </div> - + <div class="fd-popover__body" aria-hidden="true" id="popover_avatar_more_aoiwjth" style="width: 245px;"> <div class="fd-popover__wrapper"> <div class="fd-popover__body-header"> @@ -273,7 +273,7 @@ export const individualType = () => `<div class="fd-avatar-group fd-avatar-group </div> </div>`; -individualType.parameters = { +IndividualType.parameters = { docs: { iframeHeight: 250, storyDescription: 'To use Individual type of Avatar Group use the `--individual-type` modifier class <i>(`fd-avatar-group--individual-type` class)<i>.' @@ -282,7 +282,7 @@ individualType.parameters = { -export const groupType = () => `<div class="fd-popover"> +export const GroupType = () => `<div class="fd-popover"> <div class="fd-popover__control fd-avatar-group__popover-control" role="button" tabindex="0" @@ -313,13 +313,13 @@ export const groupType = () => `<div class="fd-popover"> <div class="fd-avatar-group__item"> <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/2.svg')" role="img" alt="John Doe" title="John Doe"></span> </div> - + <button class="fd-button fd-avatar-group__more-button fd-avatar-group__more-button--m" role="button" tabindex="-1"> <bdi class="fd-button__text fd-avatar-group__button-text">+8</bdi> </button> </div> </div> - + <div class="fd-popover__body" aria-hidden="false" id="popover_avatar-group_tztuj" style="width: 332px;"> <div class="fd-popover__wrapper" style="max-height: 200px; overflow-x: hidden"> <div class="fd-popover__body-header"> @@ -329,7 +329,7 @@ export const groupType = () => `<div class="fd-popover"> </div> </div> </div> - + <div class="fd-avatar-group__overflow-body"> <div class="fd-avatar-group__item"> <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" alt="Wendy Wallace" title="Wendy Wallace">WW</span> @@ -390,7 +390,7 @@ export const groupType = () => `<div class="fd-popover"> </div> `; -groupType.parameters = { +GroupType.parameters = { docs: { iframeHeight: 250, storyDescription: 'To use Group type of Avatar Group use the `--group-type` modifier class <i>(`fd-avatar-group--group-type` class)<i>.' diff --git a/stories/avatar/avatar.stories.js b/stories/avatar/avatar.stories.js index 0ef5e71f2e..5cdd503255 100644 --- a/stories/avatar/avatar.stories.js +++ b/stories/avatar/avatar.stories.js @@ -33,7 +33,7 @@ Do not use avatar if: } }; -export const icon = () => ` +export const Icon = () => ` <span class="fd-avatar fd-avatar--xs" role="presentation" tabindex="0"> <i role="presentation" class="fd-avatar__icon sap-icon--washing-machine"></i> </span> @@ -51,7 +51,7 @@ export const icon = () => ` </span> `; -icon.parameters = { +Icon.parameters = { docs: { iframeHeight: 200, storyDescription: 'The icon avatar can be used to display non-interactive icons. If you want the icon to be interactive, use the **Button** component with an icon inside instead. <br><br>When using the icon avatar for illustrative purposes only, include `role="presentation"` in the element. For instance, include role=` if the icon sits right next to a label.' @@ -60,7 +60,7 @@ icon.parameters = { -export const initials = () => ` +export const Initials = () => ` <span class="fd-avatar fd-avatar--xs" aria-label="Wendy Wallace">WW</span> <span class="fd-avatar fd-avatar--s" aria-label="Wendy Wallace">WW</span> <span class="fd-avatar fd-avatar--m" aria-label="Wendy Wallace">WW</span> @@ -68,7 +68,7 @@ export const initials = () => ` <span class="fd-avatar fd-avatar--xl" aria-label="Wendy Wallace">WW</span> `; -initials.parameters = { +Initials.parameters = { docs: { iframeHeight: 200, storyDescription: 'The initials avatar can display up to three alphabetical characters representing the first and last name(s) of a person, for example: MvV for Marjolein van Veen. The order in which the first and last name(s) are displayed depends on the language-specific settings.<br><br> When there is no equivalent text for the avatar, include `aria-label` in the element. This isn’t necessary if the avatar is used for illustrative purposes only. See **Icon** above.' @@ -76,7 +76,7 @@ initials.parameters = { }; -export const circle = () => ` +export const Circle = () => ` <span class="fd-avatar fd-avatar--xs fd-avatar--circle" aria-label="Avatar"> <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i> </span> @@ -99,14 +99,14 @@ export const circle = () => ` <span class="fd-avatar fd-avatar--xl fd-avatar--circle" aria-label="Wendy Wallace">WW</span> `; -circle.parameters = { +Circle.parameters = { docs: { iframeHeight: 200, storyDescription: 'A circle style can be displayed by adding the `--circle` modifier class.' } }; -export const backgroundImage = () => ` +export const BackgroundImage = () => ` <span class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/1.svg')" role="img" aria-label="John Doe"></span> <span class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/2.svg')" role="img" aria-label="John Doe"></span> <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/3.svg')" role="img" aria-label="John Doe"></span> @@ -116,12 +116,12 @@ export const backgroundImage = () => ` <span class="fd-avatar fd-avatar--xl fd-avatar--thumbnail fd-avatar--background-contain" style="background-image: url('/assets/images/backgrounds/leaves.jpg')" role="img" aria-label="John Doe"></span> `; -backgroundImage.parameters = { +BackgroundImage.parameters = { docs: { iframeHeight: 200, storyDescription: ` A background image can be displayed by adding the \`--thumbnail\` modifier class. -There are two options to set the backgroundd: Cover (default) and Contain. +There are two options to set the backgroundd: Cover (default) and Contain. - Cover: The size of the image is scaled up to completely cover the control area. As a result, parts of the image may be outside the shape. - Contain: The image is scaled down to fit into the control area. The entire image is displayed, but might not fully fill the shape. In this case, the control displays a default background color. The image itself is always centered inside the shape. @@ -130,7 +130,7 @@ Changing the default \`background-size: cover\` to \`background-size: contain\` } }; -export const transparent = () => ` +export const Transparent = () => ` <span class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--transparent" aria-label="Avatar"> <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i> </span> @@ -153,7 +153,7 @@ export const transparent = () => ` <span class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--transparent" aria-label="Wendy Wallace">WW</span> `; -transparent.parameters = { +Transparent.parameters = { docs: { iframeHeight: 200, storyDescription: 'A transparent style can be displayed by adding the `--transparent` modifier class.' @@ -161,7 +161,7 @@ transparent.parameters = { }; -export const placeholderBackground = () => ` +export const PlaceholderBackground = () => ` <span class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--placeholder" aria-label="Avatar"> <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i> </span> @@ -179,7 +179,7 @@ export const placeholderBackground = () => ` </span> `; -placeholderBackground.parameters = { +PlaceholderBackground.parameters = { docs: { iframeHeight: 200, storyDescription: 'An avatar with a placeholder background can be displayed by adding the `--placeholder` modifier class.' @@ -187,7 +187,7 @@ placeholderBackground.parameters = { }; -export const tileIconBackground = () => ` +export const TileIconBackground = () => ` <span class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--tile" aria-label="Avatar"> <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i> </span> @@ -206,7 +206,7 @@ export const tileIconBackground = () => ` `; -tileIconBackground.parameters = { +TileIconBackground.parameters = { docs: { iframeHeight: 200, storyDescription: 'An avatar with a tile icon background can be displayed by adding the `--tile` modifier class.' @@ -214,7 +214,7 @@ tileIconBackground.parameters = { }; -export const accentColors = () => ` +export const AccentColors = () => ` <span class="fd-avatar fd-avatar--accent-color-1 fd-avatar--m" aria-label="Avatar"> <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i> </span> @@ -247,7 +247,7 @@ export const accentColors = () => ` </span> `; -accentColors.parameters = { +AccentColors.parameters = { docs: { iframeHeight: 200, storyDescription: 'To change the background color, add the `fd-avatar--accent-color-*` class with the number indicating the desired color. The color options include numbers ranging from 1 to 10, for example: `fd-avatar--accent-color-10`.' @@ -255,7 +255,7 @@ accentColors.parameters = { }; -export const zoomIcon = () => ` +export const ZoomIcon = () => ` <span class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--accent-color-1" aria-label="Avatar"> <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i> <i class="fd-avatar__zoom-icon sap-icon--edit" aria-label="Edit"></i> @@ -293,7 +293,7 @@ export const zoomIcon = () => ` </span> `; -zoomIcon.parameters = { +ZoomIcon.parameters = { docs: { iframeHeight: 200, storyDescription: 'Any avatar can display a zoom icon by creating an element with `fd-avatar__zoom-icon` class.' @@ -301,7 +301,7 @@ zoomIcon.parameters = { }; -export const borders = () => ` +export const Borders = () => ` <span class="fd-avatar fd-avatar--xs fd-avatar--transparent fd-avatar--border" aria-label="Avatar"> <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i> </span> @@ -329,7 +329,7 @@ export const borders = () => ` </span> `; -borders.parameters = { +Borders.parameters = { docs: { iframeHeight: 200, storyDescription: 'Borders can be displayed by adding the `--border` modifier class.' diff --git a/stories/bar/bar.stories.js b/stories/bar/bar.stories.js index fa6dc08bf1..e22fd3ef3e 100644 --- a/stories/bar/bar.stories.js +++ b/stories/bar/bar.stories.js @@ -9,7 +9,7 @@ export default { - Default (desktop) - Cozy (tablet and mobile) -## Usage +## Usage ### Header **Use the header bar if:** diff --git a/stories/breadcrumb/breadcrumb.stories.js b/stories/breadcrumb/breadcrumb.stories.js index d3599e34b2..d718b80ecc 100644 --- a/stories/breadcrumb/breadcrumb.stories.js +++ b/stories/breadcrumb/breadcrumb.stories.js @@ -27,7 +27,7 @@ The breadcrumb component is a type of navigation that indicates the position of } }; -export const standard = () => `<nav aria-label="products breadcrumbs"> +export const Standard = () => `<nav aria-label="products breadcrumbs"> <ul class="fd-breadcrumb"> <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">Products</a></li> <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">Suppliers</a></li> @@ -40,13 +40,13 @@ export const standard = () => `<nav aria-label="products breadcrumbs"> </nav> `; -standard.parameters = { +Standard.parameters = { docs: { storyDescription: 'The standard breadcrumb component displays several pages in text format separated by dividers, indicating a navigation path. Each page can be specifically selected to navigate to its corresponding page. It can be displayed by using the `fd-breadcrumb` class.' } }; -export const overflow = () => ` +export const Overflow = () => ` <nav aria-label="overflowing product breadcrumbs"> <ul class="fd-breadcrumb"> <li class="fd-breadcrumb__item"> @@ -56,7 +56,7 @@ export const overflow = () => ` aria-controls="breadcrumb1" aria-expanded="true" aria-haspopup="true" - aria-label="Show collapsed breadcrumbs" + aria-label="Show collapsed breadcrumbs" class="fd-breadcrumb__link" onclick="onPopoverClick('breadcrumb1');" onkeypress="isSpaceOrEnter(event, onPopoverClick('breadcrumb1'));" @@ -98,7 +98,7 @@ export const overflow = () => ` <div style="height: 150px"></div> `; -overflow.parameters = { +Overflow.parameters = { docs: { iframeHeight: 200, storyDescription: 'The overflow breadcrumb component displays a dropdown menu, followed by several pages in the navigation path. <br>Like the standard breadcrumb, each page can be selected to navigate to its corresponding page. This type is responsive and will collapse into a dropdown menu if there is insufficient horizontal space on the screen. <br>To display the overflow breadcrumb, include the `fd-popover` component in the first breadcrumb item within the element.' diff --git a/stories/busy-indicator/busy-indicator.stories.js b/stories/busy-indicator/busy-indicator.stories.js index 9939597a8a..775f91c31e 100644 --- a/stories/busy-indicator/busy-indicator.stories.js +++ b/stories/busy-indicator/busy-indicator.stories.js @@ -13,7 +13,7 @@ export default { ##Usage **Use the busy indicator if:** - + The ongoing operation only covers part of a screen that has multiple controls, and: - You need to display additional information, or @@ -57,7 +57,7 @@ Standard.parameters = { } }; -export const contrastMode = () => `<div style="display:flex;justify-content:center;flex-direction:column;align-items:center;background-color:cadetblue;height:250px"> +export const ContrastMode = () => `<div style="display:flex;justify-content:center;flex-direction:column;align-items:center;background-color:cadetblue;height:250px"> <div class="fd-busy-indicator--l contrast" aria-hidden="false" aria-label="Loading"> <div class="fd-busy-indicator--circle-0"></div> <div class="fd-busy-indicator--circle-1"></div> @@ -66,7 +66,7 @@ export const contrastMode = () => `<div style="display:flex;justify-content:cent </div> `; -contrastMode.parameters = { +ContrastMode.parameters = { docs: { iframeHeight: 200, storyDescription: @@ -74,7 +74,7 @@ contrastMode.parameters = { } }; -export const extendedBusyIndicator = () => `<div class="fd-busy-indicator-extended"> +export const ExtendedBusyIndicator = () => `<div class="fd-busy-indicator-extended"> <div class="fd-busy-indicator fd-busy-indicator--l" aria-hidden="false" aria-label="Loading"> <div class="fd-busy-indicator--circle-0"></div> <div class="fd-busy-indicator--circle-1"></div> @@ -83,7 +83,7 @@ export const extendedBusyIndicator = () => `<div class="fd-busy-indicator-extend <div class="fd-busy-indicator-extended__label">loading data...</div> </div>`; -extendedBusyIndicator.parameters = { +ExtendedBusyIndicator.parameters = { docs: { iframeHeight: 200, storyDescription: @@ -91,7 +91,7 @@ extendedBusyIndicator.parameters = { } }; -export const extendedBusyIndicatorInsideMessageToast = () => `<div class="fd-message-toast fd-busy-indicator-extended fd-busy-indicator-extended--message-toast"> +export const ExtendedBusyIndicatorInsideMessageToast = () => `<div class="fd-message-toast fd-busy-indicator-extended fd-busy-indicator-extended--message-toast"> <div class="fd-busy-indicator fd-busy-indicator--l" aria-hidden="false" aria-label="Loading"> <div class="fd-busy-indicator--circle-0"></div> <div class="fd-busy-indicator--circle-1"></div> @@ -100,7 +100,7 @@ export const extendedBusyIndicatorInsideMessageToast = () => `<div class="fd-mes <div class="fd-busy-indicator-extended__label">loading data...</div> </div>`; -extendedBusyIndicatorInsideMessageToast.parameters = { +ExtendedBusyIndicatorInsideMessageToast.parameters = { docs: { iframeHeight: 200, storyDescription: diff --git a/stories/button/button.stories.js b/stories/button/button.stories.js index 2e1e118ba0..be52497ada 100644 --- a/stories/button/button.stories.js +++ b/stories/button/button.stories.js @@ -23,7 +23,7 @@ export default { } }; -export const primary = () => ` +export const Primary = () => ` <button class="fd-button">Create</button> <button class="fd-button" aria-label="Add to cart"><i class="sap-icon--cart"></i></button> <button class="fd-button fd-button--emphasized ">Save</button> @@ -40,7 +40,7 @@ export const primary = () => ` * - **Transparent Button** Used for secondary or negative path actions */ -export const types = () => `<div class="fddocs-container fddocs-button-container"> +export const Types = () => `<div class="fddocs-container fddocs-button-container"> <button class="fd-button">Default Button</button> <button class="fd-button fd-button--emphasized">Emphasized Button</button> <button class="fd-button fd-button--ghost">Ghost Button</button> @@ -50,10 +50,10 @@ export const types = () => `<div class="fddocs-container fddocs-button-container <button class="fd-button fd-button--transparent">Transparent Button</button> </div>`; -types.storyName = 'Button styles'; -types.parameters = { +Types.storyName = 'Button styles'; +Types.parameters = { docs: { - storyDescription: ` + storyDescription: ` - **Default button** is used for neutral or informative (secondary) actions. - **Emphasized button** is used to indicate the primary action on the screen. - **Ghost button** is used to trigger secondary actions. If a page already has a primary action, but you also need to highlight the most important action in a content toolbar, use the ghost style. @@ -61,13 +61,13 @@ types.parameters = { - **Negative button** is used to trigger negative semantic actions, such as _Reject_ and should always be accompanied by text. - **Attention button** is used to trigger a semantic action that needs attention and should always be accompanied by text. - **Transparent button** is used to trigger a negative path action within a header or footer bar, and secondary actions in toolbars. - + ` } }; -export const toggle = () => `<h4>Inactive state of toggle button</h4> -<div class="fddocs-container fddocs-button-container"> +export const Toggle = () => `<h4>Inactive state of toggle button</h4> +<div class="fddocs-container fddocs-button-container"> <button class="fd-button">Default Toggle</button> <button class="fd-button fd-button--emphasized">Emphasized Toggle</button> <button class="fd-button fd-button--ghost">Ghost Toggle</button> @@ -85,7 +85,7 @@ export const toggle = () => `<h4>Inactive state of toggle button</h4> <button aria-label="Accept" class="fd-button fd-button--positive"><i class="sap-icon--accept"></i></button> </div> <h4>Active (toggled) state of toggle button</h4> -<div class="fddocs-container fddocs-button-container"> +<div class="fddocs-container fddocs-button-container"> <button class="fd-button fd-button--toggled">Default Toggle</button> <button class="fd-button fd-button--emphasized fd-button--toggled">Emphasized Toggle</button> <button class="fd-button fd-button--ghost fd-button--toggled">Ghost Toggle</button> @@ -103,7 +103,7 @@ export const toggle = () => `<h4>Inactive state of toggle button</h4> <button aria-label="Accept" class="fd-button fd-button--positive fd-button--toggled"><i class="sap-icon--accept"></i></button> </div> <h4>Disabled Toggle button in active state</h4> -<div class="fddocs-container fddocs-button-container"> +<div class="fddocs-container fddocs-button-container"> <button class="fd-button fd-button--toggled" disabled>Default Toggle</button> <button class="fd-button fd-button--emphasized fd-button--toggled" disabled>Emphasized Toggle</button> <button class="fd-button fd-button--ghost fd-button--toggled" disabled>Ghost Toggle</button> @@ -121,22 +121,22 @@ export const toggle = () => `<h4>Inactive state of toggle button</h4> <button aria-label="Accept" class="fd-button fd-button--positive" disabled><i class="sap-icon--accept"></i></button> </div>`; -toggle.storyName = 'Toggle button'; -toggle.parameters = { +Toggle.storyName = 'Toggle button'; +Toggle.parameters = { docs: { storyDescription: 'A toggle button switches between two actions. One of the actions is always active, one is inactive. Use the toggle button for secondary actions. Apply the `fd-button--toggled` modifier class to set the action to active.' } }; -export const segmentedButton = () => ` +export const SegmentedButton = () => ` <div class="fddocs-button-container"> <div class="fd-segmented-button" role="group" aria-label="Group label"> <button aria-label="Survey" class="fd-button"><i class="sap-icon--survey"></i></button> <button aria-label="Chart" class="fd-button is-selected" aria-pressed="true"><i class="sap-icon--pie-chart"></i></button> <button aria-label="Pool" class="fd-button"><i class="sap-icon--pool"></i></button> </div> - + <div class="fd-segmented-button" role="group" aria-label="Group label"> <button class="fd-button fd-button--compact is-selected" aria-pressed="true">Left</button> <button class="fd-button fd-button--compact">Middle</button> @@ -145,46 +145,46 @@ export const segmentedButton = () => ` </div> `; -segmentedButton.storyName = 'Segmented button'; -segmentedButton.parameters = { +SegmentedButton.storyName = 'Segmented button'; +SegmentedButton.parameters = { docs: { storyDescription: `The segmented button displays a group of options. Only one option can be active at a time by selecting it, while the others remain or become inactive when the initial option is selected. This button type was previously known as "button group" and is comparable to a radio button group. <br><br>It can be displayed by using the \`fd-segmented-button\` class with \`role="group"\` and the \`aria-label="Group label"\` attribute.` } }; -export const badgeOnButton = () => ` +export const BadgeOnButton = () => ` <div class="fddocs-button-container"> <button class="fd-button"> <span class="fd-button__text">Cozy Badge Button</span> - <span class="fd-button__badge">3984</span> + <span class="fd-button__badge">3984</span> </button> <button class="fd-button" aria-label="Add to cart"> <i class="sap-icon--cart" role="presentation"></i> - <span class="fd-button__badge">3</span> + <span class="fd-button__badge">3</span> </button> <button class="fd-button fd-button--compact"> <span class="fd-button__text">Compact Badge Button</span> - <span class="fd-button__badge">654</span> + <span class="fd-button__badge">654</span> </button> <button class="fd-button fd-button--compact" aria-label="Add to cart"> <i class="sap-icon--cart" role="presentation"></i> - <span class="fd-button__badge">12</span> + <span class="fd-button__badge">12</span> </button> </div> `; -badgeOnButton.storyName = 'Button With Badge'; -badgeOnButton.parameters = { +BadgeOnButton.storyName = 'Button With Badge'; +BadgeOnButton.parameters = { docs: { storyDescription: `Button gets a badge in cases of collecting a number of items from various pages in order to - trigger an action. <br/> + trigger an action. <br/> Currently the Emphasized, Standard, Ghost and Transparent type of buttons are recommended to be used with Badge. <br/> <b>Badges cannot contain more characters than 4</b>.` } }; -export const menuButton = () => ` +export const MenuButton = () => ` <div class="fddocs-button-container"> <button class="fd-button fd-button--menu"> <span class="fd-button__text">Action Button</span> @@ -280,22 +280,22 @@ export const menuButton = () => ` </div> `; -menuButton.storyName = 'Menu button'; -menuButton.parameters = { +MenuButton.storyName = 'Menu button'; +MenuButton.parameters = { docs: { iframeHeight: 300, storyDescription: 'The menu button displays a dropdown menu upon selection and is considered the default menu button. There are two different type of menu buttons: the default menu button and split menu button, and both of them can contain items with submenus.' } }; -export const splitMenuButton = () => ` +export const SplitMenuButton = () => ` <div class="fddocs-button-container"> <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split"> <button class="fd-button" aria-label="button"> <span class="fd-button-split__text">Button with a big amount of text</span> </button> <button class="fd-button" aria-controls="t4c0o273" aria-haspopup="true" aria-expanded="false" aria-label="More"><i class="sap-icon--slim-arrow-down"></i></button> - <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right" aria-hidden="true" + <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right" aria-hidden="true" id="t4c0o273"> <nav class="fd-menu"> <ul class="fd-menu__list fd-menu__list--no-shadow"> @@ -313,15 +313,15 @@ export const splitMenuButton = () => ` </nav> </div> </div> - + <div class="fd-button-split fd-button-split--emphasized" role="group" aria-label="button-split"> <button class="fd-button fd-button--emphasized" aria-label="button"> <span class="fd-button-split__text">Button with text</span> </button> - <button class="fd-button fd-button--emphasized" aria-controls="t4c0o2732" + <button class="fd-button fd-button--emphasized" aria-controls="t4c0o2732" aria-haspopup="true" aria-expanded="false" aria-label="More"><i class="sap-icon--slim-arrow-down"></i></button> - - <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right" aria-hidden="true" + + <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right" aria-hidden="true" id="t4c0o2732"> <nav class="fd-menu"> <ul class="fd-menu__list fd-menu__list--no-shadow"> @@ -339,7 +339,7 @@ export const splitMenuButton = () => ` </nav> </div> </div> - + <div class="fd-button-split fd-button-split--transparent" role="group" aria-label="button-split"> <button class="fd-button fd-button--transparent" aria-label="button"> <span class="fd-button-split__text"> @@ -347,7 +347,7 @@ export const splitMenuButton = () => ` </span> </button> <button class="fd-button fd-button--transparent" aria-controls="t4c0o27322" aria-haspopup="true" aria-expanded="false" aria-label="More"><i class="sap-icon--slim-arrow-down"></i></button> - <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right" aria-hidden="true" + <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right" aria-hidden="true" id="t4c0o27322"> <nav class="fd-menu"> <ul class="fd-menu__list fd-menu__list--no-shadow"> @@ -368,11 +368,11 @@ export const splitMenuButton = () => ` </div> `; -splitMenuButton.storyName = 'Split menu button'; -splitMenuButton.parameters = { +SplitMenuButton.storyName = 'Split menu button'; +SplitMenuButton.parameters = { docs: { iframeHeight: 150, - storyDescription: `The split menu button has two separate areas: the text label and the icon. The separator between them indicates that each area results in a different action, giving the user two choices: select the text label to trigger the action or select the arrow to open the menu. This button has a fixed size and the text truncates if the menu items exceed the maximum width available. + storyDescription: `The split menu button has two separate areas: the text label and the icon. The separator between them indicates that each area results in a different action, giving the user two choices: select the text label to trigger the action or select the arrow to open the menu. This button has a fixed size and the text truncates if the menu items exceed the maximum width available. <br><br> Note: If the default action is displayed as an icon only, all the menu items must contain icons. **The split menu button can behave in two different ways:** @@ -385,7 +385,7 @@ The split menu button can be displayed by using \`fd-button-split fd-has-margin- } }; -export const sizes = () => ` +export const Sizes = () => ` <div class="fddocs-button-container"> <button class="fd-button">Save</button> <button aria-label="Add to cart" class="fd-button"><i class="sap-icon--cart"></i></button> @@ -407,8 +407,8 @@ export const sizes = () => ` </div> `; -sizes.storyName = 'Button sizes'; -sizes.parameters = { +Sizes.storyName = 'Button sizes'; +Sizes.parameters = { docs: { iframeHeight: 150, storyDescription: ` @@ -417,7 +417,7 @@ The buttons in the first row are displayed in cozy size, which is the default si } }; -export const iconAndText = () => ` +export const IconAndText = () => ` <div class="fddocs-button-container"> <button class="fd-button fd-button--emphasized">Add to Cart</button> <button class="fd-button">Add to Cart</button> @@ -437,22 +437,22 @@ export const iconAndText = () => ` </div> `; -iconAndText.storyName = 'Icon or text'; -iconAndText.parameters = { +IconAndText.storyName = 'Icon or text'; +IconAndText.parameters = { docs: { iframeHeight: 150, storyDescription: ` -These buttons contain either icons **or** text, as it is highly recommended not to combine the two. +These buttons contain either icons **or** text, as it is highly recommended not to combine the two. **Use icon buttons for basic actions such as:** - _Edit_ - _Back to previous screen_ -- _Remove from list_ etc. +- _Remove from list_ etc. Make sure the default accessibility text for the icon is appropriate for your use case. If the text is not ideal, define an app-specific accessibility text. - + All button styles can be paired with an icon. You can use the \`sap-icon--{icon-name}\` class to attach an icon to the button. The full list of all the available icons can be found on the <a href="icon.html">Icon</a> page. @@ -460,7 +460,7 @@ The full list of all the available icons can be found on the <a href="icon.html" } }; -export const buttonStates = () => ` +export const ButtonStates = () => ` <div class="fddocs-button-container"> <button class="fd-button fd-button--emphasized">Normal State</button> <button class="fd-button fd-button--emphasized is-selected" >Selected State</button> @@ -512,8 +512,8 @@ export const buttonStates = () => ` </div> `; -buttonStates.storyName = 'Button states'; -buttonStates.parameters = { +ButtonStates.storyName = 'Button states'; +ButtonStates.parameters = { docs: { iframeHeight: 450, storyDescription: ` @@ -527,26 +527,26 @@ These button types indicate different states: normal, selected, disabled and foc } }; -export const focusableDisabled = () => ` +export const FocusableDisabled = () => ` <div class="fddocs-button-container"> <button aria-disabled="true" aria-describedby="fd-ONXuqucVcF" class="fd-button is-disabled" type="button">Disabled Focusable</button> <p aria-live="assertive" class="fd-button__instructions" id="fd-ONXuqucVcF">This disabled button is focusable and this text will be read out by a screen reader and read again when there are changes to the state of the button.</p> </div> `; -focusableDisabled.storyName = 'Focusable disabled'; -focusableDisabled.parameters = { +FocusableDisabled.storyName = 'Focusable disabled'; +FocusableDisabled.parameters = { docs: { storyDescription: ` -The disabled button can be focusable by adding the \`aria-disabled\` attribute. To enable the focus ring in a focusable disabled button, ensure that \`is-disabled\` is present while \`disabled\` is not. +The disabled button can be focusable by adding the \`aria-disabled\` attribute. To enable the focus ring in a focusable disabled button, ensure that \`is-disabled\` is present while \`disabled\` is not. -####Accessibility +####Accessibility When adding this attribute, make sure to not use the \`disabled\` property so that the button is both focusable and readable by screen readers. - -When the state of the button has changed, add \`aria-live=”assertive”\` to prompt the screen reader to read the helper text out loud. - + +When the state of the button has changed, add \`aria-live=”assertive”\` to prompt the screen reader to read the helper text out loud. + Note: For the text to be read out loud by screen readers, a helper text has been added with \`aria-describedby\` matching the \`id\` of the paragraph element with the \`_instructions\` element. The element uses the \`screen-reader-only\` styling so that it is not visible. - + ` } }; diff --git a/stories/calendar/calendar.stories.js b/stories/calendar/calendar.stories.js index 1388677840..3d4baf95d0 100644 --- a/stories/calendar/calendar.stories.js +++ b/stories/calendar/calendar.stories.js @@ -5,7 +5,7 @@ export default { The calendar component allows users to navigate to a single date, multiple days, whole week(s), or a date range, showing all time-related data within a given timeframe. It is usually paired with components: **Input Group** and **Popover** to comprise **Date Picker**, which is considered a design pattern as the date picker does not contain components of its own. The calendar component is rarely, if ever, used as a standalone component. - + See **Date Picker** in the patterns section. ## Usage @@ -92,32 +92,32 @@ These classes are used to style calendar grid elements with colors, which are id | Modifier class | Color | |-:|:-| | <code>fd-calendar__special-day--1</code> | <div class="fd-calendar__item fd-calendar__special-day--1"><span class="fd-calendar__text" role="button">30</span></div> -| <code>fd-calendar__special-day--2</code> | <div class="fd-calendar__item fd-calendar__special-day--2"><span class="fd-calendar__text" role="button">30</span></div> | -| <code>fd-calendar__special-day--3</code> | <div class="fd-calendar__item fd-calendar__special-day--3"><span class="fd-calendar__text" role="button">30</span></div> | -| <code>fd-calendar__special-day--4</code> | <div class="fd-calendar__item fd-calendar__special-day--4"><span class="fd-calendar__text" role="button">30</span></div> | -| <code>fd-calendar__special-day--5</code> | <div class="fd-calendar__item fd-calendar__special-day--5"><span class="fd-calendar__text" role="button">30</span></div> | -| <code>fd-calendar__special-day--6</code> | <div class="fd-calendar__item fd-calendar__special-day--6"><span class="fd-calendar__text" role="button">30</span></div> | -| <code>fd-calendar__special-day--7</code> | <div class="fd-calendar__item fd-calendar__special-day--7"><span class="fd-calendar__text" role="button">30</span></div> | -| <code>fd-calendar__special-day--8</code> | <div class="fd-calendar__item fd-calendar__special-day--8"><span class="fd-calendar__text" role="button">30</span></div> | -| <code>fd-calendar__special-day--9</code> | <div class="fd-calendar__item fd-calendar__special-day--9"><span class="fd-calendar__text" role="button">30</span></div> | -| <code>fd-calendar__special-day--10</code> | <div class="fd-calendar__item fd-calendar__special-day--10"><span class="fd-calendar__text" role="button">30</span></div> | -| <code>fd-calendar__special-day--11</code> | <div class="fd-calendar__item fd-calendar__special-day--11"><span class="fd-calendar__text" role="button">30</span></div> | -| <code>fd-calendar__special-day--12</code> | <div class="fd-calendar__item fd-calendar__special-day--12"><span class="fd-calendar__text" role="button">30</span></div> | -| <code>fd-calendar__special-day--13</code> | <div class="fd-calendar__item fd-calendar__special-day--13"><span class="fd-calendar__text" role="button">30</span></div> | -| <code>fd-calendar__special-day--14</code> | <div class="fd-calendar__item fd-calendar__special-day--14"><span class="fd-calendar__text" role="button">30</span></div> | -| <code>fd-calendar__special-day--15</code> | <div class="fd-calendar__item fd-calendar__special-day--15"><span class="fd-calendar__text" role="button">30</span></div> | -| <code>fd-calendar__special-day--16</code> | <div class="fd-calendar__item fd-calendar__special-day--16"><span class="fd-calendar__text" role="button">30</span></div> | -| <code>fd-calendar__special-day--17</code> | <div class="fd-calendar__item fd-calendar__special-day--17"><span class="fd-calendar__text" role="button">30</span></div> | -| <code>fd-calendar__special-day--18</code> | <div class="fd-calendar__item fd-calendar__special-day--18"><span class="fd-calendar__text" role="button">30</span></div> | -| <code>fd-calendar__special-day--19</code> | <div class="fd-calendar__item fd-calendar__special-day--19"><span class="fd-calendar__text" role="button">30</span></div> | -| <code>fd-calendar__special-day--20</code> | <div class="fd-calendar__item fd-calendar__special-day--20"><span class="fd-calendar__text" role="button">30</span></div> | +| <code>fd-calendar__special-day--2</code> | <div class="fd-calendar__item fd-calendar__special-day--2"><span class="fd-calendar__text" role="button">30</span></div> | +| <code>fd-calendar__special-day--3</code> | <div class="fd-calendar__item fd-calendar__special-day--3"><span class="fd-calendar__text" role="button">30</span></div> | +| <code>fd-calendar__special-day--4</code> | <div class="fd-calendar__item fd-calendar__special-day--4"><span class="fd-calendar__text" role="button">30</span></div> | +| <code>fd-calendar__special-day--5</code> | <div class="fd-calendar__item fd-calendar__special-day--5"><span class="fd-calendar__text" role="button">30</span></div> | +| <code>fd-calendar__special-day--6</code> | <div class="fd-calendar__item fd-calendar__special-day--6"><span class="fd-calendar__text" role="button">30</span></div> | +| <code>fd-calendar__special-day--7</code> | <div class="fd-calendar__item fd-calendar__special-day--7"><span class="fd-calendar__text" role="button">30</span></div> | +| <code>fd-calendar__special-day--8</code> | <div class="fd-calendar__item fd-calendar__special-day--8"><span class="fd-calendar__text" role="button">30</span></div> | +| <code>fd-calendar__special-day--9</code> | <div class="fd-calendar__item fd-calendar__special-day--9"><span class="fd-calendar__text" role="button">30</span></div> | +| <code>fd-calendar__special-day--10</code> | <div class="fd-calendar__item fd-calendar__special-day--10"><span class="fd-calendar__text" role="button">30</span></div> | +| <code>fd-calendar__special-day--11</code> | <div class="fd-calendar__item fd-calendar__special-day--11"><span class="fd-calendar__text" role="button">30</span></div> | +| <code>fd-calendar__special-day--12</code> | <div class="fd-calendar__item fd-calendar__special-day--12"><span class="fd-calendar__text" role="button">30</span></div> | +| <code>fd-calendar__special-day--13</code> | <div class="fd-calendar__item fd-calendar__special-day--13"><span class="fd-calendar__text" role="button">30</span></div> | +| <code>fd-calendar__special-day--14</code> | <div class="fd-calendar__item fd-calendar__special-day--14"><span class="fd-calendar__text" role="button">30</span></div> | +| <code>fd-calendar__special-day--15</code> | <div class="fd-calendar__item fd-calendar__special-day--15"><span class="fd-calendar__text" role="button">30</span></div> | +| <code>fd-calendar__special-day--16</code> | <div class="fd-calendar__item fd-calendar__special-day--16"><span class="fd-calendar__text" role="button">30</span></div> | +| <code>fd-calendar__special-day--17</code> | <div class="fd-calendar__item fd-calendar__special-day--17"><span class="fd-calendar__text" role="button">30</span></div> | +| <code>fd-calendar__special-day--18</code> | <div class="fd-calendar__item fd-calendar__special-day--18"><span class="fd-calendar__text" role="button">30</span></div> | +| <code>fd-calendar__special-day--19</code> | <div class="fd-calendar__item fd-calendar__special-day--19"><span class="fd-calendar__text" role="button">30</span></div> | +| <code>fd-calendar__special-day--20</code> | <div class="fd-calendar__item fd-calendar__special-day--20"><span class="fd-calendar__text" role="button">30</span></div> | `, tags: ['f3', 'a11y', 'theme'], components: ['bar', 'dialog', 'tile', 'calendar', 'button', 'segmented-button', 'icon'] } }; -export const days = () => `<div style="display: flex; justify-content: space-around;"> +export const Days = () => `<div style="display: flex; justify-content: space-around;"> <section class="fd-calendar"> <header class="fd-calendar__header"> <div class="fd-calendar__navigation"> @@ -308,7 +308,7 @@ export const days = () => `<div style="display: flex; justify-content: space-aro </div> `; -days.parameters = { +Days.parameters = { docs: { iframeHeight: 400, storyDescription: 'The calendar component can display days of the month by adding the `fd-calendar__content--dates` class to the container element.' @@ -316,7 +316,7 @@ days.parameters = { }; -export const months = () => ` <div style="display: flex; justify-content: space-around;"> +export const Months = () => ` <div style="display: flex; justify-content: space-around;"> <section class="fd-calendar"> <header class="fd-calendar__header"> <div class="fd-calendar__navigation"> @@ -395,14 +395,14 @@ export const months = () => ` <div style="display: flex; justify-content: spa </div> `; -months.parameters = { +Months.parameters = { docs: { iframeHeight: 400, storyDescription: 'The calendar component can display months in a year by adding the `fd-calendar__content--months` class to the container element.' } }; -export const years = () => `<div style="display: flex; justify-content: space-around; margin-bottom: 1rem; flex-wrap: wrap;"> +export const Years = () => `<div style="display: flex; justify-content: space-around; margin-bottom: 1rem; flex-wrap: wrap;"> <section class="fd-calendar" style="margin-bottom: 1rem;"> <header class="fd-calendar__header"> <div class="fd-calendar__navigation"> @@ -645,14 +645,14 @@ export const years = () => `<div style="display: flex; justify-content: space-ar </div> `; -years.parameters = { +Years.parameters = { docs: { iframeHeight: 700, storyDescription: 'The calendar component can display a range of years in various ways: short-term, long-term, year ranges etc. Add the `fd-calendar__content--years` class to the container element, and adjust the number of columns, rows, and content to fit your use case.' } }; -export const compact = () => `<div style="display: flex; justify-content: space-around;"> +export const Compact = () => `<div style="display: flex; justify-content: space-around;"> <div class="fd-calendar fd-calendar--compact"> <header class="fd-calendar__header"> <div class="fd-calendar__navigation"> @@ -808,7 +808,7 @@ export const compact = () => `<div style="display: flex; justify-content: space- </div> `; -compact.parameters = { +Compact.parameters = { docs: { iframeHeight: 300, storyDescription: 'The calendar component can be displayed in compact mode by adding the `fd-calendar--compact` class to the container element.' @@ -991,9 +991,9 @@ LandscapeMobile.parameters = { While using a mobile in landscape mode, the calendar component is displayed from a **Dialog** window, taking up the full width and height of the screen. Note: For landscape mode, no dialog header element should be used. However, a dialog footer is optional. - + **If the dismiss button is placed within the calendar’s navigation area, then:** - + - \`fd-calendar__navigation\` requires the \`fd-calendar__navigation--main\` class. - the dismiss button requires the \`fd-calendar__close-button--navigation\` class. ` @@ -1197,7 +1197,7 @@ PortraitMobile.parameters = { While using a mobile in portrait mode, the calendar component is displayed from a **Dialog** window, taking up the full width and height of the screen. It can be displayed in this way by adding the \`fd-calendar--mobile-portrait\` class to the container element. Note: For portrait mode, dialog header should always be used and the footer remains optional. - + ` } }; diff --git a/stories/card/card.stories.js b/stories/card/card.stories.js index b96ba9707c..409264ac06 100644 --- a/stories/card/card.stories.js +++ b/stories/card/card.stories.js @@ -1,7 +1,7 @@ export default { title: 'Components/Card', parameters: { - description: `A card is content container that represents a task or a topic on the overview page of an application. It is essentially a smart component that uses UI annotations to render its content. Cards can display read-only content from different sources side by side – without requiring the user to switch screens. + description: `A card is content container that represents a task or a topic on the overview page of an application. It is essentially a smart component that uses UI annotations to render its content. Cards can display read-only content from different sources side by side – without requiring the user to switch screens. **Cards can display different types of content, such as:** @@ -33,13 +33,13 @@ Counter (optional) | The counter indicates how many items are showing on the car }; -export const cardAnatomy = () => `<div style="display:flex; justify-content:space-around; flex-wrap: wrap"> +export const CardAnatomy = () => `<div style="display:flex; justify-content:space-around; flex-wrap: wrap"> <div style="width: 300px; height: 400px; margin: 1rem;"> <div class="fd-card" role="region" aria-label="Card Anatomy Example 1"> <a class="fd-card__header" tabindex="0"> - <span - class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar" - style="background-image: url('/assets/images/backgrounds/city.jpg')" + <span + class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar" + style="background-image: url('/assets/images/backgrounds/city.jpg')" role="img" aria-label="John Doe"></span> <div class="fd-card__header-text"> @@ -59,9 +59,9 @@ export const cardAnatomy = () => `<div style="display:flex; justify-content:spac <div class="fd-card" role="region" aria-label="Card Anatomy Example 2"> <div class="fd-card__content" role="group" aria-label="Card Content"></div> <a class="fd-card__header" tabindex="0"> - <span - class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar" - style="background-image: url('/assets/images/backgrounds/city.jpg')" + <span + class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar" + style="background-image: url('/assets/images/backgrounds/city.jpg')" role="img" aria-label="John Doe"></span> <div class="fd-card__header-text"> @@ -79,9 +79,9 @@ export const cardAnatomy = () => `<div style="display:flex; justify-content:spac <div style="width: 300px; height: 400px; margin: 1rem;"> <div class="fd-card" role="region" aria-label="Card Anatomy Example 3"> <a class="fd-card__header" tabindex="0"> - <span - class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar" - style="background-image: url('/assets/images/backgrounds/city.jpg')" + <span + class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar" + style="background-image: url('/assets/images/backgrounds/city.jpg')" role="img" aria-label="John Doe"></span> <div class="fd-card__header-text"> @@ -100,9 +100,9 @@ export const cardAnatomy = () => `<div style="display:flex; justify-content:spac <div style="width: 300px; height: 400px; margin: 1rem;"> <div class="fd-card" role="region" aria-label="Card Anatomy Example 4"> <a class="fd-card__header" tabindex="0"> - <span - class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar" - style="background-image: url('/assets/images/backgrounds/city.jpg')" + <span + class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar" + style="background-image: url('/assets/images/backgrounds/city.jpg')" role="img" aria-label="John Doe"></span> <div class="fd-card__header-text"> @@ -183,8 +183,8 @@ export const cardAnatomy = () => `<div style="display:flex; justify-content:spac </div> `; -cardAnatomy.storyName = 'Standard card'; -cardAnatomy.parameters = { +CardAnatomy.storyName = 'Standard card'; +CardAnatomy.parameters = { docs: { iframeHeight: 900, storyDescription: `The standard card displays a header area with a title and a content area, as well as any other components mentioned in the card anatomy section. @@ -192,7 +192,7 @@ cardAnatomy.parameters = { } }; -export const analyticalCard = () => `<div style="display:flex; justify-content:space-around; flex-wrap: wrap"> +export const AnalyticalCard = () => `<div style="display:flex; justify-content:space-around; flex-wrap: wrap"> <div style="width: 300px; height: 400px; margin: 1rem;"> <div class="fd-card fd-card--analytical" role="region" aria-label="Analytical Card Example 1"> <a class="fd-card__header" tabindex="0"> @@ -254,7 +254,7 @@ export const analyticalCard = () => `<div style="display:flex; justify-content:s <div class="fd-numeric-content__kpi">1Ñç</div> </div> <div class="fd-numeric-content__scale-container"> - <div class="fd-numeric-content__scale"> + <div class="fd-numeric-content__scale"> <i class="fd-numeric-content__scale-arrow sap-icon--down" aria-label="decrease"></i> <span class="fd-numeric-content__scale-text">M</span> </div> @@ -280,8 +280,8 @@ export const analyticalCard = () => `<div style="display:flex; justify-content:s </div> `; -analyticalCard.storyName = 'Analytical card'; -analyticalCard.parameters = { +AnalyticalCard.storyName = 'Analytical card'; +AnalyticalCard.parameters = { docs: { iframeHeight: 450, storyDescription: `The analytical card is used for data visualization. It can display a KPI header and various chart types in the content. The only difference between a KPI header and a standard header is that the former requires a subtitle, a KPI area and can display an optional second subtitle. To display an analytical card, add the \`fd-card--analytical\` modifier class to the main element. @@ -297,12 +297,12 @@ analyticalCard.parameters = { - Donut - Combined - Scatter plot - + ` } }; -export const listCard = () => `<div style="display:flex; justify-content:space-around; flex-wrap: wrap"> +export const ListCard = () => `<div style="display:flex; justify-content:space-around; flex-wrap: wrap"> <div style="width: 300px; height: 100%; margin: 1rem;"> <div class="fd-card" role="region" aria-label="List Card Example 1"> <div class="fd-card__header fd-card__header--non-interactive"> @@ -389,18 +389,18 @@ export const listCard = () => `<div style="display:flex; justify-content:space-a </div> `; -listCard.storyName = 'List card'; -listCard.parameters = { +ListCard.storyName = 'List card'; +ListCard.parameters = { docs: { iframeHeight: 400, storyDescription: `A card can display various types of lists. All components placed inside should behave natively. For this kind of card it is not recommended to keep header interactive, or navigable. - Such a header can be achieved by adding \`fd-card__header--non-interactive\` modifier class. + Such a header can be achieved by adding \`fd-card__header--non-interactive\` modifier class. ` } }; -export const tableCard = () => `<div style="display:flex; justify-content:space-around; flex-wrap: wrap"> +export const TableCard = () => `<div style="display:flex; justify-content:space-around; flex-wrap: wrap"> <div style="width: 500px; height: 100%; margin: 1rem;"> <div class="fd-card fd-card--table" role="region" aria-label="Table Card Example 1"> <a class="fd-card__header" tabindex="0"> @@ -555,8 +555,8 @@ export const tableCard = () => `<div style="display:flex; justify-content:space- </div> `; -tableCard.storyName = 'Table card'; -tableCard.parameters = { +TableCard.storyName = 'Table card'; +TableCard.parameters = { docs: { iframeHeight: 400, storyDescription: 'Cards can display tables within the content area. To display a table card, add the `fd-card--table` modifier class to the main element.' @@ -564,13 +564,13 @@ tableCard.parameters = { }; -export const objectCard = () => `<div style="display:flex; justify-content:space-around; flex-wrap: wrap"> +export const ObjectCard = () => `<div style="display:flex; justify-content:space-around; flex-wrap: wrap"> <div style="width: 14rem; height: 34rem; margin: 1rem;"> <div class="fd-card fd-card--object" role="region" aria-label="Object Card Example 1"> <a class="fd-card__header" tabindex="0"> - <span - class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar" - style="background-image: url('/assets/images/avatars/1.svg')" + <span + class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar" + style="background-image: url('/assets/images/avatars/1.svg')" role="img" aria-label="John Doe"></span> <div class="fd-card__header-text"> @@ -632,9 +632,9 @@ export const objectCard = () => `<div style="display:flex; justify-content:space <div style="width: 40rem; height: 20rem; margin: 1rem;"> <div class="fd-card fd-card--object" role="region" aria-label="Object Card Example 2"> <a class="fd-card__header" tabindex="0"> - <span - class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar" - style="background-image: url('/assets/images/avatars/1.svg')" + <span + class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar" + style="background-image: url('/assets/images/avatars/1.svg')" role="img" aria-label="John Doe"></span> <div class="fd-card__header-text"> @@ -706,12 +706,12 @@ export const objectCard = () => `<div style="display:flex; justify-content:space </div> `; -objectCard.storyName = 'Object card'; -objectCard.parameters = { +ObjectCard.storyName = 'Object card'; +ObjectCard.parameters = { docs: { iframeHeight: 600, storyDescription: `The object card can display a single object or a group of objects. Contrary to other cards, object card has 1rem padding on all sides of the content area. To display an object card, add the \`fd-card--object\` modifier class to the main element. - + **Within the content area, there are several components:** Component (class) | Description diff --git a/stories/carousel/carousel.stories.js b/stories/carousel/carousel.stories.js index 7dafab75a8..7605ed2318 100644 --- a/stories/carousel/carousel.stories.js +++ b/stories/carousel/carousel.stories.js @@ -30,45 +30,45 @@ To ensure that the carousel is accessible, a div element with class \`fd-carouse } }; -export const carouselBottom = () => `<div style="display: flex; flex-direction: column; align-items: center; background: #CCD1D1;"> +export const CarouselBottom = () => `<div style="display: flex; flex-direction: column; align-items: center; background: #CCD1D1;"> <h4>Navigation buttons in page indicator</h4> - <div - class="fd-carousel" - data-ride="carousel" + <div + class="fd-carousel" + data-ride="carousel" style="margin-bottom: 3rem; max-width: 30rem;"> <div class="fd-carousel__content" style="min-height: 15.5rem;"></div> <div class="fd-carousel__page-indicator-container"> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--left" data-slide="prev" aria-label="Go to previous item"> <i class="sap-icon--slim-arrow-left"></i> </button> <ol class="fd-carousel__page-indicators"> - <li - data-slide-to="1" + <li + data-slide-to="1" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="2" + <li + data-slide-to="2" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="3" + <li + data-slide-to="3" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="4" + <li + data-slide-to="4" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="5" - aria-label="Displaying item 5 of 7" + <li + data-slide-to="5" + aria-label="Displaying item 5 of 7" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></li> - <li - data-slide-to="6" + <li + data-slide-to="6" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="7" + <li + data-slide-to="7" class="fd-carousel__page-indicator"></li> </ol> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--right" data-slide="next" aria-label="Go to next item"> @@ -81,18 +81,18 @@ export const carouselBottom = () => `<div style="display: flex; flex-direction: </div> <h4>Content navigation buttons</h4> - <div - class="fd-carousel" - data-ride="carousel" + <div + class="fd-carousel" + data-ride="carousel" style="margin-bottom: 3rem; max-width: 30rem;"> <div class="fd-carousel__content" style="min-height: 15.5rem;"> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--left" data-slide="prev" aria-label="Go to previous item"> <i class="sap-icon--slim-arrow-left"></i> </button> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--right" data-slide="next" aria-label="Go to next item"> @@ -101,26 +101,26 @@ export const carouselBottom = () => `<div style="display: flex; flex-direction: </div> <div class="fd-carousel__page-indicator-container"> <ol class="fd-carousel__page-indicators"> - <li - data-slide-to="1" + <li + data-slide-to="1" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="2" + <li + data-slide-to="2" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="3" + <li + data-slide-to="3" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="4" + <li + data-slide-to="4" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="5" + <li + data-slide-to="5" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></li> - <li - data-slide-to="6" + <li + data-slide-to="6" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="7" + <li + data-slide-to="7" class="fd-carousel__page-indicator"></li> </ol> </div> @@ -130,13 +130,13 @@ export const carouselBottom = () => `<div style="display: flex; flex-direction: </div> <h4>Numeric page indicator</h4> - <div - class="fd-carousel" - data-ride="carousel" + <div + class="fd-carousel" + data-ride="carousel" style="margin-bottom: 3rem; max-width: 30rem;"> <div class="fd-carousel__content" style="min-height: 15.5rem;"></div> <div class="fd-carousel__page-indicator-container"> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--left" data-slide="prev" aria-label="Go to previous item"> @@ -145,7 +145,7 @@ export const carouselBottom = () => `<div style="display: flex; flex-direction: <div class="fd-carousel__page-indicators"> <div class="fd-carousel__text">1 of 4</div> </div> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--right" data-slide="next" aria-label="Go to next item"> @@ -158,18 +158,18 @@ export const carouselBottom = () => `<div style="display: flex; flex-direction: </div> <h4>No page indicator</h4> - <div - class="fd-carousel" - data-ride="carousel" + <div + class="fd-carousel" + data-ride="carousel" style="margin-bottom: 3rem; max-width: 30rem;"> <div class="fd-carousel__content" style="min-height: 15.5rem;"> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--left" data-slide="prev" aria-label="Go to previous item"> <i class="sap-icon--slim-arrow-left"></i> </button> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--right" data-slide="next" aria-label="Go to next item"> @@ -183,8 +183,8 @@ export const carouselBottom = () => `<div style="display: flex; flex-direction: </div> `; -carouselBottom.storyName = 'Bottom page indicator'; -carouselBottom.parameters = { +CarouselBottom.storyName = 'Bottom page indicator'; +CarouselBottom.parameters = { docs: { iframeHeight: 900, storyDescription: `The bottom page indicator carousel displays a content area, navigation buttons and a page indicator at the bottom. The page indicator wraps onto the next line if the content is too long, and after the pages reach a count of 8, the dots are replaced by numerical representation i.e. *1 of 4*. @@ -192,43 +192,43 @@ carouselBottom.parameters = { } }; -export const carouselTop = () => `<div style="display: flex; flex-direction: column; align-items: center; background: #CCD1D1;"> +export const CarouselTop = () => `<div style="display: flex; flex-direction: column; align-items: center; background: #CCD1D1;"> <h4>Navigation buttons in page indicator</h4> - <div - class="fd-carousel" - data-ride="carousel" + <div + class="fd-carousel" + data-ride="carousel" style="margin-bottom: 3rem; max-width: 30rem;"> <div class="fd-carousel__page-indicator-container"> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--left" data-slide="prev" aria-label="Go to previous item"> <i class="sap-icon--slim-arrow-left"></i> </button> <ol class="fd-carousel__page-indicators"> - <li - data-slide-to="1" + <li + data-slide-to="1" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="2" + <li + data-slide-to="2" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="3" + <li + data-slide-to="3" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="4" + <li + data-slide-to="4" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="5" + <li + data-slide-to="5" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></li> - <li - data-slide-to="6" + <li + data-slide-to="6" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="7" + <li + data-slide-to="7" class="fd-carousel__page-indicator"></li> </ol> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--right" data-slide="next" aria-label="Go to next item"> @@ -242,43 +242,43 @@ export const carouselTop = () => `<div style="display: flex; flex-direction: col </div> <h4>Navigation buttons in content</h4> - <div - class="fd-carousel" - data-ride="carousel" + <div + class="fd-carousel" + data-ride="carousel" style="margin-bottom: 3rem; max-width: 30rem;"> <div class="fd-carousel__page-indicator-container"> <ol class="fd-carousel__page-indicators"> - <li - data-slide-to="1" + <li + data-slide-to="1" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="2" + <li + data-slide-to="2" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="3" + <li + data-slide-to="3" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="4" + <li + data-slide-to="4" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="5" + <li + data-slide-to="5" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></li> - <li - data-slide-to="6" + <li + data-slide-to="6" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="7" + <li + data-slide-to="7" class="fd-carousel__page-indicator"></li> </ol> </div> <div class="fd-carousel__content" style="min-height: 15.5rem;"> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--left" data-slide="prev" aria-label="Go to previous item"> <i class="sap-icon--slim-arrow-left"></i> </button> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--right" data-slide="next" aria-label="Go to next item"> @@ -291,9 +291,9 @@ export const carouselTop = () => `<div style="display: flex; flex-direction: col </div> <h4>Numeral format for page indicator</h4> - <div - class="fd-carousel" - data-ride="carousel" + <div + class="fd-carousel" + data-ride="carousel" style="margin-bottom: 3rem; max-width: 30rem;"> <div class="fd-carousel__page-indicator-container"> <div class="fd-carousel__page-indicators"> @@ -301,13 +301,13 @@ export const carouselTop = () => `<div style="display: flex; flex-direction: col </div> </div> <div class="fd-carousel__content" style="min-height: 15.5rem;"> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--left" data-slide="prev" aria-label="Go to previous item"> <i class="sap-icon--slim-arrow-left"></i> </button> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--right" data-slide="next" aria-label="Go to next item"> @@ -320,19 +320,19 @@ export const carouselTop = () => `<div style="display: flex; flex-direction: col </div> <h4>No page indicators</h4> - <div - class="fd-carousel" - data-ride="carousel" + <div + class="fd-carousel" + data-ride="carousel" style="margin-bottom: 3rem; max-width: 30rem;"> <div class="fd-carousel__page-indicator-container"> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--left" data-slide="prev" aria-label="Go to previous item"> <i class="sap-icon--slim-arrow-left"></i> </button> <ol class="fd-carousel__page-indicators"></ol> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--right" data-slide="next" aria-label="Go to next item"> @@ -358,8 +358,8 @@ export const carouselTop = () => `<div style="display: flex; flex-direction: col </div> `; -carouselTop.storyName = 'Top page indicator'; -carouselTop.parameters = { +CarouselTop.storyName = 'Top page indicator'; +CarouselTop.parameters = { docs: { iframeHeight: 900, storyDescription: `The top page indicator carousel displays a content area, navigation buttons and a page indicator at the top. @@ -367,45 +367,45 @@ carouselTop.parameters = { } }; -export const carouselNoNavigation = () => `<div style="display: flex; flex-direction: column; align-items: center; background: #CCD1D1;"> +export const CarouselNoNavigation = () => `<div style="display: flex; flex-direction: column; align-items: center; background: #CCD1D1;"> <h4>Hiding navigation buttons in page indicator</h4> - <div - class="fd-carousel fd-carousel--no-navigation" - data-ride="carousel" + <div + class="fd-carousel fd-carousel--no-navigation" + data-ride="carousel" style="margin-bottom: 3rem; max-width: 30rem;"> <div class="fd-carousel__content" style="min-height: 15.5rem;"></div> <div class="fd-carousel__page-indicator-container"> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--left" data-slide="prev" aria-label="Go to previous item"> <i class="sap-icon--slim-arrow-left"></i> </button> <ol class="fd-carousel__page-indicators"> - <li - data-slide-to="1" + <li + data-slide-to="1" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="2" + <li + data-slide-to="2" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="3" + <li + data-slide-to="3" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="4" + <li + data-slide-to="4" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="5" - aria-label="Displaying item 5 of 7" + <li + data-slide-to="5" + aria-label="Displaying item 5 of 7" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></li> - <li - data-slide-to="6" + <li + data-slide-to="6" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="7" + <li + data-slide-to="7" class="fd-carousel__page-indicator"></li> </ol> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--right" data-slide="next" aria-label="Go to next item"> @@ -418,43 +418,43 @@ export const carouselNoNavigation = () => `<div style="display: flex; flex-direc </div> <h4>Hiding navigation buttons in the content</h4> - <div - class="fd-carousel fd-carousel--no-navigation" - data-ride="carousel" + <div + class="fd-carousel fd-carousel--no-navigation" + data-ride="carousel" style="margin-bottom: 3rem; max-width: 30rem;"> <div class="fd-carousel__page-indicator-container"> <ol class="fd-carousel__page-indicators"> - <li - data-slide-to="1" + <li + data-slide-to="1" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="2" + <li + data-slide-to="2" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="3" + <li + data-slide-to="3" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="4" + <li + data-slide-to="4" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="5" + <li + data-slide-to="5" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></li> - <li - data-slide-to="6" + <li + data-slide-to="6" class="fd-carousel__page-indicator"></li> - <li - data-slide-to="7" + <li + data-slide-to="7" class="fd-carousel__page-indicator"></li> </ol> </div> <div class="fd-carousel__content" style="min-height: 15.5rem;"> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--left" data-slide="prev" aria-label="Go to previous item"> <i class="sap-icon--slim-arrow-left"></i> </button> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--right" data-slide="next" aria-label="Go to next item"> @@ -468,8 +468,8 @@ export const carouselNoNavigation = () => `<div style="display: flex; flex-direc </div> `; -carouselNoNavigation.storyName = 'Hidden navigation buttons'; -carouselNoNavigation.parameters = { +CarouselNoNavigation.storyName = 'Hidden navigation buttons'; +CarouselNoNavigation.parameters = { docs: { iframeHeight: 900, storyDescription: `Carousel can also be displayed without navigation buttons. To hide them, add the \`fd-carousel--no-navigation\` modifier class to the \`fd-carousel\` class. On touchable devices, the user can navigate with a swipe gesture. @@ -477,7 +477,7 @@ carouselNoNavigation.parameters = { } }; -export const horizontalCarousel = () => `<div style="display: flex; flex-direction: column; align-items: center; background: #CCD1D1; height: 25rem;"> +export const HorizontalCarousel = () => `<div style="display: flex; flex-direction: column; align-items: center; background: #CCD1D1; height: 25rem;"> <h4>Items in horizontal direction</h4> <div class="fd-carousel" @@ -553,8 +553,8 @@ export const horizontalCarousel = () => `<div style="display: flex; flex-directi </div> `; -horizontalCarousel.storyName = 'Items in horizontal direction'; -horizontalCarousel.parameters = { +HorizontalCarousel.storyName = 'Items in horizontal direction'; +HorizontalCarousel.parameters = { docs: { iframeHeight: 900, storyDescription: `Carousel will have items which will spread horizontally and will be visible on navigation. For translate animation effect to work, all items should be in DOM. @@ -562,7 +562,7 @@ horizontalCarousel.parameters = { } }; -export const error = () => `<div style="display: flex; flex-direction: column; align-items: center; background: #CCD1D1; height: 25rem;"> +export const Error = () => `<div style="display: flex; flex-direction: column; align-items: center; background: #CCD1D1; height: 25rem;"> <h4>Error in loading items</h4> <div class="fd-carousel fd-carousel--no-navigation" @@ -583,14 +583,14 @@ export const error = () => `<div style="display: flex; flex-direction: column; a </div> </div> <div class="fd-carousel__page-indicator-container"> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--left" data-slide="prev" aria-label="Go to previous item"> <i class="sap-icon--slim-arrow-left"></i> </button> <ol class="fd-carousel__page-indicators"></ol> - <button + <button class="fd-button fd-carousel__button fd-carousel__button--right" data-slide="next" aria-label="Go to next item"> @@ -604,8 +604,8 @@ export const error = () => `<div style="display: flex; flex-direction: column; a </div> `; -error.storyName = 'Items loading error'; -error.parameters = { +Error.storyName = 'Items loading error'; +Error.parameters = { docs: { iframeHeight: 900, storyDescription: `Error message can be disaplyed when items could not be loaded. Error message can be composed using Message page component. diff --git a/stories/checkbox/checkbox.stories.js b/stories/checkbox/checkbox.stories.js index cda5737c2a..d113192fae 100644 --- a/stories/checkbox/checkbox.stories.js +++ b/stories/checkbox/checkbox.stories.js @@ -37,7 +37,7 @@ const localStyles = ` </style> `; -export const desktop = () => ` +export const Desktop = () => ` ${localStyles} <fieldset class="fd-fieldset"> <legend class="fd-fieldset__legend">Desktop (compact) checkboxes</legend> @@ -94,17 +94,16 @@ ${localStyles} </fieldset> `; -desktop.storyName = 'Desktop'; -desktop.parameters = { +Desktop.parameters = { docs: { iframeHeight: 330, - storyDescription: `A checkbox can be displayed in two different sizes desktop (compact) and mobile (default). + storyDescription: `A checkbox can be displayed in two different sizes desktop (compact) and mobile (default). On desktop screens, the checkbox appears smaller and uses the \`fd-checkbox__label--compact\` modifier class. ` } }; -export const required = () => ` +export const Required = () => ` <fieldset class="fd-fieldset"> <legend class="fd-fieldset__legend">Required checkbox</legend> <div class="fd-form-group"> @@ -119,8 +118,8 @@ export const required = () => ` </div> </fieldset> `; -required.storyName = 'Required'; -required.parameters = { + +Required.parameters = { docs: { iframeHeight: 330, storyDescription: `To show that a checkbox input is required, use the \`fd-checkbox__label--required\` class. @@ -128,7 +127,7 @@ required.parameters = { } }; -export const mobile = () => ` +export const Mobile = () => ` ${localStyles} <fieldset class="fd-fieldset"> <legend class="fd-fieldset__legend">Mobile checkboxes</legend> @@ -185,8 +184,7 @@ ${localStyles} </fieldset> `; -mobile.storyName = 'Mobile'; -mobile.parameters = { +Mobile.parameters = { docs: { iframeHeight: 330, storyDescription: `A checkbox can display larger so users can easily select options on a mobile screen. This is considered the default size for checkbox. @@ -194,7 +192,7 @@ mobile.parameters = { } }; -export const inline = () => `<fieldset class="fd-fieldset"> +export const Inline = () => `<fieldset class="fd-fieldset"> <legend class="fd-fieldset__legend">Inline checkboxes</legend> <div class="fd-form-group fd-form-group--inline"> <div class="fd-form-group__item fd-form-item"> @@ -225,15 +223,14 @@ export const inline = () => `<fieldset class="fd-fieldset"> </fieldset> `; -inline.storyName = 'Inline'; -inline.parameters = { +Inline.parameters = { docs: { iframeHeight: 400, storyDescription: 'Checkboxes can display horizontally in a line. To display them this way, add the `fd-checkbox__label--inline` modifier class to the element.' } }; -export const states = () => ` +export const States = () => ` ${localStyles} <div class="checkbox-example-container"> <fieldset class="fd-fieldset"> @@ -418,8 +415,7 @@ ${localStyles} </div> `; -states.storyName = 'States'; -states.parameters = { +States.parameters = { docs: { iframeHeight: 400, storyDescription: `Checkboxes can display several interaction states to communicate semantic meaning to the users. To display different states, add the classes below to the \`fd-form-item\`: diff --git a/stories/code/code.stories.js b/stories/code/code.stories.js index 8b3e74f086..5a115c2245 100644 --- a/stories/code/code.stories.js +++ b/stories/code/code.stories.js @@ -8,7 +8,7 @@ export default { }; -export const primary = () => ` +export const Primary = () => ` <pre><code class="fd-code">apiVersion: extensions.name/v1alpha1 kind: Class @@ -28,17 +28,17 @@ spec: </code></pre> `; -primary.storyName = 'Code Block'; -primary.parameters = { +Primary.storyName = 'Code Block'; +Primary.parameters = { docs: { storyDescription: 'Code example as a block where you are include multiple lines' } }; -export const inlineCode = () => `You can add inline code like here <code class="fd-code fd-code--inline">FundamentalExtension</code> and add mores +export const InlineCode = () => `You can add inline code like here <code class="fd-code fd-code--inline">FundamentalExtension</code> and add mores <code class="fd-code fd-code--inline">ClassName</code>`; -inlineCode.parameters = { +InlineCode.parameters = { docs: { storyDescription: 'Inline Code Example which can be used as part of a bigger text paragraph' } diff --git a/stories/combobox-input/combobox-input.stories.js b/stories/combobox-input/combobox-input.stories.js index d4262e373a..c9df0ca449 100644 --- a/stories/combobox-input/combobox-input.stories.js +++ b/stories/combobox-input/combobox-input.stories.js @@ -2,12 +2,12 @@ export default { title: 'Patterns/Combobox Input', parameters: { description: ` -The Combobox Input component is an opinionated composition of the input group, popover and list components. +The Combobox Input component is an opinionated composition of the input group, popover and list components. The popover and \`dropdown list\` is shared between the multi-input and select components. Please see the \`select\` documentation for the complete list of modifiers that are also supported by the combobox component. -\`Combobox\` allows users to select an item from a predefined list. -It provides an editable input field for filtering the list, and a dropdown menu with a list of the available options. +\`Combobox\` allows users to select an item from a predefined list. +It provides an editable input field for filtering the list, and a dropdown menu with a list of the available options. If the entries are not validated by the application, users can also enter custom values. `, tags: ['f3', 'a11y', 'theme'], @@ -15,7 +15,7 @@ If the entries are not validated by the application, users can also enter custom } }; -export const cozyAndCompact = () => `<div style="display:flex;justify-content:space-around;height:700px"> +export const CozyAndCompact = () => `<div style="display:flex;justify-content:space-around;height:700px"> <div style="display:flex;flex-direction:column"> <label for="cozyCombobox" class="fd-form-label">Combobox Cozy Mode</label> <div class="fd-popover"> @@ -145,13 +145,13 @@ export const cozyAndCompact = () => `<div style="display:flex;justify-content:sp </div> `; -cozyAndCompact.parameters = { +CozyAndCompact.parameters = { docs: { iframeHeight: 700 } }; -export const asFormItem = () => `<div style="height:700px"> +export const AsFormItem = () => `<div style="height:700px"> <div class="fd-form-item"> <label for="comboboxAsFormItem" class="fd-form-label">Combobox as a form item</label> <div class="fd-popover"> @@ -234,7 +234,7 @@ export const asFormItem = () => `<div style="height:700px"> </div> `; -asFormItem.parameters = { +AsFormItem.parameters = { docs: { iframeHeight: 700, storyDescription: ` @@ -244,7 +244,7 @@ Applications are free to override this in their custom styles if needed and own } }; -export const twoItemsAndItemsGrouping = () => `<div style="display:flex;justify-content:space-around;height:500px"> +export const TwoItemsAndItemsGrouping = () => `<div style="display:flex;justify-content:space-around;height:500px"> <div style="display:flex;flex-direction:column"> <label for="twoItems" class="fd-form-label">Product prices</label> <div class="fd-popover"> @@ -362,7 +362,7 @@ export const twoItemsAndItemsGrouping = () => `<div style="display:flex;justify- </div> `; -twoItemsAndItemsGrouping.parameters = { +TwoItemsAndItemsGrouping.parameters = { docs: { iframeHeight: 500, storyDescription: ` @@ -372,7 +372,7 @@ In cases where the list items need to be categorized into groups, it is possible } }; -export const matchPopoverBodySize = () => `<div style="display:flex;height:250px"> +export const MatchPopoverBodySize = () => `<div style="display:flex;height:250px"> <div style="display:flex;flex-direction:column"> <label for="matchPopoverBodySize" class="fd-form-label">Match Popover Body Size</label> <div class="fd-popover"> @@ -421,19 +421,19 @@ export const matchPopoverBodySize = () => `<div style="display:flex;height:250px </div> `; -matchPopoverBodySize.parameters = { +MatchPopoverBodySize.parameters = { docs: { iframeHeight: 250, storyDescription: ` The default length size of the popover body is often different from the text length. -The body length can be adjusted to match the text length by adding the \`fd-popover__body--dropdown-fill\` class to the \`fd-popover__body\`. +The body length can be adjusted to match the text length by adding the \`fd-popover__body--dropdown-fill\` class to the \`fd-popover__body\`. This class has been added to all the \`Combobox\` examples above. In the example you can see how the \`Combobox\` component looks without the \`fd-popover__body--dropdown-fill\` modifier. ` } }; -export const disabledAndReadOnly = () => `<div style="display:flex;justify-content:space-around"> +export const DisabledAndReadOnly = () => `<div style="display:flex;justify-content:space-around"> <div style="display:flex;flex-direction:column"> <label for="disabledCombobox" class="fd-form-label">Disabled</label> <div class="fd-popover"> @@ -460,7 +460,7 @@ export const disabledAndReadOnly = () => `<div style="display:flex;justify-conte </div> `; -disabledAndReadOnly.parameters = { +DisabledAndReadOnly.parameters = { docs: { storyDescription: ` To disable a \`Combobox\` component, the disabled attribute needs to be added to the \`fd-popover__control\` and the \`fd-input__control\` elements. @@ -471,7 +471,7 @@ This can also be done by using the \`.is-readonly\` class or \`aria-readonly="tr } }; -export const semantic = () => `<div style="height:200px"> +export const Semantic = () => `<div style="height:200px"> <label for="semanticCombobox" class="fd-form-label">Semantic Combobox</label> <div class="fd-popover"> <div class="fd-popover__control" aria-controls="F4GcEX34" aria-expanded="true" aria-haspopup="true" @@ -485,7 +485,7 @@ export const semantic = () => `<div style="height:200px"> <input type="text" class="fd-input fd-input--compact fd-input-group__input" id="semanticCombobox" placeholder="Select Fruit"> <span class="fd-input-group__addon fd-input-group__addon--compact fd-input-group__addon--button"> <button id="mpzjf2q09ugd" aria-label="show/hide fruit options" - class="fd-input-group__button fd-button fd-button--compact fd-button--transparent fd-select__button" + class="fd-input-group__button fd-button fd-button--compact fd-button--transparent fd-select__button" aria-controls="F4GcEX34" aria-expanded="true" aria-haspopup="true"> <i class="sap-icon--navigation-down-arrow"></i> </button> @@ -517,20 +517,20 @@ export const semantic = () => `<div style="height:200px"> </div> `; -semantic.parameters = { +Semantic.parameters = { docs: { iframeHeight: 250, storyDescription: ` For a complete list of states supported by the \`combobox\` component, please see the documentation for the form or select components. -The semantic mode can be used to modify the combobox component by adding one of -\`is-error\` | \`is-success\` | \`is-warning\` | \`is-information\` classes into fd-input-group element. +The semantic mode can be used to modify the combobox component by adding one of +\`is-error\` | \`is-success\` | \`is-warning\` | \`is-information\` classes into fd-input-group element. To add text in the \`body\` of the component, simply include your text in the \`fd-list__message\` under the \`ul\` element. ` } }; -export const mobile = () => `<div class="fd-dialog fd-dialog-docs-static fd-select-docs-max-height fd-dialog--active" +export const Mobile = () => `<div class="fd-dialog fd-dialog-docs-static fd-select-docs-max-height fd-dialog--active" id="select-dialog-example" style="height:600px"> <section role="dialog" aria-labelledby="mobileDialogHeader" class="fd-dialog__content"> <header class="fd-dialog__header fd-bar fd-bar--header-with-subheader"> @@ -609,7 +609,7 @@ id="select-dialog-example" style="height:600px"> </div> `; -mobile.parameters = { +Mobile.parameters = { docs: { iframeHeight: 600, storyDescription: ` diff --git a/stories/context-menu/context-menu.stories.js b/stories/context-menu/context-menu.stories.js index 3f95f58f39..8c22bd5e92 100644 --- a/stories/context-menu/context-menu.stories.js +++ b/stories/context-menu/context-menu.stories.js @@ -21,7 +21,7 @@ Implementation Guidelines: } }; -export const withIconAndButton = () => `<div style="height: 400px;"> +export const WithIconAndButton = () => `<div style="height: 400px;"> <div style="display:flex;justify-content:space-around;"> <div class="fd-popover"> <div class="fd-popover__control"> @@ -103,4 +103,4 @@ export const withIconAndButton = () => `<div style="height: 400px;"> </div> `; -withIconAndButton.storyName = 'Examples with Icon and Button'; +WithIconAndButton.storyName = 'Examples with Icon and Button'; diff --git a/stories/counter/counter.stories.js b/stories/counter/counter.stories.js index 546b98e3b2..bb312dd41a 100644 --- a/stories/counter/counter.stories.js +++ b/stories/counter/counter.stories.js @@ -8,30 +8,30 @@ export default { }; -export const primary = () => ` +export const Primary = () => ` <span class="fd-counter" aria-label="Unread count">5</span> <span class="fd-counter" aria-label="Unread count">25</span> <span class="fd-counter" aria-label="Unread count">101</span> <span class="fd-counter" aria-label="Unread count">999+</span> `; -primary.storyName = 'Standalone'; -primary.parameters = { +Primary.storyName = 'Standalone'; +Primary.parameters = { docs: { storyDescription: 'Counter used as a standlone component' } }; -export const paragraph = () => `<p>Lorem ipsum <span class="fd-counter" aria-label="Unread count">5</span> </p> +export const Paragraph = () => `<p>Lorem ipsum <span class="fd-counter" aria-label="Unread count">5</span> </p> `; -paragraph.storyName = 'Text'; -paragraph.parameters = { +Paragraph.storyName = 'Text'; +Paragraph.parameters = { docs: { storyDescription: 'Counter inserted in paragraph' } }; -export const tabs = () => `<ul class="fd-tabs" role="tablist"> +export const Tabs = () => `<ul class="fd-tabs" role="tablist"> <li class="fd-tabs__item" role="tab"> <a class="fd-tabs__link" href="#AvcVC566">Link <span class="fd-counter" aria-label="Unread count">25</span></a> @@ -50,14 +50,13 @@ export const tabs = () => `<ul class="fd-tabs" role="tablist"> </ul> `; -tabs.storyName = 'Tabs'; -tabs.parameters = { +Tabs.parameters = { docs: { storyDescription: 'Counter added to a tab' } }; -export const notifier = () => ` +export const Notifier = () => ` <button class="fd-button fd-button--transparent" aria-label="Notifications"> <i class="sap-icon--bell"></i> <span class="fd-counter fd-counter--notification" aria-label="Unread count">1</span> @@ -79,8 +78,8 @@ export const notifier = () => ` </button> `; -notifier.storyName = 'Notification'; -notifier.parameters = { +Notifier.storyName = 'Notification'; +Notifier.parameters = { docs: { storyDescription: 'Counter with `--notification` modifier' } diff --git a/stories/datepicker/datepicker.stories.js b/stories/datepicker/datepicker.stories.js index 152218ee44..d9efa87a6e 100644 --- a/stories/datepicker/datepicker.stories.js +++ b/stories/datepicker/datepicker.stories.js @@ -14,7 +14,7 @@ This component mostly relies on the CSS of other components and has very little } }; -export const defaultAndCompactSizes = () => `<div style="display:flex;justify-content:space-around;height:400px"> +export const DefaultAndCompactSizes = () => `<div style="display:flex;justify-content:space-around;height:400px"> <div class="fd-docs-date-picker"> <div class="fd-popover"> <div class="fd-popover__control"> @@ -48,7 +48,7 @@ export const defaultAndCompactSizes = () => `<div style="display:flex;justify-co <div class="fd-calendar__header"> <div class="fd-calendar__navigation"> <div class="fd-calendar__action"> - <button class="fd-button fd-button--transparent" aria-label="Previous" aria-disabled="true"> + <button class="fd-button fd-button--transparent" aria-label="Previous" aria-disabled="true"> <i class="sap-icon--slim-arrow-left"></i> </button> </div> @@ -59,7 +59,7 @@ export const defaultAndCompactSizes = () => `<div style="display:flex;justify-co <button class="fd-button fd-button--transparent" aria-expanded="false">2018</button> </div> <div class="fd-calendar__action"> - <button class="fd-button fd-button--transparent" aria-label="Next"> + <button class="fd-button fd-button--transparent" aria-label="Next"> <i class="sap-icon--slim-arrow-right"></i> </button> </div> @@ -250,7 +250,7 @@ export const defaultAndCompactSizes = () => `<div style="display:flex;justify-co <div class="fd-calendar__header"> <div class="fd-calendar__navigation"> <div class="fd-calendar__action"> - <button class="fd-button fd-button--transparent fd-button--compact" aria-label="Previous" aria-disabled="true"> + <button class="fd-button fd-button--transparent fd-button--compact" aria-label="Previous" aria-disabled="true"> <i class="sap-icon--slim-arrow-left"></i> </button> </div> @@ -422,13 +422,13 @@ export const defaultAndCompactSizes = () => `<div style="display:flex;justify-co </div> `; -defaultAndCompactSizes.parameters = { +DefaultAndCompactSizes.parameters = { docs: { iframeHeight: 500 } }; -export const todaySelectionButton = () => `<div class="fd-docs-date-picker" style="height:450px"> +export const TodaySelectionButton = () => `<div class="fd-docs-date-picker" style="height:450px"> <div class="fd-popover"> <div class="fd-popover__control"> <label class="fd-form-label" for="todaySelectionDateInput">en-US DatePicker with today selection</label> @@ -449,7 +449,7 @@ export const todaySelectionButton = () => `<div class="fd-docs-date-picker" styl aria-controls="amksodaidasdjs" aria-expanded="true" aria-haspopup="true" - aria-label="Choose Date"> + aria-label="Choose Date"> <i class="sap-icon--appointment-2"></i> </button> </span> @@ -460,7 +460,7 @@ export const todaySelectionButton = () => `<div class="fd-docs-date-picker" styl <div class="fd-calendar__header"> <div class="fd-calendar__navigation"> <div class="fd-calendar__action"> - <button class="fd-button fd-button--transparent" aria-label="Previous" aria-disabled="true"> + <button class="fd-button fd-button--transparent" aria-label="Previous" aria-disabled="true"> <i class="sap-icon--slim-arrow-left"></i> </button> </div> @@ -471,7 +471,7 @@ export const todaySelectionButton = () => `<div class="fd-docs-date-picker" styl <button class="fd-button fd-button--transparent" aria-expanded="false">2018</button> </div> <div class="fd-calendar__action"> - <button class="fd-button fd-button--transparent" aria-label="Next"> + <button class="fd-button fd-button--transparent" aria-label="Next"> <i class="sap-icon--slim-arrow-right"></i> </button> </div> @@ -644,7 +644,7 @@ export const todaySelectionButton = () => `<div class="fd-docs-date-picker" styl </div> `; -todaySelectionButton.parameters = { +TodaySelectionButton.parameters = { docs: { iframeHeight: 500, storyDescription: ` @@ -654,7 +654,7 @@ This date value then appears in the DatePicker's input field. If using a compact } }; -export const todayNavigationButton = () => `<div class="fd-docs-date-picker" style="height:500px"> +export const TodayNavigationButton = () => `<div class="fd-docs-date-picker" style="height:500px"> <div class="fd-popover"> <div class="fd-popover__control"> <label class="fd-form-label" for="todayNavigationDateInput">en-US DatePicker with today navigation</label> @@ -674,7 +674,7 @@ export const todayNavigationButton = () => `<div class="fd-docs-date-picker" sty aria-controls="Itcgq830" aria-expanded="true" aria-haspopup="true" - aria-label="Choose Date"> + aria-label="Choose Date"> <i class="sap-icon--appointment-2"></i> </button> </span> @@ -685,7 +685,7 @@ export const todayNavigationButton = () => `<div class="fd-docs-date-picker" sty <div class="fd-calendar__header"> <div class="fd-calendar__navigation"> <div class="fd-calendar__action"> - <button class="fd-button fd-button--transparent" aria-label="Previous" aria-disabled="true"> + <button class="fd-button fd-button--transparent" aria-label="Previous" aria-disabled="true"> <i class="sap-icon--slim-arrow-left"></i> </button> </div> @@ -696,7 +696,7 @@ export const todayNavigationButton = () => `<div class="fd-docs-date-picker" sty <button class="fd-button fd-button--transparent" aria-expanded="false">2018</button> </div> <div class="fd-calendar__action"> - <button class="fd-button fd-button--transparent" aria-label="Next"> + <button class="fd-button fd-button--transparent" aria-label="Next"> <i class="sap-icon--slim-arrow-right"></i> </button> </div> @@ -869,7 +869,7 @@ export const todayNavigationButton = () => `<div class="fd-docs-date-picker" sty <small>example considers today as 9/6/2018</small> `; -todayNavigationButton.parameters = { +TodayNavigationButton.parameters = { docs: { iframeHeight: 450, storyDescription: ` @@ -882,14 +882,14 @@ If using a compact datepicker add the \`fd-button--compact\` class to this butto } }; -export const mobileLandscape = () => `<div class="fd-dialog-docs-static fd-calendar-mobile-docs-static--landscape fd-dialog fd-dialog--active"> +export const MobileLandscape = () => `<div class="fd-dialog-docs-static fd-calendar-mobile-docs-static--landscape fd-dialog fd-dialog--active"> <div class="fd-dialog__content fd-dialog__content--s fd-dialog__content--mobile"> <div class="fd-dialog__body fd-dialog__body--no-vertical-padding"> <div class="fd-calendar fd-calendar--mobile-landscape"> <div class="fd-calendar__header"> <div class="fd-calendar__navigation fd-calendar__navigation--main"> <div class="fd-calendar__action fd-calendar__action--arrow-left"> - <button type="button" class="fd-button fd-button--transparent" aria-label="Previous"> + <button type="button" class="fd-button fd-button--transparent" aria-label="Previous"> <i class="sap-icon--slim-arrow-left"></i> </button> </div> @@ -900,7 +900,7 @@ export const mobileLandscape = () => `<div class="fd-dialog-docs-static fd-calen <button type="button" class="fd-button fd-button--transparent">2018</button> </div> <div class="fd-calendar__action fd-calendar__action--arrow-right"> - <button type="button" class="fd-button fd-button--transparent" aria-label="Next"> + <button type="button" class="fd-button fd-button--transparent" aria-label="Next"> <i class="sap-icon--slim-arrow-right"></i> </button> </div> @@ -1087,15 +1087,15 @@ export const mobileLandscape = () => `<div class="fd-dialog-docs-static fd-calen </div> `; -mobileLandscape.storyName = 'Mobile landscape mode with today navigation'; -mobileLandscape.parameters = { +MobileLandscape.storyName = 'Mobile landscape mode with today navigation'; +MobileLandscape.parameters = { docs: { iframeHeight: 400 } }; -export const mobilePortrait = () => `<div class="fd-dialog-docs-static fd-calendar-mobile-docs-static--portrait fd-dialog fd-dialog--active"> +export const MobilePortrait = () => `<div class="fd-dialog-docs-static fd-calendar-mobile-docs-static--portrait fd-dialog fd-dialog--active"> <div class="fd-dialog__content fd-dialog__content--s fd-dialog__content--mobile"> <div class="fd-dialog__header fd-bar fd-bar--header fd-bar--cosy"> <div class="fd-bar__left"> @@ -1124,7 +1124,7 @@ export const mobilePortrait = () => `<div class="fd-dialog-docs-static fd-calend </div> <div class="fd-calendar__navigation"> <div class="fd-calendar__action fd-calendar__action--arrow-left"> - <button type="button" class="fd-button fd-button--transparent" aria-label="Previous"> + <button type="button" class="fd-button fd-button--transparent" aria-label="Previous"> <i class="sap-icon--slim-arrow-left"></i> </button> </div> @@ -1135,7 +1135,7 @@ export const mobilePortrait = () => `<div class="fd-dialog-docs-static fd-calend <button type="button" class="fd-button fd-button--transparent">2018</button> </div> <div class="fd-calendar__action fd-calendar__action--arrow-right"> - <button type="button" class="fd-button fd-button--transparent" aria-label="Next"> + <button type="button" class="fd-button fd-button--transparent" aria-label="Next"> <i class="sap-icon--slim-arrow-right"></i> </button> </div> @@ -1320,8 +1320,8 @@ export const mobilePortrait = () => `<div class="fd-dialog-docs-static fd-calend </div> `; -mobilePortrait.storyName = 'Mobile portrait mode with today navigation'; -mobilePortrait.parameters = { +MobilePortrait.storyName = 'Mobile portrait mode with today navigation'; +MobilePortrait.parameters = { docs: { iframeHeight: 500 } diff --git a/stories/dialog/dialog.stories.js b/stories/dialog/dialog.stories.js index 6d46c4672a..4f0fd62640 100644 --- a/stories/dialog/dialog.stories.js +++ b/stories/dialog/dialog.stories.js @@ -17,7 +17,7 @@ The dialog component is a container that appears in response to an action made b - You just want to confirm a successful action. - You do not want to interrupt the user. - You want to enable users to create an object with more than 8 fields. Use an **Object Page** instead. - + ## Structure @@ -46,7 +46,7 @@ Note: Dialog's header, subheader and footer are elements from the **Bar** compon } }; -export const defaultDialog = () => ` +export const DefaultDialog = () => ` <section class="fd-dialog-docs-static fd-dialog fd-dialog--active"> <div class="fd-dialog__content" role="dialog" aria-modal="true" aria-labelledby="dialog-title-1"> <span class="fd-dialog__resize-handle"></span> @@ -96,8 +96,8 @@ export const defaultDialog = () => ` </section> `; -defaultDialog.storyName = 'Default'; -defaultDialog.parameters = { +DefaultDialog.storyName = 'Default'; +DefaultDialog.parameters = { docs: { iframeHeight: 400, storyDescription: 'The default dialog component displays a container comprising a header, title, and subheader; followed by a body (content area), loader, footer and action buttons. The container also features a resize handle in the bottom-right corner of the footer, see resizable dialog below for more information.' @@ -105,7 +105,7 @@ defaultDialog.parameters = { }; -export const sizes = () => ` +export const Sizes = () => ` <section class="fd-dialog-docs-static fd-dialog fd-dialog--active"> <div class="fd-dialog__content fd-dialog__content--s" role="dialog" aria-modal="true" aria-labelledby="dialog-title-2"> <header class="fd-dialog__header fd-bar fd-bar--header"> @@ -157,7 +157,7 @@ export const sizes = () => ` </div> </div> </footer> - </div> + </div> </section> <br /> <section class="fd-dialog-docs-static fd-dialog fd-dialog--active"> @@ -215,7 +215,7 @@ export const sizes = () => ` </section> `; -sizes.parameters = { +Sizes.parameters = { docs: { iframeHeight: 800, storyDescription: ` @@ -473,7 +473,7 @@ Loading.parameters = { } }; -export const horizontalFormInDialog = () => ` +export const HorizontalFormInDialog = () => ` <section class="fd-dialog-docs-static fd-dialog fd-dialog--active"> <div class="fd-dialog__content fd-dialog__content--s" role="dialog" aria-modal="true" aria-labelledby="dialog-title-2"> <header class="fd-dialog__header fd-bar fd-bar--header"> @@ -550,7 +550,7 @@ export const horizontalFormInDialog = () => ` <i class="sap-icon--slim-arrow-down"></i> </span> </div> - </div> + </div> </div> </div> </div> @@ -571,8 +571,8 @@ export const horizontalFormInDialog = () => ` </section> `; -horizontalFormInDialog.storyName = 'Horizontal Form'; -horizontalFormInDialog.parameters = { +HorizontalFormInDialog.storyName = 'Horizontal Form'; +HorizontalFormInDialog.parameters = { docs: { description: { story: '' @@ -581,7 +581,7 @@ horizontalFormInDialog.parameters = { }; -export const verticalFormInDialog = () => ` +export const VerticalFormInDialog = () => ` <section class="fd-dialog-docs-static fd-dialog fd-dialog--active"> <div class="fd-dialog__content fd-dialog__content--s" role="dialog" aria-modal="true" aria-labelledby="dialog-title-2"> <header class="fd-dialog__header fd-bar fd-bar--header"> @@ -658,7 +658,7 @@ export const verticalFormInDialog = () => ` <i class="sap-icon--slim-arrow-down"></i> </span> </div> - </div> + </div> </div> </div> </div> @@ -679,8 +679,8 @@ export const verticalFormInDialog = () => ` </section> `; -verticalFormInDialog.storyName = 'Vertical Form'; -verticalFormInDialog.parameters = { +VerticalFormInDialog.storyName = 'Vertical Form'; +VerticalFormInDialog.parameters = { docs: { description: { story: '' diff --git a/stories/dnd-icon-tab-bar/dnd-icon-tab-bar.stories.js b/stories/dnd-icon-tab-bar/dnd-icon-tab-bar.stories.js index de38242e7b..a7ae002651 100644 --- a/stories/dnd-icon-tab-bar/dnd-icon-tab-bar.stories.js +++ b/stories/dnd-icon-tab-bar/dnd-icon-tab-bar.stories.js @@ -13,9 +13,9 @@ The Drag and Drop Icon Tab Bar can be used for styling state for drag and drop a }; -export const hoveredTab = () => `<div class='fddocs-icon-tab-container' style="min-height: 800px;"> +export const HoveredTab = () => `<div class='fddocs-icon-tab-container' style="min-height: 800px;"> <div class="fd-icon-tab-bar"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--dnd-hovered"> <a role="tab" class="fd-icon-tab-bar__tab" href="#section1" id="tab1"> <span class="fd-icon-tab-bar__tag">Attachments (16)</span> @@ -30,21 +30,21 @@ export const hoveredTab = () => `<div class='fddocs-icon-tab-container' style="m <a role="tab" class="fd-icon-tab-bar__tab" href="#section3" id="tab3"> <span class="fd-icon-tab-bar__tag">Approvals (42)</span> </a> - </ul> + </ul> </div> </div> `; -hoveredTab.storyName = 'Hovered tab state'; -hoveredTab.parameters = { +HoveredTab.storyName = 'Hovered tab state'; +HoveredTab.parameters = { docs: { storyDescription: '' } }; -export const separatorHoveredTab = () => `<div class='fddocs-icon-tab-container' style="min-height: 800px;"> +export const SeparatorHoveredTab = () => `<div class='fddocs-icon-tab-container' style="min-height: 800px;"> <div class="fd-icon-tab-bar"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#section1" id="tab1"> <span class="fd-icon-tab-bar__tag">Attachments (16)</span> @@ -59,12 +59,12 @@ export const separatorHoveredTab = () => `<div class='fddocs-icon-tab-container' <a role="tab" class="fd-icon-tab-bar__tab" href="#section3" id="tab3"> <span class="fd-icon-tab-bar__tag">Approvals (42)</span> </a> - </ul> + </ul> </div> </div> `; -separatorHoveredTab.storyName = 'Separator hovered tab state'; -separatorHoveredTab.parameters = { +SeparatorHoveredTab.storyName = 'Separator hovered tab state'; +SeparatorHoveredTab.parameters = { docs: { storyDescription: '' } diff --git a/stories/dynamic-page/dynamic-page.stories.js b/stories/dynamic-page/dynamic-page.stories.js index 49350e3930..542a40d2cf 100755 --- a/stories/dynamic-page/dynamic-page.stories.js +++ b/stories/dynamic-page/dynamic-page.stories.js @@ -4,7 +4,7 @@ export default { description: `The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout designed to support various use cases; therefore, the content of both the header and page can vary. The header of the dynamic page is collapsible, which helps the users focus on the actual page content but still ensures that important header information and actions are readily available. -## Usage +## Usage **Use the dynamic page if:** - You want to build a freestyle application that uses the foundation layout components for SAP Fiori pages, such as the dynamic page header and the footer toolbar. @@ -46,7 +46,7 @@ To display a sticky header, use the \`fd-dynamic-page__header-fixed\` class inst ## Modifiers | **Description** | <div style="margin-left: 2rem;"> **Modifier class** </div> | | :---- | :-------------- | -| No shadow for pin/collapse when tabs are used | <code style="margin-left: 2rem;">fd-dynamic-page__header-visibility-container--no-shadow</code> +| No shadow for pin/collapse when tabs are used | <code style="margin-left: 2rem;">fd-dynamic-page__header-visibility-container--no-shadow</code> ||<code style="margin-left: 2rem;">fd-dynamic-page__summarized-title-area--no-shadow</code> | | Add shadow to tabs when tabs are used | <code style="margin-left: 2rem;">fd-dynamic-page__tabs--add-shadow</code> | | Collapsed styles when header is collapsed | <code style="margin-left: 2rem;">fd-dynamic-page__title-area--collapsed</code> | @@ -59,7 +59,7 @@ To display a sticky header, use the \`fd-dynamic-page__header-fixed\` class inst | **Description** | <span style="margin-left: 2rem;">**Modifier class**</span> | | :---- | :-------------- | | List background for content area| <code style="margin-left: 2rem;">fd-dynamic-page--list-bg</code> | -| Transparent background for all areas | <code style="margin-left: 2rem;">fd-dynamic-page--transparent-bg</code> +| Transparent background for all areas | <code style="margin-left: 2rem;">fd-dynamic-page--transparent-bg</code> `, tags: ['f3', 'theme', 'development'], @@ -68,7 +68,7 @@ To display a sticky header, use the \`fd-dynamic-page__header-fixed\` class inst } }; -export const desktop = () => ` +export const Desktop = () => ` <section class="fd-dynamic-page fd-dynamic-page--xl" aria-label="Dynamic Page Desktop Example"> <header class="fd-dynamic-page__header"> <div class="fd-dynamic-page__title-area " tabindex="0"> @@ -109,21 +109,21 @@ export const desktop = () => ` </div> <div class="fd-dynamic-page__collapsible-header-container"> <div class="fd-dynamic-page__collapsible-header" role="region" id="fddplhvc6" aria-label="Dynamic Page Desktop Header" > - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, - delectus necessitatibus incidunt numquam asperiores tenetur iure. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, + delectus necessitatibus incidunt numquam asperiores tenetur iure. Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis? </div> <div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow"> <div class="fd-dynamic-page__collapsible-header-visibility-container--left-gradient"></div> <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group"> - <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" - aria-label="See More" - aria-expanded="true" - aria-haspopup="true" + <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" + aria-label="See More" + aria-expanded="true" + aria-haspopup="true" aria-controls="fddplhvc6"> <i class="sap-icon--slim-arrow-up"></i> </button> - <button class="fd-dynamic-page__pin-button fd-button fd-button--compact" + <button class="fd-dynamic-page__pin-button fd-button fd-button--compact" aria-label="Pin this"> <i class="sap-icon--pushpin-off"></i> </button> @@ -152,31 +152,31 @@ export const desktop = () => ` </header> <div class="fd-dynamic-page__content"> <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV550" role="tabpanel"> - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz165" role="tabpanel" > - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. </div> </div> @@ -194,8 +194,7 @@ export const desktop = () => ` <br /><br /> `; -desktop.storyName = 'Desktop'; -desktop.parameters = { +Desktop.parameters = { docs: { storyDescription: `The dynamic page displays on desktop screens with the L, XL, and XXL sizes. To optimize dynamic page for desktop, add modifier class \`fd-dynamic-page--xl\`. @@ -204,7 +203,7 @@ In addition, add the modifier classes \`--add-shadow\` to the unordered list, an } }; -export const tablet = () => ` +export const Tablet = () => ` <section class="fd-dynamic-page fd-dynamic-page--md" aria-label="Dynamic Page Tablet Example"> <header class="fd-dynamic-page__header"> <div class="fd-dynamic-page__title-area " tabindex="0"> @@ -251,21 +250,21 @@ export const tablet = () => ` </div> <div class="fd-dynamic-page__collapsible-header-container"> <div class="fd-dynamic-page__collapsible-header" role="region" aria-hidden="false" id="fddplhvc5" aria-label="Tablet header"> - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, - delectus necessitatibus incidunt numquam asperiores tenetur iure. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, + delectus necessitatibus incidunt numquam asperiores tenetur iure. Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis? </div> <div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow"> <div class="fd-dynamic-page__collapsible-header-visibility-container--left-gradient"></div> <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group"> - <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" - aria-label="See More" - aria-expanded="true" - aria-haspopup="true" + <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" + aria-label="See More" + aria-expanded="true" + aria-haspopup="true" aria-controls="fddplhvc5"> <i class="sap-icon--slim-arrow-up"></i> </button> - <button class="fd-dynamic-page__pin-button fd-button fd-button--compact" + <button class="fd-dynamic-page__pin-button fd-button fd-button--compact" aria-label="Pin this"> <i class="sap-icon--pushpin-off"></i> </button> @@ -294,31 +293,31 @@ export const tablet = () => ` </header> <div class="fd-dynamic-page__content"> <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV551" role="tabpanel"> - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz166" role="tabpanel" > - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. </div> </div> @@ -336,8 +335,7 @@ export const tablet = () => ` <br /><br /> `; -tablet.storyName = 'Tablet'; -tablet.parameters = { +Tablet.parameters = { docs: { storyDescription: `The dynamic page displays on tablet screens with the M size. To optimize dynamic page for tablet, add modifier class \`fd-dynamic-page--md\`. @@ -345,7 +343,7 @@ It is recommended that the navigation actions are displayed in a separate row ab } }; -export const mobile = () => +export const Mobile = () => `<div class="mobile-container"> <section class="fd-dynamic-page fd-dynamic-page--sm" aria-label="Dynamic Page Mobile Example"> <header class="fd-dynamic-page__header"> @@ -428,17 +426,17 @@ export const mobile = () => </div> <div class="fd-dynamic-page__collapsible-header-container"> <div class="fd-dynamic-page__collapsible-header" role="region" id="fddplhvc4" aria-label="Dynamic Page Mobile Header"> - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, - delectus necessitatibus incidunt numquam asperiores tenetur iure. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, + delectus necessitatibus incidunt numquam asperiores tenetur iure. Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis? </div> <div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow"> <div class="fd-dynamic-page__collapsible-header-visibility-container--left-gradient"></div> <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group"> - <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" - aria-label="See More" - aria-expanded="true" - aria-haspopup="true" + <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" + aria-label="See More" + aria-expanded="true" + aria-haspopup="true" aria-controls="fddplhvc4"> <i class="sap-icon--slim-arrow-up"></i> </button> @@ -462,20 +460,20 @@ export const mobile = () => </span> </a> </li> - </ul> + </ul> </div> </header> <div class="fd-dynamic-page__content"> <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV552" role="tabpanel"> - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz167" role="tabpanel"> - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. </div> </div> @@ -493,17 +491,16 @@ export const mobile = () => </div> `; -mobile.storyName = 'Mobile'; -mobile.parameters = { +Mobile.parameters = { docs: { storyDescription: `The dynamic page displays on mobile screens with the S size. To optimize dynamic page for mobile, add modifier class \`fd-dynamic-page--sm\`. - + To display the breadcrumb and close button, they must be wrapped in \`fd-dynamic-page__breadcrumb-container\`. The toolbar overflow actions are functional without being wrapped in an additional container. Use \`fd-dynamic-page__toolbar--content\` for the title content when it is used in an overflow toolbar.` } }; -export const mobileCollapsed = () => +export const MobileCollapsed = () => `<div class="mobile-container"> <section class="fd-dynamic-page fd-dynamic-page--sm" aria-label="Dynamic Page Mobile Collapsed Example"> <header class="fd-dynamic-page__header"> @@ -586,17 +583,17 @@ export const mobileCollapsed = () => </div> <div class="fd-dynamic-page__collapsible-header-container"> <div class="fd-dynamic-page__collapsible-header" role="region" aria-hidden="true" id="fddplhvcm1" aria-label="Dynamic Page Mobile Collapsed Header" > - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, - delectus necessitatibus incidunt numquam asperiores tenetur iure. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, + delectus necessitatibus incidunt numquam asperiores tenetur iure. Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis? </div> <div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow"> <div class="fd-dynamic-page__collapsible-header-visibility-container--left-gradient"></div> <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group"> - <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" - aria-label="See More" - aria-expanded="false" - aria-haspopup="true" + <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" + aria-label="See More" + aria-expanded="false" + aria-haspopup="true" aria-controls="fddplhvcm1"> <i class="sap-icon--slim-arrow-down"></i> </button> @@ -620,20 +617,20 @@ export const mobileCollapsed = () => </span> </a> </li> - </ul> + </ul> </div> </header> <div class="fd-dynamic-page__content"> <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV553" role="tabpanel"> - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz168" role="tabpanel"> - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. </div> </div> @@ -651,14 +648,14 @@ export const mobileCollapsed = () => </div> `; -mobileCollapsed.storyName = 'Collapsed Header (mobile)'; -mobileCollapsed.parameters = { +MobileCollapsed.storyName = 'Collapsed Header (mobile)'; +MobileCollapsed.parameters = { docs: { storyDescription: 'In the example below, the dynamic page is displayed with a collapsed header for mobile screens.' } }; -export const summaryLine = () => +export const SummaryLine = () => `<div class="mobile-container"> <section class="fd-dynamic-page fd-dynamic-page--sm" aria-label="Dynamic Page Mobile Summary Line Example"> <header class="fd-dynamic-page__header"> @@ -705,18 +702,18 @@ export const summaryLine = () => <div class="fd-dynamic-page__collapsible-header-container"> <div class="fd-dynamic-page__collapsible-header" role="region" aria-hidden="true" id="fddplhvcm2" aria-label="Dynamic Page Mobile Collapsed Header" > - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, - delectus necessitatibus incidunt numquam asperiores tenetur iure. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, + delectus necessitatibus incidunt numquam asperiores tenetur iure. Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis? </div> <div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow" aria-hidden="true"> <div class="fd-dynamic-page__collapsible-header-visibility-container--left-gradient"></div> <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group"> - <button tabindex="-1" class="fd-dynamic-page__collapse-button fd-button fd-button--compact" - aria-label="See More" - aria-expanded="false" - aria-haspopup="true" + <button tabindex="-1" class="fd-dynamic-page__collapse-button fd-button fd-button--compact" + aria-label="See More" + aria-expanded="false" + aria-haspopup="true" aria-controls="fddplhvcm2"> <i class="sap-icon--slim-arrow-down"></i> </button> @@ -740,22 +737,22 @@ export const summaryLine = () => </span> </a> </li> - </ul> + </ul> </div> - </header> + </header> <div class="fd-dynamic-page__content"> <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV554" role="tabpanel"> - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz169" role="tabpanel"> <h2 class="fd-title fd-title--h6 fd-title--wrap"><b>This is an example of a summary line, without the expand/collapse feature.</b></h2> <br /> - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. </div> </div> @@ -773,15 +770,15 @@ export const summaryLine = () => </div> `; -summaryLine.storyName = 'Summary Line (mobile)'; -summaryLine.parameters = { +SummaryLine.storyName = 'Summary Line (mobile)'; +SummaryLine.parameters = { docs: { - storyDescription: `It is recommended to add a summary line insead of the expand/collapse header feature so users can better focus on the page content. To display a summary line, + storyDescription: `It is recommended to add a summary line insead of the expand/collapse header feature so users can better focus on the page content. To display a summary line, add \`fd-dynamic-page__summarized-title\` in the \`fd-dynamic-page__summarized-title-area\` element.` } }; -export const expandable = () => +export const Expandable = () => `<section class="fd-dynamic-page fd-dynamic-page--xl" aria-label="Dynamic Page Expandable Example"> <header class="fd-dynamic-page__header"> <div class="fd-dynamic-page__title-area " tabindex="0"> @@ -822,21 +819,21 @@ export const expandable = () => </div> <div class="fd-dynamic-page__collapsible-header-container"> <div class="fd-dynamic-page__collapsible-header" role="region" aria-hidden="false" id="fddplhvc1" aria-label="Default expanded header" > - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, - delectus necessitatibus incidunt numquam asperiores tenetur iure. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, + delectus necessitatibus incidunt numquam asperiores tenetur iure. Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis? </div> <div class="fd-dynamic-page__collapsible-header-visibility-container"> <div class="fd-dynamic-page__collapsible-header-visibility-container--left-gradient"></div> <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group"> - <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" - aria-label="See More" - aria-expanded="true" - aria-haspopup="true" + <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" + aria-label="See More" + aria-expanded="true" + aria-haspopup="true" aria-controls="fddplhvc1"> <i class="sap-icon--slim-arrow-up"></i> </button> - <button class="fd-dynamic-page__pin-button fd-button fd-button--compact" + <button class="fd-dynamic-page__pin-button fd-button fd-button--compact" aria-label="Pin this"> <i class="sap-icon--pushpin-off"></i> </button> @@ -846,29 +843,29 @@ export const expandable = () => </div> </header> <div class="fd-dynamic-page__content"> - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> </section> `; -expandable.storyName = 'Expanded Header'; -expandable.parameters = { +Expandable.storyName = 'Expanded Header'; +Expandable.parameters = { docs: { storyDescription: `As demonstrated earlier, the dynamic page header can be either displayed or hidden with the expand/collapse buttons. Users can select the pin button to keep the header displayed (enabling the sticky feature). To collapse the dynamic page, add the \`--collapsed\` modifier class to the title area and title elements.` } }; -export const collapsedHeader = () => +export const CollapsedHeader = () => `<section class="fd-dynamic-page fd-dynamic-page--xl" aria-label="Dynamic Page Collapsed Example"> <header class="fd-dynamic-page__header"> <div class="fd-dynamic-page__title-area fd-dynamic-page__title-area--collapsed" tabindex="0"> <div class="fd-dynamic-page__main-container"> <div class="fd-dynamic-page__breadcrumb-title-container"> - <nav aria-label="Breadcrumbs"> + <nav aria-label="Breadcrumbs"> <ul class="fd-dynamic-page__breadcrumb fd-breadcrumb"> <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">Men</a></li> <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">Shoes</a></li> @@ -903,21 +900,21 @@ export const collapsedHeader = () => </div> <div class="fd-dynamic-page__collapsible-header-container"> <div class="fd-dynamic-page__collapsible-header" role="region" aria-hidden="true" id="fddplhvc2" aria-label="Collapsed header"> - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, - delectus necessitatibus incidunt numquam asperiores tenetur iure. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, + delectus necessitatibus incidunt numquam asperiores tenetur iure. Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis? </div> <div class="fd-dynamic-page__collapsible-header-visibility-container"> <div class="fd-dynamic-page__collapsible-header-visibility-container--left-gradient"></div> <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group"> - <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" - aria-label="See More" - aria-expanded="false" - aria-haspopup="true" + <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" + aria-label="See More" + aria-expanded="false" + aria-haspopup="true" aria-controls="fddplhvc2"> <i class="sap-icon--slim-arrow-down"></i> </button> - <button class="fd-dynamic-page__pin-button fd-button fd-button--compact" + <button class="fd-dynamic-page__pin-button fd-button fd-button--compact" aria-label="Pin this"> <i class="sap-icon--pushpin-off"></i> </button> @@ -927,28 +924,27 @@ export const collapsedHeader = () => </div> </header> <div class="fd-dynamic-page__content"> - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> </section> `; -collapsedHeader.storyName = 'Collapsed Header'; -collapsedHeader.parameters = { +CollapsedHeader.parameters = { docs: { storyDescription: 'In the example below, the dynamic page is displayed with a collapsed header for desktop screens.' } }; -export const onlyCollapse = () => +export const OnlyCollapse = () => `<section class="fd-dynamic-page fd-dynamic-page--xl" aria-label="Dynamic Page Pinnable Example"> <header class="fd-dynamic-page__header"> <div class="fd-dynamic-page__title-area " tabindex="0"> <div class="fd-dynamic-page__main-container"> <div class="fd-dynamic-page__breadcrumb-title-container"> - <nav aria-label="Breadcrumbs"> + <nav aria-label="Breadcrumbs"> <ul class="fd-dynamic-page__breadcrumb fd-breadcrumb"> <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">Men</a></li> <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">Shoes</a></li> @@ -983,17 +979,17 @@ export const onlyCollapse = () => </div> <div class="fd-dynamic-page__collapsible-header-container"> <div class="fd-dynamic-page__collapsible-header" role="region" id="fddplhvc3" aria-hidden="false" aria-label="Pinned header"> - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, - delectus necessitatibus incidunt numquam asperiores tenetur iure. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, + delectus necessitatibus incidunt numquam asperiores tenetur iure. Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis? </div> <div class="fd-dynamic-page__collapsible-header-visibility-container"> <div class="fd-dynamic-page__collapsible-header-visibility-container--left-gradient"></div> <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group"> - <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" - aria-label="See More" - aria-expanded="true" - aria-haspopup="true" + <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" + aria-label="See More" + aria-expanded="true" + aria-haspopup="true" aria-controls="fddplhvc3"> <i class="sap-icon--slim-arrow-up"></i> </button> @@ -1003,16 +999,16 @@ export const onlyCollapse = () => </div> </header> <div class="fd-dynamic-page__content"> - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> </section> `; -onlyCollapse.storyName = 'Without pin'; -onlyCollapse.parameters = { +OnlyCollapse.storyName = 'Without pin'; +OnlyCollapse.parameters = { docs: { storyDescription: 'The dynamic page can be displayed without a pin button, giving users the option to only expand or collapse the header area.' } @@ -1020,7 +1016,7 @@ onlyCollapse.parameters = { -export const withFacets = () => +export const WithFacets = () => `<section class="fd-dynamic-page fd-dynamic-page--xl" aria-label="Dynamic Page Desktop Example"> <header class="fd-dynamic-page__header"> <div class="fd-dynamic-page__title-area" tabindex="0" aria-hidden="false" id="mainContainer"> @@ -1152,7 +1148,7 @@ export const withFacets = () => <span class="fd-object-number__text">579</span><span class="fd-object-number__unit">EUR</span> </span> </div> - + <div class="fd-facet fd-facet--rating-indicator fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="ratingFacetTitle3"> <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="ratingFacetTitle3">Average User Rating</h1> <h2 class="fd-form-label">6 reviews</h2> @@ -1160,16 +1156,16 @@ export const withFacets = () => <div class="fd-rating-indicator__container fd-facet__rating-container" aria-label="Star Rating (out of 5)"> <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-1" name="2-rating-max-value-5" value="1"> <label class="fd-rating-indicator__label" for="2-rating-max-value-5-1"></label> - + <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-2" name="2-rating-max-value-5" value="2" checked> <label class="fd-rating-indicator__label" for="2-rating-max-value-5-2"></label> - + <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-3" name="2-rating-max-value-5" value="3"> <label class="fd-rating-indicator__label" for="2-rating-max-value-5-3"></label> - + <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-4" name="2-rating-max-value-5" value="4"> <label class="fd-rating-indicator__label" for="2-rating-max-value-5-4"></label> - + <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-5" name="2-rating-max-value-5" value="5"> <label class="fd-rating-indicator__label" for="2-rating-max-value-5-5"></label> </div> @@ -1181,12 +1177,12 @@ export const withFacets = () => <div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow"> <div class="fd-dynamic-page__collapsible-header-visibility-container--left-gradient"></div> <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group"> - <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" - aria-label="Collapse" - aria-expanded="true" + <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" + aria-label="Collapse" + aria-expanded="true" aria-hidden="false" id="expandBtn" - aria-haspopup="true" + aria-haspopup="true" onclick=" toggleElAttrs('fddplhvx6', ['aria-hidden']); toggleElAttrs('expandBtn', ['aria-hidden']); @@ -1197,12 +1193,12 @@ export const withFacets = () => > <i class="sap-icon--slim-arrow-up"></i> </button> - <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" - aria-label="Collapse" - aria-expanded="false" + <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" + aria-label="Collapse" + aria-expanded="false" aria-hidden="true" id="collapseBtn" - aria-haspopup="true" + aria-haspopup="true" onclick=" toggleElAttrs('fddplhvx6', ['aria-hidden']); toggleElAttrs('collapseBtn', ['aria-hidden']); @@ -1213,7 +1209,7 @@ export const withFacets = () => > <i class="sap-icon--slim-arrow-down"></i> </button> - <button class="fd-dynamic-page__pin-button fd-button fd-button--compact" + <button class="fd-dynamic-page__pin-button fd-button fd-button--compact" aria-label="Pin this"> <i class="sap-icon--pushpin-off"></i> </button> @@ -1242,31 +1238,31 @@ export const withFacets = () => </header> <div class="fd-dynamic-page__content"> <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV557" role="tabpanel"> - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz155" role="tabpanel" > - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. </div> </div> @@ -1283,11 +1279,11 @@ export const withFacets = () => </section> `; -withFacets.storyName = 'With header facets'; -withFacets.parameters = { +WithFacets.storyName = 'With header facets'; +WithFacets.parameters = { docs: { - storyDescription: `To have the image from the image facet appear next to the title, add the class - \`fd-facet\` and apply the modifiers \`fd-facet--image\` and \`fd-facet--image-header-title\` to the + storyDescription: `To have the image from the image facet appear next to the title, add the class + \`fd-facet\` and apply the modifiers \`fd-facet--image\` and \`fd-facet--image-header-title\` to the \`fd-dynamic-page__title-container\` class. Note that the dynamic page title and subtitle should be placed in the \`fd-dynamic-page__title-subtitle-container\` class for proper alignment with the image. @@ -1295,7 +1291,7 @@ withFacets.parameters = { } }; -export const withFacetsMobile = () => +export const WithFacetsMobile = () => `<div class="mobile-container"> <section class="fd-dynamic-page fd-dynamic-page--sm" aria-label="Dynamic Page Mobile Example"> <header class="fd-dynamic-page__header"> @@ -1416,7 +1412,7 @@ export const withFacetsMobile = () => <i class="fd-avatar__icon sap-icon--camera" role="presentation"></i> </span> </div> - + <div class="fd-facet fd-facet--key-value fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle13"> <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle13">Availablity</h1> <span class="fd-object-status fd-object-status--positive fd-object-status--large fd-facet__object-status"> @@ -1434,12 +1430,12 @@ export const withFacetsMobile = () => <div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow"> <div class="fd-dynamic-page__collapsible-header-visibility-container--left-gradient"></div> <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group"> - <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" - aria-label="Collapse header" - aria-expanded="true" + <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" + aria-label="Collapse header" + aria-expanded="true" aria-hidden="false" id="expandBtnMobile" - aria-haspopup="true" + aria-haspopup="true" onclick=" toggleElAttrs('fddplhvc7', ['aria-hidden']); toggleElAttrs('expandBtnMobile', ['aria-expanded']); @@ -1452,12 +1448,12 @@ export const withFacetsMobile = () => > <i class="sap-icon--slim-arrow-up"></i> </button> - <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" - aria-label="Expand header" - aria-expanded="false" + <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" + aria-label="Expand header" + aria-expanded="false" aria-hidden="true" id="collapseBtnMobile" - aria-haspopup="true" + aria-haspopup="true" onclick=" toggleElAttrs('fddplhvc7', ['aria-hidden']); toggleElAttrs('collapseBtnMobile', ['aria-expanded']); @@ -1490,20 +1486,20 @@ export const withFacetsMobile = () => </span> </a> </li> - </ul> + </ul> </div> </header> <div class="fd-dynamic-page__content"> <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV559" role="tabpanel"> - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz161" role="tabpanel"> - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. </div> </div> @@ -1520,6 +1516,6 @@ export const withFacetsMobile = () => </section> </div> `; -withFacetsMobile.storyName = 'With header facets (mobile)'; +WithFacetsMobile.storyName = 'With header facets (mobile)'; diff --git a/stories/dynamic-side-content/dynamic-side-content.stories.js b/stories/dynamic-side-content/dynamic-side-content.stories.js index eb3f0c86b8..a1a6390aeb 100644 --- a/stories/dynamic-side-content/dynamic-side-content.stories.js +++ b/stories/dynamic-side-content/dynamic-side-content.stories.js @@ -16,7 +16,7 @@ Dynamic side content is a layout control that displays supplemental content in a * Will enrich the main content and will help the user better perform his/her tasks; * Only makes sense when displayed next to the main container (side-by-side); * Influences the main content (for example, a filter for list; settings for chart, details for map). -* Users should have access to all of the key functions and critical information in the app even if they do not see the side content. This is important because on smaller screen sizes it may be difficult to display the side content in a way that is easily accessible for the user. +* Users should have access to all of the key functions and critical information in the app even if they do not see the side content. This is important because on smaller screen sizes it may be difficult to display the side content in a way that is easily accessible for the user. ## Sizes @@ -36,7 +36,7 @@ Note: For all screens < 720px, the side content disappears entirely. } }; -export const positionLeft = () => ` <div class="fd-dynamic-side"> +export const PositionLeft = () => ` <div class="fd-dynamic-side"> <div class="fd-dynamic-side__side"> <div class="docs-layout-grid-bg docs-layout-grid-bg--color-6">Side</div> </div> @@ -46,8 +46,8 @@ export const positionLeft = () => ` <div class="fd-dynamic-side"> </div> `; -positionLeft.storyName = 'Left'; -positionLeft.parameters = { +PositionLeft.storyName = 'Left'; +PositionLeft.parameters = { docs: { iframeHeight: 160, storyDescription: @@ -55,7 +55,7 @@ positionLeft.parameters = { } }; -export const positionRight = () => ` <div class="fd-dynamic-side"> +export const PositionRight = () => ` <div class="fd-dynamic-side"> <div class="fd-dynamic-side__main"> <div class="docs-layout-grid-bg docs-layout-grid-bg--color-9">Main</div> </div> @@ -65,8 +65,8 @@ export const positionRight = () => ` <div class="fd-dynamic-side"> </div> `; -positionRight.storyName = 'Right'; -positionRight.parameters = { +PositionRight.storyName = 'Right'; +PositionRight.parameters = { docs: { iframeHeight: 160, storyDescription: @@ -74,7 +74,7 @@ positionRight.parameters = { } }; -export const positionBottom = () => ` <div class="fd-dynamic-side fd-dynamic-side--below"> +export const PositionBottom = () => ` <div class="fd-dynamic-side fd-dynamic-side--below"> <div class="fd-dynamic-side__main"> <div class="docs-layout-grid-bg docs-layout-grid-bg--color-9">Main</div> </div> @@ -84,8 +84,8 @@ export const positionBottom = () => ` <div class="fd-dynamic-side fd-dynamic- </div> `; -positionBottom.storyName = 'Below'; -positionBottom.parameters = { +PositionBottom.storyName = 'Below'; +PositionBottom.parameters = { docs: { iframeHeight: 260, storyDescription: @@ -93,7 +93,7 @@ positionBottom.parameters = { } }; -export const equalSplit = () => ` <div class="fd-dynamic-side fd-dynamic-side--equal-split"> +export const EqualSplit = () => ` <div class="fd-dynamic-side fd-dynamic-side--equal-split"> <div class="fd-dynamic-side__main"> <div class="docs-layout-grid-bg docs-layout-grid-bg--color-9">Main</div> </div> @@ -103,8 +103,8 @@ export const equalSplit = () => ` <div class="fd-dynamic-side fd-dynamic-side </div> `; -equalSplit.storyName = 'Equal split'; -equalSplit.parameters = { +EqualSplit.storyName = 'Equal split'; +EqualSplit.parameters = { docs: { iframeHeight: 160, storyDescription: @@ -112,7 +112,7 @@ equalSplit.parameters = { } }; -export const responsiveness = () => ` +export const Responsiveness = () => ` <h4>On extra large screens, the main content area occupies 75% of the width.</h4> <div class="fd-dynamic-side fd-dynamic-side--xl"> <div class="fd-dynamic-side__side"> @@ -142,8 +142,7 @@ export const responsiveness = () => ` </div> `; -responsiveness.storyName = 'Responsiveness'; -responsiveness.parameters = { +Responsiveness.parameters = { docs: { iframeHeight: 160, storyDescription: ` diff --git a/stories/facets/facets.stories.js b/stories/facets/facets.stories.js index 030c75118a..93e8bce89d 100644 --- a/stories/facets/facets.stories.js +++ b/stories/facets/facets.stories.js @@ -8,7 +8,7 @@ export default { }; -export const combined = () => +export const Combined = () => `<div class="fd-facet-group" role="group"> <div class="fd-facet fd-facet--image fd-margin-end--md"> <span class="fd-avatar fd-avatar--l" aria-label="Avatar"> @@ -86,14 +86,14 @@ export const combined = () => </div> `; -combined.storyName = 'Combination of facets'; -combined.parameters = { +Combined.storyName = 'Combination of facets'; +Combined.parameters = { docs: { storyDescription: 'Facet types(image, form, and key-value) used together.' } }; -export const keyValue = () => +export const KeyValue = () => `<div class="fd-facet fd-facet--key-value fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle5"> <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle5"> Status </h1> <span class="fd-object-status fd-object-status--positive fd-object-status--large fd-facet__object-status"> @@ -120,8 +120,8 @@ export const keyValue = () => </div> `; -keyValue.storyName = 'Key-Value Facet'; -keyValue.parameters = { +KeyValue.storyName = 'Key-Value Facet'; +KeyValue.parameters = { docs: { storyDescription: `Key-Value facet is used to highlight important data or KPIs. It consists of a mandatory title and a text or number in a larger font size(**Object Status** or **Object Number**). The value can also have an icon to its left. @@ -129,7 +129,7 @@ keyValue.parameters = { } }; -export const formFacet = () => +export const FormFacet = () => `<div class="fd-facet fd-facet--form fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="formFacetTitle2"> <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="formFacetTitle2"> Technical Data </h1> <div class="fd-facet__container fd-margin-bottom--tiny"> @@ -151,8 +151,7 @@ export const formFacet = () => </div> `; -formFacet.storyName = 'Form Facet'; -formFacet.parameters = { +FormFacet.parameters = { docs: { storyDescription: `Form facet is used to display datasets. It consists of an optional title and label-value pair. Note that the labels can be icons, but need to have a text for accessibility purposes. @@ -160,7 +159,7 @@ formFacet.parameters = { } }; -export const formFacetLink = () => +export const FormFacetLink = () => `<div class="fd-facet fd-facet--form fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="formFacetTitle3"> <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="formFacetTitle3">Contact Information</h1> <div class="fd-facet__container fd-margin-bottom--tiny"> @@ -188,14 +187,14 @@ export const formFacetLink = () => </div> `; -formFacetLink.storyName = 'Form Facet with Link'; -formFacetLink.parameters = { +FormFacetLink.storyName = 'Form Facet with Link'; +FormFacetLink.parameters = { docs: { storyDescription: 'Text in a form facet can also hold a link by using the Link component.' } }; -export const ratingIndicator = () => +export const RatingIndicator = () => `<div class="fd-facet fd-facet--rating-indicator fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="ratingFacetTitle2"> <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="ratingFacetTitle2">Average User Rating</h1> <h2 class="fd-form-label">6 reviews</h2> @@ -220,15 +219,15 @@ export const ratingIndicator = () => </div> </div> `; -ratingIndicator.storyName = 'Rating Indicator Facet'; -ratingIndicator.parameters = { +RatingIndicator.storyName = 'Rating Indicator Facet'; +RatingIndicator.parameters = { docs: { - storyDescription: `The Rating Indicator Facet displays a **Rating Indicator**. It consists of a mandatory title, optional supplementary texts + storyDescription: `The Rating Indicator Facet displays a **Rating Indicator**. It consists of a mandatory title, optional supplementary texts like a subtitle or a dynamic text, and the rating indicator.` } }; -export const imageFacet = () => +export const ImageFacet = () => `<div class="fd-facet fd-facet--image fd-margin-end--md"> <span class="fd-avatar fd-avatar--l" aria-label="Avatar"> <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i> @@ -236,15 +235,15 @@ export const imageFacet = () => </div> `; -imageFacet.storyName = 'Image/Avatar Facet'; -imageFacet.parameters = { +ImageFacet.storyName = 'Image/Avatar Facet'; +ImageFacet.parameters = { docs: { storyDescription: 'Counter added to a tab' } }; -export const objectPage = () => +export const ObjectPage = () => `<section class="fd-dynamic-page fd-dynamic-page--xl" aria-label="Dynamic Page Desktop Example"> <header class="fd-dynamic-page__header"> <div class="fd-dynamic-page__title-area" tabindex="0" aria-hidden="false" id="mainContainer"> @@ -376,7 +375,7 @@ export const objectPage = () => <span class="fd-object-number__text">579</span><span class="fd-object-number__unit">EUR</span> </span> </div> - + <div class="fd-facet fd-facet--rating-indicator fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="ratingFacetTitle3"> <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="ratingFacetTitle3">Average User Rating</h1> <h2 class="fd-form-label">6 reviews</h2> @@ -384,16 +383,16 @@ export const objectPage = () => <div class="fd-rating-indicator__container fd-facet__rating-container" aria-label="Star Rating (out of 5)"> <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-1" name="2-rating-max-value-5" value="1"> <label class="fd-rating-indicator__label" for="2-rating-max-value-5-1"></label> - + <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-2" name="2-rating-max-value-5" value="2" checked> <label class="fd-rating-indicator__label" for="2-rating-max-value-5-2"></label> - + <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-3" name="2-rating-max-value-5" value="3"> <label class="fd-rating-indicator__label" for="2-rating-max-value-5-3"></label> - + <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-4" name="2-rating-max-value-5" value="4"> <label class="fd-rating-indicator__label" for="2-rating-max-value-5-4"></label> - + <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-5" name="2-rating-max-value-5" value="5"> <label class="fd-rating-indicator__label" for="2-rating-max-value-5-5"></label> </div> @@ -405,12 +404,12 @@ export const objectPage = () => <div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow"> <div class="fd-dynamic-page__collapsible-header-visibility-container--left-gradient"></div> <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group"> - <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" - aria-label="Collapse" - aria-expanded="true" + <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" + aria-label="Collapse" + aria-expanded="true" aria-hidden="false" id="expandBtn" - aria-haspopup="true" + aria-haspopup="true" onclick=" toggleElAttrs('fddplhvx6', ['aria-hidden']); toggleElAttrs('expandBtn', ['aria-expanded']); @@ -423,12 +422,12 @@ export const objectPage = () => > <i class="sap-icon--slim-arrow-up"></i> </button> - <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" - aria-label="Collapse" - aria-expanded="false" + <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" + aria-label="Collapse" + aria-expanded="false" aria-hidden="true" id="collapseBtn" - aria-haspopup="true" + aria-haspopup="true" onclick=" toggleElAttrs('fddplhvx6', ['aria-hidden']); toggleElAttrs('collapseBtn', ['aria-expanded']); @@ -441,7 +440,7 @@ export const objectPage = () => > <i class="sap-icon--slim-arrow-down"></i> </button> - <button class="fd-dynamic-page__pin-button fd-button fd-button--compact" + <button class="fd-dynamic-page__pin-button fd-button fd-button--compact" aria-label="Pin this"> <i class="sap-icon--pushpin-off"></i> </button> @@ -470,31 +469,31 @@ export const objectPage = () => </header> <div class="fd-dynamic-page__content"> <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV557" role="tabpanel"> - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz155" role="tabpanel" > - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. </div> </div> @@ -511,11 +510,11 @@ export const objectPage = () => </section> `; -objectPage.storyName = 'Facets in Object Page'; -objectPage.parameters = { +ObjectPage.storyName = 'Facets in Object Page'; +ObjectPage.parameters = { docs: { - storyDescription: `All facet types used together in the context of a dynamic page. To have the image from the image facet appear next to the title, add the class - \`fd-facet\` and apply the modifiers \`fd-facet--image\` and \`fd-facet--image-header-title\` to the + storyDescription: `All facet types used together in the context of a dynamic page. To have the image from the image facet appear next to the title, add the class + \`fd-facet\` and apply the modifiers \`fd-facet--image\` and \`fd-facet--image-header-title\` to the \`fd-dynamic-page__title-container\` class. Note that the dynamic page title and subtitle should be placed in the \`fd-dynamic-page__title-subtitle-container\` class for proper alignment with the image. @@ -540,7 +539,7 @@ The final structure of a collapsed header with image next to the title is shown }; -export const objectPageMobile = () => +export const ObjectPageMobile = () => `<div class="mobile-container"> <section class="fd-dynamic-page fd-dynamic-page--sm" aria-label="Dynamic Page Mobile Example"> <header class="fd-dynamic-page__header"> @@ -661,7 +660,7 @@ export const objectPageMobile = () => <i class="fd-avatar__icon sap-icon--camera" role="presentation"></i> </span> </div> - + <div class="fd-facet fd-facet--key-value fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle13"> <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle13">Availablity</h1> <span class="fd-object-status fd-object-status--positive fd-object-status--large fd-facet__object-status"> @@ -679,12 +678,12 @@ export const objectPageMobile = () => <div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow"> <div class="fd-dynamic-page__collapsible-header-visibility-container--left-gradient"></div> <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group"> - <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" - aria-label="Collapse header" - aria-expanded="true" + <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" + aria-label="Collapse header" + aria-expanded="true" aria-hidden="false" id="expandBtnMobile" - aria-haspopup="true" + aria-haspopup="true" onclick=" toggleElAttrs('fddplhvc7', ['aria-hidden']); toggleElAttrs('expandBtnMobile', ['aria-expanded']); @@ -697,12 +696,12 @@ export const objectPageMobile = () => > <i class="sap-icon--slim-arrow-up"></i> </button> - <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" - aria-label="Expand header" - aria-expanded="false" + <button class="fd-dynamic-page__collapse-button fd-button fd-button--compact" + aria-label="Expand header" + aria-expanded="false" aria-hidden="true" id="collapseBtnMobile" - aria-haspopup="true" + aria-haspopup="true" onclick=" toggleElAttrs('fddplhvc7', ['aria-hidden']); toggleElAttrs('collapseBtnMobile', ['aria-expanded']); @@ -735,20 +734,20 @@ export const objectPageMobile = () => </span> </a> </li> - </ul> + </ul> </div> </header> <div class="fd-dynamic-page__content"> <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV559" role="tabpanel"> - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz161" role="tabpanel"> - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. </div> </div> @@ -765,5 +764,5 @@ export const objectPageMobile = () => </section> </div> `; -objectPageMobile.storyName = 'Facets in Object Page Mobile'; +ObjectPageMobile.storyName = 'Facets in Object Page Mobile'; diff --git a/stories/feed-input/feed-input.stories.js b/stories/feed-input/feed-input.stories.js index e5aa912b3a..c7a6e05001 100644 --- a/stories/feed-input/feed-input.stories.js +++ b/stories/feed-input/feed-input.stories.js @@ -2,7 +2,7 @@ export default { title: 'Components/Feed Input', parameters: { description: `The feed input is specifically designed for users to type their own notes or comments and post them to a corresponding feed. - + ##Usage **Use the feed input if:** @@ -20,22 +20,22 @@ export default { } }; -export const standard = () => `<div class="fd-feed-input" - role="region" +export const Standard = () => `<div class="fd-feed-input" + role="region" aria-label="Feed input empty example"> - <div class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-input__thumb" - style="background-image: url('assets/images/avatars/4.svg')" - role="img" + <div class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-input__thumb" + style="background-image: url('assets/images/avatars/4.svg')" + role="img" aria-label="John Doe" title="John Doe"></div> - <textarea class="fd-textarea fd-feed-input__textarea" - placeholder="Post something here" - aria-label="Feed message" + <textarea class="fd-textarea fd-feed-input__textarea" + placeholder="Post something here" + aria-label="Feed message" required rows="1"></textarea> - <button class="fd-button fd-feed-input__submit-button" - aria-label="Send" - aria-disabled="true" + <button class="fd-button fd-feed-input__submit-button" + aria-label="Send" + aria-disabled="true" disabled title="Send"> <i role="presentation" class="sap-icon--feeder-arrow"></i> @@ -43,63 +43,63 @@ export const standard = () => `<div class="fd-feed-input" </div> `; -standard.storyName = 'Default'; -standard.parameters = { +Standard.storyName = 'Default'; +Standard.parameters = { docs: { iframeHeight: 150, storyDescription: 'The default feed input displays an empty text field with an inactive submit button.' } }; -export const notEmpty = () => ` <div class="fd-feed-input" - role="region" +export const NotEmpty = () => ` <div class="fd-feed-input" + role="region" aria-label="Feed input with one row text"> - <div class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-input__thumb" - style="background-image: url('assets/images/avatars/4.svg')" - role="img" + <div class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-input__thumb" + style="background-image: url('assets/images/avatars/4.svg')" + role="img" aria-label="John Doe" title="John Doe"></div> - <textarea class="fd-textarea fd-feed-input__textarea" + <textarea class="fd-textarea fd-feed-input__textarea" placeholder="Post something here" - aria-label="Feed message" - required + aria-label="Feed message" + required rows="1">"When there is text, the submit button becomes active.</textarea> - <button class="fd-button - fd-feed-input__submit-button" + <button class="fd-button + fd-feed-input__submit-button" aria-label="Send" - aria-disabled="false" + aria-disabled="false" title="Send"> <i role="presentation" class="sap-icon--feeder-arrow"></i> </button> </div> `; -notEmpty.storyName = 'With text'; -notEmpty.parameters = { +NotEmpty.storyName = 'With text'; +NotEmpty.parameters = { docs: { iframeHeight: 150, storyDescription: 'The input with text displays some text, activating the submit button.' } }; -export const disabled = () => ` <div class="fd-feed-input is-disabled" - role="region" +export const Disabled = () => ` <div class="fd-feed-input is-disabled" + role="region" aria-label="Feed input disabled example"> - <div class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-input__thumb" - style="background-image: url('assets/images/avatars/4.svg')" - role="img" + <div class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-input__thumb" + style="background-image: url('assets/images/avatars/4.svg')" + role="img" aria-label="John Doe" title="John Doe"></div> - <textarea class="fd-textarea fd-feed-input__textarea" - placeholder="Post something here" - aria-label="Feed message" + <textarea class="fd-textarea fd-feed-input__textarea" + placeholder="Post something here" + aria-label="Feed message" required rows="1" - aria-disabled="true" + aria-disabled="true" disabled>Disabled</textarea> - <button class="fd-button fd-feed-input__submit-button" - aria-label="Send" - aria-disabled="true" + <button class="fd-button fd-feed-input__submit-button" + aria-label="Send" + aria-disabled="true" disabled title="Send"> <i role="presentation" class="sap-icon--feeder-arrow"></i> @@ -107,81 +107,80 @@ export const disabled = () => ` <div class="fd-feed-input is-disabled" </div> `; -disabled.storyName = 'Disabled'; -disabled.parameters = { +Disabled.parameters = { docs: { iframeHeight: 150, storyDescription: 'The disabled feed input displays a text field and submit button that users cannot interact with.' } }; -export const withoutUserImage = () => ` <div class="fd-feed-input" - role="region" +export const WithoutUserImage = () => ` <div class="fd-feed-input" + role="region" aria-label="Feed input empty example"> - <textarea class="fd-textarea fd-feed-input__textarea" - placeholder="Post something here" - aria-label="Feed message" + <textarea class="fd-textarea fd-feed-input__textarea" + placeholder="Post something here" + aria-label="Feed message" required rows="1">Without user image</textarea> - <button class="fd-button fd-feed-input__submit-button" - aria-label="Send" + <button class="fd-button fd-feed-input__submit-button" + aria-label="Send" title="Send"> <i role="presentation" class="sap-icon--feeder-arrow"></i> </button> </div> `; -withoutUserImage.storyName = 'No thumbnail'; -withoutUserImage.parameters = { +WithoutUserImage.storyName = 'No thumbnail'; +WithoutUserImage.parameters = { docs: { iframeHeight: 150, storyDescription: 'Although the default feed input has a thumbnail, it is possible to remove it. Without a thumbnail, the input area size increases automatically.' } }; -export const placeholderImage = () => ` <div class="fd-feed-input" - role="region" +export const PlaceholderImage = () => ` <div class="fd-feed-input" + role="region" aria-label="Feed input empty example"> <div class="fd-avatar fd-avatar--s fd-avatar--placeholder sap-icon--person-placeholder fd-feed-input__thumb" role="img" - aria-label="John Doe" + aria-label="John Doe" title="John Doe"></div> - <textarea class="fd-textarea fd-feed-input__textarea" - placeholder="Post something here" - aria-label="Feed message" + <textarea class="fd-textarea fd-feed-input__textarea" + placeholder="Post something here" + aria-label="Feed message" required rows="1">With generic user image</textarea> - <button class="fd-button fd-feed-input__submit-button" - aria-label="Send" + <button class="fd-button fd-feed-input__submit-button" + aria-label="Send" title="Send"> <i role="presentation" class="sap-icon--feeder-arrow"></i> </button> </div> `; -placeholderImage.storyName = 'Generic thumbnail'; -placeholderImage.parameters = { +PlaceholderImage.storyName = 'Generic thumbnail'; +PlaceholderImage.parameters = { docs: { iframeHeight: 150, storyDescription: 'A generic thumbnail will be displayed if no image has been chosen by the user.' } }; -export const inputGrowth = () => ` <div class="fd-feed-input" - role="region" +export const InputGrowth = () => ` <div class="fd-feed-input" + role="region" aria-label="Feed input height growth"> - <div class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-input__thumb" - style="background-image: url('assets/images/avatars/4.svg')" + <div class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-input__thumb" + style="background-image: url('assets/images/avatars/4.svg')" role="img" - aria-label="John Doe" + aria-label="John Doe" title="John Doe"></div> - <textarea class="fd-textarea fd-feed-input__textarea" + <textarea class="fd-textarea fd-feed-input__textarea" placeholder="Post something here" - aria-label="Feed" - required + aria-label="Feed" + required rows="4">With every line\n"textarea" grows upward\nuntil it reaches\nthe max height</textarea> - <button class="fd-button fd-feed-input__submit-button" - aria-label="Send" + <button class="fd-button fd-feed-input__submit-button" + aria-label="Send" aria-disabled="false" title="Send"> <i role="presentation" class="sap-icon--feeder-arrow"></i> @@ -189,38 +188,38 @@ export const inputGrowth = () => ` <div class="fd-feed-input" </div> `; -inputGrowth.storyName = 'Multiline'; -inputGrowth.parameters = { +InputGrowth.storyName = 'Multiline'; +InputGrowth.parameters = { docs: { iframeHeight: 190, storyDescription: 'The multiline feed input displays a text field with multiple lines of text, which expands until a maximum height is reached.' } }; -export const overMaxHeight = () => ` <div class="fd-feed-input" - role="region" +export const OverMaxHeight = () => ` <div class="fd-feed-input" + role="region" aria-label="Feed input over max height"> - <div class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-input__thumb" - style="background-image: url('assets/images/avatars/4.svg')" - role="img" + <div class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-input__thumb" + style="background-image: url('assets/images/avatars/4.svg')" + role="img" aria-label="John Doe" title="John Doe"></div> <textarea class="fd-textarea fd-feed-input__textarea" - placeholder="Post something here" - aria-label="Feed message" - required + placeholder="Post something here" + aria-label="Feed message" + required rows="18">X\nX\nX\nX\nX\nX\nX\nX\nX\nX\nX\nX\nX\nX\nX\nX\nX\nX\nX\nX</textarea> - <button class="fd-button fd-feed-input__submit-button" - aria-label="Send" - aria-disabled="false" + <button class="fd-button fd-feed-input__submit-button" + aria-label="Send" + aria-disabled="false" title="Send"> <i role="presentation" class="sap-icon--feeder-arrow"></i> </button> </div> `; -overMaxHeight.storyName = 'Max height'; -overMaxHeight.parameters = { +OverMaxHeight.storyName = 'Max height'; +OverMaxHeight.parameters = { docs: { iframeHeight: 420, storyDescription: 'The max height feed input displays a text field with the maximum amount of text lines it can contain. Once the text field has reached the maximum height, a scrollbar appears to access the overflowing text.' diff --git a/stories/feed-list/feed-list.stories.js b/stories/feed-list/feed-list.stories.js index 340b86accd..05648151e5 100644 --- a/stories/feed-list/feed-list.stories.js +++ b/stories/feed-list/feed-list.stories.js @@ -1,493 +1,489 @@ -export default { - title: 'Components/Feed List and Item', - parameters: { - description: `The feed list displays feed list items that individually consist of a username, a written entry and an optional image. There is also a separate byline below that can contain a time stamp or an attribute in the form of free text. - - -##Usage -**Use the feed list if:** - -- You expect multiple instances, such as notes or feed entries. -- The items in the feed list are homogenous. -- A user needs to input small amounts of text without formatting. - -**Do not use feed list if:** - -- The user needs to format the text (rich text editor). -- You need only a single text box instance. Instead, use **Text Area**. -- You want to display empty fields for the user to input feed entries. Instead, use **Feed Input**. - `, - tags: ['f3', 'a11y', 'theme'], - components: ['action-sheet', 'feed-list', 'avatar', 'icon', 'button', 'menu', 'popover', 'link'] - } -}; - -export const standard = () => `<ul class="fd-feed-list" aria-label="Feed List Item default example"> - <li class="fd-feed-list__body"> - <div - class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb" - style="background-image: url(https://avatars.dicebear.com/api/human/fe.svg?m=6&b=%23f5f0f0&mood[]=surprised)" - role="img" - aria-label="John Doe" - title="John Doe"> - </div> - - <div class="fd-feed-list__content"> - <p class="fd-feed-list__text"> - <span class="fd-feed-list__name">Joe Doe: </span> - Suspendisse facilisis sed odio in mollis. Donec quis justo aliquam, porta justo a, accumsan lorem. - </p> - <div class="fd-feed-list__footer"> - <small class="fd-feed-list__footer--byline">Aug 20, 2020</small> - <small class="fd-feed-list__footer--byline">Reply</small> - </div> - </div> - </li> -</ul> -`; - -standard.storyName = 'Standard'; -standard.parameters = { - docs: { - storyDescription: 'The standard feed list item displays a user\'s name and written text, an image and an additional attribute (in this example, it is a time stamp).' - } -}; - -export const placeHolderImage = () => `<ul class="fd-feed-list" aria-label="Feed List Item placeholder user image example"> - <li class="fd-feed-list__body"> - <div - class="fd-avatar fd-avatar--s fd-avatar--placeholder fd-feed-list__thumb" - role="img" - aria-label="John Doe" - title="John Doe"> - <i class="sap-icon--person-placeholder"></i> - </div> - - <div class="fd-feed-list__content"> - <p class="fd-feed-list__text"> - <span class="fd-feed-list__name">Joe Doe: </span> - Suspendisse facilisis sed odio in mollis. Donec quis justo aliquam, porta justo a, accumsan lorem. - </p> - - <div class="fd-feed-list__footer"> - <small class="fd-feed-list__footer--byline">Aug 20, 2020</small> - <small class="fd-feed-list__footer--byline">Reply</small> - </div> - </div> - </li> -</ul> -`; - -placeHolderImage.storyName = 'Placeholder image'; -placeHolderImage.parameters = { - docs: { - storyDescription: 'The feed list item will display a placeholder image if the user does not have an image assigned.' - } -}; - -export const noImage = () => `<ul class="fd-feed-list" aria-label="Feed List Item without user image example"> - <li class="fd-feed-list__body"> - <div class="fd-feed-list__content"> - <p class="fd-feed-list__text"> - <span class="fd-feed-list__name">Joe Doe: </span> - Suspendisse facilisis sed odio in mollis. Donec quis justo aliquam, porta justo a, accumsan lorem. - </p> - - <div class="fd-feed-list__footer"> - <small class="fd-feed-list__footer--byline">Aug 20, 2020</small> - <small class="fd-feed-list__footer--byline">Reply</small> - </div> - </div> - </li> -</ul> -`; - -noImage.storyName = 'No image'; -noImage.parameters = { - docs: { - storyDescription: 'The feed list item can be displayed without an image by removing the `fd-avatar` element from the container.' - } -}; - -export const linked = () => `<ul class="fd-feed-list" aria-label="Feed List Item with user link example"> - <li class="fd-feed-list__body"> - <div - class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list--link fd-feed-list__thumb" - style="background-image: url(https://avatars.dicebear.com/api/human/fe.svg?m=6&b=%23f5f0f0&mood[]=surprised)" - role="img" - aria-label="John Doe" - title="John Doe" - tabindex="0" - ></div> - - <div class="fd-feed-list__content"> - <p class="fd-feed-list__text"> - <span class="fd-feed-list__name"> - <a href="#" class="fd-link fd-link--emphasized">Joe Doe: </a> - </span> - Suspendisse facilisis sed odio in mollis. Donec quis justo aliquam, porta justo a, accumsan lorem. - </p> - - <div class="fd-feed-list__footer"> - <small class="fd-feed-list__footer--byline">Aug 20, 2020</small> - <small class="fd-feed-list__footer--byline">Reply</small> - </div> - </div> - </li> -</ul> -`; - -linked.storyName = 'Linked'; -linked.parameters = { - docs: { - storyDescription: 'The feed list item can display linked usernames (and images). To display a linked username, add the `fd-link` class with the `fd-link--emphasized` modifier to the `fd-feed-list__name` element.' - } -}; - -export const showMore = () => `<ul class="fd-feed-list" aria-label="Feed List Item with show more text example"> - <li class="fd-feed-list__body"> - <div - class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb" - style="background-image: url(https://avatars.dicebear.com/api/human/fe.svg?m=6&b=%23f5f0f0&mood[]=surprised)" - role="img" - aria-label="John Doe" - title="John Doe" - ></div> - - <div class="fd-feed-list__content"> - <p class="fd-feed-list__text"> - <span class="fd-feed-list__name">Joe Doe: </span> - <span>Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. Morbi tempor eu elit eu consequat. Sed at lorem a ex consequat pharetra. Etiam convallis odio at vulputate venenatis. In sit amet pharetra urna. Ut nulla nisi, porta at ligula a, elementum ullamcorper lectus. Suspendisse blandit, risus nec vestibulum volutpat, nulla neque rhoncus dolor, vitae rutrum lectus neque nec ligula. Maecenas pulvinar, ligula nec fringilla volutpat, urna quam rutrum tellus, vi... - <a class="fd-link fd-feed-list__link--more" tabindex="0">More</a> - </p> - - <div class="fd-feed-list__footer"> - <small class="fd-feed-list__footer--byline">Aug 20, 2020</small> - <small class="fd-feed-list__footer--byline">Reply</small> - </div> - </div> - </li> -</ul> -`; - -showMore.storyName = 'Show more'; -showMore.parameters = { - docs: { - storyDescription: 'Feed list items can display a <i>MORE</i> link that can show more text (when/if it is truncated). Truncation occurs when the text reaches 300 characters. When hovering over the link, the text is highlighted and underlined.' - } -}; - -export const showLess = () => `<ul class="fd-feed-list" aria-label="Feed List Item with show less text example"> - <li class="fd-feed-list__body"> - <div - class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb" - style="background-image: url(https://avatars.dicebear.com/api/human/fe.svg?m=6&b=%23f5f0f0&mood[]=surprised)" - role="img" - aria-label="John Doe" - title="John Doe" - ></div> - - <div class="fd-feed-list__content"> - <p class="fd-feed-list__text"> - <span class="fd-feed-list__name">Joe Doe: </span> - <span>Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. Morbi tempor eu elit eu consequat. Sed at lorem a ex consequat pharetra. Etiam convallis odio at vulputate venenatis. In sit amet pharetra urna. Ut nulla nisi, porta at ligula a, elementum ullamcorper lectus. Suspendisse blandit, risus nec vestibulum volutpat, nulla neque rhoncus dolor, vitae rutrum lectus neque nec ligula. Maecenas pulvinar, ligula nec fringilla volutpat, urna quam rutrum tellus, vitae elementum elit est malesuada nunc. Maecenas eu risus posuere, volutpat justo in, ultricies sem - <a class="fd-link fd-feed-list__link--more" tabindex="0">Less</a> - </p> - - <div class="fd-feed-list__footer"> - <small class="fd-feed-list__footer--byline">Aug 20, 2020</small> - <small class="fd-feed-list__footer--byline">Reply</small> - </div> - </div> - </li> -</ul> -`; - -showLess.storyName = 'Show less'; -showLess.parameters = { - docs: { - storyDescription: 'Similarly, feed list items can display a <i>LESS</i> link that will revert the text back to when it was truncated.' - } -}; - -export const withActions = () => `<ul class="fd-feed-list" aria-label="Feed List Item with popover actions example"> - <li class="fd-feed-list__body"> - <div - class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb" - style="background-image: url(https://avatars.dicebear.com/api/human/fe.svg?m=6&b=%23f5f0f0&mood[]=surprised)" - role="img" - aria-label="John Doe" - title="John Doe"> - </div> - - <div class="fd-feed-list__content"> - <div class="fd-feed-list__actions"> - <div class="fd-popover"> - <div class="fd-popover__control"> - <button class="fd-button fd-button--compact fd-button--transparent" - aria-label="More Options" aria-controls="actionSheetDesktop" aria-expanded="false" - aria-haspopup="true" onclick="onPopoverClick('actionSheetDesktop');"> - <i class="sap-icon--overflow"></i> - </button> - </div> - <div class="fd-popover__body fd-popover__body--right" aria-hidden="true" id="actionSheetDesktop"> - <ul class="fd-action-sheet fd-action-sheet--compact" role="list" aria-label="List of contextual options"> - <li class="fd-action-sheet__item" role="listitem"> - <button class="fd-button fd-button--full-width fd-button--compact fd-button--transparent fd-button--text-alignment-left"> - <i class="sap-icon--attachment"></i> - <span class="fd-button__text">Button 1</span> - </button> - </li> - <li class="fd-action-sheet__item" role="listitem"> - <button class="fd-button fd-button--full-width fd-button--compact fd-button--transparent fd-button--text-alignment-left"> - <i class="sap-icon--add"></i> - <span class="fd-button__text">Button 2</span> - </button> - </li> - <li class="fd-action-sheet__item" role="listitem"> - <button class="fd-button fd-button--full-width fd-button--compact fd-button--transparent fd-button--text-alignment-left"> - <i class="sap-icon--print"></i> - <span class="fd-button__text">Button 3</span> - </button> - </li> - </ul> - </div> - </div> - </div> - <p class="fd-feed-list__text"> - <span class="fd-feed-list__name">Joe Doe: </span> - <span>In hac habitasse platea dictumst. Fusce eu dui viverra, dictum justo in, pul aug. Praesent aliquam massa non lectus commodo, id vestibulum lectus auctor. Proin lorem quam, accumsan ac dui et, cursus ornare dui. Nunc ultricies dolor felis, in viverra mi venenatis in. Sed vel nisl a dui posuere ullamcorper. Donec posuere id massa at dictum. Suspendisse potenti.</span> - </p> - <div class="fd-feed-list__footer"> - <small class="fd-feed-list__footer--byline">Aug 20, 2020</small> - <small class="fd-feed-list__footer--byline">Reply</small> - </div> - </div> - </li> -</ul> -`; - -withActions.storyName = 'Actions'; -withActions.parameters = { - docs: { - storyDescription: 'Feed list items can display actions that users can perform on their individual feed posts. These typically include actions like <i>Edit</i> and <i>Delete</i>, however, other actions can be displayed depending on the use case. It is recommended to display a maximum of 5 actions per post.' - } -}; - -export const group = () => ` <ul class="fd-feed-list fd-feed-list--group" aria-label="Feed List Item group example"> - <li class="fd-feed-list__body"> - <div - class="fd-avatar fd-avatar--s fd-avatar--placeholder fd-feed-list__thumb" - role="img" - aria-label="John Doe" - title="John Doe"> - <i class="sap-icon--person-placeholder"></i> - </div> - <div class="fd-feed-list__content"> - <p class="fd-feed-list__text"> - <span class="fd-feed-list__name">Cruz: </span> - <span>Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. - </p> - <div class="fd-feed-list__footer"> - <small class="fd-feed-list__footer--byline">Aug 21, 2020</small> - <small class="fd-feed-list__footer--byline">Reply</small> - </div> - </div> - </li> - - <li class="fd-feed-list__body"> - <div - class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb" - style="background-image: url(https://avatars.dicebear.com/api/human/fe.svg?m=6&b=%23f5f0f0&mood[]=surprised)" - role="img" - aria-label="John Doe" - title="John Doe"> - </div> - - <div class="fd-feed-list__content"> - <p class="fd-feed-list__text"> - <span class="fd-feed-list__name">Joe Doe: </span> - <span>Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. - </p> - <div class="fd-feed-list__footer"> - <small class="fd-feed-list__footer--byline">Aug 22, 2020</small> - <small class="fd-feed-list__footer--byline">Reply</small> - </div> - </div> - </li> - - <li class="fd-feed-list__body"> - <div - class="fd-avatar fd-avatar--s fd-feed-list__thumb" - style="background-image: url(https://avatars.dicebear.com/api/male/john.svg?mood[]=happy)" - role="img" - aria-label="John Doe" - title="John Doe" - ></div> - <div class="fd-feed-list__content"> - <p class="fd-feed-list__text"> - <span class="fd-feed-list__name">Sanchez: </span> - <span>Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. - </p> - <div class="fd-feed-list__footer"> - <small class="fd-feed-list__footer--byline">Aug 20, 2020</small> - <small class="fd-feed-list__footer--byline">Reply</small> - </div> - </div> - </li> -</ul> -`; - -group.storyName = 'Group'; -group.parameters = { - docs: { - storyDescription: 'Evidently, feed list items can be displayed in a group. The example below displays a feed list item with a placeholder image and two standard feed list items.' - } -}; - -export const borderless = () => `<ul class="fd-feed-list fd-feed-list--group fd-feed-list--no-border" aria-label="Feed List Item group example"> - <li class="fd-feed-list__body"> - <div - class="fd-avatar fd-avatar--s fd-avatar--placeholder fd-feed-list__thumb" - role="img" - aria-label="John Doe" - title="John Doe"> - <i class="sap-icon--person-placeholder"></i> - </div> - <div class="fd-feed-list__content"> - <p class="fd-feed-list__text"> - <span class="fd-feed-list__name">Cruz: </span> - <span>Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. - </p> - <div class="fd-feed-list__footer"> - <small class="fd-feed-list__footer--byline">Aug 21, 2020</small> - <small class="fd-feed-list__footer--byline">Reply</small> - </div> - </div> - </li> - - <li class="fd-feed-list__body"> - <div - class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb" - style="background-image: url(https://avatars.dicebear.com/api/human/fe.svg?m=6&b=%23f5f0f0&mood[]=surprised)" - role="img" - aria-label="John Doe" - title="John Doe"> - </div> - - <div class="fd-feed-list__content"> - <p class="fd-feed-list__text"> - <span class="fd-feed-list__name">Joe Doe: </span> - <span>Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. - </p> - <div class="fd-feed-list__footer"> - <small class="fd-feed-list__footer--byline">Aug 22, 2020</small> - <small class="fd-feed-list__footer--byline">Reply</small> - </div> - </div> - </li> - - <li class="fd-feed-list__body"> - <div - class="fd-avatar fd-avatar--s fd-feed-list__thumb" - style="background-image: url(https://avatars.dicebear.com/api/male/john.svg?mood[]=happy)" - role="img" - aria-label="John Doe" - title="John Doe" - ></div> - <div class="fd-feed-list__content"> - <p class="fd-feed-list__text"> - <span class="fd-feed-list__name">Sanchez: </span> - <span>Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. - </p> - <div class="fd-feed-list__footer"> - <small class="fd-feed-list__footer--byline">Aug 20, 2020</small> - <small class="fd-feed-list__footer--byline">Reply</small> - </div> - </div> - </li> -</ul> -`; - -borderless.storyName = 'Borderless group'; -borderless.parameters = { - docs: { - storyDescription: 'When feed list items are displayed in a group, they are usually separated by borders. However, to remove the borders, add the `fd-feed-list--no-border` modifier class to the main element.' - } -}; - -export const mobile = () => `<div style="width: 350px; height: 600px; position: relative"> - <ul class="fd-feed-list fd-feed-list--s" aria-label="Feed List Item small size example"> - <li class="fd-feed-list__body"> - <div class="fd-feed-list__wrapper"> - <div class="fd-feed-list__wrapper fd-feed-list__wrapper--header"> - <div - class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb" - style="background-image: url(https://avatars.dicebear.com/api/human/fe.svg?m=6&b=%23f5f0f0&mood[]=surprised)" - role="img" - aria-label="John Doe" - title="John Doe"> - </div> - <div> - <span class="fd-feed-list__name">Joe Doe: </span> - <div class="fd-feed-list__footer"> - <small class="fd-feed-list__footer--byline">Aug 20, 2020</small> - <small class="fd-feed-list__footer--byline">Reply</small> - </div> - </div> - - </div> - <div class="fd-feed-list__action"> - <button class="fd-button fd-button--transparent" - aria-label="More Options" aria-controls="actionSheetPhone" aria-expanded="false" - aria-haspopup="true" onclick="toggleClass('actionSheetPhone', 'fd-action-sheet__wrapper--active');"> - <i class="sap-icon--overflow"></i> - </button> - </div> - </div> - - <div class="fd-feed-list__content"> - <p class="fd-feed-list__text"> - Suspendisse facilisis sed odio in mollis. Donec quis justo aliquam, porta justo a, accumsan lorem. - </p> - </div> - <div class="fd-action-sheet__wrapper" id="actionSheetPhone"> - <h6 class="fd-action-sheet__title">Press cancel to hide action sheet</h6> - <ul class="fd-action-sheet fd-action-sheet--mobile" role="list" aria-label="List of contextual options"> - <li class="fd-action-sheet__item" role="listitem"> - <button class="fd-button fd-button--full-width fd-button--transparent fd-button--text-alignment-left"> - <i class="sap-icon--attachment"></i> - <span class="fd-button__text">Button 1</span> - </button> - </li> - <li class="fd-action-sheet__item" role="listitem"> - <button class="fd-button fd-button--full-width fd-button--transparent fd-button--text-alignment-left"> - <i class="sap-icon--add"></i> - <span class="fd-button__text">Button 2</span> - </button> - </li> - <li class="fd-action-sheet__item" role="listitem"> - <button class="fd-button fd-button--full-width fd-button--transparent fd-button--text-alignment-left"> - <i class="sap-icon--print"></i> - <span class="fd-button__text">Button 3</span> - </button> - </li> - <li class="fd-action-sheet__item" role="listitem"> - <button class="fd-button fd-button--full-width fd-button--negative" - onclick="toggleClass('actionSheetPhone', 'fd-action-sheet__wrapper--active');"> - <span class="fd-button__text">Cancel</span> - </button> - </li> - </ul> - </div> - </li> - </ul> -</div> -`; - -mobile.storyName = 'Mobile'; -mobile.parameters = { - docs: { - storyDescription: 'The feed list item can be mobile responsive by adding the `fd-feed-list--s` modifier class to the main element.' - } -}; +export default { + title: 'Components/Feed List and Item', + parameters: { + description: `The feed list displays feed list items that individually consist of a username, a written entry and an optional image. There is also a separate byline below that can contain a time stamp or an attribute in the form of free text. + + +##Usage +**Use the feed list if:** + +- You expect multiple instances, such as notes or feed entries. +- The items in the feed list are homogenous. +- A user needs to input small amounts of text without formatting. + +**Do not use feed list if:** + +- The user needs to format the text (rich text editor). +- You need only a single text box instance. Instead, use **Text Area**. +- You want to display empty fields for the user to input feed entries. Instead, use **Feed Input**. + `, + tags: ['f3', 'a11y', 'theme'], + components: ['action-sheet', 'feed-list', 'avatar', 'icon', 'button', 'menu', 'popover', 'link'] + } +}; + +export const Standard = () => `<ul class="fd-feed-list" aria-label="Feed List Item default example"> + <li class="fd-feed-list__body"> + <div + class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb" + style="background-image: url(https://avatars.dicebear.com/api/human/fe.svg?m=6&b=%23f5f0f0&mood[]=surprised)" + role="img" + aria-label="John Doe" + title="John Doe"> + </div> + + <div class="fd-feed-list__content"> + <p class="fd-feed-list__text"> + <span class="fd-feed-list__name">Joe Doe: </span> + Suspendisse facilisis sed odio in mollis. Donec quis justo aliquam, porta justo a, accumsan lorem. + </p> + <div class="fd-feed-list__footer"> + <small class="fd-feed-list__footer--byline">Aug 20, 2020</small> + <small class="fd-feed-list__footer--byline">Reply</small> + </div> + </div> + </li> +</ul> +`; + +Standard.parameters = { + docs: { + storyDescription: 'The standard feed list item displays a user\'s name and written text, an image and an additional attribute (in this example, it is a time stamp).' + } +}; + +export const PlaceHolderImage = () => `<ul class="fd-feed-list" aria-label="Feed List Item placeholder user image example"> + <li class="fd-feed-list__body"> + <div + class="fd-avatar fd-avatar--s fd-avatar--placeholder fd-feed-list__thumb" + role="img" + aria-label="John Doe" + title="John Doe"> + <i class="sap-icon--person-placeholder"></i> + </div> + + <div class="fd-feed-list__content"> + <p class="fd-feed-list__text"> + <span class="fd-feed-list__name">Joe Doe: </span> + Suspendisse facilisis sed odio in mollis. Donec quis justo aliquam, porta justo a, accumsan lorem. + </p> + + <div class="fd-feed-list__footer"> + <small class="fd-feed-list__footer--byline">Aug 20, 2020</small> + <small class="fd-feed-list__footer--byline">Reply</small> + </div> + </div> + </li> +</ul> +`; + +PlaceHolderImage.storyName = 'Placeholder image'; +PlaceHolderImage.parameters = { + docs: { + storyDescription: 'The feed list item will display a placeholder image if the user does not have an image assigned.' + } +}; + +export const NoImage = () => `<ul class="fd-feed-list" aria-label="Feed List Item without user image example"> + <li class="fd-feed-list__body"> + <div class="fd-feed-list__content"> + <p class="fd-feed-list__text"> + <span class="fd-feed-list__name">Joe Doe: </span> + Suspendisse facilisis sed odio in mollis. Donec quis justo aliquam, porta justo a, accumsan lorem. + </p> + + <div class="fd-feed-list__footer"> + <small class="fd-feed-list__footer--byline">Aug 20, 2020</small> + <small class="fd-feed-list__footer--byline">Reply</small> + </div> + </div> + </li> +</ul> +`; + +NoImage.storyName = 'No image'; +NoImage.parameters = { + docs: { + storyDescription: 'The feed list item can be displayed without an image by removing the `fd-avatar` element from the container.' + } +}; + +export const Linked = () => `<ul class="fd-feed-list" aria-label="Feed List Item with user link example"> + <li class="fd-feed-list__body"> + <div + class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list--link fd-feed-list__thumb" + style="background-image: url(https://avatars.dicebear.com/api/human/fe.svg?m=6&b=%23f5f0f0&mood[]=surprised)" + role="img" + aria-label="John Doe" + title="John Doe" + tabindex="0" + ></div> + + <div class="fd-feed-list__content"> + <p class="fd-feed-list__text"> + <span class="fd-feed-list__name"> + <a href="#" class="fd-link fd-link--emphasized">Joe Doe: </a> + </span> + Suspendisse facilisis sed odio in mollis. Donec quis justo aliquam, porta justo a, accumsan lorem. + </p> + + <div class="fd-feed-list__footer"> + <small class="fd-feed-list__footer--byline">Aug 20, 2020</small> + <small class="fd-feed-list__footer--byline">Reply</small> + </div> + </div> + </li> +</ul> +`; + +Linked.parameters = { + docs: { + storyDescription: 'The feed list item can display linked usernames (and images). To display a linked username, add the `fd-link` class with the `fd-link--emphasized` modifier to the `fd-feed-list__name` element.' + } +}; + +export const ShowMore = () => `<ul class="fd-feed-list" aria-label="Feed List Item with show more text example"> + <li class="fd-feed-list__body"> + <div + class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb" + style="background-image: url(https://avatars.dicebear.com/api/human/fe.svg?m=6&b=%23f5f0f0&mood[]=surprised)" + role="img" + aria-label="John Doe" + title="John Doe" + ></div> + + <div class="fd-feed-list__content"> + <p class="fd-feed-list__text"> + <span class="fd-feed-list__name">Joe Doe: </span> + <span>Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. Morbi tempor eu elit eu consequat. Sed at lorem a ex consequat pharetra. Etiam convallis odio at vulputate venenatis. In sit amet pharetra urna. Ut nulla nisi, porta at ligula a, elementum ullamcorper lectus. Suspendisse blandit, risus nec vestibulum volutpat, nulla neque rhoncus dolor, vitae rutrum lectus neque nec ligula. Maecenas pulvinar, ligula nec fringilla volutpat, urna quam rutrum tellus, vi... + <a class="fd-link fd-feed-list__link--more" tabindex="0">More</a> + </p> + + <div class="fd-feed-list__footer"> + <small class="fd-feed-list__footer--byline">Aug 20, 2020</small> + <small class="fd-feed-list__footer--byline">Reply</small> + </div> + </div> + </li> +</ul> +`; + +ShowMore.storyName = 'Show more'; +ShowMore.parameters = { + docs: { + storyDescription: 'Feed list items can display a <i>MORE</i> link that can show more text (when/if it is truncated). Truncation occurs when the text reaches 300 characters. When hovering over the link, the text is highlighted and underlined.' + } +}; + +export const ShowLess = () => `<ul class="fd-feed-list" aria-label="Feed List Item with show less text example"> + <li class="fd-feed-list__body"> + <div + class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb" + style="background-image: url(https://avatars.dicebear.com/api/human/fe.svg?m=6&b=%23f5f0f0&mood[]=surprised)" + role="img" + aria-label="John Doe" + title="John Doe" + ></div> + + <div class="fd-feed-list__content"> + <p class="fd-feed-list__text"> + <span class="fd-feed-list__name">Joe Doe: </span> + <span>Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. Morbi tempor eu elit eu consequat. Sed at lorem a ex consequat pharetra. Etiam convallis odio at vulputate venenatis. In sit amet pharetra urna. Ut nulla nisi, porta at ligula a, elementum ullamcorper lectus. Suspendisse blandit, risus nec vestibulum volutpat, nulla neque rhoncus dolor, vitae rutrum lectus neque nec ligula. Maecenas pulvinar, ligula nec fringilla volutpat, urna quam rutrum tellus, vitae elementum elit est malesuada nunc. Maecenas eu risus posuere, volutpat justo in, ultricies sem + <a class="fd-link fd-feed-list__link--more" tabindex="0">Less</a> + </p> + + <div class="fd-feed-list__footer"> + <small class="fd-feed-list__footer--byline">Aug 20, 2020</small> + <small class="fd-feed-list__footer--byline">Reply</small> + </div> + </div> + </li> +</ul> +`; + +ShowLess.storyName = 'Show less'; +ShowLess.parameters = { + docs: { + storyDescription: 'Similarly, feed list items can display a <i>LESS</i> link that will revert the text back to when it was truncated.' + } +}; + +export const WithActions = () => `<ul class="fd-feed-list" aria-label="Feed List Item with popover actions example"> + <li class="fd-feed-list__body"> + <div + class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb" + style="background-image: url(https://avatars.dicebear.com/api/human/fe.svg?m=6&b=%23f5f0f0&mood[]=surprised)" + role="img" + aria-label="John Doe" + title="John Doe"> + </div> + + <div class="fd-feed-list__content"> + <div class="fd-feed-list__actions"> + <div class="fd-popover"> + <div class="fd-popover__control"> + <button class="fd-button fd-button--compact fd-button--transparent" + aria-label="More Options" aria-controls="actionSheetDesktop" aria-expanded="false" + aria-haspopup="true" onclick="onPopoverClick('actionSheetDesktop');"> + <i class="sap-icon--overflow"></i> + </button> + </div> + <div class="fd-popover__body fd-popover__body--right" aria-hidden="true" id="actionSheetDesktop"> + <ul class="fd-action-sheet fd-action-sheet--compact" role="list" aria-label="List of contextual options"> + <li class="fd-action-sheet__item" role="listitem"> + <button class="fd-button fd-button--full-width fd-button--compact fd-button--transparent fd-button--text-alignment-left"> + <i class="sap-icon--attachment"></i> + <span class="fd-button__text">Button 1</span> + </button> + </li> + <li class="fd-action-sheet__item" role="listitem"> + <button class="fd-button fd-button--full-width fd-button--compact fd-button--transparent fd-button--text-alignment-left"> + <i class="sap-icon--add"></i> + <span class="fd-button__text">Button 2</span> + </button> + </li> + <li class="fd-action-sheet__item" role="listitem"> + <button class="fd-button fd-button--full-width fd-button--compact fd-button--transparent fd-button--text-alignment-left"> + <i class="sap-icon--print"></i> + <span class="fd-button__text">Button 3</span> + </button> + </li> + </ul> + </div> + </div> + </div> + <p class="fd-feed-list__text"> + <span class="fd-feed-list__name">Joe Doe: </span> + <span>In hac habitasse platea dictumst. Fusce eu dui viverra, dictum justo in, pul aug. Praesent aliquam massa non lectus commodo, id vestibulum lectus auctor. Proin lorem quam, accumsan ac dui et, cursus ornare dui. Nunc ultricies dolor felis, in viverra mi venenatis in. Sed vel nisl a dui posuere ullamcorper. Donec posuere id massa at dictum. Suspendisse potenti.</span> + </p> + <div class="fd-feed-list__footer"> + <small class="fd-feed-list__footer--byline">Aug 20, 2020</small> + <small class="fd-feed-list__footer--byline">Reply</small> + </div> + </div> + </li> +</ul> +`; + +WithActions.storyName = 'Actions'; +WithActions.parameters = { + docs: { + storyDescription: 'Feed list items can display actions that users can perform on their individual feed posts. These typically include actions like <i>Edit</i> and <i>Delete</i>, however, other actions can be displayed depending on the use case. It is recommended to display a maximum of 5 actions per post.' + } +}; + +export const Group = () => ` <ul class="fd-feed-list fd-feed-list--group" aria-label="Feed List Item group example"> + <li class="fd-feed-list__body"> + <div + class="fd-avatar fd-avatar--s fd-avatar--placeholder fd-feed-list__thumb" + role="img" + aria-label="John Doe" + title="John Doe"> + <i class="sap-icon--person-placeholder"></i> + </div> + <div class="fd-feed-list__content"> + <p class="fd-feed-list__text"> + <span class="fd-feed-list__name">Cruz: </span> + <span>Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. + </p> + <div class="fd-feed-list__footer"> + <small class="fd-feed-list__footer--byline">Aug 21, 2020</small> + <small class="fd-feed-list__footer--byline">Reply</small> + </div> + </div> + </li> + + <li class="fd-feed-list__body"> + <div + class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb" + style="background-image: url(https://avatars.dicebear.com/api/human/fe.svg?m=6&b=%23f5f0f0&mood[]=surprised)" + role="img" + aria-label="John Doe" + title="John Doe"> + </div> + + <div class="fd-feed-list__content"> + <p class="fd-feed-list__text"> + <span class="fd-feed-list__name">Joe Doe: </span> + <span>Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. + </p> + <div class="fd-feed-list__footer"> + <small class="fd-feed-list__footer--byline">Aug 22, 2020</small> + <small class="fd-feed-list__footer--byline">Reply</small> + </div> + </div> + </li> + + <li class="fd-feed-list__body"> + <div + class="fd-avatar fd-avatar--s fd-feed-list__thumb" + style="background-image: url(https://avatars.dicebear.com/api/male/john.svg?mood[]=happy)" + role="img" + aria-label="John Doe" + title="John Doe" + ></div> + <div class="fd-feed-list__content"> + <p class="fd-feed-list__text"> + <span class="fd-feed-list__name">Sanchez: </span> + <span>Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. + </p> + <div class="fd-feed-list__footer"> + <small class="fd-feed-list__footer--byline">Aug 20, 2020</small> + <small class="fd-feed-list__footer--byline">Reply</small> + </div> + </div> + </li> +</ul> +`; + +Group.parameters = { + docs: { + storyDescription: 'Evidently, feed list items can be displayed in a group. The example below displays a feed list item with a placeholder image and two standard feed list items.' + } +}; + +export const Borderless = () => `<ul class="fd-feed-list fd-feed-list--group fd-feed-list--no-border" aria-label="Feed List Item group example"> + <li class="fd-feed-list__body"> + <div + class="fd-avatar fd-avatar--s fd-avatar--placeholder fd-feed-list__thumb" + role="img" + aria-label="John Doe" + title="John Doe"> + <i class="sap-icon--person-placeholder"></i> + </div> + <div class="fd-feed-list__content"> + <p class="fd-feed-list__text"> + <span class="fd-feed-list__name">Cruz: </span> + <span>Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. + </p> + <div class="fd-feed-list__footer"> + <small class="fd-feed-list__footer--byline">Aug 21, 2020</small> + <small class="fd-feed-list__footer--byline">Reply</small> + </div> + </div> + </li> + + <li class="fd-feed-list__body"> + <div + class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb" + style="background-image: url(https://avatars.dicebear.com/api/human/fe.svg?m=6&b=%23f5f0f0&mood[]=surprised)" + role="img" + aria-label="John Doe" + title="John Doe"> + </div> + + <div class="fd-feed-list__content"> + <p class="fd-feed-list__text"> + <span class="fd-feed-list__name">Joe Doe: </span> + <span>Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. + </p> + <div class="fd-feed-list__footer"> + <small class="fd-feed-list__footer--byline">Aug 22, 2020</small> + <small class="fd-feed-list__footer--byline">Reply</small> + </div> + </div> + </li> + + <li class="fd-feed-list__body"> + <div + class="fd-avatar fd-avatar--s fd-feed-list__thumb" + style="background-image: url(https://avatars.dicebear.com/api/male/john.svg?mood[]=happy)" + role="img" + aria-label="John Doe" + title="John Doe" + ></div> + <div class="fd-feed-list__content"> + <p class="fd-feed-list__text"> + <span class="fd-feed-list__name">Sanchez: </span> + <span>Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. + </p> + <div class="fd-feed-list__footer"> + <small class="fd-feed-list__footer--byline">Aug 20, 2020</small> + <small class="fd-feed-list__footer--byline">Reply</small> + </div> + </div> + </li> +</ul> +`; + +Borderless.storyName = 'Borderless group'; +Borderless.parameters = { + docs: { + storyDescription: 'When feed list items are displayed in a group, they are usually separated by borders. However, to remove the borders, add the `fd-feed-list--no-border` modifier class to the main element.' + } +}; + +export const Mobile = () => `<div style="width: 350px; height: 600px; position: relative"> + <ul class="fd-feed-list fd-feed-list--s" aria-label="Feed List Item small size example"> + <li class="fd-feed-list__body"> + <div class="fd-feed-list__wrapper"> + <div class="fd-feed-list__wrapper fd-feed-list__wrapper--header"> + <div + class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb" + style="background-image: url(https://avatars.dicebear.com/api/human/fe.svg?m=6&b=%23f5f0f0&mood[]=surprised)" + role="img" + aria-label="John Doe" + title="John Doe"> + </div> + <div> + <span class="fd-feed-list__name">Joe Doe: </span> + <div class="fd-feed-list__footer"> + <small class="fd-feed-list__footer--byline">Aug 20, 2020</small> + <small class="fd-feed-list__footer--byline">Reply</small> + </div> + </div> + + </div> + <div class="fd-feed-list__action"> + <button class="fd-button fd-button--transparent" + aria-label="More Options" aria-controls="actionSheetPhone" aria-expanded="false" + aria-haspopup="true" onclick="toggleClass('actionSheetPhone', 'fd-action-sheet__wrapper--active');"> + <i class="sap-icon--overflow"></i> + </button> + </div> + </div> + + <div class="fd-feed-list__content"> + <p class="fd-feed-list__text"> + Suspendisse facilisis sed odio in mollis. Donec quis justo aliquam, porta justo a, accumsan lorem. + </p> + </div> + <div class="fd-action-sheet__wrapper" id="actionSheetPhone"> + <h6 class="fd-action-sheet__title">Press cancel to hide action sheet</h6> + <ul class="fd-action-sheet fd-action-sheet--mobile" role="list" aria-label="List of contextual options"> + <li class="fd-action-sheet__item" role="listitem"> + <button class="fd-button fd-button--full-width fd-button--transparent fd-button--text-alignment-left"> + <i class="sap-icon--attachment"></i> + <span class="fd-button__text">Button 1</span> + </button> + </li> + <li class="fd-action-sheet__item" role="listitem"> + <button class="fd-button fd-button--full-width fd-button--transparent fd-button--text-alignment-left"> + <i class="sap-icon--add"></i> + <span class="fd-button__text">Button 2</span> + </button> + </li> + <li class="fd-action-sheet__item" role="listitem"> + <button class="fd-button fd-button--full-width fd-button--transparent fd-button--text-alignment-left"> + <i class="sap-icon--print"></i> + <span class="fd-button__text">Button 3</span> + </button> + </li> + <li class="fd-action-sheet__item" role="listitem"> + <button class="fd-button fd-button--full-width fd-button--negative" + onclick="toggleClass('actionSheetPhone', 'fd-action-sheet__wrapper--active');"> + <span class="fd-button__text">Cancel</span> + </button> + </li> + </ul> + </div> + </li> + </ul> +</div> +`; + +Mobile.parameters = { + docs: { + storyDescription: 'The feed list item can be mobile responsive by adding the `fd-feed-list--s` modifier class to the main element.' + } +}; diff --git a/stories/file-uploader/file-uploader.stories.js b/stories/file-uploader/file-uploader.stories.js index 1da458eb6e..e9ab58ae6e 100644 --- a/stories/file-uploader/file-uploader.stories.js +++ b/stories/file-uploader/file-uploader.stories.js @@ -16,7 +16,7 @@ Use the File Uploader if: } }; -export const primary = () => `<div class="fd-form-item"> +export const Primary = () => `<div class="fd-form-item"> <label class="fd-form-label" id="browse_input1_label" >Upload Document</label> <div class="fd-file-uploader"> <input @@ -29,7 +29,7 @@ export const primary = () => `<div class="fd-form-item"> autocomplete="off" placeholder="Choose a file for upload" > - + <button class="fd-button" onclick="browseFile('input1');" @@ -49,30 +49,30 @@ export const primary = () => `<div class="fd-form-item"> </div> `; -primary.storyName = 'Default'; -primary.parameters = { +Primary.storyName = 'Default'; +Primary.parameters = { docs: { iframeHeight: 250 } }; -export const selected = () => `<div class="fd-form-item"> +export const Selected = () => `<div class="fd-form-item"> <label class="fd-form-label" id="browse_input2_label" >Upload Document</label> <div class="fd-file-uploader"> <input aria-labelledby="browse_input2_label" - class="fd-input fd-file-uploader__input" - onclick="browseFile('input1');" - title="document.pdf" - type="text" - id="browse_input2" + class="fd-input fd-file-uploader__input" + onclick="browseFile('input1');" + title="document.pdf" + type="text" + id="browse_input2" autocomplete="off" value="document.pdf" > - <button + <button class="fd-button" - onclick="browseFile('input1');" - id="file-uploader-button-1" + onclick="browseFile('input1');" + id="file-uploader-button-1" aria-label="Select a file for uploading">Browse... </button> </div> @@ -87,8 +87,8 @@ export const selected = () => `<div class="fd-form-item"> </div> `; -selected.storyName = 'After Selecting'; -selected.parameters = { +Selected.storyName = 'After Selecting'; +Selected.parameters = { docs: { iframeHeight: 250, storyDescription: 'Once the user selects files, update the input and the hidden div to include the file names. The hidden div will announce the file names only once when the value changes.' @@ -96,23 +96,23 @@ selected.parameters = { }; -export const compact = () => `<div class="fd-form-item"> +export const Compact = () => `<div class="fd-form-item"> <label class="fd-form-label" id="browse_input3_label" >Upload Document (Compact)</label> <div class="fd-file-uploader"> <input aria-labelledby="browse_input3_label" - class="fd-input fd-input--compact fd-file-uploader__input" - onclick="browseFile('input2');" - id="browse_input3" + class="fd-input fd-input--compact fd-file-uploader__input" + onclick="browseFile('input2');" + id="browse_input3" type="text" - title="Choose a file for upload" + title="Choose a file for upload" placeholder="Choose a file for upload" autocomplete="off" > <button - class="fd-button fd-button--compact fd-file-uploader__button" + class="fd-button fd-button--compact fd-file-uploader__button" onclick="browseFile('input2');" - id="file-uploader-button-3" + id="file-uploader-button-3" aria-label="Select a file for uploading">Browse... </button> </div> @@ -126,7 +126,7 @@ export const compact = () => `<div class="fd-form-item"> onchange="selectFile(this,'browse_input3')"> </div> `; -compact.parameters = { +Compact.parameters = { docs: { iframeHeight: 250, storyDescription: 'For compact File Uploader apply the `--compact` modifier to the button and input elements.' @@ -135,24 +135,24 @@ compact.parameters = { -export const status = () => `<div class="fd-form-item"> +export const Status = () => `<div class="fd-form-item"> <label class="fd-form-label" id="browse_input7_label" >Upload Document (Success)</label> <div class="fd-file-uploader"> <input aria-labelledby="browse_input7_label" - class="fd-input fd-input--compact fd-file-uploader__input is-success" - onclick="browseFile('input2');" - id="browse_input7" + class="fd-input fd-input--compact fd-file-uploader__input is-success" + onclick="browseFile('input2');" + id="browse_input7" type="text" - title="Choose a file for upload" + title="Choose a file for upload" placeholder="Choose a file for upload" autocomplete="off" > <button - class="fd-button fd-button--compact fd-file-uploader__button" + class="fd-button fd-button--compact fd-file-uploader__button" onclick="browseFile('input2');" - id="file-uploader-button-7" + id="file-uploader-button-7" aria-label="Select a file for uploading">Browse... </button> </div> @@ -171,18 +171,18 @@ export const status = () => `<div class="fd-form-item"> <div class="fd-file-uploader"> <input aria-labelledby="browse_input4_label" - class="fd-input fd-input--compact fd-file-uploader__input is-error" - onclick="browseFile('input2');" - id="browse_input4" + class="fd-input fd-input--compact fd-file-uploader__input is-error" + onclick="browseFile('input2');" + id="browse_input4" type="text" - title="Choose a file for upload" + title="Choose a file for upload" placeholder="Choose a file for upload" autocomplete="off" > <button - class="fd-button fd-button--compact fd-file-uploader__button" + class="fd-button fd-button--compact fd-file-uploader__button" onclick="browseFile('input2');" - id="file-uploader-button-4" + id="file-uploader-button-4" aria-label="Select a file for uploading">Browse... </button> </div> @@ -200,18 +200,18 @@ export const status = () => `<div class="fd-form-item"> <div class="fd-file-uploader"> <input aria-labelledby="browse_input5_label" - class="fd-input fd-input--compact fd-file-uploader__input is-warning" - onclick="browseFile('input2');" - id="browse_input5" + class="fd-input fd-input--compact fd-file-uploader__input is-warning" + onclick="browseFile('input2');" + id="browse_input5" type="text" - title="Choose a file for upload" + title="Choose a file for upload" placeholder="Choose a file for upload" autocomplete="off" > <button - class="fd-button fd-button--compact fd-file-uploader__button" + class="fd-button fd-button--compact fd-file-uploader__button" onclick="browseFile('input2');" - id="file-uploader-button-5" + id="file-uploader-button-5" aria-label="Select a file for uploading">Browse... </button> </div> @@ -229,18 +229,18 @@ export const status = () => `<div class="fd-form-item"> <div class="fd-file-uploader"> <input aria-labelledby="browse_input6_label" - class="fd-input fd-input--compact fd-file-uploader__input is-information" - onclick="browseFile('input2');" - id="browse_input3" + class="fd-input fd-input--compact fd-file-uploader__input is-information" + onclick="browseFile('input2');" + id="browse_input3" type="text" - title="Choose a file for upload" + title="Choose a file for upload" placeholder="Choose a file for upload" autocomplete="off" > <button - class="fd-button fd-button--compact fd-file-uploader__button" + class="fd-button fd-button--compact fd-file-uploader__button" onclick="browseFile('input2');" - id="file-uploader-button-6" + id="file-uploader-button-6" aria-label="Select a file for uploading">Browse... </button> </div> @@ -256,7 +256,7 @@ export const status = () => `<div class="fd-form-item"> `; -status.parameters = { +Status.parameters = { docs: { iframeHeight: 250, storyDescription: 'For Status File Uploader apply the corresponding status class `is-success, is-error, is-warning, is-information ` modifier to the input element.' diff --git a/stories/fixed-card-layout/fixed-card-layout.stories.js b/stories/fixed-card-layout/fixed-card-layout.stories.js index a0687c776e..9b84ff7eae 100644 --- a/stories/fixed-card-layout/fixed-card-layout.stories.js +++ b/stories/fixed-card-layout/fixed-card-layout.stories.js @@ -18,7 +18,7 @@ export default { } }; -export const fixedCardLayout = () => +export const FixedCardLayout = () => `<div class="fd-fixed-card-layout__card-layout" [attr.dir]="dir"> <div class="fd-fixed-card-layout__card-layout-column"> <div class="fd-fixed-card-layout__card"> @@ -510,8 +510,8 @@ export const fixedCardLayout = () => </div> </div>`; -fixedCardLayout.storyName = 'Fixed card layout with 3 columns'; -fixedCardLayout.parameters = { +FixedCardLayout.storyName = 'Fixed card layout with 3 columns'; +FixedCardLayout.parameters = { docs: { iframeHeight: 900, storyDescription: 'Cards arrangement in a 3 column layout.' diff --git a/stories/flexible-column-layout/flexible-column-layout.stories.js b/stories/flexible-column-layout/flexible-column-layout.stories.js index 8943932639..7a96d9e46c 100755 --- a/stories/flexible-column-layout/flexible-column-layout.stories.js +++ b/stories/flexible-column-layout/flexible-column-layout.stories.js @@ -2,28 +2,28 @@ export default { title: 'Layouts/Flexible Column', parameters: { description: ` -The flexible column layout is a layout control that displays multiple floorplans on a single page. -This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. -The flexible column layout offers different layouts with up to three columns. +The flexible column layout is a layout control that displays multiple floorplans on a single page. +This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. +The flexible column layout offers different layouts with up to three columns. Users can expand the column they want to focus on, switch between different layouts, and view the rightmost column in full screen mode. ### Background Designs - \`fd-flexible-column-layout\`: solid (default) -- \`fd-flexible-column-layout--translucent\`: translucent -- \`fd-flexible-column-layout--transparent\`: transparent +- \`fd-flexible-column-layout--translucent\`: translucent +- \`fd-flexible-column-layout--transparent\`: transparent `, tags: ['f3', 'theme', 'development'], components: ['button', 'flexible-column-layout', 'icon'] } }; -export const threeColumnsLayout = () => ` +export const ThreeColumnsLayout = () => ` <div class="fd-flexible-column-layout"> <div class="fd-flexible-column-layout__column" style="width: 25%"> <div class="docs-layout-grid-bg docs-layout-grid-bg--tall docs-layout-grid-bg--color-7"></div> </div> <div class="fd-flexible-column-layout__separator"> - <button class="fd-button fd-button--compact fd-button--transparent fd-flexible-column-layout__button" + <button class="fd-button fd-button--compact fd-button--transparent fd-flexible-column-layout__button" aria-label="Expand"> <i class="sap-icon--slim-arrow-right" role="presentation"></i> </button> @@ -35,14 +35,13 @@ export const threeColumnsLayout = () => ` <button class="fd-button fd-button--compact fd-button--transparent fd-flexible-column-layout__button" aria-label="Expand"> <i class="sap-icon--slim-arrow-left" role="presentation"></i> - </button> + </button> </div> <div class="fd-flexible-column-layout__column" style="width: 25%"> <div class="docs-layout-grid-bg docs-layout-grid-bg--tall docs-layout-grid-bg--color-9"></div> </div> </div>`; -threeColumnsLayout.storyName = 'Three Columns Layout'; -threeColumnsLayout.parameters = { +ThreeColumnsLayout.parameters = { docs: { storyDescription: ` - Minimum width of the device: \`1281px\` @@ -52,14 +51,14 @@ threeColumnsLayout.parameters = { } }; -export const twoColumnsLayout = () => ` +export const TwoColumnsLayout = () => ` <div style="max-width: 1200px"> <div class="fd-flexible-column-layout"> <div class="fd-flexible-column-layout__column" style="width: 33%"> <div class="docs-layout-grid-bg docs-layout-grid-bg--tall docs-layout-grid-bg--color-9"></div> </div> <div class="fd-flexible-column-layout__separator"> - <button class="fd-button fd-button--compact fd-button--transparent fd-flexible-column-layout__button" + <button class="fd-button fd-button--compact fd-button--transparent fd-flexible-column-layout__button" aria-label="Expand"> <i class="sap-icon--slim-arrow-right" role="presentation"></i> </button> @@ -68,7 +67,7 @@ export const twoColumnsLayout = () => ` <div class="docs-layout-grid-bg docs-layout-grid-bg--tall docs-layout-grid-bg--color-8"></div> </div> <div class="fd-flexible-column-layout__separator"> - <button class="fd-button fd-button--compact fd-button--transparent fd-flexible-column-layout__button" + <button class="fd-button fd-button--compact fd-button--transparent fd-flexible-column-layout__button" aria-label="Expand"> <i class="sap-icon--slim-arrow-left" role="presentation"></i> </button> @@ -78,8 +77,7 @@ export const twoColumnsLayout = () => ` </div> </div> </div>`; -twoColumnsLayout.storyName = 'Two Columns Layout'; -twoColumnsLayout.parameters = { +TwoColumnsLayout.parameters = { docs: { storyDescription: ` - Width of the device: Max: \`1280px\`, Min: 961px @@ -89,14 +87,14 @@ twoColumnsLayout.parameters = { } }; -export const oneColumnsLayout = () => ` +export const OneColumnsLayout = () => ` <div style="max-width: 600px"> <div class="fd-flexible-column-layout"> <div class="fd-flexible-column-layout__column fd-flexible-column-layout__column--hidden" style="width: 0"> <div class="docs-layout-grid-bg docs-layout-grid-bg--tall docs-layout-grid-bg--color-9"></div> </div> <div class="fd-flexible-column-layout__separator"> - <button class="fd-button fd-button--compact fd-button--transparent fd-flexible-column-layout__button" + <button class="fd-button fd-button--compact fd-button--transparent fd-flexible-column-layout__button" aria-label="Expand"> <i class="sap-icon--slim-arrow-right" role="presentation"></i> </button> @@ -105,7 +103,7 @@ export const oneColumnsLayout = () => ` <div class="docs-layout-grid-bg docs-layout-grid-bg--tall docs-layout-grid-bg--color-8"></div> </div> <div class="fd-flexible-column-layout__separator"> - <button class="fd-button fd-button--compact fd-button--transparent fd-flexible-column-layout__button" + <button class="fd-button fd-button--compact fd-button--transparent fd-flexible-column-layout__button" aria-label="Expand"> <i class="sap-icon--slim-arrow-left" role="presentation"></i> </button> @@ -115,8 +113,7 @@ export const oneColumnsLayout = () => ` </div> </div> </div>`; -oneColumnsLayout.storyName = 'One Columns Layout'; -oneColumnsLayout.parameters = { +OneColumnsLayout.parameters = { docs: { storyDescription: ` - Max width of the device: \`960px\` diff --git a/stories/fn-avatar/fn-avatar.stories.js b/stories/fn-avatar/fn-avatar.stories.js index 4c87c8be36..f74f8b36c4 100644 --- a/stories/fn-avatar/fn-avatar.stories.js +++ b/stories/fn-avatar/fn-avatar.stories.js @@ -75,7 +75,7 @@ const localStyles = ` </style> `; -export const roundedInitialsDecorative = () => `${localStyles} +export const RoundedInitialsDecorative = () => `${localStyles} <div class="docs-fn-container"> <div><b>Indigo</b></div> <div class="fn-avatar fn-avatar--xl fn-avatar--indigo"> @@ -211,8 +211,8 @@ export const roundedInitialsDecorative = () => `${localStyles} `; -roundedInitialsDecorative.storyName = 'Rounded Decorative Avatar with Initials'; -roundedInitialsDecorative.parameters = { +RoundedInitialsDecorative.storyName = 'Rounded Decorative Avatar with Initials'; +RoundedInitialsDecorative.parameters = { docs: { iframeHeight: 500, storyDescription: 'Modifier classes are added to the base class only for the size and the color. Rounded Decorative Avatar is the default type for avatar.' @@ -220,7 +220,7 @@ roundedInitialsDecorative.parameters = { }; -export const circleInitialsDecorative = () => `${localStyles} +export const CircleInitialsDecorative = () => `${localStyles} <div class="docs-fn-container"> <div><b>Indigo</b></div> <div class="fn-avatar fn-avatar--circle fn-avatar--xl fn-avatar--indigo"> @@ -356,8 +356,8 @@ export const circleInitialsDecorative = () => `${localStyles} `; -circleInitialsDecorative.storyName = 'Circle Decorative Avatar with Initials'; -circleInitialsDecorative.parameters = { +CircleInitialsDecorative.storyName = 'Circle Decorative Avatar with Initials'; +CircleInitialsDecorative.parameters = { docs: { iframeHeight: 500, storyDescription: 'For Circle Decorative Avatar add the `.fn-avatar--circle` modifier classes to the base class and the modifier classes for size and color.' @@ -365,14 +365,14 @@ circleInitialsDecorative.parameters = { }; -export const roundedIconDecorative = () => `${localStyles} +export const RoundedIconDecorative = () => `${localStyles} <div class="docs-fn-container"> <div><b></b></div> <div><b>XL</b></div> <div><b>L</b></div> <div><b>M</b></div> <div><b>S</b></div> - <div><b>XS</b></div> + <div><b>XS</b></div> </div> <div class="docs-fn-container"> <div><b>Indigo</b></div> @@ -579,17 +579,17 @@ export const roundedIconDecorative = () => `${localStyles} `; -roundedIconDecorative.storyName = 'Rounded Decorative Avatar with Icon'; +RoundedIconDecorative.storyName = 'Rounded Decorative Avatar with Icon'; -export const circleIconDecorative = () => `${localStyles} +export const CircleIconDecorative = () => `${localStyles} <div class="docs-fn-container"> <div><b></b></div> <div><b>XL</b></div> <div><b>L</b></div> <div><b>M</b></div> <div><b>S</b></div> - <div><b>XS</b></div> + <div><b>XS</b></div> </div> <div class="docs-fn-container"> <div><b>Indigo</b></div> @@ -796,55 +796,55 @@ export const circleIconDecorative = () => `${localStyles} `; -circleIconDecorative.storyName = 'Circle Decorative Avatar with Icon'; +CircleIconDecorative.storyName = 'Circle Decorative Avatar with Icon'; -export const circleThumbnailDecorative = () => `${localStyles} +export const CircleThumbnailDecorative = () => `${localStyles} <div class="docs-fn-container"> <div><b>XL</b></div> <div><b>L</b></div> <div><b>M</b></div> <div><b>S</b></div> - <div><b>XS</b></div> + <div><b>XS</b></div> </div> <div class="docs-fn-container"> <div class="fn-avatar fn-avatar--circle fn-avatar--thumbnail fn-avatar--xl"> <div class="fn-avatar__thumbnail" role="img" aria-label="John Doe" style="background-image: url('/assets/images/backgrounds/city.jpg')"></div> </div> - + <div class="fn-avatar fn-avatar--circle fn-avatar--thumbnail fn-avatar--l" style="background-image: url('/assets/images/backgrounds/city.jpg')"> <div class=" fn-avatar__thumbnail" role="img" aria-label="John Doe" style="background-image: url('/assets/images/backgrounds/city.jpg')"></div> </div> - + <div class="fn-avatar fn-avatar--circle fn-avatar--thumbnail fn-avatar--m" style="background-image: url('/assets/images/backgrounds/city.jpg')"> <div class="fn-avatar__thumbnail" role="img" aria-label="John Doe" style="background-image: url('/assets/images/backgrounds/city.jpg')"></div> </div> - + <div class="fn-avatar fn-avatar--circle fn-avatar--thumbnail fn-avatar--s" style="background-image: url('/assets/images/backgrounds/city.jpg')"> <div class=" fn-avatar__thumbnail" role="img" aria-label="John Doe" style="background-image: url('/assets/images/backgrounds/city.jpg')"></div> </div> - + <div class="fn-avatar fn-avatar--circle fn-avatar--thumbnail fn-avatar--xs" style="background-image: url('/assets/images/backgrounds/city.jpg')"> <div class=" fn-avatar__thumbnail" role="img" aria-label="John Doe" style="background-image: url('/assets/images/backgrounds/city.jpg')"></div> </div> </div> `; -circleThumbnailDecorative.storyName = 'Circle Decorative Avatar with Thumbnail'; -circleThumbnailDecorative.parameters = { +CircleThumbnailDecorative.storyName = 'Circle Decorative Avatar with Thumbnail'; +CircleThumbnailDecorative.parameters = { docs: { iframeHeight: 500, storyDescription: 'An additional modifier class `.fn-avatar--thumbnail` is needed if you want to achieve an avatar with thumbnail.' } }; -export const roundedInitialsInteractive = () => `${localStyles} +export const RoundedInitialsInteractive = () => `${localStyles} <div class="docs-fn-container"> <div></div> <div><b>:normal</b></div> <div><b>:hover</b></div> <div><b>:active</b></div> <div><b>:focus</b></div> - <div><b>:disabled</b></div> + <div><b>:disabled</b></div> </div> <div class="docs-fn-container"> <div><b>Indigo</b></div> @@ -981,22 +981,22 @@ export const roundedInitialsInteractive = () => `${localStyles} `; -roundedInitialsInteractive.storyName = 'Rounded Interactive Avatar with Initials'; -roundedInitialsInteractive.parameters = { +RoundedInitialsInteractive.storyName = 'Rounded Interactive Avatar with Initials'; +RoundedInitialsInteractive.parameters = { docs: { iframeHeight: 500, storyDescription: 'Interactive Avatars have hover, active, focus and disabled states. You can turn a decorative avatar to interactive by adding the `fn-avatar--interactive` modifier class to the other classes.' } }; -export const circleInitialsInteractive = () => `${localStyles} +export const CircleInitialsInteractive = () => `${localStyles} <div class="docs-fn-container"> <div></div> <div><b>:normal</b></div> <div><b>:hover</b></div> <div><b>:active</b></div> <div><b>:focus</b></div> - <div><b>:disabled</b></div> + <div><b>:disabled</b></div> </div> <div class="docs-fn-container"> <div><b>Indigo</b></div> @@ -1133,8 +1133,8 @@ export const circleInitialsInteractive = () => `${localStyles} `; -circleInitialsInteractive.storyName = 'Circle Interactive Avatar with Initials'; -circleInitialsInteractive.parameters = { +CircleInitialsInteractive.storyName = 'Circle Interactive Avatar with Initials'; +CircleInitialsInteractive.parameters = { docs: { iframeHeight: 500, storyDescription: '' @@ -1142,14 +1142,14 @@ circleInitialsInteractive.parameters = { }; -export const roundedIconInteractive = () => `${localStyles} +export const RoundedIconInteractive = () => `${localStyles} <div class="docs-fn-container"> <div><b></b></div> <div><b>XL</b></div> <div><b>L</b></div> <div><b>M</b></div> <div><b>S</b></div> - <div><b>XS</b></div> + <div><b>XS</b></div> </div> <div class="docs-fn-container"> <div><b>Indigo</b></div> @@ -1356,22 +1356,22 @@ export const roundedIconInteractive = () => `${localStyles} `; -roundedIconInteractive.storyName = 'Rounded Interactive Avatar with Icon'; -roundedIconInteractive.parameters = { +RoundedIconInteractive.storyName = 'Rounded Interactive Avatar with Icon'; +RoundedIconInteractive.parameters = { docs: { iframeHeight: 500, storyDescription: '' } }; -export const circleIconInteractive = () => `${localStyles} +export const CircleIconInteractive = () => `${localStyles} <div class="docs-fn-container"> <div><b></b></div> <div><b>XL</b></div> <div><b>L</b></div> <div><b>M</b></div> <div><b>S</b></div> - <div><b>XS</b></div> + <div><b>XS</b></div> </div> <div class="docs-fn-container"> <div><b>Indigo</b></div> @@ -1578,43 +1578,43 @@ export const circleIconInteractive = () => `${localStyles} `; -circleIconInteractive.storyName = 'Circle Interactive Avatar with Icon'; -circleIconInteractive.parameters = { +CircleIconInteractive.storyName = 'Circle Interactive Avatar with Icon'; +CircleIconInteractive.parameters = { docs: { iframeHeight: 500, storyDescription: '' } }; -export const circleThumbnailInteractive = () => `${localStyles} +export const CircleThumbnailInteractive = () => `${localStyles} <div class="docs-fn-container"> <div><b>:normal XL</b></div> <div><b>:hover L</b></div> <div><b>:active M</b></div> <div><b>:focus S</b></div> - <div><b>:disabled XS</b></div> + <div><b>:disabled XS</b></div> </div> <div class="docs-fn-container"> <div class="fn-avatar fn-avatar--circle fn-avatar--thumbnail fn-avatar--interactive fn-avatar--xl" tabindex="0"> <div class="fn-avatar__thumbnail" role="img" aria-label="John Doe" style="background-image: url('/assets/images/backgrounds/city.jpg')"></div> </div> - + <div class="fn-avatar fn-avatar--circle fn-avatar--thumbnail fn-avatar--interactive fn-avatar--l is-hover" tabindex="0""> <div class=" fn-avatar__thumbnail" role="img" aria-label="John Doe" style="background-image: url('/assets/images/backgrounds/city.jpg')"></div> </div> - + <div class="fn-avatar fn-avatar--circle fn-avatar--thumbnail fn-avatar--interactive fn-avatar--m is-active" tabindex="0"> <div class="fn-avatar__thumbnail" role="img" aria-label="John Doe" style="background-image: url('/assets/images/backgrounds/city.jpg')"></div> </div> - + <div class="fn-avatar fn-avatar--circle fn-avatar--thumbnail fn-avatar--interactive fn-avatar--s is-focus" tabindex="0"> <div class=" fn-avatar__thumbnail" role="img" aria-label="John Doe" style="background-image: url('/assets/images/backgrounds/city.jpg')"></div> </div> - + <div class="fn-avatar fn-avatar--circle fn-avatar--thumbnail fn-avatar--interactive fn-avatar--xs is-disabled" tabindex="-1"> <div class=" fn-avatar__thumbnail" role="img" aria-label="John Doe" style="background-image: url('/assets/images/backgrounds/city.jpg')"></div> </div> </div> `; -circleThumbnailInteractive.storyName = 'Circle Interactive Avatar with Thumbnail'; +CircleThumbnailInteractive.storyName = 'Circle Interactive Avatar with Thumbnail'; diff --git a/stories/fn-button/fn-button.stories.js b/stories/fn-button/fn-button.stories.js index e73c0ea232..c35d9b9ef1 100644 --- a/stories/fn-button/fn-button.stories.js +++ b/stories/fn-button/fn-button.stories.js @@ -60,11 +60,11 @@ const localStyles = ` </style> `; -export const primary = () => `${localStyles} +export const Primary = () => `${localStyles} <div class="docs-fn-container"> <div></div> <div><b>Emphasized </b></div> - <div><b>Default</b></div> + <div><b>Default</b></div> </div> <div class="docs-fn-container"> @@ -118,20 +118,20 @@ export const primary = () => `${localStyles} </div> `; -primary.storyName = 'Primary Buttons'; -primary.parameters = { +Primary.storyName = 'Primary Buttons'; +Primary.parameters = { docs: { iframeHeight: 500, storyDescription: 'Primary buttons are two types: default and emphasized. For the default one no modifier class is needed, just add the `.fn-button` class to your html element. For emphasized button add `.fn-button--emphasized` modifier class to the `.fn-button` base class.' } }; -export const secondary = () => `${localStyles} +export const Secondary = () => `${localStyles} <div class="docs-fn-container"> <div></div> <div><b>Ghost</b></div> - <div><b>Transparent</b></div> - <div><b>Neutral</b></div> + <div><b>Transparent</b></div> + <div><b>Neutral</b></div> </div> <div class="docs-fn-container"> @@ -200,8 +200,8 @@ export const secondary = () => `${localStyles} </div> `; -secondary.storyName = 'Secondary Buttons'; -secondary.parameters = { +Secondary.storyName = 'Secondary Buttons'; +Secondary.parameters = { docs: { iframeHeight: 500, storyDescription: `Secondary buttons are three types: ghost, transparent and neutral. @@ -215,7 +215,7 @@ secondary.parameters = { } }; -export const semantic = () => `${localStyles} +export const Semantic = () => `${localStyles} <div class="docs-fn-container"> <div></div> <div><b>Accept</b></div> @@ -337,8 +337,8 @@ export const semantic = () => `${localStyles} </div> `; -semantic.storyName = 'Semantic Buttons'; -semantic.parameters = { +Semantic.storyName = 'Semantic Buttons'; +Semantic.parameters = { docs: { iframeHeight: 500, storyDescription: `For semantic button add the appropriate modifier class to the \`.fn-button\` base class. @@ -355,12 +355,12 @@ semantic.parameters = { } }; -export const icon = () => `${localStyles} +export const Icon = () => `${localStyles} <div class="docs-fn-container"> <div></div> <div><b>Icon-Left</b></div> <div><b>Icon-Right</b></div> - <div><b>Icon-Only</b></div> + <div><b>Icon-Only</b></div> </div> <div class="docs-fn-container"> @@ -439,8 +439,8 @@ export const icon = () => `${localStyles} </div> `; -icon.storyName = 'Icon Buttons'; -icon.parameters = { +Icon.storyName = 'Icon Buttons'; +Icon.parameters = { docs: { iframeHeight: 500, storyDescription: `Depending on where you want the icon to be rendered add the appropriate modifier class to the \`.fn-button\` base class. @@ -454,11 +454,11 @@ icon.parameters = { } }; -export const toggle = () => `${localStyles} +export const Toggle = () => `${localStyles} <div class="docs-fn-container"> <div></div> <div><b>Selected </b></div> - <div><b>Default</b></div> + <div><b>Default</b></div> </div> <div class="docs-fn-container"> @@ -512,15 +512,15 @@ export const toggle = () => `${localStyles} </div> `; -toggle.storyName = 'Toggle Buttons'; -toggle.parameters = { +Toggle.storyName = 'Toggle Buttons'; +Toggle.parameters = { docs: { iframeHeight: 500, storyDescription: 'Add the `.fn-button--selected` class to the button when it is in toggled (selected) state.' } }; -export const segmented = () => `${localStyles} +export const Segmented = () => `${localStyles} <div class="docs-fn-container"> <div class="fn-segmented-button" role="group" aria-label="Group label"> <button class="fn-button fn-button--selected"> @@ -632,18 +632,18 @@ export const segmented = () => `${localStyles} </div> `; -segmented.storyName = 'Segmented Button'; -segmented.parameters = { +Segmented.storyName = 'Segmented Button'; +Segmented.parameters = { docs: { iframeHeight: 500, storyDescription: '' } }; -export const nested = () => `${localStyles} +export const Nested = () => `${localStyles} <div class="docs-fn-container"> <div></div> - <div><b>Nested Button</b></div> + <div><b>Nested Button</b></div> </div> <div class="docs-fn-container"> @@ -682,8 +682,8 @@ export const nested = () => `${localStyles} </div> `; -nested.storyName = 'Nested Buttons'; -nested.parameters = { +Nested.storyName = 'Nested Buttons'; +Nested.parameters = { docs: { iframeHeight: 500, storyDescription: '' diff --git a/stories/fn-dialog/fn-dialog.stories.js b/stories/fn-dialog/fn-dialog.stories.js index 95b662e70e..b5853c8dfd 100644 --- a/stories/fn-dialog/fn-dialog.stories.js +++ b/stories/fn-dialog/fn-dialog.stories.js @@ -23,11 +23,11 @@ const localStyles = ` width: 30%; height: auto; } - + </style> `; -export const primary = () => `${localStyles} +export const Primary = () => `${localStyles} <div style="height:300px"> <section class="fn-dialog-doc-static fn-dialog fn-dialog--active"> <div class="fn-dialog__content" role="dialog" aria-modal="true" aria-labelledby="dialog-title-11"> @@ -52,9 +52,9 @@ export const primary = () => `${localStyles} </div> `; -primary.storyName = 'Dialog'; +Primary.storyName = 'Dialog'; -primary.parameters = { +Primary.parameters = { docs: { storyDescription: 'Dialog example with title, text and buttons in the footer' } diff --git a/stories/fn-generic-tag/fn-generic-tag.stories.js b/stories/fn-generic-tag/fn-generic-tag.stories.js index 196cbc7e49..7763345ced 100644 --- a/stories/fn-generic-tag/fn-generic-tag.stories.js +++ b/stories/fn-generic-tag/fn-generic-tag.stories.js @@ -29,7 +29,7 @@ const localStyles = ` </style> `; -export const genericTag = () => `${localStyles} +export const GenericTag = () => `${localStyles} <div class="docs-fn-container"> <div><b>normal</b></div> <div class="fn-generic-tag" tabindex="0"> @@ -63,14 +63,13 @@ export const genericTag = () => `${localStyles} </div> `; -genericTag.storyName = 'Generic Tag'; -genericTag.parameters = { +GenericTag.parameters = { docs: { iframeHeight: 500 } }; -export const genericTagPositive = () => `${localStyles} +export const GenericTagPositive = () => `${localStyles} <div class="docs-fn-container"> <div><b>normal</b></div> <div class="fn-generic-tag fn-generic-tag--positive" tabindex="0"> @@ -119,8 +118,7 @@ export const genericTagPositive = () => `${localStyles} </div> `; -genericTagPositive.storyName = 'Generic Tag Positive'; -genericTagPositive.parameters = { +GenericTagPositive.parameters = { docs: { iframeHeight: 500, storyDescription: `Add the \`.fn-generic-tag--positive\` modifier class to the \`.fn-generic-tag\` base class for positive generic tag. @@ -128,7 +126,7 @@ genericTagPositive.parameters = { } }; -export const genericTagCritical = () => `${localStyles} +export const GenericTagCritical = () => `${localStyles} <div class="docs-fn-container"> <div><b>normal</b></div> <div class="fn-generic-tag fn-generic-tag--critical" tabindex="0"> @@ -177,15 +175,14 @@ export const genericTagCritical = () => `${localStyles} </div> `; -genericTagCritical.storyName = 'Generic Tag Critical'; -genericTagCritical.parameters = { +GenericTagCritical.parameters = { docs: { iframeHeight: 500, storyDescription: 'Add the `.fn-generic-tag--critical` modifier class to the `.fn-generic-tag` base class for critical generic tag.' } }; -export const genericTagNegative = () => `${localStyles} +export const GenericTagNegative = () => `${localStyles} <div class="docs-fn-container"> <div><b>normal</b></div> <div class="fn-generic-tag fn-generic-tag--negative" tabindex="0"> @@ -234,15 +231,14 @@ export const genericTagNegative = () => `${localStyles} </div> `; -genericTagNegative.storyName = 'Generic Tag Negative'; -genericTagNegative.parameters = { +GenericTagNegative.parameters = { docs: { iframeHeight: 500, storyDescription: 'Add the `.fn-generic-tag--negative` modifier class to the `.fn-generic-tag` base class for negative generic tag.' } }; -export const genericTagInfo = () => `${localStyles} +export const GenericTagInfo = () => `${localStyles} <div class="docs-fn-container"> <div><b>normal</b></div> <div class="fn-generic-tag fn-generic-tag--info" tabindex="0"> @@ -291,8 +287,7 @@ export const genericTagInfo = () => `${localStyles} </div> `; -genericTagInfo.storyName = 'Generic Tag Info'; -genericTagInfo.parameters = { +GenericTagInfo.parameters = { docs: { iframeHeight: 500, storyDescription: 'Add the `.fn-generic-tag--info` modifier class to the `.fn-generic-tag` base class for info generic tag.' diff --git a/stories/fn-input/fn-input.stories.js b/stories/fn-input/fn-input.stories.js index 108f4f0397..5d4f67b2c2 100644 --- a/stories/fn-input/fn-input.stories.js +++ b/stories/fn-input/fn-input.stories.js @@ -42,7 +42,7 @@ const localStyles = ` </style> `; -export const defaultInput = () => `${localStyles} +export const DefaultInput = () => `${localStyles} <div class="docs-fn-container"> <div><b>normal</b></div> <div class="fn-input"> @@ -100,14 +100,13 @@ export const defaultInput = () => `${localStyles} </div> `; -defaultInput.storyName = 'Default Input'; -defaultInput.parameters = { +DefaultInput.parameters = { docs: { iframeHeight: 500 } }; -export const infoInput = () => `${localStyles} +export const InfoInput = () => `${localStyles} <div class="docs-fn-container"> <div><b>normal</b></div> <div class="fn-input fn-input--info"> @@ -172,15 +171,14 @@ export const infoInput = () => `${localStyles} </div> `; -infoInput.storyName = 'Info Input'; -infoInput.parameters = { +InfoInput.parameters = { docs: { iframeHeight: 500, storyDescription: 'Add the `.fn-input--info` modifier class to `.fn-input` for Info Input.' } }; -export const criticalInput = () => `${localStyles} +export const CriticalInput = () => `${localStyles} <div class="docs-fn-container"> <div><b>normal</b></div> <div class="fn-input fn-input--critical"> @@ -245,15 +243,14 @@ export const criticalInput = () => `${localStyles} </div> `; -criticalInput.storyName = 'Critical Input'; -criticalInput.parameters = { +CriticalInput.parameters = { docs: { iframeHeight: 500, storyDescription: 'Add the `.fn-input--critical` modifier class to `.fn-input` for Critical Input.' } }; -export const negativeInput = () => `${localStyles} +export const NegativeInput = () => `${localStyles} <div class="docs-fn-container"> <div><b>normal</b></div> <div class="fn-input fn-input--negative"> @@ -318,8 +315,7 @@ export const negativeInput = () => `${localStyles} </div> `; -negativeInput.storyName = 'Negative Input'; -negativeInput.parameters = { +NegativeInput.parameters = { docs: { iframeHeight: 500, storyDescription: 'Add the `.fn-input--negative` modifier class to `.fn-input` for Negative Input.' @@ -327,7 +323,7 @@ negativeInput.parameters = { }; -export const positiveInput = () => `${localStyles} +export const PositiveInput = () => `${localStyles} <div class="docs-fn-container"> <div><b>normal</b></div> <div class="fn-input fn-input--positive"> @@ -392,8 +388,7 @@ export const positiveInput = () => `${localStyles} </div> `; -positiveInput.storyName = 'Positive Input'; -positiveInput.parameters = { +PositiveInput.parameters = { docs: { iframeHeight: 500, storyDescription: 'Add the `.fn-input--positive` modifier class to `.fn-input` for Positive Input.' diff --git a/stories/fn-link/fn-link.stories.js b/stories/fn-link/fn-link.stories.js index 5b605fb8c8..c8c4197ecd 100644 --- a/stories/fn-link/fn-link.stories.js +++ b/stories/fn-link/fn-link.stories.js @@ -40,11 +40,11 @@ const localStyles = ` </style> `; -export const primary = () => `${localStyles} +export const Primary = () => `${localStyles} <div class="docs-fn-container"> <div></div> <div><b>Emphasized </b></div> - <div><b>Default</b></div> + <div><b>Default</b></div> </div> <div class="docs-fn-container"> @@ -79,9 +79,9 @@ export const primary = () => `${localStyles} `; -primary.storyName = 'Links'; +Primary.storyName = 'Links'; -primary.parameters = { +Primary.parameters = { docs: { storyDescription: 'Link states' } diff --git a/stories/fn-message-box/fn-message-box.stories.js b/stories/fn-message-box/fn-message-box.stories.js index af10628a3f..1208d83e1c 100644 --- a/stories/fn-message-box/fn-message-box.stories.js +++ b/stories/fn-message-box/fn-message-box.stories.js @@ -46,7 +46,7 @@ const localStyles = ` </style> `; -export const primary = () => `${localStyles} +export const Primary = () => `${localStyles} <div class="fn-message-box-docs-static fn-message-box fn-message-box--active" style="height:300px"> <section class="fn-message-box__content"> <header class="fn-message-box__header"> @@ -72,15 +72,15 @@ export const primary = () => `${localStyles} </div> `; -primary.storyName = 'Message Box'; +Primary.storyName = 'Message Box'; -primary.parameters = { +Primary.parameters = { docs: { storyDescription: 'Message Box Example' } }; -export const confirmation = () => `${localStyles} +export const Confirmation = () => `${localStyles} <div class="fn-message-box-docs-static fn-message-box fn-message-box--confirmation fn-message-box--active" style="height:300px"> <section class="fn-message-box__content"> <header class="fn-message-box__header"> @@ -107,15 +107,15 @@ export const confirmation = () => `${localStyles} </div> `; -confirmation.storyName = 'Confirmation Message Box'; +Confirmation.storyName = 'Confirmation Message Box'; -confirmation.parameters = { +Confirmation.parameters = { docs: { storyDescription: 'Confirmation Message Box Example' } }; -export const negative = () => `${localStyles} +export const Negative = () => `${localStyles} <div class="fn-message-box-docs-static fn-message-box fn-message-box--negative fn-message-box--active" style="height:300px"> <section class="fn-message-box__content"> <header class="fn-message-box__header"> @@ -135,15 +135,15 @@ export const negative = () => `${localStyles} </div> `; -negative.storyName = 'Negative Message Box'; +Negative.storyName = 'Negative Message Box'; -negative.parameters = { +Negative.parameters = { docs: { storyDescription: 'Negative Message Box Example' } }; -export const critical = () => `${localStyles} +export const Critical = () => `${localStyles} <div class="fn-message-box-docs-static fn-message-box fn-message-box--critical fn-message-box--active" style="height:300px"> <section class="fn-message-box__content"> <header class="fn-message-box__header"> @@ -163,15 +163,15 @@ export const critical = () => `${localStyles} </div> `; -critical.storyName = 'Critical Message Box'; +Critical.storyName = 'Critical Message Box'; -critical.parameters = { +Critical.parameters = { docs: { storyDescription: 'Critical Message Box Example' } }; -export const positive = () => `${localStyles} +export const Positive = () => `${localStyles} <div class="fn-message-box-docs-static fn-message-box fn-message-box--positive fn-message-box--active" style="height:300px"> <section class="fn-message-box__content"> <header class="fn-message-box__header"> @@ -191,15 +191,15 @@ export const positive = () => `${localStyles} </div> `; -positive.storyName = 'Positive Message Box'; +Positive.storyName = 'Positive Message Box'; -positive.parameters = { +Positive.parameters = { docs: { storyDescription: 'Positive Message Box Example' } }; -export const info = () => `${localStyles} +export const Info = () => `${localStyles} <div class="fn-message-box-docs-static fn-message-box fn-message-box--info fn-message-box--active" style="height:300px"> <section class="fn-message-box__content"> <header class="fn-message-box__header"> @@ -219,9 +219,9 @@ export const info = () => `${localStyles} </div> `; -info.storyName = 'Info Message Box'; +Info.storyName = 'Info Message Box'; -info.parameters = { +Info.parameters = { docs: { storyDescription: 'Info Message Box Example' } diff --git a/stories/fn-progress-bar/fn-progress-bar.stories.js b/stories/fn-progress-bar/fn-progress-bar.stories.js index 68c511e0c6..5f9dc59f15 100644 --- a/stories/fn-progress-bar/fn-progress-bar.stories.js +++ b/stories/fn-progress-bar/fn-progress-bar.stories.js @@ -30,7 +30,7 @@ const localStyles = ` </style> `; -export const progressBar = () => `${localStyles} +export const ProgressBar = () => `${localStyles} <div class="docs-fn-container"> <div><b>normal</b></div> <div class="fn-progress-bar" tabindex="-1" role="progressbar" aria-valuemin="0" aria-valuenow="0" aria-valuemax="100" aria-valuetext="20%" aria-label="20%"> @@ -61,8 +61,7 @@ export const progressBar = () => `${localStyles} `; -progressBar.storyName = 'Progress Bar'; -progressBar.parameters = { +ProgressBar.parameters = { docs: { iframeHeight: 500 } diff --git a/stories/fn-search/fn-search.stories.js b/stories/fn-search/fn-search.stories.js index 00bfc77344..9a921f43f6 100644 --- a/stories/fn-search/fn-search.stories.js +++ b/stories/fn-search/fn-search.stories.js @@ -21,7 +21,7 @@ const localStyles = ` </style> `; -export const search = () => `${localStyles} +export const Search = () => `${localStyles} <div class="docs-fn-container"> <div><b>normal</b></div> <div class="fn-search"> @@ -68,9 +68,7 @@ export const search = () => `${localStyles} </div> `; -search.storyName = 'Search'; - -search.parameters = { +Search.parameters = { docs: { iframeHeight: 500 } diff --git a/stories/fn-select/fn-select.stories.js b/stories/fn-select/fn-select.stories.js index 98ff40bf64..44939868cf 100644 --- a/stories/fn-select/fn-select.stories.js +++ b/stories/fn-select/fn-select.stories.js @@ -22,7 +22,7 @@ const localStyles = ` </style> `; -export const defaultInput = () => `${localStyles} +export const DefaultInput = () => `${localStyles} <div class="docs-fn-container"> <div><b>normal</b></div> <div class="fn-input fn-input--select" tabindex="0"> @@ -91,8 +91,8 @@ export const defaultInput = () => `${localStyles} </div> `; -defaultInput.storyName = 'Select'; -defaultInput.parameters = { +DefaultInput.storyName = 'Select'; +DefaultInput.parameters = { docs: { iframeHeight: 500 } diff --git a/stories/fn-slider/fn-slider.stories.js b/stories/fn-slider/fn-slider.stories.js index 829ac4db41..2338655938 100644 --- a/stories/fn-slider/fn-slider.stories.js +++ b/stories/fn-slider/fn-slider.stories.js @@ -28,7 +28,7 @@ const localStyles = ` </style> `; -export const slider = () => `${localStyles} +export const Slider = () => `${localStyles} <div class="docs-fn-container"> <div><b>normal</b></div> <div class="fn-slider"> @@ -95,14 +95,13 @@ export const slider = () => `${localStyles} </div> `; -slider.storyName = 'Slider'; -slider.parameters = { +Slider.parameters = { docs: { iframeHeight: 500 } }; -export const rangeSlider = () => `${localStyles} +export const RangeSlider = () => `${localStyles} <div class="docs-fn-container"> <div><b>normal</b></div> <div class="fn-slider fn-slider--range"> @@ -189,8 +188,7 @@ export const rangeSlider = () => `${localStyles} </div> `; -rangeSlider.storyName = 'Range Slider'; -rangeSlider.parameters = { +RangeSlider.parameters = { docs: { iframeHeight: 500 } diff --git a/stories/fn-tabs/fn-tabs.stories.js b/stories/fn-tabs/fn-tabs.stories.js index 2e72815db5..8004275945 100644 --- a/stories/fn-tabs/fn-tabs.stories.js +++ b/stories/fn-tabs/fn-tabs.stories.js @@ -20,7 +20,7 @@ export default { - \`fn-tabs__icon\`: container for an icon - \`fn-tabs__text\`: text content container - \`fn-tabs__button\`: modifier class for nested button used in cases where the item has children and in Multi-instance tabs - + <br><br><br> `, @@ -38,7 +38,7 @@ const localStyles = ` </style> `; -export const defaultTabs = () => `${localStyles} +export const DefaultTabs = () => `${localStyles} <div class="docs-fn-container"> <ul class="fn-tabs" role="tablist"> <li role="tab" tabindex="0" class="fn-tabs__item fn-tabs__item--selected"> @@ -65,13 +65,13 @@ export const defaultTabs = () => `${localStyles} <li role="tab" tabindex="0" class="fn-tabs__item"> <div class="fn-tabs__text">Tab Item</div> </li> - <li role="tab" tabindex="0" class="fn-tabs__item"> + <li role="tab" tabindex="0" class="fn-tabs__item"> <div class="fn-tabs__text">Tab Item (42)</div> </li> - <li role="tab" class="fn-tabs__item is-disabled"> + <li role="tab" class="fn-tabs__item is-disabled"> <div class="fn-tabs__text">Tab Item</div> </li> - <li role="tab" class="fn-tabs__right-container"> + <li role="tab" class="fn-tabs__right-container"> <button class="fn-button fn-button--transparent fn-button--icon-only" aria-label="More"> <span class="sap-icon sap-icon--overflow"></span> </button> @@ -80,15 +80,15 @@ export const defaultTabs = () => `${localStyles} </div> `; -defaultTabs.storyName = 'Default'; +DefaultTabs.storyName = 'Default'; -defaultTabs.parameters = { +DefaultTabs.parameters = { docs: { iframeHeight: 500 } }; -export const semantic = () => `${localStyles} +export const Semantic = () => `${localStyles} <div class="docs-fn-container"> <ul class="fn-tabs fn-tabs--positive" role="tablist"> <li role="tab" tabindex="0" class="fn-tabs__item fn-tabs__item--selected"> @@ -204,16 +204,16 @@ export const semantic = () => `${localStyles} </div> `; -semantic.storyName = 'Semantic Tabs'; +Semantic.storyName = 'Semantic Tabs'; -semantic.parameters = { +Semantic.parameters = { docs: { iframeHeight: 500, storyDescription: 'The `.fn-tabs--positive`, `.fn-tabs--critical` or `.fn-tabs--negative` modifier classes are added to the `.fn-tabs` base class to achieve positive, critical or negative tabs. ' } }; -export const multiInstance = () => `${localStyles} +export const MultiInstance = () => `${localStyles} <div class="docs-fn-container"> <ul class="fn-tabs fn-tabs--multi-instance" role="tablist"> <li role="tab" tabindex="0" class="fn-tabs__item fn-tabs__item--selected"> @@ -264,9 +264,9 @@ export const multiInstance = () => `${localStyles} </div> `; -multiInstance.storyName = 'Multi-Instance Tabs'; +MultiInstance.storyName = 'Multi-Instance Tabs'; -multiInstance.parameters = { +MultiInstance.parameters = { docs: { iframeHeight: 500, storyDescription: 'The `.fn-tabs--multi-instance` modifier class toachieve Multi Instance tabs. It can be combined with a semantic modifier class.' diff --git a/stories/fn-tag/fn-tag.stories.js b/stories/fn-tag/fn-tag.stories.js index eb53378759..de5fc79190 100644 --- a/stories/fn-tag/fn-tag.stories.js +++ b/stories/fn-tag/fn-tag.stories.js @@ -42,7 +42,7 @@ const localStyles = ` </style> `; -export const primary = () => `${localStyles} +export const Primary = () => `${localStyles} <div class="docs-fn-container"> <div><b>Rest</b></div> <div><b>Hover</b></div> @@ -116,9 +116,9 @@ export const primary = () => `${localStyles} </div> `; -primary.storyName = 'Types'; +Primary.storyName = 'Types'; -primary.parameters = { +Primary.parameters = { docs: { iframeHeight: 500 } diff --git a/stories/fn-title/title.stories.js b/stories/fn-title/title.stories.js index 31aa803094..b22f485eb8 100644 --- a/stories/fn-title/title.stories.js +++ b/stories/fn-title/title.stories.js @@ -7,7 +7,7 @@ A title component whose semantic level and visual appearance can be set separate } }; -export const levels = () => `<h1 class="fn-title fn-title--h1">Title Heading 1</h1> +export const Levels = () => `<h1 class="fn-title fn-title--h1">Title Heading 1</h1> <br> <h2 class="fn-title fn-title--h2">Title Heading 2</h2> <br> @@ -20,15 +20,15 @@ export const levels = () => `<h1 class="fn-title fn-title--h1">Title Heading 1</ <h6 class="fn-title fn-title--h6">Title Heading 6</h6> `; -levels.storyName = 'Semantic Level'; -levels.parameters = { +Levels.storyName = 'Semantic Level'; +Levels.parameters = { docs: { iframeHeight: 250, storyDescription: 'There are 6 semantic levels of a heading element. There should only be one H1 on a page, and headings should only appear in ascending order without skipping a level; i.e. even if there are only 3 levels on a page, the order must be H1-H2-H3, and no other levels used.' } }; -export const visualLevel = () => `<h1 class="fn-title fn-title--h6">Title Heading 1</h1> +export const VisualLevel = () => `<h1 class="fn-title fn-title--h6">Title Heading 1</h1> <br> <h2 class="fn-title fn-title--h5">Title Heading 2</h2> <br> @@ -41,8 +41,7 @@ export const visualLevel = () => `<h1 class="fn-title fn-title--h6">Title Headin <h6 class="fn-title fn-title--h1">Title Heading 6</h6> `; -visualLevel.storyName = 'Visual Level'; -visualLevel.parameters = { +VisualLevel.parameters = { docs: { iframeHeight: 250, storyDescription: 'If a design requires it, the visual level can be set to something different than the semantic level. This allows the sequential order to be maintained while providing flexibility in appearance.' @@ -50,7 +49,7 @@ visualLevel.parameters = { }; -export const wrapping = () => `<div style="width: 600px"> +export const Wrapping = () => `<div style="width: 600px"> <h1 class="fn-title fn-title--h1 fn-title--wrap">"Insanity: doing the same thing over and over again and expecting different results." - Albert Einstein</h1> <br><br><br> <h2 class="fn-title fn-title--h2 fn-title--wrap">"Insanity: doing the same thing over and over again and expecting different results." - Albert Einstein</h2> @@ -65,8 +64,8 @@ export const wrapping = () => `<div style="width: 600px"> </div> `; -wrapping.storyName = 'Text Wrapping'; -wrapping.parameters = { +Wrapping.storyName = 'Text Wrapping'; +Wrapping.parameters = { docs: { iframeHeight: 300, storyDescription: 'Add the `--wrap` modifier to cause the overflow text to wrap instead.' diff --git a/stories/fn-toggles/fn-toggles.stories.js b/stories/fn-toggles/fn-toggles.stories.js index 717ecb8e55..aa36fadb6c 100644 --- a/stories/fn-toggles/fn-toggles.stories.js +++ b/stories/fn-toggles/fn-toggles.stories.js @@ -39,7 +39,7 @@ const localStyles = ` </style> `; -export const checkbox = () => `${localStyles} +export const Checkbox = () => `${localStyles} <div class="docs-fn-container"> <div><b>:normal</b></div> <label class="fn-checkbox" tabindex="0"> @@ -191,45 +191,44 @@ export const checkbox = () => `${localStyles} </div> `; -checkbox.storyName = 'Checkbox'; -checkbox.parameters = { +Checkbox.parameters = { docs: { iframeHeight: 500 } }; -export const checkboxGroup = () => `${localStyles} +export const CheckboxGroup = () => `${localStyles} <div class="docs-fn-container-group"> <fieldset class="fn-fieldset"> <label class="fn-checkbox" tabindex="0"> - <input - class="fn-checkbox__input" - type="checkbox" - name="checkbox_group" - tabindex="-1" - aria-label="checkbox" + <input + class="fn-checkbox__input" + type="checkbox" + name="checkbox_group" + tabindex="-1" + aria-label="checkbox" checked="checked" > <span class="fn-checkbox__checkmark"></span> <span class="fn-checkbox__label">First</span> </label> <label class="fn-checkbox" tabindex="0"> - <input - class="fn-checkbox__input" - type="checkbox" - name="checkbox_group" - tabindex="-1" + <input + class="fn-checkbox__input" + type="checkbox" + name="checkbox_group" + tabindex="-1" aria-label="checkbox" > <span class="fn-checkbox__checkmark"></span> <span class="fn-checkbox__label">Second</span> </label> <label class="fn-checkbox" tabindex="0"> - <input - class="fn-checkbox__input" - type="checkbox" - name="checkbox_group" - tabindex="-1" + <input + class="fn-checkbox__input" + type="checkbox" + name="checkbox_group" + tabindex="-1" aria-label="checkbox" > <span class="fn-checkbox__checkmark"></span> @@ -241,34 +240,34 @@ export const checkboxGroup = () => `${localStyles} <div class="docs-fn-container-group"> <fieldset class="fn-fieldset fn-fieldset--full-width" style="width: 120px;"> <label class="fn-checkbox" tabindex="0"> - <input - class="fn-checkbox__input" - type="checkbox" - name="checkbox_group_width" - tabindex="-1" - aria-label="checkbox" + <input + class="fn-checkbox__input" + type="checkbox" + name="checkbox_group_width" + tabindex="-1" + aria-label="checkbox" checked="checked" > <span class="fn-checkbox__checkmark"></span> <span class="fn-checkbox__label">First</span> </label> <label class="fn-checkbox" tabindex="0"> - <input - class="fn-checkbox__input" - type="checkbox" - name="checkbox_group_width" - tabindex="-1" + <input + class="fn-checkbox__input" + type="checkbox" + name="checkbox_group_width" + tabindex="-1" aria-label="checkbox" > <span class="fn-checkbox__checkmark"></span> <span class="fn-checkbox__label">Second</span> </label> <label class="fn-checkbox" tabindex="0"> - <input - class="fn-checkbox__input" - type="checkbox" - name="checkbox_group_width" - tabindex="-1" + <input + class="fn-checkbox__input" + type="checkbox" + name="checkbox_group_width" + tabindex="-1" aria-label="checkbox" > <span class="fn-checkbox__checkmark"></span> @@ -280,34 +279,34 @@ export const checkboxGroup = () => `${localStyles} <div class="docs-fn-container-group"> <fieldset class="fn-fieldset fn-fieldset--horizontal"> <label class="fn-checkbox" tabindex="0"> - <input - class="fn-checkbox__input" - type="checkbox" - name="checkbox_group_horizontal" - tabindex="-1" - aria-label="checkbox" + <input + class="fn-checkbox__input" + type="checkbox" + name="checkbox_group_horizontal" + tabindex="-1" + aria-label="checkbox" checked="checked" > <span class="fn-checkbox__checkmark"></span> <span class="fn-checkbox__label">Checkbox</span> </label> <label class="fn-checkbox" tabindex="0"> - <input - class="fn-checkbox__input" - type="checkbox" - name="checkbox_group_horizontal" - tabindex="-1" + <input + class="fn-checkbox__input" + type="checkbox" + name="checkbox_group_horizontal" + tabindex="-1" aria-label="checkbox" > <span class="fn-checkbox__checkmark"></span> <span class="fn-checkbox__label">Checkbox</span> </label> <label class="fn-checkbox" tabindex="0"> - <input - class="fn-checkbox__input" - type="checkbox" - name="checkbox_group_horizontal" - tabindex="-1" + <input + class="fn-checkbox__input" + type="checkbox" + name="checkbox_group_horizontal" + tabindex="-1" aria-label="checkbox" > <span class="fn-checkbox__checkmark"></span> @@ -317,15 +316,14 @@ export const checkboxGroup = () => `${localStyles} </div> `; -checkboxGroup.storyName = 'Checkbox Group'; -checkboxGroup.parameters = { +CheckboxGroup.parameters = { docs: { iframeHeight: 500, storyDescription: 'Use the `<fieldset>` HTML element with class `.fn-fieldset` to group checkbox controls. The controls are displayed vertically and have `fit-content` width. The `.fn-fieldset--full-width` modifier class will display the checkbox controls with the same width as the parent element. To display the controls horizontally apply the `.fn-fieldset--horizontal` modifier class.' } }; -export const radio = () => `${localStyles} +export const Radio = () => `${localStyles} <div class="docs-fn-container"> <div><b>:normal</b></div> <label class="fn-radio" tabindex="0"> @@ -478,14 +476,13 @@ export const radio = () => `${localStyles} `; -radio.storyName = 'Radio'; -radio.parameters = { +Radio.parameters = { docs: { iframeHeight: 500 } }; -export const radioGroup = () => `${localStyles} +export const RadioGroup = () => `${localStyles} <div class="docs-fn-container-group"> <fieldset class="fn-fieldset"> <label class="fn-radio" tabindex="0"> @@ -547,8 +544,7 @@ export const radioGroup = () => `${localStyles} </div> `; -radioGroup.storyName = 'Radio Group'; -radioGroup.parameters = { +RadioGroup.parameters = { docs: { iframeHeight: 500, storyDescription: 'Use the `<fieldset>` HTML element with class `.fn-fieldset` to group radio button controls. The controls are displayed vertically and have `fit-content` width. The `.fn-fieldset--full-width` modifier class will display the radio buttons with the same width as the parent element. To display the controls horizontally apply the `.fn-fieldset--horizontal` modifier class.' @@ -556,7 +552,7 @@ radioGroup.parameters = { }; -export const switchToggle = () => `${localStyles} +export const SwitchToggle = () => `${localStyles} <div class="docs-fn-container"> <div class="fn-switch"> <label class="fn-switch__toggle"> @@ -569,8 +565,8 @@ export const switchToggle = () => `${localStyles} `; -switchToggle.storyName = 'Switch'; -switchToggle.parameters = { +SwitchToggle.storyName = 'Switch'; +SwitchToggle.parameters = { docs: { iframeHeight: 500 } diff --git a/stories/form-fieldset/form-fieldset.stories.js b/stories/form-fieldset/form-fieldset.stories.js index 36a96cae53..17774c83a0 100644 --- a/stories/form-fieldset/form-fieldset.stories.js +++ b/stories/form-fieldset/form-fieldset.stories.js @@ -9,7 +9,7 @@ export default { } }; -export const checkboxGroups = () => ` +export const CheckboxGroups = () => ` <fieldset class="fd-fieldset"> <legend class="fd-fieldset__legend">Checkboxes</legend> <div class="fd-form-group"> @@ -101,13 +101,13 @@ export const checkboxGroups = () => ` </fieldset> `; -checkboxGroups.parameters = { +CheckboxGroups.parameters = { docs: { iframeHeight: 450 } }; -export const radioButtonGroups = () => `<fieldset class="fd-fieldset" id="radio1"> +export const RadioButtonGroups = () => `<fieldset class="fd-fieldset" id="radio1"> <legend class="fd-fieldset__legend">Radio Buttons Cozy Mode</legend> <div class="fd-form__group"> <div class="fd-form-item"> @@ -132,7 +132,7 @@ export const radioButtonGroups = () => `<fieldset class="fd-fieldset" id="radio1 </fieldset> `; -radioButtonGroups.parameters = { +RadioButtonGroups.parameters = { docs: { iframeHeight: 200, storyDescription: 'Radio button groups should always be grouped using fieldset for accessibility reasons.' diff --git a/stories/form-grid/form-grid.stories.js b/stories/form-grid/form-grid.stories.js index 1a93060e8d..5f39242298 100644 --- a/stories/form-grid/form-grid.stories.js +++ b/stories/form-grid/form-grid.stories.js @@ -2,7 +2,7 @@ export default { title: 'Components/Forms/Form Grid', parameters: { description: ` -The form grid component provides responsive layouts for forms on a 12-column grid. There are four breakpoints that result in four supported sizes: +The form grid component provides responsive layouts for forms on a 12-column grid. There are four breakpoints that result in four supported sizes: Size | Form width | Breakpoint :----- | :-------------- | :--------------- @@ -14,7 +14,7 @@ Extra-large    | 1441 px and above    | _no breakp **Note:** These breakpoints are not dependent on the screen width, but rather the width of the form. ##Label-Field Ratio -Within each size, the number of labels, field, and empty grid columns can be defined. The optional empty grid columns are placed after the input field elements to avoid excessive stretching of the input fields. +Within each size, the number of labels, field, and empty grid columns can be defined. The optional empty grid columns are placed after the input field elements to avoid excessive stretching of the input fields. This ratio is displayed as **X**:**Y**:**Z**, where **X** is the number of grids used by the labels, **Y** stands for the fields, and **Z** for empty grid columns. We highly recommend changing the default of the label-field-ratio according to your app’s needs. For more information, see the recommended layouts in the **Layout** section. @@ -28,7 +28,7 @@ When working with form groups, it's always best to use the recommended number of } }; -export const sSize = () => `<div class="fd-container fd-form-layout-grid-container fd-form-layout-grid-container--vertical" style="max-width:600px"> +export const SSize = () => `<div class="fd-container fd-form-layout-grid-container fd-form-layout-grid-container--vertical" style="max-width:600px"> <div class="fd-row"> <div class="fd-col"> <label class="fd-form-label" for="input-1-name">Name:</label> @@ -87,8 +87,8 @@ export const sSize = () => `<div class="fd-container fd-form-layout-grid-contain </div> `; -sSize.storyName = 'Small'; -sSize.parameters = { +SSize.storyName = 'Small'; +SSize.parameters = { docs: { iframeHeight: 450, storyDescription: ` @@ -106,7 +106,7 @@ Empty grid columns | 0 | There are no empty spaces on the right of the fields. } }; -export const mSizeDefault = () => `<div class="fd-container fd-form-layout-grid-container" style="max-width:1024px"> +export const MSizeDefault = () => `<div class="fd-container fd-form-layout-grid-container" style="max-width:1024px"> <div class="fd-row"> <div class="fd-col fd-col-md--2 fd-col-lg--4"> <label class="fd-form-label" for="input-2-name">Name:</label> @@ -177,27 +177,27 @@ export const mSizeDefault = () => `<div class="fd-container fd-form-layout-grid- </div> `; -mSizeDefault.storyName = 'Default [M]'; -mSizeDefault.parameters = { +MSizeDefault.storyName = 'Default [M]'; +MSizeDefault.parameters = { docs: { iframeHeight: 370, storyDescription: ` The default medium form grid uses a single-column layout. The labels are positioned in the same row as the corresponding input field or value, and form groups are positioned below each other. ####Label-field ratio -The default medium form grid is organized into a **2:10:0** label-field ratio. +The default medium form grid is organized into a **2:10:0** label-field ratio. Components | Grid columns | Description :------ | :--------: | :---------------------- Label | 2 | Only two grid columns of the responsive grid layout are used by the labels. Fields | 10 | The rest of the grid columns of the responsive grid layout are used by the fields. Empty grid columns | 0 | There are no empty spaces on the right of the fields. - + ` } }; -export const mSizeSplitScreen = () => `<div class="fd-container fd-form-layout-grid-container" style="max-width:1024px"> +export const MSizeSplitScreen = () => `<div class="fd-container fd-form-layout-grid-container" style="max-width:1024px"> <div class="fd-row"> <div class="fd-col fd-col-md--4 fd-col-lg--4"> <label class="fd-form-label" for="input-3-name">Name:</label> @@ -268,28 +268,28 @@ export const mSizeSplitScreen = () => `<div class="fd-container fd-form-layout-g </div> `; -mSizeSplitScreen.storyName = 'Split screen [M]'; -mSizeSplitScreen.parameters = { +MSizeSplitScreen.storyName = 'Split screen [M]'; +MSizeSplitScreen.parameters = { docs: { iframeHeight: 370, storyDescription: ` When the form is positioned in the details part of a split screen, the medium form grid should use a label-field ratio of 4:7:1. ####Label-field ratio -The medium form grid is organized into a **4:7:1** label-field ratio for split-screen views. +The medium form grid is organized into a **4:7:1** label-field ratio for split-screen views. Components | Grid columns | Description :------ | :--------: | :---------------------- Label | 4 | Only four grid columns of the responsive grid layout are used by the labels. Fields | 7 | Seven grid columns of the responsive grid layout are used by the fields. Empty grid columns | 1 | There is one empty space on the right of the field. - + ` } }; -export const mSizeFullScreenApp = () => `<div class="fd-container fd-form-layout-grid-container" style="max-width:1024px"> +export const MSizeFullScreenApp = () => `<div class="fd-container fd-form-layout-grid-container" style="max-width:1024px"> <div class="fd-row"> <div class="fd-col fd-col-md--3 fd-col-lg--4"> <label class="fd-form-label" for="input-4-name">Name:</label> @@ -360,26 +360,26 @@ export const mSizeFullScreenApp = () => `<div class="fd-container fd-form-layout </div> `; -mSizeFullScreenApp.storyName = 'Full screen [M]'; -mSizeFullScreenApp.parameters = { +MSizeFullScreenApp.storyName = 'Full screen [M]'; +MSizeFullScreenApp.parameters = { docs: { iframeHeight: 450, storyDescription: ` If the form is being viewed in a full-screen app, the medium form grid should use a single-column layout. ####Label-field ratio -The medium form grid is organized into a **3:5:4** label-field ratio for full-screen views. - +The medium form grid is organized into a **3:5:4** label-field ratio for full-screen views. + Components | Grid columns | Description :------ | :--------: | :---------------------- Label | 3 | Only three grid columns of the responsive grid layout are used by the labels. Fields | 5 | Five grid columns of the responsive grid layout are used by the fields. Empty grid columns | 4 | There are four empty spaces on the right of the field. - + ` } }; -export const mSizeFullScreenAppLongLabel = () => `<div class="fd-container fd-form-layout-grid-container" style="max-width:1024px"> +export const MSizeFullScreenAppLongLabel = () => `<div class="fd-container fd-form-layout-grid-container" style="max-width:1024px"> <div class="fd-row"> <div class="fd-col fd-col-md--4 fd-col-lg--3"> <label class="fd-form-label" for="input-5-name">Name:</label> @@ -450,27 +450,27 @@ export const mSizeFullScreenAppLongLabel = () => `<div class="fd-container fd-fo </div> `; -mSizeFullScreenAppLongLabel.storyName = 'Long label [M]'; -mSizeFullScreenAppLongLabel.parameters = { +MSizeFullScreenAppLongLabel.storyName = 'Long label [M]'; +MSizeFullScreenAppLongLabel.parameters = { docs: { iframeHeight: 450, storyDescription: ` The medium form width can go down to 601 px, providing insufficient space for longer labels and fields. If long labels or input values are necessary, use the label-field ratio of 4:8:0. ####Label-field ratio -The medium form grid is organized into a **3:5:4** label-field ratio to accommodate long labels and fields. +The medium form grid is organized into a **3:5:4** label-field ratio to accommodate long labels and fields. Components | Grid columns | Description :------ | :--------: | :---------------------- Label | 4 | Only four grid columns of the responsive grid layout are used by the labels. Fields | 8 | Eight grid columns of the responsive grid layout are used by the fields. Empty grid columns | 0 | There is no empty space on the right of the field. - + ` } }; -export const lSizeDefault = () => `<div class="fd-container fd-form-layout-grid-container" style="max-width:1440px"> +export const LSizeDefault = () => `<div class="fd-container fd-form-layout-grid-container" style="max-width:1440px"> <div class="fd-row"> <div class="fd-col fd-col-md--2 fd-col-lg--4"> <label class="fd-form-label" for="input-6-name">Name:</label> @@ -541,27 +541,27 @@ export const lSizeDefault = () => `<div class="fd-container fd-form-layout-grid- </div> `; -lSizeDefault.storyName = 'Default [L]'; -lSizeDefault.parameters = { +LSizeDefault.storyName = 'Default [L]'; +LSizeDefault.parameters = { docs: { iframeHeight: 500, storyDescription: ` The default large form grid uses a two-column layout. The form groups are placed side-by-side, displaying all information on one screen to avoid scrolling. In these columns, the labels are positioned in the same row as the corresponding input field or value. Therefore, the form groups adopt the Z layout, directing users’ attention to each row instead of columns. ####Label-field ratio -The default large form grid is organized into a **4:8:0** label-field ratio. +The default large form grid is organized into a **4:8:0** label-field ratio. Components | Grid columns | Description :------ | :--------: | :---------------------- Label | 4 | Only four grid columns of the responsive grid layout are used by the labels. Fields | 8 | The rest of the grid columns of the responsive grid layout are used by the fields. Empty grid columns | 0 | There is no empty space on the right of the field. - + ` } }; -export const lSizeSingleFormGroup = () => `<div class="fd-container fd-form-layout-grid-container" style="max-width:1440px"> +export const LSizeSingleFormGroup = () => `<div class="fd-container fd-form-layout-grid-container" style="max-width:1440px"> <div class="fd-row"> <div class="fd-col fd-col-md--2 fd-col-lg--3"> <label class="fd-form-label" for="input-7-name">Name:</label> @@ -631,8 +631,8 @@ export const lSizeSingleFormGroup = () => `<div class="fd-container fd-form-layo </div> `; -lSizeSingleFormGroup.storyName = 'Single form [L]'; -lSizeSingleFormGroup.parameters = { +LSizeSingleFormGroup.storyName = 'Single form [L]'; +LSizeSingleFormGroup.parameters = { docs: { iframeHeight: 530, storyDescription: ` @@ -651,7 +651,7 @@ Empty grid columns | 4 | There are four empty spaces on the right of the field. } }; -export const lSizeMultipleFormGroup = () => `<div class="fd-container fd-form-layout-grid-container" style="max-width:1440px"> +export const LSizeMultipleFormGroup = () => `<div class="fd-container fd-form-layout-grid-container" style="max-width:1440px"> <div class="fd-row"> <div class="fd-col fd-col-lg--6 fd-col--wrap"> <div class="fd-row"> @@ -792,8 +792,8 @@ export const lSizeMultipleFormGroup = () => `<div class="fd-container fd-form-la </div> `; -lSizeMultipleFormGroup.storyName = 'Multiple form [L]'; -lSizeMultipleFormGroup.parameters = { +LSizeMultipleFormGroup.storyName = 'Multiple form [L]'; +LSizeMultipleFormGroup.parameters = { docs: { iframeHeight: 590, storyDescription: ` @@ -809,12 +809,12 @@ Fields | 12 | A field handles the space of a whole row. Empty grid columns | 0 | There are no empty spaces on the right of the fields. **Note:** As explained in the main description, large goes down to 1025 px. Therefore, long labels that are put next to fields might not fit on smaller large-sized screens (especially in split-view apps). For this reason, labels are put above fields. - + ` } }; -export const xlDefault = () => `<div class="fd-container fd-form-layout-grid-container"> +export const XlDefault = () => `<div class="fd-container fd-form-layout-grid-container"> <div class="fd-row"> <div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--4"> <label class="fd-form-label" for="input-9-name">Name:</label> @@ -885,8 +885,8 @@ export const xlDefault = () => `<div class="fd-container fd-form-layout-grid-con </div> `; -xlDefault.storyName = 'Default [XL]'; -xlDefault.parameters = { +XlDefault.storyName = 'Default [XL]'; +XlDefault.parameters = { docs: { iframeHeight: 500, storyDescription: ` @@ -900,13 +900,13 @@ Components | Grid columns | Description Label | 4 | Only four grid columns of the responsive grid layout are used by the labels. Fields | 8 | The rest of the grid columns of the responsive grid layout are used by the fields. Empty grid columns | 0 | There are no empty spaces on the right of the fields. - + ` } }; -export const xlSingleFormGroup = () => `<div class="fd-container fd-form-layout-grid-container"> +export const XlSingleFormGroup = () => `<div class="fd-container fd-form-layout-grid-container"> <div class="fd-row"> <div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--3"> <label class="fd-form-label" for="input-10-name">Name:</label> @@ -977,8 +977,8 @@ export const xlSingleFormGroup = () => `<div class="fd-container fd-form-layout- </div> `; -xlSingleFormGroup.storyName = 'Single form [XL]'; -xlSingleFormGroup.parameters = { +XlSingleFormGroup.storyName = 'Single form [XL]'; +XlSingleFormGroup.parameters = { docs: { iframeHeight: 500, storyDescription: ` @@ -994,12 +994,12 @@ Fields | 5 | Five of the grid columns of the responsive grid layout are used by Empty grid columns | 4 | There are four empty spaces on the right of the fields. **Note:** If the form is put into a full-screen app and it contains multiple form groups, you can also use a three-column layout with a label-field ratio of **12:12:0**. - + ` } }; -export const xlDoubleFormGroup = () => `<div class="fd-container fd-form-layout-grid-container"> +export const XlDoubleFormGroup = () => `<div class="fd-container fd-form-layout-grid-container"> <div class="fd-row"> <div class="fd-col fd-col-xl--6 fd-col--wrap"> <div class="fd-row"> @@ -1141,8 +1141,8 @@ export const xlDoubleFormGroup = () => `<div class="fd-container fd-form-layout- </div> `; -xlDoubleFormGroup.storyName = 'Double form [XL]'; -xlDoubleFormGroup.parameters = { +XlDoubleFormGroup.storyName = 'Double form [XL]'; +XlDoubleFormGroup.parameters = { docs: { iframeHeight: 650, storyDescription: ` @@ -1156,15 +1156,15 @@ Components | Grid columns | Description Label | 4 | Only four grid columns of the responsive grid layout are used by the labels. Fields | 8 | The rest of the grid columns of the responsive grid layout are used by the fields. Empty grid columns | 0 | There are no empty spaces on the right of the fields. - + ` } }; -export const xlMultipleFormGroup = () => `<div class="fd-container fd-form-layout-grid-container"> +export const XlMultipleFormGroup = () => `<div class="fd-container fd-form-layout-grid-container"> <div class="fd-row fd-row--top"> <div class="fd-col fd-col-xl--4 fd-col--wrap"> - + <div class="fd-row"> <div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12"> @@ -1292,7 +1292,7 @@ export const xlMultipleFormGroup = () => `<div class="fd-container fd-form-layou </div> </div> </div> - + <div class="fd-col fd-col-xl--4 fd-col--wrap"> <div class="fd-row"> @@ -1368,8 +1368,8 @@ export const xlMultipleFormGroup = () => `<div class="fd-container fd-form-layou </div> `; -xlMultipleFormGroup.storyName = 'Multiple form [XL]'; -xlMultipleFormGroup.parameters = { +XlMultipleFormGroup.storyName = 'Multiple form [XL]'; +XlMultipleFormGroup.parameters = { docs: { iframeHeight: 850, storyDescription: ` @@ -1383,12 +1383,12 @@ Components | Grid columns | Description Label | 12 | A label handles the space of a whole row. Fields | 12 | A field handles the space of a whole row. Empty grid columns | 0 | There is no empty space on the right of the field. - + ` } }; -export const compactLayout = () => `<div class="fd-container fd-form-layout-grid-container"> +export const CompactLayout = () => `<div class="fd-container fd-form-layout-grid-container"> <div class="fd-row"> <div class="fd-col fd-col--4"> <label class="fd-form-label" for="input-13-compact">Default Input:</label> @@ -1423,8 +1423,8 @@ export const compactLayout = () => `<div class="fd-container fd-form-layout-grid </div> `; -compactLayout.storyName = 'Compact form'; -compactLayout.parameters = { +CompactLayout.storyName = 'Compact form'; +CompactLayout.parameters = { docs: { iframeHeight: 200, storyDescription: ` @@ -1432,9 +1432,9 @@ To display the form using a compact layout, add the \`--compact\` modifier on th } }; -export const columnRecommended = () => `<h2>Layout 1</h2> +export const ColumnRecommended = () => `<h2>Layout 1</h2> <div class="fd-container fd-form-layout-grid-container"> - <div class="fd-row"> + <div class="fd-row"> <div class="fd-col fd-col-md--6 fd-col-lg--6 fd-col-xl--6 fd-col--wrap"> <div class="fd-row"> <div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12"> @@ -1461,7 +1461,7 @@ export const columnRecommended = () => `<h2>Layout 1</h2> <h2>Layout 2</h2> <div class="fd-container fd-form-layout-grid-container"> - <div class="fd-row"> + <div class="fd-row"> <div class="fd-col fd-col-md--12 fd-col-lg--6 fd-col-xl--6 fd-col--wrap"> <div class="fd-row"> <div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12"> @@ -1488,7 +1488,7 @@ export const columnRecommended = () => `<h2>Layout 1</h2> <h2>Layout 3</h2> <div class="fd-container fd-form-layout-grid-container"> - <div class="fd-row"> + <div class="fd-row"> <div class="fd-col fd-col-md--12 fd-col-xl--6 fd-col--wrap"> <div class="fd-row"> <div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12"> @@ -1515,8 +1515,8 @@ export const columnRecommended = () => `<h2>Layout 1</h2> `; -columnRecommended.storyName = 'Recommended layouts'; -columnRecommended.parameters = { +ColumnRecommended.storyName = 'Recommended layouts'; +ColumnRecommended.parameters = { docs: { iframeHeight: 400, storyDescription: ` @@ -1548,14 +1548,14 @@ XL | 2 L | 1 M | 1 S | 1 - + ` } }; -export const columnPossible = () => `<h2>Layout 4</h2> +export const ColumnPossible = () => `<h2>Layout 4</h2> <div class="fd-container fd-form-layout-grid-container"> - <div class="fd-row"> + <div class="fd-row"> <div class="fd-col fd-col-xl--4 fd-col--wrap"> <div class="fd-row"> <div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12"> @@ -1593,7 +1593,7 @@ export const columnPossible = () => `<h2>Layout 4</h2> <h2>Layout 5</h2> <div class="fd-container fd-form-layout-grid-container"> - <div class="fd-row"> + <div class="fd-row"> <div class="fd-col fd-col--wrap"> <div class="fd-row"> <div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12"> @@ -1619,8 +1619,8 @@ export const columnPossible = () => `<h2>Layout 4</h2> </div> `; -columnPossible.storyName = 'Layout variations'; -columnPossible.parameters = { +ColumnPossible.storyName = 'Layout variations'; +ColumnPossible.parameters = { docs: { iframeHeight: 400, storyDescription: ` @@ -1629,7 +1629,7 @@ Although not the best solutions, these layouts are also possible. ####Layout 4 Screen size | Columns -:----------: | :---------------: +:----------: | :---------------: XL | 3 L | 1 M | 1 @@ -1644,14 +1644,14 @@ XL | 1 L | 1 M | 1 S | 1 - + ` } }; -export const columnNotRecommended = () => `<h1>XL3-L2-M2-S1</h1> +export const ColumnNotRecommended = () => `<h1>XL3-L2-M2-S1</h1> <div class="fd-container fd-form-layout-grid-container"> - <div class="fd-row"> + <div class="fd-row"> <div class="fd-col fd-col-lg--6 fd-col-xl--4 fd-col--wrap"> <div class="fd-row"> <div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12"> @@ -1688,7 +1688,7 @@ export const columnNotRecommended = () => `<h1>XL3-L2-M2-S1</h1> </div> `; -columnNotRecommended.parameters = { +ColumnNotRecommended.parameters = { docs: { iframeHeight: 400, storyDescription: ` diff --git a/stories/form-group/form-group.stories.js b/stories/form-group/form-group.stories.js index ad5f2570af..580fdeb6bf 100644 --- a/stories/form-group/form-group.stories.js +++ b/stories/form-group/form-group.stories.js @@ -5,14 +5,14 @@ export default { Form groups are used to assemble form elements with labels, messages, and help containers. These components can be used alone. For example, the \`form__item\` element with the label and control could be used without the full form group since not every form field will need error messages. - + `, tags: ['f3', 'a11y', 'theme'], components: ['form-layout-grid', 'form-group', 'form-item', 'form-label', 'input'] } }; -export const primary = () => `<div class="fd-form-group"> +export const Primary = () => `<div class="fd-form-group"> <div class="fd-form-item"> <label class="fd-form-label" for="input-1">Default input:</label> <input class="fd-input" type="text" id="input-1" placeholder="Field placeholder text"> @@ -20,8 +20,8 @@ export const primary = () => `<div class="fd-form-group"> </div> `; -primary.storyName = 'Default'; -primary.parameters = { +Primary.storyName = 'Default'; +Primary.parameters = { docs: { storyDescription: ` The default form group component displays an inline label and an input field that is highlighted in blue when selected. @@ -29,7 +29,7 @@ The default form group component displays an inline label and an input field tha } }; -export const compact = () => `<div class="fd-form-group"> +export const Compact = () => `<div class="fd-form-group"> <div class="fd-form-item"> <label class="fd-form-label" for="input-1b">Compact Input:</label> <input class="fd-input fd-input--compact" type="text" id="input-1b" placeholder="Field placeholder text"> @@ -37,8 +37,7 @@ export const compact = () => `<div class="fd-form-group"> </div> `; -compact.storyName = 'Compact'; -compact.parameters = { +Compact.parameters = { docs: { storyDescription: ` Form group can be displayed in compact mode, which is ideal for larger desktop screens. To display a compact form group, add the \`--compact\` modifier class to the \`fd-input\` element. @@ -46,7 +45,7 @@ Form group can be displayed in compact mode, which is ideal for larger desktop s } }; -export const required = () => `<div class="fd-form-group"> +export const Required = () => `<div class="fd-form-group"> <div class="fd-form-item"> <label class="fd-form-label fd-form-label--required" for="input-1c">Required Input:</label> <input class="fd-input" type="text" id="input-1c" placeholder="Field placeholder text"> @@ -54,8 +53,7 @@ export const required = () => `<div class="fd-form-group"> </div> `; -required.storyName = 'Required'; -required.parameters = { +Required.parameters = { docs: { storyDescription: ` To indicate to the user that it’s required to fill out an input field, add the \`--required\` modifier class to the \`fd-form-label\` element. @@ -63,7 +61,7 @@ To indicate to the user that it’s required to fill out an input field, add the } }; -export const groupHeader = () => +export const GroupHeader = () => `<div class="fd-form-group" role="group" aria-labelledby="basicGroupHeader"> <div class="fd-form-group__header"> <h1 class="fd-form-group__header-text" id="basicGroupHeader">Group Header</h1> @@ -75,8 +73,8 @@ export const groupHeader = () => </div> `; -groupHeader.storyName = 'Group header'; -groupHeader.parameters = { +GroupHeader.storyName = 'Group header'; +GroupHeader.parameters = { docs: { storyDescription: ` Form groups can be grouped together under a header with the \`fd-form-group__header\` class. @@ -84,7 +82,7 @@ Form groups can be grouped together under a header with the \`fd-form-group__hea } }; -export const groupHeaderCompact = () => +export const GroupHeaderCompact = () => `<div class="fd-form-group" role="group" aria-labelledby="compactGroupHeader"> <div class="fd-form-group__header fd-form-group__header--compact"> <h1 class="fd-form-group__header-text" id="compactGroupHeader">Group Header</h1> @@ -95,8 +93,8 @@ export const groupHeaderCompact = () => </div> </div> `; -groupHeaderCompact.storyName = 'Group header (compact)'; -groupHeaderCompact.parameters = { +GroupHeaderCompact.storyName = 'Group header (compact)'; +GroupHeaderCompact.parameters = { docs: { storyDescription: ` Form group headers can be displayed in compact mode. To display compact group headers, add the \`--compact\` modifier class to the \`fd-form-group__header\` element. @@ -104,9 +102,9 @@ Form group headers can be displayed in compact mode. To display compact group he } }; -export const groupHeaderInFormGrid = () => +export const GroupHeaderInFormGrid = () => `<div class="fd-container fd-form-layout-grid-container"> - <div class="fd-row"> + <div class="fd-row"> <div class="fd-form-group fd-col__form-group fd-col fd-col-md--6 fd-col-lg--6 fd-col-xl--6 fd-col--wrap" role="group" aria-labelledby="grid1GroupHeader"> <div class="fd-form-group__header" id="grid1GroupHeader"> <h1 class="fd-form-group__header-text">Group Header 1</h1> @@ -197,13 +195,13 @@ export const groupHeaderInFormGrid = () => </div> </div> `; -groupHeaderInFormGrid.storyName = 'Group header (form grid)'; -groupHeaderInFormGrid.parameters = { +GroupHeaderInFormGrid.storyName = 'Group header (form grid)'; +GroupHeaderInFormGrid.parameters = { docs: { storyDescription: ` -When group headers are displayed in a **Form Grid**, paddings are added to the groups. +When group headers are displayed in a **Form Grid**, paddings are added to the groups. -To display group headers in a form grid, add the \`fd-col__form-group\` class at the same level as \`fd-form-group\` for the styles to reflect properly. Similarly, when using \`fd-form-item\`, add the \`fd-row__form-item\` element at the same level. +To display group headers in a form grid, add the \`fd-col__form-group\` class at the same level as \`fd-form-group\` for the styles to reflect properly. Similarly, when using \`fd-form-item\`, add the \`fd-row__form-item\` element at the same level. ` } }; diff --git a/stories/form-header/form-header.stories.js b/stories/form-header/form-header.stories.js index 5fba59ab38..54883ab9f1 100644 --- a/stories/form-header/form-header.stories.js +++ b/stories/form-header/form-header.stories.js @@ -9,13 +9,13 @@ Form headers are essentially titles that provide users with more context about a } }; -export const primary = () => `<div class="fd-form-header"> +export const Primary = () => `<div class="fd-form-header"> <span class="fd-form-header__text">Form Header</span> </div> `; -primary.storyName = 'Default'; -primary.parameters = { +Primary.storyName = 'Default'; +Primary.parameters = { docs: { storyDescription: ` Default form headers are displayed in text that does not wrap but truncates into an ellipsis. diff --git a/stories/form-item/form-item.stories.js b/stories/form-item/form-item.stories.js index 33c92be20f..3dc6f03022 100644 --- a/stories/form-item/form-item.stories.js +++ b/stories/form-item/form-item.stories.js @@ -2,49 +2,47 @@ export default { title: 'Components/Forms/Form Item', parameters: { description: ` -A form item is essentially a label positioned above an input field. When the user places their cursor in the input field, the field is highlighted in blue to indicate that it’s active. +A form item is essentially a label positioned above an input field. When the user places their cursor in the input field, the field is highlighted in blue to indicate that it’s active. `, tags: ['f3', 'a11y', 'theme'], components: ['form-item', 'form-label', 'input'] } }; -export const primary = () => `<div class="fd-form-item"> +export const Primary = () => `<div class="fd-form-item"> <label class="fd-form-label" for="input-1">Default input:</label> <input class="fd-input" type="text" id="input-1" placeholder="Field placeholder text"> </div> `; -primary.storyName = 'Default'; -primary.parameters = { +Primary.storyName = 'Default'; +Primary.parameters = { docs: { storyDescription: `The default form item displays a label placed above an empty input field with placeholder text that can be replaced with regular text. ` } }; -export const compact = () => `<div class="fd-form-item"> +export const Compact = () => `<div class="fd-form-item"> <label class="fd-form-label" for="input-1b">Compact Input:</label> <input class="fd-input fd-input--compact" type="text" id="input-1b" placeholder="Field placeholder text"> </div> `; -compact.storyName = 'Compact'; -compact.parameters = { +Compact.parameters = { docs: { storyDescription: `Form items can be displayed in compact mode by adding the \`--compact\` modifier class to the \`fd-input\` element. ` } }; -export const required = () => `<div class="fd-form-item"> +export const Required = () => `<div class="fd-form-item"> <label class="fd-form-label fd-form-label--required" for="input-1c">Required Input:</label> <input class="fd-input" type="text" id="input-1c" placeholder="Field placeholder text"> </div> `; -required.storyName = 'Required'; -required.parameters = { +Required.parameters = { docs: { storyDescription: `To indicate to the user that it’s required to fill out an input field, add the \`--required\` modifier class to the \`fd-form-label\` element. ` diff --git a/stories/form-label/form-label.stories.js b/stories/form-label/form-label.stories.js index 3dc5272a97..ed08636a63 100644 --- a/stories/form-label/form-label.stories.js +++ b/stories/form-label/form-label.stories.js @@ -9,14 +9,14 @@ Form labels are used to identify form elements such as input fields, checkboxes } }; -export const primary = () => `<div class="fd-form-item"> +export const Primary = () => `<div class="fd-form-item"> <label class="fd-form-label" for="input-1">Default input</label> <input class="fd-input" type="text" id="input-1" placeholder="Field placeholder text"> </div> `; -primary.storyName = 'Default'; -primary.parameters = { +Primary.storyName = 'Default'; +Primary.parameters = { docs: { storyDescription: ` The default form label is displayed in grey text above an input field. To display a form label, add the \`fd-form-label\` class as a child element of the \`fd-form-item\` element. @@ -24,14 +24,13 @@ The default form label is displayed in grey text above an input field. To displa } }; -export const required = () => `<div class="fd-form-item"> +export const Required = () => `<div class="fd-form-item"> <label class="fd-form-label fd-form-label--required" for="input-1c">Required Input</label> <input class="fd-input" type="text" id="input-1c" placeholder="Field placeholder text"> </div> `; -required.storyName = 'Required'; -required.parameters = { +Required.parameters = { docs: { storyDescription: ` To indicate to the user that it’s required to fill out an input field, add the \`--required\` modifier class to the \`fd-form-label\` element. @@ -39,14 +38,13 @@ To indicate to the user that it’s required to fill out an input field, add the } }; -export const colon = () => `<div class="fd-form-item"> +export const Colon = () => `<div class="fd-form-item"> <label class="fd-form-label fd-form-label--colon" for="input-1d">Input With Colon</label> <input class="fd-input" type="text" id="input-1d" placeholder="Field placeholder text"> </div> `; -colon.storyName = 'Colon'; -colon.parameters = { +Colon.parameters = { docs: { storyDescription: ` A form label can be displayed with a colon that does not disappear when truncated. To achieve this, add the \`--colon\` modifier class to the \`fd-form-label\` element. @@ -54,14 +52,13 @@ A form label can be displayed with a colon that does not disappear when truncate } }; -export const disabled = () => `<div class="fd-form-item"> +export const Disabled = () => `<div class="fd-form-item"> <label class="fd-form-label" for="input-05">Disabled Input</label> <input class="fd-input" type="text" id="input-05" disabled placeholder="Field placeholder text"> </div> `; -disabled.storyName = 'Disabled'; -disabled.parameters = { +Disabled.parameters = { docs: { storyDescription: ` A form label can be displayed as disabled to indicate to the users that it cannot be interacted with. To display a disabled form label, add the \`is-disabled\` class to the \`fd-input\` element. diff --git a/stories/form-message/form-message.stories.js b/stories/form-message/form-message.stories.js index a43efc0bc4..50662d6668 100644 --- a/stories/form-message/form-message.stories.js +++ b/stories/form-message/form-message.stories.js @@ -15,14 +15,14 @@ Error |\`is-error\` | The data entered is not valid and must be corrected, stopp Warning | \`is-warning\` | The data entered is formatted correctly but there are other issues that are problematic. However, these issues will not stop the user from moving forward. Disabled | \`is-disabled\` | Indicates the field is not editable. This state is commonly used when the field is dependent on a previous entry/selection within the form. Read-only    | \`is-readonly\`    | Used to display static information in the context of a form. - + `, tags: ['f3', 'a11y', 'theme'], components: ['form-message', 'form-item', 'form-label', 'input', 'popover'] } }; -export const success = () => `<div class="fd-form-item"> +export const Success = () => `<div class="fd-form-item"> <label class="fd-form-label" for="input-1bb">Success input:</label> <div class="fd-form-input-message-group fd-popover fd-popover--input-message-group"> <div class="fd-popover__control" aria-controls="popoverB2" aria-expanded="false" aria-haspopup="true" @@ -36,15 +36,14 @@ export const success = () => `<div class="fd-form-item"> </div> `; -success.storyName = 'Success'; -success.parameters = { +Success.parameters = { docs: { storyDescription: `To display a success message below an input field, add the \`--success\` modifier class to the \`fd-form-message\` element. ` } }; -export const error = () => `<div class="fd-form-item"> +export const Error = () => `<div class="fd-form-item"> <label class="fd-form-label" for="input-1cc">Error input:</label> <div class="fd-form-input-message-group fd-popover fd-popover--input-message-group"> <div class="fd-popover__control" aria-controls="popoverB3" aria-expanded="false" aria-haspopup="true" @@ -58,15 +57,14 @@ export const error = () => `<div class="fd-form-item"> </div> `; -error.storyName = 'Error'; -error.parameters = { +Error.parameters = { docs: { storyDescription: `To display an error message below an input field, add the \`--error\` modifier class to the \`fd-form-message\` element. ` } }; -export const warning = () => `<div class="fd-form-item"> +export const Warning = () => `<div class="fd-form-item"> <label class="fd-form-label" for="input-1cc">Warning input:</label> <div class="fd-form-input-message-group fd-popover fd-popover--input-message-group"> <div class="fd-popover__control" aria-controls="popoverB4" aria-expanded="false" aria-haspopup="true" @@ -80,15 +78,14 @@ export const warning = () => `<div class="fd-form-item"> </div> `; -warning.storyName = 'Warning'; -warning.parameters = { +Warning.parameters = { docs: { storyDescription: `To display a warning message below an input field, add the \`--warning\` modifier class to the \`fd-form-message\` element. ` } }; -export const information = () => `<div class="fd-form-item"> +export const Information = () => `<div class="fd-form-item"> <label class="fd-form-label" for="input-1ee">Information input:</label> <div class="fd-form-input-message-group fd-popover fd-popover--input-message-group"> <div class="fd-popover__control" aria-controls="popoverB5" aria-expanded="false" aria-haspopup="true" @@ -102,8 +99,7 @@ export const information = () => `<div class="fd-form-item"> </div> `; -information.storyName = 'Information'; -information.parameters = { +Information.parameters = { docs: { storyDescription: `To display an information message below an input field, add the \`--information\` modifier class to the \`fd-form-message\` element. ` diff --git a/stories/generic-tile/generic-tile.stories.js b/stories/generic-tile/generic-tile.stories.js index 4927b498d0..0e6fc70154 100644 --- a/stories/generic-tile/generic-tile.stories.js +++ b/stories/generic-tile/generic-tile.stories.js @@ -61,7 +61,7 @@ Informative | \`fd-numeric-content__scale—-informative\` } }; -export const genericTileSizes = () => `<div class="fddocs-container"> +export const GenericTileSizes = () => `<div class="fddocs-container"> <div role="button" aria-label="button" tabindex="0" class="fd-tile"> <div class="fd-tile__header"></div> <div class="fd-tile__content">11 x 11rem</div> @@ -74,16 +74,16 @@ export const genericTileSizes = () => `<div class="fddocs-container"> </div> </div>`; -genericTileSizes.storyName = 'Sizes'; +GenericTileSizes.storyName = 'Sizes'; -genericTileSizes.parameters = { +GenericTileSizes.parameters = { docs: { iframeHeight: 500, storyDescription: ` -Generic tiles can be displayed in two tile dimensions: the default 1x1, and 2x1 (with the addition of a \`fd-tile--double\` modifier class). +Generic tiles can be displayed in two tile dimensions: the default 1x1, and 2x1 (with the addition of a \`fd-tile--double\` modifier class). **The typical generic tile sizes are:** - + - Large tile (1 x 1) - 11 x 11rem - Large tile (2 x 1) - 22.5 x 11rem - Small tile (1 x 1) - 9.25 x 9.25rem @@ -91,7 +91,7 @@ Generic tiles can be displayed in two tile dimensions: the default 1x1, and 2x1 ` } }; -export const genericTileLayout = () => `<div class="fddocs-container"> +export const GenericTileLayout = () => `<div class="fddocs-container"> <div role="button" aria-label="button" tabindex="0" class="fd-tile"> <div class="fd-tile__header fddocs-tile-example-background-color"> <div class="fd-tile__title">.fd-tile__title</div> @@ -127,13 +127,13 @@ export const genericTileLayout = () => `<div class="fddocs-container"> </div> `; -genericTileLayout.storyName = 'Layout'; +GenericTileLayout.storyName = 'Layout'; -genericTileLayout.parameters = { +GenericTileLayout.parameters = { docs: { iframeHeight: 500, storyDescription: ` -The layout of the generic tile is fixed with designated areas for the header, content area and footer. +The layout of the generic tile is fixed with designated areas for the header, content area and footer. **The common elements displayed in generic tiles are:** @@ -149,7 +149,7 @@ Footer (optional) | \`fd-tile__footer\` | The footer can contain a refresh icon ` } }; -export const genericTileContentColumns = () => `<div class="fddocs-container"> +export const GenericTileContentColumns = () => `<div class="fddocs-container"> <div role="button" aria-label="button" tabindex="0" class="fd-tile"> <div class="fd-tile__header fd-tile__header--2-col"> <div class="fd-tile__section fddocs-tile-example-background-color"></div> @@ -209,9 +209,9 @@ export const genericTileContentColumns = () => `<div class="fddocs-container"> </div> `; -genericTileContentColumns.storyName = 'Columns'; +GenericTileContentColumns.storyName = 'Columns'; -genericTileContentColumns.parameters = { +GenericTileContentColumns.parameters = { docs: { iframeHeight: 500, storyDescription: ` @@ -231,7 +231,7 @@ The header, content and footer of generic tile can be split into two columns wit ` } }; -export const launchTile = () => `<h4>Launch tile with numeric content and launch icon</h4> +export const LaunchTile = () => `<h4>Launch tile with numeric content and launch icon</h4> <br> <div class="fddocs-container"> <div role="button" tabindex="0" class="fd-tile fd-tile--launch"> @@ -376,9 +376,9 @@ export const launchTile = () => `<h4>Launch tile with numeric content and launch </div> </div>`; -launchTile.storyName = 'Launch tile'; +LaunchTile.storyName = 'Launch tile'; -launchTile.parameters = { +LaunchTile.parameters = { docs: { iframeHeight: 500, storyDescription: `As the name suggests, the launch tile is used for when users need to launch an application from the launchpad. It can display several elements, such as a header, subtitle, refresh button, footer, KPIs and images. The header can contain a maximum of 3 lines; all 3 lines can be used for the title or one of the lines can be used for a subtitle. If a fourth line title or an optional subtitle line is required, the \`fd-tile_header-content\` can be added to represent a header, which will merge the content containers into one tile. To display a launch tile, add the \`fd-tile--launch\` modifier class to the main element. @@ -393,7 +393,7 @@ L | 4 characters can be displayed within numeric content. ` } }; -export const kpiTile = () => `<h4>KPI tile with numeric content (size L)</h4> +export const KpiTile = () => `<h4>KPI tile with numeric content (size L)</h4> <div class="fddocs-container"> <div role="button" tabindex="0" class="fd-tile fd-tile--kpi"> <div class="fd-tile__header"> @@ -538,19 +538,19 @@ export const kpiTile = () => `<h4>KPI tile with numeric content (size L)</h4> </div> `; -kpiTile.storyName = 'KPI tile'; +KpiTile.storyName = 'KPI tile'; -kpiTile.parameters = { +KpiTile.parameters = { docs: { iframeHeight: 500, storyDescription: ` A KPI tile displays key performance indicators that are used to measure and monitor a company’s performance at a strategic and operational level. The tile displays the KPI values as large, easy-to-recognize digits. In addition, you can show deviation arrows, semantic values, and scaling factors. The number of digits is limited by the size of the tiles. To display a KPI tile, add the \`fd-tile--kpi\` modifier class to the main element. -**Note:** The KPI tile supports a limited number of characters, which varies depending on the tile size (see launch tile above for more details). +**Note:** The KPI tile supports a limited number of characters, which varies depending on the tile size (see launch tile above for more details). ` } }; -export const feedTile = () => `<div class="fddocs-container"> +export const FeedTile = () => `<div class="fddocs-container"> <div role="button" tabindex="0" class="fd-tile fd-tile--double fd-tile--feed"> <div class="fd-tile__header"> <div class="fd-tile__title">Title: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div> @@ -597,16 +597,16 @@ export const feedTile = () => `<div class="fddocs-container"> </div> </div>`; -feedTile.storyName = 'Feed tile'; +FeedTile.storyName = 'Feed tile'; -feedTile.parameters = { +FeedTile.parameters = { docs: { iframeHeight: 500, storyDescription: `The feed tile displays a news feed with a news headline, the source, and a time stamp. It shows new notifications in 10-second intervals, and tile content is updated every five minutes. If there are no new notifications, the most recent notifications are displayed. The feed tile’s headline uses the full width of the container and does not contain an icon. To display a feed tile, add the \`fd-tile--feed\` modifier class to the main element. ` } }; -export const badgeTile = () => `<div class="fddocs-container"> +export const BadgeTile = () => `<div class="fddocs-container"> <div role="button" tabindex="0" class="fd-tile fd-tile--launch"> <div class="fd-badge">Badge</div> <div class="fd-tile__header"> @@ -681,16 +681,16 @@ export const badgeTile = () => `<div class="fddocs-container"> </div> </div>`; -badgeTile.storyName = 'Badge tile'; +BadgeTile.storyName = 'Badge tile'; -badgeTile.parameters = { +BadgeTile.parameters = { docs: { iframeHeight: 500, storyDescription: `The badge tile displays very short and important information at the top right corner of the tile. It's recommended to add a badge to a tile when it has been newly added. Badges are not displayed when in action/edit mode. ` } }; -export const slideTile = () => `<div class="fddocs-container"> +export const SlideTile = () => `<div class="fddocs-container"> <div role="button" tabindex="0" class="fd-tile fd-tile--slide"> <div class="fd-tile__background-img" style="background-image: url('assets/images/backgrounds/windmills.jpg'); background-size:cover;"></div> <button aria-label="toggle play button" class="fd-tile__toggle"></button> @@ -777,9 +777,9 @@ export const slideTile = () => `<div class="fddocs-container"> </div> </div>`; -slideTile.storyName = 'Slide tile'; +SlideTile.storyName = 'Slide tile'; -slideTile.parameters = { +SlideTile.parameters = { docs: { iframeHeight: 500, storyDescription: ` @@ -788,7 +788,7 @@ To display a slide tile, add the \`fd-tile--slide\` modifier class to the main e ` } }; -export const linkTile = () => `<h4>Link tile: Floating behaviour in cozy mode</h4> +export const LinkTile = () => `<h4>Link tile: Floating behaviour in cozy mode</h4> <div class="fd-tile-container"> <div role="button" tabindex="0" class="fd-tile fd-tile--line"> <div class="fd-tile__header"> @@ -1229,25 +1229,25 @@ export const linkTile = () => `<h4>Link tile: Floating behaviour in cozy mode</h </div> </div>`; -linkTile.storyName = 'Link tile'; +LinkTile.storyName = 'Link tile'; -linkTile.parameters = { +LinkTile.parameters = { docs: { iframeHeight: 500, storyDescription: `The link tile displays links in a separate area below the tiles area and comprise a title and optional subtitle. They can be in list format or they can float above the content. Link tiles can also be viewed in action mode, displaying a close button at the top and an actions button on the bottom. To display a link tile, add the \`fd-tile--line\` modifier class to the main element. ####Sizes Link tiles are displayed in two modes depending on the screen width. - +     Size   | Screen width | Modifier class | Behaviour :----- | :----------------- | :------------------ | :---------- M-XL | >= 450px | Default | Floating: If there is insufficient space, the content wraps into two rows. (This behaviour is not provided by Fundamental Styles and requires JavaScript). S | < 450px | \`fd-tile-container--list\` | List: The tile grows vertically and the text wraps into two rows, placing the title in the first row and the subtitle in the second. The link tile can be displayed in cozy (default) and compact mode. To display link tile in compact mode, add the \`fd-tile--compact\` to the main element. - + **Note:** The compact mode should only be applied to link tiles and should not be applied to the other types. - + ####List states - Regular @@ -1257,12 +1257,12 @@ The link tile can be displayed in cozy (default) and compact mode. To display li ####Action mode -When in action mode, default (floating) link tiles display the actions and close button immediately after the text. However, when they are in list format, link tiles display the actions and close button along the right side of the container. To display link tile in action mode, add \`fd-tile__action-container\` after the header element. Gradient masking is also supported in edit mode. +When in action mode, default (floating) link tiles display the actions and close button immediately after the text. However, when they are in list format, link tiles display the actions and close button along the right side of the container. To display link tile in action mode, add \`fd-tile__action-container\` after the header element. Gradient masking is also supported in edit mode. ` } }; -export const tileInActionMode = () => `<div class="fddocs-container"> +export const TileInActionMode = () => `<div class="fddocs-container"> <div role="button" tabindex="0" class="fd-tile fd-tile--launch fd-tile--action"> <div class="fd-tile__overlay"></div> <button aria-label="close button" class="fd-button fd-button--compact fd-button--transparent fd-tile__action-close"> @@ -1357,9 +1357,9 @@ export const tileInActionMode = () => `<div class="fddocs-container"> </div> </div>`; -tileInActionMode.storyName = 'Action mode'; +TileInActionMode.storyName = 'Action mode'; -tileInActionMode.parameters = { +TileInActionMode.parameters = { docs: { iframeHeight: 500, storyDescription: ` diff --git a/stories/horizontal-navigation/horizontal-navigation.stories.js b/stories/horizontal-navigation/horizontal-navigation.stories.js index e6f69a4344..12a65aab28 100644 --- a/stories/horizontal-navigation/horizontal-navigation.stories.js +++ b/stories/horizontal-navigation/horizontal-navigation.stories.js @@ -3,19 +3,19 @@ export default { parameters: { description: ` The Horizontal Navigation is an optional layout to the Vertical Navigation. One application should use the Horizontal Tabs Navigation alternatively to the Side Navigation, depending on its requirements, mainly related to the complexity of navigable items. -Preferably the Horizontal Navigation is suitable for a maximum of seven to nine primary items. +Preferably the Horizontal Navigation is suitable for a maximum of seven to nine primary items. -It displays the navigation items respectively in horizontal mode. The Tabs are displayed underneath the Tool Header, enabling the navigation into another page and context within the same Application while the Tool Header and the Tabs remain static. +It displays the navigation items respectively in horizontal mode. The Tabs are displayed underneath the Tool Header, enabling the navigation into another page and context within the same Application while the Tool Header and the Tabs remain static. The Horizontal Navigation Tabs are built with the IconTabBar component with two additional modifier classes \`.fd-icon-tab-bar--navigation\` nad \`.fd-icon-tab-bar--navigation-horizontal\`. -The Horizontal Navigation is always integrated with the Tool Header. It should not be displayed standalone. +The Horizontal Navigation is always integrated with the Tool Header. It should not be displayed standalone. Both components, Tool Header and IconTabBar, are wrapped in an element with \`.fd-horizontal-navigation \` class. Differently than the Side Navigation, the Horizontal Navigation does not embed a separate Utility Section (bottom aligned in the Side Navigation). Those items, mainly legal information and useful links, are recommended to be placed in the User Menu within the Tool Header. -Another aspect differentiating the Horizontal Navigation layout is that it has only one display mode. It has no condensed or off-canvas mode, which remain specific states of the Side Navigation. +Another aspect differentiating the Horizontal Navigation layout is that it has only one display mode. It has no condensed or off-canvas mode, which remain specific states of the Side Navigation. `, tags: ['btp', 'non-f3', 'theme', 'development'], @@ -23,7 +23,7 @@ Another aspect differentiating the Horizontal Navigation layout is that it has o } }; -export const textOnly = () => `<div style="height: 200px;"> +export const TextOnly = () => `<div style="height: 200px;"> <div class="fd-horizontal-navigation"> <div class="fd-tool-header"> <div class="fd-tool-header__group"> @@ -110,9 +110,9 @@ export const textOnly = () => `<div style="height: 200px;"> </div> `; -textOnly.storyName = 'Horizontal Navigation Text Only'; +TextOnly.storyName = 'Horizontal Navigation Text Only'; -export const textOnlyPhone = () => `<div style="height: 200px;"> +export const TextOnlyPhone = () => `<div style="height: 200px;"> <div class="fd-horizontal-navigation" style="max-width: 500px;"> <div class="fd-tool-header fd-tool-header--sm" style="max-width: 500px;"> <div class="fd-tool-header__group"> @@ -183,9 +183,9 @@ export const textOnlyPhone = () => `<div style="height: 200px;"> </div> `; -textOnlyPhone.storyName = 'Horizontal Navigation Text Only Phone View'; +TextOnlyPhone.storyName = 'Horizontal Navigation Text Only Phone View'; -export const textAndIcon = () => `<div style="height: 200px;"> +export const TextAndIcon = () => `<div style="height: 200px;"> <div class="fd-horizontal-navigation"> <div class="fd-tool-header"> <div class="fd-tool-header__group"> @@ -278,14 +278,14 @@ export const textAndIcon = () => `<div style="height: 200px;"> </div> `; -textAndIcon.storyName = 'Horizontal Navigation Text And Icon'; -textAndIcon.parameters = { +TextAndIcon.storyName = 'Horizontal Navigation Text And Icon'; +TextAndIcon.parameters = { docs: { storyDescription: 'Icon Tab Bars with Single Click Areas' } }; -export const textAndIconPhone = () => `<div style="height: 200px;"> +export const TextAndIconPhone = () => `<div style="height: 200px;"> <div class="fd-horizontal-navigation" style="max-width: 500px;"> <div class="fd-tool-header fd-tool-header--sm" style="max-width: 500px;"> <div class="fd-tool-header__group"> @@ -388,8 +388,8 @@ export const textAndIconPhone = () => `<div style="height: 200px;"> </div> `; -textAndIconPhone.storyName = 'Horizontal Navigation Text And Icon Phone View'; -textAndIconPhone.parameters = { +TextAndIconPhone.storyName = 'Horizontal Navigation Text And Icon Phone View'; +TextAndIconPhone.parameters = { docs: { storyDescription: 'Icon Tab Bars with Two Click Areas' } diff --git a/stories/icon-tab-bar/icon-tab-bar.stories.js b/stories/icon-tab-bar/icon-tab-bar.stories.js index dd59eb443d..d17a8826c9 100644 --- a/stories/icon-tab-bar/icon-tab-bar.stories.js +++ b/stories/icon-tab-bar/icon-tab-bar.stories.js @@ -38,7 +38,7 @@ You can add horizontal paddings by applying a modifier class to the container. F | xxl (3rem)    | \`fd-icon-tab-bar--xxl\` | ##Background -By default, the background for the Icon Tab Bar header and content is set to "solid". This will apply \`--sapObjectHeader_Background\` background color and \`--sapContent_HeaderShadow\` box-shadow to the header and \`--sapBackgroundColor\` to the container (panel). It can be changed to "translucent" or "transparent" using modifier classes. In translucent mode the header gets \`--sapObjectHeader_Background\` background color and the panel \`--sapGroup_ContentBackground\` background color. +By default, the background for the Icon Tab Bar header and content is set to "solid". This will apply \`--sapObjectHeader_Background\` background color and \`--sapContent_HeaderShadow\` box-shadow to the header and \`--sapBackgroundColor\` to the container (panel). It can be changed to "translucent" or "transparent" using modifier classes. In translucent mode the header gets \`--sapObjectHeader_Background\` background color and the panel \`--sapGroup_ContentBackground\` background color. | **Background** | **Modifier class** | | :--------- | :---------- | @@ -54,8 +54,8 @@ By default, the background for the Icon Tab Bar header and content is set to "so }; -export const textOnly = () => `<div class="fd-icon-tab-bar"> - <ul role="tablist" class="fd-icon-tab-bar__header"> +export const TextOnly = () => `<div class="fd-icon-tab-bar"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#section1" id="tab1"> <span class="fd-icon-tab-bar__tag">Info</span> @@ -71,26 +71,26 @@ export const textOnly = () => `<div class="fd-icon-tab-bar"> <span class="fd-icon-tab-bar__tag">Approvals (42)</span> </a> </li> - </ul> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1" aria-labelledby="tab1"> + </ul> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1" aria-labelledby="tab1"> Section 1 - </section> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2" aria-labelledby="tab2" hidden> + </section> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2" aria-labelledby="tab2" hidden> Section 2 - </section> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3" aria-labelledby="tab3" hidden> + </section> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3" aria-labelledby="tab3" hidden> Section 3 </section> </div> `; -textOnly.storyName = 'Text Only (Inline mode)'; -textOnly.parameters = { +TextOnly.storyName = 'Text Only (Inline mode)'; +TextOnly.parameters = { docs: { storyDescription: 'The text-only variant is one of the most common types. It allows longer labels, and can also display counters next to the text to indicate the number of items on the tab page. The labels of the tabs do not get truncated. The full text is always shown. As a result, you need to ensure that your labels do not become too long. They should still be easy to read on smaller screens. The control has the same look and feel in Cozy and Compact mode.' } }; -export const textOnlySemantic = () => `<div class="fd-icon-tab-bar"> +export const TextOnlySemantic = () => `<div class="fd-icon-tab-bar"> <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive"> <a role="tab" class="fd-icon-tab-bar__tab" href="#section1" aria-selected="true" id="tab1"> @@ -119,11 +119,11 @@ export const textOnlySemantic = () => `<div class="fd-icon-tab-bar"> <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section4" aria-labelledby="tab4" hidden>Section 4</section> </div> `; -textOnlySemantic.storyName = 'Text Only (Inline mode) Semantic Colors'; +TextOnlySemantic.storyName = 'Text Only (Inline mode) Semantic Colors'; -export const counter = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--counters"> - <ul role="tablist" class="fd-icon-tab-bar__header"> +export const Counter = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--counters"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#section1" id="tab1"> <span class="fd-icon-tab-bar__tag">Info</span> @@ -141,27 +141,27 @@ export const counter = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--count <span class="fd-icon-tab-bar__tag">Approvals</span> </a> </li> - </ul> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1" aria-labelledby="tab1"> + </ul> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1" aria-labelledby="tab1"> Section 1 - </section> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2" aria-labelledby="tab2" hidden> + </section> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2" aria-labelledby="tab2" hidden> Section 2 - </section> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3" aria-labelledby="tab3" hidden> + </section> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3" aria-labelledby="tab3" hidden> Section 3 </section> </div> `; -counter.storyName = 'Counters and Text'; -counter.parameters = { +Counter.storyName = 'Counters and Text'; +Counter.parameters = { docs: { storyDescription: 'Counters can be shown on top of labels. In this case you need to apply the `fd-icon-tab-bar--counters` modifier class. <br> The control has the same look and feel in Cozy and Compact mode.' } }; -export const iconOnly = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon-only"> - <ul role="tablist" class="fd-icon-tab-bar__header"> +export const IconOnly = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon-only"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#section1" id="tab1"> <div class="fd-icon-tab-bar__container"> @@ -192,27 +192,26 @@ export const iconOnly = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon </div> </a> </li> - </ul> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1" aria-labelledby="tab1"> + </ul> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1" aria-labelledby="tab1"> Section 1 - </section> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2" aria-labelledby="tab2" hidden> + </section> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2" aria-labelledby="tab2" hidden> Section 2 - </section> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3" aria-labelledby="tab3" hidden> + </section> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3" aria-labelledby="tab3" hidden> Section 3 </section> </div> `; -iconOnly.storyName = 'Icon Only'; -iconOnly.parameters = { +IconOnly.parameters = { docs: { storyDescription: 'The Icon tabs are rounded tabs that can be populated with any icon. The labels in this case are omitted and counters are optional. You need to apply the `fd-icon-tab-bar--icon-only` modifier class for this type of tabs.' } }; -export const iconOnlyCompact = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon-only fd-icon-tab-bar--compact"> - <ul role="tablist" class="fd-icon-tab-bar__header"> +export const IconOnlyCompact = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon-only fd-icon-tab-bar--compact"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#section1" id="tab1"> <div class="fd-icon-tab-bar__container"> @@ -243,27 +242,27 @@ export const iconOnlyCompact = () => `<div class="fd-icon-tab-bar fd-icon-tab-ba </div> </a> </li> - </ul> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1" aria-labelledby="tab1"> + </ul> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1" aria-labelledby="tab1"> Section 1 - </section> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2" aria-labelledby="tab2" hidden> + </section> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2" aria-labelledby="tab2" hidden> Section 2 - </section> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3" aria-labelledby="tab3" hidden> + </section> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3" aria-labelledby="tab3" hidden> Section 3 </section> </div> `; -iconOnlyCompact.storyName = 'Icon Only in Compact Mode'; -iconOnlyCompact.parameters = { +IconOnlyCompact.storyName = 'Icon Only in Compact Mode'; +IconOnlyCompact.parameters = { docs: { storyDescription: 'In compact mode you need to apply an additional modifier class `fd-icon-tab-bar--compact`.' } }; -export const iconOnlySemantic = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon-only"> - <ul role="tablist" class="fd-icon-tab-bar__header"> +export const IconOnlySemantic = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon-only"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab1"> <div class="fd-icon-tab-bar__container"> @@ -304,11 +303,11 @@ export const iconOnlySemantic = () => `<div class="fd-icon-tab-bar fd-icon-tab-b </div> </a> </li> - </ul> + </ul> </div> <br><br> <div class="fd-icon-tab-bar fd-icon-tab-bar--icon-only fd-icon-tab-bar--compact"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab5"> <div class="fd-icon-tab-bar__container"> @@ -352,10 +351,10 @@ export const iconOnlySemantic = () => `<div class="fd-icon-tab-bar fd-icon-tab-b </ul> </div> `; -iconOnlySemantic.storyName = 'Icon Only Semantic Colors'; +IconOnlySemantic.storyName = 'Icon Only Semantic Colors'; -export const icon = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon"> - <ul role="tablist" class="fd-icon-tab-bar__header"> +export const Icon = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="1"> <div class="fd-icon-tab-bar__container"> @@ -394,12 +393,12 @@ export const icon = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon"> </div> </a> </li> - </ul> + </ul> </div> <br><br> <div class="fd-icon-tab-bar fd-icon-tab-bar--icon fd-icon-tab-bar--compact"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab4"> <div class="fd-icon-tab-bar__container"> @@ -438,12 +437,12 @@ export const icon = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon"> </div> </a> </li> - </ul> + </ul> </div> <br><br> <div class="fd-icon-tab-bar fd-icon-tab-bar--icon"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="tab7"> <div class="fd-icon-tab-bar__container"> @@ -486,15 +485,14 @@ export const icon = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon"> </ul> </div> `; -icon.storyName = 'Icon'; -icon.parameters = { +Icon.parameters = { docs: { storyDescription: 'To display Icon Tabs with labels and counters you need to apply the `fd-icon-tab-bar--icon` modifier class. The counters are optional and can be ommited. The label is always positioned at the bottom. If you decide to use labels, use them for all tabs. The badge is rendered at the top right hand corner of the icon container. Consider using shorter labels or text tabs (without icons), since text tabs cannot get truncated.' } }; -export const process = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon fd-icon-tab-bar--process"> - <ul role="tablist" class="fd-icon-tab-bar__header"> +export const Process = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon fd-icon-tab-bar--process"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="tab1"> <div class="fd-icon-tab-bar__container"> @@ -545,7 +543,7 @@ export const process = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon </div> <br><br> <div class="fd-icon-tab-bar fd-icon-tab-bar--compact fd-icon-tab-bar--icon fd-icon-tab-bar--process"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab4"> <div class="fd-icon-tab-bar__container"> @@ -596,7 +594,7 @@ export const process = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon <br><br> <div class="fd-icon-tab-bar fd-icon-tab-bar--icon fd-icon-tab-bar--process"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" aria-selected="true" id="tab7"> <div class="fd-icon-tab-bar__container"> @@ -647,7 +645,7 @@ export const process = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon <br><br> <div class="fd-icon-tab-bar fd-icon-tab-bar--process"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab10"> <span class="fd-icon-tab-bar__tag">Section 1</span> @@ -673,15 +671,15 @@ export const process = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon </ul> </div> `; -process.storyName = 'Process'; -process.parameters = { + +Process.parameters = { docs: { storyDescription: 'You can also use the tab bar to depict a process. In this case, each tab stands for one step. You need to add the `fd-icon-tab-bar--process` modifier class and a sibling html element with `fd-icon-tab-bar__separator` class to the tab.' } }; -export const filter = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--filter"> - <ul role="tablist" class="fd-icon-tab-bar__header"> +export const Filter = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--filter"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" aria-selected="true" href="#" id="tab1"> <div class="fd-icon-tab-bar__container fd-icon-tab-bar__container--filter"> @@ -700,7 +698,7 @@ export const filter = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--filter <span class="fd-icon-tab-bar__counter">2</span> </div> <div class="fd-icon-tab-bar__label">Ok</div> - + </a> </li> <li role="presentation" class="fd-icon-tab-bar__item"> @@ -730,7 +728,7 @@ export const filter = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--filter <br><br> <div class="fd-icon-tab-bar fd-icon-tab-bar--filter fd-icon-tab-bar--compact"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab5"> <div class="fd-icon-tab-bar__container fd-icon-tab-bar__container--filter"> @@ -778,7 +776,7 @@ export const filter = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--filter <br><br> <div class="fd-icon-tab-bar fd-icon-tab-bar--filter"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab9"> <div class="fd-icon-tab-bar__container fd-icon-tab-bar__container--filter"> @@ -822,8 +820,8 @@ export const filter = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--filter </li> </ul> </div>`; -filter.storyName = 'Filter'; -filter.parameters = { + +Filter.parameters = { docs: { storyDescription: `The tab bar as a filter has two parts: <br> - An “all” tab on the left - shows the total number of items, and describes the type of item (for example, 189 Products). <br> @@ -834,14 +832,14 @@ filter.parameters = { }; -export const overflow = () => `<div class="fd-icon-tab-bar"> - <ul role="tablist" class="fd-icon-tab-bar__header fd-icon-tab-bar__header--left-offset"> +export const Overflow = () => `<div class="fd-icon-tab-bar"> + <ul role="tablist" class="fd-icon-tab-bar__header fd-icon-tab-bar__header--left-offset"> <li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow fd-icon-tab-bar__item--overflow-left"> <button class="fd-icon-tab-bar__overflow"> <span class="fd-icon-tab-bar__overflow-text">+2</span> <i class="sap-icon--slim-arrow-down" role="presentation"></i> </button> - </li> + </li> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab1"> <span class="fd-icon-tab-bar__tag">Section 1</span> @@ -863,12 +861,12 @@ export const overflow = () => `<div class="fd-icon-tab-bar"> <span class="fd-icon-tab-bar__overflow-text">+3</span> <i class="sap-icon--slim-arrow-down" role="presentation"></i> </button> - </li> + </li> </ul> </div> <br><br> <div class="fd-icon-tab-bar"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab4"> <span class="fd-icon-tab-bar__tag">Section 1</span> @@ -890,20 +888,20 @@ export const overflow = () => `<div class="fd-icon-tab-bar"> <span class="fd-icon-tab-bar__overflow-text">More</span> <i class="sap-icon--slim-arrow-down" role="presentation"></i> </button> - </li> + </li> </ul> </div>`; -overflow.storyName = 'Overflow'; -overflow.parameters = { + +Overflow.parameters = { docs: { storyDescription: `Tabs can have an overflow to either sides of the control. Depending on if the order is fixed (process steps) or can be rearranged (tabs). For processes with a fixed order, an overflow to both sides is used. For tabs that can be rearranged, only one overflow will be displayed on the right side.` } }; -export const singleClick = () => `<div class='fddocs-icon-tab-container' style="min-height: 800px;"> +export const SingleClick = () => `<div class='fddocs-icon-tab-container' style="min-height: 800px;"> <div class="fd-icon-tab-bar fd-icon-tab-bar--xl"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab111"> <span class="fd-icon-tab-bar__tag">Section 1</span> @@ -1016,7 +1014,7 @@ export const singleClick = () => `<div class='fddocs-icon-tab-container' style=" <div class="fd-popover__control"> <button class='fd-icon-tab-bar__overflow'> <span class='fd-icon-tab-bar__overflow-text'>More</span> - <i class='sap-icon--slim-arrow-down' role='presentation'></i> + <i class='sap-icon--slim-arrow-down' role='presentation'></i> </button> </div> <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right fd-icon-tab-bar__popover-body" style='top: 2.3rem'> @@ -1063,8 +1061,8 @@ export const singleClick = () => `<div class='fddocs-icon-tab-container' style=" </div> </div> `; -singleClick.storyName = 'Universal Icon Tab Bar Single Click Area'; -singleClick.parameters = { +SingleClick.storyName = 'Universal Icon Tab Bar Single Click Area'; +SingleClick.parameters = { docs: { storyDescription: `When there is only one click area per tab (also including tabs with sub-items), regular tabs get selected immediately after the click is released. Tabs with sub-items trigger the expansion of a menu (Popover) showing its sub-items. The parent tab title remains displayed when its child is select. <br> @@ -1073,9 +1071,9 @@ singleClick.parameters = { }; -export const multiClick = () => `<div class="fddocs-icon-tab-container" style="min-height: 400px;"> +export const MultiClick = () => `<div class="fddocs-icon-tab-container" style="min-height: 400px;"> <div class="fd-icon-tab-bar fd-icon-tab-bar--md"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" id="multiClick1"> <span class="fd-icon-tab-bar__tag">Section 1</span> @@ -1161,15 +1159,15 @@ export const multiClick = () => `<div class="fddocs-icon-tab-container" style="m </div> </div> `; -multiClick.storyName = 'Universal Icon Tab Bar Multi Click Area'; -multiClick.parameters = { +MultiClick.storyName = 'Universal Icon Tab Bar Multi Click Area'; +MultiClick.parameters = { docs: { storyDescription: 'In case of two click areas for tabs with sub-tabs, the behaviour for regular tabs (without sub-items) remains unchanged, like described above the tabs get selected immediately. Tabs with two click areas behave differently: when the main part of the tab is clicked, it is highlighted and then selected immediately. Clicking the second area opens a menu (Popover) containing the sub-items. Once a sub-item is clicked, the main tab is highlighted as selected. ' } }; -export const badge = () => `<div class="fd-icon-tab-bar"> - <ul role="tablist" class="fd-icon-tab-bar__header"> +export const Badge = () => `<div class="fd-icon-tab-bar"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#section11" id="tab1"> <span class="fd-icon-tab-bar__tag">Section 1</span> @@ -1191,7 +1189,7 @@ export const badge = () => `<div class="fd-icon-tab-bar"> <br><br> <div class="fd-icon-tab-bar"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive"> <a role="tab" class="fd-icon-tab-bar__tab" href="#section21" aria-selected="true" id="tab4"> <span class="fd-icon-tab-bar__tag">Section 1</span> @@ -1207,7 +1205,7 @@ export const badge = () => `<div class="fd-icon-tab-bar"> <li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--critical"> <a role="tab" class="fd-icon-tab-bar__tab" href="#section23" aria-selected="true" id="tab6"> <span class="fd-icon-tab-bar__tag">Section 3</span> - <span class="fd-icon-tab-bar__badge"></span> + <span class="fd-icon-tab-bar__badge"></span> </a> </li> <li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--informative"> @@ -1221,7 +1219,7 @@ export const badge = () => `<div class="fd-icon-tab-bar"> <br><br> <div class="fd-icon-tab-bar fd-icon-tab-bar--counters"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive"> <a role="tab" class="fd-icon-tab-bar__tab" href="#section41" id="tab8"> <span class="fd-icon-tab-bar__tag">Section 1</span> @@ -1249,7 +1247,7 @@ export const badge = () => `<div class="fd-icon-tab-bar"> <span class="fd-icon-tab-bar__badge"></span> </a> </li> - </ul> + </ul> </div> <br><br> <div class="fd-icon-tab-bar fd-icon-tab-bar--icon-only"> @@ -1301,16 +1299,16 @@ export const badge = () => `<div class="fd-icon-tab-bar"> </ul> </div> `; -badge.storyName = 'Badges'; -badge.parameters = { +Badge.storyName = 'Badges'; +Badge.parameters = { docs: { storyDescription: `The Tab attention badge is applied as a visual eye-catcher to indicate a change within a Tab. <br> The badge is a span element with \`fd-icon-tab-bar__badge\` class. It can be animated by adding an additional \` fd-icon-tab-bar__badge--animated\` modifier class. In this case the badge appears for a few milliseconds and then disappears.` } }; -export const respPaddings = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--responsive-paddings"> - <ul role="tablist" class="fd-icon-tab-bar__header"> +export const RespPaddings = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--responsive-paddings"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#section11" id="tab1"> <span class="fd-icon-tab-bar__tag">Section 1</span> @@ -1330,16 +1328,16 @@ export const respPaddings = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar-- </ul> </div> `; -respPaddings.storyName = 'Responsive Paddings'; -respPaddings.parameters = { +RespPaddings.storyName = 'Responsive Paddings'; +RespPaddings.parameters = { docs: { storyDescription: 'For an Icon Tab Bar with responsive paddings that adjust based on the screen size add the `fd-icon-tab-bar--responsive-paddings` modifier class.' } }; -export const paddings = () => `<h4>SM (1rem) paddings</h4> +export const Paddings = () => `<h4>SM (1rem) paddings</h4> <div class="fd-icon-tab-bar fd-icon-tab-bar--sm"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab1"> <span class="fd-icon-tab-bar__tag">Section 1</span> @@ -1360,7 +1358,7 @@ export const paddings = () => `<h4>SM (1rem) paddings</h4> <br><br> <h4>MD (2rem) paddings</h4> <div class="fd-icon-tab-bar fd-icon-tab-bar--md"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab4"> <span class="fd-icon-tab-bar__tag">Section 1</span> @@ -1381,7 +1379,7 @@ export const paddings = () => `<h4>SM (1rem) paddings</h4> <br><br> <h4>LG (2rem) paddings</h4> <div class="fd-icon-tab-bar fd-icon-tab-bar--lg"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab7"> <span class="fd-icon-tab-bar__tag">Section 1</span> @@ -1402,7 +1400,7 @@ export const paddings = () => `<h4>SM (1rem) paddings</h4> <br><br> <h4>XL (3rem) paddings</h4> <div class="fd-icon-tab-bar fd-icon-tab-bar--xl"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab13"> <span class="fd-icon-tab-bar__tag">Section 1</span> @@ -1423,7 +1421,7 @@ export const paddings = () => `<h4>SM (1rem) paddings</h4> <br><br> <h4>XXL (3rem) paddings</h4> <div class="fd-icon-tab-bar fd-icon-tab-bar--xxl"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab16"> <span class="fd-icon-tab-bar__tag">Section 1</span> @@ -1442,17 +1440,17 @@ export const paddings = () => `<h4>SM (1rem) paddings</h4> </ul> </div> `; -paddings.storyName = 'Sizes and Horizontal Paddings'; -paddings.parameters = { +Paddings.storyName = 'Sizes and Horizontal Paddings'; +Paddings.parameters = { docs: { storyDescription: 'You can set horizontal paddings by adding a modifier class and specifying the size of the paddings. Please refer to the "Paddings" section at the top of the page for the available sizes.' } }; -export const navigation = () => `<div class="fddocs-icon-tab-container" style="min-height: 600px;"> +export const Navigation = () => `<div class="fddocs-icon-tab-container" style="min-height: 600px;"> <h4>With Overflow</h4> <div class="fd-icon-tab-bar fd-icon-tab-bar--sm fd-icon-tab-bar--navigation" style="max-width: 400px;"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab1"> <span class="fd-icon-tab-bar__tag">Section 1</span> @@ -1473,13 +1471,13 @@ export const navigation = () => `<div class="fddocs-icon-tab-container" style="m <span class="fd-icon-tab-bar__overflow-text">More</span> <i class="sap-icon--slim-arrow-down" role="presentation"></i> </button> - </li> + </li> </ul> </div> <div style="height: 50px;"></div> <h4>With Multi Click Area</h4> <div class="fd-icon-tab-bar fd-icon-tab-bar--navigation fd-icon-tab-bar--md"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab4"> <span class="fd-icon-tab-bar__tag">Section 1</span> @@ -1581,8 +1579,8 @@ export const navigation = () => `<div class="fddocs-icon-tab-container" style="m </div> </div> `; -navigation.storyName = 'Navigation Icon Tab Bar (Shell Navigation)'; -navigation.parameters = { +Navigation.storyName = 'Navigation Icon Tab Bar (Shell Navigation)'; +Navigation.parameters = { docs: { storyDescription: `The Navigation Tab Bar is the main/default navigation displayed on the SAP Fiori launchpad home page. It offers the user an easy access to multiple pages per space. The background color of the Shell Navigation is connected the Home/Shell Header to properly differentiate the global shell navigation versus any application specific navigation. The Navigation Bar snaps to top and remains visible while scrolling. It is not visible in App view. <br> The implementation is based on UniversalIconTabBar with some different color parameters that are specific to Shell Bar. <br> @@ -1590,9 +1588,9 @@ navigation.parameters = { } }; -export const navigationFlat = () => `<div class="fddocs-icon-tab-container" style="min-height: 100px;"> +export const NavigationFlat = () => `<div class="fddocs-icon-tab-container" style="min-height: 100px;"> <div class="fd-icon-tab-bar fd-icon-tab-bar--navigation fd-icon-tab-bar--navigation-flat fd-icon-tab-bar--md"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#" id="tab11"> <span class="fd-icon-tab-bar__tag">Section 1</span> @@ -1627,20 +1625,20 @@ export const navigationFlat = () => `<div class="fddocs-icon-tab-container" styl </div> </div> `; -navigationFlat.storyName = 'Flat Navigation'; -navigationFlat.parameters = { +NavigationFlat.storyName = 'Flat Navigation'; +NavigationFlat.parameters = { docs: { - storyDescription: `The Flat Navigation offers the user an easy access to multiple pages per space. - As the ShellNavigation (Fiori 3), the Flat Navigation is the main/default navigation displayed on the SAP Fiori launchpad home page. It snaps to top and remains visible while scrolling and is not visible in App view. + storyDescription: `The Flat Navigation offers the user an easy access to multiple pages per space. + As the ShellNavigation (Fiori 3), the Flat Navigation is the main/default navigation displayed on the SAP Fiori launchpad home page. It snaps to top and remains visible while scrolling and is not visible in App view. The Flat Navigation Concept allows putting all entities of a single space directly into the first level of the Top Level Navigation Bar for direct access. Add the \`.fd-icon-tab-bar--navigation-flat\` modifier class to \`.fd-icon-tab-bar.fd-icon-tab-bar--navigation\` to achieve the flat navigation look and feel. The items that have separators need to receive the \`.fd-icon-tab-bar__item--with-separator\` modifier class to \`.fd-icon-tab-bar__item\` class. This will append a vertical separator line on the right hand side of the item with an 1rem offset. ` } }; -export const dragAndDrop = () => `<div class="fddocs-icon-tab-container" style="min-height: 600px;"> +export const DragAndDrop = () => `<div class="fddocs-icon-tab-container" style="min-height: 600px;"> <div class="fd-icon-tab-bar"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--dnd-separator-end"> <a role="tab" class="fd-icon-tab-bar__tab" href="#section1-1" id="tab1-1"> <span class="fd-icon-tab-bar__tag">Insert After Item</span> @@ -1671,14 +1669,14 @@ export const dragAndDrop = () => `<div class="fddocs-icon-tab-container" style=" <span class="fd-icon-tab-bar__tag">Being dragged preview</span> </a> </li> - </ul> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1-1" aria-labelledby="tab1"> + </ul> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1-1" aria-labelledby="tab1"> Section 1 - </section> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1-2" aria-labelledby="tab2" hidden> + </section> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1-2" aria-labelledby="tab2" hidden> Section 2 - </section> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1-3" aria-labelledby="tab3" hidden> + </section> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1-3" aria-labelledby="tab3" hidden> Section 3 </section> </div> @@ -1686,7 +1684,7 @@ export const dragAndDrop = () => `<div class="fddocs-icon-tab-container" style=" <br/><br/> <div class="fd-icon-tab-bar"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#section2-1" id="tab2-1"> <span class="fd-icon-tab-bar__tag">Section 1</span> @@ -1707,14 +1705,14 @@ export const dragAndDrop = () => `<div class="fddocs-icon-tab-container" style=" <span class="fd-icon-tab-bar__tag">Section 4</span> </a> </li> - </ul> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2-1" aria-labelledby="tab1"> + </ul> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2-1" aria-labelledby="tab1"> Section 1 - </section> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2-2" aria-labelledby="tab2" hidden> + </section> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2-2" aria-labelledby="tab2" hidden> Section 2 - </section> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2-3" aria-labelledby="tab3" hidden> + </section> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2-3" aria-labelledby="tab3" hidden> Section 3 </section> </div> @@ -1722,7 +1720,7 @@ export const dragAndDrop = () => `<div class="fddocs-icon-tab-container" style=" <br/><br/> <div class="fd-icon-tab-bar"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#section3-1" id="tab3-1"> <span class="fd-icon-tab-bar__tag">Section 1</span> @@ -1816,14 +1814,14 @@ export const dragAndDrop = () => `<div class="fddocs-icon-tab-container" style=" </div> </div> </li> - </ul> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3-1" aria-labelledby="tab1"> + </ul> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3-1" aria-labelledby="tab1"> Section 1 - </section> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3-2" aria-labelledby="tab2" hidden> + </section> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3-2" aria-labelledby="tab2" hidden> Section 2 - </section> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3-3" aria-labelledby="tab3" hidden> + </section> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3-3" aria-labelledby="tab3" hidden> Section 3 </section> </div> @@ -1831,7 +1829,7 @@ export const dragAndDrop = () => `<div class="fddocs-icon-tab-container" style=" <br/><br/> <div class="fd-icon-tab-bar" style="margin-top: 6rem;"> - <ul role="tablist" class="fd-icon-tab-bar__header"> + <ul role="tablist" class="fd-icon-tab-bar__header"> <li role="presentation" class="fd-icon-tab-bar__item"> <a role="tab" class="fd-icon-tab-bar__tab" href="#section4-1" id="tab4-1"> <span class="fd-icon-tab-bar__tag">Section 1</span> @@ -1886,14 +1884,14 @@ export const dragAndDrop = () => `<div class="fddocs-icon-tab-container" style=" <span class="fd-icon-tab-bar__tag">Section 5</span> </a> </li> - </ul> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1" aria-labelledby="tab1"> + </ul> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section1" aria-labelledby="tab1"> Section 1 - </section> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2" aria-labelledby="tab2" hidden> + </section> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section2" aria-labelledby="tab2" hidden> Section 2 - </section> - <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3" aria-labelledby="tab3" hidden> + </section> + <section role="tabpanel" class="fd-icon-tab-bar__panel" id="section3" aria-labelledby="tab3" hidden> Section 3 </section> </div> @@ -1901,14 +1899,14 @@ export const dragAndDrop = () => `<div class="fddocs-icon-tab-container" style=" <br/><br/> </div> `; -dragAndDrop.storyName = 'Tabs drag and drop'; -dragAndDrop.parameters = { +DragAndDrop.storyName = 'Tabs drag and drop'; +DragAndDrop.parameters = { docs: { - storyDescription: `You can allow users to rearrange the tab order. + storyDescription: `You can allow users to rearrange the tab order. If this feature is enabled, users can drag and drop tabs to reorder them, either directly on the tab bar or inside the overflow menu. It is also possible to drag and drop tabs from the tab bar to the overflow menu and vice versa. - There're 4 classes for drag and drop: - use \`fd-icon-tab-bar__item--dnd-preview\` to indicate the element that is being dragged; + There're 4 classes for drag and drop: + use \`fd-icon-tab-bar__item--dnd-preview\` to indicate the element that is being dragged; use \`fd-icon-tab-bar__item--dnd-hovered\` when dragging over an item. This class indicates that tab, htat is being dragged, can be inserted into the current one; \`fd-icon-tab-bar__item--dnd-separator\` adds a visual indicator before the tab, to which is applied, when element that is being dragged can be insterted before particular one. When used with the subtab, separator will be vertical; diff --git a/stories/icon/BusinessSuiteInAppSymbols/iconBusinessSuite.stories.js b/stories/icon/BusinessSuiteInAppSymbols/iconBusinessSuite.stories.js index fbf3e8cc3c..ce7537f171 100644 --- a/stories/icon/BusinessSuiteInAppSymbols/iconBusinessSuite.stories.js +++ b/stories/icon/BusinessSuiteInAppSymbols/iconBusinessSuite.stories.js @@ -19,7 +19,7 @@ Note: If an icon needs to be selected or have any interaction states, it is reco } }; -export const sizes = () => ` +export const Sizes = () => ` <span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart"></span> <br /> @@ -28,7 +28,7 @@ export const sizes = () => ` <span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart" style="font-size:5rem"></span> `; -sizes.parameters = { +Sizes.parameters = { docs: { iframeHeight: 250, storyDescription: 'Icons don’t have predefined sizes because they align with the font size value. They are vector graphics, meaning they can be easily resized without compromising their appearance. And because icons are essentially a font, there are unlimited sizes.' @@ -51,7 +51,7 @@ sizes.parameters = { * | Positive | ` sap-icon-businessSuiteInAppSymbols--color-positive` | */ -export const colors = () => ` +export const Colors = () => ` <span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart" style="font-size:5rem"></span> <span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart sap-icon-businessSuiteInAppSymbols--color-default" style="font-size:5rem"></span> <span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart sap-icon-businessSuiteInAppSymbols--color-contrast sap-icon-businessSuiteInAppSymbols--background-contrast" style="font-size:5rem"></span> @@ -64,7 +64,7 @@ export const colors = () => ` <span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart sap-icon-businessSuiteInAppSymbols--color-positive" style="font-size:5rem"></span> `; -export const businessSuiteIcons = () => { +export const BusinessSuiteIcons = () => { const div = document.createElement('div'); div.className = 'fddocs-container'; div.innerHTML = dataBusinessSuite.businessSuiteIcons.map((icon) => { @@ -78,7 +78,7 @@ export const businessSuiteIcons = () => { return div.outerHTML; }; -businessSuiteIcons.parameters = { +BusinessSuiteIcons.parameters = { docs: { iframeHeight: 200, storyDescription: 'For icons of <b>BusinessSuiteInAppSymbols</b> font-family add the `sap-icon-businessSuiteInAppSymbols--{icon-name}` modifier class identifying the icon style to the `sap-icon-businessSuiteInAppSymbols` class. For example, for a <i>heart</i> icon, add `sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart` with the desired font size value.' diff --git a/stories/icon/SAPIcons/icon.stories.js b/stories/icon/SAPIcons/icon.stories.js index f702945d45..ab65c2c8a0 100644 --- a/stories/icon/SAPIcons/icon.stories.js +++ b/stories/icon/SAPIcons/icon.stories.js @@ -19,7 +19,7 @@ Note: If an icon needs to be selected or have any interaction states, it is reco } }; -export const sizes = () => ` +export const Sizes = () => ` <span class="sap-icon sap-icon--cart"></span> <br /> @@ -28,7 +28,7 @@ export const sizes = () => ` <span class="sap-icon sap-icon--cart" style="font-size:10rem"></span> `; -sizes.parameters = { +Sizes.parameters = { docs: { iframeHeight: 250, storyDescription: 'Icons don’t have predefined sizes because they align with the font size value. They are vector graphics, meaning they can be easily resized without compromising their appearance. And because icons are essentially a font, there are unlimited sizes.' @@ -51,7 +51,7 @@ sizes.parameters = { * | Positive | `sap-icon--color-positive` | */ -export const colors = () => ` +export const Colors = () => ` <span class="sap-icon sap-icon--cart" style="font-size:5rem" tabindex="0"></span> <span class="sap-icon sap-icon--cart sap-icon--color-default" style="font-size:5rem"></span> <span class="sap-icon sap-icon--cart sap-icon--color-contrast sap-icon--background-contrast" style="font-size:5rem"></span> @@ -64,7 +64,7 @@ export const colors = () => ` <span class="sap-icon sap-icon--cart sap-icon--color-positive" style="font-size:5rem"></span> `; -export const availableIcons = () => { +export const AvailableIcons = () => { const div = document.createElement('div'); div.className = 'fddocs-container'; div.innerHTML = data.icons.map((icon) => { @@ -78,7 +78,7 @@ export const availableIcons = () => { return div.outerHTML; }; -availableIcons.parameters = { +AvailableIcons.parameters = { docs: { iframeHeight: 200, storyDescription: 'There are several icons available. To display any one of these icons, add the `sap-icon--{icon-name}` modifier class identifying the icon style to the `sap-icon` class. For example, for a search icon, add `sap-icon sap-icon--search` with the desired font size value.' diff --git a/stories/icon/TNTIcons/iconTnt.stories.js b/stories/icon/TNTIcons/iconTnt.stories.js index f24cb416da..3fc579556e 100644 --- a/stories/icon/TNTIcons/iconTnt.stories.js +++ b/stories/icon/TNTIcons/iconTnt.stories.js @@ -19,7 +19,7 @@ Note: If an icon needs to be selected or have any interaction states, it is reco } }; -export const sizes = () => ` +export const Sizes = () => ` <span class="sap-icon-TNT sap-icon-TNT--exceptions"></span> <br /> @@ -28,7 +28,7 @@ export const sizes = () => ` <span class="sap-icon-TNT sap-icon-TNT--exceptions" style="font-size:5rem"></span> `; -sizes.parameters = { +Sizes.parameters = { docs: { iframeHeight: 250, storyDescription: 'Icons don’t have predefined sizes because they align with the font size value. They are vector graphics, meaning they can be easily resized without compromising their appearance. And because icons are essentially a font, there are unlimited sizes.' @@ -51,7 +51,7 @@ sizes.parameters = { * | Positive | ` sap-icon-TNT--color-positive` | */ -export const colors = () => ` +export const Colors = () => ` <span class="sap-icon-TNT sap-icon-TNT--exceptions" style="font-size:5rem"></span> <span class="sap-icon-TNT sap-icon-TNT--exceptions sap-icon-TNT--color-default" style="font-size:5rem"></span> <span class="sap-icon-TNT sap-icon-TNT--exceptions sap-icon-TNT--color-contrast sap-icon-TNT--background-contrast" style="font-size:5rem"></span> @@ -64,7 +64,7 @@ export const colors = () => ` <span class="sap-icon-TNT sap-icon-TNT--exceptions sap-icon-TNT--color-positive" style="font-size:5rem"></span> `; -export const tntIcons = () => { +export const TntIcons = () => { const div = document.createElement('div'); div.className = 'fddocs-container'; div.innerHTML = dataTNT.tntIcons.map((icon) => { @@ -78,7 +78,7 @@ export const tntIcons = () => { return div.outerHTML; }; -tntIcons.parameters = { +TntIcons.parameters = { docs: { iframeHeight: 200, storyDescription: 'For icons of <b>SAP-icons-TNT</b> font-family add the `sap-icon-TNT--{icon-name}` modifier class identifying the icon style to the `sap-icon-TNT` class. For example, for an <i>exceptions</i> icon, add `sap-icon-TNT sap-icon-TNT--exceptions` with the desired font size value.' diff --git a/stories/illustrated-message/illustrated-message.stories.js b/stories/illustrated-message/illustrated-message.stories.js index e9f673fc28..28fa5cc18e 100644 --- a/stories/illustrated-message/illustrated-message.stories.js +++ b/stories/illustrated-message/illustrated-message.stories.js @@ -82,7 +82,6 @@ export const Scene = () => `<div style="width: 100%; display: flex; justify-cont ${localStyles}`; -Scene.storyName = 'Scene'; Scene.parameters = { docs: { iframeHeight: 330 @@ -131,7 +130,6 @@ export const Dialog = () => `<div style="width: 100%; display: flex; justify-con </div> `; -Dialog.storyName = 'Dialog'; Dialog.parameters = { docs: { iframeHeight: 330, @@ -165,7 +163,6 @@ export const Spot = () => `<div style="width: 100%; display: flex; justify-conte </div> `; -Spot.storyName = 'Spot'; Spot.parameters = { docs: { iframeHeight: 330, diff --git a/stories/info-label/info-label.stories.js b/stories/info-label/info-label.stories.js index a86dd5ac59..41599feba5 100644 --- a/stories/info-label/info-label.stories.js +++ b/stories/info-label/info-label.stories.js @@ -3,7 +3,7 @@ export default { parameters: { description: ` Info Label is a small non-interactive numeric or text-based label. -Its primary use is to add user-defined characteristic to an object. +Its primary use is to add user-defined characteristic to an object. Use the Info Label base class with following modifiers: - \`fd-info-label\` @@ -20,7 +20,7 @@ Use the Info Label base class with following modifiers: * Options include numbers from 1 to 10. */ -export const colors = () => `<div class="fddocs-container"> +export const Colors = () => `<div class="fddocs-container"> <span class="fd-info-label fd-info-label--accent-color-1"> <span class="fd-info-label__text">Info Label</span> </span> @@ -62,11 +62,11 @@ export const colors = () => `<div class="fddocs-container"> </span> </div> `; -colors.storyName = 'Color Flavors'; +Colors.storyName = 'Color Flavors'; /** Use the `fd-info-label--icon` modifier class and icon type to create Info Label with Icon. */ -export const icons = () => `<div class="fddocs-container"> +export const Icons = () => `<div class="fddocs-container"> <span class="fd-info-label fd-info-label--accent-color-1 fd-info-label--icon"> <i role="presentation" class="fd-info-label__icon sap-icon--future"></i> <span class="fd-info-label__text">Info Label</span> @@ -77,11 +77,11 @@ export const icons = () => `<div class="fddocs-container"> </span> </div> `; -icons.storyName = 'Info Label with Icon'; +Icons.storyName = 'Info Label with Icon'; /** For Numeric Info Label use the `fd-info-label--numeric` modifier class. */ -export const numeric = () => `<div class="fddocs-container"> +export const Numeric = () => `<div class="fddocs-container"> <span class="fd-info-label fd-info-label--numeric fd-info-label--accent-color-1"> <span class="fd-info-label__text">6</span> </span> @@ -95,4 +95,4 @@ export const numeric = () => `<div class="fddocs-container"> </span> </div> `; -numeric.storyName = 'Numeric Info Label'; +Numeric.storyName = 'Numeric Info Label'; diff --git a/stories/input-group/input-group.stories.js b/stories/input-group/input-group.stories.js index 3e38333e98..7796a20aec 100644 --- a/stories/input-group/input-group.stories.js +++ b/stories/input-group/input-group.stories.js @@ -7,7 +7,7 @@ export default { } }; -export const sizes = () => ` +export const Sizes = () => ` <div class="fd-form-item"> <label class="fd-form-label" for="aqwsde111">Default Size </label> <div class="fd-input-group"> @@ -25,14 +25,14 @@ export const sizes = () => ` </div> `; -sizes.parameters = { +Sizes.parameters = { docs: { iframeHeight: 160, storyDescription: 'The Input Group supports **compact** mode (by virtue of the `--compact` modifier on child components).' } }; -export const textAddOn = () => ` +export const TextAddOn = () => ` <div class="fd-form-item"> <label class="fd-form-label" for="aqwsde113">Left Aligned Text Add-on</label> <div class="fd-input-group"> @@ -67,14 +67,14 @@ export const textAddOn = () => ` </div> `; -textAddOn.parameters = { +TextAddOn.parameters = { docs: { iframeHeight: 400, storyDescription: 'The Input Group with text add-on component is typically used to specify the type of the data being entered, such as currency or unit of measure. This add-on can be placed at the left or right (or both) of the input element.' } }; -export const inputWithIcons = () => ` +export const InputWithIcons = () => ` <div class="fd-form-item"> <label class="fd-form-label" for="aqwsde117">Input with icon on the left</label> <div class="fd-input-group"> @@ -106,14 +106,14 @@ export const inputWithIcons = () => ` </div> `; -inputWithIcons.parameters = { +InputWithIcons.parameters = { docs: { iframeHeight: 300, storyDescription: 'The Input with add-on supports icons.' } }; -export const inputWithActions = () => ` +export const InputWithActions = () => ` <div class="fd-form-item"> <label class="fd-form-label" for="aqwsde120">Input with text add-on</label> <div class="fd-input-group"> @@ -131,7 +131,7 @@ export const inputWithActions = () => ` <div class="fd-input-group"> <input class="fd-input fd-input-group__input" type="text" id="aqwsde121" name="" value="1000000"> <span class="fd-input-group__addon fd-input-group__addon--button"> - <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent" aria-label="Navigation"> + <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent" aria-label="Navigation"> <i class="sap-icon--navigation-down-arrow"></i> </button> </span> @@ -143,7 +143,7 @@ export const inputWithActions = () => ` <div class="fd-input-group"> <input class="fd-input fd-input--compact fd-input-group__input" type="text" id="aqwsde122" name="" value="1000000"> <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--compact"> - <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent fd-button--compact" aria-label="Navigation"> + <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent fd-button--compact" aria-label="Navigation"> <i class="sap-icon--navigation-down-arrow"></i> </button> </span> @@ -163,14 +163,14 @@ export const inputWithActions = () => ` </div> `; -inputWithActions.parameters = { +InputWithActions.parameters = { docs: { iframeHeight: 300, storyDescription: 'The Input with add-on supports actions. Actions can be shown with a text label or icon.' } }; -export const states = () => ` +export const States = () => ` <div class="fd-form-item"> <label class="fd-form-label" for="aqwsde124">Success</label> <div class="fd-input-group is-success"> @@ -256,13 +256,13 @@ export const states = () => ` </div> `; -states.parameters = { +States.parameters = { docs: { iframeHeight: 700 } }; -export const focus = () => ` +export const Focus = () => ` <div class="fd-form-item"> <label class="fd-form-label" for="aqwsde133">Default</label> <div class="fd-input-group is-focus"> @@ -282,14 +282,14 @@ export const focus = () => ` </div> `; -focus.parameters = { +Focus.parameters = { docs: { iframeHeight: 200, storyDescription: 'The Input Group supports <b>focus</b> state, it can be added by putting `.is-focus` class to component.' } }; -export const testOne = () => ` +export const TestOne = () => ` <div class="fd-input-group "> <input aria-label="test" class="input-group-input-playground fd-input-group__input" placeholder="" value="19387309" /> <span class="fd-input-group__addon "> @@ -387,13 +387,13 @@ export const testOne = () => ` </div> `; -testOne.parameters = { +TestOne.parameters = { docs: { disable: true } }; -export const testTwo = () => ` +export const TestTwo = () => ` <div class="fd-input-group "> <input aria-label="test" class="input-group-input-playground input-group-input-playground--compact fd-input-group__input" placeholder="" value="19387309" /> <span class="fd-input-group__addon fd-input-group__addon--compact"> @@ -419,12 +419,12 @@ export const testTwo = () => ` </div> `; -testTwo.parameters = { +TestTwo.parameters = { docs: { disable: true } }; -export const testThree = () => ` +export const TestThree = () => ` <div class="fd-input-group is-success "> <span class="fd-input-group__addon "> $ @@ -538,13 +538,13 @@ export const testThree = () => ` </div> `; -testThree.parameters = { +TestThree.parameters = { docs: { disable: true } }; -export const testFour = () => ` +export const TestFour = () => ` <div class="fd-input-group "> <input aria-label="test" class="input-group-input-playground fd-input-group__input" placeholder="" value="19387309" /> <span class="fd-input-group__addon fd-input-group__addon--button "> @@ -553,7 +553,7 @@ export const testFour = () => ` </span> </div> <br /> - + <div class="fd-input-group "> <span class="fd-input-group__addon fd-input-group__addon--button "> <button class="btn-playground fd-input-group__button">Click Me</button> @@ -562,7 +562,7 @@ export const testFour = () => ` <input aria-label="test" class="input-group-input-playground fd-input-group__input" placeholder="" value="19387309" /> </div> <br /> - + <div class="fd-input-group "> <span class="fd-input-group__addon fd-input-group__addon--button "> <button class="btn-playground fd-input-group__button">Click Me</button> @@ -575,7 +575,7 @@ export const testFour = () => ` </span> </div> <br /> - + <div class="fd-input-group "> <textarea aria-label="test" class="input-group-input-playground fd-input-group__input" placeholder="" value="19387309"></textarea> <span class="fd-input-group__addon fd-input-group__addon--button "> @@ -584,7 +584,7 @@ export const testFour = () => ` </span> </div> <br /> - + <div class="fd-input-group "> <span class="fd-input-group__addon fd-input-group__addon--button "> <button class="btn-playground fd-input-group__button">Click Me</button> @@ -593,7 +593,7 @@ export const testFour = () => ` <textarea aria-label="test" class="input-group-input-playground fd-input-group__input" placeholder="" value="19387309"></textarea> </div> <br /> - + <div class="fd-input-group "> <span class="fd-input-group__addon fd-input-group__addon--button "> <button class="btn-playground fd-input-group__button">Click Me</button> @@ -607,7 +607,7 @@ export const testFour = () => ` </div> <br /> <h3>Disabled</h3> - + <div class="fd-input-group is-disabled"> <input aria-label="test" class="input-group-input-playground fd-input-group__input" placeholder="" value="19387309" /> <span class="fd-input-group__addon fd-input-group__addon--button "> @@ -616,7 +616,7 @@ export const testFour = () => ` </span> </div> <br /> - + <div class="fd-input-group is-disabled"> <span class="fd-input-group__addon fd-input-group__addon--button "> <button class="btn-playground fd-input-group__button">Click Me</button> @@ -625,7 +625,7 @@ export const testFour = () => ` <input aria-label="test" class="input-group-input-playground fd-input-group__input" placeholder="" value="19387309" /> </div> <br /> - + <div class="fd-input-group is-disabled"> <span class="fd-input-group__addon fd-input-group__addon--button "> <button class="btn-playground fd-input-group__button">Click Me</button> @@ -638,7 +638,7 @@ export const testFour = () => ` </span> </div> <br /> - + <div class="fd-input-group is-disabled"> <textarea aria-label="test" class="input-group-input-playground fd-input-group__input" placeholder="" value="19387309"></textarea> <span class="fd-input-group__addon fd-input-group__addon--button "> @@ -647,7 +647,7 @@ export const testFour = () => ` </span> </div> <br /> - + <div class="fd-input-group is-disabled"> <span class="fd-input-group__addon fd-input-group__addon--button "> <button class="btn-playground fd-input-group__button">Click Me</button> @@ -656,7 +656,7 @@ export const testFour = () => ` <textarea aria-label="test" class="input-group-input-playground fd-input-group__input" placeholder="" value="19387309"></textarea> </div> <br /> - + <div class="fd-input-group is-disabled"> <span class="fd-input-group__addon fd-input-group__addon--button "> <button class="btn-playground fd-input-group__button">Click Me</button> @@ -670,13 +670,13 @@ export const testFour = () => ` </div> `; -testFour.parameters = { +TestFour.parameters = { docs: { disable: true } }; -export const testFive = () => ` +export const TestFive = () => ` <div class="fd-input-group is-success "> <span class="fd-input-group__addon "> $ @@ -790,13 +790,13 @@ export const testFive = () => ` </div> `; -testFive.parameters = { +TestFive.parameters = { docs: { disable: true } }; -export const testSix = () => ` +export const TestSix = () => ` <div class="fd-input-group fd-input-group--inline "> <span class="fd-input-group__addon "> phone @@ -811,7 +811,7 @@ export const testSix = () => ` </div> `; -testSix.parameters = { +TestSix.parameters = { docs: { disable: true } diff --git a/stories/input/input.stories.js b/stories/input/input.stories.js index aca5666d8d..5f971c8d53 100644 --- a/stories/input/input.stories.js +++ b/stories/input/input.stories.js @@ -21,7 +21,7 @@ Do not use the input field if: } }; -export const primary = () => ` +export const Primary = () => ` <div class="fd-form-item"> <label class="fd-form-label" for="input-1">Default input:</label> <input class="fd-input" type="text" id="input-1" placeholder="Field placeholder text"> @@ -109,9 +109,9 @@ export const primary = () => ` </div> `; -primary.storyName = 'Default'; +Primary.storyName = 'Default'; -primary.parameters = { +Primary.parameters = { docs: { iframeHeight: 500 } @@ -130,7 +130,7 @@ primary.parameters = { Along with Error and Warning, error messages should be displayed below the field so the user can correct the error and move forward. */ -export const states = () => ` +export const States = () => ` <div class="fd-form-item"> <label class="fd-form-label" for="input-1aa">Normal input:</label> <input class="fd-input" type="text" id="input-1aa" placeholder="Field placeholder text" aria-label="Image label"> diff --git a/stories/layout-grid/layout-grid.stories.js b/stories/layout-grid/layout-grid.stories.js index e70afd6195..2f7ccab19d 100644 --- a/stories/layout-grid/layout-grid.stories.js +++ b/stories/layout-grid/layout-grid.stories.js @@ -26,13 +26,13 @@ To use the grid, the user must use all of the \`fd-container\`, \`fd-row\`, and } }; -export const differentSizeColumns = () => `<div class='fd-container'> +export const DifferentSizeColumns = () => `<div class='fd-container'> <div class='fd-row'> <div class='fd-col'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>12 columns element</div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--11'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>11 columns element</div> @@ -41,7 +41,7 @@ export const differentSizeColumns = () => `<div class='fd-container'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>1 column element</div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--10'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'>10 columns element</div> @@ -50,7 +50,7 @@ export const differentSizeColumns = () => `<div class='fd-container'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'>2 columns element</div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--9'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-6'>9 columns element</div> @@ -59,7 +59,7 @@ export const differentSizeColumns = () => `<div class='fd-container'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-7'>3 columns element</div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--8'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-8'>8 columns element</div> @@ -68,7 +68,7 @@ export const differentSizeColumns = () => `<div class='fd-container'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-9'>4 columns element</div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--7'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-10'>7 columns element</div> @@ -77,7 +77,7 @@ export const differentSizeColumns = () => `<div class='fd-container'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-11'>5 columns element</div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--6'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-12'>6 columns element</div> @@ -86,7 +86,7 @@ export const differentSizeColumns = () => `<div class='fd-container'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>6 columns element</div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--5'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>5 columns element</div> @@ -95,7 +95,7 @@ export const differentSizeColumns = () => `<div class='fd-container'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>7 columns element</div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--4'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'>4 columns element</div> @@ -104,7 +104,7 @@ export const differentSizeColumns = () => `<div class='fd-container'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'>8 columns element</div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--3'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-6'>3 columns element</div> @@ -113,7 +113,7 @@ export const differentSizeColumns = () => `<div class='fd-container'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-7'>9 columns element</div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--2'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-8'>2 columns element</div> @@ -122,7 +122,7 @@ export const differentSizeColumns = () => `<div class='fd-container'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-9'>10 columns element</div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--1'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-10'>1 column element</div> @@ -131,7 +131,7 @@ export const differentSizeColumns = () => `<div class='fd-container'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-11'>11 columns element</div> </div> </div> - + <div class='fd-row'> <div class='fd-col'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-12'>12 columns element</div> @@ -140,27 +140,27 @@ export const differentSizeColumns = () => `<div class='fd-container'> </div> `; -differentSizeColumns.parameters = { +DifferentSizeColumns.parameters = { docs: { iframeHeight: 1150, storyDescription: 'To define the size of that column use the `fd-col--x` modifier, where `x` can go from 1-12' } }; -export const responsiveness = () => `<div class='fd-container'> +export const Responsiveness = () => `<div class='fd-container'> <div class='fd-row'> <div class='fd-col fd-col--12 fd-col-md--6 fd-col-lg--4 fd-col-xl--4'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>(1 cell)</div> </div> - + <div class='fd-col fd-col--12 fd-col-md--6 fd-col-lg--4 fd-col-xl--4'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>(2 cell)</div> </div> - + <div class='fd-col fd-col--12 fd-col-md--6 fd-col-lg--4 fd-col-xl--4'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>(3 cell)</div> </div> - + <div class='fd-col fd-col--12 fd-col-md--6 fd-col-lg--4 fd-col-xl--4'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'>(4 cell)</div> </div> @@ -168,37 +168,37 @@ export const responsiveness = () => `<div class='fd-container'> </div> `; -responsiveness.parameters = { +Responsiveness.parameters = { docs: { iframeHeight: 320, storyDescription: 'You can define different column sizes for each inflection point. In this example for extra large the cells are taking 4 columns out of 12 `fd-col-xl--4`; 4 columns out of 12 in large `fd-col-lg--4`; 6 columns out of 12 in medium `fd-col-md--6`, and 12 out of 12 in small `fd-col--12`' } }; -export const nesting = () => `<div class='fd-container'> +export const Nesting = () => `<div class='fd-container'> <div class='fd-row'> <div class='fd-col fd-col--2'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'> 2 col (~17%) </div> </div> - + <div class='fd-col fd-col--10'> <div class='fd-row'"> <div class='fd-col fd-col--2'> - <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'> + <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'> 2 col inner row 1 (~14%) - </div> + </div> </div> - + <div class='fd-col fd-col--10'> <div class='fd-row'> <div class='fd-col fd-col--6'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'> 6 coll inner row 2 (~34%) </div> - </div> - + </div> + <div class='fd-col fd-col--6'> <div class='fd-row'> <div class='fd-col fd-col--4'> @@ -206,7 +206,7 @@ export const nesting = () => `<div class='fd-container'> 4 coll inner row 3 (~10%) </div> </div> - + <div class='fd-col fd-col--8'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'> 8 coll inner row 3 (~23%) @@ -222,14 +222,14 @@ export const nesting = () => `<div class='fd-container'> </div> `; -nesting.parameters = { +Nesting.parameters = { docs: { iframeHeight: 150, storyDescription: 'Add an extra `fd-row` class in between inner rows when using nesting. It will add a gutter in between rows.' } }; -export const offset = () => `<div class='fd-container'> +export const Offset = () => `<div class='fd-container'> <div class='fd-row'> <div class='fd-col'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'> @@ -237,7 +237,7 @@ export const offset = () => `<div class='fd-container'> </div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--6'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'> @@ -245,36 +245,36 @@ export const offset = () => `<div class='fd-container'> </div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--8 fd-col--offset-4 fd-col-md--6 fd-col-md--offset-2 fd-col-lg--4 fd-col-lg--offset-4 fd-col-lx--3 fd-col-lx--offset-6'> - <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'> - Different column-width and offset in different inflection points + <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'> + Different column-width and offset in different inflection points </div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--6 fd-col--offset-6'> - <div class='docs-layout-grid-bg docs-layout-grid-bg--color-7'> - 6 columns with 6-column offset + <div class='docs-layout-grid-bg docs-layout-grid-bg--color-7'> + 6 columns with 6-column offset </div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--3 fd-col--offset-after-1 fd-col-md--offset-after-2 fd-col-lg--offset-after-2 fd-col-xl--offset-after-1'> - <div class='docs-layout-grid-bg docs-layout-grid-bg--color-8'> - 2 column-width and offset after in different inflection points + <div class='docs-layout-grid-bg docs-layout-grid-bg--color-8'> + 2 column-width and offset after in different inflection points </div> </div> - + <div class='fd-col fd-col--4 fd-col--offset-after-1'> - <div class='docs-layout-grid-bg docs-layout-grid-bg--color-9'> + <div class='docs-layout-grid-bg docs-layout-grid-bg--color-9'> 4 columns with 2-column offset after </div> </div> - + <div class='fd-col fd-col--2'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-12'> 2 column element @@ -284,49 +284,49 @@ export const offset = () => `<div class='fd-container'> </div> `; -offset.parameters = { +Offset.parameters = { docs: { iframeHeight: 450, storyDescription: 'To add an offset to the left of the column for all sizes use the `--offset-x` modifier. X will be the size of your choice. If the column after the offset col no longer fits in parent container it will switch to the next line. To add an offset to the left of the column for certain sizes and above use the `--offset-x--size` modifier, where size is either s,m,l,xl. To make the offset after and not before use the `--offset-after-x--size` modifier.' } }; -export const noHorizontalGap = () => `<div class='fd-container fd-container--no-horizontal-gap'> +export const NoHorizontalGap = () => `<div class='fd-container fd-container--no-horizontal-gap'> <div class='fd-row'> <div class='fd-col fd-col--8'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'> 8 col no gap </div> </div> - + <div class='fd-col fd-col--4'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'> 4 col no gap </div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--6'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'> 6 col no gap </div> </div> - + <div class='fd-col fd-col--6'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'> 6 col no gap </div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--4'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'> 4 col no gap </div> </div> - + <div class='fd-col fd-col--8'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-6'> 8 col no gap @@ -336,49 +336,49 @@ export const noHorizontalGap = () => `<div class='fd-container fd-container--no- </div> `; -noHorizontalGap.parameters = { +NoHorizontalGap.parameters = { docs: { iframeHeight: 300, storyDescription: 'To remove gutters between columns apply the `fd-container--no-horizontal-gap` modifier to the container.' } }; -export const noVerticalGap = () => `<div class='fd-container fd-container--no-vertical-gap'> +export const NoVerticalGap = () => `<div class='fd-container fd-container--no-vertical-gap'> <div class='fd-row'> <div class='fd-col fd-col--8'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'> 8 col no gap </div> </div> - + <div class='fd-col fd-col--4'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'> 4 col no gap </div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--6'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'> 6 col no gap </div> </div> - + <div class='fd-col fd-col--6'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'> 6 col no gap </div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--4'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'> 4 col no gap </div> </div> - + <div class='fd-col fd-col--8'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-6'> 8 col no gap @@ -388,49 +388,49 @@ export const noVerticalGap = () => `<div class='fd-container fd-container--no-ve </div> `; -noVerticalGap.parameters = { +NoVerticalGap.parameters = { docs: { iframeHeight: 300, storyDescription: 'To remove gutters between rows apply the `fd-container--no-vertical-gap` modifier to the container.' } }; -export const noGap = () => `<div class='fd-container fd-container--no-horizontal-gap fd-container--no-vertical-gap'> +export const NoGap = () => `<div class='fd-container fd-container--no-horizontal-gap fd-container--no-vertical-gap'> <div class='fd-row'> <div class='fd-col fd-col--8'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'> 8 col no gap </div> </div> - + <div class='fd-col fd-col--4'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'> 4 col no gap </div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--6'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'> 6 col no gap </div> </div> - + <div class='fd-col fd-col--6'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'> 6 col no gap </div> </div> </div> - + <div class='fd-row'> <div class='fd-col fd-col--4'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'> 4 col no gap </div> </div> - + <div class='fd-col fd-col--8'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-6'> 8 col no gap @@ -440,27 +440,27 @@ export const noGap = () => `<div class='fd-container fd-container--no-horizontal </div> `; -noGap.parameters = { +NoGap.parameters = { docs: { iframeHeight: 300, storyDescription: 'To remove gutters between rows and columns apply both the `fd-container--no-vertical-gap` and `fd-container--no-horizontal-gap` modifiers to the container.' } }; -export const autoAdjusting = () => `<div class='fd-container'> +export const AutoAdjusting = () => `<div class='fd-container'> <div class='fd-row'> <div class='fd-col fd-col--full'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'> Auto adjusting col before 7 col </div> </div> - + <div class='fd-col fd-col--7'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'> 7 col </div> </div> - + <div class='fd-col fd-col--full'> <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'> Auto adjusting col after 7 col @@ -470,7 +470,7 @@ export const autoAdjusting = () => `<div class='fd-container'> </div> `; -autoAdjusting.parameters = { +AutoAdjusting.parameters = { docs: { iframeHeight: 300, storyDescription: 'To make the column auto adjust and occupy the remaining space of the row use the `--full` modifier. There is a minimum width of 1/12 columns' diff --git a/stories/layout-panel/layout-panel.stories.js b/stories/layout-panel/layout-panel.stories.js index 110100073b..891e74ee4e 100644 --- a/stories/layout-panel/layout-panel.stories.js +++ b/stories/layout-panel/layout-panel.stories.js @@ -20,7 +20,7 @@ export default { } }; -export const primary = () => `<div class="fd-layout-panel"> +export const Primary = () => `<div class="fd-layout-panel"> <div class="fd-layout-panel__header"> <div class="fd-layout-panel__head"> <div class="fd-layout-panel__title"> diff --git a/stories/link/link.stories.js b/stories/link/link.stories.js index 75fdcf5194..0dbb8fb956 100644 --- a/stories/link/link.stories.js +++ b/stories/link/link.stories.js @@ -17,7 +17,7 @@ export default { - There is no target or reference to be linked to. ##Accessibility -Use a meaningful link text that indicates what will happen when the user interacts with the link i.e. *Open Sales Order*. +Use a meaningful link text that indicates what will happen when the user interacts with the link i.e. *Open Sales Order*. Avoid texts such as *Click Here* or *Link*, as these do not make it clear to the user what the purpose of the link is. `, tags: ['f3', 'a11y', 'theme'], @@ -25,7 +25,7 @@ Avoid texts such as *Click Here* or *Link*, as these do not make it clear to the } }; -export const primary = () => ` +export const Primary = () => ` <a href="#" class="fd-link" tabindex="0">Default link</a> <br><br> <a href="#" class="fd-link fd-link--emphasized" tabindex="0">Emphasized link</a> @@ -39,22 +39,22 @@ export const primary = () => ` </div> <br><br> <a href="#" class="fd-link" tabindex="0"> - Right icon link + Right icon link <span class="sap-icon--slim-arrow-right sap-icon--s"></span> </a> <br><br> <a href="#" class="fd-link" tabindex="0"> - <span class="sap-icon--slim-arrow-left sap-icon--s"></span> + <span class="sap-icon--slim-arrow-left sap-icon--s"></span> Left icon link </a> `; -primary.storyName = 'Types'; -primary.parameters = { +Primary.storyName = 'Types'; +Primary.parameters = { docs: { iframeHeight: 300, storyDescription: `There are different types of links for various use cases. - + | Types | Modifier class | Use to... | | ----:| :--------------- | :--------------| | Default | *n/a* | Display a simple link. | @@ -66,7 +66,7 @@ primary.parameters = { You can display a link with an icon placed on either side of the link text. | Icon style | Modifier class | -| ----------: | :-------------| +| ----------: | :-------------| | Left Arrow | \`sap-icon--slim-arrow-left sap-icon--s\` | | Right Arrow | \`sap-icon--slim-arrow-right sap-icon--s\` | ` diff --git a/stories/list-grid/list-grid.stories.js b/stories/list-grid/list-grid.stories.js index c4460709d1..0224b5d5d0 100644 --- a/stories/list-grid/list-grid.stories.js +++ b/stories/list-grid/list-grid.stories.js @@ -40,7 +40,7 @@ The grid list is usually used as an alternative view for a list or table. It is } }; -export const noneMode = () => `<div style="min-height: 500px;"> +export const NoneMode = () => `<div style="min-height: 500px;"> <div class="fd-grid-list"> <div class="fd-container"> <div class="fd-row"> @@ -90,7 +90,7 @@ export const noneMode = () => `<div style="min-height: 500px;"> <p>Anytown, SD 57401</p> <p>USA</p> </div> - + <a href="#" class="fd-link" tabindex="0">john_li@example.com</a> </div> </div> @@ -120,7 +120,7 @@ export const noneMode = () => `<div style="min-height: 500px;"> <p>Anytown, SD 57401</p> <p>USA</p> </div> - + <a href="#" class="fd-link" tabindex="0">john_li@example.com</a> </div> </div> @@ -217,7 +217,7 @@ export const noneMode = () => `<div style="min-height: 500px;"> <p>Anytown, SD 57401</p> <p>USA</p> </div> - + <a href="#" class="fd-link" tabindex="0">john_li@example.com</a> </div> </div> @@ -252,16 +252,16 @@ export const noneMode = () => `<div style="min-height: 500px;"> </div> `; -noneMode.storyName = 'None mode'; +NoneMode.storyName = 'None mode'; -noneMode.parameters = { +NoneMode.parameters = { docs: { storyDescription: 'Items cannot be selected but can still use "navigation", which allows click handling on specific items.' } }; -export const singleSelectMasterMode = () => `<div style="min-height: 300px;"> +export const SingleSelectMasterMode = () => `<div style="min-height: 300px;"> <div class="fd-grid-list fd-grid-list--mode-single-select"> <div class="fd-container"> <div class="fd-row"> @@ -347,7 +347,7 @@ export const singleSelectMasterMode = () => `<div style="min-height: 300px;"> <p>Anytown, SD 57401</p> <p>USA</p> </div> - + <a href="#" class="fd-link" tabindex="0">john_li@example.com</a> </div> </div> @@ -416,9 +416,9 @@ export const singleSelectMasterMode = () => `<div style="min-height: 300px;"> </div> `; -singleSelectMasterMode.storyName = 'Single select mode'; +SingleSelectMasterMode.storyName = 'Single select mode'; -singleSelectMasterMode.parameters = { +SingleSelectMasterMode.parameters = { docs: { storyDescription: ` One item in the grid list can be selected. Need click on an item to select it. @@ -427,7 +427,7 @@ To turn on the Single select mode, add the \`fd-grid-list--mode-single-select\` } }; -export const singleSelectLeftMode = () => `<div style="min-height: 300px;"> +export const SingleSelectLeftMode = () => `<div style="min-height: 300px;"> <div class="fd-grid-list fd-grid-list--mode-single-select-left"> <div class="fd-container"> <div class="fd-row"> @@ -584,9 +584,9 @@ export const singleSelectLeftMode = () => `<div style="min-height: 300px;"> </div> `; -singleSelectLeftMode.storyName = 'Single select left mode'; +SingleSelectLeftMode.storyName = 'Single select left mode'; -singleSelectLeftMode.parameters = { +SingleSelectLeftMode.parameters = { docs: { storyDescription: ` One item in the grid list can be selected. For this, the grid list provides radio buttons on the left side of each item toolbar. @@ -595,7 +595,7 @@ To turn on the Single select left mode, add the \`fd-grid-list--mode-single-sele } }; -export const singleSelectRightMode = () => `<div style="min-height: 300px;"> +export const SingleSelectRightMode = () => `<div style="min-height: 300px;"> <div class="fd-grid-list fd-grid-list--mode-single-select-right"> <div class="fd-container"> <div class="fd-row"> @@ -753,9 +753,9 @@ export const singleSelectRightMode = () => `<div style="min-height: 300px;"> </div> `; -singleSelectRightMode.storyName = 'Single select right mode'; +SingleSelectRightMode.storyName = 'Single select right mode'; -singleSelectRightMode.parameters = { +SingleSelectRightMode.parameters = { docs: { storyDescription: ` One item in the grid list can be selected. For this, the grid list provides radio buttons on the left side of each item toolbar. @@ -764,7 +764,7 @@ To turn on the Single select right mode, add the \`fd-grid-list--mode-single-sel } }; -export const multiSelectMode = () => `<div style="min-height: 300px;"> +export const MultiSelectMode = () => `<div style="min-height: 300px;"> <div class="fd-grid-list fd-grid-list--mode-multi-select"> <div class="fd-container"> <div class="fd-row"> @@ -795,7 +795,7 @@ export const multiSelectMode = () => `<div style="min-height: 300px;"> <div class="fd-toolbar fd-grid-list__item-toolbar"> <input type="checkbox" class="fd-checkbox fd-checkbox--compact fd-grid-list__checkbox-input" id="Ai4ez611c" aria-label="John Li, Product Owner, Company B" checked> <label class="fd-checkbox__label fd-checkbox__label--compact fd-grid-list__checkbox-label" for="Ai4ez611c" tabindex="-1"></label> - + <span class="fd-toolbar__spacer"></span> <span class="fd-grid-list__item-counter" aria-label="Item has 10 children">10</span> @@ -925,9 +925,9 @@ export const multiSelectMode = () => `<div style="min-height: 300px;"> </div> `; -multiSelectMode.storyName = 'Multi select mode'; +MultiSelectMode.storyName = 'Multi select mode'; -multiSelectMode.parameters = { +MultiSelectMode.parameters = { docs: { storyDescription: ` Users can select one or more items. For this, the grid list provides checkboxes on the left side of each item toolbar. @@ -936,7 +936,7 @@ To turn on the Multi select mode, add the \`fd-grid-list--mode-multi-select\` mo } }; -export const deleteMode = () => `<div style="min-height: 300px;"> +export const DeleteMode = () => `<div style="min-height: 300px;"> <div class="fd-grid-list fd-grid-list--mode-delete"> <div class="fd-container"> <div class="fd-row"> @@ -972,7 +972,7 @@ export const deleteMode = () => `<div style="min-height: 300px;"> <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Delete"> <i class="sap-icon--decline"></i> </button> - + <button class="fd-button fd-button--compact fd-button--transparent fd-grid-list__btn-navigation" aria-label="Navigation"> <i class="sap-icon--navigation-right-arrow"></i> </button> @@ -1096,9 +1096,9 @@ export const deleteMode = () => `<div style="min-height: 300px;"> </div> `; -deleteMode.storyName = 'Delete mode'; +DeleteMode.storyName = 'Delete mode'; -deleteMode.parameters = { +DeleteMode.parameters = { docs: { storyDescription: ` This places a Delete button on the right side of an item toolbar. @@ -1107,7 +1107,7 @@ To turn on the Delete mode, add the \`fd-grid-list--mode-delete\` modifier class } }; -export const group = () => `<div style="min-height: 600px;"> +export const Group = () => `<div style="min-height: 600px;"> <div class="fd-grid-list"> <div class="fd-container"> <div class="fd-row"> @@ -1255,9 +1255,7 @@ export const group = () => `<div style="min-height: 600px;"> </div> `; -group.storyName = 'Group'; - -group.parameters = { +Group.parameters = { docs: { storyDescription: ` If grouped, a group header is displayed above all items which belong to the corresponding group. The group header is not interactive. @@ -1266,7 +1264,7 @@ To create grid list group headers use \`fd-grid-list__group-header\` class. } }; -export const states = () => `<div style="min-height: 600px;"> +export const States = () => `<div style="min-height: 600px;"> <div class="fd-grid-list"> <div class="fd-container"> <div class="fd-row"> @@ -1366,7 +1364,7 @@ export const states = () => `<div style="min-height: 600px;"> <p>Anytown, SD 57401</p> <p>USA</p> </div> - + <a href="#" class="fd-link" tabindex="0">john_li@example.com</a> </div> @@ -1449,9 +1447,7 @@ export const states = () => `<div style="min-height: 600px;"> </div> `; -states.storyName = 'States'; - -states.parameters = { +States.parameters = { docs: { storyDescription: ` To apply state, add the corresponding class \`.fd-grid-list__item--(unread|error|locked|draft)\` to the \`.fd-grid-list__item\`. @@ -1459,7 +1455,7 @@ To apply state, add the corresponding class \`.fd-grid-list__item--(unread|error } }; -export const highlight = () => `<div style="min-height: 350px;"> +export const Highlight = () => `<div style="min-height: 350px;"> <div class="fd-grid-list"> <div class="fd-container"> <div class="fd-row"> @@ -1608,9 +1604,7 @@ export const highlight = () => `<div style="min-height: 350px;"> </div> `; -highlight.storyName = 'Highlight'; - -highlight.parameters = { +Highlight.parameters = { docs: { storyDescription: ` A highlight indicator is shown in front of the item it needs to show that an item needs attention. @@ -1619,7 +1613,7 @@ To add highlight indicator, add a span element with \`.fd-grid-list__highlight f } }; -export const filterInfobar = () => `<div style="min-height: 350px;"> +export const FilterInfobar = () => `<div style="min-height: 350px;"> <div class="fd-grid-list"> <div class="fd-container"> <div class="fd-row"> @@ -1768,9 +1762,7 @@ export const filterInfobar = () => `<div style="min-height: 350px;"> </div> `; -filterInfobar.storyName = 'Filter Infobar'; - -filterInfobar.parameters = { +FilterInfobar.parameters = { docs: { storyDescription: ` The filter information panel displays the selected filters. @@ -1779,7 +1771,7 @@ To show filter information panel, follow the current example. } }; -export const more = () => `<div style="min-height: 400px;"> +export const More = () => `<div style="min-height: 400px;"> <div class="fd-grid-list"> <div class="fd-container"> <div class="fd-row"> @@ -1925,9 +1917,9 @@ export const more = () => `<div style="min-height: 400px;"> </div> `; -more.storyName = '"More" Button'; +More.storyName = '"More" Button'; -more.parameters = { +More.parameters = { docs: { storyDescription: ` The More button loads more items to the front end if not all items have yet been loaded. @@ -1936,7 +1928,7 @@ To show "More" button, follow the current example. } }; -export const footer = () => `<div style="min-height: 300px;"> +export const Footer = () => `<div style="min-height: 300px;"> <div class="fd-grid-list"> <div class="fd-container"> <div class="fd-row"> @@ -2081,9 +2073,7 @@ export const footer = () => `<div style="min-height: 300px;"> </div> `; -footer.storyName = 'Footer'; - -footer.parameters = { +Footer.parameters = { docs: { storyDescription: ` The footer can be used to display additional static information relating to the content. diff --git a/stories/list/byline/byline-list.stories.js b/stories/list/byline/byline-list.stories.js index e47dbbca44..7ce583ad88 100644 --- a/stories/list/byline/byline-list.stories.js +++ b/stories/list/byline/byline-list.stories.js @@ -32,7 +32,7 @@ Modifier/Class | Description } }; -export const standard = () => `<h4>Standard size</h4> +export const Standard = () => `<h4>Standard size</h4> <ul class="fd-list fd-list--byline" role="list"> <li role="listitem" tabindex="0" class="fd-list__item"> <span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span> @@ -117,9 +117,9 @@ style="background-image: url('assets/images/backgrounds/Godafoss_waterfall_in_no </ul> `; -standard.storyName = 'Default'; +Standard.storyName = 'Default'; -standard.parameters = { +Standard.parameters = { docs: { iframeHeight: 785, storyDescription: `The default byline list dislays list items in the standard size, which is ideal for mobile. To display the byline list in compact mode (for desktop), add the \`fd-list--compact\` modifier class to the main element. @@ -127,7 +127,7 @@ standard.parameters = { } }; -export const attachment = () => `<h4>Standard size</h4> +export const Attachment = () => `<h4>Standard size</h4> <ul class="fd-list fd-list--byline" role="list"> <li role="listitem" tabindex="0" class="fd-list__item"> <span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--attachment-photo"></i></span> @@ -155,9 +155,7 @@ export const attachment = () => `<h4>Standard size</h4> </ul> `; -attachment.storyName = 'Attachment'; - -attachment.parameters = { +Attachment.parameters = { docs: { iframeHeight: 785, storyDescription: `The Attachment List shares the same specification as the Standard List with Byline. The only difference is that if two text items are set within the Byline row, the text aligned to the right is always standard text (i.e. not semantic text) @@ -165,26 +163,26 @@ attachment.parameters = { } }; -export const navigation = () => `<ul class="fd-list fd-list--byline fd-list--navigation" role="list"> +export const Navigation = () => `<ul class="fd-list fd-list--byline fd-list--navigation" role="list"> <li role="listitem" tabindex="-1" class="fd-list__item fd-list__item--link"> - <a tabindex="0" class="fd-list__link" href="#"> + <a tabindex="0" class="fd-list__link" href="#"> <span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span> <div class="fd-list__content"> <div class="fd-list__title">Title</div> <div class="fd-list__byline">Byline (description)</div> </div> - </a> + </a> </li> <li role="listitem" tabindex="-1" class="fd-list__item fd-list__item--link is-selected"> - <a tabindex="0" class="fd-list__link" href="#"> + <a tabindex="0" class="fd-list__link" href="#"> <span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--employee"></i></span> <div class="fd-list__content"> <div class="fd-list__title">List item with no byline</div> </div> - </a> + </a> </li> <li role="listitem" tabindex="-1" class="fd-list__item fd-list__item--link"> - <a tabindex="0" class="fd-list__link" href="#"> + <a tabindex="0" class="fd-list__link" href="#"> <span class="fd-image--s fd-list__thumbnail" aria-label="Godafoss waterfall in northern Iceland" style="background-image: url('assets/images/backgrounds/Godafoss_waterfall_in_northern_Iceland.jpg'); background-size:cover;"></span> <div class="fd-list__content"> @@ -194,20 +192,20 @@ export const navigation = () => `<ul class="fd-list fd-list--byline fd-list--nav <div class="fd-list__byline-right">Second text item in byline (can be semantic)</div> </div> </div> - </a> + </a> </li> <li role="listitem" tabindex="-1" class="fd-list__item fd-list__item--link"> - <a tabindex="0" class="fd-list__link" href="#"> + <a tabindex="0" class="fd-list__link" href="#"> <div class="fd-list__content"> <div class="fd-list__title">Text-only list item</div> <div class="fd-list__byline">Byline (description)</div> </div> - </a> + </a> </li> </ul> `; -navigation.parameters = { +Navigation.parameters = { docs: { iframeHeight: 355, storyDescription: ` @@ -216,7 +214,7 @@ Byline list items can contain navigation links. To add navigation, add the \`fd- } }; -export const buttons = () => ` +export const Buttons = () => ` <ul class="fd-list fd-list--byline" role="list"> <li role="listitem" class="fd-list__item"> <span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span> @@ -233,8 +231,7 @@ export const buttons = () => ` </ul> `; -buttons.storyName = 'Buttons'; -buttons.parameters = { +Buttons.parameters = { docs: { iframeHeight: 165, storyDescription: ` @@ -242,7 +239,7 @@ buttons.parameters = { } }; -export const interractive = () => ` +export const Interractive = () => ` <ul class="fd-list fd-list--byline" role="list"> <li role="listitem" tabindex="-1" class="fd-list__item fd-list__item--interractive"> <span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span> @@ -261,31 +258,31 @@ export const interractive = () => ` </ul> `; -interractive.parameters = { +Interractive.parameters = { docs: { iframeHeight: 300, - storyDescription: `The \`fd-list__item--interractive\` will force list item to handle hover and active states. + storyDescription: `The \`fd-list__item--interractive\` will force list item to handle hover and active states. Usage of this modifier is not needed on \`Selection\`, \`Navigation\` and \`Action\` modes.` } }; -export const navigationIndicator = () => `<ul class="fd-list fd-list--byline fd-list--navigation fd-list--navigation-indication" role="list"> +export const NavigationIndicator = () => `<ul class="fd-list fd-list--byline fd-list--navigation fd-list--navigation-indication" role="list"> <li role="listitem" tabindex="-1" class="fd-list__item fd-list__item--link"> - <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#"> + <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#"> <span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span> <div class="fd-list__content"> <div class="fd-list__title">Title</div> <div class="fd-list__byline">Byline (description)</div> </div> - </a> + </a> </li> <li role="listitem" tabindex="-1" class="fd-list__item fd-list__item--link is-selected"> - <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator is-navigated" href="#"> + <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator is-navigated" href="#"> <span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--employee"></i></span> <div class="fd-list__content"> <div class="fd-list__title">List item with no byline</div> </div> - </a> + </a> </li> <li role="listitem" tabindex="-1" class="fd-list__item"> <span class="fd-image--s fd-list__thumbnail" aria-label="Godafoss waterfall in northern Iceland" @@ -301,9 +298,9 @@ export const navigationIndicator = () => `<ul class="fd-list fd-list--byline fd- </ul> `; -navigationIndicator.storyName = 'Navigation indicators'; +NavigationIndicator.storyName = 'Navigation indicators'; -navigationIndicator.parameters = { +NavigationIndicator.parameters = { docs: { iframeHeight: 275, storyDescription: ` @@ -312,7 +309,7 @@ If only some of the list items are navigable, you should indicate them with an a } }; -export const borderless = () => `<ul class="fd-list fd-list--no-border fd-list--byline" role="list"> +export const Borderless = () => `<ul class="fd-list fd-list--no-border fd-list--byline" role="list"> <li role="listitem" tabindex="0" class="fd-list__item"> <span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span> <div class="fd-list__content"> @@ -350,7 +347,7 @@ style="background-image: url('assets/images/backgrounds/Godafoss_waterfall_in_no </ul> `; -borderless.parameters = { +Borderless.parameters = { docs: { iframeHeight: 305, storyDescription: `To display a borderless byline list, add the \`fd-list--no-border\` modifier class to the main element. @@ -358,7 +355,7 @@ borderless.parameters = { } }; -export const selection = () => `<h4 id="O09lk9">Standard size</h4> +export const Selection = () => `<h4 id="O09lk9">Standard size</h4> <ul class="fd-list fd-list--selection fd-list--byline" role="listbox" aria-labelledby="O09lk9"> <li role="option" tabindex="0" class="fd-list__item is-selected"> <div class="fd-form-item fd-list__form-item"> @@ -439,7 +436,7 @@ style="background-image: url('assets/images/backgrounds/Godafoss_waterfall_in_no </ul> `; -selection.parameters = { +Selection.parameters = { docs: { iframeHeight: 625, storyDescription: ` @@ -447,7 +444,7 @@ Byline list items can display checkboxes that users can select from. To display ` } }; -export const selectionAndNavigation = () => `<h4 id="Ki81L1">Standard Size</h4> +export const SelectionAndNavigation = () => `<h4 id="Ki81L1">Standard Size</h4> <ul class="fd-list fd-list--selection fd-list--byline fd-list--navigation fd-list--navigation-indication" role="listbox" aria-labelledby="Ki81L1"> <li role="option" tabindex="0" class="fd-list__item"> <div class="fd-form-item fd-list__form-item"> @@ -536,9 +533,9 @@ style="background-image: url('assets/images/backgrounds/Godafoss_waterfall_in_no </ul> `; -selectionAndNavigation.storyName = 'Selection with navigation'; +SelectionAndNavigation.storyName = 'Selection with navigation'; -selectionAndNavigation.parameters = { +SelectionAndNavigation.parameters = { docs: { iframeHeight: 625, storyDescription: `To display byline list items with selection and navigation, add these following modifier classes to the main element: @@ -551,7 +548,7 @@ selectionAndNavigation.parameters = { } }; -export const counter = () => ` +export const Counter = () => ` <ul class="fd-list fd-list--byline" role="list"> <li role="listitem" tabindex="0" class="fd-list__item"> <span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span> @@ -590,15 +587,15 @@ style="background-image: url('assets/images/backgrounds/Godafoss_waterfall_in_no </ul> `; -counter.storyName = 'Byline List with Counter'; +Counter.storyName = 'Byline List with Counter'; -standard.parameters = { +Standard.parameters = { docs: { iframeHeight: 785 } }; -export const longText = () => ` +export const LongText = () => ` <ul class="fd-list fd-list--byline" role="list"> <li role="listitem" tabindex="0" class="fd-list__item"> <span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span> @@ -634,16 +631,16 @@ style="background-image: url('assets/images/backgrounds/Godafoss_waterfall_in_no </ul> `; -longText.storyName = 'List with long Title and Byline'; +LongText.storyName = 'List with long Title and Byline'; -longText.parameters = { +LongText.parameters = { docs: { iframeHeight: 625, storyDescription: `By default, To allow the title and byline text to wrap, add these following modifier classes to the the title and byline respectively: - \`fd-list__title--wrap\` - \`fd-list__byline--wrap\` - + When more than 100 characters for small screens or 300 characters for medium to large screens are used, a clickable "MORE" link should be displayed to reveal the entire contents of the text.` } }; diff --git a/stories/list/standard/standard-list.stories.js b/stories/list/standard/standard-list.stories.js index 9ccd360fb1..32d814b7e0 100644 --- a/stories/list/standard/standard-list.stories.js +++ b/stories/list/standard/standard-list.stories.js @@ -10,20 +10,20 @@ In SAP Fiori, we distinguish between tables and lists. Both usually contain homo - You want to display a homogeneous set of basic data. - You need to sort, group, or filter simple datasets. - You need to display a single-level hierarchy rather than using a complex tree table to support this simple use case. - + **Do not use the standard list if:** - You want to manage complex datasets that need to be extensively sorted, grouped, filtered, or edited. In this case, use a **Table**. - You work with complex hierarchies. In this case, use a **Tree**. - + `, tags: ['f3', 'a11y', 'theme', 'development'], components: ['list', 'icon', 'checkbox', 'button', 'busy-indicator'] } }; -export const standard = () => `<h4>Standard Size</h4> +export const Standard = () => `<h4>Standard Size</h4> <ul class="fd-list" role="list"> <li role="listitem" tabindex="0" class="fd-list__item"> <span class="fd-list__title">List item 1</span> @@ -56,9 +56,9 @@ export const standard = () => `<h4>Standard Size</h4> </ul> `; -standard.storyName = 'Default'; +Standard.storyName = 'Default'; -standard.parameters = { +Standard.parameters = { docs: { iframeHeight: 445, storyDescription: `The default standard list dislays list items in the standard size, which is ideal for mobile. To display the standard list in compact mode (for desktop), add the \`fd-list--compact\` modifier class to the main element. @@ -66,7 +66,7 @@ standard.parameters = { } }; -export const unread = () => `<h4>Unread Options</h4> +export const Unread = () => `<h4>Unread Options</h4> <ul class="fd-list" role="list"> <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--unread"> <span class="fd-list__title">List item 1 Unread</span> @@ -83,9 +83,7 @@ export const unread = () => `<h4>Unread Options</h4> </ul> `; -unread.storyName = 'Unread'; - -unread.parameters = { +Unread.parameters = { docs: { iframeHeight: 445, storyDescription: `The \`fd-list__item--unread\` modifier will change the font weight to bold for easier legibility. @@ -93,7 +91,7 @@ unread.parameters = { } }; -export const interactive = () => `<h4>Interactive Items</h4> +export const Interactive = () => `<h4>Interactive Items</h4> <ul class="fd-list" role="list"> <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive"> <span class="fd-list__title">List item 1</span> @@ -113,19 +111,17 @@ export const interactive = () => `<h4>Interactive Items</h4> </ul> `; -interactive.storyName = 'Interactive'; - -interactive.parameters = { +Interactive.parameters = { docs: { iframeHeight: 445, storyDescription: ` -The \`fd-list__item--interractive\` will force list item to handle hover and active states. +The \`fd-list__item--interractive\` will force list item to handle hover and active states. Usage of this modifier is not needed on \`Selection\`, \`Navigation\` and \`Action\` modes. ` } }; -export const navigation = () => `<ul class="fd-list fd-list--navigation" role="list"> +export const Navigation = () => `<ul class="fd-list fd-list--navigation" role="list"> <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link"> <a tabindex="0" class="fd-list__link"> <span class="fd-list__title">List item 1</span> @@ -146,9 +142,7 @@ export const navigation = () => `<ul class="fd-list fd-list--navigation" role="l </ul> `; -navigation.storyName = 'Navigation'; - -navigation.parameters = { +Navigation.parameters = { docs: { iframeHeight: 165, storyDescription: ` @@ -157,7 +151,7 @@ Standard list items can contain navigation links. To add navigation, add the \`f } }; -export const buttons = () => `<ul class="fd-list" role="list"> +export const Buttons = () => `<ul class="fd-list" role="list"> <li tabindex="-1" role="listitem" class="fd-list__item"> <span class="fd-list__title">List item 1</span> <button class="fd-button fd-button--transparent fd-list__button"> @@ -182,8 +176,7 @@ export const buttons = () => `<ul class="fd-list" role="list"> </ul> `; -buttons.storyName = 'Buttons'; -buttons.parameters = { +Buttons.parameters = { docs: { iframeHeight: 165, storyDescription: ` @@ -191,7 +184,7 @@ buttons.parameters = { } }; -export const navigationIndicator = () => `<ul class="fd-list fd-list--navigation fd-list--navigation-indication" role="list"> +export const NavigationIndicator = () => `<ul class="fd-list fd-list--navigation fd-list--navigation-indication" role="list"> <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link"> <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#"> <span class="fd-list__title">List item 1</span> @@ -220,9 +213,9 @@ export const navigationIndicator = () => `<ul class="fd-list fd-list--navigation </ul> `; -navigationIndicator.storyName = 'Navigation indicators'; +NavigationIndicator.storyName = 'Navigation indicators'; -navigationIndicator.parameters = { +NavigationIndicator.parameters = { docs: { iframeHeight: 252, storyDescription: ` @@ -231,7 +224,7 @@ If only a subset of the list items is navigable you should indicate them with an } }; -export const actionList = () => `<h4>Standard Size</h4> +export const ActionList = () => `<h4>Standard Size</h4> <ul class="fd-list" role="list"> <li role="listitem" class="fd-list__item fd-list__item--action"> <button class="fd-list__title">Forward</button> @@ -297,9 +290,9 @@ export const actionList = () => `<h4>Standard Size</h4> </ul> `; -actionList.storyName = 'Action'; +ActionList.storyName = 'Action'; -actionList.parameters = { +ActionList.parameters = { docs: { iframeHeight: 600, storyDescription: ` @@ -308,7 +301,7 @@ Standard list items can display actions that users can choose from. To display a } }; -export const secondaryData = () => `<ul class="fd-list" role="list"> +export const SecondaryData = () => `<ul class="fd-list" role="list"> <li role="listitem" tabindex="0" class="fd-list__item"> <span class="fd-list__title">List item 1</span> <span class="fd-list__secondary">A1</span> @@ -328,9 +321,9 @@ export const secondaryData = () => `<ul class="fd-list" role="list"> </ul> `; -secondaryData.storyName = 'Secondary data'; +SecondaryData.storyName = 'Secondary data'; -secondaryData.parameters = { +SecondaryData.parameters = { docs: { iframeHeight: 210, storyDescription: `To display secondary data in standard list items, add the \`fd-list__secondary\` class within the list elements. @@ -338,7 +331,7 @@ secondaryData.parameters = { } }; -export const itemCounter = () => `<ul class="fd-list" role="list"> +export const ItemCounter = () => `<ul class="fd-list" role="list"> <li role="listitem" tabindex="0" class="fd-list__item"> <span class="fd-list__title">List item 1</span> <span class="fd-list__item-counter">12345</span> @@ -360,9 +353,7 @@ export const itemCounter = () => `<ul class="fd-list" role="list"> </ul> `; -itemCounter.storyName = 'Item Counter'; - -itemCounter.parameters = { +ItemCounter.parameters = { docs: { iframeHeight: 210, storyDescription: `The item counter is vertically aligned within the list item, to the right. The maximum number of digits is 5. In case of more digits, the formatting and the transformation is left to the applications. It's recommended to avoid combining item counter to other list variations and status texts. @@ -370,7 +361,7 @@ itemCounter.parameters = { } }; -export const icons = () => `<ul class="fd-list" role="list"> +export const Icons = () => `<ul class="fd-list" role="list"> <li role="listitem" tabindex="0" class="fd-list__item"> <i role="presentation" class="fd-list__icon sap-icon--cart"></i> <span class="fd-list__title">List item 1</span> @@ -390,9 +381,9 @@ export const icons = () => `<ul class="fd-list" role="list"> </ul> `; -icons.storyName = 'Icon'; +Icons.storyName = 'Icon'; -icons.parameters = { +Icons.parameters = { docs: { iframeHeight: 210, storyDescription: `To display an icon inside standard list items, add the \`fd-list__icon\` class along with the icon within the list elements. For example, \`fd-list__icon sap-icon—lightbulb\`. @@ -400,7 +391,7 @@ icons.parameters = { } }; -export const groups = () => `<ul class="fd-list" role="list"> +export const Groups = () => `<ul class="fd-list" role="list"> <li role="listitem" class="fd-list__group-header"> <span class="fd-list__title">Group header 1</span> </li> @@ -428,9 +419,9 @@ export const groups = () => `<ul class="fd-list" role="list"> </ul> `; -groups.storyName = 'Group'; +Groups.storyName = 'Group'; -groups.parameters = { +Groups.parameters = { docs: { iframeHeight: 385, storyDescription: `Standard list items can be displayed with headers, separating the items into groups. To add group headers, add the \`fd-list__group-header\` class to the list elements. @@ -438,7 +429,7 @@ groups.parameters = { } }; -export const footer = () => `<ul class="fd-list" role="list"> +export const Footer = () => `<ul class="fd-list" role="list"> <li role="listitem" tabindex="0" class="fd-list__item"> <span class="fd-list__title">List item 1</span> </li> @@ -457,9 +448,7 @@ export const footer = () => `<ul class="fd-list" role="list"> </span> `; -footer.storyName = 'Footer'; - -footer.parameters = { +Footer.parameters = { docs: { iframeHeight: 240, storyDescription: `The standard list can display a footer by adding a span element with an \`fd-list__footer\` class after the unordered list element. @@ -467,7 +456,7 @@ footer.parameters = { } }; -export const borderless = () => `<ul class="fd-list fd-list--no-border" role="list"> +export const Borderless = () => `<ul class="fd-list fd-list--no-border" role="list"> <li role="listitem" tabindex="0" class="fd-list__item"> <span class="fd-list__title">List item 1</span> </li> @@ -483,9 +472,7 @@ export const borderless = () => `<ul class="fd-list fd-list--no-border" role="li </ul> `; -borderless.storyName = 'Borderless'; - -borderless.parameters = { +Borderless.parameters = { docs: { iframeHeight: 210, storyDescription: `To display a borderless standard list, add the \`fd-list--no-border\` modifier class to the main element. @@ -493,7 +480,7 @@ borderless.parameters = { } }; -export const selection = () => `<h4 id="XezW11">Standard Size</h4> +export const Selection = () => `<h4 id="XezW11">Standard Size</h4> <ul class="fd-list fd-list--selection" role="listbox" aria-labelledby="XezW11"> <li role="option" tabindex="0" class="fd-list__item"> <div class="fd-form-item fd-list__form-item"> @@ -544,9 +531,7 @@ export const selection = () => `<h4 id="XezW11">Standard Size</h4> </ul> `; -selection.storyName = 'Selection'; - -selection.parameters = { +Selection.parameters = { docs: { iframeHeight: 370, storyDescription: `Standard list items can display checkboxes that users can select from. To display standard list items with selection, add the \`fd-list--selection\` modifier class to the main element. To create checkbox form items, add the \`fd-list__form-item\` class within each list element. @@ -554,7 +539,7 @@ selection.parameters = { } }; -export const inactive = () => `<ul class="fd-list fd-list--navigation" role="list"> +export const Inactive = () => `<ul class="fd-list fd-list--navigation" role="list"> <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--link fd-list__item--inactive"> <a tabindex="0" class="fd-list__link"> <span class="fd-list__title">List item 1 - Inactive</span> @@ -578,9 +563,7 @@ export const inactive = () => `<ul class="fd-list fd-list--navigation" role="lis </ul> `; -inactive.storyName = 'Inactive'; - -inactive.parameters = { +Inactive.parameters = { docs: { iframeHeight: 370, storyDescription: `Some list item can be made inactive, to make it non-clickable. @@ -588,7 +571,7 @@ inactive.parameters = { } }; -export const scroll = () => `<ul class="fd-list fd-list__infinite-scroll fddocs-list-height" role="list"> +export const Scroll = () => `<ul class="fd-list fd-list__infinite-scroll fddocs-list-height" role="list"> <li role="listitem" tabindex="0" class="fd-list__item"> <span class="fd-list__title">List item 1</span> </li> @@ -628,9 +611,9 @@ export const scroll = () => `<ul class="fd-list fd-list__infinite-scroll fddocs- </ul> `; -scroll.storyName = 'Infinite scroll'; +Scroll.storyName = 'Infinite scroll'; -scroll.parameters = { +Scroll.parameters = { docs: { iframeHeight: 380, storyDescription: `If height for list is fixed and there are more list otem to show, then we should be able to scroll to next list items. diff --git a/stories/margins/margins.stories.js b/stories/margins/margins.stories.js index c62aedde98..3261c00030 100644 --- a/stories/margins/margins.stories.js +++ b/stories/margins/margins.stories.js @@ -1,8 +1,8 @@ export default { title: 'Layouts/Margins', parameters: { - description: `The CSS margin properties are used to create space around elements, outside of any defined borders. - With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element. + description: `The CSS margin properties are used to create space around elements, outside of any defined borders. + With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element. We now provide a number of predefined margin clases which add predefined margin values.`, tags: ['f3', 'theme'], components: ['margins', 'panel'] @@ -32,7 +32,7 @@ AllRoundMargin.parameters = { docs: { storyDescription: `All-round margin appears on all sides of the container they are applied to. Use \`fd-margin\` class with any of the following modifiers: - + | Element | Modifier class | Margin applied | | ----------------: | :------------ | :------------ | | Tiny | \`fd-margin--tiny\` | 0.5rem | @@ -69,7 +69,7 @@ SingleSidedMarginTop.parameters = { - top - displayed on top of the element - end - displayed on the right side and in right-to-left mode on the left side of the element - bottom - displayed on the bottom of the element -- begin - displayed on the left side and in right-to-left mode on the right side of the element. +- begin - displayed on the left side and in right-to-left mode on the right side of the element. Use \`fd-margin-top\` or \`fd-margin-end\` or \`fd-margin-bottom\` or \`fd-margin-begin\` class with any of the size modifiers as mentioned above. diff --git a/stories/menu/menu.stories.js b/stories/menu/menu.stories.js index 22031ba3b0..07b1288665 100644 --- a/stories/menu/menu.stories.js +++ b/stories/menu/menu.stories.js @@ -12,7 +12,7 @@ Commonly used as the contents when composing "dropdowns", "contextual menus", et }; -export const desktopAndTablet = () => ` +export const DesktopAndTablet = () => ` <label class="fd-form-label">Combobox Tablet Cozy Mode - default mode</label><br/><br/> <nav aria-label="navigation menu" class="fd-menu"> @@ -69,15 +69,15 @@ export const desktopAndTablet = () => ` </nav> `; -desktopAndTablet.storyName = 'Desktop and Tablet Modes'; -desktopAndTablet.parameters = { +DesktopAndTablet.storyName = 'Desktop and Tablet Modes'; +DesktopAndTablet.parameters = { docs: { iframeHeight: 300, storyDescription: 'The basic stucture of a menu. Place the menu item title in a `<span>` tag using class `fd-menu__title` and wrap it in the `fd-menu__link` and `fd-menu__item` classes as shown. Default mode is the cozy tablet mode, no class has to be added for this. Use class modifier`fd-menu--compact` on menu container level for desktop mode.' } }; -export const mobileCozyMode = () => `<div style="width: 50%; display: inline-block" class="fd-dialog fd-dialog-docs-static fd-select-docs-max-height fd-dialog--active" id="select-dialog-example"> +export const MobileCozyMode = () => `<div style="width: 50%; display: inline-block" class="fd-dialog fd-dialog-docs-static fd-select-docs-max-height fd-dialog--active" id="select-dialog-example"> <section aria-labelledby="exampleSubMenuHeader" class="fd-dialog__content fd-dialog__content--mobile" @@ -211,15 +211,14 @@ export const mobileCozyMode = () => `<div style="width: 50%; display: inline-blo </div> `; -mobileCozyMode.storyName = 'Mobile Cozy Mode'; -mobileCozyMode.parameters = { +MobileCozyMode.parameters = { docs: { iframeHeight: 300, storyDescription: 'The basic stucture of a menu in mobile where it opens as a dialog. Use class `fd-menu--mobile` on menu container level. Example shows the parent menu\'s item in active state to simulate a pressed/touched event. Submenu appears in its own fullscreen dialog in mobile devices. The device\'s back button takes one back to the parent menu fullscreen dialog.' } }; -export const seperatedItems = () => `<nav class="fd-menu"> +export const SeperatedItems = () => `<nav class="fd-menu"> <ul class="fd-menu__list" role="menu"> <li class="fd-menu__item" role="presentation"> <a class="fd-menu__link" href="#" role="menuitem"> @@ -252,15 +251,15 @@ export const seperatedItems = () => `<nav class="fd-menu"> </nav> `; -seperatedItems.storyName = 'List with separated items'; -seperatedItems.parameters = { +SeperatedItems.storyName = 'List with separated items'; +SeperatedItems.parameters = { docs: { iframeHeight: 300, storyDescription: 'To add separators between the items, use the class `fd-menu__separator` in its own `<span>` after the `<li>` item where you want the separation.' } }; -export const differentStates = () => `<div style="width: 50%; display: inline-block"> +export const DifferentStates = () => `<div style="width: 50%; display: inline-block"> <nav aria-label="navbar" class="fd-menu"> <ul class="fd-menu__list" role="menu"> <li class="fd-menu__item" role="presentation"> @@ -335,8 +334,8 @@ export const differentStates = () => `<div style="width: 50%; display: inline-bl </div> `; -differentStates.storyName = 'List different states'; -differentStates.parameters = { +DifferentStates.storyName = 'List different states'; +DifferentStates.parameters = { docs: { iframeHeight: 300, storyDescription: ` @@ -352,7 +351,7 @@ To remove default box shadow from menu containers use \`fd-menu__list--no-shadow } }; -export const menuIcon = () => `<nav class="fd-menu"> +export const MenuIcon = () => `<nav class="fd-menu"> <ul class="fd-menu__list" role="menu"> <li class="fd-menu__item" role="presentation"> <a class="fd-menu__link" href="#" role="menuitem"> @@ -387,8 +386,8 @@ export const menuIcon = () => `<nav class="fd-menu"> </nav> `; -menuIcon.storyName = 'List with Icon'; -menuIcon.parameters = { +MenuIcon.storyName = 'List with Icon'; +MenuIcon.parameters = { docs: { iframeHeight: 220, storyDescription: ` @@ -400,7 +399,7 @@ According to Fiori3 design shortcuts should be on desktop devices.` } }; -export const withSubmenu = () => `<nav class="fd-menu"> +export const WithSubmenu = () => `<nav class="fd-menu"> <ul class="fd-menu__list" role="menu"> <li class="fd-menu__item" role="presentation"> <a class="fd-menu__link" href="#" role="menuitem"> @@ -457,7 +456,7 @@ export const withSubmenu = () => `<nav class="fd-menu"> </nav> <div style="min-height: 75px"></div> `; -withSubmenu.parameters = { +WithSubmenu.parameters = { docs: { iframeHeight: 400, storyDescription: ` diff --git a/stories/message-box/message-box.stories.js b/stories/message-box/message-box.stories.js index 2c3ad50ae5..449dab5ff9 100644 --- a/stories/message-box/message-box.stories.js +++ b/stories/message-box/message-box.stories.js @@ -13,7 +13,7 @@ Note: Include two action buttons in the message box when the user's decision is - Success - Information - Confirmation - + ##Usage @@ -25,15 +25,15 @@ Note: Include two action buttons in the message box when the user's decision is - You need to interrupt the user for some other reason. - You need the user to acknowledge the message. - You need the user to make a decision. - + **Do not use the message box if:** - You want to display a short success message. Instead, use **Message Toast**. - You can show the message directly in a form field. - -##Structure + +##Structure **Message box follows the structure of a dialog, consisting of following elements:** - \`.fd-message-box\`: styles the backdrop and displays the message box container with \`position: fixed\`. The message box becomes visible by adding the \`.fd-message-box--active\` modifier class to the container. @@ -51,7 +51,7 @@ Note: Include two action buttons in the message box when the user's decision is const messageBoxHeight = 200; -export const structure = () => `<div class="fd-message-box-docs-static fd-message-box fd-message-box--active"> +export const Structure = () => `<div class="fd-message-box-docs-static fd-message-box fd-message-box--active"> <section class="fd-message-box__content"> <header class="fd-bar fd-bar--header fd-message-box__header"> <div class="fd-bar__left"> @@ -61,7 +61,7 @@ export const structure = () => `<div class="fd-message-box-docs-static fd-messag </div> </header> <div class="fd-message-box__body"> - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <footer class="fd-bar fd-bar--footer fd-message-box__footer"> <div class="fd-bar__right"> @@ -81,9 +81,9 @@ export const structure = () => `<div class="fd-message-box-docs-static fd-messag </div> `; -structure.storyName = 'Default'; +Structure.storyName = 'Default'; -structure.parameters = { +Structure.parameters = { docs: { iframeHeight: messageBoxHeight, storyDescription: ` @@ -92,7 +92,7 @@ The default message box displays a small dialog with a title, message text and a } }; -export const types = () => `<div class="fd-message-box-docs-static fd-message-box fd-message-box--confirmation fd-message-box--active"> +export const Types = () => `<div class="fd-message-box-docs-static fd-message-box fd-message-box--confirmation fd-message-box--active"> <section class="fd-message-box__content"> <header class="fd-bar fd-bar--header fd-message-box__header"> <div class="fd-bar__left"> @@ -189,7 +189,7 @@ export const types = () => `<div class="fd-message-box-docs-static fd-message-bo </div> </header> <div class="fd-message-box__body"> - Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. + Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. </div> <footer class="fd-bar fd-bar--footer fd-message-box__footer"> <div class="fd-bar__right"> @@ -216,7 +216,7 @@ export const types = () => `<div class="fd-message-box-docs-static fd-message-bo </div> </header> <div class="fd-message-box__body"> - Vivamus sagittis diam in vehicula lobortis. + Vivamus sagittis diam in vehicula lobortis. </div> <footer class="fd-bar fd-bar--footer fd-message-box__footer"> <div class="fd-bar__right"> @@ -230,9 +230,9 @@ export const types = () => `<div class="fd-message-box-docs-static fd-message-bo </section> </div> `; -types.storyName = 'Semantic types'; +Types.storyName = 'Semantic types'; -types.parameters = { +Types.parameters = { docs: { iframeHeight: messageBoxHeight * 6.5, storyDescription: ` @@ -245,12 +245,12 @@ Error            &nb Success | \`fd-message-box--success\` | Success messages give feedback to the user that an action has been executed. The user needs to acknowledge the message. Warning | \`fd-message-box--warning\` | Warning messages highlight potential issues, but the user can still continue. This includes unintended data loss scenarios. Information | \`fd-message-box--information\` | Information messages provide information the user needs to acknowledge, but which does not involve a decision. The message provides information that is useful and relevant, but never critical. - + ` } }; -export const responsive = () => +export const Responsive = () => ` <div class="fd-message-box-docs-static fd-message-box fd-message-box--information fd-message-box--active"> <section class="fd-message-box__content fd-message-box__content--s"> @@ -291,7 +291,7 @@ export const responsive = () => </div> </header> <div class="fd-message-box__body"> - Error message box for a medium-sized screen in cozy mode (mobile). + Error message box for a medium-sized screen in cozy mode (mobile). </div> <footer class="fd-bar fd-bar--cozy fd-bar--footer fd-message-box__footer"> <div class="fd-bar__right"> @@ -344,7 +344,7 @@ export const responsive = () => </div> </header> <div class="fd-message-box__body"> - Warning message box for an extra large screen in compact mode (desktop). + Warning message box for an extra large screen in compact mode (desktop). </div> <footer class="fd-bar fd-bar--footer fd-message-box__footer"> <div class="fd-bar__right"> @@ -359,12 +359,11 @@ export const responsive = () => </div> `; -responsive.storyName = 'Responsive'; -responsive.parameters = { +Responsive.parameters = { docs: { iframeHeight: messageBoxHeight * 4, storyDescription: ` -The message box has 1rem padding all around the body, and the header and footer both inherit their padding from the **Bar** component. Responsive horizontal padding can be applied to the header, body and footer of the message box; however, the amount depends on the screen width. +The message box has 1rem padding all around the body, and the header and footer both inherit their padding from the **Bar** component. Responsive horizontal padding can be applied to the header, body and footer of the message box; however, the amount depends on the screen width. **To display responsive padding, add the following modifier classes to the content container:** diff --git a/stories/message-page/message-page.stories.js b/stories/message-page/message-page.stories.js index f57ee79251..be84ac4d50 100644 --- a/stories/message-page/message-page.stories.js +++ b/stories/message-page/message-page.stories.js @@ -24,7 +24,7 @@ export default { const messageBoxHeight = 800; -export const filter = () => `<div style="height: 600px; width: 100%;"> +export const Filter = () => `<div style="height: 600px; width: 100%;"> <div class="fd-message-page"> <div class="fd-message-page__container"> <div class="fd-message-page__icon-container"> @@ -43,7 +43,7 @@ export const filter = () => `<div style="height: 600px; width: 100%;"> </div> `; -filter.parameters = { +Filter.parameters = { docs: { iframeHeight: messageBoxHeight, storyDescription: `The filter message page is displayed when the user has set a filter and there are no results. This message then prompts the user to remove or re-evaluate the filter they set for the page. It is mandatory to use the \`.sap-icon--filter\` icon. @@ -51,7 +51,7 @@ filter.parameters = { } }; -export const search = () => `<div style="height: 600px; width: 100%;"> +export const Search = () => `<div style="height: 600px; width: 100%;"> <div class="fd-message-page"> <div class="fd-message-page__container"> <div class="fd-message-page__icon-container"> @@ -67,7 +67,7 @@ export const search = () => `<div style="height: 600px; width: 100%;"> </div> `; -search.parameters = { +Search.parameters = { docs: { iframeHeight: messageBoxHeight, storyDescription: `The search message page is displayed when a user has searched for something, but there are no results for that inquiry. It is mandatory to use the \`.sap-icon--search\` icon. @@ -75,7 +75,7 @@ search.parameters = { } }; -export const noItems = () => `<div style="height: 600px; width: 100%;"> +export const NoItems = () => `<div style="height: 600px; width: 100%;"> <div class="fd-message-page"> <div class="fd-message-page__container"> <div class="fd-message-page__icon-container"> @@ -91,8 +91,8 @@ export const noItems = () => `<div style="height: 600px; width: 100%;"> </div> `; -noItems.storyName = 'No items'; -noItems.parameters = { +NoItems.storyName = 'No items'; +NoItems.parameters = { docs: { iframeHeight: messageBoxHeight, storyDescription: `Message page displays a message indicating that there are no items when the user attempts to view a page that is supposed to contain items, but they are either not available or do not exist. It is mandatory to use either the \`.sap-icon--product\` icon, or another icon that matches your use case. @@ -100,7 +100,7 @@ noItems.parameters = { } }; -export const error = () => `<div style="height: 600px; width: 100%;"> +export const Error = () => `<div style="height: 600px; width: 100%;"> <div class="fd-message-page"> <div class="fd-message-page__container"> <div class="fd-message-page__icon-container"> @@ -119,7 +119,7 @@ export const error = () => `<div style="height: 600px; width: 100%;"> </div> `; -error.parameters = { +Error.parameters = { docs: { iframeHeight: messageBoxHeight, storyDescription: `The error message page is displayed when the user attempts to view a page but an error has occurred, resulting in no available content. If you can, provide a link to the app start screen in the error message. It is mandatory to use the \`.sap-icon--document\` icon. @@ -127,7 +127,7 @@ error.parameters = { } }; -export const buttons = () => `<div style="height: 600px; width: 100%;"> +export const Buttons = () => `<div style="height: 600px; width: 100%;"> <div class="fd-message-page"> <div class="fd-message-page__container"> <div class="fd-message-page__icon-container"> @@ -138,25 +138,25 @@ export const buttons = () => `<div style="height: 600px; width: 100%;"> Sorry, we can't find the page </div> <div class="fd-message-page__subtitle"> - <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>, - 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. - <i>Excepteur sint occaecat cupidatat non proident, + <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>, + 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. + <i>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</i> </div> <div class="fd-message-page__actions"> - <button - class="fd-button fd-button--compact fd-button--emphasized" + <button + class="fd-button fd-button--compact fd-button--emphasized" style="margin: 0 0.25rem;"> Contact Support </button> <button class="fd-button fd-button--compact">Reload Page</button> </div> <div class="fd-message-page__more"> - <button + <button class="fd-button fd-button--compact fd-button--transparent"> Show Details </button> @@ -167,8 +167,8 @@ export const buttons = () => `<div style="height: 600px; width: 100%;"> </div> `; -buttons.storyName = 'Formatted text and buttons'; -buttons.parameters = { +Buttons.storyName = 'Formatted text and buttons'; +Buttons.parameters = { docs: { iframeHeight: messageBoxHeight, storyDescription: `The message page with formatted text and buttons is useful for when you want to add formatted text (bold, italic, underline and/or bullet points) and buttons to the action area. It's highly recommended not to add more than two buttons. diff --git a/stories/message-strip/message-strip.stories.js b/stories/message-strip/message-strip.stories.js index 3ed0281e90..b579907da1 100644 --- a/stories/message-strip/message-strip.stories.js +++ b/stories/message-strip/message-strip.stories.js @@ -29,7 +29,7 @@ export default { const messageStripHeight = 64; -export const defaultStrip = () => `<div class="fd-message-strip fd-message-strip--dismissible" role="alert" id="ZvPBg609" > +export const DefaultStrip = () => `<div class="fd-message-strip fd-message-strip--dismissible" role="alert" id="ZvPBg609" > <p class="fd-message-strip__text"> Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. </p> @@ -39,9 +39,9 @@ export const defaultStrip = () => `<div class="fd-message-strip fd-message-strip </div> `; -defaultStrip.storyName = 'Default'; +DefaultStrip.storyName = 'Default'; -defaultStrip.parameters = { +DefaultStrip.parameters = { docs: { iframeHeight: messageStripHeight, storyDescription: ` @@ -50,7 +50,7 @@ The default message strip can be used for general messages that don’t fit into } }; -export const information = () => `<div class="fd-message-strip fd-message-strip--information fd-message-strip--dismissible" role="alert" id="JwPcf464" > +export const Information = () => `<div class="fd-message-strip fd-message-strip--information fd-message-strip--dismissible" role="alert" id="JwPcf464" > <p class="fd-message-strip__text"> Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. </p> @@ -60,16 +60,14 @@ export const information = () => `<div class="fd-message-strip fd-message-strip- </div> `; -information.storyName = 'Information'; - -information.parameters = { +Information.parameters = { docs: { iframeHeight: messageStripHeight, storyDescription: 'The information message strip simply relays useful information to the users. To display an information message strip, add the `fd-message-strip--information` modifier class to the main element.' } }; -export const success = () => `<div class="fd-message-strip fd-message-strip--success fd-message-strip--dismissible" role="alert" id="ulr5z216"> +export const Success = () => `<div class="fd-message-strip fd-message-strip--success fd-message-strip--dismissible" role="alert" id="ulr5z216"> <p class="fd-message-strip__text"> Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. </p> @@ -79,16 +77,14 @@ export const success = () => `<div class="fd-message-strip fd-message-strip--suc </div> `; -success.storyName = 'Success'; - -success.parameters = { +Success.parameters = { docs: { iframeHeight: messageStripHeight, storyDescription: 'The success message strip communicates to the user that an action they’ve completed was successful. To display a success message strip, add the `fd-message-strip--success` modifier class to the main element.' } }; -export const warning = () => `<div class="fd-message-strip fd-message-strip--warning fd-message-strip--dismissible" role="alert" id="fwYq4606"> +export const Warning = () => `<div class="fd-message-strip fd-message-strip--warning fd-message-strip--dismissible" role="alert" id="fwYq4606"> <p class="fd-message-strip__text"> Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. </p> @@ -98,9 +94,7 @@ export const warning = () => `<div class="fd-message-strip fd-message-strip--war </div> `; -warning.storyName = 'Warning'; - -warning.parameters = { +Warning.parameters = { docs: { iframeHeight: messageStripHeight, storyDescription: ` @@ -109,7 +103,7 @@ The warning message strip warns the user of potential issues; however, the user } }; -export const error = () => `<div class="fd-message-strip fd-message-strip--error fd-message-strip--dismissible" role="alert" id="SsoiW591"> +export const Error = () => `<div class="fd-message-strip fd-message-strip--error fd-message-strip--dismissible" role="alert" id="SsoiW591"> <p class="fd-message-strip__text"> Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. </p> @@ -119,9 +113,7 @@ export const error = () => `<div class="fd-message-strip fd-message-strip--error </div> `; -error.storyName = 'Error'; - -error.parameters = { +Error.parameters = { docs: { iframeHeight: messageStripHeight, storyDescription: ` @@ -130,7 +122,7 @@ The error message strip is triggered after the user enters data incorrectly or w } }; -export const noIcons = () => `<div class="fd-message-strip fd-message-strip--information fd-message-strip--no-icon fd-message-strip--dismissible" +export const NoIcons = () => `<div class="fd-message-strip fd-message-strip--information fd-message-strip--no-icon fd-message-strip--dismissible" role="alert" id="SsoiW592"> <p class="fd-message-strip__text"> Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. @@ -142,7 +134,7 @@ export const noIcons = () => `<div class="fd-message-strip fd-message-strip--inf <br /> -<div class="fd-message-strip fd-message-strip--success fd-message-strip--no-icon fd-message-strip--dismissible" +<div class="fd-message-strip fd-message-strip--success fd-message-strip--no-icon fd-message-strip--dismissible" role="alert" id="SsoiW593"> <p class="fd-message-strip__text"> Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. @@ -154,7 +146,7 @@ export const noIcons = () => `<div class="fd-message-strip fd-message-strip--inf <br /> -<div class="fd-message-strip fd-message-strip--warning fd-message-strip--no-icon fd-message-strip--dismissible" +<div class="fd-message-strip fd-message-strip--warning fd-message-strip--no-icon fd-message-strip--dismissible" role="alert" id="SsoiW594"> <p class="fd-message-strip__text"> Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. @@ -166,7 +158,7 @@ export const noIcons = () => `<div class="fd-message-strip fd-message-strip--inf <br /> -<div class="fd-message-strip fd-message-strip--error fd-message-strip--no-icon fd-message-strip--dismissible" +<div class="fd-message-strip fd-message-strip--error fd-message-strip--no-icon fd-message-strip--dismissible" role="alert" id="SsoiW595"> <p class="fd-message-strip__text"> Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. @@ -177,9 +169,9 @@ export const noIcons = () => `<div class="fd-message-strip fd-message-strip--inf </div> `; -noIcons.storyName = 'No icon'; +NoIcons.storyName = 'No icon'; -noIcons.parameters = { +NoIcons.parameters = { docs: { iframeHeight: messageStripHeight * 4, storyDescription: 'To display message strip without an icon, add the `fd-message-strip--no-icon` modifier class to the main element.' diff --git a/stories/message-toast/message-toast.stories.js b/stories/message-toast/message-toast.stories.js index 564614b81e..1070259b88 100644 --- a/stories/message-toast/message-toast.stories.js +++ b/stories/message-toast/message-toast.stories.js @@ -13,7 +13,7 @@ Note: The timing and duration of the message toast is defined by the application - To display a short success message. - To avoid interrupting the user while they are performing an action. - To confirm a successful action. - + **Do not use the message toast if:** @@ -26,7 +26,7 @@ Note: The timing and duration of the message toast is defined by the application } }; -export const defaultToast = () => ` +export const DefaultToast = () => ` <div class="fd-message-toast">Product added</div> <br><br> <div class="fd-message-toast">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> @@ -34,9 +34,9 @@ export const defaultToast = () => ` -defaultToast.storyName = 'Default'; +DefaultToast.storyName = 'Default'; -defaultToast.parameters = { +DefaultToast.parameters = { docs: { iframeHeight: 210, storyDescription: `The default message toast displays a simple popup with non-interactive text. The text wraps once it reaches the max-width of 15rem. diff --git a/stories/micro-process-flow/micro-process-flow.stories.js b/stories/micro-process-flow/micro-process-flow.stories.js index 03b770c3b9..3e87011d71 100644 --- a/stories/micro-process-flow/micro-process-flow.stories.js +++ b/stories/micro-process-flow/micro-process-flow.stories.js @@ -10,7 +10,7 @@ export default { - You need to show the state of each step in a linear, multi-step process. - The progress of multiple items needs to be displayed in a list or table. - + **Do not use the micro process flow if:** @@ -45,7 +45,7 @@ The micro process flow acts as a generic container in which process steps are la } }; -export const defaultMicroProcessFlow = () => `<div class="fd-micro-process-flow"> +export const DefaultMicroProcessFlow = () => `<div class="fd-micro-process-flow"> <div class="fd-micro-process-flow__overflow-container"> <div class="fd-micro-process-flow__wrapper"> <div class="fd-micro-process-flow__item"> @@ -101,8 +101,8 @@ export const defaultMicroProcessFlow = () => `<div class="fd-micro-process-flow" </div> `; -defaultMicroProcessFlow.storyName = 'Micro process flow with dependent steps (Default)'; -defaultMicroProcessFlow.parameters = { +DefaultMicroProcessFlow.storyName = 'Micro process flow with dependent steps (Default)'; +DefaultMicroProcessFlow.parameters = { docs: { iframeHeight: 210, storyDescription: ` @@ -110,7 +110,7 @@ defaultMicroProcessFlow.parameters = { } }; -export const microProcessFlowIndependentSteps = () => `<div class="fd-micro-process-flow fd-micro-process-flow--independent-steps"> +export const MicroProcessFlowIndependentSteps = () => `<div class="fd-micro-process-flow fd-micro-process-flow--independent-steps"> <div class="fd-micro-process-flow__overflow-container"> <div class="fd-micro-process-flow__wrapper"> <div class="fd-micro-process-flow__item"> @@ -166,8 +166,8 @@ export const microProcessFlowIndependentSteps = () => `<div class="fd-micro-proc </div> `; -microProcessFlowIndependentSteps.storyName = 'Micro process flow with independent steps'; -microProcessFlowIndependentSteps.parameters = { +MicroProcessFlowIndependentSteps.storyName = 'Micro process flow with independent steps'; +MicroProcessFlowIndependentSteps.parameters = { docs: { iframeHeight: 210, storyDescription: `Add the \`.fd-micro-process-flow--independent-steps\` modifier class to \`.fd-micro-process-flow\` class to remove the connector line. @@ -175,7 +175,7 @@ microProcessFlowIndependentSteps.parameters = { } }; -export const microProcessFlowCustom = () => `<div class="fd-micro-process-flow"> +export const MicroProcessFlowCustom = () => `<div class="fd-micro-process-flow"> <div class="fd-micro-process-flow__overflow-container"> <div class="fd-micro-process-flow__wrapper"> <div class="fd-micro-process-flow__item"> @@ -356,8 +356,8 @@ export const microProcessFlowCustom = () => `<div class="fd-micro-process-flow"> </div> `; -microProcessFlowCustom.storyName = 'Micro process flow with custom steps'; -microProcessFlowCustom.parameters = { +MicroProcessFlowCustom.storyName = 'Micro process flow with custom steps'; +MicroProcessFlowCustom.parameters = { docs: { iframeHeight: 210, storyDescription: ` @@ -365,7 +365,7 @@ microProcessFlowCustom.parameters = { } }; -export const microProcessFlowWithPopover = () => `<div style="height: 300px;"> +export const MicroProcessFlowWithPopover = () => `<div style="height: 300px;"> <div class="fd-micro-process-flow"> <div class="fd-micro-process-flow__overflow-container" style="overflow: visible;"> <div class="fd-micro-process-flow__wrapper"> @@ -538,15 +538,15 @@ export const microProcessFlowWithPopover = () => `<div style="height: 300px;"> </div> `; -microProcessFlowWithPopover.storyName = 'Micro process flow with popover'; -microProcessFlowWithPopover.parameters = { +MicroProcessFlowWithPopover.storyName = 'Micro process flow with popover'; +MicroProcessFlowWithPopover.parameters = { docs: { storyDescription: `Information displayed in micro flow process items can be extended by adding popovers with additional context. ` } }; -export const overflowMicroProcessFlow = () => `<div class="fd-micro-process-flow"> +export const OverflowMicroProcessFlow = () => `<div class="fd-micro-process-flow"> <div class="fd-micro-process-flow__overflow-container"> <div class="fd-micro-process-flow__wrapper"> <div class="fd-micro-process-flow__item"> @@ -721,8 +721,8 @@ export const overflowMicroProcessFlow = () => `<div class="fd-micro-process-flow </div> `; -overflowMicroProcessFlow.storyName = 'Micro process flow with overflow'; -overflowMicroProcessFlow.parameters = { +OverflowMicroProcessFlow.storyName = 'Micro process flow with overflow'; +OverflowMicroProcessFlow.parameters = { docs: { iframeHeight: 210, storyDescription: ` @@ -730,7 +730,7 @@ overflowMicroProcessFlow.parameters = { } }; -export const microProcessFlowWithObjects = () => `<div class="fd-micro-process-flow"> +export const MicroProcessFlowWithObjects = () => `<div class="fd-micro-process-flow"> <div class="fd-micro-process-flow__overflow-container"> <div class="fd-micro-process-flow__wrapper"> <div class="fd-micro-process-flow__item"> @@ -793,8 +793,8 @@ export const microProcessFlowWithObjects = () => `<div class="fd-micro-process-f </div> `; -microProcessFlowWithObjects.storyName = 'Micro process flow with elements inserted between nodes'; -microProcessFlowWithObjects.parameters = { +MicroProcessFlowWithObjects.storyName = 'Micro process flow with elements inserted between nodes'; +MicroProcessFlowWithObjects.parameters = { docs: { iframeHeight: 210, storyDescription: ` @@ -802,7 +802,7 @@ microProcessFlowWithObjects.parameters = { } }; -export const microProcessFlowCustomWidth = () => `<div class="fd-micro-process-flow"> +export const MicroProcessFlowCustomWidth = () => `<div class="fd-micro-process-flow"> <div class="fd-micro-process-flow__overflow-container"> <div class="fd-micro-process-flow__wrapper"> <div class="fd-micro-process-flow__item" style="width: 8rem;"> @@ -857,8 +857,8 @@ export const microProcessFlowCustomWidth = () => `<div class="fd-micro-process-f </div> `; -microProcessFlowCustomWidth.storyName = 'Micro process flow with custom node width'; -microProcessFlowCustomWidth.parameters = { +MicroProcessFlowCustomWidth.storyName = 'Micro process flow with custom node width'; +MicroProcessFlowCustomWidth.parameters = { docs: { iframeHeight: 210, storyDescription: `By default, the width of the item container is calculated based on the actual item width and the connector line. To change the width add inline style to the element with \`.fd-micro-process-flow__item\` class and provide value for the width. diff --git a/stories/multi-combo-box/multi-combo-box.stories.js b/stories/multi-combo-box/multi-combo-box.stories.js index 37216f929f..91294186d2 100644 --- a/stories/multi-combo-box/multi-combo-box.stories.js +++ b/stories/multi-combo-box/multi-combo-box.stories.js @@ -6,9 +6,9 @@ The multi-combo-box component is an opinionated composition of the \`input group The \`popover\` is shared between the combobox and select components. Please see the \`select\` documentation for the complete list of modifiers, That are also supported by the \`combobox\` component. -\`Multi ComboBox\` allows users to enter multiple values which are displayed as a tokens. -It provides an editable input field for filtering the list, and a dropdown menu with a list of the available options. -If the entries are not validated by the application, users can also enter custom values. +\`Multi ComboBox\` allows users to enter multiple values which are displayed as a tokens. +It provides an editable input field for filtering the list, and a dropdown menu with a list of the available options. +If the entries are not validated by the application, users can also enter custom values. `, tags: ['f3', 'a11y', 'theme'], components: [ @@ -32,7 +32,7 @@ If the entries are not validated by the application, users can also enter custom } }; -export const cozyAndCompact = () => `<div class="fd-container" style="height: 300px;"> +export const CozyAndCompact = () => `<div class="fd-container" style="height: 300px;"> <div class="fd-row"> <div class="fd-col fd-col--6"> <label class="fd-form-label"> @@ -201,7 +201,7 @@ export const cozyAndCompact = () => `<div class="fd-container" style="height: 30 </div> `; -export const asFormItem = () => `<div style="height: 300px;"> +export const AsFormItem = () => `<div style="height: 300px;"> <div class="fd-form-item"> <div class="fd-popover"> <div class="fd-popover__control" role="combobox" aria-controls="F4GcX348a" aria-expanded="true" aria-haspopup="true"> @@ -289,7 +289,7 @@ export const asFormItem = () => `<div style="height: 300px;"> </div> `; -asFormItem.parameters = { +AsFormItem.parameters = { docs: { storyDescription: ` Note that the popover body width is restricted to a max of 37.5rem to avoid readability issues in large-width popovers. @@ -298,7 +298,7 @@ Applications are free to override this in their custom styles if needed and own } }; -export const grouping = () => `<div style="height: 450px;"> +export const Grouping = () => `<div style="height: 450px;"> <div class="fd-popover"> <div class="fd-popover__control" role="combobox" aria-controls="F4H8X34a" aria-expanded="true" aria-haspopup="true"> <div class="fd-input-group fd-input-group--control" tabindex="0"> @@ -322,7 +322,7 @@ export const grouping = () => `<div style="height: 450px;"> </span> <button class="fd-token__close" aria-label="unselect option: Kiwi"></button> </span> - <span class="fd-tokenizer__indicator">2 more</span> + <span class="fd-tokenizer__indicator">2 more</span> <input class="fd-input fd-input-group__input fd-tokenizer__input" aria-label="multi input sample as group item" /> </div> </div> @@ -402,14 +402,14 @@ export const grouping = () => `<div style="height: 450px;"> </div> `; -grouping.parameters = { +Grouping.parameters = { docs: { storyDescription: 'In cases where the list items need to be categorized into groups, it is possible to add headers for each category as seen below.' } }; -export const matchPopoverBodySize = () => `<div style="height: 300px;"> +export const MatchPopoverBodySize = () => `<div style="height: 300px;"> <div class="fd-popover"> <div class="fd-popover__control" role="combobox" aria-controls="F4HGFHX34a" aria-expanded="true" aria-haspopup="true"> <div class="fd-input-group fd-input-group--control" tabindex="0"> @@ -433,7 +433,7 @@ export const matchPopoverBodySize = () => `<div style="height: 300px;"> </span> <button class="fd-token__close" aria-label="unselect option: Kiwi"></button> </span> - <span class="fd-tokenizer__indicator">2 more</span> + <span class="fd-tokenizer__indicator">2 more</span> <input class="fd-input fd-input-group__input fd-tokenizer__input" aria-label="multi input sample popover size body"/> </div> </div> @@ -490,19 +490,19 @@ export const matchPopoverBodySize = () => `<div style="height: 300px;"> </div> `; -matchPopoverBodySize.parameters = { +MatchPopoverBodySize.parameters = { docs: { storyDescription: ` -The default length size of the popover body is often different from the text length. +The default length size of the popover body is often different from the text length. The body length can be adjusted to match the text length by adding the \`fd-popover__body--dropdown-fill\` class to the \`fd-popover__body\`. -This class has been added to all the \`Multi ComboBox\` examples above. +This class has been added to all the \`Multi ComboBox\` examples above. In the example you can see how the \`Multi ComboBox\` component looks without the \`fd-popover__body--dropdown-fill\` modifier. ` } }; -export const readOnlyAndDisabled = () => `<div class="fd-container"> +export const ReadOnlyAndDisabled = () => `<div class="fd-container"> <div class="fd-row"> <div class="fd-col fd-col--6"> <div class="fd-popover"> @@ -611,7 +611,7 @@ export const readOnlyAndDisabled = () => `<div class="fd-container"> </div> `; -readOnlyAndDisabled.parameters = { +ReadOnlyAndDisabled.parameters = { docs: { storyDescription: ` To make the \`Multi ComboBox\` component read-only, the readonly attribute needs to be added to the \`fd-nput-group\` element. @@ -623,7 +623,7 @@ The disabled state can also be achieved by adding the \`.is-disabled\` class or } }; -export const semantic = () => `<div style="height: 300px;"> +export const Semantic = () => `<div style="height: 300px;"> <div class="fd-popover"> <div class="fd-popover__control fd-input-group__control" role="combobox" aria-controls="F4GcKJH8a" aria-expanded="true" aria-haspopup="true" aria-label="multi combobox"> <div class="fd-input-group fd-input-group--control is-success" tabindex="0"> @@ -647,7 +647,7 @@ export const semantic = () => `<div style="height: 300px;"> </span> <button class="fd-token__close" aria-label="unselect option: Kiwi"></button> </span> - <span class="fd-tokenizer__indicator">4 more</span> + <span class="fd-tokenizer__indicator">4 more</span> <input class="fd-input fd-input-group__input fd-tokenizer__input" aria-label="multi input semantic" /> </div> </div> @@ -704,18 +704,18 @@ export const semantic = () => `<div style="height: 300px;"> </div> `; -semantic.parameters = { +Semantic.parameters = { docs: { storyDescription: ` For a complete list of states supported by the \`Multi ComboBox\` component, please see the documentation for the form or select components. -The semantic mode can be used to modify the combobox component by adding one of -\`is-error\` | \`is-success\` | \`is-warning\` | \`is-information\` classes into \`fd-input-group\` element. +The semantic mode can be used to modify the combobox component by adding one of +\`is-error\` | \`is-success\` | \`is-warning\` | \`is-information\` classes into \`fd-input-group\` element. To add text in the \`body\` of the component, simply include your text in the \`fd-list__message\` under the \`ul\` element.` } }; -export const mobileMode = () => `<div class="fd-dialog fd-dialog-docs-static fd-select-docs-max-height fd-dialog--active" id="select-dialog-example"> +export const MobileMode = () => `<div class="fd-dialog fd-dialog-docs-static fd-select-docs-max-height fd-dialog--active" id="select-dialog-example"> <div class="fd-dialog__content"> <header class="fd-dialog__header fd-bar fd-bar--header-with-subheader"> <div class="fd-bar__left"> @@ -757,7 +757,7 @@ export const mobileMode = () => `<div class="fd-dialog fd-dialog-docs-static fd- </span> <button class="fd-token__close" aria-label="unselect option: Kiwi"></button> </span> - <span class="fd-tokenizer__indicator">4 more</span> + <span class="fd-tokenizer__indicator">4 more</span> <input class="fd-input fd-input-group__input fd-tokenizer__input" aria-label="multi input mobile mode" /> </div> </div> @@ -826,7 +826,7 @@ export const mobileMode = () => `<div class="fd-dialog fd-dialog-docs-static fd- </div> `; -mobileMode.parameters = { +MobileMode.parameters = { docs: { storyDescription: ` For mobile devices, or tablets, Multi ComboBox component should be displayed in fullscreen mode. @@ -834,7 +834,7 @@ So instead of using popover and dropdown, it should be wrapped in \`dialog\` and } }; -export const filtering = () => ` <div style="height: 250px;"> +export const Filtering = () => ` <div style="height: 250px;"> <div class="fd-popover"> <div class="fd-popover__control" role="combobox" aria-controls="F4GcX348aB" aria-expanded="true" aria-haspopup="true"> <div class="fd-input-group fd-input-group--control" tabindex="0"> @@ -900,14 +900,14 @@ export const filtering = () => ` <div style="height: 250px;"> </div> `; -filtering.parameters = { +Filtering.parameters = { docs: { storyDescription: ` The user can filter selectable options by typing in the input. A button with the text "Show All" should be displayed, that when clicked, will clear the text in the input and show all options in the list.` } }; -export const twoColumnComboBox = () => ` <div style="height: 350px;"> +export const TwoColumnComboBox = () => ` <div style="height: 350px;"> <div class="fd-popover"> <div class="fd-popover__control" role="combobox" aria-controls="F4GcX348aB" aria-expanded="true" aria-haspopup="true"> <div class="fd-input-group fd-input-group--control" tabindex="0"> @@ -1000,7 +1000,7 @@ export const twoColumnComboBox = () => ` <div style="height: 350px;"> </div> `; -twoColumnComboBox.parameters = { +TwoColumnComboBox.parameters = { docs: { storyDescription: ` The user can filter selectable having 2 options by typing in the input. A button with the text "Show All" should be displayed, that when clicked, will clear the text in the input and show all options in the list.` diff --git a/stories/multi-input/multi-input.stories.js b/stories/multi-input/multi-input.stories.js index 29e2dec27a..b048d1c88f 100644 --- a/stories/multi-input/multi-input.stories.js +++ b/stories/multi-input/multi-input.stories.js @@ -6,9 +6,9 @@ The multi-input component is an opinionated composition of the \`input group\`, The \`popover\` is shared between the combobox and select components. Please see the \`select\` documentation for the complete list of modifiers, That are also supported by the \`combobox\` component. -\`Multi Input\` allows users to enter multiple values which are displayed as a tokens. -It provides an editable input field for filtering the list, and a dropdown menu with a list of the available options. -If the entries are not validated by the application, users can also enter custom values. +\`Multi Input\` allows users to enter multiple values which are displayed as a tokens. +It provides an editable input field for filtering the list, and a dropdown menu with a list of the available options. +If the entries are not validated by the application, users can also enter custom values. `, tags: ['f3', 'a11y', 'theme'], components: [ @@ -34,7 +34,7 @@ If the entries are not validated by the application, users can also enter custom } }; -export const cozyAndCompact = () => `<div style="display:flex;height:310px"> +export const CozyAndCompact = () => `<div style="display:flex;height:310px"> <div style="display:flex;flex-direction:column;padding-right:1rem"> <label for="cozyMultiInput" class="fd-form-label"> Multi Input Cozy Mode @@ -85,7 +85,7 @@ export const cozyAndCompact = () => `<div style="display:flex;height:310px"> </div> <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown fd-popover__body--dropdown-fill" aria-hidden="false" id="F4GcX348a"> <div class="fd-popover__wrapper"> - <ul + <ul aria-label="list of fruits" aria-multiselectable="true" class="fd-list fd-list--multi-input" @@ -225,13 +225,13 @@ export const cozyAndCompact = () => `<div style="display:flex;height:310px"> </div> `; -cozyAndCompact.parameters = { +CozyAndCompact.parameters = { docs: { iframeHeight: 350 } }; -export const asFormItem = () => `<div style="height:310px"> +export const AsFormItem = () => `<div style="height:310px"> <div class="fd-form-item"> <label for="formItemMultiInput" class="fd-form-label"> Multi Input as form item @@ -322,7 +322,7 @@ export const asFormItem = () => `<div style="height:310px"> </div> `; -asFormItem.parameters = { +AsFormItem.parameters = { docs: { iframeHeight: 900, storyDescription: ` @@ -332,7 +332,7 @@ Applications are free to override this in their custom styles if needed and own } }; -export const grouping = () => `<div style="height:450px"> +export const Grouping = () => `<div style="height:450px"> <label for="fruitsAndVegsMultiInput" class="fd-form-label"> Fruits and Vegetables </label> @@ -359,7 +359,7 @@ export const grouping = () => `<div style="height:450px"> </span> <button aria-label="unselect option: kiwi" class="fd-token__close"></button> </span> - <span class="fd-tokenizer__indicator">2 more</span> + <span class="fd-tokenizer__indicator">2 more</span> <input id="fruitsAndVegsMultiInput" class="fd-input fd-input-group__input fd-tokenizer__input" /> </div> </div> @@ -439,7 +439,7 @@ export const grouping = () => `<div style="height:450px"> </div> `; -grouping.parameters = { +Grouping.parameters = { docs: { iframeHeight: 500, storyDescription: @@ -447,7 +447,7 @@ grouping.parameters = { } }; -export const matchPopoverBodySize = () => `<div style="height:270px"> +export const MatchPopoverBodySize = () => `<div style="height:270px"> <label for="matchPopoverBodySizeMultiInput" class="fd-form-label"> Fruits </label> @@ -474,7 +474,7 @@ export const matchPopoverBodySize = () => `<div style="height:270px"> </span> <button aria-label="unselect option: kiwi" class="fd-token__close"></button> </span> - <span class="fd-tokenizer__indicator">2 more</span> + <span class="fd-tokenizer__indicator">2 more</span> <input id="matchPopoverBodySizeMultiInput" class="fd-input fd-input-group__input fd-tokenizer__input" /> </div> </div> @@ -531,20 +531,20 @@ export const matchPopoverBodySize = () => `<div style="height:270px"> </div> `; -matchPopoverBodySize.parameters = { +MatchPopoverBodySize.parameters = { docs: { iframeHeight: 300, storyDescription: ` -The default length size of the popover body is often different from the text length. +The default length size of the popover body is often different from the text length. The body length can be adjusted to match the text length by adding the \`fd-popover__body--dropdown-fill\` class to the \`fd-popover__body\`. -This class has been added to all the \`Multi Input\` examples above. +This class has been added to all the \`Multi Input\` examples above. In the example you can see how the \`Multi Input\` component looks without the \`fd-popover__body--dropdown-fill\` modifier. ` } }; -export const readOnlyAndDisabled = () => `<div style="display:flex;height:250px;margin-top:1em;"> +export const ReadOnlyAndDisabled = () => `<div style="display:flex;height:250px;margin-top:1em;"> <div> <div style="margin-bottom:1em;"> <div> @@ -701,7 +701,7 @@ export const readOnlyAndDisabled = () => `<div style="display:flex;height:250px; </div> `; -readOnlyAndDisabled.parameters = { +ReadOnlyAndDisabled.parameters = { docs: { iframeHeight: 100, storyDescription: ` @@ -714,7 +714,7 @@ The disabled state can also be achieved by adding the \`.is-disabled\` class or } }; -export const semantic = () => `<div style="height:300px"> +export const Semantic = () => `<div style="height:300px"> <label for="semanticMultiInput" class="fd-form-label"> Semantic Fruits </label> @@ -741,7 +741,7 @@ export const semantic = () => `<div style="height:300px"> </span> <button aria-label="unselect option: kiwi" class="fd-token__close"></button> </span> - <span class="fd-tokenizer__indicator">4 more</span> + <span class="fd-tokenizer__indicator">4 more</span> <input id="semanticMultiInput" class="fd-input fd-input-group__input fd-tokenizer__input" /> </div> </div> @@ -799,19 +799,19 @@ export const semantic = () => `<div style="height:300px"> </div> `; -semantic.parameters = { +Semantic.parameters = { docs: { iframeHeight: 350, storyDescription: ` For a complete list of states supported by the \`Multi Input\` component, please see the documentation for the form or select components. -The semantic mode can be used to modify the combobox component by adding one of -\`is-error\` | \`is-success\` | \`is-warning\` | \`is-information\` classes into \`fd-input-group\` element. +The semantic mode can be used to modify the combobox component by adding one of +\`is-error\` | \`is-success\` | \`is-warning\` | \`is-information\` classes into \`fd-input-group\` element. To add text in the \`body\` of the component, simply include your text in the \`fd-list__message\` under the \`ul\` element.` } }; -export const mobileMode = () => `<section role="dialog" aria-labelledby="mobileModeMultiInputHeader" class="fd-dialog fd-dialog-docs-static fd-select-docs-max-height fd-dialog--active" id="select-dialog-example"> +export const MobileMode = () => `<section role="dialog" aria-labelledby="mobileModeMultiInputHeader" class="fd-dialog fd-dialog-docs-static fd-select-docs-max-height fd-dialog--active" id="select-dialog-example"> <div class="fd-dialog__content"> <header class="fd-dialog__header fd-bar fd-bar--header-with-subheader"> <div class="fd-bar__left"> @@ -853,7 +853,7 @@ export const mobileMode = () => `<section role="dialog" aria-labelledby="mobileM </span> <button aria-label="unselect option: kiwi" class="fd-token__close"></button> </span> - <span class="fd-tokenizer__indicator">4 more</span> + <span class="fd-tokenizer__indicator">4 more</span> <input aria-labelledby="mobileModeMultiInputHeader" class="fd-input fd-input-group__input fd-tokenizer__input" /> </div> </div> @@ -908,7 +908,7 @@ export const mobileMode = () => `<section role="dialog" aria-labelledby="mobileM </div> `; -mobileMode.parameters = { +MobileMode.parameters = { docs: { iframeHeight: 450, storyDescription: ` @@ -917,7 +917,7 @@ So instead of using popover and dropdown, it should be wrapped in \`dialog\` and } }; -export const filtering = () => `<div style="min-height: 250px;"> +export const Filtering = () => `<div style="min-height: 250px;"> <label for="filteringMultiInput" class="fd-form-label"> Filtered Fruits </label> @@ -1013,7 +1013,7 @@ export const filtering = () => `<div style="min-height: 250px;"> </div> `; -filtering.parameters = { +Filtering.parameters = { docs: { iframeHeight: 300, storyDescription: ` diff --git a/stories/notification/notification.stories.js b/stories/notification/notification.stories.js index 45e064bbab..2af8c44e39 100644 --- a/stories/notification/notification.stories.js +++ b/stories/notification/notification.stories.js @@ -7,7 +7,7 @@ Notifications are used to relay information to the user about a situation or tas ##Usage **Use notifications if:** - + * You want to make users aware of situations that require attention. * You intend to reduce the amount of information and actions to a minimum, but provide enough information to highlight the level of importance. `, @@ -15,7 +15,7 @@ Notifications are used to relay information to the user about a situation or tas } }; -export const primary = () => `<div class="fd-notification"> +export const Primary = () => `<div class="fd-notification"> <div class="fd-notification__body"> <span class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/3.svg')" role="img" aria-label="John Doe"></span> <div class="fd-notification__content"> @@ -39,7 +39,7 @@ export const primary = () => `<div class="fd-notification"> </div> </div> `; -primary.parameters = { +Primary.parameters = { docs: { iframeHeight: 200, storyDescription: ` @@ -48,7 +48,7 @@ Primary notifications display a container with an avatar, content area with text } }; -export const noAvatar = () => `<div class="fd-notification"> +export const NoAvatar = () => `<div class="fd-notification"> <div class="fd-notification__body"> <div class="fd-notification__content fd-notification__content--no-avatar"> <div class="fd-notification__header"> @@ -71,7 +71,7 @@ export const noAvatar = () => `<div class="fd-notification"> </div> </div> `; -noAvatar.parameters = { +NoAvatar.parameters = { docs: { iframeHeight: 200, storyDescription: ` @@ -80,7 +80,7 @@ Notifications can be displayed without an avatar by adding the \`fd-notification } }; -export const information = () => `<div class="fd-notification"> +export const Information = () => `<div class="fd-notification"> <div class="fd-message-strip fd-message-strip--information fd-message-strip--dismissible" role="alert"> <p class="fd-message-strip__text"> Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet. @@ -110,7 +110,7 @@ export const information = () => `<div class="fd-notification"> </div> </div> `; -information.parameters = { +Information.parameters = { docs: { iframeHeight: 200, storyDescription: ` @@ -119,7 +119,7 @@ Notifications can also include alerts, and in this case it is informative. You c } }; -export const warning = () => `<div class="fd-notification"> +export const Warning = () => `<div class="fd-notification"> <div class="fd-message-strip fd-message-strip--warning fd-message-strip--dismissible" role="alert"> <p class="fd-message-strip__text"> Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet. @@ -150,7 +150,7 @@ export const warning = () => `<div class="fd-notification"> </div> </div> `; -warning.parameters = { +Warning.parameters = { docs: { iframeHeight: 200, storyDescription: ` @@ -159,7 +159,7 @@ Notifications can display warning alerts by adding the \`fd-message-strip fd-mes } }; -export const error = () => `<div class="fd-notification"> +export const Error = () => `<div class="fd-notification"> <div class="fd-message-strip fd-message-strip--error fd-message-strip--dismissible" role="alert"> <p class="fd-message-strip__text"> Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet. @@ -190,7 +190,7 @@ export const error = () => `<div class="fd-notification"> </div> </div> `; -error.parameters = { +Error.parameters = { docs: { iframeHeight: 200, storyDescription: ` @@ -199,10 +199,10 @@ Notifications can display error alerts by adding the \`fd-message-strip fd-messa } }; -export const notificationGroup = () => `<div class="fd-notification fd-notification--group"> +export const NotificationGroup = () => `<div class="fd-notification fd-notification--group"> <ul class="fd-tabs fd-tabs--l" role="tablist"> <li role="tab" class="fd-tabs__item" aria-selected="true"> - <a + <a class="fd-tabs__link" aria-controls="notifV550" href="#notifV550"> @@ -212,9 +212,9 @@ export const notificationGroup = () => `<div class="fd-notification fd-notificat </a> </li> <li role="tab" class="fd-tabs__item"> - <a - aria-controls="notifV551" - class="fd-tabs__link" + <a + aria-controls="notifV551" + class="fd-tabs__link" href="#notifV551"> <span class="fd-tabs__tag"> By Type @@ -224,7 +224,7 @@ export const notificationGroup = () => `<div class="fd-notification fd-notificat <li role="tab" class="fd-tabs__item"> <a aria-controls="notifV552" - class="fd-tabs__link" + class="fd-tabs__link" href="#notifV552"> <span class="fd-tabs__tag"> By Priority @@ -330,7 +330,7 @@ export const notificationGroup = () => `<div class="fd-notification fd-notificat <p class="fd-notification__footer"> <span class="fd-notification__footer-content">SAP Analytics Cloud</span> <span class="fd-notification__separator"></span> - <span class="fd-notification__footer-content">7 minutes ago m dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</span> + <span class="fd-notification__footer-content">7 minutes ago m dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</span> </p> </div> <div class="fd-notification__actions"> @@ -429,7 +429,7 @@ export const notificationGroup = () => `<div class="fd-notification fd-notificat </div> </div> `; -notificationGroup.parameters = { +NotificationGroup.parameters = { docs: { iframeHeight: 200, storyDescription: `You can display a group of notifications in a list format, and the user can sort them from the header. To display a notification group, add the \`fd-notification fd-notification\\__group\` class. @@ -437,7 +437,7 @@ notificationGroup.parameters = { } }; -export const mobile = () => `<div style="heigt: 200px; max-width: 20rem"> +export const Mobile = () => `<div style="heigt: 200px; max-width: 20rem"> <div class="fd-notification fd-notification--mobile"> <div class="fd-notification__body"> @@ -489,25 +489,25 @@ export const mobile = () => `<div style="heigt: 200px; max-width: 20rem"> <div class="fd-notification fd-notification--mobile fd-notification--group"> <ul class="fd-tabs fd-tabs--l" role="tablist"> <li role="tab" aria-selected="true" class="fd-tabs__item"> - <a - class="fd-tabs__link" - aria-controls="notifP300" + <a + class="fd-tabs__link" + aria-controls="notifP300" href="#notifP300"> <span class="fd-tabs__tag">By Date</span> </a> </li> <li role="tab" class="fd-tabs__item"> - <a - class="fd-tabs__link" - aria-controls="notifP301" + <a + class="fd-tabs__link" + aria-controls="notifP301" href="#notifP301"> <span class="fd-tabs__tag">By Type</span> </a> </li> <li role="tab" class="fd-tabs__item"> - <a + <a class="fd-tabs__link" - aria-controls="notifP302" + aria-controls="notifP302" href="#notifP302"> <span class="fd-tabs__tag">By Priority</span> </a> @@ -813,7 +813,8 @@ export const mobile = () => `<div style="heigt: 200px; max-width: 20rem"> </div> </div> `; -error.mobile = { + +Error.mobile = { docs: { iframeHeight: 200 } diff --git a/stories/numeric-content/numeric-content.stories.js b/stories/numeric-content/numeric-content.stories.js index df31c6e620..02e19e3b30 100644 --- a/stories/numeric-content/numeric-content.stories.js +++ b/stories/numeric-content/numeric-content.stories.js @@ -3,7 +3,7 @@ export default { components: ['numeric-content', 'icon'] }; -export const large = () => ` +export const Large = () => ` <div class="tile-content-playground"> <div class="fd-numeric-content"> <div class="fd-numeric-content__kpi-container"> @@ -33,10 +33,10 @@ export const large = () => ` </div> `; -large.parameters = { docs: { disable: true } }; +Large.parameters = { docs: { disable: true } }; -export const medium = () => ` +export const Medium = () => ` <div class="tile-content-playground"> <div class="fd-numeric-content fd-numeric-content--m"> <div class="fd-numeric-content__kpi-container"> @@ -64,10 +64,10 @@ export const medium = () => ` </div> `; -medium.parameters = { docs: { disable: true } }; +Medium.parameters = { docs: { disable: true } }; -export const small = () => ` +export const Small = () => ` <div class="tile-content-playground"> <div class="fd-numeric-content fd-numeric-content--s"> <div class="fd-numeric-content__kpi-container"> @@ -91,10 +91,10 @@ export const small = () => ` </div> `; -small.parameters = { docs: { disable: true } }; +Small.parameters = { docs: { disable: true } }; -export const launchIconLarge = () => ` +export const LaunchIconLarge = () => ` <div class="tile-content-playground"> <div class="fd-numeric-content"> <div class="fd-numeric-content__launch-icon-container"> @@ -124,10 +124,10 @@ export const launchIconLarge = () => ` </div> `; -launchIconLarge.parameters = { docs: { disable: true } }; +LaunchIconLarge.parameters = { docs: { disable: true } }; -export const launchIconMedium = () => ` +export const LaunchIconMedium = () => ` <div class="tile-content-playground"> <div class="fd-numeric-content fd-numeric-content--m"> <div class="fd-numeric-content__launch-icon-container"> @@ -163,10 +163,10 @@ export const launchIconMedium = () => ` </div> `; -launchIconMedium.parameters = { docs: { disable: true } }; +LaunchIconMedium.parameters = { docs: { disable: true } }; -export const launchIconSmall = () => ` +export const LaunchIconSmall = () => ` <div class="tile-content-playground"> <div class="fd-numeric-content fd-numeric-content--s"> <div class="fd-numeric-content__launch-icon-container"> @@ -202,4 +202,4 @@ export const launchIconSmall = () => ` </div> `; -launchIconSmall.parameters = { docs: { disable: true } }; +LaunchIconSmall.parameters = { docs: { disable: true } }; diff --git a/stories/object-identifier/object-identifier.stories.js b/stories/object-identifier/object-identifier.stories.js index 73e3573291..b3bdb7492e 100644 --- a/stories/object-identifier/object-identifier.stories.js +++ b/stories/object-identifier/object-identifier.stories.js @@ -20,39 +20,39 @@ The object identifier should be easily read by the users, preferably displaying **Do not use the object identifier if:** - You want to display system messages. -- They are for decorative purposes only. +- They are for decorative purposes only. `, tags: ['f3'], components: ['object-identifier', 'link', 'table'] } }; -export const titleOnly = () => `<div class="fd-object-identifier"> +export const TitleOnly = () => `<div class="fd-object-identifier"> <p class="fd-object-identifier__title">NoteBook Basic 15</p> </div> `; -titleOnly.storyName = 'Title'; -titleOnly.parameters = { +TitleOnly.storyName = 'Title'; +TitleOnly.parameters = { docs: { storyDescription: 'To display the object identifier as a title, add the `fd-object-identifier__title` modifier class to the main element.' } }; -export const boldTitle = () => `<div class="fd-object-identifier"> +export const BoldTitle = () => `<div class="fd-object-identifier"> <p class="fd-object-identifier__title fd-object-identifier__title--bold">NoteBook Basic 15</p> </div> `; -boldTitle.storyName = 'Bold'; -boldTitle.parameters = { +BoldTitle.storyName = 'Bold'; +BoldTitle.parameters = { docs: { storyDescription: `To display the object identifier's title in bold, replace \`fd-object-identifier__title\` with the \`fd-object-identifier__title--bold\` modifier class.` } }; -export const titleAsLink = () => ` +export const TitleAsLink = () => ` <div class="fd-object-identifier"> <p class="fd-object-identifier__title"> <a href="#" class="fd-link fd-object-identifier__link"> @@ -70,14 +70,14 @@ export const titleAsLink = () => ` </div> `; -titleAsLink.storyName = 'Link'; -titleAsLink.parameters = { +TitleAsLink.storyName = 'Link'; +TitleAsLink.parameters = { docs: { storyDescription: 'To display the object identifier as a link, use anchor element with `.fd-link .fd-object-identifier__link` classes.' } }; -export const titleAndText = () => ` +export const TitleAndText = () => ` <div class="fd-object-identifier"> <p class="fd-object-identifier__title">NoteBook Basic 15</p> <p class="fd-object-identifier__text">Notebook Basic 15 with 2,80 GHz quad core, 15" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro</p> @@ -113,22 +113,21 @@ export const titleAndText = () => ` </div> `; -titleAndText.storyName = 'Descriptive'; -titleAndText.parameters = { +TitleAndText.storyName = 'Descriptive'; +TitleAndText.parameters = { docs: { storyDescription: 'To display the object identifier\'s title with descriptive text, add an additional tag below the title container and a `fd-object-identifier__text` modifier class.' } }; -export const mediumSize = () => ` +export const MediumSize = () => ` <div class="fd-object-identifier fd-object-identifier--medium"> <p class="fd-object-identifier__title">NoteBook Basic 15</p> <p class="fd-object-identifier__text">Notebook Basic 15 with 2,80 GHz quad core, 15" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro</p> </div> `; -mediumSize.storyName = 'Medium Size'; -mediumSize.parameters = { +MediumSize.parameters = { docs: { storyDescription: 'To display the object identifier title in medium size, add the `fd-object-identifier--medium` modifier.' } diff --git a/stories/object-list/object-list.stories.js b/stories/object-list/object-list.stories.js index 03ea291472..f3ddbd4bc6 100644 --- a/stories/object-list/object-list.stories.js +++ b/stories/object-list/object-list.stories.js @@ -5,9 +5,9 @@ export default { An object list is a type of list that consists of object list items, where each item provides a quick overview of an object. Object list items should only contain essential information for the user to identify what objects to prioritize. Avoid long descriptive texts as the text space is limited and will truncate. - + **Object list items can display the following elements:** - + - Title of the object - Avatar - Object display components such as **Object Identifier**, **Object Number**, **Object Attribute**, **Object Marker** and **Object Status** @@ -28,7 +28,7 @@ what objects to prioritize. Avoid long descriptive texts as the text space is li ##Modifiers -The object list item can display several object display components with semantic statuses. +The object list item can display several object display components with semantic statuses. Below are examples of how to add semantic statuses to the components: | **Status** | <span style="margin-left: 2rem;">**Object Number**</span> | <span style="margin-left: 2rem;">**Object Status**</span> | @@ -57,14 +57,14 @@ Below are examples of how to add semantic statuses to the components: - \`fd-object-status\`, \`fd-object-marker\` object status and object status elements - \`fd-object-list__row-left\` container to hold left elements of row - \`fd-object-list__object-attribute\` object attribute element - + `, tags: ['f3', 'a11y', 'theme', 'development'], components: ['list', 'icon', 'object-identifier', 'avatar', 'object-marker', 'object-number', 'object-status', 'object-list'] } }; -export const object = () => ` +export const Standart = () => ` <h4 id="objectListItemHeader">Object List Item</h4> <ul class="fd-list fd-object-list" role="list" aria-labelledby="objectListItemHeader"> <li role="listitem" tabindex="0" class="fd-list__item fd-object-list__item"> @@ -94,7 +94,7 @@ export const object = () => ` <div class="fd-object-list__row"> <div class="fd-object-list__row-left"> <div class="fd-object-list__object-attribute"> - + First Attribute </div> </div> @@ -302,16 +302,14 @@ export const object = () => ` </ul> `; -object.storyName = 'Standard'; - -object.parameters = { +Standart.parameters = { docs: { iframeHeight: 785, storyDescription: 'The standard object list item displays a title, introductory text, an avatar and object display components. It is recommended to display avatar in size S, therefore add the `fd-avatar--s` modifier class to the `fd-avatar` element.' } }; -export const navigation = () => ` +export const Navigation = () => ` <h4 id="objectListItemNavigation">Object List Item With Navigation</h4> @@ -345,7 +343,7 @@ export const navigation = () => ` <div class="fd-object-list__row"> <div class="fd-object-list__row-left"> <div class="fd-object-list__object-attribute"> - + First Attribute </div> </div> @@ -410,7 +408,7 @@ export const navigation = () => ` <div class="fd-object-list__row"> <div class="fd-object-list__row-left"> <div class="fd-object-list__object-attribute"> - + First Attribute </div> </div> @@ -448,9 +446,7 @@ export const navigation = () => ` </div> `; -navigation.storyName = 'Navigation'; - -navigation.parameters = { +Navigation.parameters = { docs: { iframeHeight: 355, storyDescription: 'An object list can display links that the users can navigate to. To display a navigation object list, add the `fd-list--navigation-object` modifier class together with `fd-list--navigation` and the `fd-list__item--link` modifier class to the list elements that contain a link. All items should be navigable.' @@ -458,7 +454,7 @@ navigation.parameters = { }; -export const selection = () => ` +export const Selection = () => ` <h4 id="objectListItemRowSelection">Object List Item With Row Selection</h4> <div style="max-width: 450px"> <ul class="fd-list fd-object-list fd-list--selection fd-list--selection-row" role="listbox" aria-labelledby="objectListItemRowSelection"> @@ -486,7 +482,7 @@ export const selection = () => ` <div class="fd-object-list__row"> <div class="fd-object-list__row-left"> <div class="fd-object-list__object-attribute"> - + First Attribute </div> </div> @@ -549,7 +545,7 @@ export const selection = () => ` <div class="fd-object-list__row"> <div class="fd-object-list__row-left"> <div class="fd-object-list__object-attribute"> - + First Attribute </div> </div> @@ -581,26 +577,24 @@ export const selection = () => ` </div> </div> </div> - </li> + </li> </ul> </div> `; -selection.storyName = 'Selection'; - -selection.parameters = { +Selection.parameters = { docs: { iframeHeight: 305, storyDescription: 'Object list items can be selectable by adding the `fd-list--selection` and `fd-list--selection-row` modifier classes to the main element.' } }; -export const selectionWithNavigation = () => ` +export const SelectionWithNavigation = () => ` <h4 id="objectListItemRowSelectionAndNavigation">Object List Item With Row Selection And Navigation</h4> <div role="navigation" style="max-width: 450px"> <ul class="fd-list fd-object-list fd-list--navigation-object fd-list--navigation fd-list--selection" role="listbox" aria-labelledby="objectListItemRowSelectionAndNavigation"> <li role="option" aria-selected="true" tabindex="0" class="fd-list__item fd-object-list__item fd-list__item--link is-selected"> - <a tabindex="0" id="anchor" class="fd-list__link is-active"> + <a tabindex="0" id="anchor" class="fd-list__link is-active"> <div class="fd-object-list__container"> <div class="fd-object-list__intro"> Optional inline text</span> @@ -627,7 +621,7 @@ export const selectionWithNavigation = () => ` <div class="fd-object-list__row"> <div class="fd-object-list__row-left"> <div class="fd-object-list__object-attribute"> - + First Attribute </div> </div> @@ -665,7 +659,7 @@ export const selectionWithNavigation = () => ` </a> </li> <li role="option" aria-selected="true" tabindex="0" class="fd-list__item fd-object-list__item fd-list__item--link is-selected"> - <a tabindex="0" class="fd-list__link"> + <a tabindex="0" class="fd-list__link"> <div class="fd-object-list__container"> <div class="fd-object-list__intro"> Optional inline text</span> @@ -692,7 +686,7 @@ export const selectionWithNavigation = () => ` <div class="fd-object-list__row"> <div class="fd-object-list__row-left"> <div class="fd-object-list__object-attribute"> - + First Attribute </div> </div> @@ -757,7 +751,7 @@ export const selectionWithNavigation = () => ` <div class="fd-object-list__row"> <div class="fd-object-list__row-left"> <div class="fd-object-list__object-attribute"> - + First Attribute </div> </div> @@ -790,21 +784,19 @@ export const selectionWithNavigation = () => ` </div> </div> </a> - </li> + </li> </ul> </div> `; -selectionWithNavigation.storyName = 'Selection With Navigation'; - -selectionWithNavigation.parameters = { +SelectionWithNavigation.parameters = { docs: { iframeHeight: 305, storyDescription: 'This object list is both selectable and navigable. To display selectable object list items with navigation, add the `fd-list--selection`, `fd-list--navigation` and `fd-list--navigation-object` modifier classes to the list and the `fd-list__item--link` modifier class to the list elements that contain links. All items should be navigable.' } }; -export const borderless = () => ` +export const Borderless = () => ` <h4 id="objectListItemBorderless">Borderless Object List Item</h4> <div style="max-width: 450px"> <ul class="fd-list fd-object-list fd-list--no-border" role="list" aria-labelledby="objectListItemBorderless"> @@ -835,7 +827,7 @@ export const borderless = () => ` <div class="fd-object-list__row"> <div class="fd-object-list__row-left"> <div class="fd-object-list__object-attribute"> - + First Attribute </div> </div> @@ -898,7 +890,7 @@ export const borderless = () => ` <div class="fd-object-list__row"> <div class="fd-object-list__row-left"> <div class="fd-object-list__object-attribute"> - + First Attribute </div> </div> @@ -958,7 +950,7 @@ export const borderless = () => ` <div class="fd-object-list__row"> <div class="fd-object-list__row-left"> <div class="fd-object-list__object-attribute"> - + First Attribute </div> </div> @@ -992,9 +984,7 @@ export const borderless = () => ` </div> `; -borderless.storyName = 'Borderless'; - -borderless.parameters = { +Borderless.parameters = { docs: { iframeHeight: 305, storyDescription: 'Object list items can be displayed without borders. To display a borderless list, add the `fd-list--no-border` modifier class to the list element.' diff --git a/stories/object-marker/object-marker.stories.js b/stories/object-marker/object-marker.stories.js index 46098b6487..8646907e63 100644 --- a/stories/object-marker/object-marker.stories.js +++ b/stories/object-marker/object-marker.stories.js @@ -1,8 +1,8 @@ export default { title: 'Components/Object Marker', parameters: { - description: `Object marker indicates the technical status of an object. It display the technical state like (draft, -unsaved changes, locked, favorite, flagged). Use the object marker for this unless you want to display the status of the object in the business life cycle. + description: `Object marker indicates the technical status of an object. It display the technical state like (draft, +unsaved changes, locked, favorite, flagged). Use the object marker for this unless you want to display the status of the object in the business life cycle. The technical status can be represented as an icon, with an icon and text, or as text only, depending on the screen size. `, tags: ['f3', 'a11y', 'theme'], components: ['object-marker', 'icon'] @@ -13,7 +13,7 @@ The technical status can be represented as an icon, with an icon and text, or as * Object Marker can display the semantic status of an object: (class: `fd-object-marker`) */ -export const iconOnly = () => ` +export const IconOnly = () => ` <div class="fd-object-marker"> <i class="fd-object-marker__icon sap-icon--request" aria-label="icon for request"></i> </div> @@ -35,7 +35,7 @@ export const iconOnly = () => ` * Object Marker Text only */ -export const markerText = () => ` +export const MarkerText = () => ` <div class="fd-object-marker"> <span class="fd-object-marker__text">Draft</span> </div> @@ -48,7 +48,7 @@ export const markerText = () => ` * Object Marker icon and text */ -export const iconAndText = () => ` +export const IconAndText = () => ` <div class="fd-object-marker"> <i class="fd-object-marker__icon sap-icon--request" role="presentation"></i> <span class="fd-object-marker__text">Request</span> @@ -70,7 +70,7 @@ export const iconAndText = () => ` <span class="fd-object-marker__text">Locked</span> </div> `; -iconAndText.parameters = { +IconAndText.parameters = { docs: { iframeHeight: 150, storyDescription: 'The Marker supports the Icon and Text mode of displaying the Object.' @@ -83,7 +83,7 @@ iconAndText.parameters = { If Object marker has to be clicked/tabbed by the user add the `fd-object-marker--link` modifier class. */ -export const clickableObjectMarker = () => ` +export const ClickableObjectMarker = () => ` <a href="#" class="fd-object-marker fd-object-marker--link"> <i class="fd-object-marker__icon sap-icon--private" role="presentation"></i> <span class="fd-object-marker__text">Locked</span> @@ -93,7 +93,7 @@ export const clickableObjectMarker = () => ` <span class="fd-object-marker__text">Unsaved Changes</span> </a> `; -clickableObjectMarker.parameters = { +ClickableObjectMarker.parameters = { docs: { iframeHeight: 150, storyDescription: diff --git a/stories/object-number/object-number.stories.js b/stories/object-number/object-number.stories.js index 8819322431..8b2ac7c907 100644 --- a/stories/object-number/object-number.stories.js +++ b/stories/object-number/object-number.stories.js @@ -40,7 +40,7 @@ Make sure that the object number is properly described and semantically understa * | None | `fd-object-number__text` (class) | */ -export const primary = () => `<div class="fddocs-container"> +export const Primary = () => `<div class="fddocs-container"> <span class="fd-object-number fd-object-number--negative"> <span class="fd-object-number__text">-2,000.00</span><span class="fd-object-number__unit">EUR</span> </span> @@ -63,7 +63,7 @@ export const primary = () => `<div class="fddocs-container"> * In some cases, it can be useful to enlarge the text for the object number. To display the object number in large text, add the `--large` modifier class to the element. */ -export const large = () => `<div class="fddocs-container"> +export const Large = () => `<div class="fddocs-container"> <span class="fd-object-number fd-object-number--large fd-object-number--negative"> <span class="fd-object-number__text">-2,000.00</span><span class="fd-object-number__unit">EUR</span> </span> @@ -86,7 +86,7 @@ export const large = () => `<div class="fddocs-container"> * When there is a key numeric attribute on the page, it should be emphasized in bold text. To display the object number in bold text, add the `--bold` modifier class to the element. */ -export const bold = () => `<div class="fddocs-container"> +export const Bold = () => `<div class="fddocs-container"> <span class="fd-object-number fd-object-number--negative"> <span class="fd-object-number__text fd-object-number__text--bold">-2,000.00</span><span class="fd-object-number__unit">EUR</span> </span> diff --git a/stories/object-status/object-status.stories.js b/stories/object-status/object-status.stories.js index 8f27ce4cee..160dc10d2e 100644 --- a/stories/object-status/object-status.stories.js +++ b/stories/object-status/object-status.stories.js @@ -15,7 +15,7 @@ attribute of a line item in a table. `, * informative (class: `fd-object-status--informative`), or none. */ -export const primary = () => `<div class="fddocs-container"> +export const Primary = () => `<div class="fddocs-container"> <span class="fd-object-status fd-object-status--negative"> <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i> <span class="fd-object-status__text">Negative</span> @@ -39,7 +39,7 @@ export const primary = () => `<div class="fddocs-container"> * Object status icon only */ -export const icon = () => `<div class="fddocs-container"> +export const Icon = () => `<div class="fddocs-container"> <span class="fd-object-status fd-object-status--negative"> <i class="fd-object-status__icon sap-icon--message-error" aria-label="Negative"></i> </span> @@ -59,7 +59,7 @@ export const icon = () => `<div class="fddocs-container"> * Object status text only */ -export const text = () => `<div class="fddocs-container"> +export const Text = () => `<div class="fddocs-container"> <span class="fd-object-status fd-object-status--negative"> <span class="fd-object-status__text">Negative</span> </span> @@ -82,7 +82,7 @@ export const text = () => `<div class="fddocs-container"> * Object status icon and text */ -export const iconAndText = () => `<div class="fddocs-container"> +export const IconAndText = () => `<div class="fddocs-container"> <span class="fd-object-status fd-object-status--negative"> <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i> <span class="fd-object-status__text">Negative</span> @@ -106,7 +106,7 @@ export const iconAndText = () => `<div class="fddocs-container"> * Object Status with Generic Indication Colors */ -export const genericIndicationColors = () => `<div class="fddocs-container"> +export const GenericIndicationColors = () => `<div class="fddocs-container"> <span class="fd-object-status fd-object-status--indication-1"> <span class="fd-object-status__text">Dark Red</span> </span> @@ -140,7 +140,7 @@ export const genericIndicationColors = () => `<div class="fddocs-container"> If Object Status has to be clicked/tabbed by the user add the `fd-object-status--link` modifier class. */ -export const clickableObjectStatus = () => `<div class="fddocs-container"> +export const ClickableObjectStatus = () => `<div class="fddocs-container"> <a href="#" class="fd-object-status fd-object-status--negative fd-object-status--link"> <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i> <span class="fd-object-status__text">Negative</span> @@ -189,7 +189,7 @@ export const clickableObjectStatus = () => `<div class="fddocs-container"> `; -export const largeObjectStatus = () => `<div class="fddocs-container"> +export const LargeObjectStatus = () => `<div class="fddocs-container"> <span class="fd-object-status fd-object-status--large fd-object-status--negative"> <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i> <span class="fd-object-status__text">Negative</span> @@ -218,7 +218,7 @@ export const largeObjectStatus = () => `<div class="fddocs-container"> Inverted Object Status is achieved by adding the `fd-object-status--inverted` modifier class. */ -export const inverted = () => `<div class="fddocs-container"> +export const Inverted = () => `<div class="fddocs-container"> <span class="fd-object-status fd-object-status--negative fd-object-status--inverted"> <span class="fd-object-status__text">Inverted Negative</span> </span> @@ -286,7 +286,7 @@ export const inverted = () => `<div class="fddocs-container"> Inverted indication colors */ -export const invertedIndication = () => `<div class="fddocs-container"> +export const InvertedIndication = () => `<div class="fddocs-container"> <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-1"> <span class="fd-object-status__text">Indication1</span> </span> diff --git a/stories/off-screen/off-screen.stories.js b/stories/off-screen/off-screen.stories.js index 9432143a6f..6055a01418 100644 --- a/stories/off-screen/off-screen.stories.js +++ b/stories/off-screen/off-screen.stories.js @@ -9,12 +9,12 @@ export default { } }; -export const primary = () => `<div class="fd-off-screen" aria-live="polite"> +export const Primary = () => `<div class="fd-off-screen" aria-live="polite"> This will be read, whenever this element changes. </div> <div class="fd-text">Text with aria-live is kept far left of the screen. so it will not be visible, but it will be read by screen reader.</div> `; -primary.parameters = { +Primary.parameters = { docs: { iframeHeight: 200, storyDescription: `For aria-live to read any change in element, we need to place element but it should not be visible to user. diff --git a/stories/page-footer/page-footer.stories.js b/stories/page-footer/page-footer.stories.js index 503aa9f897..ac4a15cc59 100644 --- a/stories/page-footer/page-footer.stories.js +++ b/stories/page-footer/page-footer.stories.js @@ -2,7 +2,7 @@ export default { title: 'Layouts/Page Footer', parameters: { description: `The Page Footer displays at the bottom of the page, and includes the links, icons and copy Right string. - + ##Usage **Use Page Footer if:** @@ -19,9 +19,9 @@ Note: You may want to display components from right to left on the screen for in } }; -export const singleLineLink = () => ` +export const SingleLineLink = () => ` <div class="fd-page-footer fd-page-footer--xl"> - <div class="fd-page-footer__logo"> + <div class="fd-page-footer__logo"> <img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" alt="page footer logo"></img> </div> <div class="fd-page-footer__container"> @@ -39,7 +39,7 @@ export const singleLineLink = () => ` </div> `; -singleLineLink.parameters = { +SingleLineLink.parameters = { docs: { iframeHeight: 100, storyDescription: @@ -49,7 +49,7 @@ singleLineLink.parameters = { export const MultiLineLink = () => ` <div class="fd-page-footer fd-page-footer--xl"> - <div class="fd-page-footer__logo"> + <div class="fd-page-footer__logo"> <img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" alt="page footer logo"></img> </div> <div class="fd-page-footer__container"> @@ -81,7 +81,7 @@ MultiLineLink.parameters = { export const ImageAndIconLink = () => ` <div class="fd-page-footer fd-page-footer--xl"> - <div class="fd-page-footer__logo"> + <div class="fd-page-footer__logo"> <img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" alt="page footer logo"></img> </div> <div class="fd-page-footer__container"> @@ -124,7 +124,7 @@ export const FooterWithDiffrentSize = () => ` <label class="fd-form-label">Page footer with 'xl' (Extra Large) size</label><br /><br /> <div class="fd-page-footer fd-page-footer--xl"> - <div class="fd-page-footer__logo"> + <div class="fd-page-footer__logo"> <img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" alt="page footer logo"></img> </div> <div class="fd-page-footer__container"> @@ -145,7 +145,7 @@ export const FooterWithDiffrentSize = () => ` <label class="fd-form-label">Page footer with 'lg' (Large) size</label><br /><br /> <div class="fd-page-footer fd-page-footer--lg"> - <div class="fd-page-footer__logo"> + <div class="fd-page-footer__logo"> <img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" alt="page footer logo"></img> </div> <div class="fd-page-footer__container"> @@ -167,7 +167,7 @@ export const FooterWithDiffrentSize = () => ` <label class="fd-form-label">Page footer with 'md' (Medium) size</label><br /><br /> <div class="fd-page-footer fd-page-footer--md"> - <div class="fd-page-footer__logo"> + <div class="fd-page-footer__logo"> <img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" alt="page footer logo"></img> </div> <div class="fd-page-footer__container"> @@ -188,7 +188,7 @@ export const FooterWithDiffrentSize = () => ` <br> <label class="fd-form-label">Page footer with 'sm' (Small) size</label><br /><br /> <div class="fd-page-footer fd-page-footer--sm"> - <div class="fd-page-footer__logo"> + <div class="fd-page-footer__logo"> <img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" alt="page footer logo"></img> </div> <div class="fd-page-footer__container"> diff --git a/stories/page/page.stories.js b/stories/page/page.stories.js index dd7ce908b6..00e26fe402 100644 --- a/stories/page/page.stories.js +++ b/stories/page/page.stories.js @@ -11,7 +11,7 @@ export default { ### CONTAINER HIERARCHY The elements used to construct a page are: - + - fd-page: The page-level wrapper - Header: Uses a Bar component with \`fd-bar--page\` and \`fd-bar--header\` modifier classes - Header with SubHeader: Uses a Bar component with \`fd-bar--page\` and \`fd-bar--header-with-subheader\` modifier classes @@ -34,12 +34,12 @@ export default { } }; -export const basicPage = () => `<main class="fd-page"> +export const BasicPage = () => `<main class="fd-page"> <header> <div class="fd-bar fd-bar--page fd-bar--header"> <div class="fd-bar__left"> <div class="fd-bar__element"> - <button class="fd-button fd-button--transparent" aria-label="Go back"> + <button class="fd-button fd-button--transparent" aria-label="Go back"> <i class="sap-icon--navigation-left-arrow"></i> </button> </div> @@ -49,7 +49,7 @@ export const basicPage = () => `<main class="fd-page"> </div> <div class="fd-bar__right"> <div class="fd-bar__element"> - <button class="fd-button fd-button--transparent" aria-label="See more"> + <button class="fd-button fd-button--transparent" aria-label="See more"> <i class="sap-icon--grid"></i> </button> </div> @@ -75,18 +75,18 @@ export const basicPage = () => `<main class="fd-page"> </footer> </main> `; -basicPage.parameters = { +BasicPage.parameters = { docs: { iframeHeight: 500 } }; -export const transparentPage = () => `<main class="fd-page fd-page--transparent"> +export const TransparentPage = () => `<main class="fd-page fd-page--transparent"> <header> <div class="fd-bar fd-bar--page-m_l fd-bar--header-with-subheader"> <div class="fd-bar__left"> <div class="fd-bar__element"> - <button class="fd-button fd-button--transparent" aria-label="Go back"> + <button class="fd-button fd-button--transparent" aria-label="Go back"> <i class="sap-icon--navigation-left-arrow"></i> </button> </div> @@ -96,7 +96,7 @@ export const transparentPage = () => `<main class="fd-page fd-page--transparent" </div> <div class="fd-bar__right"> <div class="fd-bar__element"> - <button class="fd-button fd-button--transparent" aria-label="See more"> + <button class="fd-button fd-button--transparent" aria-label="See more"> <i class="sap-icon--overflow"></i> </button> </div> @@ -134,7 +134,7 @@ export const transparentPage = () => `<main class="fd-page fd-page--transparent" </footer> </main> `; -transparentPage.parameters = { +TransparentPage.parameters = { docs: { iframeHeight: 550, storyDescription: 'Page with Transparent Background Design, Header with SubHeader, and Responsive Behaviour - M_L' @@ -142,12 +142,12 @@ transparentPage.parameters = { }; -export const responsivePage = () => `<main class="fd-page fd-page--home fd-page--list"> +export const ResponsivePage = () => `<main class="fd-page fd-page--home fd-page--list"> <header> <div class="fd-bar fd-bar--home-page-xl fd-bar--header-with-subheader"> <div class="fd-bar__left"> <div class="fd-bar__element"> - <button class="fd-button fd-button--transparent" aria-label="Go back"> + <button class="fd-button fd-button--transparent" aria-label="Go back"> <i class="sap-icon--navigation-left-arrow"></i> </button> </div> @@ -157,7 +157,7 @@ export const responsivePage = () => `<main class="fd-page fd-page--home fd-page- </div> <div class="fd-bar__right"> <div class="fd-bar__element"> - <button class="fd-button fd-button--transparent" aria-label="See more"> + <button class="fd-button fd-button--transparent" aria-label="See more"> <i class="sap-icon--overflow"></i> </button> </div> @@ -183,7 +183,7 @@ export const responsivePage = () => `<main class="fd-page fd-page--home fd-page- </footer> </main> `; -responsivePage.parameters = { +ResponsivePage.parameters = { docs: { iframeHeight: 550, storyDescription: 'Home page with List Background Design, Floating Footer and Responsive Behaviour - XL' diff --git a/stories/pagination/pagination.stories.js b/stories/pagination/pagination.stories.js index 5a2c6bb61d..d56ad04950 100644 --- a/stories/pagination/pagination.stories.js +++ b/stories/pagination/pagination.stories.js @@ -42,7 +42,7 @@ Per page label | \`fd-pagination__per-page-label\` | Per page section label. Hid } }; -export const firstPage = () => `<h3>> 9 Pages</h3> +export const FirstPage = () => `<h3>> 9 Pages</h3> <div class='fd-pagination'> <nav class='fd-pagination__nav' role='navigation' aria-label='first page example, pagination with more than 9 pages'> <a href='#' class='fd-button fd-button--compact fd-button--transparent fd-pagination__button fd-pagination__button--mobile' aria-label='First page' aria-disabled='true'> @@ -128,9 +128,9 @@ export const firstPage = () => `<h3>> 9 Pages</h3> </div> `; -firstPage.storyName = 'First page'; +FirstPage.storyName = 'First page'; -firstPage.parameters = { +FirstPage.parameters = { docs: { iframeHeight: 500, storyDescription: `First and Previous page buttons are disabled when first page is active. @@ -138,7 +138,7 @@ firstPage.parameters = { } }; -export const middlePage = () => `<h3>> 9 Pages</h3> +export const MiddlePage = () => `<h3>> 9 Pages</h3> <div class='fd-pagination'> <nav class='fd-pagination__nav' role='navigation' aria-label='middle page example, pagination with more than 9 pages'> <a href='#' class='fd-button fd-button--compact fd-button--transparent fd-pagination__button fd-pagination__button--mobile' aria-label='First page' aria-disabled='false'> @@ -224,9 +224,9 @@ export const middlePage = () => `<h3>> 9 Pages</h3> </div> `; -middlePage.storyName = 'Middle pages'; +MiddlePage.storyName = 'Middle pages'; -middlePage.parameters = { +MiddlePage.parameters = { docs: { iframeHeight: 500, storyDescription: `Pagination can display middle pages to increase reachability. @@ -236,7 +236,7 @@ middlePage.parameters = { } }; -export const lastPage = () => `<h3>> 9 Pages</h3> +export const LastPage = () => `<h3>> 9 Pages</h3> <div class='fd-pagination'> <nav class='fd-pagination__nav' role='navigation' aria-label='last page example, pagination with more than 9 pages'> <a href='#' class='fd-button fd-button--compact fd-button--transparent fd-pagination__button fd-pagination__button--mobile' aria-label='First page' aria-disabled='false'> @@ -322,9 +322,9 @@ export const lastPage = () => `<h3>> 9 Pages</h3> </div> `; -lastPage.storyName = 'Last page'; +LastPage.storyName = 'Last page'; -lastPage.parameters = { +LastPage.parameters = { docs: { iframeHeight: 500, storyDescription: `Last and Next page buttons are disabled when last page is active. @@ -332,7 +332,7 @@ lastPage.parameters = { } }; -export const perPage = () => `<div style='height: 175px'> +export const PerPage = () => `<div style='height: 175px'> <div class='fd-pagination'> <div class='fd-pagination__per-page'> <label class='fd-form-label fd-pagination__per-page-label' id='compactSelectLabel'>Results per page: </label> @@ -418,9 +418,9 @@ export const perPage = () => `<div style='height: 175px'> </div> `; -perPage.storyName = 'Per page'; +PerPage.storyName = 'Per page'; -perPage.parameters = { +PerPage.parameters = { docs: { iframeHeight: 500, storyDescription: `Additionally, per page section can be displayed with select to specify which number of items should be shown on the every page. @@ -428,7 +428,7 @@ perPage.parameters = { } }; -export const cozy = () => `<div style='height: 200px'> +export const Cozy = () => `<div style='height: 200px'> <div class='fd-pagination'> <div class='fd-pagination__per-page'> <label class='fd-form-label fd-pagination__per-page-label' id='selectLabel'>Results per page: </label> @@ -514,9 +514,7 @@ export const cozy = () => `<div style='height: 200px'> </div> `; -cozy.storyName = 'Cozy'; - -cozy.parameters = { +Cozy.parameters = { docs: { iframeHeight: 500, storyDescription: `Showing pagination in Cozy mode is preferable on tablets & mobile. @@ -524,7 +522,7 @@ cozy.parameters = { } }; -export const mobile = () => `<div style="height: 200px;"> +export const Mobile = () => `<div style="height: 200px;"> <div class='fd-pagination fd-pagination--mobile'> <div class='fd-pagination__per-page'> <label class='fd-form-label fd-pagination__per-page-label' id='selectLabel'>Results per page: </label> @@ -594,9 +592,7 @@ export const mobile = () => `<div style="height: 200px;"> </div> `; -mobile.storyName = 'Mobile'; - -mobile.parameters = { +Mobile.parameters = { docs: { iframeHeight: 500, storyDescription: `Pagination component is responsive by default. When the screen's size is smaller than 1024px in width mobile mode is shown and you have nothing to do. diff --git a/stories/panel/panel.stories.js b/stories/panel/panel.stories.js index 0d551e8f37..399c5141f4 100644 --- a/stories/panel/panel.stories.js +++ b/stories/panel/panel.stories.js @@ -6,26 +6,26 @@ The panel is a container for grouping and displaying information. Panels are res ##Usage **Use the panel if:** - + - You need to group or display information. - You want to give users the option to hide this information. - You want to show additional information on demand (for example, a panel could show optional input fields for an advanced search). **Do not use the panel in:** - + - The content area of a **Dynamic Page**. - + ##Types There are two types of panels: fixed and expandable. - + `, components: ['button', 'icon', 'panel', 'segmented-button', 'toolbar'] } }; -export const fixed = () => `<div class="fd-panel fd-panel--fixed"> +export const Fixed = () => `<div class="fd-panel fd-panel--fixed"> <div class="fd-panel__header"> <h4 class="fd-panel__title">Panel header</h4> <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent"> @@ -38,27 +38,25 @@ export const fixed = () => `<div class="fd-panel fd-panel--fixed"> </div> </div> <div role="region" aria-labelledby="jhqDKYrt" class="fd-panel__content"> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus - et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. - Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. - Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. - Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. - Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. + Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. + Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. + Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. + Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet. </div> </div> `; -fixed.storyName = 'Fixed'; - -fixed.parameters = { +Fixed.parameters = { docs: { iframeHeight: 200, storyDescription: `When the height of the panel's content is set to a fixed size, the content area becomes scrollable. ` } }; -export const expandable = () => `<div class="fd-panel"> +export const Expandable = () => `<div class="fd-panel"> <div class="fd-panel__header"> <div class="fd-panel__expand"> <button class="fd-button fd-button--transparent fd-panel__button" @@ -78,12 +76,12 @@ export const expandable = () => `<div class="fd-panel"> </div> <div role="region" aria-labelledby="jhqDKYdf" class="fd-panel__content" aria-hidden="true" id="fghqwe321"> <span> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus - et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. - Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. - Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. - Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. - Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. + Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. + Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. + Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. + Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet. </span> </div> @@ -100,28 +98,26 @@ export const expandable = () => `<div class="fd-panel"> </div> <div role="region" aria-labelledby="jhqDKYdf" class="fd-panel__content" aria-hidden="false" id="fghqwe3214213"> <span> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus - et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. - Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. - Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. - Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. - Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. + Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. + Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. + Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. + Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet. </span> </div> </div> `; -expandable.storyName = 'Expandable'; - -expandable.parameters = { +Expandable.parameters = { docs: { iframeHeight: 200, storyDescription: `Expandable panels are much like fixed panels, except their content can be expanded and collapsed (including the info toolbar, if available). ` } }; -export const compact = () => `<div class="fd-panel fd-panel--compact"> +export const Compact = () => `<div class="fd-panel fd-panel--compact"> <div class="fd-panel__header"> <div class="fd-panel__expand"> <button class="fd-button fd-button--compact fd-button--transparent fd-panel__button" aria-expanded="false" aria-haspopup="true" aria-controls="Gekf63a" aria-labelledby="asdASD234"> @@ -139,27 +135,25 @@ export const compact = () => `<div class="fd-panel fd-panel--compact"> </div> </div> <div role="region" aria-labelledby="Gekf63D" class="fd-panel__content" aria-hidden="true" id="Gekf63a"> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus - et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. - Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. - Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. - Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. - Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. + Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. + Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. + Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. + Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet. </div> </div> `; -compact.storyName = 'Compact'; - -compact.parameters = { +Compact.parameters = { docs: { iframeHeight: 200, storyDescription: `Panels can be displayed in compact mode, which decreases the padding and button sizes. To display a compact panel, add the \`fd-panel--compact\` modifier class to the main element. ` } }; -export const fixedHeightContent = () => `<div class="fd-panel"> +export const FixedHeightContent = () => `<div class="fd-panel"> <div class="fd-panel__header"> <div class="fd-panel__expand"> <button class="fd-button fd-button--transparent fd-panel__button" aria-expanded="false" aria-haspopup="true" aria-controls="GJL745SV" aria-labelledby="asdASD345"> @@ -178,28 +172,28 @@ export const fixedHeightContent = () => `<div class="fd-panel"> </div> <div role="region" id="GJL745SV" aria-labelledby="GJL745SD" class="fd-panel__content" aria-hidden="true" style="height: 100px;"> <span> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus - et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. - Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. - Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. - Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. - Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. + Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. + Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. + Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. + Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet. - Morbi eget diam vehicula, porttitor orci eu, posuere leo. Sed varius orci id ipsum pharetra feugiat. + Morbi eget diam vehicula, porttitor orci eu, posuere leo. Sed varius orci id ipsum pharetra feugiat. Donec libero mi, vestibulum eget massa non, pretium egestas eros. Aenean quis eros ut augue condimentum faucibus. Nam tristique, enim eu volutpat cursus, enim neque pulvinar mauris, nec tempor libero lacus vel lacus. Nunc molestie elit in - aliquam eleifend. Ut consequat convallis erat, porta egestas lectus sagittis et. Mauris fermentum semper lorem, a sollicitudin nisi sollicitudin nec. - Duis semper pretium elit ac molestie. Morbi condimentum nisl vitae dolor varius convallis. Donec a molestie ex, - id condimentum velit. Proin dignissim dolor velit, eu malesuada magna porta vel. Aenean quis feugiat libero, sed pretium libero. + aliquam eleifend. Ut consequat convallis erat, porta egestas lectus sagittis et. Mauris fermentum semper lorem, a sollicitudin nisi sollicitudin nec. + Duis semper pretium elit ac molestie. Morbi condimentum nisl vitae dolor varius convallis. Donec a molestie ex, + id condimentum velit. Proin dignissim dolor velit, eu malesuada magna porta vel. Aenean quis feugiat libero, sed pretium libero. Nunc ex orci, volutpat in tristique et, accumsan sed ante. Maecenas laoreet egestas iaculis. In quis ligula mauris. </span> </div> </div> `; -fixedHeightContent.storyName = 'Fixed height'; +FixedHeightContent.storyName = 'Fixed height'; -fixedHeightContent.parameters = { +FixedHeightContent.parameters = { docs: { iframeHeight: 300, storyDescription: `When the height of the panel's content is set to a fixed size, the content area becomes scrollable. diff --git a/stories/popover/popover.stories.js b/stories/popover/popover.stories.js index e19d8ef423..09c26c340b 100644 --- a/stories/popover/popover.stories.js +++ b/stories/popover/popover.stories.js @@ -177,8 +177,6 @@ export const Alignment = () => `<div class="fddocs-container" style="margin-bott </div> `; -Alignment.storyName = 'Alignment'; - Alignment.parameters = { docs: { iframeHeight: 200, @@ -191,7 +189,7 @@ Right | \`fd-popover__body--right\` ` } }; -export const variants = () => `<div class="fddocs-container"> +export const Variants = () => `<div class="fddocs-container"> <div class="fd-popover"> <div class="fd-popover__control"> <button @@ -440,9 +438,9 @@ export const variants = () => `<div class="fddocs-container"> </div> `; -variants.storyName = 'Body variants'; +Variants.storyName = 'Body variants'; -variants.parameters = { +Variants.parameters = { docs: { iframeHeight: 200, storyDescription: `There are several variants of the popover body that can be displayed depending on the use case. @@ -457,7 +455,7 @@ Cozy mode | \`fd-bar--cozy\` | Add this modifier class to the header area where ` } }; -export const controlExamples = () => `<div class="fd-container" style="margin-bottom: 200px"> +export const ControlExamples = () => `<div class="fd-container" style="margin-bottom: 200px"> <div class="fd-row"> <div class="fd-col--3 fd-col--offset-3"> <div class="fd-popover fd-popover--right"> @@ -548,16 +546,16 @@ export const controlExamples = () => `<div class="fd-container" style="margin-bo </div> `; -controlExamples.storyName = 'Control variants'; +ControlExamples.storyName = 'Control variants'; -controlExamples.parameters = { +ControlExamples.parameters = { docs: { iframeHeight: 200, storyDescription: `Controls can be displayed as buttons, images, icons, and more. In the example below, the **Avatar** and **Icon** act as controls. ` } }; -export const scrollable = () => `<div class="fd-popover" style="margin-bottom: 300px"> +export const Scrollable = () => `<div class="fd-popover" style="margin-bottom: 300px"> <div class="fd-popover__control"> <button class="fd-button" @@ -621,9 +619,7 @@ export const scrollable = () => `<div class="fd-popover" style="margin-bottom: 3 </div> `; -scrollable.storyName = 'Scrollable'; - -scrollable.parameters = { +Scrollable.parameters = { docs: { iframeHeight: 200, storyDescription: `When the content overflows, the popover body can become scrollable. To achieve this, add \`fd-popover-body__wrapper\` on the element below the body element. diff --git a/stories/product-switch/product-switch.stories.js b/stories/product-switch/product-switch.stories.js index cef036b047..c96219358f 100644 --- a/stories/product-switch/product-switch.stories.js +++ b/stories/product-switch/product-switch.stories.js @@ -11,7 +11,7 @@ export default { **Do not use the product switch if:** -- You want your users to navigate within the current product. In this case, use a product menu (see **Shellbar**). +- You want your users to navigate within the current product. In this case, use a product menu (see **Shellbar**). `, tags: ['f3', 'a11y', 'theme'], components: ['product-switch', 'popover', 'button', 'icon'] @@ -23,10 +23,10 @@ export const Shellbar = () => ` <div class="fd-product-switch"> <div class="fd-popover fd-popover--right"> <div class="fd-popover__control"> - <button class="fd-button fd-button--transparent fd-popover__control fd-product-switch__control" - aria-label="Image label" - aria-controls="product-switch-body" - aria-expanded="true" + <button class="fd-button fd-button--transparent fd-popover__control fd-product-switch__control" + aria-label="Image label" + aria-controls="product-switch-body" + aria-expanded="true" aria-haspopup="true"> <i class="sap-icon--grid"></i> </button> diff --git a/stories/progress-indicator/progress-indicator.stories.js b/stories/progress-indicator/progress-indicator.stories.js index 3c36a66963..033d346e27 100644 --- a/stories/progress-indicator/progress-indicator.stories.js +++ b/stories/progress-indicator/progress-indicator.stories.js @@ -2,7 +2,7 @@ export default { title: 'Components/Progress Indicator', parameters: { description: `The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color to indicate the state of progress. The advancement depends on the specific process. The progress is shown either using absolute numbers or the current percentage of completion together with a progress bar. - + ##Usage **Use the progress indicator if:** @@ -32,7 +32,7 @@ Negative | \`fd-progress-indicator--negative\` } }; -export const layout = () => ` +export const Layout = () => ` <div class="fd-progress-indicator" tabindex="-1" role="progressbar" aria-valuemin="0" aria-valuenow="0" aria-valuemax="100" aria-valuetext="0%" aria-label="0%"> <div class="fd-progress-indicator__container"> <div class="fd-progress-indicator__progress-bar" style="min-width: 0%; width: 0%;"></div> @@ -41,7 +41,7 @@ export const layout = () => ` </div> </div> </div> - + <div class="fd-progress-indicator" tabindex="-1" role="progressbar" aria-valuemin="0" aria-valuenow="42" aria-valuemax="100" aria-valuetext="42%" aria-label="42%"> <div class="fd-progress-indicator__container"> <div class="fd-progress-indicator__progress-bar" style="min-width: 42%; width: 42%;"></div> @@ -50,7 +50,7 @@ export const layout = () => ` </div> </div> </div> - + <div class="fd-progress-indicator" tabindex="-1" role="progressbar" aria-valuemin="0" aria-valuenow="69" aria-valuemax="100" aria-valuetext="69%" aria-label="69%"> <div class="fd-progress-indicator__container"> <div class="fd-progress-indicator__progress-bar" style="min-width: 69%; width: 69%;"> @@ -59,7 +59,7 @@ export const layout = () => ` <div class="fd-progress-indicator__remaining"></div> </div> </div> - + <div class="fd-progress-indicator" tabindex="-1" role="progressbar" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-valuetext="100%" aria-label="100%"> <div class="fd-progress-indicator__container"> <div class="fd-progress-indicator__progress-bar" style="min-width: 100%; width: 100%"> @@ -68,7 +68,7 @@ export const layout = () => ` <div class="fd-progress-indicator__remaining"></div> </div> </div> - + <div class="fd-progress-indicator" tabindex="-1" role="progressbar" aria-valuemin="0" aria-valuenow="80" aria-valuemax="100" aria-valuetext="80 of 100 MB" aria-label="80 of 100 MB"> <div class="fd-progress-indicator__container"> <div class="fd-progress-indicator__progress-bar" style="min-width: 80%; width: 80%"> @@ -79,20 +79,19 @@ export const layout = () => ` </div> `; -layout.storyName = 'Layout'; -layout.parameters = { +Layout.parameters = { docs: { iframeHeight: 600, - storyDescription: ` + storyDescription: ` Show the current progress as a percentage value between 0% and 100%. - Alternatively, you can show the current progress as text in addition to the bar. + Alternatively, you can show the current progress as text in addition to the bar. In this case, the text is shown on the right of the bar if the progress is 50% or less. In all other cases, the progress is shown right-aligned on the bar itself You also have the option of showing any application-specific text instead of a percentage. ` } }; -export const valueStates = () => ` +export const ValueStates = () => ` <div class="fd-progress-indicator" tabindex="-1" role="progressbar" aria-valuemin="0" aria-valuenow="42" aria-valuemax="100" aria-valuetext="42%" aria-label="42%"> <div class="fd-progress-indicator__container"> <div class="fd-progress-indicator__progress-bar" style="min-width: 42%; width: 42%;"></div> @@ -101,7 +100,7 @@ export const valueStates = () => ` </div> </div> </div> - + <div class="fd-progress-indicator fd-progress-indicator--informative" tabindex="-1" role="progressbar" aria-valuemin="0" aria-valuenow="42" aria-valuemax="100" aria-valuetext="42%" aria-label="42%"> <div class="fd-progress-indicator__container"> <div class="fd-progress-indicator__progress-bar" style="min-width: 42%; width: 42%;"></div> @@ -110,7 +109,7 @@ export const valueStates = () => ` </div> </div> </div> - + <div class="fd-progress-indicator fd-progress-indicator--positive" tabindex="-1" role="progressbar" aria-valuemin="0" aria-valuenow="42" aria-valuemax="100" aria-valuetext="42%" aria-label="42%"> <div class="fd-progress-indicator__container"> <div class="fd-progress-indicator__progress-bar" style="min-width: 42%; width: 42%;"></div> @@ -119,7 +118,7 @@ export const valueStates = () => ` </div> </div> </div> - + <div class="fd-progress-indicator fd-progress-indicator--critical" tabindex="-1" role="progressbar" aria-valuemin="0" aria-valuenow="42" aria-valuemax="100" aria-valuetext="42%" aria-label="42%"> <div class="fd-progress-indicator__container"> <div class="fd-progress-indicator__progress-bar" style="min-width: 42%; width: 42%;"></div> @@ -128,7 +127,7 @@ export const valueStates = () => ` </div> </div> </div> - + <div class="fd-progress-indicator fd-progress-indicator--negative" tabindex="-1" role="progressbar" aria-valuemin="0" aria-valuenow="42" aria-valuemax="100" aria-valuetext="42%" aria-label="42%"> <div class="fd-progress-indicator__container"> <div class="fd-progress-indicator__progress-bar" style="min-width: 42%; width: 42%;"></div> @@ -139,15 +138,15 @@ export const valueStates = () => ` </div> `; -valueStates.storyName = 'States'; -valueStates.parameters = { +ValueStates.storyName = 'States'; +ValueStates.parameters = { docs: { iframeHeight: 600, storyDescription: 'The progress indicator can visualize different value states that are represented by various theme-dependent semantic colors. The states are: normal, success, warning, error, and information.' } }; -export const truncation = () => `<div style="width: 400px; margin: auto;"> +export const Truncation = () => `<div style="width: 400px; margin: auto;"> <div class="fd-progress-indicator fd-popover" tabindex="-1" role="progressbar" aria-valuemin="0" aria-valuenow="70" aria-valuemax="100" aria-valuetext="In cases where the label is being truncated a small popover appears on click." aria-label="Progress Indicator"> <div class="fd-progress-indicator__container"> <div class="fd-progress-indicator__progress-bar fd-popover__control" style="min-width: 70%; width: 70%;" onclick="onPopoverClick('popoverF0')"> @@ -193,8 +192,8 @@ export const truncation = () => `<div style="width: 400px; margin: auto;"> </div> `; -truncation.storyName = 'Truncation Behaviour'; -truncation.parameters = { +Truncation.storyName = 'Truncation Behaviour'; +Truncation.parameters = { docs: { iframeHeight: 600, storyDescription: 'If the length of the text exceeds the available space in the progress indicator, the text truncates. In this case, clicking the progress indicator displays an information popover with the full text.' diff --git a/stories/quick-view/quick-view.stories.js b/stories/quick-view/quick-view.stories.js index 10c81ca9af..588a0546d6 100644 --- a/stories/quick-view/quick-view.stories.js +++ b/stories/quick-view/quick-view.stories.js @@ -24,18 +24,18 @@ export const Popover = () => `<div class="fd-popover"> <span class="fd-avatar fd-avatar--s" role="presentation"> <i role="presentation" class="fd-avatar__icon sap-icon--building"></i> </span> - + <div class="fd-quick-view__subheader-text"> <h5 class="fd-title fd-title--h5">Company B</h5> - + <div class="fd-quick-view__subtitle"> Michael Adams </div> </div> </div> </div> - - + + <div class="fd-form-group" role="group"> <div class="fd-form-group__header" aria-labelledby="contactDetails"> <h1 class="fd-form-group__header-text" id="contactDetails">Contact Details</h1> @@ -52,7 +52,7 @@ export const Popover = () => `<div class="fd-popover"> </span> </div> </div> - + <div class="fd-form-group" role="group"> <div class="fd-form-group__header" aria-labelledby="mainContact"> <h1 class="fd-form-group__header-text" id="mainContact">Main Contact</h1> @@ -76,8 +76,6 @@ export const Popover = () => `<div class="fd-popover"> </div> `; -Popover.storyName = 'Popover'; - Popover.parameters = { docs: { iframeHeight: 500, @@ -102,7 +100,7 @@ export const Dialog = () => `<section class="fd-dialog-docs-static fd-dialog fd- <span class="fd-avatar fd-avatar--s" role="presentation"> <i role="presentation" class="fd-avatar__icon sap-icon--camera"></i> </span> - + <div class="fd-quick-view__subheader-text"> <h5 class="fd-title fd-title--h5"> <a class="fd-link" href="#">Inventarisation</a> @@ -110,7 +108,7 @@ export const Dialog = () => `<section class="fd-dialog-docs-static fd-dialog fd- </div> </div> </div> - + <div class="fd-form-group" role="group"> <div class="fd-form-item"> <label class="fd-form-label">Start Date:</label> @@ -147,8 +145,6 @@ export const Dialog = () => `<section class="fd-dialog-docs-static fd-dialog fd- </section> `; -Dialog.storyName = 'Dialog'; - Dialog.parameters = { docs: { iframeHeight: 500, @@ -166,7 +162,7 @@ export const NoHeader = () => `<div class="fd-popover"> <span class="fd-avatar fd-avatar--s" role="presentation"> <i role="presentation" class="fd-avatar__icon sap-icon--camera"></i> </span> - + <div class="fd-quick-view__subheader-text"> <h5 class="fd-title fd-title--h5"> <a class="fd-link" href="#">Inventarisation</a> @@ -174,7 +170,7 @@ export const NoHeader = () => `<div class="fd-popover"> </div> </div> </div> - + <div class="fd-form-group" role="group"> <div class="fd-form-item"> <label class="fd-form-label">Start Date:</label> diff --git a/stories/radio/radio.stories.js b/stories/radio/radio.stories.js index f00ad1b438..8f27e59cd7 100644 --- a/stories/radio/radio.stories.js +++ b/stories/radio/radio.stories.js @@ -20,7 +20,7 @@ In special cases, there are only two mutually exclusive options. Combine them in } }; -export const primary = () => `<div style="display:flex;justify-content:space-between"> +export const Primary = () => `<div style="display:flex;justify-content:space-between"> <fieldset class="fd-fieldset" id="radio1"> <legend class="fd-fieldset__legend">Radio Buttons Cozy Mode</legend> <div class="fd-form__group"> @@ -70,15 +70,15 @@ export const primary = () => `<div style="display:flex;justify-content:space-bet </div> `; -primary.storyName = 'Responsiveness'; -primary.parameters = { +Primary.storyName = 'Responsiveness'; +Primary.parameters = { docs: { iframeHeight: 250, storyDescription: 'A radio button can appear in two different sizes. In `cozy` mode, it is bigger than it is in `compact` mode. This makes the checkbox easier to select on touch devices.' } }; -export const inline = () => `<fieldset class="fd-fieldset" id="radio4"> +export const Inline = () => `<fieldset class="fd-fieldset" id="radio4"> <legend class="fd-fieldset__legend">Inline Radio buttons</legend> <div class="fd-form-group fd-form-group--inline"> <div class="fd-form-group__item fd-form-item"> @@ -103,7 +103,7 @@ export const inline = () => `<fieldset class="fd-fieldset" id="radio4"> </fieldset> `; -inline.parameters = { +Inline.parameters = { docs: { storyDescription: ` Try to align radio buttons vertically instead of horizontally, especially for long labels. Horizontal alignment is harder to read and localize. Consider horizontal alignment in cases of one-word labels, such as in the background color settings example above. @@ -115,7 +115,7 @@ Do not put two radio button groups right next to each other as it is difficult t } }; -export const interactionStates = () => `<div style="display:flex;justify-content:space-between"> +export const InteractionStates = () => `<div style="display:flex;justify-content:space-between"> <fieldset class="fd-fieldset" id="radio5"> <legend class="fd-fieldset__legend">Interaction States</legend> <div class="fd-form-group"> @@ -249,7 +249,7 @@ export const interactionStates = () => `<div style="display:flex;justify-content </div> `; -interactionStates.parameters = { +InteractionStates.parameters = { docs: { iframeHeight: 550, storyDescription: 'A radio button can have different states that affect its appearance value states, such as “error” or “warning”, which are indicated using semantic colors' diff --git a/stories/rating-indicator/rating-indicator.stories.js b/stories/rating-indicator/rating-indicator.stories.js index be76665f83..43c32f9886 100644 --- a/stories/rating-indicator/rating-indicator.stories.js +++ b/stories/rating-indicator/rating-indicator.stories.js @@ -21,25 +21,25 @@ export const Sizes = () => `<div class="example-container"> <input aria-label="0 star" type="radio" class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating" id="rating-0" name="rating" value="0"> <label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-0" aria-hidden="true"></label> - <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-1" name="rating" value="1"> + <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-1" name="rating" value="1"> <label class="fd-rating-indicator__label" for="rating-1"></label> - + <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-2" name="rating" value="2" checked> <label class="fd-rating-indicator__label" for="rating-2"></label> - + <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-3" name="rating" value="3"> - <label class="fd-rating-indicator__label" for="rating-3"></label> - + <label class="fd-rating-indicator__label" for="rating-3"></label> + <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-4" name="rating" value="4"> <label class="fd-rating-indicator__label" for="rating-4"></label> - + <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-5" name="rating" value="5"> <label class="fd-rating-indicator__label" for="rating-5"></label> </div> <span class="fd-rating-indicator__dynamic-text">(2 of 5)</span> </div> </div> - + <div class="example-container"> <span style="min-width: 150px;">Extra small:</span> <div class="fd-rating-indicator fd-rating-indicator--xs"> @@ -47,18 +47,18 @@ export const Sizes = () => `<div class="example-container"> <input aria-label="0 star" type="radio" class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating" id="rating-xs-0" name="rating-xs" value="0"> <label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-xs-0" aria-hidden="true"></label> - <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-xs-1" name="rating-xs" value="1"> + <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-xs-1" name="rating-xs" value="1"> <label class="fd-rating-indicator__label" for="rating-xs-1"></label> - + <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-xs-2" name="rating-xs" value="2" checked> <label class="fd-rating-indicator__label" for="rating-xs-2"></label> - + <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-xs-3" name="rating-xs" value="3"> <label class="fd-rating-indicator__label" for="rating-xs-3"></label> - + <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-xs-4" name="rating-xs" value="4"> <label class="fd-rating-indicator__label" for="rating-xs-4"></label> - + <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-xs-5" name="rating-xs" value="5"> <label class="fd-rating-indicator__label" for="rating-xs-5"></label> </div> @@ -74,18 +74,18 @@ export const Sizes = () => `<div class="example-container"> <input aria-label="0 star" type="radio" class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating" id="rating-s-0" name="rating-s" value="0"> <label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-s-0" aria-hidden="true"></label> - <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-s-1" name="rating-s" value="1"> + <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-s-1" name="rating-s" value="1"> <label class="fd-rating-indicator__label" for="rating-s-1"></label> - + <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-s-2" name="rating-s" value="2" checked> <label class="fd-rating-indicator__label" for="rating-s-2"></label> - + <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-s-3" name="rating-s" value="3"> <label class="fd-rating-indicator__label" for="rating-s-3"></label> - + <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-s-4" name="rating-s" value="4"> <label class="fd-rating-indicator__label" for="rating-s-4"></label> - + <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-s-5" name="rating-s" value="5"> <label class="fd-rating-indicator__label" for="rating-s-5"></label> </div> @@ -93,7 +93,7 @@ export const Sizes = () => `<div class="example-container"> <span class="fd-rating-indicator__dynamic-text">(2 of 5)</span> </div> </div> - + <div class="example-container"> <span style="min-width: 150px;">Large:</span> <div class="fd-rating-indicator fd-rating-indicator--lg"> @@ -101,25 +101,25 @@ export const Sizes = () => `<div class="example-container"> <input aria-label="0 star" type="radio" class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating" id="rating-l-0" name="rating-l" value="0"> <label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-l-0" aria-hidden="true"></label> - <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-l-1" name="rating-l" value="1"> + <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-l-1" name="rating-l" value="1"> <label class="fd-rating-indicator__label" for="rating-l-1"></label> - + <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-l-2" name="rating-l" value="2" checked> <label class="fd-rating-indicator__label" for="rating-l-2"></label> - + <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-l-3" name="rating-l" value="3"> <label class="fd-rating-indicator__label" for="rating-l-3"></label> - + <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-l-4" name="rating-l" value="4"> <label class="fd-rating-indicator__label" for="rating-l-4"></label> - + <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-l-5" name="rating-l" value="5"> <label class="fd-rating-indicator__label" for="rating-l-5"></label> </div> <span class="fd-rating-indicator__dynamic-text">(2 of 5)</span> </div> </div> - + <div class="example-container"> <span style="min-width: 150px;">Cozy:</span> <div class="fd-rating-indicator fd-rating-indicator--cozy"> @@ -127,25 +127,25 @@ export const Sizes = () => `<div class="example-container"> <input aria-label="0 star" type="radio" class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating" id="rating-cozy-0" name="rating-cozy" value="0"> <label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-cozy-0" aria-hidden="true"></label> - <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-cozy-1" name="rating-cozy" value="1"> + <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-cozy-1" name="rating-cozy" value="1"> <label class="fd-rating-indicator__label" for="rating-cozy-1"></label> - + <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-cozy-2" name="rating-cozy" value="2" checked> <label class="fd-rating-indicator__label" for="rating-cozy-2"></label> - + <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-cozy-3" name="rating-cozy" value="3"> <label class="fd-rating-indicator__label" for="rating-cozy-3"></label> - + <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-cozy-4" name="rating-cozy" value="4"> <label class="fd-rating-indicator__label" for="rating-cozy-4"></label> - + <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-cozy-5" name="rating-cozy" value="5"> <label class="fd-rating-indicator__label" for="rating-cozy-5"></label> </div> <span class="fd-rating-indicator__dynamic-text">(2 of 5)</span> </div> </div> - + <div class="example-container"> <span style="min-width: 150px;">Compact:</span> <div class="fd-rating-indicator fd-rating-indicator--compact"> @@ -153,25 +153,25 @@ export const Sizes = () => `<div class="example-container"> <input aria-label="0 star" type="radio" class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating" id="rating-compact-0" name="rating-compact" value="0"> <label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-compact-0" aria-hidden="true"></label> - <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-compact-1" name="rating-compact" value="1"> + <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-compact-1" name="rating-compact" value="1"> <label class="fd-rating-indicator__label" for="rating-compact-1"></label> - + <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-compact-2" name="rating-compact" value="2" checked> <label class="fd-rating-indicator__label" for="rating-compact-2"></label> - + <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-compact-3" name="rating-compact" value="3"> <label class="fd-rating-indicator__label" for="rating-compact-3"></label> - + <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-compact-4" name="rating-compact" value="4"> <label class="fd-rating-indicator__label" for="rating-compact-4"></label> - + <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-compact-5" name="rating-compact" value="5"> <label class="fd-rating-indicator__label" for="rating-compact-5"></label> </div> <span class="fd-rating-indicator__dynamic-text">(2 of 5)</span> </div> </div> - + <div class="example-container"> <span style="min-width: 150px;">Condensed:</span> <div class="fd-rating-indicator fd-rating-indicator--condensed"> @@ -179,18 +179,18 @@ export const Sizes = () => `<div class="example-container"> <input aria-label="0 star" type="radio" class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating" id="rating-condensed-0" name="rating-condensed" value="0"> <label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-condensed-0" aria-hidden="true"></label> - <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-condensed-1" name="rating-condensed" value="1"> + <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-condensed-1" name="rating-condensed" value="1"> <label class="fd-rating-indicator__label" for="rating-condensed-1"></label> - + <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-condensed-2" name="rating-condensed" value="2" checked> <label class="fd-rating-indicator__label" for="rating-condensed-2"></label> - + <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-condensed-3" name="rating-condensed" value="3"> <label class="fd-rating-indicator__label" for="rating-condensed-3"></label> - + <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-condensed-4" name="rating-condensed" value="4"> <label class="fd-rating-indicator__label" for="rating-condensed-4"></label> - + <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-condensed-5" name="rating-condensed" value="5"> <label class="fd-rating-indicator__label" for="rating-condensed-5"></label> </div> @@ -227,25 +227,25 @@ export const CustomIcons = () => `<div class="example-container"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> </label> - + <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-icon-2" name="rating-icon" value=2" checked> <label class="fd-rating-indicator__label" for="rating-icon-2"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> </label> - + <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-icon-3" name="rating-icon" value="3"> <label class="fd-rating-indicator__label" for="rating-icon-3"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> </label> - + <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-icon-4" name="rating-icon" value="4"> <label class="fd-rating-indicator__label" for="rating-icon-4"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> </label> - + <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-icon-5" name="rating-icon" value="5"> <label class="fd-rating-indicator__label" for="rating-icon-5"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> @@ -261,7 +261,7 @@ CustomIcons.storyName = 'Custom icons'; CustomIcons.parameters = { docs: { storyDescription: ` -To make the rating indicator to use custom icons needs to be added class \`.fd-rating-indicator--icon\` +To make the rating indicator to use custom icons needs to be added class \`.fd-rating-indicator--icon\` to the \`fd-rating-indicator\` element. Also, you need to set the icon class that will implement the icon ` @@ -275,33 +275,33 @@ export const HalfValues = () => `<div class="example-container"> <input aria-label="0 star" type="radio" class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating" id="rating-half-sizes-0" name="rating-half-sizes" value="0"> <label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-half-sizes-0" aria-hidden="true"></label> - <input aria-label="half star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-05" name="rating-half-sizes" value="0.5"> + <input aria-label="half star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-05" name="rating-half-sizes" value="0.5"> <label class="fd-rating-indicator__label" for="rating-half-sizes-05"></label> <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-1" name="rating-half-sizes" value="1"> <label class="fd-rating-indicator__label" for="rating-half-sizes-1"></label> - + <input aria-label="1 and half star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-15" name="rating-half-sizes" value="1.5"> <label class="fd-rating-indicator__label" for="rating-half-sizes-15"></label> - + <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-2" name="rating-half-sizes" value=2"> <label class="fd-rating-indicator__label" for="rating-half-sizes-2"></label> - + <input aria-label="2 and half star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-25" name="rating-half-sizes" value="2.5" checked> <label class="fd-rating-indicator__label" for="rating-half-sizes-25"></label> - + <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-3" name="rating-half-sizes" value="3"> <label class="fd-rating-indicator__label" for="rating-half-sizes-3"></label> - + <input aria-label="3 and half star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-35" name="rating-half-sizes" value="3.5"> <label class="fd-rating-indicator__label" for="rating-half-sizes-35"></label> - + <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-4" name="rating-half-sizes" value="4"> <label class="fd-rating-indicator__label" for="rating-half-sizes-4"></label> - + <input aria-label="4 and half star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-45" name="rating-half-sizes" value="4.5"> <label class="fd-rating-indicator__label" for="rating-half-sizes-45"></label> - + <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-5" name="rating-half-sizes" value="5"> <label class="fd-rating-indicator__label" for="rating-half-sizes-5"></label> </div> @@ -316,7 +316,7 @@ export const HalfValues = () => `<div class="example-container"> <input aria-label="0 star" type="radio" class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating" id="rating-half-sizes-custome-icons-0" name="rating-half-sizes-custome-icons" value="0"> <label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-half-sizes-custome-icons-0" aria-hidden="true"></label> - <input aria-label="half star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-custome-icons-05" name="rating-half-sizes-custome-icons" value="0.5"> + <input aria-label="half star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-custome-icons-05" name="rating-half-sizes-custome-icons" value="0.5"> <label class="fd-rating-indicator__label" for="rating-half-sizes-custome-icons-05"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> @@ -327,49 +327,49 @@ export const HalfValues = () => `<div class="example-container"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> </label> - + <input aria-label="1 and half star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-custome-icons-15" name="rating-half-sizes-custome-icons" value="1.5"> <label class="fd-rating-indicator__label" for="rating-half-sizes-custome-icons-15"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> </label> - + <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-custome-icons-2" name="rating-half-sizes-custome-icons" value=2"> <label class="fd-rating-indicator__label" for="rating-half-sizes-custome-icons-2"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> </label> - + <input aria-label="2 and half star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-custome-icons-25" name="rating-half-sizes-custome-icons" value="2.5" checked> <label class="fd-rating-indicator__label" for="rating-half-sizes-custome-icons-25"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> </label> - + <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-custome-icons-3" name="rating-half-sizes-custome-icons" value="3"> <label class="fd-rating-indicator__label" for="rating-half-sizes-custome-icons-3"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> </label> - + <input aria-label="3 and half star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-custome-icons-35" name="rating-half-sizes-custome-icons" value="3.5"> <label class="fd-rating-indicator__label" for="rating-half-sizes-custome-icons-35"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> </label> - + <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-custome-icons-4" name="rating-half-sizes-custome-icons" value="4"> <label class="fd-rating-indicator__label" for="rating-half-sizes-custome-icons-4"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> </label> - + <input aria-label="4 and half star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-custome-icons-45" name="rating-half-sizes-custome-icons" value="4.5"> <label class="fd-rating-indicator__label" for="rating-half-sizes-custome-icons-45"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> </label> - + <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-custome-icons-5" name="rating-half-sizes-custome-icons" value="5"> <label class="fd-rating-indicator__label" for="rating-half-sizes-custome-icons-5"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> @@ -387,7 +387,7 @@ export const HalfValues = () => `<div class="example-container"> <input aria-label="0 star" type="radio" class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating" id="rating-half-sizes-custome-icons-lg-0" name="rating-half-sizes-custome-icons-lg" value="0"> <label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-half-sizes-custome-icons-lg-0" aria-hidden="true"></label> - <input aria-label="half star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-custome-icons-lg-05" name="rating-half-sizes-custome-icons-lg" value="0.5"> + <input aria-label="half star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-custome-icons-lg-05" name="rating-half-sizes-custome-icons-lg" value="0.5"> <label class="fd-rating-indicator__label" for="rating-half-sizes-custome-icons-lg-05"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> @@ -398,49 +398,49 @@ export const HalfValues = () => `<div class="example-container"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> </label> - + <input aria-label="1 and half star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-custome-icons-lg-15" name="rating-half-sizes-custome-icons-lg" value="1.5"> <label class="fd-rating-indicator__label" for="rating-half-sizes-custome-icons-lg-15"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> </label> - + <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-custome-icons-lg-2" name="rating-half-sizes-custome-icons-lg" value=2"> <label class="fd-rating-indicator__label" for="rating-half-sizes-custome-icons-lg-2"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> </label> - + <input aria-label="2 and half star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-custome-icons-lg-25" name="rating-half-sizes-custome-icons-lg" value="2.5" checked> <label class="fd-rating-indicator__label" for="rating-half-sizes-custome-icons-lg-25"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> </label> - + <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-custome-icons-lg-3" name="rating-half-sizes-custome-icons-lg" value="3"> <label class="fd-rating-indicator__label" for="rating-half-sizes-custome-icons-lg-3"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> </label> - + <input aria-label="3 and half star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-custome-icons-lg-35" name="rating-half-sizes-custome-icons-lg" value="3.5"> <label class="fd-rating-indicator__label" for="rating-half-sizes-custome-icons-lg-35"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> </label> - + <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-custome-icons-lg-4" name="rating-half-sizes-custome-icons-lg" value="4"> <label class="fd-rating-indicator__label" for="rating-half-sizes-custome-icons-lg-4"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> </label> - + <input aria-label="4 and half star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-custome-icons-lg-45" name="rating-half-sizes-custome-icons-lg" value="4.5"> <label class="fd-rating-indicator__label" for="rating-half-sizes-custome-icons-lg-45"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> <i class="fd-rating-indicator__label-unrated sap-icon--bo-strategy-management"></i> </label> - + <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-half-sizes-custome-icons-lg-5" name="rating-half-sizes-custome-icons-lg" value="5"> <label class="fd-rating-indicator__label" for="rating-half-sizes-custome-icons-lg-5"> <i class="fd-rating-indicator__label-rated sap-icon--notification"></i> @@ -456,7 +456,7 @@ HalfValues.storyName = 'Half values'; HalfValues.parameters = { docs: { storyDescription: ` -To display half values with the rating indicator i.e 2.5 stars, add the \`fd-rating-indicator--half-star\` +To display half values with the rating indicator i.e 2.5 stars, add the \`fd-rating-indicator--half-star\` modifier class together with the \`fd-rating-indicator\` class. ` } @@ -468,18 +468,18 @@ export const Disabled = () => `<div class="example-container"> <input aria-label="0 star" type="radio" class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating" id="rating-disabled-0" name="rating-disabled" value="0" disabled> <label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-disabled-0" aria-hidden="true"></label> - <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-disabled-1" name="rating-disabled" value="1" disabled> + <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-disabled-1" name="rating-disabled" value="1" disabled> <label class="fd-rating-indicator__label" for="rating-disabled-1"></label> - + <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-disabled-2" name="rating-disabled" value="2" disabled checked> <label class="fd-rating-indicator__label" for="rating-disabled-2"></label> - + <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-disabled-3" name="rating-disabled" value="3" disabled> <label class="fd-rating-indicator__label" for="rating-disabled-3"></label> - + <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-disabled-4" name="rating-disabled" value="4" disabled> <label class="fd-rating-indicator__label" for="rating-disabled-4"></label> - + <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-disabled-5" name="rating-disabled" value="5" disabled> <label class="fd-rating-indicator__label" for="rating-disabled-5"></label> </div> @@ -491,7 +491,7 @@ export const Disabled = () => `<div class="example-container"> Disabled.parameters = { docs: { storyDescription: ` -To disable rating indicator, the \`[disable]\` attribute needs to be added to all inputs. +To disable rating indicator, the \`[disable]\` attribute needs to be added to all inputs. Additionally, one of the selectors listed below needs to be added to the \`fd-rating-indicator\` element: - \`.is-disable\` @@ -507,18 +507,18 @@ export const DisplayMode = () => `<div class="example-container"> <input aria-label="0 star" type="radio" class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating" id="rating-display-mode-0" name="rating-display-mode" value="0" disabled> <label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-display-mode-0" aria-hidden="true"></label> - <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-display-mode-1" name="rating-display-mode" value="1" disabled> + <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-display-mode-1" name="rating-display-mode" value="1" disabled> <label class="fd-rating-indicator__label" for="rating-display-mode-1"></label> - + <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-display-mode-2" name="rating-display-mode" value="2" disabled checked> <label class="fd-rating-indicator__label" for="rating-display-mode-2"></label> - + <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-display-mode-3" name="rating-display-mode" value="3" disabled> <label class="fd-rating-indicator__label" for="rating-display-mode-3"></label> - + <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-display-mode-4" name="rating-display-mode" value="4" disabled> <label class="fd-rating-indicator__label" for="rating-display-mode-4"></label> - + <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-display-mode-5" name="rating-display-mode" value="5" disabled> <label class="fd-rating-indicator__label" for="rating-display-mode-5"></label> </div> @@ -543,18 +543,18 @@ export const NonInteractive = () => `<div class="example-container"> <input aria-label="0 star" type="radio" class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating" id="rating-non-interactive-mode-0" name="rating-non-interactive-mode" value="0" disabled> <label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-non-interactive-mode-0" aria-hidden="true"></label> - <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-non-interactive-mode-1" name="rating-non-interactive-mode" value="1" disabled> + <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-non-interactive-mode-1" name="rating-non-interactive-mode" value="1" disabled> <label class="fd-rating-indicator__label" for="rating-non-interactive-mode-1"></label> - + <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-non-interactive-mode-2" name="rating-non-interactive-mode" value="2" disabled checked> <label class="fd-rating-indicator__label" for="rating-non-interactive-mode-2"></label> - + <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-non-interactive-mode-3" name="rating-non-interactive-mode" value="3" disabled> <label class="fd-rating-indicator__label" for="rating-non-interactive-mode-3"></label> - + <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-non-interactive-mode-4" name="rating-non-interactive-mode" value="4" disabled> <label class="fd-rating-indicator__label" for="rating-non-interactive-mode-4"></label> - + <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-non-interactive-mode-5" name="rating-non-interactive-mode" value="5" disabled> <label class="fd-rating-indicator__label" for="rating-non-interactive-mode-5"></label> </div> @@ -567,7 +567,7 @@ NonInteractive.storyName = 'Non-interactive'; NonInteractive.parameters = { docs: { storyDescription: ` -If you want to include a rating indicator in a display-only form, +If you want to include a rating indicator in a display-only form, add the \`.fd-rating-indicator--non-interactive\` class to the \`fd-rating-indicator\` element. ` } @@ -579,77 +579,77 @@ export const DifferentValues = () => `<div class="example-container"> <input aria-label="0 star" type="radio" class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating" id="rating-max-value-5-0" name="rating-max-value-5" value="0"> <label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-max-value-5-0" aria-hidden="true"></label> - <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-1" name="rating-max-value-5" value="1"> + <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-1" name="rating-max-value-5" value="1"> <label class="fd-rating-indicator__label" for="rating-max-value-5-1"></label> - + <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-2" name="rating-max-value-5" value="2" checked> <label class="fd-rating-indicator__label" for="rating-max-value-5-2"></label> - + <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-3" name="rating-max-value-5" value="3"> <label class="fd-rating-indicator__label" for="rating-max-value-5-3"></label> - + <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-4" name="rating-max-value-5" value="4"> <label class="fd-rating-indicator__label" for="rating-max-value-5-4"></label> - + <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-5" name="rating-max-value-5" value="5"> <label class="fd-rating-indicator__label" for="rating-max-value-5-5"></label> </div> <span class="fd-rating-indicator__dynamic-text">(2 of 5)</span> </div> </div> - + <div class="example-container"> <div class="fd-rating-indicator"> <div class="fd-rating-indicator__container" aria-label="Star Rating (out of 5)"> <input aria-label="0 star" type="radio" class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating" id="rating-max-value-6-0" name="rating-max-value-6" value="0"> <label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-max-value-6-0" aria-hidden="true"></label> - <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-6-1" name="rating-max-value-6" value="1"> + <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-6-1" name="rating-max-value-6" value="1"> <label class="fd-rating-indicator__label" for="rating-max-value-6-1"></label> - + <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-6-2" name="rating-max-value-6" value="2" checked> <label class="fd-rating-indicator__label" for="rating-max-value-6-2"></label> - + <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-6-3" name="rating-max-value-6" value="3"> <label class="fd-rating-indicator__label" for="rating-max-value-6-3"></label> - + <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-6-4" name="rating-max-value-6" value="4"> <label class="fd-rating-indicator__label" for="rating-max-value-6-4"></label> - + <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-6-5" name="rating-max-value-6" value="5"> <label class="fd-rating-indicator__label" for="rating-max-value-6-5"></label> - + <input aria-label="6 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-6-6" name="rating-max-value-6" value="6"> <label class="fd-rating-indicator__label" for="rating-max-value-6-6"></label> </div> <span class="fd-rating-indicator__dynamic-text">(2 of 6)</span> </div> </div> - + <div class="example-container"> <div class="fd-rating-indicator"> <div class="fd-rating-indicator__container" aria-label="Star Rating (out of 5)"> <input aria-label="0 star" type="radio" class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating" id="rating-max-value-7-0" name="rating-max-value-7" value="0"> <label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-max-value-7-0" aria-hidden="true"></label> - <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-7-1" name="rating-max-value-7" value="1"> + <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-7-1" name="rating-max-value-7" value="1"> <label class="fd-rating-indicator__label" for="rating-max-value-7-1"></label> - + <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-7-2" name="rating-max-value-7" value="2" checked> <label class="fd-rating-indicator__label" for="rating-max-value-7-2"></label> - + <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-7-3" name="rating-max-value-7" value="3"> <label class="fd-rating-indicator__label" for="rating-max-value-7-3"></label> - + <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-7-4" name="rating-max-value-7" value="4"> <label class="fd-rating-indicator__label" for="rating-max-value-7-4"></label> - + <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-7-5" name="rating-max-value-7" value="5"> <label class="fd-rating-indicator__label" for="rating-max-value-7-5"></label> - + <input aria-label="6 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-7-6" name="rating-max-value-7" value="6"> <label class="fd-rating-indicator__label" for="rating-max-value-7-6"></label> - + <input aria-label="7 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-7-7" name="rating-max-value-7" value="7"> <label class="fd-rating-indicator__label" for="rating-max-value-7-7"></label> </div> @@ -662,8 +662,8 @@ DifferentValues.storyName = 'Different values'; DifferentValues.parameters = { docs: { storyDescription: ` -It is possible to display the rating indicator with a different number of values. -It is highly recommended to use 5 as the maximum value, however you can go up to 7 +It is possible to display the rating indicator with a different number of values. +It is highly recommended to use 5 as the maximum value, however you can go up to 7 if it is ideal for your use case. ` } diff --git a/stories/resizable-card-layout/resizable-card-layout.stories.js b/stories/resizable-card-layout/resizable-card-layout.stories.js index 1015be72b2..74139ca064 100644 --- a/stories/resizable-card-layout/resizable-card-layout.stories.js +++ b/stories/resizable-card-layout/resizable-card-layout.stories.js @@ -2,7 +2,7 @@ export default { title: 'Layouts/Resizable Card Layout', parameters: { description: `The resizable card layout is a layout for the overview page. It enables users to define a personalized card layout by changing not only the position of a card, but also its size, and thus how the card content is presented. - + This layout gives users much greater flexibility in tailoring the overview page to their specific business needs. And it allows app teams to offer varying levels of detail for any given card. Whenever the size of a card changes, the content adapts automatically to show the most relevant information in the available space. Cards can be resized vertically in rows of 1 rem and horizontally in steps of 20 rem (minimum width). @@ -25,7 +25,7 @@ Cards can be resized vertically in rows of 1 rem and horizontally in steps of 20 } }; -export const resizeCardLayout = () => +export const ResizeCardLayout = () => `<div id="layout1" class="fd-resizable-card-layout fd-resizable-card-layout--md fd-custom-resizable-card-layout-flex"> <div id="one" class="fd-resizable-card-layout__item card-one-dimensions"> <div class="fd-resizable-card-layout__resize--vertical"></div> @@ -338,8 +338,8 @@ export const resizeCardLayout = () => </div> `; -resizeCardLayout.storyName = 'Resizable card layout'; -resizeCardLayout.parameters = { +ResizeCardLayout.storyName = 'Resizable card layout'; +ResizeCardLayout.parameters = { docs: { iframeHeight: 900, storyDescription: `Resizable card layout with multiple cards. @@ -347,7 +347,7 @@ resizeCardLayout.parameters = { } }; -export const resizeCardHorizontalVerticalDirection = () => +export const ResizeCardHorizontalVerticalDirection = () => `<div id="grid1" class="fd-resizable-card-layout"> <div id="seven" class="fd-resizable-card-layout__item fd-resizable-card-layout__indication-border"> <div class="fd-resizable-card-layout__resize--vertical"></div> @@ -391,8 +391,8 @@ export const resizeCardHorizontalVerticalDirection = () => </div> `; -resizeCardHorizontalVerticalDirection.storyName = 'Card resize in horizontal and vertical directions'; -resizeCardHorizontalVerticalDirection.parameters = { +ResizeCardHorizontalVerticalDirection.storyName = 'Card resize in horizontal and vertical directions'; +ResizeCardHorizontalVerticalDirection.parameters = { docs: { iframeHeight: 900, storyDescription: `Cards can be resized in horizontal direction as well as vertical direction. Resize handle will expand on right border for horizontal resize and bottom border for vertical resize. @@ -400,7 +400,7 @@ resizeCardHorizontalVerticalDirection.parameters = { } }; -export const resizeCardHorizontalDirection = () => +export const ResizeCardHorizontalDirection = () => `<div id="grid1" class="fd-resizable-card-layout"> <div id="eight" class="fd-resizable-card-layout__item"> <div class="fd-resizable-card-layout__resize--vertical"></div> @@ -443,8 +443,8 @@ export const resizeCardHorizontalDirection = () => </div> `; -resizeCardHorizontalDirection.storyName = 'Card resize in horizontal directions'; -resizeCardHorizontalDirection.parameters = { +ResizeCardHorizontalDirection.storyName = 'Card resize in horizontal directions'; +ResizeCardHorizontalDirection.parameters = { docs: { iframeHeight: 900, storyDescription: `Cards can also be resized in horizontal direction only. Resize handle will expand on right border. @@ -452,7 +452,7 @@ resizeCardHorizontalDirection.parameters = { } }; -export const resizeCardVerticalDirection = () => +export const ResizeCardVerticalDirection = () => `<div id="grid1" class="fd-resizable-card-layout"> <div id="nine" class="fd-resizable-card-layout__item"> <div class="fd-resizable-card-layout__card"> @@ -495,8 +495,8 @@ export const resizeCardVerticalDirection = () => </div> `; -resizeCardVerticalDirection.storyName = 'Card resize in vertical directions'; -resizeCardVerticalDirection.parameters = { +ResizeCardVerticalDirection.storyName = 'Card resize in vertical directions'; +ResizeCardVerticalDirection.parameters = { docs: { iframeHeight: 900, storyDescription: `Cards can be resized in vertical direction only. Resize handle will expand on bottom border. diff --git a/stories/scrollbar/scrollbar.stories.js b/stories/scrollbar/scrollbar.stories.js index 6d9c523373..8f05e7e1b3 100644 --- a/stories/scrollbar/scrollbar.stories.js +++ b/stories/scrollbar/scrollbar.stories.js @@ -2,7 +2,7 @@ export default { title: 'Components/Scrollbar', parameters: { description: ` -Themeable scrollbar is the scrollbar component made accordingly to the Fiori 3 design guidelines. +Themeable scrollbar is the scrollbar component made accordingly to the Fiori 3 design guidelines. Using the themeable scrollbar is preferred over the browser's default in the components that support having scrollbars and made accordingly to the Fiori 3 design guidelines. Themeable scrollbar works in Chrome, Safari, and other WebKit-based browsers and partially works in Firefox (no hover effects). Component not working in the IE, default scrollbar is shown instead. @@ -13,14 +13,14 @@ Component not working in the IE, default scrollbar is shown instead. } }; -export const defaultExample = () => ` +export const DefaultExample = () => ` <div style="width: 300px; height: 100px" class="fd-scrollbar"> <div style="width: 9000px; height: 9000px;"></div> </div> `; -defaultExample.storyName = 'Default'; -defaultExample.parameters = { +DefaultExample.storyName = 'Default'; +DefaultExample.parameters = { docs: { iframeHeight: 950, storyDescription: `To use themeable scrollbar use \`fd-scrollbar\` class on scrollable element. diff --git a/stories/section/section.stories.js b/stories/section/section.stories.js index 453f3144a4..b7d036db74 100644 --- a/stories/section/section.stories.js +++ b/stories/section/section.stories.js @@ -14,7 +14,7 @@ Can hold two child types: } }; -export const structure = () => `<section class="fd-section"> +export const Structure = () => `<section class="fd-section"> .fd-section </section> <section class="fd-section"> @@ -25,15 +25,15 @@ export const structure = () => `<section class="fd-section"> </section> `; -structure.storyName = 'Section Structure'; -structure.parameters = { +Structure.storyName = 'Section Structure'; +Structure.parameters = { docs: { iframeHeight: 300, storyDescription: '' } }; -export const sectionLayoutGrid = () => `<section class="fd-section"> +export const SectionLayoutGrid = () => `<section class="fd-section"> <div class="fd-container"> <div class="fd-row"> <div class="fd-col fd-col--4"> @@ -51,21 +51,21 @@ export const sectionLayoutGrid = () => `<section class="fd-section"> </div> </div> </div> - <div class="fd-col fd-col--4"> + <div class="fd-col fd-col--4"> <div class="fd-layout-panel"> <div class="fd-layout-panel__body"> <p>.fd-layout-panel</p> </div> </div> </div> - <div class="fd-col fd-col--4"> + <div class="fd-col fd-col--4"> <div class="fd-layout-panel"> <div class="fd-layout-panel__body"> <p>.fd-layout-panel</p> </div> </div> </div> - <div class="fd-col fd-col--4"> + <div class="fd-col fd-col--4"> <div class="fd-layout-panel"> <div class="fd-layout-panel__body"> <p>.fd-layout-panel</p> @@ -77,8 +77,8 @@ export const sectionLayoutGrid = () => `<section class="fd-section"> </section> `; -sectionLayoutGrid.storyName = 'With Layout Grid'; -sectionLayoutGrid.parameters = { +SectionLayoutGrid.storyName = 'With Layout Grid'; +SectionLayoutGrid.parameters = { docs: { iframeHeight: 300, storyDescription: ` @@ -87,7 +87,7 @@ This is most appropriate when displaying a collection of content in a linear ord } }; -export const sectionPanels = () => `<section class="fd-section"> +export const SectionPanels = () => `<section class="fd-section"> <div class="fd-layout-panel"> <div class="fd-layout-panel__header"> <div class="fd-layout-panel__head"> @@ -115,17 +115,17 @@ export const sectionPanels = () => `<section class="fd-section"> </section> `; -sectionPanels.storyName = 'With Panels'; -sectionPanels.parameters = { +SectionPanels.storyName = 'With Panels'; +SectionPanels.parameters = { docs: { iframeHeight: 300, storyDescription: ` -Shows an alternate layout option using columns. +Shows an alternate layout option using columns. This may be more appropriate depending on the need to maintain source order and structure.` } }; -export const sectionHeaders = () => `<section class="fd-section"> +export const SectionHeaders = () => `<section class="fd-section"> <div class="fd-section__header"> <h3 class="fd-section__title">Section title</h3> </div> @@ -137,15 +137,15 @@ export const sectionHeaders = () => `<section class="fd-section"> </section> `; -sectionHeaders.storyName = 'With Headers'; -sectionHeaders.parameters = { +SectionHeaders.storyName = 'With Headers'; +SectionHeaders.parameters = { docs: { iframeHeight: 300, storyDescription: 'Header and title elements are available when necessary to label content groups.' } }; -export const testingSimpleSection = () => `<section class='fd-section '> +export const TestingSimpleSection = () => `<section class='fd-section '> Simple Section </section> @@ -155,7 +155,7 @@ export const testingSimpleSection = () => `<section class='fd-section '> </div> Section Content </section> - + <section class='fd-section '> <div class='fd-section__header'> <h3 class='fd-section__title'>Title</h3> @@ -163,7 +163,7 @@ export const testingSimpleSection = () => `<section class='fd-section '> </div> Section Content </section> - + <section class='fd-section '> <div class='fd-section__header'> <h3 class='fd-section__title'>Title</h3> @@ -172,7 +172,7 @@ export const testingSimpleSection = () => `<section class='fd-section '> Section Content <div class='fd-section__footer'>footer part</div> </section> - + <section class='fd-section fd-section--full-bleed'> <div class='fd-section__header'> <h3 class='fd-section__title'>Title</h3> @@ -181,17 +181,17 @@ export const testingSimpleSection = () => `<section class='fd-section '> Section Content with Full Bleed <div class='fd-section__footer'>footer part</div> </section> - + <section class='fd-section '>Simple Section</section> `; -testingSimpleSection.parameters = { +TestingSimpleSection.parameters = { docs: { disable: true } }; -export const testingSectionWithHeadlines = () => ` +export const TestingSectionWithHeadlines = () => ` <section class='fd-section '> <div class='fd-section__header'> <h2 class='fd-section__title'>section with h2 headline</h2> @@ -200,7 +200,7 @@ export const testingSectionWithHeadlines = () => ` Section Content <div class='fd-section__footer'>footer part</div> </section> - + <section class='fd-section '> <div class='fd-section__header'> <h3 class='fd-section__title'>section with h3 headline</h3> @@ -209,7 +209,7 @@ export const testingSectionWithHeadlines = () => ` Section Content <div class='fd-section__footer'>footer part</div> </section> - + <section class='fd-section '> <div class='fd-section__header'> <h4 class='fd-section__title'>section with h4 headline</h4> @@ -218,7 +218,7 @@ export const testingSectionWithHeadlines = () => ` Section Content <div class='fd-section__footer'>footer part</div> </section> - + <section class='fd-section '> <div class='fd-section__header'> <h5 class='fd-section__title'>section with h5 headline</h5> @@ -238,7 +238,7 @@ Section Content </section> `; -testingSectionWithHeadlines.parameters = { +TestingSectionWithHeadlines.parameters = { docs: { disable: true } diff --git a/stories/select/select.stories.js b/stories/select/select.stories.js index 224d76cfbb..d8a6ca4cce 100644 --- a/stories/select/select.stories.js +++ b/stories/select/select.stories.js @@ -21,7 +21,7 @@ export default { } }; -export const cozy = () => `<div style="height: 250px"> +export const Cozy = () => `<div style="height: 250px"> <label class="fd-form-label" id="cozySelectLabel">Choose an option</label><br /> <div class="fd-popover"> <div class="fd-popover__control"> @@ -40,7 +40,7 @@ export const cozy = () => `<div style="height: 250px"> tabindex="0"> <span is="cozySelectValue" class="fd-select__text-content">List Item 1</span> <span class="fd-button fd-button--transparent fd-select__button"> - <i class="sap-icon--slim-arrow-down"></i> + <i class="sap-icon--slim-arrow-down"></i> </span> </button> </div> @@ -88,15 +88,15 @@ export const cozy = () => `<div style="height: 250px"> </div> `; -cozy.parameters = { +Cozy.parameters = { docs: { iframeHeight: 500, storyDescription: ` -Select displays a predefined option and a button that triggers a dropdown menu to view more options (list items). By default, it is displayed in cozy mode. +Select displays a predefined option and a button that triggers a dropdown menu to view more options (list items). By default, it is displayed in cozy mode. ` } }; -export const compact = () => `<div style="height: 200px"> +export const Compact = () => `<div style="height: 200px"> <label class="fd-form-label" id="compactSelectLabel">Choose an option</label><br /> <div class="fd-popover"> <div class="fd-popover__control"> @@ -129,7 +129,7 @@ export const compact = () => `<div style="height: 200px"> <li id="compactSelectCombobox-currentlyFocusedItem" class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0"> <span class="fd-list__title"> - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + 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. </span> </li> @@ -148,7 +148,7 @@ export const compact = () => `<div style="height: 200px"> </div> `; -compact.parameters = { +Compact.parameters = { docs: { iframeHeight: 500, storyDescription: ` @@ -156,7 +156,7 @@ When in compact mode, select displays a dropdown menu that can contain long list ` } }; -export const mobileMode = () => `<div class="fd-dialog fd-dialog-docs-static fd-select-docs-max-height fd-dialog--active" id="select-dialog-example"> +export const MobileMode = () => `<div class="fd-dialog fd-dialog-docs-static fd-select-docs-max-height fd-dialog--active" id="select-dialog-example"> <div class="fd-dialog__content"> <header class="fd-dialog__header fd-bar fd-bar--header-with-subheader"> <div class="fd-bar__left"> @@ -207,9 +207,9 @@ export const mobileMode = () => `<div class="fd-dialog fd-dialog-docs-static fd- </div> `; -mobileMode.storyName = 'Mobile'; +MobileMode.storyName = 'Mobile'; -mobileMode.parameters = { +MobileMode.parameters = { docs: { iframeHeight: 400, storyDescription: ` @@ -218,7 +218,7 @@ Select is displayed in a full-screen dialog when viewed on mobile (and some tabl } }; -export const semanticStates = () => `<div style="height: 200px"> +export const SemanticStates = () => `<div style="height: 200px"> <div class="fd-container"> <div class="fd-row"> <div class="fd-col fd-col--3"> @@ -481,9 +481,9 @@ export const semanticStates = () => `<div style="height: 200px"> </div> `; -semanticStates.storyName = 'States'; +SemanticStates.storyName = 'States'; -semanticStates.parameters = { +SemanticStates.parameters = { docs: { iframeHeight: 300, storyDescription: ` @@ -497,12 +497,12 @@ Warning | \`is-warning\` Information | \`is-information\` -**Note:** To add text in the body of the component, include the text within the \`fd-list__message\` above the \`ul\` element. +**Note:** To add text in the body of the component, include the text within the \`fd-list__message\` above the \`ul\` element. ` } }; -export const asFormItem = () => `<div style="height:310px"> +export const AsFormItem = () => `<div style="height:310px"> <div class="fd-form-item"> <label class="fd-form-label" id="formSelectLabel">Choose an option</label><br /> <div class="fd-popover"> @@ -521,7 +521,7 @@ export const asFormItem = () => `<div style="height:310px"> tabindex="0"> <span is="formSelectValue" class="fd-select__text-content">Select</span> <span class="fd-button fd-button--transparent fd-select__button"> - <i class="sap-icon--slim-arrow-down"></i> + <i class="sap-icon--slim-arrow-down"></i> </span> </button> </div> @@ -569,9 +569,9 @@ export const asFormItem = () => `<div style="height:310px"> </div> `; -asFormItem.storyName = 'Form item'; +AsFormItem.storyName = 'Form item'; -asFormItem.parameters = { +AsFormItem.parameters = { docs: { iframeHeight: 900, storyDescription: ` @@ -580,7 +580,7 @@ When displaying select within a form, you can apply the \`fd-form-item\` wrapper } }; -export const twoColumn = () => `<div style="height: 200px"> +export const TwoColumn = () => `<div style="height: 200px"> <div class="fd-container"> <div class="fd-row"> <div class="fd-col fd-col--6"> @@ -689,9 +689,9 @@ export const twoColumn = () => `<div style="height: 200px"> </div> `; -twoColumn.storyName = '2-column'; +TwoColumn.storyName = '2-column'; -twoColumn.parameters = { +TwoColumn.parameters = { docs: { iframeHeight: 500, storyDescription: ` @@ -699,7 +699,7 @@ Select can be displayed with two columns in the dropdown list view. The column w ` } }; -export const twoColumnsAndIcons = () => `<div style="height: 200px"> +export const TwoColumnsAndIcons = () => `<div style="height: 200px"> <label class="fd-form-label" id="twoColumnsAndIconsLabel">Choose an option</label><br /> <div class="fd-popover"> <div class="fd-popover__control"> @@ -756,9 +756,9 @@ export const twoColumnsAndIcons = () => `<div style="height: 200px"> </div> `; -twoColumnsAndIcons.storyName = '2-column with icons'; +TwoColumnsAndIcons.storyName = '2-column with icons'; -twoColumnsAndIcons.parameters = { +TwoColumnsAndIcons.parameters = { docs: { iframeHeight: 500, storyDescription: ` @@ -766,7 +766,7 @@ Not only can select be displayed with two columns, but also with icons. To displ ` } }; -export const itemGrouping = () => `<div style="height: 450px"> +export const ItemGrouping = () => `<div style="height: 450px"> <label class="fd-form-label" id="itemGroupingLabel">Choose an option</label><br /> <div class="fd-popover"> <div class="fd-popover__control"> @@ -836,9 +836,9 @@ export const itemGrouping = () => `<div style="height: 450px"> </div> `; -itemGrouping.storyName = 'Grouping'; +ItemGrouping.storyName = 'Grouping'; -itemGrouping.parameters = { +ItemGrouping.parameters = { docs: { iframeHeight: 400, storyDescription: ` @@ -847,7 +847,7 @@ Select can be displayed with headers that group the list items in the dropdown m } }; -export const textWrapping = () => `<div style="height: 300px"> +export const TextWrapping = () => `<div style="height: 300px"> <label class="fd-form-label" id="textWrappingLabel">Choose an option</label><br /> <div class="fd-popover"> <div class="fd-popover__control"> @@ -880,8 +880,8 @@ export const textWrapping = () => `<div style="height: 300px"> id="textWrappingSelectCombobox-currentlyFocusedItem" class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0"> <span class="fd-list__title"> - 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 + 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. </span> <span class="fd-list__secondary">A1</span> @@ -904,18 +904,18 @@ export const textWrapping = () => `<div style="height: 300px"> </div> `; -textWrapping.storyName = 'Text wrapping'; +TextWrapping.storyName = 'Text wrapping'; -textWrapping.parameters = { +TextWrapping.parameters = { docs: { iframeHeight: 400, storyDescription: ` -The select component wraps text by default, and there is virtually no limit to the text length. However, it is recommended to keep the length to a minimum for readability. The second column will always remain center-aligned, despite the length of the list item. +The select component wraps text by default, and there is virtually no limit to the text length. However, it is recommended to keep the length to a minimum for readability. The second column will always remain center-aligned, despite the length of the list item. ` } }; -export const noWrapping = () => `<div style="height: 200px"> +export const NoWrapping = () => `<div style="height: 200px"> <label class="fd-form-label" id="noWrappingLabel">Choose an option</label><br /> <div class="fd-popover"> <div class="fd-popover__control"> @@ -970,9 +970,9 @@ export const noWrapping = () => `<div style="height: 200px"> </div> `; -noWrapping.storyName = 'No wrapping'; +NoWrapping.storyName = 'No wrapping'; -noWrapping.parameters = { +NoWrapping.parameters = { docs: { iframeHeight: 300, storyDescription: ` @@ -981,7 +981,7 @@ Although select wraps text by default, it is possible to prevent wrapping. To ac } }; -export const matchSelectPopoverBodySize = () => `<div style="height: 250px"> +export const MatchSelectPopoverBodySize = () => `<div style="height: 250px"> <label class="fd-form-label" id="matchSelectPopoverBodySizeLabel">Choose an option</label><br /> <div class="fd-popover"> <div class="fd-popover__control"> @@ -1037,18 +1037,18 @@ export const matchSelectPopoverBodySize = () => `<div style="height: 250px"> </div> `; -matchSelectPopoverBodySize.storyName = 'Popover style'; +MatchSelectPopoverBodySize.storyName = 'Popover style'; -matchSelectPopoverBodySize.parameters = { +MatchSelectPopoverBodySize.parameters = { docs: { iframeHeight: 300, storyDescription: ` -Select can be displayed as a popover, using all of its specifications. The default size for the popover body is often longer than the text length. The body can be adjusted to match the text length by adding the \`fd-popover__body—dropdown-fill\` class to \`fd-popover__body\`. See **Popover** for more details. +Select can be displayed as a popover, using all of its specifications. The default size for the popover body is often longer than the text length. The body can be adjusted to match the text length by adding the \`fd-popover__body—dropdown-fill\` class to \`fd-popover__body\`. See **Popover** for more details. ` } }; -export const largerSelect = () => `<div style="height: 250px"> +export const LargerSelect = () => `<div style="height: 250px"> <label class="fd-form-label" id="largeSelectPopoverSizeLabel">Choose an option</label><br /> <div class="fd-popover"> <div class="fd-popover__control"> @@ -1111,18 +1111,18 @@ export const largerSelect = () => `<div style="height: 250px"> </div> `; -largerSelect.storyName = 'Large Select'; +LargerSelect.storyName = 'Large Select'; -largerSelect.parameters = { +LargerSelect.parameters = { docs: { iframeHeight: 300, storyDescription: ` -There is a way to make larger select select body, To achieve it, add \`fd-list--large-dropdown\` to \`fd-list\` element. +There is a way to make larger select select body, To achieve it, add \`fd-list--large-dropdown\` to \`fd-list\` element. ` } }; -export const disabled = () => `<label class="fd-form-label" id="disabledLabel">Choose an option</label><br /> +export const Disabled = () => `<label class="fd-form-label" id="disabledLabel">Choose an option</label><br /> <div class="fd-popover"> <div class="fd-popover__control" aria-disabled="true"> <div class="fd-select"> @@ -1140,18 +1140,16 @@ export const disabled = () => `<label class="fd-form-label" id="disabledLabel">C </div> `; -disabled.storyName = 'Disabled'; - -disabled.parameters = { +Disabled.parameters = { docs: { iframeHeight: 300, storyDescription: ` -Select can be disabled to communicate to the user that the control cannot be selected. To disable select, add the \`aria-disabled="true"\` attribute to the \`fd-popover__control\` and the \`fd-select__control\` elements. +Select can be disabled to communicate to the user that the control cannot be selected. To disable select, add the \`aria-disabled="true"\` attribute to the \`fd-popover__control\` and the \`fd-select__control\` elements. ` } }; -export const readonly = () => `<label class="fd-form-label" id="readonlyLabel">Chosen option</label><br /> +export const Readonly = () => `<label class="fd-form-label" id="readonlyLabel">Chosen option</label><br /> <div class="fd-popover"> <div class="fd-popover__control"> <div class="fd-select"> @@ -1169,9 +1167,9 @@ export const readonly = () => `<label class="fd-form-label" id="readonlyLabel">C </div> `; -readonly.storyName = 'Read-only'; +Readonly.storyName = 'Read-only'; -readonly.parameters = { +Readonly.parameters = { docs: { iframeHeight: 300, storyDescription: ` @@ -1180,7 +1178,7 @@ Select can be displayed as read-only, meaning the value in the input field canno } }; -export const blank = () => `<div style="height: 250px"> +export const Blank = () => `<div style="height: 250px"> <div class="fd-container"> <div class="fd-row"> <div class="fd-col fd-col--6"> @@ -1204,7 +1202,7 @@ export const blank = () => `<div style="height: 250px"> aria-haspopup="listbox"> <span id="h45336F3Value" class="fd-select__text-content"></span> <span class="fd-button fd-button--transparent fd-select__button"> - <i class="sap-icon--slim-arrow-down"></i> + <i class="sap-icon--slim-arrow-down"></i> </span> </button> </div> @@ -1258,7 +1256,7 @@ export const blank = () => `<div style="height: 250px"> aria-haspopup="listbox"> <span id="h45336F4Value" class="fd-select__text-content"></span> <span class="fd-button fd-button--transparent fd-select__button"> - <i class="sap-icon--slim-arrow-down"></i> + <i class="sap-icon--slim-arrow-down"></i> </span> </button> </div> @@ -1290,9 +1288,7 @@ export const blank = () => `<div style="height: 250px"> </div> `; -blank.storyName = 'Blank'; - -blank.parameters = { +Blank.parameters = { docs: { iframeHeight: 400, storyDescription: ` diff --git a/stories/shellbar/shellbar.stories.js b/stories/shellbar/shellbar.stories.js index e91e09dafa..c28885ff83 100644 --- a/stories/shellbar/shellbar.stories.js +++ b/stories/shellbar/shellbar.stories.js @@ -3,8 +3,8 @@ export default { parameters: { tags: ['f3', 'a11y', 'theme'], description: ` -The shellbar offers consistent, responsive navigation across all products and applications. It also includes support for branding, product navigation, search, notifications, and user settings. This is a composite component comprised of mandatory and optional elements. Shellbar should always be placed inside the shell layout container. As mentioned earlier, it is completely responsive by default with margins and padding already built in. - +The shellbar offers consistent, responsive navigation across all products and applications. It also includes support for branding, product navigation, search, notifications, and user settings. This is a composite component comprised of mandatory and optional elements. Shellbar should always be placed inside the shell layout container. As mentioned earlier, it is completely responsive by default with margins and padding already built in. + **Shellbar has two primary container groups:** - Product: for branding and product elements. @@ -14,7 +14,7 @@ The shellbar offers consistent, responsive navigation across all products and ap ##Elements The shellbar supports layout functionality and has some built-in elements, but relies on standalone components for most of its content. - + Elements | Class | Description :------------ | :------- | :------------ Logo (mandatory) | \`fd-shellbar__logo\` | For company branding, add the \`--image-replaced\` modifier class when using CSS to display the logo. @@ -32,7 +32,7 @@ Notifications (optional) | \`fd-button__badge\` | To display notifications, add } }; -export const primary = () => `<div style="height:150px"> +export const Primary = () => `<div style="height:150px"> <div class="fd-shellbar"> <div class="fd-shellbar__group fd-shellbar__group--product"> <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP"></span> @@ -68,7 +68,7 @@ export const primary = () => `<div style="height:150px"> </div> </div> `; -primary.parameters = { +Primary.parameters = { docs: { storyDescription: ` The primary shellbar displays a logo, title, and an avatar where the user settings are found. If the avatar does not contain a thumbnail, then the initials of the user will be displayed. @@ -76,7 +76,7 @@ The primary shellbar displays a logo, title, and an avatar where the user settin } }; -export const productMenuAndSearch = () => `<div style="height:200px"> +export const ProductMenuAndSearch = () => `<div style="height:200px"> <div class="fd-shellbar"> <div class="fd-shellbar__group fd-shellbar__group--product"> <span class="fd-shellbar__logo"> @@ -119,7 +119,7 @@ export const productMenuAndSearch = () => `<div style="height:200px"> <div class="fd-shellbar__subtitle">Subtitle</div> </div> <div class="fd-shellbar__group fd-shellbar__group--actions"> - <div class="fd-shellbar__action fd-shellbar__action--desktop"> + <div class="fd-shellbar__action fd-shellbar__action--desktop"> <div class="fd-popover__control"> <div aria-label="Image label" onclick="onPopoverClick('F4GcX348b')" aria-controls="F4GcX348b" aria-expanded="false" aria-haspopup="true"> <div class="fd-input-group fd-shellbar__input-group"> @@ -172,9 +172,9 @@ export const productMenuAndSearch = () => `<div style="height:200px"> </div> `; -productMenuAndSearch.storyName = 'Product menu and search'; +ProductMenuAndSearch.storyName = 'Product menu and search'; -productMenuAndSearch.parameters = { +ProductMenuAndSearch.parameters = { docs: { storyDescription: ` Shellbar can be displayed with a product menu and search box. The product menu is used for navigating to other applications within the product. To display a product menu, add the \`fd-popover\` class after the \`fd-shellbar__logo\` class. @@ -182,14 +182,14 @@ Shellbar can be displayed with a product menu and search box. The product menu i } }; -export const linksWithCollapsibleMenuXlSize = () => `<div style="height:300px"> +export const LinksWithCollapsibleMenuXlSize = () => `<div style="height:300px"> <div class="fd-shellbar fd-shellbar--xl"> <div class="fd-shellbar__group fd-shellbar__group--product"> <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP"></span> <span class="fd-shellbar__title">Corporate Portal</span> </div> <div class="fd-shellbar__group fd-shellbar__group--actions"> - <div class="fd-shellbar__action fd-shellbar__action--desktop"> + <div class="fd-shellbar__action fd-shellbar__action--desktop"> <div class="fd-popover__control"> <div aria-label="Image label" aria-controls="UIO6J688" aria-expanded="false" aria-haspopup="true"> <div class="fd-input-group fd-shellbar__input-group"> @@ -285,9 +285,9 @@ export const linksWithCollapsibleMenuXlSize = () => `<div style="height:300px"> </div> `; -linksWithCollapsibleMenuXlSize.storyName = 'Extra large'; +LinksWithCollapsibleMenuXlSize.storyName = 'Extra large'; -linksWithCollapsibleMenuXlSize.parameters = { +LinksWithCollapsibleMenuXlSize.parameters = { docs: { storyDescription: ` The shellbar can be optimized for extra-large screens. To achieve this style, add the \`fd-shellbar--xl\` modifier class to the main element, which increases the container padding to 3rem. @@ -296,14 +296,14 @@ The shellbar can be optimized for extra-large screens. To achieve this style, ad }; -export const linksWithCollapsibleMenuMSize = () => `<div style="height:300px; max-width: 1024px;"> +export const LinksWithCollapsibleMenuMSize = () => `<div style="height:300px; max-width: 1024px;"> <div class="fd-shellbar fd-shellbar--m"> <div class="fd-shellbar__group fd-shellbar__group--product"> <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP"></span> <span class="fd-shellbar__title">Corporate Portal</span> </div> <div class="fd-shellbar__group fd-shellbar__group--actions"> - <div class="fd-shellbar__action fd-shellbar__action--desktop"> + <div class="fd-shellbar__action fd-shellbar__action--desktop"> <div class="fd-popover__control"> <div aria-label="Image label" aria-controls="UIBFJ688" aria-expanded="false" aria-haspopup="true"> <div class="fd-input-group fd-shellbar__input-group"> @@ -399,9 +399,9 @@ export const linksWithCollapsibleMenuMSize = () => `<div style="height:300px; ma </div> `; -linksWithCollapsibleMenuMSize.storyName = 'Medium-large'; +LinksWithCollapsibleMenuMSize.storyName = 'Medium-large'; -linksWithCollapsibleMenuMSize.parameters = { +LinksWithCollapsibleMenuMSize.parameters = { docs: { storyDescription: ` The shellbar can be optimized for medium-large screens. To achieve this style, add the \`fd-shellbar--m\` or \`fd-shellbar--l\`modifier class to the main element, which increases the container padding to 2rem. @@ -409,14 +409,14 @@ The shellbar can be optimized for medium-large screens. To achieve this style, a } }; -export const linksWithCollapsibleMenuSSize = () => `<div style="height:300px; max-width: 600px;"> +export const LinksWithCollapsibleMenuSSize = () => `<div style="height:300px; max-width: 600px;"> <div class="fd-shellbar fd-shellbar--s"> <div class="fd-shellbar__group fd-shellbar__group--product"> <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP"></span> <span class="fd-shellbar__title">Corporate Portal</span> </div> <div class="fd-shellbar__group fd-shellbar__group--actions"> - <div class="fd-shellbar__action fd-shellbar__action--desktop"> + <div class="fd-shellbar__action fd-shellbar__action--desktop"> <div class="fd-popover__control"> <div aria-label="Image label" aria-controls="UIBFJ688" aria-expanded="false" aria-haspopup="true"> <div class="fd-input-group fd-shellbar__input-group"> @@ -514,9 +514,9 @@ export const linksWithCollapsibleMenuSSize = () => `<div style="height:300px; ma </div> `; -linksWithCollapsibleMenuSSize.storyName = 'Small'; +LinksWithCollapsibleMenuSSize.storyName = 'Small'; -linksWithCollapsibleMenuSSize.parameters = { +LinksWithCollapsibleMenuSSize.parameters = { docs: { storyDescription: ` The shellbar can be optimized for mobile and small tablet screens. To achieve this style, add the \`fd-shellbar--s\` modifier class to the main element. All actions except the user menu should be collapsed, displaying an overflow button. @@ -524,7 +524,7 @@ The shellbar can be optimized for mobile and small tablet screens. To achieve th } }; -export const productSwitch = () => `<div style="height:600px"> +export const ProductSwitch = () => `<div style="height:600px"> <div class="fd-shellbar"> <div class="fd-shellbar__group fd-shellbar__group--product"> <span class="fd-shellbar__logo"> @@ -700,9 +700,9 @@ export const productSwitch = () => `<div style="height:600px"> </div> `; -productSwitch.storyName = 'Product switch'; +ProductSwitch.storyName = 'Product switch'; -productSwitch.parameters = { +ProductSwitch.parameters = { docs: { storyDescription: ` Shellbar can be displayed with a product switch component, indicating to the user that they can navigate to other products. See [Product Switch](product-switch.html) for more details. diff --git a/stories/side-navigation/side-navigation.stories.js b/stories/side-navigation/side-navigation.stories.js index bb281dd076..5db3c76ca8 100644 --- a/stories/side-navigation/side-navigation.stories.js +++ b/stories/side-navigation/side-navigation.stories.js @@ -4,13 +4,13 @@ export default { description: ` **DEPRECATED**. This component will be deprecated in favor of the vertical navigation component. The side navigation area can be used to display navigation structures with up to two levels and contains links that change the content area. The side navigation consists of two container sections: the **main navigation section** (top-aligned) with links used to navigate within the user’s current work context, and the **utility section** (bottom-aligned) that contains links to additional information. Both of these sections use a nested list to display navigation items. -##Usage +##Usage **Use the side navigation if:** - You need to display global navigation structures of up to two levels. - Your scenarios are in the tooling or administration space. - If you want the entries to change as though they are dynamic content. - + **Do not use the side navigation if:** @@ -33,7 +33,7 @@ Side navigation can be viewed in three different states: } }; -export const cozy = () => `<div class="fd-side-nav"> +export const Cozy = () => `<div class="fd-side-nav"> <a class="fd-side-nav__skip-link" href="#content">Skip navigation</a> <nav class="fd-side-nav__main-navigation" aria-label="Main Menu"> <ul class="fd-nested-list fd-nested-list--text-only" aria-label="Main Menu"> @@ -76,9 +76,9 @@ export const cozy = () => `<div class="fd-side-nav"> </div> `; -cozy.storyName = 'Default'; +Cozy.storyName = 'Default'; -cozy.parameters = { +Cozy.parameters = { docs: { iframeHeight: 400, storyDescription: ` @@ -87,7 +87,7 @@ The default side navigation is displayed in cozy mode with one navigation level. } }; -export const cozyIcons = () => `<div class="fd-side-nav"> +export const CozyIcons = () => `<div class="fd-side-nav"> <a class="fd-side-nav__skip-link" href="#content">Skip navigation</a> <nav class="fd-side-nav__main-navigation" aria-label="Main Menu"> <ul class="fd-nested-list"> @@ -136,9 +136,9 @@ export const cozyIcons = () => `<div class="fd-side-nav"> </div> `; -cozyIcons.storyName = 'Icons'; +CozyIcons.storyName = 'Icons'; -cozyIcons.parameters = { +CozyIcons.parameters = { docs: { iframeHeight: 400, storyDescription: ` @@ -147,7 +147,7 @@ Side navigation can be displayed with icons. In the expanded state, entries can } }; -export const cozyGrouping = () => `<div class="fd-side-nav"> +export const CozyGrouping = () => `<div class="fd-side-nav"> <a class="fd-side-nav__skip-link" href="#content">Skip navigation</a> <nav class="fd-side-nav__main-navigation" aria-label="Main Menu"> <ul class="fd-nested-list fd-nested-list--text-only"> @@ -160,20 +160,20 @@ export const cozyGrouping = () => `<div class="fd-side-nav"> <a class="fd-nested-list__link is-selected" href="#"> <span class="fd-nested-list__title">Level 1 Item</span> </a> - </li> + </li> <li class="fd-nested-list__item"> <div class="fd-nested-list__content has-child"> <a class="fd-nested-list__link" href="#"> <span class="fd-nested-list__title">Level 1 Item</span> </a> - <button class="fd-button fd-nested-list__button" - aria-controls="EX100L2" - aria-haspopup="true" - aria-expanded="false" + <button class="fd-button fd-nested-list__button" + aria-controls="EX100L2" + aria-haspopup="true" + aria-expanded="false" aria-label="Expand submenu" onclick="toggleNestedListSubmenu(event)" > - <i class="sap-icon--navigation-right-arrow" role="presentation"></i> + <i class="sap-icon--navigation-right-arrow" role="presentation"></i> </button> </div> <ul class="fd-nested-list level-2" id="EX100L2" aria-hidden="true"> @@ -223,9 +223,9 @@ export const cozyGrouping = () => `<div class="fd-side-nav"> </div> `; -cozyGrouping.storyName = 'Group'; +CozyGrouping.storyName = 'Group'; -cozyGrouping.parameters = { +CozyGrouping.parameters = { docs: { iframeHeight: 400, storyDescription: ` @@ -235,7 +235,7 @@ Side navigation can be displayed with group headers that organize the entries, w } }; -export const complexCozySideNav = () => `<div class="fd-side-nav"> +export const ComplexCozySideNav = () => `<div class="fd-side-nav"> <a class="fd-side-nav__skip-link" href="#content">Skip navigation</a> <div class="fd-side-nav__group-header" id="EX400H1"> Group Header 1 @@ -260,14 +260,14 @@ export const complexCozySideNav = () => `<div class="fd-side-nav"> <i role="presentation" class="fd-nested-list__icon sap-icon--employee"></i> <span class="fd-nested-list__title">Level 1 Item</span> </a> - <button - class="fd-button fd-nested-list__button" - aria-controls="EX400L2" - aria-haspopup="true" - aria-expanded="false" + <button + class="fd-button fd-nested-list__button" + aria-controls="EX400L2" + aria-haspopup="true" + aria-expanded="false" aria-label="Expand submenu" onclick="toggleNestedListSubmenu(event)"> - <i class="sap-icon--navigation-right-arrow" role="presentation"></i> + <i class="sap-icon--navigation-right-arrow" role="presentation"></i> </button> </div> <ul class="fd-nested-list fd-nested-list--text-only level-2" id="EX400L2" aria-hidden="true"> @@ -331,9 +331,9 @@ export const complexCozySideNav = () => `<div class="fd-side-nav"> </div> `; -complexCozySideNav.storyName = 'Complex'; +ComplexCozySideNav.storyName = 'Complex'; -complexCozySideNav.parameters = { +ComplexCozySideNav.parameters = { docs: { iframeHeight: 550, storyDescription: ` @@ -342,7 +342,7 @@ Side navigation can display several different features such as icons, group head } }; -export const complexCompactSideNav = () => `<div class="fd-side-nav"> +export const ComplexCompactSideNav = () => `<div class="fd-side-nav"> <a class="fd-side-nav__skip-link" href="#content">Skip navigation</a> <div class="fd-side-nav__group-header" id="EX500H1"> Group Header 1 @@ -368,12 +368,12 @@ export const complexCompactSideNav = () => `<div class="fd-side-nav"> <span class="fd-nested-list__title">Level 1 Item</span> </a> <button class="fd-button fd-nested-list__button" - aria-controls="EX500L2" - aria-haspopup="true" - aria-expanded="false" + aria-controls="EX500L2" + aria-haspopup="true" + aria-expanded="false" aria-label="Expand submenu" onclick="toggleNestedListSubmenu(event)"> - <i class="sap-icon--navigation-right-arrow" role="presentation"></i> + <i class="sap-icon--navigation-right-arrow" role="presentation"></i> </button> </div> <ul class="fd-nested-list fd-nested-list--text-only level-2" id="EX500L2" aria-hidden="true"> @@ -437,9 +437,9 @@ export const complexCompactSideNav = () => `<div class="fd-side-nav"> </div> `; -complexCompactSideNav.storyName = 'Complex (compact)'; +ComplexCompactSideNav.storyName = 'Complex (compact)'; -complexCompactSideNav.parameters = { +ComplexCompactSideNav.parameters = { docs: { iframeHeight: 550, storyDescription: ` @@ -448,7 +448,7 @@ Side navigation can be displayed in compact mode and can also display several fe } }; -export const condensedStateCozy = () => `<nav class="fd-side-nav fd-side-nav--condensed"> +export const CondensedStateCozy = () => `<nav class="fd-side-nav fd-side-nav--condensed"> <a class="fd-side-nav__skip-link" href="#content">Skip navigation</a> <div class="fd-side-nav__main-navigation"> <ul class="fd-nested-list"> @@ -505,19 +505,19 @@ export const condensedStateCozy = () => `<nav class="fd-side-nav fd-side-nav--co </nav> `; -condensedStateCozy.storyName = 'Condensed'; +CondensedStateCozy.storyName = 'Condensed'; -condensedStateCozy.parameters = { +CondensedStateCozy.parameters = { docs: { iframeHeight: 500, storyDescription: ` Side navigation can be displayed in a condensed state, showing only icons that represent the navigation entries. When the user selects an entry from the navigation, a **Popover** is displayed. The default size for the popover body is often longer than the text length. However, the length can be adjusted to match the text length by adding the \`fd-popover__body--dropdown-fill\` class to the \`fd-popover__body\` element. -<br><br>To display a condensed side navigation, add the \`fd-side-nav--condensed\` modifier class to the main element. +<br><br>To display a condensed side navigation, add the \`fd-side-nav--condensed\` modifier class to the main element. ` } }; -export const condensedStateCompact = () => `<nav class="fd-side-nav fd-side-nav--condensed"> +export const CondensedStateCompact = () => `<nav class="fd-side-nav fd-side-nav--condensed"> <a class="fd-side-nav__skip-link" href="#content">Skip navigation</a> <div class="fd-side-nav__main-navigation"> <ul class="fd-nested-list fd-nested-list--compact"> @@ -574,9 +574,9 @@ export const condensedStateCompact = () => `<nav class="fd-side-nav fd-side-nav- </nav> `; -condensedStateCompact.storyName = 'Condensed (compact)'; +CondensedStateCompact.storyName = 'Condensed (compact)'; -condensedStateCompact.parameters = { +CondensedStateCompact.parameters = { docs: { iframeHeight: 500, storyDescription: ` @@ -586,7 +586,7 @@ Side navigation can be displayed in a condensed state, showing only icons that r } }; -export const nestedListWithoutIcons = () => `<ul class="fd-nested-list fd-nested-list--text-only"> +export const NestedListWithoutIcons = () => `<ul class="fd-nested-list fd-nested-list--text-only"> <li class="fd-nested-list__item"> <a class="fd-nested-list__link"href="#/"> <span class="fd-nested-list__title">Level 1 Item</span> @@ -604,10 +604,10 @@ export const nestedListWithoutIcons = () => `<ul class="fd-nested-list fd-nested </a> <button class="fd-button fd-nested-list__button" aria-controls="EX100L25" - aria-haspopup="true" - aria-expanded="true" + aria-haspopup="true" + aria-expanded="true" aria-label="Expand submenu"> - <i class="sap-icon--navigation-right-arrow" role="presentation"></i> + <i class="sap-icon--navigation-right-arrow" role="presentation"></i> </button> </div> <ul class="fd-nested-list level-2" id="EX100L25" aria-hidden="false"> @@ -623,10 +623,10 @@ export const nestedListWithoutIcons = () => `<ul class="fd-nested-list fd-nested </a> <button class="fd-button fd-nested-list__button" aria-controls="EX100L35" - aria-haspopup="true" - aria-expanded="true" + aria-haspopup="true" + aria-expanded="true" aria-label="Expand submenu"> - <i class="sap-icon--navigation-right-arrow" role="presentation"></i> + <i class="sap-icon--navigation-right-arrow" role="presentation"></i> </button> </div> <ul class="fd-nested-list level-3" id="EX100L35" aria-hidden="false"> @@ -642,10 +642,10 @@ export const nestedListWithoutIcons = () => `<ul class="fd-nested-list fd-nested </a> <button class="fd-button fd-nested-list__button" aria-controls="EX100L45" - aria-haspopup="true" - aria-expanded="true" + aria-haspopup="true" + aria-expanded="true" aria-label="Expand submenu"> - <i class="sap-icon--navigation-right-arrow" role="presentation"></i> + <i class="sap-icon--navigation-right-arrow" role="presentation"></i> </button> </div> <ul class="fd-nested-list level-4" id="EX100L45" aria-hidden="false"> @@ -661,10 +661,10 @@ export const nestedListWithoutIcons = () => `<ul class="fd-nested-list fd-nested </a> <button class="fd-button fd-nested-list__button" aria-controls="EX100L55" - aria-haspopup="true" - aria-expanded="true" + aria-haspopup="true" + aria-expanded="true" aria-label="Expand submenu"> - <i class="sap-icon--navigation-right-arrow" role="presentation"></i> + <i class="sap-icon--navigation-right-arrow" role="presentation"></i> </button> </div> <ul class="fd-nested-list level-5" id="EX100L55" aria-hidden="false"> @@ -680,8 +680,8 @@ export const nestedListWithoutIcons = () => `<ul class="fd-nested-list fd-nested </a> <button class="fd-button fd-nested-list__button" aria-controls="EX100L65" - aria-haspopup="true" - aria-expanded="true" + aria-haspopup="true" + aria-expanded="true" aria-label="Expand submenu"> <i class="sap-icon--navigation-right-arrow" role="presentation"></i> </button> @@ -745,13 +745,13 @@ export const nestedListWithoutIcons = () => `<ul class="fd-nested-list fd-nested </ul> `; -nestedListWithoutIcons.parameters = { +NestedListWithoutIcons.parameters = { docs: { disable: true } }; -export const nestedListWithIconsOnlyInFirstLevel = () => `<ul class="fd-nested-list"> +export const NestedListWithIconsOnlyInFirstLevel = () => `<ul class="fd-nested-list"> <li class="fd-nested-list__item"> <a class="fd-nested-list__link"href="#/"> <i role="presentation" class="fd-nested-list__icon sap-icon--home"></i> @@ -772,10 +772,10 @@ export const nestedListWithIconsOnlyInFirstLevel = () => `<ul class="fd-nested-l </a> <button class="fd-button fd-nested-list__button" aria-controls="EX300L2" - aria-haspopup="true" - aria-expanded="true" + aria-haspopup="true" + aria-expanded="true" aria-label="Expand submenu"> - <i class="sap-icon--navigation-right-arrow" role="presentation"></i> + <i class="sap-icon--navigation-right-arrow" role="presentation"></i> </button> </div> <ul class="fd-nested-list fd-nested-list--text-only level-2" id="EX300L2" aria-hidden="false"> @@ -791,10 +791,10 @@ export const nestedListWithIconsOnlyInFirstLevel = () => `<ul class="fd-nested-l </a> <button class="fd-button fd-nested-list__button" aria-controls="EX300L3" - aria-haspopup="true" - aria-expanded="true" + aria-haspopup="true" + aria-expanded="true" aria-label="Expand submenu"> - <i class="sap-icon--navigation-right-arrow" role="presentation"></i> + <i class="sap-icon--navigation-right-arrow" role="presentation"></i> </button> </div> <ul class="fd-nested-list fd-nested-list--text-only level-3" id="EX300L3" aria-hidden="false"> @@ -810,10 +810,10 @@ export const nestedListWithIconsOnlyInFirstLevel = () => `<ul class="fd-nested-l </a> <button class="fd-button fd-nested-list__button" aria-controls="EX300L4" - aria-haspopup="true" - aria-expanded="true" + aria-haspopup="true" + aria-expanded="true" aria-label="Expand submenu"> - <i class="sap-icon--navigation-right-arrow" role="presentation"></i> + <i class="sap-icon--navigation-right-arrow" role="presentation"></i> </button> </div> <ul class="fd-nested-list fd-nested-list--text-only level-4" id="EX300L4" aria-hidden="false"> @@ -868,13 +868,13 @@ export const nestedListWithIconsOnlyInFirstLevel = () => `<ul class="fd-nested-l </ul> `; -nestedListWithIconsOnlyInFirstLevel.parameters = { +NestedListWithIconsOnlyInFirstLevel.parameters = { docs: { disable: true } }; -export const nestedListWithGroupHeaders = () => `<ul class="fd-nested-list"> +export const NestedListWithGroupHeaders = () => `<ul class="fd-nested-list"> <li class="fd-nested-list__group-header"> Group Header 1 </li> @@ -898,10 +898,10 @@ export const nestedListWithGroupHeaders = () => `<ul class="fd-nested-list"> </a> <button class="fd-button fd-nested-list__button" aria-controls="EX400L222" - aria-haspopup="true" - aria-expanded="true" + aria-haspopup="true" + aria-expanded="true" aria-label="Expand submenu"> - <i class="sap-icon--navigation-right-arrow" role="presentation"></i> + <i class="sap-icon--navigation-right-arrow" role="presentation"></i> </button> </div> <ul class="fd-nested-list fd-nested-list--text-only level-2" id="EX400L222" aria-hidden="false"> @@ -917,10 +917,10 @@ export const nestedListWithGroupHeaders = () => `<ul class="fd-nested-list"> </a> <button class="fd-button fd-nested-list__button" aria-controls="EX400L3" - aria-haspopup="true" - aria-expanded="true" + aria-haspopup="true" + aria-expanded="true" aria-label="Expand submenu"> - <i class="sap-icon--navigation-right-arrow" role="presentation"></i> + <i class="sap-icon--navigation-right-arrow" role="presentation"></i> </button> </div> <ul class="fd-nested-list fd-nested-list--text-only level-3" id="EX400L3" aria-hidden="false"> @@ -936,10 +936,10 @@ export const nestedListWithGroupHeaders = () => `<ul class="fd-nested-list"> </a> <button class="fd-button fd-nested-list__button" aria-controls="EX400L4" - aria-haspopup="true" - aria-expanded="true" + aria-haspopup="true" + aria-expanded="true" aria-label="Expand submenu"> - <i class="sap-icon--navigation-right-arrow" role="presentation"></i> + <i class="sap-icon--navigation-right-arrow" role="presentation"></i> </button> </div> <ul class="fd-nested-list fd-nested-list--text-only level-4" id="EX400L4" aria-hidden="false"> @@ -997,13 +997,13 @@ export const nestedListWithGroupHeaders = () => `<ul class="fd-nested-list"> </ul> `; -nestedListWithGroupHeaders.parameters = { +NestedListWithGroupHeaders.parameters = { docs: { disable: true } }; -export const nestedListWithGroupHeadersCompactMode = () => `<ul class="fd-nested-list fd-nested-list--compact"> +export const NestedListWithGroupHeadersCompactMode = () => `<ul class="fd-nested-list fd-nested-list--compact"> <li class="fd-nested-list__group-header"> Group Header 1 </li> @@ -1027,10 +1027,10 @@ export const nestedListWithGroupHeadersCompactMode = () => `<ul class="fd-nested </a> <button class="fd-button fd-nested-list__button" aria-controls="EX500L2" - aria-haspopup="true" - aria-expanded="true" + aria-haspopup="true" + aria-expanded="true" aria-label="Expand submenu"> - <i class="sap-icon--navigation-right-arrow" role="presentation"></i> + <i class="sap-icon--navigation-right-arrow" role="presentation"></i> </button> </div> <ul class="fd-nested-list fd-nested-list--text-only level-2" id="EX500L2" aria-hidden="false"> @@ -1046,10 +1046,10 @@ export const nestedListWithGroupHeadersCompactMode = () => `<ul class="fd-nested </a> <button class="fd-button fd-nested-list__button" aria-controls="EX500L3" - aria-haspopup="true" - aria-expanded="true" + aria-haspopup="true" + aria-expanded="true" aria-label="Expand submenu"> - <i class="sap-icon--navigation-right-arrow" role="presentation"></i> + <i class="sap-icon--navigation-right-arrow" role="presentation"></i> </button> </div> <ul class="fd-nested-list fd-nested-list--text-only level-3" id="EX500L3" aria-hidden="false"> @@ -1065,10 +1065,10 @@ export const nestedListWithGroupHeadersCompactMode = () => `<ul class="fd-nested </a> <button class="fd-button fd-nested-list__button" aria-controls="EX500L4" - aria-haspopup="true" - aria-expanded="true" + aria-haspopup="true" + aria-expanded="true" aria-label="Expand submenu"> - <i class="sap-icon--navigation-right-arrow" role="presentation"></i> + <i class="sap-icon--navigation-right-arrow" role="presentation"></i> </button> </div> <ul class="fd-nested-list fd-nested-list--text-only level-4" id="EX500L4" aria-hidden="false"> @@ -1126,13 +1126,13 @@ export const nestedListWithGroupHeadersCompactMode = () => `<ul class="fd-nested </ul> `; -nestedListWithGroupHeadersCompactMode.parameters = { +NestedListWithGroupHeadersCompactMode.parameters = { docs: { disable: true } }; -export const nestedListWithoutLinks = () => `<ul class="fd-nested-list fd-nested-list--compact"> +export const NestedListWithoutLinks = () => `<ul class="fd-nested-list fd-nested-list--compact"> <li class="fd-nested-list__group-header"> Group Header 1 </li> @@ -1154,10 +1154,10 @@ export const nestedListWithoutLinks = () => `<ul class="fd-nested-list fd-nested <span class="fd-nested-list__title">Level 1 Item</span> <button class="fd-button fd-nested-list__button" aria-controls="EX600L2" - aria-haspopup="true" - aria-expanded="true" + aria-haspopup="true" + aria-expanded="true" aria-label="Expand submenu"> - <i class="sap-icon--navigation-right-arrow" role="presentation"></i> + <i class="sap-icon--navigation-right-arrow" role="presentation"></i> </button> </div> <ul class="fd-nested-list fd-nested-list--text-only level-2" id="EX600L2" aria-hidden="false"> @@ -1171,10 +1171,10 @@ export const nestedListWithoutLinks = () => `<ul class="fd-nested-list fd-nested <span class="fd-nested-list__title">Level 2 Item</span> <button class="fd-button fd-nested-list__button" aria-controls="EX600L3" - aria-haspopup="true" - aria-expanded="true" + aria-haspopup="true" + aria-expanded="true" aria-label="Expand submenu"> - <i class="sap-icon--navigation-right-arrow" role="presentation"></i> + <i class="sap-icon--navigation-right-arrow" role="presentation"></i> </button> </div> <ul class="fd-nested-list fd-nested-list--text-only level-3" id="EX600L3" aria-hidden="false"> @@ -1188,10 +1188,10 @@ export const nestedListWithoutLinks = () => `<ul class="fd-nested-list fd-nested <span class="fd-nested-list__title">Level 3 Item</span> <button class="fd-button fd-nested-list__button" aria-controls="EX600L4" - aria-haspopup="true" - aria-expanded="true" + aria-haspopup="true" + aria-expanded="true" aria-label="Expand submenu"> - <i class="sap-icon--navigation-right-arrow" role="presentation"></i> + <i class="sap-icon--navigation-right-arrow" role="presentation"></i> </button> </div> <ul class="fd-nested-list fd-nested-list--text-only level-4" id="EX600L4" aria-hidden="false"> @@ -1249,13 +1249,13 @@ export const nestedListWithoutLinks = () => `<ul class="fd-nested-list fd-nested </ul> `; -nestedListWithoutLinks.parameters = { +NestedListWithoutLinks.parameters = { docs: { disable: true } }; -export const nestedListPopover = () => `<div class="fddocs-container" style="margin-bottom: 200px;"> +export const NestedListPopover = () => `<div class="fddocs-container" style="margin-bottom: 200px;"> <div class="fd-popover fd-popover--right"> <div class="fd-popover__control"> <ul class="fd-nested-list fd-nested-list--compact"> @@ -1328,9 +1328,7 @@ export const nestedListPopover = () => `<div class="fddocs-container" style="mar </div> `; -nestedListPopover.storyName = 'Nested List Popover'; - -nestedListPopover.parameters = { +NestedListPopover.parameters = { docs: { iframeHeight: 900, storyDescription: ` diff --git a/stories/slider/slider.stories.js b/stories/slider/slider.stories.js index 838d4f1613..9514f8b982 100644 --- a/stories/slider/slider.stories.js +++ b/stories/slider/slider.stories.js @@ -5,7 +5,7 @@ export default { ##Usage **Use the slider if:** - + - You want to change values with graphical support. @@ -15,12 +15,12 @@ export default { ## Accessibility -To ensure that both the standard and range sliders are accessible, a div element with class \`fd-slider__handle\` must have the following aria attributes: +To ensure that both the standard and range sliders are accessible, a div element with class \`fd-slider__handle\` must have the following aria attributes: - \`tabindex="0"\` - \`role="slider"\` - \`aria-label\`: a string that labels the element -- \`aria-labelledby\`: an ID reference to a visible element that labels the slider, used if \`aria-label\` isn't provided +- \`aria-labelledby\`: an ID reference to a visible element that labels the slider, used if \`aria-label\` isn't provided - \`aria-valuemin\`: the decimal value representing the minimum allowed value of the slider - \`aria-valuemax\`: the decimal value representing the maximum allowed value of the slider - \`aria-valuenow\`: the decimal value representing the current value of the slider @@ -47,8 +47,6 @@ export const Standard = () => ` </div> `; -Standard.storyName = 'Standard'; - Standard.parameters = { docs: { iframeHeight: 500, @@ -57,7 +55,7 @@ The standard slider displays a bar with a circular handle. When the user hovers ` } }; -export const range = () => ` +export const Range = () => ` <div class="slider-container slider-container--range"> <div class="fd-slider"> <div class="fd-slider__inner"> @@ -71,9 +69,7 @@ export const range = () => ` </div> `; -range.storyName = 'Range'; - -range.parameters = { +Range.parameters = { docs: { iframeHeight: 500, storyDescription: ` @@ -82,7 +78,7 @@ The range slider displays a bar with two circular handles, indicating that a ran ` } }; -export const ticks = () => ` +export const Ticks = () => ` <div class="slider-container"> <div class="fd-slider"> <div class="fd-slider__inner"> @@ -110,8 +106,7 @@ export const ticks = () => ` </div> `; -ticks.storyName = 'Ticks'; -ticks.parameters = { +Ticks.parameters = { docs: { storyDescription: ` The slider can display ticks on the bar to help guide the user. Ticks can be displayed with the \`fd-slider__tick\` class. If a tick is in selected range, a \`--in-range\` modifier class should be applied. @@ -119,7 +114,7 @@ The slider can display ticks on the bar to help guide the user. Ticks can be dis } }; -export const ticksAndLabels = () => ` +export const TicksAndLabels = () => ` <div class="slider-container"> <div class="fd-slider"> <div class="fd-slider__inner"> @@ -160,8 +155,8 @@ export const ticksAndLabels = () => ` </div> `; -ticksAndLabels.storyName = 'Ticks and labels'; -ticksAndLabels.parameters = { +TicksAndLabels.storyName = 'Ticks and labels'; +TicksAndLabels.parameters = { docs: { storyDescription: ` The slider can display labels that indicate the values of each tick. Labels can be displayed with the \`fd-slider__label\` class. Be advised that this styling does not include the positioning of the labels. @@ -169,7 +164,7 @@ The slider can display labels that indicate the values of each tick. Labels can } }; -export const mobileMode = () => ` +export const MobileMode = () => ` <div class="slider-container"> <div class="fd-slider fd-slider--lg"> <div class="fd-slider__inner"> @@ -181,8 +176,8 @@ export const mobileMode = () => ` </div> </div> `; -mobileMode.storyName = 'Mobile'; -mobileMode.parameters = { +MobileMode.storyName = 'Mobile'; +MobileMode.parameters = { docs: { storyDescription: ` By default, the slider is not responsive. However, to make the slider more mobile-friendly, you may enlarge the slider handle and its hit area by adding \`fd-slider__handle--lg\` class to \`fd-slider__handle\` element. diff --git a/stories/status-indicator/status-indicator.stories.js b/stories/status-indicator/status-indicator.stories.js index e26a99c51b..cc6743805c 100644 --- a/stories/status-indicator/status-indicator.stories.js +++ b/stories/status-indicator/status-indicator.stories.js @@ -138,7 +138,7 @@ export const Sizes = () => ` c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7 l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent"> </path> - </svg> + </svg> </svg> </div> </div> @@ -157,7 +157,7 @@ Sizes.parameters = { } }; -export const fillValues = () => ` +export const FillValues = () => ` <div class="example-container"> <span class="fd-form-label">Negative Filling :</span> <div class="fd-status-indicator fd-status-indicator--negative fd-status-indicator--lg" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="35%" tabindex=0 aria-label="Euro Status Indicator With Negative Filling" focusable="true" title="35% fill with negative color"> @@ -256,11 +256,11 @@ export const fillValues = () => ` </div> `; -fillValues.storyName = 'Fill values'; -fillValues.parameters = { +FillValues.storyName = 'Fill values'; +FillValues.parameters = { docs: { storyDescription: ` -To display fill values with the status indicator i.e 'critical,negative,positive', add the \`fd-status-indicator--negative\` +To display fill values with the status indicator i.e 'critical,negative,positive', add the \`fd-status-indicator--negative\` modifier class together with the \`fd-status-indicator\` class. ` } @@ -328,7 +328,7 @@ export const StatusIndicatorLabels = () => ` c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7 l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent"> </path> - </svg> + </svg> </svg> <span class="fd-status-indicator__label fd-status-indicator__label--lg fd-status-indicator__label--bottom">100%</span> </div> @@ -394,7 +394,7 @@ export const StatusIndicatorLabels = () => ` c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7 l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent"> </path> - </svg> + </svg> </svg> <span class="fd-status-indicator__label fd-status-indicator__label--lg fd-status-indicator__label--right">100%</span> </div> @@ -423,7 +423,7 @@ export const StatusIndicatorLinearFilling = () => ` <stop offset="0.8" stop-color="white"> <animate attributeName="offset" values="0;0.8" repeatCount="1" dur="3s" begin="0s"/> </stop> - + <stop offset="0.8" stop-color="transparent"> <animate attributeName="offset" values="0;0.8" repeatCount="1" dur="3s" begin="0s"/> </stop> @@ -460,7 +460,7 @@ export const StatusIndicatorLinearFilling = () => ` <stop offset="0.8" stop-color="white"> <animate attributeName="offset" values="0;0.8" repeatCount="1" dur="3s" begin="0s"/> </stop> - + <stop offset="0.8" stop-color="transparent"> <animate attributeName="offset" values="0;0.8" repeatCount="1" dur="3s" begin="0s"/> </stop> @@ -654,7 +654,7 @@ export const StatusIndicatorRadialFilling = () => ` <stop offset="0.3" stop-color="white"> <animate attributeName="offset" values="0;0.8" repeatCount="1" dur="5s" begin="0s"/> </stop> - + <stop offset="0.3" stop-color="transparent"> <animate attributeName="offset" values="0;0.8" repeatCount="1" dur="5s" begin="0s"/> </stop> @@ -688,7 +688,7 @@ export const StatusIndicatorRadialFilling = () => ` <stop offset="0.3" stop-color="white"> <animate attributeName="offset" values="0;0.8" repeatCount="1" dur="5s" begin="0s"/> </stop> - + <stop offset="0.3" stop-color="transparent"> <animate attributeName="offset" values="0;0.8" repeatCount="1" dur="5s" begin="0s"/> </stop> @@ -733,7 +733,7 @@ export const StatusIndicatorAngularFilling = () => ` <stop offset="0.8" stop-color="white"> <animate attributeName="offset" values="0;0.8" repeatCount="1" dur="3s" begin="0s"/> </stop> - + <stop offset="0.8" stop-color="transparent"> <animate attributeName="offset" values="0;0.8" repeatCount="1" dur="3s" begin="0s"/> </stop> @@ -771,7 +771,7 @@ export const StatusIndicatorAngularFilling = () => ` <stop offset="0.5" stop-color="white"> <animate attributeName="offset" values="0;0.5" repeatCount="1" dur="3s" begin="0s"/> </stop> - + <stop offset="0.5" stop-color="transparent"> <animate attributeName="offset" values="0;0.5" repeatCount="1" dur="3s" begin="0s"/> </stop> @@ -809,7 +809,7 @@ export const StatusIndicatorAngularFilling = () => ` <stop offset="0.5" stop-color="white"> <animate attributeName="offset" values="0;0.5" repeatCount="1" dur="3s" begin="0s"/> </stop> - + <stop offset="0.5" stop-color="transparent"> <animate attributeName="offset" values="0;0.5" repeatCount="1" dur="3s" begin="0s"/> </stop> @@ -847,7 +847,7 @@ export const StatusIndicatorAngularFilling = () => ` <stop offset="0.4" stop-color="white"> <animate attributeName="offset" values="0;0.4" repeatCount="1" dur="3s" begin="0s"/> </stop> - + <stop offset="0.4" stop-color="transparent"> <animate attributeName="offset" values="0;0.4" repeatCount="1" dur="3s" begin="0s"/> </stop> diff --git a/stories/step-input/step-input.stories.js b/stories/step-input/step-input.stories.js index 38995073cc..0978ed24cc 100644 --- a/stories/step-input/step-input.stories.js +++ b/stories/step-input/step-input.stories.js @@ -14,14 +14,14 @@ The step input control allows the user to change the input values in predefined - The user needs to enter a static number (for example, postal code, phone number, or ID). In this case, use **Input Field** instead. - You want to display a value that rarely needs to be adjusted and does not pertain to a particular step. In this case, use **Input Field** instead. -- You want the user to enter dates and times. In this case, use the **Date Picker** or **Time Picker** pattern instead. - +- You want the user to enter dates and times. In this case, use the **Date Picker** or **Time Picker** pattern instead. + `, components: ['button', 'icon', 'form-item', 'step-input', 'form-label', 'input'] } }; -export const primary = () => `<label class="fd-form-label" for="step-3">Default Step Input</label><br /> +export const Primary = () => `<label class="fd-form-label" for="step-3">Default Step Input</label><br /> <div class="fd-step-input"> <button aria-label="Step down" class=" fd-button @@ -31,7 +31,7 @@ export const primary = () => `<label class="fd-form-label" for="step-3">Default </button> <input class="fd-input fd-input--no-number-spinner fd-step-input__input" id="step-3" type="number" value="0" /> <button aria-label="Step up" class=" - fd-button + fd-button fd-button--transparent fd-step-input__button" onclick="stepInputValue('step-3', 'up');" tabindex="-1" type="button"> <i class="sap-icon--add"></i> @@ -39,8 +39,8 @@ export const primary = () => `<label class="fd-form-label" for="step-3">Default </div> `; -primary.storyName = 'Default'; -primary.parameters = { +Primary.storyName = 'Default'; +Primary.parameters = { docs: { iframeHeight: 300, storyDescription: `The default step input displays an input field with a plus and minus icon on opposing sides to either increase or decrease the value. It is displayed in cozy mode, which is ideal for mobile and tablet screens. @@ -48,7 +48,7 @@ primary.parameters = { } }; -export const compact = () => `<label class="fd-form-label" for="step-1">Compact Step Input</label><br /> +export const Compact = () => `<label class="fd-form-label" for="step-1">Compact Step Input</label><br /> <div class="fd-form-item fd-form-item--horizontal"> <div class="fd-step-input fd-step-input--compact"> <button aria-label="Step down" class=" @@ -61,17 +61,17 @@ export const compact = () => `<label class="fd-form-label" for="step-1">Compact <i class="sap-icon--less"></i> </button> <input class=" - fd-input - fd-input--compact - fd-input--no-number-spinner + fd-input + fd-input--compact + fd-input--no-number-spinner fd-step-input__input " id="step-1" type="number" value="0"> <button aria-label="Step up" class=" - fd-button + fd-button fd-button--compact fd-button--transparent fd-step-input__button" - onclick="stepInputValue('step-1', 'up');" + onclick="stepInputValue('step-1', 'up');" tabindex="-1" type="button"> <i class="sap-icon--add"></i> </button> @@ -80,8 +80,7 @@ export const compact = () => `<label class="fd-form-label" for="step-1">Compact </div> `; -compact.storyName = 'Compact'; -compact.parameters = { +Compact.parameters = { docs: { iframeHeight: 300, storyDescription: `The step input can be displayed in compact mode, which is ideal for desktop screens. To display a compact step input, add the \`--compact\` modifier class to the main element, as well as the button and input elements. @@ -89,7 +88,7 @@ compact.parameters = { } }; -export const states = () => `<label class="fd-form-label" for="step-5">Success Step Input</label><br /> +export const States = () => `<label class="fd-form-label" for="step-5">Success Step Input</label><br /> <div class="fd-step-input is-success"> <button aria-label="Step down" class=" fd-button @@ -100,15 +99,15 @@ export const states = () => `<label class="fd-form-label" for="step-5">Success S <i class="sap-icon--less"></i> </button> <input class=" - fd-input - fd-input--no-number-spinner + fd-input + fd-input--no-number-spinner fd-step-input__input " id="step-5" type="number" value="0"> <button aria-label="Step up" class=" - fd-button + fd-button fd-button--transparent fd-step-input__button" - onclick="stepInputValue('step-5', 'up');" + onclick="stepInputValue('step-5', 'up');" tabindex="-1" type="button"> <i class="sap-icon--add"></i> </button> @@ -126,15 +125,15 @@ export const states = () => `<label class="fd-form-label" for="step-5">Success S <i class="sap-icon--less"></i> </button> <input class=" - fd-input - fd-input--no-number-spinner + fd-input + fd-input--no-number-spinner fd-step-input__input " id="step-6" type="number" value="0"> <button aria-label="Step up" class=" - fd-button + fd-button fd-button--transparent fd-step-input__button" - onclick="stepInputValue('step-6', 'up');" + onclick="stepInputValue('step-6', 'up');" tabindex="-1" type="button"> <i class="sap-icon--add"></i> </button> @@ -151,15 +150,15 @@ export const states = () => `<label class="fd-form-label" for="step-5">Success S <i class="sap-icon--less"></i> </button> <input class=" - fd-input - fd-input--no-number-spinner + fd-input + fd-input--no-number-spinner fd-step-input__input " id="step-7" type="number" value="0"> <button aria-label="Step up" class=" - fd-button + fd-button fd-button--transparent fd-step-input__button" - onclick="stepInputValue('step-7', 'up');" + onclick="stepInputValue('step-7', 'up');" tabindex="-1" type="button"> <i class="sap-icon--add"></i> </button> @@ -178,23 +177,22 @@ export const states = () => `<label class="fd-form-label" for="step-5">Success S <i class="sap-icon--less"></i> </button> <input class=" - fd-input - fd-input--no-number-spinner + fd-input + fd-input--no-number-spinner fd-step-input__input " id="step-8" type="number" value="0"> <button aria-label="Step up" class=" - fd-button + fd-button fd-button--transparent fd-step-input__button" - onclick="stepInputValue('step-8', 'up');" + onclick="stepInputValue('step-8', 'up');" tabindex="-1" type="button"> <i class="sap-icon--add"></i> </button> </div> `; -states.storyName = 'States'; -states.parameters = { +States.parameters = { docs: { iframeHeight: 300, storyDescription: `Step input can be displayed in various states such as Success, Information, Error and Warning. @@ -207,12 +205,12 @@ Success | \`is-success\` Information | \`is-information\` Error | \`is-error\` Warning | \`is-warning\` - + ` } }; -export const focused = () => `<label class="fd-form-label" for="step-20">Focused Step Input</label><br /> +export const Focused = () => `<label class="fd-form-label" for="step-20">Focused Step Input</label><br /> <div class="fd-step-input is-focus"> <button aria-label="Step down" class=" fd-button @@ -223,23 +221,22 @@ export const focused = () => `<label class="fd-form-label" for="step-20">Focused <i class="sap-icon--less"></i> </button> <input class=" - fd-input - fd-input--no-number-spinner + fd-input + fd-input--no-number-spinner fd-step-input__input " id="step-20" type="number" value="0"> <button aria-label="Step up" class=" - fd-button + fd-button fd-button--transparent fd-step-input__button" - onclick="stepInputValue('step-20', 'up');" + onclick="stepInputValue('step-20', 'up');" tabindex="-1" type="button"> <i class="sap-icon--add"></i> </button> </div> `; -focused.storyName = 'Focused'; -focused.parameters = { +Focused.parameters = { docs: { iframeHeight: 300, storyDescription: `By default, step input has a built-in focused state, however; it is not supported by IE11. To enable the focused state on IE11, add the \`is-focus\` class to the main element. @@ -247,7 +244,7 @@ focused.parameters = { } }; -export const disabled = () => `<label class="fd-form-label" for="step-13">Disabled Step Input</label><br /> +export const Disabled = () => `<label class="fd-form-label" for="step-13">Disabled Step Input</label><br /> <div class="fd-step-input is-disabled"> <button aria-label="Step down" class=" fd-button @@ -258,23 +255,22 @@ export const disabled = () => `<label class="fd-form-label" for="step-13">Disabl <i class="sap-icon--less"></i> </button> <input class=" - fd-input - fd-input--no-number-spinner + fd-input + fd-input--no-number-spinner fd-step-input__input " id="step-13" type="number" value="0" disabled> <button aria-label="Step up" class=" - fd-button + fd-button fd-button--transparent fd-step-input__button" - onclick="stepInputValue('step-13', 'up');" + onclick="stepInputValue('step-13', 'up');" tabindex="-1" type="button"> <i class="sap-icon--add"></i> </button> </div> `; -disabled.storyName = 'Disabled'; -disabled.parameters = { +Disabled.parameters = { docs: { iframeHeight: 300, storyDescription: `Step input can be disabled by adding the \`is-disabled\` class to the main element. @@ -282,7 +278,7 @@ disabled.parameters = { } }; -export const readOnly = () => `<label class="fd-form-label" for="step-14">Temperature set to</label><br /> +export const ReadOnly = () => `<label class="fd-form-label" for="step-14">Temperature set to</label><br /> <div class="fd-form-item fd-form-item--horizontal"> <div class="fd-step-input is-readonly"> <button aria-label="Step down" class=" @@ -294,15 +290,15 @@ export const readOnly = () => `<label class="fd-form-label" for="step-14">Temper <i class="sap-icon--less"></i> </button> <input class=" - fd-input - fd-input--no-number-spinner + fd-input + fd-input--no-number-spinner fd-step-input__input " id="step-14" type="number" readonly value="23"> <button aria-label="Step up" class=" - fd-button + fd-button fd-button--transparent fd-step-input__button" - onclick="stepInputValue('step-14', 'up');" + onclick="stepInputValue('step-14', 'up');" tabindex="-1" type="button"> <i class="sap-icon--add"></i> </button> @@ -311,8 +307,8 @@ export const readOnly = () => `<label class="fd-form-label" for="step-14">Temper </div> `; -readOnly.storyName = 'Read-only'; -readOnly.parameters = { +ReadOnly.storyName = 'Read-only'; +ReadOnly.parameters = { docs: { iframeHeight: 300, storyDescription: `Step input can be displayed as read-only by adding the \`is-readonly\` class to the main element. diff --git a/stories/switch/switch.stories.js b/stories/switch/switch.stories.js index ef0567fb61..9a91398dfb 100644 --- a/stories/switch/switch.stories.js +++ b/stories/switch/switch.stories.js @@ -7,25 +7,25 @@ The switch mimics a physical switch, allowing users to set individual features ( ##Usage **Use the switch if:** - + - You want to enable users to set something as active or inactive (for example, within a **Dialog**). - You need to clearly show the mode or state of a setting. - The change takes immediate effect. **Do not use the switch if:** - + - The user has to choose several options or perform extra steps for changes to become effective. - The setting requires a confirmation action or _Submit_ button before it can take effect. In this case, use a **Checkbox** instead. - It’s not clear if the control is showing a state or an action. In this case, use a **Checkbox** instead. - + `, components: ['form-label', 'switch', 'icon', 'form'] } }; -export const basic = () => ` +export const Basic = () => ` <div class="fd-form-group"> <div class="fd-form-item"> <div class="fd-form-label" id="label1">Default (Cozy) Switch</div> @@ -82,8 +82,8 @@ export const basic = () => ` </div> `; -basic.storyName = 'Default'; -basic.parameters = { +Basic.storyName = 'Default'; +Basic.parameters = { docs: { iframeHeight: 350, storyDescription: `The default switch displays what resembles a physical switch that toggles between an active and inactive state. It is displayed in cozy mode, which is ideal for mobile and small tablet screens. The switch should always be accompanied by a label that indicates its purpose. @@ -91,12 +91,12 @@ basic.parameters = { } }; -export const withText = () => ` +export const WithText = () => ` <div class="fd-form-group"> <div class="fd-form-item"> <div class="fd-form-label" id="label3">With inline text (off)</div> <label class="fd-switch"> - <span class="fd-switch__text">Off</span> + <span class="fd-switch__text">Off</span> <span class="fd-switch__control"> <input class="fd-switch__input" type="checkbox" name="" aria-labelledby="label3" value="" id="y21Y677251"> <div class="fd-switch__slider"> @@ -110,7 +110,7 @@ export const withText = () => ` <div class="fd-form-item"> <div class="fd-form-label" id="label4">With inline text (on)</div> <label class="fd-switch"> - <span class="fd-switch__text">On</span> + <span class="fd-switch__text">On</span> <span class="fd-switch__control"> <input class="fd-switch__input" checked type="checkbox" aria-labelledby="label4" name="" value="" id="y21653431"> <div class="fd-switch__slider"> @@ -124,7 +124,7 @@ export const withText = () => ` <div class="fd-form-item"> <div class="fd-form-label" id="label9">Disabled with inline text (on)</div> <label class="fd-switch is-disabled"> - <span class="fd-switch__text">On</span> + <span class="fd-switch__text">On</span> <span class="fd-switch__control"> <input class="fd-switch__input" checked type="checkbox" aria-labelledby="label9" name="" value="" id="y29653431"> <div class="fd-switch__slider"> @@ -137,8 +137,8 @@ export const withText = () => ` </div> </div>`; -withText.storyName = 'Optional text'; -withText.parameters = { +WithText.storyName = 'Optional text'; +WithText.parameters = { docs: { iframeHeight: 350, storyDescription: `As mentioned in the previous example, a switch should always be accompanied by a label. @@ -148,7 +148,7 @@ withText.parameters = { } }; -export const semanticSwitch = () => ` +export const SemanticSwitch = () => ` <div class="fd-form-group"> <div class="fd-form-item"> <label class="fd-form-label" id="label5">Semantic switch</label> @@ -182,8 +182,8 @@ export const semanticSwitch = () => ` </div> </div>`; -semanticSwitch.storyName = 'States'; -semanticSwitch.parameters = { +SemanticSwitch.storyName = 'States'; +SemanticSwitch.parameters = { docs: { iframeHeight: 350, storyDescription: `The switch can be displayed with semantic colors, such as green for active and red for inactive. To display a semantic switch, add the \`fd-switch—semantic\` modifier class to the main element. diff --git a/stories/table/table.stories.js b/stories/table/table.stories.js index b1847a8208..718dbb7fc1 100644 --- a/stories/table/table.stories.js +++ b/stories/table/table.stories.js @@ -10,7 +10,7 @@ To display large amounts of data in tabular form, several table components are p - Desktop-centric tables -##Usage +##Usage **Use the responsive table if:** - The table content should be flexible and visually appealing. The responsive table offers the most flexibility in regards to its content because multiple components can be used. In addition, different rows can be based on different item templates. @@ -68,7 +68,7 @@ In these cases, use the **Tree** instead. } }; -export const primary = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> +export const Primary = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4 style="margin: 0;">Default Table</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> </div> @@ -124,8 +124,7 @@ export const primary = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolba </table> `; -primary.storyName = 'Primary'; -primary.parameters = { +Primary.parameters = { docs: { storyDescription: ` The primary table contains columns with headers, and rows with links. In the first column, links are displayed. To display links within a table, add the \`fd-link\` class within the table data. @@ -133,7 +132,7 @@ The primary table contains columns with headers, and rows with links. In the fir } }; -export const borderless = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> +export const Borderless = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4 style="margin: 0;">Table Without Borders</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> </div> @@ -169,19 +168,18 @@ export const borderless = () => `<div class="fd-toolbar fd-toolbar--solid fd-too </table> `; -borderless.storyName = 'Borderless'; -borderless.parameters = { +Borderless.parameters = { docs: { storyDescription: ` Table can be displayed without borders that separate the columns, column headers, and rows. To display a borderless table, add the \`fd-table--no-horizontal-borders\` and \`fd-table--no-vertical-borders\` modifier classes to the main element. **Note:** You can remove borders on individual cells by adding the above-mentioned modifier classes to them only. - + ` } }; -export const borderlessbody = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> +export const Borderlessbody = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4 style="margin: 0;">Table Without Borders On Body</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> </div> @@ -217,8 +215,8 @@ export const borderlessbody = () => `<div class="fd-toolbar fd-toolbar--solid fd </table> `; -borderlessbody.storyName = 'Borderless (body)'; -borderlessbody.parameters = { +Borderlessbody.storyName = 'Borderless (body)'; +Borderlessbody.parameters = { docs: { storyDescription: ` Table can be displayed without borders that separate the columns and rows only, leaving the column headers with borders. To display a borderless table body, add the \`fd-table--no-horizontal-borders\` and \`fd-table--no-vertical-borders\` modifier classes to the body element. @@ -226,7 +224,7 @@ Table can be displayed without borders that separate the columns and rows only, } }; -export const noOuterBorder = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> +export const NoOuterBorder = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4 style="margin: 0;">Table Without Outer Borders</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> </div> @@ -262,8 +260,8 @@ export const noOuterBorder = () => `<div class="fd-toolbar fd-toolbar--solid fd- </table> `; -noOuterBorder.storyName = 'No outer Border'; -noOuterBorder.parameters = { +NoOuterBorder.storyName = 'No outer Border'; +NoOuterBorder.parameters = { docs: { storyDescription: ` Table can be displayed without outer borders, might be needed when used inside some other element. To display a table without outer border, add the \`fd-table--no-outer-border\` modifier class to the main element. @@ -271,7 +269,7 @@ Table can be displayed without outer borders, might be needed when used inside s } }; -export const footer = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> +export const Footer = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4 style="margin: 0;">Table With Footer Cozy Mode</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> </div> @@ -314,8 +312,7 @@ export const footer = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar </tfoot> </table>`; -footer.storyName = 'Footer'; -footer.parameters = { +Footer.parameters = { docs: { storyDescription: ` Table can be displayed with a footer. To display a table footer, add the \`fd-table__footer\` class with a \`tfoot\` element. It must contain the same amount and size of columns as the table head and body containers. @@ -323,7 +320,7 @@ Table can be displayed with a footer. To display a table footer, add the \`fd-ta } }; -export const compactFooter = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> +export const CompactFooter = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4 style="margin: 0;">Table With Footer Compact Mode</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> </div> @@ -367,8 +364,8 @@ export const compactFooter = () => `<div class="fd-toolbar fd-toolbar--solid fd- </table> `; -compactFooter.storyName = 'Footer (compact)'; -compactFooter.parameters = { +CompactFooter.storyName = 'Footer (compact)'; +CompactFooter.parameters = { docs: { storyDescription: ` Table can be displayed with a footer in compact mode, which is ideal for larger desktop screens. To display a compact table, add the \`fd-table--compact\` modifier class to the main element. @@ -376,7 +373,7 @@ Table can be displayed with a footer in compact mode, which is ideal for larger } }; -export const condensedFooter = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> +export const CondensedFooter = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4 style="margin: 0;">Table With Footer Condensed Mode</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> </div> @@ -420,8 +417,8 @@ export const condensedFooter = () => `<div class="fd-toolbar fd-toolbar--solid f </table> `; -condensedFooter.storyName = 'Footer (condensed)'; -condensedFooter.parameters = { +CondensedFooter.storyName = 'Footer (condensed)'; +CondensedFooter.parameters = { docs: { storyDescription: ` Similar to the previous example, table can be displayed with a footer in condensed mode (for desktop screens). To display a condensed table, add the \`fd-table--condensed\` modifier class to the main element. @@ -429,7 +426,7 @@ Similar to the previous example, table can be displayed with a footer in condens } }; -export const interactive = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> +export const Interactive = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4 style="margin: 0;">Interactive Table With Hoverable and Activable Cells and Rows</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> </div> @@ -490,21 +487,20 @@ export const interactive = () => `<div class="fd-toolbar fd-toolbar--solid fd-to </table> `; -interactive.storyName = 'Interactive'; -interactive.parameters = { +Interactive.parameters = { docs: { storyDescription: ` -The table component can be interactive with hoverable and activable cells and rows. +The table component can be interactive with hoverable and activable cells and rows. Interaction | Modifier class :------------- | :------------------ Activate | \`--activable\` -Hover | \`--hoverable\` +Hover | \`--hoverable\` ` } }; -export const semanticRows = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> +export const SemanticRows = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4 style="margin: 0;">Table with Semantic Rows</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> </div> @@ -588,7 +584,7 @@ export const semanticRows = () => `<div class="fd-toolbar fd-toolbar--solid fd-t <td class="fd-table__cell">First Name</td> <td class="fd-table__cell">Last Name</td> <td class="fd-table__cell fd-table__cell--error">01/26/17</td> - </tr> + </tr> <tr class="fd-table__row"> <td class="fd-table__cell fd-table__cell--status-indicator"></td> <td class="fd-table__cell fd-table__cell--checkbox"> @@ -610,7 +606,7 @@ export const semanticRows = () => `<div class="fd-toolbar fd-toolbar--solid fd-t <td class="fd-table__cell">First Name</td> <td class="fd-table__cell">Last Name</td> <td class="fd-table__cell fd-table__cell--information">01/26/17</td> - </tr> + </tr> <tr class="fd-table__row"> <td class="fd-table__cell fd-table__cell--status-indicator"></td> <td class="fd-table__cell fd-table__cell--checkbox"> @@ -621,30 +617,30 @@ export const semanticRows = () => `<div class="fd-toolbar fd-toolbar--solid fd-t <td class="fd-table__cell">First Name</td> <td class="fd-table__cell">Last Name</td> <td class="fd-table__cell">01/26/17</td> - </tr> + </tr> </tbody> </table> `; -semanticRows.storyName = 'Semantic'; -semanticRows.parameters = { +SemanticRows.storyName = 'Semantic'; +SemanticRows.parameters = { docs: { storyDescription: ` -The table component can display highlight indicators to classify certain items with semantic states. To display status indicators in table, add the \`fd-table__cell--status-indicator\` modifier class to each row. +The table component can display highlight indicators to classify certain items with semantic states. To display status indicators in table, add the \`fd-table__cell--status-indicator\` modifier class to each row. **To display semantic highlight indicators, add the following modifier classes to \`fd-table__cell--status-indicator\`:** - + Semantic states | Modifier class :-------------------- | :----------------- Valid | \`--valid\` Warning | \`--warning\` Error | \`--error\` -Information | \`--information\` +Information | \`--information\` ` } }; -export const focusableRows = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> +export const FocusableRows = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4 style="margin: 0;">Table With Focusable Rows</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> </div> @@ -684,16 +680,16 @@ export const focusableRows = () => `<div class="fd-toolbar fd-toolbar--solid fd- </table> `; -focusableRows.storyName = 'Focusable rows'; -focusableRows.parameters = { +FocusableRows.storyName = 'Focusable rows'; +FocusableRows.parameters = { docs: { storyDescription: ` -Table can display focusable rows by adding the \`fd-table__row--focusable\` modifier class and a valid \`tabindex\` to the rows. It is not recommended to use focusable rows simultaneously with focusable cells. +Table can display focusable rows by adding the \`fd-table__row--focusable\` modifier class and a valid \`tabindex\` to the rows. It is not recommended to use focusable rows simultaneously with focusable cells. ` } }; -export const focusableCells = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> +export const FocusableCells = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4 style="margin: 0;">Table With Focusable Cells</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> </div> @@ -733,8 +729,8 @@ export const focusableCells = () => `<div class="fd-toolbar fd-toolbar--solid fd </table> `; -focusableCells.storyName = 'Focusable cells'; -focusableCells.parameters = { +FocusableCells.storyName = 'Focusable cells'; +FocusableCells.parameters = { docs: { storyDescription: ` Table can display focusable cells by adding the \`fd-table__cell--focusable\` modifier class and a valid \`tabindex\` to the cells. It is not recommended to use focusable cells simultaneously with focusable rows. @@ -742,7 +738,7 @@ Table can display focusable cells by adding the \`fd-table__cell--focusable\` mo } }; -export const checkbox = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> +export const Checkbox = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4 style="margin: 0;">Table With Checkbox Cozy Mode</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> </div> @@ -794,8 +790,7 @@ export const checkbox = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolb </table> `; -checkbox.storyName = 'Checkbox'; -checkbox.parameters = { +Checkbox.parameters = { docs: { storyDescription: ` Table can display checkboxes to allow the user to perform bulk actions. @@ -806,7 +801,7 @@ Also recommended to add class \`fd-table__checkbox\` to the checkbox (input) and } }; -export const compactCheckbox = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> +export const CompactCheckbox = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4 style="margin: 0;">Table With Checkbox Compact Mode</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> </div> @@ -858,19 +853,19 @@ export const compactCheckbox = () => `<div class="fd-toolbar fd-toolbar--solid f </table> `; -compactCheckbox.storyName = 'Checkbox (compact)'; -compactCheckbox.parameters = { +CompactCheckbox.storyName = 'Checkbox (compact)'; +CompactCheckbox.parameters = { docs: { storyDescription: ` Table can be displayed with checkboxes in compact mode. To display checkboxes in table, add the \`fd-table__cell--checkbox\` modifier class to the appropriate cell. It is recommended to add the parameter \`aria-selected="true"\` to the row that is selected. -To display the table in compact mode, add the \`fd-table--compact\` modifier class to the table element. +To display the table in compact mode, add the \`fd-table--compact\` modifier class to the table element. ` } }; -export const condensedCheckbox = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> +export const CondensedCheckbox = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4 style="margin: 0;">Table With Checkbox Condensed Mode</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> </div> @@ -922,8 +917,8 @@ export const condensedCheckbox = () => `<div class="fd-toolbar fd-toolbar--solid </table> `; -condensedCheckbox.storyName = 'Checkbox (condensed)'; -condensedCheckbox.parameters = { +CondensedCheckbox.storyName = 'Checkbox (condensed)'; +CondensedCheckbox.parameters = { docs: { storyDescription: ` Table can be displayed with checkboxes in condensed mode. To display checkboxes in table, add the \`fd-table__cell--checkbox\` modifier class to the appropriate cell. It is recommended to add the parameter \`aria-selected="true"\` to the row that is selected. @@ -934,7 +929,7 @@ To display the table in condensed mode, add the \`fd-table--condensed\` modifier } }; -export const pagination = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> +export const Pagination = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4 style="margin: 0;">Table With Pagination at The Bottom</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> </div> @@ -986,48 +981,47 @@ export const pagination = () => `<div class="fd-toolbar fd-toolbar--solid fd-too <a href='#' class='fd-button fd-button--compact fd-button--transparent fd-pagination__button fd-pagination__button--mobile' aria-label='First' aria-disabled='false'> <i class='sap-icon sap-icon--media-rewind'></i> </a> - + <a href='#' class='fd-button fd-button--compact fd-button--transparent fd-pagination__button' aria-label='Previous' aria-disabled='false'> <i class='sap-icon sap-icon--navigation-left-arrow'></i> </a> - + <a href='#' class='fd-button fd-button--compact fd-button--transparent fd-pagination__link'>1</a> - + <label class='fd-form-label fd-pagination__label' for='secondPageInput'>Page:</label> - + <input id='secondPageInput' class='fd-input fd-input--compact fd-pagination__input' type='number' min='1' max='10' value='2' required /> - + <a href='#' class='fd-button fd-button--compact fd-button--transparent fd-pagination__link'>3</a> <span class='fd-pagination__more' role='presentation'></span> <a href='#' class='fd-button fd-button--compact fd-button--transparent fd-pagination__link'>10</a> - + <a href='#' class='fd-button fd-button--compact fd-button--transparent fd-pagination__button' aria-label='Next' aria-disabled='false'> <i class='sap-icon sap-icon--navigation-right-arrow'></i> </a> - + <a href='#' class='fd-button fd-button--compact fd-button--transparent fd-pagination__button fd-pagination__button--mobile' aria-label='Last' aria-disabled='false'> <i class='sap-icon sap-icon--media-forward'></i> </a> </nav> - + <div class='fd-pagination__total'> <span class='fd-form-label fd-pagination__total-label'>30 Results</span> </div> </div> `; -pagination.storyName = 'Pagination'; -pagination.parameters = { +Pagination.parameters = { docs: { storyDescription: ` -Table can be displayed with bottom pagination by adding the \`fd-pagination\` class after the table. +Table can be displayed with bottom pagination by adding the \`fd-pagination\` class after the table. ` } }; -export const advancedToolbar = () => `<div class="fd-dialog" id="filter-dialog-example"> +export const AdvancedToolbar = () => `<div class="fd-dialog" id="filter-dialog-example"> <section class="fd-dialog__content" role="dialog" aria-modal="true" aria-labelledby="dialog-filter"> <header class="fd-dialog__header fd-bar"> <div class="fd-bar__left"> @@ -1094,7 +1088,7 @@ export const advancedToolbar = () => `<div class="fd-dialog" id="filter-dialog-e </div> <div class="fd-bar__element fd-bar__element--full-width"> <div class="fd-input-group"> - <input aria-labelledby="dialog-settings" + <input aria-labelledby="dialog-settings" class="fd-input fd-input-group__input fd-input--compact" type="text" placeholder="Search..."> <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--compact"> <button aria-label="navigation" @@ -1208,16 +1202,16 @@ export const advancedToolbar = () => `<div class="fd-dialog" id="filter-dialog-e </table> `; -advancedToolbar.storyName = 'Advanced toolbar'; -advancedToolbar.parameters = { +AdvancedToolbar.storyName = 'Advanced toolbar'; +AdvancedToolbar.parameters = { docs: { storyDescription: ` -The table component can be displayed with an advanced **Toolbar**, which allows users to customize their table. In this example, buttons trigger **Dialogs**. To display an advanced toolbar, pair \`fd-dialog\` components with an \`fd-toolbar\` component. +The table component can be displayed with an advanced **Toolbar**, which allows users to customize their table. In this example, buttons trigger **Dialogs**. To display an advanced toolbar, pair \`fd-dialog\` components with an \`fd-toolbar\` component. ` } }; -export const contextualMenu = () => `<div style="min-height: 400px"> +export const ContextualMenu = () => `<div style="min-height: 400px"> <div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4 style="margin: 0;">Table with Contextual Menu</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> @@ -1343,8 +1337,8 @@ export const contextualMenu = () => `<div style="min-height: 400px"> </div> `; -contextualMenu.storyName = 'Contextual menu'; -contextualMenu.parameters = { +ContextualMenu.storyName = 'Contextual menu'; +ContextualMenu.parameters = { docs: { storyDescription: ` Table can display a contextual menu containing actions if there is not enough space in a given row. It is recommended to use a contextual menu if there are more than three actions. To display table with a contextual menu, add the \`fd-popover\` component to any given cell. See **Popover** for more details. @@ -1352,7 +1346,7 @@ Table can display a contextual menu containing actions if there is not enough sp } }; -export const menuHeader = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> +export const MenuHeader = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4 style="margin: 0;">Table with Popover in Headers</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> </div> @@ -1440,8 +1434,8 @@ export const menuHeader = () => `<div class="fd-toolbar fd-toolbar--solid fd-too </table> `; -menuHeader.storyName = 'Menu header'; -menuHeader.parameters = { +MenuHeader.storyName = 'Menu header'; +MenuHeader.parameters = { docs: { storyDescription: ` Table can display menu options from a popover within headers. The example below demonstrates headers containing customization actions such as _Ascending_ and _Descending_. To display a menu within a header, add the \`fd-table__popover\` class to the header cells. @@ -1449,7 +1443,7 @@ Table can display menu options from a popover within headers. The example below } }; -export const fixColumnHeader = () => `<style> +export const FixColumnHeader = () => `<style> .fd-table--fixed { padding-left: 200px; } @@ -1457,9 +1451,9 @@ export const fixColumnHeader = () => `<style> [dir=rtl] .fd-table--fixed, .fd-table--fixed[dir=rtl] { padding-left: 0; - padding-right: 200px; + padding-right: 200px; } - + .fd-table--fixed .fd-table__cell { min-width: 200px; max-width: 200px; @@ -1533,13 +1527,13 @@ export const fixColumnHeader = () => `<style> </div> `; -fixColumnHeader.storyName = 'Fixed header'; -fixColumnHeader.parameters = { +FixColumnHeader.storyName = 'Fixed header'; +FixColumnHeader.parameters = { docs: { storyDescription: ` Table can display columns with a fixed header. To display fixed headers, wrap the table with the \`fd-table--fixed\` modifier class. -In addition, add the \`fd-table__cell--fixed\` modifier class to each cell element, it should be propagated to the entire row. +In addition, add the \`fd-table__cell--fixed\` modifier class to each cell element, it should be propagated to the entire row. Then apply \`.fd-table__cell--fixed-last\` to every last fixed cell in every column to have special border after the fixed columns. It’s important to hardcode the width of the columns, otherwise the cells will be squished. @@ -1547,7 +1541,7 @@ It’s important to hardcode the width of the columns, otherwise the cells will } }; -export const navIcon = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> +export const NavIcon = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4>Responsive Table - row navigation</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> </div> @@ -1667,18 +1661,18 @@ export const navIcon = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolba </table> `; -navIcon.storyName = 'Navigation from table rows'; -navIcon.parameters = { +NavIcon.storyName = 'Navigation from table rows'; +NavIcon.parameters = { docs: { storyDescription: ` -Responsive table allows navigation from a line item. For that purpose you need to add a column with the icon \`sap-icon--slim-arrow-right\` at the end. The entire line needs to be clickable +Responsive table allows navigation from a line item. For that purpose you need to add a column with the icon \`sap-icon--slim-arrow-right\` at the end. The entire line needs to be clickable You have an option to add icon button \`sap-icon--navigation-right-arrow\` as a separate column for non responsive table. ` } }; -export const navIndicators = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> +export const NavIndicators = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4>Table with Navigation Indication State</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> </div> @@ -1740,8 +1734,8 @@ export const navIndicators = () => `<div class="fd-toolbar fd-toolbar--solid fd- </table> `; -navIndicators.storyName = 'Navigation indicators'; -navIndicators.parameters = { +NavIndicators.storyName = 'Navigation indicators'; +NavIndicators.parameters = { docs: { storyDescription: ` @@ -1750,7 +1744,7 @@ The table component can display navigation indicators. When multi-selection is u } }; -export const responsiveTable = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> +export const ResponsiveTable = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4 style="margin: 0;">Responsive Table</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> </div> @@ -1823,8 +1817,7 @@ export const responsiveTable = () => `<div class="fd-toolbar fd-toolbar--solid f </tbody> </table>`; -responsiveTable.storyName = 'Responsive Table'; -responsiveTable.parameters = { +ResponsiveTable.parameters = { docs: { storyDescription: ` The desktop responsive table should contain \`fd-table--responsive\` modifier. @@ -1832,7 +1825,7 @@ The desktop responsive table should contain \`fd-table--responsive\` modifier. } }; -export const responsiveTablePopInMode = () => `<div style="max-width: 450px"> +export const ResponsiveTablePopInMode = () => `<div style="max-width: 450px"> <div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active"> <h4 style="margin: 0;">Responsive Table - Pop-in mode</h4> <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span> @@ -1969,21 +1962,21 @@ export const responsiveTablePopInMode = () => `<div style="max-width: 450px"> </div> `; -responsiveTablePopInMode.storyName = 'Responsive Table (pop-in mode)'; -responsiveTablePopInMode.parameters = { +ResponsiveTablePopInMode.storyName = 'Responsive Table (pop-in mode)'; +ResponsiveTablePopInMode.parameters = { docs: { storyDescription: ` The responsive table can be displayed in pop-in mode for mobile and tablet screens. To display responsive table in pop-in mode, add the \`fd-table--pop-in\` modifier class to the main element and remove the borders (see borderless example). In pop-in mode, a row actually contains two rows: - \`fd-table__row--main\` - \`fd-table__row--secondary\` - + **Note:** cells with titles and text should be wrapped in paragraph tags. - + ` } }; -export const gridTable = () => `<table class="fd-table" aria-describedby="FU4EwF6st"> +export const GridTable = () => `<table class="fd-table" aria-describedby="FU4EwF6st"> <caption class="fd-table__caption" id="FU4EwF6st" aria-live="polite"> Inventory Status. Use arrow keys to navigate between cells. </caption> @@ -2265,19 +2258,18 @@ export const gridTable = () => `<table class="fd-table" aria-describedby="FU4EwF </table> `; -gridTable.storyName = 'Grid Table'; -gridTable.parameters = { +GridTable.parameters = { docs: { storyDescription: ` Grid tables can contain various input elements inside of cells, such as checkboxes, input fields, links and drop-down menus. ####Accessibility -Information about the table such as a title, summary, and/or keyboard navigation instructions should be provided in captions for screen readers. To caption table information, use the \`fd-table__caption\` class. +Information about the table such as a title, summary, and/or keyboard navigation instructions should be provided in captions for screen readers. To caption table information, use the \`fd-table__caption\` class. ` } }; -export const noDataTable = () => `<table class="fd-table"> +export const NoDataTable = () => `<table class="fd-table"> <thead class="fd-table__header"> <tr class="fd-table__row"> <th class="fd-table__cell" scope="col"> @@ -2308,8 +2300,8 @@ export const noDataTable = () => `<table class="fd-table"> </table> `; -noDataTable.storyName = 'Table without data'; -noDataTable.parameters = { +NoDataTable.storyName = 'Table without data'; +NoDataTable.parameters = { docs: { storyDescription: ` Table can indicate that there is no data to display. @@ -2317,7 +2309,7 @@ Table can indicate that there is no data to display. } }; -export const groupRowsInTable = () => `<table class="fd-table fd-table--group"> +export const GroupRowsInTable = () => `<table class="fd-table fd-table--group"> <thead class="fd-table__header"> <tr class="fd-table__row"> <th class="fd-table__cell" scope="col"> @@ -2366,8 +2358,8 @@ export const groupRowsInTable = () => `<table class="fd-table fd-table--group"> </table> `; -groupRowsInTable.storyName = 'Table with group rows'; -groupRowsInTable.parameters = { +GroupRowsInTable.storyName = 'Table with group rows'; +GroupRowsInTable.parameters = { docs: { storyDescription: ` Table can have group rows, to get this do the following: @@ -2390,7 +2382,7 @@ Please consider that you need to implement expanding/collapsing functionality by } }; -export const treeRowsTable = () => `<table class="fd-table fd-table--tree"> +export const TreeRowsTable = () => `<table class="fd-table fd-table--tree"> <thead class="fd-table__header"> <tr class="fd-table__row"> <th class="fd-table__cell" scope="col"> @@ -2476,8 +2468,8 @@ export const treeRowsTable = () => `<table class="fd-table fd-table--tree"> </table> `; -treeRowsTable.storyName = 'Tree Table'; -treeRowsTable.parameters = { +TreeRowsTable.storyName = 'Tree Table'; +TreeRowsTable.parameters = { docs: { storyDescription: ` Table can show tree-like rows, to get this do the following: diff --git a/stories/tabs/tabs.stories.js b/stories/tabs/tabs.stories.js index 8f7bbe9cc9..c7c4c73665 100644 --- a/stories/tabs/tabs.stories.js +++ b/stories/tabs/tabs.stories.js @@ -41,7 +41,7 @@ These modifier classes are used to display horizontal padding for tabs in variou }; -export const primary = () => ` +export const Primary = () => ` <ul class="fd-tabs" role="tablist"> <li role="tab" class="fd-tabs__item" aria-controls="fuCwV550"> <a class="fd-tabs__link" href="#fuCwV550"> @@ -79,8 +79,8 @@ export const primary = () => ` </div> `; -primary.storyName = 'Default'; -primary.parameters = { +Primary.storyName = 'Default'; +Primary.parameters = { docs: { iframeHeight: 300, storyDescription: `By default, tabs are displayed in a bar and are either inactive or active (highlighted in blue). The bar can also contain actions that apply to the whole page. The example below illustrates the tabs component in cozy mode with no horizontal padding. @@ -88,7 +88,7 @@ primary.parameters = { } }; -export const tabWithCounters = () => ` +export const TabWithCounters = () => ` <ul class="fd-tabs fd-tabs--xl fd-tabs--compact" role="tablist"> <li role="tab" class="fd-tabs__item" aria-controls="d9vOir"> <a class="fd-tabs__link" href="#d9vOir"> @@ -129,18 +129,18 @@ export const tabWithCounters = () => ` </div> `; -tabWithCounters.storyName = 'Counters'; -tabWithCounters.parameters = { +TabWithCounters.storyName = 'Counters'; +TabWithCounters.parameters = { docs: { iframeHeight: 300, - storyDescription: `Tabs can be displayed with counters to indicate that there are a number of resources the user can or should access. To display counters, wrap the \`fd-tabs__count\` class in paragraph tags below the \`fd-tabs__link\` element. - + storyDescription: `Tabs can be displayed with counters to indicate that there are a number of resources the user can or should access. To display counters, wrap the \`fd-tabs__count\` class in paragraph tags below the \`fd-tabs__link\` element. + In the example below, the tabs component is optimized for an extra-large screen with the \`fd-tabs--xl\` modifier class, which adds 3rem horizontal paddings. ` } }; -export const navTab = () => ` +export const NavTab = () => ` <nav class="fd-tabs fd-tabs--l" role="navigation"> <span class="fd-tabs__item" aria-controls="kf8369"> <a class="fd-tabs__link" href="#kf8369"> @@ -178,8 +178,8 @@ export const navTab = () => ` </div> `; -navTab.storyName = 'Navigable'; -navTab.parameters = { +NavTab.storyName = 'Navigable'; +NavTab.parameters = { docs: { iframeHeight: 300, storyDescription: `Tabs can be navigable by applying the \`role=”navigation”\` attribute to the main element. @@ -188,7 +188,7 @@ navTab.parameters = { }; -export const iconOnly = () => ` +export const IconOnly = () => ` <ul class="fd-tabs fd-tabs--s fd-tabs--icon-only" role="tablist"> <li role="tab" class="fd-tabs__item" aria-controls="pliA92"> <a class="fd-tabs__link" href="#pliA92"> @@ -229,8 +229,8 @@ export const iconOnly = () => ` </div> `; -iconOnly.storyName = 'Icon'; -iconOnly.parameters = { +IconOnly.storyName = 'Icon'; +IconOnly.parameters = { docs: { iframeHeight: 300, storyDescription: `Tabs can display icons instead of text with the \` fd-tabs__icon\` class (see **Icon** for a list of available icons). To display icon tabs without text, you will also need to add the \`fd-tabs--icon-only\` modifier class to the main element. @@ -238,7 +238,7 @@ iconOnly.parameters = { } }; -export const compactIconOnly = () => ` +export const CompactIconOnly = () => ` <ul class="fd-tabs fd-tabs--xl fd-tabs--icon-only fd-tabs--compact" role="tablist"> <li role="tab" class="fd-tabs__item fd-tabs__item--icon-only" aria-controls="0bT4aB"> <a class="fd-tabs__link" href="#0bT4aB"> @@ -279,8 +279,8 @@ export const compactIconOnly = () => ` </div> `; -compactIconOnly.storyName = 'Icon (compact)'; -compactIconOnly.parameters = { +CompactIconOnly.storyName = 'Icon (compact)'; +CompactIconOnly.parameters = { docs: { iframeHeight: 300, storyDescription: `Tabs can be displayed with icons in compact mode. To display compact tabs, add the \`fd-tabs--compact\` modifier class to the main element. See example above on how to display icon tabs. @@ -288,7 +288,7 @@ compactIconOnly.parameters = { } }; -export const processMode = () => ` +export const ProcessMode = () => ` <ul class="fd-tabs fd-tabs--l fd-tabs--process" role="tablist"> <li role="tab" class="fd-tabs__item" aria-controls="NoQLy6"> <a class="fd-tabs__link" href="#NoQLy6"> @@ -340,8 +340,8 @@ export const processMode = () => ` </div> `; -processMode.storyName = 'Process mode'; -processMode.parameters = { +ProcessMode.storyName = 'Process mode'; +ProcessMode.parameters = { docs: { iframeHeight: 300, storyDescription: `Tabs can be displayed in subsequent steps, indicating to the user that there is a process to follow. To display tabs in process mode, add the \`fd-tabs--process\` modifier class to the main element. @@ -349,7 +349,7 @@ processMode.parameters = { } }; -export const compactProcessMode = () => ` +export const CompactProcessMode = () => ` <ul class="fd-tabs fd-tabs--l fd-tabs--process fd-tabs--compact" role="tablist"> <li role="tab" class="fd-tabs__item" aria-controls="LHsxsZ"> <a class="fd-tabs__link" href="#LHsxsZ"> @@ -401,8 +401,8 @@ export const compactProcessMode = () => ` </div> `; -compactProcessMode.storyName = 'Process mode (compact)'; -compactProcessMode.parameters = { +CompactProcessMode.storyName = 'Process mode (compact)'; +CompactProcessMode.parameters = { docs: { iframeHeight: 300, storyDescription: `Tabs can be displayed in subsequent steps while in compact mode. To display compact tabs in process mode, add the \`fd-tabs--process\` and \`fd-tabs--compact\` modifier classes to the main element. @@ -410,7 +410,7 @@ compactProcessMode.parameters = { } }; -export const filterMode = () => ` +export const FilterMode = () => ` <ul class="fd-tabs fd-tabs--l fd-tabs--filter" role="tablist"> <li role="tab" class="fd-tabs__item fd-tabs__item--header" aria-controls="5ZkDVE"> <a class="fd-tabs__link" href="#5ZkDVE"> @@ -466,8 +466,8 @@ export const filterMode = () => ` </div> `; -filterMode.storyName = 'Filter mode'; -filterMode.parameters = { +FilterMode.storyName = 'Filter mode'; +FilterMode.parameters = { docs: { iframeHeight: 300, storyDescription: `Tabs can be displayed in filter mode, indicating to the user that a value has been filtered into separate tabs. To display tabs in filter mode, add the \`fd-tabs--filter\` modifier class to the main element. @@ -475,7 +475,7 @@ filterMode.parameters = { } }; -export const compactFilterMode = () => ` +export const CompactFilterMode = () => ` <ul class="fd-tabs fd-tabs--l fd-tabs--filter fd-tabs--compact" role="tablist"> <li role="tab" class="fd-tabs__item fd-tabs__item--header" aria-controls="YETAv8"> <a class="fd-tabs__link" href="#YETAv8"> @@ -531,8 +531,8 @@ export const compactFilterMode = () => ` </div> `; -compactFilterMode.storyName = 'Filter mode (compact)'; -compactFilterMode.parameters = { +CompactFilterMode.storyName = 'Filter mode (compact)'; +CompactFilterMode.parameters = { docs: { iframeHeight: 300, storyDescription: `Tabs can be displayed in compact mode while in filter mode. To display compact tabs in filter mode, add the \`fd-tabs--filter\` and \`fd-tabs--compact\` modifier classes to the main element. @@ -540,7 +540,7 @@ compactFilterMode.parameters = { } }; -export const semanticMode = () => ` +export const SemanticMode = () => ` <ul class="fd-tabs fd-tabs--l fd-tabs--icon-only fd-tabs--compact" role="tablist"> <li role="tab" class="fd-tabs__item fd-tabs__item--success" aria-controls="XTsSDD"> <a class="fd-tabs__link" href="#XTsSDD"> @@ -603,8 +603,8 @@ export const semanticMode = () => ` </div> `; -semanticMode.storyName = 'Semantic mode'; -semanticMode.parameters = { +SemanticMode.storyName = 'Semantic mode'; +SemanticMode.parameters = { docs: { iframeHeight: 300, storyDescription: `Tabs can be displayed with semantic colors to indicate a status. To display semantic tabs, add the following modifier classes to the \`fd-tabs__item\` elements: @@ -615,13 +615,13 @@ Success | \`fd-tabs__item--success\` Warning | \`fd-tabs__item--warning\` Information | \`fd-tabs__item--information\` Error | \`fd-tabs__item--error\` -Neutral | \`fd-tabs__item--neutral\` +Neutral | \`fd-tabs__item--neutral\` ` } }; -export const semanticFilterMode = () => ` +export const SemanticFilterMode = () => ` <ul class="fd-tabs fd-tabs--l fd-tabs--filter" role="tablist"> <li role="tab" class="fd-tabs__item fd-tabs__item--header" aria-controls="5ZkDVE"> <a class="fd-tabs__link" href="#5ZkDVE"> @@ -689,16 +689,16 @@ export const semanticFilterMode = () => ` </div> `; -semanticFilterMode.storyName = 'Semantic filter mode'; -semanticFilterMode.parameters = { +SemanticFilterMode.storyName = 'Semantic filter mode'; +SemanticFilterMode.parameters = { docs: { iframeHeight: 300, - storyDescription: `Tabs can be displayed in filter mode with semantic colors. As detailed in the previous examples, add the \`fd-tabs--filter\` modifier class to the main element and add the semantic modifier classes to the \`fd-tabs__item\` elements (see **semantic mode** example for modifier class names). + storyDescription: `Tabs can be displayed in filter mode with semantic colors. As detailed in the previous examples, add the \`fd-tabs--filter\` modifier class to the main element and add the semantic modifier classes to the \`fd-tabs__item\` elements (see **semantic mode** example for modifier class names). ` } }; -export const semanticInline = () => ` +export const SemanticInline = () => ` <ul class="fd-tabs fd-tabs--l" role="tablist"> <li role="tab" class="fd-tabs__item fd-tabs__item--error" aria-controls="5abyKZ"> <a class="fd-tabs__link" href="#5abyKZ"> @@ -761,11 +761,11 @@ export const semanticInline = () => ` </div> `; -semanticInline.storyName = 'Semantic inline'; -semanticInline.parameters = { +SemanticInline.storyName = 'Semantic inline'; +SemanticInline.parameters = { docs: { iframeHeight: 300, - storyDescription: `Tabs can be displayed with inline text in semantic colors. To display inline text tabs, add the \`fd-tabs__tag\` class below the \`fd-tabs__link\` element. + storyDescription: `Tabs can be displayed with inline text in semantic colors. To display inline text tabs, add the \`fd-tabs__tag\` class below the \`fd-tabs__link\` element. ` } }; diff --git a/stories/text/text.stories.js b/stories/text/text.stories.js index 7121580f50..a09b95ceb8 100644 --- a/stories/text/text.stories.js +++ b/stories/text/text.stories.js @@ -8,7 +8,7 @@ export default { } }; -export const defaultExample = () => `<p class="fd-text"> +export const DefaultExample = () => `<p class="fd-text"> 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 @@ -16,8 +16,8 @@ export const defaultExample = () => `<p class="fd-text"> deserunt mollit anim id est laborum.</p> `; -defaultExample.storyName = 'Default'; -defaultExample.parameters = { +DefaultExample.storyName = 'Default'; +DefaultExample.parameters = { docs: { iframeHeight: 100, storyDescription: `The default text component can display lines of text that wrap to the next line @@ -25,27 +25,26 @@ defaultExample.parameters = { } }; -export const whitespace = () => ` +export const Whitespace = () => ` <h3>No indents or whitespace</h3> <p class="fd-text"">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.</p> - + <h3>Wrapped text with indents and whitespace</h3> <p class="fd-text fd-text--pre-wrap"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntut labore et -dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut +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.</p> `; -whitespace.storyName = 'Whitespace'; -whitespace.parameters = { +Whitespace.parameters = { docs: { iframeHeight: 300, storyDescription: `The text component has a property that allows browsers to render specified indents and @@ -54,7 +53,7 @@ whitespace.parameters = { } }; -export const maxLines = () => ` +export const MaxLines = () => ` <h3>No max lines rule</h3> <p class="fd-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Malesuada bibendum arcu vitae elementum. Ut etiam sit @@ -71,7 +70,7 @@ export const maxLines = () => ` faucibus. Ut lectus arcu bibendum at varius. Placerat vestibulum lectus mauris ultrices eros in cursus turpis massa. Dolor magna eget est lorem ipsum dolor sit. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Augue neque gravida in fermentum et. Proin fermentum leo vel orci porta non pulvinar.</p> - + <h3>2 max lines</h3> <p class="fd-text fd-text--max-lines" style="-webkit-line-clamp: 2;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do @@ -109,8 +108,8 @@ export const maxLines = () => ` Augue neque gravida in fermentum et. Proin fermentum leo vel orci porta non pulvinar.</p> `; -maxLines.storyName = 'Max lines'; -maxLines.parameters = { +MaxLines.storyName = 'Max lines'; +MaxLines.parameters = { docs: { iframeHeight: 300, storyDescription: `The text component can be displayed with a maximum number of lines. @@ -125,7 +124,7 @@ to \`height\`. For example, \`style="height: 200px;"\`. } }; -export const expand = () => ` +export const Expand = () => ` <h3>Show More</h3> <p class="fd-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore @@ -147,8 +146,7 @@ export const expand = () => ` <a class="fd-link fd-text__link--more" tabindex="0">Less</a> `; -expand.storyName = 'Expand'; -expand.parameters = { +Expand.parameters = { docs: { iframeHeight: 200, storyDescription: `Along with max lines, text component can display "MORE" and "LESS" links that can show @@ -156,7 +154,7 @@ more or less of the text.` } }; -export const hyphenation = () => `<div class="example-container"> +export const Hyphenation = () => `<div class="example-container"> <div class="fddocs-text"> <h3>Without hyphenation</h3> <p class="fd-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt @@ -177,13 +175,12 @@ export const hyphenation = () => `<div class="example-container"> </div> `; -hyphenation.storyName = 'Hyphenation'; -hyphenation.parameters = { +Hyphenation.parameters = { docs: { iframeHeight: 200, storyDescription: `The text component can display words that are broken at appropriate hyphenation points in a text block. To display hyphens, add the \`fd-text--hyphenation\` to the main element. - + **It is also possible to suggest line break opportunities with two Unicode characters that manually specify potential line breakpoints:** diff --git a/stories/textarea/textarea.stories.js b/stories/textarea/textarea.stories.js index 9bc2e65785..c1c9e14e1f 100644 --- a/stories/textarea/textarea.stories.js +++ b/stories/textarea/textarea.stories.js @@ -15,7 +15,7 @@ Do not use the text area if } }; -export const primary = () => ` +export const Primary = () => ` <div class="fd-form-item"> <label class="fd-form-label" for="textarea-1">Text area(cozy):</label> <textarea class="fd-textarea" id="textarea-1" placeholder="Write something here"></textarea> @@ -27,28 +27,28 @@ export const primary = () => ` </div> `; -primary.storyName = 'Content Density - cozy and compact'; -primary.parameters = { +Primary.storyName = 'Content Density - cozy and compact'; +Primary.parameters = { docs: { iframeHeight: 250 } }; -export const counter = () => `<div class="fd-form-item"> +export const Counter = () => `<div class="fd-form-item"> <label class="fd-form-label" for="textarea-2">Compact text area:</label> <textarea class="fd-textarea fd-textarea--compact" id="textarea-2">Pellentesque metus lacus commodo eget justo ut rutrum varius nunc.</textarea> <div class="fd-textarea-counter">150 characters left</div> </div> `; -counter.parameters = { +Counter.parameters = { docs: { iframeHeight: 150, storyDescription: 'A checkbox can appear in two different sizes. In `cozy` mode, it is bigger than it is in `compact` mode. This makes the checkbox easier to select on touch devices.' } }; -export const disabledAndReadOnly = () => ` +export const DisabledAndReadOnly = () => ` <div class="fd-form-item"> <label class="fd-form-label" for="textarea-7">Text area:</label> <textarea class="fd-textarea" id="textarea-7" disabled>Disabled textarea</textarea> @@ -59,14 +59,14 @@ export const disabledAndReadOnly = () => ` </div> `; -disabledAndReadOnly.parameters = { +DisabledAndReadOnly.parameters = { docs: { iframeHeight: 200, storyDescription: 'A checkbox can appear in two different sizes. In `cozy` mode, it is bigger than it is in `compact` mode. This makes the checkbox easier to select on touch devices.' } }; -export const states = () => ` +export const States = () => ` <div class="fd-form-item"> <label class="fd-form-label" for="textarea-3">Success text area:</label> <div class="fd-popover fd-popover--input-message-group"> @@ -117,8 +117,8 @@ export const states = () => ` </div> `; -states.storyName = 'Responsiveness'; -states.parameters = { +States.storyName = 'Responsiveness'; +States.parameters = { docs: { iframeHeight: 500, storyDescription: 'As with any other input component, you can validate the fields and show the result as a value state of the component. Possible value states are error, warning, success, information, or neutral (none).' diff --git a/stories/time-picker/time-picker.stories.js b/stories/time-picker/time-picker.stories.js index 762dc2bb45..224c79ef2b 100644 --- a/stories/time-picker/time-picker.stories.js +++ b/stories/time-picker/time-picker.stories.js @@ -11,7 +11,7 @@ This component mostly relies on the CSS of other components and has no CSS of it } }; -export const cozyAndCompactMode = () => `<div class="fd-container" style="height:550px"> +export const CozyAndCompactMode = () => `<div class="fd-container" style="height:550px"> <div class="fd-row"> <div class="fd-col fd-col--6"> <label for="cozyTimepicker">Cozy Timepicker</label><br /> @@ -226,13 +226,13 @@ export const cozyAndCompactMode = () => `<div class="fd-container" style="height </div> `; -cozyAndCompactMode.parameters = { +CozyAndCompactMode.parameters = { docs: { iframeHeight: 580 } }; -export const tabletMode = () => `<div style="min-height: 580px;"> +export const TabletMode = () => `<div style="min-height: 580px;"> <label for="tabletTimepicker">Cozy Timepicker</label><br /> <div class="fd-popover fd-popover--no-arrow"> <div class="fd-popover__control"> @@ -270,7 +270,7 @@ export const tabletMode = () => `<div style="min-height: 580px;"> <span class="fd-time__unit">01</span> </li> <li class="fd-time__item"> - <span class="fd-time__unit">02</span> + <span class="fd-time__unit">02</span> </li> <li class="fd-time__item"> <span class="fd-time__unit">03</span> @@ -341,7 +341,7 @@ export const tabletMode = () => `<div style="min-height: 580px;"> </div> `; -tabletMode.parameters = { +TabletMode.parameters = { docs: { iframeHeight: 550 } diff --git a/stories/time/time.stories.js b/stories/time/time.stories.js index 90c6953ce4..e34c214482 100644 --- a/stories/time/time.stories.js +++ b/stories/time/time.stories.js @@ -9,7 +9,7 @@ The time component consists of three main styles to indicate a specific state: | Style       | Modifier class | Description | | -------------| :------------- | :-------------- | -| <li class='fd-time__item'><span class='fd-time__unit'>01</span></li> | <code>.fd-time__item</code> | Class used to style inactive time slider items. | +| <li class='fd-time__item'><span class='fd-time__unit'>01</span></li> | <code>.fd-time__item</code> | Class used to style inactive time slider items. | | <li class='fd-time__item fd-time__item--collapsed'><span class='fd-time__unit'>01</span></li> | <code>.fd-time__item--collapsed</code> | Class used to style collapsed time slider items. <br>When this item is displayed, all inactive items below/above it are collapsed (out of sight). | | <li class='fd-time__item fd-time__item--current'><span class='fd-time__unit'>01</span></li> | <code>.fd-time__item--current</code> | Class used to style current (active) time slider items. | @@ -33,7 +33,7 @@ The time component consists of three main styles to indicate a specific state: } }; -export const defaultCozyMode = () => `<div style="display: flex; justify-content: space-around; margin-bottom: 1rem; flex-wrap: wrap;"> +export const DefaultCozyMode = () => `<div style="display: flex; justify-content: space-around; margin-bottom: 1rem; flex-wrap: wrap;"> <div class='fd-time'> <div class='fd-time__col'> <label class='fd-time__slider-label'>Hrs</label> @@ -46,7 +46,7 @@ export const defaultCozyMode = () => `<div style="display: flex; justify-content <span class='fd-time__unit'>01</span> </li> <li class='fd-time__item'> - <span class='fd-time__unit'>02</span> + <span class='fd-time__unit'>02</span> </li> <li class='fd-time__item'> <span class='fd-time__unit'>03</span> @@ -88,7 +88,7 @@ export const defaultCozyMode = () => `<div style="display: flex; justify-content </div> </div> </div> - + <div class='fd-time'> <div class='fd-time__col'> <label class='fd-time__slider-label'>Hrs</label> @@ -101,7 +101,7 @@ export const defaultCozyMode = () => `<div style="display: flex; justify-content <span class='fd-time__unit'>01</span> </li> <li class='fd-time__item'> - <span class='fd-time__unit'>02</span> + <span class='fd-time__unit'>02</span> </li> <li class='fd-time__item'> <span class='fd-time__unit'>03</span> @@ -149,7 +149,7 @@ export const defaultCozyMode = () => `<div style="display: flex; justify-content </div> </div> </div> - + <div class='fd-time'> <div class='fd-time__col'> <label class='fd-time__slider-label'>Hrs</label> @@ -197,20 +197,20 @@ export const defaultCozyMode = () => `<div style="display: flex; justify-content </div> `; -defaultCozyMode.storyName = 'Default'; -defaultCozyMode.parameters = { +DefaultCozyMode.storyName = 'Default'; +DefaultCozyMode.parameters = { docs: { iframeHeight: 550, - storyDescription: `The default time component is displayed in cozy mode, which is ideal for mobile screens. + storyDescription: `The default time component is displayed in cozy mode, which is ideal for mobile screens. -Only one item and wrapper should be active at a time with the \`fd-time__wrapper--active\` modifier class. The rest of the items must be collapsed with the \`fd-timeitem--collapsed\` modifier class, displaying only the collapsed slider item (blue) next to the active item. +Only one item and wrapper should be active at a time with the \`fd-time__wrapper--active\` modifier class. The rest of the items must be collapsed with the \`fd-timeitem--collapsed\` modifier class, displaying only the collapsed slider item (blue) next to the active item. -**Note:** The meridian (AM/PM) wrapper must contain the \`fd-time__wrapper--meridian\` modifier class. +**Note:** The meridian (AM/PM) wrapper must contain the \`fd-time__wrapper--meridian\` modifier class. ` } }; -export const tabletMode = () => `<div style="display: flex; justify-content: space-around; margin-bottom: 1rem; flex-wrap: wrap;"> +export const TabletMode = () => `<div style="display: flex; justify-content: space-around; margin-bottom: 1rem; flex-wrap: wrap;"> <div class='fd-time fd-time--tablet'> <div class='fd-time__col'> <label class='fd-time__slider-label'>Hrs</label> @@ -223,7 +223,7 @@ export const tabletMode = () => `<div style="display: flex; justify-content: spa <span class='fd-time__unit'>01</span> </li> <li class='fd-time__item'> - <span class='fd-time__unit'>02</span> + <span class='fd-time__unit'>02</span> </li> <li class='fd-time__item'> <span class='fd-time__unit'>03</span> @@ -265,7 +265,7 @@ export const tabletMode = () => `<div style="display: flex; justify-content: spa </div> </div> </div> - + <div class='fd-time fd-time--tablet'> <div class='fd-time__col'> <label class='fd-time__slider-label'>Hrs</label> @@ -278,7 +278,7 @@ export const tabletMode = () => `<div style="display: flex; justify-content: spa <span class='fd-time__unit'>01</span> </li> <li class='fd-time__item'> - <span class='fd-time__unit'>02</span> + <span class='fd-time__unit'>02</span> </li> <li class='fd-time__item'> <span class='fd-time__unit'>03</span> @@ -326,7 +326,7 @@ export const tabletMode = () => `<div style="display: flex; justify-content: spa </div> </div> </div> - + <div class='fd-time fd-time--tablet'> <div class='fd-time__col'> <label class='fd-time__slider-label'>Hrs</label> @@ -373,16 +373,16 @@ export const tabletMode = () => `<div style="display: flex; justify-content: spa </div> </div>`; -tabletMode.storyName = 'Tablet'; -tabletMode.parameters = { +TabletMode.storyName = 'Tablet'; +TabletMode.parameters = { docs: { iframeHeight: 550, - storyDescription: `Time can be optimized for tablet screens, which adds padding on each side of the component. To display the time component for tablet, add the \`fd-time--tablet\` modifier class to the main element. + storyDescription: `Time can be optimized for tablet screens, which adds padding on each side of the component. To display the time component for tablet, add the \`fd-time--tablet\` modifier class to the main element. ` } }; -export const compactMode = () => `<div style="display: flex; justify-content: space-around; margin-bottom: 1rem; flex-wrap: wrap;"> +export const CompactMode = () => `<div style="display: flex; justify-content: space-around; margin-bottom: 1rem; flex-wrap: wrap;"> <div class='fd-time fd-time--compact'> <div class='fd-time__col'> <label class='fd-time__slider-label'>Hrs</label> @@ -395,7 +395,7 @@ export const compactMode = () => `<div style="display: flex; justify-content: sp <span class='fd-time__unit'>01</span> </li> <li class='fd-time__item'> - <span class='fd-time__unit'>02</span> + <span class='fd-time__unit'>02</span> </li> <li class='fd-time__item'> <span class='fd-time__unit'>03</span> @@ -437,7 +437,7 @@ export const compactMode = () => `<div style="display: flex; justify-content: sp </div> </div> </div> - + <div class='fd-time fd-time--compact'> <div class='fd-time__col'> <label class='fd-time__slider-label'>Hrs</label> @@ -450,7 +450,7 @@ export const compactMode = () => `<div style="display: flex; justify-content: sp <span class='fd-time__unit'>01</span> </li> <li class='fd-time__item'> - <span class='fd-time__unit'>02</span> + <span class='fd-time__unit'>02</span> </li> <li class='fd-time__item'> <span class='fd-time__unit'>03</span> @@ -498,7 +498,7 @@ export const compactMode = () => `<div style="display: flex; justify-content: sp </div> </div> </div> - + <div class='fd-time fd-time--compact'> <div class='fd-time__col'> <label class='fd-time__slider-label'>Hrs</label> @@ -546,8 +546,8 @@ export const compactMode = () => `<div style="display: flex; justify-content: sp </div> `; -compactMode.storyName = 'Desktop'; -compactMode.parameters = { +CompactMode.storyName = 'Desktop'; +CompactMode.parameters = { docs: { iframeHeight: 550, storyDescription: `The time component can be displayed in compact mode, which is ideal for desktop screens. To display the time component for desktop, add the \`fd-time--compact\` modifier class to the main element. @@ -555,7 +555,7 @@ compactMode.parameters = { } }; -export const scrollableMode = () => `<div style="display: flex; justify-content: space-around; margin-bottom: 1rem; flex-wrap: wrap;"> +export const ScrollableMode = () => `<div style="display: flex; justify-content: space-around; margin-bottom: 1rem; flex-wrap: wrap;"> <div class='fd-time fd-time--scrollable'> <div class='fd-time__col'> <label class='fd-time__slider-label'>Hrs</label> @@ -568,7 +568,7 @@ export const scrollableMode = () => `<div style="display: flex; justify-content: <span class='fd-time__unit'>01</span> </li> <li class='fd-time__item'> - <span class='fd-time__unit'>02</span> + <span class='fd-time__unit'>02</span> </li> <li class='fd-time__item'> <span class='fd-time__unit'>03</span> @@ -623,7 +623,7 @@ export const scrollableMode = () => `<div style="display: flex; justify-content: <span class='fd-time__unit'>01</span> </li> <li class='fd-time__item'> - <span class='fd-time__unit'>02</span> + <span class='fd-time__unit'>02</span> </li> <li class='fd-time__item'> <span class='fd-time__unit'>03</span> @@ -719,8 +719,8 @@ export const scrollableMode = () => `<div style="display: flex; justify-content: </div> </div> `; -scrollableMode.storyName = 'Scrollable'; -scrollableMode.parameters = { +ScrollableMode.storyName = 'Scrollable'; +ScrollableMode.parameters = { docs: { iframeHeight: 550, storyDescription: `Time can be scrollable by adding the \`fd-time--scrollable\` modifier class to the main element. It provides users with the ability to scroll up and down active columns with either a mouse, or on mobile where they can tap and release. diff --git a/stories/title/title.stories.js b/stories/title/title.stories.js index b13e64d607..8c753aad74 100644 --- a/stories/title/title.stories.js +++ b/stories/title/title.stories.js @@ -8,7 +8,7 @@ A title component whose semantic level and visual appearance can be set separate } }; -export const levels = () => `<h1 class="fd-title fd-title--h1">Title Level 1</h1> +export const Levels = () => `<h1 class="fd-title fd-title--h1">Title Level 1</h1> <h2 class="fd-title fd-title--h2">Title Level 2</h2> <h3 class="fd-title fd-title--h3">Title Level 3</h3> <h4 class="fd-title fd-title--h4">Title Level 4</h4> @@ -16,15 +16,15 @@ export const levels = () => `<h1 class="fd-title fd-title--h1">Title Level 1</h1 <h6 class="fd-title fd-title--h6">Title Level 6</h6> `; -levels.storyName = 'Semantic Level'; -levels.parameters = { +Levels.storyName = 'Semantic Level'; +Levels.parameters = { docs: { iframeHeight: 250, storyDescription: 'There are 6 semantic levels of a heading element. There should only be one H1 on a page, and headings should only appear in ascending order without skipping a level; i.e. even if there are only 3 levels on a page, the order must be H1-H2-H3, and no other levels used.' } }; -export const visualLevel = () => `<h1 class="fd-title fd-title--h6">Title Level 1</h1> +export const VisualLevel = () => `<h1 class="fd-title fd-title--h6">Title Level 1</h1> <h2 class="fd-title fd-title--h5">Title Level 2</h2> <h3 class="fd-title fd-title--h4">Title Level 3</h3> <h4 class="fd-title fd-title--h3">Title Level 4</h4> @@ -32,15 +32,14 @@ export const visualLevel = () => `<h1 class="fd-title fd-title--h6">Title Level <h6 class="fd-title fd-title--h1">Title Level 6</h6> `; -visualLevel.storyName = 'Visual Level'; -visualLevel.parameters = { +VisualLevel.parameters = { docs: { iframeHeight: 250, storyDescription: 'If a design requires it, the visual level can be set to something different than the semantic level. This allows the sequential order to be maintained while providing flexibility in appearance.' } }; -export const elision = () => `<div style="width: 300px"> +export const Elision = () => `<div style="width: 300px"> <h1 class="fd-title fd-title--h1">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1> <h2 class="fd-title fd-title--h2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2> <h3 class="fd-title fd-title--h3">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3> @@ -50,15 +49,15 @@ export const elision = () => `<div style="width: 300px"> </div> `; -elision.storyName = 'Text Elision'; -elision.parameters = { +Elision.storyName = 'Text Elision'; +Elision.parameters = { docs: { iframeHeight: 250, storyDescription: 'By default the Title text overflow will be elided when longer than its container.' } }; -export const wrapping = () => `<div style="width: 300px"> +export const Wrapping = () => `<div style="width: 300px"> <h1 class="fd-title fd-title--h1 fd-title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1> <h2 class="fd-title fd-title--h2 fd-title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2> <h3 class="fd-title fd-title--h3 fd-title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3> @@ -68,8 +67,8 @@ export const wrapping = () => `<div style="width: 300px"> </div> `; -wrapping.storyName = 'Text Wrapping'; -wrapping.parameters = { +Wrapping.storyName = 'Text Wrapping'; +Wrapping.parameters = { docs: { iframeHeight: 300, storyDescription: 'Add the `--wrap` modifier to cause the overflow text to wrap instead.' diff --git a/stories/token/token.stories.js b/stories/token/token.stories.js index 23df16093e..c0b02044a2 100644 --- a/stories/token/token.stories.js +++ b/stories/token/token.stories.js @@ -4,14 +4,14 @@ export default { description: `Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the tokens. Tokens can be added, removed, selected, or deselected. ##Usage -- Use tokens only in the **Multi Input** component. +- Use tokens only in the **Multi Input** component. `, tags: ['f3', 'a11y', 'theme'], components: ['input', 'token', 'tokenizer'] } }; -export const primary = () => `<span class="fd-token" role="button" tabindex="0"> +export const Primary = () => `<span class="fd-token" role="button" tabindex="0"> <span class="fd-token__text"> Bibendum </span> @@ -37,8 +37,8 @@ export const primary = () => `<span class="fd-token" role="button" tabindex="0"> </span> `; -primary.storyName = 'Default'; -primary.parameters = { +Primary.storyName = 'Default'; +Primary.parameters = { docs: { iframeHeight: 350, storyDescription: `The default token is displayed in grey with text, and a close button that will remove the token when selected. It is displayed in cozy mode, which is ideal for mobile and tablet screens. @@ -46,7 +46,7 @@ primary.parameters = { } }; -export const selected = () => `<span class="fd-token fd-token--selected" role="button" tabindex="0"> +export const Selected = () => `<span class="fd-token fd-token--selected" role="button" tabindex="0"> <span class="fd-token__text"> Bibendum </span> @@ -72,8 +72,7 @@ export const selected = () => `<span class="fd-token fd-token--selected" role="b </span> `; -selected.storyName = 'Selected'; -selected.parameters = { +Selected.parameters = { docs: { iframeHeight: 350, storyDescription: `Tokens can be displayed in blue, signaling to the user that they are selected. To display selected tokens, add the \`fd-token--selected\` modifier class to the main element. @@ -81,7 +80,7 @@ selected.parameters = { } }; -export const readOnlyToken = () => `<span class="fd-token fd-token--readonly" role="button" tabindex="0"> +export const ReadOnlyToken = () => `<span class="fd-token fd-token--readonly" role="button" tabindex="0"> <span class="fd-token__text"> Bibendum </span> @@ -103,8 +102,8 @@ export const readOnlyToken = () => `<span class="fd-token fd-token--readonly" ro </span> `; -readOnlyToken.storyName = 'Read-only'; -readOnlyToken.parameters = { +ReadOnlyToken.storyName = 'Read-only'; +ReadOnlyToken.parameters = { docs: { iframeHeight: 350, storyDescription: `Tokens can be displayed as read-only, indicating that they cannot be interacted with. Read-only tokens should not contain a close button. To display tokens as read-only, add the \`fd-token--readonly\` modifier class to the main element. @@ -112,7 +111,7 @@ readOnlyToken.parameters = { } }; -export const compactToken = () => `<span class="fd-token fd-token--compact" role="button" tabindex="0"> +export const CompactToken = () => `<span class="fd-token fd-token--compact" role="button" tabindex="0"> <span class="fd-token__text"> Bibendum </span> @@ -138,8 +137,8 @@ export const compactToken = () => `<span class="fd-token fd-token--compact" role </span> `; -compactToken.storyName = 'Compact'; -compactToken.parameters = { +CompactToken.storyName = 'Compact'; +CompactToken.parameters = { docs: { iframeHeight: 350, storyDescription: `Tokens can be displayed in compact mode, which is ideal for larger desktop screens. To display compact tokens, add the \`fd-token--compact\` modifier class to the main element. @@ -147,7 +146,7 @@ compactToken.parameters = { } }; -export const cozyTokenizer = () => `<div class="fd-tokenizer "> +export const CozyTokenizer = () => `<div class="fd-tokenizer "> <div class="fd-tokenizer__inner"> <span class="fd-token" role="button" tabindex="0"> <span class="fd-token__text"> @@ -218,18 +217,18 @@ export const cozyTokenizer = () => `<div class="fd-tokenizer "> </div> `; -cozyTokenizer.storyName = 'Tokenizer'; -cozyTokenizer.parameters = { +CozyTokenizer.storyName = 'Tokenizer'; +CozyTokenizer.parameters = { docs: { iframeHeight: 350, storyDescription: `Tokenizer is a container for tokens, which is often placed inside **Multi-Input** components. It is displayed in cozy mode; therefore, the user can swipe the tokens to the left or right. -To enable focus, the \`is-focus\` class must be added the container. +To enable focus, the \`is-focus\` class must be added the container. ` } }; -export const compactTokenizer = () => `<div class="fd-tokenizer fd-tokenizer--compact"> +export const CompactTokenizer = () => `<div class="fd-tokenizer fd-tokenizer--compact"> <div class="fd-tokenizer__inner"> <span class="fd-token fd-token--compact" role="button" tabindex="0"> <span class="fd-token__text"> @@ -300,18 +299,18 @@ export const compactTokenizer = () => `<div class="fd-tokenizer fd-tokenizer--co </div> `; -compactTokenizer.storyName = 'Compact tokenizer'; -compactTokenizer.parameters = { +CompactTokenizer.storyName = 'Compact tokenizer'; +CompactTokenizer.parameters = { docs: { iframeHeight: 350, - storyDescription: `The tokenizer can be displayed in compact mode to be viewed on larger desktop screens. Contrary to the previous example, the user can view the tokens by pressing the right or left arrow keys. + storyDescription: `The tokenizer can be displayed in compact mode to be viewed on larger desktop screens. Contrary to the previous example, the user can view the tokens by pressing the right or left arrow keys. -To display a compact tokenizer, add the \`fd-tokenizer--compact\` modifier class to the main element. +To display a compact tokenizer, add the \`fd-tokenizer--compact\` modifier class to the main element. ` } }; -export const scrollableTokenizer = () => `<div class="fd-tokenizer fd-tokenizer--scrollable"> +export const ScrollableTokenizer = () => `<div class="fd-tokenizer fd-tokenizer--scrollable"> <div class="fd-tokenizer__inner" id="tokenizer-scrollable"> <span class="fd-token" role="button" tabindex="0"> <span class="fd-token__text"> @@ -377,11 +376,11 @@ export const scrollableTokenizer = () => `<div class="fd-tokenizer fd-tokenizer- </div> `; -scrollableTokenizer.storyName = 'Scrollable tokenizer'; -scrollableTokenizer.parameters = { +ScrollableTokenizer.storyName = 'Scrollable tokenizer'; +ScrollableTokenizer.parameters = { docs: { iframeHeight: 350, - storyDescription: `The tokenizer can be scrollable by adding the \`fd-tokenizer--scrollable\` modifier class to the main element. The user can view the tokens by pressing the \`Tab\` key, then \`Shift + Tab\` to jump to the next one. + storyDescription: `The tokenizer can be scrollable by adding the \`fd-tokenizer--scrollable\` modifier class to the main element. The user can view the tokens by pressing the \`Tab\` key, then \`Shift + Tab\` to jump to the next one. ` } }; diff --git a/stories/tool-header/tool-header.stories.js b/stories/tool-header/tool-header.stories.js index c4be039d56..1a2c377376 100644 --- a/stories/tool-header/tool-header.stories.js +++ b/stories/tool-header/tool-header.stories.js @@ -37,7 +37,7 @@ The tool header adjusts to different screen sizes. The tool header is a containe Like all SAP Fiori controls, the tool header can be shown in compact mode or in cozy mode. The height of the header control itself stays the same, only the controls within it are affected. ##Layout and Structure -The tool header is a horizontal container at the top of the tool or application. It takes up the full width of the screen, floats above the content, and does not scroll. It acts as a container for global elements, such as a global application menu, horizontal navigation, name and branding of the app, and utility functions. +The tool header is a horizontal container at the top of the tool or application. It takes up the full width of the screen, floats above the content, and does not scroll. It acts as a container for global elements, such as a global application menu, horizontal navigation, name and branding of the app, and utility functions. - <code style="color:red;">.fd-tool-header</code>: container class <br> - <code style="color:red;">.fd-tool-header__group</code>: groups tool header elements. The first group is positioned on the left hand side and the second group is positioned on the right hand side<br> @@ -75,7 +75,7 @@ The tool header supports object status in its semantic form. No industry specifi } }; -export const primary = () => `<div class="fd-tool-header"> +export const Primary = () => `<div class="fd-tool-header"> <div class="fd-tool-header__group"> <div class="fd-tool-header__element"> <img class="fd-tool-header__logo" src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" alt="SAP"> @@ -119,7 +119,7 @@ export const primary = () => `<div class="fd-tool-header"> <i class="sap-icon--bell"></i> </button> </div> - <div class="fd-tool-header__element"> + <div class="fd-tool-header__element"> <span class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/1.svg')" role="img" aria-label="John Doe"></span> </div> <div class="fd-tool-header__element"> @@ -131,9 +131,9 @@ export const primary = () => `<div class="fd-tool-header"> </div> `; -primary.storyName = 'Tool Header with Controls'; +Primary.storyName = 'Tool Header with Controls'; -export const menu = () => `<div class="fd-tool-header fd-tool-header--menu"> +export const Menu = () => `<div class="fd-tool-header fd-tool-header--menu"> <div class="fd-tool-header__group"> <div class="fd-tool-header__element"> <button class="fd-button fd-button--compact fd-button--transparent fd-tool-header__button" aria-label="menu"> @@ -155,7 +155,7 @@ export const menu = () => `<div class="fd-tool-header fd-tool-header--menu"> <div class="fd-input-group fd-tool-header__input-group"> <input class="fd-input fd-input--compact fd-input-group__input" type="text" id="aqwsdewfwfw" name="" placeholder="Search..."> <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--compact"> - <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent fd-button--compact fd-tool-header__button" aria-label="Search"> + <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent fd-button--compact fd-tool-header__button" aria-label="Search"> <i class="sap-icon--search"></i> </button> </span> @@ -171,7 +171,7 @@ export const menu = () => `<div class="fd-tool-header fd-tool-header--menu"> <i class="sap-icon--bell"></i> </button> </div> - <div class="fd-tool-header__element"> + <div class="fd-tool-header__element"> <span class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/1.svg')" role="img" aria-label="John Doe"></span> </div> <div class="fd-tool-header__element"> @@ -183,15 +183,15 @@ export const menu = () => `<div class="fd-tool-header fd-tool-header--menu"> </div> `; -menu.storyName = 'Tool Header with Side Navigation Menu Button'; -menu.parameters = { +Menu.storyName = 'Tool Header with Side Navigation Menu Button'; +Menu.parameters = { docs: { storyDescription: 'The side navigation menu button is used to collapse/expand the side navigation. It is not recommended to use horizontal and responsive paddings when this button is present.' } }; -export const menuButtons = () => `<div class="fd-tool-header fd-tool-header--menu"> +export const MenuButtons = () => `<div class="fd-tool-header fd-tool-header--menu"> <div class="fd-tool-header__group"> <div class="fd-tool-header__element"> <button class="fd-button fd-button--compact fd-button--transparent fd-tool-header__button" aria-label="menu"> @@ -239,9 +239,9 @@ export const menuButtons = () => `<div class="fd-tool-header fd-tool-header--men </div> `; -menuButtons.storyName = 'Tool Header with Menu Buttons'; +MenuButtons.storyName = 'Tool Header with Menu Buttons'; -export const responsivePaddings = () => `<div class="fd-tool-header fd-tool-header--responsive-paddings"> +export const ResponsivePaddings = () => `<div class="fd-tool-header fd-tool-header--responsive-paddings"> <div class="fd-tool-header__group"> <div class="fd-tool-header__element"> <img class="fd-tool-header__logo" src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" alt="SAP"> @@ -270,7 +270,7 @@ export const responsivePaddings = () => `<div class="fd-tool-header fd-tool-head <i class="sap-icon--bell"></i> </button> </div> - <div class="fd-tool-header__element"> + <div class="fd-tool-header__element"> <span class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/1.svg')" role="img" aria-label="John Doe"></span> </div> <div class="fd-tool-header__element"> @@ -282,15 +282,14 @@ export const responsivePaddings = () => `<div class="fd-tool-header fd-tool-head </div> `; -responsivePaddings.storyName = 'Responsive Paddings'; -responsivePaddings.parameters = { +ResponsivePaddings.parameters = { docs: { storyDescription: 'Horizontal responsive paddings (based on the screen size) can be applied to the tool header by adding the `fd-tool-header--responsive-paddings` modifier class to the container class. In this case the left and right spacing will change as the screen size changes.' } }; -export const horizontalPaddings = () => `<h4>Size S (1rem)</h4> +export const HorizontalPaddings = () => `<h4>Size S (1rem)</h4> <div class="fd-tool-header fd-tool-header--sm" style="max-width: 500px;"> <div class="fd-tool-header__group"> <div class="fd-tool-header__element"> @@ -309,7 +308,7 @@ export const horizontalPaddings = () => `<h4>Size S (1rem)</h4> <i class="sap-icon--overflow"></i> </button> </div> - <div class="fd-tool-header__element"> + <div class="fd-tool-header__element"> <span class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/1.svg')" role="img" aria-label="John Doe"></span> </div> </div> @@ -332,7 +331,7 @@ export const horizontalPaddings = () => `<h4>Size S (1rem)</h4> <i class="sap-icon--bell"></i> </button> </div> - <div class="fd-tool-header__element"> + <div class="fd-tool-header__element"> <span class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/1.svg')" role="img" aria-label="John Doe"></span> </div> <div class="fd-tool-header__element"> @@ -363,7 +362,7 @@ export const horizontalPaddings = () => `<h4>Size S (1rem)</h4> <i class="sap-icon--bell"></i> </button> </div> - <div class="fd-tool-header__element"> + <div class="fd-tool-header__element"> <span class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/1.svg')" role="img" aria-label="John Doe"></span> </div> <div class="fd-tool-header__element"> @@ -393,7 +392,7 @@ export const horizontalPaddings = () => `<h4>Size S (1rem)</h4> <div class="fd-input-group fd-tool-header__input-group"> <input class="fd-input fd-input--compact fd-input-group__input" type="text" id="aqwsdewfwfw" name="" placeholder="Search..."> <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--compact"> - <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent fd-button--compact fd-tool-header__button" aria-label="Select"> + <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent fd-button--compact fd-tool-header__button" aria-label="Select"> <i class="sap-icon--navigation-down-arrow"></i> </button> </span> @@ -404,7 +403,7 @@ export const horizontalPaddings = () => `<h4>Size S (1rem)</h4> <i class="sap-icon--bell"></i> </button> </div> - <div class="fd-tool-header__element"> + <div class="fd-tool-header__element"> <span class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/1.svg')" role="img" aria-label="John Doe"></span> </div> <div class="fd-tool-header__element"> @@ -416,8 +415,7 @@ export const horizontalPaddings = () => `<h4>Size S (1rem)</h4> </div> `; -horizontalPaddings.storyName = 'Horizontal Paddings'; -horizontalPaddings.parameters = { +HorizontalPaddings.parameters = { docs: { storyDescription: 'You can add horizontal paddings by applying a modifier class to the container. For example, `.fd-tool-header--sm` modifier class will add 1rem horizontal paddings on the tool bar container.' } diff --git a/stories/toolbar/toolbar.stories.js b/stories/toolbar/toolbar.stories.js index e912daf6a1..4cd2618ce0 100644 --- a/stories/toolbar/toolbar.stories.js +++ b/stories/toolbar/toolbar.stories.js @@ -26,7 +26,7 @@ Compact | Default | 600 px and above | Desktop } }; -export const primary = () => `<div class="fd-toolbar fd-toolbar--cozy"> +export const Primary = () => `<div class="fd-toolbar fd-toolbar--cozy"> <span class="fd-toolbar__spacer"> </span> <button class="fd-button fd-button--transparent">New</button> <button class="fd-button fd-button--transparent">Open</button> @@ -45,8 +45,7 @@ export const primary = () => `<div class="fd-toolbar fd-toolbar--cozy"> </div> `; -primary.storyName = 'Primary'; -primary.parameters = { +Primary.parameters = { docs: { storyDescription: ` The primary toolbar displays several actions separated by icon buttons. It is displayed in cozy mode, which is ideal for mobile and small tablet screens. @@ -54,7 +53,7 @@ The primary toolbar displays several actions separated by icon buttons. It is di } }; -export const overflow = () => `<div style="height:250px"> +export const Overflow = () => `<div style="height:250px"> <h3>Cozy example</h3> <div class="fd-toolbar fd-toolbar--cozy"> <span>Products (34)</span> @@ -109,7 +108,7 @@ export const overflow = () => `<div style="height:250px"> id="31jr8oaufh" onclick="toggleElAttrs('mw0daw8d7h', ['aria-hidden']);toggleElAttrs('31jr8oaufh', ['aria-expanded']);" aria-label="More"> - <i class="sap-icon--overflow"></i> + <i class="sap-icon--overflow"></i> </button> </div> <div class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow" @@ -135,17 +134,16 @@ export const overflow = () => `<div style="height:250px"> </div> `; -overflow.storyName = 'Overflow'; -overflow.parameters = { +Overflow.parameters = { docs: { - storyDescription: `The overflow toolbar can display additional elements when space is limited. This can be achieved with a **Button** and/or **Popover** component. + storyDescription: `The overflow toolbar can display additional elements when space is limited. This can be achieved with a **Button** and/or **Popover** component. To display an overflow in a button, pass the \`sap-icon--overflow\` in the \`fd-button\` class. Additionally, you can add a popover by passing \`fd-popover\` in the \`fd-toolbar__overflow\` element. Add any element inside overflow body with \`fd-toolbar__overflow-button\` , \`fd-toolbar__overflow-button--menu\` \`fd-toolbar__overflow-label \` modifier , ` } }; -export const types = () => `<div style="padding: 1rem"> +export const Types = () => `<div style="padding: 1rem"> <h3>Solid</h3> <div class="fd-toolbar fd-toolbar--solid"> <span>Products (23)</span> @@ -213,7 +211,7 @@ export const types = () => `<div style="padding: 1rem"> </div> `; -export const separator = () => ` +export const Separator = () => ` <div class="fd-toolbar fd-toolbar--cozy"> <button class="fd-button fd-button--positive">Accept</button> <span class="fd-toolbar__separator"></span> @@ -236,16 +234,15 @@ export const separator = () => ` </div> `; -separator.storyName = 'Separators'; -separator.parameters = { +Separator.storyName = 'Separators'; +Separator.parameters = { docs: { storyDescription: `Separators should be used to visually separate items from each other. To display separators in toolbars, add the \`fd-toolbar__separator\` class after the component you are separating. ` } }; -types.storyName = 'Types'; -types.parameters = { +Types.parameters = { docs: { storyDescription: `Toolbar can be styled in various ways depending on the use case. @@ -254,7 +251,7 @@ Types | Modifier class | Description Solid | \`fd-toolbar--solid\` | Displays a solid background color. Transparent | \`fd-toolbar--transparent\` | Displays a transparent background. Auto | \` d-toolbar--auto\` | Can inherit the design from the parent component it’s being used with. -Info | \` fd-toolbar--info\` | Commonly used to display information (text or icons) and is slightly smaller than the regular toolbar. +Info | \` fd-toolbar--info\` | Commonly used to display information (text or icons) and is slightly smaller than the regular toolbar. Title | \` fd-toolbar--title\` | Should be used whenever a title is required. No border-bottom | \`fd-toolbar—clear\` | This is not a type, but it removes the bottom border of each toolbar type. Active | \` fd-toolbar--active\` | This is also not a type, but it enables active and hover states in each type. @@ -263,7 +260,7 @@ Active | \` fd-toolbar--active\` | This is also not a type, but it enables activ } }; -export const alignment = () => `<h3>Left and right-aligned</h3> +export const Alignment = () => `<h3>Left and right-aligned</h3> <div class="fd-toolbar"> <button class="fd-button fd-button--compact fd-button--positive">Accept</button> <span class="fd-toolbar__spacer"></span> @@ -314,8 +311,7 @@ export const alignment = () => `<h3>Left and right-aligned</h3> </div> `; -alignment.storyName = 'Alignment'; -alignment.parameters = { +Alignment.parameters = { docs: { storyDescription: `Toolbars are typically used for left/right alignment; however, they can be displayed in any way with the \`fd-toolbar__spacer\` class. diff --git a/stories/tree/tree.stories.js b/stories/tree/tree.stories.js index df3f960b7e..f2ef65a33c 100644 --- a/stories/tree/tree.stories.js +++ b/stories/tree/tree.stories.js @@ -3,7 +3,7 @@ export default { parameters: { description: `Tree allows the user to display and work with a hierarchical set of items. Trees are mostly used in the master list for a master-detail scenario using the **Flexible Column Layout** and in **Popovers** or **Dialogs**. In certain use cases, they can also be used in the **Dynamic Page Layout**. Items that contain additional items are called nodes, while items that do not contain any other items are called leaves. If available, a single top-most node is called a root node. Apart from the hierarchical structure of its nodes and leaves, a tree is quite similar to a **List**. - + ##Usage **Use the tree if:** @@ -11,7 +11,7 @@ export default { - Selecting one or more items out of a set of hierarchically structured items is a main use case. - The hierarchy has a restricted number of levels (up to about 12, depending on the content) and items (around 200). - You want to have only one implementation for all devices. - + **Do not use the tree if:** @@ -44,7 +44,7 @@ Navigated    | \`is-navigated\` | If a certain tree item has been } }; -export const primary = () => `<ul role="tree" aria-label="Root Tree" id="TREE1L1" class="fd-tree expanded-level-1"> +export const Primary = () => `<ul role="tree" aria-label="Root Tree" id="TREE1L1" class="fd-tree expanded-level-1"> <li role="treeitem" aria-level="1" aria-expanded="true" class="fd-tree__item"> <div class="fd-tree__item-container"> <button tabindex="0" class="fd-tree__expander is-expanded" aria-controls="TREE1L2" aria-haspopup="true" aria-label="Expand level 2" aria-expanded="true"> @@ -169,8 +169,7 @@ export const primary = () => `<ul role="tree" aria-label="Root Tree" id="TREE1L1 </ul> `; -primary.storyName = 'Primary'; -primary.parameters = { +Primary.parameters = { docs: { iframeHeight: 950, storyDescription: ` @@ -178,7 +177,7 @@ The primary tree component displays level 1 expanded to show level 2, which is i } }; -export const borderless = () => `<ul role="tree" aria-label="Root Tree" id="TREE2L1" class="fd-tree fd-tree--no-border expanded-level-2"> +export const Borderless = () => `<ul role="tree" aria-label="Root Tree" id="TREE2L1" class="fd-tree fd-tree--no-border expanded-level-2"> <li role="treeitem" aria-level="1" aria-expanded="true" class="fd-tree__item"> <div class="fd-tree__item-container"> <button tabindex="0" class="fd-tree__expander is-expanded" aria-controls="TREE2L2" aria-haspopup="true" aria-label="Expand level 2" aria-expanded="true"> @@ -293,8 +292,7 @@ export const borderless = () => `<ul role="tree" aria-label="Root Tree" id="TREE </ul> `; -borderless.storyName = 'Borderless'; -borderless.parameters = { +Borderless.parameters = { docs: { iframeHeight: 400, storyDescription: ` @@ -307,7 +305,7 @@ Icons can be added before and/or after the text as children of the \`fd-tree__co }; -export const highlightIndicators = () => `<ul role="tree" aria-label="Root Tree" id="TREE3L1" class="fd-tree expanded-level-3"> +export const HighlightIndicators = () => `<ul role="tree" aria-label="Root Tree" id="TREE3L1" class="fd-tree expanded-level-3"> <li role="treeitem" aria-level="1" aria-expanded="true" class="fd-tree__item"> <div class="fd-tree__item-container has-highlight-indicator"> <button class="fd-tree__expander is-expanded" aria-controls="TREE3L2" aria-haspopup="true" aria-label="Expand level 2" aria-expanded="true"> @@ -392,8 +390,8 @@ export const highlightIndicators = () => `<ul role="tree" aria-label="Root Tree" </ul> `; -highlightIndicators.storyName = 'Highlight indicators'; -highlightIndicators.parameters = { +HighlightIndicators.storyName = 'Highlight indicators'; +HighlightIndicators.parameters = { docs: { iframeHeight: 500, storyDescription: ` @@ -410,13 +408,13 @@ Default | \` has-highlight-indicator\` Error | \` has-highlight-indicator--error\` Success | \` has-highlight-indicator--success\` Warning | \` has-highlight-indicator--warning\` - + ` } }; -export const navigable = () => `<ul role="tree" aria-label="Root Tree" id="TREE6CL1" class="fd-tree expanded-level-6"> +export const Navigable = () => `<ul role="tree" aria-label="Root Tree" id="TREE6CL1" class="fd-tree expanded-level-6"> <li role="treeitem" aria-level="1" aria-expanded="true" class="fd-tree__item"> <div class="fd-tree__item-container fd-tree__item-container--active has-highlight-indicator--success"> <button class="fd-tree__expander is-expanded" aria-controls="TREE6CL2" aria-haspopup="true" aria-label="Expand level 2" aria-expanded="true"> @@ -714,28 +712,27 @@ export const navigable = () => `<ul role="tree" aria-label="Root Tree" id="TREE6 </ul> `; -navigable.storyName = 'Navigable'; -navigable.parameters = { +Navigable.parameters = { docs: { iframeHeight: 1350, storyDescription: ` -Tree can be displayed with navigation links by anchoring the \`href\` attribute with the \`fd-tree__content\` class. If only a subset of the tree items is navigable, you should indicate them with navigation arrows. +Tree can be displayed with navigation links by anchoring the \`href\` attribute with the \`fd-tree__content\` class. If only a subset of the tree items is navigable, you should indicate them with navigation arrows. ####Navigation arrows To display navigation arrows in tree items, create an element with \`fd-tree__icon\` and \`fd-tree__icon--navigation\` classes inside \`fd-tree__item-container\` with the \`fd-tree__item-container--active\` modifier class applied. - + **If all items are navigable:** Do not display arrows at all. In this case, add the \`fd-tree--active\` modifier class to the root tree. This will add states (hover, selected, active) to all tree items. - + **If an item has been navigated:** When a user has navigated to an item but has since moved onto another item, you can indicate that it has been navigated to by adding the \`is-navigated\` class to the \`fd-tree__item-container\` element. - + **Note:** In this example, each level indents by 0.25rem more than the previous level (up to level 12). - + ` } }; -export const selection = () => `<h3>Left multi-selection</h3> +export const Selection = () => `<h3>Left multi-selection</h3> <ul role="tree" aria-label="Root Tree" id="TREESELL1" class="fd-tree expanded-level-1"> <li role="treeitem" aria-level="1" aria-expanded="true" class="fd-tree__item"> <div class="fd-tree__item-container is-selected"> @@ -976,8 +973,7 @@ export const selection = () => `<h3>Left multi-selection</h3> </ul> `; -selection.storyName = 'Selection'; -selection.parameters = { +Selection.parameters = { docs: { iframeHeight: 1000, storyDescription: ` @@ -985,15 +981,15 @@ Tree can be displayed with checkboxes, allowing the user to select multiple item ####Form items Form items can be added before or after the \`fd-tree__content\` element. The \`fd-tree__form-item \` class must be added together with the \`fd-form-item\` element. - + - Multi-selection: use **Checkboxes** - Single selection: use **Radio buttons** - + ` } }; -export const treeWithNoData = () => `<ul role="tree" aria-label="Root Tree" id="TREE1RTLND1" class="fd-tree fd-tree--no-data"> +export const TreeWithNoData = () => `<ul role="tree" aria-label="Root Tree" id="TREE1RTLND1" class="fd-tree fd-tree--no-data"> <li role="treeitem" aria-level="1" class="fd-tree__item"> <div class="fd-tree__item-container"> <div class="fd-tree__content"> @@ -1004,8 +1000,8 @@ export const treeWithNoData = () => `<ul role="tree" aria-label="Root Tree" id=" </ul> `; -treeWithNoData.storyName = 'No data'; -treeWithNoData.parameters = { +TreeWithNoData.storyName = 'No data'; +TreeWithNoData.parameters = { docs: { iframeHeight: 200, storyDescription: ` diff --git a/stories/upload-collection/upload-collection.stories.js b/stories/upload-collection/upload-collection.stories.js index 32042cf7d7..8ca5c838a1 100644 --- a/stories/upload-collection/upload-collection.stories.js +++ b/stories/upload-collection/upload-collection.stories.js @@ -39,7 +39,7 @@ Modifier/Class | Description } }; -export const standard = () => `<h4>Default mode</h4> +export const Standard = () => `<h4>Default mode</h4> <ul class="fd-list fd-list--byline fd-upload-collection" role="list"> <li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item"> <span class="fd-list__thumbnail fd-upload-collection__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span> @@ -180,16 +180,16 @@ export const standard = () => `<h4>Default mode</h4> `; -standard.storyName = 'Default'; +Standard.storyName = 'Default'; -standard.parameters = { +Standard.parameters = { docs: { iframeHeight: 785, storyDescription: 'The default upload collection.' } }; -export const edit = () => ` +export const Edit = () => ` <h4>Edit Mode</h4> <ul class="fd-list fd-list--byline fd-upload-collection" role="list"> @@ -312,16 +312,14 @@ export const edit = () => ` `; -edit.storyName = 'Edit'; - -edit.parameters = { +Edit.parameters = { docs: { iframeHeight: 785, storyDescription: 'Users can activate edit mode where the file name can be changed.' } }; -export const noData = () => ` +export const NoData = () => ` <div style="height: 600px; width: 100%;"> <div class="fd-message-page"> <div class="fd-message-page__container"> @@ -341,9 +339,7 @@ export const noData = () => ` </div> `; -noData.storyName = 'No Data'; - -noData.parameters = { +NoData.parameters = { docs: { iframeHeight: 785, storyDescription: 'Use a message page component when the user has yet to upload any files.' diff --git a/stories/user-menu/user-menu.stories.js b/stories/user-menu/user-menu.stories.js index 7a012aab82..47067099b5 100644 --- a/stories/user-menu/user-menu.stories.js +++ b/stories/user-menu/user-menu.stories.js @@ -10,7 +10,7 @@ export default { } }; -export const shellbar = () => `<div style="height: 700px;"> +export const Shellbar = () => `<div style="height: 700px;"> <div class="fd-shellbar"> <div class="fd-shellbar__group fd-shellbar__group--product"> <span class="fd-shellbar__logo"> @@ -31,7 +31,7 @@ export const shellbar = () => `<div style="height: 700px;"> role="button" tabindex="0"></span> </div> - + <div class="fd-popover__body fd-popover__body--right" aria-hidden="false" id="popoverA1"> <div class="fd-user-menu__body"> <div class="fd-user-menu__header"> @@ -39,20 +39,20 @@ export const shellbar = () => `<div style="height: 700px;"> class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail" aria-label="Avatar" style="background-image: url('assets/images/avatars/1.svg');"></span> - + <span class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--thumbnail fd-user-menu__avatar" aria-label="Avatar" style="background-image: url('assets/images/avatars/3.svg');"></span> - + <button class="fd-button fd-button--transparent" aria-label="Product"><i class="sap-icon--grid"></i></button> </div> - + <div class="fd-user-menu__subheader"> <div class="fd-user-menu__user-name">John Miller</div> <div class="fd-user-menu__user-role">User Experience Designer</div> </div> - + <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border" role="list"> <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link"> <a tabindex="0" class="fd-list__link"> @@ -88,7 +88,7 @@ export const shellbar = () => `<div style="height: 700px;"> <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator"> <i role="presentation" class="fd-list__icon sap-icon--history"></i> <span class="fd-list__title">Delegate</span> - + <span class="fd-list__item-counter"> <span class="fd-badge fd-badge--static" aria-label="Selected items">3</span> </span> @@ -114,7 +114,7 @@ export const shellbar = () => `<div style="height: 700px;"> </li> </ul> </div> - + <div class="fd-popover__body-footer"> <div class="fd-bar fd-bar--footer"> <div class="fd-bar__right"> @@ -133,13 +133,13 @@ export const shellbar = () => `<div style="height: 700px;"> </div> `; -shellbar.parameters = { +Shellbar.parameters = { docs: { storyDescription: 'The user menu button is typically displayed within a Shellbar on the far-right side.' } }; -export const navigation = () => `<div class="fddocs-container" style="margin-bottom: 650px"> +export const Navigation = () => `<div class="fddocs-container" style="margin-bottom: 650px"> <div class="fd-popover fd-popover--right fd-user-menu"> <div class="fd-popover__control"> <span @@ -282,7 +282,7 @@ export const navigation = () => `<div class="fddocs-container" style="margin-bot <div class="fd-input-group"> <input class="fd-input fd-input--compact fd-input-group__input" type="text" id="aqwsde118" name="" aria-label="Search" placeholder="Search"> <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--compact"> - <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent" aria-label="Search"> + <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent" aria-label="Search"> <i class="sap-icon--search"></i> </button> </span> @@ -365,9 +365,9 @@ export const navigation = () => `<div class="fddocs-container" style="margin-bot </div> `; -navigation.storyName = 'In-Place Navigation'; +Navigation.storyName = 'In-Place Navigation'; -navigation.parameters = { +Navigation.parameters = { docs: { storyDescription: `Menu with an sub-navigation that can be used for items that can be further grouped under a level but not necessarily visible to user always.<br> Follow the same template for the sub-navigation as you would for a normal menu. The same Popover body and footer work for the sub-navigation items too. @@ -375,7 +375,7 @@ navigation.parameters = { } }; -export const thirdPartyContent = () => `<div class="fddocs-container" style="margin-bottom: 700px"> +export const ThirdPartyContent = () => `<div class="fddocs-container" style="margin-bottom: 700px"> <div class="fd-popover fd-popover--right fd-user-menu"> <div class="fd-popover__control"> <span @@ -752,9 +752,9 @@ export const thirdPartyContent = () => `<div class="fddocs-container" style="mar </div> `; -thirdPartyContent.storyName = '3rd Party Content'; +ThirdPartyContent.storyName = '3rd Party Content'; -export const compact = () => `<div class="fddocs-container" style="margin-bottom: 550px"> +export const Compact = () => `<div class="fddocs-container" style="margin-bottom: 550px"> <div class="fd-popover fd-popover--right fd-user-menu fd-user-menu--compact"> <div class="fd-popover__control"> <span @@ -897,7 +897,7 @@ export const compact = () => `<div class="fddocs-container" style="margin-bottom <div class="fd-input-group"> <input class="fd-input fd-input--compact fd-input-group__input" type="text" id="aqwsde118" name="" aria-label="Search" placeholder="Search"> <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--compact"> - <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent" aria-label="Search"> + <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent" aria-label="Search"> <i class="sap-icon--search"></i> </button> </span> diff --git a/stories/vertical-navigation/vertical-navigation.stories.js b/stories/vertical-navigation/vertical-navigation.stories.js index de8863bdad..80d51b63e8 100644 --- a/stories/vertical-navigation/vertical-navigation.stories.js +++ b/stories/vertical-navigation/vertical-navigation.stories.js @@ -8,7 +8,7 @@ This navigation type is composed by two distinct item levels:<br> - First Level items - always visible, can be either navigable in and of themselves or be a container for Second Level items (it should not be both) - Second Level items → Are always contained by a First Level item, and can have their visibility toggled by this First Level item. They are always only navigable -##Usage +##Usage **Use the vertical navigation if:** - You need to display global navigation structures of up to two levels. @@ -33,7 +33,7 @@ Vertical navigation can be viewed in three different states: } }; -export const cozy = () => `<div class="fd-vertical-nav"> +export const Cozy = () => `<div class="fd-vertical-nav"> <nav class="fd-vertical-nav__main-navigation" aria-label="Main Menu"> <ul class="fd-list" aria-label="Main Menu List"> <li class="fd-list__navigation-item" tabindex="0"> @@ -75,9 +75,9 @@ export const cozy = () => `<div class="fd-vertical-nav"> </div> `; -cozy.storyName = 'Default'; +Cozy.storyName = 'Default'; -cozy.parameters = { +Cozy.parameters = { docs: { iframeHeight: 700, storyDescription: ` @@ -86,7 +86,7 @@ The default vertical navigation is comprised of several navigation list items. } }; -export const condensed = () => `<div class="fd-vertical-nav fd-vertical-nav--condensed"> +export const Condensed = () => `<div class="fd-vertical-nav fd-vertical-nav--condensed"> <nav class="fd-vertical-nav__main-navigation" aria-label="Main Menu 2"> <ul class="fd-list" aria-label="Main Menu List 2"> <li class="fd-list__navigation-item fd-list__navigation-item--condensed" tabindex="0"> @@ -110,9 +110,7 @@ export const condensed = () => `<div class="fd-vertical-nav fd-vertical-nav--con </div> `; -condensed.storyName = 'Condensed'; - -condensed.parameters = { +Condensed.parameters = { docs: { iframeHeight: 400, storyDescription: ` @@ -121,7 +119,7 @@ In condensed mode, only icons are shown unless some navigation items have second } }; -export const text = () => `<div class="fd-vertical-nav"> +export const Text = () => `<div class="fd-vertical-nav"> <nav class="fd-vertical-nav__main-navigation" aria-label="Main Menu 3"> <ul class="fd-list" aria-label="Main Menu List 3"> <li class="fd-list__navigation-item" tabindex="0"> @@ -159,9 +157,9 @@ export const text = () => `<div class="fd-vertical-nav"> </div> `; -text.storyName = 'Text Only'; +Text.storyName = 'Text Only'; -text.parameters = { +Text.parameters = { docs: { iframeHeight: 700, storyDescription: ` @@ -170,7 +168,7 @@ A vertical navigation list does not need to have icons. However this is only ava } }; -export const indication = () => `<div class="fd-vertical-nav"> +export const Indication = () => `<div class="fd-vertical-nav"> <nav class="fd-vertical-nav__main-navigation" aria-label="Main Menu 3"> <ul class="fd-list" aria-label="Main Menu List 3"> <li class="fd-list__navigation-item" tabindex="0"> @@ -205,7 +203,7 @@ export const indication = () => `<div class="fd-vertical-nav"> </li> <li class="fd-list__navigation-item fd-list__navigation-item--condensed" id="parentCalendarButton" onclick="toggleCondensedVerticalNavSubmenu(event)"> <i role="presentation" class="fd-list__navigation-item-icon sap-icon--calendar"></i> - <button class="fd-list__navigation-item-arrow sap-icon--navigation-down-arrow" aria-label="Expand second submenu 4"></button> + <button class="fd-list__navigation-item-arrow sap-icon--navigation-down-arrow" aria-label="Expand second submenu 4"></button> <span class="fd-list__navigation-item-indicator"></span> <div class="fd-popover__body fd-popover__body--no-arrow fd-list__navigation-item-popover--first-level" aria-hidden="false" id="popoverA1"> <ul class="fd-list"> @@ -240,9 +238,9 @@ export const indication = () => `<div class="fd-vertical-nav"> </div> `; -indication.storyName = 'Navigation Indication'; +Indication.storyName = 'Navigation Indication'; -indication.parameters = { +Indication.parameters = { docs: { iframeHeight: 700, storyDescription: ` @@ -252,7 +250,7 @@ All the possible combinations of navigation indication are visualized below. Whe }; -export const grouping = () => `<div class="fd-vertical-nav"> +export const Grouping = () => `<div class="fd-vertical-nav"> <nav class="fd-vertical-nav__main-navigation" aria-label="Main Menu 5"> <ul class="fd-list" aria-label="Main Menu List 5"> <li class="fd-list__navigation-item" tabindex="0"> @@ -312,9 +310,7 @@ export const grouping = () => `<div class="fd-vertical-nav"> </div> `; -grouping.storyName = 'Grouping'; - -grouping.parameters = { +Grouping.parameters = { docs: { iframeHeight: 700, storyDescription: `The Vertical Navigation items can be further visually grouped using the Group Header List Item. diff --git a/stories/wizard/wizard.stories.js b/stories/wizard/wizard.stories.js index d486cdbc09..79a785add3 100644 --- a/stories/wizard/wizard.stories.js +++ b/stories/wizard/wizard.stories.js @@ -96,7 +96,7 @@ There are multiple connector types that can be displayed depending on the steps } }; -export const defaultExample = () => `<section class="fd-wizard"> +export const DefaultExample = () => `<section class="fd-wizard"> <nav class="fd-wizard__navigation" aria-label="Wizard Navigation 1"> <ul class="fd-wizard__progress-bar"> <li class="fd-wizard__step fd-wizard__step--completed"> @@ -169,8 +169,8 @@ export const defaultExample = () => `<section class="fd-wizard"> </section> `; -defaultExample.storyName = 'Default'; -defaultExample.parameters = { +DefaultExample.storyName = 'Default'; +DefaultExample.parameters = { docs: { iframeHeight: 950, storyDescription: `The default wizard displays a walkthrough screen with forms split into sections. Once the user fills all of the necessary input fields, a button is displayed to go to the next section. A *Cancel* button is displayed in the footer, so the user can exit the wizard at any point during the process. However, if a user exits the wizard after adding their input, they will receive a warning that their information will be lost. @@ -178,7 +178,7 @@ defaultExample.parameters = { } }; -export const customized = () => `<section class="fd-wizard"> +export const Customized = () => `<section class="fd-wizard"> <nav class="fd-wizard__navigation" aria-label="Wizard Navigation 2"> <ul class="fd-wizard__progress-bar fd-wizard__progress-bar--md"> <li class="fd-wizard__step fd-wizard__step--completed"> @@ -240,7 +240,7 @@ export const customized = () => `<section class="fd-wizard"> </section> `; -customized.parameters = { +Customized.parameters = { docs: { iframeHeight: 950, storyDescription: `The wizard component can be customized with modifier classes. For instance, the example below has several modified elements: @@ -256,7 +256,7 @@ customized.parameters = { } }; -export const responsive = () => `<section class="fd-wizard"> +export const Responsive = () => `<section class="fd-wizard"> <nav class="fd-wizard__navigation" aria-label="Wizard Navigation 3"> <ul class="fd-wizard__progress-bar fd-wizard__progress-bar--xl"> <li class="fd-wizard__step fd-wizard__step--completed"> @@ -619,7 +619,7 @@ export const responsive = () => `<section class="fd-wizard"> </section> `; -responsive.parameters = { +Responsive.parameters = { docs: { iframeHeight: 950, storyDescription: `If there is sufficient horizontal space, all labels are shown. @@ -629,7 +629,7 @@ The unselected steps should stack on top of each other when there is limited scr } }; -export const revertedSteps = () => `<section class="fd-wizard"> +export const RevertedSteps = () => `<section class="fd-wizard"> <nav class="fd-wizard__navigation" aria-label="Wizard Navigation 3"> <ul class="fd-wizard__progress-bar fd-wizard__progress-bar--xl"> <li class="fd-wizard__step fd-wizard__step--completed"> @@ -992,14 +992,14 @@ export const revertedSteps = () => `<section class="fd-wizard"> </section> `; -revertedSteps.parameters = { +RevertedSteps.parameters = { docs: { iframeHeight: 950, storyDescription: 'To indicate reverted steps, use combination of `fd-wizard__step--completed` and `fd-wizard__step--upcoming` classes.' } }; -export const mobile = () => `<div style="display: flex; justify-content: space-around; flex-wrap: wrap;"> +export const Mobile = () => `<div style="display: flex; justify-content: space-around; flex-wrap: wrap;"> <div style="margin: 1rem;"> <h4>Next Step button after content</h4> <section class="fd-wizard" style="max-width: 300px;"> @@ -1319,7 +1319,7 @@ export const mobile = () => `<div style="display: flex; justify-content: space-a </div> `; -mobile.parameters = { +Mobile.parameters = { docs: { iframeHeight: 950, storyDescription: `For mobile devices, add the \`fd-bar--floating-footer\` modifier class to achieve a floating footer. modifier class to display a floating footer. The *Next Step* button is placed after the content whenever possible. However, it can be placed above the floating footer by adding the \`fd-wizard__next-step--floating\` modifier class. From 09312523497bd3c5b8b09092ac8e30f54081ba8f Mon Sep 17 00:00:00 2001 From: Platon Rov <platon.rov@gmail.com> Date: Wed, 29 Dec 2021 15:56:30 +0200 Subject: [PATCH 3/4] test: storyshots update --- .../action-bar.stories.storyshot | 2 +- .../action-sheet.stories.storyshot | 4 +- .../avatar-group.stories.storyshot | 16 +- .../__snapshots__/button.stories.storyshot | 8 +- .../card/__snapshots__/card.stories.storyshot | 2 +- .../datepicker.stories.storyshot | 26 +-- .../__snapshots__/dialog.stories.storyshot | 2 +- .../dnd-icon-tab-bar.stories.storyshot | 8 +- .../dynamic-page.stories.storyshot | 174 +++++++------- .../__snapshots__/facets.stories.storyshot | 46 ++-- .../__snapshots__/feed-list.stories.storyshot | 68 +++--- .../file-uploader.stories.storyshot | 2 +- .../__snapshots__/fn-avatar.stories.storyshot | 32 +-- .../__snapshots__/fn-button.stories.storyshot | 12 +- .../__snapshots__/fn-dialog.stories.storyshot | 2 +- .../__snapshots__/fn-link.stories.storyshot | 2 +- .../__snapshots__/fn-tabs.stories.storyshot | 6 +- .../__snapshots__/form-grid.stories.storyshot | 16 +- .../form-group.stories.storyshot | 2 +- .../icon-tab-bar.stories.storyshot | 190 ++++++++-------- .../input-group.stories.storyshot | 26 +-- .../layout-grid.stories.storyshot | 104 ++++----- .../link/__snapshots__/link.stories.storyshot | 4 +- .../__snapshots__/list-grid.stories.storyshot | 14 +- .../byline-list.stories.storyshot | 24 +- .../message-box.stories.storyshot | 10 +- .../message-page.stories.storyshot | 14 +- .../multi-combo-box.stories.storyshot | 8 +- .../multi-input.stories.storyshot | 8 +- .../notification.stories.storyshot | 2 +- .../object-list.stories.storyshot | 32 +-- .../page-footer.stories.storyshot | 8 +- .../page/__snapshots__/page.stories.storyshot | 12 +- .../__snapshots__/panel.stories.storyshot | 68 +++--- .../progress-indicator.stories.storyshot | 16 +- .../quick-view.stories.storyshot | 18 +- .../rating-indicator.stories.storyshot | 214 +++++++++--------- .../__snapshots__/section.stories.storyshot | 22 +- .../__snapshots__/select.stories.storyshot | 14 +- .../__snapshots__/shellbar.stories.storyshot | 8 +- .../side-navigation.stories.storyshot | 40 ++-- .../status-indicator.stories.storyshot | 22 +- .../step-input.stories.storyshot | 52 ++--- .../__snapshots__/table.stories.storyshot | 26 +-- .../text/__snapshots__/text.stories.storyshot | 8 +- .../time-picker.stories.storyshot | 2 +- .../time/__snapshots__/time.stories.storyshot | 28 +-- .../tool-header.stories.storyshot | 18 +- .../__snapshots__/toolbar.stories.storyshot | 2 +- .../__snapshots__/user-menu.stories.storyshot | 18 +- .../vertical-navigation.stories.storyshot | 2 +- 51 files changed, 732 insertions(+), 732 deletions(-) diff --git a/stories/action-bar/__snapshots__/action-bar.stories.storyshot b/stories/action-bar/__snapshots__/action-bar.stories.storyshot index 1df0631540..32ae9dab94 100644 --- a/stories/action-bar/__snapshots__/action-bar.stories.storyshot +++ b/stories/action-bar/__snapshots__/action-bar.stories.storyshot @@ -421,7 +421,7 @@ exports[`Storyshots Components/Action Bar Mobile 1`] = ` <div class="fd-action-bar fd-action-bar--s" > - + <div class="fd-action-bar__header" diff --git a/stories/action-sheet/__snapshots__/action-sheet.stories.storyshot b/stories/action-sheet/__snapshots__/action-sheet.stories.storyshot index 7f3596505c..b65478ba0c 100644 --- a/stories/action-sheet/__snapshots__/action-sheet.stories.storyshot +++ b/stories/action-sheet/__snapshots__/action-sheet.stories.storyshot @@ -384,7 +384,7 @@ exports[`Storyshots Components/Action Sheet Mobile 1`] = ` > Decide Later </span> - + </button> @@ -428,7 +428,7 @@ exports[`Storyshots Components/Action Sheet Mobile 1`] = ` exports[`Storyshots Components/Action Sheet Tablet 1`] = ` <section> - + <div class="fd-popover" diff --git a/stories/avatar-group/__snapshots__/avatar-group.stories.storyshot b/stories/avatar-group/__snapshots__/avatar-group.stories.storyshot index 789ad27e6b..0d32dbec24 100644 --- a/stories/avatar-group/__snapshots__/avatar-group.stories.storyshot +++ b/stories/avatar-group/__snapshots__/avatar-group.stories.storyshot @@ -141,7 +141,7 @@ exports[`Storyshots Components/Avatar Group Group Type 1`] = ` </div> - + <button class="fd-button fd-avatar-group__more-button fd-avatar-group__more-button--m" @@ -165,7 +165,7 @@ exports[`Storyshots Components/Avatar Group Group Type 1`] = ` </div> - + <div aria-hidden="false" @@ -211,7 +211,7 @@ exports[`Storyshots Components/Avatar Group Group Type 1`] = ` </div> - + <div class="fd-avatar-group__overflow-body" @@ -599,7 +599,7 @@ exports[`Storyshots Components/Avatar Group Individual Type 1`] = ` </div> - + <div class="fd-quick-view__content" @@ -837,7 +837,7 @@ exports[`Storyshots Components/Avatar Group Individual Type 1`] = ` </div> - + <div class="fd-quick-view__content" @@ -1065,7 +1065,7 @@ exports[`Storyshots Components/Avatar Group Individual Type 1`] = ` </div> - + <div class="fd-quick-view__content" @@ -1295,7 +1295,7 @@ exports[`Storyshots Components/Avatar Group Individual Type 1`] = ` </div> - + <div class="fd-quick-view__content" @@ -1490,7 +1490,7 @@ exports[`Storyshots Components/Avatar Group Individual Type 1`] = ` </div> - + <div aria-hidden="true" diff --git a/stories/button/__snapshots__/button.stories.storyshot b/stories/button/__snapshots__/button.stories.storyshot index e976a07bd5..3879e16f20 100644 --- a/stories/button/__snapshots__/button.stories.storyshot +++ b/stories/button/__snapshots__/button.stories.storyshot @@ -19,7 +19,7 @@ exports[`Storyshots Components/Button Button styles 1`] = ` <div class="fddocs-container fddocs-button-container" > - + <button class="fd-button" @@ -139,7 +139,7 @@ exports[`Storyshots Components/Button Toggle button 1`] = ` <div class="fddocs-container fddocs-button-container" > - + <button class="fd-button" @@ -248,7 +248,7 @@ exports[`Storyshots Components/Button Toggle button 1`] = ` <div class="fddocs-container fddocs-button-container" > - + <button class="fd-button fd-button--toggled" @@ -357,7 +357,7 @@ exports[`Storyshots Components/Button Toggle button 1`] = ` <div class="fddocs-container fddocs-button-container" > - + <button class="fd-button fd-button--toggled" diff --git a/stories/card/__snapshots__/card.stories.storyshot b/stories/card/__snapshots__/card.stories.storyshot index 9e587041b6..5ab91cef79 100644 --- a/stories/card/__snapshots__/card.stories.storyshot +++ b/stories/card/__snapshots__/card.stories.storyshot @@ -319,7 +319,7 @@ exports[`Storyshots Components/Card Analytical card 1`] = ` <div class="fd-numeric-content__scale" > - + <i aria-label="decrease" diff --git a/stories/datepicker/__snapshots__/datepicker.stories.storyshot b/stories/datepicker/__snapshots__/datepicker.stories.storyshot index 09b1c5d1af..5741ffbbb4 100644 --- a/stories/datepicker/__snapshots__/datepicker.stories.storyshot +++ b/stories/datepicker/__snapshots__/datepicker.stories.storyshot @@ -115,7 +115,7 @@ exports[`Storyshots Patterns/Date Picker Default And Compact Sizes 1`] = ` aria-label="Previous" class="fd-button fd-button--transparent" > - + <i class="sap-icon--slim-arrow-left" @@ -169,7 +169,7 @@ exports[`Storyshots Patterns/Date Picker Default And Compact Sizes 1`] = ` aria-label="Next" class="fd-button fd-button--transparent" > - + <i class="sap-icon--slim-arrow-right" @@ -1075,7 +1075,7 @@ exports[`Storyshots Patterns/Date Picker Default And Compact Sizes 1`] = ` aria-label="Previous" class="fd-button fd-button--transparent fd-button--compact" > - + <i class="sap-icon--slim-arrow-left" @@ -1967,7 +1967,7 @@ exports[`Storyshots Patterns/Date Picker Mobile landscape mode with today naviga class="fd-button fd-button--transparent" type="button" > - + <i class="sap-icon--slim-arrow-left" @@ -2022,7 +2022,7 @@ exports[`Storyshots Patterns/Date Picker Mobile landscape mode with today naviga class="fd-button fd-button--transparent" type="button" > - + <i class="sap-icon--slim-arrow-right" @@ -3122,7 +3122,7 @@ exports[`Storyshots Patterns/Date Picker Mobile portrait mode with today navigat class="fd-button fd-button--transparent" type="button" > - + <i class="sap-icon--slim-arrow-left" @@ -3177,7 +3177,7 @@ exports[`Storyshots Patterns/Date Picker Mobile portrait mode with today navigat class="fd-button fd-button--transparent" type="button" > - + <i class="sap-icon--slim-arrow-right" @@ -4192,7 +4192,7 @@ exports[`Storyshots Patterns/Date Picker Today Navigation Button 1`] = ` toggleElAttrs('smniaof7ahfs', ['aria-expanded']); " > - + <i class="sap-icon--appointment-2" @@ -4243,7 +4243,7 @@ exports[`Storyshots Patterns/Date Picker Today Navigation Button 1`] = ` aria-label="Previous" class="fd-button fd-button--transparent" > - + <i class="sap-icon--slim-arrow-left" @@ -4297,7 +4297,7 @@ exports[`Storyshots Patterns/Date Picker Today Navigation Button 1`] = ` aria-label="Next" class="fd-button fd-button--transparent" > - + <i class="sap-icon--slim-arrow-right" @@ -5184,7 +5184,7 @@ exports[`Storyshots Patterns/Date Picker Today Selection Button 1`] = ` toggleElAttrs('mfapof8aosdusjd', ['aria-expanded']); " > - + <i class="sap-icon--appointment-2" @@ -5235,7 +5235,7 @@ exports[`Storyshots Patterns/Date Picker Today Selection Button 1`] = ` aria-label="Previous" class="fd-button fd-button--transparent" > - + <i class="sap-icon--slim-arrow-left" @@ -5289,7 +5289,7 @@ exports[`Storyshots Patterns/Date Picker Today Selection Button 1`] = ` aria-label="Next" class="fd-button fd-button--transparent" > - + <i class="sap-icon--slim-arrow-right" diff --git a/stories/dialog/__snapshots__/dialog.stories.storyshot b/stories/dialog/__snapshots__/dialog.stories.storyshot index 5264681238..9eb3cc01d1 100644 --- a/stories/dialog/__snapshots__/dialog.stories.storyshot +++ b/stories/dialog/__snapshots__/dialog.stories.storyshot @@ -248,7 +248,7 @@ exports[`Storyshots Components/Dialog Sizes 1`] = ` </div> - + </section> diff --git a/stories/dnd-icon-tab-bar/__snapshots__/dnd-icon-tab-bar.stories.storyshot b/stories/dnd-icon-tab-bar/__snapshots__/dnd-icon-tab-bar.stories.storyshot index 9aaba84619..0ad1d2a6d8 100644 --- a/stories/dnd-icon-tab-bar/__snapshots__/dnd-icon-tab-bar.stories.storyshot +++ b/stories/dnd-icon-tab-bar/__snapshots__/dnd-icon-tab-bar.stories.storyshot @@ -16,7 +16,7 @@ exports[`Storyshots Dev/Drag and Drop Icon Tab Bar Hovered tab state 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item fd-icon-tab-bar__item--dnd-hovered" @@ -100,7 +100,7 @@ exports[`Storyshots Dev/Drag and Drop Icon Tab Bar Hovered tab state 1`] = ` </li> </ul> - + </div> @@ -124,7 +124,7 @@ exports[`Storyshots Dev/Drag and Drop Icon Tab Bar Separator hovered tab state 1 class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -208,7 +208,7 @@ exports[`Storyshots Dev/Drag and Drop Icon Tab Bar Separator hovered tab state 1 </li> </ul> - + </div> diff --git a/stories/dynamic-page/__snapshots__/dynamic-page.stories.storyshot b/stories/dynamic-page/__snapshots__/dynamic-page.stories.storyshot index 237de89057..d42a375d76 100644 --- a/stories/dynamic-page/__snapshots__/dynamic-page.stories.storyshot +++ b/stories/dynamic-page/__snapshots__/dynamic-page.stories.storyshot @@ -313,8 +313,8 @@ exports[`Storyshots Layouts/Dynamic Page Collapsed Header (mobile) 1`] = ` role="region" > - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, - delectus necessitatibus incidunt numquam asperiores tenetur iure. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, + delectus necessitatibus incidunt numquam asperiores tenetur iure. Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis? </div> @@ -437,7 +437,7 @@ exports[`Storyshots Layouts/Dynamic Page Collapsed Header (mobile) 1`] = ` </ul> - + </div> @@ -457,9 +457,9 @@ exports[`Storyshots Layouts/Dynamic Page Collapsed Header (mobile) 1`] = ` role="tabpanel" > - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> @@ -472,9 +472,9 @@ exports[`Storyshots Layouts/Dynamic Page Collapsed Header (mobile) 1`] = ` role="tabpanel" > - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. </div> @@ -571,7 +571,7 @@ exports[`Storyshots Layouts/Dynamic Page Collapsed Header 1`] = ` <nav aria-label="Breadcrumbs" > - + <ul class="fd-dynamic-page__breadcrumb fd-breadcrumb" @@ -766,8 +766,8 @@ exports[`Storyshots Layouts/Dynamic Page Collapsed Header 1`] = ` role="region" > - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, - delectus necessitatibus incidunt numquam asperiores tenetur iure. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, + delectus necessitatibus incidunt numquam asperiores tenetur iure. Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis? </div> @@ -842,9 +842,9 @@ exports[`Storyshots Layouts/Dynamic Page Collapsed Header 1`] = ` class="fd-dynamic-page__content" > - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> @@ -1081,8 +1081,8 @@ exports[`Storyshots Layouts/Dynamic Page Desktop 1`] = ` role="region" > - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, - delectus necessitatibus incidunt numquam asperiores tenetur iure. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, + delectus necessitatibus incidunt numquam asperiores tenetur iure. Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis? </div> @@ -1239,9 +1239,9 @@ exports[`Storyshots Layouts/Dynamic Page Desktop 1`] = ` role="tabpanel" > - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> @@ -1254,25 +1254,25 @@ exports[`Storyshots Layouts/Dynamic Page Desktop 1`] = ` role="tabpanel" > - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. </div> @@ -1568,8 +1568,8 @@ exports[`Storyshots Layouts/Dynamic Page Expanded Header 1`] = ` role="region" > - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, - delectus necessitatibus incidunt numquam asperiores tenetur iure. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, + delectus necessitatibus incidunt numquam asperiores tenetur iure. Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis? </div> @@ -1644,9 +1644,9 @@ exports[`Storyshots Layouts/Dynamic Page Expanded Header 1`] = ` class="fd-dynamic-page__content" > - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> @@ -1964,8 +1964,8 @@ exports[`Storyshots Layouts/Dynamic Page Mobile 1`] = ` role="region" > - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, - delectus necessitatibus incidunt numquam asperiores tenetur iure. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, + delectus necessitatibus incidunt numquam asperiores tenetur iure. Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis? </div> @@ -2088,7 +2088,7 @@ exports[`Storyshots Layouts/Dynamic Page Mobile 1`] = ` </ul> - + </div> @@ -2108,9 +2108,9 @@ exports[`Storyshots Layouts/Dynamic Page Mobile 1`] = ` role="tabpanel" > - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> @@ -2123,9 +2123,9 @@ exports[`Storyshots Layouts/Dynamic Page Mobile 1`] = ` role="tabpanel" > - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. </div> @@ -2423,8 +2423,8 @@ exports[`Storyshots Layouts/Dynamic Page Summary Line (mobile) 1`] = ` role="region" > - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, - delectus necessitatibus incidunt numquam asperiores tenetur iure. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, + delectus necessitatibus incidunt numquam asperiores tenetur iure. Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis? </div> @@ -2549,13 +2549,13 @@ exports[`Storyshots Layouts/Dynamic Page Summary Line (mobile) 1`] = ` </ul> - + </div> </header> - + <div class="fd-dynamic-page__content" @@ -2569,9 +2569,9 @@ exports[`Storyshots Layouts/Dynamic Page Summary Line (mobile) 1`] = ` role="tabpanel" > - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> @@ -2596,9 +2596,9 @@ exports[`Storyshots Layouts/Dynamic Page Summary Line (mobile) 1`] = ` <br /> - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. </div> @@ -2914,8 +2914,8 @@ exports[`Storyshots Layouts/Dynamic Page Tablet 1`] = ` role="region" > - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, - delectus necessitatibus incidunt numquam asperiores tenetur iure. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, + delectus necessitatibus incidunt numquam asperiores tenetur iure. Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis? </div> @@ -3072,9 +3072,9 @@ exports[`Storyshots Layouts/Dynamic Page Tablet 1`] = ` role="tabpanel" > - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> @@ -3087,25 +3087,25 @@ exports[`Storyshots Layouts/Dynamic Page Tablet 1`] = ` role="tabpanel" > - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. </div> @@ -3697,7 +3697,7 @@ exports[`Storyshots Layouts/Dynamic Page With header facets (mobile) 1`] = ` </div> - + <div aria-labelledby="kvFacetTitle13" @@ -3930,7 +3930,7 @@ exports[`Storyshots Layouts/Dynamic Page With header facets (mobile) 1`] = ` </ul> - + </div> @@ -3950,9 +3950,9 @@ exports[`Storyshots Layouts/Dynamic Page With header facets (mobile) 1`] = ` role="tabpanel" > - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> @@ -3965,9 +3965,9 @@ exports[`Storyshots Layouts/Dynamic Page With header facets (mobile) 1`] = ` role="tabpanel" > - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. </div> @@ -4764,7 +4764,7 @@ exports[`Storyshots Layouts/Dynamic Page With header facets 1`] = ` </div> - + <div aria-labelledby="ratingFacetTitle3" @@ -4814,7 +4814,7 @@ exports[`Storyshots Layouts/Dynamic Page With header facets 1`] = ` for="2-rating-max-value-5-1" /> - + <input aria-label="2 star" @@ -4832,7 +4832,7 @@ exports[`Storyshots Layouts/Dynamic Page With header facets 1`] = ` for="2-rating-max-value-5-2" /> - + <input aria-label="3 star" @@ -4849,7 +4849,7 @@ exports[`Storyshots Layouts/Dynamic Page With header facets 1`] = ` for="2-rating-max-value-5-3" /> - + <input aria-label="4 star" @@ -4866,7 +4866,7 @@ exports[`Storyshots Layouts/Dynamic Page With header facets 1`] = ` for="2-rating-max-value-5-4" /> - + <input aria-label="5 star" @@ -5090,9 +5090,9 @@ exports[`Storyshots Layouts/Dynamic Page With header facets 1`] = ` role="tabpanel" > - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> @@ -5105,25 +5105,25 @@ exports[`Storyshots Layouts/Dynamic Page With header facets 1`] = ` role="tabpanel" > - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. </div> @@ -5217,7 +5217,7 @@ exports[`Storyshots Layouts/Dynamic Page Without pin 1`] = ` <nav aria-label="Breadcrumbs" > - + <ul class="fd-dynamic-page__breadcrumb fd-breadcrumb" @@ -5412,8 +5412,8 @@ exports[`Storyshots Layouts/Dynamic Page Without pin 1`] = ` role="region" > - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, - delectus necessitatibus incidunt numquam asperiores tenetur iure. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, + delectus necessitatibus incidunt numquam asperiores tenetur iure. Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis? </div> @@ -5474,9 +5474,9 @@ exports[`Storyshots Layouts/Dynamic Page Without pin 1`] = ` class="fd-dynamic-page__content" > - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> diff --git a/stories/facets/__snapshots__/facets.stories.storyshot b/stories/facets/__snapshots__/facets.stories.storyshot index b997cd4bbe..d0b7708eb9 100644 --- a/stories/facets/__snapshots__/facets.stories.storyshot +++ b/stories/facets/__snapshots__/facets.stories.storyshot @@ -1156,7 +1156,7 @@ exports[`Storyshots Dev/Facets Facets in Object Page 1`] = ` </div> - + <div aria-labelledby="ratingFacetTitle3" @@ -1206,7 +1206,7 @@ exports[`Storyshots Dev/Facets Facets in Object Page 1`] = ` for="2-rating-max-value-5-1" /> - + <input aria-label="2 star" @@ -1224,7 +1224,7 @@ exports[`Storyshots Dev/Facets Facets in Object Page 1`] = ` for="2-rating-max-value-5-2" /> - + <input aria-label="3 star" @@ -1241,7 +1241,7 @@ exports[`Storyshots Dev/Facets Facets in Object Page 1`] = ` for="2-rating-max-value-5-3" /> - + <input aria-label="4 star" @@ -1258,7 +1258,7 @@ exports[`Storyshots Dev/Facets Facets in Object Page 1`] = ` for="2-rating-max-value-5-4" /> - + <input aria-label="5 star" @@ -1486,9 +1486,9 @@ exports[`Storyshots Dev/Facets Facets in Object Page 1`] = ` role="tabpanel" > - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> @@ -1501,25 +1501,25 @@ exports[`Storyshots Dev/Facets Facets in Object Page 1`] = ` role="tabpanel" > - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. </div> @@ -2104,7 +2104,7 @@ exports[`Storyshots Dev/Facets Facets in Object Page Mobile 1`] = ` </div> - + <div aria-labelledby="kvFacetTitle13" @@ -2337,7 +2337,7 @@ exports[`Storyshots Dev/Facets Facets in Object Page Mobile 1`] = ` </ul> - + </div> @@ -2357,9 +2357,9 @@ exports[`Storyshots Dev/Facets Facets in Object Page Mobile 1`] = ` role="tabpanel" > - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? </div> @@ -2372,9 +2372,9 @@ exports[`Storyshots Dev/Facets Facets in Object Page Mobile 1`] = ` role="tabpanel" > - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. - Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti + Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. </div> diff --git a/stories/feed-list/__snapshots__/feed-list.stories.storyshot b/stories/feed-list/__snapshots__/feed-list.stories.storyshot index 64be8412fc..9068291fdf 100644 --- a/stories/feed-list/__snapshots__/feed-list.stories.storyshot +++ b/stories/feed-list/__snapshots__/feed-list.stories.storyshot @@ -19,11 +19,11 @@ exports[`Storyshots Components/Feed List and Item Actions 1`] = ` style="background-image: url(https://avatars.dicebear.com/api/human/fe.svg?m=6&b=%23f5f0f0&mood[]=surprised)" title="John Doe" > - + </div> - - + + <div class="fd-feed-list__content" @@ -197,7 +197,7 @@ exports[`Storyshots Components/Feed List and Item Actions 1`] = ` </p> - + <div class="fd-feed-list__footer" @@ -222,7 +222,7 @@ exports[`Storyshots Components/Feed List and Item Actions 1`] = ` </div> - + </li> @@ -256,7 +256,7 @@ exports[`Storyshots Components/Feed List and Item Borderless group 1`] = ` </div> - + <div class="fd-feed-list__content" @@ -276,7 +276,7 @@ exports[`Storyshots Components/Feed List and Item Borderless group 1`] = ` <span> - Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. + Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. </span> </p> @@ -309,7 +309,7 @@ exports[`Storyshots Components/Feed List and Item Borderless group 1`] = ` </li> - + <li class="fd-feed-list__body" @@ -323,11 +323,11 @@ exports[`Storyshots Components/Feed List and Item Borderless group 1`] = ` style="background-image: url(https://avatars.dicebear.com/api/human/fe.svg?m=6&b=%23f5f0f0&mood[]=surprised)" title="John Doe" > - + </div> - + <div class="fd-feed-list__content" @@ -347,7 +347,7 @@ exports[`Storyshots Components/Feed List and Item Borderless group 1`] = ` <span> - Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. + Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. </span> </p> @@ -376,11 +376,11 @@ exports[`Storyshots Components/Feed List and Item Borderless group 1`] = ` </div> - + </li> - + <li class="fd-feed-list__body" @@ -394,7 +394,7 @@ exports[`Storyshots Components/Feed List and Item Borderless group 1`] = ` style="background-image: url(https://avatars.dicebear.com/api/male/john.svg?mood[]=happy)" title="John Doe" /> - + <div class="fd-feed-list__content" @@ -414,7 +414,7 @@ exports[`Storyshots Components/Feed List and Item Borderless group 1`] = ` <span> - Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. + Maecenas convallis velit quis felis dictum, in ultrices quam faucibus. </span> </p> @@ -474,7 +474,7 @@ exports[`Storyshots Components/Feed List and Item Linked 1`] = ` title="John Doe" /> - + <div class="fd-feed-list__content" @@ -497,7 +497,7 @@ exports[`Storyshots Components/Feed List and Item Linked 1`] = ` > Joe Doe: </a> - + </span> @@ -505,7 +505,7 @@ exports[`Storyshots Components/Feed List and Item Linked 1`] = ` </p> - + <div class="fd-feed-list__footer" @@ -572,7 +572,7 @@ exports[`Storyshots Components/Feed List and Item Mobile 1`] = ` style="background-image: url(https://avatars.dicebear.com/api/human/fe.svg?m=6&b=%23f5f0f0&mood[]=surprised)" title="John Doe" > - + </div> @@ -611,7 +611,7 @@ exports[`Storyshots Components/Feed List and Item Mobile 1`] = ` </div> - + </div> @@ -643,8 +643,8 @@ exports[`Storyshots Components/Feed List and Item Mobile 1`] = ` </div> - - + + <div class="fd-feed-list__content" @@ -802,7 +802,7 @@ exports[`Storyshots Components/Feed List and Item Mobile 1`] = ` </li> - + </ul> @@ -820,7 +820,7 @@ exports[`Storyshots Components/Feed List and Item No image 1`] = ` <li class="fd-feed-list__body" > - + <div class="fd-feed-list__content" @@ -842,7 +842,7 @@ exports[`Storyshots Components/Feed List and Item No image 1`] = ` </p> - + <div class="fd-feed-list__footer" @@ -924,7 +924,7 @@ exports[`Storyshots Components/Feed List and Item Placeholder image 1`] = ` </p> - + <div class="fd-feed-list__footer" @@ -977,7 +977,7 @@ exports[`Storyshots Components/Feed List and Item Show less 1`] = ` title="John Doe" /> - + <div class="fd-feed-list__content" @@ -1005,12 +1005,12 @@ exports[`Storyshots Components/Feed List and Item Show less 1`] = ` > Less </a> - + </span> </p> - + <div class="fd-feed-list__footer" @@ -1063,7 +1063,7 @@ exports[`Storyshots Components/Feed List and Item Show more 1`] = ` title="John Doe" /> - + <div class="fd-feed-list__content" @@ -1091,12 +1091,12 @@ exports[`Storyshots Components/Feed List and Item Show more 1`] = ` > More </a> - + </span> </p> - + <div class="fd-feed-list__footer" @@ -1148,11 +1148,11 @@ exports[`Storyshots Components/Feed List and Item Standard 1`] = ` style="background-image: url(https://avatars.dicebear.com/api/human/fe.svg?m=6&b=%23f5f0f0&mood[]=surprised)" title="John Doe" > - + </div> - + <div class="fd-feed-list__content" diff --git a/stories/file-uploader/__snapshots__/file-uploader.stories.storyshot b/stories/file-uploader/__snapshots__/file-uploader.stories.storyshot index ab3a4b31f2..439540a82a 100644 --- a/stories/file-uploader/__snapshots__/file-uploader.stories.storyshot +++ b/stories/file-uploader/__snapshots__/file-uploader.stories.storyshot @@ -162,7 +162,7 @@ exports[`Storyshots Components/File Uploader Default 1`] = ` type="text" /> - + <button aria-label="Select a file for uploading" diff --git a/stories/fn-avatar/__snapshots__/fn-avatar.stories.storyshot b/stories/fn-avatar/__snapshots__/fn-avatar.stories.storyshot index 599de43208..73fc13d7ef 100644 --- a/stories/fn-avatar/__snapshots__/fn-avatar.stories.storyshot +++ b/stories/fn-avatar/__snapshots__/fn-avatar.stories.storyshot @@ -73,7 +73,7 @@ exports[`Storyshots Experimental/Avatar Circle Decorative Avatar with Icon 1`] = XS </b> </div> - + </div> @@ -1701,7 +1701,7 @@ exports[`Storyshots Experimental/Avatar Circle Decorative Avatar with Thumbnail XS </b> </div> - + </div> @@ -1726,7 +1726,7 @@ exports[`Storyshots Experimental/Avatar Circle Decorative Avatar with Thumbnail </div> - + <div class="fn-avatar fn-avatar--circle fn-avatar--thumbnail fn-avatar--l" @@ -1744,7 +1744,7 @@ exports[`Storyshots Experimental/Avatar Circle Decorative Avatar with Thumbnail </div> - + <div class="fn-avatar fn-avatar--circle fn-avatar--thumbnail fn-avatar--m" @@ -1762,7 +1762,7 @@ exports[`Storyshots Experimental/Avatar Circle Decorative Avatar with Thumbnail </div> - + <div class="fn-avatar fn-avatar--circle fn-avatar--thumbnail fn-avatar--s" @@ -1780,7 +1780,7 @@ exports[`Storyshots Experimental/Avatar Circle Decorative Avatar with Thumbnail </div> - + <div class="fn-avatar fn-avatar--circle fn-avatar--thumbnail fn-avatar--xs" @@ -1878,7 +1878,7 @@ exports[`Storyshots Experimental/Avatar Circle Interactive Avatar with Icon 1`] XS </b> </div> - + </div> @@ -2874,7 +2874,7 @@ exports[`Storyshots Experimental/Avatar Circle Interactive Avatar with Initials :disabled </b> </div> - + </div> @@ -3622,7 +3622,7 @@ exports[`Storyshots Experimental/Avatar Circle Interactive Avatar with Thumbnail :disabled XS </b> </div> - + </div> @@ -3648,7 +3648,7 @@ exports[`Storyshots Experimental/Avatar Circle Interactive Avatar with Thumbnail </div> - + <div "="" @@ -3667,7 +3667,7 @@ exports[`Storyshots Experimental/Avatar Circle Interactive Avatar with Thumbnail </div> - + <div class="fn-avatar fn-avatar--circle fn-avatar--thumbnail fn-avatar--interactive fn-avatar--m is-active" @@ -3685,7 +3685,7 @@ exports[`Storyshots Experimental/Avatar Circle Interactive Avatar with Thumbnail </div> - + <div class="fn-avatar fn-avatar--circle fn-avatar--thumbnail fn-avatar--interactive fn-avatar--s is-focus" @@ -3703,7 +3703,7 @@ exports[`Storyshots Experimental/Avatar Circle Interactive Avatar with Thumbnail </div> - + <div class="fn-avatar fn-avatar--circle fn-avatar--thumbnail fn-avatar--interactive fn-avatar--xs is-disabled" @@ -3801,7 +3801,7 @@ exports[`Storyshots Experimental/Avatar Rounded Decorative Avatar with Icon 1`] XS </b> </div> - + </div> @@ -5434,7 +5434,7 @@ exports[`Storyshots Experimental/Avatar Rounded Interactive Avatar with Icon 1`] XS </b> </div> - + </div> @@ -6430,7 +6430,7 @@ exports[`Storyshots Experimental/Avatar Rounded Interactive Avatar with Initials :disabled </b> </div> - + </div> diff --git a/stories/fn-button/__snapshots__/fn-button.stories.storyshot b/stories/fn-button/__snapshots__/fn-button.stories.storyshot index 5c44d2caac..5fe69b6e6e 100644 --- a/stories/fn-button/__snapshots__/fn-button.stories.storyshot +++ b/stories/fn-button/__snapshots__/fn-button.stories.storyshot @@ -57,7 +57,7 @@ exports[`Storyshots Experimental/Button Icon Buttons 1`] = ` Icon-Only </b> </div> - + </div> @@ -461,7 +461,7 @@ exports[`Storyshots Experimental/Button Nested Buttons 1`] = ` Nested Button </b> </div> - + </div> @@ -670,7 +670,7 @@ exports[`Storyshots Experimental/Button Primary Buttons 1`] = ` Default </b> </div> - + </div> @@ -960,14 +960,14 @@ exports[`Storyshots Experimental/Button Secondary Buttons 1`] = ` Transparent </b> </div> - + <div> <b> Neutral </b> </div> - + </div> @@ -2507,7 +2507,7 @@ exports[`Storyshots Experimental/Button Toggle Buttons 1`] = ` Default </b> </div> - + </div> diff --git a/stories/fn-dialog/__snapshots__/fn-dialog.stories.storyshot b/stories/fn-dialog/__snapshots__/fn-dialog.stories.storyshot index 33fceef3de..e25991ec42 100644 --- a/stories/fn-dialog/__snapshots__/fn-dialog.stories.storyshot +++ b/stories/fn-dialog/__snapshots__/fn-dialog.stories.storyshot @@ -19,7 +19,7 @@ exports[`Storyshots Experimental/Dialog Dialog 1`] = ` width: 30%; height: auto; } - + </style> diff --git a/stories/fn-link/__snapshots__/fn-link.stories.storyshot b/stories/fn-link/__snapshots__/fn-link.stories.storyshot index 8619bea82b..896c76bdc4 100644 --- a/stories/fn-link/__snapshots__/fn-link.stories.storyshot +++ b/stories/fn-link/__snapshots__/fn-link.stories.storyshot @@ -50,7 +50,7 @@ exports[`Storyshots Experimental/Link Links 1`] = ` Default </b> </div> - + </div> diff --git a/stories/fn-tabs/__snapshots__/fn-tabs.stories.storyshot b/stories/fn-tabs/__snapshots__/fn-tabs.stories.storyshot index de32fefb53..24892c500c 100644 --- a/stories/fn-tabs/__snapshots__/fn-tabs.stories.storyshot +++ b/stories/fn-tabs/__snapshots__/fn-tabs.stories.storyshot @@ -156,7 +156,7 @@ exports[`Storyshots Experimental/Tabs Default 1`] = ` role="tab" tabindex="0" > - + <div class="fn-tabs__text" @@ -172,7 +172,7 @@ exports[`Storyshots Experimental/Tabs Default 1`] = ` class="fn-tabs__item is-disabled" role="tab" > - + <div class="fn-tabs__text" @@ -188,7 +188,7 @@ exports[`Storyshots Experimental/Tabs Default 1`] = ` class="fn-tabs__right-container" role="tab" > - + <button aria-label="More" diff --git a/stories/form-grid/__snapshots__/form-grid.stories.storyshot b/stories/form-grid/__snapshots__/form-grid.stories.storyshot index 4a1a90cc06..d68620f6c6 100644 --- a/stories/form-grid/__snapshots__/form-grid.stories.storyshot +++ b/stories/form-grid/__snapshots__/form-grid.stories.storyshot @@ -15,7 +15,7 @@ exports[`Storyshots Components/Forms/Form Grid Column Not Recommended 1`] = ` <div class="fd-row" > - + <div class="fd-col fd-col-lg--6 fd-col-xl--4 fd-col--wrap" @@ -2135,7 +2135,7 @@ exports[`Storyshots Components/Forms/Form Grid Layout variations 1`] = ` <div class="fd-row" > - + <div class="fd-col fd-col-xl--4 fd-col--wrap" @@ -2306,7 +2306,7 @@ exports[`Storyshots Components/Forms/Form Grid Layout variations 1`] = ` <div class="fd-row" > - + <div class="fd-col fd-col--wrap" @@ -3327,7 +3327,7 @@ exports[`Storyshots Components/Forms/Form Grid Multiple form [XL] 1`] = ` class="fd-col fd-col-xl--4 fd-col--wrap" > - + <div @@ -3866,7 +3866,7 @@ exports[`Storyshots Components/Forms/Form Grid Multiple form [XL] 1`] = ` </div> - + <div @@ -4184,7 +4184,7 @@ exports[`Storyshots Components/Forms/Form Grid Recommended layouts 1`] = ` <div class="fd-row" > - + <div class="fd-col fd-col-md--6 fd-col-lg--6 fd-col-xl--6 fd-col--wrap" @@ -4305,7 +4305,7 @@ exports[`Storyshots Components/Forms/Form Grid Recommended layouts 1`] = ` <div class="fd-row" > - + <div class="fd-col fd-col-md--12 fd-col-lg--6 fd-col-xl--6 fd-col--wrap" @@ -4426,7 +4426,7 @@ exports[`Storyshots Components/Forms/Form Grid Recommended layouts 1`] = ` <div class="fd-row" > - + <div class="fd-col fd-col-md--12 fd-col-xl--6 fd-col--wrap" diff --git a/stories/form-group/__snapshots__/form-group.stories.storyshot b/stories/form-group/__snapshots__/form-group.stories.storyshot index 9c8084454a..0f8dc5f70e 100644 --- a/stories/form-group/__snapshots__/form-group.stories.storyshot +++ b/stories/form-group/__snapshots__/form-group.stories.storyshot @@ -126,7 +126,7 @@ exports[`Storyshots Components/Forms/Form Group Group header (form grid) 1`] = ` <div class="fd-row" > - + <div aria-labelledby="grid1GroupHeader" diff --git a/stories/icon-tab-bar/__snapshots__/icon-tab-bar.stories.storyshot b/stories/icon-tab-bar/__snapshots__/icon-tab-bar.stories.storyshot index 2c73bd15fd..206d883f6a 100644 --- a/stories/icon-tab-bar/__snapshots__/icon-tab-bar.stories.storyshot +++ b/stories/icon-tab-bar/__snapshots__/icon-tab-bar.stories.storyshot @@ -11,7 +11,7 @@ exports[`Storyshots Components/Icon Tab Bar Badges 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -120,7 +120,7 @@ exports[`Storyshots Components/Icon Tab Bar Badges 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive" @@ -213,7 +213,7 @@ exports[`Storyshots Components/Icon Tab Bar Badges 1`] = ` <span class="fd-icon-tab-bar__badge" /> - + </a> @@ -274,7 +274,7 @@ exports[`Storyshots Components/Icon Tab Bar Badges 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive" @@ -427,7 +427,7 @@ exports[`Storyshots Components/Icon Tab Bar Badges 1`] = ` </ul> - + </div> @@ -683,7 +683,7 @@ exports[`Storyshots Components/Icon Tab Bar Counters and Text 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -782,7 +782,7 @@ exports[`Storyshots Components/Icon Tab Bar Counters and Text 1`] = ` </ul> - + <section aria-labelledby="tab1" @@ -790,11 +790,11 @@ exports[`Storyshots Components/Icon Tab Bar Counters and Text 1`] = ` id="section1" role="tabpanel" > - + Section 1 </section> - + <section aria-labelledby="tab2" @@ -803,11 +803,11 @@ exports[`Storyshots Components/Icon Tab Bar Counters and Text 1`] = ` id="section2" role="tabpanel" > - + Section 2 </section> - + <section aria-labelledby="tab3" @@ -816,7 +816,7 @@ exports[`Storyshots Components/Icon Tab Bar Counters and Text 1`] = ` id="section3" role="tabpanel" > - + Section 3 </section> @@ -836,7 +836,7 @@ exports[`Storyshots Components/Icon Tab Bar Filter 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -935,7 +935,7 @@ exports[`Storyshots Components/Icon Tab Bar Filter 1`] = ` Ok </div> - + </a> @@ -1075,7 +1075,7 @@ exports[`Storyshots Components/Icon Tab Bar Filter 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -1313,7 +1313,7 @@ exports[`Storyshots Components/Icon Tab Bar Filter 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -1549,7 +1549,7 @@ exports[`Storyshots Components/Icon Tab Bar Flat Navigation 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -1719,7 +1719,7 @@ exports[`Storyshots Components/Icon Tab Bar Icon 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -1908,7 +1908,7 @@ exports[`Storyshots Components/Icon Tab Bar Icon 1`] = ` </ul> - + </div> @@ -1927,7 +1927,7 @@ exports[`Storyshots Components/Icon Tab Bar Icon 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -2116,7 +2116,7 @@ exports[`Storyshots Components/Icon Tab Bar Icon 1`] = ` </ul> - + </div> @@ -2135,7 +2135,7 @@ exports[`Storyshots Components/Icon Tab Bar Icon 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive" @@ -2349,7 +2349,7 @@ exports[`Storyshots Components/Icon Tab Bar Icon Only 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -2500,7 +2500,7 @@ exports[`Storyshots Components/Icon Tab Bar Icon Only 1`] = ` </ul> - + <section aria-labelledby="tab1" @@ -2508,11 +2508,11 @@ exports[`Storyshots Components/Icon Tab Bar Icon Only 1`] = ` id="section1" role="tabpanel" > - + Section 1 </section> - + <section aria-labelledby="tab2" @@ -2521,11 +2521,11 @@ exports[`Storyshots Components/Icon Tab Bar Icon Only 1`] = ` id="section2" role="tabpanel" > - + Section 2 </section> - + <section aria-labelledby="tab3" @@ -2534,7 +2534,7 @@ exports[`Storyshots Components/Icon Tab Bar Icon Only 1`] = ` id="section3" role="tabpanel" > - + Section 3 </section> @@ -2554,7 +2554,7 @@ exports[`Storyshots Components/Icon Tab Bar Icon Only Semantic Colors 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive" @@ -2754,7 +2754,7 @@ exports[`Storyshots Components/Icon Tab Bar Icon Only Semantic Colors 1`] = ` </ul> - + </div> @@ -2772,7 +2772,7 @@ exports[`Storyshots Components/Icon Tab Bar Icon Only Semantic Colors 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive" @@ -2990,7 +2990,7 @@ exports[`Storyshots Components/Icon Tab Bar Icon Only in Compact Mode 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -3141,7 +3141,7 @@ exports[`Storyshots Components/Icon Tab Bar Icon Only in Compact Mode 1`] = ` </ul> - + <section aria-labelledby="tab1" @@ -3149,11 +3149,11 @@ exports[`Storyshots Components/Icon Tab Bar Icon Only in Compact Mode 1`] = ` id="section1" role="tabpanel" > - + Section 1 </section> - + <section aria-labelledby="tab2" @@ -3162,11 +3162,11 @@ exports[`Storyshots Components/Icon Tab Bar Icon Only in Compact Mode 1`] = ` id="section2" role="tabpanel" > - + Section 2 </section> - + <section aria-labelledby="tab3" @@ -3175,7 +3175,7 @@ exports[`Storyshots Components/Icon Tab Bar Icon Only in Compact Mode 1`] = ` id="section3" role="tabpanel" > - + Section 3 </section> @@ -3206,7 +3206,7 @@ exports[`Storyshots Components/Icon Tab Bar Navigation Icon Tab Bar (Shell Navig class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -3319,7 +3319,7 @@ exports[`Storyshots Components/Icon Tab Bar Navigation Icon Tab Bar (Shell Navig </li> - + </ul> @@ -3346,7 +3346,7 @@ exports[`Storyshots Components/Icon Tab Bar Navigation Icon Tab Bar (Shell Navig class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -3857,7 +3857,7 @@ exports[`Storyshots Components/Icon Tab Bar Overflow 1`] = ` class="fd-icon-tab-bar__header fd-icon-tab-bar__header--left-offset" role="tablist" > - + <li class="fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow fd-icon-tab-bar__item--overflow-left" @@ -3887,7 +3887,7 @@ exports[`Storyshots Components/Icon Tab Bar Overflow 1`] = ` </li> - + <li class="fd-icon-tab-bar__item" @@ -4005,7 +4005,7 @@ exports[`Storyshots Components/Icon Tab Bar Overflow 1`] = ` </li> - + </ul> @@ -4026,7 +4026,7 @@ exports[`Storyshots Components/Icon Tab Bar Overflow 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -4144,7 +4144,7 @@ exports[`Storyshots Components/Icon Tab Bar Overflow 1`] = ` </li> - + </ul> @@ -4164,7 +4164,7 @@ exports[`Storyshots Components/Icon Tab Bar Process 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -4411,7 +4411,7 @@ exports[`Storyshots Components/Icon Tab Bar Process 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -4654,7 +4654,7 @@ exports[`Storyshots Components/Icon Tab Bar Process 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item fd-icon-tab-bar__item--positive" @@ -4897,7 +4897,7 @@ exports[`Storyshots Components/Icon Tab Bar Process 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -5033,7 +5033,7 @@ exports[`Storyshots Components/Icon Tab Bar Responsive Paddings 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -5144,7 +5144,7 @@ exports[`Storyshots Components/Icon Tab Bar Sizes and Horizontal Paddings 1`] = class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -5252,7 +5252,7 @@ exports[`Storyshots Components/Icon Tab Bar Sizes and Horizontal Paddings 1`] = class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -5360,7 +5360,7 @@ exports[`Storyshots Components/Icon Tab Bar Sizes and Horizontal Paddings 1`] = class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -5468,7 +5468,7 @@ exports[`Storyshots Components/Icon Tab Bar Sizes and Horizontal Paddings 1`] = class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -5576,7 +5576,7 @@ exports[`Storyshots Components/Icon Tab Bar Sizes and Horizontal Paddings 1`] = class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -5685,7 +5685,7 @@ exports[`Storyshots Components/Icon Tab Bar Tabs drag and drop 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item fd-icon-tab-bar__item--dnd-separator-end" @@ -5851,7 +5851,7 @@ exports[`Storyshots Components/Icon Tab Bar Tabs drag and drop 1`] = ` </ul> - + <section aria-labelledby="tab1" @@ -5859,11 +5859,11 @@ exports[`Storyshots Components/Icon Tab Bar Tabs drag and drop 1`] = ` id="section1-1" role="tabpanel" > - + Section 1 </section> - + <section aria-labelledby="tab2" @@ -5872,11 +5872,11 @@ exports[`Storyshots Components/Icon Tab Bar Tabs drag and drop 1`] = ` id="section1-2" role="tabpanel" > - + Section 2 </section> - + <section aria-labelledby="tab3" @@ -5885,7 +5885,7 @@ exports[`Storyshots Components/Icon Tab Bar Tabs drag and drop 1`] = ` id="section1-3" role="tabpanel" > - + Section 3 </section> @@ -5909,7 +5909,7 @@ exports[`Storyshots Components/Icon Tab Bar Tabs drag and drop 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -6021,7 +6021,7 @@ exports[`Storyshots Components/Icon Tab Bar Tabs drag and drop 1`] = ` </ul> - + <section aria-labelledby="tab1" @@ -6029,11 +6029,11 @@ exports[`Storyshots Components/Icon Tab Bar Tabs drag and drop 1`] = ` id="section2-1" role="tabpanel" > - + Section 1 </section> - + <section aria-labelledby="tab2" @@ -6042,11 +6042,11 @@ exports[`Storyshots Components/Icon Tab Bar Tabs drag and drop 1`] = ` id="section2-2" role="tabpanel" > - + Section 2 </section> - + <section aria-labelledby="tab3" @@ -6055,7 +6055,7 @@ exports[`Storyshots Components/Icon Tab Bar Tabs drag and drop 1`] = ` id="section2-3" role="tabpanel" > - + Section 3 </section> @@ -6079,7 +6079,7 @@ exports[`Storyshots Components/Icon Tab Bar Tabs drag and drop 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -6560,7 +6560,7 @@ exports[`Storyshots Components/Icon Tab Bar Tabs drag and drop 1`] = ` </ul> - + <section aria-labelledby="tab1" @@ -6568,11 +6568,11 @@ exports[`Storyshots Components/Icon Tab Bar Tabs drag and drop 1`] = ` id="section3-1" role="tabpanel" > - + Section 1 </section> - + <section aria-labelledby="tab2" @@ -6581,11 +6581,11 @@ exports[`Storyshots Components/Icon Tab Bar Tabs drag and drop 1`] = ` id="section3-2" role="tabpanel" > - + Section 2 </section> - + <section aria-labelledby="tab3" @@ -6594,7 +6594,7 @@ exports[`Storyshots Components/Icon Tab Bar Tabs drag and drop 1`] = ` id="section3-3" role="tabpanel" > - + Section 3 </section> @@ -6619,7 +6619,7 @@ exports[`Storyshots Components/Icon Tab Bar Tabs drag and drop 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -6902,7 +6902,7 @@ exports[`Storyshots Components/Icon Tab Bar Tabs drag and drop 1`] = ` </ul> - + <section aria-labelledby="tab1" @@ -6910,11 +6910,11 @@ exports[`Storyshots Components/Icon Tab Bar Tabs drag and drop 1`] = ` id="section1" role="tabpanel" > - + Section 1 </section> - + <section aria-labelledby="tab2" @@ -6923,11 +6923,11 @@ exports[`Storyshots Components/Icon Tab Bar Tabs drag and drop 1`] = ` id="section2" role="tabpanel" > - + Section 2 </section> - + <section aria-labelledby="tab3" @@ -6936,7 +6936,7 @@ exports[`Storyshots Components/Icon Tab Bar Tabs drag and drop 1`] = ` id="section3" role="tabpanel" > - + Section 3 </section> @@ -6963,7 +6963,7 @@ exports[`Storyshots Components/Icon Tab Bar Text Only (Inline mode) 1`] = ` class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -7048,7 +7048,7 @@ exports[`Storyshots Components/Icon Tab Bar Text Only (Inline mode) 1`] = ` </ul> - + <section aria-labelledby="tab1" @@ -7056,11 +7056,11 @@ exports[`Storyshots Components/Icon Tab Bar Text Only (Inline mode) 1`] = ` id="section1" role="tabpanel" > - + Section 1 </section> - + <section aria-labelledby="tab2" @@ -7069,11 +7069,11 @@ exports[`Storyshots Components/Icon Tab Bar Text Only (Inline mode) 1`] = ` id="section2" role="tabpanel" > - + Section 2 </section> - + <section aria-labelledby="tab3" @@ -7082,7 +7082,7 @@ exports[`Storyshots Components/Icon Tab Bar Text Only (Inline mode) 1`] = ` id="section3" role="tabpanel" > - + Section 3 </section> @@ -7280,7 +7280,7 @@ exports[`Storyshots Components/Icon Tab Bar Universal Icon Tab Bar Multi Click A class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -7717,7 +7717,7 @@ exports[`Storyshots Components/Icon Tab Bar Universal Icon Tab Bar Single Click class="fd-icon-tab-bar__header" role="tablist" > - + <li class="fd-icon-tab-bar__item" @@ -8287,7 +8287,7 @@ exports[`Storyshots Components/Icon Tab Bar Universal Icon Tab Bar Single Click class="sap-icon--slim-arrow-down" role="presentation" /> - + </button> diff --git a/stories/input-group/__snapshots__/input-group.stories.storyshot b/stories/input-group/__snapshots__/input-group.stories.storyshot index 9be3df74bc..97cf5e2017 100644 --- a/stories/input-group/__snapshots__/input-group.stories.storyshot +++ b/stories/input-group/__snapshots__/input-group.stories.storyshot @@ -190,7 +190,7 @@ exports[`Storyshots Components/Forms/Input Group Input With Actions 1`] = ` aria-label="Navigation" class="fd-input-group__button fd-button fd-button--icon fd-button--transparent" > - + <i class="sap-icon--navigation-down-arrow" @@ -248,7 +248,7 @@ exports[`Storyshots Components/Forms/Input Group Input With Actions 1`] = ` aria-label="Navigation" class="fd-input-group__button fd-button fd-button--icon fd-button--transparent fd-button--compact" > - + <i class="sap-icon--navigation-down-arrow" @@ -1488,7 +1488,7 @@ exports[`Storyshots Components/Forms/Input Group Test Four 1`] = ` <br /> - + <div class="fd-input-group " @@ -1524,7 +1524,7 @@ exports[`Storyshots Components/Forms/Input Group Test Four 1`] = ` <br /> - + <div class="fd-input-group " @@ -1576,7 +1576,7 @@ exports[`Storyshots Components/Forms/Input Group Test Four 1`] = ` <br /> - + <div class="fd-input-group " @@ -1612,7 +1612,7 @@ exports[`Storyshots Components/Forms/Input Group Test Four 1`] = ` <br /> - + <div class="fd-input-group " @@ -1648,7 +1648,7 @@ exports[`Storyshots Components/Forms/Input Group Test Four 1`] = ` <br /> - + <div class="fd-input-group " @@ -1705,7 +1705,7 @@ exports[`Storyshots Components/Forms/Input Group Test Four 1`] = ` Disabled </h3> - + <div class="fd-input-group is-disabled" @@ -1741,7 +1741,7 @@ exports[`Storyshots Components/Forms/Input Group Test Four 1`] = ` <br /> - + <div class="fd-input-group is-disabled" @@ -1777,7 +1777,7 @@ exports[`Storyshots Components/Forms/Input Group Test Four 1`] = ` <br /> - + <div class="fd-input-group is-disabled" @@ -1829,7 +1829,7 @@ exports[`Storyshots Components/Forms/Input Group Test Four 1`] = ` <br /> - + <div class="fd-input-group is-disabled" @@ -1865,7 +1865,7 @@ exports[`Storyshots Components/Forms/Input Group Test Four 1`] = ` <br /> - + <div class="fd-input-group is-disabled" @@ -1901,7 +1901,7 @@ exports[`Storyshots Components/Forms/Input Group Test Four 1`] = ` <br /> - + <div class="fd-input-group is-disabled" diff --git a/stories/layout-grid/__snapshots__/layout-grid.stories.storyshot b/stories/layout-grid/__snapshots__/layout-grid.stories.storyshot index c50d7a78ed..210196fe2c 100644 --- a/stories/layout-grid/__snapshots__/layout-grid.stories.storyshot +++ b/stories/layout-grid/__snapshots__/layout-grid.stories.storyshot @@ -27,7 +27,7 @@ exports[`Storyshots Layouts/Layout Grid Auto Adjusting 1`] = ` </div> - + <div class="fd-col fd-col--7" @@ -45,7 +45,7 @@ exports[`Storyshots Layouts/Layout Grid Auto Adjusting 1`] = ` </div> - + <div class="fd-col fd-col--full" @@ -98,7 +98,7 @@ exports[`Storyshots Layouts/Layout Grid Different Size Columns 1`] = ` </div> - + <div class="fd-row" @@ -137,7 +137,7 @@ exports[`Storyshots Layouts/Layout Grid Different Size Columns 1`] = ` </div> - + <div class="fd-row" @@ -176,7 +176,7 @@ exports[`Storyshots Layouts/Layout Grid Different Size Columns 1`] = ` </div> - + <div class="fd-row" @@ -215,7 +215,7 @@ exports[`Storyshots Layouts/Layout Grid Different Size Columns 1`] = ` </div> - + <div class="fd-row" @@ -254,7 +254,7 @@ exports[`Storyshots Layouts/Layout Grid Different Size Columns 1`] = ` </div> - + <div class="fd-row" @@ -293,7 +293,7 @@ exports[`Storyshots Layouts/Layout Grid Different Size Columns 1`] = ` </div> - + <div class="fd-row" @@ -332,7 +332,7 @@ exports[`Storyshots Layouts/Layout Grid Different Size Columns 1`] = ` </div> - + <div class="fd-row" @@ -371,7 +371,7 @@ exports[`Storyshots Layouts/Layout Grid Different Size Columns 1`] = ` </div> - + <div class="fd-row" @@ -410,7 +410,7 @@ exports[`Storyshots Layouts/Layout Grid Different Size Columns 1`] = ` </div> - + <div class="fd-row" @@ -449,7 +449,7 @@ exports[`Storyshots Layouts/Layout Grid Different Size Columns 1`] = ` </div> - + <div class="fd-row" @@ -488,7 +488,7 @@ exports[`Storyshots Layouts/Layout Grid Different Size Columns 1`] = ` </div> - + <div class="fd-row" @@ -527,7 +527,7 @@ exports[`Storyshots Layouts/Layout Grid Different Size Columns 1`] = ` </div> - + <div class="fd-row" @@ -582,7 +582,7 @@ exports[`Storyshots Layouts/Layout Grid Nesting 1`] = ` </div> - + <div class="fd-col fd-col--10" @@ -603,15 +603,15 @@ exports[`Storyshots Layouts/Layout Grid Nesting 1`] = ` <div class="docs-layout-grid-bg docs-layout-grid-bg--color-2" > - + 2 col inner row 1 (~14%) </div> - + </div> - + <div class="fd-col fd-col--10" @@ -638,8 +638,8 @@ exports[`Storyshots Layouts/Layout Grid Nesting 1`] = ` </div> - - + + <div class="fd-col fd-col--6" @@ -667,7 +667,7 @@ exports[`Storyshots Layouts/Layout Grid Nesting 1`] = ` </div> - + <div class="fd-col fd-col--8" @@ -737,7 +737,7 @@ exports[`Storyshots Layouts/Layout Grid No Gap 1`] = ` </div> - + <div class="fd-col fd-col--4" @@ -758,7 +758,7 @@ exports[`Storyshots Layouts/Layout Grid No Gap 1`] = ` </div> - + <div class="fd-row" @@ -781,7 +781,7 @@ exports[`Storyshots Layouts/Layout Grid No Gap 1`] = ` </div> - + <div class="fd-col fd-col--6" @@ -802,7 +802,7 @@ exports[`Storyshots Layouts/Layout Grid No Gap 1`] = ` </div> - + <div class="fd-row" @@ -825,7 +825,7 @@ exports[`Storyshots Layouts/Layout Grid No Gap 1`] = ` </div> - + <div class="fd-col fd-col--8" @@ -877,7 +877,7 @@ exports[`Storyshots Layouts/Layout Grid No Horizontal Gap 1`] = ` </div> - + <div class="fd-col fd-col--4" @@ -898,7 +898,7 @@ exports[`Storyshots Layouts/Layout Grid No Horizontal Gap 1`] = ` </div> - + <div class="fd-row" @@ -921,7 +921,7 @@ exports[`Storyshots Layouts/Layout Grid No Horizontal Gap 1`] = ` </div> - + <div class="fd-col fd-col--6" @@ -942,7 +942,7 @@ exports[`Storyshots Layouts/Layout Grid No Horizontal Gap 1`] = ` </div> - + <div class="fd-row" @@ -965,7 +965,7 @@ exports[`Storyshots Layouts/Layout Grid No Horizontal Gap 1`] = ` </div> - + <div class="fd-col fd-col--8" @@ -1017,7 +1017,7 @@ exports[`Storyshots Layouts/Layout Grid No Vertical Gap 1`] = ` </div> - + <div class="fd-col fd-col--4" @@ -1038,7 +1038,7 @@ exports[`Storyshots Layouts/Layout Grid No Vertical Gap 1`] = ` </div> - + <div class="fd-row" @@ -1061,7 +1061,7 @@ exports[`Storyshots Layouts/Layout Grid No Vertical Gap 1`] = ` </div> - + <div class="fd-col fd-col--6" @@ -1082,7 +1082,7 @@ exports[`Storyshots Layouts/Layout Grid No Vertical Gap 1`] = ` </div> - + <div class="fd-row" @@ -1105,7 +1105,7 @@ exports[`Storyshots Layouts/Layout Grid No Vertical Gap 1`] = ` </div> - + <div class="fd-col fd-col--8" @@ -1160,7 +1160,7 @@ exports[`Storyshots Layouts/Layout Grid Offset 1`] = ` </div> - + <div class="fd-row" @@ -1186,7 +1186,7 @@ exports[`Storyshots Layouts/Layout Grid Offset 1`] = ` </div> - + <div class="fd-row" @@ -1201,8 +1201,8 @@ exports[`Storyshots Layouts/Layout Grid Offset 1`] = ` <div class="docs-layout-grid-bg docs-layout-grid-bg--color-5" > - - Different column-width and offset in different inflection points + + Different column-width and offset in different inflection points </div> @@ -1212,7 +1212,7 @@ exports[`Storyshots Layouts/Layout Grid Offset 1`] = ` </div> - + <div class="fd-row" @@ -1227,8 +1227,8 @@ exports[`Storyshots Layouts/Layout Grid Offset 1`] = ` <div class="docs-layout-grid-bg docs-layout-grid-bg--color-7" > - - 6 columns with 6-column offset + + 6 columns with 6-column offset </div> @@ -1238,7 +1238,7 @@ exports[`Storyshots Layouts/Layout Grid Offset 1`] = ` </div> - + <div class="fd-row" @@ -1253,15 +1253,15 @@ exports[`Storyshots Layouts/Layout Grid Offset 1`] = ` <div class="docs-layout-grid-bg docs-layout-grid-bg--color-8" > - - 2 column-width and offset after in different inflection points + + 2 column-width and offset after in different inflection points </div> </div> - + <div class="fd-col fd-col--4 fd-col--offset-after-1" @@ -1271,7 +1271,7 @@ exports[`Storyshots Layouts/Layout Grid Offset 1`] = ` <div class="docs-layout-grid-bg docs-layout-grid-bg--color-9" > - + 4 columns with 2-column offset after </div> @@ -1279,7 +1279,7 @@ exports[`Storyshots Layouts/Layout Grid Offset 1`] = ` </div> - + <div class="fd-col fd-col--2" @@ -1329,7 +1329,7 @@ exports[`Storyshots Layouts/Layout Grid Responsiveness 1`] = ` </div> - + <div class="fd-col fd-col--12 fd-col-md--6 fd-col-lg--4 fd-col-xl--4" @@ -1345,7 +1345,7 @@ exports[`Storyshots Layouts/Layout Grid Responsiveness 1`] = ` </div> - + <div class="fd-col fd-col--12 fd-col-md--6 fd-col-lg--4 fd-col-xl--4" @@ -1361,7 +1361,7 @@ exports[`Storyshots Layouts/Layout Grid Responsiveness 1`] = ` </div> - + <div class="fd-col fd-col--12 fd-col-md--6 fd-col-lg--4 fd-col-xl--4" diff --git a/stories/link/__snapshots__/link.stories.storyshot b/stories/link/__snapshots__/link.stories.storyshot index f12892ed38..4e98cd59c4 100644 --- a/stories/link/__snapshots__/link.stories.storyshot +++ b/stories/link/__snapshots__/link.stories.storyshot @@ -80,7 +80,7 @@ exports[`Storyshots Components/Link Types 1`] = ` tabindex="0" > - Right icon link + Right icon link <span class="sap-icon--slim-arrow-right sap-icon--s" @@ -104,7 +104,7 @@ exports[`Storyshots Components/Link Types 1`] = ` <span class="sap-icon--slim-arrow-left sap-icon--s" /> - + Left icon link </a> diff --git a/stories/list-grid/__snapshots__/list-grid.stories.storyshot b/stories/list-grid/__snapshots__/list-grid.stories.storyshot index 1663babbdf..f793e15930 100644 --- a/stories/list-grid/__snapshots__/list-grid.stories.storyshot +++ b/stories/list-grid/__snapshots__/list-grid.stories.storyshot @@ -727,7 +727,7 @@ exports[`Storyshots Components/Grid List Delete mode 1`] = ` </button> - + <button aria-label="Navigation" @@ -3658,7 +3658,7 @@ exports[`Storyshots Components/Grid List Multi select mode 1`] = ` tabindex="-1" /> - + <span class="fd-toolbar__spacer" @@ -4380,7 +4380,7 @@ exports[`Storyshots Components/Grid List None mode 1`] = ` </div> - + <a class="fd-link" @@ -4499,7 +4499,7 @@ exports[`Storyshots Components/Grid List None mode 1`] = ` </div> - + <a class="fd-link" @@ -4896,7 +4896,7 @@ exports[`Storyshots Components/Grid List None mode 1`] = ` </div> - + <a class="fd-link" @@ -6022,7 +6022,7 @@ exports[`Storyshots Components/Grid List Single select mode 1`] = ` </div> - + <a class="fd-link" @@ -7334,7 +7334,7 @@ exports[`Storyshots Components/Grid List States 1`] = ` </div> - + <a diff --git a/stories/list/byline/__snapshots__/byline-list.stories.storyshot b/stories/list/byline/__snapshots__/byline-list.stories.storyshot index ef9dff511d..2597e28245 100644 --- a/stories/list/byline/__snapshots__/byline-list.stories.storyshot +++ b/stories/list/byline/__snapshots__/byline-list.stories.storyshot @@ -837,7 +837,7 @@ exports[`Storyshots Components/List/Byline Navigation 1`] = ` href="#" tabindex="0" > - + <span class="fd-list__thumbnail" @@ -872,7 +872,7 @@ exports[`Storyshots Components/List/Byline Navigation 1`] = ` </a> - + </li> @@ -889,7 +889,7 @@ exports[`Storyshots Components/List/Byline Navigation 1`] = ` href="#" tabindex="0" > - + <span class="fd-list__thumbnail" @@ -917,7 +917,7 @@ exports[`Storyshots Components/List/Byline Navigation 1`] = ` </a> - + </li> @@ -934,7 +934,7 @@ exports[`Storyshots Components/List/Byline Navigation 1`] = ` href="#" tabindex="0" > - + <span aria-label="Godafoss waterfall in northern Iceland" @@ -981,7 +981,7 @@ exports[`Storyshots Components/List/Byline Navigation 1`] = ` </a> - + </li> @@ -998,7 +998,7 @@ exports[`Storyshots Components/List/Byline Navigation 1`] = ` href="#" tabindex="0" > - + <div class="fd-list__content" @@ -1023,7 +1023,7 @@ exports[`Storyshots Components/List/Byline Navigation 1`] = ` </a> - + </li> @@ -1050,7 +1050,7 @@ exports[`Storyshots Components/List/Byline Navigation indicators 1`] = ` href="#" tabindex="0" > - + <span class="fd-list__thumbnail" @@ -1085,7 +1085,7 @@ exports[`Storyshots Components/List/Byline Navigation indicators 1`] = ` </a> - + </li> @@ -1102,7 +1102,7 @@ exports[`Storyshots Components/List/Byline Navigation indicators 1`] = ` href="#" tabindex="0" > - + <span class="fd-list__thumbnail" @@ -1130,7 +1130,7 @@ exports[`Storyshots Components/List/Byline Navigation indicators 1`] = ` </a> - + </li> diff --git a/stories/message-box/__snapshots__/message-box.stories.storyshot b/stories/message-box/__snapshots__/message-box.stories.storyshot index 7865bd4252..151f0aa3be 100644 --- a/stories/message-box/__snapshots__/message-box.stories.storyshot +++ b/stories/message-box/__snapshots__/message-box.stories.storyshot @@ -46,7 +46,7 @@ exports[`Storyshots Components/Message Box Default 1`] = ` class="fd-message-box__body" > - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> @@ -269,7 +269,7 @@ exports[`Storyshots Components/Message Box Responsive 1`] = ` class="fd-message-box__body" > - Error message box for a medium-sized screen in cozy mode (mobile). + Error message box for a medium-sized screen in cozy mode (mobile). </div> @@ -462,7 +462,7 @@ exports[`Storyshots Components/Message Box Responsive 1`] = ` class="fd-message-box__body" > - Warning message box for an extra large screen in compact mode (desktop). + Warning message box for an extra large screen in compact mode (desktop). </div> @@ -881,7 +881,7 @@ exports[`Storyshots Components/Message Box Semantic types 1`] = ` class="fd-message-box__body" > - Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. + Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et. </div> @@ -982,7 +982,7 @@ exports[`Storyshots Components/Message Box Semantic types 1`] = ` class="fd-message-box__body" > - Vivamus sagittis diam in vehicula lobortis. + Vivamus sagittis diam in vehicula lobortis. </div> diff --git a/stories/message-page/__snapshots__/message-page.stories.storyshot b/stories/message-page/__snapshots__/message-page.stories.storyshot index 2a46d2f645..c3950f7c75 100644 --- a/stories/message-page/__snapshots__/message-page.stories.storyshot +++ b/stories/message-page/__snapshots__/message-page.stories.storyshot @@ -196,15 +196,15 @@ exports[`Storyshots Components/Message Page Formatted text and buttons 1`] = ` <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit </b> - , - 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. + , + 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. <i> - Excepteur sint occaecat cupidatat non proident, + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </i> diff --git a/stories/multi-combo-box/__snapshots__/multi-combo-box.stories.storyshot b/stories/multi-combo-box/__snapshots__/multi-combo-box.stories.storyshot index 5a0e54d4e7..fcac70099a 100644 --- a/stories/multi-combo-box/__snapshots__/multi-combo-box.stories.storyshot +++ b/stories/multi-combo-box/__snapshots__/multi-combo-box.stories.storyshot @@ -1389,7 +1389,7 @@ exports[`Storyshots Patterns/Multi ComboBox Grouping 1`] = ` > 2 more </span> - + <input aria-label="multi input sample as group item" @@ -1927,7 +1927,7 @@ exports[`Storyshots Patterns/Multi ComboBox Match Popover Body Size 1`] = ` > 2 more </span> - + <input aria-label="multi input sample popover size body" @@ -2405,7 +2405,7 @@ exports[`Storyshots Patterns/Multi ComboBox Mobile Mode 1`] = ` > 4 more </span> - + <input aria-label="multi input mobile mode" @@ -3306,7 +3306,7 @@ exports[`Storyshots Patterns/Multi ComboBox Semantic 1`] = ` > 4 more </span> - + <input aria-label="multi input semantic" diff --git a/stories/multi-input/__snapshots__/multi-input.stories.storyshot b/stories/multi-input/__snapshots__/multi-input.stories.storyshot index f54da7f11f..dbdd9f08b0 100644 --- a/stories/multi-input/__snapshots__/multi-input.stories.storyshot +++ b/stories/multi-input/__snapshots__/multi-input.stories.storyshot @@ -1940,7 +1940,7 @@ exports[`Storyshots Patterns/Multi Input Grouping 1`] = ` > 2 more </span> - + <input class="fd-input fd-input-group__input fd-tokenizer__input" @@ -2486,7 +2486,7 @@ exports[`Storyshots Patterns/Multi Input Match Popover Body Size 1`] = ` > 2 more </span> - + <input class="fd-input fd-input-group__input fd-tokenizer__input" @@ -2966,7 +2966,7 @@ exports[`Storyshots Patterns/Multi Input Mobile Mode 1`] = ` > 4 more </span> - + <input aria-labelledby="mobileModeMultiInputHeader" @@ -3949,7 +3949,7 @@ exports[`Storyshots Patterns/Multi Input Semantic 1`] = ` > 4 more </span> - + <input class="fd-input fd-input-group__input fd-tokenizer__input" diff --git a/stories/notification/__snapshots__/notification.stories.storyshot b/stories/notification/__snapshots__/notification.stories.storyshot index 545e08c71b..d26fe4ac7f 100644 --- a/stories/notification/__snapshots__/notification.stories.storyshot +++ b/stories/notification/__snapshots__/notification.stories.storyshot @@ -2731,7 +2731,7 @@ exports[`Storyshots Components/Notifications Notification Group 1`] = ` > 7 minutes ago m dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </span> - + </p> diff --git a/stories/object-list/__snapshots__/object-list.stories.storyshot b/stories/object-list/__snapshots__/object-list.stories.storyshot index c18e81cf5a..974e5eb2a8 100644 --- a/stories/object-list/__snapshots__/object-list.stories.storyshot +++ b/stories/object-list/__snapshots__/object-list.stories.storyshot @@ -135,7 +135,7 @@ exports[`Storyshots Components/Object List Borderless 1`] = ` class="fd-object-list__object-attribute" > - + First Attribute </div> @@ -377,7 +377,7 @@ exports[`Storyshots Components/Object List Borderless 1`] = ` class="fd-object-list__object-attribute" > - + First Attribute </div> @@ -612,7 +612,7 @@ exports[`Storyshots Components/Object List Borderless 1`] = ` class="fd-object-list__object-attribute" > - + First Attribute </div> @@ -875,7 +875,7 @@ exports[`Storyshots Components/Object List Navigation 1`] = ` class="fd-object-list__object-attribute" > - + First Attribute </div> @@ -1127,7 +1127,7 @@ exports[`Storyshots Components/Object List Navigation 1`] = ` class="fd-object-list__object-attribute" > - + First Attribute </div> @@ -1389,7 +1389,7 @@ exports[`Storyshots Components/Object List Selection 1`] = ` class="fd-object-list__object-attribute" > - + First Attribute </div> @@ -1632,7 +1632,7 @@ exports[`Storyshots Components/Object List Selection 1`] = ` class="fd-object-list__object-attribute" > - + First Attribute </div> @@ -1753,7 +1753,7 @@ exports[`Storyshots Components/Object List Selection 1`] = ` </li> - + </ul> @@ -1801,7 +1801,7 @@ exports[`Storyshots Components/Object List Selection With Navigation 1`] = ` id="anchor" tabindex="0" > - + <div class="fd-object-list__container" @@ -1908,7 +1908,7 @@ exports[`Storyshots Components/Object List Selection With Navigation 1`] = ` class="fd-object-list__object-attribute" > - + First Attribute </div> @@ -2053,7 +2053,7 @@ exports[`Storyshots Components/Object List Selection With Navigation 1`] = ` class="fd-list__link" tabindex="0" > - + <div class="fd-object-list__container" @@ -2160,7 +2160,7 @@ exports[`Storyshots Components/Object List Selection With Navigation 1`] = ` class="fd-object-list__object-attribute" > - + First Attribute </div> @@ -2412,7 +2412,7 @@ exports[`Storyshots Components/Object List Selection With Navigation 1`] = ` class="fd-object-list__object-attribute" > - + First Attribute </div> @@ -2536,7 +2536,7 @@ exports[`Storyshots Components/Object List Selection With Navigation 1`] = ` </li> - + </ul> @@ -2547,7 +2547,7 @@ exports[`Storyshots Components/Object List Selection With Navigation 1`] = ` </section> `; -exports[`Storyshots Components/Object List Standard 1`] = ` +exports[`Storyshots Components/Object List Standart 1`] = ` <section> @@ -2677,7 +2677,7 @@ exports[`Storyshots Components/Object List Standard 1`] = ` class="fd-object-list__object-attribute" > - + First Attribute </div> diff --git a/stories/page-footer/__snapshots__/page-footer.stories.storyshot b/stories/page-footer/__snapshots__/page-footer.stories.storyshot index cbdd3ac3ee..9e7c5f0bde 100644 --- a/stories/page-footer/__snapshots__/page-footer.stories.storyshot +++ b/stories/page-footer/__snapshots__/page-footer.stories.storyshot @@ -25,7 +25,7 @@ exports[`Storyshots Layouts/Page Footer Footer With Diffrent Size 1`] = ` <div class="fd-page-footer__logo" > - + <img alt="page footer logo" @@ -142,7 +142,7 @@ exports[`Storyshots Layouts/Page Footer Footer With Diffrent Size 1`] = ` <div class="fd-page-footer__logo" > - + <img alt="page footer logo" @@ -260,7 +260,7 @@ exports[`Storyshots Layouts/Page Footer Footer With Diffrent Size 1`] = ` <div class="fd-page-footer__logo" > - + <img alt="page footer logo" @@ -377,7 +377,7 @@ exports[`Storyshots Layouts/Page Footer Footer With Diffrent Size 1`] = ` <div class="fd-page-footer__logo" > - + <img alt="page footer logo" diff --git a/stories/page/__snapshots__/page.stories.storyshot b/stories/page/__snapshots__/page.stories.storyshot index 9b87bcb566..bda325aeb3 100644 --- a/stories/page/__snapshots__/page.stories.storyshot +++ b/stories/page/__snapshots__/page.stories.storyshot @@ -28,7 +28,7 @@ exports[`Storyshots Layouts/Page Basic Page 1`] = ` aria-label="Go back" class="fd-button fd-button--transparent" > - + <i class="sap-icon--navigation-left-arrow" @@ -67,7 +67,7 @@ exports[`Storyshots Layouts/Page Basic Page 1`] = ` aria-label="See more" class="fd-button fd-button--transparent" > - + <i class="sap-icon--grid" @@ -190,7 +190,7 @@ exports[`Storyshots Layouts/Page Responsive Page 1`] = ` aria-label="Go back" class="fd-button fd-button--transparent" > - + <i class="sap-icon--navigation-left-arrow" @@ -229,7 +229,7 @@ exports[`Storyshots Layouts/Page Responsive Page 1`] = ` aria-label="See more" class="fd-button fd-button--transparent" > - + <i class="sap-icon--overflow" @@ -352,7 +352,7 @@ exports[`Storyshots Layouts/Page Transparent Page 1`] = ` aria-label="Go back" class="fd-button fd-button--transparent" > - + <i class="sap-icon--navigation-left-arrow" @@ -391,7 +391,7 @@ exports[`Storyshots Layouts/Page Transparent Page 1`] = ` aria-label="See more" class="fd-button fd-button--transparent" > - + <i class="sap-icon--overflow" diff --git a/stories/panel/__snapshots__/panel.stories.storyshot b/stories/panel/__snapshots__/panel.stories.storyshot index 3fb3c41cdf..3301274f58 100644 --- a/stories/panel/__snapshots__/panel.stories.storyshot +++ b/stories/panel/__snapshots__/panel.stories.storyshot @@ -103,12 +103,12 @@ exports[`Storyshots Components/Panel Compact 1`] = ` role="region" > - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus - et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. - Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. - Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. - Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. - Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. + Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. + Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. + Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. + Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet. </div> @@ -224,12 +224,12 @@ exports[`Storyshots Components/Panel Expandable 1`] = ` <span> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus - et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. - Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. - Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. - Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. - Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. + Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. + Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. + Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. + Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet. </span> @@ -298,12 +298,12 @@ exports[`Storyshots Components/Panel Expandable 1`] = ` <span> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus - et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. - Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. - Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. - Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. - Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. + Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. + Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. + Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. + Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet. </span> @@ -393,12 +393,12 @@ exports[`Storyshots Components/Panel Fixed 1`] = ` role="region" > - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus - et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. - Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. - Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. - Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. - Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. + Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. + Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. + Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. + Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet. </div> @@ -514,19 +514,19 @@ exports[`Storyshots Components/Panel Fixed height 1`] = ` <span> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus - et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. - Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. - Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. - Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. - Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. + Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. + Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra. + Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. + Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat. Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet. - Morbi eget diam vehicula, porttitor orci eu, posuere leo. Sed varius orci id ipsum pharetra feugiat. + Morbi eget diam vehicula, porttitor orci eu, posuere leo. Sed varius orci id ipsum pharetra feugiat. Donec libero mi, vestibulum eget massa non, pretium egestas eros. Aenean quis eros ut augue condimentum faucibus. Nam tristique, enim eu volutpat cursus, enim neque pulvinar mauris, nec tempor libero lacus vel lacus. Nunc molestie elit in - aliquam eleifend. Ut consequat convallis erat, porta egestas lectus sagittis et. Mauris fermentum semper lorem, a sollicitudin nisi sollicitudin nec. - Duis semper pretium elit ac molestie. Morbi condimentum nisl vitae dolor varius convallis. Donec a molestie ex, - id condimentum velit. Proin dignissim dolor velit, eu malesuada magna porta vel. Aenean quis feugiat libero, sed pretium libero. + aliquam eleifend. Ut consequat convallis erat, porta egestas lectus sagittis et. Mauris fermentum semper lorem, a sollicitudin nisi sollicitudin nec. + Duis semper pretium elit ac molestie. Morbi condimentum nisl vitae dolor varius convallis. Donec a molestie ex, + id condimentum velit. Proin dignissim dolor velit, eu malesuada magna porta vel. Aenean quis feugiat libero, sed pretium libero. Nunc ex orci, volutpat in tristique et, accumsan sed ante. Maecenas laoreet egestas iaculis. In quis ligula mauris. </span> diff --git a/stories/progress-indicator/__snapshots__/progress-indicator.stories.storyshot b/stories/progress-indicator/__snapshots__/progress-indicator.stories.storyshot index 0b40f490f5..bc7221cf4d 100644 --- a/stories/progress-indicator/__snapshots__/progress-indicator.stories.storyshot +++ b/stories/progress-indicator/__snapshots__/progress-indicator.stories.storyshot @@ -47,7 +47,7 @@ exports[`Storyshots Components/Progress Indicator Layout 1`] = ` </div> - + <div aria-label="42%" @@ -92,7 +92,7 @@ exports[`Storyshots Components/Progress Indicator Layout 1`] = ` </div> - + <div aria-label="69%" @@ -137,7 +137,7 @@ exports[`Storyshots Components/Progress Indicator Layout 1`] = ` </div> - + <div aria-label="100%" @@ -182,7 +182,7 @@ exports[`Storyshots Components/Progress Indicator Layout 1`] = ` </div> - + <div aria-label="80 of 100 MB" @@ -278,7 +278,7 @@ exports[`Storyshots Components/Progress Indicator States 1`] = ` </div> - + <div aria-label="42%" @@ -323,7 +323,7 @@ exports[`Storyshots Components/Progress Indicator States 1`] = ` </div> - + <div aria-label="42%" @@ -368,7 +368,7 @@ exports[`Storyshots Components/Progress Indicator States 1`] = ` </div> - + <div aria-label="42%" @@ -413,7 +413,7 @@ exports[`Storyshots Components/Progress Indicator States 1`] = ` </div> - + <div aria-label="42%" diff --git a/stories/quick-view/__snapshots__/quick-view.stories.storyshot b/stories/quick-view/__snapshots__/quick-view.stories.storyshot index 874417a29f..3ef25bc575 100644 --- a/stories/quick-view/__snapshots__/quick-view.stories.storyshot +++ b/stories/quick-view/__snapshots__/quick-view.stories.storyshot @@ -83,7 +83,7 @@ exports[`Storyshots Components/Quick View Dialog 1`] = ` </span> - + <div class="fd-quick-view__subheader-text" @@ -114,7 +114,7 @@ exports[`Storyshots Components/Quick View Dialog 1`] = ` </div> - + <div class="fd-form-group" @@ -328,7 +328,7 @@ exports[`Storyshots Components/Quick View Popover 1`] = ` </span> - + <div class="fd-quick-view__subheader-text" @@ -341,7 +341,7 @@ exports[`Storyshots Components/Quick View Popover 1`] = ` Company B </h5> - + <div class="fd-quick-view__subtitle" @@ -360,8 +360,8 @@ exports[`Storyshots Components/Quick View Popover 1`] = ` </div> - - + + <div class="fd-form-group" @@ -438,7 +438,7 @@ exports[`Storyshots Components/Quick View Popover 1`] = ` </div> - + <div class="fd-form-group" @@ -593,7 +593,7 @@ exports[`Storyshots Components/Quick View Without the header 1`] = ` </span> - + <div class="fd-quick-view__subheader-text" @@ -624,7 +624,7 @@ exports[`Storyshots Components/Quick View Without the header 1`] = ` </div> - + <div class="fd-form-group" diff --git a/stories/rating-indicator/__snapshots__/rating-indicator.stories.storyshot b/stories/rating-indicator/__snapshots__/rating-indicator.stories.storyshot index 2381671d53..bfef67517f 100644 --- a/stories/rating-indicator/__snapshots__/rating-indicator.stories.storyshot +++ b/stories/rating-indicator/__snapshots__/rating-indicator.stories.storyshot @@ -63,7 +63,7 @@ exports[`Storyshots Components/Rating Indicator Custom icons 1`] = ` </label> - + <input aria-label="2 star" @@ -94,7 +94,7 @@ exports[`Storyshots Components/Rating Indicator Custom icons 1`] = ` </label> - + <input aria-label="3 star" @@ -124,7 +124,7 @@ exports[`Storyshots Components/Rating Indicator Custom icons 1`] = ` </label> - + <input aria-label="4 star" @@ -154,7 +154,7 @@ exports[`Storyshots Components/Rating Indicator Custom icons 1`] = ` </label> - + <input aria-label="5 star" @@ -245,14 +245,14 @@ exports[`Storyshots Components/Rating Indicator Different values 1`] = ` type="radio" value="1" /> - + <label class="fd-rating-indicator__label" for="rating-max-value-5-1" /> - + <input aria-label="2 star" @@ -270,7 +270,7 @@ exports[`Storyshots Components/Rating Indicator Different values 1`] = ` for="rating-max-value-5-2" /> - + <input aria-label="3 star" @@ -287,7 +287,7 @@ exports[`Storyshots Components/Rating Indicator Different values 1`] = ` for="rating-max-value-5-3" /> - + <input aria-label="4 star" @@ -304,7 +304,7 @@ exports[`Storyshots Components/Rating Indicator Different values 1`] = ` for="rating-max-value-5-4" /> - + <input aria-label="5 star" @@ -337,7 +337,7 @@ exports[`Storyshots Components/Rating Indicator Different values 1`] = ` </div> - + <div class="example-container" @@ -381,14 +381,14 @@ exports[`Storyshots Components/Rating Indicator Different values 1`] = ` type="radio" value="1" /> - + <label class="fd-rating-indicator__label" for="rating-max-value-6-1" /> - + <input aria-label="2 star" @@ -406,7 +406,7 @@ exports[`Storyshots Components/Rating Indicator Different values 1`] = ` for="rating-max-value-6-2" /> - + <input aria-label="3 star" @@ -423,7 +423,7 @@ exports[`Storyshots Components/Rating Indicator Different values 1`] = ` for="rating-max-value-6-3" /> - + <input aria-label="4 star" @@ -440,7 +440,7 @@ exports[`Storyshots Components/Rating Indicator Different values 1`] = ` for="rating-max-value-6-4" /> - + <input aria-label="5 star" @@ -457,7 +457,7 @@ exports[`Storyshots Components/Rating Indicator Different values 1`] = ` for="rating-max-value-6-5" /> - + <input aria-label="6 star" @@ -490,7 +490,7 @@ exports[`Storyshots Components/Rating Indicator Different values 1`] = ` </div> - + <div class="example-container" @@ -534,14 +534,14 @@ exports[`Storyshots Components/Rating Indicator Different values 1`] = ` type="radio" value="1" /> - + <label class="fd-rating-indicator__label" for="rating-max-value-7-1" /> - + <input aria-label="2 star" @@ -559,7 +559,7 @@ exports[`Storyshots Components/Rating Indicator Different values 1`] = ` for="rating-max-value-7-2" /> - + <input aria-label="3 star" @@ -576,7 +576,7 @@ exports[`Storyshots Components/Rating Indicator Different values 1`] = ` for="rating-max-value-7-3" /> - + <input aria-label="4 star" @@ -593,7 +593,7 @@ exports[`Storyshots Components/Rating Indicator Different values 1`] = ` for="rating-max-value-7-4" /> - + <input aria-label="5 star" @@ -610,7 +610,7 @@ exports[`Storyshots Components/Rating Indicator Different values 1`] = ` for="rating-max-value-7-5" /> - + <input aria-label="6 star" @@ -627,7 +627,7 @@ exports[`Storyshots Components/Rating Indicator Different values 1`] = ` for="rating-max-value-7-6" /> - + <input aria-label="7 star" @@ -710,14 +710,14 @@ exports[`Storyshots Components/Rating Indicator Disabled 1`] = ` type="radio" value="1" /> - + <label class="fd-rating-indicator__label" for="rating-disabled-1" /> - + <input aria-label="2 star" @@ -736,7 +736,7 @@ exports[`Storyshots Components/Rating Indicator Disabled 1`] = ` for="rating-disabled-2" /> - + <input aria-label="3 star" @@ -754,7 +754,7 @@ exports[`Storyshots Components/Rating Indicator Disabled 1`] = ` for="rating-disabled-3" /> - + <input aria-label="4 star" @@ -772,7 +772,7 @@ exports[`Storyshots Components/Rating Indicator Disabled 1`] = ` for="rating-disabled-4" /> - + <input aria-label="5 star" @@ -852,14 +852,14 @@ exports[`Storyshots Components/Rating Indicator Display mode 1`] = ` type="radio" value="1" /> - + <label class="fd-rating-indicator__label" for="rating-display-mode-1" /> - + <input aria-label="2 star" @@ -878,7 +878,7 @@ exports[`Storyshots Components/Rating Indicator Display mode 1`] = ` for="rating-display-mode-2" /> - + <input aria-label="3 star" @@ -896,7 +896,7 @@ exports[`Storyshots Components/Rating Indicator Display mode 1`] = ` for="rating-display-mode-3" /> - + <input aria-label="4 star" @@ -914,7 +914,7 @@ exports[`Storyshots Components/Rating Indicator Display mode 1`] = ` for="rating-display-mode-4" /> - + <input aria-label="5 star" @@ -1000,7 +1000,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` type="radio" value="0.5" /> - + <label class="fd-rating-indicator__label" @@ -1024,7 +1024,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` for="rating-half-sizes-1" /> - + <input aria-label="1 and half star" @@ -1041,7 +1041,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` for="rating-half-sizes-15" /> - + <input aria-label="2 star" @@ -1058,7 +1058,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` for="rating-half-sizes-2" /> - + <input aria-label="2 and half star" @@ -1076,7 +1076,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` for="rating-half-sizes-25" /> - + <input aria-label="3 star" @@ -1093,7 +1093,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` for="rating-half-sizes-3" /> - + <input aria-label="3 and half star" @@ -1110,7 +1110,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` for="rating-half-sizes-35" /> - + <input aria-label="4 star" @@ -1127,7 +1127,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` for="rating-half-sizes-4" /> - + <input aria-label="4 and half star" @@ -1144,7 +1144,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` for="rating-half-sizes-45" /> - + <input aria-label="5 star" @@ -1228,7 +1228,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` type="radio" value="0.5" /> - + <label class="fd-rating-indicator__label" @@ -1278,7 +1278,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` </label> - + <input aria-label="1 and half star" @@ -1308,7 +1308,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` </label> - + <input aria-label="2 star" @@ -1338,7 +1338,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` </label> - + <input aria-label="2 and half star" @@ -1369,7 +1369,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` </label> - + <input aria-label="3 star" @@ -1399,7 +1399,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` </label> - + <input aria-label="3 and half star" @@ -1429,7 +1429,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` </label> - + <input aria-label="4 star" @@ -1459,7 +1459,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` </label> - + <input aria-label="4 and half star" @@ -1489,7 +1489,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` </label> - + <input aria-label="5 star" @@ -1586,7 +1586,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` type="radio" value="0.5" /> - + <label class="fd-rating-indicator__label" @@ -1636,7 +1636,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` </label> - + <input aria-label="1 and half star" @@ -1666,7 +1666,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` </label> - + <input aria-label="2 star" @@ -1696,7 +1696,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` </label> - + <input aria-label="2 and half star" @@ -1727,7 +1727,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` </label> - + <input aria-label="3 star" @@ -1757,7 +1757,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` </label> - + <input aria-label="3 and half star" @@ -1787,7 +1787,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` </label> - + <input aria-label="4 star" @@ -1817,7 +1817,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` </label> - + <input aria-label="4 and half star" @@ -1847,7 +1847,7 @@ exports[`Storyshots Components/Rating Indicator Half values 1`] = ` </label> - + <input aria-label="5 star" @@ -1942,14 +1942,14 @@ exports[`Storyshots Components/Rating Indicator Non-interactive 1`] = ` type="radio" value="1" /> - + <label class="fd-rating-indicator__label" for="rating-non-interactive-mode-1" /> - + <input aria-label="2 star" @@ -1968,7 +1968,7 @@ exports[`Storyshots Components/Rating Indicator Non-interactive 1`] = ` for="rating-non-interactive-mode-2" /> - + <input aria-label="3 star" @@ -1986,7 +1986,7 @@ exports[`Storyshots Components/Rating Indicator Non-interactive 1`] = ` for="rating-non-interactive-mode-3" /> - + <input aria-label="4 star" @@ -2004,7 +2004,7 @@ exports[`Storyshots Components/Rating Indicator Non-interactive 1`] = ` for="rating-non-interactive-mode-4" /> - + <input aria-label="5 star" @@ -2090,14 +2090,14 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` type="radio" value="1" /> - + <label class="fd-rating-indicator__label" for="rating-1" /> - + <input aria-label="2 star" @@ -2115,7 +2115,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` for="rating-2" /> - + <input aria-label="3 star" @@ -2131,8 +2131,8 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` class="fd-rating-indicator__label" for="rating-3" /> - - + + <input aria-label="4 star" @@ -2149,7 +2149,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` for="rating-4" /> - + <input aria-label="5 star" @@ -2182,7 +2182,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` </div> - + <div class="example-container" @@ -2233,14 +2233,14 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` type="radio" value="1" /> - + <label class="fd-rating-indicator__label" for="rating-xs-1" /> - + <input aria-label="2 star" @@ -2258,7 +2258,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` for="rating-xs-2" /> - + <input aria-label="3 star" @@ -2275,7 +2275,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` for="rating-xs-3" /> - + <input aria-label="4 star" @@ -2292,7 +2292,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` for="rating-xs-4" /> - + <input aria-label="5 star" @@ -2377,14 +2377,14 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` type="radio" value="1" /> - + <label class="fd-rating-indicator__label" for="rating-s-1" /> - + <input aria-label="2 star" @@ -2402,7 +2402,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` for="rating-s-2" /> - + <input aria-label="3 star" @@ -2419,7 +2419,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` for="rating-s-3" /> - + <input aria-label="4 star" @@ -2436,7 +2436,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` for="rating-s-4" /> - + <input aria-label="5 star" @@ -2470,7 +2470,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` </div> - + <div class="example-container" @@ -2521,14 +2521,14 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` type="radio" value="1" /> - + <label class="fd-rating-indicator__label" for="rating-l-1" /> - + <input aria-label="2 star" @@ -2546,7 +2546,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` for="rating-l-2" /> - + <input aria-label="3 star" @@ -2563,7 +2563,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` for="rating-l-3" /> - + <input aria-label="4 star" @@ -2580,7 +2580,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` for="rating-l-4" /> - + <input aria-label="5 star" @@ -2613,7 +2613,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` </div> - + <div class="example-container" @@ -2664,14 +2664,14 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` type="radio" value="1" /> - + <label class="fd-rating-indicator__label" for="rating-cozy-1" /> - + <input aria-label="2 star" @@ -2689,7 +2689,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` for="rating-cozy-2" /> - + <input aria-label="3 star" @@ -2706,7 +2706,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` for="rating-cozy-3" /> - + <input aria-label="4 star" @@ -2723,7 +2723,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` for="rating-cozy-4" /> - + <input aria-label="5 star" @@ -2756,7 +2756,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` </div> - + <div class="example-container" @@ -2807,14 +2807,14 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` type="radio" value="1" /> - + <label class="fd-rating-indicator__label" for="rating-compact-1" /> - + <input aria-label="2 star" @@ -2832,7 +2832,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` for="rating-compact-2" /> - + <input aria-label="3 star" @@ -2849,7 +2849,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` for="rating-compact-3" /> - + <input aria-label="4 star" @@ -2866,7 +2866,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` for="rating-compact-4" /> - + <input aria-label="5 star" @@ -2899,7 +2899,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` </div> - + <div class="example-container" @@ -2950,14 +2950,14 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` type="radio" value="1" /> - + <label class="fd-rating-indicator__label" for="rating-condensed-1" /> - + <input aria-label="2 star" @@ -2975,7 +2975,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` for="rating-condensed-2" /> - + <input aria-label="3 star" @@ -2992,7 +2992,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` for="rating-condensed-3" /> - + <input aria-label="4 star" @@ -3009,7 +3009,7 @@ exports[`Storyshots Components/Rating Indicator Sizes 1`] = ` for="rating-condensed-4" /> - + <input aria-label="5 star" diff --git a/stories/section/__snapshots__/section.stories.storyshot b/stories/section/__snapshots__/section.stories.storyshot index cb980f98ba..49ba56af56 100644 --- a/stories/section/__snapshots__/section.stories.storyshot +++ b/stories/section/__snapshots__/section.stories.storyshot @@ -34,7 +34,7 @@ exports[`Storyshots Layouts/Section Section Structure 1`] = ` exports[`Storyshots Layouts/Section Testing Section With Headlines 1`] = ` <section> - + <section class="fd-section " @@ -73,7 +73,7 @@ exports[`Storyshots Layouts/Section Testing Section With Headlines 1`] = ` </section> - + <section class="fd-section " @@ -112,7 +112,7 @@ exports[`Storyshots Layouts/Section Testing Section With Headlines 1`] = ` </section> - + <section class="fd-section " @@ -151,7 +151,7 @@ exports[`Storyshots Layouts/Section Testing Section With Headlines 1`] = ` </section> - + <section class="fd-section " @@ -268,7 +268,7 @@ exports[`Storyshots Layouts/Section Testing Simple Section 1`] = ` </section> - + <section class="fd-section " @@ -300,7 +300,7 @@ exports[`Storyshots Layouts/Section Testing Simple Section 1`] = ` </section> - + <section class="fd-section " @@ -339,7 +339,7 @@ exports[`Storyshots Layouts/Section Testing Simple Section 1`] = ` </section> - + <section class="fd-section fd-section--full-bleed" @@ -378,7 +378,7 @@ exports[`Storyshots Layouts/Section Testing Simple Section 1`] = ` </section> - + <section class="fd-section " @@ -509,7 +509,7 @@ exports[`Storyshots Layouts/Section With Layout Grid 1`] = ` <div class="fd-col fd-col--4" > - + <div class="fd-layout-panel" @@ -538,7 +538,7 @@ exports[`Storyshots Layouts/Section With Layout Grid 1`] = ` <div class="fd-col fd-col--4" > - + <div class="fd-layout-panel" @@ -567,7 +567,7 @@ exports[`Storyshots Layouts/Section With Layout Grid 1`] = ` <div class="fd-col fd-col--4" > - + <div class="fd-layout-panel" diff --git a/stories/select/__snapshots__/select.stories.storyshot b/stories/select/__snapshots__/select.stories.storyshot index 0db7dda4f8..e47a3e9d0c 100644 --- a/stories/select/__snapshots__/select.stories.storyshot +++ b/stories/select/__snapshots__/select.stories.storyshot @@ -721,7 +721,7 @@ exports[`Storyshots Components/Select Blank 1`] = ` <i class="sap-icon--slim-arrow-down" /> - + </span> @@ -910,7 +910,7 @@ exports[`Storyshots Components/Select Blank 1`] = ` <i class="sap-icon--slim-arrow-down" /> - + </span> @@ -1132,7 +1132,7 @@ exports[`Storyshots Components/Select Compact 1`] = ` class="fd-list__title" > - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + 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. </span> @@ -1265,7 +1265,7 @@ exports[`Storyshots Components/Select Cozy 1`] = ` <i class="sap-icon--slim-arrow-down" /> - + </span> @@ -1528,7 +1528,7 @@ exports[`Storyshots Components/Select Form item 1`] = ` <i class="sap-icon--slim-arrow-down" /> - + </span> @@ -3869,8 +3869,8 @@ exports[`Storyshots Components/Select Text wrapping 1`] = ` class="fd-list__title" > - 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 + 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. </span> diff --git a/stories/shellbar/__snapshots__/shellbar.stories.storyshot b/stories/shellbar/__snapshots__/shellbar.stories.storyshot index f4b39c3669..59dc711f16 100644 --- a/stories/shellbar/__snapshots__/shellbar.stories.storyshot +++ b/stories/shellbar/__snapshots__/shellbar.stories.storyshot @@ -47,7 +47,7 @@ exports[`Storyshots Components/Shellbar Extra large 1`] = ` <div class="fd-shellbar__action fd-shellbar__action--desktop" > - + <div class="fd-popover__control" @@ -526,7 +526,7 @@ exports[`Storyshots Components/Shellbar Medium-large 1`] = ` <div class="fd-shellbar__action fd-shellbar__action--desktop" > - + <div class="fd-popover__control" @@ -1341,7 +1341,7 @@ exports[`Storyshots Components/Shellbar Product menu and search 1`] = ` <div class="fd-shellbar__action fd-shellbar__action--desktop" > - + <div class="fd-popover__control" @@ -2369,7 +2369,7 @@ exports[`Storyshots Components/Shellbar Small 1`] = ` <div class="fd-shellbar__action fd-shellbar__action--desktop" > - + <div class="fd-popover__control" diff --git a/stories/side-navigation/__snapshots__/side-navigation.stories.storyshot b/stories/side-navigation/__snapshots__/side-navigation.stories.storyshot index f17e567a2f..17b567719d 100644 --- a/stories/side-navigation/__snapshots__/side-navigation.stories.storyshot +++ b/stories/side-navigation/__snapshots__/side-navigation.stories.storyshot @@ -142,7 +142,7 @@ exports[`Storyshots Components/Side Navigation Complex (compact) 1`] = ` class="sap-icon--navigation-right-arrow" role="presentation" /> - + </button> @@ -567,7 +567,7 @@ exports[`Storyshots Components/Side Navigation Complex 1`] = ` class="sap-icon--navigation-right-arrow" role="presentation" /> - + </button> @@ -1654,7 +1654,7 @@ exports[`Storyshots Components/Side Navigation Group 1`] = ` </li> - + <li class="fd-nested-list__item" @@ -1696,7 +1696,7 @@ exports[`Storyshots Components/Side Navigation Group 1`] = ` class="sap-icon--navigation-right-arrow" role="presentation" /> - + </button> @@ -2595,7 +2595,7 @@ exports[`Storyshots Components/Side Navigation Nested List With Group Headers 1` class="sap-icon--navigation-right-arrow" role="presentation" /> - + </button> @@ -2675,7 +2675,7 @@ exports[`Storyshots Components/Side Navigation Nested List With Group Headers 1` class="sap-icon--navigation-right-arrow" role="presentation" /> - + </button> @@ -2755,7 +2755,7 @@ exports[`Storyshots Components/Side Navigation Nested List With Group Headers 1` class="sap-icon--navigation-right-arrow" role="presentation" /> - + </button> @@ -3126,7 +3126,7 @@ exports[`Storyshots Components/Side Navigation Nested List With Group Headers Co class="sap-icon--navigation-right-arrow" role="presentation" /> - + </button> @@ -3206,7 +3206,7 @@ exports[`Storyshots Components/Side Navigation Nested List With Group Headers Co class="sap-icon--navigation-right-arrow" role="presentation" /> - + </button> @@ -3286,7 +3286,7 @@ exports[`Storyshots Components/Side Navigation Nested List With Group Headers Co class="sap-icon--navigation-right-arrow" role="presentation" /> - + </button> @@ -3648,7 +3648,7 @@ exports[`Storyshots Components/Side Navigation Nested List With Icons Only In Fi class="sap-icon--navigation-right-arrow" role="presentation" /> - + </button> @@ -3728,7 +3728,7 @@ exports[`Storyshots Components/Side Navigation Nested List With Icons Only In Fi class="sap-icon--navigation-right-arrow" role="presentation" /> - + </button> @@ -3808,7 +3808,7 @@ exports[`Storyshots Components/Side Navigation Nested List With Icons Only In Fi class="sap-icon--navigation-right-arrow" role="presentation" /> - + </button> @@ -4141,7 +4141,7 @@ exports[`Storyshots Components/Side Navigation Nested List Without Icons 1`] = ` class="sap-icon--navigation-right-arrow" role="presentation" /> - + </button> @@ -4221,7 +4221,7 @@ exports[`Storyshots Components/Side Navigation Nested List Without Icons 1`] = ` class="sap-icon--navigation-right-arrow" role="presentation" /> - + </button> @@ -4301,7 +4301,7 @@ exports[`Storyshots Components/Side Navigation Nested List Without Icons 1`] = ` class="sap-icon--navigation-right-arrow" role="presentation" /> - + </button> @@ -4381,7 +4381,7 @@ exports[`Storyshots Components/Side Navigation Nested List Without Icons 1`] = ` class="sap-icon--navigation-right-arrow" role="presentation" /> - + </button> @@ -4835,7 +4835,7 @@ exports[`Storyshots Components/Side Navigation Nested List Without Links 1`] = ` class="sap-icon--navigation-right-arrow" role="presentation" /> - + </button> @@ -4904,7 +4904,7 @@ exports[`Storyshots Components/Side Navigation Nested List Without Links 1`] = ` class="sap-icon--navigation-right-arrow" role="presentation" /> - + </button> @@ -4973,7 +4973,7 @@ exports[`Storyshots Components/Side Navigation Nested List Without Links 1`] = ` class="sap-icon--navigation-right-arrow" role="presentation" /> - + </button> diff --git a/stories/status-indicator/__snapshots__/status-indicator.stories.storyshot b/stories/status-indicator/__snapshots__/status-indicator.stories.storyshot index 792cc52b30..d8849a64c9 100644 --- a/stories/status-indicator/__snapshots__/status-indicator.stories.storyshot +++ b/stories/status-indicator/__snapshots__/status-indicator.stories.storyshot @@ -1001,7 +1001,7 @@ exports[`Storyshots Components/Status Indicator Sizes 1`] = ` </svg> - + </svg> @@ -1096,7 +1096,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Angular fi </stop> - + <stop offset="0.8" @@ -1265,7 +1265,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Angular fi </stop> - + <stop offset="0.5" @@ -1434,7 +1434,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Angular fi </stop> - + <stop offset="0.5" @@ -1603,7 +1603,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Angular fi </stop> - + <stop offset="0.4" @@ -1988,7 +1988,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Label 1`] </svg> - + </svg> @@ -2288,7 +2288,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Label 1`] </svg> - + </svg> @@ -2391,7 +2391,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Linear fil </stop> - + <stop offset="0.8" @@ -2559,7 +2559,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Linear fil </stop> - + <stop offset="0.8" @@ -2735,7 +2735,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Radial fil </stop> - + <stop offset="0.3" @@ -2901,7 +2901,7 @@ exports[`Storyshots Components/Status Indicator Status Indicator With Radial fil </stop> - + <stop offset="0.3" diff --git a/stories/step-input/__snapshots__/step-input.stories.storyshot b/stories/step-input/__snapshots__/step-input.stories.storyshot index cfdc2002fa..8d56a45248 100644 --- a/stories/step-input/__snapshots__/step-input.stories.storyshot +++ b/stories/step-input/__snapshots__/step-input.stories.storyshot @@ -44,9 +44,9 @@ exports[`Storyshots Components/StepInput Compact 1`] = ` <input class=" - fd-input - fd-input--compact - fd-input--no-number-spinner + fd-input + fd-input--compact + fd-input--no-number-spinner fd-step-input__input " id="step-1" @@ -58,7 +58,7 @@ exports[`Storyshots Components/StepInput Compact 1`] = ` <button aria-label="Step up" class=" - fd-button + fd-button fd-button--compact fd-button--transparent fd-step-input__button" @@ -139,7 +139,7 @@ exports[`Storyshots Components/StepInput Default 1`] = ` <button aria-label="Step up" class=" - fd-button + fd-button fd-button--transparent fd-step-input__button" onclick="stepInputValue('step-3', 'up');" @@ -200,8 +200,8 @@ exports[`Storyshots Components/StepInput Disabled 1`] = ` <input class=" - fd-input - fd-input--no-number-spinner + fd-input + fd-input--no-number-spinner fd-step-input__input " disabled="" @@ -214,7 +214,7 @@ exports[`Storyshots Components/StepInput Disabled 1`] = ` <button aria-label="Step up" class=" - fd-button + fd-button fd-button--transparent fd-step-input__button" onclick="stepInputValue('step-13', 'up');" @@ -275,8 +275,8 @@ exports[`Storyshots Components/StepInput Focused 1`] = ` <input class=" - fd-input - fd-input--no-number-spinner + fd-input + fd-input--no-number-spinner fd-step-input__input " id="step-20" @@ -288,7 +288,7 @@ exports[`Storyshots Components/StepInput Focused 1`] = ` <button aria-label="Step up" class=" - fd-button + fd-button fd-button--transparent fd-step-input__button" onclick="stepInputValue('step-20', 'up');" @@ -354,8 +354,8 @@ exports[`Storyshots Components/StepInput Read-only 1`] = ` <input class=" - fd-input - fd-input--no-number-spinner + fd-input + fd-input--no-number-spinner fd-step-input__input " id="step-14" @@ -368,7 +368,7 @@ exports[`Storyshots Components/StepInput Read-only 1`] = ` <button aria-label="Step up" class=" - fd-button + fd-button fd-button--transparent fd-step-input__button" onclick="stepInputValue('step-14', 'up');" @@ -439,8 +439,8 @@ exports[`Storyshots Components/StepInput States 1`] = ` <input class=" - fd-input - fd-input--no-number-spinner + fd-input + fd-input--no-number-spinner fd-step-input__input " id="step-5" @@ -452,7 +452,7 @@ exports[`Storyshots Components/StepInput States 1`] = ` <button aria-label="Step up" class=" - fd-button + fd-button fd-button--transparent fd-step-input__button" onclick="stepInputValue('step-5', 'up');" @@ -513,8 +513,8 @@ exports[`Storyshots Components/StepInput States 1`] = ` <input class=" - fd-input - fd-input--no-number-spinner + fd-input + fd-input--no-number-spinner fd-step-input__input " id="step-6" @@ -526,7 +526,7 @@ exports[`Storyshots Components/StepInput States 1`] = ` <button aria-label="Step up" class=" - fd-button + fd-button fd-button--transparent fd-step-input__button" onclick="stepInputValue('step-6', 'up');" @@ -586,8 +586,8 @@ exports[`Storyshots Components/StepInput States 1`] = ` <input class=" - fd-input - fd-input--no-number-spinner + fd-input + fd-input--no-number-spinner fd-step-input__input " id="step-7" @@ -599,7 +599,7 @@ exports[`Storyshots Components/StepInput States 1`] = ` <button aria-label="Step up" class=" - fd-button + fd-button fd-button--transparent fd-step-input__button" onclick="stepInputValue('step-7', 'up');" @@ -661,8 +661,8 @@ exports[`Storyshots Components/StepInput States 1`] = ` <input class=" - fd-input - fd-input--no-number-spinner + fd-input + fd-input--no-number-spinner fd-step-input__input " id="step-8" @@ -674,7 +674,7 @@ exports[`Storyshots Components/StepInput States 1`] = ` <button aria-label="Step up" class=" - fd-button + fd-button fd-button--transparent fd-step-input__button" onclick="stepInputValue('step-8', 'up');" diff --git a/stories/table/__snapshots__/table.stories.storyshot b/stories/table/__snapshots__/table.stories.storyshot index b9f4023b6b..85ca6f2925 100644 --- a/stories/table/__snapshots__/table.stories.storyshot +++ b/stories/table/__snapshots__/table.stories.storyshot @@ -2788,9 +2788,9 @@ exports[`Storyshots Components/Table Fixed header 1`] = ` [dir=rtl] .fd-table--fixed, .fd-table--fixed[dir=rtl] { padding-left: 0; - padding-right: 200px; + padding-right: 200px; } - + .fd-table--fixed .fd-table__cell { min-width: 200px; max-width: 200px; @@ -8007,7 +8007,7 @@ exports[`Storyshots Components/Table Pagination 1`] = ` </a> - + <a aria-disabled="false" @@ -8024,7 +8024,7 @@ exports[`Storyshots Components/Table Pagination 1`] = ` </a> - + <a class="fd-button fd-button--compact fd-button--transparent fd-pagination__link" @@ -8033,7 +8033,7 @@ exports[`Storyshots Components/Table Pagination 1`] = ` 1 </a> - + <label class="fd-form-label fd-pagination__label" @@ -8042,7 +8042,7 @@ exports[`Storyshots Components/Table Pagination 1`] = ` Page: </label> - + <input class="fd-input fd-input--compact fd-pagination__input" @@ -8054,7 +8054,7 @@ exports[`Storyshots Components/Table Pagination 1`] = ` value="2" /> - + <a class="fd-button fd-button--compact fd-button--transparent fd-pagination__link" @@ -8079,7 +8079,7 @@ exports[`Storyshots Components/Table Pagination 1`] = ` 10 </a> - + <a aria-disabled="false" @@ -8096,7 +8096,7 @@ exports[`Storyshots Components/Table Pagination 1`] = ` </a> - + <a aria-disabled="false" @@ -8116,7 +8116,7 @@ exports[`Storyshots Components/Table Pagination 1`] = ` </nav> - + <div class="fd-pagination__total" @@ -9873,7 +9873,7 @@ exports[`Storyshots Components/Table Semantic 1`] = ` </tr> - + <tr class="fd-table__row" @@ -10007,7 +10007,7 @@ exports[`Storyshots Components/Table Semantic 1`] = ` </tr> - + <tr class="fd-table__row" @@ -10074,7 +10074,7 @@ exports[`Storyshots Components/Table Semantic 1`] = ` </tr> - + </tbody> diff --git a/stories/text/__snapshots__/text.stories.storyshot b/stories/text/__snapshots__/text.stories.storyshot index 30145397bd..5faa433e76 100644 --- a/stories/text/__snapshots__/text.stories.storyshot +++ b/stories/text/__snapshots__/text.stories.storyshot @@ -160,7 +160,7 @@ exports[`Storyshots Components/Text Max lines 1`] = ` Augue neque gravida in fermentum et. Proin fermentum leo vel orci porta non pulvinar. </p> - + <h3> 2 max lines @@ -242,7 +242,7 @@ exports[`Storyshots Components/Text Whitespace 1`] = ` deserunt mollit anim id est laborum. </p> - + <h3> Wrapped text with indents and whitespace @@ -254,9 +254,9 @@ exports[`Storyshots Components/Text Whitespace 1`] = ` > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntut labore et -dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut +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. diff --git a/stories/time-picker/__snapshots__/time-picker.stories.storyshot b/stories/time-picker/__snapshots__/time-picker.stories.storyshot index b99e9c27a2..3eb8e7eb18 100644 --- a/stories/time-picker/__snapshots__/time-picker.stories.storyshot +++ b/stories/time-picker/__snapshots__/time-picker.stories.storyshot @@ -1062,7 +1062,7 @@ exports[`Storyshots Patterns/Time Picker Tablet Mode 1`] = ` > 02 </span> - + </li> diff --git a/stories/time/__snapshots__/time.stories.storyshot b/stories/time/__snapshots__/time.stories.storyshot index e72755cac9..4caed40dbc 100644 --- a/stories/time/__snapshots__/time.stories.storyshot +++ b/stories/time/__snapshots__/time.stories.storyshot @@ -72,7 +72,7 @@ exports[`Storyshots Components/Time Default 1`] = ` > 02 </span> - + </li> @@ -259,7 +259,7 @@ exports[`Storyshots Components/Time Default 1`] = ` </div> - + <div class="fd-time" @@ -327,7 +327,7 @@ exports[`Storyshots Components/Time Default 1`] = ` > 02 </span> - + </li> @@ -544,7 +544,7 @@ exports[`Storyshots Components/Time Default 1`] = ` </div> - + <div class="fd-time" @@ -817,7 +817,7 @@ exports[`Storyshots Components/Time Desktop 1`] = ` > 02 </span> - + </li> @@ -1004,7 +1004,7 @@ exports[`Storyshots Components/Time Desktop 1`] = ` </div> - + <div class="fd-time fd-time--compact" @@ -1072,7 +1072,7 @@ exports[`Storyshots Components/Time Desktop 1`] = ` > 02 </span> - + </li> @@ -1289,7 +1289,7 @@ exports[`Storyshots Components/Time Desktop 1`] = ` </div> - + <div class="fd-time fd-time--compact" @@ -1562,7 +1562,7 @@ exports[`Storyshots Components/Time Scrollable 1`] = ` > 02 </span> - + </li> @@ -1817,7 +1817,7 @@ exports[`Storyshots Components/Time Scrollable 1`] = ` > 02 </span> - + </li> @@ -2307,7 +2307,7 @@ exports[`Storyshots Components/Time Tablet 1`] = ` > 02 </span> - + </li> @@ -2494,7 +2494,7 @@ exports[`Storyshots Components/Time Tablet 1`] = ` </div> - + <div class="fd-time fd-time--tablet" @@ -2562,7 +2562,7 @@ exports[`Storyshots Components/Time Tablet 1`] = ` > 02 </span> - + </li> @@ -2779,7 +2779,7 @@ exports[`Storyshots Components/Time Tablet 1`] = ` </div> - + <div class="fd-time fd-time--tablet" diff --git a/stories/tool-header/__snapshots__/tool-header.stories.storyshot b/stories/tool-header/__snapshots__/tool-header.stories.storyshot index 1210f2ccf0..ae5efce1e5 100644 --- a/stories/tool-header/__snapshots__/tool-header.stories.storyshot +++ b/stories/tool-header/__snapshots__/tool-header.stories.storyshot @@ -90,7 +90,7 @@ exports[`Storyshots Components/Tool Header Horizontal Paddings 1`] = ` <div class="fd-tool-header__element" > - + <span aria-label="John Doe" @@ -193,7 +193,7 @@ exports[`Storyshots Components/Tool Header Horizontal Paddings 1`] = ` <div class="fd-tool-header__element" > - + <span aria-label="John Doe" @@ -332,7 +332,7 @@ exports[`Storyshots Components/Tool Header Horizontal Paddings 1`] = ` <div class="fd-tool-header__element" > - + <span aria-label="John Doe" @@ -473,7 +473,7 @@ exports[`Storyshots Components/Tool Header Horizontal Paddings 1`] = ` aria-label="Select" class="fd-input-group__button fd-button fd-button--icon fd-button--transparent fd-button--compact fd-tool-header__button" > - + <i class="sap-icon--navigation-down-arrow" @@ -517,7 +517,7 @@ exports[`Storyshots Components/Tool Header Horizontal Paddings 1`] = ` <div class="fd-tool-header__element" > - + <span aria-label="John Doe" @@ -697,7 +697,7 @@ exports[`Storyshots Components/Tool Header Responsive Paddings 1`] = ` <div class="fd-tool-header__element" > - + <span aria-label="John Doe" @@ -945,7 +945,7 @@ exports[`Storyshots Components/Tool Header Tool Header with Controls 1`] = ` <div class="fd-tool-header__element" > - + <span aria-label="John Doe" @@ -1318,7 +1318,7 @@ exports[`Storyshots Components/Tool Header Tool Header with Side Navigation Menu aria-label="Search" class="fd-input-group__button fd-button fd-button--icon fd-button--transparent fd-button--compact fd-tool-header__button" > - + <i class="sap-icon--search" @@ -1384,7 +1384,7 @@ exports[`Storyshots Components/Tool Header Tool Header with Side Navigation Menu <div class="fd-tool-header__element" > - + <span aria-label="John Doe" diff --git a/stories/toolbar/__snapshots__/toolbar.stories.storyshot b/stories/toolbar/__snapshots__/toolbar.stories.storyshot index 2eb7f769da..8096591d1a 100644 --- a/stories/toolbar/__snapshots__/toolbar.stories.storyshot +++ b/stories/toolbar/__snapshots__/toolbar.stories.storyshot @@ -501,7 +501,7 @@ exports[`Storyshots Components/Toolbar Overflow 1`] = ` <i class="sap-icon--overflow" /> - + </button> diff --git a/stories/user-menu/__snapshots__/user-menu.stories.storyshot b/stories/user-menu/__snapshots__/user-menu.stories.storyshot index 7578095f8a..686cd88df6 100644 --- a/stories/user-menu/__snapshots__/user-menu.stories.storyshot +++ b/stories/user-menu/__snapshots__/user-menu.stories.storyshot @@ -2269,7 +2269,7 @@ exports[`Storyshots Components/User Menu Compact 1`] = ` aria-label="Search" class="fd-input-group__button fd-button fd-button--icon fd-button--transparent" > - + <i class="sap-icon--search" @@ -3229,7 +3229,7 @@ exports[`Storyshots Components/User Menu In-Place Navigation 1`] = ` aria-label="Search" class="fd-input-group__button fd-button fd-button--icon fd-button--transparent" > - + <i class="sap-icon--search" @@ -3669,7 +3669,7 @@ exports[`Storyshots Components/User Menu Shellbar 1`] = ` </div> - + <div aria-hidden="false" @@ -3694,7 +3694,7 @@ exports[`Storyshots Components/User Menu Shellbar 1`] = ` style="background-image: url('assets/images/avatars/1.svg');" /> - + <span aria-label="Avatar" @@ -3702,7 +3702,7 @@ exports[`Storyshots Components/User Menu Shellbar 1`] = ` style="background-image: url('assets/images/avatars/3.svg');" /> - + <button aria-label="Product" @@ -3716,7 +3716,7 @@ exports[`Storyshots Components/User Menu Shellbar 1`] = ` </div> - + <div class="fd-user-menu__subheader" @@ -3739,7 +3739,7 @@ exports[`Storyshots Components/User Menu Shellbar 1`] = ` </div> - + <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border" @@ -3932,7 +3932,7 @@ exports[`Storyshots Components/User Menu Shellbar 1`] = ` Delegate </span> - + <span class="fd-list__item-counter" @@ -4057,7 +4057,7 @@ exports[`Storyshots Components/User Menu Shellbar 1`] = ` </div> - + <div class="fd-popover__body-footer" diff --git a/stories/vertical-navigation/__snapshots__/vertical-navigation.stories.storyshot b/stories/vertical-navigation/__snapshots__/vertical-navigation.stories.storyshot index aa9b95c509..8c03adc30e 100644 --- a/stories/vertical-navigation/__snapshots__/vertical-navigation.stories.storyshot +++ b/stories/vertical-navigation/__snapshots__/vertical-navigation.stories.storyshot @@ -811,7 +811,7 @@ exports[`Storyshots Components/Vertical Navigation Navigation Indication 1`] = ` aria-label="Expand second submenu 4" class="fd-list__navigation-item-arrow sap-icon--navigation-down-arrow" /> - + <span class="fd-list__navigation-item-indicator" From 5cae77d16d7c5b3e7cf0e869c0b2c6d7606620e1 Mon Sep 17 00:00:00 2001 From: Platon Rov <platon.rov@gmail.com> Date: Wed, 29 Dec 2021 17:12:03 +0200 Subject: [PATCH 4/4] docs(styles,fn): storyDescription deprecation adoption [ci visual] --- stories/action-bar/action-bar.stories.js | 28 +++-- stories/action-sheet/action-sheet.stories.js | 12 +- stories/avatar-group/avatar-group.stories.js | 8 +- stories/avatar/avatar.stories.js | 40 +++++-- stories/bar/bar.stories.js | 28 +++-- stories/breadcrumb/breadcrumb.stories.js | 8 +- .../busy-indicator/busy-indicator.stories.js | 16 ++- stories/button/button.stories.js | 43 +++++-- stories/calendar/calendar.stories.js | 24 +++- stories/card/card.stories.js | 20 +++- stories/carousel/carousel.stories.js | 20 +++- stories/checkbox/checkbox.stories.js | 20 +++- stories/code/code.stories.js | 8 +- .../combobox-input/combobox-input.stories.js | 24 +++- stories/counter/counter.stories.js | 16 ++- stories/datepicker/datepicker.stories.js | 8 +- stories/dialog/dialog.stories.js | 24 +++- .../dnd-icon-tab-bar.stories.js | 8 +- stories/dynamic-page/dynamic-page.stories.js | 36 ++++-- .../dynamic-side-content.stories.js | 20 +++- stories/facets/facets.stories.js | 28 +++-- stories/feed-input/feed-input.stories.js | 28 +++-- stories/feed-list/feed-list.stories.js | 40 +++++-- .../file-uploader/file-uploader.stories.js | 12 +- .../fixed-card-layout.stories.js | 4 +- .../flexible-column-layout.stories.js | 12 +- stories/fn-avatar/fn-avatar.stories.js | 28 +++-- stories/fn-button/fn-button.stories.js | 28 +++-- stories/fn-dialog/fn-dialog.stories.js | 4 +- .../fn-generic-tag/fn-generic-tag.stories.js | 16 ++- stories/fn-input/fn-input.stories.js | 16 ++- stories/fn-link/fn-link.stories.js | 4 +- .../fn-message-box/fn-message-box.stories.js | 24 +++- stories/fn-tabs/fn-tabs.stories.js | 8 +- stories/fn-title/title.stories.js | 12 +- stories/fn-toggles/fn-toggles.stories.js | 8 +- .../form-fieldset/form-fieldset.stories.js | 4 +- stories/form-grid/form-grid.stories.js | 64 ++++++++--- stories/form-group/form-group.stories.js | 24 +++- stories/form-header/form-header.stories.js | 4 +- stories/form-item/form-item.stories.js | 12 +- stories/form-label/form-label.stories.js | 16 ++- stories/form-message/form-message.stories.js | 16 ++- stories/generic-tile/generic-tile.stories.js | 40 +++++-- .../horizontal-navigation.stories.js | 8 +- stories/icon-tab-bar/icon-tab-bar.stories.js | 64 ++++++++--- .../iconBusinessSuite.stories.js | 8 +- stories/icon/SAPIcons/icon.stories.js | 8 +- stories/icon/TNTIcons/iconTnt.stories.js | 8 +- .../illustrated-message.stories.js | 8 +- stories/input-group/input-group.stories.js | 20 +++- stories/layout-grid/layout-grid.stories.js | 32 ++++-- stories/link/link.stories.js | 4 +- stories/list-grid/list-grid.stories.js | 48 ++++++-- stories/list/byline/byline-list.stories.js | 40 +++++-- .../list/standard/standard-list.stories.js | 64 ++++++++--- stories/margins/margins.stories.js | 24 +++- stories/menu/menu.stories.js | 24 +++- stories/message-box/message-box.stories.js | 12 +- stories/message-page/message-page.stories.js | 20 +++- .../message-strip/message-strip.stories.js | 24 +++- .../message-toast/message-toast.stories.js | 4 +- .../micro-process-flow.stories.js | 28 +++-- .../multi-combo-box.stories.js | 32 ++++-- stories/multi-input/multi-input.stories.js | 28 +++-- stories/notification/notification.stories.js | 24 +++- .../object-identifier.stories.js | 20 +++- stories/object-list/object-list.stories.js | 20 +++- .../object-marker/object-marker.stories.js | 8 +- stories/off-screen/off-screen.stories.js | 4 +- stories/paddings/paddings.stories.js | 16 ++- stories/page-footer/page-footer.stories.js | 16 ++- stories/page/page.stories.js | 8 +- stories/pagination/pagination.stories.js | 24 +++- stories/panel/panel.stories.js | 16 ++- stories/popover/popover.stories.js | 16 ++- .../product-switch/product-switch.stories.js | 18 ++- .../progress-indicator.stories.js | 12 +- stories/quick-view/quick-view.stories.js | 12 +- stories/radio/radio.stories.js | 12 +- .../rating-indicator.stories.js | 28 +++-- .../resizable-card-layout.stories.js | 16 ++- stories/scrollbar/scrollbar.stories.js | 4 +- stories/section/section.stories.js | 16 ++- stories/select/select.stories.js | 60 +++++++--- stories/shellbar/shellbar.stories.js | 24 +++- .../side-navigation.stories.js | 32 ++++-- stories/slider/slider.stories.js | 20 +++- .../status-indicator.stories.js | 28 +++-- stories/step-input/step-input.stories.js | 24 +++- stories/switch/switch.stories.js | 12 +- stories/table/table.stories.js | 108 +++++++++++++----- stories/tabs/tabs.stories.js | 48 ++++++-- stories/text/text.stories.js | 20 +++- stories/textarea/textarea.stories.js | 12 +- stories/time/time.stories.js | 16 ++- stories/title/title.stories.js | 16 ++- stories/token/token.stories.js | 28 +++-- stories/tool-header/tool-header.stories.js | 12 +- stories/toolbar/toolbar.stories.js | 20 +++- stories/tree/tree.stories.js | 24 +++- .../upload-collection.stories.js | 12 +- stories/user-menu/user-menu.stories.js | 8 +- .../vertical-navigation.stories.js | 20 +++- stories/wizard/wizard.stories.js | 20 +++- 105 files changed, 1668 insertions(+), 557 deletions(-) diff --git a/stories/action-bar/action-bar.stories.js b/stories/action-bar/action-bar.stories.js index dd235a67e4..547369198e 100644 --- a/stories/action-bar/action-bar.stories.js +++ b/stories/action-bar/action-bar.stories.js @@ -67,7 +67,9 @@ NoBackBtn.storyName = 'No back button'; NoBackBtn.parameters = { docs: { iframeHeight: 400, - storyDescription: 'This action bar doesn’t display a back button.' + description: { + story: 'This action bar doesn’t display a back button.' + } } }; export const BackBtnNoDescription = () => `<div class="fd-action-bar"> @@ -92,7 +94,9 @@ BackBtnNoDescription.storyName = 'No description'; BackBtnNoDescription.parameters = { docs: { iframeHeight: 400, - storyDescription: 'This action bar doesn’t display a description.' + description: { + story: 'This action bar doesn’t display a description.' + } } }; export const LongTitleDescription = () => `<div class="fd-action-bar"> @@ -120,7 +124,9 @@ LongTitleDescription.storyName = 'Descriptive'; LongTitleDescription.parameters = { docs: { iframeHeight: 400, - storyDescription: 'The descriptive action bar displays a long page title and description.' + description: { + story: 'The descriptive action bar displays a long page title and description.' + } } }; @@ -180,7 +186,9 @@ Actions.storyName = 'Contextual'; Actions.parameters = { docs: { iframeHeight: 400, - storyDescription: 'The contextual action bar displays a page title and contextual menu with several main actions. To display a contextual menu, add the `fd-popover` class to the`fd-action-bar__actions` element.' + description: { + story: 'The contextual action bar displays a page title and contextual menu with several main actions. To display a contextual menu, add the `fd-popover` class to the`fd-action-bar__actions` element.' + } } }; @@ -207,7 +215,9 @@ ResponsiveL.storyName = 'Responsive (M-L)'; ResponsiveL.parameters = { docs: { iframeHeight: 400, - storyDescription: 'This action bar is responsive and fits the M and L sizes required for tablet and small desktop screens. To display this size, add the `fd-action-bar--m\\_l` modifier class to the main element.' + description: { + story: 'This action bar is responsive and fits the M and L sizes required for tablet and small desktop screens. To display this size, add the `fd-action-bar--m\\_l` modifier class to the main element.' + } } }; @@ -234,7 +244,9 @@ ResponsiveXL.storyName = 'Responsive (XL)'; ResponsiveXL.parameters = { docs: { iframeHeight: 400, - storyDescription: 'This action bar is responsive and fits the XL size required for larger screens of 1440px or more. To display this size, add the `fd-action-bar--xl` modifier class to the main element.' + description: { + story: 'This action bar is responsive and fits the XL size required for larger screens of 1440px or more. To display this size, add the `fd-action-bar--xl` modifier class to the main element.' + } } }; @@ -294,6 +306,8 @@ export const Mobile = () => `<div style="width:319px;"> Mobile.parameters = { docs: { iframeHeight: 400, - storyDescription: 'This action bar is mobile responsive. To display the mobile action bar, add the `fd-action-bar--s` modifier class to the main element.' + description: { + story: 'This action bar is mobile responsive. To display the mobile action bar, add the `fd-action-bar--s` modifier class to the main element.' + } } }; diff --git a/stories/action-sheet/action-sheet.stories.js b/stories/action-sheet/action-sheet.stories.js index de4615cea0..fddb9a662e 100644 --- a/stories/action-sheet/action-sheet.stories.js +++ b/stories/action-sheet/action-sheet.stories.js @@ -74,8 +74,10 @@ export const ActionSheetDesktop = () => ` ActionSheetDesktop.parameters = { docs: { iframeHeight: 300, - storyDescription: + description: { + story: 'The action sheet is displayed in desktop mode by adding the `fd-action-sheet--compact` modifier class to the container, and `fd-button--compact` to each button.' + } } }; @@ -131,8 +133,10 @@ export const ActionSheetTablet = () => ` ActionSheetTablet.parameters = { docs: { iframeHeight: 300, - storyDescription: + description: { + story: 'Although the tablet mode is visually similar to desktop, it doesn\'t require any modifier classes. Therefore, the container and buttons appear slightly larger for better visibility.' + } } }; @@ -191,8 +195,10 @@ export const ActionSheetMobile = () => `<div style="width: 350px; height: 600px; ActionSheetMobile.parameters = { docs: { iframeHeight: 800, - storyDescription: `To display the action sheet on mobile screens, + description: { + story: `To display the action sheet on mobile screens, the container requires a \`fd-action-sheet--mobile\` modifier class and is additionally wrapped by \`fd-action-sheet__wrapper\`.` + } } }; diff --git a/stories/avatar-group/avatar-group.stories.js b/stories/avatar-group/avatar-group.stories.js index 7b610b8985..f8a9e13ae5 100644 --- a/stories/avatar-group/avatar-group.stories.js +++ b/stories/avatar-group/avatar-group.stories.js @@ -276,7 +276,9 @@ export const IndividualType = () => `<div class="fd-avatar-group fd-avatar-group IndividualType.parameters = { docs: { iframeHeight: 250, - storyDescription: 'To use Individual type of Avatar Group use the `--individual-type` modifier class <i>(`fd-avatar-group--individual-type` class)<i>.' + description: { + story: 'To use Individual type of Avatar Group use the `--individual-type` modifier class <i>(`fd-avatar-group--individual-type` class)<i>.' + } } }; @@ -393,7 +395,9 @@ export const GroupType = () => `<div class="fd-popover"> GroupType.parameters = { docs: { iframeHeight: 250, - storyDescription: 'To use Group type of Avatar Group use the `--group-type` modifier class <i>(`fd-avatar-group--group-type` class)<i>.' + description: { + story: 'To use Group type of Avatar Group use the `--group-type` modifier class <i>(`fd-avatar-group--group-type` class)<i>.' + } } }; diff --git a/stories/avatar/avatar.stories.js b/stories/avatar/avatar.stories.js index 5cdd503255..be48386951 100644 --- a/stories/avatar/avatar.stories.js +++ b/stories/avatar/avatar.stories.js @@ -54,7 +54,9 @@ export const Icon = () => ` Icon.parameters = { docs: { iframeHeight: 200, - storyDescription: 'The icon avatar can be used to display non-interactive icons. If you want the icon to be interactive, use the **Button** component with an icon inside instead. <br><br>When using the icon avatar for illustrative purposes only, include `role="presentation"` in the element. For instance, include role=` if the icon sits right next to a label.' + description: { + story: 'The icon avatar can be used to display non-interactive icons. If you want the icon to be interactive, use the **Button** component with an icon inside instead. <br><br>When using the icon avatar for illustrative purposes only, include `role="presentation"` in the element. For instance, include role=` if the icon sits right next to a label.' + } } }; @@ -71,7 +73,9 @@ export const Initials = () => ` Initials.parameters = { docs: { iframeHeight: 200, - storyDescription: 'The initials avatar can display up to three alphabetical characters representing the first and last name(s) of a person, for example: MvV for Marjolein van Veen. The order in which the first and last name(s) are displayed depends on the language-specific settings.<br><br> When there is no equivalent text for the avatar, include `aria-label` in the element. This isn’t necessary if the avatar is used for illustrative purposes only. See **Icon** above.' + description: { + story: 'The initials avatar can display up to three alphabetical characters representing the first and last name(s) of a person, for example: MvV for Marjolein van Veen. The order in which the first and last name(s) are displayed depends on the language-specific settings.<br><br> When there is no equivalent text for the avatar, include `aria-label` in the element. This isn’t necessary if the avatar is used for illustrative purposes only. See **Icon** above.' + } } }; @@ -102,7 +106,9 @@ export const Circle = () => ` Circle.parameters = { docs: { iframeHeight: 200, - storyDescription: 'A circle style can be displayed by adding the `--circle` modifier class.' + description: { + story: 'A circle style can be displayed by adding the `--circle` modifier class.' + } } }; @@ -119,7 +125,8 @@ export const BackgroundImage = () => ` BackgroundImage.parameters = { docs: { iframeHeight: 200, - storyDescription: ` + description: { + story: ` A background image can be displayed by adding the \`--thumbnail\` modifier class. There are two options to set the backgroundd: Cover (default) and Contain. @@ -127,6 +134,7 @@ There are two options to set the backgroundd: Cover (default) and Contain. - Contain: The image is scaled down to fit into the control area. The entire image is displayed, but might not fully fill the shape. In this case, the control displays a default background color. The image itself is always centered inside the shape. Changing the default \`background-size: cover\` to \`background-size: contain\` CSS property can be achieved by adding \`--background-contain\` modifier class` + } } }; @@ -156,7 +164,9 @@ export const Transparent = () => ` Transparent.parameters = { docs: { iframeHeight: 200, - storyDescription: 'A transparent style can be displayed by adding the `--transparent` modifier class.' + description: { + story: 'A transparent style can be displayed by adding the `--transparent` modifier class.' + } } }; @@ -182,7 +192,9 @@ export const PlaceholderBackground = () => ` PlaceholderBackground.parameters = { docs: { iframeHeight: 200, - storyDescription: 'An avatar with a placeholder background can be displayed by adding the `--placeholder` modifier class.' + description: { + story: 'An avatar with a placeholder background can be displayed by adding the `--placeholder` modifier class.' + } } }; @@ -209,7 +221,9 @@ export const TileIconBackground = () => ` TileIconBackground.parameters = { docs: { iframeHeight: 200, - storyDescription: 'An avatar with a tile icon background can be displayed by adding the `--tile` modifier class.' + description: { + story: 'An avatar with a tile icon background can be displayed by adding the `--tile` modifier class.' + } } }; @@ -250,7 +264,9 @@ export const AccentColors = () => ` AccentColors.parameters = { docs: { iframeHeight: 200, - storyDescription: 'To change the background color, add the `fd-avatar--accent-color-*` class with the number indicating the desired color. The color options include numbers ranging from 1 to 10, for example: `fd-avatar--accent-color-10`.' + description: { + story: 'To change the background color, add the `fd-avatar--accent-color-*` class with the number indicating the desired color. The color options include numbers ranging from 1 to 10, for example: `fd-avatar--accent-color-10`.' + } } }; @@ -296,7 +312,9 @@ export const ZoomIcon = () => ` ZoomIcon.parameters = { docs: { iframeHeight: 200, - storyDescription: 'Any avatar can display a zoom icon by creating an element with `fd-avatar__zoom-icon` class.' + description: { + story: 'Any avatar can display a zoom icon by creating an element with `fd-avatar__zoom-icon` class.' + } } }; @@ -332,6 +350,8 @@ export const Borders = () => ` Borders.parameters = { docs: { iframeHeight: 200, - storyDescription: 'Borders can be displayed by adding the `--border` modifier class.' + description: { + story: 'Borders can be displayed by adding the `--border` modifier class.' + } } }; diff --git a/stories/bar/bar.stories.js b/stories/bar/bar.stories.js index e22fd3ef3e..f5ee9aad4e 100644 --- a/stories/bar/bar.stories.js +++ b/stories/bar/bar.stories.js @@ -122,7 +122,9 @@ export const Default = () => ` Default.parameters = { docs: { iframeHeight: 200, - storyDescription: 'The default bar contains a back button, page title, segmented button and product switch button. It can be displayed by using the `fd-bar` class, and is responsive to desktop screen sizes. The default bar is in compact mode. Fiori 3 doesn\'t forbid including cozy elements inside (e.g. cozy buttons). Add `--title` modifier class to bar element, if title is first element in bar.' + description: { + story: 'The default bar contains a back button, page title, segmented button and product switch button. It can be displayed by using the `fd-bar` class, and is responsive to desktop screen sizes. The default bar is in compact mode. Fiori 3 doesn\'t forbid including cozy elements inside (e.g. cozy buttons). Add `--title` modifier class to bar element, if title is first element in bar.' + } } }; @@ -179,7 +181,9 @@ export const Cozy = () => `<div class="fd-bar fd-bar--cozy"> Cozy.parameters = { docs: { iframeHeight: 100, - storyDescription: 'The cozy bar contains a back button, icon buttons, segmented button and product switch button. It is responsive to tablet and mobile screen sizes. To apply cozy mode, add the `--cozy` modifier class to the container element.' + description: { + story: 'The cozy bar contains a back button, icon buttons, segmented button and product switch button. It is responsive to tablet and mobile screen sizes. To apply cozy mode, add the `--cozy` modifier class to the container element.' + } } }; @@ -290,7 +294,9 @@ export const Header = () => ` Header.parameters = { docs: { iframeHeight: 350, - storyDescription: 'The header bar contains actions that impact the entire page. It can be displayed by adding the `--header` modifier class to the container element.' + description: { + story: 'The header bar contains actions that impact the entire page. It can be displayed by adding the `--header` modifier class to the container element.' + } } }; @@ -363,7 +369,9 @@ export const Subheader = () => ` Subheader.parameters = { docs: { iframeHeight: 450, - storyDescription: 'To change the header bar into a subheader, add the `--subheader` modifier class to the container element.' + description: { + story: 'To change the header bar into a subheader, add the `--subheader` modifier class to the container element.' + } } }; @@ -431,7 +439,9 @@ export const HeaderWithSubheader = () => ` HeaderWithSubheader.parameters = { docs: { iframeHeight: 250, - storyDescription: 'To add a subheader under a header bar, the container element should have the `--header-with-subheader` modifier class, which will remove the element’s box shadow.' + description: { + story: 'To add a subheader under a header bar, the container element should have the `--header-with-subheader` modifier class, which will remove the element’s box shadow.' + } } }; @@ -466,7 +476,9 @@ export const Footer = () => ` Footer.parameters = { docs: { iframeHeight: 150, - storyDescription: 'The footer bar should display only closing and finalizing action buttons that impact the entire page such as *Save* or *Cancel*. It can be displayed by adding the `--footer` modifier class to the container element.' + description: { + story: 'The footer bar should display only closing and finalizing action buttons that impact the entire page such as *Save* or *Cancel*. It can be displayed by adding the `--footer` modifier class to the container element.' + } } }; @@ -505,6 +517,8 @@ export const FloatingFooter = () => ` FloatingFooter.parameters = { docs: { iframeHeight: 150, - storyDescription: 'The floating footer bar should also display only finalizing action buttons that impact the entire page. This type floats above the page at the bottom of the screen and is always visible when scrolling. It can be displayed by adding the `--floating-footer` modifier class to the container element.' + description: { + story: 'The floating footer bar should also display only finalizing action buttons that impact the entire page. This type floats above the page at the bottom of the screen and is always visible when scrolling. It can be displayed by adding the `--floating-footer` modifier class to the container element.' + } } }; diff --git a/stories/breadcrumb/breadcrumb.stories.js b/stories/breadcrumb/breadcrumb.stories.js index d718b80ecc..108c02f404 100644 --- a/stories/breadcrumb/breadcrumb.stories.js +++ b/stories/breadcrumb/breadcrumb.stories.js @@ -42,7 +42,9 @@ export const Standard = () => `<nav aria-label="products breadcrumbs"> Standard.parameters = { docs: { - storyDescription: 'The standard breadcrumb component displays several pages in text format separated by dividers, indicating a navigation path. Each page can be specifically selected to navigate to its corresponding page. It can be displayed by using the `fd-breadcrumb` class.' + description: { + story: 'The standard breadcrumb component displays several pages in text format separated by dividers, indicating a navigation path. Each page can be specifically selected to navigate to its corresponding page. It can be displayed by using the `fd-breadcrumb` class.' + } } }; @@ -101,6 +103,8 @@ export const Overflow = () => ` Overflow.parameters = { docs: { iframeHeight: 200, - storyDescription: 'The overflow breadcrumb component displays a dropdown menu, followed by several pages in the navigation path. <br>Like the standard breadcrumb, each page can be selected to navigate to its corresponding page. This type is responsive and will collapse into a dropdown menu if there is insufficient horizontal space on the screen. <br>To display the overflow breadcrumb, include the `fd-popover` component in the first breadcrumb item within the element.' + description: { + story: 'The overflow breadcrumb component displays a dropdown menu, followed by several pages in the navigation path. <br>Like the standard breadcrumb, each page can be selected to navigate to its corresponding page. This type is responsive and will collapse into a dropdown menu if there is insufficient horizontal space on the screen. <br>To display the overflow breadcrumb, include the `fd-popover` component in the first breadcrumb item within the element.' + } } }; diff --git a/stories/busy-indicator/busy-indicator.stories.js b/stories/busy-indicator/busy-indicator.stories.js index 775f91c31e..fb6f8b4f88 100644 --- a/stories/busy-indicator/busy-indicator.stories.js +++ b/stories/busy-indicator/busy-indicator.stories.js @@ -52,8 +52,10 @@ export const Standard = () => `<div style="text-align: center"> Standard.parameters = { docs: { iframeHeight: 200, - storyDescription: + description: { + story: 'The standard busy indicator animates a sequence of cascading dots expanding and shrinking in a loop. The component comes in three sizes detailed above. To display the busy indicator, use the `fd-busy-indicator` class. If you want to display a certain size, add the modifier class of the desired size i.e. `--m` to the element.' + } } }; @@ -69,8 +71,10 @@ export const ContrastMode = () => `<div style="display:flex;justify-content:cent ContrastMode.parameters = { docs: { iframeHeight: 200, - storyDescription: + description: { + story: 'The busy indicator also comes in contrast mode and displays white dots against a dark background. To apply contrast mode, add `contrast` into the element i.e. `fd-busy-indicator--m contrast`.' + } } }; @@ -86,8 +90,10 @@ export const ExtendedBusyIndicator = () => `<div class="fd-busy-indicator-extend ExtendedBusyIndicator.parameters = { docs: { iframeHeight: 200, - storyDescription: + description: { + story: 'If more information needs to be displayed with the loading animation, it is replaced by the Extended Busy Indicator `fd-busy-indicator-extended`. The additional information is wrapped in an element with `fd-busy-indicator-extended__label` class.' + } } }; @@ -103,7 +109,9 @@ export const ExtendedBusyIndicatorInsideMessageToast = () => `<div class="fd-mes ExtendedBusyIndicatorInsideMessageToast.parameters = { docs: { iframeHeight: 200, - storyDescription: + description: { + story: 'At the Page level the Busy Indicator should always be placed in a container. The simplest form of container will be centred on the page and inherit the color values from Message Toast.' + } } }; diff --git a/stories/button/button.stories.js b/stories/button/button.stories.js index be52497ada..3ad2145ddf 100644 --- a/stories/button/button.stories.js +++ b/stories/button/button.stories.js @@ -53,7 +53,8 @@ export const Types = () => `<div class="fddocs-container fddocs-button-container Types.storyName = 'Button styles'; Types.parameters = { docs: { - storyDescription: ` + description: { + story: ` - **Default button** is used for neutral or informative (secondary) actions. - **Emphasized button** is used to indicate the primary action on the screen. - **Ghost button** is used to trigger secondary actions. If a page already has a primary action, but you also need to highlight the most important action in a content toolbar, use the ghost style. @@ -63,6 +64,7 @@ Types.parameters = { - **Transparent button** is used to trigger a negative path action within a header or footer bar, and secondary actions in toolbars. ` + } } }; @@ -124,7 +126,9 @@ export const Toggle = () => `<h4>Inactive state of toggle button</h4> Toggle.storyName = 'Toggle button'; Toggle.parameters = { docs: { - storyDescription: 'A toggle button switches between two actions. One of the actions is always active, one is inactive. Use the toggle button for secondary actions. Apply the `fd-button--toggled` modifier class to set the action to active.' + description: { + story: 'A toggle button switches between two actions. One of the actions is always active, one is inactive. Use the toggle button for secondary actions. Apply the `fd-button--toggled` modifier class to set the action to active.' + } } }; @@ -148,8 +152,10 @@ export const SegmentedButton = () => ` SegmentedButton.storyName = 'Segmented button'; SegmentedButton.parameters = { docs: { - storyDescription: `The segmented button displays a group of options. Only one option can be active at a time by selecting it, while the others remain or become inactive when the initial option is selected. This button type was previously known as "button group" and is comparable to a radio button group. + description: { + story: `The segmented button displays a group of options. Only one option can be active at a time by selecting it, while the others remain or become inactive when the initial option is selected. This button type was previously known as "button group" and is comparable to a radio button group. <br><br>It can be displayed by using the \`fd-segmented-button\` class with \`role="group"\` and the \`aria-label="Group label"\` attribute.` + } } }; @@ -177,10 +183,12 @@ export const BadgeOnButton = () => ` BadgeOnButton.storyName = 'Button With Badge'; BadgeOnButton.parameters = { docs: { - storyDescription: `Button gets a badge in cases of collecting a number of items from various pages in order to + description: { + story: `Button gets a badge in cases of collecting a number of items from various pages in order to trigger an action. <br/> Currently the Emphasized, Standard, Ghost and Transparent type of buttons are recommended to be used with Badge. <br/> <b>Badges cannot contain more characters than 4</b>.` + } } }; @@ -284,7 +292,9 @@ MenuButton.storyName = 'Menu button'; MenuButton.parameters = { docs: { iframeHeight: 300, - storyDescription: 'The menu button displays a dropdown menu upon selection and is considered the default menu button. There are two different type of menu buttons: the default menu button and split menu button, and both of them can contain items with submenus.' + description: { + story: 'The menu button displays a dropdown menu upon selection and is considered the default menu button. There are two different type of menu buttons: the default menu button and split menu button, and both of them can contain items with submenus.' + } } }; @@ -372,7 +382,8 @@ SplitMenuButton.storyName = 'Split menu button'; SplitMenuButton.parameters = { docs: { iframeHeight: 150, - storyDescription: `The split menu button has two separate areas: the text label and the icon. The separator between them indicates that each area results in a different action, giving the user two choices: select the text label to trigger the action or select the arrow to open the menu. This button has a fixed size and the text truncates if the menu items exceed the maximum width available. + description: { + story: `The split menu button has two separate areas: the text label and the icon. The separator between them indicates that each area results in a different action, giving the user two choices: select the text label to trigger the action or select the arrow to open the menu. This button has a fixed size and the text truncates if the menu items exceed the maximum width available. <br><br> Note: If the default action is displayed as an icon only, all the menu items must contain icons. **The split menu button can behave in two different ways:** @@ -382,6 +393,7 @@ SplitMenuButton.parameters = { The split menu button can be displayed by using \`fd-button-split fd-has-margin-right-small\` class with \`role=”group”\` and the \`aria-label=”button-split”\` attribute. ` + } } }; @@ -411,9 +423,11 @@ Sizes.storyName = 'Button sizes'; Sizes.parameters = { docs: { iframeHeight: 150, - storyDescription: ` + description: { + story: ` The buttons in the first row are displayed in cozy size, which is the default sizing and does not require a modifier. The compact buttons shown in the second row, however, can be displayed by adding the \`–compact\` modifier class to the element. ` + } } }; @@ -441,7 +455,8 @@ IconAndText.storyName = 'Icon or text'; IconAndText.parameters = { docs: { iframeHeight: 150, - storyDescription: ` + description: { + story: ` These buttons contain either icons **or** text, as it is highly recommended not to combine the two. **Use icon buttons for basic actions such as:** @@ -454,9 +469,11 @@ These buttons contain either icons **or** text, as it is highly recommended not Make sure the default accessibility text for the icon is appropriate for your use case. If the text is not ideal, define an app-specific accessibility text. -All button styles can be paired with an icon. You can use the \`sap-icon--{icon-name}\` class to attach an icon to the button. +All button styles can be paired with an icon. You can use the \`sap-icon--{icon-name } +}\` class to attach an icon to the button. The full list of all the available icons can be found on the <a href="icon.html">Icon</a> page. ` + } } }; @@ -516,7 +533,8 @@ ButtonStates.storyName = 'Button states'; ButtonStates.parameters = { docs: { iframeHeight: 450, - storyDescription: ` + description: { + story: ` These button types indicate different states: normal, selected, disabled and focusable disabled. - **Normal**: The button’s default state. It can be selected to perform a corresponding action. @@ -524,6 +542,7 @@ These button types indicate different states: normal, selected, disabled and foc - **Disabled**: It cannot be selected. This state can be displayed by using the \`is-disabled\` class and the \`aria-disabled=”true”\` attribute for accessibility. - **Focusable disabled**: It cannot be selected, but it is tabbable and focusable. When the button is selected, a focus ring appears. This state can be displayed by using the \`is-disabled\` class and the \`aria-disabled=”true”\` attribute for accessibility without using the \`disabled\` property. By adding the hidden \`_instructions\` element, the user will be notified for further instructions on how to enable the button. They will also be notified when the button is enabled when using the \`aria-live\` property. ` + } } }; @@ -537,7 +556,8 @@ export const FocusableDisabled = () => ` FocusableDisabled.storyName = 'Focusable disabled'; FocusableDisabled.parameters = { docs: { - storyDescription: ` + description: { + story: ` The disabled button can be focusable by adding the \`aria-disabled\` attribute. To enable the focus ring in a focusable disabled button, ensure that \`is-disabled\` is present while \`disabled\` is not. ####Accessibility @@ -548,5 +568,6 @@ When the state of the button has changed, add \`aria-live=”assertive”\` to p Note: For the text to be read out loud by screen readers, a helper text has been added with \`aria-describedby\` matching the \`id\` of the paragraph element with the \`_instructions\` element. The element uses the \`screen-reader-only\` styling so that it is not visible. ` + } } }; diff --git a/stories/calendar/calendar.stories.js b/stories/calendar/calendar.stories.js index 3d4baf95d0..2602df59e5 100644 --- a/stories/calendar/calendar.stories.js +++ b/stories/calendar/calendar.stories.js @@ -311,7 +311,9 @@ export const Days = () => `<div style="display: flex; justify-content: space-aro Days.parameters = { docs: { iframeHeight: 400, - storyDescription: 'The calendar component can display days of the month by adding the `fd-calendar__content--dates` class to the container element.' + description: { + story: 'The calendar component can display days of the month by adding the `fd-calendar__content--dates` class to the container element.' + } } }; @@ -398,7 +400,9 @@ export const Months = () => ` <div style="display: flex; justify-content: spa Months.parameters = { docs: { iframeHeight: 400, - storyDescription: 'The calendar component can display months in a year by adding the `fd-calendar__content--months` class to the container element.' + description: { + story: 'The calendar component can display months in a year by adding the `fd-calendar__content--months` class to the container element.' + } } }; @@ -648,7 +652,9 @@ export const Years = () => `<div style="display: flex; justify-content: space-ar Years.parameters = { docs: { iframeHeight: 700, - storyDescription: 'The calendar component can display a range of years in various ways: short-term, long-term, year ranges etc. Add the `fd-calendar__content--years` class to the container element, and adjust the number of columns, rows, and content to fit your use case.' + description: { + story: 'The calendar component can display a range of years in various ways: short-term, long-term, year ranges etc. Add the `fd-calendar__content--years` class to the container element, and adjust the number of columns, rows, and content to fit your use case.' + } } }; @@ -811,7 +817,9 @@ export const Compact = () => `<div style="display: flex; justify-content: space- Compact.parameters = { docs: { iframeHeight: 300, - storyDescription: 'The calendar component can be displayed in compact mode by adding the `fd-calendar--compact` class to the container element.' + description: { + story: 'The calendar component can be displayed in compact mode by adding the `fd-calendar--compact` class to the container element.' + } } }; @@ -987,7 +995,8 @@ LandscapeMobile.storyName = 'Landscape (mobile)'; LandscapeMobile.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` While using a mobile in landscape mode, the calendar component is displayed from a **Dialog** window, taking up the full width and height of the screen. Note: For landscape mode, no dialog header element should be used. However, a dialog footer is optional. @@ -997,6 +1006,7 @@ Note: For landscape mode, no dialog header element should be used. However, a di - \`fd-calendar__navigation\` requires the \`fd-calendar__navigation--main\` class. - the dismiss button requires the \`fd-calendar__close-button--navigation\` class. ` + } } }; @@ -1193,11 +1203,13 @@ PortraitMobile.storyName = 'Portrait (mobile)'; PortraitMobile.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` While using a mobile in portrait mode, the calendar component is displayed from a **Dialog** window, taking up the full width and height of the screen. It can be displayed in this way by adding the \`fd-calendar--mobile-portrait\` class to the container element. Note: For portrait mode, dialog header should always be used and the footer remains optional. ` + } } }; diff --git a/stories/card/card.stories.js b/stories/card/card.stories.js index 409264ac06..3a80052cc0 100644 --- a/stories/card/card.stories.js +++ b/stories/card/card.stories.js @@ -187,8 +187,10 @@ CardAnatomy.storyName = 'Standard card'; CardAnatomy.parameters = { docs: { iframeHeight: 900, - storyDescription: `The standard card displays a header area with a title and a content area, as well as any other components mentioned in the card anatomy section. + description: { + story: `The standard card displays a header area with a title and a content area, as well as any other components mentioned in the card anatomy section. ` + } } }; @@ -284,7 +286,8 @@ AnalyticalCard.storyName = 'Analytical card'; AnalyticalCard.parameters = { docs: { iframeHeight: 450, - storyDescription: `The analytical card is used for data visualization. It can display a KPI header and various chart types in the content. The only difference between a KPI header and a standard header is that the former requires a subtitle, a KPI area and can display an optional second subtitle. To display an analytical card, add the \`fd-card--analytical\` modifier class to the main element. + description: { + story: `The analytical card is used for data visualization. It can display a KPI header and various chart types in the content. The only difference between a KPI header and a standard header is that the former requires a subtitle, a KPI area and can display an optional second subtitle. To display an analytical card, add the \`fd-card--analytical\` modifier class to the main element. ####Chart types **The content area of an analytical card can display 8 different chart types:** @@ -299,6 +302,7 @@ AnalyticalCard.parameters = { - Scatter plot ` + } } }; @@ -393,10 +397,12 @@ ListCard.storyName = 'List card'; ListCard.parameters = { docs: { iframeHeight: 400, - storyDescription: `A card can display various types of lists. All components placed inside should behave natively. + description: { + story: `A card can display various types of lists. All components placed inside should behave natively. For this kind of card it is not recommended to keep header interactive, or navigable. Such a header can be achieved by adding \`fd-card__header--non-interactive\` modifier class. ` + } } }; @@ -559,7 +565,9 @@ TableCard.storyName = 'Table card'; TableCard.parameters = { docs: { iframeHeight: 400, - storyDescription: 'Cards can display tables within the content area. To display a table card, add the `fd-card--table` modifier class to the main element.' + description: { + story: 'Cards can display tables within the content area. To display a table card, add the `fd-card--table` modifier class to the main element.' + } } }; @@ -710,7 +718,8 @@ ObjectCard.storyName = 'Object card'; ObjectCard.parameters = { docs: { iframeHeight: 600, - storyDescription: `The object card can display a single object or a group of objects. Contrary to other cards, object card has 1rem padding on all sides of the content area. To display an object card, add the \`fd-card--object\` modifier class to the main element. + description: { + story: `The object card can display a single object or a group of objects. Contrary to other cards, object card has 1rem padding on all sides of the content area. To display an object card, add the \`fd-card--object\` modifier class to the main element. **Within the content area, there are several components:** @@ -723,5 +732,6 @@ Component (class) | Description \`fd-card__content-label-container\` | a container for the label of the group. \`fd-card__content-group-container\` | a container for the value of the group. ` + } } }; diff --git a/stories/carousel/carousel.stories.js b/stories/carousel/carousel.stories.js index 7605ed2318..5f6421e871 100644 --- a/stories/carousel/carousel.stories.js +++ b/stories/carousel/carousel.stories.js @@ -187,8 +187,10 @@ CarouselBottom.storyName = 'Bottom page indicator'; CarouselBottom.parameters = { docs: { iframeHeight: 900, - storyDescription: `The bottom page indicator carousel displays a content area, navigation buttons and a page indicator at the bottom. The page indicator wraps onto the next line if the content is too long, and after the pages reach a count of 8, the dots are replaced by numerical representation i.e. *1 of 4*. + description: { + story: `The bottom page indicator carousel displays a content area, navigation buttons and a page indicator at the bottom. The page indicator wraps onto the next line if the content is too long, and after the pages reach a count of 8, the dots are replaced by numerical representation i.e. *1 of 4*. ` + } } }; @@ -362,8 +364,10 @@ CarouselTop.storyName = 'Top page indicator'; CarouselTop.parameters = { docs: { iframeHeight: 900, - storyDescription: `The top page indicator carousel displays a content area, navigation buttons and a page indicator at the top. + description: { + story: `The top page indicator carousel displays a content area, navigation buttons and a page indicator at the top. ` + } } }; @@ -472,8 +476,10 @@ CarouselNoNavigation.storyName = 'Hidden navigation buttons'; CarouselNoNavigation.parameters = { docs: { iframeHeight: 900, - storyDescription: `Carousel can also be displayed without navigation buttons. To hide them, add the \`fd-carousel--no-navigation\` modifier class to the \`fd-carousel\` class. On touchable devices, the user can navigate with a swipe gesture. + description: { + story: `Carousel can also be displayed without navigation buttons. To hide them, add the \`fd-carousel--no-navigation\` modifier class to the \`fd-carousel\` class. On touchable devices, the user can navigate with a swipe gesture. ` + } } }; @@ -557,8 +563,10 @@ HorizontalCarousel.storyName = 'Items in horizontal direction'; HorizontalCarousel.parameters = { docs: { iframeHeight: 900, - storyDescription: `Carousel will have items which will spread horizontally and will be visible on navigation. For translate animation effect to work, all items should be in DOM. + description: { + story: `Carousel will have items which will spread horizontally and will be visible on navigation. For translate animation effect to work, all items should be in DOM. ` + } } }; @@ -608,7 +616,9 @@ Error.storyName = 'Items loading error'; Error.parameters = { docs: { iframeHeight: 900, - storyDescription: `Error message can be disaplyed when items could not be loaded. Error message can be composed using Message page component. + description: { + story: `Error message can be disaplyed when items could not be loaded. Error message can be composed using Message page component. ` + } } }; diff --git a/stories/checkbox/checkbox.stories.js b/stories/checkbox/checkbox.stories.js index d113192fae..b44faedc7f 100644 --- a/stories/checkbox/checkbox.stories.js +++ b/stories/checkbox/checkbox.stories.js @@ -97,9 +97,11 @@ ${localStyles} Desktop.parameters = { docs: { iframeHeight: 330, - storyDescription: `A checkbox can be displayed in two different sizes desktop (compact) and mobile (default). + description: { + story: `A checkbox can be displayed in two different sizes desktop (compact) and mobile (default). On desktop screens, the checkbox appears smaller and uses the \`fd-checkbox__label--compact\` modifier class. ` + } } }; @@ -122,8 +124,10 @@ export const Required = () => ` Required.parameters = { docs: { iframeHeight: 330, - storyDescription: `To show that a checkbox input is required, use the \`fd-checkbox__label--required\` class. + description: { + story: `To show that a checkbox input is required, use the \`fd-checkbox__label--required\` class. ` + } } }; @@ -187,8 +191,10 @@ ${localStyles} Mobile.parameters = { docs: { iframeHeight: 330, - storyDescription: `A checkbox can display larger so users can easily select options on a mobile screen. This is considered the default size for checkbox. + description: { + story: `A checkbox can display larger so users can easily select options on a mobile screen. This is considered the default size for checkbox. ` + } } }; @@ -226,7 +232,9 @@ export const Inline = () => `<fieldset class="fd-fieldset"> Inline.parameters = { docs: { iframeHeight: 400, - storyDescription: 'Checkboxes can display horizontally in a line. To display them this way, add the `fd-checkbox__label--inline` modifier class to the element.' + description: { + story: 'Checkboxes can display horizontally in a line. To display them this way, add the `fd-checkbox__label--inline` modifier class to the element.' + } } }; @@ -418,7 +426,8 @@ ${localStyles} States.parameters = { docs: { iframeHeight: 400, - storyDescription: `Checkboxes can display several interaction states to communicate semantic meaning to the users. To display different states, add the classes below to the \`fd-form-item\`: + description: { + story: `Checkboxes can display several interaction states to communicate semantic meaning to the users. To display different states, add the classes below to the \`fd-form-item\`: | States | Class | | :----------------- | :------------------ | @@ -428,5 +437,6 @@ States.parameters = { | Information | \`fd-checkbox is-information\` | | Disabled | \`fd-checkbox is-disabled\` | ` + } } }; diff --git a/stories/code/code.stories.js b/stories/code/code.stories.js index 5a115c2245..3044988100 100644 --- a/stories/code/code.stories.js +++ b/stories/code/code.stories.js @@ -31,7 +31,9 @@ spec: Primary.storyName = 'Code Block'; Primary.parameters = { docs: { - storyDescription: 'Code example as a block where you are include multiple lines' + description: { + story: 'Code example as a block where you are include multiple lines' + } } }; @@ -40,6 +42,8 @@ export const InlineCode = () => `You can add inline code like here <code class=" InlineCode.parameters = { docs: { - storyDescription: 'Inline Code Example which can be used as part of a bigger text paragraph' + description: { + story: 'Inline Code Example which can be used as part of a bigger text paragraph' + } } }; diff --git a/stories/combobox-input/combobox-input.stories.js b/stories/combobox-input/combobox-input.stories.js index c9df0ca449..57a6442619 100644 --- a/stories/combobox-input/combobox-input.stories.js +++ b/stories/combobox-input/combobox-input.stories.js @@ -237,10 +237,12 @@ export const AsFormItem = () => `<div style="height:700px"> AsFormItem.parameters = { docs: { iframeHeight: 700, - storyDescription: ` + description: { + story: ` Note that the popover body width is restricted to a max of 37.5rem to avoid readability issues in large-width popovers. Applications are free to override this in their custom styles if needed and own any readability issues arising from this override. ` + } } }; @@ -365,10 +367,12 @@ export const TwoItemsAndItemsGrouping = () => `<div style="display:flex;justify- TwoItemsAndItemsGrouping.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` The \`ComboBox\` component can be customized by adding additional information in additional columns as seen below. In cases where the list items need to be categorized into groups, it is possible to add headers for each category.` + } } }; @@ -424,12 +428,14 @@ export const MatchPopoverBodySize = () => `<div style="display:flex;height:250px MatchPopoverBodySize.parameters = { docs: { iframeHeight: 250, - storyDescription: ` + description: { + story: ` The default length size of the popover body is often different from the text length. The body length can be adjusted to match the text length by adding the \`fd-popover__body--dropdown-fill\` class to the \`fd-popover__body\`. This class has been added to all the \`Combobox\` examples above. In the example you can see how the \`Combobox\` component looks without the \`fd-popover__body--dropdown-fill\` modifier. ` + } } }; @@ -462,12 +468,14 @@ export const DisabledAndReadOnly = () => `<div style="display:flex;justify-conte DisabledAndReadOnly.parameters = { docs: { - storyDescription: ` + description: { + story: ` To disable a \`Combobox\` component, the disabled attribute needs to be added to the \`fd-popover__control\` and the \`fd-input__control\` elements. The disabled state can also be achieved by adding the \`.is-disable\` class or the \`aria-disabled="true"\` attribute. To make the \`Combobox\` component read-only, the readonly attribute needs to be added to the \`fd-nput-group\` element. This can also be done by using the \`.is-readonly\` class or \`aria-readonly="true"\` attribute.` + } } }; @@ -520,13 +528,15 @@ export const Semantic = () => `<div style="height:200px"> Semantic.parameters = { docs: { iframeHeight: 250, - storyDescription: ` + description: { + story: ` For a complete list of states supported by the \`combobox\` component, please see the documentation for the form or select components. The semantic mode can be used to modify the combobox component by adding one of \`is-error\` | \`is-success\` | \`is-warning\` | \`is-information\` classes into fd-input-group element. To add text in the \`body\` of the component, simply include your text in the \`fd-list__message\` under the \`ul\` element. ` + } } }; @@ -612,9 +622,11 @@ id="select-dialog-example" style="height:600px"> Mobile.parameters = { docs: { iframeHeight: 600, - storyDescription: ` + description: { + story: ` For mobile devices, or tablets, combobox component should be displayed in fullscreen mode. So instead of using popover and dropdown, it should be wrapped in \`dialog\` and \`bar\` components. ` + } } }; diff --git a/stories/counter/counter.stories.js b/stories/counter/counter.stories.js index bb312dd41a..0db9b022cb 100644 --- a/stories/counter/counter.stories.js +++ b/stories/counter/counter.stories.js @@ -18,7 +18,9 @@ export const Primary = () => ` Primary.storyName = 'Standalone'; Primary.parameters = { docs: { - storyDescription: 'Counter used as a standlone component' + description: { + story: 'Counter used as a standlone component' + } } }; @@ -27,7 +29,9 @@ export const Paragraph = () => `<p>Lorem ipsum <span class="fd-counter" aria-lab Paragraph.storyName = 'Text'; Paragraph.parameters = { docs: { - storyDescription: 'Counter inserted in paragraph' + description: { + story: 'Counter inserted in paragraph' + } } }; @@ -52,7 +56,9 @@ export const Tabs = () => `<ul class="fd-tabs" role="tablist"> Tabs.parameters = { docs: { - storyDescription: 'Counter added to a tab' + description: { + story: 'Counter added to a tab' + } } }; @@ -81,6 +87,8 @@ export const Notifier = () => ` Notifier.storyName = 'Notification'; Notifier.parameters = { docs: { - storyDescription: 'Counter with `--notification` modifier' + description: { + story: 'Counter with `--notification` modifier' + } } }; diff --git a/stories/datepicker/datepicker.stories.js b/stories/datepicker/datepicker.stories.js index d9efa87a6e..6a91873afd 100644 --- a/stories/datepicker/datepicker.stories.js +++ b/stories/datepicker/datepicker.stories.js @@ -647,10 +647,12 @@ export const TodaySelectionButton = () => `<div class="fd-docs-date-picker" styl TodaySelectionButton.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` The today selection button in the footer selects today's date in the system or user-preferred timezone and closes the DatePicker popover. This date value then appears in the DatePicker's input field. If using a compact datepicker add the \`fd-button--compact\` class to this button. ` + } } }; @@ -872,13 +874,15 @@ export const TodayNavigationButton = () => `<div class="fd-docs-date-picker" sty TodayNavigationButton.parameters = { docs: { iframeHeight: 450, - storyDescription: ` + description: { + story: ` The today navigation button in the header navigates focus to today's date in the system or user-preferred timezone, selects it but does not close the DatePicker popover. This is useful in displaying the DatePicker on mobile where DatePicker closes when user presses the OK button. If using a compact datepicker add the \`fd-button--compact\` class to this button. **Using both today selection and navigation buttons on the same datepicker is not recommended, as it may lead to confusion.** ` + } } }; diff --git a/stories/dialog/dialog.stories.js b/stories/dialog/dialog.stories.js index 4f0fd62640..1d3ba8b82f 100644 --- a/stories/dialog/dialog.stories.js +++ b/stories/dialog/dialog.stories.js @@ -100,7 +100,9 @@ DefaultDialog.storyName = 'Default'; DefaultDialog.parameters = { docs: { iframeHeight: 400, - storyDescription: 'The default dialog component displays a container comprising a header, title, and subheader; followed by a body (content area), loader, footer and action buttons. The container also features a resize handle in the bottom-right corner of the footer, see resizable dialog below for more information.' + description: { + story: 'The default dialog component displays a container comprising a header, title, and subheader; followed by a body (content area), loader, footer and action buttons. The container also features a resize handle in the bottom-right corner of the footer, see resizable dialog below for more information.' + } } }; @@ -218,7 +220,8 @@ export const Sizes = () => ` Sizes.parameters = { docs: { iframeHeight: 800, - storyDescription: ` + description: { + story: ` By default, dialog’s body has no horizontal paddings. If horizontal paddings are added, they should behave responsively based on dialog's window width. ####Horizontal padding @@ -250,6 +253,7 @@ It is recommended that the default dialog takes the full width and height of the Note: On mobile devices, the bar component should be used with the \`fd-bar--cozy\` class. ` + } } }; @@ -286,10 +290,12 @@ export const Resizable = () => ` Resizable.parameters = { docs: { iframeHeight: 300, - storyDescription: ` + description: { + story: ` Dialog can also be displayed with a resize handle by adding a span element with a \`fd-dialog__resize-handle\` class inside the \`fd-dialog__content\` container. Note: This feature should be enabled for desktop screens only.` + } } }; @@ -325,7 +331,8 @@ export const Draggable = () => ` Draggable.parameters = { docs: { iframeHeight: 300, - storyDescription: ` + description: { + story: ` Dialog can be draggable, enabling the user to drag the container around with their cursor on a desktop screen. | Modifier class | Modification | @@ -333,6 +340,7 @@ Dialog can be draggable, enabling the user to drag the container around with the | \`fd-dialog__content--draggable-grab\` | Modifies the element to be draggable | | \`fd-dialog__content--draggable-grabbing\` | Visualizes the grabbing cursor | ` + } } }; @@ -430,8 +438,10 @@ export const Selectable = () => ` Selectable.parameters = { docs: { iframeHeight: 500, - storyDescription: `The selectable dialog displays list items in the content area that can be selected. Users can search items from the list, select one or more items, and finalize their choice by selecting the _Select_ button. To display the selectable dialog, include the \`fd-list fd-list--compact\` class to the body's container element. + description: { + story: `The selectable dialog displays list items in the content area that can be selected. Users can search items from the list, select one or more items, and finalize their choice by selecting the _Select_ button. To display the selectable dialog, include the \`fd-list fd-list--compact\` class to the body's container element. ` + } } }; @@ -469,7 +479,9 @@ export const Loading = () => ` Loading.parameters = { docs: { iframeHeight: 500, - storyDescription: 'Dialog can display a busy indicator that signals to the user that data is loading. To display a busy indicator in the content area, add the `fd-busy-indicator--l` to the `fd-dialog__loader` container element. Although the busy indicator is large in this example, you can choose a smaller size. See **Busy Indicator** for more sizes.' + description: { + story: 'Dialog can display a busy indicator that signals to the user that data is loading. To display a busy indicator in the content area, add the `fd-busy-indicator--l` to the `fd-dialog__loader` container element. Although the busy indicator is large in this example, you can choose a smaller size. See **Busy Indicator** for more sizes.' + } } }; diff --git a/stories/dnd-icon-tab-bar/dnd-icon-tab-bar.stories.js b/stories/dnd-icon-tab-bar/dnd-icon-tab-bar.stories.js index a7ae002651..6bebe3f3ce 100644 --- a/stories/dnd-icon-tab-bar/dnd-icon-tab-bar.stories.js +++ b/stories/dnd-icon-tab-bar/dnd-icon-tab-bar.stories.js @@ -37,7 +37,9 @@ export const HoveredTab = () => `<div class='fddocs-icon-tab-container' style="m HoveredTab.storyName = 'Hovered tab state'; HoveredTab.parameters = { docs: { - storyDescription: '' + description: { + story: '' + } } }; @@ -66,6 +68,8 @@ export const SeparatorHoveredTab = () => `<div class='fddocs-icon-tab-container' SeparatorHoveredTab.storyName = 'Separator hovered tab state'; SeparatorHoveredTab.parameters = { docs: { - storyDescription: '' + description: { + story: '' + } } }; diff --git a/stories/dynamic-page/dynamic-page.stories.js b/stories/dynamic-page/dynamic-page.stories.js index 542a40d2cf..e339d2623b 100755 --- a/stories/dynamic-page/dynamic-page.stories.js +++ b/stories/dynamic-page/dynamic-page.stories.js @@ -196,10 +196,12 @@ export const Desktop = () => ` Desktop.parameters = { docs: { - storyDescription: `The dynamic page displays on desktop screens with the L, XL, and XXL sizes. To optimize dynamic page for desktop, add modifier class \`fd-dynamic-page--xl\`. + description: { + story: `The dynamic page displays on desktop screens with the L, XL, and XXL sizes. To optimize dynamic page for desktop, add modifier class \`fd-dynamic-page--xl\`. In addition, add the modifier classes \`--add-shadow\` to the unordered list, and \`--overflow\` at the parent level for the box-shadow styling. ` + } } }; @@ -337,9 +339,11 @@ export const Tablet = () => ` Tablet.parameters = { docs: { - storyDescription: `The dynamic page displays on tablet screens with the M size. To optimize dynamic page for tablet, add modifier class \`fd-dynamic-page--md\`. + description: { + story: `The dynamic page displays on tablet screens with the M size. To optimize dynamic page for tablet, add modifier class \`fd-dynamic-page--md\`. It is recommended that the navigation actions are displayed in a separate row above product actions, and are placed at the same level as the breadcrumb component.` + } } }; @@ -493,10 +497,12 @@ export const Mobile = () => Mobile.parameters = { docs: { - storyDescription: `The dynamic page displays on mobile screens with the S size. To optimize dynamic page for mobile, add modifier class \`fd-dynamic-page--sm\`. + description: { + story: `The dynamic page displays on mobile screens with the S size. To optimize dynamic page for mobile, add modifier class \`fd-dynamic-page--sm\`. To display the breadcrumb and close button, they must be wrapped in \`fd-dynamic-page__breadcrumb-container\`. The toolbar overflow actions are functional without being wrapped in an additional container. Use \`fd-dynamic-page__toolbar--content\` for the title content when it is used in an overflow toolbar.` + } } }; @@ -651,7 +657,9 @@ export const MobileCollapsed = () => MobileCollapsed.storyName = 'Collapsed Header (mobile)'; MobileCollapsed.parameters = { docs: { - storyDescription: 'In the example below, the dynamic page is displayed with a collapsed header for mobile screens.' + description: { + story: 'In the example below, the dynamic page is displayed with a collapsed header for mobile screens.' + } } }; @@ -773,8 +781,10 @@ export const SummaryLine = () => SummaryLine.storyName = 'Summary Line (mobile)'; SummaryLine.parameters = { docs: { - storyDescription: `It is recommended to add a summary line insead of the expand/collapse header feature so users can better focus on the page content. To display a summary line, + description: { + story: `It is recommended to add a summary line insead of the expand/collapse header feature so users can better focus on the page content. To display a summary line, add \`fd-dynamic-page__summarized-title\` in the \`fd-dynamic-page__summarized-title-area\` element.` + } } }; @@ -854,8 +864,10 @@ export const Expandable = () => Expandable.storyName = 'Expanded Header'; Expandable.parameters = { docs: { - storyDescription: `As demonstrated earlier, the dynamic page header can be either displayed or hidden with the expand/collapse buttons. Users can select the pin button to keep the header displayed (enabling the sticky feature). + description: { + story: `As demonstrated earlier, the dynamic page header can be either displayed or hidden with the expand/collapse buttons. Users can select the pin button to keep the header displayed (enabling the sticky feature). To collapse the dynamic page, add the \`--collapsed\` modifier class to the title area and title elements.` + } } }; @@ -934,7 +946,9 @@ export const CollapsedHeader = () => CollapsedHeader.parameters = { docs: { - storyDescription: 'In the example below, the dynamic page is displayed with a collapsed header for desktop screens.' + description: { + story: 'In the example below, the dynamic page is displayed with a collapsed header for desktop screens.' + } } }; @@ -1010,7 +1024,9 @@ export const OnlyCollapse = () => OnlyCollapse.storyName = 'Without pin'; OnlyCollapse.parameters = { docs: { - storyDescription: 'The dynamic page can be displayed without a pin button, giving users the option to only expand or collapse the header area.' + description: { + story: 'The dynamic page can be displayed without a pin button, giving users the option to only expand or collapse the header area.' + } } }; @@ -1282,12 +1298,14 @@ export const WithFacets = () => WithFacets.storyName = 'With header facets'; WithFacets.parameters = { docs: { - storyDescription: `To have the image from the image facet appear next to the title, add the class + description: { + story: `To have the image from the image facet appear next to the title, add the class \`fd-facet\` and apply the modifiers \`fd-facet--image\` and \`fd-facet--image-header-title\` to the \`fd-dynamic-page__title-container\` class. Note that the dynamic page title and subtitle should be placed in the \`fd-dynamic-page__title-subtitle-container\` class for proper alignment with the image. ` + } } }; diff --git a/stories/dynamic-side-content/dynamic-side-content.stories.js b/stories/dynamic-side-content/dynamic-side-content.stories.js index a1a6390aeb..6de2223f42 100644 --- a/stories/dynamic-side-content/dynamic-side-content.stories.js +++ b/stories/dynamic-side-content/dynamic-side-content.stories.js @@ -50,8 +50,10 @@ PositionLeft.storyName = 'Left'; PositionLeft.parameters = { docs: { iframeHeight: 160, - storyDescription: + description: { + story: 'To display side content from the left, put `fd-dynamic-side__side` as the first child element of `fd-dynamic-side`.' + } } }; @@ -69,8 +71,10 @@ PositionRight.storyName = 'Right'; PositionRight.parameters = { docs: { iframeHeight: 160, - storyDescription: + description: { + story: 'To display side content from the right, put `fd-dynamic-side__side` as the second child element of `fd-dynamic-side`.' + } } }; @@ -88,8 +92,10 @@ PositionBottom.storyName = 'Below'; PositionBottom.parameters = { docs: { iframeHeight: 260, - storyDescription: + description: { + story: 'To display side content below the main content area, keep `fd-dynamic-side__side` as the last child element and add the `fd-dynamic-side--below` modifier class.' + } } }; @@ -107,8 +113,10 @@ EqualSplit.storyName = 'Equal split'; EqualSplit.parameters = { docs: { iframeHeight: 160, - storyDescription: + description: { + story: 'The equal split mode provides users with a 50:50 view of the main content and side content, which enables users to show more data i.e. for comparison purposes. To enable equal split mode, add the `fd-dynamic-side--equal-split` modifier class to the container.' + } } }; @@ -145,7 +153,8 @@ export const Responsiveness = () => ` Responsiveness.parameters = { docs: { iframeHeight: 160, - storyDescription: ` + description: { + story: ` To display the dynamic side content for specific screen sizes, use the respective modifier classes: | Size    | Modifier class    | @@ -154,5 +163,6 @@ To display the dynamic side content for specific screen sizes, use the respectiv | Medium & Large    | \`fd-dynamic-side--md\` | | Extra Large    | \`fd-dynamic-side--xl\` | ` + } } }; diff --git a/stories/facets/facets.stories.js b/stories/facets/facets.stories.js index 93e8bce89d..719b41b70f 100644 --- a/stories/facets/facets.stories.js +++ b/stories/facets/facets.stories.js @@ -89,7 +89,9 @@ export const Combined = () => Combined.storyName = 'Combination of facets'; Combined.parameters = { docs: { - storyDescription: 'Facet types(image, form, and key-value) used together.' + description: { + story: 'Facet types(image, form, and key-value) used together.' + } } }; @@ -123,9 +125,11 @@ export const KeyValue = () => KeyValue.storyName = 'Key-Value Facet'; KeyValue.parameters = { docs: { - storyDescription: `Key-Value facet is used to highlight important data or KPIs. It consists of a mandatory title + description: { + story: `Key-Value facet is used to highlight important data or KPIs. It consists of a mandatory title and a text or number in a larger font size(**Object Status** or **Object Number**). The value can also have an icon to its left. ` + } } }; @@ -153,9 +157,11 @@ export const FormFacet = () => FormFacet.parameters = { docs: { - storyDescription: `Form facet is used to display datasets. It consists of an optional title and label-value pair. + description: { + story: `Form facet is used to display datasets. It consists of an optional title and label-value pair. Note that the labels can be icons, but need to have a text for accessibility purposes. ` + } } }; @@ -190,7 +196,9 @@ export const FormFacetLink = () => FormFacetLink.storyName = 'Form Facet with Link'; FormFacetLink.parameters = { docs: { - storyDescription: 'Text in a form facet can also hold a link by using the Link component.' + description: { + story: 'Text in a form facet can also hold a link by using the Link component.' + } } }; @@ -222,8 +230,10 @@ export const RatingIndicator = () => RatingIndicator.storyName = 'Rating Indicator Facet'; RatingIndicator.parameters = { docs: { - storyDescription: `The Rating Indicator Facet displays a **Rating Indicator**. It consists of a mandatory title, optional supplementary texts + description: { + story: `The Rating Indicator Facet displays a **Rating Indicator**. It consists of a mandatory title, optional supplementary texts like a subtitle or a dynamic text, and the rating indicator.` + } } }; @@ -238,7 +248,9 @@ export const ImageFacet = () => ImageFacet.storyName = 'Image/Avatar Facet'; ImageFacet.parameters = { docs: { - storyDescription: 'Counter added to a tab' + description: { + story: 'Counter added to a tab' + } } }; @@ -513,7 +525,8 @@ export const ObjectPage = () => ObjectPage.storyName = 'Facets in Object Page'; ObjectPage.parameters = { docs: { - storyDescription: `All facet types used together in the context of a dynamic page. To have the image from the image facet appear next to the title, add the class + description: { + story: `All facet types used together in the context of a dynamic page. To have the image from the image facet appear next to the title, add the class \`fd-facet\` and apply the modifiers \`fd-facet--image\` and \`fd-facet--image-header-title\` to the \`fd-dynamic-page__title-container\` class. Note that the dynamic page title and subtitle should be placed in the \`fd-dynamic-page__title-subtitle-container\` class for proper alignment with the image. @@ -535,6 +548,7 @@ The final structure of a collapsed header with image next to the title is shown - \`fd-dynamic-page__toolbar\` Toolbar container for actions - \`fd-dynamic-page__toolbar--actions\` Navigation actions ` + } } }; diff --git a/stories/feed-input/feed-input.stories.js b/stories/feed-input/feed-input.stories.js index c7a6e05001..e923d5b070 100644 --- a/stories/feed-input/feed-input.stories.js +++ b/stories/feed-input/feed-input.stories.js @@ -47,7 +47,9 @@ Standard.storyName = 'Default'; Standard.parameters = { docs: { iframeHeight: 150, - storyDescription: 'The default feed input displays an empty text field with an inactive submit button.' + description: { + story: 'The default feed input displays an empty text field with an inactive submit button.' + } } }; @@ -78,7 +80,9 @@ NotEmpty.storyName = 'With text'; NotEmpty.parameters = { docs: { iframeHeight: 150, - storyDescription: 'The input with text displays some text, activating the submit button.' + description: { + story: 'The input with text displays some text, activating the submit button.' + } } }; @@ -110,7 +114,9 @@ export const Disabled = () => ` <div class="fd-feed-input is-disabled" Disabled.parameters = { docs: { iframeHeight: 150, - storyDescription: 'The disabled feed input displays a text field and submit button that users cannot interact with.' + description: { + story: 'The disabled feed input displays a text field and submit button that users cannot interact with.' + } } }; @@ -134,7 +140,9 @@ WithoutUserImage.storyName = 'No thumbnail'; WithoutUserImage.parameters = { docs: { iframeHeight: 150, - storyDescription: 'Although the default feed input has a thumbnail, it is possible to remove it. Without a thumbnail, the input area size increases automatically.' + description: { + story: 'Although the default feed input has a thumbnail, it is possible to remove it. Without a thumbnail, the input area size increases automatically.' + } } }; @@ -162,7 +170,9 @@ PlaceholderImage.storyName = 'Generic thumbnail'; PlaceholderImage.parameters = { docs: { iframeHeight: 150, - storyDescription: 'A generic thumbnail will be displayed if no image has been chosen by the user.' + description: { + story: 'A generic thumbnail will be displayed if no image has been chosen by the user.' + } } }; @@ -192,7 +202,9 @@ InputGrowth.storyName = 'Multiline'; InputGrowth.parameters = { docs: { iframeHeight: 190, - storyDescription: 'The multiline feed input displays a text field with multiple lines of text, which expands until a maximum height is reached.' + description: { + story: 'The multiline feed input displays a text field with multiple lines of text, which expands until a maximum height is reached.' + } } }; @@ -222,6 +234,8 @@ OverMaxHeight.storyName = 'Max height'; OverMaxHeight.parameters = { docs: { iframeHeight: 420, - storyDescription: 'The max height feed input displays a text field with the maximum amount of text lines it can contain. Once the text field has reached the maximum height, a scrollbar appears to access the overflowing text.' + description: { + story: 'The max height feed input displays a text field with the maximum amount of text lines it can contain. Once the text field has reached the maximum height, a scrollbar appears to access the overflowing text.' + } } }; diff --git a/stories/feed-list/feed-list.stories.js b/stories/feed-list/feed-list.stories.js index 05648151e5..6467d960d5 100644 --- a/stories/feed-list/feed-list.stories.js +++ b/stories/feed-list/feed-list.stories.js @@ -48,7 +48,9 @@ export const Standard = () => `<ul class="fd-feed-list" aria-label="Feed List It Standard.parameters = { docs: { - storyDescription: 'The standard feed list item displays a user\'s name and written text, an image and an additional attribute (in this example, it is a time stamp).' + description: { + story: 'The standard feed list item displays a user\'s name and written text, an image and an additional attribute (in this example, it is a time stamp).' + } } }; @@ -80,7 +82,9 @@ export const PlaceHolderImage = () => `<ul class="fd-feed-list" aria-label="Feed PlaceHolderImage.storyName = 'Placeholder image'; PlaceHolderImage.parameters = { docs: { - storyDescription: 'The feed list item will display a placeholder image if the user does not have an image assigned.' + description: { + story: 'The feed list item will display a placeholder image if the user does not have an image assigned.' + } } }; @@ -104,7 +108,9 @@ export const NoImage = () => `<ul class="fd-feed-list" aria-label="Feed List Ite NoImage.storyName = 'No image'; NoImage.parameters = { docs: { - storyDescription: 'The feed list item can be displayed without an image by removing the `fd-avatar` element from the container.' + description: { + story: 'The feed list item can be displayed without an image by removing the `fd-avatar` element from the container.' + } } }; @@ -138,7 +144,9 @@ export const Linked = () => `<ul class="fd-feed-list" aria-label="Feed List Item Linked.parameters = { docs: { - storyDescription: 'The feed list item can display linked usernames (and images). To display a linked username, add the `fd-link` class with the `fd-link--emphasized` modifier to the `fd-feed-list__name` element.' + description: { + story: 'The feed list item can display linked usernames (and images). To display a linked username, add the `fd-link` class with the `fd-link--emphasized` modifier to the `fd-feed-list__name` element.' + } } }; @@ -171,7 +179,9 @@ export const ShowMore = () => `<ul class="fd-feed-list" aria-label="Feed List It ShowMore.storyName = 'Show more'; ShowMore.parameters = { docs: { - storyDescription: 'Feed list items can display a <i>MORE</i> link that can show more text (when/if it is truncated). Truncation occurs when the text reaches 300 characters. When hovering over the link, the text is highlighted and underlined.' + description: { + story: 'Feed list items can display a <i>MORE</i> link that can show more text (when/if it is truncated). Truncation occurs when the text reaches 300 characters. When hovering over the link, the text is highlighted and underlined.' + } } }; @@ -204,7 +214,9 @@ export const ShowLess = () => `<ul class="fd-feed-list" aria-label="Feed List It ShowLess.storyName = 'Show less'; ShowLess.parameters = { docs: { - storyDescription: 'Similarly, feed list items can display a <i>LESS</i> link that will revert the text back to when it was truncated.' + description: { + story: 'Similarly, feed list items can display a <i>LESS</i> link that will revert the text back to when it was truncated.' + } } }; @@ -268,7 +280,9 @@ export const WithActions = () => `<ul class="fd-feed-list" aria-label="Feed List WithActions.storyName = 'Actions'; WithActions.parameters = { docs: { - storyDescription: 'Feed list items can display actions that users can perform on their individual feed posts. These typically include actions like <i>Edit</i> and <i>Delete</i>, however, other actions can be displayed depending on the use case. It is recommended to display a maximum of 5 actions per post.' + description: { + story: 'Feed list items can display actions that users can perform on their individual feed posts. These typically include actions like <i>Edit</i> and <i>Delete</i>, however, other actions can be displayed depending on the use case. It is recommended to display a maximum of 5 actions per post.' + } } }; @@ -338,7 +352,9 @@ export const Group = () => ` <ul class="fd-feed-list fd-feed-list--group" aria-l Group.parameters = { docs: { - storyDescription: 'Evidently, feed list items can be displayed in a group. The example below displays a feed list item with a placeholder image and two standard feed list items.' + description: { + story: 'Evidently, feed list items can be displayed in a group. The example below displays a feed list item with a placeholder image and two standard feed list items.' + } } }; @@ -409,7 +425,9 @@ export const Borderless = () => `<ul class="fd-feed-list fd-feed-list--group fd- Borderless.storyName = 'Borderless group'; Borderless.parameters = { docs: { - storyDescription: 'When feed list items are displayed in a group, they are usually separated by borders. However, to remove the borders, add the `fd-feed-list--no-border` modifier class to the main element.' + description: { + story: 'When feed list items are displayed in a group, they are usually separated by borders. However, to remove the borders, add the `fd-feed-list--no-border` modifier class to the main element.' + } } }; @@ -484,6 +502,8 @@ export const Mobile = () => `<div style="width: 350px; height: 600px; position: Mobile.parameters = { docs: { - storyDescription: 'The feed list item can be mobile responsive by adding the `fd-feed-list--s` modifier class to the main element.' + description: { + story: 'The feed list item can be mobile responsive by adding the `fd-feed-list--s` modifier class to the main element.' + } } }; diff --git a/stories/file-uploader/file-uploader.stories.js b/stories/file-uploader/file-uploader.stories.js index e9ab58ae6e..e6d6246de1 100644 --- a/stories/file-uploader/file-uploader.stories.js +++ b/stories/file-uploader/file-uploader.stories.js @@ -91,7 +91,9 @@ Selected.storyName = 'After Selecting'; Selected.parameters = { docs: { iframeHeight: 250, - storyDescription: 'Once the user selects files, update the input and the hidden div to include the file names. The hidden div will announce the file names only once when the value changes.' + description: { + story: 'Once the user selects files, update the input and the hidden div to include the file names. The hidden div will announce the file names only once when the value changes.' + } } }; @@ -129,7 +131,9 @@ export const Compact = () => `<div class="fd-form-item"> Compact.parameters = { docs: { iframeHeight: 250, - storyDescription: 'For compact File Uploader apply the `--compact` modifier to the button and input elements.' + description: { + story: 'For compact File Uploader apply the `--compact` modifier to the button and input elements.' + } } }; @@ -259,6 +263,8 @@ export const Status = () => `<div class="fd-form-item"> Status.parameters = { docs: { iframeHeight: 250, - storyDescription: 'For Status File Uploader apply the corresponding status class `is-success, is-error, is-warning, is-information ` modifier to the input element.' + description: { + story: 'For Status File Uploader apply the corresponding status class `is-success, is-error, is-warning, is-information ` modifier to the input element.' + } } }; diff --git a/stories/fixed-card-layout/fixed-card-layout.stories.js b/stories/fixed-card-layout/fixed-card-layout.stories.js index 9b84ff7eae..23c54e1645 100644 --- a/stories/fixed-card-layout/fixed-card-layout.stories.js +++ b/stories/fixed-card-layout/fixed-card-layout.stories.js @@ -514,6 +514,8 @@ FixedCardLayout.storyName = 'Fixed card layout with 3 columns'; FixedCardLayout.parameters = { docs: { iframeHeight: 900, - storyDescription: 'Cards arrangement in a 3 column layout.' + description: { + story: 'Cards arrangement in a 3 column layout.' + } } }; diff --git a/stories/flexible-column-layout/flexible-column-layout.stories.js b/stories/flexible-column-layout/flexible-column-layout.stories.js index 7a96d9e46c..3606413656 100755 --- a/stories/flexible-column-layout/flexible-column-layout.stories.js +++ b/stories/flexible-column-layout/flexible-column-layout.stories.js @@ -43,11 +43,13 @@ export const ThreeColumnsLayout = () => ` </div>`; ThreeColumnsLayout.parameters = { docs: { - storyDescription: ` + description: { + story: ` - Minimum width of the device: \`1281px\` - Wide column width: \`50%\` - Narrow columns width: \`25%\` ` + } } }; @@ -79,11 +81,13 @@ export const TwoColumnsLayout = () => ` </div>`; TwoColumnsLayout.parameters = { docs: { - storyDescription: ` + description: { + story: ` - Width of the device: Max: \`1280px\`, Min: 961px - Wide column width: \`67%\` - Narrow column width: \`33%\` ` + } } }; @@ -115,10 +119,12 @@ export const OneColumnsLayout = () => ` </div>`; OneColumnsLayout.parameters = { docs: { - storyDescription: ` + description: { + story: ` - Max width of the device: \`960px\` - Column width: \`100%\` ` + } } }; diff --git a/stories/fn-avatar/fn-avatar.stories.js b/stories/fn-avatar/fn-avatar.stories.js index f74f8b36c4..34e8efc876 100644 --- a/stories/fn-avatar/fn-avatar.stories.js +++ b/stories/fn-avatar/fn-avatar.stories.js @@ -215,7 +215,9 @@ RoundedInitialsDecorative.storyName = 'Rounded Decorative Avatar with Initials'; RoundedInitialsDecorative.parameters = { docs: { iframeHeight: 500, - storyDescription: 'Modifier classes are added to the base class only for the size and the color. Rounded Decorative Avatar is the default type for avatar.' + description: { + story: 'Modifier classes are added to the base class only for the size and the color. Rounded Decorative Avatar is the default type for avatar.' + } } }; @@ -360,7 +362,9 @@ CircleInitialsDecorative.storyName = 'Circle Decorative Avatar with Initials'; CircleInitialsDecorative.parameters = { docs: { iframeHeight: 500, - storyDescription: 'For Circle Decorative Avatar add the `.fn-avatar--circle` modifier classes to the base class and the modifier classes for size and color.' + description: { + story: 'For Circle Decorative Avatar add the `.fn-avatar--circle` modifier classes to the base class and the modifier classes for size and color.' + } } }; @@ -833,7 +837,9 @@ CircleThumbnailDecorative.storyName = 'Circle Decorative Avatar with Thumbnail'; CircleThumbnailDecorative.parameters = { docs: { iframeHeight: 500, - storyDescription: 'An additional modifier class `.fn-avatar--thumbnail` is needed if you want to achieve an avatar with thumbnail.' + description: { + story: 'An additional modifier class `.fn-avatar--thumbnail` is needed if you want to achieve an avatar with thumbnail.' + } } }; @@ -985,7 +991,9 @@ RoundedInitialsInteractive.storyName = 'Rounded Interactive Avatar with Initials RoundedInitialsInteractive.parameters = { docs: { iframeHeight: 500, - storyDescription: 'Interactive Avatars have hover, active, focus and disabled states. You can turn a decorative avatar to interactive by adding the `fn-avatar--interactive` modifier class to the other classes.' + description: { + story: 'Interactive Avatars have hover, active, focus and disabled states. You can turn a decorative avatar to interactive by adding the `fn-avatar--interactive` modifier class to the other classes.' + } } }; @@ -1137,7 +1145,9 @@ CircleInitialsInteractive.storyName = 'Circle Interactive Avatar with Initials'; CircleInitialsInteractive.parameters = { docs: { iframeHeight: 500, - storyDescription: '' + description: { + story: '' + } } }; @@ -1360,7 +1370,9 @@ RoundedIconInteractive.storyName = 'Rounded Interactive Avatar with Icon'; RoundedIconInteractive.parameters = { docs: { iframeHeight: 500, - storyDescription: '' + description: { + story: '' + } } }; @@ -1582,7 +1594,9 @@ CircleIconInteractive.storyName = 'Circle Interactive Avatar with Icon'; CircleIconInteractive.parameters = { docs: { iframeHeight: 500, - storyDescription: '' + description: { + story: '' + } } }; diff --git a/stories/fn-button/fn-button.stories.js b/stories/fn-button/fn-button.stories.js index c35d9b9ef1..1728f05e9b 100644 --- a/stories/fn-button/fn-button.stories.js +++ b/stories/fn-button/fn-button.stories.js @@ -122,7 +122,9 @@ Primary.storyName = 'Primary Buttons'; Primary.parameters = { docs: { iframeHeight: 500, - storyDescription: 'Primary buttons are two types: default and emphasized. For the default one no modifier class is needed, just add the `.fn-button` class to your html element. For emphasized button add `.fn-button--emphasized` modifier class to the `.fn-button` base class.' + description: { + story: 'Primary buttons are two types: default and emphasized. For the default one no modifier class is needed, just add the `.fn-button` class to your html element. For emphasized button add `.fn-button--emphasized` modifier class to the `.fn-button` base class.' + } } }; @@ -204,7 +206,8 @@ Secondary.storyName = 'Secondary Buttons'; Secondary.parameters = { docs: { iframeHeight: 500, - storyDescription: `Secondary buttons are three types: ghost, transparent and neutral. + description: { + story: `Secondary buttons are three types: ghost, transparent and neutral. | Style     | Modifier class | | ------------------------------------ | ------------------------ | @@ -212,6 +215,7 @@ Secondary.parameters = { | transparent     | \`fn-button--transparent\`| | neutral     | \`fn-button--neutral\` | ` + } } }; @@ -341,7 +345,8 @@ Semantic.storyName = 'Semantic Buttons'; Semantic.parameters = { docs: { iframeHeight: 500, - storyDescription: `For semantic button add the appropriate modifier class to the \`.fn-button\` base class. + description: { + story: `For semantic button add the appropriate modifier class to the \`.fn-button\` base class. | Style     | Modifier class | | --------------------------------- | ------------------------ | @@ -352,6 +357,7 @@ Semantic.parameters = { | reject     | \`fn-button--reject\` | | negative     | \`fn-button--negative\` | ` + } } }; @@ -443,7 +449,8 @@ Icon.storyName = 'Icon Buttons'; Icon.parameters = { docs: { iframeHeight: 500, - storyDescription: `Depending on where you want the icon to be rendered add the appropriate modifier class to the \`.fn-button\` base class. + description: { + story: `Depending on where you want the icon to be rendered add the appropriate modifier class to the \`.fn-button\` base class. | Structure     | Modifier class | | --------------------------------- | ------------------------ | @@ -451,6 +458,7 @@ Icon.parameters = { | Icon-Right    | \`fn-button--icon-right\`| | Icon-Only     | \`fn-button--icon-only\` | ` + } } }; @@ -516,7 +524,9 @@ Toggle.storyName = 'Toggle Buttons'; Toggle.parameters = { docs: { iframeHeight: 500, - storyDescription: 'Add the `.fn-button--selected` class to the button when it is in toggled (selected) state.' + description: { + story: 'Add the `.fn-button--selected` class to the button when it is in toggled (selected) state.' + } } }; @@ -636,7 +646,9 @@ Segmented.storyName = 'Segmented Button'; Segmented.parameters = { docs: { iframeHeight: 500, - storyDescription: '' + description: { + story: '' + } } }; @@ -686,6 +698,8 @@ Nested.storyName = 'Nested Buttons'; Nested.parameters = { docs: { iframeHeight: 500, - storyDescription: '' + description: { + story: '' + } } }; diff --git a/stories/fn-dialog/fn-dialog.stories.js b/stories/fn-dialog/fn-dialog.stories.js index b5853c8dfd..13654f844e 100644 --- a/stories/fn-dialog/fn-dialog.stories.js +++ b/stories/fn-dialog/fn-dialog.stories.js @@ -56,6 +56,8 @@ Primary.storyName = 'Dialog'; Primary.parameters = { docs: { - storyDescription: 'Dialog example with title, text and buttons in the footer' + description: { + story: 'Dialog example with title, text and buttons in the footer' + } } }; diff --git a/stories/fn-generic-tag/fn-generic-tag.stories.js b/stories/fn-generic-tag/fn-generic-tag.stories.js index 7763345ced..fc1b4e1b55 100644 --- a/stories/fn-generic-tag/fn-generic-tag.stories.js +++ b/stories/fn-generic-tag/fn-generic-tag.stories.js @@ -121,8 +121,10 @@ export const GenericTagPositive = () => `${localStyles} GenericTagPositive.parameters = { docs: { iframeHeight: 500, - storyDescription: `Add the \`.fn-generic-tag--positive\` modifier class to the \`.fn-generic-tag\` base class for positive generic tag. + description: { + story: `Add the \`.fn-generic-tag--positive\` modifier class to the \`.fn-generic-tag\` base class for positive generic tag. ` + } } }; @@ -178,7 +180,9 @@ export const GenericTagCritical = () => `${localStyles} GenericTagCritical.parameters = { docs: { iframeHeight: 500, - storyDescription: 'Add the `.fn-generic-tag--critical` modifier class to the `.fn-generic-tag` base class for critical generic tag.' + description: { + story: 'Add the `.fn-generic-tag--critical` modifier class to the `.fn-generic-tag` base class for critical generic tag.' + } } }; @@ -234,7 +238,9 @@ export const GenericTagNegative = () => `${localStyles} GenericTagNegative.parameters = { docs: { iframeHeight: 500, - storyDescription: 'Add the `.fn-generic-tag--negative` modifier class to the `.fn-generic-tag` base class for negative generic tag.' + description: { + story: 'Add the `.fn-generic-tag--negative` modifier class to the `.fn-generic-tag` base class for negative generic tag.' + } } }; @@ -290,6 +296,8 @@ export const GenericTagInfo = () => `${localStyles} GenericTagInfo.parameters = { docs: { iframeHeight: 500, - storyDescription: 'Add the `.fn-generic-tag--info` modifier class to the `.fn-generic-tag` base class for info generic tag.' + description: { + story: 'Add the `.fn-generic-tag--info` modifier class to the `.fn-generic-tag` base class for info generic tag.' + } } }; diff --git a/stories/fn-input/fn-input.stories.js b/stories/fn-input/fn-input.stories.js index 5d4f67b2c2..eee2c9f3eb 100644 --- a/stories/fn-input/fn-input.stories.js +++ b/stories/fn-input/fn-input.stories.js @@ -174,7 +174,9 @@ export const InfoInput = () => `${localStyles} InfoInput.parameters = { docs: { iframeHeight: 500, - storyDescription: 'Add the `.fn-input--info` modifier class to `.fn-input` for Info Input.' + description: { + story: 'Add the `.fn-input--info` modifier class to `.fn-input` for Info Input.' + } } }; @@ -246,7 +248,9 @@ export const CriticalInput = () => `${localStyles} CriticalInput.parameters = { docs: { iframeHeight: 500, - storyDescription: 'Add the `.fn-input--critical` modifier class to `.fn-input` for Critical Input.' + description: { + story: 'Add the `.fn-input--critical` modifier class to `.fn-input` for Critical Input.' + } } }; @@ -318,7 +322,9 @@ export const NegativeInput = () => `${localStyles} NegativeInput.parameters = { docs: { iframeHeight: 500, - storyDescription: 'Add the `.fn-input--negative` modifier class to `.fn-input` for Negative Input.' + description: { + story: 'Add the `.fn-input--negative` modifier class to `.fn-input` for Negative Input.' + } } }; @@ -391,6 +397,8 @@ export const PositiveInput = () => `${localStyles} PositiveInput.parameters = { docs: { iframeHeight: 500, - storyDescription: 'Add the `.fn-input--positive` modifier class to `.fn-input` for Positive Input.' + description: { + story: 'Add the `.fn-input--positive` modifier class to `.fn-input` for Positive Input.' + } } }; diff --git a/stories/fn-link/fn-link.stories.js b/stories/fn-link/fn-link.stories.js index c8c4197ecd..6ac8e2afb1 100644 --- a/stories/fn-link/fn-link.stories.js +++ b/stories/fn-link/fn-link.stories.js @@ -83,6 +83,8 @@ Primary.storyName = 'Links'; Primary.parameters = { docs: { - storyDescription: 'Link states' + description: { + story: 'Link states' + } } }; diff --git a/stories/fn-message-box/fn-message-box.stories.js b/stories/fn-message-box/fn-message-box.stories.js index 1208d83e1c..5bed104826 100644 --- a/stories/fn-message-box/fn-message-box.stories.js +++ b/stories/fn-message-box/fn-message-box.stories.js @@ -76,7 +76,9 @@ Primary.storyName = 'Message Box'; Primary.parameters = { docs: { - storyDescription: 'Message Box Example' + description: { + story: 'Message Box Example' + } } }; @@ -111,7 +113,9 @@ Confirmation.storyName = 'Confirmation Message Box'; Confirmation.parameters = { docs: { - storyDescription: 'Confirmation Message Box Example' + description: { + story: 'Confirmation Message Box Example' + } } }; @@ -139,7 +143,9 @@ Negative.storyName = 'Negative Message Box'; Negative.parameters = { docs: { - storyDescription: 'Negative Message Box Example' + description: { + story: 'Negative Message Box Example' + } } }; @@ -167,7 +173,9 @@ Critical.storyName = 'Critical Message Box'; Critical.parameters = { docs: { - storyDescription: 'Critical Message Box Example' + description: { + story: 'Critical Message Box Example' + } } }; @@ -195,7 +203,9 @@ Positive.storyName = 'Positive Message Box'; Positive.parameters = { docs: { - storyDescription: 'Positive Message Box Example' + description: { + story: 'Positive Message Box Example' + } } }; @@ -223,6 +233,8 @@ Info.storyName = 'Info Message Box'; Info.parameters = { docs: { - storyDescription: 'Info Message Box Example' + description: { + story: 'Info Message Box Example' + } } }; diff --git a/stories/fn-tabs/fn-tabs.stories.js b/stories/fn-tabs/fn-tabs.stories.js index 8004275945..e031494896 100644 --- a/stories/fn-tabs/fn-tabs.stories.js +++ b/stories/fn-tabs/fn-tabs.stories.js @@ -209,7 +209,9 @@ Semantic.storyName = 'Semantic Tabs'; Semantic.parameters = { docs: { iframeHeight: 500, - storyDescription: 'The `.fn-tabs--positive`, `.fn-tabs--critical` or `.fn-tabs--negative` modifier classes are added to the `.fn-tabs` base class to achieve positive, critical or negative tabs. ' + description: { + story: 'The `.fn-tabs--positive`, `.fn-tabs--critical` or `.fn-tabs--negative` modifier classes are added to the `.fn-tabs` base class to achieve positive, critical or negative tabs. ' + } } }; @@ -269,7 +271,9 @@ MultiInstance.storyName = 'Multi-Instance Tabs'; MultiInstance.parameters = { docs: { iframeHeight: 500, - storyDescription: 'The `.fn-tabs--multi-instance` modifier class toachieve Multi Instance tabs. It can be combined with a semantic modifier class.' + description: { + story: 'The `.fn-tabs--multi-instance` modifier class toachieve Multi Instance tabs. It can be combined with a semantic modifier class.' + } } }; diff --git a/stories/fn-title/title.stories.js b/stories/fn-title/title.stories.js index b22f485eb8..92d92fa12a 100644 --- a/stories/fn-title/title.stories.js +++ b/stories/fn-title/title.stories.js @@ -24,7 +24,9 @@ Levels.storyName = 'Semantic Level'; Levels.parameters = { docs: { iframeHeight: 250, - storyDescription: 'There are 6 semantic levels of a heading element. There should only be one H1 on a page, and headings should only appear in ascending order without skipping a level; i.e. even if there are only 3 levels on a page, the order must be H1-H2-H3, and no other levels used.' + description: { + story: 'There are 6 semantic levels of a heading element. There should only be one H1 on a page, and headings should only appear in ascending order without skipping a level; i.e. even if there are only 3 levels on a page, the order must be H1-H2-H3, and no other levels used.' + } } }; @@ -44,7 +46,9 @@ export const VisualLevel = () => `<h1 class="fn-title fn-title--h6">Title Headin VisualLevel.parameters = { docs: { iframeHeight: 250, - storyDescription: 'If a design requires it, the visual level can be set to something different than the semantic level. This allows the sequential order to be maintained while providing flexibility in appearance.' + description: { + story: 'If a design requires it, the visual level can be set to something different than the semantic level. This allows the sequential order to be maintained while providing flexibility in appearance.' + } } }; @@ -68,6 +72,8 @@ Wrapping.storyName = 'Text Wrapping'; Wrapping.parameters = { docs: { iframeHeight: 300, - storyDescription: 'Add the `--wrap` modifier to cause the overflow text to wrap instead.' + description: { + story: 'Add the `--wrap` modifier to cause the overflow text to wrap instead.' + } } }; diff --git a/stories/fn-toggles/fn-toggles.stories.js b/stories/fn-toggles/fn-toggles.stories.js index aa36fadb6c..d46d7e7920 100644 --- a/stories/fn-toggles/fn-toggles.stories.js +++ b/stories/fn-toggles/fn-toggles.stories.js @@ -319,7 +319,9 @@ export const CheckboxGroup = () => `${localStyles} CheckboxGroup.parameters = { docs: { iframeHeight: 500, - storyDescription: 'Use the `<fieldset>` HTML element with class `.fn-fieldset` to group checkbox controls. The controls are displayed vertically and have `fit-content` width. The `.fn-fieldset--full-width` modifier class will display the checkbox controls with the same width as the parent element. To display the controls horizontally apply the `.fn-fieldset--horizontal` modifier class.' + description: { + story: 'Use the `<fieldset>` HTML element with class `.fn-fieldset` to group checkbox controls. The controls are displayed vertically and have `fit-content` width. The `.fn-fieldset--full-width` modifier class will display the checkbox controls with the same width as the parent element. To display the controls horizontally apply the `.fn-fieldset--horizontal` modifier class.' + } } }; @@ -547,7 +549,9 @@ export const RadioGroup = () => `${localStyles} RadioGroup.parameters = { docs: { iframeHeight: 500, - storyDescription: 'Use the `<fieldset>` HTML element with class `.fn-fieldset` to group radio button controls. The controls are displayed vertically and have `fit-content` width. The `.fn-fieldset--full-width` modifier class will display the radio buttons with the same width as the parent element. To display the controls horizontally apply the `.fn-fieldset--horizontal` modifier class.' + description: { + story: 'Use the `<fieldset>` HTML element with class `.fn-fieldset` to group radio button controls. The controls are displayed vertically and have `fit-content` width. The `.fn-fieldset--full-width` modifier class will display the radio buttons with the same width as the parent element. To display the controls horizontally apply the `.fn-fieldset--horizontal` modifier class.' + } } }; diff --git a/stories/form-fieldset/form-fieldset.stories.js b/stories/form-fieldset/form-fieldset.stories.js index 17774c83a0..13ad74e0c8 100644 --- a/stories/form-fieldset/form-fieldset.stories.js +++ b/stories/form-fieldset/form-fieldset.stories.js @@ -135,6 +135,8 @@ export const RadioButtonGroups = () => `<fieldset class="fd-fieldset" id="radio1 RadioButtonGroups.parameters = { docs: { iframeHeight: 200, - storyDescription: 'Radio button groups should always be grouped using fieldset for accessibility reasons.' + description: { + story: 'Radio button groups should always be grouped using fieldset for accessibility reasons.' + } } }; diff --git a/stories/form-grid/form-grid.stories.js b/stories/form-grid/form-grid.stories.js index 5f39242298..19f3af56a4 100644 --- a/stories/form-grid/form-grid.stories.js +++ b/stories/form-grid/form-grid.stories.js @@ -91,7 +91,8 @@ SSize.storyName = 'Small'; SSize.parameters = { docs: { iframeHeight: 450, - storyDescription: ` + description: { + story: ` The small form grid uses a single-column layout and is best used for mobile screens and dialogs. The form groups are positioned below each other in a single column and the labels are positioned above the fields to avoid the labels from truncating. ####Label-field ratio @@ -103,6 +104,7 @@ Label | 12 | A label handles the space of a whole row. Fields | 12 | A field handles the space of a whole row. Empty grid columns | 0 | There are no empty spaces on the right of the fields. ` + } } }; @@ -181,7 +183,8 @@ MSizeDefault.storyName = 'Default [M]'; MSizeDefault.parameters = { docs: { iframeHeight: 370, - storyDescription: ` + description: { + story: ` The default medium form grid uses a single-column layout. The labels are positioned in the same row as the corresponding input field or value, and form groups are positioned below each other. ####Label-field ratio @@ -194,6 +197,7 @@ Fields | 10 | The rest of the grid columns of the responsive grid layout are use Empty grid columns | 0 | There are no empty spaces on the right of the fields. ` + } } }; @@ -272,7 +276,8 @@ MSizeSplitScreen.storyName = 'Split screen [M]'; MSizeSplitScreen.parameters = { docs: { iframeHeight: 370, - storyDescription: ` + description: { + story: ` When the form is positioned in the details part of a split screen, the medium form grid should use a label-field ratio of 4:7:1. ####Label-field ratio @@ -285,6 +290,7 @@ Fields | 7 | Seven grid columns of the responsive grid layout are used by the fi Empty grid columns | 1 | There is one empty space on the right of the field. ` + } } }; @@ -364,7 +370,8 @@ MSizeFullScreenApp.storyName = 'Full screen [M]'; MSizeFullScreenApp.parameters = { docs: { iframeHeight: 450, - storyDescription: ` + description: { + story: ` If the form is being viewed in a full-screen app, the medium form grid should use a single-column layout. ####Label-field ratio The medium form grid is organized into a **3:5:4** label-field ratio for full-screen views. @@ -376,6 +383,7 @@ Fields | 5 | Five grid columns of the responsive grid layout are used by the fie Empty grid columns | 4 | There are four empty spaces on the right of the field. ` + } } }; @@ -454,7 +462,8 @@ MSizeFullScreenAppLongLabel.storyName = 'Long label [M]'; MSizeFullScreenAppLongLabel.parameters = { docs: { iframeHeight: 450, - storyDescription: ` + description: { + story: ` The medium form width can go down to 601 px, providing insufficient space for longer labels and fields. If long labels or input values are necessary, use the label-field ratio of 4:8:0. ####Label-field ratio @@ -467,6 +476,7 @@ Fields | 8 | Eight grid columns of the responsive grid layout are used by the fi Empty grid columns | 0 | There is no empty space on the right of the field. ` + } } }; @@ -545,7 +555,8 @@ LSizeDefault.storyName = 'Default [L]'; LSizeDefault.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` The default large form grid uses a two-column layout. The form groups are placed side-by-side, displaying all information on one screen to avoid scrolling. In these columns, the labels are positioned in the same row as the corresponding input field or value. Therefore, the form groups adopt the Z layout, directing users’ attention to each row instead of columns. ####Label-field ratio @@ -558,6 +569,7 @@ Fields | 8 | The rest of the grid columns of the responsive grid layout are used Empty grid columns | 0 | There is no empty space on the right of the field. ` + } } }; @@ -635,7 +647,8 @@ LSizeSingleFormGroup.storyName = 'Single form [L]'; LSizeSingleFormGroup.parameters = { docs: { iframeHeight: 530, - storyDescription: ` + description: { + story: ` If the form contains a single form group, you can use a single-column layout. @@ -648,6 +661,7 @@ Label | 3 | Only three grid columns of the responsive grid layout are used by th Fields | 5 | Five of the grid columns of the responsive grid layout are used by the fields. Empty grid columns | 4 | There are four empty spaces on the right of the field. ` + } } }; @@ -796,7 +810,8 @@ LSizeMultipleFormGroup.storyName = 'Multiple form [L]'; LSizeMultipleFormGroup.parameters = { docs: { iframeHeight: 590, - storyDescription: ` + description: { + story: ` If the form contains multiple form groups, you can use a two-column layout. ####Label-field ratio @@ -811,6 +826,7 @@ Empty grid columns | 0 | There are no empty spaces on the right of the fields. **Note:** As explained in the main description, large goes down to 1025 px. Therefore, long labels that are put next to fields might not fit on smaller large-sized screens (especially in split-view apps). For this reason, labels are put above fields. ` + } } }; @@ -889,7 +905,8 @@ XlDefault.storyName = 'Default [XL]'; XlDefault.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` The default extra-large form grid uses a two-column layout. The form groups are placed side-by-side, displaying all information on one screen to avoid scrolling. In these columns, the labels are positioned in the same row as the corresponding input field or value. The form groups adopt the Z layout. ####Label-field ratio @@ -902,6 +919,7 @@ Fields | 8 | The rest of the grid columns of the responsive grid layout are used Empty grid columns | 0 | There are no empty spaces on the right of the fields. ` + } } }; @@ -981,7 +999,8 @@ XlSingleFormGroup.storyName = 'Single form [XL]'; XlSingleFormGroup.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` If the form contains a single form group, you can use a single-column layout. ####Label-field ratio @@ -996,6 +1015,7 @@ Empty grid columns | 4 | There are four empty spaces on the right of the fields. **Note:** If the form is put into a full-screen app and it contains multiple form groups, you can also use a three-column layout with a label-field ratio of **12:12:0**. ` + } } }; @@ -1145,7 +1165,8 @@ XlDoubleFormGroup.storyName = 'Double form [XL]'; XlDoubleFormGroup.parameters = { docs: { iframeHeight: 650, - storyDescription: ` + description: { + story: ` If the form contains multiple form groups, you can use a two-column layout. ####Label-field ratio @@ -1158,6 +1179,7 @@ Fields | 8 | The rest of the grid columns of the responsive grid layout are used Empty grid columns | 0 | There are no empty spaces on the right of the fields. ` + } } }; @@ -1372,7 +1394,8 @@ XlMultipleFormGroup.storyName = 'Multiple form [XL]'; XlMultipleFormGroup.parameters = { docs: { iframeHeight: 850, - storyDescription: ` + description: { + story: ` If the form contains multiple form groups, you can use a three-column layout.fd-row--top class will organize all the elements evenly on screen. ####Label-field ratio @@ -1385,6 +1408,7 @@ Fields | 12 | A field handles the space of a whole row. Empty grid columns | 0 | There is no empty space on the right of the field. ` + } } }; @@ -1427,8 +1451,10 @@ CompactLayout.storyName = 'Compact form'; CompactLayout.parameters = { docs: { iframeHeight: 200, - storyDescription: ` + description: { + story: ` To display the form using a compact layout, add the \`--compact\` modifier on the \`fd-input\` class.` + } } }; @@ -1519,7 +1545,8 @@ ColumnRecommended.storyName = 'Recommended layouts'; ColumnRecommended.parameters = { docs: { iframeHeight: 400, - storyDescription: ` + description: { + story: ` These are the recommended layouts that display the ideal amount of columns for each screen size. ####Layout 1 @@ -1550,6 +1577,7 @@ M | 1 S | 1 ` + } } }; @@ -1623,7 +1651,8 @@ ColumnPossible.storyName = 'Layout variations'; ColumnPossible.parameters = { docs: { iframeHeight: 400, - storyDescription: ` + description: { + story: ` Although not the best solutions, these layouts are also possible. ####Layout 4 @@ -1646,6 +1675,7 @@ M | 1 S | 1 ` + } } }; @@ -1691,8 +1721,10 @@ export const ColumnNotRecommended = () => `<h1>XL3-L2-M2-S1</h1> ColumnNotRecommended.parameters = { docs: { iframeHeight: 400, - storyDescription: ` + description: { + story: ` The layout that is not recommended for a form group are XL3-L2-M2-S1 ` + } } }; diff --git a/stories/form-group/form-group.stories.js b/stories/form-group/form-group.stories.js index 580fdeb6bf..e3693922c3 100644 --- a/stories/form-group/form-group.stories.js +++ b/stories/form-group/form-group.stories.js @@ -23,9 +23,11 @@ export const Primary = () => `<div class="fd-form-group"> Primary.storyName = 'Default'; Primary.parameters = { docs: { - storyDescription: ` + description: { + story: ` The default form group component displays an inline label and an input field that is highlighted in blue when selected. ` + } } }; @@ -39,9 +41,11 @@ export const Compact = () => `<div class="fd-form-group"> Compact.parameters = { docs: { - storyDescription: ` + description: { + story: ` Form group can be displayed in compact mode, which is ideal for larger desktop screens. To display a compact form group, add the \`--compact\` modifier class to the \`fd-input\` element. ` + } } }; @@ -55,9 +59,11 @@ export const Required = () => `<div class="fd-form-group"> Required.parameters = { docs: { - storyDescription: ` + description: { + story: ` To indicate to the user that it’s required to fill out an input field, add the \`--required\` modifier class to the \`fd-form-label\` element. ` + } } }; @@ -76,9 +82,11 @@ export const GroupHeader = () => GroupHeader.storyName = 'Group header'; GroupHeader.parameters = { docs: { - storyDescription: ` + description: { + story: ` Form groups can be grouped together under a header with the \`fd-form-group__header\` class. ` + } } }; @@ -96,9 +104,11 @@ export const GroupHeaderCompact = () => GroupHeaderCompact.storyName = 'Group header (compact)'; GroupHeaderCompact.parameters = { docs: { - storyDescription: ` + description: { + story: ` Form group headers can be displayed in compact mode. To display compact group headers, add the \`--compact\` modifier class to the \`fd-form-group__header\` element. ` + } } }; @@ -198,10 +208,12 @@ export const GroupHeaderInFormGrid = () => GroupHeaderInFormGrid.storyName = 'Group header (form grid)'; GroupHeaderInFormGrid.parameters = { docs: { - storyDescription: ` + description: { + story: ` When group headers are displayed in a **Form Grid**, paddings are added to the groups. To display group headers in a form grid, add the \`fd-col__form-group\` class at the same level as \`fd-form-group\` for the styles to reflect properly. Similarly, when using \`fd-form-item\`, add the \`fd-row__form-item\` element at the same level. ` + } } }; diff --git a/stories/form-header/form-header.stories.js b/stories/form-header/form-header.stories.js index 54883ab9f1..d2053c6e51 100644 --- a/stories/form-header/form-header.stories.js +++ b/stories/form-header/form-header.stories.js @@ -17,8 +17,10 @@ export const Primary = () => `<div class="fd-form-header"> Primary.storyName = 'Default'; Primary.parameters = { docs: { - storyDescription: ` + description: { + story: ` Default form headers are displayed in text that does not wrap but truncates into an ellipsis. ` + } } }; diff --git a/stories/form-item/form-item.stories.js b/stories/form-item/form-item.stories.js index 3dc6f03022..8bd53948eb 100644 --- a/stories/form-item/form-item.stories.js +++ b/stories/form-item/form-item.stories.js @@ -18,8 +18,10 @@ export const Primary = () => `<div class="fd-form-item"> Primary.storyName = 'Default'; Primary.parameters = { docs: { - storyDescription: `The default form item displays a label placed above an empty input field with placeholder text that can be replaced with regular text. + description: { + story: `The default form item displays a label placed above an empty input field with placeholder text that can be replaced with regular text. ` + } } }; @@ -31,8 +33,10 @@ export const Compact = () => `<div class="fd-form-item"> Compact.parameters = { docs: { - storyDescription: `Form items can be displayed in compact mode by adding the \`--compact\` modifier class to the \`fd-input\` element. + description: { + story: `Form items can be displayed in compact mode by adding the \`--compact\` modifier class to the \`fd-input\` element. ` + } } }; @@ -44,7 +48,9 @@ export const Required = () => `<div class="fd-form-item"> Required.parameters = { docs: { - storyDescription: `To indicate to the user that it’s required to fill out an input field, add the \`--required\` modifier class to the \`fd-form-label\` element. + description: { + story: `To indicate to the user that it’s required to fill out an input field, add the \`--required\` modifier class to the \`fd-form-label\` element. ` + } } }; diff --git a/stories/form-label/form-label.stories.js b/stories/form-label/form-label.stories.js index ed08636a63..8e0008fd6f 100644 --- a/stories/form-label/form-label.stories.js +++ b/stories/form-label/form-label.stories.js @@ -18,9 +18,11 @@ export const Primary = () => `<div class="fd-form-item"> Primary.storyName = 'Default'; Primary.parameters = { docs: { - storyDescription: ` + description: { + story: ` The default form label is displayed in grey text above an input field. To display a form label, add the \`fd-form-label\` class as a child element of the \`fd-form-item\` element. ` + } } }; @@ -32,9 +34,11 @@ export const Required = () => `<div class="fd-form-item"> Required.parameters = { docs: { - storyDescription: ` + description: { + story: ` To indicate to the user that it’s required to fill out an input field, add the \`--required\` modifier class to the \`fd-form-label\` element. ` + } } }; @@ -46,9 +50,11 @@ export const Colon = () => `<div class="fd-form-item"> Colon.parameters = { docs: { - storyDescription: ` + description: { + story: ` A form label can be displayed with a colon that does not disappear when truncated. To achieve this, add the \`--colon\` modifier class to the \`fd-form-label\` element. ` + } } }; @@ -60,8 +66,10 @@ export const Disabled = () => `<div class="fd-form-item"> Disabled.parameters = { docs: { - storyDescription: ` + description: { + story: ` A form label can be displayed as disabled to indicate to the users that it cannot be interacted with. To display a disabled form label, add the \`is-disabled\` class to the \`fd-input\` element. ` + } } }; diff --git a/stories/form-message/form-message.stories.js b/stories/form-message/form-message.stories.js index 50662d6668..2815a2d7aa 100644 --- a/stories/form-message/form-message.stories.js +++ b/stories/form-message/form-message.stories.js @@ -38,8 +38,10 @@ export const Success = () => `<div class="fd-form-item"> Success.parameters = { docs: { - storyDescription: `To display a success message below an input field, add the \`--success\` modifier class to the \`fd-form-message\` element. + description: { + story: `To display a success message below an input field, add the \`--success\` modifier class to the \`fd-form-message\` element. ` + } } }; @@ -59,8 +61,10 @@ export const Error = () => `<div class="fd-form-item"> Error.parameters = { docs: { - storyDescription: `To display an error message below an input field, add the \`--error\` modifier class to the \`fd-form-message\` element. + description: { + story: `To display an error message below an input field, add the \`--error\` modifier class to the \`fd-form-message\` element. ` + } } }; @@ -80,8 +84,10 @@ export const Warning = () => `<div class="fd-form-item"> Warning.parameters = { docs: { - storyDescription: `To display a warning message below an input field, add the \`--warning\` modifier class to the \`fd-form-message\` element. + description: { + story: `To display a warning message below an input field, add the \`--warning\` modifier class to the \`fd-form-message\` element. ` + } } }; @@ -101,7 +107,9 @@ export const Information = () => `<div class="fd-form-item"> Information.parameters = { docs: { - storyDescription: `To display an information message below an input field, add the \`--information\` modifier class to the \`fd-form-message\` element. + description: { + story: `To display an information message below an input field, add the \`--information\` modifier class to the \`fd-form-message\` element. ` + } } }; diff --git a/stories/generic-tile/generic-tile.stories.js b/stories/generic-tile/generic-tile.stories.js index 0e6fc70154..7655d5f3be 100644 --- a/stories/generic-tile/generic-tile.stories.js +++ b/stories/generic-tile/generic-tile.stories.js @@ -79,7 +79,8 @@ GenericTileSizes.storyName = 'Sizes'; GenericTileSizes.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` Generic tiles can be displayed in two tile dimensions: the default 1x1, and 2x1 (with the addition of a \`fd-tile--double\` modifier class). **The typical generic tile sizes are:** @@ -89,6 +90,7 @@ Generic tiles can be displayed in two tile dimensions: the default 1x1, and 2x1 - Small tile (1 x 1) - 9.25 x 9.25rem - Small tile (2 x 1) - 19 x 9.25rem ` } + } }; export const GenericTileLayout = () => `<div class="fddocs-container"> @@ -132,7 +134,8 @@ GenericTileLayout.storyName = 'Layout'; GenericTileLayout.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` The layout of the generic tile is fixed with designated areas for the header, content area and footer. **The common elements displayed in generic tiles are:** @@ -147,6 +150,7 @@ Footer (optional) | \`fd-tile__footer\` | The footer can contain a refresh icon **Note:** In the example below, the background color (and class names) illustrate the placement of elements within tiles. ` } + } }; export const GenericTileContentColumns = () => `<div class="fddocs-container"> @@ -214,7 +218,8 @@ GenericTileContentColumns.storyName = 'Columns'; GenericTileContentColumns.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` The header, content and footer of generic tile can be split into two columns with a 0.25rem vertical padding. Use the (\`*--2-col\`) modifier classes to achieve the 2-column design. - Header \`fd-tile__header fd-tile__header--2-col\` @@ -229,6 +234,7 @@ The header, content and footer of generic tile can be split into two columns wit **Note:** In the example below, the background color illustrates the column sections for generic tiles. ` } + } }; export const LaunchTile = () => `<h4>Launch tile with numeric content and launch icon</h4> @@ -381,7 +387,8 @@ LaunchTile.storyName = 'Launch tile'; LaunchTile.parameters = { docs: { iframeHeight: 500, - storyDescription: `As the name suggests, the launch tile is used for when users need to launch an application from the launchpad. It can display several elements, such as a header, subtitle, refresh button, footer, KPIs and images. The header can contain a maximum of 3 lines; all 3 lines can be used for the title or one of the lines can be used for a subtitle. If a fourth line title or an optional subtitle line is required, the \`fd-tile_header-content\` can be added to represent a header, which will merge the content containers into one tile. To display a launch tile, add the \`fd-tile--launch\` modifier class to the main element. + description: { + story: `As the name suggests, the launch tile is used for when users need to launch an application from the launchpad. It can display several elements, such as a header, subtitle, refresh button, footer, KPIs and images. The header can contain a maximum of 3 lines; all 3 lines can be used for the title or one of the lines can be used for a subtitle. If a fourth line title or an optional subtitle line is required, the \`fd-tile_header-content\` can be added to represent a header, which will merge the content containers into one tile. To display a launch tile, add the \`fd-tile--launch\` modifier class to the main element. **Note:** Because the examples are displaying numeric content, it is important to note how many characters a tile can support depending on its size. For instance, when a large tile displays numeric content, the text size is 2.25rem (36px). Due to the large text, the tile can only support a maximum of 4 characters. @@ -391,6 +398,7 @@ S | 8 characters can be displayed within numeric content. M | 6 characters can be displayed within numeric content. L | 4 characters can be displayed within numeric content. ` } + } }; export const KpiTile = () => `<h4>KPI tile with numeric content (size L)</h4> @@ -543,11 +551,13 @@ KpiTile.storyName = 'KPI tile'; KpiTile.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` A KPI tile displays key performance indicators that are used to measure and monitor a company’s performance at a strategic and operational level. The tile displays the KPI values as large, easy-to-recognize digits. In addition, you can show deviation arrows, semantic values, and scaling factors. The number of digits is limited by the size of the tiles. To display a KPI tile, add the \`fd-tile--kpi\` modifier class to the main element. **Note:** The KPI tile supports a limited number of characters, which varies depending on the tile size (see launch tile above for more details). ` } + } }; export const FeedTile = () => `<div class="fddocs-container"> @@ -602,8 +612,10 @@ FeedTile.storyName = 'Feed tile'; FeedTile.parameters = { docs: { iframeHeight: 500, - storyDescription: `The feed tile displays a news feed with a news headline, the source, and a time stamp. It shows new notifications in 10-second intervals, and tile content is updated every five minutes. If there are no new notifications, the most recent notifications are displayed. The feed tile’s headline uses the full width of the container and does not contain an icon. To display a feed tile, add the \`fd-tile--feed\` modifier class to the main element. + description: { + story: `The feed tile displays a news feed with a news headline, the source, and a time stamp. It shows new notifications in 10-second intervals, and tile content is updated every five minutes. If there are no new notifications, the most recent notifications are displayed. The feed tile’s headline uses the full width of the container and does not contain an icon. To display a feed tile, add the \`fd-tile--feed\` modifier class to the main element. ` } + } }; export const BadgeTile = () => `<div class="fddocs-container"> @@ -686,8 +698,10 @@ BadgeTile.storyName = 'Badge tile'; BadgeTile.parameters = { docs: { iframeHeight: 500, - storyDescription: `The badge tile displays very short and important information at the top right corner of the tile. It's recommended to add a badge to a tile when it has been newly added. Badges are not displayed when in action/edit mode. + description: { + story: `The badge tile displays very short and important information at the top right corner of the tile. It's recommended to add a badge to a tile when it has been newly added. Badges are not displayed when in action/edit mode. ` } + } }; export const SlideTile = () => `<div class="fddocs-container"> @@ -782,10 +796,12 @@ SlideTile.storyName = 'Slide tile'; SlideTile.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` The slide tile displays a news headline, a background image, the news source, and a time stamp. A start and pause button are always displayed on touch devices and can be revealed on desktops by hovering the mouse over the tile. The dots on the bottom of each tile identify the number of pages they contain. To display a slide tile, add the \`fd-tile--slide\` modifier class to the main element. ` } + } }; export const LinkTile = () => `<h4>Link tile: Floating behaviour in cozy mode</h4> @@ -1234,7 +1250,8 @@ LinkTile.storyName = 'Link tile'; LinkTile.parameters = { docs: { iframeHeight: 500, - storyDescription: `The link tile displays links in a separate area below the tiles area and comprise a title and optional subtitle. They can be in list format or they can float above the content. Link tiles can also be viewed in action mode, displaying a close button at the top and an actions button on the bottom. To display a link tile, add the \`fd-tile--line\` modifier class to the main element. + description: { + story: `The link tile displays links in a separate area below the tiles area and comprise a title and optional subtitle. They can be in list format or they can float above the content. Link tiles can also be viewed in action mode, displaying a close button at the top and an actions button on the bottom. To display a link tile, add the \`fd-tile--line\` modifier class to the main element. ####Sizes Link tiles are displayed in two modes depending on the screen width. @@ -1260,6 +1277,7 @@ The link tile can be displayed in cozy (default) and compact mode. To display li When in action mode, default (floating) link tiles display the actions and close button immediately after the text. However, when they are in list format, link tiles display the actions and close button along the right side of the container. To display link tile in action mode, add \`fd-tile__action-container\` after the header element. Gradient masking is also supported in edit mode. ` } + } }; export const TileInActionMode = () => `<div class="fddocs-container"> @@ -1362,7 +1380,9 @@ TileInActionMode.storyName = 'Action mode'; TileInActionMode.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` While a tile is in action mode, a close button is displayed on the top right-hand corner of the tile. The action icon is displayed on the bottom right-hand corner, and is only an indicator. The click/touch area fills the entire tile, excluding the area reserved for the close button. To display generic tile in action mode, add the \`fd-tile--action\` modifier class to the main element. ` } + } }; diff --git a/stories/horizontal-navigation/horizontal-navigation.stories.js b/stories/horizontal-navigation/horizontal-navigation.stories.js index 12a65aab28..57ba374e51 100644 --- a/stories/horizontal-navigation/horizontal-navigation.stories.js +++ b/stories/horizontal-navigation/horizontal-navigation.stories.js @@ -281,7 +281,9 @@ export const TextAndIcon = () => `<div style="height: 200px;"> TextAndIcon.storyName = 'Horizontal Navigation Text And Icon'; TextAndIcon.parameters = { docs: { - storyDescription: 'Icon Tab Bars with Single Click Areas' + description: { + story: 'Icon Tab Bars with Single Click Areas' + } } }; @@ -391,6 +393,8 @@ export const TextAndIconPhone = () => `<div style="height: 200px;"> TextAndIconPhone.storyName = 'Horizontal Navigation Text And Icon Phone View'; TextAndIconPhone.parameters = { docs: { - storyDescription: 'Icon Tab Bars with Two Click Areas' + description: { + story: 'Icon Tab Bars with Two Click Areas' + } } }; diff --git a/stories/icon-tab-bar/icon-tab-bar.stories.js b/stories/icon-tab-bar/icon-tab-bar.stories.js index d17a8826c9..0e7b0278c0 100644 --- a/stories/icon-tab-bar/icon-tab-bar.stories.js +++ b/stories/icon-tab-bar/icon-tab-bar.stories.js @@ -86,7 +86,9 @@ export const TextOnly = () => `<div class="fd-icon-tab-bar"> TextOnly.storyName = 'Text Only (Inline mode)'; TextOnly.parameters = { docs: { - storyDescription: 'The text-only variant is one of the most common types. It allows longer labels, and can also display counters next to the text to indicate the number of items on the tab page. The labels of the tabs do not get truncated. The full text is always shown. As a result, you need to ensure that your labels do not become too long. They should still be easy to read on smaller screens. The control has the same look and feel in Cozy and Compact mode.' + description: { + story: 'The text-only variant is one of the most common types. It allows longer labels, and can also display counters next to the text to indicate the number of items on the tab page. The labels of the tabs do not get truncated. The full text is always shown. As a result, you need to ensure that your labels do not become too long. They should still be easy to read on smaller screens. The control has the same look and feel in Cozy and Compact mode.' + } } }; @@ -156,7 +158,9 @@ export const Counter = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--count Counter.storyName = 'Counters and Text'; Counter.parameters = { docs: { - storyDescription: 'Counters can be shown on top of labels. In this case you need to apply the `fd-icon-tab-bar--counters` modifier class. <br> The control has the same look and feel in Cozy and Compact mode.' + description: { + story: 'Counters can be shown on top of labels. In this case you need to apply the `fd-icon-tab-bar--counters` modifier class. <br> The control has the same look and feel in Cozy and Compact mode.' + } } }; @@ -206,7 +210,9 @@ export const IconOnly = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon `; IconOnly.parameters = { docs: { - storyDescription: 'The Icon tabs are rounded tabs that can be populated with any icon. The labels in this case are omitted and counters are optional. You need to apply the `fd-icon-tab-bar--icon-only` modifier class for this type of tabs.' + description: { + story: 'The Icon tabs are rounded tabs that can be populated with any icon. The labels in this case are omitted and counters are optional. You need to apply the `fd-icon-tab-bar--icon-only` modifier class for this type of tabs.' + } } }; @@ -257,7 +263,9 @@ export const IconOnlyCompact = () => `<div class="fd-icon-tab-bar fd-icon-tab-ba IconOnlyCompact.storyName = 'Icon Only in Compact Mode'; IconOnlyCompact.parameters = { docs: { - storyDescription: 'In compact mode you need to apply an additional modifier class `fd-icon-tab-bar--compact`.' + description: { + story: 'In compact mode you need to apply an additional modifier class `fd-icon-tab-bar--compact`.' + } } }; @@ -487,7 +495,9 @@ export const Icon = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon"> `; Icon.parameters = { docs: { - storyDescription: 'To display Icon Tabs with labels and counters you need to apply the `fd-icon-tab-bar--icon` modifier class. The counters are optional and can be ommited. The label is always positioned at the bottom. If you decide to use labels, use them for all tabs. The badge is rendered at the top right hand corner of the icon container. Consider using shorter labels or text tabs (without icons), since text tabs cannot get truncated.' + description: { + story: 'To display Icon Tabs with labels and counters you need to apply the `fd-icon-tab-bar--icon` modifier class. The counters are optional and can be ommited. The label is always positioned at the bottom. If you decide to use labels, use them for all tabs. The badge is rendered at the top right hand corner of the icon container. Consider using shorter labels or text tabs (without icons), since text tabs cannot get truncated.' + } } }; @@ -674,7 +684,9 @@ export const Process = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--icon Process.parameters = { docs: { - storyDescription: 'You can also use the tab bar to depict a process. In this case, each tab stands for one step. You need to add the `fd-icon-tab-bar--process` modifier class and a sibling html element with `fd-icon-tab-bar__separator` class to the tab.' + description: { + story: 'You can also use the tab bar to depict a process. In this case, each tab stands for one step. You need to add the `fd-icon-tab-bar--process` modifier class and a sibling html element with `fd-icon-tab-bar__separator` class to the tab.' + } } }; @@ -823,11 +835,13 @@ export const Filter = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar--filter Filter.parameters = { docs: { - storyDescription: `The tab bar as a filter has two parts: <br> + description: { + story: `The tab bar as a filter has two parts: <br> - An “all” tab on the left - shows the total number of items, and describes the type of item (for example, 189 Products). <br> - Tabs for specific filters - the tab text indicates the filter attribute. It is recommended to show a counter on every tab. <br> You need to add the \`fd-icon-tab-bar--filter\` modifier class for this type of tabs.` + } } }; @@ -894,8 +908,10 @@ export const Overflow = () => `<div class="fd-icon-tab-bar"> Overflow.parameters = { docs: { - storyDescription: `Tabs can have an overflow to either sides of the control. Depending on if the order is fixed (process steps) or can be rearranged (tabs). + description: { + story: `Tabs can have an overflow to either sides of the control. Depending on if the order is fixed (process steps) or can be rearranged (tabs). For processes with a fixed order, an overflow to both sides is used. For tabs that can be rearranged, only one overflow will be displayed on the right side.` + } } }; @@ -1064,9 +1080,11 @@ export const SingleClick = () => `<div class='fddocs-icon-tab-container' style=" SingleClick.storyName = 'Universal Icon Tab Bar Single Click Area'; SingleClick.parameters = { docs: { - storyDescription: `When there is only one click area per tab (also including tabs with sub-items), regular tabs get selected immediately after the click is released. Tabs with sub-items trigger the expansion of a menu (Popover) showing its sub-items. The parent tab title remains displayed when its child is select. + description: { + story: `When there is only one click area per tab (also including tabs with sub-items), regular tabs get selected immediately after the click is released. Tabs with sub-items trigger the expansion of a menu (Popover) showing its sub-items. The parent tab title remains displayed when its child is select. <br> You need to apply the \`fd-icon-tab-bar__item--single-click\` modifier class to \`fd-icon-tab-bar__item\` element. The List component inside the Popover has an additional modifier class \`fd-icon-tab-bar__list\` to achieve the nesting (indentation) of the elements. The list menu can be borderless, with line separators (\`fd-icon-tab-bar__line-separator\`) or icon separators (\`fd-icon-tab-bar__icon-separator\`) ` + } } }; @@ -1162,7 +1180,9 @@ export const MultiClick = () => `<div class="fddocs-icon-tab-container" style="m MultiClick.storyName = 'Universal Icon Tab Bar Multi Click Area'; MultiClick.parameters = { docs: { - storyDescription: 'In case of two click areas for tabs with sub-tabs, the behaviour for regular tabs (without sub-items) remains unchanged, like described above the tabs get selected immediately. Tabs with two click areas behave differently: when the main part of the tab is clicked, it is highlighted and then selected immediately. Clicking the second area opens a menu (Popover) containing the sub-items. Once a sub-item is clicked, the main tab is highlighted as selected. ' + description: { + story: 'In case of two click areas for tabs with sub-tabs, the behaviour for regular tabs (without sub-items) remains unchanged, like described above the tabs get selected immediately. Tabs with two click areas behave differently: when the main part of the tab is clicked, it is highlighted and then selected immediately. Clicking the second area opens a menu (Popover) containing the sub-items. Once a sub-item is clicked, the main tab is highlighted as selected. ' + } } }; @@ -1302,8 +1322,10 @@ export const Badge = () => `<div class="fd-icon-tab-bar"> Badge.storyName = 'Badges'; Badge.parameters = { docs: { - storyDescription: `The Tab attention badge is applied as a visual eye-catcher to indicate a change within a Tab. <br> + description: { + story: `The Tab attention badge is applied as a visual eye-catcher to indicate a change within a Tab. <br> The badge is a span element with \`fd-icon-tab-bar__badge\` class. It can be animated by adding an additional \` fd-icon-tab-bar__badge--animated\` modifier class. In this case the badge appears for a few milliseconds and then disappears.` + } } }; @@ -1331,7 +1353,9 @@ export const RespPaddings = () => `<div class="fd-icon-tab-bar fd-icon-tab-bar-- RespPaddings.storyName = 'Responsive Paddings'; RespPaddings.parameters = { docs: { - storyDescription: 'For an Icon Tab Bar with responsive paddings that adjust based on the screen size add the `fd-icon-tab-bar--responsive-paddings` modifier class.' + description: { + story: 'For an Icon Tab Bar with responsive paddings that adjust based on the screen size add the `fd-icon-tab-bar--responsive-paddings` modifier class.' + } } }; @@ -1443,7 +1467,9 @@ export const Paddings = () => `<h4>SM (1rem) paddings</h4> Paddings.storyName = 'Sizes and Horizontal Paddings'; Paddings.parameters = { docs: { - storyDescription: 'You can set horizontal paddings by adding a modifier class and specifying the size of the paddings. Please refer to the "Paddings" section at the top of the page for the available sizes.' + description: { + story: 'You can set horizontal paddings by adding a modifier class and specifying the size of the paddings. Please refer to the "Paddings" section at the top of the page for the available sizes.' + } } }; @@ -1582,9 +1608,11 @@ export const Navigation = () => `<div class="fddocs-icon-tab-container" style="m Navigation.storyName = 'Navigation Icon Tab Bar (Shell Navigation)'; Navigation.parameters = { docs: { - storyDescription: `The Navigation Tab Bar is the main/default navigation displayed on the SAP Fiori launchpad home page. It offers the user an easy access to multiple pages per space. The background color of the Shell Navigation is connected the Home/Shell Header to properly differentiate the global shell navigation versus any application specific navigation. The Navigation Bar snaps to top and remains visible while scrolling. It is not visible in App view. <br> + description: { + story: `The Navigation Tab Bar is the main/default navigation displayed on the SAP Fiori launchpad home page. It offers the user an easy access to multiple pages per space. The background color of the Shell Navigation is connected the Home/Shell Header to properly differentiate the global shell navigation versus any application specific navigation. The Navigation Bar snaps to top and remains visible while scrolling. It is not visible in App view. <br> The implementation is based on UniversalIconTabBar with some different color parameters that are specific to Shell Bar. <br> If there are more Tabs than the screen can accommodate, the remaining Tabs move into an Overflow.` + } } }; @@ -1628,11 +1656,13 @@ export const NavigationFlat = () => `<div class="fddocs-icon-tab-container" styl NavigationFlat.storyName = 'Flat Navigation'; NavigationFlat.parameters = { docs: { - storyDescription: `The Flat Navigation offers the user an easy access to multiple pages per space. + description: { + story: `The Flat Navigation offers the user an easy access to multiple pages per space. As the ShellNavigation (Fiori 3), the Flat Navigation is the main/default navigation displayed on the SAP Fiori launchpad home page. It snaps to top and remains visible while scrolling and is not visible in App view. The Flat Navigation Concept allows putting all entities of a single space directly into the first level of the Top Level Navigation Bar for direct access. Add the \`.fd-icon-tab-bar--navigation-flat\` modifier class to \`.fd-icon-tab-bar.fd-icon-tab-bar--navigation\` to achieve the flat navigation look and feel. The items that have separators need to receive the \`.fd-icon-tab-bar__item--with-separator\` modifier class to \`.fd-icon-tab-bar__item\` class. This will append a vertical separator line on the right hand side of the item with an 1rem offset. ` + } } }; @@ -1902,7 +1932,8 @@ export const DragAndDrop = () => `<div class="fddocs-icon-tab-container" style=" DragAndDrop.storyName = 'Tabs drag and drop'; DragAndDrop.parameters = { docs: { - storyDescription: `You can allow users to rearrange the tab order. + description: { + story: `You can allow users to rearrange the tab order. If this feature is enabled, users can drag and drop tabs to reorder them, either directly on the tab bar or inside the overflow menu. It is also possible to drag and drop tabs from the tab bar to the overflow menu and vice versa. There're 4 classes for drag and drop: @@ -1913,5 +1944,6 @@ DragAndDrop.parameters = { \`fd-icon-tab-bar__item--dnd-separator-end\` - same as above. Being applied after the tab, to which is applied ` + } } }; diff --git a/stories/icon/BusinessSuiteInAppSymbols/iconBusinessSuite.stories.js b/stories/icon/BusinessSuiteInAppSymbols/iconBusinessSuite.stories.js index ce7537f171..08e22e2c4b 100644 --- a/stories/icon/BusinessSuiteInAppSymbols/iconBusinessSuite.stories.js +++ b/stories/icon/BusinessSuiteInAppSymbols/iconBusinessSuite.stories.js @@ -31,7 +31,9 @@ export const Sizes = () => ` Sizes.parameters = { docs: { iframeHeight: 250, - storyDescription: 'Icons don’t have predefined sizes because they align with the font size value. They are vector graphics, meaning they can be easily resized without compromising their appearance. And because icons are essentially a font, there are unlimited sizes.' + description: { + story: 'Icons don’t have predefined sizes because they align with the font size value. They are vector graphics, meaning they can be easily resized without compromising their appearance. And because icons are essentially a font, there are unlimited sizes.' + } } }; @@ -81,7 +83,9 @@ export const BusinessSuiteIcons = () => { BusinessSuiteIcons.parameters = { docs: { iframeHeight: 200, - storyDescription: 'For icons of <b>BusinessSuiteInAppSymbols</b> font-family add the `sap-icon-businessSuiteInAppSymbols--{icon-name}` modifier class identifying the icon style to the `sap-icon-businessSuiteInAppSymbols` class. For example, for a <i>heart</i> icon, add `sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart` with the desired font size value.' + description: { + story: 'For icons of <b>BusinessSuiteInAppSymbols</b> font-family add the `sap-icon-businessSuiteInAppSymbols--{icon-name}` modifier class identifying the icon style to the `sap-icon-businessSuiteInAppSymbols` class. For example, for a <i>heart</i> icon, add `sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart` with the desired font size value.' + } }, skipRTLSnapshot: true }; diff --git a/stories/icon/SAPIcons/icon.stories.js b/stories/icon/SAPIcons/icon.stories.js index ab65c2c8a0..a48e9acc0c 100644 --- a/stories/icon/SAPIcons/icon.stories.js +++ b/stories/icon/SAPIcons/icon.stories.js @@ -31,7 +31,9 @@ export const Sizes = () => ` Sizes.parameters = { docs: { iframeHeight: 250, - storyDescription: 'Icons don’t have predefined sizes because they align with the font size value. They are vector graphics, meaning they can be easily resized without compromising their appearance. And because icons are essentially a font, there are unlimited sizes.' + description: { + story: 'Icons don’t have predefined sizes because they align with the font size value. They are vector graphics, meaning they can be easily resized without compromising their appearance. And because icons are essentially a font, there are unlimited sizes.' + } } }; @@ -81,7 +83,9 @@ export const AvailableIcons = () => { AvailableIcons.parameters = { docs: { iframeHeight: 200, - storyDescription: 'There are several icons available. To display any one of these icons, add the `sap-icon--{icon-name}` modifier class identifying the icon style to the `sap-icon` class. For example, for a search icon, add `sap-icon sap-icon--search` with the desired font size value.' + description: { + story: 'There are several icons available. To display any one of these icons, add the `sap-icon--{icon-name}` modifier class identifying the icon style to the `sap-icon` class. For example, for a search icon, add `sap-icon sap-icon--search` with the desired font size value.' + } }, skipRTLSnapshot: true }; diff --git a/stories/icon/TNTIcons/iconTnt.stories.js b/stories/icon/TNTIcons/iconTnt.stories.js index 3fc579556e..bedee4f778 100644 --- a/stories/icon/TNTIcons/iconTnt.stories.js +++ b/stories/icon/TNTIcons/iconTnt.stories.js @@ -31,7 +31,9 @@ export const Sizes = () => ` Sizes.parameters = { docs: { iframeHeight: 250, - storyDescription: 'Icons don’t have predefined sizes because they align with the font size value. They are vector graphics, meaning they can be easily resized without compromising their appearance. And because icons are essentially a font, there are unlimited sizes.' + description: { + story: 'Icons don’t have predefined sizes because they align with the font size value. They are vector graphics, meaning they can be easily resized without compromising their appearance. And because icons are essentially a font, there are unlimited sizes.' + } } }; @@ -81,7 +83,9 @@ export const TntIcons = () => { TntIcons.parameters = { docs: { iframeHeight: 200, - storyDescription: 'For icons of <b>SAP-icons-TNT</b> font-family add the `sap-icon-TNT--{icon-name}` modifier class identifying the icon style to the `sap-icon-TNT` class. For example, for an <i>exceptions</i> icon, add `sap-icon-TNT sap-icon-TNT--exceptions` with the desired font size value.' + description: { + story: 'For icons of <b>SAP-icons-TNT</b> font-family add the `sap-icon-TNT--{icon-name}` modifier class identifying the icon style to the `sap-icon-TNT` class. For example, for an <i>exceptions</i> icon, add `sap-icon-TNT sap-icon-TNT--exceptions` with the desired font size value.' + } }, skipRTLSnapshot: true }; diff --git a/stories/illustrated-message/illustrated-message.stories.js b/stories/illustrated-message/illustrated-message.stories.js index 28fa5cc18e..7c44cd8042 100644 --- a/stories/illustrated-message/illustrated-message.stories.js +++ b/stories/illustrated-message/illustrated-message.stories.js @@ -133,8 +133,10 @@ export const Dialog = () => `<div style="width: 100%; display: flex; justify-con Dialog.parameters = { docs: { iframeHeight: 330, - storyDescription: `Add \`.fd-illustrated-message--dialog\` class + description: { + story: `Add \`.fd-illustrated-message--dialog\` class ` + } } }; @@ -166,7 +168,9 @@ export const Spot = () => `<div style="width: 100%; display: flex; justify-conte Spot.parameters = { docs: { iframeHeight: 330, - storyDescription: `Add \`.fd-illustrated-message--spot\` class + description: { + story: `Add \`.fd-illustrated-message--spot\` class ` + } } }; diff --git a/stories/input-group/input-group.stories.js b/stories/input-group/input-group.stories.js index 7796a20aec..b63a93cd4d 100644 --- a/stories/input-group/input-group.stories.js +++ b/stories/input-group/input-group.stories.js @@ -28,7 +28,9 @@ export const Sizes = () => ` Sizes.parameters = { docs: { iframeHeight: 160, - storyDescription: 'The Input Group supports **compact** mode (by virtue of the `--compact` modifier on child components).' + description: { + story: 'The Input Group supports **compact** mode (by virtue of the `--compact` modifier on child components).' + } } }; @@ -70,7 +72,9 @@ export const TextAddOn = () => ` TextAddOn.parameters = { docs: { iframeHeight: 400, - storyDescription: 'The Input Group with text add-on component is typically used to specify the type of the data being entered, such as currency or unit of measure. This add-on can be placed at the left or right (or both) of the input element.' + description: { + story: 'The Input Group with text add-on component is typically used to specify the type of the data being entered, such as currency or unit of measure. This add-on can be placed at the left or right (or both) of the input element.' + } } }; @@ -109,7 +113,9 @@ export const InputWithIcons = () => ` InputWithIcons.parameters = { docs: { iframeHeight: 300, - storyDescription: 'The Input with add-on supports icons.' + description: { + story: 'The Input with add-on supports icons.' + } } }; @@ -166,7 +172,9 @@ export const InputWithActions = () => ` InputWithActions.parameters = { docs: { iframeHeight: 300, - storyDescription: 'The Input with add-on supports actions. Actions can be shown with a text label or icon.' + description: { + story: 'The Input with add-on supports actions. Actions can be shown with a text label or icon.' + } } }; @@ -285,7 +293,9 @@ export const Focus = () => ` Focus.parameters = { docs: { iframeHeight: 200, - storyDescription: 'The Input Group supports <b>focus</b> state, it can be added by putting `.is-focus` class to component.' + description: { + story: 'The Input Group supports <b>focus</b> state, it can be added by putting `.is-focus` class to component.' + } } }; diff --git a/stories/layout-grid/layout-grid.stories.js b/stories/layout-grid/layout-grid.stories.js index 2f7ccab19d..5ab2f14448 100644 --- a/stories/layout-grid/layout-grid.stories.js +++ b/stories/layout-grid/layout-grid.stories.js @@ -143,7 +143,9 @@ export const DifferentSizeColumns = () => `<div class='fd-container'> DifferentSizeColumns.parameters = { docs: { iframeHeight: 1150, - storyDescription: 'To define the size of that column use the `fd-col--x` modifier, where `x` can go from 1-12' + description: { + story: 'To define the size of that column use the `fd-col--x` modifier, where `x` can go from 1-12' + } } }; @@ -171,7 +173,9 @@ export const Responsiveness = () => `<div class='fd-container'> Responsiveness.parameters = { docs: { iframeHeight: 320, - storyDescription: 'You can define different column sizes for each inflection point. In this example for extra large the cells are taking 4 columns out of 12 `fd-col-xl--4`; 4 columns out of 12 in large `fd-col-lg--4`; 6 columns out of 12 in medium `fd-col-md--6`, and 12 out of 12 in small `fd-col--12`' + description: { + story: 'You can define different column sizes for each inflection point. In this example for extra large the cells are taking 4 columns out of 12 `fd-col-xl--4`; 4 columns out of 12 in large `fd-col-lg--4`; 6 columns out of 12 in medium `fd-col-md--6`, and 12 out of 12 in small `fd-col--12`' + } } }; @@ -225,7 +229,9 @@ export const Nesting = () => `<div class='fd-container'> Nesting.parameters = { docs: { iframeHeight: 150, - storyDescription: 'Add an extra `fd-row` class in between inner rows when using nesting. It will add a gutter in between rows.' + description: { + story: 'Add an extra `fd-row` class in between inner rows when using nesting. It will add a gutter in between rows.' + } } }; @@ -287,7 +293,9 @@ export const Offset = () => `<div class='fd-container'> Offset.parameters = { docs: { iframeHeight: 450, - storyDescription: 'To add an offset to the left of the column for all sizes use the `--offset-x` modifier. X will be the size of your choice. If the column after the offset col no longer fits in parent container it will switch to the next line. To add an offset to the left of the column for certain sizes and above use the `--offset-x--size` modifier, where size is either s,m,l,xl. To make the offset after and not before use the `--offset-after-x--size` modifier.' + description: { + story: 'To add an offset to the left of the column for all sizes use the `--offset-x` modifier. X will be the size of your choice. If the column after the offset col no longer fits in parent container it will switch to the next line. To add an offset to the left of the column for certain sizes and above use the `--offset-x--size` modifier, where size is either s,m,l,xl. To make the offset after and not before use the `--offset-after-x--size` modifier.' + } } }; @@ -339,7 +347,9 @@ export const NoHorizontalGap = () => `<div class='fd-container fd-container--no- NoHorizontalGap.parameters = { docs: { iframeHeight: 300, - storyDescription: 'To remove gutters between columns apply the `fd-container--no-horizontal-gap` modifier to the container.' + description: { + story: 'To remove gutters between columns apply the `fd-container--no-horizontal-gap` modifier to the container.' + } } }; @@ -391,7 +401,9 @@ export const NoVerticalGap = () => `<div class='fd-container fd-container--no-ve NoVerticalGap.parameters = { docs: { iframeHeight: 300, - storyDescription: 'To remove gutters between rows apply the `fd-container--no-vertical-gap` modifier to the container.' + description: { + story: 'To remove gutters between rows apply the `fd-container--no-vertical-gap` modifier to the container.' + } } }; @@ -443,7 +455,9 @@ export const NoGap = () => `<div class='fd-container fd-container--no-horizontal NoGap.parameters = { docs: { iframeHeight: 300, - storyDescription: 'To remove gutters between rows and columns apply both the `fd-container--no-vertical-gap` and `fd-container--no-horizontal-gap` modifiers to the container.' + description: { + story: 'To remove gutters between rows and columns apply both the `fd-container--no-vertical-gap` and `fd-container--no-horizontal-gap` modifiers to the container.' + } } }; @@ -473,7 +487,9 @@ export const AutoAdjusting = () => `<div class='fd-container'> AutoAdjusting.parameters = { docs: { iframeHeight: 300, - storyDescription: 'To make the column auto adjust and occupy the remaining space of the row use the `--full` modifier. There is a minimum width of 1/12 columns' + description: { + story: 'To make the column auto adjust and occupy the remaining space of the row use the `--full` modifier. There is a minimum width of 1/12 columns' + } } }; diff --git a/stories/link/link.stories.js b/stories/link/link.stories.js index 0dbb8fb956..9780327492 100644 --- a/stories/link/link.stories.js +++ b/stories/link/link.stories.js @@ -53,7 +53,8 @@ Primary.storyName = 'Types'; Primary.parameters = { docs: { iframeHeight: 300, - storyDescription: `There are different types of links for various use cases. + description: { + story: `There are different types of links for various use cases. | Types | Modifier class | Use to... | | ----:| :--------------- | :--------------| @@ -70,5 +71,6 @@ You can display a link with an icon placed on either side of the link text. | Left Arrow | \`sap-icon--slim-arrow-left sap-icon--s\` | | Right Arrow | \`sap-icon--slim-arrow-right sap-icon--s\` | ` + } } }; diff --git a/stories/list-grid/list-grid.stories.js b/stories/list-grid/list-grid.stories.js index 0224b5d5d0..a7137003cb 100644 --- a/stories/list-grid/list-grid.stories.js +++ b/stories/list-grid/list-grid.stories.js @@ -256,8 +256,10 @@ NoneMode.storyName = 'None mode'; NoneMode.parameters = { docs: { - storyDescription: + description: { + story: 'Items cannot be selected but can still use "navigation", which allows click handling on specific items.' + } } }; @@ -420,10 +422,12 @@ SingleSelectMasterMode.storyName = 'Single select mode'; SingleSelectMasterMode.parameters = { docs: { - storyDescription: ` + description: { + story: ` One item in the grid list can be selected. Need click on an item to select it. To turn on the Single select mode, add the \`fd-grid-list--mode-single-select\` modifier class to the main element. ` + } } }; @@ -588,10 +592,12 @@ SingleSelectLeftMode.storyName = 'Single select left mode'; SingleSelectLeftMode.parameters = { docs: { - storyDescription: ` + description: { + story: ` One item in the grid list can be selected. For this, the grid list provides radio buttons on the left side of each item toolbar. To turn on the Single select left mode, add the \`fd-grid-list--mode-single-select-left\` modifier class to the main element. ` + } } }; @@ -757,10 +763,12 @@ SingleSelectRightMode.storyName = 'Single select right mode'; SingleSelectRightMode.parameters = { docs: { - storyDescription: ` + description: { + story: ` One item in the grid list can be selected. For this, the grid list provides radio buttons on the left side of each item toolbar. To turn on the Single select right mode, add the \`fd-grid-list--mode-single-select-right\` modifier class to the main element. ` + } } }; @@ -929,10 +937,12 @@ MultiSelectMode.storyName = 'Multi select mode'; MultiSelectMode.parameters = { docs: { - storyDescription: ` + description: { + story: ` Users can select one or more items. For this, the grid list provides checkboxes on the left side of each item toolbar. To turn on the Multi select mode, add the \`fd-grid-list--mode-multi-select\` modifier class to the main element. ` + } } }; @@ -1100,10 +1110,12 @@ DeleteMode.storyName = 'Delete mode'; DeleteMode.parameters = { docs: { - storyDescription: ` + description: { + story: ` This places a Delete button on the right side of an item toolbar. To turn on the Delete mode, add the \`fd-grid-list--mode-delete\` modifier class to the main element. ` + } } }; @@ -1257,10 +1269,12 @@ export const Group = () => `<div style="min-height: 600px;"> Group.parameters = { docs: { - storyDescription: ` + description: { + story: ` If grouped, a group header is displayed above all items which belong to the corresponding group. The group header is not interactive. To create grid list group headers use \`fd-grid-list__group-header\` class. ` + } } }; @@ -1449,9 +1463,11 @@ export const States = () => `<div style="min-height: 600px;"> States.parameters = { docs: { - storyDescription: ` + description: { + story: ` To apply state, add the corresponding class \`.fd-grid-list__item--(unread|error|locked|draft)\` to the \`.fd-grid-list__item\`. ` + } } }; @@ -1606,10 +1622,12 @@ export const Highlight = () => `<div style="min-height: 350px;"> Highlight.parameters = { docs: { - storyDescription: ` + description: { + story: ` A highlight indicator is shown in front of the item it needs to show that an item needs attention. To add highlight indicator, add a span element with \`.fd-grid-list__highlight fd-grid-list__highlight--(success|warning|error|neutral)\` class, before the item body element ` + } } }; @@ -1764,10 +1782,12 @@ export const FilterInfobar = () => `<div style="min-height: 350px;"> FilterInfobar.parameters = { docs: { - storyDescription: ` + description: { + story: ` The filter information panel displays the selected filters. To show filter information panel, follow the current example. ` + } } }; @@ -1921,10 +1941,12 @@ More.storyName = '"More" Button'; More.parameters = { docs: { - storyDescription: ` + description: { + story: ` The More button loads more items to the front end if not all items have yet been loaded. To show "More" button, follow the current example. ` + } } }; @@ -2075,9 +2097,11 @@ export const Footer = () => `<div style="min-height: 300px;"> Footer.parameters = { docs: { - storyDescription: ` + description: { + story: ` The footer can be used to display additional static information relating to the content. To create a grid list footer, follow the current example. ` + } } }; diff --git a/stories/list/byline/byline-list.stories.js b/stories/list/byline/byline-list.stories.js index 7ce583ad88..67859a4b03 100644 --- a/stories/list/byline/byline-list.stories.js +++ b/stories/list/byline/byline-list.stories.js @@ -122,8 +122,10 @@ Standard.storyName = 'Default'; Standard.parameters = { docs: { iframeHeight: 785, - storyDescription: `The default byline list dislays list items in the standard size, which is ideal for mobile. To display the byline list in compact mode (for desktop), add the \`fd-list--compact\` modifier class to the main element. + description: { + story: `The default byline list dislays list items in the standard size, which is ideal for mobile. To display the byline list in compact mode (for desktop), add the \`fd-list--compact\` modifier class to the main element. ` + } } }; @@ -158,8 +160,10 @@ export const Attachment = () => `<h4>Standard size</h4> Attachment.parameters = { docs: { iframeHeight: 785, - storyDescription: `The Attachment List shares the same specification as the Standard List with Byline. The only difference is that if two text items are set within the Byline row, the text aligned to the right is always standard text (i.e. not semantic text) + description: { + story: `The Attachment List shares the same specification as the Standard List with Byline. The only difference is that if two text items are set within the Byline row, the text aligned to the right is always standard text (i.e. not semantic text) ` + } } }; @@ -208,9 +212,11 @@ export const Navigation = () => `<ul class="fd-list fd-list--byline fd-list--nav Navigation.parameters = { docs: { iframeHeight: 355, - storyDescription: ` + description: { + story: ` Byline list items can contain navigation links. To add navigation, add the \`fd-list--navigation\` modifier class to the list and the \`fd-list__item--link\` modifier class to the list elements that contain links. All items should be navigable. ` + } } }; @@ -234,8 +240,10 @@ export const Buttons = () => ` Buttons.parameters = { docs: { iframeHeight: 165, - storyDescription: ` + description: { + story: ` ` + } } }; @@ -261,8 +269,10 @@ export const Interractive = () => ` Interractive.parameters = { docs: { iframeHeight: 300, - storyDescription: `The \`fd-list__item--interractive\` will force list item to handle hover and active states. + description: { + story: `The \`fd-list__item--interractive\` will force list item to handle hover and active states. Usage of this modifier is not needed on \`Selection\`, \`Navigation\` and \`Action\` modes.` + } } }; @@ -303,9 +313,11 @@ NavigationIndicator.storyName = 'Navigation indicators'; NavigationIndicator.parameters = { docs: { iframeHeight: 275, - storyDescription: ` + description: { + story: ` If only some of the list items are navigable, you should indicate them with an arrow icon. To display navigation indicators, add the \`fd-list--navigation-indication\` modifier class to the unordered list element. Do not show indicators if all items are navigable. In this case, use a byline list with navigation (in the example above). ` + } } }; @@ -350,8 +362,10 @@ style="background-image: url('assets/images/backgrounds/Godafoss_waterfall_in_no Borderless.parameters = { docs: { iframeHeight: 305, - storyDescription: `To display a borderless byline list, add the \`fd-list--no-border\` modifier class to the main element. + description: { + story: `To display a borderless byline list, add the \`fd-list--no-border\` modifier class to the main element. ` + } } }; @@ -439,9 +453,11 @@ style="background-image: url('assets/images/backgrounds/Godafoss_waterfall_in_no Selection.parameters = { docs: { iframeHeight: 625, - storyDescription: ` + description: { + story: ` Byline list items can display checkboxes that users can select from. To display byline list items with selection, add the \`fd-list--selection\` modifier class to the main element. To create checkbox form items, add the \`fd-list__form-item\` class within each list element. ` + } } }; export const SelectionAndNavigation = () => `<h4 id="Ki81L1">Standard Size</h4> @@ -538,13 +554,15 @@ SelectionAndNavigation.storyName = 'Selection with navigation'; SelectionAndNavigation.parameters = { docs: { iframeHeight: 625, - storyDescription: `To display byline list items with selection and navigation, add these following modifier classes to the main element: + description: { + story: `To display byline list items with selection and navigation, add these following modifier classes to the main element: - \`fd-list--byline\` - \`fd-list--selection\` - \`fd-list--navigation\` - \`fd-list--navigation-indicator\` ` + } } }; @@ -636,11 +654,13 @@ LongText.storyName = 'List with long Title and Byline'; LongText.parameters = { docs: { iframeHeight: 625, - storyDescription: `By default, To allow the title and byline text to wrap, add these following modifier classes to the the title and byline respectively: + description: { + story: `By default, To allow the title and byline text to wrap, add these following modifier classes to the the title and byline respectively: - \`fd-list__title--wrap\` - \`fd-list__byline--wrap\` When more than 100 characters for small screens or 300 characters for medium to large screens are used, a clickable "MORE" link should be displayed to reveal the entire contents of the text.` + } } }; diff --git a/stories/list/standard/standard-list.stories.js b/stories/list/standard/standard-list.stories.js index 32d814b7e0..ed76c7beb9 100644 --- a/stories/list/standard/standard-list.stories.js +++ b/stories/list/standard/standard-list.stories.js @@ -61,8 +61,10 @@ Standard.storyName = 'Default'; Standard.parameters = { docs: { iframeHeight: 445, - storyDescription: `The default standard list dislays list items in the standard size, which is ideal for mobile. To display the standard list in compact mode (for desktop), add the \`fd-list--compact\` modifier class to the main element. + description: { + story: `The default standard list dislays list items in the standard size, which is ideal for mobile. To display the standard list in compact mode (for desktop), add the \`fd-list--compact\` modifier class to the main element. ` + } } }; @@ -86,8 +88,10 @@ export const Unread = () => `<h4>Unread Options</h4> Unread.parameters = { docs: { iframeHeight: 445, - storyDescription: `The \`fd-list__item--unread\` modifier will change the font weight to bold for easier legibility. + description: { + story: `The \`fd-list__item--unread\` modifier will change the font weight to bold for easier legibility. ` + } } }; @@ -114,10 +118,12 @@ export const Interactive = () => `<h4>Interactive Items</h4> Interactive.parameters = { docs: { iframeHeight: 445, - storyDescription: ` + description: { + story: ` The \`fd-list__item--interractive\` will force list item to handle hover and active states. Usage of this modifier is not needed on \`Selection\`, \`Navigation\` and \`Action\` modes. ` + } } }; @@ -145,9 +151,11 @@ export const Navigation = () => `<ul class="fd-list fd-list--navigation" role="l Navigation.parameters = { docs: { iframeHeight: 165, - storyDescription: ` + description: { + story: ` Standard list items can contain navigation links. To add navigation, add the \`fd-list—navigation\` modifier class to the list and the \`fd-list__item--link\` modifier class to the list elements that contain links. All items should be navigable. ` + } } }; @@ -179,8 +187,10 @@ export const Buttons = () => `<ul class="fd-list" role="list"> Buttons.parameters = { docs: { iframeHeight: 165, - storyDescription: ` + description: { + story: ` ` + } } }; @@ -218,9 +228,11 @@ NavigationIndicator.storyName = 'Navigation indicators'; NavigationIndicator.parameters = { docs: { iframeHeight: 252, - storyDescription: ` + description: { + story: ` If only a subset of the list items is navigable you should indicate them with an arrow icon. To display navigation indicators, add the \`fd-list--navigation-indication\` modifier class to the unordered list element. Do not show indicators if all items are navigable. In this case, use a standard list with navigation (in the example above). ` + } } }; @@ -295,9 +307,11 @@ ActionList.storyName = 'Action'; ActionList.parameters = { docs: { iframeHeight: 600, - storyDescription: ` + description: { + story: ` Standard list items can display actions that users can choose from. To display actions, add the \`fd-list--action\` modifier class to the list elements. ` + } } }; @@ -326,8 +340,10 @@ SecondaryData.storyName = 'Secondary data'; SecondaryData.parameters = { docs: { iframeHeight: 210, - storyDescription: `To display secondary data in standard list items, add the \`fd-list__secondary\` class within the list elements. + description: { + story: `To display secondary data in standard list items, add the \`fd-list__secondary\` class within the list elements. ` + } } }; @@ -356,8 +372,10 @@ export const ItemCounter = () => `<ul class="fd-list" role="list"> ItemCounter.parameters = { docs: { iframeHeight: 210, - storyDescription: `The item counter is vertically aligned within the list item, to the right. The maximum number of digits is 5. In case of more digits, the formatting and the transformation is left to the applications. It's recommended to avoid combining item counter to other list variations and status texts. + description: { + story: `The item counter is vertically aligned within the list item, to the right. The maximum number of digits is 5. In case of more digits, the formatting and the transformation is left to the applications. It's recommended to avoid combining item counter to other list variations and status texts. ` + } } }; @@ -386,8 +404,10 @@ Icons.storyName = 'Icon'; Icons.parameters = { docs: { iframeHeight: 210, - storyDescription: `To display an icon inside standard list items, add the \`fd-list__icon\` class along with the icon within the list elements. For example, \`fd-list__icon sap-icon—lightbulb\`. + description: { + story: `To display an icon inside standard list items, add the \`fd-list__icon\` class along with the icon within the list elements. For example, \`fd-list__icon sap-icon—lightbulb\`. ` + } } }; @@ -424,8 +444,10 @@ Groups.storyName = 'Group'; Groups.parameters = { docs: { iframeHeight: 385, - storyDescription: `Standard list items can be displayed with headers, separating the items into groups. To add group headers, add the \`fd-list__group-header\` class to the list elements. + description: { + story: `Standard list items can be displayed with headers, separating the items into groups. To add group headers, add the \`fd-list__group-header\` class to the list elements. ` + } } }; @@ -451,8 +473,10 @@ export const Footer = () => `<ul class="fd-list" role="list"> Footer.parameters = { docs: { iframeHeight: 240, - storyDescription: `The standard list can display a footer by adding a span element with an \`fd-list__footer\` class after the unordered list element. + description: { + story: `The standard list can display a footer by adding a span element with an \`fd-list__footer\` class after the unordered list element. ` + } } }; @@ -475,8 +499,10 @@ export const Borderless = () => `<ul class="fd-list fd-list--no-border" role="li Borderless.parameters = { docs: { iframeHeight: 210, - storyDescription: `To display a borderless standard list, add the \`fd-list--no-border\` modifier class to the main element. + description: { + story: `To display a borderless standard list, add the \`fd-list--no-border\` modifier class to the main element. ` + } } }; @@ -534,8 +560,10 @@ export const Selection = () => `<h4 id="XezW11">Standard Size</h4> Selection.parameters = { docs: { iframeHeight: 370, - storyDescription: `Standard list items can display checkboxes that users can select from. To display standard list items with selection, add the \`fd-list--selection\` modifier class to the main element. To create checkbox form items, add the \`fd-list__form-item\` class within each list element. + description: { + story: `Standard list items can display checkboxes that users can select from. To display standard list items with selection, add the \`fd-list--selection\` modifier class to the main element. To create checkbox form items, add the \`fd-list__form-item\` class within each list element. ` + } } }; @@ -566,8 +594,10 @@ export const Inactive = () => `<ul class="fd-list fd-list--navigation" role="lis Inactive.parameters = { docs: { iframeHeight: 370, - storyDescription: `Some list item can be made inactive, to make it non-clickable. + description: { + story: `Some list item can be made inactive, to make it non-clickable. ` + } } }; @@ -616,7 +646,9 @@ Scroll.storyName = 'Infinite scroll'; Scroll.parameters = { docs: { iframeHeight: 380, - storyDescription: `If height for list is fixed and there are more list otem to show, then we should be able to scroll to next list items. + description: { + story: `If height for list is fixed and there are more list otem to show, then we should be able to scroll to next list items. ` + } } }; diff --git a/stories/margins/margins.stories.js b/stories/margins/margins.stories.js index 3261c00030..2dcde30484 100644 --- a/stories/margins/margins.stories.js +++ b/stories/margins/margins.stories.js @@ -30,7 +30,8 @@ export const AllRoundMargin = () => `<div class="docs-column-flex docs-column-fl AllRoundMargin.storyName = 'All-Round Margin'; AllRoundMargin.parameters = { docs: { - storyDescription: `All-round margin appears on all sides of the container they are applied to. Use \`fd-margin\` + description: { + story: `All-round margin appears on all sides of the container they are applied to. Use \`fd-margin\` class with any of the following modifiers: | Element | Modifier class | Margin applied | @@ -40,6 +41,7 @@ AllRoundMargin.parameters = { | Medium | \`fd-margin--md\` | 2rem | | Large | \`fd-margin--lg\` | 3rem | ` + } } }; @@ -64,7 +66,8 @@ export const SingleSidedMarginTop = () => `<div class="docs-column-flex docs-col SingleSidedMarginTop.storyName = 'Single-Sided Margin Top'; SingleSidedMarginTop.parameters = { docs: { - storyDescription: `Single sided margins appear on only one of the sides of the element: + description: { + story: `Single sided margins appear on only one of the sides of the element: - top - displayed on top of the element - end - displayed on the right side and in right-to-left mode on the left side of the element @@ -74,6 +77,7 @@ SingleSidedMarginTop.parameters = { Use \`fd-margin-top\` or \`fd-margin-end\` or \`fd-margin-bottom\` or \`fd-margin-begin\` class with any of the size modifiers as mentioned above. ` + } } }; @@ -158,12 +162,14 @@ export const DoubleSidedMarginTopBottom = () => `<div class="docs-column-flex do DoubleSidedMarginTopBottom.storyName = 'Double-Sided Margin Top-Bottom'; DoubleSidedMarginTopBottom.parameters = { docs: { - storyDescription: `Double sided margins appear on two opposite sides of the element. + description: { + story: `Double sided margins appear on two opposite sides of the element. - top-bottom - displayed on top and bottom of the element - begin-end - displayed on left and right side of the element Use \`fd-margin-top-bottom\` or \`fd-margin-begin-end\` class with any of the size modifiers as mentioned above.` + } } }; @@ -211,12 +217,14 @@ export const NoMargin = () => `<div class="docs-column-flex docs-column-flex--al `; NoMargin.parameters = { docs: { - storyDescription: `No margin classes remove existing container margins. Use \`fd-margin--none\` or \`fd-margin-top--none\` + description: { + story: `No margin classes remove existing container margins. Use \`fd-margin--none\` or \`fd-margin-top--none\` or \`fd-margin-end--none\` or \`fd-margin-bottom--none\` or \`fd-margin-begin--none\` modifier classes to remove existing margin. Place the no margin classes last to make sure they will be applied. In the case of \`fd-margin-begin--none\` and \`fd-margin-end--none\`, \`!important\` is not applied since we want the user-specified margins(if any) to be reapplied in the RTL mode. Please note that for RTL to work correctly, you must add \`[dir="rtl"]\` style on the class where these modifiers will be applied.` + } } }; @@ -240,7 +248,8 @@ export const ResponsiveMargin = () => `<div class="docs-column-flex docs-column- `; ResponsiveMargin.parameters = { docs: { - storyDescription: `The responsive margins class adds a margin around an element based on the width of the container the element is in. Use \`fd-margin-responsive\` + description: { + story: `The responsive margins class adds a margin around an element based on the width of the container the element is in. Use \`fd-margin-responsive\` class with any of the following modifiers: | Element | Modifier class | @@ -250,6 +259,7 @@ ResponsiveMargin.parameters = { | Large | \`fd-margin-responsive--lg\` | | Extra-large | \`fd-margin-responsive--xl\` | ` + } } }; @@ -280,7 +290,9 @@ export const DoubleSidedNegativeMarginBeginEnd = () => `<div class="docs-column- DoubleSidedNegativeMarginBeginEnd.storyName = 'Double-Sided Negative Margin Begin-End'; DoubleSidedNegativeMarginBeginEnd.parameters = { docs: { - storyDescription: `The negative margin class adds a double sided negative margin to an element. This is useful when aligning elements with built-in paddings. + description: { + story: `The negative margin class adds a double sided negative margin to an element. This is useful when aligning elements with built-in paddings. Use \`fd-margin-negative-begin-end\` class with any of the size modifiers as mentioned above.` + } } }; diff --git a/stories/menu/menu.stories.js b/stories/menu/menu.stories.js index 07b1288665..bc768be707 100644 --- a/stories/menu/menu.stories.js +++ b/stories/menu/menu.stories.js @@ -73,7 +73,9 @@ DesktopAndTablet.storyName = 'Desktop and Tablet Modes'; DesktopAndTablet.parameters = { docs: { iframeHeight: 300, - storyDescription: 'The basic stucture of a menu. Place the menu item title in a `<span>` tag using class `fd-menu__title` and wrap it in the `fd-menu__link` and `fd-menu__item` classes as shown. Default mode is the cozy tablet mode, no class has to be added for this. Use class modifier`fd-menu--compact` on menu container level for desktop mode.' + description: { + story: 'The basic stucture of a menu. Place the menu item title in a `<span>` tag using class `fd-menu__title` and wrap it in the `fd-menu__link` and `fd-menu__item` classes as shown. Default mode is the cozy tablet mode, no class has to be added for this. Use class modifier`fd-menu--compact` on menu container level for desktop mode.' + } } }; @@ -214,7 +216,9 @@ export const MobileCozyMode = () => `<div style="width: 50%; display: inline-blo MobileCozyMode.parameters = { docs: { iframeHeight: 300, - storyDescription: 'The basic stucture of a menu in mobile where it opens as a dialog. Use class `fd-menu--mobile` on menu container level. Example shows the parent menu\'s item in active state to simulate a pressed/touched event. Submenu appears in its own fullscreen dialog in mobile devices. The device\'s back button takes one back to the parent menu fullscreen dialog.' + description: { + story: 'The basic stucture of a menu in mobile where it opens as a dialog. Use class `fd-menu--mobile` on menu container level. Example shows the parent menu\'s item in active state to simulate a pressed/touched event. Submenu appears in its own fullscreen dialog in mobile devices. The device\'s back button takes one back to the parent menu fullscreen dialog.' + } } }; @@ -255,7 +259,9 @@ SeperatedItems.storyName = 'List with separated items'; SeperatedItems.parameters = { docs: { iframeHeight: 300, - storyDescription: 'To add separators between the items, use the class `fd-menu__separator` in its own `<span>` after the `<li>` item where you want the separation.' + description: { + story: 'To add separators between the items, use the class `fd-menu__separator` in its own `<span>` after the `<li>` item where you want the separation.' + } } }; @@ -338,7 +344,8 @@ DifferentStates.storyName = 'List different states'; DifferentStates.parameters = { docs: { iframeHeight: 300, - storyDescription: ` + description: { + story: ` Simulate different states to show state behaviour between the items. - For simulating hover state, use class \`is-hover\` on the menu item. @@ -348,6 +355,7 @@ Simulate different states to show state behaviour between the items. - For simulating disabled state, use class \`is-disabled\` on the menu item. To remove default box shadow from menu containers use \`fd-menu__list--no-shadow\` or \`fd-menu__sublist--no-shadow\`.` + } } }; @@ -390,12 +398,14 @@ MenuIcon.storyName = 'List with Icon'; MenuIcon.parameters = { docs: { iframeHeight: 220, - storyDescription: ` + description: { + story: ` To create an addon before or after \`fd-menu__title\` element, use elements with folowing classes inside \`fd-menu__link\`: - \`fd-menu__addon-before\` - styles addon befotre \`fd-menu__title\` - \`fd-menu__addon-after\` - styles addon after \`fd-menu__title\` - \`fd-menu__shortcut\` - styles shortcut placed after \`fd-menu__title\` According to Fiori3 design shortcuts should be on desktop devices.` + } } }; @@ -459,7 +469,8 @@ export const WithSubmenu = () => `<nav class="fd-menu"> WithSubmenu.parameters = { docs: { iframeHeight: 400, - storyDescription: ` + description: { + story: ` Menu with an additional submenu that can be used for items that can be further grouped under a level but not necessarily visible to user always. For a submenu, do the following: @@ -468,5 +479,6 @@ For a submenu, do the following: - After the end of the \`fd-menu__link\` container, use \`fd-menu__sublist\` class in its own \`<ul>\` - Follow the same template for submenu as you would for a normal menu. The same \`fd-menu__item\` and \`fd-menu__link\` works for the subitems too. ` + } } }; diff --git a/stories/message-box/message-box.stories.js b/stories/message-box/message-box.stories.js index 449dab5ff9..ea7ef1283e 100644 --- a/stories/message-box/message-box.stories.js +++ b/stories/message-box/message-box.stories.js @@ -86,9 +86,11 @@ Structure.storyName = 'Default'; Structure.parameters = { docs: { iframeHeight: messageBoxHeight, - storyDescription: ` + description: { + story: ` The default message box displays a small dialog with a title, message text and action buttons. Use the default if the message does not fit with one of the semantic types. ` + } } }; @@ -235,7 +237,8 @@ Types.storyName = 'Semantic types'; Types.parameters = { docs: { iframeHeight: messageBoxHeight * 6.5, - storyDescription: ` + description: { + story: ` The message box can be displayed with various semantic colors and icons, indicating the type of message being relayed. Semantic type | Modifier class | Description @@ -247,6 +250,7 @@ Warning | \`fd-message-box--warning\` | Warning messages highlight potential iss Information | \`fd-message-box--information\` | Information messages provide information the user needs to acknowledge, but which does not involve a decision. The message provides information that is useful and relevant, but never critical. ` + } } }; @@ -362,7 +366,8 @@ export const Responsive = () => Responsive.parameters = { docs: { iframeHeight: messageBoxHeight * 4, - storyDescription: ` + description: { + story: ` The message box has 1rem padding all around the body, and the header and footer both inherit their padding from the **Bar** component. Responsive horizontal padding can be applied to the header, body and footer of the message box; however, the amount depends on the screen width. **To display responsive padding, add the following modifier classes to the content container:** @@ -378,5 +383,6 @@ Modifier class | rem | Screen width Enable cozy mode when message box is being displayed on mobile. To display message box in cozy mode, add the \`fd-bar--cozy\` modifier class to the header and footer (this will also apply to the buttons). It's also important to note that the content container should always take the full height and width of mobile screens. To achieve this, add the \`fd-message-box__content--mobile\` modifier class to the content container. ` + } } }; diff --git a/stories/message-page/message-page.stories.js b/stories/message-page/message-page.stories.js index be84ac4d50..1e1c322e40 100644 --- a/stories/message-page/message-page.stories.js +++ b/stories/message-page/message-page.stories.js @@ -46,8 +46,10 @@ export const Filter = () => `<div style="height: 600px; width: 100%;"> Filter.parameters = { docs: { iframeHeight: messageBoxHeight, - storyDescription: `The filter message page is displayed when the user has set a filter and there are no results. This message then prompts the user to remove or re-evaluate the filter they set for the page. It is mandatory to use the \`.sap-icon--filter\` icon. + description: { + story: `The filter message page is displayed when the user has set a filter and there are no results. This message then prompts the user to remove or re-evaluate the filter they set for the page. It is mandatory to use the \`.sap-icon--filter\` icon. ` + } } }; @@ -70,8 +72,10 @@ export const Search = () => `<div style="height: 600px; width: 100%;"> Search.parameters = { docs: { iframeHeight: messageBoxHeight, - storyDescription: `The search message page is displayed when a user has searched for something, but there are no results for that inquiry. It is mandatory to use the \`.sap-icon--search\` icon. + description: { + story: `The search message page is displayed when a user has searched for something, but there are no results for that inquiry. It is mandatory to use the \`.sap-icon--search\` icon. ` + } } }; @@ -95,8 +99,10 @@ NoItems.storyName = 'No items'; NoItems.parameters = { docs: { iframeHeight: messageBoxHeight, - storyDescription: `Message page displays a message indicating that there are no items when the user attempts to view a page that is supposed to contain items, but they are either not available or do not exist. It is mandatory to use either the \`.sap-icon--product\` icon, or another icon that matches your use case. + description: { + story: `Message page displays a message indicating that there are no items when the user attempts to view a page that is supposed to contain items, but they are either not available or do not exist. It is mandatory to use either the \`.sap-icon--product\` icon, or another icon that matches your use case. ` + } } }; @@ -122,8 +128,10 @@ export const Error = () => `<div style="height: 600px; width: 100%;"> Error.parameters = { docs: { iframeHeight: messageBoxHeight, - storyDescription: `The error message page is displayed when the user attempts to view a page but an error has occurred, resulting in no available content. If you can, provide a link to the app start screen in the error message. It is mandatory to use the \`.sap-icon--document\` icon. + description: { + story: `The error message page is displayed when the user attempts to view a page but an error has occurred, resulting in no available content. If you can, provide a link to the app start screen in the error message. It is mandatory to use the \`.sap-icon--document\` icon. ` + } } }; @@ -171,7 +179,9 @@ Buttons.storyName = 'Formatted text and buttons'; Buttons.parameters = { docs: { iframeHeight: messageBoxHeight, - storyDescription: `The message page with formatted text and buttons is useful for when you want to add formatted text (bold, italic, underline and/or bullet points) and buttons to the action area. It's highly recommended not to add more than two buttons. + description: { + story: `The message page with formatted text and buttons is useful for when you want to add formatted text (bold, italic, underline and/or bullet points) and buttons to the action area. It's highly recommended not to add more than two buttons. ` + } } }; diff --git a/stories/message-strip/message-strip.stories.js b/stories/message-strip/message-strip.stories.js index b579907da1..3b8aea4d09 100644 --- a/stories/message-strip/message-strip.stories.js +++ b/stories/message-strip/message-strip.stories.js @@ -44,9 +44,11 @@ DefaultStrip.storyName = 'Default'; DefaultStrip.parameters = { docs: { iframeHeight: messageStripHeight, - storyDescription: ` + description: { + story: ` The default message strip can be used for general messages that don’t fit into any of the semantic type use cases. The user should be able to dismiss the message strip (in most cases), so be sure to include the close button and add the \`fd-message-strip--dismissible\` modifier class to the main element. ` + } } }; @@ -63,7 +65,9 @@ export const Information = () => `<div class="fd-message-strip fd-message-strip- Information.parameters = { docs: { iframeHeight: messageStripHeight, - storyDescription: 'The information message strip simply relays useful information to the users. To display an information message strip, add the `fd-message-strip--information` modifier class to the main element.' + description: { + story: 'The information message strip simply relays useful information to the users. To display an information message strip, add the `fd-message-strip--information` modifier class to the main element.' + } } }; @@ -80,7 +84,9 @@ export const Success = () => `<div class="fd-message-strip fd-message-strip--suc Success.parameters = { docs: { iframeHeight: messageStripHeight, - storyDescription: 'The success message strip communicates to the user that an action they’ve completed was successful. To display a success message strip, add the `fd-message-strip--success` modifier class to the main element.' + description: { + story: 'The success message strip communicates to the user that an action they’ve completed was successful. To display a success message strip, add the `fd-message-strip--success` modifier class to the main element.' + } } }; @@ -97,9 +103,11 @@ export const Warning = () => `<div class="fd-message-strip fd-message-strip--war Warning.parameters = { docs: { iframeHeight: messageStripHeight, - storyDescription: ` + description: { + story: ` The warning message strip warns the user of potential issues; however, the user can still dismiss the message and continue. To display a warning message strip, add the \`fd-message-strip--warning\` modifier class to the main element. ` + } } }; @@ -116,9 +124,11 @@ export const Error = () => `<div class="fd-message-strip fd-message-strip--error Error.parameters = { docs: { iframeHeight: messageStripHeight, - storyDescription: ` + description: { + story: ` The error message strip is triggered after the user enters data incorrectly or when a system error occurs. It should interrupt the user, blocking them from performing any final actions (such as _Submit_) until the error has been rectified. To display the error message strip, add the \`fd-message-strip--error\` modifier class to the main element. ` + } } }; @@ -174,6 +184,8 @@ NoIcons.storyName = 'No icon'; NoIcons.parameters = { docs: { iframeHeight: messageStripHeight * 4, - storyDescription: 'To display message strip without an icon, add the `fd-message-strip--no-icon` modifier class to the main element.' + description: { + story: 'To display message strip without an icon, add the `fd-message-strip--no-icon` modifier class to the main element.' + } } }; diff --git a/stories/message-toast/message-toast.stories.js b/stories/message-toast/message-toast.stories.js index 1070259b88..a7fa05f5c7 100644 --- a/stories/message-toast/message-toast.stories.js +++ b/stories/message-toast/message-toast.stories.js @@ -39,7 +39,9 @@ DefaultToast.storyName = 'Default'; DefaultToast.parameters = { docs: { iframeHeight: 210, - storyDescription: `The default message toast displays a simple popup with non-interactive text. The text wraps once it reaches the max-width of 15rem. + description: { + story: `The default message toast displays a simple popup with non-interactive text. The text wraps once it reaches the max-width of 15rem. ` + } } }; diff --git a/stories/micro-process-flow/micro-process-flow.stories.js b/stories/micro-process-flow/micro-process-flow.stories.js index 3e87011d71..f79755c5a3 100644 --- a/stories/micro-process-flow/micro-process-flow.stories.js +++ b/stories/micro-process-flow/micro-process-flow.stories.js @@ -105,8 +105,10 @@ DefaultMicroProcessFlow.storyName = 'Micro process flow with dependent steps (De DefaultMicroProcessFlow.parameters = { docs: { iframeHeight: 210, - storyDescription: ` + description: { + story: ` ` + } } }; @@ -170,8 +172,10 @@ MicroProcessFlowIndependentSteps.storyName = 'Micro process flow with independen MicroProcessFlowIndependentSteps.parameters = { docs: { iframeHeight: 210, - storyDescription: `Add the \`.fd-micro-process-flow--independent-steps\` modifier class to \`.fd-micro-process-flow\` class to remove the connector line. + description: { + story: `Add the \`.fd-micro-process-flow--independent-steps\` modifier class to \`.fd-micro-process-flow\` class to remove the connector line. ` + } } }; @@ -360,8 +364,10 @@ MicroProcessFlowCustom.storyName = 'Micro process flow with custom steps'; MicroProcessFlowCustom.parameters = { docs: { iframeHeight: 210, - storyDescription: ` + description: { + story: ` ` + } } }; @@ -541,8 +547,10 @@ export const MicroProcessFlowWithPopover = () => `<div style="height: 300px;"> MicroProcessFlowWithPopover.storyName = 'Micro process flow with popover'; MicroProcessFlowWithPopover.parameters = { docs: { - storyDescription: `Information displayed in micro flow process items can be extended by adding popovers with additional context. + description: { + story: `Information displayed in micro flow process items can be extended by adding popovers with additional context. ` + } } }; @@ -725,8 +733,10 @@ OverflowMicroProcessFlow.storyName = 'Micro process flow with overflow'; OverflowMicroProcessFlow.parameters = { docs: { iframeHeight: 210, - storyDescription: ` + description: { + story: ` ` + } } }; @@ -797,8 +807,10 @@ MicroProcessFlowWithObjects.storyName = 'Micro process flow with elements insert MicroProcessFlowWithObjects.parameters = { docs: { iframeHeight: 210, - storyDescription: ` + description: { + story: ` ` + } } }; @@ -861,10 +873,12 @@ MicroProcessFlowCustomWidth.storyName = 'Micro process flow with custom node wid MicroProcessFlowCustomWidth.parameters = { docs: { iframeHeight: 210, - storyDescription: `By default, the width of the item container is calculated based on the actual item width and the connector line. To change the width add inline style to the element with \`.fd-micro-process-flow__item\` class and provide value for the width. + description: { + story: `By default, the width of the item container is calculated based on the actual item width and the connector line. To change the width add inline style to the element with \`.fd-micro-process-flow__item\` class and provide value for the width. For example: \`<div class="fd-micro-process-flow__item" style="width: 6rem;">\` ` + } } }; diff --git a/stories/multi-combo-box/multi-combo-box.stories.js b/stories/multi-combo-box/multi-combo-box.stories.js index 91294186d2..c5b5220e49 100644 --- a/stories/multi-combo-box/multi-combo-box.stories.js +++ b/stories/multi-combo-box/multi-combo-box.stories.js @@ -291,10 +291,12 @@ export const AsFormItem = () => `<div style="height: 300px;"> AsFormItem.parameters = { docs: { - storyDescription: ` + description: { + story: ` Note that the popover body width is restricted to a max of 37.5rem to avoid readability issues in large-width popovers. Applications are free to override this in their custom styles if needed and own any readability issues arising from this override. ` + } } }; @@ -404,8 +406,10 @@ export const Grouping = () => `<div style="height: 450px;"> Grouping.parameters = { docs: { - storyDescription: + description: { + story: 'In cases where the list items need to be categorized into groups, it is possible to add headers for each category as seen below.' + } } }; @@ -492,13 +496,15 @@ export const MatchPopoverBodySize = () => `<div style="height: 300px;"> MatchPopoverBodySize.parameters = { docs: { - storyDescription: ` + description: { + story: ` The default length size of the popover body is often different from the text length. The body length can be adjusted to match the text length by adding the \`fd-popover__body--dropdown-fill\` class to the \`fd-popover__body\`. This class has been added to all the \`Multi ComboBox\` examples above. In the example you can see how the \`Multi ComboBox\` component looks without the \`fd-popover__body--dropdown-fill\` modifier. ` + } } }; @@ -613,13 +619,15 @@ export const ReadOnlyAndDisabled = () => `<div class="fd-container"> ReadOnlyAndDisabled.parameters = { docs: { - storyDescription: ` + description: { + story: ` To make the \`Multi ComboBox\` component read-only, the readonly attribute needs to be added to the \`fd-nput-group\` element. This can also be done by using the \`.is-readonly\` class or \`aria-readonly="true"\` attribute. To disable a \`Multi ComboBox\` component, the disabled attribute needs to be added to the \`fd-popover__control\` and the \`fd-input__control\` elements. The disabled state can also be achieved by adding the \`.is-disabled\` class or the \`aria-disabled="true"\` attribute. ` + } } }; @@ -706,12 +714,14 @@ export const Semantic = () => `<div style="height: 300px;"> Semantic.parameters = { docs: { - storyDescription: ` + description: { + story: ` For a complete list of states supported by the \`Multi ComboBox\` component, please see the documentation for the form or select components. The semantic mode can be used to modify the combobox component by adding one of \`is-error\` | \`is-success\` | \`is-warning\` | \`is-information\` classes into \`fd-input-group\` element. To add text in the \`body\` of the component, simply include your text in the \`fd-list__message\` under the \`ul\` element.` + } } }; @@ -828,9 +838,11 @@ export const MobileMode = () => `<div class="fd-dialog fd-dialog-docs-static fd- MobileMode.parameters = { docs: { - storyDescription: ` + description: { + story: ` For mobile devices, or tablets, Multi ComboBox component should be displayed in fullscreen mode. So instead of using popover and dropdown, it should be wrapped in \`dialog\` and \`bar\` components.` + } } }; @@ -902,8 +914,10 @@ export const Filtering = () => ` <div style="height: 250px;"> Filtering.parameters = { docs: { - storyDescription: ` + description: { + story: ` The user can filter selectable options by typing in the input. A button with the text "Show All" should be displayed, that when clicked, will clear the text in the input and show all options in the list.` + } } }; @@ -1002,7 +1016,9 @@ export const TwoColumnComboBox = () => ` <div style="height: 350px;"> TwoColumnComboBox.parameters = { docs: { - storyDescription: ` + description: { + story: ` The user can filter selectable having 2 options by typing in the input. A button with the text "Show All" should be displayed, that when clicked, will clear the text in the input and show all options in the list.` + } } }; diff --git a/stories/multi-input/multi-input.stories.js b/stories/multi-input/multi-input.stories.js index b048d1c88f..f29e64ac0e 100644 --- a/stories/multi-input/multi-input.stories.js +++ b/stories/multi-input/multi-input.stories.js @@ -325,10 +325,12 @@ export const AsFormItem = () => `<div style="height:310px"> AsFormItem.parameters = { docs: { iframeHeight: 900, - storyDescription: ` + description: { + story: ` Note that the popover body width is restricted to a max of 37.5rem to avoid readability issues in large-width popovers. Applications are free to override this in their custom styles if needed and own any readability issues arising from this override. ` + } } }; @@ -442,8 +444,10 @@ export const Grouping = () => `<div style="height:450px"> Grouping.parameters = { docs: { iframeHeight: 500, - storyDescription: + description: { + story: 'In cases where the list items need to be categorized into groups, it is possible to add headers for each category as seen below.' + } } }; @@ -534,13 +538,15 @@ export const MatchPopoverBodySize = () => `<div style="height:270px"> MatchPopoverBodySize.parameters = { docs: { iframeHeight: 300, - storyDescription: ` + description: { + story: ` The default length size of the popover body is often different from the text length. The body length can be adjusted to match the text length by adding the \`fd-popover__body--dropdown-fill\` class to the \`fd-popover__body\`. This class has been added to all the \`Multi Input\` examples above. In the example you can see how the \`Multi Input\` component looks without the \`fd-popover__body--dropdown-fill\` modifier. ` + } } }; @@ -704,13 +710,15 @@ export const ReadOnlyAndDisabled = () => `<div style="display:flex;height:250px; ReadOnlyAndDisabled.parameters = { docs: { iframeHeight: 100, - storyDescription: ` + description: { + story: ` To make the \`Multi Input\` component read-only, the readonly attribute needs to be added to the \`fd-nput-group\` element. This can also be done by using the \`.is-readonly\` class or \`aria-readonly="true"\` attribute. To disable a \`Multi Input\` component, the disabled attribute needs to be added to the \`fd-popover__control\` and the \`fd-input__control\` elements. The disabled state can also be achieved by adding the \`.is-disabled\` class or the \`aria-disabled="true"\` attribute. ` + } } }; @@ -802,12 +810,14 @@ export const Semantic = () => `<div style="height:300px"> Semantic.parameters = { docs: { iframeHeight: 350, - storyDescription: ` + description: { + story: ` For a complete list of states supported by the \`Multi Input\` component, please see the documentation for the form or select components. The semantic mode can be used to modify the combobox component by adding one of \`is-error\` | \`is-success\` | \`is-warning\` | \`is-information\` classes into \`fd-input-group\` element. To add text in the \`body\` of the component, simply include your text in the \`fd-list__message\` under the \`ul\` element.` + } } }; @@ -911,9 +921,11 @@ export const MobileMode = () => `<section role="dialog" aria-labelledby="mobileM MobileMode.parameters = { docs: { iframeHeight: 450, - storyDescription: ` + description: { + story: ` For mobile devices, or tablets, multi input component should be displayed in fullscreen mode. So instead of using popover and dropdown, it should be wrapped in \`dialog\` and \`bar\` components.` + } } }; @@ -1016,7 +1028,9 @@ export const Filtering = () => `<div style="min-height: 250px;"> Filtering.parameters = { docs: { iframeHeight: 300, - storyDescription: ` + description: { + story: ` The user can filter selectable options by typing in the input. A button with the text "Show All" should be displayed, that when clicked, will clear the text in the input and show all options in the list.` + } } }; diff --git a/stories/notification/notification.stories.js b/stories/notification/notification.stories.js index 2af8c44e39..9bd9fb7658 100644 --- a/stories/notification/notification.stories.js +++ b/stories/notification/notification.stories.js @@ -42,9 +42,11 @@ export const Primary = () => `<div class="fd-notification"> Primary.parameters = { docs: { iframeHeight: 200, - storyDescription: ` + description: { + story: ` Primary notifications display a container with an avatar, content area with text, as well as an open and close button. To display primary notifications, use the \`fd-notification\` class. ` + } } }; @@ -74,9 +76,11 @@ export const NoAvatar = () => `<div class="fd-notification"> NoAvatar.parameters = { docs: { iframeHeight: 200, - storyDescription: ` + description: { + story: ` Notifications can be displayed without an avatar by adding the \`fd-notification\\__content--no-avatar\` modifier class together with the \`fd-notification\\__content\` class. ` + } } }; @@ -113,9 +117,11 @@ export const Information = () => `<div class="fd-notification"> Information.parameters = { docs: { iframeHeight: 200, - storyDescription: ` + description: { + story: ` Notifications can also include alerts, and in this case it is informative. You can display information alerts by adding the \`fd-message-strip fd-message-strip--information fd-message-strip--dismissible\` class together with \`role="alert"\`. To add text to the message, add the \`fd-message-strip\\__text\` class before the text in paragraph tags. ` + } } }; @@ -153,9 +159,11 @@ export const Warning = () => `<div class="fd-notification"> Warning.parameters = { docs: { iframeHeight: 200, - storyDescription: ` + description: { + story: ` Notifications can display warning alerts by adding the \`fd-message-strip fd-message-strip--warning fd-message-strip--dismissible\` class together with \`role="alert"\`. ` + } } }; @@ -193,9 +201,11 @@ export const Error = () => `<div class="fd-notification"> Error.parameters = { docs: { iframeHeight: 200, - storyDescription: ` + description: { + story: ` Notifications can display error alerts by adding the \`fd-message-strip fd-message-strip--error fd-message-strip--dismissible\` class together with \`role="alert"\`. ` + } } }; @@ -432,8 +442,10 @@ export const NotificationGroup = () => `<div class="fd-notification fd-notificat NotificationGroup.parameters = { docs: { iframeHeight: 200, - storyDescription: `You can display a group of notifications in a list format, and the user can sort them from the header. To display a notification group, add the \`fd-notification fd-notification\\__group\` class. + description: { + story: `You can display a group of notifications in a list format, and the user can sort them from the header. To display a notification group, add the \`fd-notification fd-notification\\__group\` class. ` + } } }; diff --git a/stories/object-identifier/object-identifier.stories.js b/stories/object-identifier/object-identifier.stories.js index b3bdb7492e..5e08c39c74 100644 --- a/stories/object-identifier/object-identifier.stories.js +++ b/stories/object-identifier/object-identifier.stories.js @@ -35,7 +35,9 @@ export const TitleOnly = () => `<div class="fd-object-identifier"> TitleOnly.storyName = 'Title'; TitleOnly.parameters = { docs: { - storyDescription: 'To display the object identifier as a title, add the `fd-object-identifier__title` modifier class to the main element.' + description: { + story: 'To display the object identifier as a title, add the `fd-object-identifier__title` modifier class to the main element.' + } } }; @@ -47,8 +49,10 @@ export const BoldTitle = () => `<div class="fd-object-identifier"> BoldTitle.storyName = 'Bold'; BoldTitle.parameters = { docs: { - storyDescription: `To display the object identifier's title in bold, replace \`fd-object-identifier__title\` + description: { + story: `To display the object identifier's title in bold, replace \`fd-object-identifier__title\` with the \`fd-object-identifier__title--bold\` modifier class.` + } } }; @@ -73,7 +77,9 @@ export const TitleAsLink = () => ` TitleAsLink.storyName = 'Link'; TitleAsLink.parameters = { docs: { - storyDescription: 'To display the object identifier as a link, use anchor element with `.fd-link .fd-object-identifier__link` classes.' + description: { + story: 'To display the object identifier as a link, use anchor element with `.fd-link .fd-object-identifier__link` classes.' + } } }; @@ -116,7 +122,9 @@ export const TitleAndText = () => ` TitleAndText.storyName = 'Descriptive'; TitleAndText.parameters = { docs: { - storyDescription: 'To display the object identifier\'s title with descriptive text, add an additional tag below the title container and a `fd-object-identifier__text` modifier class.' + description: { + story: 'To display the object identifier\'s title with descriptive text, add an additional tag below the title container and a `fd-object-identifier__text` modifier class.' + } } }; @@ -129,6 +137,8 @@ export const MediumSize = () => ` MediumSize.parameters = { docs: { - storyDescription: 'To display the object identifier title in medium size, add the `fd-object-identifier--medium` modifier.' + description: { + story: 'To display the object identifier title in medium size, add the `fd-object-identifier--medium` modifier.' + } } }; diff --git a/stories/object-list/object-list.stories.js b/stories/object-list/object-list.stories.js index f3ddbd4bc6..8ae73d00bb 100644 --- a/stories/object-list/object-list.stories.js +++ b/stories/object-list/object-list.stories.js @@ -305,7 +305,9 @@ export const Standart = () => ` Standart.parameters = { docs: { iframeHeight: 785, - storyDescription: 'The standard object list item displays a title, introductory text, an avatar and object display components. It is recommended to display avatar in size S, therefore add the `fd-avatar--s` modifier class to the `fd-avatar` element.' + description: { + story: 'The standard object list item displays a title, introductory text, an avatar and object display components. It is recommended to display avatar in size S, therefore add the `fd-avatar--s` modifier class to the `fd-avatar` element.' + } } }; @@ -449,7 +451,9 @@ export const Navigation = () => ` Navigation.parameters = { docs: { iframeHeight: 355, - storyDescription: 'An object list can display links that the users can navigate to. To display a navigation object list, add the `fd-list--navigation-object` modifier class together with `fd-list--navigation` and the `fd-list__item--link` modifier class to the list elements that contain a link. All items should be navigable.' + description: { + story: 'An object list can display links that the users can navigate to. To display a navigation object list, add the `fd-list--navigation-object` modifier class together with `fd-list--navigation` and the `fd-list__item--link` modifier class to the list elements that contain a link. All items should be navigable.' + } } }; @@ -585,7 +589,9 @@ export const Selection = () => ` Selection.parameters = { docs: { iframeHeight: 305, - storyDescription: 'Object list items can be selectable by adding the `fd-list--selection` and `fd-list--selection-row` modifier classes to the main element.' + description: { + story: 'Object list items can be selectable by adding the `fd-list--selection` and `fd-list--selection-row` modifier classes to the main element.' + } } }; @@ -792,7 +798,9 @@ export const SelectionWithNavigation = () => ` SelectionWithNavigation.parameters = { docs: { iframeHeight: 305, - storyDescription: 'This object list is both selectable and navigable. To display selectable object list items with navigation, add the `fd-list--selection`, `fd-list--navigation` and `fd-list--navigation-object` modifier classes to the list and the `fd-list__item--link` modifier class to the list elements that contain links. All items should be navigable.' + description: { + story: 'This object list is both selectable and navigable. To display selectable object list items with navigation, add the `fd-list--selection`, `fd-list--navigation` and `fd-list--navigation-object` modifier classes to the list and the `fd-list__item--link` modifier class to the list elements that contain links. All items should be navigable.' + } } }; @@ -987,7 +995,9 @@ export const Borderless = () => ` Borderless.parameters = { docs: { iframeHeight: 305, - storyDescription: 'Object list items can be displayed without borders. To display a borderless list, add the `fd-list--no-border` modifier class to the list element.' + description: { + story: 'Object list items can be displayed without borders. To display a borderless list, add the `fd-list--no-border` modifier class to the list element.' + } } }; diff --git a/stories/object-marker/object-marker.stories.js b/stories/object-marker/object-marker.stories.js index 8646907e63..f43411f8dc 100644 --- a/stories/object-marker/object-marker.stories.js +++ b/stories/object-marker/object-marker.stories.js @@ -73,7 +73,9 @@ export const IconAndText = () => ` IconAndText.parameters = { docs: { iframeHeight: 150, - storyDescription: 'The Marker supports the Icon and Text mode of displaying the Object.' + description: { + story: 'The Marker supports the Icon and Text mode of displaying the Object.' + } } }; @@ -96,7 +98,9 @@ export const ClickableObjectMarker = () => ` ClickableObjectMarker.parameters = { docs: { iframeHeight: 150, - storyDescription: + description: { + story: 'If the object marker is used as a link, a hover effect is shown on non-touch devices. If the object marker is shown using a combination of icon and text, there is no hover effect for the icon. If Object Marker has to be clicked/tabbed by the user add the fd-object-marker--link modifier class.' + } } }; diff --git a/stories/off-screen/off-screen.stories.js b/stories/off-screen/off-screen.stories.js index 6055a01418..e867322134 100644 --- a/stories/off-screen/off-screen.stories.js +++ b/stories/off-screen/off-screen.stories.js @@ -17,7 +17,9 @@ export const Primary = () => `<div class="fd-off-screen" aria-live="polite"> Primary.parameters = { docs: { iframeHeight: 200, - storyDescription: `For aria-live to read any change in element, we need to place element but it should not be visible to user. + description: { + story: `For aria-live to read any change in element, we need to place element but it should not be visible to user. ` + } } }; diff --git a/stories/paddings/paddings.stories.js b/stories/paddings/paddings.stories.js index d61d5b3d0d..bd3cb4219a 100644 --- a/stories/paddings/paddings.stories.js +++ b/stories/paddings/paddings.stories.js @@ -18,8 +18,10 @@ export const AllRoundPadding = () => `<div class="docs-column-flex docs-column-f AllRoundPadding.storyName = 'All-Round Padding'; AllRoundPadding.parameters = { docs: { - storyDescription: `All-round padding appears on all sides of the container they are applied to. Use \`fd-padding\` + description: { + story: `All-round padding appears on all sides of the container they are applied to. Use \`fd-padding\` class to apply a padding of 1rem.` + } } }; @@ -44,7 +46,8 @@ export const DoubleSidedPadding = () => `<div class="docs-column-flex docs-colum DoubleSidedPadding.storyName = 'Double-Sided Padding'; DoubleSidedPadding.parameters = { docs: { - storyDescription: `Double sided paddings appear on two opposite sides of the element. Use \`fd-padding-begin-end\` + description: { + story: `Double sided paddings appear on two opposite sides of the element. Use \`fd-padding-begin-end\` class with any of the following modifiers: | Element | Modifier class | @@ -54,6 +57,7 @@ DoubleSidedPadding.parameters = { | Medium | \`fd-padding-begin-end--md\` | | Large | \`fd-padding-begin-end--lg\` | ` + } } }; @@ -66,8 +70,10 @@ export const NoPadding = () => `<div class="docs-column-flex docs-column-flex--a `; NoPadding.parameters = { docs: { - storyDescription: `No padding classes remove existing container paddings. Use \`fd-padding--none\` + description: { + story: `No padding classes remove existing container paddings. Use \`fd-padding--none\` modifier to remove existing padding. Place the no padding classes last to make sure they will be applied.` + } } }; @@ -91,7 +97,8 @@ export const ResponsivePadding = () => `<div class="docs-column-flex docs-column `; ResponsivePadding.parameters = { docs: { - storyDescription: `The responsive padding class adds a double sided padding inside a container based on its width. Use \`fd-padding-responsive\` + description: { + story: `The responsive padding class adds a double sided padding inside a container based on its width. Use \`fd-padding-responsive\` class with any of the following modifiers: | Element | Modifier class | @@ -101,5 +108,6 @@ ResponsivePadding.parameters = { | Large | \`fd-padding-responsive--lg\` | | Extra-large | \`fd-padding-responsive--xl\` | ` + } } }; diff --git a/stories/page-footer/page-footer.stories.js b/stories/page-footer/page-footer.stories.js index ac4a15cc59..c1a8662fe1 100644 --- a/stories/page-footer/page-footer.stories.js +++ b/stories/page-footer/page-footer.stories.js @@ -42,8 +42,10 @@ export const SingleLineLink = () => ` SingleLineLink.parameters = { docs: { iframeHeight: 100, - storyDescription: + description: { + story: 'The Page Footer contains Image/logo, And list of links in the footer. It is responsive to tablet and mobile screen sizes.' + } } }; @@ -74,8 +76,10 @@ export const MultiLineLink = () => ` MultiLineLink.parameters = { docs: { iframeHeight: 100, - storyDescription: + description: { + story: 'The Page Footer contains Image/logo, And list of links in the footer. To apply multiline link, add the `fd-page-footer__row` modifier class to the container element.' + } } }; @@ -114,8 +118,10 @@ export const ImageAndIconLink = () => ` ImageAndIconLink.parameters = { docs: { iframeHeight: 100, - storyDescription: + description: { + story: 'Example of The Page Footer representing multiline link,and adding images in the code to represent the clickable images and multiline is achived by adding the `fd-page-footer__row` modifier class to the container element.' + } } }; @@ -209,7 +215,9 @@ export const FooterWithDiffrentSize = () => ` FooterWithDiffrentSize.parameters = { docs: { iframeHeight: 100, - storyDescription: + description: { + story: 'Example of The Page Footer representing multiline lin, add the `--xl` `--lg` `--md` `--sm` size modifier class to the container element.' + } } }; diff --git a/stories/page/page.stories.js b/stories/page/page.stories.js index 00e26fe402..d1f22ca548 100644 --- a/stories/page/page.stories.js +++ b/stories/page/page.stories.js @@ -137,7 +137,9 @@ export const TransparentPage = () => `<main class="fd-page fd-page--transparent" TransparentPage.parameters = { docs: { iframeHeight: 550, - storyDescription: 'Page with Transparent Background Design, Header with SubHeader, and Responsive Behaviour - M_L' + description: { + story: 'Page with Transparent Background Design, Header with SubHeader, and Responsive Behaviour - M_L' + } } }; @@ -186,6 +188,8 @@ export const ResponsivePage = () => `<main class="fd-page fd-page--home fd-page- ResponsivePage.parameters = { docs: { iframeHeight: 550, - storyDescription: 'Home page with List Background Design, Floating Footer and Responsive Behaviour - XL' + description: { + story: 'Home page with List Background Design, Floating Footer and Responsive Behaviour - XL' + } } }; diff --git a/stories/pagination/pagination.stories.js b/stories/pagination/pagination.stories.js index d56ad04950..55a7e4410c 100644 --- a/stories/pagination/pagination.stories.js +++ b/stories/pagination/pagination.stories.js @@ -133,8 +133,10 @@ FirstPage.storyName = 'First page'; FirstPage.parameters = { docs: { iframeHeight: 500, - storyDescription: `First and Previous page buttons are disabled when first page is active. + description: { + story: `First and Previous page buttons are disabled when first page is active. ` + } } }; @@ -229,10 +231,12 @@ MiddlePage.storyName = 'Middle pages'; MiddlePage.parameters = { docs: { iframeHeight: 500, - storyDescription: `Pagination can display middle pages to increase reachability. + description: { + story: `Pagination can display middle pages to increase reachability. The ellipsis will not only display before the last page but also after the first page, showing two pages before & two after the current page. In sum 9 elements are shown: first page + more + 2 pages before + current page + 2 pages after + more + last page. ` + } } }; @@ -327,8 +331,10 @@ LastPage.storyName = 'Last page'; LastPage.parameters = { docs: { iframeHeight: 500, - storyDescription: `Last and Next page buttons are disabled when last page is active. + description: { + story: `Last and Next page buttons are disabled when last page is active. ` + } } }; @@ -423,8 +429,10 @@ PerPage.storyName = 'Per page'; PerPage.parameters = { docs: { iframeHeight: 500, - storyDescription: `Additionally, per page section can be displayed with select to specify which number of items should be shown on the every page. + description: { + story: `Additionally, per page section can be displayed with select to specify which number of items should be shown on the every page. ` + } } }; @@ -517,8 +525,10 @@ export const Cozy = () => `<div style='height: 200px'> Cozy.parameters = { docs: { iframeHeight: 500, - storyDescription: `Showing pagination in Cozy mode is preferable on tablets & mobile. + description: { + story: `Showing pagination in Cozy mode is preferable on tablets & mobile. ` + } } }; @@ -595,8 +605,10 @@ export const Mobile = () => `<div style="height: 200px;"> Mobile.parameters = { docs: { iframeHeight: 500, - storyDescription: `Pagination component is responsive by default. When the screen's size is smaller than 1024px in width mobile mode is shown and you have nothing to do. + description: { + story: `Pagination component is responsive by default. When the screen's size is smaller than 1024px in width mobile mode is shown and you have nothing to do. If you want to display pagination component always in mobile mode please add \`.fd-pagination--mobile\` modifier class to the component. ` + } } }; diff --git a/stories/panel/panel.stories.js b/stories/panel/panel.stories.js index 399c5141f4..c4bda44d04 100644 --- a/stories/panel/panel.stories.js +++ b/stories/panel/panel.stories.js @@ -52,8 +52,10 @@ export const Fixed = () => `<div class="fd-panel fd-panel--fixed"> Fixed.parameters = { docs: { iframeHeight: 200, - storyDescription: `When the height of the panel's content is set to a fixed size, the content area becomes scrollable. + description: { + story: `When the height of the panel's content is set to a fixed size, the content area becomes scrollable. ` } + } }; export const Expandable = () => `<div class="fd-panel"> @@ -113,8 +115,10 @@ export const Expandable = () => `<div class="fd-panel"> Expandable.parameters = { docs: { iframeHeight: 200, - storyDescription: `Expandable panels are much like fixed panels, except their content can be expanded and collapsed (including the info toolbar, if available). + description: { + story: `Expandable panels are much like fixed panels, except their content can be expanded and collapsed (including the info toolbar, if available). ` } + } }; export const Compact = () => `<div class="fd-panel fd-panel--compact"> @@ -149,8 +153,10 @@ export const Compact = () => `<div class="fd-panel fd-panel--compact"> Compact.parameters = { docs: { iframeHeight: 200, - storyDescription: `Panels can be displayed in compact mode, which decreases the padding and button sizes. To display a compact panel, add the \`fd-panel--compact\` modifier class to the main element. + description: { + story: `Panels can be displayed in compact mode, which decreases the padding and button sizes. To display a compact panel, add the \`fd-panel--compact\` modifier class to the main element. ` } + } }; export const FixedHeightContent = () => `<div class="fd-panel"> @@ -196,6 +202,8 @@ FixedHeightContent.storyName = 'Fixed height'; FixedHeightContent.parameters = { docs: { iframeHeight: 300, - storyDescription: `When the height of the panel's content is set to a fixed size, the content area becomes scrollable. + description: { + story: `When the height of the panel's content is set to a fixed size, the content area becomes scrollable. ` } + } }; diff --git a/stories/popover/popover.stories.js b/stories/popover/popover.stories.js index 09c26c340b..7a297b5f72 100644 --- a/stories/popover/popover.stories.js +++ b/stories/popover/popover.stories.js @@ -180,13 +180,15 @@ export const Alignment = () => `<div class="fddocs-container" style="margin-bott Alignment.parameters = { docs: { iframeHeight: 200, - storyDescription: `The popover body can be aligned to the left or right of the control. Additionally, it’s possible to remove the arrow from the body by adding the \`fd-popover__body--no-arrow\` modifier class to the body element. + description: { + story: `The popover body can be aligned to the left or right of the control. Additionally, it’s possible to remove the arrow from the body by adding the \`fd-popover__body--no-arrow\` modifier class to the body element. Alignment | Modifier class :------------- | :----------------- Left | (default) Right | \`fd-popover__body--right\` ` } + } }; export const Variants = () => `<div class="fddocs-container"> @@ -443,7 +445,8 @@ Variants.storyName = 'Body variants'; Variants.parameters = { docs: { iframeHeight: 200, - storyDescription: `There are several variants of the popover body that can be displayed depending on the use case. + description: { + story: `There are several variants of the popover body that can be displayed depending on the use case. Variant | Modifier class | Description :------ | :------------- | :--------------- @@ -453,6 +456,7 @@ Header, subheader and footer | \`fd-popover__body-header\` containing \`fd-bar f Cozy mode | \`fd-bar--cozy\` | Add this modifier class to the header area where \`fd-bar\` is used. ` } + } }; export const ControlExamples = () => `<div class="fd-container" style="margin-bottom: 200px"> @@ -551,8 +555,10 @@ ControlExamples.storyName = 'Control variants'; ControlExamples.parameters = { docs: { iframeHeight: 200, - storyDescription: `Controls can be displayed as buttons, images, icons, and more. In the example below, the **Avatar** and **Icon** act as controls. + description: { + story: `Controls can be displayed as buttons, images, icons, and more. In the example below, the **Avatar** and **Icon** act as controls. ` } + } }; export const Scrollable = () => `<div class="fd-popover" style="margin-bottom: 300px"> @@ -622,6 +628,8 @@ export const Scrollable = () => `<div class="fd-popover" style="margin-bottom: 3 Scrollable.parameters = { docs: { iframeHeight: 200, - storyDescription: `When the content overflows, the popover body can become scrollable. To achieve this, add \`fd-popover-body__wrapper\` on the element below the body element. + description: { + story: `When the content overflows, the popover body can become scrollable. To achieve this, add \`fd-popover-body__wrapper\` on the element below the body element. ` } + } }; diff --git a/stories/product-switch/product-switch.stories.js b/stories/product-switch/product-switch.stories.js index c96219358f..923f5eccce 100644 --- a/stories/product-switch/product-switch.stories.js +++ b/stories/product-switch/product-switch.stories.js @@ -138,8 +138,10 @@ export const Shellbar = () => ` Shellbar.parameters = { docs: { iframeHeight: 600, - storyDescription: `The product switch button is typically displayed within a **Shellbar** on the far-right side. + description: { + story: `The product switch button is typically displayed within a **Shellbar** on the far-right side. ` + } } }; @@ -243,8 +245,10 @@ export const Large = () => `<div class="fd-product-switch__body"> Large.parameters = { docs: { - storyDescription: 'Product switch is displayed with a maximum of 4 columns on large desktop screens. When the popover contains too many items, it will grow until the maximum is reached. Once the maximum is reached, the popover can be scrolled vertically.', - iframeHeight: 600 + description: { + story: 'Product switch is displayed with a maximum of 4 columns on large desktop screens. When the popover contains too many items, it will grow until the maximum is reached. Once the maximum is reached, the popover can be scrolled vertically.', + iframeHeight: 600 + } } }; @@ -290,8 +294,10 @@ export const Medium = () => `<div class="fd-product-switch__body fd-product-swit Medium.parameters = { docs: { iframeHeight: 350, - storyDescription: `If there are 6 (or less) items to display, it is recommended to use the 3-column layout (medium). To display a medium-sized product switch, add the \`fd-product-switchbody--col-3\` modifier class to the main element. + description: { + story: `If there are 6 (or less) items to display, it is recommended to use the 3-column layout (medium). To display a medium-sized product switch, add the \`fd-product-switchbody--col-3\` modifier class to the main element. ` + } } }; @@ -399,7 +405,9 @@ export const Small = () => `<div style="width:450px;"> Small.parameters = { docs: { iframeHeight: 400, - storyDescription: `For smaller screens (mobile), the product switch is displayed in list format. To achieve this style, add the \`fd-product-switch__body--mobile\` modifier class to the main element. + description: { + story: `For smaller screens (mobile), the product switch is displayed in list format. To achieve this style, add the \`fd-product-switch__body--mobile\` modifier class to the main element. ` + } } }; diff --git a/stories/progress-indicator/progress-indicator.stories.js b/stories/progress-indicator/progress-indicator.stories.js index 033d346e27..816b8549af 100644 --- a/stories/progress-indicator/progress-indicator.stories.js +++ b/stories/progress-indicator/progress-indicator.stories.js @@ -82,12 +82,14 @@ export const Layout = () => ` Layout.parameters = { docs: { iframeHeight: 600, - storyDescription: ` + description: { + story: ` Show the current progress as a percentage value between 0% and 100%. Alternatively, you can show the current progress as text in addition to the bar. In this case, the text is shown on the right of the bar if the progress is 50% or less. In all other cases, the progress is shown right-aligned on the bar itself You also have the option of showing any application-specific text instead of a percentage. ` + } } }; @@ -142,7 +144,9 @@ ValueStates.storyName = 'States'; ValueStates.parameters = { docs: { iframeHeight: 600, - storyDescription: 'The progress indicator can visualize different value states that are represented by various theme-dependent semantic colors. The states are: normal, success, warning, error, and information.' + description: { + story: 'The progress indicator can visualize different value states that are represented by various theme-dependent semantic colors. The states are: normal, success, warning, error, and information.' + } } }; @@ -196,6 +200,8 @@ Truncation.storyName = 'Truncation Behaviour'; Truncation.parameters = { docs: { iframeHeight: 600, - storyDescription: 'If the length of the text exceeds the available space in the progress indicator, the text truncates. In this case, clicking the progress indicator displays an information popover with the full text.' + description: { + story: 'If the length of the text exceeds the available space in the progress indicator, the text truncates. In this case, clicking the progress indicator displays an information popover with the full text.' + } } }; diff --git a/stories/quick-view/quick-view.stories.js b/stories/quick-view/quick-view.stories.js index 588a0546d6..7bc4890989 100644 --- a/stories/quick-view/quick-view.stories.js +++ b/stories/quick-view/quick-view.stories.js @@ -79,7 +79,9 @@ export const Popover = () => `<div class="fd-popover"> Popover.parameters = { docs: { iframeHeight: 500, - storyDescription: 'QuickView component as popover' + description: { + story: 'QuickView component as popover' + } } }; @@ -148,8 +150,10 @@ export const Dialog = () => `<section class="fd-dialog-docs-static fd-dialog fd- Dialog.parameters = { docs: { iframeHeight: 500, - storyDescription: `QuickView component as dialog. Because of the dialog structure quick view title should be + description: { + story: `QuickView component as dialog. Because of the dialog structure quick view title should be set within the dialog header but not in the quick view header` + } } }; @@ -196,6 +200,8 @@ NoHeader.storyName = 'Without the header'; NoHeader.parameters = { docs: { iframeHeight: 500, - storyDescription: 'QuickView without the header' + description: { + story: 'QuickView without the header' + } } }; diff --git a/stories/radio/radio.stories.js b/stories/radio/radio.stories.js index 8f27e59cd7..9c6f65558f 100644 --- a/stories/radio/radio.stories.js +++ b/stories/radio/radio.stories.js @@ -74,7 +74,9 @@ Primary.storyName = 'Responsiveness'; Primary.parameters = { docs: { iframeHeight: 250, - storyDescription: 'A radio button can appear in two different sizes. In `cozy` mode, it is bigger than it is in `compact` mode. This makes the checkbox easier to select on touch devices.' + description: { + story: 'A radio button can appear in two different sizes. In `cozy` mode, it is bigger than it is in `compact` mode. This makes the checkbox easier to select on touch devices.' + } } }; @@ -105,13 +107,15 @@ export const Inline = () => `<fieldset class="fd-fieldset" id="radio4"> Inline.parameters = { docs: { - storyDescription: ` + description: { + story: ` Try to align radio buttons vertically instead of horizontally, especially for long labels. Horizontal alignment is harder to read and localize. Consider horizontal alignment in cases of one-word labels, such as in the background color settings example above. In forms, always align radio buttons vertically instead of horizontally as the length of the labels may vary for different languages. Do not put two radio button groups right next to each other as it is difficult to determine which buttons belong to which group. Use group labels and padding to separate them. ` + } } }; @@ -252,6 +256,8 @@ export const InteractionStates = () => `<div style="display:flex;justify-content InteractionStates.parameters = { docs: { iframeHeight: 550, - storyDescription: 'A radio button can have different states that affect its appearance value states, such as “error” or “warning”, which are indicated using semantic colors' + description: { + story: 'A radio button can have different states that affect its appearance value states, such as “error” or “warning”, which are indicated using semantic colors' + } } }; diff --git a/stories/rating-indicator/rating-indicator.stories.js b/stories/rating-indicator/rating-indicator.stories.js index 43c32f9886..1029178113 100644 --- a/stories/rating-indicator/rating-indicator.stories.js +++ b/stories/rating-indicator/rating-indicator.stories.js @@ -201,7 +201,8 @@ export const Sizes = () => `<div class="example-container"> Sizes.parameters = { docs: { - storyDescription: ` + description: { + story: ` | **Size** | **rem** | **Modifier class** | | :---------- | :--------- | -----------------------: | | Extra small | 0.75rem | \`--xs\` | @@ -212,6 +213,7 @@ Sizes.parameters = { | Compact | 1rem | \`--compact\` | | Condensed | 1rem | \`--condensed\` | ` + } } }; @@ -260,11 +262,13 @@ export const CustomIcons = () => `<div class="example-container"> CustomIcons.storyName = 'Custom icons'; CustomIcons.parameters = { docs: { - storyDescription: ` + description: { + story: ` To make the rating indicator to use custom icons needs to be added class \`.fd-rating-indicator--icon\` to the \`fd-rating-indicator\` element. Also, you need to set the icon class that will implement the icon ` + } } }; @@ -455,10 +459,12 @@ export const HalfValues = () => `<div class="example-container"> HalfValues.storyName = 'Half values'; HalfValues.parameters = { docs: { - storyDescription: ` + description: { + story: ` To display half values with the rating indicator i.e 2.5 stars, add the \`fd-rating-indicator--half-star\` modifier class together with the \`fd-rating-indicator\` class. ` + } } }; @@ -490,7 +496,8 @@ export const Disabled = () => `<div class="example-container"> Disabled.parameters = { docs: { - storyDescription: ` + description: { + story: ` To disable rating indicator, the \`[disable]\` attribute needs to be added to all inputs. Additionally, one of the selectors listed below needs to be added to the \`fd-rating-indicator\` element: @@ -498,6 +505,7 @@ Additionally, one of the selectors listed below needs to be added to the \`fd-ra - \`aria-disable="true"\` - \`[disable]\` ` + } } }; @@ -530,10 +538,12 @@ export const DisplayMode = () => `<div class="example-container"> DisplayMode.storyName = 'Display mode'; DisplayMode.parameters = { docs: { - storyDescription: ` + description: { + story: ` Data can be presented as label-value field pairs without editable fields in display-only forms, see <a href="../?path=/docs/components-forms-form-grid--s-size">Form Grid</a> for more details. If you want to include a rating indicator in a display-only form, add the \`.fd-rating-indicator--display-mode\` to the \`fd-rating-indicator\` element. ` + } } }; @@ -566,10 +576,12 @@ export const NonInteractive = () => `<div class="example-container"> NonInteractive.storyName = 'Non-interactive'; NonInteractive.parameters = { docs: { - storyDescription: ` + description: { + story: ` If you want to include a rating indicator in a display-only form, add the \`.fd-rating-indicator--non-interactive\` class to the \`fd-rating-indicator\` element. ` + } } }; @@ -661,10 +673,12 @@ export const DifferentValues = () => `<div class="example-container"> DifferentValues.storyName = 'Different values'; DifferentValues.parameters = { docs: { - storyDescription: ` + description: { + story: ` It is possible to display the rating indicator with a different number of values. It is highly recommended to use 5 as the maximum value, however you can go up to 7 if it is ideal for your use case. ` + } } }; diff --git a/stories/resizable-card-layout/resizable-card-layout.stories.js b/stories/resizable-card-layout/resizable-card-layout.stories.js index 74139ca064..a5f87972d4 100644 --- a/stories/resizable-card-layout/resizable-card-layout.stories.js +++ b/stories/resizable-card-layout/resizable-card-layout.stories.js @@ -342,8 +342,10 @@ ResizeCardLayout.storyName = 'Resizable card layout'; ResizeCardLayout.parameters = { docs: { iframeHeight: 900, - storyDescription: `Resizable card layout with multiple cards. + description: { + story: `Resizable card layout with multiple cards. ` + } } }; @@ -395,8 +397,10 @@ ResizeCardHorizontalVerticalDirection.storyName = 'Card resize in horizontal and ResizeCardHorizontalVerticalDirection.parameters = { docs: { iframeHeight: 900, - storyDescription: `Cards can be resized in horizontal direction as well as vertical direction. Resize handle will expand on right border for horizontal resize and bottom border for vertical resize. + description: { + story: `Cards can be resized in horizontal direction as well as vertical direction. Resize handle will expand on right border for horizontal resize and bottom border for vertical resize. ` + } } }; @@ -447,8 +451,10 @@ ResizeCardHorizontalDirection.storyName = 'Card resize in horizontal directions' ResizeCardHorizontalDirection.parameters = { docs: { iframeHeight: 900, - storyDescription: `Cards can also be resized in horizontal direction only. Resize handle will expand on right border. + description: { + story: `Cards can also be resized in horizontal direction only. Resize handle will expand on right border. ` + } } }; @@ -499,7 +505,9 @@ ResizeCardVerticalDirection.storyName = 'Card resize in vertical directions'; ResizeCardVerticalDirection.parameters = { docs: { iframeHeight: 900, - storyDescription: `Cards can be resized in vertical direction only. Resize handle will expand on bottom border. + description: { + story: `Cards can be resized in vertical direction only. Resize handle will expand on bottom border. ` + } } }; diff --git a/stories/scrollbar/scrollbar.stories.js b/stories/scrollbar/scrollbar.stories.js index 8f05e7e1b3..ef541ce8f2 100644 --- a/stories/scrollbar/scrollbar.stories.js +++ b/stories/scrollbar/scrollbar.stories.js @@ -23,7 +23,9 @@ DefaultExample.storyName = 'Default'; DefaultExample.parameters = { docs: { iframeHeight: 950, - storyDescription: `To use themeable scrollbar use \`fd-scrollbar\` class on scrollable element. + description: { + story: `To use themeable scrollbar use \`fd-scrollbar\` class on scrollable element. ` + } } }; diff --git a/stories/section/section.stories.js b/stories/section/section.stories.js index b7d036db74..45f409c223 100644 --- a/stories/section/section.stories.js +++ b/stories/section/section.stories.js @@ -29,7 +29,9 @@ Structure.storyName = 'Section Structure'; Structure.parameters = { docs: { iframeHeight: 300, - storyDescription: '' + description: { + story: '' + } } }; @@ -81,9 +83,11 @@ SectionLayoutGrid.storyName = 'With Layout Grid'; SectionLayoutGrid.parameters = { docs: { iframeHeight: 300, - storyDescription: ` + description: { + story: ` Shows an example with the grid span helper class. This is most appropriate when displaying a collection of content in a linear order.` + } } }; @@ -119,9 +123,11 @@ SectionPanels.storyName = 'With Panels'; SectionPanels.parameters = { docs: { iframeHeight: 300, - storyDescription: ` + description: { + story: ` Shows an alternate layout option using columns. This may be more appropriate depending on the need to maintain source order and structure.` + } } }; @@ -141,7 +147,9 @@ SectionHeaders.storyName = 'With Headers'; SectionHeaders.parameters = { docs: { iframeHeight: 300, - storyDescription: 'Header and title elements are available when necessary to label content groups.' + description: { + story: 'Header and title elements are available when necessary to label content groups.' + } } }; diff --git a/stories/select/select.stories.js b/stories/select/select.stories.js index d8a6ca4cce..243b1df4af 100644 --- a/stories/select/select.stories.js +++ b/stories/select/select.stories.js @@ -91,9 +91,11 @@ export const Cozy = () => `<div style="height: 250px"> Cozy.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` Select displays a predefined option and a button that triggers a dropdown menu to view more options (list items). By default, it is displayed in cozy mode. ` } + } }; export const Compact = () => `<div style="height: 200px"> @@ -151,9 +153,11 @@ export const Compact = () => `<div style="height: 200px"> Compact.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` When in compact mode, select displays a dropdown menu that can contain long list items with text that wraps to the next line. The maximum width should be 37.5rem (600px) to avoid readability issues, unless the list contains more than 2 columns. If the list has 3 or more columns, the dropdown menu should not be limited to a max width. To display select in compact mode, add \`fd-select--compact\` to the main element. ` } + } }; export const MobileMode = () => `<div class="fd-dialog fd-dialog-docs-static fd-select-docs-max-height fd-dialog--active" id="select-dialog-example"> @@ -212,9 +216,11 @@ MobileMode.storyName = 'Mobile'; MobileMode.parameters = { docs: { iframeHeight: 400, - storyDescription: ` + description: { + story: ` Select is displayed in a full-screen dialog when viewed on mobile (and some tablet screens). The dialog displays a list where the first list item is pre-selected. To display select in mobile mode, wrap the select component in **Dialog** and **Bar** components. ` + } } }; @@ -486,7 +492,8 @@ SemanticStates.storyName = 'States'; SemanticStates.parameters = { docs: { iframeHeight: 300, - storyDescription: ` + description: { + story: ` Select can be displayed in semantic states to communicate *Success*, *Error*, *Warning* or *Information* to the users. They can be displayed as either messages within the dropdown list, or by itself as a static message. To display select in various semantic states, add the class (shown below) to the \`fd-select__control\` element. Semantic state | Class @@ -499,6 +506,7 @@ Information | \`is-information\` **Note:** To add text in the body of the component, include the text within the \`fd-list__message\` above the \`ul\` element. ` + } } }; @@ -574,9 +582,11 @@ AsFormItem.storyName = 'Form item'; AsFormItem.parameters = { docs: { iframeHeight: 900, - storyDescription: ` + description: { + story: ` When displaying select within a form, you can apply the \`fd-form-item\` wrapper to ensure proper styling for the items. However, you are free to override this in your custom styles if necessary. ` + } } }; @@ -694,9 +704,11 @@ TwoColumn.storyName = '2-column'; TwoColumn.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` Select can be displayed with two columns in the dropdown list view. The column width should be adjusted depending on the use case, but always with a default ration of 60% (first column) to 40% (second column). To display a second column, add the \`fd-list__secondary\` class to the list items under the title element. ` } + } }; export const TwoColumnsAndIcons = () => `<div style="height: 200px"> @@ -761,9 +773,11 @@ TwoColumnsAndIcons.storyName = '2-column with icons'; TwoColumnsAndIcons.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` Not only can select be displayed with two columns, but also with icons. To display icons, add the \`fd-list__icon sap-icon--*\` to the list items before the title element. Find icons on the **Icon** page. ` } + } }; export const ItemGrouping = () => `<div style="height: 450px"> @@ -841,9 +855,11 @@ ItemGrouping.storyName = 'Grouping'; ItemGrouping.parameters = { docs: { iframeHeight: 400, - storyDescription: ` + description: { + story: ` Select can be displayed with headers that group the list items in the dropdown menu. To display group headers, add the \`fd-list__group-header\` label within the body element. ` + } } }; @@ -909,9 +925,11 @@ TextWrapping.storyName = 'Text wrapping'; TextWrapping.parameters = { docs: { iframeHeight: 400, - storyDescription: ` + description: { + story: ` The select component wraps text by default, and there is virtually no limit to the text length. However, it is recommended to keep the length to a minimum for readability. The second column will always remain center-aligned, despite the length of the list item. ` + } } }; @@ -975,9 +993,11 @@ NoWrapping.storyName = 'No wrapping'; NoWrapping.parameters = { docs: { iframeHeight: 300, - storyDescription: ` + description: { + story: ` Although select wraps text by default, it is possible to prevent wrapping. To achieve this, add the \`--no-wrap\` modifier class to the \`fd-list__title\` and/or \`fd-list__secondary\` elements. ` + } } }; @@ -1042,9 +1062,11 @@ MatchSelectPopoverBodySize.storyName = 'Popover style'; MatchSelectPopoverBodySize.parameters = { docs: { iframeHeight: 300, - storyDescription: ` + description: { + story: ` Select can be displayed as a popover, using all of its specifications. The default size for the popover body is often longer than the text length. The body can be adjusted to match the text length by adding the \`fd-popover__body—dropdown-fill\` class to \`fd-popover__body\`. See **Popover** for more details. ` + } } }; @@ -1116,9 +1138,11 @@ LargerSelect.storyName = 'Large Select'; LargerSelect.parameters = { docs: { iframeHeight: 300, - storyDescription: ` + description: { + story: ` There is a way to make larger select select body, To achieve it, add \`fd-list--large-dropdown\` to \`fd-list\` element. ` + } } }; @@ -1143,9 +1167,11 @@ export const Disabled = () => `<label class="fd-form-label" id="disabledLabel">C Disabled.parameters = { docs: { iframeHeight: 300, - storyDescription: ` + description: { + story: ` Select can be disabled to communicate to the user that the control cannot be selected. To disable select, add the \`aria-disabled="true"\` attribute to the \`fd-popover__control\` and the \`fd-select__control\` elements. ` + } } }; @@ -1172,9 +1198,11 @@ Readonly.storyName = 'Read-only'; Readonly.parameters = { docs: { iframeHeight: 300, - storyDescription: ` + description: { + story: ` Select can be displayed as read-only, meaning the value in the input field cannot be changed via typing. To display select as read-only, add the \`.is-readonly\` class to the \`fd-select__control\` element. ` + } } }; @@ -1291,8 +1319,10 @@ export const Blank = () => `<div style="height: 250px"> Blank.parameters = { docs: { iframeHeight: 400, - storyDescription: ` + description: { + story: ` The select component can display a blank list item instead of a pre-selected list item, prompting the user to select the dropdown button to see more. To display a blank list item, simply enter a few spaces in the title of the list item. ` + } } }; diff --git a/stories/shellbar/shellbar.stories.js b/stories/shellbar/shellbar.stories.js index c28885ff83..4f9176947c 100644 --- a/stories/shellbar/shellbar.stories.js +++ b/stories/shellbar/shellbar.stories.js @@ -70,9 +70,11 @@ export const Primary = () => `<div style="height:150px"> `; Primary.parameters = { docs: { - storyDescription: ` + description: { + story: ` The primary shellbar displays a logo, title, and an avatar where the user settings are found. If the avatar does not contain a thumbnail, then the initials of the user will be displayed. ` + } } }; @@ -176,9 +178,11 @@ ProductMenuAndSearch.storyName = 'Product menu and search'; ProductMenuAndSearch.parameters = { docs: { - storyDescription: ` + description: { + story: ` Shellbar can be displayed with a product menu and search box. The product menu is used for navigating to other applications within the product. To display a product menu, add the \`fd-popover\` class after the \`fd-shellbar__logo\` class. ` + } } }; @@ -289,9 +293,11 @@ LinksWithCollapsibleMenuXlSize.storyName = 'Extra large'; LinksWithCollapsibleMenuXlSize.parameters = { docs: { - storyDescription: ` + description: { + story: ` The shellbar can be optimized for extra-large screens. To achieve this style, add the \`fd-shellbar--xl\` modifier class to the main element, which increases the container padding to 3rem. ` + } } }; @@ -403,9 +409,11 @@ LinksWithCollapsibleMenuMSize.storyName = 'Medium-large'; LinksWithCollapsibleMenuMSize.parameters = { docs: { - storyDescription: ` + description: { + story: ` The shellbar can be optimized for medium-large screens. To achieve this style, add the \`fd-shellbar--m\` or \`fd-shellbar--l\`modifier class to the main element, which increases the container padding to 2rem. ` + } } }; @@ -518,9 +526,11 @@ LinksWithCollapsibleMenuSSize.storyName = 'Small'; LinksWithCollapsibleMenuSSize.parameters = { docs: { - storyDescription: ` + description: { + story: ` The shellbar can be optimized for mobile and small tablet screens. To achieve this style, add the \`fd-shellbar--s\` modifier class to the main element. All actions except the user menu should be collapsed, displaying an overflow button. ` + } } }; @@ -704,10 +714,12 @@ ProductSwitch.storyName = 'Product switch'; ProductSwitch.parameters = { docs: { - storyDescription: ` + description: { + story: ` Shellbar can be displayed with a product switch component, indicating to the user that they can navigate to other products. See [Product Switch](product-switch.html) for more details. **Note:** There is an [SAP CoPilot](https://help.sap.com/viewer/product/SAP_COPILOT/1902/en-US) icon displayed in the middle of the shellbar, which can be used to trigger a chatbot if desired. ` + } } }; diff --git a/stories/side-navigation/side-navigation.stories.js b/stories/side-navigation/side-navigation.stories.js index 5db3c76ca8..2cb46297c8 100644 --- a/stories/side-navigation/side-navigation.stories.js +++ b/stories/side-navigation/side-navigation.stories.js @@ -81,9 +81,11 @@ Cozy.storyName = 'Default'; Cozy.parameters = { docs: { iframeHeight: 400, - storyDescription: ` + description: { + story: ` The default side navigation is displayed in cozy mode with one navigation level. Because there is only one level, all further navigation is shown in the content area. The \`fd-nested-list--text-only\` modifier class should be added to the lists in both the main and utility sections. ` + } } }; @@ -141,9 +143,11 @@ CozyIcons.storyName = 'Icons'; CozyIcons.parameters = { docs: { iframeHeight: 400, - storyDescription: ` + description: { + story: ` Side navigation can be displayed with icons. In the expanded state, entries can consist of only text or an icon with text. The use or non-use of icons must be consistent for all links on one level. Do not combine entries with and without icons on the same level. To display icons in list items, add the \`fd-nested-list__icon\` class within the list items. ` + } } }; @@ -228,10 +232,12 @@ CozyGrouping.storyName = 'Group'; CozyGrouping.parameters = { docs: { iframeHeight: 400, - storyDescription: ` + description: { + story: ` Side navigation can be displayed with group headers that organize the entries, which is ideal for when there is more than one level of hierarchy. When they are grouped, the entries on the first level are just headers and don't trigger navigation themselves. <br><br>It's recommended to use up to two levels of navigation, however; for more levels of navigation, use the content area. When expanded, the \`is-expanded\` class should also be extended to the content element. To trigger another level, use the \`fd-nested-list__button\` element. ` + } } }; @@ -336,9 +342,11 @@ ComplexCozySideNav.storyName = 'Complex'; ComplexCozySideNav.parameters = { docs: { iframeHeight: 550, - storyDescription: ` + description: { + story: ` Side navigation can display several different features such as icons, group headers, and two levels of navigation. ` + } } }; @@ -442,9 +450,11 @@ ComplexCompactSideNav.storyName = 'Complex (compact)'; ComplexCompactSideNav.parameters = { docs: { iframeHeight: 550, - storyDescription: ` + description: { + story: ` Side navigation can be displayed in compact mode and can also display several features like icons, group headers, and two levels of navigation. Compact mode is best viewed from a large desktop screen. To display a complex side navigation in compact mode, add the \`fd-nested-list--compact\` modifier class to the nested list element. ` + } } }; @@ -510,10 +520,12 @@ CondensedStateCozy.storyName = 'Condensed'; CondensedStateCozy.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` Side navigation can be displayed in a condensed state, showing only icons that represent the navigation entries. When the user selects an entry from the navigation, a **Popover** is displayed. The default size for the popover body is often longer than the text length. However, the length can be adjusted to match the text length by adding the \`fd-popover__body--dropdown-fill\` class to the \`fd-popover__body\` element. <br><br>To display a condensed side navigation, add the \`fd-side-nav--condensed\` modifier class to the main element. ` + } } }; @@ -579,10 +591,12 @@ CondensedStateCompact.storyName = 'Condensed (compact)'; CondensedStateCompact.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` Side navigation can be displayed in a condensed state, showing only icons that represent the navigation entries. Like the previous example, the default size for the popover body is often longer than the text length, and can be adjusted by adding the \`fd-popover__body--dropdown-fill\` class to the \`fd-popover__body\` element. <br><br>To display a condensed side navigation in compact mode, add the \` fd-side-nav--condensed\` modifier class to the main element and the \`fd-nested-list--compact\` modifier class to the nested list element. ` + } } }; @@ -1331,8 +1345,10 @@ export const NestedListPopover = () => `<div class="fddocs-container" style="mar NestedListPopover.parameters = { docs: { iframeHeight: 900, - storyDescription: ` + description: { + story: ` Nested list can be displayed inside popover. ` + } } }; diff --git a/stories/slider/slider.stories.js b/stories/slider/slider.stories.js index 9514f8b982..57042d35b9 100644 --- a/stories/slider/slider.stories.js +++ b/stories/slider/slider.stories.js @@ -50,9 +50,11 @@ export const Standard = () => ` Standard.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` The standard slider displays a bar with a circular handle. When the user hovers over the handle, a hand cursor appears. The user can either drag and drop the handle or click on the bar to change the slider setting. ` } + } }; export const Range = () => ` @@ -72,10 +74,12 @@ export const Range = () => ` Range.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` The range slider displays a bar with two circular handles, indicating that a range between two values can be selected. To display a range slider, add the \`fd-slider__track-range\` class to the \`fd-slider__track\` element. ` } + } }; export const Ticks = () => ` @@ -108,9 +112,11 @@ export const Ticks = () => ` Ticks.parameters = { docs: { - storyDescription: ` + description: { + story: ` The slider can display ticks on the bar to help guide the user. Ticks can be displayed with the \`fd-slider__tick\` class. If a tick is in selected range, a \`--in-range\` modifier class should be applied. ` + } } }; @@ -158,9 +164,11 @@ export const TicksAndLabels = () => ` TicksAndLabels.storyName = 'Ticks and labels'; TicksAndLabels.parameters = { docs: { - storyDescription: ` + description: { + story: ` The slider can display labels that indicate the values of each tick. Labels can be displayed with the \`fd-slider__label\` class. Be advised that this styling does not include the positioning of the labels. ` + } } }; @@ -179,9 +187,11 @@ export const MobileMode = () => ` MobileMode.storyName = 'Mobile'; MobileMode.parameters = { docs: { - storyDescription: ` + description: { + story: ` By default, the slider is not responsive. However, to make the slider more mobile-friendly, you may enlarge the slider handle and its hit area by adding \`fd-slider__handle--lg\` class to \`fd-slider__handle\` element. To add horizontal paddings of \`0.8125rem\` use the \`fd-slider--lg\` modifier class ` + } } }; diff --git a/stories/status-indicator/status-indicator.stories.js b/stories/status-indicator/status-indicator.stories.js index cc6743805c..f5eab96682 100644 --- a/stories/status-indicator/status-indicator.stories.js +++ b/stories/status-indicator/status-indicator.stories.js @@ -146,7 +146,8 @@ export const Sizes = () => ` Sizes.parameters = { docs: { - storyDescription: ` + description: { + story: ` | **Size** | **rem** | **Modifier class** | | :---------- | :--------- | -----------------------: | | Small | 0.75rem | \`--sm\` | @@ -154,6 +155,7 @@ Sizes.parameters = { | Large | 1.125rem | \`--lg\` | | Extra Large | 1.875rem | \`--xl\` | ` + } } }; @@ -259,10 +261,12 @@ export const FillValues = () => ` FillValues.storyName = 'Fill values'; FillValues.parameters = { docs: { - storyDescription: ` + description: { + story: ` To display fill values with the status indicator i.e 'critical,negative,positive', add the \`fd-status-indicator--negative\` modifier class together with the \`fd-status-indicator\` class. ` + } } }; @@ -405,10 +409,12 @@ export const StatusIndicatorLabels = () => ` StatusIndicatorLabels.storyName = 'Status Indicator With Label'; StatusIndicatorLabels.parameters = { docs: { - storyDescription: ` + description: { + story: ` To display label values with the Status indicator i.e label and indicator image, add the \`fd-status-indicator--lg__text \` and \`fd-status-indicator--positive__text \` modifier class for defining the font size and colour of the Label together with the \`fd-status-indicator--htext\` for horizontal positioning of the label. ` + } } }; @@ -492,9 +498,11 @@ export const StatusIndicatorLinearFilling = () => ` StatusIndicatorLinearFilling.storyName = 'Status Indicator With Linear filling'; StatusIndicatorLinearFilling.parameters = { docs: { - storyDescription: ` + description: { + story: ` To display Linear filling from left to right instead default bottom to top approach type of the status indicator Object, The object can be filled based on changing the value of \`<linearGradient>\` property \`x1,Y1,x2,y2\`. Filling can be done either clockwise or counterclockwise. ` + } } }; @@ -637,9 +645,11 @@ export const StatusIndicatorCoreoGraphy = () => ` StatusIndicatorCoreoGraphy.storyName = 'Status Indicator With Coreographed filling'; StatusIndicatorCoreoGraphy.parameters = { docs: { - storyDescription: ` + description: { + story: ` Example to demonstrate the order dispatch from the manufacturing unit ` + } } }; @@ -716,9 +726,11 @@ export const StatusIndicatorRadialFilling = () => ` StatusIndicatorRadialFilling.storyName = 'Status Indicator With Radial filling'; StatusIndicatorRadialFilling.parameters = { docs: { - storyDescription: ` + description: { + story: ` To display Radial filling instead of default bottom to top approach type of status indicator Object, The object can be filled based on changing the value of \`<radialGradient>\` property \`cx,cy,r,fx,fy\`. Filling can be done either clockwise or counterclockwise. ` + } } }; @@ -879,8 +891,10 @@ export const StatusIndicatorAngularFilling = () => ` StatusIndicatorAngularFilling.storyName = 'Status Indicator With Angular filling'; StatusIndicatorAngularFilling.parameters = { docs: { - storyDescription: ` + description: { + story: ` To display Angular filling instead of default bottom to top approach type of status indicator Object, The object can be filled based on changing the value of \`<linearGradient>\` property \`x1,Y1,x2,y2\`. Filling can be done either clockwise or counterclockwise. ` + } } }; diff --git a/stories/step-input/step-input.stories.js b/stories/step-input/step-input.stories.js index 0978ed24cc..c2ef232d2c 100644 --- a/stories/step-input/step-input.stories.js +++ b/stories/step-input/step-input.stories.js @@ -43,8 +43,10 @@ Primary.storyName = 'Default'; Primary.parameters = { docs: { iframeHeight: 300, - storyDescription: `The default step input displays an input field with a plus and minus icon on opposing sides to either increase or decrease the value. It is displayed in cozy mode, which is ideal for mobile and tablet screens. + description: { + story: `The default step input displays an input field with a plus and minus icon on opposing sides to either increase or decrease the value. It is displayed in cozy mode, which is ideal for mobile and tablet screens. ` + } } }; @@ -83,8 +85,10 @@ export const Compact = () => `<label class="fd-form-label" for="step-1">Compact Compact.parameters = { docs: { iframeHeight: 300, - storyDescription: `The step input can be displayed in compact mode, which is ideal for desktop screens. To display a compact step input, add the \`--compact\` modifier class to the main element, as well as the button and input elements. + description: { + story: `The step input can be displayed in compact mode, which is ideal for desktop screens. To display a compact step input, add the \`--compact\` modifier class to the main element, as well as the button and input elements. ` + } } }; @@ -195,7 +199,8 @@ export const States = () => `<label class="fd-form-label" for="step-5">Success S States.parameters = { docs: { iframeHeight: 300, - storyDescription: `Step input can be displayed in various states such as Success, Information, Error and Warning. + description: { + story: `Step input can be displayed in various states such as Success, Information, Error and Warning. **To display step input in a semantic state, add the following classes to the main elements:** @@ -207,6 +212,7 @@ Error | \`is-error\` Warning | \`is-warning\` ` + } } }; @@ -239,8 +245,10 @@ export const Focused = () => `<label class="fd-form-label" for="step-20">Focused Focused.parameters = { docs: { iframeHeight: 300, - storyDescription: `By default, step input has a built-in focused state, however; it is not supported by IE11. To enable the focused state on IE11, add the \`is-focus\` class to the main element. + description: { + story: `By default, step input has a built-in focused state, however; it is not supported by IE11. To enable the focused state on IE11, add the \`is-focus\` class to the main element. ` + } } }; @@ -273,8 +281,10 @@ export const Disabled = () => `<label class="fd-form-label" for="step-13">Disabl Disabled.parameters = { docs: { iframeHeight: 300, - storyDescription: `Step input can be disabled by adding the \`is-disabled\` class to the main element. + description: { + story: `Step input can be disabled by adding the \`is-disabled\` class to the main element. ` + } } }; @@ -311,7 +321,9 @@ ReadOnly.storyName = 'Read-only'; ReadOnly.parameters = { docs: { iframeHeight: 300, - storyDescription: `Step input can be displayed as read-only by adding the \`is-readonly\` class to the main element. + description: { + story: `Step input can be displayed as read-only by adding the \`is-readonly\` class to the main element. ` + } } }; diff --git a/stories/switch/switch.stories.js b/stories/switch/switch.stories.js index 9a91398dfb..fd9e556279 100644 --- a/stories/switch/switch.stories.js +++ b/stories/switch/switch.stories.js @@ -86,8 +86,10 @@ Basic.storyName = 'Default'; Basic.parameters = { docs: { iframeHeight: 350, - storyDescription: `The default switch displays what resembles a physical switch that toggles between an active and inactive state. It is displayed in cozy mode, which is ideal for mobile and small tablet screens. The switch should always be accompanied by a label that indicates its purpose. + description: { + story: `The default switch displays what resembles a physical switch that toggles between an active and inactive state. It is displayed in cozy mode, which is ideal for mobile and small tablet screens. The switch should always be accompanied by a label that indicates its purpose. ` + } } }; @@ -141,10 +143,12 @@ WithText.storyName = 'Optional text'; WithText.parameters = { docs: { iframeHeight: 350, - storyDescription: `As mentioned in the previous example, a switch should always be accompanied by a label. + description: { + story: `As mentioned in the previous example, a switch should always be accompanied by a label. (code needs fixing) ` + } } }; @@ -186,7 +190,9 @@ SemanticSwitch.storyName = 'States'; SemanticSwitch.parameters = { docs: { iframeHeight: 350, - storyDescription: `The switch can be displayed with semantic colors, such as green for active and red for inactive. To display a semantic switch, add the \`fd-switch—semantic\` modifier class to the main element. + description: { + story: `The switch can be displayed with semantic colors, such as green for active and red for inactive. To display a semantic switch, add the \`fd-switch—semantic\` modifier class to the main element. ` + } } }; diff --git a/stories/table/table.stories.js b/stories/table/table.stories.js index 718dbb7fc1..2cde521d28 100644 --- a/stories/table/table.stories.js +++ b/stories/table/table.stories.js @@ -126,9 +126,11 @@ export const Primary = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolba Primary.parameters = { docs: { - storyDescription: ` + description: { + story: ` The primary table contains columns with headers, and rows with links. In the first column, links are displayed. To display links within a table, add the \`fd-link\` class within the table data. ` + } } }; @@ -170,12 +172,14 @@ export const Borderless = () => `<div class="fd-toolbar fd-toolbar--solid fd-too Borderless.parameters = { docs: { - storyDescription: ` + description: { + story: ` Table can be displayed without borders that separate the columns, column headers, and rows. To display a borderless table, add the \`fd-table--no-horizontal-borders\` and \`fd-table--no-vertical-borders\` modifier classes to the main element. **Note:** You can remove borders on individual cells by adding the above-mentioned modifier classes to them only. ` + } } }; @@ -218,9 +222,11 @@ export const Borderlessbody = () => `<div class="fd-toolbar fd-toolbar--solid fd Borderlessbody.storyName = 'Borderless (body)'; Borderlessbody.parameters = { docs: { - storyDescription: ` + description: { + story: ` Table can be displayed without borders that separate the columns and rows only, leaving the column headers with borders. To display a borderless table body, add the \`fd-table--no-horizontal-borders\` and \`fd-table--no-vertical-borders\` modifier classes to the body element. ` + } } }; @@ -263,9 +269,11 @@ export const NoOuterBorder = () => `<div class="fd-toolbar fd-toolbar--solid fd- NoOuterBorder.storyName = 'No outer Border'; NoOuterBorder.parameters = { docs: { - storyDescription: ` + description: { + story: ` Table can be displayed without outer borders, might be needed when used inside some other element. To display a table without outer border, add the \`fd-table--no-outer-border\` modifier class to the main element. ` + } } }; @@ -314,9 +322,11 @@ export const Footer = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolbar Footer.parameters = { docs: { - storyDescription: ` + description: { + story: ` Table can be displayed with a footer. To display a table footer, add the \`fd-table__footer\` class with a \`tfoot\` element. It must contain the same amount and size of columns as the table head and body containers. ` + } } }; @@ -367,9 +377,11 @@ export const CompactFooter = () => `<div class="fd-toolbar fd-toolbar--solid fd- CompactFooter.storyName = 'Footer (compact)'; CompactFooter.parameters = { docs: { - storyDescription: ` + description: { + story: ` Table can be displayed with a footer in compact mode, which is ideal for larger desktop screens. To display a compact table, add the \`fd-table--compact\` modifier class to the main element. ` + } } }; @@ -420,9 +432,11 @@ export const CondensedFooter = () => `<div class="fd-toolbar fd-toolbar--solid f CondensedFooter.storyName = 'Footer (condensed)'; CondensedFooter.parameters = { docs: { - storyDescription: ` + description: { + story: ` Similar to the previous example, table can be displayed with a footer in condensed mode (for desktop screens). To display a condensed table, add the \`fd-table--condensed\` modifier class to the main element. ` + } } }; @@ -489,7 +503,8 @@ export const Interactive = () => `<div class="fd-toolbar fd-toolbar--solid fd-to Interactive.parameters = { docs: { - storyDescription: ` + description: { + story: ` The table component can be interactive with hoverable and activable cells and rows. Interaction | Modifier class @@ -497,6 +512,7 @@ Interaction | Modifier class Activate | \`--activable\` Hover | \`--hoverable\` ` + } } }; @@ -625,7 +641,8 @@ export const SemanticRows = () => `<div class="fd-toolbar fd-toolbar--solid fd-t SemanticRows.storyName = 'Semantic'; SemanticRows.parameters = { docs: { - storyDescription: ` + description: { + story: ` The table component can display highlight indicators to classify certain items with semantic states. To display status indicators in table, add the \`fd-table__cell--status-indicator\` modifier class to each row. **To display semantic highlight indicators, add the following modifier classes to \`fd-table__cell--status-indicator\`:** @@ -637,6 +654,7 @@ Warning | \`--warning\` Error | \`--error\` Information | \`--information\` ` + } } }; @@ -683,9 +701,11 @@ export const FocusableRows = () => `<div class="fd-toolbar fd-toolbar--solid fd- FocusableRows.storyName = 'Focusable rows'; FocusableRows.parameters = { docs: { - storyDescription: ` + description: { + story: ` Table can display focusable rows by adding the \`fd-table__row--focusable\` modifier class and a valid \`tabindex\` to the rows. It is not recommended to use focusable rows simultaneously with focusable cells. ` + } } }; @@ -732,9 +752,11 @@ export const FocusableCells = () => `<div class="fd-toolbar fd-toolbar--solid fd FocusableCells.storyName = 'Focusable cells'; FocusableCells.parameters = { docs: { - storyDescription: ` + description: { + story: ` Table can display focusable cells by adding the \`fd-table__cell--focusable\` modifier class and a valid \`tabindex\` to the cells. It is not recommended to use focusable cells simultaneously with focusable rows. ` + } } }; @@ -792,12 +814,14 @@ export const Checkbox = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolb Checkbox.parameters = { docs: { - storyDescription: ` + description: { + story: ` Table can display checkboxes to allow the user to perform bulk actions. To display checkboxes in table, add the \`fd-table__cell--checkbox\` modifier class to the appropriate cell. It is recommended to add the parameter \`aria-selected="true"\` to the row that is selected. Also recommended to add class \`fd-table__checkbox\` to the checkbox (input) and \`fd-table__checkbox-label\` class to the checkbox label to have appropriate styles. ` + } } }; @@ -856,12 +880,14 @@ export const CompactCheckbox = () => `<div class="fd-toolbar fd-toolbar--solid f CompactCheckbox.storyName = 'Checkbox (compact)'; CompactCheckbox.parameters = { docs: { - storyDescription: ` + description: { + story: ` Table can be displayed with checkboxes in compact mode. To display checkboxes in table, add the \`fd-table__cell--checkbox\` modifier class to the appropriate cell. It is recommended to add the parameter \`aria-selected="true"\` to the row that is selected. To display the table in compact mode, add the \`fd-table--compact\` modifier class to the table element. ` + } } }; @@ -920,12 +946,14 @@ export const CondensedCheckbox = () => `<div class="fd-toolbar fd-toolbar--solid CondensedCheckbox.storyName = 'Checkbox (condensed)'; CondensedCheckbox.parameters = { docs: { - storyDescription: ` + description: { + story: ` Table can be displayed with checkboxes in condensed mode. To display checkboxes in table, add the \`fd-table__cell--checkbox\` modifier class to the appropriate cell. It is recommended to add the parameter \`aria-selected="true"\` to the row that is selected. To display the table in condensed mode, add the \`fd-table--condensed\` modifier class to the table element. ` + } } }; @@ -1015,9 +1043,11 @@ export const Pagination = () => `<div class="fd-toolbar fd-toolbar--solid fd-too Pagination.parameters = { docs: { - storyDescription: ` + description: { + story: ` Table can be displayed with bottom pagination by adding the \`fd-pagination\` class after the table. ` + } } }; @@ -1205,9 +1235,11 @@ export const AdvancedToolbar = () => `<div class="fd-dialog" id="filter-dialog-e AdvancedToolbar.storyName = 'Advanced toolbar'; AdvancedToolbar.parameters = { docs: { - storyDescription: ` + description: { + story: ` The table component can be displayed with an advanced **Toolbar**, which allows users to customize their table. In this example, buttons trigger **Dialogs**. To display an advanced toolbar, pair \`fd-dialog\` components with an \`fd-toolbar\` component. ` + } } }; @@ -1340,9 +1372,11 @@ export const ContextualMenu = () => `<div style="min-height: 400px"> ContextualMenu.storyName = 'Contextual menu'; ContextualMenu.parameters = { docs: { - storyDescription: ` + description: { + story: ` Table can display a contextual menu containing actions if there is not enough space in a given row. It is recommended to use a contextual menu if there are more than three actions. To display table with a contextual menu, add the \`fd-popover\` component to any given cell. See **Popover** for more details. ` + } } }; @@ -1437,9 +1471,11 @@ export const MenuHeader = () => `<div class="fd-toolbar fd-toolbar--solid fd-too MenuHeader.storyName = 'Menu header'; MenuHeader.parameters = { docs: { - storyDescription: ` + description: { + story: ` Table can display menu options from a popover within headers. The example below demonstrates headers containing customization actions such as _Ascending_ and _Descending_. To display a menu within a header, add the \`fd-table__popover\` class to the header cells. ` + } } }; @@ -1530,7 +1566,8 @@ export const FixColumnHeader = () => `<style> FixColumnHeader.storyName = 'Fixed header'; FixColumnHeader.parameters = { docs: { - storyDescription: ` + description: { + story: ` Table can display columns with a fixed header. To display fixed headers, wrap the table with the \`fd-table--fixed\` modifier class. In addition, add the \`fd-table__cell--fixed\` modifier class to each cell element, it should be propagated to the entire row. @@ -1538,6 +1575,7 @@ Then apply \`.fd-table__cell--fixed-last\` to every last fixed cell in every col It’s important to hardcode the width of the columns, otherwise the cells will be squished. ` + } } }; @@ -1664,11 +1702,13 @@ export const NavIcon = () => `<div class="fd-toolbar fd-toolbar--solid fd-toolba NavIcon.storyName = 'Navigation from table rows'; NavIcon.parameters = { docs: { - storyDescription: ` + description: { + story: ` Responsive table allows navigation from a line item. For that purpose you need to add a column with the icon \`sap-icon--slim-arrow-right\` at the end. The entire line needs to be clickable You have an option to add icon button \`sap-icon--navigation-right-arrow\` as a separate column for non responsive table. ` + } } }; @@ -1737,10 +1777,12 @@ export const NavIndicators = () => `<div class="fd-toolbar fd-toolbar--solid fd- NavIndicators.storyName = 'Navigation indicators'; NavIndicators.parameters = { docs: { - storyDescription: ` + description: { + story: ` The table component can display navigation indicators. When multi-selection is used in a master-detail scenario, it is not clear which item was last opened, you can mark it as a “navigated” indicator, as indicated in the second row, to mark an item that is currently open. To display a navigated indicator, add the \`fd-table__cell--navigated\` class to the desired table cell. ` + } } }; @@ -1819,9 +1861,11 @@ export const ResponsiveTable = () => `<div class="fd-toolbar fd-toolbar--solid f ResponsiveTable.parameters = { docs: { - storyDescription: ` + description: { + story: ` The desktop responsive table should contain \`fd-table--responsive\` modifier. ` + } } }; @@ -1965,7 +2009,8 @@ export const ResponsiveTablePopInMode = () => `<div style="max-width: 450px"> ResponsiveTablePopInMode.storyName = 'Responsive Table (pop-in mode)'; ResponsiveTablePopInMode.parameters = { docs: { - storyDescription: ` + description: { + story: ` The responsive table can be displayed in pop-in mode for mobile and tablet screens. To display responsive table in pop-in mode, add the \`fd-table--pop-in\` modifier class to the main element and remove the borders (see borderless example). In pop-in mode, a row actually contains two rows: - \`fd-table__row--main\` - \`fd-table__row--secondary\` @@ -1973,6 +2018,7 @@ The responsive table can be displayed in pop-in mode for mobile and tablet scree **Note:** cells with titles and text should be wrapped in paragraph tags. ` + } } }; @@ -2260,12 +2306,14 @@ export const GridTable = () => `<table class="fd-table" aria-describedby="FU4EwF GridTable.parameters = { docs: { - storyDescription: ` + description: { + story: ` Grid tables can contain various input elements inside of cells, such as checkboxes, input fields, links and drop-down menus. ####Accessibility Information about the table such as a title, summary, and/or keyboard navigation instructions should be provided in captions for screen readers. To caption table information, use the \`fd-table__caption\` class. ` + } } }; @@ -2303,9 +2351,11 @@ export const NoDataTable = () => `<table class="fd-table"> NoDataTable.storyName = 'Table without data'; NoDataTable.parameters = { docs: { - storyDescription: ` + description: { + story: ` Table can indicate that there is no data to display. ` + } } }; @@ -2361,7 +2411,8 @@ export const GroupRowsInTable = () => `<table class="fd-table fd-table--group"> GroupRowsInTable.storyName = 'Table with group rows'; GroupRowsInTable.parameters = { docs: { - storyDescription: ` + description: { + story: ` Table can have group rows, to get this do the following: - Add \`fd-table--group\` class to the table @@ -2379,6 +2430,7 @@ Intended to have up to 20 levels deep, not more. Please consider that you need to implement expanding/collapsing functionality by yourself. ` + } } }; @@ -2471,7 +2523,8 @@ export const TreeRowsTable = () => `<table class="fd-table fd-table--tree"> TreeRowsTable.storyName = 'Tree Table'; TreeRowsTable.parameters = { docs: { - storyDescription: ` + description: { + story: ` Table can show tree-like rows, to get this do the following: - Add \`fd-table--tree\` class to the table @@ -2487,5 +2540,6 @@ Intended to have up to 20 levels deep, not more. Please consider that you need to implement expanding/collapsing functionality by yourself. ` + } } }; diff --git a/stories/tabs/tabs.stories.js b/stories/tabs/tabs.stories.js index c7c4c73665..b459266fee 100644 --- a/stories/tabs/tabs.stories.js +++ b/stories/tabs/tabs.stories.js @@ -83,8 +83,10 @@ Primary.storyName = 'Default'; Primary.parameters = { docs: { iframeHeight: 300, - storyDescription: `By default, tabs are displayed in a bar and are either inactive or active (highlighted in blue). The bar can also contain actions that apply to the whole page. The example below illustrates the tabs component in cozy mode with no horizontal padding. + description: { + story: `By default, tabs are displayed in a bar and are either inactive or active (highlighted in blue). The bar can also contain actions that apply to the whole page. The example below illustrates the tabs component in cozy mode with no horizontal padding. ` + } } }; @@ -133,10 +135,12 @@ TabWithCounters.storyName = 'Counters'; TabWithCounters.parameters = { docs: { iframeHeight: 300, - storyDescription: `Tabs can be displayed with counters to indicate that there are a number of resources the user can or should access. To display counters, wrap the \`fd-tabs__count\` class in paragraph tags below the \`fd-tabs__link\` element. + description: { + story: `Tabs can be displayed with counters to indicate that there are a number of resources the user can or should access. To display counters, wrap the \`fd-tabs__count\` class in paragraph tags below the \`fd-tabs__link\` element. In the example below, the tabs component is optimized for an extra-large screen with the \`fd-tabs--xl\` modifier class, which adds 3rem horizontal paddings. ` + } } }; @@ -182,8 +186,10 @@ NavTab.storyName = 'Navigable'; NavTab.parameters = { docs: { iframeHeight: 300, - storyDescription: `Tabs can be navigable by applying the \`role=”navigation”\` attribute to the main element. + description: { + story: `Tabs can be navigable by applying the \`role=”navigation”\` attribute to the main element. ` + } } }; @@ -233,8 +239,10 @@ IconOnly.storyName = 'Icon'; IconOnly.parameters = { docs: { iframeHeight: 300, - storyDescription: `Tabs can display icons instead of text with the \` fd-tabs__icon\` class (see **Icon** for a list of available icons). To display icon tabs without text, you will also need to add the \`fd-tabs--icon-only\` modifier class to the main element. + description: { + story: `Tabs can display icons instead of text with the \` fd-tabs__icon\` class (see **Icon** for a list of available icons). To display icon tabs without text, you will also need to add the \`fd-tabs--icon-only\` modifier class to the main element. ` + } } }; @@ -283,8 +291,10 @@ CompactIconOnly.storyName = 'Icon (compact)'; CompactIconOnly.parameters = { docs: { iframeHeight: 300, - storyDescription: `Tabs can be displayed with icons in compact mode. To display compact tabs, add the \`fd-tabs--compact\` modifier class to the main element. See example above on how to display icon tabs. + description: { + story: `Tabs can be displayed with icons in compact mode. To display compact tabs, add the \`fd-tabs--compact\` modifier class to the main element. See example above on how to display icon tabs. ` + } } }; @@ -344,8 +354,10 @@ ProcessMode.storyName = 'Process mode'; ProcessMode.parameters = { docs: { iframeHeight: 300, - storyDescription: `Tabs can be displayed in subsequent steps, indicating to the user that there is a process to follow. To display tabs in process mode, add the \`fd-tabs--process\` modifier class to the main element. + description: { + story: `Tabs can be displayed in subsequent steps, indicating to the user that there is a process to follow. To display tabs in process mode, add the \`fd-tabs--process\` modifier class to the main element. ` + } } }; @@ -405,8 +417,10 @@ CompactProcessMode.storyName = 'Process mode (compact)'; CompactProcessMode.parameters = { docs: { iframeHeight: 300, - storyDescription: `Tabs can be displayed in subsequent steps while in compact mode. To display compact tabs in process mode, add the \`fd-tabs--process\` and \`fd-tabs--compact\` modifier classes to the main element. + description: { + story: `Tabs can be displayed in subsequent steps while in compact mode. To display compact tabs in process mode, add the \`fd-tabs--process\` and \`fd-tabs--compact\` modifier classes to the main element. ` + } } }; @@ -470,8 +484,10 @@ FilterMode.storyName = 'Filter mode'; FilterMode.parameters = { docs: { iframeHeight: 300, - storyDescription: `Tabs can be displayed in filter mode, indicating to the user that a value has been filtered into separate tabs. To display tabs in filter mode, add the \`fd-tabs--filter\` modifier class to the main element. + description: { + story: `Tabs can be displayed in filter mode, indicating to the user that a value has been filtered into separate tabs. To display tabs in filter mode, add the \`fd-tabs--filter\` modifier class to the main element. ` + } } }; @@ -535,8 +551,10 @@ CompactFilterMode.storyName = 'Filter mode (compact)'; CompactFilterMode.parameters = { docs: { iframeHeight: 300, - storyDescription: `Tabs can be displayed in compact mode while in filter mode. To display compact tabs in filter mode, add the \`fd-tabs--filter\` and \`fd-tabs--compact\` modifier classes to the main element. + description: { + story: `Tabs can be displayed in compact mode while in filter mode. To display compact tabs in filter mode, add the \`fd-tabs--filter\` and \`fd-tabs--compact\` modifier classes to the main element. ` + } } }; @@ -607,7 +625,8 @@ SemanticMode.storyName = 'Semantic mode'; SemanticMode.parameters = { docs: { iframeHeight: 300, - storyDescription: `Tabs can be displayed with semantic colors to indicate a status. To display semantic tabs, add the following modifier classes to the \`fd-tabs__item\` elements: + description: { + story: `Tabs can be displayed with semantic colors to indicate a status. To display semantic tabs, add the following modifier classes to the \`fd-tabs__item\` elements: State | Modifier class :------- | :--------------- @@ -617,6 +636,7 @@ Information | \`fd-tabs__item--information\` Error | \`fd-tabs__item--error\` Neutral | \`fd-tabs__item--neutral\` ` + } } }; @@ -693,8 +713,10 @@ SemanticFilterMode.storyName = 'Semantic filter mode'; SemanticFilterMode.parameters = { docs: { iframeHeight: 300, - storyDescription: `Tabs can be displayed in filter mode with semantic colors. As detailed in the previous examples, add the \`fd-tabs--filter\` modifier class to the main element and add the semantic modifier classes to the \`fd-tabs__item\` elements (see **semantic mode** example for modifier class names). + description: { + story: `Tabs can be displayed in filter mode with semantic colors. As detailed in the previous examples, add the \`fd-tabs--filter\` modifier class to the main element and add the semantic modifier classes to the \`fd-tabs__item\` elements (see **semantic mode** example for modifier class names). ` + } } }; @@ -765,7 +787,9 @@ SemanticInline.storyName = 'Semantic inline'; SemanticInline.parameters = { docs: { iframeHeight: 300, - storyDescription: `Tabs can be displayed with inline text in semantic colors. To display inline text tabs, add the \`fd-tabs__tag\` class below the \`fd-tabs__link\` element. + description: { + story: `Tabs can be displayed with inline text in semantic colors. To display inline text tabs, add the \`fd-tabs__tag\` class below the \`fd-tabs__link\` element. ` + } } }; diff --git a/stories/text/text.stories.js b/stories/text/text.stories.js index a09b95ceb8..8419d1c30d 100644 --- a/stories/text/text.stories.js +++ b/stories/text/text.stories.js @@ -20,8 +20,10 @@ DefaultExample.storyName = 'Default'; DefaultExample.parameters = { docs: { iframeHeight: 100, - storyDescription: `The default text component can display lines of text that wrap to the next line + description: { + story: `The default text component can display lines of text that wrap to the next line once they reach the end of the content container width.` + } } }; @@ -47,9 +49,11 @@ deserunt mollit anim id est laborum.</p> Whitespace.parameters = { docs: { iframeHeight: 300, - storyDescription: `The text component has a property that allows browsers to render specified indents and + description: { + story: `The text component has a property that allows browsers to render specified indents and whitespace. To display indents and/or whitespace, add a \`fd-text--pre-wrap\` modifier class to the main element.` + } } }; @@ -112,7 +116,8 @@ MaxLines.storyName = 'Max lines'; MaxLines.parameters = { docs: { iframeHeight: 300, - storyDescription: `The text component can be displayed with a maximum number of lines. + description: { + story: `The text component can be displayed with a maximum number of lines. When the maximum is reached, the text truncates and displays an ellipsis. To display text with a maximum line count, add the \`fd-text--max-lines\` modifier class and an inline style rule with the number of lines to the main element. For example, add \`style="-webkit-line-clamp: 3;"\` to display @@ -121,6 +126,7 @@ three lines of text. **Note**: The property \`-webkit-line-clamp\` doesn't work in IE11 and should be changed to \`height\`. For example, \`style="height: 200px;"\`. ` + } } }; @@ -149,8 +155,10 @@ export const Expand = () => ` Expand.parameters = { docs: { iframeHeight: 200, - storyDescription: `Along with max lines, text component can display "MORE" and "LESS" links that can show + description: { + story: `Along with max lines, text component can display "MORE" and "LESS" links that can show more or less of the text.` + } } }; @@ -178,7 +186,8 @@ export const Hyphenation = () => `<div class="example-container"> Hyphenation.parameters = { docs: { iframeHeight: 200, - storyDescription: `The text component can display words that are broken at appropriate hyphenation + description: { + story: `The text component can display words that are broken at appropriate hyphenation points in a text block. To display hyphens, add the \`fd-text--hyphenation\` to the main element. **It is also possible to suggest line break opportunities with two Unicode characters that manually specify @@ -191,5 +200,6 @@ Even if the line is not actually broken at that point, the hyphen is still displ where the browser should break the word if hyphenation is necessary. In HTML, add the \`­\` Unicode to insert a soft hyphen.` + } } }; diff --git a/stories/textarea/textarea.stories.js b/stories/textarea/textarea.stories.js index c1c9e14e1f..9fb580028c 100644 --- a/stories/textarea/textarea.stories.js +++ b/stories/textarea/textarea.stories.js @@ -44,7 +44,9 @@ export const Counter = () => `<div class="fd-form-item"> Counter.parameters = { docs: { iframeHeight: 150, - storyDescription: 'A checkbox can appear in two different sizes. In `cozy` mode, it is bigger than it is in `compact` mode. This makes the checkbox easier to select on touch devices.' + description: { + story: 'A checkbox can appear in two different sizes. In `cozy` mode, it is bigger than it is in `compact` mode. This makes the checkbox easier to select on touch devices.' + } } }; @@ -62,7 +64,9 @@ export const DisabledAndReadOnly = () => ` DisabledAndReadOnly.parameters = { docs: { iframeHeight: 200, - storyDescription: 'A checkbox can appear in two different sizes. In `cozy` mode, it is bigger than it is in `compact` mode. This makes the checkbox easier to select on touch devices.' + description: { + story: 'A checkbox can appear in two different sizes. In `cozy` mode, it is bigger than it is in `compact` mode. This makes the checkbox easier to select on touch devices.' + } } }; @@ -121,6 +125,8 @@ States.storyName = 'Responsiveness'; States.parameters = { docs: { iframeHeight: 500, - storyDescription: 'As with any other input component, you can validate the fields and show the result as a value state of the component. Possible value states are error, warning, success, information, or neutral (none).' + description: { + story: 'As with any other input component, you can validate the fields and show the result as a value state of the component. Possible value states are error, warning, success, information, or neutral (none).' + } } }; diff --git a/stories/time/time.stories.js b/stories/time/time.stories.js index e34c214482..92394a7b8f 100644 --- a/stories/time/time.stories.js +++ b/stories/time/time.stories.js @@ -201,12 +201,14 @@ DefaultCozyMode.storyName = 'Default'; DefaultCozyMode.parameters = { docs: { iframeHeight: 550, - storyDescription: `The default time component is displayed in cozy mode, which is ideal for mobile screens. + description: { + story: `The default time component is displayed in cozy mode, which is ideal for mobile screens. Only one item and wrapper should be active at a time with the \`fd-time__wrapper--active\` modifier class. The rest of the items must be collapsed with the \`fd-timeitem--collapsed\` modifier class, displaying only the collapsed slider item (blue) next to the active item. **Note:** The meridian (AM/PM) wrapper must contain the \`fd-time__wrapper--meridian\` modifier class. ` + } } }; @@ -377,8 +379,10 @@ TabletMode.storyName = 'Tablet'; TabletMode.parameters = { docs: { iframeHeight: 550, - storyDescription: `Time can be optimized for tablet screens, which adds padding on each side of the component. To display the time component for tablet, add the \`fd-time--tablet\` modifier class to the main element. + description: { + story: `Time can be optimized for tablet screens, which adds padding on each side of the component. To display the time component for tablet, add the \`fd-time--tablet\` modifier class to the main element. ` + } } }; @@ -550,8 +554,10 @@ CompactMode.storyName = 'Desktop'; CompactMode.parameters = { docs: { iframeHeight: 550, - storyDescription: `The time component can be displayed in compact mode, which is ideal for desktop screens. To display the time component for desktop, add the \`fd-time--compact\` modifier class to the main element. + description: { + story: `The time component can be displayed in compact mode, which is ideal for desktop screens. To display the time component for desktop, add the \`fd-time--compact\` modifier class to the main element. ` + } } }; @@ -723,7 +729,9 @@ ScrollableMode.storyName = 'Scrollable'; ScrollableMode.parameters = { docs: { iframeHeight: 550, - storyDescription: `Time can be scrollable by adding the \`fd-time--scrollable\` modifier class to the main element. It provides users with the ability to scroll up and down active columns with either a mouse, or on mobile where they can tap and release. + description: { + story: `Time can be scrollable by adding the \`fd-time--scrollable\` modifier class to the main element. It provides users with the ability to scroll up and down active columns with either a mouse, or on mobile where they can tap and release. ` + } } }; diff --git a/stories/title/title.stories.js b/stories/title/title.stories.js index 8c753aad74..b6417f5d69 100644 --- a/stories/title/title.stories.js +++ b/stories/title/title.stories.js @@ -20,7 +20,9 @@ Levels.storyName = 'Semantic Level'; Levels.parameters = { docs: { iframeHeight: 250, - storyDescription: 'There are 6 semantic levels of a heading element. There should only be one H1 on a page, and headings should only appear in ascending order without skipping a level; i.e. even if there are only 3 levels on a page, the order must be H1-H2-H3, and no other levels used.' + description: { + story: 'There are 6 semantic levels of a heading element. There should only be one H1 on a page, and headings should only appear in ascending order without skipping a level; i.e. even if there are only 3 levels on a page, the order must be H1-H2-H3, and no other levels used.' + } } }; @@ -35,7 +37,9 @@ export const VisualLevel = () => `<h1 class="fd-title fd-title--h6">Title Level VisualLevel.parameters = { docs: { iframeHeight: 250, - storyDescription: 'If a design requires it, the visual level can be set to something different than the semantic level. This allows the sequential order to be maintained while providing flexibility in appearance.' + description: { + story: 'If a design requires it, the visual level can be set to something different than the semantic level. This allows the sequential order to be maintained while providing flexibility in appearance.' + } } }; @@ -53,7 +57,9 @@ Elision.storyName = 'Text Elision'; Elision.parameters = { docs: { iframeHeight: 250, - storyDescription: 'By default the Title text overflow will be elided when longer than its container.' + description: { + story: 'By default the Title text overflow will be elided when longer than its container.' + } } }; @@ -71,6 +77,8 @@ Wrapping.storyName = 'Text Wrapping'; Wrapping.parameters = { docs: { iframeHeight: 300, - storyDescription: 'Add the `--wrap` modifier to cause the overflow text to wrap instead.' + description: { + story: 'Add the `--wrap` modifier to cause the overflow text to wrap instead.' + } } }; diff --git a/stories/token/token.stories.js b/stories/token/token.stories.js index c0b02044a2..dfc49ca70e 100644 --- a/stories/token/token.stories.js +++ b/stories/token/token.stories.js @@ -41,8 +41,10 @@ Primary.storyName = 'Default'; Primary.parameters = { docs: { iframeHeight: 350, - storyDescription: `The default token is displayed in grey with text, and a close button that will remove the token when selected. It is displayed in cozy mode, which is ideal for mobile and tablet screens. + description: { + story: `The default token is displayed in grey with text, and a close button that will remove the token when selected. It is displayed in cozy mode, which is ideal for mobile and tablet screens. ` + } } }; @@ -75,8 +77,10 @@ export const Selected = () => `<span class="fd-token fd-token--selected" role="b Selected.parameters = { docs: { iframeHeight: 350, - storyDescription: `Tokens can be displayed in blue, signaling to the user that they are selected. To display selected tokens, add the \`fd-token--selected\` modifier class to the main element. + description: { + story: `Tokens can be displayed in blue, signaling to the user that they are selected. To display selected tokens, add the \`fd-token--selected\` modifier class to the main element. ` + } } }; @@ -106,8 +110,10 @@ ReadOnlyToken.storyName = 'Read-only'; ReadOnlyToken.parameters = { docs: { iframeHeight: 350, - storyDescription: `Tokens can be displayed as read-only, indicating that they cannot be interacted with. Read-only tokens should not contain a close button. To display tokens as read-only, add the \`fd-token--readonly\` modifier class to the main element. + description: { + story: `Tokens can be displayed as read-only, indicating that they cannot be interacted with. Read-only tokens should not contain a close button. To display tokens as read-only, add the \`fd-token--readonly\` modifier class to the main element. ` + } } }; @@ -141,8 +147,10 @@ CompactToken.storyName = 'Compact'; CompactToken.parameters = { docs: { iframeHeight: 350, - storyDescription: `Tokens can be displayed in compact mode, which is ideal for larger desktop screens. To display compact tokens, add the \`fd-token--compact\` modifier class to the main element. + description: { + story: `Tokens can be displayed in compact mode, which is ideal for larger desktop screens. To display compact tokens, add the \`fd-token--compact\` modifier class to the main element. ` + } } }; @@ -221,10 +229,12 @@ CozyTokenizer.storyName = 'Tokenizer'; CozyTokenizer.parameters = { docs: { iframeHeight: 350, - storyDescription: `Tokenizer is a container for tokens, which is often placed inside **Multi-Input** components. It is displayed in cozy mode; therefore, the user can swipe the tokens to the left or right. + description: { + story: `Tokenizer is a container for tokens, which is often placed inside **Multi-Input** components. It is displayed in cozy mode; therefore, the user can swipe the tokens to the left or right. To enable focus, the \`is-focus\` class must be added the container. ` + } } }; @@ -303,10 +313,12 @@ CompactTokenizer.storyName = 'Compact tokenizer'; CompactTokenizer.parameters = { docs: { iframeHeight: 350, - storyDescription: `The tokenizer can be displayed in compact mode to be viewed on larger desktop screens. Contrary to the previous example, the user can view the tokens by pressing the right or left arrow keys. + description: { + story: `The tokenizer can be displayed in compact mode to be viewed on larger desktop screens. Contrary to the previous example, the user can view the tokens by pressing the right or left arrow keys. To display a compact tokenizer, add the \`fd-tokenizer--compact\` modifier class to the main element. ` + } } }; @@ -380,7 +392,9 @@ ScrollableTokenizer.storyName = 'Scrollable tokenizer'; ScrollableTokenizer.parameters = { docs: { iframeHeight: 350, - storyDescription: `The tokenizer can be scrollable by adding the \`fd-tokenizer--scrollable\` modifier class to the main element. The user can view the tokens by pressing the \`Tab\` key, then \`Shift + Tab\` to jump to the next one. + description: { + story: `The tokenizer can be scrollable by adding the \`fd-tokenizer--scrollable\` modifier class to the main element. The user can view the tokens by pressing the \`Tab\` key, then \`Shift + Tab\` to jump to the next one. ` + } } }; diff --git a/stories/tool-header/tool-header.stories.js b/stories/tool-header/tool-header.stories.js index 1a2c377376..dfaa80e1b3 100644 --- a/stories/tool-header/tool-header.stories.js +++ b/stories/tool-header/tool-header.stories.js @@ -186,7 +186,9 @@ export const Menu = () => `<div class="fd-tool-header fd-tool-header--menu"> Menu.storyName = 'Tool Header with Side Navigation Menu Button'; Menu.parameters = { docs: { - storyDescription: 'The side navigation menu button is used to collapse/expand the side navigation. It is not recommended to use horizontal and responsive paddings when this button is present.' + description: { + story: 'The side navigation menu button is used to collapse/expand the side navigation. It is not recommended to use horizontal and responsive paddings when this button is present.' + } } }; @@ -284,7 +286,9 @@ export const ResponsivePaddings = () => `<div class="fd-tool-header fd-tool-head ResponsivePaddings.parameters = { docs: { - storyDescription: 'Horizontal responsive paddings (based on the screen size) can be applied to the tool header by adding the `fd-tool-header--responsive-paddings` modifier class to the container class. In this case the left and right spacing will change as the screen size changes.' + description: { + story: 'Horizontal responsive paddings (based on the screen size) can be applied to the tool header by adding the `fd-tool-header--responsive-paddings` modifier class to the container class. In this case the left and right spacing will change as the screen size changes.' + } } }; @@ -417,6 +421,8 @@ export const HorizontalPaddings = () => `<h4>Size S (1rem)</h4> HorizontalPaddings.parameters = { docs: { - storyDescription: 'You can add horizontal paddings by applying a modifier class to the container. For example, `.fd-tool-header--sm` modifier class will add 1rem horizontal paddings on the tool bar container.' + description: { + story: 'You can add horizontal paddings by applying a modifier class to the container. For example, `.fd-tool-header--sm` modifier class will add 1rem horizontal paddings on the tool bar container.' + } } }; diff --git a/stories/toolbar/toolbar.stories.js b/stories/toolbar/toolbar.stories.js index 4cd2618ce0..2b2a2836c4 100644 --- a/stories/toolbar/toolbar.stories.js +++ b/stories/toolbar/toolbar.stories.js @@ -47,9 +47,11 @@ export const Primary = () => `<div class="fd-toolbar fd-toolbar--cozy"> Primary.parameters = { docs: { - storyDescription: ` + description: { + story: ` The primary toolbar displays several actions separated by icon buttons. It is displayed in cozy mode, which is ideal for mobile and small tablet screens. ` + } } }; @@ -136,10 +138,12 @@ export const Overflow = () => `<div style="height:250px"> Overflow.parameters = { docs: { - storyDescription: `The overflow toolbar can display additional elements when space is limited. This can be achieved with a **Button** and/or **Popover** component. + description: { + story: `The overflow toolbar can display additional elements when space is limited. This can be achieved with a **Button** and/or **Popover** component. To display an overflow in a button, pass the \`sap-icon--overflow\` in the \`fd-button\` class. Additionally, you can add a popover by passing \`fd-popover\` in the \`fd-toolbar__overflow\` element. Add any element inside overflow body with \`fd-toolbar__overflow-button\` , \`fd-toolbar__overflow-button--menu\` \`fd-toolbar__overflow-label \` modifier , ` + } } }; @@ -237,14 +241,17 @@ export const Separator = () => ` Separator.storyName = 'Separators'; Separator.parameters = { docs: { - storyDescription: `Separators should be used to visually separate items from each other. To display separators in toolbars, add the \`fd-toolbar__separator\` class after the component you are separating. + description: { + story: `Separators should be used to visually separate items from each other. To display separators in toolbars, add the \`fd-toolbar__separator\` class after the component you are separating. ` + } } }; Types.parameters = { docs: { - storyDescription: `Toolbar can be styled in various ways depending on the use case. + description: { + story: `Toolbar can be styled in various ways depending on the use case. Types | Modifier class | Description :-------- | :------------- | :--------------- @@ -257,6 +264,7 @@ No border-bottom | \`fd-toolbar—clear\` | This is not a type, but it removes t Active | \` fd-toolbar--active\` | This is also not a type, but it enables active and hover states in each type. ` + } } }; @@ -313,9 +321,11 @@ export const Alignment = () => `<h3>Left and right-aligned</h3> Alignment.parameters = { docs: { - storyDescription: `Toolbars are typically used for left/right alignment; however, they can be displayed in any way with the \`fd-toolbar__spacer\` class. + description: { + story: `Toolbars are typically used for left/right alignment; however, they can be displayed in any way with the \`fd-toolbar__spacer\` class. **Note:** Spacers share the horizontal space equally; therefore, the content is not centered as precisely as it is in the **Bar** component. ` + } } }; diff --git a/stories/tree/tree.stories.js b/stories/tree/tree.stories.js index f2ef65a33c..f804db1684 100644 --- a/stories/tree/tree.stories.js +++ b/stories/tree/tree.stories.js @@ -172,8 +172,10 @@ export const Primary = () => `<ul role="tree" aria-label="Root Tree" id="TREE1L1 Primary.parameters = { docs: { iframeHeight: 950, - storyDescription: ` + description: { + story: ` The primary tree component displays level 1 expanded to show level 2, which is indented by 1.5rem. Only the root tree (ul element) needs to have the \`expanded-level-*\` modifier class to indicate which level is currently expanded.` + } } }; @@ -295,12 +297,14 @@ export const Borderless = () => `<ul role="tree" aria-label="Root Tree" id="TREE Borderless.parameters = { docs: { iframeHeight: 400, - storyDescription: ` + description: { + story: ` Tree can be displayed without borders. To remove the borders from the first level items, add the \`fd-tree--no-border\` modifier class to the root tree. Additionally, tree list items can display actions, which are added as children of the \`fd-tree__item-container\` class. ####Icons Icons can be added before and/or after the text as children of the \`fd-tree__content\` class. ` + } } }; @@ -394,7 +398,8 @@ HighlightIndicators.storyName = 'Highlight indicators'; HighlightIndicators.parameters = { docs: { iframeHeight: 500, - storyDescription: ` + description: { + story: ` Tree can display highlight indicators on tree items to indicate a status. In this example, each level indents by 0.5rem more than the previous level. For example, level 2 indents by 0.5, level 3 by 1rem and level 4 by 1.5rem (up to level 6). @@ -410,6 +415,7 @@ Success | \` has-highlight-indicator--success\` Warning | \` has-highlight-indicator--warning\` ` + } } }; @@ -715,7 +721,8 @@ export const Navigable = () => `<ul role="tree" aria-label="Root Tree" id="TREE6 Navigable.parameters = { docs: { iframeHeight: 1350, - storyDescription: ` + description: { + story: ` Tree can be displayed with navigation links by anchoring the \`href\` attribute with the \`fd-tree__content\` class. If only a subset of the tree items is navigable, you should indicate them with navigation arrows. ####Navigation arrows @@ -728,6 +735,7 @@ To display navigation arrows in tree items, create an element with \`fd-tree__ic **Note:** In this example, each level indents by 0.25rem more than the previous level (up to level 12). ` + } } }; @@ -976,7 +984,8 @@ export const Selection = () => `<h3>Left multi-selection</h3> Selection.parameters = { docs: { iframeHeight: 1000, - storyDescription: ` + description: { + story: ` Tree can be displayed with checkboxes, allowing the user to select multiple items. To display selected tree items, add the \`is-selected\` class to the \`fd-tree__item-container\` element. ####Form items @@ -986,6 +995,7 @@ Form items can be added before or after the \`fd-tree__content\` element. The \` - Single selection: use **Radio buttons** ` + } } }; @@ -1004,8 +1014,10 @@ TreeWithNoData.storyName = 'No data'; TreeWithNoData.parameters = { docs: { iframeHeight: 200, - storyDescription: ` + description: { + story: ` If there is no data to display, add the \`fd-tree--no-data\` modifier class to the root tree. ` + } } }; diff --git a/stories/upload-collection/upload-collection.stories.js b/stories/upload-collection/upload-collection.stories.js index 8ca5c838a1..f925661b41 100644 --- a/stories/upload-collection/upload-collection.stories.js +++ b/stories/upload-collection/upload-collection.stories.js @@ -185,7 +185,9 @@ Standard.storyName = 'Default'; Standard.parameters = { docs: { iframeHeight: 785, - storyDescription: 'The default upload collection.' + description: { + story: 'The default upload collection.' + } } }; @@ -315,7 +317,9 @@ export const Edit = () => ` Edit.parameters = { docs: { iframeHeight: 785, - storyDescription: 'Users can activate edit mode where the file name can be changed.' + description: { + story: 'Users can activate edit mode where the file name can be changed.' + } } }; @@ -342,6 +346,8 @@ export const NoData = () => ` NoData.parameters = { docs: { iframeHeight: 785, - storyDescription: 'Use a message page component when the user has yet to upload any files.' + description: { + story: 'Use a message page component when the user has yet to upload any files.' + } } }; diff --git a/stories/user-menu/user-menu.stories.js b/stories/user-menu/user-menu.stories.js index 47067099b5..f97d986fd8 100644 --- a/stories/user-menu/user-menu.stories.js +++ b/stories/user-menu/user-menu.stories.js @@ -135,7 +135,9 @@ export const Shellbar = () => `<div style="height: 700px;"> Shellbar.parameters = { docs: { - storyDescription: 'The user menu button is typically displayed within a Shellbar on the far-right side.' + description: { + story: 'The user menu button is typically displayed within a Shellbar on the far-right side.' + } } }; @@ -369,9 +371,11 @@ Navigation.storyName = 'In-Place Navigation'; Navigation.parameters = { docs: { - storyDescription: `Menu with an sub-navigation that can be used for items that can be further grouped under a level but not necessarily visible to user always.<br> + description: { + story: `Menu with an sub-navigation that can be used for items that can be further grouped under a level but not necessarily visible to user always.<br> Follow the same template for the sub-navigation as you would for a normal menu. The same Popover body and footer work for the sub-navigation items too. ` + } } }; diff --git a/stories/vertical-navigation/vertical-navigation.stories.js b/stories/vertical-navigation/vertical-navigation.stories.js index 80d51b63e8..8092c0208e 100644 --- a/stories/vertical-navigation/vertical-navigation.stories.js +++ b/stories/vertical-navigation/vertical-navigation.stories.js @@ -80,9 +80,11 @@ Cozy.storyName = 'Default'; Cozy.parameters = { docs: { iframeHeight: 700, - storyDescription: ` + description: { + story: ` The default vertical navigation is comprised of several navigation list items. ` + } } }; @@ -113,9 +115,11 @@ export const Condensed = () => `<div class="fd-vertical-nav fd-vertical-nav--con Condensed.parameters = { docs: { iframeHeight: 400, - storyDescription: ` + description: { + story: ` In condensed mode, only icons are shown unless some navigation items have second levels and the second level is expanded. ` + } } }; @@ -162,9 +166,11 @@ Text.storyName = 'Text Only'; Text.parameters = { docs: { iframeHeight: 700, - storyDescription: ` + description: { + story: ` A vertical navigation list does not need to have icons. However this is only available in expanded mode. ` + } } }; @@ -243,9 +249,11 @@ Indication.storyName = 'Navigation Indication'; Indication.parameters = { docs: { iframeHeight: 700, - storyDescription: ` + description: { + story: ` All the possible combinations of navigation indication are visualized below. When a second level item has been navigated to and the second list has been collapsed, the indicator is shown on the right of the corresponding first level item, but the text and icon color do not change. ` + } } }; @@ -313,7 +321,9 @@ export const Grouping = () => `<div class="fd-vertical-nav"> Grouping.parameters = { docs: { iframeHeight: 700, - storyDescription: `The Vertical Navigation items can be further visually grouped using the Group Header List Item. + description: { + story: `The Vertical Navigation items can be further visually grouped using the Group Header List Item. ` + } } }; diff --git a/stories/wizard/wizard.stories.js b/stories/wizard/wizard.stories.js index 79a785add3..dd71f92f55 100644 --- a/stories/wizard/wizard.stories.js +++ b/stories/wizard/wizard.stories.js @@ -173,8 +173,10 @@ DefaultExample.storyName = 'Default'; DefaultExample.parameters = { docs: { iframeHeight: 950, - storyDescription: `The default wizard displays a walkthrough screen with forms split into sections. Once the user fills all of the necessary input fields, a button is displayed to go to the next section. A *Cancel* button is displayed in the footer, so the user can exit the wizard at any point during the process. However, if a user exits the wizard after adding their input, they will receive a warning that their information will be lost. + description: { + story: `The default wizard displays a walkthrough screen with forms split into sections. Once the user fills all of the necessary input fields, a button is displayed to go to the next section. A *Cancel* button is displayed in the footer, so the user can exit the wizard at any point during the process. However, if a user exits the wizard after adding their input, they will receive a warning that their information will be lost. ` + } } }; @@ -243,7 +245,8 @@ export const Customized = () => `<section class="fd-wizard"> Customized.parameters = { docs: { iframeHeight: 950, - storyDescription: `The wizard component can be customized with modifier classes. For instance, the example below has several modified elements: + description: { + story: `The wizard component can be customized with modifier classes. For instance, the example below has several modified elements: | **Element** | <div style="margin-left: 2rem;"> **Modifier class** </div> | <div style="margin-left: 2rem;"> **Modification** </div> | | :---- | :---- | :-------------- | @@ -253,6 +256,7 @@ Customized.parameters = { | \`fd-wizard__content\` | \`fd-wizard__content--list\` | <span style="margin-left: 2rem;"> The background of the wizard content is set to list </span> | | \`fd-wizard__connector\` | \`fd-wizard__connector--branching\` | <span style="margin-left: 2rem;"> Adds a branching step connector </span> | ` + } } }; @@ -622,10 +626,12 @@ export const Responsive = () => `<section class="fd-wizard"> Responsive.parameters = { docs: { iframeHeight: 950, - storyDescription: `If there is sufficient horizontal space, all labels are shown. + description: { + story: `If there is sufficient horizontal space, all labels are shown. However, when the width decreases, the step labels disappear. To hide the labels, add the \`fd-wizard__step--no-label\` modifier class to the step. The unselected steps should stack on top of each other when there is limited screen space. To stack them, add the \`fd-wizard__step--stacked\` modifier class. The last completed step should display on top, and requires a \`fd-wizard__step--stacked-top\` modifier class. Although they are stacked, upcoming steps do not require the stacked-top modifier class. ` + } } }; @@ -995,7 +1001,9 @@ export const RevertedSteps = () => `<section class="fd-wizard"> RevertedSteps.parameters = { docs: { iframeHeight: 950, - storyDescription: 'To indicate reverted steps, use combination of `fd-wizard__step--completed` and `fd-wizard__step--upcoming` classes.' + description: { + story: 'To indicate reverted steps, use combination of `fd-wizard__step--completed` and `fd-wizard__step--upcoming` classes.' + } } }; @@ -1322,7 +1330,9 @@ export const Mobile = () => `<div style="display: flex; justify-content: space-a Mobile.parameters = { docs: { iframeHeight: 950, - storyDescription: `For mobile devices, add the \`fd-bar--floating-footer\` modifier class to achieve a floating footer. modifier class to display a floating footer. The *Next Step* button is placed after the content whenever possible. However, it can be placed above the floating footer by adding the \`fd-wizard__next-step--floating\` modifier class. + description: { + story: `For mobile devices, add the \`fd-bar--floating-footer\` modifier class to achieve a floating footer. modifier class to display a floating footer. The *Next Step* button is placed after the content whenever possible. However, it can be placed above the floating footer by adding the \`fd-wizard__next-step--floating\` modifier class. ` + } } };