feat(radio): init import radio from EDSCandidates

src/components/Radio/Radio.stories.tsx

@@ -0,0 +1,20 @@
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import { StoryObj, Meta } from '@storybook/react';
+import React from 'react';
+
+import { Radio } from './Radio';
+
+export default {
+  title: 'Atoms/Forms/Radio',
+  component: Radio,
+  args: {
+    label: 'Option 1',
+  },
+  parameters: {
+    badges: [BADGE.BETA],
+  },
+} as Meta<Args>;
+
+type Args = React.ComponentProps<typeof Radio>;
+
+export const Default: StoryObj<Args> = {};

src/components/Radio/Radio.tsx

@@ -0,0 +1,62 @@
+import clsx from 'clsx';
+import React from 'react';
+import { useUID } from 'react-uid';
+import styles from './Radio.module.css';
+import { RadioButton, RadioButtonProps } from '../RadioButton/RadioButton';
+
+export type RadioProps = {
+  /**
+   * HTML id attribute. If not passed, this component
+   * will generate an id to use for accessibility.
+   */
+  id?: string;
+  /**
+   * Visible text label for the checkbox.
+   */
+  label?: React.ReactNode;
+} & RadioButtonProps;
+
+/**
+ * ```ts
+ * import Radio from 'v2/core/EDSCandidates/Radio';
+ * ```
+ * ```ts
+ * import {Label, RadioButton} from 'v2/core/EDSCandidates/Radio';
+ * ```
+ *
+ * Radio button and commonly a visual label.
+ *
+ * @example
+ * <Radio label="Option 1" />
+ */
+export const Radio = ({
+  id,
+  label,
+  className,
+  disabled,
+  ...radioProps
+}: RadioProps) => {
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    !label &&
+    !('aria-label' in radioProps)
+  ) {
+    throw new Error('You must provide a visible label or aria-label');
+  }
+  const generatedId = useUID();
+  const radioId = id || generatedId;
+
+  const componentClassName = clsx(styles['radio'], className);
+
+  const labelClassName = clsx(
+    styles['radio__label'],
+    disabled && styles['radio__label--disabled'],
+  );
+
+  return (
+    <div className={componentClassName}>
+      <RadioButton disabled={disabled} id={radioId} {...radioProps} />
+      <label htmlFor={radioId}>{label}</label>
+    </div>
+  );
+};

src/components/RadioButton/RadioButton.module.css

@@ -0,0 +1,12 @@
+@import '../../design-tokens/mixins.css';
+
+/*------------------------------------*\
+    # RADIO BUTTON
+\*------------------------------------*/
+
+/**
+ * 1) 
+ */
+.radio-button {
+  display: flex;
+}

src/components/RadioButton/RadioButton.stories.tsx

@@ -0,0 +1,19 @@
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import { StoryObj, Meta } from '@storybook/react';
+import React from 'react';
+
+import { RadioButton } from './RadioButton';
+
+export default {
+  title: 'PleaseUpdateThisToADifferentFolder/RadioButton',
+  component: RadioButton,
+  parameters: {
+    badges: [BADGE.BETA],
+  },
+} as Meta<Args>;
+
+type Args = React.ComponentProps<typeof RadioButton>;
+
+export const Default: StoryObj<Args> = {
+  args: {},
+};

src/components/RadioButton/RadioButton.test.tsx

@@ -0,0 +1,6 @@
+import { generateSnapshots } from '@chanzuckerberg/story-utils';
+import * as stories from './RadioButton.stories';
+
+describe('<RadioButton />', () => {
+  generateSnapshots(stories);
+});

src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,72 @@
+import clsx from 'clsx';
+import React from 'react';
+import styles from './RadioButton.module.css';
+
+export type RadioButtonProps = {
+  /**
+   * Additional classnames passed in for styling
+   */
+  className?: string;
+  /**
+   * Label visible only to screen readers for cases where there is no visible label.
+   * Prefer using `label` over this where possible.
+   */
+  'aria-label'?: string;
+  /**
+   * Name for the group the button is in.
+   * Each button in the group should be given the same name.
+   */
+  name?: string;
+  /**
+   * Whether radio button starts checked. Defaults to false.
+   */
+  checked?: boolean;
+  /**
+   * Whether radio is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Value assigned to the radio button.
+   */
+  value?: string;
+  /**
+   * Callback when radio option is selected.
+   * Usually requires value prop to identify which radio button has been selected.
+   */
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+} & React.InputHTMLAttributes<HTMLInputElement>;
+
+/**
+ * <RadioButton aria-label="Less preferred, circle part of radio button only" />
+ *
+ * BETA: This component is still a work in progress and is subject to change.
+ *
+ * ```ts
+ * import {RadioButton} from "@chanzuckerberg/eds";
+ * ```
+ *
+ * The circle part of the radio button.
+ * For flexibility regarding styling and label placement.
+ * Should be associated with a <label>, or less preferred, aria-label.
+ *
+ * Style outer circle with "[data-bootstrap-override='radio'].radio"
+ * and inner circle with "[data-bootstrap-override='radio'].radio::before"
+ *
+ * @example
+ * <div>
+ *   <RadioButton />
+ *   <label>Label to describe the radio button</label>
+ *  </div>
+ *
+ * @example
+ */
+export const RadioButton = ({ className, ...props }: RadioButtonProps) => {
+  return (
+    <input
+      className={clsx(styles.radio, className)}
+      data-bootstrap-override="radio"
+      type="radio"
+      {...props}
+    />
+  );
+};

src/components/RadioButton/index.ts

@@ -0,0 +1 @@
+export { RadioButton as default } from './RadioButton';

src/index.ts

@@ -60,6 +60,8 @@ export { default as PageHeader } from './components/PageHeader';
 export { default as PageLevelBanner } from './components/PageLevelBanner';
 export { default as Panel } from './components/Panel';
 export { default as ProjectCard } from './components/ProjectCard';
+export { default as Radio } from './components/Radio';
+export { default as RadioButton } from './components/RadioButton';
 export { default as Score } from './components/Score';
 export { default as Section } from './components/Section';
 export { default as StackedBlock } from './components/StackedBlock';

src/upcoming-components/RadioFieldItem/RadioFieldItem.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { ChangeEventHandler, ReactNode } from 'react';
 import { useUID } from 'react-uid';
-import Radio from '../Radio';
+import { Radio } from '../../components/Radio/Radio';
 import styles from '../RadioField/RadioField.module.css';
 
 export interface Props {