From 19ab4fed74f2b6350d2a9e60cf301c70ffd1349f Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Thu, 25 Apr 2024 16:43:08 -0700
Subject: [PATCH] feat(card): update to sb8

---
 .../styles/scss/components/card/_card.scss    | 318 ++++----
 .../card/__stories__/{README.mdx => card.mdx} |   4 +-
 .../card/__stories__/card.stories.ts          | 709 ++++++++----------
 3 files changed, 494 insertions(+), 537 deletions(-)
 rename packages/web-components/src/components/card/__stories__/{README.mdx => card.mdx} (98%)

diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
index 88ed3da3f0c..65e1bbd548f 100644
--- a/packages/styles/scss/components/card/_card.scss
+++ b/packages/styles/scss/components/card/_card.scss
@@ -95,27 +95,6 @@
       }
     }
 
-    &:not([disabled]) .#{$prefix}--card.#{$prefix}--tile {
-      padding: 0;
-      transition: $duration-moderate-01 motion(standard, productive);
-
-      &:hover {
-        #{$c4d-prefix}-image,
-        ::slotted(#{$c4d-prefix}-image),
-        ::slotted(#{$c4d-prefix}-card-cta-image) {
-          &::after {
-            position: absolute;
-            background: $overlay;
-            block-size: 100%;
-            content: '';
-            inline-size: 100%;
-            inset-block-start: 0;
-            opacity: 16%;
-          }
-        }
-      }
-    }
-
     .#{$prefix}--card__wrapper {
       display: flex;
       flex: 1;
@@ -163,6 +142,34 @@
     }
   }
 
+  :host(#{$c4d-prefix}-card:not([disabled])),
+  :host(#{$c4d-prefix}-card-cta:not([disabled])),
+  :host(#{$c4d-prefix}-card-in-card:not([disabled])),
+  :host(#{$c4d-prefix}-card-group-item:not([disabled])),
+  :host(#{$c4d-prefix}-content-group-cards-item:not([disabled])) {
+
+    &:not([disabled]) .#{$prefix}--card.#{$prefix}--tile {
+      padding: 0;
+      transition: $duration-moderate-01 motion(standard, productive);
+  
+      &:hover {
+        #{$c4d-prefix}-image,
+        ::slotted(#{$c4d-prefix}-image),
+        ::slotted(#{$c4d-prefix}-card-cta-image) {
+          &::after {
+            position: absolute;
+            background: $overlay;
+            block-size: 100%;
+            content: '';
+            inline-size: 100%;
+            inset-block-start: 0;
+            opacity: 16%;
+          }
+        }
+      }
+    }
+  }
+
   // Card with pictogram placement style
   :host(#{$c4d-prefix}-card-group-item),
   :host(#{$c4d-prefix}-card-in-card),
@@ -185,7 +192,44 @@
       }
     }
 
-    &[pictogram] .#{$prefix}--card {
+    ::slotted(svg[slot='pictogram']) {
+      fill: currentColor;
+      @include breakpoint(md) {
+        margin-inline-start: 0;
+      }
+      @include breakpoint(sm) {
+        margin-inline-start: $spacing-05;
+      }
+    }
+
+    .#{$prefix}--card__copy {
+      display: flex;
+      flex-direction: column;
+      gap: $spacing-05;
+    }
+
+    ::slotted(div) {
+      /* stylelint-disable declaration-no-important */
+      // need the !important to prevent CSS reset styles from overwritting margin for tags
+      margin-inline-start: -$spacing-02 !important;
+    }
+  }
+
+  :host(#{$c4d-prefix}-card-group-item[color-scheme='inverse']),
+  :host(#{$c4d-prefix}-card-in-card[color-scheme='inverse']),
+  :host(#{$c4d-prefix}-card-cta[color-scheme='inverse']),
+  :host(#{$c4d-prefix}-card[color-scheme='inverse']) {
+    .#{$prefix}--card svg,
+    ::slotted(svg[slot='pictogram']) {
+      color: $link-inverse;
+    }
+  }
+
+  :host(#{$c4d-prefix}-card-group-item[pictogram]),
+  :host(#{$c4d-prefix}-card-in-card[pictogram]),
+  :host(#{$c4d-prefix}-card-cta[pictogram]),
+  :host(#{$c4d-prefix}-card[pictogram]) {
+    .#{$prefix}--card {
       ::slotted(#{$c4d-prefix}-card-heading) {
         padding-block-start: 0;
       }
@@ -213,67 +257,46 @@
         inset-inline-end: $spacing-05;
       }
     }
+  }
 
-    &[pictogram] {
-      &[pictogram-placement='top'] .#{$prefix}--card {
-        ::slotted(#{$c4d-prefix}-card-heading) {
-          align-items: flex-end;
-          margin-block: auto 0;
-        }
-
-        .#{$prefix}--card__copy {
-          margin-block-start: $spacing-07;
-        }
-
-        ::slotted(svg[slot='pictogram']) {
-          margin-block-end: $spacing-07;
-        }
+  :host(#{$c4d-prefix}-card-group-item[pictogram][pictogram-placement='top']),
+  :host(#{$c4d-prefix}-card-in-card[pictogram][pictogram-placement='top']),
+  :host(#{$c4d-prefix}-card-cta[pictogram][pictogram-placement='top']),
+  :host(#{$c4d-prefix}-card[pictogram][pictogram-placement='top']) {
+    .#{$prefix}--card {
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        align-items: flex-end;
+        margin-block: auto 0;
       }
 
-      &[pictogram-placement='bottom'] .#{$prefix}--card {
-        ::slotted(#{$c4d-prefix}-card-heading) {
-          align-items: flex-start;
-        }
-
-        .#{$prefix}--card__copy {
-          margin-block-end: $spacing-07;
-        }
+      .#{$prefix}--card__copy {
+        margin-block-start: $spacing-07;
+      }
 
-        ::slotted(svg[slot='pictogram']) {
-          align-items: flex-end;
-          margin-block-start: auto;
-        }
+      ::slotted(svg[slot='pictogram']) {
+        margin-block-end: $spacing-07;
       }
     }
+  }
 
-    ::slotted(svg[slot='pictogram']) {
-      fill: currentColor;
-      @include breakpoint(md) {
-        margin-inline-start: 0;
+  :host(#{$c4d-prefix}-card-group-item[pictogram][pictogram-placement='bottom']),
+  :host(#{$c4d-prefix}-card-in-card[pictogram][pictogram-placement='bottom']),
+  :host(#{$c4d-prefix}-card-cta[pictogram][pictogram-placement='bottom']),
+  :host(#{$c4d-prefix}-card[pictogram][pictogram-placement='bottom']) {
+    .#{$prefix}--card {
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        align-items: flex-start;
       }
-      @include breakpoint(sm) {
-        margin-inline-start: $spacing-05;
+
+      .#{$prefix}--card__copy {
+        margin-block-end: $spacing-07;
       }
-    }
 
-    &[color-scheme='inverse'] {
-      .#{$prefix}--card svg,
       ::slotted(svg[slot='pictogram']) {
-        color: $link-inverse;
+        align-items: flex-end;
+        margin-block-start: auto;
       }
     }
-
-    .#{$prefix}--card__copy {
-      display: flex;
-      flex-direction: column;
-      gap: $spacing-05;
-    }
-
-    ::slotted(div) {
-      /* stylelint-disable declaration-no-important */
-      // need the !important to prevent CSS reset styles from overwritting margin for tags
-      margin-inline-start: -$spacing-02 !important;
-    }
   }
 
   :host(#{$c4d-prefix}-card[aspect-ratio='1:1']) .#{$prefix}--card__wrapper {
@@ -305,94 +328,95 @@
   }
 
   // static card
+  :host(#{$c4d-prefix}-card:not([href])),
+  :host(#{$c4d-prefix}-card-group-item:not([href])) {
+    .#{$prefix}--card .#{$prefix}--card__copy {
+      margin-block-end: $spacing-01;
+    }
 
-  :host(#{$c4d-prefix}-card),
-  :host(#{$c4d-prefix}-card-group-item) {
-    &:not([href]) {
-      .#{$prefix}--card .#{$prefix}--card__copy {
-        margin-block-end: $spacing-01;
+    .#{$prefix}--card.#{$prefix}--tile ::slotted(#{$c4d-prefix}-image) {
+      &::after {
+        display: none;
       }
+    }
 
-      .#{$prefix}--card.#{$prefix}--tile ::slotted(#{$c4d-prefix}-image) {
-        &::after {
-          display: none;
-        }
-      }
+    &:focus-within ::slotted(#{$c4d-prefix}-image) {
+      z-index: 0;
+    }
 
-      &:focus-within ::slotted(#{$c4d-prefix}-image) {
-        z-index: 0;
-      }
+    ::slotted(#{$c4d-prefix}-card-heading) {
+      margin-block-end: auto;
+      padding-block-end: $spacing-10;
+    }
 
-      ::slotted(#{$c4d-prefix}-card-heading) {
-        margin-block-end: auto;
-        padding-block-end: $spacing-10;
+    ::slotted(#{$c4d-prefix}-card-footer) {
+      display: inline-flex;
+      margin-block-start: $spacing-07;
+
+      &::after {
+        position: relative;
       }
+    }
+  }
 
-      ::slotted(#{$c4d-prefix}-card-footer) {
-        display: inline-flex;
-        margin-block-start: $spacing-07;
 
-        &::after {
-          position: relative;
-        }
+  :host(#{$c4d-prefix}-card[color-scheme='light']),
+  :host(#{$c4d-prefix}-card-group-item[color-scheme='light']) {
+    &,
+    &:hover {
+      .#{$prefix}--card__wrapper {
+        background-color: $layer-02;
+        transition: $duration-moderate-01 motion(standard, productive);
       }
     }
+  }
 
-    &[color-scheme='light'] {
-      &,
-      &:hover {
-        .#{$prefix}--card__wrapper {
-          background-color: $layer-02;
-          transition: $duration-moderate-01 motion(standard, productive);
-        }
+  :host(#{$c4d-prefix}-card[color-scheme='light'][href]),
+  :host(#{$c4d-prefix}-card-group-item[color-scheme='light'][href]) {
+    :hover {
+      .#{$prefix}--card__wrapper {
+        background-color: $background-hover;
       }
+    }
 
-      &[href] {
-        :hover {
-          .#{$prefix}--card__wrapper {
-            background-color: $background-hover;
-          }
-        }
-
-        &:active,
-        a:active {
-          outline: none;
-        }
-      }
+    &:active,
+    a:active {
+      outline: none;
     }
+  }
 
-    // Logo card
-    &[logo] {
-      .#{$prefix}--card {
-        background-color: $layer-02;
-      }
+  :host(#{$c4d-prefix}-card[logo]),
+  :host(#{$c4d-prefix}-card-group-item[logo]) {
+    .#{$prefix}--card {
+      background-color: $layer-02;
+    }
 
-      .#{$prefix}--card__copy {
-        margin-block-end: $spacing-05;
-      }
+    .#{$prefix}--card__copy {
+      margin-block-end: $spacing-05;
+    }
 
-      &:hover {
-        border-color: $toggle-off;
+    &:hover {
+      border-color: $toggle-off;
 
-        .#{$prefix}--card__wrapper {
-          background-color: $layer-02;
-        }
+      .#{$prefix}--card__wrapper {
+        background-color: $layer-02;
       }
+    }
 
-      &:active {
-        border-color: $border-inverse;
-      }
+    &:active {
+      border-color: $border-inverse;
+    }
 
-      ::slotted(#{$c4d-prefix}-card-footer) {
-        block-size: 0;
-      }
+    ::slotted(#{$c4d-prefix}-card-footer) {
+      block-size: 0;
     }
+  }
 
-    &[href][logo] {
-      &:hover {
-        .#{$prefix}--card__wrapper {
-          background-color: $layer-02;
-        }
+  :host(#{$c4d-prefix}-card[href][logo]),
+  :host(#{$c4d-prefix}-card-group-item[href][logo]) {
+    &:hover {
+      .#{$prefix}--card__wrapper {
+        background-color: $layer-02;
       }
     }
   }
@@ -510,12 +534,14 @@
         color: $link-primary-hover;
       }
     }
+  }
 
-    &[color-scheme='inverse']
-      .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon:not(
-        .#{$prefix}--link--disabled
-      ) {
-      color: $link-inverse;
+  :host(#{$c4d-prefix}-card-footer[color-scheme='inverse']),
+  :host(#{$c4d-prefix}-card-cta-footer[color-scheme='inverse']) {
+    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon:not(
+      .#{$prefix}--link--disabled
+    ) {
+    color: $link-inverse;
     }
   }
 
@@ -548,8 +574,8 @@
     }
   }
 
-  :host(#{$c4d-prefix}-card)[color-scheme='inverse']:not([disabled]),
-  :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse']:not([disabled])
+  :host(#{$c4d-prefix}-card[color-scheme='inverse']:not([disabled])),
+  :host(#{$c4d-prefix}-card-group-item[color-scheme='inverse']:not([disabled]))
     .#{$prefix}--card {
     .#{$prefix}--tile {
       border-color: $background-inverse;
@@ -614,9 +640,9 @@
     margin-block-end: 0;
   }
 
-  :host(#{$c4d-prefix}-card)[color-scheme='inverse'],
-  :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse'],
-  :host(#{$c4d-prefix}-feature-section-card-link)[color-scheme='inverse'],
+  :host(#{$c4d-prefix}-card[color-scheme='inverse']),
+  :host(#{$c4d-prefix}-card-group-item[color-scheme='inverse']),
+  :host(#{$c4d-prefix}-feature-section-card-link[color-scheme='inverse']),
   .#{$prefix}--card-group__card {
     ::slotted(#{$c4d-prefix}-card-eyebrow),
     ::slotted(#{$c4d-prefix}-card-heading),
@@ -688,4 +714,4 @@
   :host(#{$c4d-prefix}-card-footer[href])::after {
     position: relative;
   }
-}
+}
\ No newline at end of file
diff --git a/packages/web-components/src/components/card/__stories__/README.mdx b/packages/web-components/src/components/card/__stories__/card.mdx
similarity index 98%
rename from packages/web-components/src/components/card/__stories__/README.mdx
rename to packages/web-components/src/components/card/__stories__/card.mdx
index 83c640e7f93..6b840fc1630 100644
--- a/packages/web-components/src/components/card/__stories__/README.mdx
+++ b/packages/web-components/src/components/card/__stories__/card.mdx
@@ -1,4 +1,4 @@
-import { ArgsTable, Markdown, Meta } from '@storybook/blocks';
+import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
 import contributing from '../../../../../../docs/contributing-license.md?raw';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 import * as CardStories from './card.stories';
@@ -247,7 +247,7 @@ General note:
 
 ## Props
 
-<ArgsTable of="c4d-card" />
+<ArgTypes of="c4d-card" />
 
 ## Stable selectors
 
diff --git a/packages/web-components/src/components/card/__stories__/card.stories.ts b/packages/web-components/src/components/card/__stories__/card.stories.ts
index 17310b76a0d..d3eeb3f8c8b 100644
--- a/packages/web-components/src/components/card/__stories__/card.stories.ts
+++ b/packages/web-components/src/components/card/__stories__/card.stories.ts
@@ -7,23 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// import '../../image/image';
 import '@carbon/web-components/es/components/tag/tag.js';
 import '../index';
-// import { boolean, select } from '@storybook/addon-knobs';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import imgXlg4x3 from '../../../../.storybook/storybook-images/assets/1312/fpo--4x3--1312x984--003.jpg';
 import logoMicrosoft2x1 from '../../../../.storybook/storybook-images/assets/logos/logo-microsoft--2x1.png';
 import { PICTOGRAM_PLACEMENT } from '../defs';
-import readme from './README.mdx';
-import textNullable from '../../../../.storybook/knob-text-nullable';
 
 import { CTA_TYPE } from '../../cta/defs';
 
 import {
-  hrefsForType,
   knobNamesForType,
   typeOptions,
   types,
@@ -45,6 +40,8 @@ const defaultArgs = {
   disabled: false,
   eyebrow: 'Industry',
   heading: 'Aerospace and defence',
+  href: "https://example.com",
+  image: false,
   copy: '',
   alt: 'Image alt text',
   defaultSrc: imgXlg4x3,
@@ -76,27 +73,19 @@ const controls = {
     control: 'text',
     description: 'Eyebrow',
   },
+  image: {
+    control: 'boolean',
+    description: 'Add image'
+  },
   heading: {
     control: 'text',
     description: 'Heading',
     if: { arg: 'ctaType', neq: `${CTA_TYPE.VIDEO}` },
   },
-  copy: {
-    control: 'text',
-    description: 'Body copy',
-  },
-  alt: {
-    control: 'text',
-    description: 'Image alt text',
-  },
   tagGroup: {
     control: 'boolean',
     description: 'Add tags',
   },
-  href: {
-    control: 'text',
-    description: knobNamesForType[CTA_TYPE.REGULAR],
-  },
   cardStyles: {
     control: 'select',
     description: 'Card style',
@@ -181,377 +170,317 @@ const pictogramPlacements = {
   [PICTOGRAM_PLACEMENT.BOTTOM]: PICTOGRAM_PLACEMENT.BOTTOM,
 };
 
-// Default.story = {
-//   parameters: {
-//     ...readme.parameters,
-//     knobs: {
-//       Card: () => {
-//         const aspectRatio = select(
-//           'Aspect ratio (aspect-ratio)',
-//           ['1:1', '2:1', '3:2', '4:3', '16:9', '1:1'],
-//           '2:1'
-//         );
-//         const ctaType = select(
-//           'CTA type (cta-type)',
-//           typeOptions,
-//           types[CTA_TYPE.LOCAL]
-//         );
-
-//         const heading =
-//           ctaType === CTA_TYPE.VIDEO
-//             ? undefined
-//             : textNullable('Heading:', 'Aerospace and defence');
-
-//         const customVideoTitle =
-//           ctaType === CTA_TYPE.VIDEO
-//             ? textNullable('Custom video title', 'Custom video title')
-//             : null;
-
-//         const image =
-//           ctaType === CTA_TYPE.VIDEO ? null : boolean('Add image:', false);
-//         const noPoster =
-//           ctaType === CTA_TYPE.VIDEO ? boolean('No poster:', false) : null;
-
-//         return {
-//           disabled: boolean('Disabled:', false),
-//           aspectRatio,
-//           customVideoTitle,
-//           ctaType,
-//           image,
-//           noPoster,
-//           eyebrow: textNullable('Eyebrow:', 'Industry'),
-//           heading,
-//           copy: textNullable('Body copy:', ''),
-//           alt: 'Image alt text',
-//           defaultSrc: imgXlg4x3,
-//           tagGroup: boolean('Add tags:', false),
-//           href: textNullable(
-//             knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
-//             hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
-//           ),
-//           cardStyles: select('Card style:', ['Inverse card', 'none'], 'none'),
-//         };
-//       },
-//     },
-//     propsSet: {
-//       default: {
-//         Card: {
-//           image: false,
-//           eyebrow: 'Industry',
-//           heading: 'Aerospace and defence',
-//           copy: '',
-//           alt: 'Image alt text',
-//           defaultSrc: imgXlg4x3,
-//           tagGroup: false,
-//           href: 'https://example.com',
-//           cardStyles: 'none',
-//         },
-//       },
-//     },
-//   },
-// };
-
-// export const Pictogram = (args) => {
-//   const { href, heading, copy, tagGroup, pictogramPlacement, cardStyles } =
-//     args?.PictogramCard ?? {};
-
-//   return html`
-//     <c4d-card
-//       pictogram-placement="${pictogramPlacement}"
-//       href=${ifDefined(href || undefined)}
-//       color-scheme=${cardStyles === 'Inverse card' ? 'inverse' : ''}>
-//       <c4d-card-heading>${heading}</c4d-card-heading>
-//       ${copy ? unsafeHTML(`<p>${copy}</p>`) : ``}
-//       ${tagGroup ? html` ${tagGroupContent} ` : ``}
-//       <svg
-//         slot="pictogram"
-//         focusable="false"
-//         preserveAspectRatio="xMidYMid meet"
-//         xmlns="http://www.w3.org/2000/svg"
-//         data-autoid="c4d--card__pictogram"
-//         aria-label="Pictogram description"
-//         width="48"
-//         height="48"
-//         viewBox="0 0 32 32"
-//         role="img"
-//         class="cds--card__pictogram">
-//         <path
-//           id="desktop_1_"
-//           d="M23,29.36H9v-0.72h6.64v-4.28H3c-1.301,0-2.36-1.059-2.36-2.36V5c0-1.301,1.059-2.36,2.36-2.36h26
-//           c1.302,0,2.36,1.059,2.36,2.36v17c0,1.302-1.059,2.36-2.36,2.36H16.36v4.279H23V29.36z M1.36,19.36V22c0,
-//           0.904,0.736,1.64,1.64,1.64h26c0.904,0,1.64-0.735,1.64-1.64v-2.64H1.36z M1.36,
-//           18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5V18.64z" />
-//       </svg>
-//     </c4d-card>
-//   `;
-// };
-
-// Pictogram.story = {
-//   parameters: {
-//     ...readme.parameters,
-//     knobs: {
-//       PictogramCard: () => {
-//         const pictogramPlacement = select(
-//           'Pictogram position:',
-//           pictogramPlacements,
-//           pictogramPlacements.bottom,
-//           'pictogram'
-//         );
-//         const copy = textNullable(
-//           'Body copy:',
-//           `Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-//            Ut enim ad minim veniam, quis nostrud exercitation.`,
-//           'pictogram'
-//         );
-//         return {
-//           pictogramPlacement,
-//           heading: textNullable(
-//             'Heading:',
-//             'Aerospace and defence',
-//             'pictogram'
-//           ),
-//           copy,
-//           href: 'https://example.com',
-//           cardStyles: select(
-//             'Card style:',
-//             ['Inverse card', 'none'],
-//             'none',
-//             'pictogram'
-//           ),
-//         };
-//       },
-//     },
-//     propsSet: {
-//       default: {
-//         PictogramCard: {
-//           pictogramPlacement: 'top',
-//           heading: 'Aerospace and defence',
-//           copy: `Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-//            Ut enim ad minim veniam, quis nostrud exercitation.`,
-//           href: 'https://example.com',
-//           cardStyles: 'none',
-//         },
-//       },
-//     },
-//   },
-// };
-
-// export const Static = (args) => {
-//   const {
-//     image,
-//     alt,
-//     defaultSrc,
-//     eyebrow,
-//     heading,
-//     copy,
-//     tagGroup,
-//     cta,
-//     ctaCopy,
-//   } = args?.Card ?? {};
-
-//   return html`
-//     <c4d-card>
-//       ${image
-//         ? html`
-//             <c4d-image
-//               slot="image"
-//               alt="${ifDefined(alt)}"
-//               default-src="${ifDefined(defaultSrc)}"></c4d-image>
-//           `
-//         : ``}
-//       ${eyebrow ? html` <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow> ` : ``}
-//       <c4d-card-heading>${heading}</c4d-card-heading>
-//       ${copy ? unsafeHTML(`<p>${copy}</p>`) : ``}
-//       ${tagGroup ? html` ${tagGroupContent} ` : ``}
-//       ${cta
-//         ? html`
-//             <c4d-card-footer href="https://www.example.com">
-//               ${ctaCopy}${ArrowRight20({ slot: 'icon' })}
-//             </c4d-card-footer>
-//           `
-//         : ``}
-//     </c4d-card>
-//   `;
-// };
-
-// Static.story = {
-//   parameters: {
-//     ...readme.parameters,
-//     knobs: {
-//       Card: () => {
-//         const image = boolean('Add image:', false, 'static');
-//         const eyebrow = textNullable('Eyebrow:', 'SPSS Statistics', 'static');
-//         const heading = textNullable('Heading:', 'Free trial', 'static');
-//         const copy = textNullable(
-//           'Body copy:',
-//           'Enjoy full SPSS Statistics capabilities including all add-ons. ' +
-//             'All trial registrants are restricted to one free trial per computer per user.',
-//           'static'
-//         );
-//         const tagGroup = boolean('Add tags:', false, 'static');
-//         const cta = boolean('Add CTA:', false, 'static');
-//         const ctaCopy = cta
-//           ? textNullable('CTA copy:', 'Sign up for the trial', 'static')
-//           : '';
-//         return {
-//           alt: 'Image alt text',
-//           defaultSrc: imgXlg4x3,
-//           image,
-//           eyebrow,
-//           heading,
-//           copy,
-//           tagGroup,
-//           cta,
-//           ctaCopy,
-//         };
-//       },
-//     },
-//     propsSet: {
-//       default: {
-//         Card: {
-//           image: false,
-//           eyebrow: 'Industry',
-//           heading: 'Aerospace and defence',
-//           copy: '',
-//           alt: 'Image alt text',
-//           defaultSrc: imgXlg4x3,
-//           tagGroup: false,
-//           cta: false,
-//           ctaCopy: 'Sign up for the trial',
-//         },
-//       },
-//     },
-//   },
-// };
-
-// export const Link = (args) => {
-//   const { disabled, ctaType, href, heading, copy, customVideoTitle } =
-//     args?.Card ?? {};
-
-//   let videoCopy;
-
-//   if (ctaType === CTA_TYPE.VIDEO) {
-//     const card = document.querySelector('c4d-card') as any;
-//     const duration = card?.videoTitle?.match(/\((.*)\)/)?.pop();
-
-//     if (!customVideoTitle) {
-//       videoCopy = card?.videoTitle;
-//     } else {
-//       videoCopy = customVideoTitle;
-//     }
-
-//     card.querySelector('c4d-card-footer')!.innerHTML = duration ?? '';
-//   }
-
-//   return html`
-//     <c4d-video-cta-container>
-//       <c4d-card
-//         ?disabled=${disabled}
-//         link
-//         no-poster=${ctaType === CTA_TYPE.VIDEO}
-//         cta-type=${ctaType}
-//         href=${ifDefined(href || undefined)}>
-//         <c4d-card-heading>${videoCopy ?? heading}</c4d-card-heading>
-//         ${copy ? unsafeHTML(`<p>${copy}</p>`) : ``}
-//         <c4d-card-footer></c4d-card-footer>
-//       </c4d-card>
-//     </c4d-video-cta-container>
-//   `;
-// };
-
-// Link.story = {
-//   parameters: {
-//     ...readme.parameters,
-//     knobs: {
-//       Card: () => {
-//         const ctaType = select(
-//           'CTA type (cta-type)',
-//           typeOptions,
-//           types[CTA_TYPE.LOCAL]
-//         );
-
-//         const heading =
-//           ctaType === CTA_TYPE.VIDEO
-//             ? undefined
-//             : textNullable('Heading:', 'Aerospace and defence');
-
-//         const customVideoTitle =
-//           ctaType === CTA_TYPE.VIDEO
-//             ? textNullable('Custom video title', 'Custom video title')
-//             : null;
-
-//         return {
-//           disabled: boolean('Disabled: ', false),
-//           customVideoTitle,
-//           ctaType,
-//           heading,
-//           copy: textNullable('Body copy:', ''),
-//           alt: 'Image alt text',
-//           defaultSrc: imgXlg4x3,
-//           href: textNullable(
-//             knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
-//             hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
-//           ),
-//         };
-//       },
-//     },
-//   },
-// };
-
-// export const Logo = (args) => {
-//   const { alt, defaultSrc, eyebrow, heading, href, copy, tagGroup } =
-//     args?.Card ?? {};
-
-//   return html`
-//     <c4d-card logo href=${ifDefined(href || undefined)}>
-//       <c4d-image-logo
-//         slot="image"
-//         alt="${ifDefined(alt)}"
-//         default-src="${ifDefined(defaultSrc)}"></c4d-image-logo>
-//       ${eyebrow ? html` <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow> ` : ``}
-//       ${heading ? html` <c4d-card-heading>${heading}</c4d-card-heading> ` : ``}
-//       ${copy ? unsafeHTML(`<p>${copy}</p>`) : ``}
-//       ${tagGroup ? html` ${tagGroupContent} ` : ``}
-
-//       <c4d-card-footer></c4d-card-footer>
-//     </c4d-card>
-//   `;
-// };
-
-// Logo.story = {
-//   parameters: {
-//     ...readme.parameters,
-//     knobs: {
-//       Card: () => ({
-//         alt: 'Image alt text',
-//         defaultSrc: logoMicrosoft2x1,
-//         tagGroup: boolean('Add tags', true, 'logo'),
-//         eyebrow: textNullable('Card Eyebrow:', 'Microsoft', 'logo'),
-//         heading: textNullable('Card Heading (optional):', '', 'logo'),
-//         copy: textNullable(
-//           'Card body copy:',
-//           'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-//           'logo'
-//         ),
-//         href: 'https://example.com',
-//       }),
-//     },
-//     propsSet: {
-//       default: {
-//         Card: {
-//           image: false,
-//           eyebrow: 'Microsoft',
-//           heading: '',
-//           copy: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-//           alt: 'Image alt text',
-//           defaultSrc: imgXlg4x3,
-//           tagGroup: false,
-//           href: 'https://example.com',
-//         },
-//       },
-//     },
-//   },
-// };
+const pictogramDefaultArgs = {
+  copy: `Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation.`,
+  pictogramPlacement: pictogramPlacements.bottom,
+  heading: 'Aerospace and defence',
+  href: 'https://example.com',
+  cardStyles: 'none'
+};
+
+const pictogramControls = {
+  copy: {
+    control: 'text',
+    description: 'Body copy',
+  },
+  pictogramPlacement: {
+    control: 'select',
+    description: 'Pictogram position',
+    options: pictogramPlacements,
+  },
+  heading: {
+    control: 'text',
+    description: 'Heading',
+  },
+  href: {
+    control: 'text',
+    description: 'Href',
+  },
+  cardStyles: {
+    control: 'select',
+    description: 'Card style',
+    options: ['Inverse card', 'none'],
+  }
+};
+
+export const Pictogram = {
+  args: pictogramDefaultArgs,
+  argTypes: pictogramControls,
+  render: ({ href, heading, copy, tagGroup, pictogramPlacement, cardStyles }) => html`
+    <c4d-card
+      pictogram-placement="${pictogramPlacement}"
+      href=${ifDefined(href || undefined)}
+      color-scheme=${cardStyles === 'Inverse card' ? 'inverse' : ''}>
+      <c4d-card-heading>${heading}</c4d-card-heading>
+      ${copy ? unsafeHTML(`<p>${copy}</p>`) : ``}
+      ${tagGroup ? html` ${tagGroupContent} ` : ``}
+      <svg
+        slot="pictogram"
+        focusable="false"
+        preserveAspectRatio="xMidYMid meet"
+        xmlns="http://www.w3.org/2000/svg"
+        data-autoid="c4d--card__pictogram"
+        aria-label="Pictogram description"
+        width="48"
+        height="48"
+        viewBox="0 0 32 32"
+        role="img"
+        class="cds--card__pictogram">
+        <path
+          id="desktop_1_"
+          d="M23,29.36H9v-0.72h6.64v-4.28H3c-1.301,0-2.36-1.059-2.36-2.36V5c0-1.301,1.059-2.36,2.36-2.36h26
+          c1.302,0,2.36,1.059,2.36,2.36v17c0,1.302-1.059,2.36-2.36,2.36H16.36v4.279H23V29.36z M1.36,19.36V22c0,
+          0.904,0.736,1.64,1.64,1.64h26c0.904,0,1.64-0.735,1.64-1.64v-2.64H1.36z M1.36,
+          18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5V18.64z" />
+      </svg>
+    </c4d-card>
+  `
+};
+
+const staticDefaultArgs = {
+  alt: 'Image alt text',
+  defaultSrc: imgXlg4x3,
+  image: false,
+  eyebrow: 'SPSS Statistics',
+  heading: 'Free trial',
+  copy: 'Enjoy full SPSS Statistics capabilities including all add-ons. All trial registrants are restricted to one free trial per computer per user.',
+  tagGroup: false,
+  cta: false,
+  ctaCopy: ''
+};
+
+const staticControls = {
+  alt: {
+    control: 'text',
+    description: 'Image alt text'
+  },
+  defaultSrc: {
+    table: {
+      disable: true,
+    },
+  },
+  image: {
+    control: 'boolean',
+    description: 'Add image'
+  },
+  eyebrow: {
+    control: 'text',
+    description: 'Eyebrow'
+  },
+  heading: {
+    control: 'text',
+    description: 'Heading'
+  },
+  copy: {
+    control: 'text',
+    description: 'Body copy'
+  },
+  tagGroup: {
+    control: 'boolean',
+    description: 'Add tags'
+  },
+  cta: {
+    control: 'boolean',
+    description: 'Add CTA'
+  },
+  ctaCopy: {
+    control: 'text',
+    description: 'CTA copy',
+    if: { arg: 'cta', eq: true }
+  }
+};
+
+export const Static = {
+  args: staticDefaultArgs,
+  argTypes: staticControls,
+  render: ({
+    image,
+    alt,
+    defaultSrc,
+    eyebrow,
+    heading,
+    copy,
+    tagGroup,
+    cta,
+    ctaCopy,
+  }) => html`
+    <c4d-card>
+      ${image
+        ? html`
+            <c4d-image
+              slot="image"
+              alt="${ifDefined(alt)}"
+              default-src="${ifDefined(defaultSrc)}"></c4d-image>
+          `
+        : ``}
+      ${eyebrow ? html` <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow> ` : ``}
+      <c4d-card-heading>${heading}</c4d-card-heading>
+      ${copy ? unsafeHTML(`<p>${copy}</p>`) : ``}
+      ${tagGroup ? html` ${tagGroupContent} ` : ``}
+      ${cta
+        ? html`
+            <c4d-card-footer href="https://www.example.com">
+              ${ctaCopy}${ArrowRight20({ slot: 'icon' })}
+            </c4d-card-footer>
+          `
+        : ``}
+    </c4d-card>
+  `
+};
+
+const linkDefaultArgs = {
+  disabled: false,
+  customVideoTitle: null,
+  ctaType: types[CTA_TYPE.LOCAL],
+  heading: 'Aerospace and defence',
+  copy: '',
+  alt: 'Image alt text',
+  defaultSrc: imgXlg4x3,
+  href: ''
+};
+
+const linkControls = {
+  disabled: {
+    control: 'boolean',
+    description: 'Disabled'
+  },
+  customVideoTitle: {
+    control: 'text',
+    description: 'Custom video title',
+    if: { arg: 'ctaType', eq: `${CTA_TYPE.VIDEO}` }
+  },
+  ctaType: {
+    control: 'select',
+    description: 'CTA type (cta-type)',
+    options: typeOptions
+  },
+  heading: {
+    control: 'text',
+    description: 'Heading',
+    if: { arg: 'ctaType', neq: `${CTA_TYPE.VIDEO}` }
+  },
+  copy: {
+    control: 'text',
+    description: 'Body copy'
+  },
+  alt: {
+    control: 'text',
+    description: 'Image alt text'
+  },
+  defaultSrc: {
+    table: {
+      disable: true
+    }
+
+  },
+  href: {
+    control: 'text',
+    description: knobNamesForType[CTA_TYPE.REGULAR]
+  }
+};
+
+
+export const Link = {
+  args: linkDefaultArgs,
+  argTypes: linkControls,
+  render: ({ disabled, ctaType, href, heading, copy, customVideoTitle }) => {
+    let videoCopy;
+
+    if (ctaType === CTA_TYPE.VIDEO) {
+      const card = document.querySelector('c4d-card') as any;
+      const duration = card?.videoTitle?.match(/\((.*)\)/)?.pop();
+
+      if (!customVideoTitle) {
+        videoCopy = card?.videoTitle;
+      } else {
+        videoCopy = customVideoTitle;
+      }
+
+      card.querySelector('c4d-card-footer')!.innerHTML = duration ?? '';
+    }
+
+    return html`
+      <c4d-video-cta-container>
+        <c4d-card
+          ?disabled=${disabled}
+          link
+          no-poster=${ctaType === CTA_TYPE.VIDEO}
+          cta-type=${ctaType}
+          href=${ifDefined(href || undefined)}>
+          <c4d-card-heading>${videoCopy ?? heading}</c4d-card-heading>
+          ${copy ? unsafeHTML(`<p>${copy}</p>`) : ``}
+          <c4d-card-footer></c4d-card-footer>
+        </c4d-card>
+      </c4d-video-cta-container>
+    `
+  }
+};
+
+const logoDefaultArgs = {
+  alt: 'Image alt text',
+  defaultSrc: logoMicrosoft2x1,
+  tagGroup: true,
+  eyebrow: 'Microsoft',
+  heading: '',
+  copy: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+  href: 'https://example.com'
+};
+
+const logoControls = {
+  alt: {
+    control: 'text',
+    description: 'Image alt text'
+  },
+  defaultSrc: {
+    table: {
+      disable: true
+    }
+  },
+  tagGroup: {
+    control: 'boolean',
+    description: 'Add tags',
+    group: 'logo'
+  },
+  eyebrow: {
+    control: 'text',
+    description: 'Card Eyebrow',
+    group: 'logo'
+  },
+  heading: {
+    control: 'text',
+    description: 'Card Heading (optional)',
+    group: 'logo'
+  },
+  copy: {
+    control: 'text',
+    description: 'Card body copy',
+    group: 'logo'
+  },
+  href: {
+    control: 'text',
+    description: 'Href'
+  }
+};
+
+export const Logo = {
+  args: logoDefaultArgs,
+  argTypes: logoControls,
+  render: ({ alt, defaultSrc, eyebrow, heading, href, copy, tagGroup } ) => html`
+    <c4d-card logo href=${ifDefined(href || undefined)}>
+      <c4d-image-logo
+        slot="image"
+        alt="${ifDefined(alt)}"
+        default-src="${ifDefined(defaultSrc)}"></c4d-image-logo>
+      ${eyebrow ? html` <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow> ` : ``}
+      ${heading ? html` <c4d-card-heading>${heading}</c4d-card-heading> ` : ``}
+      ${copy ? unsafeHTML(`<p>${copy}</p>`) : ``}
+      ${tagGroup ? html` ${tagGroupContent} ` : ``}
+
+      <c4d-card-footer></c4d-card-footer>
+    </c4d-card>
+  `
+};
+
 
 export default {
   title: 'Components/Card',
@@ -568,7 +497,9 @@ export default {
     `,
   ],
   parameters: {
-    ...readme.parameters,
     hasStoryPadding: true,
+    controls: {
+      exclude:/defaultSrc|eyebrow|heading|href|copy|alt/g
+    }
   },
 };