From 3d67008e3b02b6d812edc90315aef6fb9d339133 Mon Sep 17 00:00:00 2001 From: ariellalgilmore Date: Thu, 11 Jan 2024 09:45:47 -0800 Subject: [PATCH] feat(toggle/toggletip): cwc controls --- .../carbon-web-components/.storybook/main.ts | 4 + .../basic/components/toggletip/.babelrc | 22 ++++ .../basic/components/toggletip/.gitignore | 22 ++++ .../basic/components/toggletip/.sassrc | 6 + .../basic/components/toggletip/cdn.html | 41 ++++++ .../basic/components/toggletip/index.html | 39 ++++++ .../basic/components/toggletip/package.json | 23 ++++ .../components/toggletip/sandbox.config.json | 3 + .../basic/components/toggletip/src/index.js | 12 ++ .../components/toggletip/src/styles.scss | 9 ++ .../components/toggle-tip/toggletip-story.mdx | 105 --------------- .../components/toggle-tip/toggletip-story.ts | 70 ---------- .../src/components/toggle-tip/toggletip.mdx | 49 +++++++ .../toggle-tip/toggletip.stories.ts | 107 ++++++++++++++++ .../src/components/toggle/toggle-story.ts | 107 ---------------- .../toggle/{toggle-story.mdx => toggle.mdx} | 4 +- .../src/components/toggle/toggle.stories.ts | 120 ++++++++++++++++++ .../tests/spec/toggle_spec.ts | 2 +- 18 files changed, 460 insertions(+), 285 deletions(-) create mode 100644 packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.babelrc create mode 100644 packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.gitignore create mode 100644 packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.sassrc create mode 100644 packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/cdn.html create mode 100644 packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/index.html create mode 100644 packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/package.json create mode 100644 packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/sandbox.config.json create mode 100644 packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/src/index.js create mode 100644 packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/src/styles.scss delete mode 100644 packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx delete mode 100644 packages/carbon-web-components/src/components/toggle-tip/toggletip-story.ts create mode 100644 packages/carbon-web-components/src/components/toggle-tip/toggletip.mdx create mode 100644 packages/carbon-web-components/src/components/toggle-tip/toggletip.stories.ts delete mode 100644 packages/carbon-web-components/src/components/toggle/toggle-story.ts rename packages/carbon-web-components/src/components/toggle/{toggle-story.mdx => toggle.mdx} (93%) create mode 100644 packages/carbon-web-components/src/components/toggle/toggle.stories.ts diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts index 983c80c0341..6d78be1539c 100644 --- a/packages/carbon-web-components/.storybook/main.ts +++ b/packages/carbon-web-components/.storybook/main.ts @@ -44,6 +44,10 @@ const stories = glob.sync( '../src/**/skip-to-content.stories.ts', '../src/**/slider.mdx', '../src/**/slider.stories.ts', + '../src/**/toggle.mdx', + '../src/**/toggle.stories.ts', + '../src/**/toggletip.mdx', + '../src/**/toggletip.stories.ts', ], { ignore: ['../src/**/docs/*.mdx'], diff --git a/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.babelrc b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.babelrc new file mode 100644 index 00000000000..74450eed94b --- /dev/null +++ b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.babelrc @@ -0,0 +1,22 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "modules": false, + "targets": [ + "last 1 version", + "Firefox ESR", + "not opera > 0", + "not op_mini > 0", + "not op_mob > 0", + "not android > 0", + "not edge > 0", + "not ie > 0", + "not ie_mob > 0" + ] + } + ] + ], + "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]] +} diff --git a/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.gitignore b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.gitignore new file mode 100644 index 00000000000..d94d6e13e94 --- /dev/null +++ b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.gitignore @@ -0,0 +1,22 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +/node_modules + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.cache +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.sassrc b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.sassrc new file mode 100644 index 00000000000..956b9e0a3d8 --- /dev/null +++ b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.sassrc @@ -0,0 +1,6 @@ +{ + "includePaths": [ + "node_modules", + "../../node_modules" + ] +} \ No newline at end of file diff --git a/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/cdn.html b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/cdn.html new file mode 100644 index 00000000000..7405916a678 --- /dev/null +++ b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/cdn.html @@ -0,0 +1,41 @@ + + + + + @carbon/ibmdotcom-web-components example + + + + + + + + + + +
+ + Toggletip label + +

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+ Test + Button + +
+ + diff --git a/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/index.html b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/index.html new file mode 100644 index 00000000000..03cc7b8daa9 --- /dev/null +++ b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/index.html @@ -0,0 +1,39 @@ + + + + + carbon-web-components example + + + + + + + + +
+ + Toggletip label + +

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+ Test + Button + +
+ + diff --git a/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/package.json b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/package.json new file mode 100644 index 00000000000..4053d08df66 --- /dev/null +++ b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/package.json @@ -0,0 +1,23 @@ +{ + "name": "carbon-web-components-toggletip-example", + "version": "0.1.0", + "private": true, + "description": "Sample project for getting started with the Web Components from Carbon.", + "license": "Apache-2", + "main": "index.html", + "scripts": { + "build": "parcel build *.html --no-minify --public-url ./", + "clean": "rimraf node_modules dist .cache", + "start": "parcel index.html --port=9000 --no-hmr" + }, + "dependencies": { + "@carbon/styles": "^1.34.0", + "@carbon/web-components": "latest", + "sass": "^1.64.1" + }, + "devDependencies": { + "@babel/core": "^7.0.0-0", + "parcel-bundler": "1.12.3", + "rimraf": "^3.0.2" + } +} diff --git a/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/sandbox.config.json b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/sandbox.config.json new file mode 100644 index 00000000000..a4df8557d7b --- /dev/null +++ b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "node" +} diff --git a/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/src/index.js b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/src/index.js new file mode 100644 index 00000000000..8099e03865a --- /dev/null +++ b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/src/index.js @@ -0,0 +1,12 @@ +/** + * @license + * + * Copyright IBM Corp. 2020, 2022 + * + * 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 '@carbon/web-components/es/components/toggle-tip/index.js'; +import '@carbon/web-components/es/components/link/index.js'; +import '@carbon/web-components/es/components/button/index.js'; diff --git a/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/src/styles.scss b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/src/styles.scss new file mode 100644 index 00000000000..5bde587c9b5 --- /dev/null +++ b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/src/styles.scss @@ -0,0 +1,9 @@ +@use '@carbon/styles/scss/reset'; +@use '@carbon/styles/scss/theme'; +@use '@carbon/styles/scss/themes'; + +:root { + @include theme.theme(themes.$white); + background-color: var(--cds-background); + color: var(--cds-text-primary); +} diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx b/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx deleted file mode 100644 index 50064ebcf4a..00000000000 --- a/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx +++ /dev/null @@ -1,105 +0,0 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; -import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; - -# Tooltip - -> 💡 Check our -> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/basic/components/tooltip) -> example implementation. - -[![Edit carbon-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/carbon-web-components/examples/stackblitz/basic/components/tooltip) - -Tooltips provide additional information upon hover or focus. The information -should be contextual, useful, and nonessential information. Keep tooltips short. - -## Getting started - -Here's a quick example to get you started. - -### JS (via import) - -```javascript -import '@carbon/web-components/es/components/tooltip/index.js'; -``` - - - - -### HTML - -```html - - -

- This is some tooltip text. This box shows the maximum amount of text that - should appear inside. If more room is needed please use a modal instead. -

- - Learn MoreCreate - - - -``` - -## Interactive tooltip (default) - -Interactive tooltips may contain rich text and other interactive elements like -buttons or links. In general, hiding interactive content in a tooltip is -discouraged. Interactive tooltips are best used for onboarding experiences and -product tours. - -- If a user may need to visit an external resource, like while using a form, - include a link in your interactive tooltip -- Don’t use without a label. Consider the context a user needs before clicking a - link - -### `` attributes and properties - -Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. -``) and `false` means not setting the attribute (e.g. -`` without `open` attribute). - - - -## Definition tooltip - -The definition tooltip provides additional help or defines an item or term. It -may be used on the label of a UI element, or on a word embedded in a paragraph. - -- Should contain brief, read-only text -- Use on proper nouns, technical terms, or acronyms with two letters or more -- Do not use a definition tooltip on words with fewer than two letters - -```html - - Definition Tooltip - -``` - -### `` attributes and properties - - - -## Icon tooltip - -An icon tooltip is used to clarify the action or name of an interactive icon -button. - -- The tooltip content should only contain one or two words. - -```html - - ${Filter16()} - -``` - -### `` attributes and properties - - diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.ts b/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.ts deleted file mode 100644 index 2ed06a0c498..00000000000 --- a/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.ts +++ /dev/null @@ -1,70 +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 { select } from '@storybook/addon-knobs'; -import textNullable from '../../../.storybook/knob-text-nullable'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { prefix } from '../../globals/settings'; -import './toggletip'; -import '../button'; -import { POPOVER_ALIGNMENT } from '../popover/defs'; -import storyDocs from './toggletip-story.mdx'; - -const tooltipAlignments = { - [`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 Default = (args) => { - const { alignment, bodyText } = args?.[`${prefix}-toggletip`] ?? {}; - return html` - - Toggletip label - -

${bodyText}

- Test - Button - - `; -}; - -Default.parameters = { - knobs: { - [`${prefix}-toggletip`]: () => ({ - alignment: select( - 'Toggletip alignment to trigger button (alignment)', - tooltipAlignments, - POPOVER_ALIGNMENT.BOTTOM - ), - bodyText: textNullable( - 'Toggletip content (bodyText)', - `Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.` - ), - }), - }, -}; - -export default { - title: 'Components/Toggletip', - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip.mdx b/packages/carbon-web-components/src/components/toggle-tip/toggletip.mdx new file mode 100644 index 00000000000..94316d26eb3 --- /dev/null +++ b/packages/carbon-web-components/src/components/toggle-tip/toggletip.mdx @@ -0,0 +1,49 @@ +import { ArgsTable, Description, Meta } from '@storybook/blocks'; +import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; + +# Toggletip + +> 💡 Check our +> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/basic/components/toggletip) +> example implementation. + +[![Edit carbon-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/carbon-web-components/examples/stackblitz/basic/components/toggletip) + +The Toggletip component provides an accessible way to render interactive content within a popover. If you do not have any interactive content inside of your Toggletip, consider using Tooltip instead. + +## Getting started + +Here's a quick example to get you started. + +### JS (via import) + +```javascript +import '@carbon/web-components/es/components/toggle-tip/index.js'; +import '@carbon/web-components/es/components/link/index.js'; +import '@carbon/web-components/es/components/button/index.js'; +``` + + + + +### HTML + +```html + + Toggletip label + +

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+ Test + Button + +``` + +### `` attributes and properties + +Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. +``) and `false` means not setting the attribute (e.g. +`` without `open` attribute). + + diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip.stories.ts b/packages/carbon-web-components/src/components/toggle-tip/toggletip.stories.ts new file mode 100644 index 00000000000..2efaebd9370 --- /dev/null +++ b/packages/carbon-web-components/src/components/toggle-tip/toggletip.stories.ts @@ -0,0 +1,107 @@ +/** + * @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 './toggletip'; +import '../button'; +import { POPOVER_ALIGNMENT } from '../popover/defs'; +import storyDocs from './toggletip.mdx'; + +const tooltipAlignments = { + [`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, +}; + +const defaultArgs = { + alignment: 'bottom', + open: false, +}; + +const controls = { + alignment: { + control: 'select', + description: 'Specify how the toggletip should align with the button', + options: tooltipAlignments, + }, + open: { + control: 'boolean', + description: 'Specify if the toggletip should be open', + }, +}; + +export const Default = { + render: () => html` +
+
+ + Toggletip label + +

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+ Test + Button + +
+
+
+
+ + Toggletip label -- using defaultOpen prop + +

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+ Test + Button + +
+
+ `, +}; + +export const Playground = { + argTypes: controls, + args: defaultArgs, + render: ({ alignment, open }) => html` + + Toggletip label + +

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+ Test + Button + + `, +}; + +const meta = { + title: 'Components/Toggletip', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; + +export default meta; diff --git a/packages/carbon-web-components/src/components/toggle/toggle-story.ts b/packages/carbon-web-components/src/components/toggle/toggle-story.ts deleted file mode 100644 index 8c64efa6ccb..00000000000 --- a/packages/carbon-web-components/src/components/toggle/toggle-story.ts +++ /dev/null @@ -1,107 +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 { ifDefined } from 'lit/directives/if-defined.js'; -import { action } from '@storybook/addon-actions'; -import { boolean, select } from '@storybook/addon-knobs'; -import textNullable from '../../../.storybook/knob-text-nullable'; -import { prefix } from '../../globals/settings'; -import { TOGGLE_SIZE } from './toggle'; -import storyDocs from './toggle-story.mdx'; - -const sizes = { - 'Regular size': null, - [`Small size (${TOGGLE_SIZE.SMALL})`]: TOGGLE_SIZE.SMALL, -}; - -export const Default = (args) => { - const { onChange } = args?.[`${prefix}-toggle`] ?? {}; - return html` - - `; -}; - -Default.storyName = 'Default'; - -export const SmallToggle = (args) => { - const { onChange } = args?.[`${prefix}-toggle`] ?? {}; - return html` - - `; -}; - -SmallToggle.storyName = 'Small toggle'; - -export const Playground = (args) => { - const { - checked, - labelA, - disabled, - hideLabel, - labelText, - readOnly, - name, - size, - labelB, - value, - onChange, - } = args?.[`${prefix}-toggle`] ?? {}; - return html` - - `; -}; - -Playground.storyName = 'Playground'; -Playground.parameters = { - knobs: { - [`${prefix}-toggle`]: () => ({ - checked: boolean('Checked (checked)', true), - labelA: textNullable('Text for checked state (label-a)', 'On'), - disabled: boolean('Disabled (disabled)', false), - hideLabel: boolean('Hide label (hideLabel)', false), - labelText: textNullable('Label text (label-text)', ''), - readOnly: boolean('Read only (read-only)', false), - name: textNullable('Name (name)', ''), - size: select('Toggle size (size)', sizes, null), - labelB: textNullable('Text for unchecked state (label-b)', 'Off'), - value: textNullable('Value (value)', ''), - onChange: action(`${prefix}-toggle-changed`), - }), - }, -}; - -export default { - title: 'Components/Toggle', - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/packages/carbon-web-components/src/components/toggle/toggle-story.mdx b/packages/carbon-web-components/src/components/toggle/toggle.mdx similarity index 93% rename from packages/carbon-web-components/src/components/toggle/toggle-story.mdx rename to packages/carbon-web-components/src/components/toggle/toggle.mdx index 1912dc63d46..1bb4e1d0a5e 100644 --- a/packages/carbon-web-components/src/components/toggle/toggle-story.mdx +++ b/packages/carbon-web-components/src/components/toggle/toggle.mdx @@ -1,4 +1,4 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Description, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; # Toggle @@ -47,4 +47,4 @@ import '@carbon/web-components/es/components/toggle/index.js'; ## `` attributes, properties and events - + diff --git a/packages/carbon-web-components/src/components/toggle/toggle.stories.ts b/packages/carbon-web-components/src/components/toggle/toggle.stories.ts new file mode 100644 index 00000000000..f230c52539e --- /dev/null +++ b/packages/carbon-web-components/src/components/toggle/toggle.stories.ts @@ -0,0 +1,120 @@ +/** + * @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 './index'; +import '../stack/index'; +import { TOGGLE_SIZE } from './toggle'; +import storyDocs from './toggle.mdx'; + +const sizes = { + 'Regular size': null, + [`Small size (${TOGGLE_SIZE.SMALL})`]: TOGGLE_SIZE.SMALL, +}; + +const defaultArgs = { + labelA: 'On', + labelB: 'Off', + checked: true, +}; + +const controls = { + disabled: { + control: 'boolean', + description: 'Whether this control should be disabled', + }, + hideLabel: { + control: 'boolean', + description: + "If true, the side labels (props.labelA and props.labelB) will be replaced by props.labelText (if passed), so that the toggle doesn't render a top label.", + }, + labelA: { + control: 'text', + description: 'The text for the checked state.', + }, + labelB: { + control: 'text', + description: 'The text for the unchecked state', + }, + labelText: { + control: 'text', + description: 'The text that is read for the control', + }, + readonly: { + control: 'boolean', + description: 'Whether the toggle should be read-only', + }, + size: { + control: 'radio', + description: + "Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)", + options: sizes, + }, + checked: { + control: 'boolean', + description: 'Specify whether the control is toggled', + }, +}; + +export const Default = { + render: () => html` + + `, +}; + +export const SmallToggle = { + render: () => html` + + `, +}; + +export const Playground = { + argTypes: controls, + args: defaultArgs, + render: ({ + disabled, + hideLabel, + labelA, + labelB, + labelText, + readonly, + size, + checked, + }) => html` + + `, +}; + +const meta = { + title: 'Components/Toggle', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; + +export default meta; diff --git a/packages/carbon-web-components/tests/spec/toggle_spec.ts b/packages/carbon-web-components/tests/spec/toggle_spec.ts index 2bda1322587..822a8258a44 100644 --- a/packages/carbon-web-components/tests/spec/toggle_spec.ts +++ b/packages/carbon-web-components/tests/spec/toggle_spec.ts @@ -8,7 +8,7 @@ */ import { html, render } from 'lit'; -import { Default } from '../../src/components/toggle/toggle-story'; +import { Default } from '../../src/components/toggle/toggle.stories'; /** * @param formData A `FormData` instance.