From 52a2391abd263f70f89ccc16156a810f52c6af8e Mon Sep 17 00:00:00 2001 From: Marcelo JCS Date: Tue, 30 Jan 2024 17:12:29 -0300 Subject: [PATCH] [carbon-web-components]: popover Storybook 7 update (#11407) * feat(popover): convert to storybook 7: rename files * feat(popover): convert to storybook 7 * feat(popover): Change Storybook main file * feat(popover): Small code adjustments * feat(popover): Small code adjustment --------- Co-authored-by: Ignacio Becerra --- .../carbon-web-components/.storybook/main.ts | 2 + .../src/components/popover/popover-story.ts | 195 ---------------- .../{popover-story.mdx => popover.mdx} | 9 +- .../src/components/popover/popover.stories.ts | 216 ++++++++++++++++++ 4 files changed, 224 insertions(+), 198 deletions(-) delete mode 100644 packages/carbon-web-components/src/components/popover/popover-story.ts rename packages/carbon-web-components/src/components/popover/{popover-story.mdx => popover.mdx} (92%) create mode 100644 packages/carbon-web-components/src/components/popover/popover.stories.ts diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts index 2aa1cee370e..5aef067e4b6 100644 --- a/packages/carbon-web-components/.storybook/main.ts +++ b/packages/carbon-web-components/.storybook/main.ts @@ -55,6 +55,8 @@ const stories = glob.sync( '../src/**/layer.mdx', '../src/**/file-uploader.mdx', '../src/**/file-uploader.stories.ts', + '../src/**/popover.mdx', + '../src/**/popover.stories.ts', '../src/**/form-group.mdx', '../src/**/form-group.stories.ts', '../src/**/modal.stories.ts', diff --git a/packages/carbon-web-components/src/components/popover/popover-story.ts b/packages/carbon-web-components/src/components/popover/popover-story.ts deleted file mode 100644 index 480ed808633..00000000000 --- a/packages/carbon-web-components/src/components/popover/popover-story.ts +++ /dev/null @@ -1,195 +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 { boolean, select } from '@storybook/addon-knobs'; -import './popover'; -import './popover-content'; -import '../radio-button/index'; -import { POPOVER_ALIGNMENT } from './defs'; -import storyDocs from './popover-story.mdx'; -import { prefix } from '../../globals/settings'; -import Checkbox16 from '@carbon/icons/lib/checkbox/16'; -import Settings16 from '@carbon/icons/lib/settings/16'; - -import styles from './popover-story.scss?lit'; - -const popoverAlignments = { - [`top`]: POPOVER_ALIGNMENT.TOP, - [`top-left`]: POPOVER_ALIGNMENT.TOP_LEFT, - [`top-right`]: POPOVER_ALIGNMENT.TOP_RIGHT, - [`bottom`]: POPOVER_ALIGNMENT.BOTTOM, - [`bottom-left`]: POPOVER_ALIGNMENT.BOTTOM_LEFT, - [`bottom-right`]: POPOVER_ALIGNMENT.BOTTOM_RIGHT, - [`left`]: POPOVER_ALIGNMENT.LEFT, - [`left-bottom`]: POPOVER_ALIGNMENT.LEFT_BOTTOM, - [`left-top`]: POPOVER_ALIGNMENT.LEFT_TOP, - [`right`]: POPOVER_ALIGNMENT.RIGHT, - [`right-bottom`]: POPOVER_ALIGNMENT.RIGHT_BOTTOM, - [`right-top`]: POPOVER_ALIGNMENT.RIGHT_TOP, -}; - -export const Playground = (args) => { - const { caret, highContrast, align, dropShadow, open } = - args?.[`${prefix}-popover`] ?? {}; - return html` - - -
${Checkbox16()}
- -
-

Available storage

-

- This server has 150 GB of block storage remaining. -

-
- - - `; -}; - -Playground.storyName = 'Playground'; - -export const TabTip = () => { - const handleClick = (id) => { - const popover = document.querySelector(id); - const open = popover?.hasAttribute('open'); - open ? popover?.removeAttribute('open') : popover?.setAttribute('open', ''); - }; - - return html` - -
- - - -
- - - - - - -
-
- Edit columns - - - -
-
- - - - - -
- - - - - - -
-
- Edit columns - - - -
-
- - -
- `; -}; - -Playground.parameters = { - knobs: { - [`${prefix}-popover`]: () => ({ - caret: boolean('caret (caret)', true), - highContrast: boolean('high contrast (highContrast)', false), - align: select( - 'Align (align)', - popoverAlignments, - popoverAlignments.bottom - ), - dropShadow: boolean('drop shadow (dropShadow)', true), - open: boolean('open (open)', true), - }), - }, -}; - -Playground.decorators = [ - (story) => html`
${story()}
`, -]; - -export default { - parameters: { - ...storyDocs.parameters, - }, - title: 'Components/Popover', -}; diff --git a/packages/carbon-web-components/src/components/popover/popover-story.mdx b/packages/carbon-web-components/src/components/popover/popover.mdx similarity index 92% rename from packages/carbon-web-components/src/components/popover/popover-story.mdx rename to packages/carbon-web-components/src/components/popover/popover.mdx index 98278d95e40..6a88042f80b 100644 --- a/packages/carbon-web-components/src/components/popover/popover-story.mdx +++ b/packages/carbon-web-components/src/components/popover/popover.mdx @@ -1,4 +1,7 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Description, Meta } from '@storybook/addon-docs/blocks'; +import * as PopoverStories from './popover.stories'; + + import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; # Popover @@ -98,8 +101,8 @@ import Settings16 from '@carbon/icons/lib/settings/16'; ## `` attributes and properties - + ## `` attributes and properties - + diff --git a/packages/carbon-web-components/src/components/popover/popover.stories.ts b/packages/carbon-web-components/src/components/popover/popover.stories.ts new file mode 100644 index 00000000000..c1761a2d6cf --- /dev/null +++ b/packages/carbon-web-components/src/components/popover/popover.stories.ts @@ -0,0 +1,216 @@ +/** + * @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 './popover'; +import './popover-content'; +import '../radio-button/index'; +import { POPOVER_ALIGNMENT } from './defs'; +import storyDocs from './popover.mdx'; +import { prefix } from '../../globals/settings'; +import Checkbox16 from '@carbon/icons/lib/checkbox/16'; +import Settings16 from '@carbon/icons/lib/settings/16'; +import '../checkbox/checkbox'; + +import styles from './popover-story.scss?lit'; +const controls = { + align: { + control: 'select', + options: [ + POPOVER_ALIGNMENT.TOP, + POPOVER_ALIGNMENT.TOP_LEFT, + POPOVER_ALIGNMENT.TOP_RIGHT, + POPOVER_ALIGNMENT.BOTTOM, + POPOVER_ALIGNMENT.BOTTOM_LEFT, + POPOVER_ALIGNMENT.BOTTOM_RIGHT, + POPOVER_ALIGNMENT.LEFT, + POPOVER_ALIGNMENT.LEFT_BOTTOM, + POPOVER_ALIGNMENT.LEFT_TOP, + POPOVER_ALIGNMENT.RIGHT, + POPOVER_ALIGNMENT.RIGHT_BOTTOM, + POPOVER_ALIGNMENT.RIGHT_TOP, + ], + description: `Specify how the popover should align with the trigger element`, + }, + caret: { + control: 'boolean', + description: `Specify whether a caret should be rendered`, + }, + + highContrast: { + control: 'boolean', + description: 'Render the component using the high-contrast variant', + }, + dropShadow: { + control: 'boolean', + description: + 'Specify whether a drop shadow should be rendered on the popover', + }, + open: { + control: 'boolean', + description: 'Specify whether the component is currently open or closed', + }, +}; + +export const TabTip = { + render: () => { + const handleClick = (id) => { + const popover = document.querySelector(id); + const open = popover?.hasAttribute('open'); + open + ? popover?.removeAttribute('open') + : popover?.setAttribute('open', ''); + }; + + return html` + +
+ + + +
+ + + + + + +
+
+ Edit columns + + + +
+
+ + + + + +
+ + + + + + +
+
+ Edit columns + + + +
+
+ + +
+ `; + }, +}; + +export const Playground = { + argTypes: controls, + args: { + caret: true, + highContrast: false, + align: POPOVER_ALIGNMENT.BOTTOM, + dropShadow: true, + open: true, + }, + + decorators: [ + (story) => html`
${story()}
`, + ], + render: (args) => { + return html` + + +
${Checkbox16()}
+ +
+

Available storage

+

+ This server has 150 GB of block storage remaining. +

+
+ + + `; + }, +}; + +const meta = { + title: 'Components/Popover', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; + +export default meta;