From bc1f2ad89013f2c59755e2659854a277ce885ac0 Mon Sep 17 00:00:00 2001 From: Anna Wen <54281166+annawen1@users.noreply.github.com> Date: Fri, 29 Mar 2024 16:52:54 -0400 Subject: [PATCH] chore(image): update to storybook 8 format --- packages/web-components/.storybook/main.ts | 2 + .../{README.stories.mdx => image.mdx} | 29 ++-- .../image/__stories__/image.stories.ts | 163 ++++++++---------- 3 files changed, 88 insertions(+), 106 deletions(-) rename packages/web-components/src/components/image/__stories__/{README.stories.mdx => image.mdx} (83%) diff --git a/packages/web-components/.storybook/main.ts b/packages/web-components/.storybook/main.ts index 2de6559e1c1..258d2934bae 100644 --- a/packages/web-components/.storybook/main.ts +++ b/packages/web-components/.storybook/main.ts @@ -34,6 +34,8 @@ const stories = glob.sync( '../src/**/horizontal-rule.stories.ts', '../src/**/global-banner.mdx', '../src/**/global-banner.stories.ts', + '../src/**/image.mdx', + '../src/**/image.stories.ts', ], { ignore: ['../src/**/docs/*.mdx'], diff --git a/packages/web-components/src/components/image/__stories__/README.stories.mdx b/packages/web-components/src/components/image/__stories__/image.mdx similarity index 83% rename from packages/web-components/src/components/image/__stories__/README.stories.mdx rename to packages/web-components/src/components/image/__stories__/image.mdx index ea4000e0a28..cfadd2f0815 100644 --- a/packages/web-components/src/components/image/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/image/__stories__/image.mdx @@ -1,27 +1,26 @@ -import { - Preview, - Props, - Description, - Story, -} 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 * as ImageStories from './image.stories'; + + # Image -> The image component is used to embed images within content and can display a -> specific responsive image depending on viewport size. +The image component is used to embed images within content and can display a +specific responsive image depending on viewport size. -> The Image component leverages the image component, the lightbox media viewer -> and can also display a caption for the image +The Image component leverages the image component, the lightbox media viewer and +can also display a caption for the image -> Image items are used to change how the image behaves at different screen -> sizes. Below you'll find an example with and without media query behaviors. +Image items are used to change how the image behaves at different screen sizes. +Below you'll find an example with and without media query behaviors. > 💡 Check our > [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/image) > example implementation. -> [![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/image) + +[![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/image) ## Getting started @@ -136,7 +135,7 @@ in the lighbox media viewer upon clicking the original image. ## Props - + ## Stable selectors @@ -149,4 +148,4 @@ to see how Web Components selector and `data-autoid` should be used. | `` | `data-autoid="c4d--image"` | Component | | `` | `data-autoid="c4d--image-item"` | Interactive | - +{contributing} diff --git a/packages/web-components/src/components/image/__stories__/image.stories.ts b/packages/web-components/src/components/image/__stories__/image.stories.ts index a69ae3213a3..65cd1aa040c 100644 --- a/packages/web-components/src/components/image/__stories__/image.stories.ts +++ b/packages/web-components/src/components/image/__stories__/image.stories.ts @@ -9,8 +9,6 @@ import '../image'; import { html } from 'lit'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { select, boolean } from '@storybook/addon-knobs'; // eslint-disable-next-line sort-imports import imgLg16x9 from '../../../../.storybook/storybook-images/assets/720/fpo--16x9--720x405--005.jpg'; import imgLg2x1 from '../../../../.storybook/storybook-images/assets/720/fpo--2x1--720x360--005.jpg'; @@ -28,8 +26,6 @@ import imgSm3x2 from '../../../../.storybook/storybook-images/assets/320/fpo--3x import imgSm4x3 from '../../../../.storybook/storybook-images/assets/320/fpo--4x3--320x160--004.jpg'; import imgSm1x1 from '../../../../.storybook/storybook-images/assets/320/fpo--1x1--320x320--005.jpg'; import chartSvg from './chart-svg.js'; -import readme from './README.stories.mdx'; -import textNullable from '../../../../.storybook/knob-text-nullable'; import { LIGHTBOX_CONTRAST } from '../image'; const contrasts = { @@ -54,47 +50,41 @@ const srcsets = { '1x1': [imgSm1x1, imgMd1x1, imgLg1x1], }; -export const Default = (args) => { - const { - alt, - defaultSrc, - heading, - copy, - border, - lightbox, - lightboxContrast, - longDescription, - } = args?.['c4d-image'] ?? {}; - // TODO: See if we can fix unwanted `&` to `&` conversion upon changing the select knob - const srcset = srcsets[defaultSrc?.replace(/&/, '&')]; - return html` - - ${!longDescription - ? undefined - : html`
${longDescription}
`} - ${!srcset - ? undefined - : html` - - - - - - - `} - - `; +const controls = { + defaultSrc: { + control: 'select', + description: 'Default image (default-src)', + options: images, + }, + border: { + control: 'boolean', + description: 'Border (border)', + }, + lightbox: { + control: 'boolean', + description: 'Lightbox (lightbox)', + }, + lightboxContrast: { + control: 'select', + if: { arg: 'lightbox' }, + description: 'Lightbox contrast (lightbox-contrast)', + options: contrasts, + }, + longDescription: { + control: 'boolean', + description: 'Long description example', + }, }; -export default { - title: 'Components/Image', +const defaultArgs = { + defaultSrc: images['2:1'], + border: false, + lightbox: false, +}; + +export const Default = { + argTypes: controls, + args: defaultArgs, decorators: [ (story) => html` @@ -105,53 +95,44 @@ export default { `, ], - parameters: { - ...readme.parameters, - hasStoryPadding: true, - knobs: { - 'c4d-image': () => { - const alt = textNullable('Alt text', 'Image alt text'); - const defaultSrc = select( - 'Default image (default-src)', - images, - imgLg2x1 - ); - const border = boolean('Border', false); - const copy = textNullable('Copy (copy)', 'Lorem ipsum dolor sit amet'); - const heading = textNullable('Heading (heading)', 'This is a caption'); - const longDescription = textNullable( - 'Long Description', - 'Optional long descriptive text that is visually hidden to help screen reader users.' - ); - const lightbox = boolean('Lightbox (lightbox)', false); - const lightboxContrast = lightbox - ? select('Lightbox contrast', contrasts, LIGHTBOX_CONTRAST.LIGHT) - : ''; - return { - alt, - defaultSrc, - border, - copy, - heading, - longDescription, - lightbox, - lightboxContrast, - }; - }, - }, - propsSet: { - default: { - 'c4d-image': { - alt: 'Image alt text', - defaultSrc: imgLg2x1, - border: false, - lightbox: false, - copy: 'Lorem ipsum dolor sit amet', - heading: 'This is a caption', - longDescription: - 'Optional long descriptive text that is visually hidden to help screen reader users.', - }, - }, - }, + render: ({ + defaultSrc, + border, + lightbox, + lightboxContrast, + longDescription, + }) => { + // TODO: See if we can fix unwanted `&` to `&` conversion upon changing the select knob + const srcset = srcsets[defaultSrc?.replace(/&/, '&')]; + return html` + + ${!longDescription + ? undefined + : html`
${longDescription}
`} + ${!srcset + ? undefined + : html` + + + + + + + `} + + `; }, }; + +const meta = { + title: 'Components/Image', +}; + +export default meta;