From 3a45beda2308af9a4b21d9cc057227bd1fc7e3ca Mon Sep 17 00:00:00 2001 From: Anna Wen <54281166+annawen1@users.noreply.github.com> Date: Wed, 13 Sep 2023 12:31:59 -0700 Subject: [PATCH 1/3] feat(notice-choice): move component in sb to under new folder (#10931) --- .../notice-choice/__stories__/notice-choice.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts b/packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts index 3624d39ec46..d52dda2068f 100644 --- a/packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts +++ b/packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts @@ -97,7 +97,7 @@ export const Default = (args) => { }; export default { - title: 'Components/Notice Choice', + title: 'IBM components/Notice Choice', decorators: [ (story) => html`
From 90ee979d87236468ba94cd721303e4730fd47392 Mon Sep 17 00:00:00 2001 From: Anna Wen <54281166+annawen1@users.noreply.github.com> Date: Wed, 13 Sep 2023 12:33:30 -0700 Subject: [PATCH 2/3] feat(card - pictogram): card pictogram v2 style changes (#10930) * feat(card): v2 card style updates * feat(card): move card styles to styles package * feat(card): react wrapper storybook changes * feat(card): aspect ratio property * feat(card): fix focus state style * feat(card): style adjustments * feat(card): import tag theme colors * chore(merge): edit from merge conflict * chore(styles): revert back to styles package * test(formatVideoCaption): edit test to include min * chore(styles): use calc * feat(card-pictogram): v2 pictogram card changes * feat(card-pictogram): remove margin on copy hidden --- .../styles/scss/components/card/_card.scss | 137 +++++------------- .../card/__stories__/card.stories.react.tsx | 2 +- .../card/__stories__/card.stories.ts | 2 +- .../src/components/card/card.ts | 14 +- .../cypress/integration/card/card.e2e.js | 20 +-- 5 files changed, 48 insertions(+), 127 deletions(-) diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss index c36f71eb7d1..3d5ada6a603 100644 --- a/packages/styles/scss/components/card/_card.scss +++ b/packages/styles/scss/components/card/_card.scss @@ -679,124 +679,63 @@ &[pictogram-placement='top'] .#{$prefix}--card, &[pictogram-placement='bottom'] .#{$prefix}--card { - .#{$prefix}--card__motion { - ::slotted(#{$c4d-prefix}-card-heading) { - padding-top: 0; - - @include breakpoint(md) { - /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */ - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; - /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */ - overflow: hidden; - max-width: calc(100% - #{$spacing-10}); - opacity: 1; - transform: translate3d(0, 0, 0); - transition: all $duration-moderate-01 motion(standard, productive) - 0.25s; - } - } + ::slotted(#{$c4d-prefix}-card-heading) { + padding-top: 0; + } - ::slotted(svg[slot='pictogram']) { - margin-left: 0; - } + ::slotted(svg[slot='pictogram']) { + margin-left: 0; + } - .#{$prefix}--card__content { - position: relative; - } + .#{$prefix}--card__content { + position: relative; + } - .#{$prefix}--card__copy { - margin-top: $spacing-07; - margin-bottom: 0; + .#{$prefix}--card__copy { + margin-top: $spacing-07; + margin-bottom: 0; - @include breakpoint(md) { - margin-top: 0; - visibility: hidden; - opacity: 0; - transform: translate3d(0, -16px, 0); - transition: all $duration-moderate-01 motion(standard, productive); - } + &[hidden] { + margin: 0; } } - &:hover, - &:focus { - .#{$prefix}--card__motion { - ::slotted(#{$c4d-prefix}-card-heading) { - @include breakpoint(md) { - opacity: 0; - transform: translate3d(0, $spacing-05, 0); - transition-delay: 0s; - } - } - - .#{$prefix}--card__copy { - @include breakpoint(md) { - display: block; - overflow: hidden; - visibility: visible; - opacity: 1; - transform: translate3d(0, 0, 0); - transition-delay: 0.2s; - } - } - } + svg { + position: absolute; + right: $spacing-05; + bottom: $spacing-05; + color: $link-primary; } } &[pictogram-placement='top'] .#{$prefix}--card { - .#{$prefix}--card__motion { - ::slotted(#{$c4d-prefix}-card-heading) { - align-items: flex-end; - margin-bottom: 0; - margin-top: auto; - - @include breakpoint(md) { - position: absolute; - bottom: $spacing-05; - } - } - - .#{$prefix}--card__copy { - @include breakpoint(md) { - margin-top: auto; - } - } + ::slotted(#{$c4d-prefix}-card-heading) { + align-items: flex-end; + margin-bottom: 0; + margin-top: auto; + } - ::slotted(svg[slot='pictogram']) { - margin-bottom: $spacing-10; + .#{$prefix}--card__copy { + margin-top: $spacing-07; + } - @include breakpoint(md) { - margin-bottom: $spacing-07; - } - } + ::slotted(svg[slot='pictogram']) { + margin-bottom: $spacing-07; } } &[pictogram-placement='bottom'] .#{$prefix}--card { - .#{$prefix}--card__motion { - ::slotted(#{$c4d-prefix}-card-heading) { - align-items: flex-start; - - @include breakpoint(md) { - position: absolute; - top: $spacing-05; - } - } - - .#{$prefix}--card__copy { - margin-bottom: $spacing-10; + ::slotted(#{$c4d-prefix}-card-heading) { + align-items: flex-start; + } - @include breakpoint(md) { - margin-bottom: $spacing-07; - } - } + .#{$prefix}--card__copy { + margin-bottom: $spacing-07; + } - ::slotted(svg[slot='pictogram']) { - margin-top: auto; - align-items: flex-end; - } + ::slotted(svg[slot='pictogram']) { + margin-top: auto; + align-items: flex-end; } } diff --git a/packages/web-components/src/components/card/__stories__/card.stories.react.tsx b/packages/web-components/src/components/card/__stories__/card.stories.react.tsx index a50625099c6..e227278b334 100644 --- a/packages/web-components/src/components/card/__stories__/card.stories.react.tsx +++ b/packages/web-components/src/components/card/__stories__/card.stories.react.tsx @@ -128,7 +128,7 @@ Pictogram.story = { const pictogramPlacement = select( 'Pictogram position:', pictogramPlacements, - pictogramPlacements.top + pictogramPlacements.bottom ); const copy = textNullable( 'Body copy:', diff --git a/packages/web-components/src/components/card/__stories__/card.stories.ts b/packages/web-components/src/components/card/__stories__/card.stories.ts index fcf1203a1ea..b08583a5ddc 100644 --- a/packages/web-components/src/components/card/__stories__/card.stories.ts +++ b/packages/web-components/src/components/card/__stories__/card.stories.ts @@ -213,7 +213,7 @@ Pictogram.story = { const pictogramPlacement = select( 'Pictogram position:', pictogramPlacements, - pictogramPlacements.top, + pictogramPlacements.bottom, 'pictogram' ); const copy = textNullable( diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts index 57d1529dda1..eb2de40c910 100644 --- a/packages/web-components/src/components/card/card.ts +++ b/packages/web-components/src/components/card/card.ts @@ -9,6 +9,7 @@ import { TemplateResult, html, LitElement } from 'lit'; import { property, query, state } from 'lit/decorators.js'; +import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20'; import CDSLink from '../../internal/vendor/@carbon/web-components/components/link/link.js'; import markdownToHtml from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/markdownToHtml/markdownToHtml.js'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js'; @@ -139,17 +140,14 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) { * @returns The inner content. */ protected _renderInner() { - const { - _handleSlotChange: handleSlotChange, - _hasPictogram: hasPictogram, - _hasCopy: hasCopy, - } = this; + const { _handleSlotChange: handleSlotChange, _hasPictogram: hasPictogram } = + this; return html` ${this._renderImage()}
+ : ''}">
${hasPictogram ? '' : html` `} ${this.pictogramPlacement === PICTOGRAM_PLACEMENT.TOP @@ -206,7 +204,7 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) { * Pictogram placement */ @property({ attribute: 'pictogram-placement', reflect: true }) - pictogramPlacement = ''; + pictogramPlacement = PICTOGRAM_PLACEMENT.BOTTOM; /** * Whether or not to apply the logo style. @@ -367,7 +365,7 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) { aria-live="polite" aria-describedby="${prefix}--card__copy" role="button"> - ${this._renderInner()} + ${this._renderInner()} ${ArrowRight20()}
` : html`
${this._renderInner()}
`; diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/card/card.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/card/card.e2e.js index ae5d4ece07f..eb763cf7372 100644 --- a/packages/web-components/tests/e2e-storybook/cypress/integration/card/card.e2e.js +++ b/packages/web-components/tests/e2e-storybook/cypress/integration/card/card.e2e.js @@ -211,6 +211,7 @@ const _tests = { pictogramPosition: (position, groupId) => { if (position === 'top') { it('should check for pictogram at the top', () => { + cy.visit(`/${_pathPictogram}&knob-Pictogram%20position:${groupId}=bottom`); cy.get('cds-card').should('have.attr', 'pictogram-placement', 'top'); cy.get('cds-card svg').then($content => { expect($content[0].getBoundingClientRect().top).to.equal(32); @@ -218,29 +219,12 @@ const _tests = { }); }); } else { - it('should check for pictogram at the bottom with text showing on hover', () => { - cy.visit(`/${_pathPictogram}&knob-Pictogram%20position:${groupId}=bottom`); - + it('should check for pictogram at the bottom', () => { cy.get('cds-card').should('have.attr', 'pictogram-placement', 'bottom'); cy.get('cds-card svg').then($content => { expect($content[0].getBoundingClientRect().top).to.equal(186); expect($content[0].getBoundingClientRect().bottom).to.equal(234); }); - - cy.get('cds-card').then($el => { - const sheets = $el[0].shadowRoot.adoptedStyleSheets; - - if (sheets) { - const hover = getCssPropertyForRule( - ':host(cds-card[pictogram-placement="bottom"]:hover) .bx--card__copy', - 'display', - sheets - ); - expect(hover).to.not.equal('none'); - } - }); - cy.get('cds-card p').should('not.be.empty'); - cy.takeSnapshots(); }); } }, From f46db898d651385098c9ea1a63e82a8532a9f198 Mon Sep 17 00:00:00 2001 From: Ariella Gilmore Date: Thu, 14 Sep 2023 09:02:04 -0700 Subject: [PATCH 3/3] chore(examples): update grid to cds v2 (#10935) --- .../card-section-simple/src/index.js | 6 +-- .../content-block-cards/src/index.js | 6 +-- .../content-block-media/index.html | 2 +- .../content-block-media/src/index.js | 6 +-- .../content-block-mixed/index.html | 2 +- .../content-block-mixed/src/index.js | 6 +-- .../content-block-segmented/src/index.js | 6 +-- .../content-group-pictograms/src/index.js | 6 +-- .../content-group-simple/src/index.js | 6 +-- .../cta-card-link/src/index.js | 6 +-- .../components-react/cta-card/src/index.js | 6 +-- .../components-react/cta-feature/src/index.js | 6 +-- .../dotcom-shell/src/index.js | 8 ++-- .../components-react/masthead-l1/src/index.js | 8 ++-- .../components-react/masthead/src/index.js | 8 ++-- .../pictogram-item/src/index.js | 2 +- .../video-player/src/index.js | 6 +-- .../components/back-to-top/cdn.html | 9 ++-- .../components/back-to-top/index.html | 9 ++-- .../components/background-media/cdn.html | 9 ++-- .../components/background-media/index.html | 9 ++-- .../components/button-group/cdn.html | 9 ++-- .../components/button-group/index.html | 6 +-- .../components/callout-quote/cdn.html | 9 ++-- .../components/callout-quote/index.html | 9 ++-- .../components/callout-with-media/cdn.html | 9 ++-- .../components/callout-with-media/index.html | 9 ++-- .../components/card-group/cdn.html | 9 ++-- .../components/card-group/index.html | 9 ++-- .../components/card-in-card/cdn.html | 9 ++-- .../components/card-in-card/index.html | 9 ++-- .../codesandbox/components/card-link/cdn.html | 9 ++-- .../components/card-link/index.html | 6 +-- .../components/card-section-carousel/cdn.html | 7 ++-- .../card-section-carousel/index.html | 7 ++-- .../components/card-section-offset/cdn.html | 7 ++-- .../components/card-section-offset/index.html | 4 +- .../components/card-section-simple/cdn.html | 8 ++-- .../components/card-section-simple/index.html | 6 +-- .../codesandbox/components/card/cdn.html | 9 ++-- .../codesandbox/components/card/index.html | 9 ++-- .../codesandbox/components/carousel/cdn.html | 9 ++-- .../components/carousel/index.html | 9 ++-- .../components/cloud-masthead/cdn-rtl.html | 16 ++++---- .../components/cloud-masthead/cdn.html | 16 ++++---- .../components/cloud-masthead/index.html | 8 ++-- .../components/cloud-masthead/src/index.scss | 4 +- .../content-block-card-static/cdn.html | 8 ++-- .../content-block-card-static/index.html | 8 ++-- .../components/content-block-cards/cdn.html | 8 ++-- .../components/content-block-cards/index.html | 6 +-- .../content-block-headlines/cdn.html | 8 ++-- .../content-block-headlines/index.html | 6 +-- .../components/content-block-media/cdn.html | 8 ++-- .../components/content-block-media/index.html | 6 +-- .../components/content-block-mixed/cdn.html | 10 ++--- .../components/content-block-mixed/index.html | 8 ++-- .../content-block-segmented/cdn.html | 8 ++-- .../content-block-segmented/index.html | 6 +-- .../components/content-block-simple/cdn.html | 8 ++-- .../content-block-simple/index.html | 6 +-- .../components/content-block/cdn.html | 8 ++-- .../components/content-block/index.html | 6 +-- .../components/content-group-banner/cdn.html | 8 ++-- .../content-group-banner/index.html | 6 +-- .../components/content-group-cards/cdn.html | 8 ++-- .../components/content-group-cards/index.html | 6 +-- .../content-group-horizontal/cdn.html | 8 ++-- .../content-group-horizontal/index.html | 7 ++-- .../content-group-pictograms/cdn.html | 10 ++--- .../content-group-pictograms/index.html | 8 ++-- .../components/content-group-simple/cdn.html | 8 ++-- .../content-group-simple/index.html | 6 +-- .../components/content-group/cdn.html | 8 ++-- .../components/content-group/index.html | 6 +-- .../content-item-horizontal/cdn.html | 12 +++--- .../content-item-horizontal/index.html | 12 +++--- .../components/content-item/cdn.html | 8 ++-- .../components/content-item/index.html | 7 ++-- .../components/content-section/cdn.html | 8 ++-- .../components/content-section/index.html | 7 ++-- .../codesandbox/components/cta-block/cdn.html | 8 ++-- .../components/cta-block/index.html | 6 +-- .../components/cta-button/cdn.html | 11 ++--- .../cta-button/contact-methods.html | 11 ++--- .../components/cta-button/index.html | 14 ++----- .../components/cta-card-link/cdn.html | 9 ++-- .../components/cta-card-link/index.html | 9 ++-- .../codesandbox/components/cta-card/cdn.html | 9 ++-- .../components/cta-card/index.html | 9 ++-- .../components/cta-feature/cdn.html | 9 ++-- .../components/cta-feature/index.html | 9 ++-- .../components/cta-section/cdn.html | 8 ++-- .../components/cta-section/index.html | 6 +-- .../codesandbox/components/cta-text/cdn.html | 9 ++-- .../components/cta-text/index.html | 9 ++-- .../components/dotcom-shell/cdn.html | 10 ++--- .../components/dotcom-shell/index.html | 8 ++-- .../components/dotcom-shell/src/index.scss | 4 +- .../components/expressive-modal/cdn.html | 9 ++-- .../components/expressive-modal/index.html | 10 ++--- .../components/feature-card/cdn.html | 9 ++-- .../components/feature-card/index.html | 9 ++-- .../components/filter-panel/cdn.html | 8 ++-- .../components/filter-panel/index.html | 6 +-- .../components/horizontal-rule/cdn.html | 9 ++-- .../components/horizontal-rule/index.html | 9 ++-- .../codesandbox/components/image/cdn.html | 9 ++-- .../codesandbox/components/image/index.html | 10 ++--- .../components/leadspace-block/cdn.html | 8 ++-- .../components/leadspace-block/index.html | 6 +-- .../components/leadspace-with-search/cdn.html | 9 ++-- .../leadspace-with-search/index.html | 6 +-- .../codesandbox/components/leadspace/cdn.html | 11 ++--- .../components/leadspace/index.html | 6 +-- .../components/leaving-ibm/cdn.html | 9 ++-- .../components/link-list-section/cdn.html | 8 ++-- .../components/link-list-section/index.html | 6 +-- .../codesandbox/components/link-list/cdn.html | 8 ++-- .../components/link-list/index.html | 6 +-- .../components/link-with-icon/cdn.html | 9 ++-- .../components/link-with-icon/index.html | 9 ++-- .../components/locale-modal/cdn.html | 9 ++-- .../components/locale-modal/index.html | 9 ++-- .../codesandbox/components/logo-grid/cdn.html | 9 ++-- .../components/logo-grid/index.html | 9 ++-- .../components/masthead-l1/cdn-rtl.html | 10 ++--- .../components/masthead-l1/cdn.html | 10 ++--- .../components/masthead-l1/index.html | 8 ++-- .../components/masthead-l1/src/index.scss | 4 +- .../components/masthead/cdn-rtl.html | 10 ++--- .../codesandbox/components/masthead/cdn.html | 10 ++--- .../components/masthead/index.html | 8 ++-- .../components/masthead/src/index.scss | 4 +- .../components/pictogram-item/cdn.html | 10 ++--- .../components/pictogram-item/index.html | 8 ++-- .../components/pricing-table/cdn.html | 9 ++-- .../components/pricing-table/index.html | 10 ++--- .../codesandbox/components/quote/cdn.html | 8 ++-- .../codesandbox/components/quote/index.html | 6 +-- .../components/search-with-typeahead/cdn.html | 9 ++-- .../search-with-typeahead/index.html | 6 +-- .../components/structured-list/cdn.html | 9 ++-- .../components/structured-list/index.html | 9 ++-- .../components/table-of-contents/cdn.html | 12 +++--- .../components/table-of-contents/index.html | 11 +++-- .../components/tabs-extended-media/cdn.html | 8 ++-- .../components/tabs-extended-media/index.html | 6 +-- .../components/tabs-extended/cdn.html | 9 ++-- .../components/tabs-extended/index.html | 9 ++-- .../with-cta-block-item-rows.html | 41 +++++++++---------- .../codesandbox/components/tag-group/cdn.html | 9 ++-- .../components/tag-group/index.html | 9 ++-- .../codesandbox/components/tag-link/cdn.html | 9 ++-- .../components/tag-link/index.html | 9 ++-- .../components/universal-banner/cdn.html | 3 +- .../components/video-player/cdn.html | 8 ++-- .../components/video-player/index.html | 6 +-- 158 files changed, 610 insertions(+), 684 deletions(-) diff --git a/packages/web-components/examples/codesandbox/components-react/card-section-simple/src/index.js b/packages/web-components/examples/codesandbox/components-react/card-section-simple/src/index.js index d00ffad592a..cd4067d6ee3 100644 --- a/packages/web-components/examples/codesandbox/components-react/card-section-simple/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/card-section-simple/src/index.js @@ -20,9 +20,9 @@ import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; import './index.css'; const App = () => ( -
-
-
+
+
+
Aliquam condimentum interdum diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-cards/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-block-cards/src/index.js index 94fd3987b06..2deff017d2e 100644 --- a/packages/web-components/examples/codesandbox/components-react/content-block-cards/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/content-block-cards/src/index.js @@ -20,9 +20,9 @@ import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; import './index.css'; const App = () => ( -
-
-
+
+
+
Lorem ipsum dolor sit amet diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-media/index.html b/packages/web-components/examples/codesandbox/components-react/content-block-media/index.html index f12120e0bfe..eea03cefb16 100644 --- a/packages/web-components/examples/codesandbox/components-react/content-block-media/index.html +++ b/packages/web-components/examples/codesandbox/components-react/content-block-media/index.html @@ -13,7 +13,7 @@ - + carbon-web-components example with React diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-media/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-block-media/src/index.js index 4cde2ffb950..1de839993f6 100644 --- a/packages/web-components/examples/codesandbox/components-react/content-block-media/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/content-block-media/src/index.js @@ -25,9 +25,9 @@ import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-rea import './index.css'; const App = () => ( -
-
-
+
+
+
Curabitur malesuada varius mi eu posuere diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-mixed/index.html b/packages/web-components/examples/codesandbox/components-react/content-block-mixed/index.html index f12120e0bfe..eea03cefb16 100644 --- a/packages/web-components/examples/codesandbox/components-react/content-block-mixed/index.html +++ b/packages/web-components/examples/codesandbox/components-react/content-block-mixed/index.html @@ -13,7 +13,7 @@ - + carbon-web-components example with React diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-mixed/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-block-mixed/src/index.js index 466024bd26f..fe2c185e76d 100644 --- a/packages/web-components/examples/codesandbox/components-react/content-block-mixed/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/content-block-mixed/src/index.js @@ -34,9 +34,9 @@ import TouchScreen from '@carbon/pictograms-react/es/touch--screen/index.js'; import './index.css'; const App = () => ( -
-
-
+
+
+
Lorem ipsum dolor sit amet diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-segmented/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-block-segmented/src/index.js index bd248d24aca..ddbd91ee007 100644 --- a/packages/web-components/examples/codesandbox/components-react/content-block-segmented/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/content-block-segmented/src/index.js @@ -49,9 +49,9 @@ const contentItemCopy = const video = ; const App = () => ( -
-
-
+
+
+
( Lorem ipsum dolor sit amet. diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/src/index.js index f9ffa009934..1c110de0231 100644 --- a/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/src/index.js @@ -48,9 +48,9 @@ const pictogramsItems = [ ]; const App = () => ( -
-
-
+
+
+
{groupHeading} {groupCopy} diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-simple/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-group-simple/src/index.js index 7e12efc6e47..7900d195bd7 100644 --- a/packages/web-components/examples/codesandbox/components-react/content-group-simple/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/content-group-simple/src/index.js @@ -78,9 +78,9 @@ const image = ({ heading: imageHeading } = { heading: undefined }) => ( ); const App = () => ( -
-
-
+
+
+
'Curabitur malesuada varius mi eu posuere' diff --git a/packages/web-components/examples/codesandbox/components-react/cta-card-link/src/index.js b/packages/web-components/examples/codesandbox/components-react/cta-card-link/src/index.js index 1daeec42fe4..56105b246a7 100644 --- a/packages/web-components/examples/codesandbox/components-react/cta-card-link/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/cta-card-link/src/index.js @@ -16,9 +16,9 @@ import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; import './index.css'; const App = () => ( -
-
-
+
+
+
Card link heading diff --git a/packages/web-components/examples/codesandbox/components-react/cta-card/src/index.js b/packages/web-components/examples/codesandbox/components-react/cta-card/src/index.js index 52ff435bbac..15d5ec3637b 100644 --- a/packages/web-components/examples/codesandbox/components-react/cta-card/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/cta-card/src/index.js @@ -15,9 +15,9 @@ import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; import './index.css'; const App = () => ( -
-
-
+
+
+
Card CTA Copy diff --git a/packages/web-components/examples/codesandbox/components-react/cta-feature/src/index.js b/packages/web-components/examples/codesandbox/components-react/cta-feature/src/index.js index 384ad264a3f..418fb7d4266 100644 --- a/packages/web-components/examples/codesandbox/components-react/cta-feature/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/cta-feature/src/index.js @@ -17,9 +17,9 @@ import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; import './index.css'; const App = () => ( -
-
-
+
+
+
Feature CTA Copy ( -
-
-
-
+
+
+
+

Purpose and function

The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework diff --git a/packages/web-components/examples/codesandbox/components-react/masthead-l1/src/index.js b/packages/web-components/examples/codesandbox/components-react/masthead-l1/src/index.js index 3b14d1f4dbf..f287b1838eb 100644 --- a/packages/web-components/examples/codesandbox/components-react/masthead-l1/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/masthead-l1/src/index.js @@ -15,10 +15,10 @@ import './index.css'; const App = () => ( <> -

-
-
-
+
+
+
+

Purpose and function

The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework diff --git a/packages/web-components/examples/codesandbox/components-react/masthead/src/index.js b/packages/web-components/examples/codesandbox/components-react/masthead/src/index.js index a2d1af1d795..e0e5228e929 100644 --- a/packages/web-components/examples/codesandbox/components-react/masthead/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/masthead/src/index.js @@ -15,10 +15,10 @@ import './index.css'; const App = () => ( <> -

-
-
-
+
+
+
+

Purpose and function

The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework 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 index 09ab0047385..7cc02a2870e 100644 --- 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 @@ -30,7 +30,7 @@ const App = () => ( height="64" viewBox="8 8 32 32" role="img" - class="bx--pictogram-item__pictogram"> + class="cds--pictogram-item__pictogram"> ( <> -

-
-
+
+
+
diff --git a/packages/web-components/examples/codesandbox/components/back-to-top/cdn.html b/packages/web-components/examples/codesandbox/components/back-to-top/cdn.html index 78b9c1c8af5..72391fd2a10 100644 --- a/packages/web-components/examples/codesandbox/components/back-to-top/cdn.html +++ b/packages/web-components/examples/codesandbox/components/back-to-top/cdn.html @@ -12,8 +12,7 @@ @carbon/ibmdotcom-web-components example - + @@ -42,10 +42,10 @@ -
-
-
-
+
+
+
+

Purpose and function

diff --git a/packages/web-components/examples/codesandbox/components/cloud-masthead/cdn.html b/packages/web-components/examples/codesandbox/components/cloud-masthead/cdn.html index bbc06343547..554efd867e0 100644 --- a/packages/web-components/examples/codesandbox/components/cloud-masthead/cdn.html +++ b/packages/web-components/examples/codesandbox/components/cloud-masthead/cdn.html @@ -12,7 +12,7 @@ @carbon/ibmdotcom-web-components example - + @@ -42,10 +42,10 @@ -
-
-
-
+
+
+
+

Purpose and function

diff --git a/packages/web-components/examples/codesandbox/components/cloud-masthead/index.html b/packages/web-components/examples/codesandbox/components/cloud-masthead/index.html index 812c69fb8fa..38119f74993 100644 --- a/packages/web-components/examples/codesandbox/components/cloud-masthead/index.html +++ b/packages/web-components/examples/codesandbox/components/cloud-masthead/index.html @@ -22,10 +22,10 @@ -
-
-
-
+
+
+
+

Purpose and function

diff --git a/packages/web-components/examples/codesandbox/components/cloud-masthead/src/index.scss b/packages/web-components/examples/codesandbox/components/cloud-masthead/src/index.scss index 6fab30dd10f..7e81870866f 100644 --- a/packages/web-components/examples/codesandbox/components/cloud-masthead/src/index.scss +++ b/packages/web-components/examples/codesandbox/components/cloud-masthead/src/index.scss @@ -21,12 +21,12 @@ body { } @media (min-width: 66rem) { - .bx--offset-lg-3 { + .cds--offset-lg-3 { margin-left: 0; } } -.bx--content.cds-ce-demo--ui-shell-content { +.cds--content.cds-ce-demo--ui-shell-content { h2 { margin: 30px 0; diff --git a/packages/web-components/examples/codesandbox/components/content-block-card-static/cdn.html b/packages/web-components/examples/codesandbox/components/content-block-card-static/cdn.html index c2290c88631..b242abc838c 100644 --- a/packages/web-components/examples/codesandbox/components/content-block-card-static/cdn.html +++ b/packages/web-components/examples/codesandbox/components/content-block-card-static/cdn.html @@ -12,7 +12,7 @@ @carbon/ibmdotcom-web-components example - + -
-
-
+
+
+
Curabitur malesuada varius mi eu posuere diff --git a/packages/web-components/examples/codesandbox/components/content-block-mixed/cdn.html b/packages/web-components/examples/codesandbox/components/content-block-mixed/cdn.html index 6fe41da96bf..3cf718e1e86 100644 --- a/packages/web-components/examples/codesandbox/components/content-block-mixed/cdn.html +++ b/packages/web-components/examples/codesandbox/components/content-block-mixed/cdn.html @@ -12,7 +12,7 @@ @carbon/ibmdotcom-web-components example - + -
-
-
+
+
+
Lorem ipsum dolor sit amet @@ -104,7 +104,7 @@ height="48" viewBox="0 0 48 48" role="img" - class="bx--pictogram-item__pictogram" + class="cds--pictogram-item__pictogram" > @carbon/ibmdotcom-web-components example - + -
-
-
+
+
+
Curabitur malesuada varius mi eu posuere diff --git a/packages/web-components/examples/codesandbox/components/content-group-cards/cdn.html b/packages/web-components/examples/codesandbox/components/content-group-cards/cdn.html index efd6481351e..ee131cbaa87 100644 --- a/packages/web-components/examples/codesandbox/components/content-group-cards/cdn.html +++ b/packages/web-components/examples/codesandbox/components/content-group-cards/cdn.html @@ -10,7 +10,7 @@ @carbon/ibmdotcom-web-components example - + -
-
-
+
+
+
Curabitur malesuada varius mi eu posuere Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/packages/web-components/examples/codesandbox/components/content-group-horizontal/cdn.html b/packages/web-components/examples/codesandbox/components/content-group-horizontal/cdn.html index eae9121d034..d2d02c20fd8 100644 --- a/packages/web-components/examples/codesandbox/components/content-group-horizontal/cdn.html +++ b/packages/web-components/examples/codesandbox/components/content-group-horizontal/cdn.html @@ -12,7 +12,7 @@ @carbon/ibmdotcom-web-components example - + -
-
-
+
+
+
- +