@codecademy/styleguide 78.5.6-alpha.fb9da9.0 → 79.0.1-alpha.06259a.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/.storybook/preview.ts

@@ -46,10 +46,14 @@ const preview: Preview = {
           [
             'About',
             'Best Practices',
-            'ESLint rules',
             'Contributing',
+            'ESLint rules',
             'FAQs',
             'Stories',
+            'Brand',
+            'Installation',
+            'Usage Guide',
+            'MCP',
           ],
           'Foundations',
           'Layouts',

package/CHANGELOG.md

@@ -3,10 +3,20 @@
 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.fb9da9.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@78.5.5...@codecademy/styleguide@78.5.6-alpha.fb9da9.0) (2026-01-14)
+### [79.0.1-alpha.06259a.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.0.0...@codecademy/styleguide@79.0.1-alpha.06259a.0) (2026-01-30)
 
 **Note:** Version bump only for package @codecademy/styleguide
 
+## [79.0.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@78.5.5...@codecademy/styleguide@79.0.0) (2026-01-29)
+
+### ⚠ BREAKING CHANGES
+
+- **InfoTip:** Remove aria-live and implement focus mgmt
+
+### Bug Fixes
+
+- **InfoTip:** Remove aria-live and implement focus mgmt ([af60f80](https://github.com/Codecademy/gamut/commit/af60f80b48657b3c8d9c646cb04b32cf14211747))
+
 ### [78.5.5](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@78.5.4...@codecademy/styleguide@78.5.5) (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.6-alpha.fb9da9.0",
+  "version": "79.0.1-alpha.06259a.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "4d8170b39849e26fa1cb3d1ab5bbe9135e8a87b0"
+  "gitHead": "5a43c33dd187696ce3210c9410058865994db52c"
 }

package/src/lib/Atoms/Badge/Badge.mdx

@@ -124,7 +124,7 @@ Use `sm` when the `Badge` is inline with other components such as <LinkTo id='Ty
 
 ## Leading icon
 
-Include the `icon` property when the icon reinforces the badge’s message and improves scannability. Since badges are inherently small, it's recommended to use Gamut's mini icons. Below are examples of using icons with the different `Badge` sizes.
+Include the `icon` property when the icon reinforces the badge's message and improves scannability. Since badges are inherently small, it's recommended to use Gamut's mini icons. Below are examples of using icons with the different `Badge` sizes.
 
 ### Default size with icon
 

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/Compose.mdx

@@ -21,7 +21,7 @@ When using custom properties or our standard <LinkTo id="Foundations/System/Prop
 
 Composing functions has several benefits:
 
-1. Predictable CSS - Guard against possible bugs and unexpected behavior.
+1. Predictable CSS - Guard against possible bugs and unexpected behvior.
 1. Type Simplification - Less typescript boiler plate and better type inference
 
 ## Usage

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/Meta/About.mdx

@@ -13,6 +13,7 @@ import { parameters as deepControlsParameters } from './Deep Controls Add-On.mdx
 import { parameters as eslintRulesParameters } from './ESLint rules.mdx';
 import { parameters as faqsParameters } from './FAQs.mdx';
 import { parameters as installationParameters } from './Installation.mdx';
+import { parameters as mcpAboutParameters } from './MCP/About.mdx';
 import { parameters as storiesParameters } from './Stories.mdx';
 import { parameters as usageGuideParameters } from './Usage Guide.mdx';
 
@@ -38,5 +39,6 @@ export const parameters = {
     brandParameters,
     installationParameters,
     usageGuideParameters,
+    mcpAboutParameters,
   ])}
 />