Merge branch 'feat/carbon-for-ibm-dotcom-v2' into feat/content-block-v2

docs/dotcom-v2-migration.md

@@ -34,6 +34,7 @@ For Carbon v11 migration guidance, see their
 | content-block-mixed       | This component is deprecated in v2 in favor for content-section/block, video-player/image, pictogram-items, and other content-group components |
 | content-block-segmented   | This component is deprecated in v2 in favor for content-section/block component                                                                |
 | content-block-simple      | This component is deprecated in v2 in favor for content-section/block component                                                                |
+| content-group-banner       | View changes [here](#content-group-banner)                                          |
 | content-group-horizontal  | This component is deprecated in v1 and has been removed in v2 in favor of the content-block-horizontal component.                              |
 | content-group-cards       | This component is deprecated in v2 in favor for content-section/block & card-group components                                                  |
 | content-group-pictograms  | This component is deprecated in v2 in favor for content-section/block content-item (pictogram variant) components                              |
@@ -52,6 +53,7 @@ For Carbon v11 migration guidance, see their
 | leadspace                 | View changes [here](#leadspace)                                                                                                                |
 | leadspace-with-search     | View changes [here](#leadspace-with-search)                                                                                                    |
 | link-list-section         | This component is deprecated in v2 in favor for content-section/block & link-list end of section variant components                            |
+| link-with-icon            | No API changes.                                                                                                                                |
 | logo-grid                 | This component is deprecated in v2 in favor for content-section/block & image-group components                                                 |
 | pictogram-item            | This component is deprecated in v2 in favor for content-item (pictogram variation) componet                                                    |
 | quote                     | No API changes.                                                                                                                                |
@@ -69,7 +71,7 @@ For Carbon v11 migration guidance, see their
 ### Callout quote
 
 - New options for `color-scheme` property: `REGULAR = 'regular'`,
-  `INVERSE = 'inverse'` `LAYER = 'layer'`, `CYAN = 'cyan'`, `PURPLE = 'purple'`
+  `INVERSE = 'inverse'`, `LAYER = 'layer'`, `CYAN = 'cyan'`, `PURPLE = 'purple'`
 - New callout style tokens
 
 ### Card
@@ -81,10 +83,15 @@ For Carbon v11 migration guidance, see their
   options
 - New `link` property which takes the place of the deprecated `card-link`
 
+### Content group banner
+
+- `content-group-banner` renamed to `in-page-banner`
+- New `color-scheme` property with options: `REGULAR = 'regular'`, `LAYER = 'layer'`, `CYAN = 'cyan'`, `PURPLE = 'purple'`
+
 ### Content item horizontal
 
-- `content-item-horizontal` changed names to `content-item-row`
-- All components with `content-item-horizontal-*` also changed to `content-item-row-*`
+- `content-item-horizontal` renamed to `content-item-row`
+- All components with `content-item-horizontal-*` also renamed to `content-item-row-*`
 
 ### CTA
 
@@ -127,4 +134,4 @@ information.
 
 ### Universal banner
 
-- `universal-banner` changed names to `global-banner`
+- `universal-banner` renamed to `global-banner`

packages/styles/carbon.yml

@@ -298,18 +298,18 @@ assets:
     tags:
       - content-block
       - content-element
-  content-group-banner:
-    name: Content group banner
+  in-page-banner:
+    name: In page banner
     description:
-      Content group banner is designed as a subtle callout, intended for
-      tangential information or announcements that are supplementary to the
-      page’s main focus.
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-group-banner
+      In page banner is designed as a subtle callout, intended for tangential
+      information or announcements that are supplementary to the page’s main
+      focus.
+    externalDocsUrl: https://www.ibm.com/standards/carbon/components/in-page-banner
     status: stable
     type: component
     platform: web
     noIndex: true
-    thumbnailPath: ../../thumbnails/content-group-banner.svg
+    thumbnailPath: ../../thumbnails/in-page-banner.svg
     tags:
       - content-block
   content-group-cards:

packages/styles/scss/components/feature-section/_feature-section.scss

@@ -13,7 +13,7 @@
 @use '../../globals/utils/aspect-ratio';
 @use '../../globals/carbon-grid';
 @use '../../globals/utils/ratio-base' as *;
-@use '../../internal/callout/tokens' as *;
+@use '../../globals/tokens/color-tokens' as *;
 
 @mixin feature-section {
   :host(#{$c4d-prefix}-feature-section) {
@@ -74,12 +74,12 @@
 
   :host(#{$c4d-prefix}-feature-section[color-scheme='cyan'])
     .#{$prefix}--feature-section__container {
-    background-color: $callout-background-cyan;
+    background-color: $background-cyan;
   }
 
   :host(#{$c4d-prefix}-feature-section[color-scheme='purple'])
     .#{$prefix}--feature-section__container {
-    background-color: $callout-background-purple;
+    background-color: $background-purple;
   }
 
   .#{$prefix}--feature-section__body {

packages/styles/scss/components/content-group-banner/_content-group-banner.scss → packages/styles/scss/components/in-page-banner/_in-page-banner.scss

@@ -11,10 +11,11 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '../../globals/vars' as *;
 @use '../../internal/content-group';
+@use '../../globals/tokens/color-tokens' as *;
 
-@mixin content-group-banner {
-  :host(#{$c4d-prefix}-content-group-banner),
-  .#{$prefix}--content-group-banner {
+@mixin in-page-banner {
+  :host(#{$c4d-prefix}-in-page-banner) {
+    display: block;
     background: $background;
     padding-top: $spacing-07;
     padding-bottom: $spacing-07;
@@ -65,4 +66,24 @@
       }
     }
   }
+
+  :host(#{$c4d-prefix}-in-page-banner[color-scheme='cyan']) {
+    background-color: $background-cyan;
+
+    ::slotted([slot='heading']) {
+      color: $text-cyan;
+    }
+  }
+
+  :host(#{$c4d-prefix}-in-page-banner[color-scheme='purple']) {
+    background-color: $background-purple;
+
+    ::slotted([slot='heading']) {
+      color: $text-purple;
+    }
+  }
+
+  :host(#{$c4d-prefix}-in-page-banner[color-scheme='layer']) {
+    background-color: $layer-01;
+  }
 }

packages/styles/scss/components/content-group-banner/_index.scss → packages/styles/scss/components/in-page-banner/_index.scss

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward 'content-group-banner';
-@use 'content-group-banner';
+@forward 'in-page-banner';
+@use 'in-page-banner';
 
-@include content-group-banner.content-group-banner;
+@include in-page-banner.in-page-banner;

packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss

@@ -101,8 +101,8 @@
     }
 
     ::slotted(#{$c4d-prefix}-leadspace-heading) {
-      margin-bottom: 0px;
-      padding-left: 0px;
+      margin-bottom: 0;
+      padding-left: 0;
       color: $text-primary;
 
       max-width: rem(640px);

packages/styles/scss/components/link-with-icon/_link-with-icon.scss

@@ -20,12 +20,8 @@
   :host(#{$c4d-prefix}-link-list-item),
   :host(#{$c4d-prefix}-link-list-item-cta),
   :host(#{$c4d-prefix}-text-cta) {
-    display: flex;
-
     span {
       vertical-align: middle;
-      align-self: center;
-      flex: 1;
     }
 
     svg,
@@ -46,6 +42,11 @@
       }
     }
 
+    // Re-define the ruleset so this wins over `.cds--link:visited`, etc.
+    .#{$prefix}--link--disabled {
+      color: $text-disabled;
+    }
+
     &.#{$prefix}--link-with-icon__icon-left,
     .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon.#{$prefix}--link-with-icon__icon-left {
       display: flex;
@@ -78,8 +79,7 @@
         text-underline-position: under;
       }
 
-      svg,
-      ::slotted(svg[slot='icon']) {
+      svg {
         display: inline;
         vertical-align: middle;
         white-space: nowrap;

packages/styles/scss/internal/callout/_tokens.scss → packages/styles/scss/globals/tokens/_color-tokens.scss

@@ -10,7 +10,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities/component-tokens';
 
-$callout-background-cyan: (
+$background-cyan: (
   fallback: $cyan-10,
   values: (
     (
@@ -32,7 +32,7 @@ $callout-background-cyan: (
   ),
 );
 
-$callout-color-cyan: (
+$text-cyan: (
   fallback: $cyan-90,
   values: (
     (
@@ -54,7 +54,7 @@ $callout-color-cyan: (
   ),
 );
 
-$callout-caption-cyan: (
+$caption-cyan: (
   fallback: $cyan-70,
   values: (
     (
@@ -76,7 +76,7 @@ $callout-caption-cyan: (
   ),
 );
 
-$callout-background-purple: (
+$background-purple: (
   fallback: $purple-10,
   values: (
     (
@@ -98,7 +98,7 @@ $callout-background-purple: (
   ),
 );
 
-$callout-color-purple: (
+$text-purple: (
   fallback: $purple-90,
   values: (
     (
@@ -120,7 +120,7 @@ $callout-color-purple: (
   ),
 );
 
-$callout-caption-purple: (
+$caption-purple: (
   fallback: $purple-70,
   values: (
     (
@@ -142,41 +142,26 @@ $callout-caption-purple: (
   ),
 );
 
-$callout-tokens: (
-  callout-background-cyan: $callout-background-cyan,
-  callout-color-cyan: $callout-color-cyan,
-  callout-caption-cyan: $callout-caption-cyan,
-  callout-background-purple: $callout-background-purple,
-  callout-color-purple: $callout-color-purple,
-  callout-caption-purple: $callout-caption-purple,
+$color-tokens: (
+  background-cyan: $background-cyan,
+  text-cyan: $text-cyan,
+  caption-cyan: $caption-cyan,
+  background-purple: $background-purple,
+  text-purple: $text-purple,
+  caption-purple: $caption-purple,
 );
 
-$callout-background-cyan: component-tokens.get-var(
-  $callout-background-cyan,
-  'callout-background-cyan'
-);
+$background-cyan: component-tokens.get-var($background-cyan, 'background-cyan');
 
-$callout-color-cyan: component-tokens.get-var(
-  $callout-color-cyan,
-  'callout-color-cyan'
-);
+$text-cyan: component-tokens.get-var($text-cyan, 'text-cyan');
 
-$callout-caption-cyan: component-tokens.get-var(
-  $callout-caption-cyan,
-  'callout-caption-cyan'
-);
+$caption-cyan: component-tokens.get-var($caption-cyan, 'caption-cyan');
 
-$callout-background-purple: component-tokens.get-var(
-  $callout-background-purple,
-  'callout-background-purple'
+$background-purple: component-tokens.get-var(
+  $background-purple,
+  'background-purple'
 );
 
-$callout-color-purple: component-tokens.get-var(
-  $callout-color-purple,
-  'callout-color-purple'
-);
+$text-purple: component-tokens.get-var($text-purple, 'text-purple');
 
-$callout-caption-purple: component-tokens.get-var(
-  $callout-caption-purple,
-  'callout-caption-purple'
-);
+$caption-purple: component-tokens.get-var($caption-purple, 'caption-purple');

packages/styles/scss/ibm-dotcom-styles.scss

@@ -39,6 +39,7 @@
 @use 'components/footer';
 @use 'components/horizontal-rule';
 @use 'components/image';
+@use 'components/in-page-banner';
 @use 'components/layout';
 @use 'components/leadspace';
 @use 'components/leadspace-block';
@@ -55,7 +56,7 @@
 @use 'components/pricing-table';
 @use 'components/quote';
 @use 'components/tableofcontents';
-@use 'components/universal-banner';
+@use 'components/global-banner';
 @use 'components/video-player';
 
 // Internal

packages/styles/scss/internal/callout/_callout.scss

@@ -15,7 +15,7 @@
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../../globals/utils/hang' as *;
-@use './tokens' as *;
+@use '../../globals/tokens/color-tokens' as *;
 
 @mixin callout {
   :host(#{$c4d-prefix}-callout) {
@@ -31,11 +31,11 @@
   }
 
   :host(#{$c4d-prefix}-callout[color-scheme='purple']) {
-    background-color: $callout-background-purple;
+    background-color: $background-purple;
   }
 
   :host(#{$c4d-prefix}-callout[color-scheme='cyan']) {
-    background-color: $callout-background-cyan;
+    background-color: $background-cyan;
   }
 
   :host(#{$c4d-prefix}-callout-text),
@@ -48,11 +48,11 @@
   }
 
   :host(#{$c4d-prefix}-callout-text[color-scheme='purple']) {
-    color: $callout-color-purple;
+    color: $text-purple;
   }
 
   :host(#{$c4d-prefix}-callout-text[color-scheme='cyan']) {
-    color: $callout-color-cyan;
+    color: $text-cyan;
   }
 
   :host(#{$c4d-prefix}-callout-caption[color-scheme='layer']),
@@ -65,11 +65,11 @@
   }
 
   :host(#{$c4d-prefix}-callout-caption[color-scheme='purple']) {
-    color: $callout-caption-purple;
+    color: $caption-purple;
   }
 
   :host(#{$c4d-prefix}-callout-caption[color-scheme='cyan']) {
-    color: $callout-caption-cyan;
+    color: $caption-cyan;
   }
 
   .#{$prefix}--callout__column {

packages/web-components/.storybook/container.scss

@@ -13,14 +13,11 @@
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/grid';
 
-@use '@carbon/ibmdotcom-styles/scss/internal/callout/tokens' as callout-tokens;
-@use '@carbon/ibmdotcom-styles/scss/components/card-in-card/tokens' as
-  card-in-card-tokens;
+@use '@carbon/ibmdotcom-styles/scss/globals/tokens/color-tokens' as color-tokens;
 @use '@carbon/styles/scss/components/button/tokens' as button-tokens;
 @use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
 
-@include add-component-tokens(callout-tokens.$callout-tokens);
-@include add-component-tokens(card-in-card-tokens.$card-in-card-tokens);
+@include add-component-tokens(color-tokens.$color-tokens);
 @include add-component-tokens(button-tokens.$button-tokens);
 @include add-component-tokens(tag-tokens.$tag-tokens);