From 3daade4a1a971012ad1f667c4f3fdb64aa0f3358 Mon Sep 17 00:00:00 2001 From: ariellalgilmore Date: Thu, 26 Oct 2023 11:19:19 -0700 Subject: [PATCH] feat(content-item): v2 updates --- .../expressive-modal/_expressive-modal.scss | 1 - .../styles/scss/components/image/_image.scss | 4 +- .../internal/content-item/_content-item.scss | 85 ++++--- .../content-item/src/index.js | 6 +- .../pictogram-item/.gitignore | 2 - .../pictogram-item/index.html | 24 -- .../pictogram-item/package.json | 35 --- .../pictogram-item/sandbox.config.json | 3 - .../pictogram-item/src/index.js | 50 ---- .../pictogram-item/webpack.config.js | 47 ---- .../components/content-item/cdn.html | 6 +- .../components/content-item/index.html | 16 +- .../components/pictogram-item/.babelrc | 22 -- .../components/pictogram-item/.gitignore | 22 -- .../components/pictogram-item/.sassrc | 5 - .../components/pictogram-item/cdn.html | 74 ------ .../components/pictogram-item/index.html | 73 ------ .../components/pictogram-item/package.json | 24 -- .../pictogram-item/sandbox.config.json | 3 - .../components/pictogram-item/src/index.js | 11 - .../components/pictogram-item/src/index.scss | 16 -- .../content-group-pictograms.stories.ts | 11 +- .../__stories__/README.stories.mdx | 149 ++++++++++- .../__stories__/README.stories.react.mdx | 136 +++++++++- .../content-item.stories.react.tsx | 156 ++++++++---- .../__stories__/content-item.stories.ts | 232 ++++++++++++++---- .../components/content-item/content-item.scss | 14 -- .../components/content-item/content-item.ts | 126 ++++++---- .../src/components/content-item/index.ts | 4 +- .../__stories__/cta-section.stories.ts | 45 ++-- .../__stories__/README.stories.mdx | 98 -------- .../__stories__/README.stories.react.mdx | 79 ------ .../pictogram-item.stories.react.tsx | 232 ------------------ .../__stories__/pictogram-item.stories.scss | 10 - .../__stories__/pictogram-item.stories.ts | 232 ------------------ .../__tests__/pictogram-item.test.ts | 30 --- 36 files changed, 742 insertions(+), 1341 deletions(-) delete mode 100644 packages/web-components/examples/codesandbox/components-react/pictogram-item/.gitignore delete mode 100644 packages/web-components/examples/codesandbox/components-react/pictogram-item/index.html delete mode 100644 packages/web-components/examples/codesandbox/components-react/pictogram-item/package.json delete mode 100644 packages/web-components/examples/codesandbox/components-react/pictogram-item/sandbox.config.json delete mode 100644 packages/web-components/examples/codesandbox/components-react/pictogram-item/src/index.js delete mode 100644 packages/web-components/examples/codesandbox/components-react/pictogram-item/webpack.config.js delete mode 100644 packages/web-components/examples/codesandbox/components/pictogram-item/.babelrc delete mode 100644 packages/web-components/examples/codesandbox/components/pictogram-item/.gitignore delete mode 100644 packages/web-components/examples/codesandbox/components/pictogram-item/.sassrc delete mode 100644 packages/web-components/examples/codesandbox/components/pictogram-item/cdn.html delete mode 100644 packages/web-components/examples/codesandbox/components/pictogram-item/index.html delete mode 100644 packages/web-components/examples/codesandbox/components/pictogram-item/package.json delete mode 100644 packages/web-components/examples/codesandbox/components/pictogram-item/sandbox.config.json delete mode 100644 packages/web-components/examples/codesandbox/components/pictogram-item/src/index.js delete mode 100644 packages/web-components/examples/codesandbox/components/pictogram-item/src/index.scss delete mode 100644 packages/web-components/src/components/pictogram-item/__stories__/README.stories.mdx delete mode 100644 packages/web-components/src/components/pictogram-item/__stories__/README.stories.react.mdx delete mode 100644 packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.react.tsx delete mode 100644 packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.scss delete mode 100644 packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.ts delete mode 100644 packages/web-components/src/components/pictogram-item/__tests__/pictogram-item.test.ts diff --git a/packages/styles/scss/components/expressive-modal/_expressive-modal.scss b/packages/styles/scss/components/expressive-modal/_expressive-modal.scss index a1ad561cef8..4f8f544fad7 100644 --- a/packages/styles/scss/components/expressive-modal/_expressive-modal.scss +++ b/packages/styles/scss/components/expressive-modal/_expressive-modal.scss @@ -24,7 +24,6 @@ @mixin expressive-modal { $icon-size: rem(20px); - :host(#{$c4d-prefix}-expressive-modal) { @extend :host(#{$prefix}-modal); diff --git a/packages/styles/scss/components/image/_image.scss b/packages/styles/scss/components/image/_image.scss index 7a0dccb4168..f7755bd467b 100644 --- a/packages/styles/scss/components/image/_image.scss +++ b/packages/styles/scss/components/image/_image.scss @@ -173,7 +173,7 @@ } } - // cds-image-logo style. + // c4d-image-logo style. :host(#{$c4d-prefix}-image-logo) { background-color: $layer-02; margin: $spacing-05 $spacing-05 $spacing-03 $spacing-05; @@ -183,6 +183,8 @@ .#{$c4d-prefix}--image__img { object-fit: contain; + width: 100%; + height: 100%; } } } diff --git a/packages/styles/scss/internal/content-item/_content-item.scss b/packages/styles/scss/internal/content-item/_content-item.scss index 20465b60d45..844d3a4d144 100644 --- a/packages/styles/scss/internal/content-item/_content-item.scss +++ b/packages/styles/scss/internal/content-item/_content-item.scss @@ -10,6 +10,7 @@ @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/utilities' as *; @use '../../globals/vars' as *; @use '../../globals/utils/content-width' as *; @use '../../components/list/list'; @@ -17,64 +18,90 @@ @use '../../components/button-group'; @mixin content-item { - .#{$prefix}--content-item--inverse { - background-color: $focus-inset; + :host(#{$c4d-prefix}-content-item) { + display: block; + margin-top: $spacing-07; + margin-bottom: $spacing-07; + max-width: rem(640px); - .#{$prefix}--content-item__heading { - color: $text-on-color; + @include breakpoint(md) { + padding-right: $spacing-05; } - .#{$prefix}--content-item__copy p { - color: $text-on-color; + .#{$c4d-prefix}--content-item__horizontal { + @include breakpoint(md) { + display: flex; + } + .#{$c4d-prefix}--content-item__media { + margin-right: $spacing-07; + } } - } - :host(#{$c4d-prefix}-content-item), - .#{$prefix}--content-item { - display: block; - margin-top: $spacing-07; - margin-bottom: $spacing-07; + .#{$c4d-prefix}--content-item__statitics { + @include type-style('fluid-display-01', true); + margin-bottom: $spacing-05; + } + + .#{$c4d-prefix}--content-item__media { + margin-bottom: $spacing-05; + } + + ::slotted(#{$c4d-prefix}-image-logo) { + /* stylelint-disable */ + aspect-ratio: var(--logo-ratio); + /* stylelint-enable */ + margin: 0; + max-width: $spacing-12; + margin-bottom: $spacing-06; + } + + ::slotted(svg) { + width: $spacing-10; + height: $spacing-10; + } } :host(#{$c4d-prefix}-content-item) - ::slotted(#{$c4d-prefix}-video-player-container), - .#{$prefix}--content-item .#{$prefix}--video-player { + ::slotted(#{$c4d-prefix}-video-player-container) { margin-top: $spacing-05; margin-bottom: $spacing-07; max-width: 40rem; } - .#{$prefix}--content-item .#{$prefix}--image-with-caption { - margin-top: $spacing-05; - } - :host(#{$c4d-prefix}-content-item-heading), :host(#{$c4d-prefix}-content-item-copy), - .#{$prefix}--content-item__heading, - .#{$prefix}--content-item__copy { + :host(#{$c4d-prefix}-content-item-paragraph) { + display: block; + } + + :host(#{$c4d-prefix}-content-item-copy) { @include breakpoint(md) { @include content-width; - - display: block; } } - :host(#{$c4d-prefix}-content-item-heading), - .#{$prefix}--content-item__heading { + :host(#{$c4d-prefix}-content-item-heading) { @include type-style('heading-02'); color: $text-primary; } - :host(#{$c4d-prefix}-content-item-paragraph), - .#{$prefix}--content-item__copy p { + :host(#{$c4d-prefix}-content-item-paragraph) { @include type-style('body-02'); color: $text-primary; - margin-bottom: $spacing-06; + margin-bottom: $spacing-05; } - .#{$prefix}--content-item__cta { - margin-top: $spacing-05; + :host(#{$c4d-prefix}-content-item[horizontal]) + ::slotted(#{$c4d-prefix}-image) { + width: 100%; + @include breakpoint(md) { + width: rem(128px); + } + } + + :host(#{$c4d-prefix}-content-item) ::slotted([slot='footer']) { + margin-left: 0; } } diff --git a/packages/web-components/examples/codesandbox/components-react/content-item/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-item/src/index.js index b49b123a170..cce11b521b9 100644 --- a/packages/web-components/examples/codesandbox/components-react/content-item/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/content-item/src/index.js @@ -12,16 +12,16 @@ import { render } from 'react-dom'; import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item'; import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy'; -import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta'; +import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon'; import './index.css'; const App = () => ( Heading Copy - + CTA text - + ); diff --git a/packages/web-components/examples/codesandbox/components-react/pictogram-item/.gitignore b/packages/web-components/examples/codesandbox/components-react/pictogram-item/.gitignore deleted file mode 100644 index 7d5b7a94f4d..00000000000 --- a/packages/web-components/examples/codesandbox/components-react/pictogram-item/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -/build -/node_modules diff --git a/packages/web-components/examples/codesandbox/components-react/pictogram-item/index.html b/packages/web-components/examples/codesandbox/components-react/pictogram-item/index.html deleted file mode 100644 index 66fb6ec136d..00000000000 --- a/packages/web-components/examples/codesandbox/components-react/pictogram-item/index.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - carbon-web-components example with React - - - -
- - - diff --git a/packages/web-components/examples/codesandbox/components-react/pictogram-item/package.json b/packages/web-components/examples/codesandbox/components-react/pictogram-item/package.json deleted file mode 100644 index 22f60318d4b..00000000000 --- a/packages/web-components/examples/codesandbox/components-react/pictogram-item/package.json +++ /dev/null @@ -1,35 +0,0 @@ -{ - "name": "ibmdotcom-web-components-react-pictogram-item-example", - "version": "0.1.0", - "private": true, - "description": "Sample project for getting started with the Web Components from Carbon for IBM.com with React.", - "license": "Apache-2", - "scripts": { - "start": "webpack serve" - }, - "dependencies": { - "@carbon/ibmdotcom-web-components": "latest", - "@carbon/icons-react": "~10.22.0", - "carbon-components": "~10.23.0", - "lit-element": "^2.5.1", - "lit-html": "^1.4.1", - "lodash-es": "^4.17.0", - "prop-types": "^15.7.0", - "react": "^17.0.0", - "react-dom": "^17.0.0", - "react-redux": "^7.2.0" - }, - "devDependencies": { - "@babel/core": "^7.0.0", - "@babel/preset-react": "^7.10.0", - "@types/lodash-es": "^4.17.0", - "@types/react": "^16.9.0", - "babel-loader": "^8.2.0", - "css-loader": "^4.3.0", - "html-webpack-plugin": "^4.5.0", - "style-loader": "^2.0.0", - "webpack": "^4.0.0", - "webpack-cli": "^4.0.0", - "webpack-dev-server": "^3.11.0" - } -} diff --git a/packages/web-components/examples/codesandbox/components-react/pictogram-item/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/pictogram-item/sandbox.config.json deleted file mode 100644 index a4df8557d7b..00000000000 --- a/packages/web-components/examples/codesandbox/components-react/pictogram-item/sandbox.config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "template": "node" -} diff --git a/packages/web-components/examples/codesandbox/components-react/pictogram-item/src/index.js b/packages/web-components/examples/codesandbox/components-react/pictogram-item/src/index.js deleted file mode 100644 index 7cc02a2870e..00000000000 --- a/packages/web-components/examples/codesandbox/components-react/pictogram-item/src/index.js +++ /dev/null @@ -1,50 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020, 2022 - * - * 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 React from 'react'; -import { render } from 'react-dom'; -import C4DPictogramItem from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item'; -import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading.js'; -import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js'; -import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; -import './index.css'; - -const App = () => ( - - - - - Example heading - Example item copy - - Link with icon - - -); - -render(, document.getElementById('root')); diff --git a/packages/web-components/examples/codesandbox/components-react/pictogram-item/webpack.config.js b/packages/web-components/examples/codesandbox/components-react/pictogram-item/webpack.config.js deleted file mode 100644 index 634d4927863..00000000000 --- a/packages/web-components/examples/codesandbox/components-react/pictogram-item/webpack.config.js +++ /dev/null @@ -1,47 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020, 2022 - * - * 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 strict'; - -const HtmlWebpackPlugin = require('html-webpack-plugin'); - -module.exports = { - module: { - rules: [ - { - test: /\.js$/, - use: [ - { - loader: 'babel-loader', - options: { - presets: ['@babel/preset-react'], - }, - }, - ], - }, - { - test: /\.css$/, - sideEffects: true, - use: ['style-loader', 'css-loader'], - }, - ], - }, - plugins: [ - // Lets WebPack Dev Server serve `.html` file. - // If you have other means to server `.html` content, this is not needed. - new HtmlWebpackPlugin({ - template: 'index.html', - inject: false, - }), - ], - output: { - library: 'index', - filename: 'index.js', - }, -}; diff --git a/packages/web-components/examples/codesandbox/components/content-item/cdn.html b/packages/web-components/examples/codesandbox/components/content-item/cdn.html index d8bd3f9a2a4..04bd5c02a77 100644 --- a/packages/web-components/examples/codesandbox/components/content-item/cdn.html +++ b/packages/web-components/examples/codesandbox/components/content-item/cdn.html @@ -23,11 +23,13 @@
-
+
Heading Copy - CTA text + + CTA text
diff --git a/packages/web-components/examples/codesandbox/components/content-item/index.html b/packages/web-components/examples/codesandbox/components/content-item/index.html index a6352564e7d..add51d0307f 100644 --- a/packages/web-components/examples/codesandbox/components/content-item/index.html +++ b/packages/web-components/examples/codesandbox/components/content-item/index.html @@ -13,7 +13,7 @@ @@ -23,12 +23,14 @@
-
- - Heading - Copy - CTA text - +
+ + Heading + Copy + + CTA text +
diff --git a/packages/web-components/examples/codesandbox/components/pictogram-item/.babelrc b/packages/web-components/examples/codesandbox/components/pictogram-item/.babelrc deleted file mode 100644 index 74450eed94b..00000000000 --- a/packages/web-components/examples/codesandbox/components/pictogram-item/.babelrc +++ /dev/null @@ -1,22 +0,0 @@ -{ - "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/web-components/examples/codesandbox/components/pictogram-item/.gitignore b/packages/web-components/examples/codesandbox/components/pictogram-item/.gitignore deleted file mode 100644 index d94d6e13e94..00000000000 --- a/packages/web-components/examples/codesandbox/components/pictogram-item/.gitignore +++ /dev/null @@ -1,22 +0,0 @@ -# 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/web-components/examples/codesandbox/components/pictogram-item/.sassrc b/packages/web-components/examples/codesandbox/components/pictogram-item/.sassrc deleted file mode 100644 index c0ad86448e3..00000000000 --- a/packages/web-components/examples/codesandbox/components/pictogram-item/.sassrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "includePaths": [ - "node_modules", "../../node_modules" - ], -} diff --git a/packages/web-components/examples/codesandbox/components/pictogram-item/cdn.html b/packages/web-components/examples/codesandbox/components/pictogram-item/cdn.html deleted file mode 100644 index 3dbd44cdcae..00000000000 --- a/packages/web-components/examples/codesandbox/components/pictogram-item/cdn.html +++ /dev/null @@ -1,74 +0,0 @@ - - - - - @carbon/ibmdotcom-web-components example - - - - - - - -
-
-
- - - - - Lorem ipsum dolor sit - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam - - Lorem ipsum dolor - - - -
-
-
- - diff --git a/packages/web-components/examples/codesandbox/components/pictogram-item/index.html b/packages/web-components/examples/codesandbox/components/pictogram-item/index.html deleted file mode 100644 index 5dbd6e325a0..00000000000 --- a/packages/web-components/examples/codesandbox/components/pictogram-item/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - @carbon/ibmdotcom-web-components example - - - - - - -
-
-
- - - - - Lorem ipsum dolor sit - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam - - Lorem ipsum dolor - - - -
-
-
- - diff --git a/packages/web-components/examples/codesandbox/components/pictogram-item/package.json b/packages/web-components/examples/codesandbox/components/pictogram-item/package.json deleted file mode 100644 index 98cec88a1c1..00000000000 --- a/packages/web-components/examples/codesandbox/components/pictogram-item/package.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "name": "ibmdotcom-web-components-pictogram-item-example", - "version": "0.1.0", - "private": true, - "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.", - "license": "Apache-2", - "main": "index.html", - "scripts": { - "clean": "rimraf node_modules dist .cache", - "start": "parcel index.html --port=9000 --no-hmr", - "build": "parcel build *.html --no-minify --public-url ./" - }, - "dependencies": { - "@carbon/ibmdotcom-web-components": "latest" - }, - "devDependencies": { - "@babel/core": "^7.14.3", - "@babel/plugin-transform-runtime": "^7.14.3", - "carbon-components": "^10.36.0", - "parcel-bundler": "1.12.3", - "rimraf": "^3.0.2", - "sass": "^1.32.13" - } -} diff --git a/packages/web-components/examples/codesandbox/components/pictogram-item/sandbox.config.json b/packages/web-components/examples/codesandbox/components/pictogram-item/sandbox.config.json deleted file mode 100644 index a4df8557d7b..00000000000 --- a/packages/web-components/examples/codesandbox/components/pictogram-item/sandbox.config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "template": "node" -} diff --git a/packages/web-components/examples/codesandbox/components/pictogram-item/src/index.js b/packages/web-components/examples/codesandbox/components/pictogram-item/src/index.js deleted file mode 100644 index 25f6474410b..00000000000 --- a/packages/web-components/examples/codesandbox/components/pictogram-item/src/index.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020, 2021 - * - * 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/ibmdotcom-web-components/es/components/pictogram-item/index.js'; -import './index.scss'; diff --git a/packages/web-components/examples/codesandbox/components/pictogram-item/src/index.scss b/packages/web-components/examples/codesandbox/components/pictogram-item/src/index.scss deleted file mode 100644 index 482728f8cc5..00000000000 --- a/packages/web-components/examples/codesandbox/components/pictogram-item/src/index.scss +++ /dev/null @@ -1,16 +0,0 @@ -// -// @license -// -// Copyright IBM Corp. 2020, 2021 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -// `enable-css-custom-properties` and `grid-columns-16` feature flags are requirements for Carbon for IBM.com styles -$feature-flags: ( - enable-css-custom-properties: true, - grid-columns-16: true, -); - -@import 'carbon-components/scss/globals/grid/grid'; diff --git a/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.ts b/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.ts index 8997e575219..53192b3a860 100644 --- a/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.ts +++ b/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.ts @@ -92,12 +92,13 @@ export const Default = (args) => { ${groupCopy} ${pictogramsItems.map( ({ heading, copy, linkWithIcon }) => html` - + { ${heading} ${copy} - - ${linkWithIcon.copy} ${ArrowRight20({ slot: 'icon' })} + + ${linkWithIcon.copy} - + ` )} diff --git a/packages/web-components/src/components/content-item/__stories__/README.stories.mdx b/packages/web-components/src/components/content-item/__stories__/README.stories.mdx index d729686e475..96f60ce1b68 100644 --- a/packages/web-components/src/components/content-item/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-item/__stories__/README.stories.mdx @@ -3,7 +3,7 @@ import markdownContents from '../../../../docs/markdown-contents.md'; import contributing from '../../../../../../docs/contributing-license.md'; import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn'; -# `` +# `` > 💡 Check our > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item) @@ -28,18 +28,145 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item/index.js'; ### HTML ```html - - Heading - Copy - - CTA text + Heading + Copy + + CTA text - + +``` + +### HTML (with statistics) + +```html + + 10% + Heading + Copy + + CTA text + +``` + +### HTML (with pictogram) + +```html + + + + + Heading + Copy + + CTA text + +``` +### JS (with media) + +```javascript +import '@carbon/ibmdotcom-web-components/es/components/content-item/index.js'; +import '@carbon/ibmdotcom-web-components/es/components/image/index.js'; +import '@carbon/ibmdotcom-web-components/es/components/video-player/index.js'; +``` + + + + + +### HTML + +```html + + + + Heading + Copy + + CTA text + + + + + Heading + Copy + + CTA text + +``` + +### JS (with logo) + +```javascript +import '@carbon/ibmdotcom-web-components/es/components/content-item/index.js'; +import '@carbon/ibmdotcom-web-components/es/components/image/image-logo.js'; +``` + + + + + +### HTML + +```html + + + Heading + Copy + + CTA text + + + + + Heading + Copy + + CTA text + ``` ## Props - + ## Stable selectors @@ -50,8 +177,8 @@ to see how Web Components selector and `data-autoid` should be used. | Web Components selector | Compatibility selector | Description | | ---------------------------- | ------------------------------------------ | ----------- | -| `` | `data-autoid="cds--content-item"` | Component | -| `` | `data-autoid="cds--content-item__copy"` | Component | -| `` | `data-autoid="cds--content-item__heading"` | Component | +| `` | `data-autoid="c4d--content-item"` | Component | +| `` | `data-autoid="c4d--content-item__copy"` | Component | +| `` | `data-autoid="c4d--content-item__heading"` | Component | diff --git a/packages/web-components/src/components/content-item/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-item/__stories__/README.stories.react.mdx index e11235dbcde..765c1cb3911 100644 --- a/packages/web-components/src/components/content-item/__stories__/README.stories.react.mdx +++ b/packages/web-components/src/components/content-item/__stories__/README.stories.react.mdx @@ -26,22 +26,144 @@ Here's a quick example to get you started. import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item'; import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy'; -import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta'; +import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon'; const App = () => ( Heading Copy - + CTA text - + + +); +``` + +### JS (with statistics) + +```javascript +import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item'; +import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; +import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy'; +import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon'; + +const App = () => ( + + 10% + Heading + Copy + + CTA text + + +); +``` + +### JS (with pictogram) + +```javascript +import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item'; +import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; +import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy'; +import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon'; + +const App = () => ( + + + + + Heading + Copy + + CTA text + + +); +``` + +### JS (with media) + +```javascript +import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item'; +import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; +import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy'; +import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon'; +import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image'; +import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/index'; + +const App = () => ( + + + Heading + Copy + + CTA text + + + + + Heading + Copy + + CTA text + + +); +``` + +### JS (with logo) + +```javascript +import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item'; +import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; +import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy'; +import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon'; +import C4DImageLogo from '@carbon/ibmdotcom-web-components/es/components-react/image/image-logo'; + +const App = () => ( + + + Heading + Copy + + CTA text + ); ``` ## Props - + ## Stable selectors @@ -52,8 +174,8 @@ to see how Web Components selector and `data-autoid` should be used. | Web Components selector | Compatibility selector | Description | | ---------------------------- | ------------------------------------------ | ----------- | -| `` | `data-autoid="cds--content-item"` | Component | -| `` | `data-autoid="cds--content-item__copy"` | Component | -| `` | `data-autoid="cds--content-item__heading"` | Component | +| `` | `data-autoid="c4d--content-item"` | Component | +| `` | `data-autoid="c4d--content-item__copy"` | Component | +| `` | `data-autoid="c4d--content-item__heading"` | Component | diff --git a/packages/web-components/src/components/content-item/__stories__/content-item.stories.react.tsx b/packages/web-components/src/components/content-item/__stories__/content-item.stories.react.tsx index 834c6a5ec8f..283179ba441 100644 --- a/packages/web-components/src/components/content-item/__stories__/content-item.stories.react.tsx +++ b/packages/web-components/src/components/content-item/__stories__/content-item.stories.react.tsx @@ -15,56 +15,101 @@ import React from 'react'; import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item'; import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy'; -import C4DButtonCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/button-cta'; -import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta'; +import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon'; import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image'; import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container'; +import C4DImageLogo from '@carbon/ibmdotcom-web-components/es/components-react/card/image-logo'; + +import imgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--001.jpg'; +import logoMicrosoft2x1 from '../../../../../storybook-images/assets/logos/logo-microsoft--2x1.png'; -import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--005.jpg'; import textNullable from '../../../../.storybook/knob-text-nullable'; import readme from './README.stories.react.mdx'; +const contentItemTypeOptions = { + Text: 'text', + Statistics: 'statistics', + Pictogram: 'pictogram', + Media: 'media', + Logo: 'logo', +}; + +const app = + ; + +const pictogram = + +; + export const Default = (args) => { - const { heading, media, copy, showCopy, ctaStyle, ctaCopy } = - args?.ContentItem ?? {}; + const { + type, + heading, + horizontal, + mediaType, + pictogramType, + copy, + showCopy, + ctaStyle, + ctaCopy, + } = args?.ContentItem ?? {}; return ( - - {media === 'image' ? ( + + {type === 'statistics' ? 10% : ``} + {type === 'pictogram' ? pictogramType === 'pictogram' + ? pictogram + : pictogramType === 'app icon' + ? app + : `` + : ``} + {type === 'media' + ? mediaType === 'image' + ? ( - ) : ( - '' - )} - {media === 'video' ? ( + default-src={imgLg1x1}> + ) : mediaType === 'video' ? ( - ) : ( - '' - )} + video-id="0_ibuqxqbe" hide-caption> + ) : `` : ``} + {type === 'logo' ? ( + + ) : ``} {heading} {showCopy ? {copy} : ''} {ctaStyle === 'text' ? ( - {ctaCopy} - - ) : ( - '' - )} - {ctaStyle === 'button' ? ( - - {ctaCopy} - + ) : ( '' )} @@ -80,7 +125,7 @@ export default { <>
-
{story()}
+
{story()}
@@ -91,31 +136,38 @@ export default { ...readme.parameters, hasStoryPadding: true, knobs: { - ContentItem: () => ({ - heading: textNullable('Heading:', 'Natural language understanding'), - media: select('Media type:', ['none', 'image', 'video'], 'none'), - showCopy: boolean('Copy:', true), - copy: - 'This area of NLP takes "real world" text and applies a symbolic ' + - 'system for a machine to interpret its meaning, using formal logic; structures ' + - 'that describe the various relationships between concepts (ontologies); and other semantic tools.', - ctaStyle: select('CTA style:', ['text', 'button'], 'text'), - ctaCopy: textNullable('CTA copy:', 'Learn more about NLP'), - }), - }, - propsSet: { - default: { - ContentItem: { - heading: 'Natural language understanding', - media: 'none', - showCopy: true, + ContentItem: () => { + const type = select( + 'Content item type', + contentItemTypeOptions, + contentItemTypeOptions.Text + ); + const mediaType = + type === 'media' + ? select('Media type:', ['image', 'video'], 'image') + : ''; + const pictogramType = + type === 'pictogram' + ? select('Pictogram type', ['pictogram', 'app icon'], 'pictogram') + : ''; + const horizontal = + type === 'pictogram' || mediaType === 'image' + ? boolean('Horizontal', false) + : ''; + return { + type, + mediaType, + pictogramType, + horizontal, + heading: textNullable('Heading:', 'Natural language understanding'), + showCopy: boolean('Copy:', true), copy: 'This area of NLP takes "real world" text and applies a symbolic ' + 'system for a machine to interpret its meaning, using formal logic; structures ' + 'that describe the various relationships between concepts (ontologies); and other semantic tools.', - ctaStyle: 'text', - ctaCopy: 'Learn more about NLP', - }, + ctaStyle: select('CTA style:', ['text', 'button'], 'text'), + ctaCopy: textNullable('CTA copy:', 'Learn more about NLP'), + }; }, }, }, diff --git a/packages/web-components/src/components/content-item/__stories__/content-item.stories.ts b/packages/web-components/src/components/content-item/__stories__/content-item.stories.ts index 6fe929efc94..9b677507876 100644 --- a/packages/web-components/src/components/content-item/__stories__/content-item.stories.ts +++ b/packages/web-components/src/components/content-item/__stories__/content-item.stories.ts @@ -12,51 +12,175 @@ import '../index'; import { select, boolean } from '@storybook/addon-knobs'; import readme from './README.stories.mdx'; import textNullable from '../../../../.storybook/knob-text-nullable'; -import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--005.jpg'; +import imgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--001.jpg'; +import logoMicrosoft2x1 from '../../../../../storybook-images/assets/logos/logo-microsoft--2x1.png'; + +const contentItemTypeOptions = { + Text: 'text', + Statistics: 'statistics', + Pictogram: 'pictogram', + Media: 'media', + Logo: 'logo', +}; + +const app = html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; + +const pictogram = html` + +`; export const Default = (args) => { - const { heading, media, copy, showCopy, ctaStyle, ctaCopy } = - args?.ContentItem ?? {}; + const { + type, + heading, + horizontal, + mediaType, + pictogramType, + copy, + showCopy, + ctaStyle, + ctaCopy, + } = args?.ContentItem ?? {}; + console.log(type, mediaType); return html` - - ${media === 'image' - ? html` - - ` + + ${type === 'statistics' ? html`10%` : ``} + ${type === 'pictogram' + ? pictogramType === 'pictogram' + ? pictogram + : pictogramType === 'app icon' + ? app + : `` : ``} - ${media === 'video' - ? html` - + ` + : mediaType === 'video' + ? html` - ` - : ''} + video-id="0_ibuqxqbe" + hide-caption>` + : `` + : ``} + ${type === 'logo' + ? html` ` + : ``} ${heading} ${showCopy ? html` ${copy} ` : ``} ${ctaStyle === 'text' ? html` - ${ctaCopy} - ` - : ``} - ${ctaStyle === 'button' - ? html` - ${ctaCopy}${ctaCopy} ` : ``} @@ -70,7 +194,7 @@ export default { (story) => html`
-
+
${story()}
@@ -81,17 +205,39 @@ export default { ...readme.parameters, hasStoryPadding: true, knobs: { - ContentItem: () => ({ - heading: textNullable('Heading:', 'Natural language understanding'), - media: select('Media type:', ['none', 'image', 'video'], 'none'), - showCopy: boolean('Copy:', true), - copy: - 'This area of NLP takes "real world" text and applies a symbolic ' + - 'system for a machine to interpret its meaning, using formal logic; structures ' + - 'that describe the various relationships between concepts (ontologies); and other semantic tools.', - ctaStyle: select('CTA style:', ['text', 'button'], 'text'), - ctaCopy: textNullable('CTA copy:', 'Learn more about NLP'), - }), + ContentItem: () => { + const type = select( + 'Content item type', + contentItemTypeOptions, + contentItemTypeOptions.Text + ); + const mediaType = + type === 'media' + ? select('Media type:', ['image', 'video'], 'image') + : ''; + const pictogramType = + type === 'pictogram' + ? select('Pictogram type', ['pictogram', 'app icon'], 'pictogram') + : ''; + const horizontal = + type === 'pictogram' || mediaType === 'image' + ? boolean('Horizontal', false) + : ''; + return { + type, + mediaType, + pictogramType, + horizontal, + heading: textNullable('Heading:', 'Natural language understanding'), + showCopy: boolean('Copy:', true), + copy: + 'This area of NLP takes "real world" text and applies a symbolic ' + + 'system for a machine to interpret its meaning, using formal logic; structures ' + + 'that describe the various relationships between concepts (ontologies); and other semantic tools.', + ctaStyle: select('CTA style:', ['text', 'button'], 'text'), + ctaCopy: textNullable('CTA copy:', 'Learn more about NLP'), + }; + }, }, propsSet: { default: { diff --git a/packages/web-components/src/components/content-item/content-item.scss b/packages/web-components/src/components/content-item/content-item.scss index 5400c0570c2..4d1ada919a3 100644 --- a/packages/web-components/src/components/content-item/content-item.scss +++ b/packages/web-components/src/components/content-item/content-item.scss @@ -5,19 +5,5 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *; @use '@carbon/ibmdotcom-styles/scss/internal/content-item'; -:host(#{$c4d-prefix}-content-item-copy), -:host(#{$c4d-prefix}-content-item-paragraph) { - display: block; -} - -:host(#{$c4d-prefix}-content-item) ::slotted(#{$c4d-prefix}-image), -:host(#{$c4d-prefix}-content-item) - ::slotted(#{$c4d-prefix}-video-player-container) { - display: block; - margin-top: $spacing-05; - margin-bottom: $spacing-07; -} diff --git a/packages/web-components/src/components/content-item/content-item.ts b/packages/web-components/src/components/content-item/content-item.ts index 023df6a8a13..9fcccf929f2 100644 --- a/packages/web-components/src/components/content-item/content-item.ts +++ b/packages/web-components/src/components/content-item/content-item.ts @@ -8,7 +8,8 @@ */ import { html, LitElement, TemplateResult } from 'lit'; -import { state } from 'lit/decorators.js'; +import { classMap } from 'lit/directives/class-map.js'; +import { property, state } from 'lit/decorators.js'; import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; import styles from './content-item.scss'; @@ -20,6 +21,8 @@ const { prefix, stablePrefix: c4dPrefix } = settings; * The table mapping slot name with the private property name that indicates the existence of the slot content. */ const slotExistencePropertyNames = { + media: '_hasMedia', + statistic: '_hasStatistic', footer: '_hasFooter', }; @@ -33,12 +36,32 @@ const slotExistencePropertyNames = { */ @customElement(`${c4dPrefix}-content-item`) class C4DContentItem extends StableSelectorMixin(LitElement) { + /** + * `true` if there are CTA statistic in the content item area. + */ + @state() + protected _hasLogo = false; + /** + * `true` if there are CTA media in the content item area. + */ + @state() + protected _hasMedia = false; + + /** + * `true` if there are CTA statistic in the content item area. + */ + @state() + protected _hasStatistic = false; + /** * `true` if there is a footer content. */ @state() _hasFooter = false; + @property({ type: Boolean }) + horizontal = false; + /** * Handles `slotchange` event. * @@ -46,31 +69,49 @@ class C4DContentItem extends StableSelectorMixin(LitElement) { */ protected _handleSlotChange({ target }: Event) { const { name } = target as HTMLSlotElement; - const content = (target as HTMLSlotElement) + const hasContent = (target as HTMLSlotElement) .assignedNodes() - .filter((elem) => - (elem as HTMLElement).matches !== undefined - ? (elem as HTMLElement).matches( - (this.constructor as typeof C4DContentItem).selectorTextCTA - ) || - (elem as HTMLElement).matches( - (this.constructor as typeof C4DContentItem).selectorButtonCTA - ) || - (elem as HTMLElement).matches( - (this.constructor as typeof C4DContentItem).selectorButtonGroup - ) || - (elem as HTMLElement).matches( - (this.constructor as typeof C4DContentItem).selectorLinkWithIcon - ) || - (elem as HTMLElement).matches( - (this.constructor as typeof C4DContentItem).selectorLinkList - ) - : false + .some( + (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim() ); - const hasContent = content?.some( - (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim() - ); - this[slotExistencePropertyNames[name] || '_hasCopy'] = hasContent; + this[slotExistencePropertyNames[name] || '_hasStatistic'] = hasContent; + if ( + ( + (target as HTMLSlotElement).assignedNodes()[0] as HTMLElement + )?.matches?.( + (this.constructor as typeof C4DContentItem).selectorImageLogo + ) + ) { + this._hasLogo = true; + } else this._hasLogo = false; + } + + /** + * @returns The statistic content items + */ + protected _renderStatistic(): TemplateResult | string | void { + const { _hasStatistic: hasStatistic, _handleSlotChange: handleSlotChange } = + this; + return html` +
+ +
+ `; + } + + /** + * @returns The media content items + */ + protected _renderMedia(): TemplateResult | string | void { + const { _hasMedia: hasMedia, _handleSlotChange: handleSlotChange } = this; + + return html` +
+ +
+ `; } /** @@ -94,12 +135,21 @@ class C4DContentItem extends StableSelectorMixin(LitElement) { } render() { + const { horizontal, _hasStatistic: hasStatistic, _hasLogo: hasLogo } = this; + console.log(hasLogo); + const horizontalClass = classMap({ + [`${c4dPrefix}--content-item__horizontal`]: + horizontal && !hasStatistic && !hasLogo, + }); + return html` - -
- +
+ ${this._renderStatistic()} ${this._renderMedia()} +
+ + ${this._renderBody()}${this._renderFooter()} +
- ${this._renderBody()}${this._renderFooter()} `; } @@ -107,24 +157,8 @@ class C4DContentItem extends StableSelectorMixin(LitElement) { return `${c4dPrefix}--content-item`; } - static get selectorTextCTA() { - return `${c4dPrefix}-text-cta`; - } - - static get selectorButtonCTA() { - return `${c4dPrefix}-button-cta`; - } - - static get selectorLinkList() { - return `${c4dPrefix}-link-list`; - } - - static get selectorLinkWithIcon() { - return `${c4dPrefix}-link-with-icon`; - } - - static get selectorButtonGroup() { - return `${c4dPrefix}-button-group`; + static get selectorImageLogo() { + return `${c4dPrefix}-image-logo`; } static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader diff --git a/packages/web-components/src/components/content-item/index.ts b/packages/web-components/src/components/content-item/index.ts index 87e6faba823..08bb5b98c1c 100644 --- a/packages/web-components/src/components/content-item/index.ts +++ b/packages/web-components/src/components/content-item/index.ts @@ -10,6 +10,4 @@ import './content-item'; import './content-item-copy'; import './content-item-heading'; -import './content-item-paragraph'; -import '../cta/text-cta'; -import '../cta/button-cta'; +import '../link-with-icon/index'; diff --git a/packages/web-components/src/components/cta-section/__stories__/cta-section.stories.ts b/packages/web-components/src/components/cta-section/__stories__/cta-section.stories.ts index 069b2b51e95..c0a61ecb388 100644 --- a/packages/web-components/src/components/cta-section/__stories__/cta-section.stories.ts +++ b/packages/web-components/src/components/cta-section/__stories__/cta-section.stories.ts @@ -24,44 +24,42 @@ import content from './content'; const contentItemTypeMap = { text: ({ heading, copy, links }) => html` - + ${heading} ${copy} ${links.map( (elem) => html` - ${elem.copy}${elem.copy} ` )} - + `, statistics: ({ heading, copy, links }) => html` - + 10% ${heading} ${copy} ${links.map( (elem) => html` - ${elem.copy}${elem.copy} ` )} - + `, pictogram: ({ heading, copy, links }) => html` - + html` - ${elem.copy}${elem.copy} ` )} - + `, media: ({ heading, copy, links }) => html` - + html` - ${elem.copy}${elem.copy} ` )} - + `, logo: ({ heading, copy, links }) => html` - + html` - ${elem.copy}${elem.copy} ` )} - + `, }; diff --git a/packages/web-components/src/components/pictogram-item/__stories__/README.stories.mdx b/packages/web-components/src/components/pictogram-item/__stories__/README.stories.mdx deleted file mode 100644 index b898ed1851b..00000000000 --- a/packages/web-components/src/components/pictogram-item/__stories__/README.stories.mdx +++ /dev/null @@ -1,98 +0,0 @@ -import { - Preview, - Props, - Description, - Story, -} from '@storybook/addon-docs/blocks'; -import contributing from '../../../../../../docs/contributing-license.md'; -import markdownContents from '../../../../docs/markdown-contents.md'; -import '../pictogram-item'; -import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn'; - -# Pictogram Item - -> 💡 Check our -> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/pictogram-item) -> example implementation. - -[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/pictogram-item) - -## Getting started - -Here's a quick example to get you started. - -### JS (via import) - -```javascript -import '@carbon/ibmdotcom-web-components/es/components/pictogram-item/index.js'; -``` - - - - - -### HTML - -```html - - - - - Lorem ipsum dolor sit - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam - - Lorem ipsum dolor - - - -``` - - - -## Props - - - -## Stable selectors - -See -[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) -to see how Web Components selector and `data-autoid` should be used. - -| Web Components selector | Compatibility selector | Description | -| ----------------------- | --------------------------------- | ----------- | -| `` | data-autoid="cds--pictogram-item" | Component | - - diff --git a/packages/web-components/src/components/pictogram-item/__stories__/README.stories.react.mdx b/packages/web-components/src/components/pictogram-item/__stories__/README.stories.react.mdx deleted file mode 100644 index ded33f2da52..00000000000 --- a/packages/web-components/src/components/pictogram-item/__stories__/README.stories.react.mdx +++ /dev/null @@ -1,79 +0,0 @@ -import { - Preview, - Props, - Description, - Story, -} from '@storybook/addon-docs/blocks'; -import contributing from '../../../../../../docs/contributing-license.md'; -import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item'; - -# Pictogram Item - -> 💡 Check our -> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/pictogram-item) -> example implementation. - -[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/pictogram-item) - -## Getting started - -Here's a quick example to get you started. - -### JS - -```javascript -import C4DPictogramItem from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item'; -import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading.js'; -import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js'; -import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; - -function App() { - return ( - - - - - Example heading - Example item copy - - Link with icon - - - ); -} -``` - -## Props - - - -## Stable selectors - -See -[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) -to see how Web Components selector and `data-autoid` should be used. - -| Web Components selector | Compatibility selector | Description | -| ----------------------- | ----------------------------------- | ----------- | -| `` | `data-autoid="cds--pictogram-item"` | Component | - - diff --git a/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.react.tsx b/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.react.tsx deleted file mode 100644 index 6f843133b51..00000000000 --- a/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.react.tsx +++ /dev/null @@ -1,232 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020, 2023 - * - * 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 { select } from '@storybook/addon-knobs'; -import React from 'react'; -// Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package. -// In our dev env, we auto-generate the file and re-map below path to to point to the generated file. -// @ts-ignore -import C4DPictogramItem from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item'; -import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading.js'; -import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js'; -import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; -import { COLOR_OPTIONS } from '../defs'; -import textNullable from '../../../../.storybook/knob-text-nullable'; -import readme from './README.stories.react.mdx'; - -/* eslint-disable max-len, no-mixed-spaces-and-tabs */ -const Desktop = ( - - - -); - -const Pattern = ( - - - - -); - -const Touch = ( - // @ts-ignore - - - - -); -/* eslint-enable max-len */ - -/** - * Returns the pictogram based on the storybook knob value - * - * @param {string} sel string that defines the returning pictogram - * @returns {*} Pictogram SVG markup - */ -const selectPictogram = (sel) => { - switch (sel) { - case 'Desktop': - return Desktop; - case 'Pattern': - return Pattern; - case 'Touch': - return Touch; - default: - return ''; - } -}; - -const pictograms = { - Desktop: 'Desktop', - Touch: 'Touch', - Pattern: 'Pattern', -}; - -const pictogramColors = { - 'Text color (default)': COLOR_OPTIONS.DEFAULT, - Blue: COLOR_OPTIONS.BLUE, -}; - -export const Default = (args) => { - const { heading, copy, href, linkCopy, pictogram, pictogramColor } = - args?.PictogramItem ?? {}; - return ( - - {pictogram?.src} - {heading} - {copy} - - {linkCopy} - - - ); -}; - -Default.story = { - parameters: { - knobs: { - PictogramItem: () => ({ - heading: textNullable('Heading (heading):', 'Lorem ipsum dolor sit'), - copy: - 'Lorem ipsum dolor sit amet, ' + - 'consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ' + - 'Ut enim ad minim veniam\n', - href: textNullable('Link with Icon href:', 'https://example.com'), - linkCopy: textNullable('Link with Icon copy:', 'Lorem ipsum dolor'), - pictogram: { - src: selectPictogram( - select('Pictogram (required)', pictograms, pictograms.Desktop) - ), - 'aria-label': textNullable('Aria-label:', 'Pictogram description'), - }, - pictogramColor: select( - 'Pictogram color:', - pictogramColors, - COLOR_OPTIONS.DEFAULT - ), - }), - }, - }, -}; - -export default { - title: 'Components/Pictogram item', - decorators: [ - (story) => { - return ( -
-
-
- {story()} -
-
-
- ); - }, - ], - parameters: { - ...readme.parameters, - hasStoryPadding: true, - }, -}; diff --git a/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.scss b/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.scss deleted file mode 100644 index 1a956c3a031..00000000000 --- a/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.scss +++ /dev/null @@ -1,10 +0,0 @@ -// -// 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. -// - -.cds-ce-demo-devenv--container { - padding: 0; -} diff --git a/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.ts b/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.ts deleted file mode 100644 index dc07c472b3d..00000000000 --- a/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.ts +++ /dev/null @@ -1,232 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020, 2023 - * - * 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 '../index'; -import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20'; -import { select } from '@storybook/addon-knobs'; -import styles from './pictogram-item.stories.scss'; -import { COLOR_OPTIONS } from '../defs'; -import readme from './README.stories.mdx'; -import textNullable from '../../../../.storybook/knob-text-nullable'; - -/* eslint-disable max-len */ -const Desktop = html` - - - -`; -const Pattern = html` - - - - -`; -const Touch = html` - - - - -`; -/* eslint-enable max-len */ - -/** - * Returns the pictogram based on the storybook knob value - * - * @param {string} sel string that defines the returning pictogram - * @returns {*} Pictogram SVG markup - */ -const selectPictogram = (sel) => { - switch (sel) { - case 'Desktop': - return Desktop; - case 'Pattern': - return Pattern; - case 'Touch': - return Touch; - default: - return ''; - } -}; - -const pictograms = { - Desktop: 'Desktop', - Touch: 'Touch', - Pattern: 'Pattern', -}; - -const pictogramColors = { - 'Text color (default)': COLOR_OPTIONS.DEFAULT, - Blue: COLOR_OPTIONS.BLUE, -}; - -export const Default = (args) => { - const { heading, copy, href, linkCopy, pictogram, pictogramColor } = - args?.PictogramItem ?? {}; - return html` - - ${pictogram?.src} - ${heading} - ${copy} - - ${linkCopy} ${ArrowRight20({ slot: 'icon' })} - - - `; -}; - -export default { - title: 'Components/Pictogram item', - decorators: [ - (story) => html` - -
-
-
- ${story()} -
-
-
- `, - ], - parameters: { - ...readme.parameters, - hasStoryPadding: true, - knobs: { - PictogramItem: () => ({ - heading: textNullable('Heading (heading):', 'Lorem ipsum dolor sit'), - copy: - 'Lorem ipsum dolor sit amet, ' + - 'consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ' + - 'Ut enim ad minim veniam\n', - href: textNullable('Link with Icon href:', 'https://example.com'), - linkCopy: textNullable('Link with Icon copy:', 'Lorem ipsum dolor'), - pictogram: { - src: selectPictogram( - select('Pictogram (required)', pictograms, pictograms.Desktop) - ), - 'aria-label': textNullable('Aria-label:', 'Pictogram description'), - }, - pictogramColor: select( - 'Pictogram color:', - pictogramColors, - COLOR_OPTIONS.DEFAULT - ), - }), - }, - propsSet: { - default: { - PictogramItem: { - heading: 'Lorem ipsum dolor sit', - copy: - 'Lorem ipsum dolor sit amet, ' + - 'consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ' + - 'Ut enim ad minim veniam\n', - href: 'https://example.com', - linkCopy: 'Lorem ipsum dolor', - pictogram: { - src: pictograms.Desktop, - 'aria-label': 'Pictogram description', - }, - pictogramColor: COLOR_OPTIONS.DEFAULT, - }, - }, - }, - }, -}; diff --git a/packages/web-components/src/components/pictogram-item/__tests__/pictogram-item.test.ts b/packages/web-components/src/components/pictogram-item/__tests__/pictogram-item.test.ts deleted file mode 100644 index 48aaf183917..00000000000 --- a/packages/web-components/src/components/pictogram-item/__tests__/pictogram-item.test.ts +++ /dev/null @@ -1,30 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020, 2023 - * - * 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 { render } from 'lit/html.js'; -import '../pictogram-item'; -import { Default } from '../__stories__/pictogram-item.stories'; - -const template = (props?) => - Default({ - PictogramItem: props, - }); - -describe('c4d-pictogram-item', function () { - it('Renders as expected', async function () { - render(template(), document.body); - await Promise.resolve(); - expect(document.body.querySelector('c4d-pictogram-item')).toMatchSnapshot({ - mode: 'shadow', - }); - }); - afterEach(async function () { - await render(undefined!, document.body); - }); -});