-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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>
- Loading branch information
1 parent
66f3ae5
commit 4c4f2f4
Showing
22 changed files
with
442 additions
and
967 deletions.
There are no files selected for viewing
31 changes: 31 additions & 0 deletions
31
packages/react/.storybook/templates/WithLayer/WithLayer.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div className={`${prefix}--with-layer`}> | ||
| <div className={`${prefix}--with-layer__layer`}> | ||
| <div className={`${prefix}--with-layer__label`}> | ||
| <Icon /> | ||
| Layer 1 | ||
| </div> | ||
| <div className={`${prefix}--with-layer__content`}> | ||
| {renderChild(0)} | ||
|
|
||
| <div className={`${prefix}--with-layer__layer`}> | ||
| <div className={`${prefix}--with-layer__label`}> | ||
| <Icon /> | ||
| Layer 2 | ||
| </div> | ||
| <div className={`${prefix}--with-layer__content`}> | ||
| <Layer> | ||
| {renderChild(1)} | ||
|
|
||
| <div className={`${prefix}--with-layer__layer`}> | ||
| <div className={`${prefix}--with-layer__label`}> | ||
| <Icon /> | ||
| Layer 3 | ||
| </div> | ||
| <div className={`${prefix}--with-layer__content`}> | ||
| <Layer>{renderChild(2)}</Layer> | ||
| </div> | ||
| </div> | ||
| </Layer> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| 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 }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export const prefix = 'carbon-storybook-template'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| $prefix: 'carbon-storybook-template'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.