@codecademy/styleguide 79.2.2-alpha.e93e89.0 → 79.2.2

package/CHANGELOG.md

@@ -3,9 +3,11 @@
 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.e93e89.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.1...@codecademy/styleguide@79.2.2-alpha.e93e89.0) (2026-03-18)
+### [79.2.2](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.1...@codecademy/styleguide@79.2.2) (2026-03-19)
 
-**Note:** Version bump only for package @codecademy/styleguide
+### Bug Fixes
+
+- **DataList:** Padding on first column and alignment for headers ([1b55acd](https://github.com/Codecademy/gamut/commit/1b55acdaba8c33be5e3cc7a19b0c9a3b50987ab5))
 
 ### [79.2.1](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.0...@codecademy/styleguide@79.2.1) (2026-03-17)
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.2.2-alpha.e93e89.0",
+  "version": "79.2.2",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "597c47b90e8bb7ebae7c00c214c0ef0887bcb8a5"
+  "gitHead": "c486633c23501b9b843e23c8aef1bd2c8f238ba1"
 }

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

@@ -99,7 +99,7 @@ export const Table: Story = {
 export const Plain: Story = {
   args: { spacing: 'condensed', variant: 'plain' },
   render: (args) => (
-    <Box bg="red" width={1}>
+    <Box width={1}>
       <ListExample {...args} />
     </Box>
   ),

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,53 +0,0 @@
-import {
-  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 [visibleDate, setVisibleDate] = useState(() => new Date());
-    const [selectedDate, setSelectedDate] = useState<Date | null>(null);
-    const [focusedDate, setFocusedDate] = useState<Date | null>(
-      () => new Date()
-    );
-
-    return (
-      <Calendar>
-        <CalendarHeader
-          currentMonthYear={visibleDate}
-          headingId={headingId}
-          locale="en-US"
-          onCurrentMonthYearChange={setVisibleDate}
-        />
-        <CalendarBody
-          focusedDate={focusedDate}
-          labelledById={headingId}
-          locale="en-US"
-          selectedDate={selectedDate}
-          visibleDate={visibleDate}
-          onDateSelect={setSelectedDate}
-          onFocusedDateChange={setFocusedDate}
-          onVisibleDateChange={setVisibleDate}
-        />
-        <CalendarFooter
-          onCurrentMonthYearChange={setVisibleDate}
-          onSelectedDateChange={setSelectedDate}
-        />
-      </Calendar>
-    );
-  },
-};

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

@@ -1,122 +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={{ clear: 'Löschen' }}
-        />
-      </Box>
-    );
-  },
-};
-
-export const WithInitialDate: Story = {
-  render: function DatePickerStory() {
-    const [selectedDate, setSelectedDate] = useState<Date | null>(
-      () => new Date(2026, 1, 15)
-    );
-    return (
-      <DatePicker
-        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
-          endDate={endDate}
-          endLabel="End date"
-          mode="range"
-          setEndDate={setEndDate}
-          setStartDate={setStartDate}
-          startDate={startDate}
-          startLabel="Start 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>
-    </>
-  );
-}