From 115e13e5ad296eea642f178cb5077c71a6174414 Mon Sep 17 00:00:00 2001 From: Matthew Oliveira Date: Wed, 10 Jan 2024 17:40:37 -0500 Subject: [PATCH] chore(breadcrumb): finish updating breadcrumb to sb v7 (#11310) Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com> --- .../carbon-web-components/.storybook/main.ts | 2 + .../components/breadcrumb/breadcrumb-story.ts | 116 --------------- .../{breadcrumb-story.mdx => breadcrumb.mdx} | 9 +- .../breadcrumb/breadcrumb.stories.ts | 133 ++++++++++++++++++ 4 files changed, 141 insertions(+), 119 deletions(-) delete mode 100644 packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.ts rename packages/carbon-web-components/src/components/breadcrumb/{breadcrumb-story.mdx => breadcrumb.mdx} (93%) create mode 100644 packages/carbon-web-components/src/components/breadcrumb/breadcrumb.stories.ts diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts index a9f8668f769..0d232c6bb51 100644 --- a/packages/carbon-web-components/.storybook/main.ts +++ b/packages/carbon-web-components/.storybook/main.ts @@ -20,6 +20,8 @@ const stories = glob.sync( // '../src/**/*.mdx', // '../src/**/*.stories.@(js|jsx|ts|tsx)', // add mdx/story files as they are being worked on + '../src/**/breadcrumb.mdx', + '../src/**/breadcrumb.stories.ts', '../src/**/combo-box.stories.ts', '../src/**/combo-box.mdx', '../src/**/content-switcher.mdx', diff --git a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.ts b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.ts deleted file mode 100644 index 7e80f515505..00000000000 --- a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.ts +++ /dev/null @@ -1,116 +0,0 @@ -/** - * @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 { html } from 'lit'; -import './breadcrumb'; -import './breadcrumb-item'; -import './breadcrumb-link'; -import './breadcrumb-overflow-menu'; -import '../overflow-menu/overflow-menu-body'; -import './breadcrumb-skeleton'; -import { prefix } from '../../globals/settings'; -import { boolean, text } from '@storybook/addon-knobs'; -import storyDocs from './breadcrumb-story.mdx'; - -export const Default = () => { - return html` - - - Breadcrumb 1 - - - Breadcrumb 2 - - - Breadcrumb 3 - - - Breadcrumb 4 - - - `; -}; - -Default.storyName = 'Default'; - -export default { - title: 'Components/Breadcrumb', - parameters: { - ...storyDocs.parameters, - }, -}; - -export const BreadcrumbWithOverflowMenu = () => html` - - - Breadcrumb 1 - - - Breadcrumb 2 - - - - - Breadcrumb 3 - Breadcrumb 4 - - - - - Breadcrumb 5 - - - Breadcrumb 6 - - -`; - -BreadcrumbWithOverflowMenu.storyName = 'Breadcrumb With Overflow Menu'; - -export const skeleton = () => { - return html` `; -}; - -export const Playground = (args) => { - const { ariaLabel, classes, noTrailingSlash } = - args?.[`${prefix}-breadcrumb-playground`] ?? {}; - return html` - - - Breadcrumb 1 - - - Breadcrumb 2 - - - Breadcrumb 3 - - - Breadcrumb 4 - - - `; -}; - -Playground.parameters = { - ...storyDocs.parameters, - knobs: { - [`${prefix}-breadcrumb-playground`]: () => ({ - ariaLabel: text('aria-label (aria-label)', ''), - classes: text('class (class)', ''), - noTrailingSlash: boolean( - 'Optional prop to omit the trailing slash for the breadcrumbs (noTrailingSlash)', - false - ), - }), - }, -}; diff --git a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.mdx b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.mdx similarity index 93% rename from packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.mdx rename to packages/carbon-web-components/src/components/breadcrumb/breadcrumb.mdx index e5eddd72750..c0e1b92fc89 100644 --- a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.mdx +++ b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.mdx @@ -1,5 +1,8 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Description } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as BreadcrumbStories from './breadcrumb.stories'; + + # Breadcrumb @@ -116,8 +119,8 @@ import '@carbon/web-components/es/components/breadcrumb/index.js'; ## `` attributes, properties and events - + ## `` attributes, properties and events - + diff --git a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.stories.ts b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.stories.ts new file mode 100644 index 00000000000..1d0453947ff --- /dev/null +++ b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.stories.ts @@ -0,0 +1,133 @@ +/** + * @license + * + * Copyright IBM Corp. 2019, 2024 + * + * 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 { html } from 'lit'; +import './breadcrumb'; +import './breadcrumb-item'; +import './breadcrumb-link'; +import './breadcrumb-overflow-menu'; +import '../overflow-menu/overflow-menu-body'; +import './breadcrumb-skeleton'; +import storyDocs from './breadcrumb.mdx'; + +const args = { + ariaLabel: '', + classes: '', + noTrailingSlash: false, +}; + +const argTypes = { + ariaLabel: { + control: 'text', + description: 'Specify the label for the breadcrumb container.', + name: 'aria-label', + }, + classes: { + control: 'text', + description: + 'Specify an optional className to be applied to the container node.', + }, + noTrailingSlash: { + control: 'boolean', + description: + 'Optional prop to omit the trailing slash for the breadcrumbs.', + }, +}; + +export const Default = { + render: () => { + return html` + + + Breadcrumb 1 + + + Breadcrumb 2 + + + Breadcrumb 3 + + + Breadcrumb 4 + + + `; + }, +}; + +export const BreadcrumbWithOverflowMenu = { + render: () => html` + + + Breadcrumb 1 + + + Breadcrumb 2 + + + + + Breadcrumb 3 + Breadcrumb 4 + + + + + Breadcrumb 5 + + + Breadcrumb 6 + + + `, +}; + +export const Skeleton = { + render: () => { + return html` `; + }, +}; + +export const Playground = { + args, + argTypes, + render: (args) => { + const { ariaLabel, classes, noTrailingSlash } = args ?? {}; + return html` + + + Breadcrumb 1 + + + Breadcrumb 2 + + + Breadcrumb 3 + + + Breadcrumb 4 + + + `; + }, +}; + +const meta = { + title: 'Components/Breadcrumb', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; + +export default meta;