Expanded {id}
,
-} as Props;
-
-const renderView = setupRtl(DataGrid, props as any) as <
- T extends Partial
+
+ composed
- 
,
- value: '',
- },
- ],
- name: 'name',
- },
- });
-
- expect(view.getByRole('img'));
- });
-
- it('renders an infotip in the radio', async () => {
- const info = 'info';
-
- const { view } = renderField({
- field: {
- ...defaultFieldProps,
- id: 'id',
- options: [
- {
- label: -
+ {repeatedCrew.map(({ key, name, ship }) => (
+
-
+ {rows.map(({ name, ship }) => (
+
-
+ {rows.map(({ name, ship }) => (
+
-
+ {rows.map(({ name, role, ship }) => (
+
-
+
-
+
-
- {simpleRows.map(({ name, ship }) => (
+ {rows.slice(0, 2).map(({ name, ship }) => (
-
- {simpleRows.map(({ name, ship }) => (
+ {rows.slice(0, 2).map(({ name, ship }) => (
-
+ {sizes.map((size: 'content' | 'sm' | 'md' | 'lg' | 'xl') => (
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+ {rows.map(({ name, role }) => (
+
-
+
-
+
-
+
-
+
-
+
-
+ {rows.map(
+ ({ name, role, ship }, i, _, key = `example-row-${i}`) => (
+
-
+ {rows.map(
+ ({ name, role, ship }, i, _, key = `example-row-${i}`) => (
+
-
+ {rows.map(({ name, role, ship }, i, _, key = `example-row-${i}`) => (
+
-
+ {rows.slice(0, 2).map(({ name, role, ship }, i) => (
+
-
+ {rows.slice(0, 3).map(({ name, role }, i) => (
+
-
+
-
+
-
+
Surprise!
}
- >
- Surprise!
}
- >
- -
- {overrides?.children ?? defaultChildren}
-
Heading 1
+ +Heading 2
+ + # Cool
+
+
+ ${lorem}
+
+
+
+
+
+View More
+ ${lorem} +First Child Summary
${lorem}Click handler paragraph
+ +Div text
+`,
+ },
+ play: async ({ canvas, canvasElement }) => {
+ await expect(canvasElement.querySelector('script, style')).toBeNull();
+ await expect(
+ canvas.getByText('Click handler paragraph')
+ ).not.toHaveAttribute('onclick');
+ await expect(
+ canvas.getByRole('img', { name: 'Sanitized image' })
+ ).not.toHaveAttribute('onerror');
+
+ await expect(canvas.queryByRole('link')).toBeNull();
+ await expect(canvas.getByText('Script link')).not.toHaveAttribute('href');
+ await expect(canvas.getByText('Raw script link')).not.toHaveAttribute(
+ 'href'
+ );
+
+ await expect(canvasElement.querySelector('form, input, object')).toBeNull();
+ await expect(canvas.getByText('Div text')).toHaveAttribute(
+ 'class',
+ expect.not.stringMatching(/evil|other/)
+ );
+ await expect(canvas.getByText('Div text')).toHaveClass(
+ 'narrative-table-container'
+ );
+ },
+};
+
+export const WithoutDefaultOverrides: Story = {
+ args: {
+ skipDefaultOverrides: { a: true, checkbox: true, details: true },
+ text: `
+[External](http://example.com)
+
+
+ Details body
+
+
+- [ ] checkbox
+- [x] checked
+`,
+ },
+ parameters: {
+ a11y: { config: { rules: [{ id: 'label', enabled: false }] } },
+ },
+ play: async ({ canvas, canvasElement }) => {
+ // TODO: with the checkbox override skipped, task-list checkboxes render as enabled inputs with no label
+ const link = canvas.getByRole('link', { name: 'External' });
+ await expect(link).not.toHaveAttribute('target');
+ await expect(link).not.toHaveAttribute('rel');
+
+ await expect(canvas.queryByTestId('gamut-md-details')).toBeNull();
+ await expect(canvasElement.querySelector('summary')).toBeNull();
+ canvas.getByText('Details body');
+
+ await expect(canvas.queryByTestId('gamut-md-checkbox')).toBeNull();
+ const checkboxes = canvas.getAllByRole('checkbox');
+ await expect(checkboxes).toHaveLength(2);
+ await expect(checkboxes[1]).toBeChecked();
+ await expect(
+ getComputedStyle(checkboxes[0].closest('li')!, '::before').display
+ ).not.toBe('none');
+ },
+};
+
+export const DetailsOpen: Story = {
+ args: {
+ text: `
+
+
+`,
+ },
+ play: async ({ canvas, canvasElement, userEvent }) => {
+ // TODO: the sanitizer config has no `details` entry, so `open` is stripped and authored details always start closed
+ const details = canvasElement.querySelector('details')!;
+
+ await userEvent.click(canvas.getByText('Open by default'));
+ await expect(details).toHaveAttribute('open');
+ },
+};
+
+export const WithoutPlayerEmbed: Story = {
+ args: {
+ iframeOverride: { component: Iframe },
+ text: ``,
+ },
+ tags: ['!test'],
+ play: async ({ canvas, canvasElement }) => {
+ // TODO: Unmounting a vidstack YouTube player before it loads throws unhandled "provider destroyed" rejections, so this story is excluded from test runs
+ await canvas.findByRole('region', { name: 'Video Player - No embed' });
+ await expect(canvasElement.querySelector('youtube-video')).toBeNull();
+ },
+};
+
+export const YoutubeVideoWithCaptions: Story = {
+ args: {
+ text: `
+
+`,
+ videoOverride: { component: MarkdownVideo },
+ },
+ tags: ['!test'],
+ play: async ({ canvas, canvasElement }) => {
+ // TODO: Unmounting a vidstack YouTube player before it loads throws unhandled "provider destroyed" rejections, so this story is excluded from test runs
+ await canvas.findByRole('region', {
+ name: 'Video Player - Captioned YouTube',
+ });
+ await expect(canvasElement.querySelector('youtube-video')).toBeNull();
+ },
+};
+
+export const VideoWithCaptions: Story = {
+ args: {
+ text: `
+
+`,
+ videoOverride: { component: MarkdownVideo },
+ },
+ play: async ({ canvas }) => {
+ const player = await canvas.findByRole('region', {
+ name: 'Video Player - Captioned',
+ });
+ await waitFor(() =>
+ expect(player.querySelector('track')).toHaveAttribute('src', captionsSrc)
+ );
+ const track = player.querySelector('track')!;
+ await expect(track).toHaveAttribute('kind', 'captions');
+ await expect(track).toHaveAttribute('srclang', 'en');
+ await expect(track).toHaveAttribute('label', 'English');
+ await waitFor(() => expect(player).toHaveAttribute('data-can-play'));
+ },
+};
+
+export const EmptyText: Story = {
+ args: { text: '' },
+ play: async ({ canvasElement }) => {
+ await expect(canvasElement.firstElementChild?.childElementCount).toBe(0);
+ },
+};
+
+export const WithClassName: Story = {
+ args: { className: 'custom-markdown', text: 'Styled by a consumer class' },
+ play: async ({ canvas }) => {
+ await expect(
+ canvas.getByText('Styled by a consumer class').closest('.custom-markdown')
+ ).not.toBeNull();
+ },
+};
+
+export const InlineIgnoresBlockSyntax: Story = {
+ args: { inline: true, text: '# Not a heading with **bold** text' },
+ play: async ({ canvas }) => {
+ await expect(canvas.queryByRole('heading')).toBeNull();
+ canvas.getByText(/# Not a heading with/);
+ await expect(canvas.getByText('bold').tagName).toBe('STRONG');
+ },
+};
+
+export const ProcessNodeOverrides: Story = {
+ args: {
+ overrides: {
+ em: {
+ processNode: (_node, props) => {
+ const { key, children } = props as {
+ key?: string;
+ children?: ReactNode;
+ };
+ return {children};
+ },
+ },
+ highlight: {
+ shouldProcessNode: (node) => node.name === 'strong',
+ component: ({ children }: { children?: ReactNode }) => (
+ Open by default
+ ${lorem} +- Heading 1 -
- -- Heading 3 -
- - -`; - -const youtubeMarkdown = ` - -`; - -const vimeoMarkdown = ` - -`; - -const videoMarkdown = ` - -`; - -const videoSourceMarkdown = ` - -`; - -const checkboxMarkdown = ` -- [ ] checkbox -- [x] default checked checkbox -- [ ] third checkbox -`; - -const table = ` -| Tables | Are | Cool | -|----------|:-------------:|------:| -| col 1 is | left-aligned | $1600 | -| col 2 is | centered | $12 | -| col 3 is | right-aligned | $1 | - `; - -const renderView = setupRtl(Markdown); - -describe('custom codeblock 2
- );
-
- const overrides = {
- CodeBlock: {
- component: CodeBlock,
- },
- code: {
- component: (props: React.HTMLProps # Cool
`,
- });
-
- expect(
- document.querySelectorAll('div.narrative-table-container').length
- ).toEqual(1);
- });
-
- describe('Markdown anchor links', () => {
- it('Renders a link with text', () => {
- const text = '[link](/url)';
- const expectedText = `link`;
- expect(text).not.toEqual(expectedText);
- renderView({ text });
- screen.getByText(expectedText);
- });
-
- it('doesnt error on empty links', () => {
- const text = '[link]()';
- const expectedText = `link`;
- renderView({ text });
- screen.getByText(expectedText);
- });
-
- it('Adds rel="noopener" to external links', () => {
- renderView({
- text: `google`,
- });
-
- expect(document.querySelectorAll('a[rel="noopener"]').length).toEqual(1);
- });
-
- it('Excludes target="_blank" from in-page links', () => {
- renderView({
- text: `heading`,
- });
- expect(document.querySelectorAll('a').length).toEqual(1);
- expect(document.querySelectorAll('a[target="_blank"]').length).toEqual(0);
- });
-
- it('Allows onClicks callbacks', async () => {
- const onClick = jest.fn();
-
- renderView({
- onAnchorClick: onClick,
- text: `google`,
- });
-
- await userEvent.click(screen.getByText('google'));
-
- expect(onClick).toHaveBeenCalledTimes(1);
- });
- });
-
- describe('Allows passing in a custom tag overrides', () => {
- it('Allows passing in custom tag overrides', () => {
- const TestComponent = () => coooool;
-
- const text = `
-# Heading
-
-
-
-`;
-
-const detailsWithSummaryAtFirstIndex = `
-View More
- ${lorem} -First Child Summary
${lorem}
- ${lorem}
-
-`;
-
-/**
- * NOTE: These tests are done using the parent markdown component for ease of testing
- * otherwise we'd need to run it through html-to-react manually to get the correct types for `children` etc
- */
-describe('Details', () => {
- it('Renders the custom details element by default', () => {
- const { view } = renderView({
- text: detailsWithoutSummary,
- });
- expect(view.getByTestId('gamut-md-details')).toBeInTheDocument();
- });
- it('Renders a default summary when it is not provided', () => {
- const { view } = renderView({
- text: detailsWithoutSummary,
- });
- expect(view.queryAllByText('Details')).toHaveLength(1);
- });
- it('Does not render the default summary when one is already provided', () => {
- const { view } = renderView({
- text: detailsWithSummary,
- });
- expect(view.queryAllByText('Details')).toHaveLength(0);
- expect(view.queryAllByText('View More')).toHaveLength(1);
- });
- it('Renders the authored summary when it is the first child (index 0)', () => {
- const { view } = renderView({
- text: detailsWithSummaryAtFirstIndex,
- });
- expect(view.queryAllByText('Details')).toHaveLength(0);
- expect(view.queryAllByText('First Child Summary')).toHaveLength(1);
- });
-});
diff --git a/packages/gamut/src/Markdown/libs/overrides/MarkdownAnchor/__tests__/MarkdownAnchor.test.tsx b/packages/gamut/src/Markdown/libs/overrides/MarkdownAnchor/__tests__/MarkdownAnchor.test.tsx
deleted file mode 100644
index acb40ed206..0000000000
--- a/packages/gamut/src/Markdown/libs/overrides/MarkdownAnchor/__tests__/MarkdownAnchor.test.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/* eslint-disable jsx-a11y/no-distracting-elements */
-
-import { setupRtl } from '@skillsoft/gamut-tests';
-
-import { MarkdownAnchor } from '../index';
-
-const renderView = setupRtl(MarkdownAnchor);
-
-describe('MarkdownAnchor', () => {
- it('Adds target _blank to external links', () => {
- const { view } = renderView({ href: 'http://google.com' });
-
- const link = view.getByRole('link');
-
- expect(link).toHaveAttribute('target', '_blank');
- });
-
- it('Adds target _blank to same-origin links', () => {
- const { view } = renderView({
- href: `${window.location.origin}/search`,
- });
- const link = view.getByRole('link');
-
- expect(link).toHaveAttribute('target', '_blank');
- });
-
- it('Adds rel="noopener" to external links', () => {
- const { view } = renderView({ href: 'http://google.com' });
- const link = view.getByRole('link');
-
- expect(link).toHaveAttribute('rel', 'noopener');
- });
-
- it('Doesn\'t add rel="noopener" to relative links', () => {
- const { view } = renderView({ href: '/search' });
- const link = view.getByRole('link');
-
- expect(link).not.toHaveAttribute('rel');
- });
-
- it('Doesn\'t add rel="noopener" to same-origin links', () => {
- const { view } = renderView({
- href: `${window.location.origin}/search`,
- });
- const link = view.getByRole('link');
-
- expect(link).not.toHaveAttribute('rel');
- });
-
- it("Doesn't throw an error on an invalid URL", () => {
- const { view } = renderView({ href: 'www.codecademy.com' });
- const link = view.getByRole('link');
-
- expect(link).toHaveAttribute('href', 'www.codecademy.com');
- });
-
- it('renders its children', () => {
- const text = 'natalie rulez';
-
- const { view } = renderView({ href: '/', children: text });
- const link = view.getByRole('link');
-
- expect(link).toHaveTextContent(text);
- });
-});
diff --git a/packages/gamut/src/Markdown/libs/overrides/Video/MarkdownVideo.test.tsx b/packages/gamut/src/Markdown/libs/overrides/Video/MarkdownVideo.test.tsx
new file mode 100644
index 0000000000..629715f7bb
--- /dev/null
+++ b/packages/gamut/src/Markdown/libs/overrides/Video/MarkdownVideo.test.tsx
@@ -0,0 +1,32 @@
+import type * as React from 'react';
+
+import { MarkdownVideo } from '.';
+
+jest.mock('react-player', () => ({
+ __esModule: true,
+ default: () => null,
+}));
+
+jest.mock('@vidstack/react', () => ({
+ __esModule: true,
+ MediaPlayer: () => null,
+ MediaProvider: () => null,
+ Poster: jest.fn(),
+ Track: jest.fn(),
+ useMediaState: jest.fn(),
+ useMediaRemote: jest.fn(),
+}));
+
+describe('MarkdownVideo', () => {
+ it('Passes undefined width and height to Video when the video has none', () => {
+ // React only warns about NaN styles once per value, so check the props directly
+ const element = MarkdownVideo({
+ src: 'https://example.com/clip.mp4',
+ } as ParametersVideo from @skillsoft/gamut/Video — it is
- not included in @skillsoft/gamut's default export.
-
- }
-/>
-
-## Installation
-
-`Video`'s player libraries are peer dependencies of `@skillsoft/gamut`, so they aren't installed automatically. They're only needed if you import from `@skillsoft/gamut/Video`; the main `@skillsoft/gamut` barrel never loads them, so apps that don't use `Video` can skip them. Add them alongside Gamut to use `Video` (or the Markdown `Iframe`/`MarkdownVideo` overrides):
-
-```bash
-yarn add @vidstack/react@~1.12.12 react-player@^3.4.0
-```
-
-Pin the versions: `@vidstack/react`'s npm `latest` tag still points to 0.6.x (1.x is published under `next`), so a bare `yarn add @vidstack/react` installs 0.6, which lacks the `@vidstack/react/player/layouts/default` subpath `Video` imports and fails with `Module not found`. Versions 1.14+ use static class blocks, which break Jest in repos whose Babel config can't parse them (see "Babel and newer syntax" on the Installation page).
-
-Without them, your bundler will fail with `Can't resolve '@vidstack/react'` (or `'react-player'`) when you import from `@skillsoft/gamut/Video`.
-
-## Usage
-
-```tsx
-import { Video } from '@skillsoft/gamut/Video';
-```
-
-The `Video` component is a video player that supports multiple video sources and formats with enhanced accessibility features.
-
-### Key features
-
-- **Multiple sources**: Supports YouTube, Vimeo, HLS, and DASH video streams
-- **Accessibility**: Enhanced keyboard navigation and screen reader support
-- **Internationalization**: Customizable UI text through translations props
-- **Captions**: Supports multiple caption formats (VTT, SRT, SSA)
-- **Chapters**: Video chapter navigation support
-- **Thumbnails**: Preview thumbnails on timeline hover
-- **Gestures**: Touch and mouse gesture controls
-
-### Best practices
-
-- Always provide descriptive video titles for accessibility
-- Include captions when possible
-- Use appropriate poster images for better initial loading experience
-- Some videos might have settings where you cannot share/embed them, make sure to check the video URL before making the Video go live
-
-## Variants
-
-### HLS Stream With Captions, Chapters And Thumbnails
-
-
-
-### YouTube Video
-
-
-
-### Vimeo Video
-
-
-
-## Playground
-
-
-
-` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure), and the description is displayed in a [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption). This semantic structure helps screen readers and other assistive technologies understand the relationship between the chart and its description.
-
-**Preferred pattern: Visual title + description**
-
-Provide both `title` and `description` props to make the chart's purpose and key takeaways clear to all users:
-
-- `title`: A heading that identifies the chart. Can be a string or an object with `{ as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', title: string, variant?: Text['variant'] }` to specify the heading level and optionally override the default styling with a Text variant . Use semantic heading levels (h1–h6) so the surrounding document outline stays correct.
-- `description`: **Required.** A summary of the information or the overall takeaway displayed in the `` element.
-- When the visible title lives outside the chart, use `aria-labelledby` to point at that heading (see below). The referenced element must exist and have an accessible name.
-
-
-
-**Alternative patterns:**
-`hideTitle` and `hideDescription` will keep the screenreader text but hide the visual descriptions.
-
-
-
-**External title with visual description:** Use `aria-labelledby` for the title when the title exists elsewhere but you want to display the description.
-
-
-
-## Sorting
-
-`BarChart` includes an optional sorting dropdown in the title area. The dropdown only renders when the `sortFns` prop is provided. You can control which sort options appear by including string literals or custom sort functions in the array.
-
-**String Literals:**
-
-- `'alphabetically'` - Adds both "Label (A-Z)" and "Label (Z-A)" options
-- `'numerically'` - Adds both "Value (Low-High)" and "Value (High-Low)" options
-- `'none'` - Adds "None" option (preserves original order)
-
-**Custom Sort Functions:**
-You can also provide custom sort functions as objects with:
-
-- `label`: The text displayed in the dropdown
-- `value`: A unique identifier for the sort option
-- `sortFn`: A function that takes an array of bars and returns a sorted array
-
-**Type Definition:**
-
-```typescript
-type CustomSortOption = {
- label: string;
- value: string;
- sortFn: (bars: TBar[]) => TBar[];
-};
-
-// sortFns prop accepts:
-sortFns?: ('alphabetically' | 'numerically' | 'none' | CustomSortOption)[]
-```
-
-**Automatic Type Inference:**
-TypeScript automatically infers the bar type from your `barValues` prop. This means custom properties (like `dateAdded`, `category`, etc.) are automatically typed in your sort functions - no type assertions needed!
-
-```typescript
-const barsWithDates = [
- {
- categoryLabel: 'Python',
- seriesOneValue: 1500,
- dateAdded: new Date('2023-01-15'),
- },
- {
- categoryLabel: 'JavaScript',
- seriesOneValue: 2000,
- dateAdded: new Date('2023-03-20'),
- },
- // ...
-];
-
- {
- // TypeScript automatically knows bars have dateAdded property!
- return [...bars].sort((a, b) => {
- const aDate = a.dateAdded as Date | undefined;
- const bDate = b.dateAdded as Date | undefined;
- if (!aDate || !bDate) return 0;
- return bDate.getTime() - aDate.getTime();
- });
- },
- },
- ]}
-/>;
-```
-
-**Note:** Since `BarProps` uses `Record` for extensibility, custom properties are typed as `unknown` by default. You may need a simple type assertion (`as Date | undefined`) when accessing them, but the property names are fully type-checked.
-
-
-
-**Example with Custom Sort Functions:**
-
-Custom sort functions can access additional properties on `BarProps` for domain-specific sorting, such as sorting by dates or categories.
-
-
-
-## Custom styling
-
-`BarChart` supports custom color styling through the `styleConfig` prop, allowing you to customize the appearance of chart elements to match your design needs.
-
-### Style configuration options
-
-The `styleConfig` prop accepts an object with the following optional properties:
-
-- **`textColor`**: Color for each bar row's `categoryLabel`. Defaults to `'text'`
-- **`seriesOneBarColor`**: Color for the bar that represents `seriesOneValue` (the only bar in simple charts; the overlay segment in stacked charts). Defaults to `'text'`
-- **`seriesTwoBarColor`**: Color for the bar that represents `seriesTwoValue` (the full-length bar behind the overlay in stacked charts; unused when only `seriesOneValue` is set). Defaults to `'primary'`
-- **`seriesOneLabel`**: Color for the numeric label for `seriesOneValue` (when stacked: the value before the arrow). In simple charts, color for the value label beside the bar (`seriesOneValue`). Defaults to `'text-secondary'`
-- **`seriesTwoLabel`**: Color for the numeric label for `seriesTwoValue` (stacked charts only—the total at the end of the bar). Defaults to `'primary'`
-
-All color values should be valid color tokens from the Gamut design system. When customizing colors, ensure they maintain at least a 3:1 contrast ratio with the background for accessibility.
-
-
-
-## Custom scale
-
-`BarChart` allows you to customize the scale interval using the `scaleInterval` prop, which controls the spacing and granularity of scale markers that measure the length of the bars.
-
-### Scale configuration
-
-The `scaleInterval` prop determines the interval between scale markers that show the length of the bars. By default, `BarChart` automatically calculates an appropriate scale interval based on the `maxScaleValue` value (the scale always starts at 0). However, you can override this with a custom interval to achieve more granular or specific scale markings.
-
-**When to use custom scale:**
-
-- When you need specific scale intervals (e.g., increments of 250, 500, or 1000)
-- When the automatic scale calculation doesn't provide the desired granularity
-- When you want to match scale intervals across multiple charts for consistency
-- When you need scale markers at specific values for better data interpretation
-
-**How it works:**
-
-The `scaleInterval` value represents the interval between consecutive scale markers. For example:
-
-- `scaleInterval: 250` creates markers at 0, 250, 500, 750, 1000, etc.
-- `scaleInterval: 500` creates markers at 0, 500, 1000, 1500, 2000, etc.
-
-The number of tick marks is automatically calculated as: `Math.ceil(maxScaleValue / scaleInterval) + 1`
-
-### Example
-
-
-
-## Color modes
-
-`BarChart` uses semantic color tokens via `styleConfig`, so colors automatically adapt to light and dark color modes to ensure proper contrast and readability in all themes.
-
-## Accessibility considerations
-
-### Chart and row labeling
-
-**Chart-level labeling:**
-
-- Always provide either `title` or `aria-labelledby` to describe the chart (see Title and description section below for details)
-- The chart is wrapped in a semantic `
` element for proper structure
-
-**Row-level labeling:**
-
-- For non-interactive bars: A hidden text element (visible only to screen readers) is automatically added as the first child of each list item, summarizing the bar's values (e.g., "100 XP in Python")
-- For interactive bars (with `onClick` or `href`): An `aria-label` is automatically generated from the bar's data and applied to the button or link element, ensuring proper screen reader announcements
-- All accessibility labels are automatically generated from the bar's data - no manual `aria-label` props are required
-
-## UX writing
-
-- Keep the category labels concise (1-3 words)
-- Use consistent unit labels (e.g., "XP", "hours", "points")
-- Consider locale-aware number formatting for international audiences
-
-## Interactive states
-
-`BarChart` supports both interactive and static bar rows, each with distinct visual states.
-
-### Static bars
-
-When bars have neither `onClick` handlers nor `href` links, they are rendered as static, non-interactive elements.
-
-
-
-### Interactive bars
-
-When bars have `onClick` handlers or `href` links, they become interactive. Interactive bars are rendered as buttons or anchor elements, providing full keyboard accessibility and proper semantic HTML.
-
-
-
-## Internationalization
-
-
-
-
-
-### Basic usage
-
-Provide only the translations you want to override; the rest fall back to default English.
-
-```tsx
-
- `Valor inicial - ${ctx.seriesOneValue} ${ctx.unit}. ${ctx.gained} ${ctx.unit} ganado - ahora en ${ctx.seriesTwoValue} ${ctx.unit} en ${ctx.categoryLabel}`,
- singleValueBarSummary: (ctx) =>
- `${ctx.value} ${ctx.unit} en ${ctx.categoryLabel}`,
- },
- locale: 'es',
- sortLabel: 'Ordenar por:',
- sortOptions: {
- labelAsc: 'Etiqueta (A-Z)',
- labelDesc: 'Etiqueta (Z-A)',
- none: 'Ninguno',
- valueAsc: 'Valor (Bajo-Alto)',
- valueDesc: 'Valor (Alto-Bajo)',
- },
- }}
-/>
-```
-
-
-
-### Partial translations and locale
-
-You can override a single key; the rest keep their defaults. The **locale** property controls number formatting (scale labels, value labels) via `Intl.NumberFormat`:
-
-```tsx
-// Only change locale; sort and accessibility use defaults
-translations={{ locale: 'de-DE' }}
-
-// Override just sort label and locale
-translations={{
- locale: 'en-GB',
- sortLabel: 'Sort by:',
-}}
-```
-
-
-
-**Best practices:**
-
-- Provide summary functions for the locales your app uses; use default behavior when the default English is acceptable.
-- Use appropriate locale codes (e.g. `'en-US'`, `'es-ES'`, `'fr-FR'`) for number formatting.
-- Test accessibility summaries with screen readers in the target language.
-- Reuse translation objects across BarChart instances where possible.
-
-## Container query
-
-BarChart uses CSS container queries to determine responsive behavior based on the **chart container width** rather than viewport width. This ensures optimal display when the chart is placed in constrained layouts like sidebars or narrow columns.
-
-**Layout behavior:**
-
-- **Narrow container (below 480px)**: Label and value appear together above the bar in a single row.
-- **Wide container (480px and up, `c_xs` breakpoint)**: Label on the left, bar in the center, value on the right.
-
-The chart establishes a size container via `containerType="inline-size"` on the figure wrapper, so the layout responds to the width of the BarChart’s parent. For more on container queries in Gamut, see Responsive properties .
-
-## Playground
-
-
-
- = {
- component: BarChart,
- args: {
- description: 'Chart showing programming language experience levels',
- maxScaleValue: 2000,
- title: 'Skills experience chart',
- unit: 'XP',
- },
-};
-
-export default meta;
-type Story = StoryObj;
-
-const simpleBarData: BarProps[] = [
- { categoryLabel: 'Python', seriesOneValue: 1500 },
- { categoryLabel: 'JavaScript', seriesOneValue: 2000 },
- { categoryLabel: 'HTML/CSS', seriesOneValue: 800 },
- { categoryLabel: 'SQL', seriesOneValue: 600 },
- { categoryLabel: 'React', seriesOneValue: 450 },
-];
-
-const stackedBarData: BarProps[] = [
- { categoryLabel: 'Python', seriesOneValue: 200, seriesTwoValue: 1500 },
- {
- categoryLabel: 'JavaScript',
- icon: TerminalIcon,
- seriesOneValue: 1800,
- seriesTwoValue: 2000,
- },
- { categoryLabel: 'HTML/CSS', seriesOneValue: 600, seriesTwoValue: 800 },
- { categoryLabel: 'SQL', seriesOneValue: 550, seriesTwoValue: 600 },
- { categoryLabel: 'React', seriesOneValue: 300, seriesTwoValue: 450 },
-];
-
-const accessibilityBarData: BarProps[] = [
- { categoryLabel: 'Python', seriesOneValue: 200, seriesTwoValue: 1500 },
- {
- categoryLabel: 'JavaScript',
- seriesOneValue: 1800,
- seriesTwoValue: 2000,
- href: '/javascript',
- },
- { categoryLabel: 'HTML/CSS', seriesOneValue: 600, seriesTwoValue: 800 },
- { categoryLabel: 'SQL', seriesOneValue: 550, href: '/sql' },
- { categoryLabel: 'Rust', seriesOneValue: 400 },
- { categoryLabel: 'React', seriesOneValue: 300, seriesTwoValue: 450 },
-];
-
-const accessibilityTranslations: PartialBarChartTranslations = {
- accessibility: {
- stackedBarSummary: (ctx) =>
- `${ctx.seriesOneValue} ${ctx.unit} gained — now at ${ctx.seriesTwoValue} ${ctx.unit} in ${ctx.categoryLabel}`,
- singleValueBarSummary: (ctx) =>
- `${ctx.value} ${ctx.unit} in ${ctx.categoryLabel}`,
- },
- locale: 'en',
-};
-
-const barDataWithIcons: BarProps[] = [
- {
- categoryLabel: 'Python',
- seriesOneValue: 200,
- seriesTwoValue: 1500,
- icon: TerminalIcon,
- },
- {
- categoryLabel: 'JavaScript',
- seriesOneValue: 150,
- seriesTwoValue: 2000,
- icon: TerminalIcon,
- },
- {
- categoryLabel: 'Data Science',
- seriesOneValue: 100,
- seriesTwoValue: 800,
- icon: DataScienceIcon,
- },
- {
- categoryLabel: 'Backend',
- seriesOneValue: 50,
- seriesTwoValue: 600,
- icon: TerminalIcon,
- },
- {
- categoryLabel: 'Reading',
- seriesOneValue: 75,
- seriesTwoValue: 450,
- icon: BookFlipPageIcon,
- },
-];
-
-export const Default: Story = {
- args: {
- barValues: simpleBarData,
- title: 'Skills experience chart',
- description: 'Chart showing programming language experience levels',
- },
-};
-
-export const Stacked: Story = {
- args: {
- barValues: stackedBarData,
- title: 'Skills progress chart',
- description: 'Progress toward total goals for each programming language',
- },
-};
-
-export const WithIcons: Story = {
- args: {
- barValues: barDataWithIcons,
- title: 'Skills progress with icons',
- description: 'Skills progress with visual icons for each category',
- },
-};
-
-export const Animated: Story = {
- args: {
- barValues: stackedBarData,
- animate: true,
- title: 'Animated skills chart',
- description: 'Animated chart showing progress with entrance animations',
- },
-};
-
-export const Interactive: Story = {
- args: {
- barValues: simpleBarData.map((bar) => ({
- ...bar,
- onClick: action(`Clicked ${bar.categoryLabel}`),
- })),
- title: 'Interactive skills chart',
- description: 'Click on any row to view detailed course information',
- },
-};
-
-export const WithLinks: Story = {
- args: {
- barValues: simpleBarData.map((bar) => ({
- ...bar,
- href: `#${bar.categoryLabel.toLowerCase().replace(/\s+/g, '-')}`,
- })),
- title: 'Skills chart with links',
- description: 'Each row links to its corresponding course page',
- },
-};
-
-export const WithVisualTitleAndDescription: Story = {
- args: {
- barValues: simpleBarData,
- title: 'Programming Skills Overview',
- description:
- 'Experience points earned across different programming languages',
- },
-};
-
-export const WithHiddenTitleAndDescription: Story = {
- render: () => {
- return (
-
- Programming Skills Overview
-
- GridForm but without the strict grid structure.
-
-### Components
-
-- `ConnectedForm`: A Form that provides context to all `Connected` components.
-- `ConnectedFormGroup`: FormGroups that use the context provided by `ConnectedForm` for error and disabled states.
-- `ConnectedFormInputs`: FormInputs the use the context provided by `ConnectedForm` for field registration and validation as well as required and disabled states. Should be used through `ConnectedFormGroup`.
-- `SubmitButton`: A submit type Button that uses the context provided by `ConnectedForm` for loading and disabled states.
-
-### Utilities
-
-The primary access pattern of `ConnectedForm` is the `useConnectedForm` hook which composes a typesafe version of `ConnectedForm` + `ConnectedFormGroup` from the `defaultValues` passed to it - catching errors before the development enviroment is even started.
-
-Each of your fields' names must correspond with the appropriate `defaultValue` key. `validationRules` operates similarly - each key must correspond to a key in `defaultValue` and must follow [react-hook-form's](https://react-hook-form.com) [validation patterns](https://react-hook-form.com/v6/api#register).
-
-This hook also returns the `FormRequiredText` component - include this before your form unless all of your form fields are optional.
-
-### Example code
-
-```tsx
-import {
- ConnectedCheckbox,
- ConnectedInput,
- ConnectedSelect,
- useConnectedForm,
-} from '@skillsoft/gamut';
-
-import { TerminalIcon } from '@skillsoft/gamut-icons';
-
-export const GoodForm = () => {
- const {
- ConnectedFormGroup,
- ConnectedForm,
- connectedFormProps,
- FormRequiredText,
- } = useConnectedForm({
- defaultValues: {
- thisField: true,
- thatField: 'zero',
- anotherField: 'state your name.',
- },
- validationRules: {
- thisField: { required: 'you need to check this.' },
- thatField: {
- pattern: {
- value: /^(?:(?!zero).)*$/,
- message: 'literally anything but zero',
- },
- },
- },
- });
-
- return (
- console.log(thisField)}
- resetOnSubmit
- {...connectedFormProps}
- >
- submit this form.
-
- );
-};
-```
-
-## Variants
-
-### `watchedFields`
-
-If you need the values of your inputs before submission, for something like conditionally generating different inputs, you can also pass in a `watchedFields` object. This takes in an array of names of fields to watch and a `watchHandler ` function which will be run `onChange` of your watchedField. This function should take an array of the return values of the inputs in the order the names are passed in to the `fields` props.
-
-Watched fields aren't usually great for performance, so only use these fields when you need to.
-
-
-
-### `customValidations`
-
-When validation rules need to depend on runtime values — such as one field's selection determining what's valid in another — each connected input accepts a `customValidations` prop. Unlike `validationRules` (which is memoized on mount), `customValidations` re-evaluates on every render, making it the right tool for rules that need to change based on component state.
-
-See ConnectedFormInputs for full usage details.
-
-
-
-## Playground
-
-
-
- = {
- component: ConnectedForm,
- args: {},
-};
-
-export default meta;
-
-export const Default = () => {
- const { ConnectedFormGroup, ConnectedForm, connectedFormProps } =
- useConnectedForm({
- defaultValues: {
- checkboxField: false,
- selectField: 'zero',
- inputField: '',
- radioGroupField: undefined,
- textAreaField: '',
- nestedCheckboxesField: ['angular', 'typescript', 'backend'],
- },
- validationRules: {
- checkboxField: { required: 'you need to check this.' },
- selectField: {
- pattern: {
- value: /^(?:(?!zero).)*$/,
- message: 'literally anything but zero',
- },
- },
- inputField: { required: 'we need this info, bud' },
- radioGroupField: { required: 'we need this info too, bud' },
- textAreaField: {
- required: 'you just have to fill out the whole thing, okay?',
- },
- },
- });
-
- return (
- {
- action('Form Submitted')(values);
- // eslint-disable-next-line no-console
- console.log('Form Submitted', values);
- }}
- {...connectedFormProps}
- >
- submit this form
- check it ouuut,
- 'aria-label': 'aria label',
- }}
- label="checkbox field"
- name="checkboxField"
- />
-
-
- // eslint-disable-next-line no-console
- console.log('Selected:', selectedValues),
- }}
- label="nested checkboxes field"
- name="nestedCheckboxesField"
- />
-
- );
-};
-
-export const WatchedFields = () => {
- const [showRadio, setShowRadio] = useState(false);
- const [lastFormValues, setLastFormValues] = useState({
- checkbox: 'not submitted',
- radioGroup: 'not submitted',
- });
-
- const handleWatch = (values: string[]) => {
- const [checkbox] = values;
- return checkbox ? setShowRadio(true) : setShowRadio(false);
- };
-
- const { ConnectedFormGroup, ConnectedForm, connectedFormProps } =
- useConnectedForm({
- defaultValues: {
- checkbox: false,
- radioGroup: undefined,
- },
- validationRules: {
- radioGroup: {
- required: 'please fill this out.',
- },
- },
- watchedFields: {
- fields: ['checkbox', 'radioGroup'],
- watchHandler: handleWatch,
- },
- });
-
- return (
- errors}
- onSubmit={({ checkbox, radioGroup }) => {
- setLastFormValues({
- checkbox: `${checkbox}`,
- radioGroup: `${radioGroup}`,
- });
- }}
- {...connectedFormProps}
- >
-
- your last answers were {lastFormValues.checkbox} and{' '}
- {lastFormValues.radioGroup}!
-
- submit the form, please
-
- );
-};
-
-const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
-
-export const CustomFieldValidations = () => {
- const [numberType, setNumberType] = useState('even');
-
- // validationRules are memoized on mount, so the "must be even/odd" rule
- // can't live there — it depends on numberType's runtime value. customValidations
- // on the field prop re-evaluates each render, making this cross-field
- // dependency possible.
- const { ConnectedFormGroup, ConnectedForm, connectedFormProps } =
- useConnectedForm({
- defaultValues: { numberType: 'even', number: '' },
- validationRules: {
- numberType: { required: 'Please select a number type' },
- number: { required: 'Please select a number' },
- },
- watchedFields: {
- fields: ['numberType'],
- watchHandler: ([type]: string[]) => setNumberType(type),
- },
- });
-
- return (
- {
- action('Form Submitted')(values);
- }}
- {...connectedFormProps}
- >
- {
- if (!value) return true;
- const num = parseInt(value, 10);
- if (numberType === 'even') {
- return num % 2 === 0 || `${value} is odd — pick an even number`;
- }
- return num % 2 !== 0 || `${value} is even — pick an odd number`;
- },
- },
- }}
- label={`Pick an ${numberType} number`}
- name="number"
- />
- Submit
-
- );
-};
diff --git a/packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormGroup/ConnectedFormGroup.mdx b/packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormGroup/ConnectedFormGroup.mdx
deleted file mode 100644
index 561d8b5688..0000000000
--- a/packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormGroup/ConnectedFormGroup.mdx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-
-import { ComponentHeader, LinkTo } from '~styleguide/blocks';
-
-import * as ConnectedFormGroupStories from './ConnectedFormGroup.stories';
-
-export const parameters = {
- title: 'ConnectedFormGroup',
- subtitle: `A form group for the ConnectedForm component.`,
- status: 'updating',
- source: {
- repo: 'gamut',
- githubLink:
- 'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/ConnectedForm/ConnectedFormGroup.tsx',
- },
-};
-
-
-
-FormGroup that uses the context provided by `ConnectedForm` for error and disabled states. This component ensures that every field has proper error handling and accessibility. It also will type its `field` to the proper `ConnectedFormInput` passed into `component`.
-
-`ConnectedFormGroup` should primarly be used with the `useConnectedForm` hook. Below is an example, notice that the `options` prop should have elements in its array that contain both a `label` and `value` property:
-
-```tsx
-ConnectedForm page.
-
-
-
-> = {
- component: ConnectedFormGroup,
- args: {
- field: {
- component: ConnectedRadioGroupInput,
- options: [
- { label: 'one', value: 'one' },
- { label: 'two', value: 'two' },
- { label: 'zero', value: 'zero' },
- ],
- } as ConnectedFormGroupProps['field'],
- label: 'i am a label',
- name: 'radioGroupExample',
- },
- argTypes: {
- loading: {
- control: 'boolean',
- },
- disabled: {
- control: 'boolean',
- },
- ...infotipNestedArgTypes,
- },
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
- render: (args) => (
- {
- action('Form Submitted')(values);
- }}
- >
-
- ),
-};
-
-export const States = () => {
- const { ConnectedFormGroup, ConnectedForm, connectedFormProps } =
- useConnectedForm({
- defaultValues: {
- radioGroup: undefined,
- radioGroupError: undefined,
- radioGroupDisabled: undefined,
- },
- validationRules: {
- radioGroup: {
- required: 'please fill this out.',
- },
- },
- });
-
- return (
- {
- action('Form Submitted')(values);
- }}
- {...connectedFormProps}
- >
-
- );
-};
-
-export const InfoTipAutoLabelling: Story = {
- render: () => (
- action('Form Submitted')(values)}
- >
-
- ),
-};
-
-export const InfoTipWithReactNodeLabel: Story = {
- render: () => (
- action('Form Submitted')(values)}
- >
-
- API Configuration
-
-
- Username (automatic label)
-
- }
- name="username"
- />
-
- Password (ariaLabel)
-
- }
- name="password"
- />
-
- API Key (ariaLabelledby)
-
- }
- name="apiKey"
- />
-
- ),
-};
diff --git a/packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormInputs/ConnectedFormInputs.mdx b/packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormInputs/ConnectedFormInputs.mdx
deleted file mode 100644
index c5c22c2f11..0000000000
--- a/packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormInputs/ConnectedFormInputs.mdx
+++ /dev/null
@@ -1,193 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-import { ComponentHeader, LinkTo } from '~styleguide/blocks';
-
-import * as ConnectedFormInputsStories from './ConnectedFormInputs.stories';
-import { ConnectedFormInputsTable } from './ConnectedFormInputsTable';
-
-export const parameters = {
- title: 'ConnectedFormInputs',
- subtitle: `Different form inputs for the ConnectedForm component.`,
- status: 'updating',
- source: {
- repo: 'gamut',
- githubLink:
- 'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/ConnectedForm/ConnectedInputs/index.ts',
- },
-};
-
-
-
-FormInput counterparts. Please reference the links below for component-specific prop and styling configuration:
-
-RadioGroup .
-
-`ConnectedRadioGroup` and `ConnectedRadio` should rarely, if ever, be used outside of `ConnectedRadioGroupInput`.
-
-### ConnectedNestedCheckboxes
-
-`ConnectedNestedCheckboxes` is a component that allows you to create a nested checkbox group. It is a wrapper around the `ConnectedCheckbox` component and takes in an array `NestedCheckboxOption`s. Infinite levels of nesting are supported. Clicking a parent checkbox toggles all its children accordingly. Individual child checkboxes can be toggled independently. Checkbox states are `checked` if all children are checked, `indeterminate` if some children are checked, or `unchecked` if no children are checked. The values returned by the form on submit or update are an array of all selected values, including all children.
-
-```tsx
-ConnectedFormGroup , like so:
-
-```tsx
- ...}
- >
-
- )
-}
-```
-
-`useDebouncedField` should not be used with any varaint of the standard `ConnectedInput`, as it will clash with the default `useField` instance used internally by those components.
-
-## Field-level custom validations
-
-Form-level `validationRules` (passed to `useConnectedForm`) are memoized on mount and cannot change after the form is created. When you need validation rules that depend on runtime values — for example, when one field's selection determines what's valid in another field — pass `customValidations` directly to any connected input or to the `field` prop of `ConnectedFormGroup`.
-
-`customValidations` accepts the same [react-hook-form `RegisterOptions`](https://react-hook-form.com/docs/useform/register) as `validationRules`, re-evaluates on every render, and is merged with any matching form-level rules (with `customValidations` taking priority when both define the same key).
-
-```tsx
-// The valid parity of `number` depends on `numberType`, a runtime value.
-// That rule can't live in validationRules (memoized), so it goes in customValidations.
-const [numberType, setNumberType] = useState('even');
-
- {
- const num = parseInt(value, 10);
- return numberType === 'even'
- ? num % 2 === 0 || `${value} is odd — pick an even number`
- : num % 2 !== 0 || `${value} is even — pick an odd number`;
- },
- },
- }}
-/>;
-```
-
-Use `watchedFields` (see ConnectedForm ) to keep external state in sync with the field driving the conditional rule.
diff --git a/packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormInputs/ConnectedFormInputs.stories.tsx b/packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormInputs/ConnectedFormInputs.stories.tsx
deleted file mode 100644
index e8fba9b7bf..0000000000
--- a/packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormInputs/ConnectedFormInputs.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Box } from '@skillsoft/gamut';
-import type { Meta, StoryObj } from '@storybook/react';
-
-// This file only exists because ConnectedFormInputs would break without it
-// since it requires a Meta and stories to render the page in Storybook
-const meta: Meta = {
- component: Box,
- args: {},
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
- args: {},
-};
diff --git a/packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormInputs/ConnectedFormInputsTable.tsx b/packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormInputs/ConnectedFormInputsTable.tsx
deleted file mode 100644
index 3ec8138adb..0000000000
--- a/packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormInputs/ConnectedFormInputsTable.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Box, List, ListCol, ListRow, Text } from '@skillsoft/gamut';
-import type * as React from 'react';
-
-import { LinkTo } from '~styleguide/blocks';
-
-interface ListRowRendererProps {
- inputs: { name: string; counterpart: string }[];
-}
-
-const ListRowRenderer: React.FC = ({ inputs }) => {
- return (
- <>
- {inputs.map(({ name, counterpart }) => {
- return (
-
-
-
- {name}
-
-
-
-
- {counterpart}
-
-
-
- );
- })}
-
- );
-};
-
-export const ConnectedFormInputsTable = () => {
- return (
-
-
- );
-};
diff --git a/packages/styleguide/src/lib/Organisms/ConnectedForm/SubmitButton/SubmitButton.mdx b/packages/styleguide/src/lib/Organisms/ConnectedForm/SubmitButton/SubmitButton.mdx
deleted file mode 100644
index aa243c8aef..0000000000
--- a/packages/styleguide/src/lib/Organisms/ConnectedForm/SubmitButton/SubmitButton.mdx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-
-import { ComponentHeader, LinkTo } from '~styleguide/blocks';
-
-import * as SubmitButtonStories from './SubmitButton.stories';
-
-export const parameters = {
- title: 'SubmitButton',
- subtitle: `A submit type button for ConnectedForm.`,
- status: 'current',
- source: {
- repo: 'gamut',
- githubLink:
- 'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/ConnectedForm/SubmitButton.tsx',
- },
-};
-
-
-
-Button that uses the context provided by `ConnectedForm` for loading and disabled states. Must be used within ConnectedForm .
-
-### Example Code
-
-```tsx
-import {
- ConnectedInput,
- useConnectedForm,
- SubmitButton,
-} from '@skillsoft/gamut';
-
-export const NiceForm = () => {
- const { ConnectedFormGroup, ConnectedForm, connectedFormProps } =
- useConnectedForm({
- defaultValues: {
- inputField: 'default sentence',
- },
- validationRules: {
- inputField: { required: 'you gotta say something' },
- },
- });
-
- return (
- submit(values)}
- {...connectedFormProps}
- >
- submit my form!
-
- );
-};
-```
-
-## States
-
-A `SubmitButton` can have 3 different states:
-
-- `default` being a standard button that can be interacted with.
-- `loading` that displays a spinner inside the button and prevents the button from being clicked.
-- `disabled` being a button that is disabled and therefore not interactable.
-
-
-
-## Playground
-
-
-
- = {
- component: SubmitButton,
- args: {},
- argTypes: {
- loading: {
- control: 'boolean',
- },
- disabled: {
- control: 'boolean',
- },
- as: {
- table: {
- disable: true,
- },
- },
- },
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
- render: (args) => (
- {
- action('Form Submitted')(values);
- }}
- >
-
- submit the form, please
-
-
- ),
-};
-
-export const States = () => {
- return (
- {
- action('Form Submitted')(values);
- }}
- >
-
- default
- submit the form, please
-
-
- loading
-
- submit the form, please
-
-
-
- disabled
-
- you cannot submit this form
-
-
-
- );
-};
diff --git a/packages/styleguide/src/lib/Organisms/DatePicker/DatePicker.mdx b/packages/styleguide/src/lib/Organisms/DatePicker/DatePicker.mdx
deleted file mode 100644
index 4cfdcb7d73..0000000000
--- a/packages/styleguide/src/lib/Organisms/DatePicker/DatePicker.mdx
+++ /dev/null
@@ -1,420 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-
-import {
- ComponentHeader,
- ImageWrapper,
- KeyboardKey,
- LinkTo,
-} from '~styleguide/blocks';
-
-import * as DatePickerStories from './DatePicker.stories';
-import { ErrorMessagesTable } from './errorMessagesTable';
-
-export const parameters = {
- title: 'DatePicker',
- design: {
- type: 'figma',
- url: 'https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=127461-42132',
- },
- subtitle: `Single-date or range selection with a segmented date field, calendar popover, footer quick actions, and shared React context for custom layouts.`,
- status: 'updating',
- source: {
- repo: 'gamut',
- githubLink:
- 'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/DatePicker/DatePicker.tsx',
- },
-};
-
-
-
-Select or SelectDropdown component instead
-
-## Anatomy
-
-Alt + ↓ or Option + ↓ when an input is focused
-- Closes automatically once the selection is complete
-- Selecting a date in the calendar updates the manual inputs immediately
-- Clicking an already-selected date clears it
-- Displays 2 months by default; collapses to 1 month at viewports below 768px
-
-4. **Today**
-
-- Indicates the current date on the calendar to orient the user
-- Indicator is primary-colored when the date is not selected; switches to the background token when selected
-
-5. **Disabled dates** _(optional)_
-
-- Use to mark specific dates as non-selectable
-- If a selected range overlaps any disabled date, the range is invalid
-- An invalid range clears the End date and treats the click as a new Start date selection
-
-6. **Clear**
-
-- Clears all current date selections
-- Only shown if `mode="range"`
-
-7. **Quick actions** _(optional)_
-
-- Use when you expect users to frequently select common dates or ranges
-- Defaults: "Last 7 days," "Last 30 days," "Last 90 days" for `mode="range"`; "Yesterday," "Today," "Tomorrow" for `mode="single"`
-- Include up to 3 actions
-- Use range quick actions when `mode="range"`; use single-date quick actions when `mode="single"`
-- For past date ranges, use "Last" as the label prefix (e.g., "Last 7 days")
-- Quick action ranges are inclusive of today
-- If the resulting range overlaps any disabled dates, no action is taken
-
-## Variants
-
-### Single date
-
-Use `mode="single"` when users need to select a single date.
-
-`selectedDate` and `onSelected` are the controlled value and updater and are required props.
-
-```tsx
-const [selectedDate, setSelectedDate] = useState(null);
-return (
- (null);
-const [endDate, setEndDate] = useState(null);
-return (
- {}}
- endDate={null}
- onEndSelected={() => {}}
- disableDate={matchDisabledDates([new Date(2026, 3, 22)])}
-/>
-```
-
-
-
-### Disable dates based on the current date
-
-Example of disabling dates that are before today:
-
-```tsx
- {}}
- endDate={null}
- onEndSelected={() => {}}
- disableDate={(date) => date < new Date()}
-/>
-```
-
-
-
-Example of disabling dates that are more than 30 days before today:
-
-```tsx
- {}}
- endDate={null}
- onEndSelected={() => {}}
- disableDate={(date) => {
- const today = new Date();
- const thirtyDaysAgo = new Date(
- today.getFullYear(),
- today.getMonth(),
- today.getDate() - 30
- );
- return date < thirtyDaysAgo;
- }}
-/>
-```
-
-
-
-### Disable dates based on the start date
-
-We can limit the range of dates that can be selected based on the start date. For example, here we are disabling dates that are more than 30 days before or after the start date, effectively limiting the range to 30 days.
-
-```tsx
- {}}
- endDate={null}
- onEndSelected={() => {}}
- disableDate={(date) => {
- if (startDate === null) {
- return false;
- }
- const start = calendarDate(startDate);
- const min = new Date(start);
- min.setDate(min.getDate() - 30);
- const max = new Date(start);
- max.setDate(max.getDate() + 30);
- const day = calendarDate(date);
- return day < min || day > max;
- }}
-/>
-```
-
-
-
-### Disable weekends
-
-```tsx
- {}}
- endDate={null}
- disableDate={(date) => date.getDay() === 0 || date.getDay() === 6}
-/>
-```
-
-
-
-## Error handling
-
-Typed dates are validated as they are entered and again on blur. An invalid entry shows an error beneath the input and switches its border to the error variant; in `mode="range"`, each input surfaces its own error. Invalid inputs stay visible so the user can correct it, and clearing all segments clears the selection.
-
-To see errors in action, open any story and type an incomplete or invalid date and blur the input.
-
-Each scenario maps to a translation key (see [Translations](#translations)):
-
- =
- {
- clearButtonText: 'Clear',
- dateLabel: 'Date',
- startDateLabel: 'Start date',
- endDateLabel: 'End date',
- calendarDialogAriaLabel: 'Choose date',
- openCalendarLabel: 'Open calendar',
- last7DaysDisplayText: 'Last 7 days',
- last30DaysDisplayText: 'Last 30 days',
- last90DaysDisplayText: 'Last 90 days',
- invalidDate: 'Invalid date',
- invalidDateIncomplete: 'Incomplete date',
- invalidDateInvalidMonth: 'Month must be between 1 and 12',
- invalidDateInvalidDay: '{{month}} does not have {{day}} days',
- invalidDateRollover: '{{month}} does not have {{day}} days',
- invalidDateNotAvailable: 'This date is not available',
- invalidDateRangeContainsDisabledDate:
- 'This date range contains unavailable dates',
- };
-```
-
-The `invalidDateInvalidDay` and `invalidDateRollover` keys support the `{{month}}` and `{{day}}` template variables, which are interpolated with the offending values at runtime. See the [Error handling](#error-handling) section for when each message surfaces.
-
-
-
-## Composed with context
-
-`DatePicker` can be rendered with `children` and composed for more flexibility. The following components/hooks are exported and available to use for composition:
-
-- `useDatePicker()` exposes shared shell state. Always narrow on `mode` when mode-specific fields are needed.
-- `DatePickerInput`: month/day/year `role="spinbutton"` segments. In range mode use `rangePart="start"` or `"end"` on each instance.
-- `DatePickerCalendar`: calendar UI wired to context; pass a stable `dialogId` that matches the `id` on the `role="dialog"` wrapper for `aria-labelledby` / `aria-controls` wiring.
-
-Example component to be passed as `children` to `DatePicker`:
-
-```tsx
-export const ComposedDatePickerLayout: React.FC = () => {
- const { isCalendarOpen, closeCalendar } = useDatePicker();
- const inputRef = useRef(null);
-
- return (
- <>
-
-
-
-
-
- );
-};
-```
-
-
-
-## Playground
-
-
-
- = {
- component: DatePicker,
- title: 'Organisms/DatePicker',
- args: {
- mode: 'single',
- locale: 'en-US',
- },
- argTypes: {
- mode: {
- description: 'Pick a single date or a range of dates.',
- type: {
- name: 'enum',
- value: ['single', 'range'],
- required: true,
- },
- control: { type: 'radio' },
- table: { type: { summary: "'single' | 'range'" } },
- },
- locale: {
- description:
- 'BCP 47 language tag for `Intl` segment order, month names, and quick-action relative dates. `undefined` uses runtime default.',
- control: { type: 'select' },
- options: [...storybookLocaleOptions],
- },
- selectedDate: {
- if: { arg: 'mode', eq: 'single' },
- control: false,
- },
- onSelected: {
- if: { arg: 'mode', eq: 'single' },
- control: false,
- },
- startDate: {
- if: { arg: 'mode', eq: 'range' },
- control: false,
- },
- endDate: {
- if: { arg: 'mode', eq: 'range' },
- control: false,
- },
- onStartSelected: {
- if: { arg: 'mode', eq: 'range' },
- control: false,
- },
- onEndSelected: {
- if: { arg: 'mode', eq: 'range' },
- control: false,
- },
- },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {
- decorators: [
- (Story) => (
-
-
- ),
- ],
- render: function DatePickerStory(args) {
- const [selectedDate, setSelectedDate] = useState(null);
- const [startDate, setStartDate] = useState(null);
- const [endDate, setEndDate] = useState(null);
-
- if (args.mode === 'range') {
- return (
-
-
- ),
- ],
- args: { placement: 'inline' },
- render: function DatePickerStory(args) {
- const [selectedDate, setSelectedDate] = useState(null);
- return (
-
-
- ),
- ],
- args: { placement: 'inline' },
- render: function DatePickerStory(args) {
- const [startDate, setStartDate] = useState(null);
- const [endDate, setEndDate] = useState(null);
- return (
- (
- () => new Date(2026, 1, 15)
- );
- return (
- (
- () => new Date(2026, 1, 15)
- );
- const [endDate, setEndDate] = useState(
- () => new Date(2026, 1, 20)
- );
- return (
- (null);
- const [endDate, setEndDate] = useState(null);
- return (
- (null);
- const [endDate, setEndDate] = useState(null);
- return (
- (null);
- return (
- (null);
- const [endDate, setEndDate] = useState(null);
- return (
- (null);
- return (
- (null);
- const [endDate, setEndDate] = useState(null);
- return (
- (null);
- return (
- (null);
- const [endDate, setEndDate] = useState(null);
- return (
- (null);
- const [endDate, setEndDate] = useState(null);
- return (
- (null);
- const [endDate, setEndDate] = useState(null);
-
- return (
- {
- if (startDate === null) {
- return false;
- }
- const start = calendarDate(startDate);
- const min = new Date(start);
- min.setDate(min.getDate() - 30);
- const max = new Date(start);
- max.setDate(max.getDate() + 30);
- const day = calendarDate(date);
- return day < min || day > max;
- }}
- endDate={endDate}
- mode="range"
- startDate={startDate}
- onEndSelected={setEndDate}
- onStartSelected={setStartDate}
- />
- );
- },
-};
-
-export const RangeDisabledBeforeToday: Story = {
- ...fixedMode('range'),
- args: {
- disableDate: (date) => {
- const today = new Date();
- const startOfToday = new Date(
- today.getFullYear(),
- today.getMonth(),
- today.getDate()
- );
- return date < startOfToday;
- },
- placement: 'floating',
- },
- render: function DatePickerStory(args) {
- const [startDate, setStartDate] = useState(null);
- const [endDate, setEndDate] = useState(null);
- return (
- (null);
- const [endDate, setEndDate] = useState(null);
- return (
- (null);
- const [endDate, setEndDate] = useState(null);
- return (
- (null);
- return (
- (null);
- const [endDate, setEndDate] = useState(null);
-
- return (
- (null);
- return (
-
-
- );
- },
-};
-
-const ComposedDatePickerLayout: React.FC = () => {
- const { isCalendarOpen, closeCalendar } = useDatePicker();
- const inputRef = useRef(null);
-
- return (
- <>
-
-
-
-
-
- );
-};
diff --git a/packages/styleguide/src/lib/Organisms/DatePicker/errorMessagesTable.tsx b/packages/styleguide/src/lib/Organisms/DatePicker/errorMessagesTable.tsx
deleted file mode 100644
index f6a42c67f4..0000000000
--- a/packages/styleguide/src/lib/Organisms/DatePicker/errorMessagesTable.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Code, TokenTable } from '~styleguide/blocks';
-
-const errorMessageColumns = [
- {
- key: 'scenario',
- name: 'Scenario',
- size: 'xl' as const,
- render: ({ scenario }: { scenario: React.ReactNode }) => scenario,
- },
- {
- key: 'message',
- name: 'Default message',
- size: 'xl' as const,
- render: ({ message }: { message: React.ReactNode }) => message,
- },
- {
- key: 'translationKey',
- name: 'Translation key',
- size: 'fill' as const,
- render: ({ translationKey }: { translationKey: string }) => (
- Usage to see an overview of how `GridForm` works and interact with a live playground.
-
-All other pages below provide guidance on specific parts of `GridForm`.
-
-`FillButton` or `CTAButton` . The default is `'fill'`.
-
-
-
-
-
-## Inline submit button
-
-We can make the Submit button inline with an input by setting the column
-sizes so they fit on the same row (e.g size 6 for an input and size 4 for
-the submit).
-
-We can additionally remove the label from text inputs and checkbox inputs.
-Use the `hideLabel` prop to remove the label, allowing the submit button to
-align nicely with the input. **However**, if using `hideLabel` to remove the default label, you should provide an `aria-label` and/or include another label to the right/left of the input to ensure the input is accessible.
-
-
-
-## Cancel button
-
-Optionally, include a cancel button.
-
-
-
-## Button states
-
-### Loading
-
-We can set the state of the submit button to `loading` as `true` to show a loading spinner. This is useful when you need to show the user that the form is submitting.
-
-
-
-### Disabled
-
-You can also set `disabled` to `true` to disable submission.
-
-
diff --git a/packages/styleguide/src/lib/Organisms/GridForm/Buttons.stories.tsx b/packages/styleguide/src/lib/Organisms/GridForm/Buttons.stories.tsx
deleted file mode 100644
index c36ab880de..0000000000
--- a/packages/styleguide/src/lib/Organisms/GridForm/Buttons.stories.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import { GridForm } from '@skillsoft/gamut';
-import type { Meta, StoryObj } from '@storybook/react';
-import { action } from 'storybook/actions';
-
-const meta: Meta = {
- component: GridForm,
- args: {
- onSubmit: (values) => {
- action('Form Submitted')(values);
- // eslint-disable-next-line no-console
- console.log('Form Submitted', values);
- },
- fields: [
- {
- label: 'Simple text',
- name: 'simple-text',
- type: 'text',
- size: 12,
- },
- ],
- },
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const SubmitButtonRight: Story = {
- args: {
- submit: {
- contents: 'Right Submit!?',
- position: 'right',
- size: 12,
- },
- },
-};
-
-export const SubmitButtonLeft: Story = {
- args: {
- submit: {
- contents: 'Left Submit!?',
- position: 'left',
- size: 12,
- },
- },
-};
-
-export const SubmitButtonCenter: Story = {
- args: {
- submit: {
- contents: 'Center Submit!?',
- position: 'center',
- size: 12,
- },
- },
-};
-
-export const SubmitButtonStretch: Story = {
- args: {
- submit: {
- contents: 'Stretch Submit!?',
- position: 'stretch',
- size: 12,
- },
- },
-};
-
-export const SubmitButtonFill: Story = {
- args: {
- submit: {
- contents: 'Fill Submit!?',
- type: 'fill',
- size: 12,
- },
- },
-};
-
-export const SubmitButtonCTA: Story = {
- args: {
- submit: {
- contents: 'CTA Submit!?',
- type: 'cta',
- size: 12,
- },
- },
-};
-
-export const SubmitButtonInline: Story = {
- args: {
- fields: [
- {
- label: 'Simple text',
- name: 'simple-text',
- type: 'text',
- size: 6,
- },
- ],
- submit: {
- contents: 'Inline Submit!?',
- size: 4,
- position: 'right',
- },
- },
-};
-
-export const CancelButton: Story = {
- args: {
- cancel: {
- children: 'Cancel',
- onClick: () => {},
- },
- submit: {
- contents: 'Submit!?',
- position: 'right',
- size: 12,
- },
- },
-};
-
-export const Loading: Story = {
- args: {
- submit: {
- contents: 'Loading Submit!?',
- loading: true,
- size: 12,
- },
- },
-};
-
-export const Disabled: Story = {
- args: {
- submit: {
- contents: 'Disabled Submit!?',
- disabled: true,
- size: 12,
- },
- },
-};
diff --git a/packages/styleguide/src/lib/Organisms/GridForm/Fields.mdx b/packages/styleguide/src/lib/Organisms/GridForm/Fields.mdx
deleted file mode 100644
index 3f61e6295b..0000000000
--- a/packages/styleguide/src/lib/Organisms/GridForm/Fields.mdx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
-
-import { ComponentHeader } from '~styleguide/blocks';
-
-import * as FieldsStories from './Fields.stories';
-
-export const parameters = {
- title: 'Fields',
- subtitle: 'Comprehensive GridForm field types to cover various input needs.',
- status: 'static',
-};
-
-
-
-)) inputs can be used to detect bots by providing a field that would not generally be clicked by human users, but might be triggered automatically by bots.
-
-We call it a "sweet container" so that bots do not immediately detect it as a honeypot input.
-
-
-
-## InfoTip
-
-Any field can include an `infotip` prop to provide additional context to users.
-
-### Automatic labelling
-
-InfoTip buttons are automatically labelled by string field labels for accessibility.
-
-
-
-### ReactNode labels
-
-For ReactNode labels, the InfoTip is automatically labelled by the field label. You can override this behavior by providing:
-
-- `ariaLabel` - provide a custom accessible name
-- `ariaLabelledby` - reference another element on the page, such as a section heading
-
-
diff --git a/packages/styleguide/src/lib/Organisms/GridForm/Fields.stories.tsx b/packages/styleguide/src/lib/Organisms/GridForm/Fields.stories.tsx
deleted file mode 100644
index 80e5edfd6b..0000000000
--- a/packages/styleguide/src/lib/Organisms/GridForm/Fields.stories.tsx
+++ /dev/null
@@ -1,394 +0,0 @@
-import { FormGroup, GridForm, Input, Text } from '@skillsoft/gamut';
-import type { Meta, StoryObj } from '@storybook/react';
-import { action } from 'storybook/actions';
-
-const meta: Meta = {
- component: GridForm,
- args: {
- onSubmit: (values) => {
- action('Form Submitted')(values);
- // eslint-disable-next-line no-console
- console.log('Form Submitted', values);
- },
- submit: {
- contents: 'Submit',
- size: 4,
- position: 'left',
- },
- },
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const TextField: Story = {
- args: {
- fields: [
- {
- label: 'Simple text',
- name: 'simple-text',
- size: 9,
- type: 'text',
- },
- ],
- },
-};
-
-export const DefaultTextField: Story = {
- args: {
- fields: [
- {
- defaultValue: 'yeet',
- label: 'Text with default value',
- name: 'text-with-default',
- size: 9,
- type: 'text',
- },
- ],
- },
-};
-
-export const PlaceholderTextField: Story = {
- args: {
- fields: [
- {
- label: 'Text with placeholder',
- placeholder: 'Your email',
- name: 'placeholder',
- size: 9,
- type: 'email',
- },
- ],
- },
-};
-
-export const TextareaField: Story = {
- args: {
- fields: [
- {
- label: 'Write a paragraph about penguins',
- name: 'textarea-input',
- size: 9,
- type: 'textarea',
- },
- ],
- },
-};
-
-export const SelectField: Story = {
- args: {
- fields: [
- {
- label: 'Simple select',
- name: 'simple-select',
- options: ['', 'One fish', 'Two fish', 'Red fish', 'Blue fish'],
- size: 9,
- type: 'select',
- },
- ],
- },
-};
-
-export const RadioGroupField: Story = {
- args: {
- fields: [
- {
- label: 'Preferred Modern Artist',
- name: 'artist',
- options: [
- {
- label: 'Cardi B',
- value: 'cardi',
- },
- {
- label: 'Nicki Minaj',
- value: 'nicki',
- },
- ],
- size: 9,
- type: 'radio-group',
- },
- ],
- },
-};
-
-export const FileUploadField: Story = {
- args: {
- fields: [
- {
- label: 'Upload a cat image (we support pdf, jpeg, or png files)',
- name: 'file-input',
- size: 9,
- type: 'file',
- validation: {
- required: true,
- validate: (files) => {
- const { type } = files.item(0);
- const allowedTypes = ['application/pdf', 'image/jpeg', 'image/png'];
- if (!allowedTypes.includes(type))
- return 'Please upload a pdf, jpeg, or png file.';
- return true;
- },
- },
- },
- ],
- },
-};
-
-export const CheckboxField: Story = {
- args: {
- fields: [
- {
- description: 'I agree to the terms',
- label: 'Terms',
- name: 'terms',
- size: 6,
- type: 'checkbox',
- id: 'my-super-cool-id',
- validation: {
- required: true,
- },
- },
- {
- description: 'I agree to the conditions',
- label: 'Conditions',
- name: 'conditions',
- size: 6,
- type: 'checkbox',
- id: 'my-super-cool-id2',
- validation: {
- required: true,
- },
- },
- ],
- },
-};
-
-export const CheckboxSpacing: Story = {
- args: {
- fields: [
- {
- description: 'I agree to the terms',
- label: 'Terms',
- name: 'terms',
- size: 6,
- type: 'checkbox',
- id: 'terms-id',
- spacing: 'tight',
- validation: {
- required: true,
- },
- },
- {
- description: 'I agree to the conditions',
- label: 'Conditions',
- name: 'conditions',
- size: 6,
- type: 'checkbox',
- id: 'conditions-id',
- spacing: 'tight',
- validation: {
- required: true,
- },
- },
- ],
- },
-};
-
-export const NestedCheckboxesField: Story = {
- args: {
- fields: [
- {
- label: 'Nested checkboxes',
- name: 'nested-checkboxes',
- type: 'nested-checkboxes',
- defaultValue: ['backend', 'react', 'vue'],
- options: [
- {
- value: 'frontend',
- label: 'Frontend Technologies',
- options: [
- {
- value: 'react',
- label: 'React',
- options: [
- { value: 'nextjs', label: 'Next.js' },
- { value: 'typescript', label: 'TypeScript' },
- ],
- },
- {
- value: 'vue',
- label: 'Vue.js',
- },
- { value: 'angular', label: 'Angular' },
- ],
- },
- {
- value: 'backend',
- label: 'Backend Technologies',
- options: [
- { value: 'node', label: 'Node.js' },
- { value: 'python', label: 'Python' },
- { value: 'java', label: 'Java' },
- ],
- },
- ],
- size: 12,
- },
- ],
- },
-};
-
-export const CustomInputs: Story = {
- args: {
- fields: [
- {
- render: ({ error, setValue }) => (
- <>
- setValue(event.target.value)}
- />
- 🕺
-
- ),
- label: 'Gimme two more swags',
- name: 'custom-text-input',
- size: 12,
- validation: {
- required: true,
- pattern: {
- value: /swag(.*)swag/,
- message: 'Still not enough swag, what are you doing... 💢',
- },
- },
- type: 'custom',
- },
- {
- render: ({ error, setValue }) => (
-
- setValue(event.target.value)}
- />
-
- ),
- size: 12,
- name: 'custom-group-input',
- validation: {
- required: true,
- pattern: {
- value: /swag(.*)swag/,
- message: 'Still not enough swag, what are you doing... 💢',
- },
- },
- type: 'custom-group',
- },
- ],
- },
-};
-
-export const HiddenInput: Story = {
- args: {
- fields: [
- {
- type: 'hidden',
- name: 'secret-stuff',
- defaultValue: "I'm invisible!",
- },
- {
- label: "There's more than one field here!",
- name: 'custom-hidden-input',
- type: 'email',
- size: 12,
- },
- ],
- },
-};
-
-export const SweetContainer: Story = {
- args: {
- fields: [
- {
- label: 'This is our sticky sweet label',
- name: 'sweet-container',
- type: 'sweet-container',
- },
- {
- label: "There's something sticky and sweet here!",
- name: 'custom-input',
- type: 'email',
- size: 12,
- },
- ],
- },
-};
-
-export const InfoTipAutoLabelling: Story = {
- args: {
- fields: [
- {
- label: 'Email address',
- name: 'email',
- size: 9,
- type: 'email',
- infotip: {
- info: 'We will never share your email with third parties.',
- placement: 'floating',
- },
- },
- ],
- },
-};
-
-export const InfoTipWithReactNodeLabel: Story = {
- render: (args) => (
- <>
-
- API Configuration
-
- LayoutGrid ) to customize the layouts of our GridForms. You can also customize the `FormRequiredText` using the `requiredTextProps`. `FormRequiredText` should be spaced apart from or be stylistically different from the text element above it.
-
-
-
-## `hideRequiredText`
-
-`hideRequiredText` will hide the '\* Required' text that appears at the top of our forms. This should only be hidden if the form has no required fields.
-
-
-
-## Solo field form
-
-Solo field form should always have their solo input be required. They should automagically not have the required/optional text - if you have a custom rendered hidden input, you may have to use the `hasSoloField` prop.
-
-
-
-## InfoTips
-
-A field can include our existing `InfoTip`. See the Fields story for specific accessibility tooling and InfoTip story for more information on what props are available.
-
-See the Radio story for an example of how to add a infotip to a radio option.
-
-
-
-## Sections
-
-`GridForm` can optionally take an array of sections that have left and center-aligned variants.
-
-Each sections should have a title that correctly follows [heading ranks](https://usability.yale.edu/web-accessibility/articles/headings). You can set the text type of this title though the `as` prop on that section -- the default is `h2`. You can only set the `as` prop to a heading.
-
-You can set the Text variant prop for the section title the same way. Only title variants are recommended, but if you need more granular control of the `Text` component, you can pass them into `titleWrapperProps`.
-
-When using the left-aligned layout, please note that the `title` takes up 3 columns, so any field size over 9 may cause inconsistent behavior!
-
-
diff --git a/packages/styleguide/src/lib/Organisms/GridForm/States.mdx b/packages/styleguide/src/lib/Organisms/GridForm/States.mdx
deleted file mode 100644
index 16a54eb484..0000000000
--- a/packages/styleguide/src/lib/Organisms/GridForm/States.mdx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
-
-import { ComponentHeader, LinkTo } from '~styleguide/blocks';
-
-import * as StatesStories from './States.stories';
-
-export const parameters = {
- title: 'States',
- subtitle: 'Manage field behavior and form state.',
- status: 'static',
-};
-
-
-
-Markdown component so we can optionally add markdown to our validation messages.
-
-
diff --git a/packages/styleguide/src/lib/Organisms/GridForm/States.stories.tsx b/packages/styleguide/src/lib/Organisms/GridForm/States.stories.tsx
deleted file mode 100644
index b822f1cd44..0000000000
--- a/packages/styleguide/src/lib/Organisms/GridForm/States.stories.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import { GridForm } from '@skillsoft/gamut';
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import { action } from 'storybook/actions';
-
-const meta: Meta = {
- component: GridForm,
- args: {
- onSubmit: (values) => {
- action('Form Submitted')(values);
- // eslint-disable-next-line no-console
- console.log('Form Submitted', values);
- },
- submit: {
- contents: 'Submit',
- size: 4,
- position: 'left',
- },
- hideRequiredText: true,
- },
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const DisabledInputs: Story = {
- args: {
- fields: [
- {
- disabled: true,
- label: 'Disabled text',
- name: 'disabled-text',
- type: 'text',
- size: 6,
- },
- {
- label: 'Enabled text',
- name: 'enabled-text',
- type: 'text',
- size: 6,
- },
- ],
- },
-};
-
-export const OnFieldUpdate: Story = {
- render: function OnFieldUpdate(args) {
- const [text, setText] = useState('');
- return (
- <>
- <>The text value is: {text}
- Form Elements inside a LayoutGrid .
-
-GridForm provides the following benefits:
-
-1. **Simplicity**: This organism takes in plain JSON-like props and uses them to string together a validated form
-2. **Accessibility**: All GridForms handle accessibility styling and behaviors, passing tests out-of-the-box
-3. **Functionality**: Validation and submission logic is handled by the [react-hook-form](https://react-hook-form.com) library
-4. **Visual Consistency**: Aligns all input elements with the correct vertical rhythms and grid spacing
-
-## Designing with GridForm
-
-All [Form Input](https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1189%3A0) components in the Figma library are consistent with their implementations in code. By setting the form inputs within the component's layout grid, we can design forms that are compatible with Gamut.
-
-The [GridForm page in Gamut](https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1689%3A3910) also contains several starter templates for incorporating this organism in your designs.
-
-- **Starter**: Contains sample components to begin creating your own form
-- **Sections**: Contains the headers and dividers that are rendered in the optional Sections modules
-- **Inline Submit**: A form incorporating the Inline Submit Button style of GridForm
-- **Instructions**: Contains suggestions for modifying the Figma component for your own designs
-
-### Figma component instructions
-
-- Enable Layout Grid (^G)
-- Select a `❖ GridForm` variant as a template
- - Starter, Sections, Inline Submit
-- Detatch the component to modify the `📐 LayoutGrid`
-- Add, remove, and edit `⬦ Form Inputs`
- - Input Field, TextArea, Checkbox, Radio Button, Select
-- Customize `🚥 GridFormButtons`
- - Submit button style (Fill/CTA), position, cancel button
-
-## Playground
-
-
-
-
| Key | -Used for | -Context (props) | -Default English interpolation | -Summary exposed as | -
|---|---|---|---|---|
- stackedBarSummary
- |
- Stacked rows (two values per row) | -
- seriesOneValue, seriesTwoValue,{' '}
- gained, unit, locale,{' '}
- categoryLabel
- |
-
-
- Starting value - {seriesOneValue}{unit}.
- {gained}{unit} gained - now at
- {seriesTwoValue}{unit} in
- {categoryLabel}
-
- |
-
- aria-label (if link/button) or screenreader-only text
- |
-
- singleValueBarSummary
- |
- Single-value rows | -
- value, unit, locale,{' '}
- categoryLabel
- |
-
-
- {value}{unit} in {categoryLabel}
-
- |
-
- aria-label (if link/button) or screenreader-only text
- |
-
-
-
-
-
-
- {translationKey}
- ),
- },
-];
-
-const errorMessages = [
- {
- id: 'incomplete',
- scenario: 'Incomplete date',
- message: 'Incomplete date',
- translationKey: 'invalidDateIncomplete',
- },
- {
- id: 'invalid-month',
- scenario: 'Month outside 1-12',
- message: 'Month must be between 1 and 12',
- translationKey: 'invalidDateInvalidMonth',
- },
- {
- id: 'invalid-day',
- scenario: 'Day too large for the month',
- message: '{month} does not have {day} days',
- translationKey: 'invalidDateInvalidDay',
- },
- {
- id: 'date-rollover',
- scenario: 'Date rollover (e.g. Feb 30)',
- message: '{month} does not have {day} days',
- translationKey: 'invalidDateRollover',
- },
- {
- id: 'disabled-date',
- scenario: (
- <>
- Date is disabled via disableDate
-
- ),
- message: 'This date is not available',
- translationKey: 'invalidDateNotAvailable',
- },
- {
- id: 'range-contains-disabled-date',
- scenario: 'Range spans a disabled date',
- message: 'This date range contains unavailable dates',
- translationKey: 'invalidDateRangeContainsDisabledDate',
- },
- {
- id: 'invalid-date',
- scenario: 'Any other unparseable date (fallback)',
- message: 'Invalid date',
- translationKey: 'invalidDate',
- },
-];
-
-export const ErrorMessagesTable = () => (
-