diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts index 5aef067e4b6..fadd5737425 100644 --- a/packages/carbon-web-components/.storybook/main.ts +++ b/packages/carbon-web-components/.storybook/main.ts @@ -84,6 +84,8 @@ const stories = glob.sync( '../src/**/search.stories.ts', '../src/**/select.mdx', '../src/**/select.stories.ts', + '../src/**/skeleton-icon.mdx', + '../src/**/skeleton-icon.stories.ts', '../src/**/skeleton-placeholder.mdx', '../src/**/skeleton-placeholder.stories.ts', '../src/**/skeleton-text.mdx', diff --git a/packages/carbon-web-components/README.md b/packages/carbon-web-components/README.md index a48f99a0afa..78f8566288f 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/button/button.mdx b/packages/carbon-web-components/src/components/button/button.mdx index 01f694dfdd6..8e433011e50 100644 --- a/packages/carbon-web-components/src/components/button/button.mdx +++ b/packages/carbon-web-components/src/components/button/button.mdx @@ -1,7 +1,10 @@ -import { ArgsTable, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import Add16 from '@carbon/web-components/es/icons/add/16'; +import * as ButtonStories from './button.stories'; + + # Button > 💡 Check our diff --git a/packages/carbon-web-components/src/components/data-table/stories/data-table.mdx b/packages/carbon-web-components/src/components/data-table/stories/data-table.mdx index 72703f2b98c..d3729fbcdd0 100644 --- a/packages/carbon-web-components/src/components/data-table/stories/data-table.mdx +++ b/packages/carbon-web-components/src/components/data-table/stories/data-table.mdx @@ -1,5 +1,8 @@ -import { ArgsTable, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn'; +import * as DataTable from './data-table-basic.stories'; + + # Data table diff --git a/packages/carbon-web-components/src/components/list/list.mdx b/packages/carbon-web-components/src/components/list/list.mdx index e4041bf7847..99d1b833f5f 100644 --- a/packages/carbon-web-components/src/components/list/list.mdx +++ b/packages/carbon-web-components/src/components/list/list.mdx @@ -1,5 +1,8 @@ import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as OrderedListStories from './ordered-list.stories'; + + # List diff --git a/packages/carbon-web-components/src/components/notification/notification.mdx b/packages/carbon-web-components/src/components/notification/notification.mdx index 1e44aa7c14b..1056ffe57ff 100644 --- a/packages/carbon-web-components/src/components/notification/notification.mdx +++ b/packages/carbon-web-components/src/components/notification/notification.mdx @@ -1,8 +1,11 @@ import { ArgsTable, - Markdown + Markdown, Meta } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as ActionableNotification from './actionable-notification.stories'; + + # Notification 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.mdx b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.mdx new file mode 100644 index 00000000000..5f7170ffb5e --- /dev/null +++ b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.mdx @@ -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'; + + + +# 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'; +``` + +{`${cdnJs({ components: ['skeleton-placeholder'] })}`} +{`${cdnCss()}`} + +### HTML + +```html + +``` + +## `` attributes, properties and events + + 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.stories.ts b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.stories.ts new file mode 100644 index 00000000000..3eb40e9d37f --- /dev/null +++ b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.stories.ts @@ -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``, +}; + +const meta = { + title: 'Components/Skeleton/Skeleton Icon', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; + +export default meta; 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..e087bab2189 --- /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?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; diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list.mdx b/packages/carbon-web-components/src/components/structured-list/structured-list.mdx index 639ac9c5482..e1c717e0355 100644 --- a/packages/carbon-web-components/src/components/structured-list/structured-list.mdx +++ b/packages/carbon-web-components/src/components/structured-list/structured-list.mdx @@ -1,6 +1,8 @@ -import { ArgsTable, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Description, Meta } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as StructuredList from './structured-list.stories'; + # Structured list > 💡 Check our diff --git a/packages/carbon-web-components/src/components/tabs/tabs.mdx b/packages/carbon-web-components/src/components/tabs/tabs.mdx index ecc70660977..a53def8f278 100644 --- a/packages/carbon-web-components/src/components/tabs/tabs.mdx +++ b/packages/carbon-web-components/src/components/tabs/tabs.mdx @@ -1,5 +1,8 @@ -import { ArgTypes, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgTypes, Markdown, Meta } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as TabsStories from './tabs.stories'; + + # Tabs diff --git a/packages/carbon-web-components/src/components/text-input/text-input.mdx b/packages/carbon-web-components/src/components/text-input/text-input.mdx index 01de04de43f..1b3e2ce0612 100644 --- a/packages/carbon-web-components/src/components/text-input/text-input.mdx +++ b/packages/carbon-web-components/src/components/text-input/text-input.mdx @@ -1,5 +1,8 @@ -import { ArgTypes, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgTypes, Markdown, Meta } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as TextInput from './text-input.stories'; + + # Text Input diff --git a/packages/carbon-web-components/src/components/textarea/textarea.mdx b/packages/carbon-web-components/src/components/textarea/textarea.mdx index fdb3a7f4676..3372958a0e3 100644 --- a/packages/carbon-web-components/src/components/textarea/textarea.mdx +++ b/packages/carbon-web-components/src/components/textarea/textarea.mdx @@ -1,5 +1,8 @@ -import { ArgTypes, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgTypes, Markdown, Meta } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as TextArea from './textarea.stories'; + + # Textarea diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip.mdx b/packages/carbon-web-components/src/components/toggle-tip/toggletip.mdx index 94316d26eb3..b9a6668cb73 100644 --- a/packages/carbon-web-components/src/components/toggle-tip/toggletip.mdx +++ b/packages/carbon-web-components/src/components/toggle-tip/toggletip.mdx @@ -1,5 +1,8 @@ import { ArgsTable, Description, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as ToggleTip from './toggletip.stories'; + + # Toggletip diff --git a/packages/carbon-web-components/src/components/toggle/toggle.mdx b/packages/carbon-web-components/src/components/toggle/toggle.mdx index 1bb4e1d0a5e..d608a9e5c13 100644 --- a/packages/carbon-web-components/src/components/toggle/toggle.mdx +++ b/packages/carbon-web-components/src/components/toggle/toggle.mdx @@ -1,5 +1,8 @@ import { ArgsTable, Description, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as Toggle from './toggle.stories'; + + # Toggle diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip.mdx b/packages/carbon-web-components/src/components/tooltip/tooltip.mdx index b264609b485..aa2eb3795d3 100644 --- a/packages/carbon-web-components/src/components/tooltip/tooltip.mdx +++ b/packages/carbon-web-components/src/components/tooltip/tooltip.mdx @@ -1,5 +1,8 @@ -import { ArgsTable, Description } from '@storybook/blocks'; +import { ArgsTable, Description, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as Tooltip from './tooltip.stories'; + + # Tooltip diff --git a/packages/carbon-web-components/src/components/ui-shell/ui-shell.mdx b/packages/carbon-web-components/src/components/ui-shell/ui-shell.mdx index c57eed87993..c5a1004b831 100644 --- a/packages/carbon-web-components/src/components/ui-shell/ui-shell.mdx +++ b/packages/carbon-web-components/src/components/ui-shell/ui-shell.mdx @@ -1,5 +1,8 @@ -import { ArgTypes, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgTypes, Markdown, Meta } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as UIShell from './ui-shell.stories'; + + # UI Shell 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';