@codecademy/styleguide 79.2.2-alpha.422537.0 → 79.2.2-alpha.425c3f.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.
 
-### [79.2.2-alpha.422537.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.1...@codecademy/styleguide@79.2.2-alpha.422537.0) (2026-03-23)
+### [79.2.2-alpha.425c3f.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.1...@codecademy/styleguide@79.2.2-alpha.425c3f.0) (2026-03-25)
 
 **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": "79.2.2-alpha.422537.0",
+  "version": "79.2.2-alpha.425c3f.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "c460c7b2f5ba956f6d7c359996ce968675eef9bf"
+  "gitHead": "5793cabbe51a529723de64c2ec9bf25f37d95005"
 }

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

@@ -136,10 +136,7 @@ Some of our forms require special props be passed directly onto the input compon
 - `hidden`: Props passed to the hidden input element (used for form submission)
 - `combobox`: Props passed to the visible react-select input element (useful for data-\* attributes, testing, etc.)
 
-<Callout
-  text="  These props are passed directly to the underlying elements, so they only
-  accept `data-*` and `aria-*` attributes to ensure validity."
-/>
+<Callout text="These props are passed directly to the underlying elements, so they only accept data-* and aria-* attributes to ensure validity." />
 
 <Canvas of={SelectDropdownStories.CustomInputProps} />
 

package/src/lib/Atoms/PopoverContainer/PopoverContainer.mdx

@@ -75,7 +75,7 @@ Addition pixel offset from center in the direction of the alignment (e.g. top-le
 
 ### Individual axis offsets `x` and `y`
 
-Absolute offset values irrespective of the relative position. (e.g. x={-4} will be 4 pixels to the left in every position unlike offset).
+Absolute offset values irrespective of the relative position. (e.g. `x={-4}` will be 4 pixels to the left in every position unlike offset).
 
 <Canvas of={PopoverContainerStories.XandY} />
 

package/src/lib/Atoms/PopoverContainer/PopoverContainer.stories.tsx

@@ -94,7 +94,7 @@ export const Alignment: React.FC<
                 justifyContent="center"
               >
                 {alignment.split('-').map((val) => (
-                  <Text as="p" variant="p-small">
+                  <Text as="p" key={val} variant="p-small">
                     {val}
                   </Text>
                 ))}

package/src/lib/Atoms/UtilityComponents/DelayedRenderWrapper/DelayedRenderWrapper.mdx

@@ -24,7 +24,7 @@ export const parameters = {
 
 Use `DelayedRenderWrapper` to wrap around a component that you want to delay rendering for a specified amount of time.
 
-The `delay` prop accepts a number in milliseconds. If a `delay` {'>'} 0 is provided, `DelayedRenderWrapper` will use a `setTimeout()` to determine when to render its children. If `delay` is 0 or not provided, it will render its children immediately.
+The `delay` prop accepts a number in milliseconds. If a `delay` value greater than 0 is provided, `DelayedRenderWrapper` will use a `setTimeout()` to determine when to render its children. If `delay` is 0 or not provided, it will render its children immediately.
 
 ## Playground
 

package/src/lib/Foundations/Layout.mdx

@@ -154,6 +154,7 @@ For spacing between components and sections use these as a guide. Each of these
           >
             {sizes.map((size) => (
               <Box
+                key={`box-${size}`}
                 width={`${size}px`}
                 height={`${size}px`}
                 display="inline-block"
@@ -161,7 +162,7 @@ For spacing between components and sections use these as a guide. Each of these
               />
             ))}
             {sizes.map((size) => (
-              <Box textAlign="center" fontSize={14}>
+              <Box key={`label-${size}`} textAlign="center" fontSize={14}>
                 {size}
               </Box>
             ))}

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

@@ -499,6 +499,7 @@ export const defaultColumns = [
 ];
 
 export const getPropRows = (key: keyof typeof ALL_PROPS) =>
+  // eslint-disable-next-line import/namespace -- dynamic keyof on namespace import
   Object.entries(ALL_PROPS[key]).map(([prop, config]) => ({
     id: prop,
     ...config,

package/src/lib/Layouts/LayoutGrid/examples.tsx

@@ -50,7 +50,13 @@ export const renderColumnChildren = (
       {...props}
       rowspan={span ? span[i] : undefined}
     >
-      <Example>{`${props?.size?.toString()}`}</Example>
+      <Example>
+        {props?.size !== undefined &&
+        props.size !== null &&
+        (typeof props.size === 'string' || typeof props.size === 'number')
+          ? String(props.size)
+          : ''}
+      </Example>
     </Column>
   ));
 };

package/src/lib/Meta/Best Practices.mdx

@@ -153,12 +153,12 @@ type BreakpointArray<T> = [
   T?, // sm
   T?, // md
   T?, // lg
-  T? // xl
+  T?, // xl
   T?, // c_xs
   T?, // c_sm
   T?, // c_md
   T?, // c_lg
-  T? // c_xl
+  T?, // c_xl
 ];
 
 type SystemProp<T> = T | BreakpointMap<T> | BreakpointArray<T>;
@@ -170,16 +170,13 @@ type SystemProp<T> = T | BreakpointMap<T> | BreakpointArray<T>;
 import { Box } from '@codecademy/gamut';
 
 // Object Syntax
-<Box width={{ _: "100%", sm: "50%" }} />
+<Box width={{ _: '100%', sm: '50%' }} />
 
 // Array Syntax
-<Box width={["100%", ,"50%"]} />
+<Box width={['100%', , '50%']} />
 ```
 
-<Callout
-  text="If you wish to skip a breakpoint in using the
-    array shorthand you may specify undefined at the index."
-/>
+<Callout text="If you wish to skip a breakpoint when using the array shorthand you may specify undefined at the index." />
 
 ## Real-world use cases
 

package/src/lib/Molecules/Tips/TipsTable.tsx

@@ -77,7 +77,7 @@ const ComponentRow = ({ array }: { array: typeof colTitles }) => {
         const badgeVariant = status === 'New' ? 'accent' : 'tertiary';
 
         return (
-          <BorderRow size="xl">
+          <BorderRow key={title} size="xl">
             <FlexBox alignItems="center" flexWrap="wrap" pl={8}>
               <Text mr={8} variant="title-sm">
                 {!skipTitle && title} {component}
@@ -110,7 +110,7 @@ const FeatureRow = ({
         <Text fontWeight="bold">{title}</Text>
       </ListCol>
       {features.map((details) => (
-        <DetailRow size="xl">
+        <DetailRow key={details} size="xl">
           <Text>{details}</Text>
         </DetailRow>
       ))}

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

@@ -48,6 +48,7 @@ export const Alignments: Story = {
         return (
           <IconButton
             icon={SparkleIcon}
+            key={alignment}
             tip={alignment}
             tipProps={{ alignment }}
           />

package/src/lib/Organisms/ConnectedForm/ConnectedFormInputs/ConnectedFormInputsTable.tsx

@@ -12,7 +12,7 @@ const ListRowRenderer: React.FC<ListRowRendererProps> = ({ inputs }) => {
     <>
       {inputs.map(({ name, counterpart }) => {
         return (
-          <ListRow>
+          <ListRow key={name}>
             <ListCol size="lg" type="header">
               <Text as="code" ml={8}>
                 {name}

package/src/lib/Organisms/Lists & Tables/List/List.stories.tsx

@@ -65,7 +65,7 @@ const ListExample: React.FC = (args) => {
   return (
     <List {...args}>
       {rows.map(({ name, ship }) => (
-        <ListRow>
+        <ListRow key={name}>
           <ListCol size="md" type="header">
             {name}
           </ListCol>
@@ -157,7 +157,7 @@ const ListCardExample: React.FC = (args) => {
   return (
     <List {...args}>
       {rows.map(({ name, ship, role }) => (
-        <ListRow>
+        <ListRow key={name}>
           <ListCol fill>
             <Text truncate="ellipsis" truncateLines={1} variant="title-lg">
               {name}
@@ -218,7 +218,7 @@ const ColumnExample: React.FC<ListProps> = (args) => {
   return (
     <List {...args}>
       {sizes.map((size: 'content' | 'sm' | 'md' | 'lg' | 'xl') => (
-        <ListRow>
+        <ListRow key={size}>
           <ListCol size={size}>
             <Box bg="background-selected" flex={1} height={1} p={8}>
               {size}

package/src/lib/Molecules/DatePicker/Calendar.mdx

@@ -1,26 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
-
-import { ComponentHeader } from '~styleguide/blocks';
-
-import * as CalendarStories from './Calendar.stories';
-
-export const parameters = {
-  title: 'DatePicker/Calendar',
-  subtitle: `Calendar grid with header (month/year + prev/next), body (day grid), and footer (Clear, Today, quick actions). Used inside DatePickerCalendar.`,
-  status: 'current',
-  source: {
-    repo: 'gamut',
-    githubLink:
-      'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/DatePicker/Calendar',
-  },
-};
-
-<Meta of={CalendarStories} />
-
-<ComponentHeader {...parameters} />
-
-## Playground
-
-<Canvas sourceState="shown" of={CalendarStories.Default} />
-
-<Controls />

package/src/lib/Molecules/DatePicker/Calendar.stories.tsx

@@ -1,60 +0,0 @@
-import {
-  Box,
-  Calendar,
-  CalendarBody,
-  CalendarFooter,
-  CalendarHeader,
-} from '@codecademy/gamut';
-import type { Meta, StoryObj } from '@storybook/react';
-import { useId, useState } from 'react';
-
-const meta: Meta<typeof Calendar> = {
-  component: Calendar,
-  title: 'Molecules/DatePicker/Calendar',
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Calendar>;
-
-export const Default: Story = {
-  render: function CalendarStory() {
-    const headingId = useId();
-    const [displayDate, setDisplayDate] = useState(() => new Date());
-    const [selectedDate, setSelectedDate] = useState<Date | null>(null);
-    const [focusedDate, setFocusedDate] = useState<Date | null>(
-      () => new Date()
-    );
-
-    return (
-      <Calendar>
-        <Box p={24}>
-          <CalendarHeader
-            displayDate={displayDate}
-            headingId={headingId}
-            onDisplayDateChange={setDisplayDate}
-          />
-          <CalendarBody
-            displayDate={displayDate}
-            focusedDate={focusedDate}
-            labelledById={headingId}
-            selectedDate={selectedDate}
-            onDateSelect={setSelectedDate}
-            onDisplayDateChange={setDisplayDate}
-            onFocusedDateChange={setFocusedDate}
-          />
-        </Box>
-        <CalendarFooter
-          showClearButton
-          onClearDate={() => setSelectedDate(null)}
-          onTodayClick={() => {
-            const today = new Date();
-            setSelectedDate(today);
-            setDisplayDate(today);
-            setFocusedDate(today);
-          }}
-        />
-      </Calendar>
-    );
-  },
-};

package/src/lib/Molecules/DatePicker/DatePicker.stories.tsx

@@ -1,148 +0,0 @@
-import {
-  Box,
-  DatePicker,
-  DatePickerCalendar,
-  DatePickerInput,
-  PopoverContainer,
-  useDatePicker,
-} from '@codecademy/gamut';
-import type { Meta, StoryObj } from '@storybook/react';
-import { useRef, useState } from 'react';
-
-const meta: Meta<typeof DatePicker> = {
-  component: DatePicker,
-  title: 'Molecules/DatePicker/DatePicker',
-};
-
-export default meta;
-
-type Story = StoryObj<typeof DatePicker>;
-
-export const Default: Story = {
-  render: function DatePickerStory() {
-    const [selectedDate, setSelectedDate] = useState<Date | null>(null);
-    return (
-      <Box>
-        <DatePicker
-          label="Date"
-          locale="de-DE"
-          selectedDate={selectedDate}
-          setSelectedDate={setSelectedDate}
-          translations={{ clearText: 'Löschen' }}
-        />
-      </Box>
-    );
-  },
-};
-
-export const WithInitialDate: Story = {
-  render: function DatePickerStory() {
-    const [selectedDate, setSelectedDate] = useState<Date | null>(
-      () => new Date(2026, 1, 15)
-    );
-    return (
-      <DatePicker
-        inputSize="small"
-        label="Date"
-        selectedDate={selectedDate}
-        setSelectedDate={setSelectedDate}
-      />
-    );
-  },
-};
-
-/** Range mode: two inputs for start and end date. First calendar click sets start, second sets end. */
-export const Range: Story = {
-  render: function DatePickerStory() {
-    const [startDate, setStartDate] = useState<Date | null>(null);
-    const [endDate, setEndDate] = useState<Date | null>(null);
-    return (
-      <Box>
-        <DatePicker
-          disabledDates={[new Date(2026, 3, 15)]}
-          endDate={endDate}
-          mode="range"
-          setEndDate={setEndDate}
-          setStartDate={setStartDate}
-          startDate={startDate}
-          translations={{
-            startDateLabel: 'Beginning date',
-          }}
-        />
-      </Box>
-    );
-  },
-};
-
-export const RangeSmall: Story = {
-  render: function DatePickerStory() {
-    const [startDate, setStartDate] = useState<Date | null>(null);
-    const [endDate, setEndDate] = useState<Date | null>(null);
-    return (
-      <Box>
-        <DatePicker
-          disabledDates={[new Date(2026, 3, 15)]}
-          endDate={endDate}
-          inputSize="small"
-          mode="range"
-          setEndDate={setEndDate}
-          setStartDate={setStartDate}
-          startDate={startDate}
-          translations={{
-            startDateLabel: 'Beginning date',
-          }}
-        />
-      </Box>
-    );
-  },
-};
-
-/**
- * Composed usage: DatePicker with children provides shared state via context.
- * The child uses useDatePicker() to get open/close and inputRef, then composes
- * DatePickerInput and DatePickerCalendar with a custom PopoverContainer layout.
- */
-export const ComposedWithContext: Story = {
-  render: function DatePickerStory() {
-    const [selectedDate, setSelectedDate] = useState<Date | null>(null);
-    return (
-      <Box p={32}>
-        <DatePicker
-          label="Start date"
-          selectedDate={selectedDate}
-          setSelectedDate={setSelectedDate}
-        >
-          <ComposedDatePickerLayout />
-        </DatePicker>
-      </Box>
-    );
-  },
-};
-
-function ComposedDatePickerLayout() {
-  const { isCalendarOpen, openCalendar, closeCalendar, calendarDialogId } =
-    useDatePicker();
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  return (
-    <>
-      <Box width="fit-content" onClick={openCalendar}>
-        <DatePickerInput ref={inputRef} />
-      </Box>
-      <PopoverContainer
-        alignment="bottom-left"
-        allowPageInteraction
-        focusOnProps={{ autoFocus: false, focusLock: false }}
-        invertAxis="x"
-        isOpen={isCalendarOpen}
-        offset={10}
-        targetRef={inputRef}
-        onRequestClose={closeCalendar}
-      >
-        <div aria-label="Choose date" id={calendarDialogId} role="dialog">
-          <DatePickerCalendar dialogId={calendarDialogId} />
-        </div>
-      </PopoverContainer>
-    </>
-  );
-}