First pass at RadioTileGroup

src/ui/RadioTileGroup/RadioTileGroup.spec.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react'
+
+import { RadioTileGroup } from './RadioTileGroup'
+
+describe('Card', () => {
+  it('renders', async () => {
+    render(
+      <RadioTileGroup>
+        <RadioTileGroup.Item value="asdf" label="Asdf" />
+        <RadioTileGroup.Item value="jkl;" label="Jkl;" />
+      </RadioTileGroup>
+    )
+    const item1 = await screen.findByText('Asdf')
+    expect(item1).toBeInTheDocument()
+    const item2 = await screen.findByText('Jkl;')
+    expect(item2).toBeInTheDocument()
+  })
+
+  describe('Item description', () => {
+    it('renders', async () => {
+      render(
+        <RadioTileGroup>
+          <RadioTileGroup.Item
+            value="asdf"
+            label="Asdf"
+            description="This is a description."
+          />
+        </RadioTileGroup>
+      )
+      const description = await screen.findByText('This is a description.')
+      expect(description).toBeInTheDocument()
+    })
+  })
+})

src/ui/RadioTileGroup/RadioTileGroup.stories.tsx

@@ -0,0 +1,58 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import { RadioTileGroup } from './RadioTileGroup'
+
+type RadioTileGroupStory = React.ComponentProps<typeof RadioTileGroup> & {
+  flex: 1 | 'none'
+}
+
+const meta: Meta<RadioTileGroupStory> = {
+  title: 'Components/RadioTileGroup',
+  component: RadioTileGroup,
+  argTypes: {
+    direction: {
+      description: 'Controls the flex direction of the RadioTileGroup',
+      control: 'radio',
+      options: ['row', 'col'],
+    },
+    flex: {
+      description: 'Toggles between the item flexing and not',
+      control: 'radio',
+      options: [1, 'none'],
+    },
+  },
+}
+export default meta
+
+type Story = StoryObj<RadioTileGroupStory>
+
+export const Default: Story = {
+  args: {
+    direction: 'row',
+    flex: 1,
+  },
+  render: (args) => (
+    <RadioTileGroup className="w-full" direction={args.direction}>
+      <RadioTileGroup.Item value="radio" label="Radio" flex={args.flex} />
+      <RadioTileGroup.Item value="tile" label="Tile" flex={args.flex} />
+      <RadioTileGroup.Item value="group" label="Group" flex={args.flex} />
+    </RadioTileGroup>
+  ),
+}
+
+export const WithDescription: Story = {
+  args: {
+    direction: 'row',
+    flex: 1,
+  },
+  render: (args) => (
+    <RadioTileGroup className="w-full" direction={args.direction}>
+      <RadioTileGroup.Item
+        value="description"
+        label="Description"
+        description="A RadioTileGroup Item can optionally have a description"
+      />
+      <RadioTileGroup.Item value="noDescription" label="No Description" />
+    </RadioTileGroup>
+  ),
+}

src/ui/RadioTileGroup/RadioTileGroup.tsx

@@ -0,0 +1,96 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { cva, VariantProps } from 'cva'
+import React from 'react'
+
+const group = cva(['flex', 'gap-4'], {
+  variants: {
+    direction: {
+      row: 'flex-row',
+      col: 'flex-col',
+    },
+  },
+  defaultVariants: {
+    direction: 'row',
+  },
+})
+interface GroupProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,
+    VariantProps<typeof group> {}
+
+const Group = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  GroupProps
+>(({ className, direction, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={group({ className, direction })}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+Group.displayName = RadioGroupPrimitive.Root.displayName
+
+const item = cva(['relative'], {
+  variants: {
+    flex: {
+      1: 'flex-1',
+      none: 'flex-none',
+    },
+  },
+  defaultVariants: {
+    flex: 1,
+  },
+})
+interface ItemProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
+    VariantProps<typeof item> {
+  label: string
+  description?: string
+}
+
+const Item = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  ItemProps
+>(({ className, label, description, flex, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={item({ className, flex })}
+      {...props}
+    >
+      <div className="flex h-full flex-col gap-2 rounded-md border border-ds-gray-quaternary p-4">
+        <div className="flex items-center justify-between gap-4">
+          <p className="font-medium">{label}</p>
+          <RadioButtonCircle />
+        </div>
+        {description ? (
+          <p className="text-left text-ds-gray-quinary">{description}</p>
+        ) : null}
+      </div>
+      <RadioGroupPrimitive.Indicator className="absolute right-0 top-0 flex h-full w-full justify-end">
+        <div className="absolute h-full w-full rounded-md border-2 border-ds-blue" />
+        <div className="h-full w-full rounded-md border border-ds-blue p-4">
+          <div className="flex h-5 w-full items-center justify-end">
+            <RadioButtonCircle selected />
+          </div>
+        </div>
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+Item.displayName = RadioGroupPrimitive.Item.displayName
+
+export const RadioTileGroup = Object.assign(Group, {
+  Item,
+})
+
+function RadioButtonCircle({ selected = false }: { selected?: boolean }) {
+  return selected ? (
+    <div className="flex h-4 w-4 items-center justify-center rounded-full bg-ds-blue">
+      <div className="h-1 w-1 rounded-full bg-white " />
+    </div>
+  ) : (
+    <div className="h-4 w-4 rounded-full border border-ds-gray-quaternary" />
+  )
+}

src/ui/RadioTileGroup/index.ts

@@ -0,0 +1 @@
+export { RadioTileGroup } from './RadioTileGroup'