From d8312b91edf1277e094045849e700cce77b62456 Mon Sep 17 00:00:00 2001 From: Anna Wen <54281166+annawen1@users.noreply.github.com> Date: Fri, 29 Mar 2024 15:26:53 -0400 Subject: [PATCH] chore(global-banner): update to storybook 8 format --- .../global-banner/_global-banner.scss | 104 +++++++------- packages/web-components/.storybook/main.ts | 2 + .../{README.stories.mdx => global-banner.mdx} | 22 +-- .../__stories__/global-banner.stories.ts | 130 ++++++++---------- 4 files changed, 121 insertions(+), 137 deletions(-) rename packages/web-components/src/components/global-banner/__stories__/{README.stories.mdx => global-banner.mdx} (87%) diff --git a/packages/styles/scss/components/global-banner/_global-banner.scss b/packages/styles/scss/components/global-banner/_global-banner.scss index 7883be0e729..04d05d049b4 100644 --- a/packages/styles/scss/components/global-banner/_global-banner.scss +++ b/packages/styles/scss/components/global-banner/_global-banner.scss @@ -137,58 +137,6 @@ } } - &[has-image] { - .#{$prefix}--global-banner-image-container { - display: none; - } - } - - &[image-width='4-col'] { - .#{$prefix}--global-banner-image-container { - @include breakpoint(lg) { - @include make-col(4, 16); - } - } - - .#{$prefix}--global-banner-text-container { - @include breakpoint(lg) { - @include make-col(7, 16); - } - } - - .#{$prefix}--global-banner-cta-container { - @include breakpoint(lg) { - @include make-col-offset(1, 16); - } - } - } - - &[image-width='8-col'] { - .#{$prefix}--global-banner-image-container { - @include make-col(8, 16); - } - - .#{$prefix}--global-banner-text-container { - @include breakpoint(lg) { - @include make-col(4, 16); - } - } - } - - &:not([has-image]) { - .#{$prefix}--global-banner-text-container { - @include breakpoint(lg) { - @include make-col(11, 16); - } - } - - .#{$prefix}--global-banner-cta-container { - @include breakpoint(lg) { - @include make-col-offset(1, 16); - } - } - } - ::slotted(#{$c4d-prefix}-button) { @include theme($g100, true); @@ -241,4 +189,56 @@ object-fit: cover; } } + + :host(#{$c4d-prefix}-global-banner[has-image]) { + .#{$prefix}--global-banner-image-container { + display: none; + } + } + + :host(#{$c4d-prefix}-global-banner[image-width='4-col']) { + .#{$prefix}--global-banner-image-container { + @include breakpoint(lg) { + @include make-col(4, 16); + } + } + + .#{$prefix}--global-banner-text-container { + @include breakpoint(lg) { + @include make-col(7, 16); + } + } + + .#{$prefix}--global-banner-cta-container { + @include breakpoint(lg) { + @include make-col-offset(1, 16); + } + } + } + + :host(#{$c4d-prefix}-global-banner[image-width='8-col']) { + .#{$prefix}--global-banner-image-container { + @include make-col(8, 16); + } + + .#{$prefix}--global-banner-text-container { + @include breakpoint(lg) { + @include make-col(4, 16); + } + } + } + + :host(#{$c4d-prefix}-global-banner:not([has-image])) { + .#{$prefix}--global-banner-text-container { + @include breakpoint(lg) { + @include make-col(11, 16); + } + } + + .#{$prefix}--global-banner-cta-container { + @include breakpoint(lg) { + @include make-col-offset(1, 16); + } + } + } } diff --git a/packages/web-components/.storybook/main.ts b/packages/web-components/.storybook/main.ts index ac5a52b3e58..2de6559e1c1 100644 --- a/packages/web-components/.storybook/main.ts +++ b/packages/web-components/.storybook/main.ts @@ -32,6 +32,8 @@ const stories = glob.sync( '../src/**/card-in-card.stories.ts', '../src/**/horizontal-rule.mdx', '../src/**/horizontal-rule.stories.ts', + '../src/**/global-banner.mdx', + '../src/**/global-banner.stories.ts', ], { ignore: ['../src/**/docs/*.mdx'], diff --git a/packages/web-components/src/components/global-banner/__stories__/README.stories.mdx b/packages/web-components/src/components/global-banner/__stories__/global-banner.mdx similarity index 87% rename from packages/web-components/src/components/global-banner/__stories__/README.stories.mdx rename to packages/web-components/src/components/global-banner/__stories__/global-banner.mdx index c7ba6417a5d..fcc2d1d6402 100644 --- a/packages/web-components/src/components/global-banner/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/global-banner/__stories__/global-banner.mdx @@ -1,12 +1,14 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgTypes, Markdown, Meta } from '@storybook/blocks'; import contributing from '../../../../../../docs/contributing-license.md?raw'; import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn'; -import '../index'; +import * as GlobalBannerStories from './global-banner.stories'; + + # Global banner -A Global banner is the only component allowed to show up above the Masthead, -and should be used exclusively for global and critical announcements (e.g. THINK +A Global banner is the only component allowed to show up above the Masthead, and +should be used exclusively for global and critical announcements (e.g. THINK global event, COVID 19 messages etc). > 💡 Check our @@ -44,9 +46,7 @@ within, it can move itself to the proper place automatically. Hybrid cloud and AI for smarter business - Las Vegas, June 15-18, 2025 + Las Vegas, June 15-18, 2025 + ## Stable selectors @@ -120,11 +120,11 @@ See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used. -| Web Components selector | Compatibility selector | Description | -| -------------------------------- | --------------------------------------------- | ----------- | +| Web Components selector | Compatibility selector | Description | +| ----------------------------- | ------------------------------------------ | ----------- | | `` | `data-autoid="c4d--global-banner"` | Component | | `` | `data-autoid="c4d--global-banner-heading"` | Component | | `` | `data-autoid="c4d--global-banner-copy"` | Component | | `` | `data-autoid="c4d--global-banner-image"` | Component | - +{contributing} diff --git a/packages/web-components/src/components/global-banner/__stories__/global-banner.stories.ts b/packages/web-components/src/components/global-banner/__stories__/global-banner.stories.ts index 537a4d81730..780ba5e949d 100644 --- a/packages/web-components/src/components/global-banner/__stories__/global-banner.stories.ts +++ b/packages/web-components/src/components/global-banner/__stories__/global-banner.stories.ts @@ -8,9 +8,7 @@ */ import { html } from 'lit'; -import { select, text } from '@storybook/addon-knobs'; import '../index'; -import readme from './README.stories.mdx'; // eslint-disable-next-line sort-imports import img4Col from '../../../../.storybook/storybook-images/assets/global-banner/global-banner-4-col-image.jpg'; @@ -21,7 +19,6 @@ import img4ColXlg from '../../../../.storybook/storybook-images/assets/global-ba import img8ColXlg from '../../../../.storybook/storybook-images/assets/global-banner/global-banner-8-col-xlg.jpg'; // import StoryContent from '../../back-to-top/__stories__/data/content'; -import textNullable from '../../../../.storybook/knob-text-nullable'; const imageWidthOptions = { [`4 Columns`]: `4-col`, @@ -39,84 +36,69 @@ const srcsets = { '8-col': [img8ColLg, img8ColXlg, img8Col], }; -export const Default = (args) => { - const { heading, copy, ctaCopy, imageWidth } = args?.GlobalBanner ?? {}; - - const bannerHeading = document.querySelector('c4d-global-banner-heading'); - const bannerCopy = document.querySelector('c4d-global-banner-copy'); - - if (bannerHeading) { - bannerHeading!.shadowRoot!.textContent = heading; - } - - if (bannerCopy) { - bannerCopy!.shadowRoot!.textContent = copy; - } - - const srcset = srcsets[imageWidth]; - - return html` - - ${imageWidth - ? html` - - - - - - - - - ` - : ``} - ${heading} - - - ${ctaCopy} - - - `; +const controls = { + imageWidth: { + control: 'select', + description: 'Image width', + options: imageWidthOptions, + }, }; -Default.story = { - parameters: { - ...readme.parameters, - knobs: { - GlobalBanner: () => ({ - heading: textNullable( - 'Heading:', - 'Hybrid cloud and AI for smarter business' - ), - copy: text('Copy (optional):', 'Las Vegas, June 15-18, 2025'), - ctaCopy: textNullable('CTA copy:', 'Register for Think. Free'), - imageWidth: select('Image width:', imageWidthOptions, '4-col'), - }), - }, - }, +const defaultArgs = { + imageWidth: imageWidthOptions['4 Columns'], }; -export default { - title: 'Components/Global banner', +export const Default = { + argTypes: controls, + args: defaultArgs, decorators: [ (story) => { - return html` ${story()} `; + return html`
${story()}
`; }, ], - parameters: { - ...readme.parameters, - }, - propsSet: { - default: { - globalBanner: { - heading: 'Hybrid cloud and AI for smarter business', - copy: 'Las Vegas, June 15-18, 2025', - ctaCopy: 'Register for Think. Free', - imageWidth: '4-col', - }, - }, + render: ({ imageWidth }) => { + const srcset = srcsets[imageWidth]; + + return html` + + ${imageWidth + ? html` + + + + + + + + + ` + : ``} + Hybrid cloud and AI for smarter business + Las Vegas, June 15-18, 2025 + + Register for Think. Free + + + `; }, }; + +const meta = { + title: 'Components/Global banner', +}; + +export default meta;