@codecademy/styleguide 78.5.6-alpha.ea1cbb.0 → 78.5.6-alpha.eca584.0

package/.storybook/components/Elements/Markdown.tsx

@@ -43,6 +43,7 @@ export const Code = styled.code`
   color: ${themed('colors.navy-700')};
   background-color: ${themed('colors.gray-100')};
   display: inline-block;
+  overflow-x: scroll;
 
   ::-webkit-scrollbar {
     width: 4px;

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.6-alpha.ea1cbb.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@78.5.5...@codecademy/styleguide@78.5.6-alpha.ea1cbb.0) (2026-01-14)
+### [78.5.6-alpha.eca584.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@78.5.5...@codecademy/styleguide@78.5.6-alpha.eca584.0) (2026-01-29)
 
 **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.6-alpha.ea1cbb.0",
+  "version": "78.5.6-alpha.eca584.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "c2969b8bc6d5586862a0c05b228db55a08c1c94a"
+  "gitHead": "09ec5bd6b3912d8b428472324f7a20de81b0f263"
 }

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

@@ -69,6 +69,12 @@ 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 - you can override this behaviour if needed by passing `ariaLabel` or `ariaLabelledBy` to the field's `InfoTip` via the `infoTipProps` object.
+
+<Canvas of={FormGroupStories.InfoTipAutoLabelling} />
+
 ## Playground
 
 <Canvas sourceState="shown" of={FormGroupStories.Default} />

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

@@ -1,4 +1,4 @@
-import { FormGroup, Input } from '@codecademy/gamut';
+import { Box, FormGroup, Input } from '@codecademy/gamut';
 import type { Meta, StoryObj } from '@storybook/react';
 import type { TypeWithDeepControls } from 'storybook-addon-deep-controls';
 
@@ -6,9 +6,7 @@ import { infotipNestedArgTypes } from '~styleguide/argTypes';
 
 const meta: TypeWithDeepControls<Meta<typeof FormGroup>> = {
   component: FormGroup,
-  argTypes: {
-    ...infotipNestedArgTypes,
-  },
+  argTypes: { ...infotipNestedArgTypes },
 };
 
 export default meta;
@@ -97,3 +95,46 @@ export const HighEmphasisInfoTip: Story = {
     children: <Input />,
   },
 };
+
+const InfoTipLabellingExamples = () => {
+  return (
+    <Box display="flex" flexDirection="column" gap={32}>
+      <FormGroup
+        htmlFor="auto-label-input"
+        infotip={{
+          info: 'We will never share your email with third parties.',
+        }}
+        label="Auto-labelling (default)"
+      >
+        <Input htmlFor="auto-label-input" type="email" />
+      </FormGroup>
+
+      <FormGroup
+        htmlFor="aria-label-input"
+        infotip={{
+          ariaLabel: 'Email privacy information',
+          info: 'We will never share your email with third parties.',
+        }}
+        label="With ariaLabel"
+      >
+        <Input htmlFor="aria-label-input" type="email" />
+      </FormGroup>
+
+      <FormGroup
+        htmlFor="aria-labelledby-input"
+        infotip={{
+          ariaLabelledby: 'custom-label-id',
+          info: 'We will never share your email with third parties.',
+        }}
+        label="With ariaLabelledBy"
+      >
+        <span id="custom-label-id">Custom label for InfoTip button</span>
+        <Input htmlFor="aria-labelledby-input" type="email" />
+      </FormGroup>
+    </Box>
+  );
+};
+
+export const InfoTipAutoLabelling: Story = {
+  render: () => <InfoTipLabellingExamples />,
+};

package/src/lib/Atoms/FormInputs/Checkbox/Checkbox.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 
-import { ComponentHeader } from '~styleguide/blocks';
+import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 
 import * as CheckboxStories from './Checkbox.stories';
 
@@ -133,6 +133,12 @@ To ensure our `Checkboxes` are accessible, we require an `aria-label` be added i
 
 <Canvas of={CheckboxStories.LabelsAsReactNodes} />
 
+## InfoTip
+
+You can add an <LinkTo id="Molecules/Tips/InfoTip">`InfoTip`</LinkTo> to a Checkbox by passing the `infotip` prop. The InfoTip button is automatically labeled by the checkbox label for accessibility. To override this behavior, provide `ariaLabel` or `ariaLabelledby` in the infotip props.
+
+<Canvas of={CheckboxStories.InfoTip} />
+
 ## Playground
 
 <Canvas sourceState="shown" of={CheckboxStories.Default} />

package/src/lib/Atoms/FormInputs/Checkbox/Checkbox.stories.tsx

@@ -12,8 +12,11 @@ import { MiniStarIcon } from '@codecademy/gamut-icons';
 import { Background } from '@codecademy/gamut-styles';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
+import type { TypeWithDeepControls } from 'storybook-addon-deep-controls';
 
-const meta: Meta<typeof Checkbox> = {
+import { infotipNestedArgTypes } from '~styleguide/argTypes';
+
+const meta: TypeWithDeepControls<Meta<typeof Checkbox>> = {
   component: Checkbox,
   args: {
     htmlFor: 'example-checkbox',
@@ -23,6 +26,9 @@ const meta: Meta<typeof Checkbox> = {
     readOnly: true,
     onChange: () => {},
   },
+  argTypes: {
+    ...infotipNestedArgTypes,
+  },
 };
 
 export default meta;
@@ -166,6 +172,20 @@ export const LabelsAsReactNodes: Story = {
   ),
 };
 
+export const InfoTip: Story = {
+  args: {
+    htmlFor: 'example-infotip',
+    label: 'Checkbox with InfoTip',
+    name: 'example-infotip',
+    infotip: {
+      emphasis: 'high',
+      info: 'This is an infotip that provides additional information about the checkbox.',
+      placement: 'floating',
+    },
+    checked: false,
+  },
+};
+
 type CustomCheckboxProps = Omit<
   CheckboxProps,
   'checked' | 'indeterminate' | 'label'

package/src/lib/Atoms/FormInputs/Radio/Radio.mdx

@@ -58,6 +58,14 @@ The `label` is a `ReactNode`, making it customizable outside of a standard text
 
 <Canvas of={RadioStories.CustomLabel} />
 
+## RadioGroup with InfoTip
+
+You can add an InfoTip to a RadioGroup label by wrapping the `RadioGroup` with a `FormGroup` and passing the `infotip` prop. The InfoTip will be automatically linked to the RadioGroup label via `aria-labelledby` for accessibility.
+
+Individual Radio options can also have their own InfoTips, which are automatically linked to their respective labels.
+
+<Canvas of={RadioStories.RadioGroupWithInfoTips} />
+
 ## Playground
 
 <Canvas sourceState="shown" of={RadioStories.Default} />

package/src/lib/Atoms/FormInputs/Radio/Radio.stories.tsx

@@ -1,4 +1,4 @@
-import { Radio, RadioGroup } from '@codecademy/gamut';
+import { FormGroup, Radio, RadioGroup } from '@codecademy/gamut';
 import type { Meta, StoryObj } from '@storybook/react';
 import type { TypeWithDeepControls } from 'storybook-addon-deep-controls';
 
@@ -25,13 +25,47 @@ export const Default: Story = {
 
 export const RadioGroupComponent: Story = {
   render: () => (
-    <RadioGroup htmlForPrefix="example-radio">
-      <Radio htmlFor="example-radio" label="Radio 1" name="example-radio-1" />
-      <Radio htmlFor="example-radio" label="Radio 2" name="example-radio-2" />
+    <RadioGroup htmlForPrefix="example-radio" name="example-radio">
+      <Radio label="Radio 1" />
+      <Radio label="Radio 2" />
     </RadioGroup>
   ),
 };
 
+export const RadioGroupWithInfoTips: Story = {
+  render: () => (
+    <FormGroup
+      htmlFor="example-radio-infotip"
+      infotip={{
+        info: 'This InfoTip is linked to the RadioGroup label. Individual options can also have their own InfoTips.',
+        placement: 'floating',
+      }}
+      label="Select an option"
+      width="fit-content"
+    >
+      <RadioGroup
+        htmlForPrefix="example-radio-infotip"
+        name="example-radio-infotip"
+      >
+        <Radio
+          infotip={{
+            info: 'This option includes additional information about the choice.',
+            placement: 'floating',
+          }}
+          label="Option with InfoTip"
+        />
+        <Radio
+          infotip={{
+            info: 'Each radio option can have its own InfoTip for context.',
+          }}
+          label="Another option"
+        />
+        <Radio label="Option without InfoTip" />
+      </RadioGroup>
+    </FormGroup>
+  ),
+};
+
 export const Checked: Story = {
   args: {
     htmlFor: 'example-checked',

package/src/lib/Foundations/System/About.mdx

@@ -7,7 +7,7 @@ import {
 } from '~styleguide/blocks';
 
 import { parameters as composeParameters } from './Compose.mdx';
-import { parameters as propsParameters } from './Props/About.mdx';
+import { parameters as propsParameters } from './Props.mdx';
 import { parameters as responsivePropertiesParameters } from './ResponsiveProperties/ResponsiveProperties.mdx';
 import { parameters as variantsParameters } from './Variants.mdx';
 

package/src/lib/Foundations/System/Props.mdx

@@ -0,0 +1,230 @@
+import { Meta } from '@storybook/blocks';
+
+import { AboutHeader, TokenTable } from '~styleguide/blocks';
+
+import { defaultColumns, getPropRows } from '../shared/elements';
+
+export const parameters = {
+  title: 'Props',
+  subtitle:
+    'Reusable CSS-in-JS props with predictable behaviors and a consistent API for responsive CSS.',
+  source: {
+    repo: 'gamut-styles',
+    githubLink:
+      'https://github.com/Codecademy/gamut/blob/af5be6e39cccca5d5d8a1f811c77a7a0b618c914/packages/gamut-styles/src/variance/config.ts#L11',
+  },
+};
+
+<Meta title="Foundations/System/Props" />
+
+<AboutHeader {...parameters} />
+
+We provide a set of out of style functions out of the box through `@codecademy/gamut-styles` that are standardized throughout all of our components. These props are strongly typed and can be included as necessary on any styled component.
+
+System props have a few facets that are important to note:
+
+- They can some times represent multiple properties.
+- They may be restricted to specific token scales but will always have access to global css values like `initial` and `none`.
+- They may have a function that transforms the given value into a standardized value (e.g. `width={.5}` => `width: 50%`)
+
+We've grouped these into a few main groups that affect simliar behaviors: `layout`, `space`, `color`, `border`, `background`, `typography`, `positioning`, `grid`, `flex`, `shadow`.
+
+You may import these groups directly from `gamut-styles`.
+
+```tsx
+import { variance } from '@codecademy/variance';
+import { system } from '@codecademy/gamut-styles';
+
+const Box = styled.div(variance.compose(system.layout, system.positioning));
+
+<Box position="absolute" width="50px" height="50px" />;
+```
+
+Each system prop has 3 important features:
+
+- `properties`: Any number of CSS Properties this prop is responsible for.
+- `scale`: A set of values that determines valid inputs for each prop (e.g. a scale of `colors` will restrict to only theme colors). These are generally aliases for more verbose or opaque css properties allowing you to specify a human readable name in your props. If a prop doesn't have a scale that means it accepts all valid CSSType values as props, however if it does have a scale it will only accept global values and keys of the provided scale.
+- `transform`: A function that changes the prop / scale value prior to adding it to the stylehseet. This allows us to add / change units for properties like `width` and `height`. Or ensure extra defaults or fallbacks are added dynamically.
+
+<br />
+
+## Layout
+
+Props for handling dimensions and other layout specific properties.
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const Box = styled.div(system.layout);
+
+<Box display="flex" width="50%" height="300px" verticalAlign="middle" />;
+```
+
+<TokenTable rows={getPropRows('layout')} columns={defaultColumns} />
+
+## Space
+
+Props for maintaining specific vertical and horizontal rhythms
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const Spacer = styled.div(system.space);
+
+<Spacer p={8} my={[16, 24, 32]} />;
+```
+
+<TokenTable rows={getPropRows('space')} columns={defaultColumns} />
+
+## Typography
+
+Props for text manipulation
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const Text = styled.p(system.typography);
+
+<Text fontSize={16} fontFamily="accent" textTransform="uppercase" />;
+```
+
+<TokenTable rows={getPropRows('typography')} columns={defaultColumns} />
+
+## Color
+
+Specific color properties
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const Background = styled.div(system.color);
+
+<Background bg="navy" textColor="gray-100" borderColor="blue" />;
+```
+
+<TokenTable rows={getPropRows('color')} columns={defaultColumns} />
+
+## Border
+
+Border styles
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const Box = styled.div(system.border);
+
+<Box
+  border={1}
+  borderLeft="none"
+  borderRightStyle="dotted"
+  borderRadius="md"
+/>;
+```
+
+<TokenTable rows={getPropRows('border')} columns={defaultColumns} />
+
+## Flex
+
+Flex specific properties
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const FlexBox = styled.div(system.flex);
+
+<FlexBox flex={1} justifyContent="center" alignItems="flex-start" />;
+```
+
+<TokenTable rows={getPropRows('flex')} columns={defaultColumns} />
+
+## Grid
+
+Grid specific properties
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const GridBox = styled.div(system.grid);
+
+<GridBox gridTemplateColumns="max-content 1fr max-content" columnGap={32} />;
+```
+
+<TokenTable rows={getPropRows('grid')} columns={defaultColumns} />
+
+## Background
+
+Props for background manipulation (sizing / repitition / images), for background color see `colors`.
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+import myBg from './myBg.png';
+
+const Box = styled.div(system.background);
+
+<Box background={`url(${myBg}`} backgroundSize="cover" />;
+```
+
+<TokenTable rows={getPropRows('background')} columns={defaultColumns} />
+
+## Positioning
+
+Props that affect stacking and position contexts. Like `top`, `position` and `opacity`.
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const Box = styled.div(system.positioning);
+
+<Box position="absolute" zIndex={2} top="0" left="0" />;
+```
+
+<TokenTable rows={getPropRows('positioning')} columns={defaultColumns} />
+
+## Shadow
+
+Props for box and text shadows.
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const Box = styled.div(system.shadow);
+
+<Box
+  boxShadow="0 0 4px rgba(0, 0, 0, .15)"
+  textShadow="0 0 4px rgba(0, 0, 0, .15)"
+/>;
+```
+
+<TokenTable rows={getPropRows('shadows')} columns={defaultColumns} />
+
+## List
+
+Props for adjusting list styles when rendering a component as a `ul` or `ol`
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const Box = styled.div(system.list);
+
+<Box
+  as="ul"
+  listStyleType="square"
+  listStylePosition="inside"
+  listStyleImage="none"
+>
+  <Box as="li">a list item</Box>
+</Box>;
+```
+
+<TokenTable rows={getPropRows('list')} columns={defaultColumns} />

package/src/lib/Foundations/System/ResponsiveProperties/ResponsiveProperties.mdx

@@ -6,17 +6,17 @@ import { breakpoint } from '../../shared/elements';
 import * as ResponsivePropertiesStories from './ResponsiveProperties.stories';
 
 export const parameters = {
-  title: 'Responsive properties',
+  title: 'Responsive Properties',
   subtitle:
     'All system props accept a syntax to generate responsive styles on a per prop basis',
   source: {
     repo: 'variance',
     githubLink:
-      'https://github.com/Codecademy/gamut/blob/main/packages/gamut-styles/src/variables/responsive.ts',
+      'https://github.com/Codecademy/gamut/blob/cass-gm-842/packages/variance/src/utils/responsive.ts',
   },
 };
 
-<Meta of={ResponsivePropertiesStories} />
+<Meta title="Foundations/System/Responsive Properties" />
 
 <AboutHeader {...parameters} />
 

package/src/lib/Foundations/System/ResponsiveProperties/ResponsiveProperties.stories.tsx

@@ -2,7 +2,6 @@ import { Box, FlexBox } from '@codecademy/gamut';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof FlexBox> = {
-  title: 'Foundations/System/Responsive properties',
   component: FlexBox,
   args: {
     center: true,

package/src/lib/Foundations/shared/elements.tsx

@@ -2,31 +2,22 @@ import { Anchor, Box } from '@codecademy/gamut';
 import {
   Background,
   coreSwatches,
-  css,
   lxStudioColors,
   theme,
   trueColors,
 } from '@codecademy/gamut-styles';
 // eslint-disable-next-line gamut/import-paths
 import * as ALL_PROPS from '@codecademy/gamut-styles/src/variance/config';
-import styled from '@emotion/styled';
 import kebabCase from 'lodash/kebabCase';
 
 import { Code, ColorScale, LinkTo, TokenTable } from '~styleguide/blocks';
 
 import { applyCorrectNotation } from './applyCorrectNotation';
 
-const AnchorCode = styled(Code)(
-  css({
-    textDecoration: 'underline',
-    mx: 4,
-  })
-);
-
 export const PROP_COLUMN = {
   key: 'key',
   name: 'Prop',
-  size: 'lg',
+  size: 'md',
   render: ({ id }: any) => <Code>{id}</Code>,
 };
 
@@ -425,14 +416,11 @@ const PROPERTIES_COLUMN = {
   }) =>
     properties.map((property) => (
       <Anchor
-        href={`https://developer.mozilla.org/en-US/docs/Web/CSS/${kebabCase(
-          property
-        )}`}
-        key={property}
+        href={`https://developer.mozilla.org/en-US/docs/Web/CSS/${property}`}
         rel=""
         target="_blank"
       >
-        <AnchorCode>{kebabCase(property)}</AnchorCode>
+        <Code key={property}>{kebabCase(property)}</Code>
       </Anchor>
     )),
 };
@@ -442,7 +430,7 @@ const SCALE_COLUMN = {
   name: 'Scale',
   size: 'lg',
   render: ({ scale }: { scale: string }) => (
-    <LinkTo id="Foundations/Theme/Core Theme">{scale}</LinkTo>
+    <LinkTo id={`foundations-theme--${kebabCase(scale)}`}>{scale}</LinkTo>
   ),
 };
 

package/src/lib/Layouts/Boxes/Box/Box.stories.tsx

@@ -20,7 +20,6 @@ export const Bordered: Story = {
     border: 1,
     p: 8,
     children: 'I am a bordered box',
-    ml: 24,
   },
 };
 

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.