forked from carbon-design-system/carbon
-
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.
fix(tearsheet): tearsheet styles and codesandbox example (carbon-desi…
…gn-system#11792) * fix(tearsheet): import modal and separate nested selectors * fix(tearsheet): codesandbox example * Update packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/index.html
- Loading branch information
Showing
12 changed files
with
572 additions
and
221 deletions.
There are no files selected for viewing
22 changes: 22 additions & 0 deletions
22
...s/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/.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/tearsheet/.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
...ts/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/.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" | ||
| ] | ||
| } |
122 changes: 122 additions & 0 deletions
122
...s/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/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,122 @@ | ||
| <!-- | ||
| @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. | ||
| --> | ||
|
|
||
| <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-button:not(:defined) { | ||
| display: none; | ||
| } | ||
| </style> | ||
| <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/tearsheet.min.js"></script> | ||
| <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/button.min.js"></script> | ||
| <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/text-input.min.js"></script> | ||
| <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/textarea.min.js"></script> | ||
| <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/slug.min.js"></script> | ||
| <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/tabs.min.js"></script> | ||
| </head> | ||
| <body> | ||
| <cds-button id="toggle-tearsheet">Toggle tearsheet</cds-button> | ||
|
|
||
| <cds-tearsheet> | ||
| <!-- default slotted content --> | ||
| <div> | ||
| <h5>Section</h5> | ||
| <div> | ||
| <cds-text-input | ||
| label="Input A" | ||
| id="tearsheet-story-text-input-a"></cds-text-input> | ||
| <cds-text-input | ||
| label="Input B" | ||
| id="tearsheet-story-text-input-b"></cds-text-input> | ||
| </div> | ||
| <div> | ||
| <cds-text-input | ||
| label="Input C" | ||
| id="tearsheet-story-text-input-c"></cds-text-input> | ||
| <cds-text-input | ||
| label="Input D" | ||
| id="tearsheet-story-text-input-d"></cds-text-input> | ||
| </div> | ||
| <div> | ||
| <cds-textarea | ||
| label="Notes" | ||
| value="This is a text area"></cds-textarea> | ||
| <cds-textarea | ||
| label="Notes" | ||
| value="This is a text area"></cds-textarea> | ||
| <cds-textarea | ||
| label="Notes" | ||
| value="This is a text area"></cds-textarea> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- slotted header label --> | ||
| <span slot="label">Optional label for context</span> | ||
|
|
||
| <!-- slotted header title --> | ||
| <span slot="title">Title used to designate the overarching flow of the tearsheet.</span> | ||
|
|
||
| <!-- slotted header description --> | ||
| <span slot="description">Description used to describe the flow if need be.</span> | ||
|
|
||
| <!-- slotted action items cds-buttons --> | ||
| <cds-button key="ghost" slot="actions" kind="ghost"> | ||
| Ghost | ||
| </cds-button> | ||
| <cds-button key="secondary" slot="actions" kind="secondary"> | ||
| Secondary | ||
| </cds-button> | ||
| <cds-button key="primary" slot="actions" kind="primary"> | ||
| Primary | ||
| </cds-button> | ||
|
|
||
| <!-- slotted slug --> | ||
| <cds-slug size="xs" alignment="bottom-right"> | ||
| <div slot="body-text"> | ||
| <p class="secondary">AI Explained</p> | ||
| <h1>84%</h1> | ||
| <p class="secondary bold">Confidence score</p> | ||
| <p class="secondary"> | ||
| Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed | ||
| do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. | ||
| </p> | ||
| <hr /> | ||
| <p class="secondary">Model type</p> | ||
| <p class="bold">Foundation model</p> | ||
| </div> | ||
| </cds-slug> | ||
|
|
||
| <!-- slotted header-navigation --> | ||
| <div slot="header-navigation"> | ||
| <cds-tabs value="1"> | ||
| <cds-tab value="1">Tab 1</cds-tab> | ||
| <cds-tab value="2">Tab 2</cds-tab> | ||
| <cds-tab value="3">Tab 3</cds-tab> | ||
| <cds-tab value="4">Tab 4</cds-tab> | ||
| </cds-tabs> | ||
| </div> | ||
| </cds-tearsheet> | ||
| </body> | ||
| <script> | ||
| const toggleButton = () => { | ||
| const tearsheet = document.querySelector(`cds-tearsheet`); | ||
| tearsheet?.toggleAttribute('open'); | ||
| }; | ||
|
|
||
| document.getElementById("toggle-tearsheet").addEventListener("click", toggleButton); | ||
| </script> | ||
| </html> |
117 changes: 117 additions & 0 deletions
117
...packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/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,117 @@ | ||
| <!-- | ||
| @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. | ||
| --> | ||
|
|
||
| <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-button:not(:defined) { | ||
| display: none; | ||
| } | ||
| </style> | ||
| <script type="module" src="src/index.js"></script> | ||
| </head> | ||
| <body> | ||
| <cds-button id="toggle-tearsheet">Toggle tearsheet</cds-button> | ||
|
|
||
| <cds-tearsheet> | ||
| <!-- default slotted content --> | ||
| <div> | ||
| <h5>Section</h5> | ||
| <div> | ||
| <cds-text-input | ||
| label="Input A" | ||
| id="tearsheet-story-text-input-a"></cds-text-input> | ||
| <cds-text-input | ||
| label="Input B" | ||
| id="tearsheet-story-text-input-b"></cds-text-input> | ||
| </div> | ||
| <div> | ||
| <cds-text-input | ||
| label="Input C" | ||
| id="tearsheet-story-text-input-c"></cds-text-input> | ||
| <cds-text-input | ||
| label="Input D" | ||
| id="tearsheet-story-text-input-d"></cds-text-input> | ||
| </div> | ||
| <div> | ||
| <cds-textarea | ||
| label="Notes" | ||
| value="This is a text area"></cds-textarea> | ||
| <cds-textarea | ||
| label="Notes" | ||
| value="This is a text area"></cds-textarea> | ||
| <cds-textarea | ||
| label="Notes" | ||
| value="This is a text area"></cds-textarea> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- slotted header label --> | ||
| <span slot="label">Optional label for context</span> | ||
|
|
||
| <!-- slotted header title --> | ||
| <span slot="title">Title used to designate the overarching flow of the tearsheet.</span> | ||
|
|
||
| <!-- slotted header description --> | ||
| <span slot="description">Description used to describe the flow if need be.</span> | ||
|
|
||
| <!-- slotted action items cds-buttons --> | ||
| <cds-button key="ghost" slot="actions" kind="ghost"> | ||
| Ghost | ||
| </cds-button> | ||
| <cds-button key="secondary" slot="actions" kind="secondary"> | ||
| Secondary | ||
| </cds-button> | ||
| <cds-button key="primary" slot="actions" kind="primary"> | ||
| Primary | ||
| </cds-button> | ||
|
|
||
| <!-- slotted slug --> | ||
| <cds-slug size="xs" alignment="bottom-right"> | ||
| <div slot="body-text"> | ||
| <p class="secondary">AI Explained</p> | ||
| <h1>84%</h1> | ||
| <p class="secondary bold">Confidence score</p> | ||
| <p class="secondary"> | ||
| Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed | ||
| do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. | ||
| </p> | ||
| <hr /> | ||
| <p class="secondary">Model type</p> | ||
| <p class="bold">Foundation model</p> | ||
| </div> | ||
| </cds-slug> | ||
|
|
||
| <!-- slotted header-navigation --> | ||
| <div slot="header-navigation"> | ||
| <cds-tabs value="1"> | ||
| <cds-tab value="1">Tab 1</cds-tab> | ||
| <cds-tab value="2">Tab 2</cds-tab> | ||
| <cds-tab value="3">Tab 3</cds-tab> | ||
| <cds-tab value="4">Tab 4</cds-tab> | ||
| </cds-tabs> | ||
| </div> | ||
| </cds-tearsheet> | ||
| </body> | ||
| <script> | ||
| const toggleButton = () => { | ||
| const tearsheet = document.querySelector(`cds-tearsheet`); | ||
| tearsheet?.toggleAttribute('open'); | ||
| }; | ||
|
|
||
| document.getElementById("toggle-tearsheet").addEventListener("click", toggleButton); | ||
| </script> | ||
| </html> |
25 changes: 25 additions & 0 deletions
25
...ckages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/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,25 @@ | ||
| { | ||
| "name": "carbon-web-components-tearsheet-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", | ||
| "@babel/plugin-transform-runtime": "^7.24.3", | ||
| "@babel/preset-env": "^7.24.5", | ||
| "parcel-bundler": "1.12.3", | ||
| "rimraf": "^3.0.2" | ||
| } | ||
| } |
3 changes: 3 additions & 0 deletions
3
...carbon-web-components/examples/codesandbox/basic/components/tearsheet/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" | ||
| } |
15 changes: 15 additions & 0 deletions
15
...ckages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/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,15 @@ | ||
| /** | ||
| * @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/tearsheet/index.js'; | ||
| import '@carbon/web-components/es/components/button/index.js'; | ||
| import '@carbon/web-components/es/components/text-input/index.js'; | ||
| import '@carbon/web-components/es/components/textarea/index.js'; | ||
| import '@carbon/web-components/es/components/slug/index.js'; | ||
| import '@carbon/web-components/es/components/tabs/index.js'; |
16 changes: 16 additions & 0 deletions
16
...ges/carbon-web-components/examples/codesandbox/basic/components/tearsheet/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,16 @@ | ||
| /** | ||
| * 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
Oops, something went wrong.