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
-
+
-