From 03edc20bb16cf848898d5fcf4379b729f2db4da8 Mon Sep 17 00:00:00 2001
From: Andrew Holloway <booc0mtaco@users.noreply.github.com>
Date: Mon, 10 Jun 2024 19:27:05 -0500
Subject: [PATCH] refactor(Radio): address component QA feedback (#1986)

- stop using radio icons which can now be removed
- replace with styling using in-DOM elements (future proof for transitions)
- better application of color tokens
- add tests
- update snapshots
---
 .../Checkbox/Checkbox-v2.stories.tsx          |   1 +
 src/components/Checkbox/Checkbox-v2.tsx       |  16 +-
 src/components/Radio/Radio-v2.module.css      | 179 ++++++---
 src/components/Radio/Radio-v2.stories.tsx     |   6 +-
 src/components/Radio/Radio-v2.test.tsx        |  41 ++
 src/components/Radio/Radio-v2.tsx             |  99 ++---
 .../__snapshots__/Radio-v2.test.tsx.snap      | 357 ++++++++++++++++++
 7 files changed, 576 insertions(+), 123 deletions(-)
 create mode 100644 src/components/Radio/Radio-v2.test.tsx
 create mode 100644 src/components/Radio/__snapshots__/Radio-v2.test.tsx.snap

diff --git a/src/components/Checkbox/Checkbox-v2.stories.tsx b/src/components/Checkbox/Checkbox-v2.stories.tsx
index 4232ce91c..e55e1459e 100644
--- a/src/components/Checkbox/Checkbox-v2.stories.tsx
+++ b/src/components/Checkbox/Checkbox-v2.stories.tsx
@@ -1,5 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
+
 import { Checkbox } from './Checkbox-v2';
 
 const meta: Meta<typeof Checkbox> = {
diff --git a/src/components/Checkbox/Checkbox-v2.tsx b/src/components/Checkbox/Checkbox-v2.tsx
index e0e16737f..85d34098d 100644
--- a/src/components/Checkbox/Checkbox-v2.tsx
+++ b/src/components/Checkbox/Checkbox-v2.tsx
@@ -1,16 +1,16 @@
 import clsx from 'clsx';
 import React, { forwardRef } from 'react';
 import type { ReactNode } from 'react';
+
+import { FieldLabelV2 as FieldLabel } from '../..';
 import useForwardedRef from '../../util/useForwardedRef';
 import { useId } from '../../util/useId';
 import type { EitherInclusive } from '../../util/utility-types';
 
-import { InputLabel, type InputLabelProps } from '../InputLabel/InputLabel';
 import Text from '../Text';
 
 import styles from './Checkbox-v2.module.css';
 
-type CheckboxLabelProps = InputLabelProps;
 type CheckboxHTMLElementProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
   'checked' | 'id' | 'size'
@@ -98,12 +98,6 @@ const CheckboxInput = React.forwardRef<HTMLInputElement, CheckboxInputProps>(
   },
 );
 
-const CheckboxLabel = ({ className, ...other }: CheckboxLabelProps) => {
-  const componentClassName = clsx(className);
-
-  return <InputLabel className={componentClassName} {...other} />;
-};
-
 /**
  * `import {Checkbox} from "@chanzuckerberg/eds";`
  *
@@ -137,9 +131,9 @@ export const Checkbox = Object.assign(
         />
         <div className={styles['checkbox__labels']}>
           {label && (
-            <CheckboxLabel disabled={disabled} htmlFor={checkboxId}>
+            <FieldLabel disabled={disabled} htmlFor={checkboxId}>
               {label}
-            </CheckboxLabel>
+            </FieldLabel>
           )}
           {subLabel && (
             <Text
@@ -156,7 +150,7 @@ export const Checkbox = Object.assign(
   }),
   {
     Input: CheckboxInput,
-    Label: CheckboxLabel,
+    Label: FieldLabel,
   },
 );
 
diff --git a/src/components/Radio/Radio-v2.module.css b/src/components/Radio/Radio-v2.module.css
index 935155188..bd2d2e0cb 100755
--- a/src/components/Radio/Radio-v2.module.css
+++ b/src/components/Radio/Radio-v2.module.css
@@ -11,16 +11,47 @@
 }
 
 /**
- * Wraps the visually hidden radio input element and the visible sibling svg element.
+ * Wraps the visually hidden radio input element and the visible sibling container element.
  */
 .input__wrapper {
   position: relative;
-  /* Centers the radio icon in the wrapper. */
   display: inline-flex;
   align-items: center;
-  /* Aligns the radio with the first line of the label. */
   align-self: flex-start;
+  flex-shrink: 0;
+
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.radio__container,
+.radio__selected {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.radio__container {
+  border: 0.125rem solid currentColor;
+  border-radius: 50%;
+  content: '';
+
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.radio__selected {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+  background-color: transparent;
+
+  content: '';
+  pointer-events: none;
 }
+
 /**
  * The visually hidden input element for the radio. The visual radio is provided by an svg element.
  */
@@ -39,13 +70,14 @@
    * especially on touch screen readers, still interact with the real radio element
    * where it would naturally be present.
    */
+  display: block;
   opacity: 0;
 }
 
 /**
  * The disabled status of the visually hidden input element.
  */
- .radio__input:disabled {
+.radio__input:disabled {
   /* Needed since the input element overlays the visible svg icon for user input and cursor. */
   cursor: not-allowed;
   pointer-events: none;
@@ -55,85 +87,134 @@
   position: relative;
 }
 
-/**
- * Text that labels a radio input.
- */
-.radio__label {
-  position: relative;
-}
-
 .radio__sub-label {
   display: block;
 
   color: var(--eds-theme-color-text-utility-default-secondary);
 }
 
-/**
- * The visible radio svg icon element
- */
-.radio__icon {
-  /* Creates space for the border so that there's no jitter when the focus border is visible. */
-  border: 0.125rem solid transparent;
+.radio__input:not(:checked) {
+  & ~ .radio__container {
+    border-color: var(--eds-theme-color-border-utility-default-medium-emphasis);
+  }
+}
+
+.radio__input:not(:checked):hover {
+  & ~ .radio__container {
+    border-color: var(
+      --eds-theme-color-border-utility-default-medium-emphasis-hover
+    );
+  }
+}
 
-  /* Theming when unchecked */
-  .radio__input:not(:checked) + & {
-    color: var(--eds-theme-color-border-utility-default-medium-emphasis);
+.radio__input:not(:checked):active {
+  & ~ .radio__container {
+    border-color: var(
+      --eds-theme-color-border-utility-default-medium-emphasis-active
+    );
   }
+}
 
-  .radio__input:not(:checked):hover + & {
-    color: var(--eds-theme-color-border-utility-default-medium-emphasis-hover);
+.radio__input:not(:checked):disabled {
+  pointer-events: none;
+  & ~ .radio__container {
+    border-color: var(--eds-theme-color-border-utility-disabled);
+    background-color: var(--eds-theme-color-background-utility-disabled-low-emphasis);
   }
+}
 
-  .radio__input:not(:checked):active + & {
-    color: var(--eds-theme-color-border-utility-default-medium-emphasis-active);
+.radio__input:checked {
+  & ~ .radio__container {
+    border-color: var(
+      --eds-theme-color-background-utility-interactive-high-emphasis
+    );
   }
 
-  .radio__input:not(:checked):disabled + & {
-    color: var(--eds-theme-color-border-utility-disabled);
-    pointer-events: none;
+  & ~ .radio__selected {
+    background-color: var(
+      --eds-theme-color-background-utility-interactive-high-emphasis
+    );
   }
+}
 
-  /* Theming when checked */
-  .radio__input:checked + & {
-    color: var(--eds-theme-color-background-utility-interactive-high-emphasis);
+.radio__input:checked:hover {
+  & ~ .radio__container {
+    border-color: var(
+      --eds-theme-color-background-utility-interactive-high-emphasis-hover
+    );
   }
 
-  .radio__input:checked:hover ~ & {
-    color: var(--eds-theme-color-background-utility-interactive-high-emphasis-hover);
+  & ~ .radio__selected {
+    background-color: var(
+      --eds-theme-color-background-utility-interactive-high-emphasis-hover
+    );
   }
+}
 
-  .radio__input:checked:active ~ & {
-    color: var(--eds-theme-color-background-utility-interactive-high-emphasis-active);
+.radio__input:checked:active {
+  & ~ .radio__container {
+    border-color: var(
+      --eds-theme-color-background-utility-interactive-high-emphasis-active
+    );
   }
 
-  .radio__input:checked:disabled ~ & {
-    color: var(--eds-theme-color-border-utility-disabled);
+  & ~ .radio__selected {
+    background-color: var(
+      --eds-theme-color-background-utility-interactive-high-emphasis-active
+    );
   }
+}
 
-  /**
-   * Error Theming
-   */ 
-  .radio__input.radio--error ~ & {
-    color: var(--eds-theme-color-border-utility-critical);
+.radio__input:checked:disabled {
+  & ~ .radio__container {
+    border-color: var(--eds-theme-color-border-utility-disabled);
+  }
+
+  & ~ .radio__selected {
+    background-color: var(--eds-theme-color-border-utility-disabled);
+  }
+}
+
+.radio__input.radio--error {
+  & ~ .radio__container {
+    border-color: var(--eds-theme-color-border-utility-critical);
+  }
+
+  & ~ .radio__selected {
+    background-color: var(--eds-theme-color-border-utility-critical);
   }
+}
+
+.radio__input.radio--error:hover {
+  & ~ .radio__container {
+    border-color: var(--eds-theme-color-border-utility-critical-hover);
+  }
+
+  & ~ .radio__selected {
+    background-color: var(--eds-theme-color-border-utility-critical-hover);
+  }
+}
 
-  .radio__input.radio--error:hover ~ & {
-    color: var(--eds-theme-color-border-utility-critical-hover);
+.radio__input.radio--error:active {
+  & ~ .radio__container {
+    border-color: var(--eds-theme-color-border-utility-critical-active);
   }
 
-  .radio__input.radio--error:active ~ & {
-    color: var(--eds-theme-color-border-utility-critical-active);
+  & ~ .radio__selected {
+    background-color: var(--eds-theme-color-border-utility-critical-active);
   }
 }
 
-.radio__input:focus-visible + .radio__icon {
-  border: 0.125rem solid var(--eds-theme-color-border-utility-focus);
+.radio__input:focus-visible + .radio__container {
+  outline: 0.125rem solid var(--eds-theme-color-border-utility-focus);
+  outline-offset: 0.125rem;
   border-radius: calc(var(--eds-border-radius-full) * 1px);
 }
 
 @supports not selector(:focus-visible) {
-  .radio__input:focus + .radio__icon {
-    border: 0.125rem solid var(--eds-theme-color-border-utility-focus);
+  .radio__input:focus + .radio__container {
+    outline: 0.125rem solid var(--eds-theme-color-border-utility-focus);
+    outline-offset: 0.125rem;
     border-radius: calc(var(--eds-border-radius-full) * 1px);
   }
 }
diff --git a/src/components/Radio/Radio-v2.stories.tsx b/src/components/Radio/Radio-v2.stories.tsx
index 0f098bbcd..da3a4df05 100644
--- a/src/components/Radio/Radio-v2.stories.tsx
+++ b/src/components/Radio/Radio-v2.stories.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { Radio } from './Radio-v2';
 
-const meta: Meta<typeof Radio> = {
+export default {
   title: 'Components/V2/Radio',
   component: Radio,
   parameters: {
@@ -11,9 +11,7 @@ const meta: Meta<typeof Radio> = {
     badges: ['intro-1.0', 'current-2.0'],
   },
   decorators: [(Story) => <div className="p-8">{Story()}</div>],
-};
-
-export default meta;
+} as Meta<Args>;
 
 type Args = React.ComponentProps<typeof Radio>;
 type Story = StoryObj<Args>;
diff --git a/src/components/Radio/Radio-v2.test.tsx b/src/components/Radio/Radio-v2.test.tsx
new file mode 100644
index 000000000..4fd5b148f
--- /dev/null
+++ b/src/components/Radio/Radio-v2.test.tsx
@@ -0,0 +1,41 @@
+import { generateSnapshots } from '@chanzuckerberg/story-utils';
+import type { StoryFile } from '@storybook/testing-react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { Radio } from './Radio-v2';
+import * as stories from './Radio-v2.stories';
+
+describe('<Radio /> (v2)', () => {
+  generateSnapshots(stories as StoryFile);
+
+  test('should toggle the radio with space', async () => {
+    const user = userEvent.setup();
+    const onChange = jest.fn();
+
+    function ControlledRadio() {
+      const [checked, setChecked] = React.useState(false);
+      const handleChange = () => {
+        setChecked(!checked);
+        onChange();
+      };
+
+      return (
+        <Radio
+          aria-label="test-radio"
+          checked={checked}
+          onChange={handleChange}
+        />
+      );
+    }
+
+    render(<ControlledRadio />);
+    const radio = screen.getByRole('radio');
+    radio.focus();
+
+    await user.keyboard(' ');
+
+    expect(radio).toBeChecked();
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/components/Radio/Radio-v2.tsx b/src/components/Radio/Radio-v2.tsx
index f14ffcc23..ab0bd3301 100644
--- a/src/components/Radio/Radio-v2.tsx
+++ b/src/components/Radio/Radio-v2.tsx
@@ -1,13 +1,39 @@
 import clsx from 'clsx';
 import React from 'react';
-import type { ReactNode, InputHTMLAttributes } from 'react';
+import type { ReactNode } from 'react';
+
+import { FieldLabelV2 as FieldLabel } from '../..';
 import { useId } from '../../util/useId';
 import type { EitherInclusive } from '../../util/utility-types';
-import { IconV2 as Icon, type IconNameV2 as IconName } from '../Icon';
-import { InputLabel, type InputLabelProps } from '../InputLabel/InputLabel';
+
 import Text from '../Text';
+
 import styles from './Radio-v2.module.css';
 
+type RadioHTMLElementProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'checked' | 'id' | 'name'
+>;
+
+type RadioInputProps = RadioHTMLElementProps & {
+  /**
+   * Whether checkbox is checked.
+   */
+  checked?: boolean;
+  /**
+   * Additional classnames passed in for styling.
+   */
+  className?: string;
+  /**
+   * Radio ID. Used to connect the input with a label for accessibility purposes.
+   */
+  id?: string;
+  /**
+   * Whether the radio button is in an error state
+   */
+  isError?: boolean;
+};
+
 type RadioProps = RadioInputProps & {
   // Component API
   /**
@@ -15,6 +41,10 @@ type RadioProps = RadioInputProps & {
    * will generate an id to use for accessibility.
    */
   id?: string;
+  /**
+   * The field name to use in a form
+   */
+  name?: string;
   // Design API
   /**
    * Whether the radio button is in an error state
@@ -39,43 +69,11 @@ type RadioProps = RadioInputProps & {
     }
   >;
 
-type RadioInputProps = Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'id' | 'size'
-> & {
-  /**
-   * Additional classnames passed in for styling.
-   */
-  className?: string;
-  /**
-   * Radio ID. Used to connect the input with a label for accessibility purposes.
-   */
-  id?: string;
-  /**
-   * Whether the radio button is in an error state
-   */
-  isError?: boolean;
-};
-
-// TODO-AH: don't use external svgs in here
-const RadioSvg = ({ checked }: Pick<RadioProps, 'checked'>) => {
-  const iconClassName = clsx(styles['radio__icon']);
-  const icon: IconName = checked ? 'radio-selected' : 'radio-unselected';
-  return (
-    <Icon
-      className={iconClassName}
-      name={icon}
-      purpose="decorative"
-      size="1.5rem"
-    />
-  );
-};
-
 /**
  * Radio input element, exported for greater flexibility.
  * You must provide an `id` prop and connect it to a visible label.
  */
-export const RadioInput = ({
+const RadioInput = ({
   checked,
   className,
   disabled,
@@ -100,34 +98,18 @@ export const RadioInput = ({
         type="radio"
         {...other}
       />
-      <RadioSvg checked={checked} />
+      <span className={styles['radio__container']}></span>
+      <span className={styles['radio__selected']}></span>
     </span>
   );
 };
 
-/**
- * Radio label element, styles and relies on the InputLabel component.
- */
-export const RadioLabel = ({
-  className,
-  size = 'lg',
-  ...other
-}: InputLabelProps) => {
-  const componentClassName = clsx(
-    styles['radio__label'],
-    styles[`radio__label--${size}`],
-    className,
-  );
-
-  return <InputLabel className={componentClassName} size={size} {...other} />;
-};
-
 /**
  * `import {Radio} from "@chanzuckerberg/eds";`
  *
  * Radio control indicating if one item is selected or unselected from a set of other options. Uncontrolled by default, it can be used in place of a select field in form data.
  *
- * NOTE: This component requires `label` or `aria-label` prop *
+ * NOTE: This component requires `label` or `aria-label` prop
  */
 export const Radio = ({
   className,
@@ -156,9 +138,9 @@ export const Radio = ({
         {...other}
       />
       <div className={styles['radio__labels']}>
-        <RadioLabel disabled={disabled} htmlFor={radioId}>
+        <FieldLabel disabled={disabled} htmlFor={radioId}>
           {label}
-        </RadioLabel>
+        </FieldLabel>
         {subLabel && (
           <Text
             as="span"
@@ -175,7 +157,6 @@ export const Radio = ({
 
 Radio.displayName = 'Radio';
 RadioInput.displayName = 'Radio.Input';
-RadioLabel.displayName = 'Radio.Label';
 
 Radio.Input = RadioInput;
-Radio.Label = RadioLabel;
+Radio.Label = FieldLabel;
diff --git a/src/components/Radio/__snapshots__/Radio-v2.test.tsx.snap b/src/components/Radio/__snapshots__/Radio-v2.test.tsx.snap
new file mode 100644
index 000000000..0ee4cc0f0
--- /dev/null
+++ b/src/components/Radio/__snapshots__/Radio-v2.test.tsx.snap
@@ -0,0 +1,357 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Radio /> (v2) Checked story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="radio"
+  >
+    <span
+      class="input__wrapper"
+    >
+      <input
+        checked=""
+        class="radio__input"
+        id=":r1:"
+        name="option-checked"
+        readonly=""
+        type="radio"
+      />
+      <span
+        class="radio__container"
+      />
+      <span
+        class="radio__selected"
+      />
+    </span>
+    <div
+      class="radio__labels"
+    >
+      <label
+        class="label label--lg"
+        for=":r1:"
+      >
+        Option 1
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Radio /> (v2) Default story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="radio"
+  >
+    <span
+      class="input__wrapper"
+    >
+      <input
+        class="radio__input"
+        id=":r0:"
+        name="option-1"
+        readonly=""
+        type="radio"
+      />
+      <span
+        class="radio__container"
+      />
+      <span
+        class="radio__selected"
+      />
+    </span>
+    <div
+      class="radio__labels"
+    >
+      <label
+        class="label label--lg"
+        for=":r0:"
+      >
+        Option 1
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Radio /> (v2) Disabled story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="radio"
+  >
+    <span
+      class="input__wrapper input__wrapper--disabled"
+    >
+      <input
+        class="radio__input"
+        disabled=""
+        id=":r2:"
+        name="option-disabled"
+        readonly=""
+        type="radio"
+      />
+      <span
+        class="radio__container"
+      />
+      <span
+        class="radio__selected"
+      />
+    </span>
+    <div
+      class="radio__labels"
+    >
+      <label
+        class="label label--lg label--disabled"
+        for=":r2:"
+      >
+        Option 1
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Radio /> (v2) DisabledAndChecked story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="radio"
+  >
+    <span
+      class="input__wrapper input__wrapper--disabled"
+    >
+      <input
+        checked=""
+        class="radio__input"
+        disabled=""
+        id=":r3:"
+        name="option-disabled"
+        readonly=""
+        type="radio"
+      />
+      <span
+        class="radio__container"
+      />
+      <span
+        class="radio__selected"
+      />
+    </span>
+    <div
+      class="radio__labels"
+    >
+      <label
+        class="label label--lg label--disabled"
+        for=":r3:"
+      >
+        Option 1
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Radio /> (v2) Error story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="radio radio--error"
+  >
+    <span
+      class="input__wrapper"
+    >
+      <input
+        class="radio--error radio__input"
+        id=":r4:"
+        name="option-error"
+        readonly=""
+        type="radio"
+      />
+      <span
+        class="radio__container"
+      />
+      <span
+        class="radio__selected"
+      />
+    </span>
+    <div
+      class="radio__labels"
+    >
+      <label
+        class="label label--lg"
+        for=":r4:"
+      >
+        Option 1
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Radio /> (v2) ErrorAndChecked story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="radio radio--error"
+  >
+    <span
+      class="input__wrapper"
+    >
+      <input
+        checked=""
+        class="radio--error radio__input"
+        id=":r5:"
+        name="option-error"
+        readonly=""
+        type="radio"
+      />
+      <span
+        class="radio__container"
+      />
+      <span
+        class="radio__selected"
+      />
+    </span>
+    <div
+      class="radio__labels"
+    >
+      <label
+        class="label label--lg"
+        for=":r5:"
+      >
+        Option 1
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Radio /> (v2) LongLabels story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    style="display: grid; width: 20rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;"
+  >
+    <div
+      class="radio"
+    >
+      <span
+        class="input__wrapper"
+      >
+        <input
+          checked=""
+          class="radio__input"
+          id=":r8:"
+          name="option-long-label"
+          readonly=""
+          type="radio"
+        />
+        <span
+          class="radio__container"
+        />
+        <span
+          class="radio__selected"
+        />
+      </span>
+      <div
+        class="radio__labels"
+      >
+        <label
+          class="label label--lg"
+          for=":r8:"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Radio /> (v2) WithSublabel story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="radio"
+  >
+    <span
+      class="input__wrapper"
+    >
+      <input
+        class="radio__input"
+        id=":r6:"
+        name="option-1"
+        readonly=""
+        type="radio"
+      />
+      <span
+        class="radio__container"
+      />
+      <span
+        class="radio__selected"
+      />
+    </span>
+    <div
+      class="radio__labels"
+    >
+      <label
+        class="label label--lg"
+        for=":r6:"
+      >
+        Option 1
+      </label>
+      <span
+        class="text text--body-sm radio__sub-label"
+      >
+        Some additional label text
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Radio /> (v2) WithoutVisibleLabel story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="radio"
+  >
+    <span
+      class="input__wrapper"
+    >
+      <input
+        aria-label="unchecked radio button"
+        class="radio__input"
+        id=":r7:"
+        name="option-1"
+        readonly=""
+        type="radio"
+      />
+      <span
+        class="radio__container"
+      />
+      <span
+        class="radio__selected"
+      />
+    </span>
+    <div
+      class="radio__labels"
+    >
+      <label
+        class="label label--lg"
+        for=":r7:"
+      />
+    </div>
+  </div>
+</div>
+`;