feat(callout-with-media): v2 styles updates

ariellalgilmore · Sep 14, 2023 · d6ea43d · d6ea43d
1 parent f46db89
commit d6ea43d
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 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-with-media        | View changes [here](#callout-with-media)          |
 | 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 |
@@ -51,6 +52,11 @@ For Carbon v11 migration guidance, see their
 
 - 
 
+### Callout with media
+
+- New options for `color-scheme` property: `REGULAR = 'regular'`, `INVERSE = 'inverse'` `LAYER = 'layer'`, `CYAN = 'cyan'`, `PURPLE = 'purple'`
+- New callout style tokens
+
 ### Callout quote
 
 - New options for `color-scheme` property: `REGULAR = 'regular'`, `INVERSE = 'inverse'` `LAYER = 'layer'`, `CYAN = 'cyan'`, `PURPLE = 'purple'`

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
@@ -10,6 +10,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities' as *;
 @use '../../globals/vars' as *;
 @use '../../internal/callout/callout' as *;
 @use '../../internal/content-block';
@@ -23,14 +24,20 @@
   :host(#{$c4d-prefix}-callout-with-media) {
     @extend :host(#{$c4d-prefix}-callout);
 
-    display: block;
+    display: flex;
 
     ::slotted([slot='heading']) {
       margin-bottom: $spacing-07;
+      margin-left: 0;
     }
 
     ::slotted([slot='copy']) {
-      margin-bottom: $spacing-07;
+      margin-bottom: $spacing-05;
+      margin-left: 0;
+    }
+
+    ::slotted([slot='media']) {
+      margin: 0 0 $spacing-07;
     }
   }
 

diff --git a/packages/styles/scss/internal/callout/_callout.scss b/packages/styles/scss/internal/callout/_callout.scss
@@ -76,6 +76,8 @@
     @include make-col-ready;
   }
   .#{$prefix}--callout__content {
+    box-sizing: border-box;
+
     @include breakpoint(sm) {
       padding-top: $layout-03;
     }

diff --git a/...eb-components/src/components/callout-with-media/__stories__/callout-with-media.stories.ts b/...eb-components/src/components/callout-with-media/__stories__/callout-with-media.stories.ts
@@ -8,8 +8,6 @@
  */
 
 import '../index';
-import '../callout-with-media-image';
-import '../callout-with-media-video';
 import { html } from 'lit';
 import { select } from '@storybook/addon-knobs';
 import { CONTENT_BLOCK_COPY_SIZE } from '../../content-block/content-block-copy';
@@ -86,7 +84,7 @@ export default {
         colorScheme: select(
           'Color scheme:',
           colorSchemeTypes,
-          COLOR_SCHEME.REGULAR
+          COLOR_SCHEME.INVERSE
         ),
       }),
     },