chore(card): style updates, etc

carbon-design-system · Dec 29, 2020 · 3e39d21 · 3e39d21
1 parent ae3b722
commit 3e39d21
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 6 deletions.
diff --git a/packages/styles/scss/components/feature-card-block-medium/_feature-card-block-medium.scss b/packages/styles/scss/components/feature-card-block-medium/_feature-card-block-medium.scss
@@ -22,13 +22,18 @@
     }
 
     .#{$prefix}--feature-card-block-medium__heading,
-    ::slotted(#{$dds-prefix}-feature-card-block-medium-heading) {
+    ::slotted(#{$dds-prefix}-card-heading) {
       @include carbon--type-style('expressive-heading-04', true);
 
       display: block;
       margin-bottom: $carbon--spacing-07;
     }
 
+    ::slotted(#{$dds-prefix}-card-heading) {
+      width: auto;
+      max-width: none;
+    }
+
     &:focus {
       outline: none;
     }

diff --git a/packages/styles/scss/components/feature-card/_feature-card.scss b/packages/styles/scss/components/feature-card/_feature-card.scss
@@ -32,7 +32,8 @@
     outline-offset: 2px;
   }
 
-  .#{$prefix}--card__heading {
+  .#{$prefix}--card__heading,
+  ::slotted(#{$dds-prefix}-card-heading) {
     margin-bottom: $layout-03;
   }
 }

diff --git a/packages/web-components/src/components/card/card-heading.ts b/packages/web-components/src/components/card/card-heading.ts
@@ -25,6 +25,16 @@ class DDSCardHeading extends LitElement {
   @property({ reflect: true })
   slot = 'heading';
 
+  connectedCallback() {
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'heading');
+    }
+    if (!this.hasAttribute('aria-level')) {
+      this.setAttribute('aria-level', '3');
+    }
+    super.connectedCallback();
+  }
+
   render() {
     return html`
       <slot></slot>

diff --git a/packages/web-components/src/components/card/card.scss b/packages/web-components/src/components/card/card.scss
@@ -34,7 +34,7 @@
   .#{$prefix}--card__pictogram {
     display: flex;
 
-    .#{$prefix}--card__heading {
+    ::slotted(#{$dds-prefix}-card-heading) {
       margin-bottom: 0;
       flex: 1;
       display: flex;
@@ -44,7 +44,7 @@
 
   &[pictogram-placement='bottom'] {
     .#{$prefix}--card__pictogram {
-      .#{$prefix}--card__heading {
+      ::slotted(#{$dds-prefix}-card-heading) {
         align-items: flex-start;
       }
     }

diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.ts b/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.ts
@@ -183,8 +183,8 @@ const StoryContent = () => html`
                   srcset="https://fpoimg.com/600x600?text=1:1&amp;bg_color=ee5396&amp;text_color=161616"
                 >
               </dds-image>
-              <span slot="eyebrow">scelerisque purus</span>
-              <span slot="heading">Elementum nibh tellus molestie nunc?</span>
+              <dds-card-eyebrow>scelerisque purus</dds-card-eyebrow>
+              <dds-card-heading>Elementum nibh tellus molestie nunc?</dds-card-heading>
               <p>Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbu tristique.</p>
               <dds-feature-card-block-large-footer>
                 ${ArrowRight20({ slot: 'icon' })}