diff --git a/packages/carbon-web-components/README.md b/packages/carbon-web-components/README.md index 56376e3b69c..c68bfa3af82 100644 --- a/packages/carbon-web-components/README.md +++ b/packages/carbon-web-components/README.md @@ -119,6 +119,7 @@ These are the list of available components via CDN: - radio-button.min.js - search.min.js - select.min.js +- skeleton-icon.min.js - skeleton-placeholder.min.js - skeleton-text.min.js - skip-to-content.min.js diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.babelrc b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.babelrc new file mode 100644 index 00000000000..74450eed94b --- /dev/null +++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.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/codesandbox/basic/components/skeleton-icon/.gitignore b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.gitignore new file mode 100644 index 00000000000..d94d6e13e94 --- /dev/null +++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.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/codesandbox/basic/components/skeleton-icon/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.sassrc new file mode 100644 index 00000000000..956b9e0a3d8 --- /dev/null +++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.sassrc @@ -0,0 +1,6 @@ +{ + "includePaths": [ + "node_modules", + "../../node_modules" + ] +} \ No newline at end of file diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/cdn.html new file mode 100644 index 00000000000..c802985c24e --- /dev/null +++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/cdn.html @@ -0,0 +1,29 @@ + + + + + @carbon/ibmdotcom-web-components example + + + + + + + + + + + diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/index.html new file mode 100644 index 00000000000..a6aec86c275 --- /dev/null +++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/index.html @@ -0,0 +1,28 @@ + + + + + carbon-web-components example + + + + + + + + + + diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/package.json new file mode 100644 index 00000000000..38a0bb1ca6d --- /dev/null +++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/package.json @@ -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" + } +} diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/sandbox.config.json b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/sandbox.config.json new file mode 100644 index 00000000000..a4df8557d7b --- /dev/null +++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "node" +} diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/index.js b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/index.js new file mode 100644 index 00000000000..65b3fe28c08 --- /dev/null +++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/index.js @@ -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'; diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/styles.scss new file mode 100644 index 00000000000..2183124956e --- /dev/null +++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/styles.scss @@ -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); +} diff --git a/packages/carbon-web-components/src/components/skeleton-icon/docs/overview.mdx b/packages/carbon-web-components/src/components/skeleton-icon/docs/overview.mdx new file mode 100644 index 00000000000..445b9278b8e --- /dev/null +++ b/packages/carbon-web-components/src/components/skeleton-icon/docs/overview.mdx @@ -0,0 +1,12 @@ +## Live demo + + diff --git a/packages/carbon-web-components/src/components/skeleton-icon/index.ts b/packages/carbon-web-components/src/components/skeleton-icon/index.ts new file mode 100644 index 00000000000..a4af3d84192 --- /dev/null +++ b/packages/carbon-web-components/src/components/skeleton-icon/index.ts @@ -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'; diff --git a/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon-story.mdx b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon-story.mdx new file mode 100644 index 00000000000..9e41dba3d9a --- /dev/null +++ b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon-story.mdx @@ -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. + +[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](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'; +``` + + + + +### HTML + +```html + +``` + +## `` attributes, properties and events + + diff --git a/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon-story.ts b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon-story.ts new file mode 100644 index 00000000000..e75f33fa7c2 --- /dev/null +++ b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon-story.ts @@ -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``; + +Default.storyName = 'Default'; + +Default.parameters = { + percy: { + skip: true, + }, +}; + +export default { + title: 'Components/Skeleton/Skeleton icon', + parameters: { + ...storyDocs.parameters, + }, +}; diff --git a/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.scss b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.scss new file mode 100644 index 00000000000..ee8d2a363c5 --- /dev/null +++ b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.scss @@ -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; +} diff --git a/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.ts b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.ts new file mode 100644 index 00000000000..b264794c163 --- /dev/null +++ b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.ts @@ -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; diff --git a/packages/carbon-web-components/src/index.ts b/packages/carbon-web-components/src/index.ts index eb2fc8852a1..09b24a75821 100644 --- a/packages/carbon-web-components/src/index.ts +++ b/packages/carbon-web-components/src/index.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2019, 2023 + * 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. @@ -89,6 +89,7 @@ export { default as CDSRadioButton } from './components/radio-button/radio-butto export { default as CDSRadioButtonGroup } from './components/radio-button/radio-button-group'; export { default as CDSSearch } from './components/search/search'; export { default as CDSSearchSkeleton } from './components/search/search-skeleton'; +export { default as CDSSkeletonIcon } from './components/skeleton-icon/skeleton-icon'; export { default as CDSSkeletonPlaceholder } from './components/skeleton-placeholder/skeleton-placeholder'; export { default as CDSSkeletonText } from './components/skeleton-text/skeleton-text'; export { default as CDSSlider } from './components/slider/slider';