Skip to content

Commit

Permalink
feat(layer/dropdown/combo-box): update stories to Storybook v7 (#11318)
Browse files Browse the repository at this point in the history
* feat(layer): updated to v7

* feat(dropdown): update story

* feat(combo-box): update to v7

* fix(stories): addressed feedback

* fix(markdown): replaced description

---------

Co-authored-by: kennylam <[email protected]>
  • Loading branch information
IgnacioBecerra and kennylam authored Jan 10, 2024
1 parent 5cb7e5c commit 4170f3d
Show file tree
Hide file tree
Showing 10 changed files with 289 additions and 180 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ const stories = glob.sync(
// '../src/**/*.mdx',
// '../src/**/*.stories.@(js|jsx|ts|tsx)',
// add mdx/story files as they are being worked on
'../src/**/combo-box.stories.ts',
'../src/**/combo-box.mdx',
'../src/**/dropdown.stories.ts',
'../src/**/dropdown.mdx',
'../src/**/data-table-*.stories.ts',
'../src/**/data-table.mdx',
'../src/**/ordered-list.stories.ts',
Expand All @@ -35,6 +39,8 @@ const stories = glob.sync(
'../src/**/button.stories.ts',
'../src/**/link.mdx',
'../src/**/link.stories.ts',
'../src/**/layer.stories.ts',
'../src/**/layer.mdx',
'../src/**/file-uploader.mdx',
'../src/**/modal.stories.ts',
'../src/**/modal.mdx',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import container from './container';
import { white, g10, g90, g100 } from '@carbon/themes';
import { breakpoints } from '@carbon/layout';
import theme from './theme';
import './templates/with-layer';

setCustomElementsManifest(customElements);

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import { Props, Description } from '@storybook/addon-docs/blocks';
import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks';
import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
import * as ComboBoxStories from './combo-box.stories';

<Meta of={ComboBoxStories} />

# Combo box

Expand All @@ -22,8 +25,8 @@ Here's a quick example to get you started.
import '@carbon/web-components/es/components/combo-box/index.js';
```

<Description markdown={`${cdnJs({ components: ['combo-box'] })}`} />
<Description markdown={`${cdnCss()}`} />
<Markdown>{`${cdnJs({ components: ['combo-box'] })}`}</Markdown>
<Markdown>{`${cdnCss()}`}</Markdown>

### HTML

Expand Down Expand Up @@ -94,12 +97,12 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
`<cds-combo-box open>`) and `false` means not setting the attribute (e.g.
`<cds-combo-box>` without `open` attribute).

<Props of="cds-combo-box" />
<ArgsTable of="cds-combo-box" />

## `<cds-combo-box-item>` attributes and properties

Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
`<cds-combo-box-item disabled>`) and `false` means not setting the attribute
(e.g. `<cds-combo-box-item>` without `disabled` attribute).

<Props of="cds-combo-box-item" />
<ArgsTable of="cds-combo-box-item" />
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,9 @@

import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { boolean, select } from '@storybook/addon-knobs';
import { DROPDOWN_DIRECTION, DROPDOWN_SIZE } from './combo-box';
import './combo-box-item';
import storyDocs from './combo-box-story.mdx';
import { prefix } from '../../globals/settings';
import textNullable from '../../../.storybook/knob-text-nullable';
import storyDocs from './combo-box.mdx';

const items = [
{
Expand Down Expand Up @@ -55,8 +52,79 @@ const sizes = {
[`Large size (${DROPDOWN_SIZE.LARGE})`]: DROPDOWN_SIZE.LARGE,
};

export const Default = () => {
return html`
const defaultArgs = {
direction: DROPDOWN_DIRECTION.BOTTOM,
disabled: false,
hideLabel: false,
helperText: 'This is some helper text',
invalid: false,
invalidText: 'invalid selection',
label: 'This is an example label',
readOnly: false,
size: null,
titleText: 'This is an example title',
value: '',
warn: false,
warnText: 'please notice the warning',
}

const controls = {
disabled: {
control: 'boolean',
description: `Specify if the dropdown should be disabled, or not.`,
},
direction: {
control: 'select', options: directionOptions,
description: `Dropdown direction`
},
hideLabel: {
control: 'boolean',
description: `Specify if the title text should be hidden, or not.`,
},
helperText: {
control: 'text',
description: `The helper text for the dropdown.`,
},
invalid: {
control: 'boolean',
description: `Specify if the dropdown should display an invalid icon, or not.`,
},
invalidText: {
control: 'text',
description: `Message which is displayed if the value is invalid.`,
},
label: {
control: 'text',
description: `The default content of the trigger button.`,
},
readOnly: {
control: 'boolean',
description: `Specify if the dropdown should be read only, or not.`,
},
size: {
control: 'select', options: sizes,
description: `Dropdown size.`
},
titleText: {
control: 'text',
description: `Text that will be read by a screen reader when visiting this control.`,
},
value: {
control: 'text',
description: `The value of the selected item.`,
},
warn: {
control: 'boolean',
description: `Specify whether the control is currently in warning state.`,
},
warnText: {
control: 'text',
description: `Text that is displayed when the control is in warning state.`,
},
};

export const Default = {
render: () => html`
<cds-combo-box
helper-text="Combobox helper text"
title-text="ComboBox title">
Expand All @@ -68,11 +136,11 @@ export const Default = () => {
`
)}
</cds-combo-box>
`;
`
};

export const WithLayer = () => {
return html`
export const WithLayer = {
render: () => html`
<sb-template-layers>
<div style="width:300px">
<cds-combo-box
Expand All @@ -91,11 +159,13 @@ export const WithLayer = () => {
</cds-combo-box>
</div>
</sb-template-layers>
`;
`
};

export const Playground = (args) => {
const {
export const Playground = {
argTypes: controls,
args: defaultArgs,
render: ({
disabled,
helperText,
invalid,
Expand All @@ -110,8 +180,7 @@ export const Playground = (args) => {
type,
invalidText,
value,
} = args?.[`${prefix}-combo-box`] ?? {};
return html`
}) => html`
<cds-combo-box
?disabled="${disabled}"
?hide-label=${hideLabel}
Expand All @@ -135,51 +204,22 @@ export const Playground = (args) => {
`
)}
</cds-combo-box>
`;
};

Playground.parameters = {
knobs: {
[`${prefix}-combo-box`]: () => ({
direction: select(
'Direction',
directionOptions,
DROPDOWN_DIRECTION.BOTTOM
),
disabled: boolean('Disabled (disabled)', false),
helperText: textNullable(
'Helper text (helper-text)',
'Optional helper text'
),
hideLabel: boolean('Hide label (hide-label)', false),
invalid: boolean('Invalid (invalid)', false),
invalidText: textNullable(
'Invalid text (invalid-text)',
'invalid selection'
),
readOnly: boolean('Read only (read-only)', false),
titleText: textNullable('Title text (title-text)', 'ComboBox title'),
size: select('Size (size)', sizes, null),
value: textNullable('Selected value (value)', ''),
label: textNullable('Placeholder (label)', ''),
warn: boolean('Warn (warn)', false),
warnText: textNullable(
'Warn text (warn-text)',
'please notice the warning'
),
}),
},
};
`
}

export default {
const meta = {
title: 'Components/Combo box',
parameters: {
...storyDocs.parameters,
},
decorators: [
(story, { name }) => {
const width = !name.toLowerCase().includes('layer') ? `width:300px` : ``;
return html` <div style="${width}">${story()}</div> `;
},
],
parameters: {
docs: {
page: storyDocs,
},
},
};

export default meta;
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import { Props, Description } from '@storybook/addon-docs/blocks';
import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks';
import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
import * as DropdownStories from './dropdown.stories';

<Meta of={DropdownStories} />

# Dropdown

Expand All @@ -22,8 +25,8 @@ Here's a quick example to get you started.
import '@carbon/web-components/es/components/dropdown/index.js';
```

<Description markdown={`${cdnJs({ components: ['dropdown'] })}`} />
<Description markdown={`${cdnCss()}`} />
<Markdown>{`${cdnJs({ components: ['dropdown'] })}`}</Markdown>
<Markdown>{`${cdnCss()}`}</Markdown>

### HTML

Expand Down Expand Up @@ -75,12 +78,12 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
`<cds-dropdown open>`) and `false` means not setting the attribute (e.g.
`<cds-dropdown>` without `open` attribute).

<Props of="cds-dropdown" />
<ArgsTable of="cds-dropdown" />

## `<cds-dropdown-item>` attributes and properties

Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
`<cds-dropdown-item disabled>`) and `false` means not setting the attribute
(e.g. `<cds-dropdown-item>` without `disabled` attribute).

<Props of="cds-dropdown-item" />
<ArgsTable of="cds-dropdown-item" />
Loading

0 comments on commit 4170f3d

Please sign in to comment.