forked from carbon-design-system/carbon-for-ibm-dotcom
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(skeleton-icon): new cwc component (carbon-design-system#11434)
### Related Ticket(s) Closes carbon-design-system#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) -->
- Loading branch information
1 parent
722a84e
commit 53fea84
Showing
17 changed files
with
292 additions
and
1 deletion.
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
22 changes: 22 additions & 0 deletions
22
packages/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
packages/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
packages/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); | ||
| } |
12 changes: 12 additions & 0 deletions
12
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
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'; |
33 changes: 33 additions & 0 deletions
33
...ages/carbon-web-components/src/components/skeleton-icon/skeleton-icon-story.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,33 @@ | ||
| import { Props, Description } from '@storybook/addon-docs/blocks'; | ||
| import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; | ||
|
|
||
| # 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'; | ||
| ``` | ||
|
|
||
| <Description markdown={`${cdnJs({ components: ['skeleton-icon'] })}`} /> | ||
| <Description markdown={`${cdnCss()}`} /> | ||
|
|
||
| ### HTML | ||
|
|
||
| ```html | ||
| <cds-skeleton-icon></cds-skeleton-icon> | ||
| ``` | ||
|
|
||
| ## `<cds-skeleton-icon>` attributes, properties and events | ||
|
|
||
| <Props of="cds-skeleton-icon" /> |
32 changes: 32 additions & 0 deletions
32
packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon-story.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,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-icon'; | ||
| import storyDocs from './skeleton-icon-story.mdx'; | ||
|
|
||
| export const Default = () => | ||
| html`<cds-skeleton-icon style="margin: 50px"></cds-skeleton-icon | ||
| ><cds-skeleton-icon | ||
| style="margin: 50px; width: 24px; height: 24px;"></cds-skeleton-icon>`; | ||
|
|
||
| Default.storyName = 'Default'; | ||
|
|
||
| Default.parameters = { | ||
| percy: { | ||
| skip: true, | ||
| }, | ||
| }; | ||
|
|
||
| export default { | ||
| title: 'Components/Skeleton/Skeleton icon', | ||
| parameters: { | ||
| ...storyDocs.parameters, | ||
| }, | ||
| }; |
16 changes: 16 additions & 0 deletions
16
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; | ||
| } |
25 changes: 25 additions & 0 deletions
25
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'; | ||
| 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; |
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