-
Notifications
You must be signed in to change notification settings - Fork 160
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ai-skeleton): new cwc experminetal (#11544)
### Related Ticket(s) Closes #11505 ### Description new AI skeleton for text, popover, and icon ### Changelog **New** - added `optionalClasses` property so I could use the regular skeleton classes and add the AI ones as well - create new stories, readme, and examples - skeleton-text with paragraph option wasn't working in main, so reworked the code to get it working again **Changed** - updated carbon to 1.51 **Removed** - {{removed thing}} <!-- 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
51e021a
commit acb7535
Showing
31 changed files
with
569 additions
and
39 deletions.
There are no files selected for viewing
Binary file renamed
BIN
+1.44 MB
...eact-npm-1.50.0-45fd777863-c5858a0811.zip → ...eact-npm-1.51.0-28e23f28bd-b11073772f.zip
Binary file not shown.
Binary file renamed
BIN
+435 KB
...yles-npm-1.50.0-0dc51225b8-cf8b476de5.zip → ...yles-npm-1.51.0-559dc8b13b-39f9e56f19.zip
Binary file not shown.
Binary file not shown.
Binary file not shown.
22 changes: 22 additions & 0 deletions
22
packages/carbon-web-components/examples/codesandbox/basic/components/ai-skeleton/.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
packages/carbon-web-components/examples/codesandbox/basic/components/ai-skeleton/.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/ai-skeleton/.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" | ||
| ] | ||
| } |
32 changes: 32 additions & 0 deletions
32
packages/carbon-web-components/examples/codesandbox/basic/components/ai-skeleton/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,32 @@ | ||
| <!-- | ||
| @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 */ | ||
| cdsai--skeleton-icon:not(:defined) { | ||
| display: none; | ||
| } | ||
| </style> | ||
| <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/ai-skeleton.min.js"></script> | ||
| </head> | ||
| <body class="cds-theme-zone-white"> | ||
| <cds-ai-skeleton-placeholder></cds-ai-skeleton-placeholder> | ||
| <cds-ai-skeleton-icon></cds-ai-skeleton-icon> | ||
| <cds-ai-skeleton-text></cds-ai-skeleton-text> | ||
|
|
||
| </body> | ||
| </html> |
31 changes: 31 additions & 0 deletions
31
packages/carbon-web-components/examples/codesandbox/basic/components/ai-skeleton/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,31 @@ | ||
| <!-- | ||
| @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-ai-skeleton-icon:not(:defined) { | ||
| display: none; | ||
| } | ||
| </style> | ||
| <script type="module" src="src/index.js"></script> | ||
| </head> | ||
| <body> | ||
| <cds-ai-skeleton-placeholder></cds-ai-skeleton-placeholder> | ||
| <cds-ai-skeleton-icon></cds-ai-skeleton-icon> | ||
| <cds-ai-skeleton-text></cds-ai-skeleton-text> | ||
|
|
||
| </body> | ||
| </html> |
23 changes: 23 additions & 0 deletions
23
...ages/carbon-web-components/examples/codesandbox/basic/components/ai-skeleton/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-ai-skeleton-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
...rbon-web-components/examples/codesandbox/basic/components/ai-skeleton/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
...ages/carbon-web-components/examples/codesandbox/basic/components/ai-skeleton/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/ai-skeleton/index.js'; |
18 changes: 18 additions & 0 deletions
18
...s/carbon-web-components/examples/codesandbox/basic/components/ai-skeleton/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); | ||
| } |
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
31 changes: 31 additions & 0 deletions
31
packages/carbon-web-components/src/components/ai-skeleton/ai-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,31 @@ | ||
| /** | ||
| * @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 './ai-skeleton-icon'; | ||
| import storyDocs from './ai-skeleton-story.mdx'; | ||
|
|
||
| export const Default = () => | ||
| html`<cds-ai-skeleton-icon | ||
| custom-styles="margin: 50px"></cds-ai-skeleton-icon> | ||
| <cds-ai-skeleton-icon | ||
| custom-styles="margin: 50px; width: 24px; height: 24px"></cds-ai-skeleton-icon>`; | ||
|
|
||
| Default.parameters = { | ||
| percy: { | ||
| skip: true, | ||
| }, | ||
| }; | ||
|
|
||
| export default { | ||
| title: 'Experimental/AISkeleton/AISkeletonIcon', | ||
| parameters: { | ||
| ...storyDocs.parameters, | ||
| }, | ||
| }; |
39 changes: 39 additions & 0 deletions
39
packages/carbon-web-components/src/components/ai-skeleton/ai-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,39 @@ | ||
| /** | ||
| * @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, html } from 'lit'; | ||
| import { prefix } from '../../globals/settings'; | ||
| import { property } from 'lit/decorators.js'; | ||
| import styles from './ai-skeleton.scss'; | ||
| import '../skeleton-icon/skeleton-icon'; | ||
| import { carbonElement as customElement } from '../../globals/decorators/carbon-element'; | ||
|
|
||
| /** | ||
| * AI skeleton icon. | ||
| * | ||
| * @element cds-ai-skeleton-icon | ||
| */ | ||
| @customElement(`${prefix}-ai-skeleton-icon`) | ||
| class CDSAISkeletonIcon extends LitElement { | ||
| /** | ||
| * Custom styles to apply to skeleton icon | ||
| */ | ||
| @property({ attribute: 'custom-styles' }) | ||
| customStyles = ''; | ||
|
|
||
| render() { | ||
| return html`<cds-skeleton-icon | ||
| class="${prefix}--skeleton__icon--ai" | ||
| style="${this.customStyles}"></cds-skeleton-icon>`; | ||
| } | ||
|
|
||
| static styles = styles; | ||
| } | ||
|
|
||
| export default CDSAISkeletonIcon; |
29 changes: 29 additions & 0 deletions
29
packages/carbon-web-components/src/components/ai-skeleton/ai-skeleton-placeholder-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,29 @@ | ||
| /** | ||
| * @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 './ai-skeleton-placeholder'; | ||
| import storyDocs from './ai-skeleton-story.mdx'; | ||
|
|
||
| export const Default = () => | ||
| html`<cds-ai-skeleton-placeholder | ||
| class="test"></cds-ai-skeleton-placeholder>`; | ||
|
|
||
| Default.parameters = { | ||
| percy: { | ||
| skip: true, | ||
| }, | ||
| }; | ||
|
|
||
| export default { | ||
| title: 'Experimental/AISkeleton/AISkeletonPlaceholder', | ||
| parameters: { | ||
| ...storyDocs.parameters, | ||
| }, | ||
| }; |
31 changes: 31 additions & 0 deletions
31
packages/carbon-web-components/src/components/ai-skeleton/ai-skeleton-placeholder.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,31 @@ | ||
| /** | ||
| * @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, html } from 'lit'; | ||
| import { prefix } from '../../globals/settings'; | ||
| import styles from './ai-skeleton.scss'; | ||
| import '../skeleton-placeholder/skeleton-placeholder'; | ||
| import { carbonElement as customElement } from '../../globals/decorators/carbon-element'; | ||
|
|
||
| /** | ||
| * AI skeleton placeholder. | ||
| * | ||
| * @element cds-ai-skeleton-placeholder | ||
| */ | ||
| @customElement(`${prefix}-ai-skeleton-placeholder`) | ||
| class CDSAISkeletonPlaceholder extends LitElement { | ||
| render() { | ||
| return html`<cds-skeleton-placeholder | ||
| optional-classes="${prefix}--skeleton__placeholder--ai"></cds-skeleton-placeholder>`; | ||
| } | ||
|
|
||
| static styles = styles; | ||
| } | ||
|
|
||
| export default CDSAISkeletonPlaceholder; |
44 changes: 44 additions & 0 deletions
44
packages/carbon-web-components/src/components/ai-skeleton/ai-skeleton-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,44 @@ | ||
| import { Props, Description } from '@storybook/addon-docs/blocks'; | ||
| import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; | ||
|
|
||
| # AI Skeleton placeholder | ||
|
|
||
| > 💡 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/ai-skeleton) | ||
| > example implementation. | ||
| [](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/ai-skeleton) | ||
|
|
||
| ## Getting started | ||
|
|
||
| Here's a quick example to get you started. | ||
|
|
||
| ### JS (via import) | ||
|
|
||
| ```javascript | ||
| import '@carbon/web-components/es/components/ai-skeleton/index.js'; | ||
| ``` | ||
|
|
||
| <Description markdown={`${cdnJs({ components: ['ai-skeleton'] })}`} /> | ||
| <Description markdown={`${cdnCss()}`} /> | ||
|
|
||
| ### HTML | ||
|
|
||
| ```html | ||
| <cds-ai-skeleton-placeholder></cds-ai-skeleton-placeholder> | ||
| <cds-ai-skeleton-icon></cds-ai-skeleton-icon> | ||
| <cds-ai-skeleton-text></cds-ai-skeleton-text> | ||
|
|
||
| ``` | ||
|
|
||
| ## `<cds-skeleton-placeholder>` attributes, properties and events | ||
|
|
||
| <Props of="cds-skeleton-placeholder" /> | ||
|
|
||
| ## `<cds-skeleton-icon>` attributes, properties and events | ||
|
|
||
| <Props of="cds-skeleton-icon" /> | ||
|
|
||
| ## `<cds-skeleton-text>` attributes, properties and events | ||
|
|
||
| <Props of="cds-skeleton-text" /> |
Oops, something went wrong.