@codecademy/styleguide 78.5.6-alpha.fb9da9.0 → 79.0.1-alpha.06259a.0

package/src/lib/Meta/MCP/About.mdx

@@ -0,0 +1,28 @@
+import { Meta } from '@storybook/blocks';
+
+import {
+  AboutHeader,
+  addParentPath,
+  TableOfContents,
+} from '~styleguide/blocks';
+
+import { parameters as codeConnectParameters } from './Code Connect.mdx';
+import { parameters as figmaMcpParameters } from './Figma MCP.mdx';
+
+export const parameters = {
+  id: 'Meta/MCP',
+  title: 'MCP',
+  subtitle: 'Documentation related to the Figma Model Context Protocol.',
+  status: 'static',
+};
+
+<Meta title="Meta/MCP/About" />
+
+<AboutHeader {...parameters} />
+
+<TableOfContents
+  links={addParentPath(parameters.id, [
+    codeConnectParameters,
+    figmaMcpParameters,
+  ])}
+/>

package/src/lib/Meta/MCP/Code Connect.mdx

@@ -0,0 +1,38 @@
+import { Meta } from '@storybook/blocks';
+
+import { AboutHeader, Callout, ImageWrapper } from '~styleguide/blocks';
+
+export const parameters = {
+  id: 'Code Connect',
+  title: 'Code Connect',
+  subtitle: 'Exploring Code Connect features in Figma.',
+  status: 'static',
+};
+
+<Meta title="Meta/MCP/Code Connect" />
+
+<AboutHeader {...parameters} />
+
+Code Connect provides Figma with the actual code for Figma components. In providing accurate code, this helps the Figma MCP generate accurate code snippets for designs that use these components.
+
+More information can be found at [Figma Code Connect documentation](https://www.figma.com/code-connect-docs/)
+
+<Callout text="Any changes to Code Connect files should be requested through the Gamut team and NOT done on an individual or a separate team." />
+
+## Code Connected components
+
+When visiting the Figma file, you'll know if a component is set up with Code Connect if you select the component and see the sidebar includes a "Code Connect" section.
+
+<ImageWrapper
+  src="./mcp/component_with_code_connect.png"
+  alt="A Figma component, Badge, with the Code Connect sidebar open."
+/>
+
+### Exploring behavior
+
+For components with Code Connect, you can also click on the "Explore behavior" button to open a modal that allows you to edit the component's props. Editing these props will automatically update the code in the modal's Code Connect section to give you a sense of how to adapt your component accordingly.
+
+<ImageWrapper
+  src="./mcp/component_playground.png"
+  alt="The 'Component playground' modal, with the Badge component's props editable."
+/>

package/src/lib/Meta/MCP/Figma MCP.mdx

@@ -0,0 +1,89 @@
+import { Meta } from '@storybook/blocks';
+
+import { AboutHeader, Callout } from '~styleguide/blocks';
+
+export const parameters = {
+  id: 'Figma MCP',
+  title: 'Figma MCP',
+  subtitle:
+    'Set up the Figma MCP locally to enable design to code generation, exclusive to Codecademy + Skillsoft employees.',
+  status: 'static',
+};
+
+<Meta title="Meta/MCP/Figma MCP" />
+
+<AboutHeader {...parameters} />
+
+<Callout text="Any MCP generated code is EXPERIMENTAL! You should always validate the code generated and adapt it to your own needs — do NOT simply use the MCP to generate code and push it to production! Additionally, you must have a Dev or Full account to be able to be able to use the Figma MCP." />
+
+The offical guidance and documentation comes from Figma. Please reference [Figma Dev Mode MCP documentation](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server) for the most up to date information. This documentation below has been adapted to fit the context of the Gamut repository.
+
+## Figma (desktop client app)
+
+Go to [Figma's download page](https://www.figma.com/downloads/) to download the appropriate version of the Figma desktop client for your OS.
+
+### Start up local Figma MCP server
+
+1. In the Figma desktop client, check that you have dev mode enabled.
+2. The right-hand sidebar should have a "MCP server" section
+3. Click on the "Open settings modal" button
+4. In the modal, toggle the status to "On", the the color of the toggle should be green.
+   OR
+5. Click on the Figma icon in the top left-hand corner and select "Actions"
+6. Type "Enable desktop MCP server"
+7. Click on the checkbox, if it's not already checked, to enable the MCP server.
+
+## Set up MCP Client for your text editor/IDE
+
+We currently support Figma MCP for Cursor. Please let the Gamut team know if you'd like support for other editors.
+
+### Cursor
+
+1. Open **Cursor** → **Settings** → **Cursor Settings**.
+2. Go to the **MCP** tab (might be called **MCP & Integrations**) from the left-hand sidebar.
+3. Under **MCP Tools**, click **+ Add MCP server**.
+4. Enter the following configuration and save:
+
+```
+{
+  "mcpServers": {
+    "Figma": {
+      "url": "http://127.0.0.1:3845/mcp"
+    }
+  }
+}
+```
+
+### Verify your MCP server is running
+
+To check if your MCP server is running, you can visit the endpoint: `http://127.0.0.1:3845/mcp`. You should see a response, e.g.: `{"jsonrpc":"2.0","error":{"code":-32001,"message":"Invalid sessionId"},"id":null}`.
+Yes, it's an odd response, but it indicates that the MCP server is running — otherwise if it's not running you'll see an error "This site can’t be reached" on the page.
+
+Similarly you can test the end point using:
+
+```bash
+curl http://127.0.0.1:3845/mcp
+```
+
+## Prompt your MCP client
+
+You can prompt the MCP in two main ways:
+
+1. Provide a link to the node of the design you'd like to generate code for, e.g.:
+
+   > Generate the code for this node: https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=79202-13690&m=dev
+
+2. Selecting the node in the Figma interface, e.g.:
+   > Generate the code for the current selection
+
+In the chat, you may be prompted to allow the Figma commands like `get_code()` to run. You can also add these commands to an allow list in your code editor's settings.
+
+## Feedback for the Gamut team
+
+Please let the Gamut team of any feedback you have, things like:
+
+- If you find that a new rule that you'd like implemented in this repo, please let the Gamut team know.
+- Support for another text editor/IDE.
+- Incorrect code generation
+
+If you have any other feedback or suggestions, feel free to share those as well!

package/src/lib/Molecules/Alert/Alert.mdx

@@ -62,7 +62,7 @@ Use an alert to display an important, succinct message with actions for users to
 4. Dismiss button (optional)
 
 - Use to allow users to remove the alert after they've acknowledged it or when it's no longer needed
-- Only exclude when the information must remain visible until specific conditions are met to ensure users don’t miss critical information
+- Only exclude when the information must remain visible until specific conditions are met to ensure users don't miss critical information
 
 ## Variants
 

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

@@ -28,8 +28,7 @@ export const parameters = {
 A tip is triggered by clicking on an information icon button and can be closed by clicking outside, pressing <KeyboardKey>Esc</KeyboardKey>, or clicking the info button again.
 
 Use an infotip to provide additional info about a nearby element or content.
-
-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.
+The info button has low and high emphasis variants and the `Tip` has 4 alignment variants.
 
 ## Variants
 
@@ -57,17 +56,19 @@ 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. 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.
+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.
 
 <Canvas of={InfoTipStories.WithLinksOrButtons} />
 
-### Floating placement
+### Automatic Focus Management
 
-When using `placement="floating"`, InfoTips implements focus management for easier navigation:
+InfoTips automatically manage focus for optimal keyboard accessibility:
 
-- **<KeyboardKey>Tab</KeyboardKey>**: Navigate forward through focusable elements (links, buttons) inside the tip. When reaching the last element, wraps back to the InfoTip button for convenience
-- **<KeyboardKey>Shift</KeyboardKey>+<KeyboardKey>Tab</KeyboardKey>**: Navigate backward naturally through the page
-- **<KeyboardKey>Esc</KeyboardKey>**: Closes the tip and returns focus to the InfoTip button
+- **Opening**: Focus automatically moves to the tip content when opened
+- ** <KeyboardKey>Tab</KeyboardKey> (Floating)**: Navigate forward through focusable elements (links, buttons) inside the tip. When reaching the last element, wraps back to the InfoTip button
+- **<KeyboardKey>Shift </KeyboardKey> + <KeyboardKey>Tab</KeyboardKey> (Floating)**: Navigate backward naturally - from the button, exits to the previous page element
+- **<KeyboardKey>Tab</KeyboardKey> or <KeyboardKey>Shift</KeyboardKey> +<KeyboardKey>Tab</KeyboardKey> (Inline)**: Follows normal document flow
+- **<KeyboardKey>Escape</KeyboardKey>**: Closes the tip and returns focus to the InfoTip button
 
 <Canvas of={InfoTipStories.KeyboardNavigation} />
 
@@ -82,6 +83,21 @@ 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,17 +4,20 @@ 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 { useRef, useState } from 'react';
+import { 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.`,
   },
 };
@@ -28,7 +31,10 @@ export const Emphasis: Story = {
   },
   render: (args) => (
     <FlexBox center m={24} py={64}>
-      <Text mr={4}>Some text that needs info</Text> <InfoTip {...args} />
+      <Text id="emphasis-text" mr={4}>
+        Some text that needs info
+      </Text>
+      <InfoTip {...args} ariaLabelledby="emphasis-text" />
     </FlexBox>
   ),
 };
@@ -38,10 +44,15 @@ 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>{alignment}</Text>
-              <InfoTip {...args} alignment={alignment} />
+              <Text id={labelId}>{alignment}</Text>
+              <InfoTip
+                {...args}
+                alignment={alignment}
+                ariaLabelledby={labelId}
+              />
             </Box>
           );
         }
@@ -56,10 +67,51 @@ export const Placement: Story = {
   },
   render: (args) => (
     <FlexBox center>
-      <Text mr={4}>
+      <Text id="placement-text" mr={4}>
         This text is in a small space and needs floating placement
       </Text>{' '}
-      <InfoTip {...args} />
+      <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
+          alignment="bottom-left"
+          ariaLabelledby="custom-info-id"
+          info="I am clarifying information related to the concise text."
+        />
+      </FlexBox>
     </FlexBox>
   ),
 };
@@ -69,19 +121,16 @@ 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 mr={4}>This text is in a small space and needs info </Text>{' '}
+        <Text id="links-text" mr={4}>
+          This text is in a small space and needs info
+        </Text>{' '}
         <InfoTip
           {...args}
+          ariaLabelledby="links-text"
           info={
-            <Text ref={ref} tabIndex={-1}>
+            <Text tabIndex={-1}>
               Hey! Here is a{' '}
               <Anchor href="https://giphy.com/search/nichijou">
                 cool link
@@ -93,7 +142,6 @@ export const WithLinksOrButtons: Story = {
               that is also super important.
             </Text>
           }
-          onClick={onClick}
         />
       </FlexBox>
     );
@@ -102,42 +150,35 @@ 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 column gap={24} py={64}>
+      <FlexBox center flexDirection="column" gap={24} py={64}>
         <GridBox gap={16} gridTemplateColumns="1fr 1fr">
-          {examples.map(({ title, placement, alignment, ref, links }) => {
-            const onClick = ({ isTipHidden }: { isTipHidden: boolean }) => {
-              if (!isTipHidden) ref.current?.focus();
-            };
-
+          {examples.map(({ title, placement, alignment, links }) => {
+            const labelId = `keyboard-nav-${placement}`;
             return (
               <FlexBox gap={8} key={placement}>
-                <Text fontSize={16} fontWeight="bold">
+                <Text fontSize={16} fontWeight="bold" id={labelId}>
                   {title}
                 </Text>
                 <InfoTip
                   alignment={alignment}
+                  ariaLabelledby={labelId}
                   info={
-                    <Text ref={ref} tabIndex={-1}>
+                    <Text>
                       {links.map((label, idx) => (
                         <>
                           {idx > 0 && ', '}
@@ -150,7 +191,6 @@ export const KeyboardNavigation: Story = {
                     </Text>
                   }
                   placement={placement}
-                  onClick={onClick}
                 />
               </FlexBox>
             );
@@ -162,6 +202,10 @@ 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)
@@ -224,8 +268,10 @@ export const InfoTipInsideModal: Story = {
             <Text>This modal contains an InfoTip below:</Text>
 
             <FlexBox alignItems="center" gap={8}>
-              <Text>Some text that needs explanation</Text>
-              <InfoTip {...args} />
+              <Text id="modal-infotip-text">
+                Some text that needs explanation
+              </Text>
+              <InfoTip {...args} ariaLabelledby="modal-infotip-text" />
             </FlexBox>
 
             <Text color="text-disabled" fontSize={14}>
@@ -253,11 +299,14 @@ export const ZIndex: Story = {
       <Box bg="paleBlue" zIndex={3}>
         I will not be behind the infotip, sad + unreadable
       </Box>
-      <InfoTip info="I am inline, cool" />
+      <InfoTip
+        ariaLabel="z-index example without override"
+        info="I am inline, cool"
+      />
       <Box bg="paleBlue" zIndex={3}>
         I will be behind the infotip, nice + great
       </Box>
-      <InfoTip {...args} />
+      <InfoTip {...args} ariaLabel="z-index example with override" />
     </FlexBox>
   ),
 };
@@ -265,7 +314,10 @@ export const ZIndex: Story = {
 export const Default: Story = {
   render: (args) => (
     <FlexBox center m={24} py={64}>
-      <Text mr={4}>Some text that needs info</Text> <InfoTip {...args} />
+      <Text id="default-text" mr={4}>
+        Some text that needs info
+      </Text>
+      <InfoTip {...args} ariaLabelledby="default-text" />
     </FlexBox>
   ),
 };

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

@@ -61,6 +61,25 @@ 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), 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
+
+<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,7 +2,9 @@ import {
   ConnectedForm,
   ConnectedFormGroup,
   ConnectedFormGroupProps,
+  ConnectedInput,
   ConnectedRadioGroupInput,
+  Text,
   useConnectedForm,
 } from '@codecademy/gamut';
 import { action } from '@storybook/addon-actions';
@@ -119,3 +121,74 @@ export const States = () => {
     </ConnectedForm>
   );
 };
+
+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.',
+          placement: 'floating',
+        }}
+        label="Email address"
+        name="email"
+      />
+    </ConnectedForm>
+  ),
+};
+
+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={{
+          alignment: 'bottom-left',
+          info: 'Choose a unique username between 3-20 characters.',
+        }}
+        label={
+          <Text as="span" fontWeight="bold">
+            Username (automatic label)
+          </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,3 +95,22 @@ 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, 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
+
+<Canvas of={FieldsStories.InfoTipWithReactNodeLabel} />

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

@@ -1,4 +1,4 @@
-import { FormGroup, GridForm, Input } from '@codecademy/gamut';
+import { FormGroup, GridForm, Input, Text } from '@codecademy/gamut';
 import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -328,3 +328,64 @@ export const SweetContainer: Story = {
     ],
   },
 };
+
+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) => (
+    <>
+      <Text as="h3" id="api-section-heading" mb={8}>
+        API Configuration
+      </Text>
+      <GridForm {...args} />
+    </>
+  ),
+  args: {
+    fields: [
+      {
+        label: <strong>Username (automatic label)</strong>,
+        name: 'username',
+        size: 9,
+        type: 'text',
+        infotip: {
+          info: 'Choose a unique username between 3-20 characters.',
+        },
+      },
+      {
+        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',
+        },
+      },
+    ],
+  },
+};