diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap index 1cf0f07f422..3c497f81421 100644 --- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap +++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap @@ -41683,10 +41683,10 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] = border={false} cta={ Object { - "copy": "Amet justo donec", "cta": Object { "href": "https://www.example.com", }, + "heading": "Amet justo donec", "style": "card", "type": "local", } @@ -41881,30 +41881,32 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] = data-autoid="dds--content-block__cta" >
-
Amet justo donec

", - } - } - /> +

+ Amet justo donec +

@@ -48576,10 +48577,10 @@ exports[`Storyshots Components|Dotcom Shell Default 1`] = ` border={false} cta={ Object { - "copy": "Amet justo donec", "cta": Object { "href": "https://www.example.com", }, + "heading": "Amet justo donec", "style": "card", "type": "local", } @@ -48774,30 +48775,32 @@ exports[`Storyshots Components|Dotcom Shell Default 1`] = ` data-autoid="dds--content-block__cta" >
-
Amet justo donec

", - } - } - /> +

+ Amet justo donec +

@@ -54448,10 +54450,10 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = ` border={false} cta={ Object { - "copy": "Amet justo donec", "cta": Object { "href": "https://www.example.com", }, + "heading": "Amet justo donec", "style": "card", "type": "local", } @@ -54646,30 +54648,32 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = ` data-autoid="dds--content-block__cta" >
-
Amet justo donec

", - } - } - /> +

+ Amet justo donec +

@@ -62960,10 +62963,10 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = ` border={false} cta={ Object { - "copy": "Amet justo donec", "cta": Object { "href": "https://www.example.com", }, + "heading": "Amet justo donec", "style": "card", "type": "local", } @@ -63158,30 +63161,32 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = ` data-autoid="dds--content-block__cta" >
-
Amet justo donec

", - } - } - /> +

+ Amet justo donec +

@@ -69135,10 +69139,10 @@ exports[`Storyshots Components|Dotcom Shell With micro footer (language only) 1` border={false} cta={ Object { - "copy": "Amet justo donec", "cta": Object { "href": "https://www.example.com", }, + "heading": "Amet justo donec", "style": "card", "type": "local", } @@ -69333,30 +69337,32 @@ exports[`Storyshots Components|Dotcom Shell With micro footer (language only) 1` data-autoid="dds--content-block__cta" >
-
Amet justo donec

", - } - } - /> +

+ Amet justo donec +

@@ -75072,10 +75077,10 @@ exports[`Storyshots Components|Dotcom Shell With micro footer 1`] = ` border={false} cta={ Object { - "copy": "Amet justo donec", "cta": Object { "href": "https://www.example.com", }, + "heading": "Amet justo donec", "style": "card", "type": "local", } @@ -75270,30 +75275,32 @@ exports[`Storyshots Components|Dotcom Shell With micro footer 1`] = ` data-autoid="dds--content-block__cta" >
-
Amet justo donec

", - } - } - /> +

+ Amet justo donec +

@@ -80742,10 +80748,10 @@ exports[`Storyshots Components|Dotcom Shell With platform 1`] = ` border={false} cta={ Object { - "copy": "Amet justo donec", "cta": Object { "href": "https://www.example.com", }, + "heading": "Amet justo donec", "style": "card", "type": "local", } @@ -80940,30 +80946,32 @@ exports[`Storyshots Components|Dotcom Shell With platform 1`] = ` data-autoid="dds--content-block__cta" >
-
Amet justo donec

", - } - } - /> +

+ Amet justo donec +

@@ -86924,10 +86931,10 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1` border={false} cta={ Object { - "copy": "Amet justo donec", "cta": Object { "href": "https://www.example.com", }, + "heading": "Amet justo donec", "style": "card", "type": "local", } @@ -87122,30 +87129,32 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1` data-autoid="dds--content-block__cta" >
-
Amet justo donec

", - } - } - /> +

+ Amet justo donec +

@@ -93883,10 +93891,10 @@ exports[`Storyshots Components|Dotcom Shell With short footer 1`] = ` border={false} cta={ Object { - "copy": "Amet justo donec", "cta": Object { "href": "https://www.example.com", }, + "heading": "Amet justo donec", "style": "card", "type": "local", } @@ -94081,30 +94089,32 @@ exports[`Storyshots Components|Dotcom Shell With short footer 1`] = ` data-autoid="dds--content-block__cta" >
-
Amet justo donec

", - } - } - /> +

+ Amet justo donec +

@@ -112301,10 +112310,10 @@ exports[`Storyshots Components|LogoGrid Default 1`] = ` border={false} cta={ Object { - "copy": "Lorem ipsum dolor sit amet", "cta": Object { "href": "http://local.url.com/", }, + "heading": "Lorem ipsum dolor sit amet", "style": "card", "type": "local", } @@ -112661,30 +112670,32 @@ exports[`Storyshots Components|LogoGrid Default 1`] = ` data-autoid="dds--content-block__cta" >
-
Lorem ipsum dolor sit amet

", - } - } - /> +

+ Lorem ipsum dolor sit amet +

diff --git a/packages/react/src/components/LogoGrid/LogoGrid.js b/packages/react/src/components/LogoGrid/LogoGrid.js index c58a8b56a6f..079c3906e5b 100644 --- a/packages/react/src/components/LogoGrid/LogoGrid.js +++ b/packages/react/src/components/LogoGrid/LogoGrid.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2020 + * Copyright IBM Corp. 2016, 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. @@ -31,7 +31,7 @@ const LogoGrid = ({ heading, logosGroup, ctaCopy, ctaHref, hideBorder }) => { cta = { style: 'card', type: 'local', - copy: ctaCopy, + heading: ctaCopy, cta: { href: ctaHref, }, diff --git a/packages/styles/scss/components/callout-data/_callout-data.scss b/packages/styles/scss/components/callout-data/_callout-data.scss index 48cafb724b7..3ab9135657d 100644 --- a/packages/styles/scss/components/callout-data/_callout-data.scss +++ b/packages/styles/scss/components/callout-data/_callout-data.scss @@ -60,7 +60,7 @@ :host(#{$dds-prefix}-callout-data-source), .#{$prefix}--callout-data__source { - @include carbon--type-style('body-short-01', true); + @include carbon--type-style('caption-01'); width: 90%; max-width: carbon--mini-units(80); diff --git a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss index bb2aaefa833..a68cd2f64b8 100644 --- a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss +++ b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2016, 2020 +// Copyright IBM Corp. 2016, 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. @@ -66,8 +66,7 @@ .#{$prefix}--callout__content .#{$prefix}--content-block { .#{$prefix}--image__caption { - @include use-carbon-productive-tokens(); - @include carbon--type-style('body-short-01', true); + @include carbon--type-style('caption-01'); margin-top: $carbon--spacing-03; color: $text-01; diff --git a/packages/styles/scss/components/card/index.scss b/packages/styles/scss/components/card/index.scss index 16fb33db7ed..3a5fb249b7e 100644 --- a/packages/styles/scss/components/card/index.scss +++ b/packages/styles/scss/components/card/index.scss @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2020 + * Copyright IBM Corp. 2016, 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. @@ -94,14 +94,6 @@ padding: 0; } - .#{$prefix}--card__video { - .#{$prefix}--card__footer span { - color: $text-02; - @include use-carbon-productive-tokens(); - @include carbon--type-style('body-short-01'); - } - } - &.#{$prefix}--link:focus, .#{$prefix}--link:focus { outline: 2px solid $focus; @@ -111,8 +103,7 @@ :host(#{$dds-prefix}-card-eyebrow), .#{$prefix}--card__eyebrow { - @include use-carbon-productive-tokens(); - @include carbon--type-style('body-short-01'); + @include carbon--type-style('label-01'); margin-bottom: $carbon--spacing-03; color: $text-02; diff --git a/packages/styles/scss/components/content-item-horizontal/_content-item-horizontal.scss b/packages/styles/scss/components/content-item-horizontal/_content-item-horizontal.scss index 1cfe35bdf67..52809d739c8 100644 --- a/packages/styles/scss/components/content-item-horizontal/_content-item-horizontal.scss +++ b/packages/styles/scss/components/content-item-horizontal/_content-item-horizontal.scss @@ -51,8 +51,7 @@ .#{$prefix}--content-item-horizontal__item--eyebrow { color: $text-05; padding-bottom: $spacing-03; - @include use-carbon-productive-tokens(); - @include carbon--type-style('body-long-01'); + @include carbon--type-style('label-01'); } :host(#{$dds-prefix}-content-item-horizontal) ::slotted([slot='heading']), diff --git a/packages/styles/scss/components/image-with-caption/image-with-caption.scss b/packages/styles/scss/components/image-with-caption/image-with-caption.scss index f84b019f6ad..7d85a616244 100644 --- a/packages/styles/scss/components/image-with-caption/image-with-caption.scss +++ b/packages/styles/scss/components/image-with-caption/image-with-caption.scss @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2020 + * Copyright IBM Corp. 2016, 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. @@ -87,8 +87,7 @@ } .#{$prefix}--image__caption { - @include use-carbon-productive-tokens(); - @include carbon--type-style('body-short-01', true); + @include carbon--type-style('caption-01'); margin-top: $carbon--spacing-03; color: $text-05; diff --git a/packages/styles/scss/components/locale-modal/_locale-modal.scss b/packages/styles/scss/components/locale-modal/_locale-modal.scss index a7375ba3956..86cc4153069 100644 --- a/packages/styles/scss/components/locale-modal/_locale-modal.scss +++ b/packages/styles/scss/components/locale-modal/_locale-modal.scss @@ -117,8 +117,7 @@ margin-right: $carbon--spacing-03; } - @include use-carbon-productive-tokens(); - @include carbon--type-style(body-short-01, true); + @include carbon--type-style('caption-01'); } .#{$prefix}--modal-header__heading { @@ -259,8 +258,7 @@ padding: $carbon--spacing-05; min-height: $carbon--spacing-09; - @include use-carbon-productive-tokens(); - @include carbon--type-style(heading-01, true); + @include carbon--type-style(heading-02); } .#{$prefix}--locale-modal__list { diff --git a/packages/styles/scss/components/logo-grid/_logo-grid.scss b/packages/styles/scss/components/logo-grid/_logo-grid.scss index 2dcde7a708c..ea1ae84b741 100644 --- a/packages/styles/scss/components/logo-grid/_logo-grid.scss +++ b/packages/styles/scss/components/logo-grid/_logo-grid.scss @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2020 + * Copyright IBM Corp. 2016, 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. @@ -48,11 +48,6 @@ @include carbon--breakpoint('md') { @include carbon--make-col(1, 3); } - - .#{$prefix}--card__heading { - @include use-carbon-productive-tokens(); - @include carbon--type-style('productive-heading-01'); - } } a.#{$prefix}--card__CTA { @@ -133,6 +128,13 @@ :host(#{$dds-prefix}-logo-grid-link) ::slotted(svg) { fill: $link-01; } + + :host(#{$dds-prefix}-logo-grid-link) ::slotted(#{$dds-prefix}-card-heading), + .#{$prefix}--logo-grid + .#{$prefix}--content-block__cta + .#{$prefix}--card__heading { + @include carbon--type-style('productive-heading-01'); + } } @include exports('logo-grid') { @include logo-grid; diff --git a/packages/styles/scss/components/video-player/_video-player.scss b/packages/styles/scss/components/video-player/_video-player.scss index 69b0b476563..2d0a5c5e9c6 100644 --- a/packages/styles/scss/components/video-player/_video-player.scss +++ b/packages/styles/scss/components/video-player/_video-player.scss @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2020 + * Copyright IBM Corp. 2016, 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. @@ -56,8 +56,7 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1)); } .#{$prefix}--video-player__video-caption { - @include use-carbon-productive-tokens(); - @include carbon--type-style(body-long-01, true); + @include carbon--type-style('caption-01'); padding-top: var(--#{$dds-prefix}--video-caption--padding, $spacing-05); color: var(--#{$dds-prefix}--video-caption--color, $text-05); diff --git a/packages/web-components/src/components/logo-grid/__stories__/logo-grid.stories.ts b/packages/web-components/src/components/logo-grid/__stories__/logo-grid.stories.ts index 45e79a5d024..5fc26429179 100644 --- a/packages/web-components/src/components/logo-grid/__stories__/logo-grid.stories.ts +++ b/packages/web-components/src/components/logo-grid/__stories__/logo-grid.stories.ts @@ -11,6 +11,7 @@ import '../logo-grid'; import '../../content-block/content-block-heading'; import '../logo-grid-item'; import '../logo-grid-link'; +import '../../card/card-heading'; import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20'; import { boolean } from '@storybook/addon-knobs'; import { html } from 'lit-element'; @@ -32,7 +33,7 @@ export const Default = ({ parameters }) => { ` )} -

${ctaCopy}

+ ${ctaCopy} ${ArrowRight20({ slot: 'footer' })}