From 0da78715a3c9bf578e25cf0576656ea74844d6ef Mon Sep 17 00:00:00 2001
From: 321gillian <gillian.middleton@gmail.com>
Date: Tue, 21 May 2024 11:31:06 +0100
Subject: [PATCH] feat(selector-card): Add descriptive variant for radio
 selector card
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: COMUI-2784
---
 .../gux-selector-cards/a11yManualChecklist.md |  16 ++
 .../beta/gux-selector-cards/example.html      |  59 ++++
 .../gux-selector-card/example.html            |  88 +++++-
 .../gux-selector-card/gux-selector-card.scss  | 201 ++++++++-----
 .../gux-selector-card/gux-selector-card.tsx   |  27 +-
 .../gux-selector-card/readme.md               |  14 +-
 .../gux-selector-card.spec.ts.snap            | 269 +++++++++++++++---
 .../tests/gux-selector-card.spec.ts           |  85 +++++-
 .../gux-selector-cards.e2e.ts.snap            |   4 +-
 .../gux-selector-cards.spec.ts.snap           |  75 +++++
 .../tests/gux-selector-cards.e2e.ts           |  43 ++-
 .../tests/gux-selector-cards.spec.ts          |  43 ++-
 12 files changed, 801 insertions(+), 123 deletions(-)
 create mode 100644 packages/genesys-spark-components/src/components/beta/gux-selector-cards/a11yManualChecklist.md

diff --git a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/a11yManualChecklist.md b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/a11yManualChecklist.md
new file mode 100644
index 000000000..a3ac2b2a2
--- /dev/null
+++ b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/a11yManualChecklist.md
@@ -0,0 +1,16 @@
+# gux-selector-cards manual accessibility testing status
+
+**Last Updated:** 2024-05-29T14:11:41.083Z
+| Pass | WCAG Success Criterion | Notes |
+| --- | --- | --- |
+| ✅ | [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html) | - |
+| ✅ | [2.1.2 No Keyboard Trap](https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap.html) | - |
+| ✅ | [2.4.3 Focus Order](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html) | - |
+| ✅ | [2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html) | - |
+| ✅ | [2.5.3 Label in Name](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html#dfn-name) | - |
+| ✅ | [3.2.1 On Focus](https://www.w3.org/WAI/WCAG21/Understanding/on-focus.html) | - |
+| ✅ | [3.2.2 On Input](https://www.w3.org/WAI/WCAG21/Understanding/on-input.html) | - |
+| ✅ | [3.3.1 Error Identification](https://www.w3.org/WAI/WCAG21/Understanding/error-identification.html) | - |
+| ✅ | [3.2.2 Labels or Instructions](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html) | - |
+| ✅ | [4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html) | - |
+| ✅ | [4.1.3 Status Messages](https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html) | - |
diff --git a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/example.html b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/example.html
index c333176cf..fa4d861d3 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/example.html
+++ b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/example.html
@@ -31,3 +31,62 @@ <h2>Simple Selector Card Group</h2>
     <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
   </gux-selector-card-beta>
 </gux-selector-cards-beta>
+
+<h2>Descriptive Selector Card Group</h2>
+<gux-selector-cards-beta class="example2">
+  <gux-selector-card-beta variant="descriptive">
+    <label slot="label" for="1-B">First</label>
+    <input slot="input" id="1-B" type="radio" name="example2" />
+    <span slot="description"
+      >A label for a sample selector card. Used in Spark WCL.</span
+    >
+    <gux-badge slot="badge" bold>Badge</gux-badge>
+    <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+  </gux-selector-card-beta>
+
+  <gux-selector-card-beta variant="descriptive">
+    <label slot="label" for="2-B">Second</label>
+    <input slot="input" id="2-B" type="radio" name="example2" />
+    <span slot="description"
+      >A label for a sample selector card. Used in Spark WCL.</span
+    >
+    <gux-badge slot="badge" bold>Badge</gux-badge>
+    <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+  </gux-selector-card-beta>
+
+  <gux-selector-card-beta variant="descriptive">
+    <label slot="label" for="3-B">Third</label>
+    <input slot="input" id="third" type="radio" name="example2" />
+    <span slot="description"
+      >A label for a sample selector card. Used in Spark WCL.</span
+    >
+    <gux-badge slot="badge" bold>Badge</gux-badge>
+    <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+  </gux-selector-card-beta>
+
+  <gux-selector-card-beta variant="descriptive">
+    <label slot="label" for="4-B">Fourth</label>
+    <input slot="input" id="4-B" type="radio" name="example2" disabled />
+    <span slot="description"
+      >A label for a sample selector card. Used in Spark WCL.</span
+    >
+    <gux-badge slot="badge" bold>Badge</gux-badge>
+    <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+  </gux-selector-card-beta>
+
+  <gux-selector-card-beta variant="descriptive">
+    <label slot="label" for="5-B">Fifth</label>
+    <input slot="input" id="5-B" type="radio" name="example2" />
+    <span slot="description"
+      >A label for a sample selector card. Used in Spark WCL.</span
+    >
+    <gux-badge slot="badge" bold>Badge</gux-badge>
+    <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+  </gux-selector-card-beta>
+</gux-selector-cards-beta>
+
+<style>
+  .example1 {
+    margin-bottom: 24px;
+  }
+</style>
diff --git a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/example.html b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/example.html
index 270aca45f..eacbfb05b 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/example.html
+++ b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/example.html
@@ -15,7 +15,7 @@ <h4>Default</h4>
         value="card-label"
       />
       <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
-      <span slot="content"
+      <span slot="description"
         >A label for a sample selector card. Used in Spark WCL.</span
       >
     </gux-selector-card-beta>
@@ -34,7 +34,7 @@ <h4>Disabled - Unchecked</h4>
         value="card-label"
       />
       <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
-      <span slot="content" id="existing-id"
+      <span slot="description" id="existing-id"
         >A second label for a sample selector card. Used in Spark WCL.</span
       >
     </gux-selector-card-beta>
@@ -73,7 +73,91 @@ <h4>Longer label</h4>
     </gux-selector-card-beta>
   </div>
 </div>
+<h2>Descriptive - Radio Button</h2>
+<div class="row">
+  <div class="card-container">
+    <h4>Default</h4>
+    <gux-selector-card-beta variant="descriptive">
+      <label slot="label" for="1-B">Card label</label>
+      <input
+        slot="input"
+        id="1-B"
+        type="radio"
+        name="example1"
+        value="card-label"
+      />
+      <span slot="description"
+        >A label for a sample selector card. Used in Spark WCL.</span
+      >
+      <gux-badge slot="badge" bold>Badge</gux-badge>
+      <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+    </gux-selector-card-beta>
+  </div>
+
+  <div class="card-container">
+    <h4>Disabled - Unchecked</h4>
+    <gux-selector-card-beta variant="descriptive">
+      <label slot="label" for="2-B">Card Label</label>
+      <input
+        slot="input"
+        id="2-B"
+        type="radio"
+        name="example2"
+        disabled
+        value="card-label"
+      />
+      <span slot="description"
+        >A label for a sample selector card. Used in Spark WCL.</span
+      >
+      <gux-badge slot="badge" bold>Badge</gux-badge>ß
+      <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+    </gux-selector-card-beta>
+  </div>
 
+  <div class="card-container">
+    <h4>Disabled - Checked</h4>
+    <gux-selector-card-beta variant="descriptive">
+      <label slot="label" for="3-B">Card Label</label>
+      <input
+        slot="input"
+        id="3-B"
+        type="radio"
+        name="example3"
+        disabled
+        checked
+        value="card-label"
+      />
+      <span slot="description"
+        >A label for a sample selector card. Used in Spark WCL.</span
+      >
+      <gux-badge slot="badge" bold>Badge</gux-badge>
+      <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+    </gux-selector-card-beta>
+  </div>
+</div>
+<div class="row">
+  <div class="card-container">
+    <h4>Longer label</h4>
+    <gux-selector-card-beta variant="descriptive">
+      <label slot="label" for="4-B"
+        >A longer card label example. This can span up to 2 lines.
+      </label>
+      <input
+        slot="input"
+        id="4-B"
+        type="radio"
+        name="example4"
+        value="card-label"
+      />
+      <span slot="description"
+        >A description for a sample selector card. Used in Spark WCL.
+        Descriptions can span up to 3 lines before being truncated.
+      </span>
+      <gux-badge slot="badge" bold>Badge</gux-badge>
+      <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+    </gux-selector-card-beta>
+  </div>
+</div>
 <style>
   .card-container {
     display: flex;
diff --git a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.scss b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.scss
index 48d0e9745..fca86303b 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.scss
@@ -14,18 +14,6 @@ $gux-icon-radio-checked: "data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='h
   mask-image: url($gux-icon-radio-checked);
 }
 
-:host(.gux-disabled) {
-  cursor: not-allowed;
-
-  .gux-content {
-    pointer-events: none;
-    -webkit-user-select: none; /* Safari */
-    user-select: none;
-    background-color: var(--gse-ui-selectorCard-disabled-backgroundColor);
-    opacity: var(--gse-ui-selectorCard-disabled-opacity);
-  }
-}
-
 ::slotted(*) {
   cursor: pointer;
 }
@@ -118,74 +106,159 @@ $gux-icon-radio-checked: "data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='h
   @include checked;
 }
 
-.gux-content {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: var(--gse-ui-selectorCard-descriptive-text-gap);
-  align-items: center;
-  width: var(--gse-ui-selectorCard-simple-minWidth);
-  min-width: var(--gse-ui-selectorCard-simple-minWidth);
-  max-width: var(--gse-ui-selectorCard-simple-maxWidth);
-  height: fit-content;
-  min-height: var(--gse-ui-selectorCard-simple-minHeight);
-  max-height: var(--gse-ui-selectorCard-simple-maxHeight);
-  padding: var(--gse-ui-selectorCard-simple-padding);
-  text-align: center;
-  background-color: var(--gse-ui-selectorCard-default-backgroundColor);
-  border-radius: var(--gse-ui-selectorCard-simple-borderRadius);
+.gux-selector-card {
+  .gux-content {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--gse-ui-selectorCard-descriptive-text-gap);
+    align-items: center;
+    width: var(--gse-ui-selectorCard-simple-minWidth);
+    min-width: var(--gse-ui-selectorCard-simple-minWidth);
+    max-width: var(--gse-ui-selectorCard-simple-maxWidth);
+    height: fit-content;
+    min-height: var(--gse-ui-selectorCard-simple-minHeight);
+    max-height: var(--gse-ui-selectorCard-simple-maxHeight);
+    padding: var(--gse-ui-selectorCard-simple-padding);
+    text-align: center;
+    background-color: var(--gse-ui-selectorCard-default-backgroundColor);
+    border-radius: var(--gse-ui-selectorCard-simple-borderRadius);
 
-  .gux-icon {
-    line-height: 0;
-  }
+    gux-truncate {
+      z-index: calc(var(--gse-semantic-zIndex-showFocus));
+    }
 
-  &:focus-within {
-    @include focus.gux-focus-ring;
-  }
+    .gux-icon {
+      line-height: 0;
+    }
+
+    &:focus-within {
+      @include focus.gux-focus-ring;
+    }
 
-  &:hover {
-    cursor: pointer;
-    background-color: var(--gse-ui-selectorCard-hover-backgroundColor);
+    &:hover {
+      cursor: pointer;
+      background-color: var(--gse-ui-selectorCard-hover-backgroundColor);
 
-    ::slotted(input[type='radio']:not(:checked):not(:disabled))::before {
-      background-color: var(
-        --gse-ui-selectorCard-hover-selectedIndicator-foregroundColor
-      );
+      ::slotted(input[type='radio']:not(:checked):not(:disabled))::before {
+        background-color: var(
+          --gse-ui-selectorCard-hover-selectedIndicator-foregroundColor
+        );
 
-      @include unchecked;
-    }
+        @include unchecked;
+      }
 
-    ::slotted(input[type='radio']:checked:not(:disabled))::before {
-      background-color: var(
-        --gse-ui-selectorCard-hover-selectedIndicator-foregroundColor
-      );
+      ::slotted(input[type='radio']:checked:not(:disabled))::before {
+        background-color: var(
+          --gse-ui-selectorCard-hover-selectedIndicator-foregroundColor
+        );
 
-      @include checked;
+        @include checked;
+      }
     }
-  }
 
-  &:active {
-    background-color: var(--gse-ui-selectorCard-active-backgroundColor);
+    &:active {
+      background-color: var(--gse-ui-selectorCard-active-backgroundColor);
 
-    ::slotted(input[type='radio']:not(:checked):not(:disabled))::before {
-      background-color: var(
-        --gse-ui-selectorCard-active-selectedIndicator-foregroundColor
-      );
+      ::slotted(input[type='radio']:not(:checked):not(:disabled))::before {
+        background-color: var(
+          --gse-ui-selectorCard-active-selectedIndicator-foregroundColor
+        );
 
-      @include unchecked;
+        @include unchecked;
+      }
+
+      ::slotted(input[type='radio']:checked:not(:disabled))::before {
+        background-color: var(
+          --gse-ui-selectorCard-active-selectedIndicator-foregroundColor
+        );
+
+        @include checked;
+      }
     }
 
-    ::slotted(input[type='radio']:checked:not(:disabled))::before {
-      background-color: var(
-        --gse-ui-selectorCard-active-selectedIndicator-foregroundColor
-      );
+    .gux-screenreader {
+      @include mixins.gux-sr-only;
+    }
+  }
 
-      @include checked;
+  &.gux-descriptive {
+    .gux-content {
+      align-items: flex-start;
+      width: var(--gse-ui-selectorCard-descriptive-minWidth);
+      min-width: var(--gse-ui-selectorCard-descriptive-minWidth);
+      max-width: var(--gse-ui-selectorCard-descriptive-maxWidth);
+      min-height: var(--gse-ui-selectorCard-descriptive-minHeight);
+      max-height: var(--gse-ui-selectorCard-descriptive-maxHeight);
+      padding: var(--gse-ui-selectorCard-descriptive-padding);
+      text-align: start;
+      border-radius: var(--gse-ui-selectorCard-descriptive-borderRadius);
+
+      .gux-description {
+        z-index: var(--gse-semantic-zIndex-showFocus);
+        margin-bottom: var(--gse-ui-selectorCard-descriptive-gap);
+        font-family: var(
+          --gse-ui-selectorCard-descriptive-description-fontFamily
+        );
+        font-size: var(--gse-ui-selectorCard-descriptive-description-fontSize);
+        font-weight: var(
+          --gse-ui-selectorCard-descriptive-description-fontWeight
+        );
+        line-height: var(
+          --gse-ui-selectorCard-descriptive-description-lineHeight
+        );
+      }
+
+      gux-truncate {
+        z-index: calc(
+          var(--gse-semantic-zIndex-showFocus) + 1
+        ); // Needs to be higher than description for tooltip
+      }
+
+      ::slotted(gux-badge) {
+        margin-top: var(-gse-ui-selectorCard-descriptive-badge-marginTop);
+      }
+
+      ::slotted(input[type='radio']) {
+        left: 0;
+        border-radius: var(--gse-ui-selectorCard-descriptive-borderRadius);
+
+        &::before {
+          inset-block-start: var(--gse-ui-selectorCard-descriptive-gap);
+          inset-inline-end: var(--gse-ui-selectorCard-descriptive-gap);
+          width: var(--gse-ui-icon-size-md);
+          height: var(--gse-ui-icon-size-md);
+        }
+      }
+
+      ::slotted(label) {
+        display: block;
+        margin-bottom: var(--gse-ui-selectorCard-descriptive-text-gap);
+        font-family: var(--gse-ui-selectorCard-descriptive-label-fontFamily);
+        font-size: var(--gse-ui-selectorCard-descriptive-label-fontSize);
+        font-weight: var(--gse-ui-selectorCard-descriptive-label-fontWeight);
+        line-height: var(--gse-ui-selectorCard-descriptive-label-lineHeight);
+      }
+
+      ::slotted(gux-icon) {
+        width: var(--gse-ui-icon-size-lg);
+        height: var(--gse-ui-icon-size-lg);
+        margin-bottom: var(--gse-ui-selectorCard-descriptive-gap);
+      }
     }
   }
 
-  .gux-screenreader {
-    @include mixins.gux-sr-only;
+  &.gux-disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+
+    .gux-content {
+      pointer-events: none;
+      -webkit-user-select: none; /* Safari */
+      user-select: none;
+      background-color: var(--gse-ui-selectorCard-disabled-backgroundColor);
+      opacity: var(--gse-ui-selectorCard-disabled-opacity);
+    }
   }
 }
diff --git a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.tsx b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.tsx
index c933c86ac..08e0ff39d 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.tsx
+++ b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.tsx
@@ -1,4 +1,4 @@
-import { Component, h, JSX, Element, Prop, State, Host } from '@stencil/core';
+import { Component, h, JSX, Element, Prop, State } from '@stencil/core';
 
 import { trackComponent } from '@utils/tracking/usage';
 import {
@@ -15,7 +15,7 @@ import { setSlotAriaDescribedby } from '../../../stable/gux-form-field/gux-form-
  * @slot icon - Required slot for icon
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag
- * @slot content - Optional slot for additional text content
+ * @slot description - Optional slot for additional text description
  * @slot badge - Optional slot for badge
  */
 
@@ -31,7 +31,6 @@ export class GuxSelectorCard {
   @Element()
   private root: HTMLElement;
 
-  //TODO: COMUI-2784 Descriptive variant styling
   @Prop()
   variant: GuxSelectorCardVariant = 'simple';
 
@@ -57,7 +56,7 @@ export class GuxSelectorCard {
 
     preventBrowserValidationStyling(this.input);
 
-    setSlotAriaDescribedby(this.root, this.input, 'content');
+    setSlotAriaDescribedby(this.root, this.input, 'description');
 
     this.disabled = calculateInputDisabledState(this.input);
 
@@ -71,15 +70,19 @@ export class GuxSelectorCard {
     validateFormIds(this.root, this.input);
   }
 
-  private renderContent(): JSX.Element | null {
+  private renderDescription(): JSX.Element | null {
     if (this.variant === 'simple') {
       return (
         <span class="gux-screenreader">
-          <slot name="content" />
+          <slot name="description" />
         </span>
       ) as JSX.Element;
     } else {
-      return (<slot name="content" />) as JSX.Element; //TODO: COMUI-2784 Descriptive variant
+      return (
+        <gux-truncate class="gux-description" max-lines={3}>
+          <slot name="description" />
+        </gux-truncate>
+      ) as JSX.Element;
     }
   }
 
@@ -91,24 +94,26 @@ export class GuxSelectorCard {
 
   render(): JSX.Element {
     return (
-      <Host
+      <div
         class={{
+          'gux-selector-card': true,
           [`gux-${this.variant}`]: true,
           'gux-disabled': this.disabled
         }}
+        onClick={() => this.input.setAttribute('checked', 'true')}
       >
         <div class="gux-content">
           <div class="gux-icon">
             <slot name="icon" />
           </div>
-          <gux-truncate max-lines={2}>
+          <gux-truncate class="gux-label" max-lines={2}>
             <slot name="label" />
           </gux-truncate>
           <slot name="input" />
-          {this.renderContent()}
+          {this.renderDescription()}
           {this.renderBadge()}
         </div>
-      </Host>
+      </div>
     ) as JSX.Element;
   }
 }
diff --git a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/readme.md b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/readme.md
index 92625d278..9fbef2b05 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/readme.md
+++ b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/readme.md
@@ -14,13 +14,13 @@
 
 ## Slots
 
-| Slot        | Description                               |
-| ----------- | ----------------------------------------- |
-| `"badge"`   | Optional slot for badge                   |
-| `"content"` | Optional slot for additional text content |
-| `"icon"`    | Required slot for icon                    |
-| `"input"`   | Required slot for input tag               |
-| `"label"`   | Required slot for label tag               |
+| Slot            | Description                                   |
+| --------------- | --------------------------------------------- |
+| `"badge"`       | Optional slot for badge                       |
+| `"description"` | Optional slot for additional text description |
+| `"icon"`        | Required slot for icon                        |
+| `"input"`       | Required slot for input tag                   |
+| `"label"`       | Required slot for label tag                   |
 
 
 ## Dependencies
diff --git a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/tests/__snapshots__/gux-selector-card.spec.ts.snap b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/tests/__snapshots__/gux-selector-card.spec.ts.snap
index a18461267..a7db8b64e 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/tests/__snapshots__/gux-selector-card.spec.ts.snap
+++ b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/tests/__snapshots__/gux-selector-card.spec.ts.snap
@@ -1,27 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`gux-form-field-radio #render should render component as expected (1) 1`] = `
-<gux-selector-card-beta class="gux-disabled gux-simple" variant="simple">
+<gux-selector-card-beta variant="simple">
   <mock:shadow-root>
-    <div class="gux-content">
-      <div class="gux-icon">
-        <slot name="icon"></slot>
+    <div class="gux-disabled gux-selector-card gux-simple">
+      <div class="gux-content">
+        <div class="gux-icon">
+          <slot name="icon"></slot>
+        </div>
+        <gux-truncate class="gux-label" max-lines="2">
+          <slot name="label"></slot>
+        </gux-truncate>
+        <slot name="input"></slot>
+        <span class="gux-screenreader">
+          <slot name="description"></slot>
+        </span>
       </div>
-      <gux-truncate max-lines="2">
-        <slot name="label"></slot>
-      </gux-truncate>
-      <slot name="input"></slot>
-      <span class="gux-screenreader">
-        <slot name="content"></slot>
-      </span>
     </div>
   </mock:shadow-root>
   <label for="second" slot="label">
     Card Label
   </label>
-  <input aria-describedby="gux-content-i" disabled="" id="second" name="example2" slot="input" type="radio" value="card-label">
+  <input disabled="" id="second" name="example2" slot="input" type="radio" value="card-label">
   <gux-icon decorative="" icon-name="fa/diamond-regular" slot="icon">
-    <span id="gux-content-i" slot="content">
+    <span id="existing-id" slot="content">
       A second label for a sample selector card. Used in Spark WCL.
     </span>
   </gux-icon>
@@ -29,19 +31,21 @@ exports[`gux-form-field-radio #render should render component as expected (1) 1`
 `;
 
 exports[`gux-form-field-radio #render should render component as expected (2) 1`] = `
-<gux-selector-card-beta class="gux-disabled gux-simple" variant="simple">
+<gux-selector-card-beta variant="simple">
   <mock:shadow-root>
-    <div class="gux-content">
-      <div class="gux-icon">
-        <slot name="icon"></slot>
+    <div class="gux-disabled gux-selector-card gux-simple">
+      <div class="gux-content">
+        <div class="gux-icon">
+          <slot name="icon"></slot>
+        </div>
+        <gux-truncate class="gux-label" max-lines="2">
+          <slot name="label"></slot>
+        </gux-truncate>
+        <slot name="input"></slot>
+        <span class="gux-screenreader">
+          <slot name="description"></slot>
+        </span>
       </div>
-      <gux-truncate max-lines="2">
-        <slot name="label"></slot>
-      </gux-truncate>
-      <slot name="input"></slot>
-      <span class="gux-screenreader">
-        <slot name="content"></slot>
-      </span>
     </div>
   </mock:shadow-root>
   <label for="third" slot="label">
@@ -53,19 +57,21 @@ exports[`gux-form-field-radio #render should render component as expected (2) 1`
 `;
 
 exports[`gux-form-field-radio #render should render component as expected (3) 1`] = `
-<gux-selector-card-beta class="gux-simple" variant="simple">
+<gux-selector-card-beta variant="simple">
   <mock:shadow-root>
-    <div class="gux-content">
-      <div class="gux-icon">
-        <slot name="icon"></slot>
+    <div class="gux-selector-card gux-simple">
+      <div class="gux-content">
+        <div class="gux-icon">
+          <slot name="icon"></slot>
+        </div>
+        <gux-truncate class="gux-label" max-lines="2">
+          <slot name="label"></slot>
+        </gux-truncate>
+        <slot name="input"></slot>
+        <span class="gux-screenreader">
+          <slot name="description"></slot>
+        </span>
       </div>
-      <gux-truncate max-lines="2">
-        <slot name="label"></slot>
-      </gux-truncate>
-      <slot name="input"></slot>
-      <span class="gux-screenreader">
-        <slot name="content"></slot>
-      </span>
     </div>
   </mock:shadow-root>
   <label for="fourth" slot="label">
@@ -75,3 +81,196 @@ exports[`gux-form-field-radio #render should render component as expected (3) 1`
   <gux-icon decorative="" icon-name="fa/diamond-regular" slot="icon"></gux-icon>
 </gux-selector-card-beta>
 `;
+
+exports[`gux-form-field-radio #render should render component as expected (4) 1`] = `
+<gux-selector-card-beta variant="descriptive">
+  <mock:shadow-root>
+    <div class="gux-descriptive gux-selector-card">
+      <div class="gux-content">
+        <div class="gux-icon">
+          <slot name="icon"></slot>
+        </div>
+        <gux-truncate class="gux-label" max-lines="2">
+          <slot name="label"></slot>
+        </gux-truncate>
+        <slot name="input"></slot>
+        <gux-truncate class="gux-description" max-lines="3">
+          <slot name="description"></slot>
+        </gux-truncate>
+        <slot name="badge"></slot>
+      </div>
+    </div>
+  </mock:shadow-root>
+  <label for="fourth" slot="label">
+    A longer card label example. This can span up to 2 lines.
+  </label>
+  <input id="fourth" name="example4" slot="input" type="radio" value="card-label">
+  <span slot="content">
+    A description for a sample selector card. Used in Spark WCL. Descriptions can span up to 3 lines before being truncated.
+  </span>
+  <gux-badge bold="" slot="badge">
+    Badge
+  </gux-badge>
+  <gux-icon decorative="" icon-name="fa/diamond-regular" slot="icon"></gux-icon>
+</gux-selector-card-beta>
+`;
+
+exports[`gux-form-field-radio #render should render component as expected (5) 1`] = `
+<gux-selector-card-beta variant="descriptive">
+  <mock:shadow-root>
+    <div class="gux-descriptive gux-disabled gux-selector-card">
+      <div class="gux-content">
+        <div class="gux-icon">
+          <slot name="icon"></slot>
+        </div>
+        <gux-truncate class="gux-label" max-lines="2">
+          <slot name="label"></slot>
+        </gux-truncate>
+        <slot name="input"></slot>
+        <gux-truncate class="gux-description" max-lines="3">
+          <slot name="description"></slot>
+        </gux-truncate>
+        <slot name="badge"></slot>
+      </div>
+    </div>
+  </mock:shadow-root>
+  <label for="third" slot="label">
+    Card Label
+  </label>
+  <input checked="" disabled="" id="third" name="example3" slot="input" type="radio" value="card-label">
+  <span slot="content">
+    A label for a sample selector card. Used in Spark WCL.
+  </span>
+  <gux-badge bold="" slot="badge">
+    Badge
+  </gux-badge>
+  <gux-icon decorative="" icon-name="fa/diamond-regular" slot="icon"></gux-icon>
+</gux-selector-card-beta>
+`;
+
+exports[`gux-form-field-radio #render should render component as expected (6) 1`] = `
+<gux-selector-card-beta variant="descriptive">
+  <mock:shadow-root>
+    <div class="gux-descriptive gux-disabled gux-selector-card">
+      <div class="gux-content">
+        <div class="gux-icon">
+          <slot name="icon"></slot>
+        </div>
+        <gux-truncate class="gux-label" max-lines="2">
+          <slot name="label"></slot>
+        </gux-truncate>
+        <slot name="input"></slot>
+        <gux-truncate class="gux-description" max-lines="3">
+          <slot name="description"></slot>
+        </gux-truncate>
+        <slot name="badge"></slot>
+      </div>
+    </div>
+  </mock:shadow-root>
+  <label for="second" slot="label">
+    Card Label
+  </label>
+  <input disabled="" id="second" name="example2" slot="input" type="radio" value="card-label">
+  <span slot="content">
+    A label for a sample selector card. Used in Spark WCL.
+  </span>
+  <gux-badge bold="" slot="badge">
+    Badge
+  </gux-badge>
+  ß
+  <gux-icon decorative="" icon-name="fa/diamond-regular" slot="icon"></gux-icon>
+</gux-selector-card-beta>
+`;
+
+exports[`gux-form-field-radio #render should render component as expected (7) 1`] = `
+<gux-selector-card-beta variant="descriptive">
+  <mock:shadow-root>
+    <div class="gux-descriptive gux-selector-card">
+      <div class="gux-content">
+        <div class="gux-icon">
+          <slot name="icon"></slot>
+        </div>
+        <gux-truncate class="gux-label" max-lines="2">
+          <slot name="label"></slot>
+        </gux-truncate>
+        <slot name="input"></slot>
+        <gux-truncate class="gux-description" max-lines="3">
+          <slot name="description"></slot>
+        </gux-truncate>
+        <slot name="badge"></slot>
+      </div>
+    </div>
+  </mock:shadow-root>
+  <label for="first" slot="label">
+    Card label
+  </label>
+  <input id="first" name="example1" slot="input" type="radio" value="card-label">
+  <span slot="content">
+    A label for a sample selector card. Used in Spark WCL.
+  </span>
+  <gux-badge bold="" slot="badge">
+    Badge
+  </gux-badge>
+  <gux-icon decorative="" icon-name="fa/diamond-regular" slot="icon"></gux-icon>
+</gux-selector-card-beta>
+`;
+
+exports[`gux-form-field-radio #render should render component as expected (8) 1`] = `
+<gux-selector-card-beta variant="descriptive">
+  <mock:shadow-root>
+    <div class="gux-descriptive gux-selector-card">
+      <div class="gux-content">
+        <div class="gux-icon">
+          <slot name="icon"></slot>
+        </div>
+        <gux-truncate class="gux-label" max-lines="2">
+          <slot name="label"></slot>
+        </gux-truncate>
+        <slot name="input"></slot>
+        <gux-truncate class="gux-description" max-lines="3">
+          <slot name="description"></slot>
+        </gux-truncate>
+        <slot name="badge"></slot>
+      </div>
+    </div>
+  </mock:shadow-root>
+  <label for="first" slot="label">
+    Card label
+  </label>
+  <input id="first" name="example1" slot="input" type="radio" value="card-label">
+  <span slot="content">
+    A label for a sample selector card. Used in Spark WCL.
+  </span>
+  <gux-icon decorative="" icon-name="fa/diamond-regular" slot="icon"></gux-icon>
+</gux-selector-card-beta>
+`;
+
+exports[`gux-form-field-radio #render should render component as expected (9) 1`] = `
+<gux-selector-card-beta variant="descriptive">
+  <mock:shadow-root>
+    <div class="gux-descriptive gux-selector-card">
+      <div class="gux-content">
+        <div class="gux-icon">
+          <slot name="icon"></slot>
+        </div>
+        <gux-truncate class="gux-label" max-lines="2">
+          <slot name="label"></slot>
+        </gux-truncate>
+        <slot name="input"></slot>
+        <gux-truncate class="gux-description" max-lines="3">
+          <slot name="description"></slot>
+        </gux-truncate>
+        <slot name="badge"></slot>
+      </div>
+    </div>
+  </mock:shadow-root>
+  <label for="first" slot="label">
+    Card label
+  </label>
+  <input id="first" name="example1" slot="input" type="radio" value="card-label">
+  <gux-badge bold="" slot="badge">
+    Badge
+  </gux-badge>
+  <gux-icon decorative="" icon-name="fa/diamond-regular" slot="icon"></gux-icon>
+</gux-selector-card-beta>
+`;
diff --git a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/tests/gux-selector-card.spec.ts b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/tests/gux-selector-card.spec.ts
index 2e1323a1b..db6ff4914 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/tests/gux-selector-card.spec.ts
+++ b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/tests/gux-selector-card.spec.ts
@@ -52,7 +52,90 @@ describe('gux-form-field-radio', () => {
         />
         <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
       </gux-selector-card-beta>
-      `
+      `,
+      `<gux-selector-card-beta variant="descriptive">
+        <label slot="label" for="fourth">A longer card label example. This can span up to 2 lines. </label>
+        <input
+          slot="input"
+          id="fourth"
+          type="radio"
+          name="example4"
+          value="card-label"
+        />
+        <span slot="content"
+          >A description for a sample selector card. Used in Spark WCL. Descriptions can span up to 3 lines before being truncated. </span
+        >
+        <gux-badge slot="badge" bold>Badge</gux-badge>
+        <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+      </gux-selector-card-beta>`,
+      `<gux-selector-card-beta variant="descriptive">
+        <label slot="label" for="third">Card Label</label>
+        <input
+          slot="input"
+          id="third"
+          type="radio"
+          name="example3"
+          disabled
+          checked
+          value="card-label"
+        />
+        <span slot="content"
+          >A label for a sample selector card. Used in Spark WCL.</span
+        >
+        <gux-badge slot="badge" bold>Badge</gux-badge>
+        <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+      </gux-selector-card-beta>`,
+      `<gux-selector-card-beta variant="descriptive">
+        <label slot="label" for="second">Card Label</label>
+        <input
+          slot="input"
+          id="second"
+          type="radio"
+          name="example2"
+          disabled
+          value="card-label"
+        />
+        <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+        <gux-badge slot="badge" bold>Badge</gux-badge>ß
+        <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+      </gux-selector-card-beta>`,
+      `<gux-selector-card-beta variant="descriptive">
+        <label slot="label" for="first">Card label</label>
+        <input
+          slot="input"
+          id="first"
+          type="radio"
+          name="example1"
+          value="card-label"
+        />
+        <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+        <gux-badge slot="badge" bold>Badge</gux-badge>
+        <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+      </gux-selector-card-beta>`,
+      `<gux-selector-card-beta variant="descriptive">
+        <label slot="label" for="first">Card label</label>
+        <input
+          slot="input"
+          id="first"
+          type="radio"
+          name="example1"
+          value="card-label"
+        />
+        <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+        <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+      </gux-selector-card-beta>`,
+      `<gux-selector-card-beta variant="descriptive">
+        <label slot="label" for="first">Card label</label>
+        <input
+          slot="input"
+          id="first"
+          type="radio"
+          name="example1"
+          value="card-label"
+        />
+        <gux-badge slot="badge" bold>Badge</gux-badge>
+        <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+      </gux-selector-card-beta>`
     ].forEach((html, index) => {
       it(`should render component as expected (${index + 1})`, async () => {
         const page = await newSpecPage({ components, html, language });
diff --git a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/tests/__snapshots__/gux-selector-cards.e2e.ts.snap b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/tests/__snapshots__/gux-selector-cards.e2e.ts.snap
index 6581c484d..e910f6163 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/tests/__snapshots__/gux-selector-cards.e2e.ts.snap
+++ b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/tests/__snapshots__/gux-selector-cards.e2e.ts.snap
@@ -2,4 +2,6 @@
 
 exports[`gux-selector-cards #render should render component as expected (1) 1`] = `"<gux-selector-cards-beta hydrated=""></gux-selector-cards-beta>"`;
 
-exports[`gux-selector-cards #render should render component as expected (2) 1`] = `"<gux-selector-cards-beta hydrated=""> <gux-selector-card-beta variant="simple" class="gux-simple" hydrated=""> <label slot="label" for="first">First</label> <input slot="input" id="first" type="radio" name="example1"> <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative="" size="inherit" hydrated=""></gux-icon></gux-selector-card-beta> <gux-selector-card-beta variant="simple" class="gux-simple" hydrated=""> <label slot="label" for="second">Second</label> <input slot="input" id="second" type="radio" name="example1"> <gux-icon slot="icon" icon-name="fa/bell-regular" decorative="" size="inherit" hydrated=""></gux-icon></gux-selector-card-beta> <gux-selector-card-beta variant="simple" class="gux-simple" hydrated=""> <label slot="label" for="third">Third</label> <input slot="input" id="third" type="radio" name="example1"> <gux-icon slot="icon" icon-name="fa/play-regular" decorative="" size="inherit" hydrated=""></gux-icon></gux-selector-card-beta> <gux-selector-card-beta variant="simple" class="gux-simple gux-disabled" hydrated=""> <label slot="label" for="fourth">Fourth</label> <input slot="input" id="fourth" type="radio" name="example1" disabled=""> <gux-icon slot="icon" icon-name="fa/bell-regular" decorative="" size="inherit" hydrated=""></gux-icon></gux-selector-card-beta> <gux-selector-card-beta variant="simple" class="gux-simple" hydrated=""> <label slot="label" for="fifth">Fifth</label> <input slot="input" id="fifth" type="radio" name="example1"> <gux-icon slot="icon" icon-name="fa/play-regular" decorative="" size="inherit" hydrated=""></gux-icon></gux-selector-card-beta> </gux-selector-cards-beta>"`;
+exports[`gux-selector-cards #render should render component as expected (2) 1`] = `"<gux-selector-cards-beta hydrated=""> <gux-selector-card-beta variant="simple" hydrated=""> <label slot="label" for="first">First</label> <input slot="input" id="first" type="radio" name="example1"> <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative="" size="inherit" hydrated=""></gux-icon></gux-selector-card-beta> <gux-selector-card-beta variant="simple" hydrated=""> <label slot="label" for="second">Second</label> <input slot="input" id="second" type="radio" name="example1"> <gux-icon slot="icon" icon-name="fa/bell-regular" decorative="" size="inherit" hydrated=""></gux-icon></gux-selector-card-beta> <gux-selector-card-beta variant="simple" hydrated=""> <label slot="label" for="third">Third</label> <input slot="input" id="third" type="radio" name="example1"> <gux-icon slot="icon" icon-name="fa/play-regular" decorative="" size="inherit" hydrated=""></gux-icon></gux-selector-card-beta> <gux-selector-card-beta variant="simple" hydrated=""> <label slot="label" for="fourth">Fourth</label> <input slot="input" id="fourth" type="radio" name="example1" disabled=""> <gux-icon slot="icon" icon-name="fa/bell-regular" decorative="" size="inherit" hydrated=""></gux-icon></gux-selector-card-beta> <gux-selector-card-beta variant="simple" hydrated=""> <label slot="label" for="fifth">Fifth</label> <input slot="input" id="fifth" type="radio" name="example1"> <gux-icon slot="icon" icon-name="fa/play-regular" decorative="" size="inherit" hydrated=""></gux-icon></gux-selector-card-beta> </gux-selector-cards-beta>"`;
+
+exports[`gux-selector-cards #render should render component as expected (3) 1`] = `"<gux-selector-cards-beta class="example2" hydrated=""> <gux-selector-card-beta variant="descriptive" hydrated=""> <label slot="label" for="first">First</label> <input slot="input" id="first" type="radio" name="example2"> <span slot="content">A label for a sample selector card. Used in Spark WCL.</span> <gux-badge slot="badge" bold="" hydrated="">Badge</gux-badge> <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative="" size="inherit" hydrated=""></gux-icon></gux-selector-card-beta> <gux-selector-card-beta variant="descriptive" hydrated=""> <label slot="label" for="second">Second</label> <input slot="input" id="second" type="radio" name="example2"> <span slot="content">A label for a sample selector card. Used in Spark WCL.</span> <gux-badge slot="badge" bold="" hydrated="">Badge</gux-badge> <gux-icon slot="icon" icon-name="fa/bell-regular" decorative="" size="inherit" hydrated=""></gux-icon></gux-selector-card-beta> <gux-selector-card-beta variant="descriptive" hydrated=""> <label slot="label" for="third">Third</label> <input slot="input" id="third" type="radio" name="example2"> <span slot="content">A label for a sample selector card. Used in Spark WCL.</span> <gux-badge slot="badge" bold="" hydrated="">Badge</gux-badge> <gux-icon slot="icon" icon-name="fa/play-regular" decorative="" size="inherit" hydrated=""></gux-icon></gux-selector-card-beta> <gux-selector-card-beta variant="descriptive" hydrated=""> <label slot="label" for="fourth">Fourth</label> <input slot="input" id="fourth" type="radio" name="example2" disabled=""> <span slot="content">A label for a sample selector card. Used in Spark WCL.</span> <gux-badge slot="badge" bold="" hydrated="">Badge</gux-badge> <gux-icon slot="icon" icon-name="fa/bell-regular" decorative="" size="inherit" hydrated=""></gux-icon></gux-selector-card-beta> <gux-selector-card-beta variant="descriptive" hydrated=""> <label slot="label" for="fifth">Fifth</label> <input slot="input" id="fifth" type="radio" name="example2"> <span slot="content">A label for a sample selector card. Used in Spark WCL.</span> <gux-badge slot="badge" bold="" hydrated="">Badge</gux-badge> <gux-icon slot="icon" icon-name="fa/play-regular" decorative="" size="inherit" hydrated=""></gux-icon></gux-selector-card-beta> </gux-selector-cards-beta>"`;
diff --git a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/tests/__snapshots__/gux-selector-cards.spec.ts.snap b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/tests/__snapshots__/gux-selector-cards.spec.ts.snap
index 11e9b0a5a..767eea373 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/tests/__snapshots__/gux-selector-cards.spec.ts.snap
+++ b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/tests/__snapshots__/gux-selector-cards.spec.ts.snap
@@ -54,3 +54,78 @@ exports[`gux-selector-cards #render should render component as expected (2) 1`]
   </gux-selector-card-beta>
 </gux-selector-cards-beta>
 `;
+
+exports[`gux-selector-cards #render should render component as expected (3) 1`] = `
+<gux-selector-cards-beta class="example2">
+  <mock:shadow-root>
+    <div class="gux-selector-cards">
+      <slot></slot>
+    </div>
+  </mock:shadow-root>
+  <gux-selector-card-beta variant="descriptive">
+    <label for="first" slot="label">
+      First
+    </label>
+    <input id="first" name="example2" slot="input" type="radio">
+    <span slot="content">
+      A label for a sample selector card. Used in Spark WCL.
+    </span>
+    <gux-badge bold="" slot="badge">
+      Badge
+    </gux-badge>
+    <gux-icon decorative="" icon-name="fa/diamond-regular" slot="icon"></gux-icon>
+  </gux-selector-card-beta>
+  <gux-selector-card-beta variant="descriptive">
+    <label for="second" slot="label">
+      Second
+    </label>
+    <input id="second" name="example2" slot="input" type="radio">
+    <span slot="content">
+      A label for a sample selector card. Used in Spark WCL.
+    </span>
+    <gux-badge bold="" slot="badge">
+      Badge
+    </gux-badge>
+    <gux-icon decorative="" icon-name="fa/bell-regular" slot="icon"></gux-icon>
+  </gux-selector-card-beta>
+  <gux-selector-card-beta variant="descriptive">
+    <label for="third" slot="label">
+      Third
+    </label>
+    <input id="third" name="example2" slot="input" type="radio">
+    <span slot="content">
+      A label for a sample selector card. Used in Spark WCL.
+    </span>
+    <gux-badge bold="" slot="badge">
+      Badge
+    </gux-badge>
+    <gux-icon decorative="" icon-name="fa/play-regular" slot="icon"></gux-icon>
+  </gux-selector-card-beta>
+  <gux-selector-card-beta variant="descriptive">
+    <label for="fourth" slot="label">
+      Fourth
+    </label>
+    <input disabled="" id="fourth" name="example2" slot="input" type="radio">
+    <span slot="content">
+      A label for a sample selector card. Used in Spark WCL.
+    </span>
+    <gux-badge bold="" slot="badge">
+      Badge
+    </gux-badge>
+    <gux-icon decorative="" icon-name="fa/bell-regular" slot="icon"></gux-icon>
+  </gux-selector-card-beta>
+  <gux-selector-card-beta variant="descriptive">
+    <label for="fifth" slot="label">
+      Fifth
+    </label>
+    <input id="fifth" name="example2" slot="input" type="radio">
+    <span slot="content">
+      A label for a sample selector card. Used in Spark WCL.
+    </span>
+    <gux-badge bold="" slot="badge">
+      Badge
+    </gux-badge>
+    <gux-icon decorative="" icon-name="fa/play-regular" slot="icon"></gux-icon>
+  </gux-selector-card-beta>
+</gux-selector-cards-beta>
+`;
diff --git a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/tests/gux-selector-cards.e2e.ts b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/tests/gux-selector-cards.e2e.ts
index e96957354..299c298f6 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/tests/gux-selector-cards.e2e.ts
+++ b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/tests/gux-selector-cards.e2e.ts
@@ -55,7 +55,48 @@ describe('gux-selector-cards', () => {
           <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
         </gux-selector-card-beta>
       </gux-selector-cards-beta>
-      `
+      `,
+      `<gux-selector-cards-beta class="example2">
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="first">First</label>
+          <input slot="input" id="first" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="second">Second</label>
+          <input slot="input" id="second" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="third">Third</label>
+          <input slot="input" id="third" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="fourth">Fourth</label>
+          <input slot="input" id="fourth" type="radio" name="example2" disabled />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="fifth">Fifth</label>
+          <input slot="input" id="fifth" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+        </gux-selector-card-beta>
+      </gux-selector-cards-beta>`
     ].forEach((html, index) => {
       it(`should render component as expected (${index + 1})`, async () => {
         const page = await newNonrandomE2EPage({ html });
diff --git a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/tests/gux-selector-cards.spec.ts b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/tests/gux-selector-cards.spec.ts
index 57690125e..a399f4f9e 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/tests/gux-selector-cards.spec.ts
+++ b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/tests/gux-selector-cards.spec.ts
@@ -79,7 +79,48 @@ describe('gux-selector-cards', () => {
           <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
         </gux-selector-card-beta>
       </gux-selector-cards-beta>
-      `
+      `,
+      `<gux-selector-cards-beta class="example2">
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="first">First</label>
+          <input slot="input" id="first" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="second">Second</label>
+          <input slot="input" id="second" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="third">Third</label>
+          <input slot="input" id="third" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="fourth">Fourth</label>
+          <input slot="input" id="fourth" type="radio" name="example2" disabled />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="fifth">Fifth</label>
+          <input slot="input" id="fifth" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+        </gux-selector-card-beta>
+      </gux-selector-cards-beta>`
     ].forEach((html, index) => {
       it(`should render component as expected (${index + 1})`, async () => {
         const page = await newSpecPage({ components, html, language });