diff --git a/web-components/packages/carbon-web-components/src/components/link/link-story.ts b/web-components/packages/carbon-web-components/src/components/link/link-story.ts deleted file mode 100644 index 33f0949c54c2..000000000000 --- a/web-components/packages/carbon-web-components/src/components/link/link-story.ts +++ /dev/null @@ -1,125 +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'; -// Below path will be there when an application installs `@carbon/web-components` package. -// In our dev env, we auto-generate the file and re-map below path to to point to the generated file. -// @ts-ignore -import { prefix } from '../../globals/settings'; -import Download16 from '@carbon/web-components/es/icons/download/16'; -import textNullable from '../../../.storybook/knob-text-nullable'; -import { LINK_SIZE } from './link'; -import storyDocs from './link-story.mdx'; - -const sizes = { - [`Small size (${LINK_SIZE.SMALL})`]: LINK_SIZE.SMALL, - [`Regular size (${LINK_SIZE.REGULAR})`]: LINK_SIZE.REGULAR, - [`Large size (${LINK_SIZE.LARGE})`]: LINK_SIZE.LARGE, -}; - -export const Default = () => { - return html` Link `; -}; - -Default.storyName = 'Default'; - -export const Inline = () => { - return html` - Lorem ipsum dolor sit amet, consectetur adipiscing elit. -

- Ut facilisis semper lorem in aliquet. Aliquam accumsan ante justo, vitae - fringilla eros vehicula id. Ut at enim quis libero pharetra ullamcorper. - Maecenas feugiat sodales arcu ut porttitor. In blandit ultricies est. - Vivamus risus massa, cursus eu tellus sed, sagittis commodo nunc. - Maecenas nunc mauris, consequat quis mauris sit amet, - finibus suscipit nunc. Phasellus ex quam, placerat quis tempus sit amet, - pretium nec sem. Etiam dictum scelerisque mauris, blandit ultrices erat - pellentesque id. Quisque venenatis purus sit amet sodales condimentum. - Duis at tincidunt orci. Ut velit ipsum, lacinia at ex quis, aliquet - rhoncus purus. Praesent et scelerisque ligula. -

- `; -}; - -export const pairedWithIcon = (args) => { - const { - disabled, - download, - href, - hreflang, - linkRole, - ping, - rel, - size, - target, - type, - onClick, - } = args?.[`${prefix}-link`] ?? {}; - return html` - - Download ${Download16({ slot: 'icon' })} - - `; -}; - -export const Playground = (args) => { - const { disabled, inline, visited, href, size } = - args?.[`${prefix}-link`] ?? {}; - return html` - - Link - - `; -}; - -Playground.story = { - parameters: { - ...storyDocs.parameters, - knobs: { - [`${prefix}-link`]: () => ({ - disabled: boolean('Disabled (disabled)', false), - href: textNullable('Link href (href)', 'https://example.com/'), - inline: boolean('Inline (inline)', false), - size: select('Link size (size)', sizes, LINK_SIZE.REGULAR), - visited: boolean('Visited (visited)', false), - onClick: action('click'), - }), - }, - }, -}; - -export default { - title: 'Components/Link', - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/web-components/packages/carbon-web-components/src/components/link/link-story.mdx b/web-components/packages/carbon-web-components/src/components/link/link.mdx similarity index 94% rename from web-components/packages/carbon-web-components/src/components/link/link-story.mdx rename to web-components/packages/carbon-web-components/src/components/link/link.mdx index fb27eaab2d23..e33de1b0924a 100644 --- a/web-components/packages/carbon-web-components/src/components/link/link-story.mdx +++ b/web-components/packages/carbon-web-components/src/components/link/link.mdx @@ -1,4 +1,4 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Description } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; # Link @@ -51,5 +51,5 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `disabled` attribute). - + ```` diff --git a/web-components/packages/carbon-web-components/src/components/link/link.stories.ts b/web-components/packages/carbon-web-components/src/components/link/link.stories.ts new file mode 100644 index 000000000000..8664d1b8098e --- /dev/null +++ b/web-components/packages/carbon-web-components/src/components/link/link.stories.ts @@ -0,0 +1,123 @@ +/** + * @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 Download16 from '@carbon/web-components/es/icons/download/16'; +import { LINK_SIZE } from './link'; +import storyDocs from './link.mdx'; + +const defaultArgs = { + disabled: false, + href: 'https://example.com', + inline: false, + size: LINK_SIZE.REGULAR, + visited: false, +} + +const controls = { + disabled: { + control: 'boolean', + description: `Specify if the control should be disabled, or not`, + }, + href: { + control: 'text', + description: `Provide the href attribute for the node`, + }, + size: { + control: 'radio', options: [LINK_SIZE.SMALL, LINK_SIZE.REGULAR, LINK_SIZE.LARGE], + description: `Specify the size of the Link. Currently supports either sm, 'md' (default) or 'lg' as an option.` + }, + visited: { + control: 'boolean', + description: `Specify whether you want the link to receive visited styles after the link has been clicked`, + }, +} + +export const Default = { + render: () => html` Link ` +}; + + +export const Inline = { + render: () => html` + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+ Ut facilisis semper lorem in aliquet. Aliquam accumsan ante justo, vitae + fringilla eros vehicula id. Ut at enim quis libero pharetra ullamcorper. + Maecenas feugiat sodales arcu ut porttitor. In blandit ultricies est. + Vivamus risus massa, cursus eu tellus sed, sagittis commodo nunc. + Maecenas nunc mauris, consequat quis mauris sit amet, + finibus suscipit nunc. Phasellus ex quam, placerat quis tempus sit amet, + pretium nec sem. Etiam dictum scelerisque mauris, blandit ultrices erat + pellentesque id. Quisque venenatis purus sit amet sodales condimentum. + Duis at tincidunt orci. Ut velit ipsum, lacinia at ex quis, aliquet + rhoncus purus. Praesent et scelerisque ligula. +

+ ` +}; + +export const pairedWithIcon = { + args: defaultArgs, + parameters: { + controls: { exclude: /(.*?)/ }, + }, + render: ({ + disabled, + href, + size, + onClick + }) => html` + + Download ${Download16({ slot: 'icon' })} + + `, +}; + +export const Playground = { + argTypes: controls, + args: defaultArgs, + render: ({ + disabled, + href, + inline, + size, + visited, + onClick + }) => html` + + Link + + `, +}; + +const meta = { + title: 'Components/Link', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; + +export default meta; \ No newline at end of file diff --git a/web-components/packages/carbon-web-components/tests/spec/link_spec.ts b/web-components/packages/carbon-web-components/tests/spec/link_spec.ts index 91213c133217..ca111458a12a 100644 --- a/web-components/packages/carbon-web-components/tests/spec/link_spec.ts +++ b/web-components/packages/carbon-web-components/tests/spec/link_spec.ts @@ -9,7 +9,7 @@ import { render } from 'lit'; import '../../src/components/link/link'; -import { pairedWithIcon } from '../../src/components/link/link-story'; +import { pairedWithIcon } from '../../src/components/link/link.stories'; const template = (props?) => pairedWithIcon({