feat(card-link): update v2

docs/dotcom-v2-migration.md

@@ -23,7 +23,7 @@ For Carbon v11 migration guidance, see their
 | 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 |
+| card-link                 | This component is deprecated in v2 in favor for [card](#card)  (link variant) component |
 | card-section-carousel     | This component is deprecated in v2 in favor for content-section/block component combined with carousel |
 | card-section-simple       | This component is deprecated in v2 in facor for content-section/block component combined with card-group |
 | content-block-cards       | This component is deprecated in v2 in favor for content-section/block & card-group components |
@@ -68,6 +68,7 @@ For Carbon v11 migration guidance, see their
 - `<dds-card-footer>` has `icon-placement` property has been removed
 - Removed `border` property, clickable cards inherit the Carbon v11 experimental tile border style
 - New `aspect-ratio` property with '1:1', '2:1', '3:2', '4:3', and '16:9' as options
+- New `link` property which takes the place of the deprecated `card-link`
 
 ### CTA
 

packages/styles/scss/components/card/_card.scss

@@ -435,6 +435,18 @@
     }
   }
 
+  :host(#{$c4d-prefix}-card[link]) {
+    ::slotted(#{$c4d-prefix}-card-heading) {
+      @include type-style('heading-02');
+
+      margin-bottom: 0;
+    }
+
+    .#{$prefix}--card .#{$prefix}--card__copy {
+      margin-top: 0;
+    }
+  }
+
   :host(#{$c4d-prefix}-card-cta),
   :host(#{$c4d-prefix}-card-link-cta),
   :host(#{$c4d-prefix}-card-link) {
@@ -751,6 +763,18 @@
     }
   }
 
+  :host(#{$c4d-prefix}-card[disabled]) {
+    .#{$prefix}--card {
+      cursor: not-allowed;
+    }
+
+    .#{$prefix}--card__copy,
+    ::slotted(#{$c4d-prefix}-card-eyebrow),
+    ::slotted(#{$c4d-prefix}-card-heading) {
+      color: $text-disabled;
+    }
+  }
+
   :host(#{$c4d-prefix}-card-cta-footer[cta-type='video']),
   :host(#{$c4d-prefix}-card-footer[cta-type='video']) {
     .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {

packages/web-components/src/components/card/__stories__/README.stories.mdx

@@ -35,7 +35,6 @@ import '@carbon/ibmdotcom-web-components/es/components/card/index.js';
   <c4d-card-eyebrow>Eyebrow text</c4d-card-eyebrow>
   <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
   <c4d-card-footer slot="footer">
-    Card CTA text
     <svg
       slot="icon"
       focusable="false"
@@ -125,13 +124,22 @@ variation will be rendered, where the card is no longer clickable and optional
 </c4d-card>
 ```
 
+## Card - link
+
+```html
+<c4d-card link href="https://example.com">
+  <c4d-card-heading>Card link heading</c4d-card-heaing>
+  <c4d-card-footer></c4d-card-footer>
+</c4d-card>
+```
+
 ## Card - logo
 
 If you need to use a Logo image for the Card component, use the Logo variant to
 ensure the Card properly accomodates to the Logo image.
 
 ```html
-<c4d-card border logo href="https://example.com">
+<c4d-card logo href="https://example.com">
   <c4d-image-logo
     slot="image"
     alt="Image logo alt text"

packages/web-components/src/components/card/__stories__/README.stories.react.mdx

@@ -34,7 +34,6 @@ function App() {
       <C4DCardEyebrow>Eyebrow text</C4DCardEyebrow>
       <C4DCardHeading>Lorem ipsum dolor sit amet</C4DCardHeading>
       <C4DCardFooter>
-        Card CTA text
         <ArrowRight20 slot="icon" />
       </C4DCardFooter>
     </C4DCard>
@@ -99,6 +98,23 @@ function App() {
 }
 ```
 
+## Card - link
+
+```javascript
+import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+
+function App() {
+  return (
+    <C4DCard link href={href || undefined}>
+      <C4DCardHeading>Card link heading </C4DCardHeading>
+      <C4DCardFooter></C4DCardFooter>
+    </C4DCard>
+  );
+}
+```
+
 ## Card - logo
 
 If you need to use a Logo image for the Card component, use the Logo variant to