diff --git a/.github/workflows/percy-update-base.yml b/.github/workflows/percy-update-base.yml index 97e7de71ab4..f942cc8f29c 100644 --- a/.github/workflows/percy-update-base.yml +++ b/.github/workflows/percy-update-base.yml @@ -37,7 +37,7 @@ jobs: KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }} PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_WEBCOMPONENTS }} - name: Run percy storybook - run: yarn visual-snapshot + run: yarn build-storybook && visual-snapshot working-directory: packages/web-components carbon-web-components: if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom' @@ -67,5 +67,5 @@ jobs: KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }} PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_CARBONWEBCOMPONENTS }} - name: Run percy storybook - run: yarn visual-snapshot + run: yarn build-storybook && visual-snapshot working-directory: packages/carbon-web-components diff --git a/.yarn/cache/@carbon-pictograms-react-npm-11.55.0-251910078b-0b853265f4.zip b/.yarn/cache/@carbon-pictograms-react-npm-11.56.0-96a530534c-fe9ce8e53a.zip similarity index 67% rename from .yarn/cache/@carbon-pictograms-react-npm-11.55.0-251910078b-0b853265f4.zip rename to .yarn/cache/@carbon-pictograms-react-npm-11.56.0-96a530534c-fe9ce8e53a.zip index 8f3f470897a..59a1943ad4f 100644 Binary files a/.yarn/cache/@carbon-pictograms-react-npm-11.55.0-251910078b-0b853265f4.zip and b/.yarn/cache/@carbon-pictograms-react-npm-11.56.0-96a530534c-fe9ce8e53a.zip differ diff --git a/.yarn/cache/@carbon-themes-npm-11.28.0-2d991e932c-efb53f286a.zip b/.yarn/cache/@carbon-themes-npm-11.28.0-2d991e932c-efb53f286a.zip deleted file mode 100644 index 905adda188b..00000000000 Binary files a/.yarn/cache/@carbon-themes-npm-11.28.0-2d991e932c-efb53f286a.zip and /dev/null differ 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/package.json b/packages/carbon-web-components/package.json index 01548fcf56d..6ebdebb23b9 100644 --- a/packages/carbon-web-components/package.json +++ b/packages/carbon-web-components/package.json @@ -46,7 +46,7 @@ "test:unit": "gulp test:unit", "test:unit:updateSnapshot": "gulp test:unit --update-snapshot", "typecheck": "tsc --noEmit -p tsconfig.json", - "visual-snapshot": "yarn build-storybook && percy storybook:start ./storybook-static", + "visual-snapshot": "yarn percy storybook:start ./storybook-static", "wca": "web-component-analyzer analyze src --outFile custom-elements.json" }, "files": [ diff --git a/packages/carbon-web-components/src/components/progress-indicator/progress-step.ts b/packages/carbon-web-components/src/components/progress-indicator/progress-step.ts index 449780f69a2..d88294fc0a7 100644 --- a/packages/carbon-web-components/src/components/progress-indicator/progress-step.ts +++ b/packages/carbon-web-components/src/components/progress-indicator/progress-step.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. @@ -126,7 +126,7 @@ export default class CDSProgressStep extends FocusMixin(LitElement) { }[state], children: svgLabel ? svg`${svgLabel}` : undefined, })} - +

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'; diff --git a/packages/carbon-web-components/tests/snapshots/cds-checkbox.md b/packages/carbon-web-components/tests/snapshots/cds-checkbox.md index a0d0ae7de41..d3c4be9d836 100644 --- a/packages/carbon-web-components/tests/snapshots/cds-checkbox.md +++ b/packages/carbon-web-components/tests/snapshots/cds-checkbox.md @@ -51,7 +51,6 @@ > - Checkbox label @@ -61,3 +60,4 @@ ``` + diff --git a/packages/carbon-web-components/tests/snapshots/cds-progress-step.md b/packages/carbon-web-components/tests/snapshots/cds-progress-step.md index bd584108d28..972d80e6bdd 100644 --- a/packages/carbon-web-components/tests/snapshots/cds-progress-step.md +++ b/packages/carbon-web-components/tests/snapshots/cds-progress-step.md @@ -9,7 +9,7 @@ class="cds--progress-step-button" tabindex="0" > - +

- +

{ diff --git a/yarn.lock b/yarn.lock index 86be99994cb..16739b70009 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4299,7 +4299,7 @@ __metadata: "@carbon/layout": "npm:11.20.1" "@carbon/styles": "npm:1.48.1" "@carbon/telemetry": "npm:0.1.0" - "@carbon/themes": "npm:11.28.0" + "@carbon/themes": "npm:11.29.0" "@carbon/type": "npm:11.25.1" del: "npm:^6.0.0" gulp: "npm:^4.0.2" @@ -4404,7 +4404,7 @@ __metadata: "@carbon/icons-react": "npm:^11.33.0" "@carbon/layout": "npm:11.20.1" "@carbon/motion": "npm:11.16.1" - "@carbon/pictograms-react": "npm:11.55.0" + "@carbon/pictograms-react": "npm:11.56.0" "@carbon/react": "npm:1.48.0" "@carbon/styles": "npm:1.48.1" "@carbon/telemetry": "npm:0.1.0" @@ -4595,16 +4595,16 @@ __metadata: languageName: node linkType: hard -"@carbon/pictograms-react@npm:11.55.0": - version: 11.55.0 - resolution: "@carbon/pictograms-react@npm:11.55.0" +"@carbon/pictograms-react@npm:11.56.0": + version: 11.56.0 + resolution: "@carbon/pictograms-react@npm:11.56.0" dependencies: "@carbon/icon-helpers": "npm:^10.45.0" "@carbon/telemetry": "npm:0.1.0" prop-types: "npm:^15.7.2" peerDependencies: react: ">=16" - checksum: 0b853265f47f912dabf767d61687e30117b3744fca5fbc74c7366a5f40244fdbe4ca065518d7fb3dcd0bac89ddd5525e28f75dec1136ab1e91efe7e3184b2a20 + checksum: fe9ce8e53aee211bd5ff16531f37fa36345869fbdcbd8dc246d0e634d3f87d63149ce222b9ed14915e50163cd8208c9ca0828ef516e5773bd4b5f00a4d3294f3 languageName: node linkType: hard @@ -4706,19 +4706,7 @@ __metadata: languageName: node linkType: hard -"@carbon/themes@npm:11.28.0": - version: 11.28.0 - resolution: "@carbon/themes@npm:11.28.0" - dependencies: - "@carbon/colors": "npm:^11.20.0" - "@carbon/layout": "npm:^11.20.0" - "@carbon/type": "npm:^11.25.0" - color: "npm:^4.0.0" - checksum: efb53f286a8143901b640f0a86d0ea63281becd472a50ed87bc76b950d45dd438ef5456990506f3bc359f29ff6d7a881c5f629f7e6f0cd928747d4f9395f21c9 - languageName: node - linkType: hard - -"@carbon/themes@npm:^11.29.0": +"@carbon/themes@npm:11.29.0, @carbon/themes@npm:^11.29.0": version: 11.29.0 resolution: "@carbon/themes@npm:11.29.0" dependencies: