From 3b99a4c34c8a5ebc22f75e773a5ac9ae49399afe Mon Sep 17 00:00:00 2001 From: Ariella Gilmore Date: Mon, 2 Oct 2023 08:50:54 -0700 Subject: [PATCH] feat(feature-section): update to v2 (#10959) * feat(feature-section): v2 updates * feat(feature-section): docs * fix(feature-section): react wrapper story * fix(Feature-section): design updates * fix(migration): update docs * fix(card): remove import * Update dotcom-v2-migration.md --- docs/dotcom-v2-migration.md | 7 + .../styles/scss/components/card/_card.scss | 20 +-- .../feature-section/_feature-section.scss | 48 +++++- .../styles/scss/components/image/_image.scss | 22 +-- .../feature-section/src/index.js | 56 +++---- .../components/feature-section/.babelrc | 22 +++ .../components/feature-section/.gitignore | 22 +++ .../components/feature-section/cdn.html | 73 ++++++++ .../components/feature-section/index.html | 72 ++++++++ .../components/feature-section/package.json | 21 +++ .../feature-section/sandbox.config.json | 3 + .../components/feature-section/src/index.js | 10 ++ .../src/components/card/card-footer.ts | 3 +- .../src/components/card/card.ts | 4 +- .../__stories__/README.stories.mdx | 57 ++++--- .../__stories__/README.stories.react.mdx | 18 +- .../feature-section.stories.react.tsx | 157 ++++++++++-------- .../__stories__/feature-section.stories.ts | 152 ++++++++++------- .../src/components/feature-section/defs.ts | 22 ++- .../feature-section-card-link.ts | 5 + .../feature-section/feature-section.scss | 19 --- .../feature-section/feature-section.ts | 71 +++----- .../src/components/feature-section/index.ts | 5 +- .../src/components/image/image.ts | 4 +- 24 files changed, 590 insertions(+), 303 deletions(-) create mode 100644 packages/web-components/examples/codesandbox/components/feature-section/.babelrc create mode 100644 packages/web-components/examples/codesandbox/components/feature-section/.gitignore create mode 100644 packages/web-components/examples/codesandbox/components/feature-section/cdn.html create mode 100644 packages/web-components/examples/codesandbox/components/feature-section/index.html create mode 100644 packages/web-components/examples/codesandbox/components/feature-section/package.json create mode 100644 packages/web-components/examples/codesandbox/components/feature-section/sandbox.config.json create mode 100644 packages/web-components/examples/codesandbox/components/feature-section/src/index.js diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md index 03e41f0a3d5..e03407288f1 100644 --- a/docs/dotcom-v2-migration.md +++ b/docs/dotcom-v2-migration.md @@ -42,6 +42,7 @@ For Carbon v11 migration guidance, see their | cta-section | This component is deprecated in v2 in favor for content-section/block & content-item components | | feature-card-block-large | This component is deprecated in v1 and has been removed in v2 in favor of the feature-card component. | | feature-card-block-medium | This component is deprecated in v1 and has been removed in v2 in favor of the feature-card component. | +| feature-section | View changes [here](#feature-section) | | footer | No API changes. | | hr | View changes [here](#horizontal-rule) | | image | View changes [here](#image) | @@ -85,6 +86,12 @@ Each new component has a `cta-type` property that can change the icon and click functionality of the component. See the components' documentations for more information. +### Feature section + +- The `feature-section-card-link` has been deprecated in favor for the `card` (link) variation +- `media-alignment` property has been removed +- `color-scheme` property now accepts `regular` (default), `inverse`, `cyan`, `purple` + ### Horizontal rule - New options for `contrast` property: `SUBTLE = 'subtle' (default)`, diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss index c044e425dba..54e85a043af 100644 --- a/packages/styles/scss/components/card/_card.scss +++ b/packages/styles/scss/components/card/_card.scss @@ -569,6 +569,10 @@ align-items: center; } + svg { + color: $link-primary; + } + &[color-scheme='inverse'] .#{$c4d-prefix}-ce--card__footer--static { color: $link-inverse; } @@ -580,12 +584,6 @@ color: $link-inverse; } } - - &:hover { - ::slotted(svg[slot='icon']) { - color: $link-primary-hover; - } - } } // static card footer @@ -594,15 +592,13 @@ width: auto; justify-content: flex-start; - &:active, &:hover { - text-decoration: none; + color: $link-primary-hover; } - &:active { - ::slotted([slot='icon']) { - color: $text-primary; - } + &:active, + &:hover { + text-decoration: none; } &::after { diff --git a/packages/styles/scss/components/feature-section/_feature-section.scss b/packages/styles/scss/components/feature-section/_feature-section.scss index 016a6345664..55091f9ecac 100644 --- a/packages/styles/scss/components/feature-section/_feature-section.scss +++ b/packages/styles/scss/components/feature-section/_feature-section.scss @@ -11,10 +11,18 @@ @use '@carbon/styles/scss/theme' as *; @use '../../globals/vars' as *; @use '../../globals/utils/aspect-ratio'; +@use '../../globals/carbon-grid'; @use '../../globals/utils/ratio-base' as *; +@use '../../internal/callout/tokens' as *; @mixin feature-section { + :host(#{$c4d-prefix}-feature-section) { + display: block; + outline: none; + } + .#{$prefix}--feature-section { + box-sizing: border-box; position: relative; padding-left: $spacing-05; padding-right: $spacing-05; @@ -44,11 +52,36 @@ background-color: $layer-01; display: block; + div[class^='#{$prefix}--col'] { + box-sizing: border-box; + } + @include breakpoint(lg) { display: flex; } } + :host(#{$c4d-prefix}-feature-section[color-scheme='inverse']) + .#{$prefix}--feature-section__container { + background-color: $background-inverse; + + ::slotted([slot='eyebrow']), + ::slotted([slot='heading']), + ::slotted([slot='copy']) { + color: $text-inverse; + } + } + + :host(#{$c4d-prefix}-feature-section[color-scheme='cyan']) + .#{$prefix}--feature-section__container { + background-color: $callout-background-cyan; + } + + :host(#{$c4d-prefix}-feature-section[color-scheme='purple']) + .#{$prefix}--feature-section__container { + background-color: $callout-background-purple; + } + .#{$prefix}--feature-section__body { position: relative; padding-top: $spacing-07; @@ -59,7 +92,6 @@ padding-top: $spacing-08; } - .#{$prefix}--content-item__copy p, ::slotted(#{$c4d-prefix}-content-item-paragraph) { margin-bottom: $spacing-07; @@ -68,8 +100,7 @@ } } - .#{$prefix}--card-link, - ::slotted(#{$c4d-prefix}-feature-section-card-link) { + ::slotted([slot='footer']) { position: relative; display: inline-block; margin-left: 25%; @@ -89,8 +120,8 @@ position: relative; padding-left: 0; padding-right: 0; + border: 1px solid $border-subtle-01; - .#{$prefix}--image, ::slotted(#{$c4d-prefix}-image) { overflow: hidden; @@ -108,18 +139,17 @@ } } - .#{$prefix}--card__eyebrow, ::slotted(#{$c4d-prefix}-card-eyebrow) { display: inline-block; - margin-bottom: $spacing-05; + margin-bottom: $spacing-03; } - .#{$prefix}--card-link, - ::slotted(#{$c4d-prefix}-feature-section-card-link) { + ::slotted([slot='footer']) { position: absolute; right: 0; - bottom: 0; + bottom: -1px; width: 75%; + height: auto; @include breakpoint(md) { width: calc(50% - #{$spacing-05}); diff --git a/packages/styles/scss/components/image/_image.scss b/packages/styles/scss/components/image/_image.scss index 18df4a68a56..c5e0048e1d2 100644 --- a/packages/styles/scss/components/image/_image.scss +++ b/packages/styles/scss/components/image/_image.scss @@ -21,6 +21,17 @@ :host(#{$c4d-prefix}-image) { position: relative; display: block; + + .#{$c4d-prefix}--image__img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + } + + .#{$c4d-prefix}--image__img--border { + outline: 1px solid $border-subtle-02; + } } :host(#{$c4d-prefix}-card-cta-image::slotted(svg[slot='icon'])), @@ -47,17 +58,6 @@ } } - .#{$c4d-prefix}--image__img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; - } - - .#{$c4d-prefix}--image__img--border { - outline: 1px solid $border-subtle-02; - } - .#{$c4d-prefix}--image__longdescription { position: absolute; width: 1px; diff --git a/packages/web-components/examples/codesandbox/components-react/feature-section/src/index.js b/packages/web-components/examples/codesandbox/components-react/feature-section/src/index.js index d44b2bb9411..71f28692bb8 100644 --- a/packages/web-components/examples/codesandbox/components-react/feature-section/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/feature-section/src/index.js @@ -11,44 +11,44 @@ import React from 'react'; import { render } from 'react-dom'; import C4DFeatureSection from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section.js'; import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow'; -import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer'; -import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading'; +import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer'; +import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading'; import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading'; import C4DContentItemParagraph from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-paragraph'; import C4DFeatureSection from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section'; -import C4DFeatureSectionCardLink from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section-card-link'; +import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card'; import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image'; import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item'; import './index.css'; const App = () => ( - - - - - - - - 5 min activity - Ready when you are - Copy example + + + + + + + + 5 min activity + Ready when you are + Copy example - - Try a free virtual business framing session with IBM Garage - - - + + Try a free virtual business framing session with IBM Garage + + + ); render(, document.getElementById('root')); diff --git a/packages/web-components/examples/codesandbox/components/feature-section/.babelrc b/packages/web-components/examples/codesandbox/components/feature-section/.babelrc new file mode 100644 index 00000000000..74450eed94b --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/feature-section/.babelrc @@ -0,0 +1,22 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "modules": false, + "targets": [ + "last 1 version", + "Firefox ESR", + "not opera > 0", + "not op_mini > 0", + "not op_mob > 0", + "not android > 0", + "not edge > 0", + "not ie > 0", + "not ie_mob > 0" + ] + } + ] + ], + "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]] +} diff --git a/packages/web-components/examples/codesandbox/components/feature-section/.gitignore b/packages/web-components/examples/codesandbox/components/feature-section/.gitignore new file mode 100644 index 00000000000..d94d6e13e94 --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/feature-section/.gitignore @@ -0,0 +1,22 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +/node_modules + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.cache +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/packages/web-components/examples/codesandbox/components/feature-section/cdn.html b/packages/web-components/examples/codesandbox/components/feature-section/cdn.html new file mode 100644 index 00000000000..7e779603ba3 --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/feature-section/cdn.html @@ -0,0 +1,73 @@ + + + + + @carbon/ibmdotcom-web-components example + + + + + + + + + + + + + + + + + + + + + 5 min activity + Ready when you are + We're flexible. We can work with you on a wide variety of engagements on a + project or consulting basis. And we're technology agnostic. Our experts work + with any vendor's technology, not just IBM's. You decide how you want to + work and where to focus our expertise. + + + Try a free virtual business framing session with IBM + Garage + + + + + diff --git a/packages/web-components/examples/codesandbox/components/feature-section/index.html b/packages/web-components/examples/codesandbox/components/feature-section/index.html new file mode 100644 index 00000000000..d3e8f96d7c5 --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/feature-section/index.html @@ -0,0 +1,72 @@ + + + + + @carbon/ibmdotcom-web-components example + + + + + + + + + + + + + + + + + + + + + 5 min activity + Ready when you are + We're flexible. We can work with you on a wide variety of engagements on a + project or consulting basis. And we're technology agnostic. Our experts work + with any vendor's technology, not just IBM's. You decide how you want to + work and where to focus our expertise. + + + Try a free virtual business framing session with IBM + Garage + + + + + diff --git a/packages/web-components/examples/codesandbox/components/feature-section/package.json b/packages/web-components/examples/codesandbox/components/feature-section/package.json new file mode 100644 index 00000000000..26ac79d63f5 --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/feature-section/package.json @@ -0,0 +1,21 @@ +{ + "name": "ibmdotcom-web-components-feature-section-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.0.0-0", + "parcel-bundler": "1.12.3", + "rimraf": "^3.0.2" + } +} diff --git a/packages/web-components/examples/codesandbox/components/feature-section/sandbox.config.json b/packages/web-components/examples/codesandbox/components/feature-section/sandbox.config.json new file mode 100644 index 00000000000..a4df8557d7b --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/feature-section/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "node" +} diff --git a/packages/web-components/examples/codesandbox/components/feature-section/src/index.js b/packages/web-components/examples/codesandbox/components/feature-section/src/index.js new file mode 100644 index 00000000000..c9947588ec5 --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/feature-section/src/index.js @@ -0,0 +1,10 @@ +/** + * @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/feature-section/index.js'; diff --git a/packages/web-components/src/components/card/card-footer.ts b/packages/web-components/src/components/card/card-footer.ts index 57cb86526df..0a548787f9d 100644 --- a/packages/web-components/src/components/card/card-footer.ts +++ b/packages/web-components/src/components/card/card-footer.ts @@ -13,7 +13,6 @@ import { carbonElement as customElement } from '../../internal/vendor/@carbon/we import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js'; import C4DLinkWithIcon from '../link-with-icon/link-with-icon'; import Error20 from '../../internal/vendor/@carbon/web-components/icons/error/20.js'; -import { BASIC_COLOR_SCHEME } from '../../globals/defs'; import styles from './card.scss'; const { prefix, stablePrefix: c4dPrefix } = settings; @@ -88,7 +87,7 @@ class C4DCardFooter extends C4DLinkWithIcon { * The color scheme. */ @property({ attribute: 'color-scheme', reflect: true }) - colorScheme = BASIC_COLOR_SCHEME.REGULAR; + colorScheme = ''; /** * The `href` in parent ``. diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts index 8793b2250fe..3f566abba43 100644 --- a/packages/web-components/src/components/card/card.ts +++ b/packages/web-components/src/components/card/card.ts @@ -189,10 +189,10 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) { * The color scheme. * A typical use case of using another color scheme of card is having a "CTA" purpose of card at the last in card group. * - * Color scheme options are: "inverse" and "light" + * Color scheme options are: "inverse" and "regular" */ @property({ attribute: 'color-scheme', reflect: true }) - colorScheme = BASIC_COLOR_SCHEME.REGULAR; + colorScheme = ''; /** * Link `href`. diff --git a/packages/web-components/src/components/feature-section/__stories__/README.stories.mdx b/packages/web-components/src/components/feature-section/__stories__/README.stories.mdx index 201fcf6b9a4..d9c45f8df73 100644 --- a/packages/web-components/src/components/feature-section/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/feature-section/__stories__/README.stories.mdx @@ -8,6 +8,12 @@ import contributing from '../../../../../../docs/contributing-license.md'; # Feature Section +> 💡 Check our +> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/feature-section) +> 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/feature-section) + ## Getting started Here's a quick example to get you started. @@ -21,57 +27,58 @@ import '@carbon/ibmdotcom-web-components/es/components/feature-section/index.js' ### HTML ```html - - + - - - + - - + - - + - - + - - - 5 min activity - Ready when you are - + + 5 min activity + Ready when you are + We're flexible. We can work with you on a wide variety of engagements on a project or consulting basis. And we're technology agnostic. Our experts work with any vendor's technology, not just IBM's. You decide how you want to - work and where to focus our expertise. - - Try a free virtual business framing session with IBM - Garage - - - + + + ``` ## Props - + ## Stable selectors @@ -81,6 +88,6 @@ to see how Web Components selector and `data-autoid` should be used. | Web Components selector | Compatibility selector | Description | | ----------------------- | ------------------------------------ | ----------- | -| `` | `data-autoid="cds--feature-section"` | Component | +| `` | `data-autoid="c4d--feature-section"` | Component | diff --git a/packages/web-components/src/components/feature-section/__stories__/README.stories.react.mdx b/packages/web-components/src/components/feature-section/__stories__/README.stories.react.mdx index 036a9bb2c88..78f60f365e6 100644 --- a/packages/web-components/src/components/feature-section/__stories__/README.stories.react.mdx +++ b/packages/web-components/src/components/feature-section/__stories__/README.stories.react.mdx @@ -24,12 +24,12 @@ Here's a quick example to get you started. ```javascript import C4DFeatureSection from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section.js'; import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow'; -import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer'; -import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading'; +import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer'; +import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading'; import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading'; import C4DContentItemParagraph from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-paragraph'; import C4DFeatureSection from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section'; -import C4DFeatureSectionCardLink from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section-card-link'; +import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card'; import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image'; import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item'; @@ -47,11 +47,11 @@ function App() { Ready when you are Copy example - - Try a free virtual business framing session with IBM Garage - - - ; + + Try a free virtual business framing session with IBM Garage + + + ); } ``` @@ -68,6 +68,6 @@ to see how Web Components selector and `data-autoid` should be used. | Web Components selector | Compatibility selector | Description | | ----------------------- | ---------------------- | ----------- | -| `` | N/A | Component | +| `` | N/A | Component | diff --git a/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.react.tsx b/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.react.tsx index 87dfd447dac..cf334974bc0 100644 --- a/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.react.tsx +++ b/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.react.tsx @@ -13,102 +13,129 @@ import React from 'react'; // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. // @ts-ignore import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow'; -import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer'; -import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading'; +import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer'; +import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading'; import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading'; import C4DContentItemParagraph from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-paragraph'; import C4DFeatureSection from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section'; -// eslint-disable-next-line max-len -import C4DFeatureSectionCardLink from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section-card-link'; +import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card'; import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image'; import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item'; +import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container'; import imgXlg1x1 from '../../../../../storybook-images/assets/1584/fpo--1x1--1584x1584--002.jpg'; import imgLg1x1 from '../../../../../storybook-images/assets/1312/fpo--1x1--1312x1312--002.jpg'; import imgMd4x3 from '../../../../../storybook-images/assets/960/fpo--4x3--960x720--002.jpg'; import imgSm1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--002.jpg'; import imgXs1x1 from '../../../../../storybook-images/assets/320/fpo--1x1--320x320--002.jpg'; -import { MEDIA_ALIGNMENT } from '../defs'; import { CTA_TYPE } from '../../cta/defs'; +import { COLOR_SCHEME } from '../defs'; import textNullable from '../../../../.storybook/knob-text-nullable'; import readme from './README.stories.react.mdx'; -const mediaAlignment = { - [`Left`]: MEDIA_ALIGNMENT.LEFT, - [`Right`]: MEDIA_ALIGNMENT.RIGHT, -}; +import { + hrefsForType, + knobNamesForType, + typeOptions, + types, +} from '../../cta/__stories__/ctaTypeConfig'; -const types = { - [`Local (${CTA_TYPE.LOCAL})`]: CTA_TYPE.LOCAL, - [`External (${CTA_TYPE.EXTERNAL})`]: CTA_TYPE.EXTERNAL, +const colorSchemeTypes = { + [`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR, + [`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE, + [`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE, + [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN, }; export const Default = (args) => { - const { alt, eyebrow, heading, copy, href, ctaType, mediaAlign, defaultSrc } = + const { alt, colorScheme, eyebrow, heading, copy, href, ctaType, defaultSrc } = args?.FeatureSection ?? {}; + let videoFooterCopy; + + if (ctaType === CTA_TYPE.VIDEO) { + const card = document.querySelector('c4d-card') as any; + const duration = card?.videoTitle?.match(/\((.*)\)/)?.pop(); + + videoFooterCopy = duration; + } return ( - - - - - - - - - {eyebrow} - {heading} - {copy} + + + + + + + + + + {eyebrow} + {heading} + {copy} - - - Try a free virtual business framing session with IBM Garage - - - - + + + Try a free virtual business framing session with IBM Garage + + {ctaType === CTA_TYPE.VIDEO + ? {videoFooterCopy} + : } + + + ); }; Default.story = { parameters: { knobs: { - FeatureSection: () => ({ - mediaAlign: select( - 'Media Alignment', - mediaAlignment, - MEDIA_ALIGNMENT.RIGHT - ), - eyebrow: textNullable( - 'Card Eyebrow (optional)(eyebrow):', - '5 min activity' - ), - heading: textNullable( - 'Card Heading (required)(heading):', - 'Ready when you are' - ), - copy: textNullable( - 'Card copy (optional)(copy):', - `Were flexible. We can work with you on a wide variety of engagements on a project + FeatureSection: () => { + const ctaType = select( + 'CTA type (cta-type)', + typeOptions, + types[CTA_TYPE.LOCAL] + ); + + return { + colorScheme: select( + 'Color scheme:', + colorSchemeTypes, + COLOR_SCHEME.REGULAR + ), + eyebrow: textNullable( + 'Card Eyebrow (optional)(eyebrow):', + '5 min activity' + ), + heading: textNullable( + 'Card Heading (required)(heading):', + 'Ready when you are' + ), + copy: textNullable( + 'Card copy (optional)(copy):', + `Were flexible. We can work with you on a wide variety of engagements on a project or consulting basis. And were technology agnostic. Our experts work with any vendors technology, not just IBMs. You decide how you want to work and where to focus our expertise.` - ), - alt: textNullable('Image Alt Text (alt):', 'Image alt text'), - ctaType: select('CTA type (cta-type)', types, CTA_TYPE.LOCAL), - href: textNullable('CTA Href (href):', 'https://example.com'), - }), + ), + alt: textNullable('Image Alt Text (alt):', 'Image alt text'), + ctaType, + href: textNullable( + knobNamesForType[ctaType ?? CTA_TYPE.REGULAR], + hrefsForType[ctaType ?? CTA_TYPE.REGULAR] + ), + }; + }, }, }, }; diff --git a/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.ts b/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.ts index 149b9935183..0c1f9b4d5b1 100644 --- a/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.ts +++ b/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.ts @@ -18,57 +18,76 @@ import imgLg1x1 from '../../../../../storybook-images/assets/1312/fpo--1x1--1312 import imgMd4x3 from '../../../../../storybook-images/assets/960/fpo--4x3--960x720--002.jpg'; import imgSm1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--002.jpg'; import imgXs1x1 from '../../../../../storybook-images/assets/320/fpo--1x1--320x320--002.jpg'; -import { MEDIA_ALIGNMENT } from '../defs'; import { CTA_TYPE } from '../../cta/defs'; +import { COLOR_SCHEME } from '../defs'; import readme from './README.stories.mdx'; import textNullable from '../../../../.storybook/knob-text-nullable'; -const mediaAlignment = { - [`Left`]: MEDIA_ALIGNMENT.LEFT, - [`Right`]: MEDIA_ALIGNMENT.RIGHT, -}; +import { + hrefsForType, + knobNamesForType, + typeOptions, + types, +} from '../../cta/__stories__/ctaTypeConfig'; -const types = { - [`Local (${CTA_TYPE.LOCAL})`]: CTA_TYPE.LOCAL, - [`External (${CTA_TYPE.EXTERNAL})`]: CTA_TYPE.EXTERNAL, +const colorSchemeTypes = { + [`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR, + [`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE, + [`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE, + [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN, }; export const Default = (args) => { - const { alt, mediaAlign, eyebrow, heading, copy, href, ctaType } = + const { alt, colorScheme, eyebrow, heading, copy, href, ctaType } = args?.['c4d-feature-section'] ?? {}; - return html` - - - - - - - - - - - - - - ${eyebrow} - ${heading} - ${copy} + let videoFooterCopy; + + if (ctaType === CTA_TYPE.VIDEO) { + const card = document.querySelector('c4d-card') as any; + const duration = card?.videoTitle?.match(/\((.*)\)/)?.pop(); - - Try a free virtual business framing session with IBM - Garage + + + + + + + + + + + + + + ${eyebrow} + ${heading} + ${copy} - - - + + Try a free virtual business framing session with IBM + Garage + ${ctaType === CTA_TYPE.VIDEO + ? html` ${videoFooterCopy} ` + : html``} + + + `; }; @@ -79,30 +98,41 @@ export default { ...readme.parameters, hasStoryPadding: true, knobs: { - 'c4d-feature-section': () => ({ - mediaAlign: select( - 'Media Alignment', - mediaAlignment, - MEDIA_ALIGNMENT.RIGHT - ), - eyebrow: textNullable( - 'Card Eyebrow (optional)(eyebrow):', - '5 min activity' - ), - heading: textNullable( - 'Card Heading (required)(heading):', - 'Ready when you are' - ), - copy: textNullable( - 'Card copy (optional)(copy):', - `Were flexible. We can work with you on a wide variety of engagements on a project + 'c4d-feature-section': () => { + const ctaType = select( + 'CTA type (cta-type)', + typeOptions, + types[CTA_TYPE.LOCAL] + ); + + return { + colorScheme: select( + 'Color scheme:', + colorSchemeTypes, + COLOR_SCHEME.REGULAR + ), + eyebrow: textNullable( + 'Card Eyebrow (optional)(eyebrow):', + '5 min activity' + ), + heading: textNullable( + 'Card Heading (required)(heading):', + 'Ready when you are' + ), + copy: textNullable( + 'Card copy (optional)(copy):', + `Were flexible. We can work with you on a wide variety of engagements on a project or consulting basis. And were technology agnostic. Our experts work with any vendors technology, not just IBMs. You decide how you want to work and where to focus our expertise.` - ), - alt: textNullable('Image Alt Text (alt):', 'Image alt text'), - ctaType: select('CTA type (cta-type)', types, CTA_TYPE.LOCAL), - href: textNullable('CTA Href (href):', 'https://example.com'), - }), + ), + alt: textNullable('Image Alt Text (alt):', 'Image alt text'), + ctaType, + href: textNullable( + knobNamesForType[ctaType ?? CTA_TYPE.REGULAR], + hrefsForType[ctaType ?? CTA_TYPE.REGULAR] + ), + }; + }, }, propsSet: { default: { diff --git a/packages/web-components/src/components/feature-section/defs.ts b/packages/web-components/src/components/feature-section/defs.ts index a4016a30369..b20740765cc 100644 --- a/packages/web-components/src/components/feature-section/defs.ts +++ b/packages/web-components/src/components/feature-section/defs.ts @@ -8,16 +8,26 @@ */ /** - * Type of the Media Alignment + * Type of color scheme */ -export enum MEDIA_ALIGNMENT { +export enum COLOR_SCHEME { /** - * Right alignment + * Regular color scheme */ - RIGHT = 'right', + REGULAR = 'regular', /** - * Left alignment + * Inverse color scheme */ - LEFT = 'left', + INVERSE = 'inverse', + + /** + * Cyan color scheme + */ + CYAN = 'cyan', + + /** + * Purple color scheme + */ + PURPLE = 'purple', } diff --git a/packages/web-components/src/components/feature-section/feature-section-card-link.ts b/packages/web-components/src/components/feature-section/feature-section-card-link.ts index e54635c433e..23b6cd63f5d 100644 --- a/packages/web-components/src/components/feature-section/feature-section-card-link.ts +++ b/packages/web-components/src/components/feature-section/feature-section-card-link.ts @@ -34,5 +34,10 @@ class C4DFeatureSectionCardLink extends C4DCardCTA { } } +console.warn( + 'The feature-section-card-link component has been deprecated in favor of the card (link variant) component. ' + + 'See card documentation for more information.' +); + /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */ export default C4DFeatureSectionCardLink; diff --git a/packages/web-components/src/components/feature-section/feature-section.scss b/packages/web-components/src/components/feature-section/feature-section.scss index b8c4a7a52a9..d483a4e07c4 100644 --- a/packages/web-components/src/components/feature-section/feature-section.scss +++ b/packages/web-components/src/components/feature-section/feature-section.scss @@ -7,23 +7,4 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/breakpoint' as *; -@use '@carbon/styles/scss/config' as *; -@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *; -@use '@carbon/ibmdotcom-styles/scss/components/card'; @use '@carbon/ibmdotcom-styles/scss/components/feature-section'; - -:host(#{$c4d-prefix}-feature-section) { - display: block; - outline: none; - - &[media-alignment='left'] { - .#{$prefix}--card-link, - ::slotted(#{$c4d-prefix}-feature-section-card-link) { - @include breakpoint-down(lg) { - position: relative; - right: 0; - } - } - } -} diff --git a/packages/web-components/src/components/feature-section/feature-section.ts b/packages/web-components/src/components/feature-section/feature-section.ts index 0bd5470f630..b310b36e0b8 100644 --- a/packages/web-components/src/components/feature-section/feature-section.ts +++ b/packages/web-components/src/components/feature-section/feature-section.ts @@ -14,7 +14,7 @@ import C4DFeatureCard from '../feature-card/feature-card'; import '../image/image'; import styles from './feature-section.scss'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; -import { MEDIA_ALIGNMENT } from './defs'; +import { COLOR_SCHEME } from './defs'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; const { prefix, stablePrefix: c4dPrefix } = settings; @@ -27,62 +27,35 @@ const { prefix, stablePrefix: c4dPrefix } = settings; @customElement(`${c4dPrefix}-feature-section`) class C4DFeatureSection extends StableSelectorMixin(C4DFeatureCard) { /** - * Media Alignment (right (default) | left) + * Color scheme type (regular (default) | inverse | cyan | purple ) */ - @property({ attribute: 'media-alignment', reflect: true }) - mediaAlignment = MEDIA_ALIGNMENT.RIGHT; + @property({ attribute: 'color-scheme', reflect: true }) + colorScheme = COLOR_SCHEME.REGULAR; render() { return html` - ${this.mediaAlignment === MEDIA_ALIGNMENT.LEFT - ? html` -
-
+
+
+
+
+
- -
-
-
-
-
- - - -
-
-
- -
-
-
- ` - : html` -
-
-
-
-
-
- - - -
-
-
-
-
- - + class="${prefix}--col-sm-4 ${prefix}--col-md-6 ${prefix}--col-lg-12"> + + +
- `} +
+
+ + +
+
+
`; } diff --git a/packages/web-components/src/components/feature-section/index.ts b/packages/web-components/src/components/feature-section/index.ts index 3261336b9f6..c5e8ebe9da9 100644 --- a/packages/web-components/src/components/feature-section/index.ts +++ b/packages/web-components/src/components/feature-section/index.ts @@ -8,8 +8,7 @@ */ import './feature-section'; -import './feature-section-card-link'; -import '../card/card-eyebrow'; -import '../card-link/card-link-heading'; import '../content-block/content-block-heading'; import '../content-item/content-item-paragraph'; +import '../image/index'; +import '../card/index'; diff --git a/packages/web-components/src/components/image/image.ts b/packages/web-components/src/components/image/image.ts index c04b91750df..888e3c9d91e 100644 --- a/packages/web-components/src/components/image/image.ts +++ b/packages/web-components/src/components/image/image.ts @@ -26,7 +26,7 @@ import Handle from '../../globals/internal/handle'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js'; -const { prefix, stablePrefix: c4dPrefix } = settings; +const { stablePrefix: c4dPrefix } = settings; export { LIGHTBOX_CONTRAST }; @@ -197,7 +197,7 @@ class C4DImage extends StableSelectorMixin( part="image" loading="lazy" /> -
+