-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(storybook): synced with-layer stories with redesign (#10354)
* docs(storybook): synced with-layer stories with redesign * fix(tile): set width to expandable story * fix(with-layers): ensured single element needed * fix(layers): updated comment * fix(storybook): addressed comments --------- Co-authored-by: kennylam <[email protected]>
- Loading branch information
1 parent
16612d4
commit 8735972
Showing
9 changed files
with
177 additions
and
212 deletions.
There are no files selected for viewing
38 changes: 38 additions & 0 deletions
38
web-components/packages/carbon-web-components/.storybook/templates/with-layer.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,38 @@ | ||
| // | ||
| // Copyright IBM Corp. 2019, 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. | ||
| // | ||
|
|
||
| @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 '@carbon/styles/scss/config' 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; | ||
| } |
90 changes: 90 additions & 0 deletions
90
web-components/packages/carbon-web-components/.storybook/templates/with-layer.ts
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,90 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * Copyright IBM Corp. 2019, 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 { LitElement, html } from 'lit'; | ||
| import { customElement, property } from 'lit/decorators.js'; | ||
| import Layers from '@carbon/icons/lib/layers/16'; | ||
| import { prefix } from '../../src/globals/settings'; | ||
|
|
||
| import styles from './with-layer.scss'; | ||
|
|
||
| /** | ||
| * Storybook template layer component, strictly for presentation purposes | ||
| * | ||
| * @element sb-template-layers | ||
| * @slot The elements contained within the component. | ||
| */ | ||
| @customElement(`sb-template-layers`) | ||
| class CDSLayer extends LitElement { | ||
| @property() | ||
| content; | ||
|
|
||
| private _handleSlotChange({ target }: Event) { | ||
| if (!this.content) { | ||
| const content = (target as HTMLSlotElement) | ||
| .assignedNodes() | ||
| .filter( | ||
| (node) => | ||
| node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim() | ||
| ); | ||
|
|
||
| this.content = content[0]; | ||
| } | ||
| } | ||
|
|
||
| updated() { | ||
| if (this.content) { | ||
| const layer2 = this.content.cloneNode(true) as HTMLElement; | ||
| const layer3 = this.content.cloneNode(true) as HTMLElement; | ||
| layer2.setAttribute('slot', 'layer-2'); | ||
| layer3.setAttribute('slot', 'layer-3'); | ||
| this.appendChild(layer2); | ||
| this.appendChild(layer3); | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| return html` | ||
| <div class="${prefix}--with-layer"> | ||
| <div class="${prefix}--with-layer__layer"> | ||
| <div class="${prefix}--with-layer__label">${Layers()} Layer 1</div> | ||
| <div class="${prefix}--with-layer__content"> | ||
| <cds-layer> | ||
| <slot @slotchange="${this._handleSlotChange}"></slot> | ||
| <div class="${prefix}--with-layer__layer"> | ||
| <div class="${prefix}--with-layer__label"> | ||
| ${Layers()} Layer 2 | ||
| </div> | ||
| <div class="${prefix}--with-layer__content"> | ||
| <cds-layer> | ||
| <slot name="layer-2"></slot> | ||
| <div class="${prefix}--with-layer__layer"> | ||
| <div class="${prefix}--with-layer__label"> | ||
| ${Layers()} Layer 3 | ||
| </div> | ||
| <div class="${prefix}--with-layer__content"> | ||
| <cds-layer> | ||
| <slot name="layer-3"></slot> | ||
| </cds-layer> | ||
| </div> | ||
| </div> | ||
| </cds-layer> | ||
| </div> | ||
| </div> | ||
| </cds-layer> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; | ||
| } | ||
|
|
||
| static styles = styles; | ||
| } | ||
|
|
||
| export default CDSLayer; |
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
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
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.