feat(in-page-banner): rename content-group-banner to in-page-banner (#…

…10999) * feat(in-page-banner): in-page-banner v2 * feat(in-page-banner): rename color tokens * feat(in-page-banner): rename codesandbox ex * feat(in-page-banner): add to migration docs * fix(in-page-banner): swap back bx prefix for cta-v1 * feat(in-page-banner): remove use of link-list-item-cta * fix(leadspace-with-search): remove stylelint error --------- Co-authored-by: kennylam <[email protected]>
carbon-design-system · Oct 11, 2023 · 5d178cf · 5d178cf
1 parent f45a4fe
commit 5d178cf
Show file tree

Hide file tree

Showing 51 changed files with 330 additions and 281 deletions.
diff --git a/docs/dotcom-v2-migration.md b/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                              |
@@ -70,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
@@ -82,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
 
@@ -128,4 +134,4 @@ information.
 
 ### Universal banner
 
-- `universal-banner` changed names to `global-banner`
+- `universal-banner` renamed to `global-banner`
diff --git a/packages/styles/carbon.yml b/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:

diff --git a/packages/styles/scss/components/feature-section/_feature-section.scss b/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 {

diff --git a/...t-group-banner/_content-group-banner.scss → ...nents/in-page-banner/_in-page-banner.scss b/...t-group-banner/_content-group-banner.scss → ...nents/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;
+  }
 }
diff --git a/...mponents/content-group-banner/_index.scss → ...css/components/in-page-banner/_index.scss b/...mponents/content-group-banner/_index.scss → ...css/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;
diff --git a/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss b/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);

diff --git a/...styles/scss/internal/callout/_tokens.scss → ...es/scss/globals/tokens/_color-tokens.scss b/...styles/scss/internal/callout/_tokens.scss → ...es/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');
diff --git a/packages/styles/scss/ibm-dotcom-styles.scss b/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

diff --git a/packages/styles/scss/internal/callout/_callout.scss b/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 {

diff --git a/packages/web-components/.storybook/container.scss b/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);
 

diff --git a/packages/web-components/carbon.yml b/packages/web-components/carbon.yml
@@ -186,15 +186,15 @@ assets:
         name: Storybook
         action: link
         url: https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-content-group
-  content-group-banner:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-group-banner
+  in-page-banner:
+    externalDocsUrl: https://www.ibm.com/standards/carbon/components/in-page-banner
     status: stable
     framework: web-component
     demoLinks:
       - type: storybook
         name: Storybook
         action: link
-        url: https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-content-group-banner
+        url: https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-in-page-banner
   content-group-cards:
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-group-cards
     status: stable

diff --git a/...nts-react/content-group-banner/.gitignore → ...omponents-react/in-page-banner/.gitignore b/...nts-react/content-group-banner/.gitignore → ...omponents-react/in-page-banner/.gitignore
diff --git a/...nts-react/content-group-banner/index.html → ...omponents-react/in-page-banner/index.html b/...nts-react/content-group-banner/index.html → ...omponents-react/in-page-banner/index.html
diff --git a/...s-react/content-group-banner/package.json → ...ponents-react/in-page-banner/package.json b/...s-react/content-group-banner/package.json → ...ponents-react/in-page-banner/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "ibmdotcom-web-components-react-content-group-banner-example",
+  "name": "ibmdotcom-web-components-react-in-page-banner-example",
   "version": "0.1.0",
   "private": true,
   "description": "Sample project for getting started with the Web Components from Carbon for IBM.com with React.",

diff --git a/.../content-group-banner/sandbox.config.json → ...-react/in-page-banner/sandbox.config.json b/.../content-group-banner/sandbox.config.json → ...-react/in-page-banner/sandbox.config.json
diff --git a/...-react/content-group-banner/src/index.css → ...onents-react/in-page-banner/src/index.css b/...-react/content-group-banner/src/index.css → ...onents-react/in-page-banner/src/index.css