feat(callout): update quote and media with new tokens (carbon-design-…

…system#10895) * feat(callout-quote): v2 updates * fix(callout): token updates * fix(Callout): add documentation * fix(callout): broken build * fix(callout): styles * fix(callout): format * fix(themes): add callout tokens cdn * fix(themes): format * fix(themes): missing import * fix(callout): docs * Update docs/dotcom-v2-migration.md Co-authored-by: andrew <[email protected]> * Update docs/dotcom-v2-migration.md Co-authored-by: andrew <[email protected]> * Update packages/styles/scss/components/callout-with-media/_callout-with-media.scss Co-authored-by: andrew <[email protected]> * fix(callout/hr): comment updates * fix(format): components * fix(callout): prefix updates * fix(callout): cleanup --------- Co-authored-by: andrew <[email protected]>
ariellalgilmore · Sep 12, 2023 · 813474d · 813474d
1 parent cd84259
commit 813474d
Show file tree

Hide file tree

Showing 34 changed files with 793 additions and 322 deletions.
diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md
@@ -18,6 +18,7 @@ For Carbon v11 migration guidance, see their
 | back-to-top               | View changes [here](#backtotop)        |
 | background-media          | No API changes.                        |
 | button                    | This component is deprecated in v2 in favor for Carbon's core Button |
+| callout-quote             | View changes [here](#callout-quote)          |
 | card                      | View changes [here] (#card)            |
 | card-group-card-link-item | This component is deprecated in v2 in favor for default card or with content-item |
 | card-link                 | This component is deprecated in v2 in favor for card (link variant) component |
@@ -35,11 +36,13 @@ For Carbon v11 migration guidance, see their
 | cta                       | View changes [here](#cta) |
 | cta-block                 | This component is deprecated in v2 in favor for content-section/block & content-item components |
 | cta-section               | This component is deprecated in v2 in favor for content-section/block & content-item components |
+| hr                        | View changes [here](#horizontal-rule)                      |
 | image                     | View changes [here](#image)            |
 | image-with-caption        | Replaced by `image`                    |
 | link-list-section         | This component is deprecated in v2 in favor for content-section/block & link-list end of section variant components |
 | 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.                        |
 | search-with-typeahead     | No API changes.                        |
 | tabs-extended-media       | This component is deprecated in v2 in favor for tabs-extended component |
 
@@ -48,6 +51,11 @@ 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'`
+- New callout style tokens
+
 ### Card
 
 - `<dds-card-footer>` has `icon-placement` property has been removed
@@ -62,6 +70,10 @@ All of the CTA-like features can now be used natively within Button, Card, Featu
 Each new component has a `cta-type` property that can change the icon and click functionality of the component. See the components' 
 documentations for more information.
 
+### Horizontal rule
+
+- New options for `contrast` property: `SUBTLE = 'subtle' (default)`, `STRONG = 'strong'` instead of `MEDIUM_CONTRAST = 'medium_contrast'`, `LOW_CONTRAST = 'low_contrast'`, `HIGH_CONTRAST = 'high_contrast'`
+
 ### Image
 
 - New `lightbox-contrast` property
diff --git a/packages/styles/scss/components/callout-quote/_callout-quote.scss b/packages/styles/scss/components/callout-quote/_callout-quote.scss
@@ -11,36 +11,18 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '../../globals/vars' as *;
 @use '../../globals/utils/hang' as *;
-@use '../../internal/callout/callout';
-@use '../quote/quote';
+@use '../../globals/utils/flex-grid' as *;
+@use '../../internal/callout/callout' as *;
+@use '../quote/quote' as *;
 
-@mixin callout-quote {
-  .#{$prefix}--callout-quote,
-  :host(#{$c4d-prefix}-callout-quote) {
-    .#{$prefix}--quote {
-      background-color: $background-inverse;
-      .#{$prefix}--link {
-        color: $link-inverse;
-        outline-color: $focus-inverse;
-        &:hover {
-          color: #a6c8ff;
-        }
-      }
-    }
-  }
-
-  .#{$prefix}--callout-quote .#{$prefix}--callout__container {
-    padding-left: $spacing-05;
-    padding-right: $spacing-05;
-
-    @include breakpoint(md) {
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
+@include callout;
+@include quote;
 
+@mixin callout-quote {
   :host(#{$c4d-prefix}-callout-quote) {
-    @extend .#{$prefix}--callout__container;
+    @extend :host(#{$c4d-prefix}-callout);
+    @extend :host(#{$c4d-prefix}-callout-text);
+    @include make-row;
 
     @include breakpoint(md) {
       @include hang;
@@ -53,4 +35,66 @@
       outline: transparent;
     }
   }
+
+  :host(#{$c4d-prefix}-callout-quote[color-scheme='inverse']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='inverse']);
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='inverse']);
+  }
+
+  :host(#{$c4d-prefix}-callout-quote[color-scheme='layer']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='layer']);
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='layer']);
+  }
+
+  :host(#{$c4d-prefix}-callout-quote[color-scheme='purple']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='purple']);
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='purple']);
+  }
+  :host(#{$c4d-prefix}-callout-quote[color-scheme='cyan']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='cyan']);
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='cyan']);
+  }
+
+  :host(#{$c4d-prefix}-callout-link-with-icon) {
+    @extend .#{$prefix}--link-with-icon;
+
+    display: inline-block;
+    a.#{$prefix}--link-with-icon.#{$prefix}--link.#{$prefix}--link-with-icon__icon-right {
+      color: $link-primary;
+      outline-color: $focus-inverse;
+
+      &:hover {
+        color: $link-primary-hover;
+      }
+
+      &:active {
+        color: $link-primary;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-callout-link-with-icon[color-scheme='inverse']) {
+    a.#{$prefix}--link-with-icon.#{$prefix}--link.#{$prefix}--link-with-icon__icon-right {
+      color: $link-inverse;
+
+      &:hover {
+        // @carbon/styles has no hover color for $link-inverse.
+        color: $link-inverse;
+      }
+
+      &:active {
+        color: $link-inverse;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-callout-quote) #{$c4d-prefix}-hr {
+    margin: $spacing-05;
+    @include breakpoint(md) {
+      margin: $spacing-05 0;
+    }
+    @include breakpoint(lg) {
+      margin: $spacing-05 $spacing-03;
+    }
+  }
 }
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
@@ -11,54 +11,120 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '../../globals/vars' as *;
-@use '../../internal/callout/callout';
+@use '../../internal/callout/callout' as *;
 @use '../../internal/content-block';
 @use '../../internal/content-item/content-item';
 @use '../image';
 @use '../content-block-simple/content-block-simple';
 
+@include callout;
+
 @mixin callout-with-media {
-  :host(#{$c4d-prefix}-callout-with-media),
-  .#{$prefix}--callout-with-media {
+  :host(#{$c4d-prefix}-callout-with-media) {
+    @extend :host(#{$c4d-prefix}-callout);
+
     display: block;
-    background-color: $background-inverse;
 
-    ::slotted([slot='heading']),
-    .#{$prefix}--content-block__heading {
+    ::slotted([slot='heading']) {
       margin-bottom: $spacing-07;
     }
 
     ::slotted([slot='copy']) {
       margin-bottom: $spacing-07;
-      color: $icon-inverse;
     }
   }
 
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='inverse']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='inverse']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='layer']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='layer']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='purple']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='purple']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='cyan']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='cyan']);
+  }
+
   :host(#{$c4d-prefix}-callout-with-media) ::slotted([slot='heading']),
-  .#{$prefix}--callout-with-media .#{$prefix}--content-block__heading,
   :host(#{$c4d-prefix}-callout-with-media-copy)
-    ::slotted(#{$c4d-prefix}-content-block-paragraph),
-  .#{$prefix}--callout-with-media .#{$prefix}--content-item__copy p,
+    ::slotted(#{$c4d-prefix}-content-block-paragraph) {
+    @extend :host(#{$c4d-prefix}-callout-text);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='inverse'])
+    ::slotted([slot='heading']),
+  :host(#{$c4d-prefix}-callout-with-media-copy[color-scheme='inverse'])
+    ::slotted(#{$c4d-prefix}-content-block-paragraph) {
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='inverse']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='layer'])
+    ::slotted([slot='heading']),
+  :host(#{$c4d-prefix}-callout-with-media-copy[color-scheme='layer'])
+    ::slotted(#{$c4d-prefix}-content-block-paragraph) {
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='layer']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='purple'])
+    ::slotted([slot='heading']),
+  :host(#{$c4d-prefix}-callout-with-media-copy[color-scheme='purple'])
+    ::slotted(#{$c4d-prefix}-content-block-paragraph) {
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='purple']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='cyan'])
+    ::slotted([slot='heading']),
+  :host(#{$c4d-prefix}-callout-with-media-copy[color-scheme='cyan'])
+    ::slotted(#{$c4d-prefix}-content-block-paragraph) {
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='cyan']);
+  }
+
   :host(#{$c4d-prefix}-callout-with-media-image) .#{$prefix}--image__caption,
   :host(#{$c4d-prefix}-callout-with-media-video)
-    ::slotted(#{$c4d-prefix}-video-player),
-  .#{$prefix}--callout-with-media .#{$prefix}--video-player__video-caption,
-  .#{$prefix}--callout-with-media .#{$prefix}--image__caption {
-    color: $icon-inverse;
+    ::slotted(#{$c4d-prefix}-video-player) {
+    @extend :host(#{$c4d-prefix}-callout-caption);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media-image[color-scheme='inverse'])
+    .#{$prefix}--image__caption,
+  :host(#{$c4d-prefix}-callout-with-media-video[color-scheme='inverse'])
+    ::slotted(#{$c4d-prefix}-video-player) {
+    @extend :host(#{$c4d-prefix}-callout-caption[color-scheme='inverse']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media-image[color-scheme='layer'])
+    .#{$prefix}--image__caption,
+  :host(#{$c4d-prefix}-callout-with-media-video[color-scheme='layer'])
+    ::slotted(#{$c4d-prefix}-video-player) {
+    @extend :host(#{$c4d-prefix}-callout-caption[color-scheme='layer']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media-image[color-scheme='purple'])
+    .#{$prefix}--image__caption,
+  :host(#{$c4d-prefix}-callout-with-media-video[color-scheme='purple'])
+    ::slotted(#{$c4d-prefix}-video-player) {
+    @extend :host(#{$c4d-prefix}-callout-caption[color-scheme='purple']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media-image[color-scheme='cyan'])
+    .#{$prefix}--image__caption,
+  :host(#{$c4d-prefix}-callout-with-media-video[color-scheme='cyan'])
+    ::slotted(#{$c4d-prefix}-video-player) {
+    @extend :host(#{$c4d-prefix}-callout-caption[color-scheme='cyan']);
   }
 
   :host(#{$c4d-prefix}-callout-with-media) ::slotted([slot='heading']),
-  .#{$prefix}--callout-with-media .#{$prefix}--content-block__heading,
-  :host(#{$c4d-prefix}-callout-with-media) ::slotted([slot='copy']),
-  .#{$prefix}--callout-with-media .#{$prefix}--callout-with-media-copy {
+  :host(#{$c4d-prefix}-callout-with-media) ::slotted([slot='copy']) {
     padding-right: $spacing-07;
     max-width: rem(640px);
     width: auto;
   }
 
-  .#{$prefix}--callout-with-media .#{$prefix}--callout__content {
-    padding-top: 0;
-  }
   :host(#{$c4d-prefix}-callout-with-media-video),
   .#{$prefix}--callout-with-media
     .#{$prefix}--callout__content