-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(icon skeleton): storybook update (#11442)
* feat(skeleton-icon): new cwc component (#11434) ### Related Ticket(s) Closes #11380 ### Description Adds new skeleton icon component ### Changelog **New** - skeleton icon readme, story, codesandbox examples <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * feat(skeleton-icon): storybook v7 --------- Co-authored-by: kennylam <[email protected]>
- Loading branch information
1 parent
b7cf497
commit 81b2381
Showing
30 changed files
with
343 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
...ckages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.babelrc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" }]] | ||
| } |
22 changes: 22 additions & 0 deletions
22
...ages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.gitignore
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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* |
6 changes: 6 additions & 0 deletions
6
...ackages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.sassrc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "includePaths": [ | ||
| "node_modules", | ||
| "../../node_modules" | ||
| ] | ||
| } |
29 changes: 29 additions & 0 deletions
29
...ckages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/cdn.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| <!-- | ||
| @license | ||
| Copyright IBM Corp. 2020 | ||
| This source code is licensed under the Apache-2.0 license found in the | ||
| LICENSE file in the root directory of this source tree. | ||
| --> | ||
|
|
||
| <html> | ||
| <head> | ||
| <title>@carbon/ibmdotcom-web-components example</title> | ||
| <meta charset="UTF-8"/> | ||
| <link rel="stylesheet" | ||
| href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/> | ||
| <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" /> | ||
| <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> | ||
| <style> | ||
| /* Suppress custom element until styles are loaded */ | ||
| cds-skeleton-icon:not(:defined) { | ||
| display: none; | ||
| } | ||
| </style> | ||
| <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/skeleton-icon.min.js"></script> | ||
| </head> | ||
| <body class="cds-theme-zone-white"> | ||
| <cds-skeleton-icon></cds-skeleton-icon> | ||
| </body> | ||
| </html> |
28 changes: 28 additions & 0 deletions
28
...ages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <!-- | ||
| @license | ||
| Copyright IBM Corp. 2020 | ||
| This source code is licensed under the Apache-2.0 license found in the | ||
| LICENSE file in the root directory of this source tree. | ||
| --> | ||
|
|
||
| <html> | ||
| <head> | ||
| <title>carbon-web-components example</title> | ||
| <meta charset="UTF-8" /> | ||
| <link rel="stylesheet" | ||
| href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/> | ||
| <link rel="stylesheet" href="src/styles.scss" /> | ||
| <style> | ||
| /* Suppress custom element until styles are loaded */ | ||
| cds-skeleton-icon:not(:defined) { | ||
| display: none; | ||
| } | ||
| </style> | ||
| <script type="module" src="src/index.js"></script> | ||
| </head> | ||
| <body> | ||
| <cds-skeleton-icon></cds-skeleton-icon> | ||
| </body> | ||
| </html> |
23 changes: 23 additions & 0 deletions
23
...es/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/package.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| { | ||
| "name": "carbon-web-components-skeleton-icon-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" | ||
| } | ||
| } |
3 changes: 3 additions & 0 deletions
3
...on-web-components/examples/codesandbox/basic/components/skeleton-icon/sandbox.config.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "template": "node" | ||
| } |
10 changes: 10 additions & 0 deletions
10
...es/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * Copyright IBM Corp. 2020, 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 '@carbon/web-components/es/components/skeleton-icon/index.js'; |
18 changes: 18 additions & 0 deletions
18
...carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/styles.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * Copyright IBM Corp. 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. | ||
| */ | ||
|
|
||
| @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); | ||
| } |
5 changes: 4 additions & 1 deletion
5
web-components/packages/carbon-web-components/src/components/button/button.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 4 additions & 1 deletion
5
...packages/carbon-web-components/src/components/data-table/stories/data-table.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletions
3
web-components/packages/carbon-web-components/src/components/list/list.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 4 additions & 1 deletion
5
...nts/packages/carbon-web-components/src/components/notification/notification.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 12 additions & 0 deletions
12
...s/packages/carbon-web-components/src/components/skeleton-icon/docs/overview.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| ## Live demo | ||
|
|
||
| <StorybookDemo | ||
| tall | ||
| url="https://www.ibm.com/standards/carbon/carbon-web-components" | ||
| variants={[ | ||
| { | ||
| label: 'Default', | ||
| variant: 'components-skeleton-icon--default' | ||
| } | ||
| ]} | ||
| /> |
10 changes: 10 additions & 0 deletions
10
web-components/packages/carbon-web-components/src/components/skeleton-icon/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * Copyright IBM Corp. 2021, 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 './skeleton-icon'; |
36 changes: 36 additions & 0 deletions
36
...s/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks'; | ||
| import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; | ||
| import * as SkeletonIconStories from './skeleton-icon.stories'; | ||
|
|
||
| <Meta of={SkeletonIconStories} /> | ||
|
|
||
| # Skeleton icon | ||
|
|
||
| > 💡 Check our | ||
| > [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon) | ||
| > example implementation. | ||
| [](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon) | ||
|
|
||
| ## Getting started | ||
|
|
||
| Here's a quick example to get you started. | ||
|
|
||
| ### JS (via import) | ||
|
|
||
| ```javascript | ||
| import '@carbon/web-components/es/components/skeleton-icon/index.js'; | ||
| ``` | ||
|
|
||
| <Markdown>{`${cdnJs({ components: ['skeleton-placeholder'] })}`}</Markdown> | ||
| <Markdown>{`${cdnCss()}`}</Markdown> | ||
|
|
||
| ### HTML | ||
|
|
||
| ```html | ||
| <cds-skeleton-icon></cds-skeleton-icon> | ||
| ``` | ||
|
|
||
| ## `<cds-skeleton-icon>` attributes, properties and events | ||
|
|
||
| <ArgsTable of="cds-skeleton-icon" /> |
16 changes: 16 additions & 0 deletions
16
...components/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| // | ||
| // 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. | ||
| // | ||
|
|
||
| @use '@carbon/styles/scss/config' as *; | ||
| @use '@carbon/styles/scss/components/skeleton-styles'; | ||
| @use '@carbon/styles/scss/utilities/skeleton' as *; | ||
|
|
||
| :host(#{$prefix}-skeleton-icon) { | ||
| @include skeleton; | ||
|
|
||
| @extend .#{$prefix}--icon--skeleton; | ||
| } |
34 changes: 34 additions & 0 deletions
34
...ents/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| /** | ||
| * @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-icon'; | ||
| import storyDocs from './skeleton-icon.mdx'; | ||
|
|
||
| export const Default = { | ||
| parameters: { | ||
| percy: { | ||
| skip: true, | ||
| }, | ||
| }, | ||
| render: () => html`<cds-skeleton-icon style="margin: 50px"></cds-skeleton-icon | ||
| ><cds-skeleton-icon | ||
| style="margin: 50px; width: 24px; height: 24px;"></cds-skeleton-icon>`, | ||
| }; | ||
|
|
||
| const meta = { | ||
| title: 'Components/Skeleton/Skeleton Icon', | ||
| parameters: { | ||
| docs: { | ||
| page: storyDocs, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; |
25 changes: 25 additions & 0 deletions
25
web-components/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| /** | ||
| * @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 { LitElement } from 'lit'; | ||
| import { prefix } from '../../globals/settings'; | ||
| import styles from './skeleton-icon.scss?lit'; | ||
| import { carbonElement as customElement } from '../../globals/decorators/carbon-element'; | ||
|
|
||
| /** | ||
| * Skeleton icon. | ||
| * | ||
| * @element cds-skeleton-icon | ||
| */ | ||
| @customElement(`${prefix}-skeleton-icon`) | ||
| class CDSSkeletonIcon extends LitElement { | ||
| static styles = styles; | ||
| } | ||
|
|
||
| export default CDSSkeletonIcon; |
4 changes: 3 additions & 1 deletion
4
...ckages/carbon-web-components/src/components/structured-list/structured-list.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 4 additions & 1 deletion
5
web-components/packages/carbon-web-components/src/components/tabs/tabs.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.