fix(feature-card): inverse styles and cta-type="video" (#12146)

### Related Ticket(s)

[ADCMS-7128](https://jsw.ibm.com/browse/ADCMS-7128)

### Description

Fixes some inverse styles for Feature card component. Also adds cta type knobs to the Storybook story and fixes support in `<c4d-feature-card>` component for `cta-type="video"`.

### Changelog

**New**

- Support for `cta-type="video"` in Feature card

**Changed**

- Fixed inverse styles for Feature card component

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/styles/scss/components/feature-card/_feature-card.scss

@@ -86,6 +86,10 @@ $feature-flags: (
       flex: 1 0 50%;
     }
 
+    .#{$prefix}--card__image-wrapper {
+      aspect-ratio: 1 / 1;
+    }
+
     .#{$prefix}--card__wrapper {
       &::before,
       &::after {
@@ -247,10 +251,27 @@ $feature-flags: (
     }
   }
 
-  :host(#{$c4d-prefix}-feature-card-footer)[color-scheme='inverse']
-    .#{$c4d-prefix}-ce--card__footer
-    ::slotted(svg[slot='icon']) {
-    fill: $link-inverse;
+  :host(#{$c4d-prefix}-feature-card-footer)[color-scheme='inverse'] {
+    .#{$c4d-prefix}-ce--card__footer {
+      .#{$c4d-prefix}-ce--cta__icon,
+      ::slotted(svg[slot='icon']) {
+        fill: $link-inverse;
+      }
+
+      &:hover {
+        .#{$c4d-prefix}-ce--cta__icon,
+        ::slotted(svg[slot='icon']) {
+          fill: $link-inverse-hover;
+        }
+      }
+
+      &:active {
+        .#{$c4d-prefix}-ce--cta__icon,
+        ::slotted(svg[slot='icon']) {
+          fill: $link-inverse-active;
+        }
+      }
+    }
   }
 
   :host(#{$c4d-prefix}-feature-card[size='large']) {

packages/web-components/src/components/card/card.ts

@@ -340,7 +340,9 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
         formatVideoCaption: formatVideoCaptionInEffect,
         formatVideoDuration: formatVideoDurationInEffect,
       } = this;
-      const footer = this.querySelector(`${c4dPrefix}-card-footer`);
+      const footer = this.querySelector(
+        (this.constructor as typeof C4DCard).selectorFooter
+      );
 
       const headingText = this.querySelector(
         `${c4dPrefix}-card-heading`

packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts

@@ -21,53 +21,49 @@ import imgLg1x1 from '../../../../.storybook/storybook-images/assets/720/fpo--1x
 import imgXlg1x1 from '../../../../.storybook/storybook-images/assets/1312/fpo--1x1--1312x1312--002.jpg';
 import imgMax1x1 from '../../../../.storybook/storybook-images/assets/1584/fpo--1x1--1584x1584--002.jpg';
 import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { typeOptions, types } from '../../cta/__stories__/ctaTypeConfig';
 
 const { stablePrefix: c4dPrefix, prefix } = settings;
 
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
+import { CTA_TYPE } from '../../cta/defs';
 
 const colorSchemeMap = {
   Regular: BASIC_COLOR_SCHEME.REGULAR,
   Inverse: BASIC_COLOR_SCHEME.INVERSE,
 };
 
 export const Medium = (args) => {
-  const { heading, href, colorScheme } =
+  const { heading, href, colorScheme, ctaType } =
     args?.[`${c4dPrefix}-feature-card`] ?? {};
   return html`
-    <c4d-feature-card
-      href=${ifDefined(href || undefined)}
-      color-scheme=${colorSchemeMap[colorScheme]}
-      cta-type="local">
-      <c4d-image slot="image" alt="Image alt text" default-src="${imgMax1x1}">
-        <c4d-image-item media="(min-width: 1312px)" srcset="${imgXlg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 1056px)" srcset="${imgXlg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 991px)" srcset="${imgLg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 672px)" srcset="${imgMd1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 0px)" srcset="${mediumImgSm4x3}">
-        </c4d-image-item>
-      </c4d-image>
-      <c4d-card-heading>${heading}</c4d-card-heading>
-      <c4d-feature-card-footer></c4d-feature-card-footer>
-    </c4d-feature-card>
+    <c4d-video-cta-container>
+      <c4d-feature-card
+        href=${ifDefined(href || undefined)}
+        color-scheme=${colorSchemeMap[colorScheme]}
+        cta-type=${ctaType}>
+        <c4d-image slot="image" alt="Image alt text" default-src="${imgMax1x1}">
+          <c4d-image-item media="(min-width: 1312px)" srcset="${imgXlg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 1056px)" srcset="${imgXlg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 991px)" srcset="${imgLg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 672px)" srcset="${imgMd1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 0px)" srcset="${mediumImgSm4x3}">
+          </c4d-image-item>
+        </c4d-image>
+        <c4d-card-heading>${heading}</c4d-card-heading>
+        <c4d-feature-card-footer></c4d-feature-card-footer>
+      </c4d-feature-card>
+    </c4d-video-cta-container>
   `;
 };
 
-Medium.story = {
-  parameters: {
-    percy: {
-      skip: true,
-    },
-  },
-};
-
 export const Large = (args) => {
-  const { eyebrow, heading, copy, href, colorScheme } =
+  const { eyebrow, heading, copy, href, colorScheme, ctaType } =
     args?.[`${c4dPrefix}-feature-card`] ?? {};
 
   const copyComponent = document
@@ -77,36 +73,35 @@ export const Large = (args) => {
     copyComponent!.innerHTML = copy;
   }
   return html`
-    <c4d-feature-card
-      size="large"
-      href=${ifDefined(href || undefined)}
-      color-scheme=${colorSchemeMap[colorScheme]}
-      cta-type="local">
-      <c4d-image slot="image" default-src="${ifDefined(imgLg1x1)}">
-        <c4d-image-item media="(min-width: 1312px)" srcset="${imgXlg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 1056px)" srcset="${imgXlg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 991px)" srcset="${imgLg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 672px)" srcset="${imgMd1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 0px)" srcset="${imgSm4x3}">
-        </c4d-image-item>
-      </c4d-image>
-      <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow>
-      <c4d-card-heading>${heading}</c4d-card-heading>
-      ${copy ? html`<p>${copy}</p>` : ''}
-      <c4d-feature-card-footer> </c4d-feature-card-footer>
-    </c4d-feature-card>
+    <c4d-video-cta-container>
+      <c4d-feature-card
+        size="large"
+        href=${ifDefined(href || undefined)}
+        color-scheme=${colorSchemeMap[colorScheme]}
+        cta-type=${ctaType}>
+        <c4d-image slot="image" default-src="${ifDefined(imgLg1x1)}">
+          <c4d-image-item media="(min-width: 1312px)" srcset="${imgXlg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 1056px)" srcset="${imgXlg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 991px)" srcset="${imgLg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 672px)" srcset="${imgMd1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 0px)" srcset="${imgSm4x3}">
+          </c4d-image-item>
+        </c4d-image>
+        <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow>
+        <c4d-card-heading>${heading}</c4d-card-heading>
+        ${copy ? html`<p>${copy}</p>` : ''}
+        <c4d-feature-card-footer> </c4d-feature-card-footer>
+      </c4d-feature-card>
+    </c4d-video-cta-container>
   `;
 };
 
 Large.story = {
   parameters: {
-    percy: {
-      skip: true,
-    },
     storyGrid: `${prefix}--col-lg-12`,
     knobs: {
       [`${c4dPrefix}-feature-card`]: () => ({
@@ -124,6 +119,11 @@ Large.story = {
         ),
         href: textNullable('Card Href (href):', 'https://example.com'),
         colorScheme: select('Color scheme:', ['Regular', 'Inverse'], 'Regular'),
+        ctaType: select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        ),
       }),
     },
     propsSet: {
@@ -164,6 +164,11 @@ export default {
         ),
         href: textNullable('Card Href (href):', 'https://example.com'),
         colorScheme: select('Color scheme:', ['Regular', 'Inverse'], 'Regular'),
+        ctaType: select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        ),
       }),
     },
     propsSet: {