@codecademy/styleguide 78.5.5-alpha.86116a.0 → 78.5.5-alpha.c15718.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [78.5.5-alpha.86116a.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@78.5.4...@codecademy/styleguide@78.5.5-alpha.86116a.0) (2026-01-06)
+### [78.5.5-alpha.c15718.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@78.5.4...@codecademy/styleguide@78.5.5-alpha.c15718.0) (2026-01-07)
 
 **Note:** Version bump only for package @codecademy/styleguide
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "78.5.5-alpha.86116a.0",
+  "version": "78.5.5-alpha.c15718.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "40580b721fdf4aecae402662ba002deedcceb4eb"
+  "gitHead": "558182a086c9a842a64bb7881a8fcb0e790a4f36"
 }

package/src/lib/Atoms/FormElements/FormGroup/FormGroup.mdx

@@ -69,12 +69,6 @@ A field can include <LinkTo id="Molecules/Tips/InfoTip"> our existing `InfoTip`<
 
 <Canvas of={FormGroupStories.HighEmphasisInfoTip} />
 
-#### Accessibility
-
-InfoTip buttons are automatically labelled by string field labels for accessibility.
-
-<Canvas of={FormGroupStories.InfoTipAutoLabelling} />
-
 ## Playground
 
 <Canvas sourceState="shown" of={FormGroupStories.Default} />

package/src/lib/Atoms/FormElements/FormGroup/FormGroup.stories.tsx

@@ -97,14 +97,3 @@ export const HighEmphasisInfoTip: Story = {
     children: <Input />,
   },
 };
-
-export const InfoTipAutoLabelling: Story = {
-  args: {
-    label: 'Email address',
-    htmlFor: 'auto-label-input',
-    infotip: {
-      info: 'We will never share your email with third parties.',
-    },
-    children: <Input htmlFor="auto-label-input" type="email" />,
-  },
-};

package/src/lib/Molecules/Tips/InfoTip/InfoTip.mdx

@@ -28,7 +28,8 @@ export const parameters = {
 A tip is triggered by clicking on an information icon button and can be closed by clicking outside, pressing <kbd>Esc</kbd>, or clicking the info button again.
 
 Use an infotip to provide additional info about a nearby element or content.
-The info button has low and high emphasis variants and the `Tip` has 4 alignment variants.
+
+Infotip consists of an icon button and the .tip-bg subcomponent. The info button has low and high emphasis variants and the `.tip` has 4 alignment variants.
 
 ## Variants
 
@@ -56,18 +57,16 @@ This `floating` variant should only be used as needed.
 
 ### InfoTips with links or buttons
 
-Links or buttons within InfoTips should be used sparingly and only when the information is critical to the user's understanding of the content. When an InfoTip opens, focus automatically moves to the tip content, allowing keyboard users to immediately interact with any links or buttons inside.
+Links or buttons within InfoTips should be used sparingly and only when the information is critical to the user's understanding of the content. If an infotip _absolutely requires_ a link or button, it needs to provide a programmatic focus by way of the `onClick` prop. The `onClick` prop accepts a function that can accept an `{isTipHidden}` argument and using that you can set programmatic focus as needed.
 
 <Canvas of={InfoTipStories.WithLinksOrButtons} />
 
-### Automatic Focus Management
+### Floating placement
 
-InfoTips automatically manage focus for optimal keyboard accessibility:
+When using `placement="floating"`, InfoTips implements focus management for easier navigation:
 
-- **Opening**: Focus automatically moves to the tip content when opened
-- **Tab (Floating)**: Navigate forward through focusable elements (links, buttons) inside the tip. When reaching the last element, wraps back to the InfoTip button
-- **Shift+Tab (Floating)**: Navigate backward naturally - from the button, exits to the previous page element
-- **Tab/Shift+Tab (Inline)**: Follows normal document flow
+- **Tab**: Navigate forward through focusable elements (links, buttons) inside the tip. When reaching the last element, wraps back to the InfoTip button for convenience
+- **Shift+Tab**: Navigate backward naturally through the page
 - **Escape**: Closes the tip and returns focus to the InfoTip button
 
 <Canvas of={InfoTipStories.KeyboardNavigation} />
@@ -83,21 +82,6 @@ InfoTips have intelligent Escape key handling that works correctly both inside a
 
 <Canvas of={InfoTipStories.InfoTipInsideModal} />
 
-## Custom Accessible Labeling
-
-Provide either `ariaLabel` or `ariaLabelledby` to ensure screen reader users understand the purpose of the InfoTip button.
-
-The InfoTip button's accessible label can be customized using either prop:
-
-- **`ariaLabel`**: Directly sets the accessible label text. Useful when you want to provide a custom label without referencing another element.
-- **`ariaLabelledby`**: References the ID of another element to use as the label. Useful when you want the InfoTip button to be labeled by visible text elsewhere on the page. This is useful for when the `InfoTip` is beside text that contextualizes it.
-
-### Custom Role Description
-
-The `InfoTipButton` uses [`aria-roledescription`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription) to provide additional context to screen reader users about the button's specific purpose. This defaults to `"More information button"` but can be customized via the `ariaRoleDescription` prop for translation or other accessibility needs.
-
-<Canvas of={InfoTipStories.AriaLabel} />
-
 ## InfoTips and zIndex
 
 You can change the zIndex of your `InfoTip` with the zIndex property.

package/src/lib/Molecules/Tips/InfoTip/InfoTip.stories.tsx

@@ -4,20 +4,17 @@ import {
   FillButton,
   FlexBox,
   GridBox,
-  IconButton,
   InfoTip,
   Modal,
   Text,
 } from '@codecademy/gamut';
-import { SparkleIcon } from '@codecademy/gamut-icons';
 import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
 const meta: Meta<typeof InfoTip> = {
   component: InfoTip,
   args: {
     alignment: 'top-left',
-    ariaLabel: 'More information',
     info: `I am additional information about a nearby element or content.`,
   },
 };
@@ -31,10 +28,7 @@ export const Emphasis: Story = {
   },
   render: (args) => (
     <FlexBox center m={24} py={64}>
-      <Text id="emphasis-text" mr={4}>
-        Some text that needs info
-      </Text>
-      <InfoTip {...args} ariaLabelledby="emphasis-text" />
+      <Text mr={4}>Some text that needs info</Text> <InfoTip {...args} />
     </FlexBox>
   ),
 };
@@ -44,15 +38,10 @@ export const Alignments: Story = {
     <GridBox gap={24} gridTemplateColumns="1fr 1fr" ml={8} py={64}>
       {(['top-right', 'top-left', 'bottom-right', 'bottom-left'] as const).map(
         (alignment) => {
-          const labelId = `alignment-${alignment}`;
           return (
             <Box key={alignment}>
-              <Text id={labelId}>{alignment}</Text>
-              <InfoTip
-                {...args}
-                alignment={alignment}
-                ariaLabelledby={labelId}
-              />
+              <Text>{alignment}</Text>
+              <InfoTip {...args} alignment={alignment} />
             </Box>
           );
         }
@@ -67,52 +56,10 @@ export const Placement: Story = {
   },
   render: (args) => (
     <FlexBox center>
-      <Text id="placement-text" mr={4}>
+      <Text mr={4}>
         This text is in a small space and needs floating placement
       </Text>{' '}
-      <InfoTip {...args} ariaLabelledby="placement-text" />
-    </FlexBox>
-  ),
-};
-
-export const AriaLabel: Story = {
-  render: (args) => (
-    <FlexBox center column gap={24} my={48} width={1}>
-      <FlexBox alignItems="center" gap={8}>
-        <Text fontSize={16} fontWeight="bold">
-          Using ariaLabel (no visible label text):
-        </Text>
-      </FlexBox>
-      <FlexBox alignItems="center" gap={8}>
-        <IconButton
-          icon={SparkleIcon}
-          tip="This tool needs to be explained in the InfoTip"
-          tipProps={{ placement: 'floating' }}
-          onClick={() => null}
-        />
-        <InfoTip
-          {...args}
-          ariaLabel="Learn more about this tool"
-          info="This is some helpful info about the tool represented by the IconButton"
-        />
-      </FlexBox>
-
-      <FlexBox alignItems="center" gap={8}>
-        <Text fontSize={16} fontWeight="bold">
-          Using ariaLabelledby (references visible text):
-        </Text>
-      </FlexBox>
-      <FlexBox alignItems="center" gap={8}>
-        <Text id="custom-info-id">
-          I am some helpful yet concise text that needs more explanation
-        </Text>
-        <InfoTip
-          {...args}
-          alignment="bottom-left"
-          ariaLabelledby="custom-info-id"
-          info="I am clarifying information related to the concise text."
-        />
-      </FlexBox>
+      <InfoTip {...args} />
     </FlexBox>
   ),
 };
@@ -122,16 +69,19 @@ export const WithLinksOrButtons: Story = {
     placement: 'floating',
   },
   render: function WithLinksOrButtons(args) {
+    const ref = useRef<HTMLDivElement>(null);
+
+    const onClick = ({ isTipHidden }: { isTipHidden: boolean }) => {
+      if (!isTipHidden) ref.current?.focus();
+    };
+
     return (
       <FlexBox center py={64}>
-        <Text id="links-text" mr={4}>
-          This text is in a small space and needs info
-        </Text>{' '}
+        <Text mr={4}>This text is in a small space and needs info </Text>{' '}
         <InfoTip
           {...args}
-          ariaLabelledby="links-text"
           info={
-            <Text tabIndex={-1}>
+            <Text ref={ref} tabIndex={-1}>
               Hey! Here is a{' '}
               <Anchor href="https://giphy.com/search/nichijou">
                 cool link
@@ -143,6 +93,7 @@ export const WithLinksOrButtons: Story = {
               that is also super important.
             </Text>
           }
+          onClick={onClick}
         />
       </FlexBox>
     );
@@ -151,35 +102,42 @@ export const WithLinksOrButtons: Story = {
 
 export const KeyboardNavigation: Story = {
   render: function KeyboardNavigation() {
+    const floatingRef = useRef<HTMLDivElement>(null);
+    const inlineRef = useRef<HTMLDivElement>(null);
+
     const examples = [
       {
         title: 'Floating Placement',
         placement: 'floating' as const,
+        ref: floatingRef,
         links: ['Link 1', 'Link 2', 'Link 3'],
       },
       {
         title: 'Inline Placement',
         placement: 'inline' as const,
         alignment: 'bottom-right' as const,
+        ref: inlineRef,
         links: ['Link A', 'Link B'],
       },
     ];
 
     return (
-      <FlexBox center flexDirection="column" gap={24} py={64}>
+      <FlexBox center column gap={24} py={64}>
         <GridBox gap={16} gridTemplateColumns="1fr 1fr">
-          {examples.map(({ title, placement, alignment, links }) => {
-            const labelId = `keyboard-nav-${placement}`;
+          {examples.map(({ title, placement, alignment, ref, links }) => {
+            const onClick = ({ isTipHidden }: { isTipHidden: boolean }) => {
+              if (!isTipHidden) ref.current?.focus();
+            };
+
             return (
               <FlexBox gap={8} key={placement}>
-                <Text fontSize={16} fontWeight="bold" id={labelId}>
+                <Text fontSize={16} fontWeight="bold">
                   {title}
                 </Text>
                 <InfoTip
                   alignment={alignment}
-                  ariaLabelledby={labelId}
                   info={
-                    <Text>
+                    <Text ref={ref} tabIndex={-1}>
                       {links.map((label, idx) => (
                         <>
                           {idx > 0 && ', '}
@@ -192,6 +150,7 @@ export const KeyboardNavigation: Story = {
                     </Text>
                   }
                   placement={placement}
+                  onClick={onClick}
                 />
               </FlexBox>
             );
@@ -203,10 +162,6 @@ export const KeyboardNavigation: Story = {
             Keyboard Navigation:
           </Text>
           <Box as="ul" fontSize={14} pl={16}>
-            <li>
-              <strong>Opening:</strong> Focus automatically moves to the tip
-              content when opened
-            </li>
             <li>
               <strong>Floating - Tab:</strong> Navigates forward through links,
               then wraps to button (contained)
@@ -269,10 +224,8 @@ export const InfoTipInsideModal: Story = {
             <Text>This modal contains an InfoTip below:</Text>
 
             <FlexBox alignItems="center" gap={8}>
-              <Text id="modal-infotip-text">
-                Some text that needs explanation
-              </Text>
-              <InfoTip {...args} ariaLabelledby="modal-infotip-text" />
+              <Text>Some text that needs explanation</Text>
+              <InfoTip {...args} />
             </FlexBox>
 
             <Text color="text-disabled" fontSize={14}>
@@ -300,14 +253,11 @@ export const ZIndex: Story = {
       <Box bg="paleBlue" zIndex={3}>
         I will not be behind the infotip, sad + unreadable
       </Box>
-      <InfoTip
-        ariaLabel="z-index example without override"
-        info="I am inline, cool"
-      />
+      <InfoTip info="I am inline, cool" />
       <Box bg="paleBlue" zIndex={3}>
         I will be behind the infotip, nice + great
       </Box>
-      <InfoTip {...args} ariaLabel="z-index example with override" />
+      <InfoTip {...args} />
     </FlexBox>
   ),
 };
@@ -315,10 +265,7 @@ export const ZIndex: Story = {
 export const Default: Story = {
   render: (args) => (
     <FlexBox center m={24} py={64}>
-      <Text id="default-text" mr={4}>
-        Some text that needs info
-      </Text>
-      <InfoTip {...args} ariaLabelledby="default-text" />
+      <Text mr={4}>Some text that needs info</Text> <InfoTip {...args} />
     </FlexBox>
   ),
 };

package/src/lib/Organisms/BarChart/BarChart.mdx

@@ -0,0 +1,92 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
+import { ComponentHeader } from '~styleguide/blocks';
+
+import * as BarChartStories from './BarChart.stories';
+
+export const parameters = {
+  subtitle: `A horizontal bar chart for visualizing comparative data`,
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=55123-4176',
+  },
+  status: 'current',
+  source: {
+    repo: 'gamut',
+    githubLink:
+      'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/BarChart',
+  },
+};
+
+<Meta of={BarChartStories} />;
+
+<ComponentHeader {...parameters} />
+
+## Usage
+
+Use BarChart to display comparative data across categories, such as skills progress, XP earned, or any quantitative metrics that benefit from visual comparison.
+
+### Best practices:
+
+- Use consistent units across all bars in a chart
+- Limit the number of bars to maintain readability (5-10 is optimal)
+- Consider using the stacked variant to show progress toward a goal
+- Sort bars by value (descending) when ranking is important
+
+When NOT to use
+
+- For showing trends over time - use a line chart instead
+- For showing parts of a whole - use a pie or donut chart
+- For very small datasets (1-2 items) - consider using ProgressBar
+
+## Variants
+
+### Simple (Non-stacked)
+
+Use the simple variant when showing single values per category. Only `seriesOneValue` is provided.
+
+<Canvas of={BarChartStories.Default} />
+
+### Stacked
+
+Use the stacked variant when showing progress within a total. Provide both `seriesOneValue` (progress) and `seriesTwoValue` (total).
+
+<Canvas of={BarChartStories.Stacked} />
+
+### With Icons
+
+Add icons to labels for better visual identification of categories.
+
+<Canvas of={BarChartStories.WithIcons} />
+
+### Animated
+
+Enable entrance animations for a more engaging experience.
+
+<Canvas of={BarChartStories.Animated} />
+
+### Interactive
+
+Rows can be made interactive with `onClick` handlers or `href` links.
+
+<Canvas of={BarChartStories.Interactive} />
+
+## Playground
+
+<Canvas sourceState="shown" of={BarChartStories.Default} />
+
+<Controls />
+
+## Accessibility considerations
+
+- Always provide either `aria-label` or `aria-labelledby` to describe the chart
+- Each row automatically generates an accessible label summarizing its values
+- Interactive rows (with onClick/href) are properly announced as buttons/links
+- Grid lines are marked as decorative and hidden from screen readers
+- The scale header is hidden on small screens and marked as decorative
+
+## UX writing
+
+- Keep y-axis labels concise (1-3 words)
+- Use consistent unit labels (e.g., "XP", "hours", "points")
+- Consider locale-aware number formatting for international audiences

package/src/lib/Organisms/BarChart/BarChart.stories.tsx

@@ -0,0 +1,183 @@
+import { BarChart, BarProps } from '@codecademy/gamut';
+import {
+  BookFlipPageIcon,
+  CodeIcon,
+  DataScienceIcon,
+  GameControllerIcon,
+  TerminalIcon,
+} from '@codecademy/gamut-icons';
+import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof BarChart> = {
+  component: BarChart,
+  args: {
+    'aria-label': 'Skills experience chart',
+    minRange: 0,
+    maxRange: 2000,
+    unit: 'XP',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof BarChart>;
+
+// Sample data for non-stacked (simple) bars
+const simpleBarData: BarProps[] = [
+  { yLabel: 'Python', seriesOneValue: 1500 },
+  { yLabel: 'JavaScript', seriesOneValue: 2000 },
+  { yLabel: 'HTML/CSS', seriesOneValue: 800 },
+  { yLabel: 'SQL', seriesOneValue: 600 },
+  { yLabel: 'React', seriesOneValue: 450 },
+];
+
+// Sample data for stacked bars (with seriesTwoValue)
+const stackedBarData: BarProps[] = [
+  { yLabel: 'Python', seriesOneValue: 200, seriesTwoValue: 1500 },
+  { yLabel: 'JavaScript', seriesOneValue: 1800, seriesTwoValue: 2000 },
+  { yLabel: 'HTML/CSS', seriesOneValue: 600, seriesTwoValue: 800 },
+  { yLabel: 'SQL', seriesOneValue: 550, seriesTwoValue: 600 },
+  { yLabel: 'React', seriesOneValue: 300, seriesTwoValue: 450 },
+];
+
+// Sample data with icons
+const barDataWithIcons: BarProps[] = [
+  {
+    yLabel: 'Python',
+    seriesOneValue: 200,
+    seriesTwoValue: 1500,
+    icon: CodeIcon,
+  },
+  {
+    yLabel: 'JavaScript',
+    seriesOneValue: 150,
+    seriesTwoValue: 2000,
+    icon: TerminalIcon,
+  },
+  {
+    yLabel: 'Data Science',
+    seriesOneValue: 100,
+    seriesTwoValue: 800,
+    icon: DataScienceIcon,
+  },
+  {
+    yLabel: 'Game Dev',
+    seriesOneValue: 50,
+    seriesTwoValue: 600,
+    icon: GameControllerIcon,
+  },
+  {
+    yLabel: 'Reading',
+    seriesOneValue: 75,
+    seriesTwoValue: 450,
+    icon: BookFlipPageIcon,
+  },
+];
+
+/**
+ * Default non-stacked bar chart showing single values
+ */
+export const Default: Story = {
+  args: {
+    barValues: simpleBarData,
+  },
+};
+
+/**
+ * Stacked bar chart showing progress (seriesOneValue) over total (seriesTwoValue)
+ */
+export const Stacked: Story = {
+  args: {
+    barValues: stackedBarData,
+  },
+};
+
+/**
+ * Bar chart with icons next to labels
+ */
+export const WithIcons: Story = {
+  args: {
+    barValues: barDataWithIcons,
+  },
+};
+
+/**
+ * Animated bar chart with staggered entrance
+ */
+export const Animated: Story = {
+  args: {
+    barValues: stackedBarData,
+    animate: true,
+  },
+};
+
+/**
+ * Bar chart sorted by value in descending order
+ */
+export const SortedByValue: Story = {
+  args: {
+    barValues: simpleBarData,
+    sortBy: 'value',
+    order: 'descending',
+  },
+};
+
+/**
+ * Bar chart sorted alphabetically by label
+ */
+export const SortedByLabel: Story = {
+  args: {
+    barValues: simpleBarData,
+    sortBy: 'label',
+    order: 'ascending',
+  },
+};
+
+/**
+ * Interactive bar chart with clickable rows
+ */
+export const Interactive: Story = {
+  args: {
+    barValues: simpleBarData.map((bar) => ({
+      ...bar,
+      onClick: action(`Clicked ${bar.yLabel}`),
+    })),
+  },
+};
+
+/**
+ * Interactive bar chart with linked rows
+ */
+export const WithLinks: Story = {
+  args: {
+    barValues: simpleBarData.map((bar) => ({
+      ...bar,
+      href: `#${bar.yLabel.toLowerCase().replace(/\s+/g, '-')}`,
+    })),
+  },
+};
+
+/**
+ * Bar chart with custom styling
+ */
+export const CustomStyles: Story = {
+  args: {
+    barValues: stackedBarData,
+    styleConfig: {
+      backgroundBarColor: 'paleGreen',
+      foregroundBarColor: 'feedback-success',
+      textColor: 'navy',
+    },
+  },
+};
+
+/**
+ * Bar chart with custom xScale interval
+ */
+export const CustomScale: Story = {
+  args: {
+    barValues: simpleBarData,
+    maxRange: 2000,
+    xScale: 250,
+  },
+};

package/src/lib/Organisms/ConnectedForm/ConnectedFormGroup/ConnectedFormGroup.mdx

@@ -61,26 +61,6 @@ A `ConnectedFormGroup` can be in one of three states: `default`, `error`, or `di
 
 <Canvas of={ConnectedFormGroupStories.States} />
 
-## InfoTip
-
-A `ConnectedFormGroup` can include an `infotip` prop to provide additional context.
-
-### Automatic labelling
-
-InfoTip buttons are automatically labelled by string field labels for accessibility.
-
-<Canvas of={ConnectedFormGroupStories.InfoTipAutoLabelling} />
-
-### ReactNode labels
-
-For ReactNode labels (e.g., styled text or icons), you have three options:
-
-- `labelledByFieldLabel: true` - opt into automatic labelling by the field label
-- `ariaLabel` - provide a custom accessible name
-- `ariaLabelledby` - reference another element on the page, such as a section heading
-
-<Canvas of={ConnectedFormGroupStories.InfoTipWithReactNodeLabel} />
-
 ## Playground
 
 To see how a `ConnectedFormGroup` can be used in a `ConnectedForm`, check out the <LinkTo id="Organisms/ConnectedForm/ConnectedForm">ConnectedForm</LinkTo> page.

package/src/lib/Organisms/ConnectedForm/ConnectedFormGroup/ConnectedFormGroup.stories.tsx

@@ -2,9 +2,7 @@ import {
   ConnectedForm,
   ConnectedFormGroup,
   ConnectedFormGroupProps,
-  ConnectedInput,
   ConnectedRadioGroupInput,
-  Text,
   useConnectedForm,
 } from '@codecademy/gamut';
 import { action } from '@storybook/addon-actions';
@@ -121,81 +119,3 @@ export const States = () => {
     </ConnectedForm>
   );
 };
-
-/**
- * InfoTip buttons are automatically labelled by string field labels for accessibility.
- * Screen readers will announce "Field Label, button" when focusing the InfoTip.
- */
-export const InfoTipAutoLabelling: Story = {
-  render: () => (
-    <ConnectedForm
-      defaultValues={{ email: '' }}
-      onSubmit={(values) => action('Form Submitted')(values)}
-    >
-      <ConnectedFormGroup
-        field={{ component: ConnectedInput, type: 'email' }}
-        infotip={{ info: 'We will never share your email with third parties.' }}
-        label="Email address"
-        name="email"
-      />
-    </ConnectedForm>
-  ),
-};
-
-/**
- * For ReactNode labels, you have three options for accessible InfoTip labelling:
- * - `labelledByFieldLabel: true` - uses the field label
- * - `ariaLabel` - provides a custom accessible name
- * - `ariaLabelledby` - references another element on the page
- */
-export const InfoTipWithReactNodeLabel: Story = {
-  render: () => (
-    <ConnectedForm
-      defaultValues={{ username: '', password: '', apiKey: '' }}
-      onSubmit={(values) => action('Form Submitted')(values)}
-    >
-      <Text as="h3" id="api-section-heading" mb={8}>
-        API Configuration
-      </Text>
-      <ConnectedFormGroup
-        field={{ component: ConnectedInput }}
-        infotip={{
-          info: 'Choose a unique username between 3-20 characters.',
-          labelledByFieldLabel: true,
-        }}
-        label={
-          <Text as="span" fontWeight="bold">
-            Username (labelledByFieldLabel)
-          </Text>
-        }
-        name="username"
-      />
-      <ConnectedFormGroup
-        field={{ component: ConnectedInput, type: 'password' }}
-        infotip={{
-          info: 'Password must be at least 8 characters with one uppercase letter and one number.',
-          ariaLabel: 'Password requirements',
-        }}
-        label={
-          <Text as="span" fontWeight="bold">
-            Password (ariaLabel)
-          </Text>
-        }
-        name="password"
-      />
-      <ConnectedFormGroup
-        field={{ component: ConnectedInput }}
-        infotip={{
-          info: 'You can find your API key in the developer settings dashboard.',
-          ariaLabelledby: 'api-section-heading',
-        }}
-        label={
-          <Text as="span" fontWeight="bold">
-            API Key (ariaLabelledby)
-          </Text>
-        }
-        name="apiKey"
-      />
-    </ConnectedForm>
-  ),
-};

package/src/lib/Organisms/GridForm/Fields.mdx

@@ -95,23 +95,3 @@ Hidden inputs can be used to include data that users can't see or modify with th
 We call it a "sweet container" so that bots do not immediately detect it as a honeypot input.
 
 <Canvas of={FieldsStories.SweetContainer} />
-
-## 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.
-
-<Canvas of={FieldsStories.InfoTipAutoLabelling} />
-
-### ReactNode labels
-
-For ReactNode labels, you have three options:
-
-- `labelledByFieldLabel: true` - opt into automatic labelling by the field label
-- `ariaLabel` - provide a custom accessible name
-- `ariaLabelledby` - reference another element on the page, such as a section heading
-
-<Canvas of={FieldsStories.InfoTipWithReactNodeLabel} />

package/src/lib/Organisms/GridForm/Fields.stories.tsx

@@ -1,4 +1,4 @@
-import { FormGroup, GridForm, Input, Text } from '@codecademy/gamut';
+import { FormGroup, GridForm, Input } from '@codecademy/gamut';
 import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -328,74 +328,3 @@ export const SweetContainer: Story = {
     ],
   },
 };
-
-/**
- * InfoTip buttons are automatically labelled by string field labels for accessibility.
- * Screen readers will announce "Field Label, button" when focusing the InfoTip.
- */
-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.',
-        },
-      },
-    ],
-  },
-};
-
-/**
- * For ReactNode labels, you have three options for accessible InfoTip labelling:
- * - `labelledByFieldLabel: true` - uses the field label
- * - `ariaLabel` - provides a custom accessible name
- * - `ariaLabelledby` - references another element on the page
- */
-export const InfoTipWithReactNodeLabel: Story = {
-  render: (args) => (
-    <>
-      <Text as="h3" id="api-section-heading" mb={8}>
-        API Configuration
-      </Text>
-      <GridForm {...args} />
-    </>
-  ),
-  args: {
-    fields: [
-      {
-        label: <strong>Username (labelledByFieldLabel)</strong>,
-        name: 'username',
-        size: 9,
-        type: 'text',
-        infotip: {
-          info: 'Choose a unique username between 3-20 characters.',
-          labelledByFieldLabel: true,
-        },
-      },
-      {
-        label: <strong>Password (ariaLabel)</strong>,
-        name: 'password',
-        size: 9,
-        type: 'password',
-        infotip: {
-          info: 'Password must be at least 8 characters with one uppercase letter and one number.',
-          ariaLabel: 'Password requirements',
-        },
-      },
-      {
-        label: <strong>API Key (ariaLabelledby)</strong>,
-        name: 'apiKey',
-        size: 9,
-        type: 'text',
-        infotip: {
-          info: 'You can find your API key in the developer settings dashboard.',
-          ariaLabelledby: 'api-section-heading',
-        },
-      },
-    ],
-  },
-};