Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(skeleton): update skeleton stories to sb v7
Browse files Browse the repository at this point in the history
m4olivei committed Jan 8, 2024

Verified

This commit was signed with the committer’s verified signature.
m4olivei Matthew Oliveira
1 parent 8a98504 commit e3bb85d
Showing 7 changed files with 136 additions and 105 deletions.
4 changes: 4 additions & 0 deletions packages/carbon-web-components/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -26,6 +26,10 @@ const stories = glob.sync(
'../src/**/file-uploader.stories.ts',
'../src/**/overflow-menu.mdx',
'../src/**/overflow-menu.stories.ts',
'../src/**/skeleton-placeholder.mdx',
'../src/**/skeleton-placeholder.stories.ts',
'../src/**/skeleton-text.mdx',
'../src/**/skeleton-text.stories.ts',
],
{
ignore: ['../src/**/docs/*.mdx'],

This file was deleted.

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

<Meta of={SkeletonPlaceholderStories} />

# Skeleton placeholder

@@ -19,8 +22,8 @@ Here's a quick example to get you started.
import '@carbon/web-components/es/components/skeleton-placeholder/index.js';
```

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

### HTML

@@ -30,4 +33,4 @@ import '@carbon/web-components/es/components/skeleton-placeholder/index.js';

## `<cds-skeleton-placeholder>` attributes, properties and events

<Props of="cds-skeleton-placeholder" />
<ArgsTable of="cds-skeleton-placeholder" />
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/**
* @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 './skeleton-placeholder';
import storyDocs from './skeleton-placeholder.mdx';

export const Default = {
parameters: {
percy: {
skip: true,
},
},
render: () => html`<cds-skeleton-placeholder></cds-skeleton-placeholder>`,
};

const meta = {
title: 'Components/Skeleton/Skeleton Placeholder',
parameters: {
docs: {
page: storyDocs,
},
},
};

export default meta;

This file was deleted.

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

<Meta of={SkeletonTextStories} />

# Skeleton text

@@ -19,8 +22,8 @@ Here's a quick example to get you started.
import '@carbon/web-components/es/components/skeleton-text/index.js';
```

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

### HTML

@@ -41,4 +44,4 @@ multiple instances of `<cds-skeleton-text>`.

## `<cds-skeleton-text>` attributes and properties

<Props of="cds-skeleton-text" />
<ArgsTable of="cds-skeleton-text" />
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
/**
* @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 { ifDefined } from 'lit/directives/if-defined.js';
import { prefix } from '../../globals/settings';
import { SKELETON_TEXT_TYPE } from './skeleton-text';
import storyDocs from './skeleton-text.mdx';

const types = {
Regular: null,
[`Heading (${SKELETON_TEXT_TYPE.HEADING})`]: SKELETON_TEXT_TYPE.HEADING,
};

const args = {
type: null,
paragraph: true,
lineCount: 3,
width: '100%',
};

const argTypes = {
type: {
control: 'select',
description: 'Indicate the type of skeleton text, heading or regular.',
options: types,
},
paragraph: {
control: 'boolean',
description: 'Set this to true to generate multiple lines of text.',
},
lineCount: {
control: 'number',
description: 'The number of lines shown if paragraph is true.',
},
width: {
control: 'text',
description:
'Width (in px or %) of single line of text or max-width of paragraph lines.',
},
};

export const Default = {
parameters: {
percy: {
skip: true,
},
},
render: () => html`<cds-skeleton-text></cds-skeleton-text>`,
};

export const Playground = {
args,
argTypes,
render: (args) => {
const { type, paragraph, lineCount, width } = args ?? {};
return html`
<cds-skeleton-text
type="${ifDefined(type)}"
?paragraph="${paragraph}"
lineCount="${lineCount}"
width="${width}">
</cds-skeleton-text>
`;
},
};

const meta = {
title: 'Components/Skeleton/Skeleton Text',
parameters: {
docs: {
page: storyDocs,
},
percy: {
skip: true,
},
},
};

export default meta;

0 comments on commit e3bb85d

Please sign in to comment.