CardCheckbox and CardRadioGroup Components

deprecated.json

@@ -10,6 +10,7 @@
     {"componentName": "HeaderContent", "className": "sg-header__content"},
     {"componentName": "HeaderLeft", "className": "sg-header__left"},
     {"componentName": "HeaderMiddle", "className": "sg-header__middle"},
-    {"componentName": "HeaderRight", "className": "sg-header__right"}
+    {"componentName": "HeaderRight", "className": "sg-header__right"},
+    {"componentName": "Card", "className": "sg-card"}
   ]
 }

package.json

@@ -54,6 +54,7 @@
     "@hot-loader/react-dom": "^16.8.6",
     "@khanacademy/flow-to-ts": "^0.5.2",
     "@microsoft/api-extractor": "^7.33.8",
+    "@rive-app/react-canvas": "^3.0.38",
     "@storybook/addon-a11y": "^6.5.13",
     "@storybook/addon-actions": "^6.5.13",
     "@storybook/addon-docs": "^6.5.13",

src/components/card-interactive/CardCheckbox.chromatic.stories.tsx

@@ -0,0 +1,9 @@
+import * as CardCheckbox from './CardCheckbox.stories.mdx';
+import {generateChromaticStory} from '../../chromatic/utils';
+
+export const Default = generateChromaticStory(CardCheckbox, {
+  storiesToHover: ['statesDark', 'statesLight'],
+});
+const {includeStories, ...meta} = CardCheckbox.default;
+
+export default meta;

src/components/card-interactive/CardCheckbox.spec.tsx

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import CardCheckbox from './CardCheckbox';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {testA11y} from '../../axe';
+
+describe('<CardCheckbox />', () => {
+  it('renders unchecked checkbox input, without label', () => {
+    const checkbox = render(<CardCheckbox />);
+    const checkboxInput = checkbox.getByRole('checkbox') as HTMLInputElement;
+
+    expect(checkboxInput.checked).toBe(false);
+    expect(checkbox.queryByLabelText('my label')).not.toBeInTheDocument();
+  });
+
+  it('renders CardRadio with accessible name and checkbox role', () => {
+    const label = 'Option A';
+
+    render(<CardCheckbox>{label}</CardCheckbox>);
+    const checkboxInput = screen.getByRole('checkbox', {
+      name: label,
+    }) as HTMLInputElement;
+
+    expect(checkboxInput).toBeInTheDocument();
+    expect(checkboxInput.checked).toBe(false);
+  });
+
+  it('does not allow checking disabled item', () => {
+    render(<CardCheckbox disabled>Option A</CardCheckbox>);
+    userEvent.click(screen.getByLabelText('Option A'));
+    expect(screen.getByLabelText('Option A')).not.toBeChecked();
+  });
+
+  it('checks/unchecks when either checkbox, input or label is clicked or space is pressed', () => {
+    const checkbox = render(<CardCheckbox>my label</CardCheckbox>);
+    const checkboxInput = checkbox.getByRole('checkbox') as HTMLInputElement;
+
+    expect(checkboxInput.checked).toBe(false);
+    userEvent.click(checkboxInput);
+    expect(checkboxInput).toEqual(document.activeElement);
+
+    expect(checkboxInput.checked).toBe(true);
+    userEvent.keyboard('{space}');
+    expect(checkboxInput.checked).toBe(false);
+    userEvent.click(checkbox.getByText('my label'));
+    expect(checkboxInput.checked).toBe(true);
+  });
+
+  it('allows aria-labbelledby to override accessible name', () => {
+    render(
+      <CardCheckbox aria-labelledby="labelid">
+        Option A<span id="labelid">Custom Label Option A</span>
+      </CardCheckbox>
+    );
+
+    const checkboxInput = screen.getByRole('checkbox', {
+      name: 'Custom Label Option A',
+    }) as HTMLInputElement;
+
+    expect(checkboxInput).toBeInTheDocument();
+  });
+
+  it('allows descriibedby to define accessible description', () => {
+    render(
+      <CardCheckbox aria-describedby="descriptionid">
+        Option A<span id="descriptionid">Custom Description Option A</span>
+      </CardCheckbox>
+    );
+
+    const checkboxInput = screen.getByRole('checkbox', {
+      description: 'Custom Description Option A',
+    }) as HTMLInputElement;
+
+    expect(checkboxInput).toBeInTheDocument();
+  });
+
+  it('it renders as checked by default', () => {
+    const checkbox = render(
+      <CardCheckbox defaultChecked>my label</CardCheckbox>
+    );
+    const checkboxInput = checkbox.getByRole('checkbox') as HTMLInputElement;
+
+    expect(checkboxInput.checked).toBe(true);
+  });
+
+  it('renders as unchecked by default', () => {
+    const checkbox = render(
+      <CardCheckbox defaultChecked={false}>my label</CardCheckbox>
+    );
+    const checkboxInput = checkbox.getByRole('checkbox') as HTMLInputElement;
+
+    expect(checkboxInput.checked).toBe(false);
+  });
+
+  it('works in controlled mode', () => {
+    const ControlledCheckbox = () => {
+      const [checked, setChecked] = React.useState(false);
+
+      return (
+        <CardCheckbox
+          checked={checked}
+          onChange={() => setChecked(val => !val)}
+          aria-labelledby="label"
+        >
+          <label id="label">placeholder</label>
+        </CardCheckbox>
+      );
+    };
+
+    const checkbox = render(<ControlledCheckbox />);
+    const checkboxInput = checkbox.getByRole('checkbox') as HTMLInputElement;
+
+    expect(checkboxInput.checked).toBe(false);
+    userEvent.click(checkboxInput);
+    expect(checkboxInput.checked).toBe(true);
+    userEvent.click(checkboxInput);
+    expect(checkboxInput.checked).toBe(false);
+  });
+
+  describe('a11y', () => {
+    it('should have no a11y violations when children is provided', async () => {
+      await testA11y(
+        <CardCheckbox aria-labelledby="label">
+          <label id="label">placeholder</label>
+        </CardCheckbox>
+      );
+    });
+
+    it('should have no a11y violations when checked', async () => {
+      await testA11y(
+        <CardCheckbox aria-labelledby="label" checked>
+          <label id="label">placeholder</label>
+        </CardCheckbox>
+      );
+    });
+
+    it('should have no a11y violations when disabled', async () => {
+      await testA11y(
+        <CardCheckbox aria-labelledby="label" disabled>
+          <label id="label">placeholder</label>
+        </CardCheckbox>
+      );
+    });
+
+    it('should have no a11y violations when required', async () => {
+      await testA11y(
+        <CardCheckbox aria-labelledby="label" required>
+          <label id="label">placeholder</label>
+        </CardCheckbox>
+      );
+    });
+  });
+});