`.
-
-
-
-### States
-
-#### Default state
-
-Here's a `FormGroup` without an error or validation:
-
-
-
-#### `error`
-
-When including an error message, the `FormGroup` should have an `error` prop with a string that describes the error. The inner element wrapped by the `FormGroup` should also have an `error` prop with a boolean to either display or hide the error message. The `error` prop will add a red border to the form element and display the error message below the form element.
-
-
-
-#### `valid`
-
-Adding `valid` to a `FormGroup`'s inner element will add a green checkmark to the form element.
-
-
-
-### Including InfoTip
-
-A field can include
our existing `InfoTip`
-
-#### Low emphasis
-
-
-
-#### High emphasis
-
-
-
-#### Accessibility
-
-InfoTip buttons are automatically labelled by string field labels for accessibility - you can override this behaviour if needed by passing `ariaLabel` or `ariaLabelledBy` to the field's `InfoTip` via the `infoTipProps` object.
-
-
-
-## Playground
-
-
-
-
diff --git a/packages/styleguide/src/lib/Atoms/FormElements/FormGroupDescription/FormGroupDescription.mdx b/packages/styleguide/src/lib/Atoms/FormElements/FormGroupDescription/FormGroupDescription.mdx
deleted file mode 100644
index 51d8e0c908..0000000000
--- a/packages/styleguide/src/lib/Atoms/FormElements/FormGroupDescription/FormGroupDescription.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-
-import { ComponentHeader } from '~styleguide/blocks';
-
-import * as FormGroupDescriptionStories from './FormGroupDescription.stories';
-
-export const parameters = {
- title: 'FormGroupDescription',
- subtitle: `A description wrapper to format a longer description of a group of inputs.`,
- status: 'current',
- source: {
- repo: 'gamut',
- githubLink:
- 'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/Form/elements/FormGroupDescription.tsx',
- },
-};
-
-
-
-
-
-## Usage
-
-To provide a description for a group of inputs.
-
-## Playground
-
-
-
-
diff --git a/packages/styleguide/src/lib/Atoms/FormElements/FormGroupLabel/FormGroupLabel.mdx b/packages/styleguide/src/lib/Atoms/FormElements/FormGroupLabel/FormGroupLabel.mdx
deleted file mode 100644
index 8b171393b4..0000000000
--- a/packages/styleguide/src/lib/Atoms/FormElements/FormGroupLabel/FormGroupLabel.mdx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-
-import { ComponentHeader } from '~styleguide/blocks';
-
-import * as FormGroupLabelStories from './FormGroupLabel.stories';
-
-export const parameters = {
- title: 'FormGroupLabel',
- subtitle: `A label element to be tied to a group of elements.`,
- design: {
- type: 'figma',
- url: 'https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1189%3A0',
- },
- status: 'current',
- source: {
- repo: 'gamut',
- githubLink:
- 'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/Form/elements/FormGroupLabel.tsx',
- },
-};
-
-
-
-
-
-## Usage
-
-Provide a label to a group of form elements.
-
-## Variants
-
-A `FormGroupLabel` can come in different variants:
-
-- default, which without any additional styling
-- `size='large'` to include a label with larger text
-- `disabled` to render the label in a disabled state
-
-### Default
-
-
-
-### Large size
-
-Setting the `size` prop to `'large'` will render the label with larger text.
-
-
-
-### Disabled
-
-
-
-## Including `htmlFor`
-
-It is best to provide `htmlFor` to both the FormGroup + inner form element to make it super accessible. If this is not provided, the FormLabel will default to `
`. If an `htmlFor` is provided, it will be a `
,
- });
-
- view.getByAltText('my cat');
- });
-
- it('accepts an aria-label', () => {
- const { view } = renderView({
- 'aria-label': 'i am a labeled checkbox',
- });
- expect(view.getByLabelText('i am a labeled checkbox')).toHaveAttribute(
- 'type',
- 'checkbox'
- );
- });
-
- it('renders an infotip', async () => {
- const info = 'small info';
- const { view } = renderView({
- label: 'label',
- infotip: { info: 'small info' },
- });
- const tip = view.getByText(info);
-
- expect(tip).not.toBeVisible();
-
- await act(async () => {
- await userEvent.click(view.getByRole('button'));
- });
-
- expect(tip).toBeVisible();
- });
-
- describe('InfoTip accessibility', () => {
- const info = 'helpful information';
- const labelText = 'Checkbox Label';
-
- it('automatically links InfoTip to Checkbox label via aria-labelledby', () => {
- const { view } = renderView({
- label: labelText,
- infotip: { info },
- });
-
- view.getByRole('button', { name: labelText });
- });
-
- it('uses explicit ariaLabel when provided', () => {
- const ariaLabel = 'Custom label';
- const { view } = renderView({
- label: labelText,
- infotip: { info, ariaLabel },
- });
-
- view.getByRole('button', { name: ariaLabel });
- expect(
- view.queryByRole('button', { name: labelText })
- ).not.toBeInTheDocument();
- });
-
- it('uses explicit ariaLabelledby when provided', () => {
- const externalLabelId = 'external-label-id';
- const externalLabelText = 'External Label';
- const { view } = renderView({
- label: labelText,
- infotip: { info, ariaLabelledby: externalLabelId },
- });
-
- createExternalLabel(view, externalLabelId, externalLabelText);
-
- view.getByRole('button', { name: externalLabelText });
- expect(
- view.queryByRole('button', { name: labelText })
- ).not.toBeInTheDocument();
- });
-
- it('links InfoTip to label with JSX label content', () => {
- const { view } = renderView({
- label: {labelText},
- infotip: { info },
- });
-
- view.getByRole('button', { name: labelText });
- });
- });
-});
diff --git a/packages/gamut/src/Form/__tests__/FormGroup.test.tsx b/packages/gamut/src/Form/__tests__/FormGroup.test.tsx
deleted file mode 100644
index 0a0c26ba4e..0000000000
--- a/packages/gamut/src/Form/__tests__/FormGroup.test.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { setupRtl } from '@skillsoft/gamut-tests';
-
-import { FormGroup } from '../elements/FormGroup';
-import { Input } from '../inputs/Input';
-
-const renderView = setupRtl(FormGroup, {
- children: ,
-});
-
-const label = 'up dog';
-const htmlFor = 'up-dog';
-const optionalLabelText = `${label} (optional)`;
-
-describe('FormGroup', () => {
- describe('when htmlFor is provided', () => {
- it('renders Label as a label', () => {
- const { view } = renderView({ label, htmlFor });
-
- view.getByLabelText(optionalLabelText);
- });
- });
- describe('when htmlFor is not provided', () => {
- it('renders Label as a div', () => {
- const { view } = renderView({ label });
-
- expect(view.queryByLabelText(optionalLabelText)).toBeNull();
- view.getByText(/up dog/);
- });
- });
-
- it('adds an asterisk to required labels', () => {
- const { view } = renderView({
- label,
- htmlFor,
- required: true,
- });
-
- view.getByLabelText('up dog*');
- });
-
- it('does not add an asterisk to solo field labels', () => {
- const { view } = renderView({
- label,
- htmlFor,
- required: true,
- isSoloField: true,
- });
-
- view.getByLabelText('up dog');
- });
-
- it('renders description', () => {
- const { view } = renderView({
- label: 'up dog',
- description:
- "i don't know what up dog is and at this point i'm too afraid to ask.",
- });
-
- view.getByText(
- "i don't know what up dog is and at this point i'm too afraid to ask."
- );
- });
-
- it('renders error text when there is an error', () => {
- const { view } = renderView({
- label: 'up dog',
- error: 'there is no up dog here...',
- });
- expect(view.getByRole('alert')).toHaveTextContent(
- 'there is no up dog here...'
- );
- });
-
- describe('infotip accessibility', () => {
- const info = 'helpful information';
- const ariaLabel = 'Custom label';
-
- it('automatically labels InfoTip button by the field label when label is a string', () => {
- const { view } = renderView({ label, htmlFor, infotip: { info } });
-
- view.getByRole('button', { name: new RegExp(label) });
- });
-
- it('uses explicit ariaLabel when provided', () => {
- const { view } = renderView({
- label,
- htmlFor,
- infotip: { info, ariaLabel },
- });
-
- view.getByRole('button', { name: ariaLabel });
- });
-
- it('uses explicit ariaLabelledby when provided', () => {
- const externalLabelId = 'external-label-id';
- const externalLabelText = 'External Label';
-
- const { view } = renderView({
- label,
- htmlFor,
- infotip: { info, ariaLabelledby: externalLabelId },
- children: (
- <>
- {externalLabelText}
-
-
- ),
- });
-
- view.getByRole('button', { name: externalLabelText });
- });
- });
-});
diff --git a/packages/gamut/src/Form/__tests__/Input.test.tsx b/packages/gamut/src/Form/__tests__/Input.test.tsx
deleted file mode 100644
index 3fec00badc..0000000000
--- a/packages/gamut/src/Form/__tests__/Input.test.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { StreakIcon } from '@skillsoft/gamut-icons';
-import { setupRtl } from '@skillsoft/gamut-tests';
-
-import { Input } from '../inputs/Input';
-
-jest.mock('@skillsoft/gamut-icons', () => ({
- AlertIcon: () => (
-
- ),
- CheckCircledIcon: () => (
-
- ),
- StreakIcon: () => (
-
- ),
-}));
-
-const renderView = setupRtl(Input, { 'aria-label': 'input' });
-
-describe('Input', () => {
- it('renders a text input type when the type is text', () => {
- const { view } = renderView({ type: 'text' });
- view.getByRole('textbox');
- });
-
- it('renders a number input type', () => {
- const { view } = renderView({ type: 'number' });
- expect(view.getByLabelText('input')).toHaveAttribute('type', 'number');
- });
-
- it('renders a file input type', () => {
- const { view } = renderView({ type: 'file' });
- expect(view.getByLabelText('input')).toHaveAttribute('type', 'file');
- });
-
- it('renders a correct defaultValue for text', () => {
- const { view } = renderView({
- type: 'text',
- defaultValue: 'default value',
- });
-
- view.getByDisplayValue('default value');
- });
-
- it('renders a correct defaultValue for numbers', () => {
- const { view } = renderView({
- type: 'number',
- defaultValue: 13,
- });
-
- view.getByDisplayValue(13);
- });
-
- it('renders an AlertIcon when error is true', () => {
- const { view } = renderView({
- type: 'number',
- defaultValue: 13,
- error: true,
- });
-
- view.getByTitle('Alert Icon');
- });
-
- it('renders a CheckCircledIcon when valid is true', () => {
- const { view } = renderView({
- type: 'number',
- defaultValue: 13,
- valid: true,
- });
-
- view.getByTitle('Check Circled Icon');
- });
-
- it('renders a custom gamut-icon when valid is true', () => {
- const { view } = renderView({
- type: 'number',
- defaultValue: 13,
- icon: StreakIcon,
- });
-
- view.getByTitle('Streak Icon');
- });
-});
diff --git a/packages/gamut/src/Form/__tests__/Radio.test.tsx b/packages/gamut/src/Form/__tests__/Radio.test.tsx
deleted file mode 100644
index 8d2b1c2047..0000000000
--- a/packages/gamut/src/Form/__tests__/Radio.test.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { setupRtl } from '@skillsoft/gamut-tests';
-import { fireEvent } from '@testing-library/dom';
-import { act } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { Radio } from '../inputs/Radio';
-import { createExternalLabel } from './testUtils';
-
-const onChangeCallback = jest.fn();
-const testid = 'my-test-id';
-
-const renderView = setupRtl(Radio, {
- htmlFor: 'some-label',
- checked: true,
- onChange: onChangeCallback,
- value: 'a',
- 'data-testid': 'my-test-id',
-});
-
-describe('