@codecademy/styleguide 79.2.1-alpha.9135d1.0 → 79.2.1-alpha.cb2cfc.0

package/.storybook/components/Elements/DetailedCode/DetailedCodeBody/index.tsx

@@ -0,0 +1,19 @@
+import { Source } from '@storybook/blocks';
+
+import { DetailedCodeBodyWrapper, FloatingIndicator } from '../elements';
+import { DetailedCodeBodyProps } from '../types';
+
+export const DetailedCodeBody: React.FC<DetailedCodeBodyProps> = ({
+  code,
+  language,
+  showFloatingBadge = false,
+}) => {
+  return (
+    <DetailedCodeBodyWrapper hasFloatingBadge={showFloatingBadge}>
+      <Source code={code} dark language={language} />
+      {showFloatingBadge && (
+        <FloatingIndicator aria-label="More code below">...</FloatingIndicator>
+      )}
+    </DetailedCodeBodyWrapper>
+  );
+};

package/.storybook/components/Elements/DetailedCode/DetailedCodeButton/index.tsx

@@ -0,0 +1,32 @@
+import { MiniChevronDownIcon } from '@codecademy/gamut-icons';
+import * as React from 'react';
+import { Anchor, Rotation, FlexBox, Text } from '@codecademy/gamut';
+
+import { DetailedCodeButtonProps } from '../types';
+
+export const DetailedCodeButton: React.FC<DetailedCodeButtonProps> = ({
+  isExpanded,
+  onToggle,
+  language,
+}) => {
+  return (
+    <Anchor
+      aria-expanded={isExpanded}
+      px={16}
+      py={12}
+      variant="interface"
+      width="100%"
+      onClick={onToggle}
+    >
+      <FlexBox columnGap={16} justifyContent="space-between">
+        <Text>{language}</Text>
+        <FlexBox columnGap={8} flexDirection="row" alignItems="center">
+          <Text>{isExpanded ? 'Show Less Code' : 'Show More Code'}</Text>
+          <Rotation rotated={isExpanded}>
+            <MiniChevronDownIcon aria-hidden size={16} />
+          </Rotation>
+        </FlexBox>
+      </FlexBox>
+    </Anchor>
+  );
+};

package/.storybook/components/Elements/DetailedCode/elements.tsx

@@ -0,0 +1,46 @@
+import { css } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
+import { FlexBox } from '@codecademy/gamut';
+
+export const DetailedCodeWrapper = styled(FlexBox)(
+  css({
+    width: '100%',
+    flexDirection: 'column',
+    borderRadius: 'md',
+    border: 1,
+    bg: 'background',
+  })
+);
+
+export const DetailedCodeBodyWrapper = styled(FlexBox)<{
+  hasFloatingBadge?: boolean;
+}>(({ hasFloatingBadge }) =>
+  css({
+    position: 'relative',
+    flexDirection: 'column',
+    /* Override Storybook's Source component default styles to remove unwanted spacing and borders in the container */
+    '& .docblock-source': {
+      borderRadius: 'none',
+      margin: 0,
+      pb: hasFloatingBadge ? 48 : 0,
+    },
+  })
+);
+
+export const FloatingIndicator = styled(FlexBox)(
+  css({
+    position: 'absolute',
+    bottom: 16,
+    left: '50%',
+    transform: 'translateX(-50%)',
+    zIndex: 1,
+    bg: 'inherit',
+    px: 12,
+    py: 4,
+    borderRadius: 'lg',
+    fontSize: 26,
+    fontWeight: 700,
+    color: 'white',
+    letterSpacing: '0.1em',
+  })
+);

package/.storybook/components/Elements/DetailedCode/index.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+
+import { DetailedCodeBody } from './DetailedCodeBody';
+import { DetailedCodeButton } from './DetailedCodeButton';
+import { DetailedCodeWrapper } from './elements';
+import { DetailedCodeProps } from './types';
+
+const DEFAULT_PREVIEW_LINES = 20;
+const DEFAULT_LANGUAGE = 'tsx';
+
+export const DetailedCode: React.FC<DetailedCodeProps> = ({
+  code,
+  initiallyExpanded = false,
+  language = DEFAULT_LANGUAGE,
+  preview = false,
+  previewLines = DEFAULT_PREVIEW_LINES,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(initiallyExpanded);
+  const normalizedPreviewLines = Math.max(0, previewLines);
+  const previewEnabled = preview && normalizedPreviewLines > 0;
+
+  const codeLines = code.split('\n');
+  const hasMoreCode =
+    previewEnabled && codeLines.length > normalizedPreviewLines;
+
+  const previewCode = previewEnabled
+    ? codeLines.slice(0, normalizedPreviewLines).join('\n')
+    : code;
+
+  const displayedCode = isExpanded ? code : previewCode;
+
+  return (
+    <DetailedCodeWrapper>
+      <DetailedCodeBody
+        code={displayedCode}
+        language={language}
+        showFloatingBadge={hasMoreCode && !isExpanded}
+      />
+      {hasMoreCode && (
+        <DetailedCodeButton
+          isExpanded={isExpanded}
+          onToggle={() => setIsExpanded((prev) => !prev)}
+          language={language}
+        />
+      )}
+    </DetailedCodeWrapper>
+  );
+};

package/.storybook/components/Elements/DetailedCode/types.ts

@@ -0,0 +1,24 @@
+import { Source } from '@storybook/blocks';
+import { ComponentProps } from 'react';
+
+type SourceLanguage = ComponentProps<typeof Source>['language'];
+
+export interface DetailedCodeProps {
+  code: string;
+  language?: SourceLanguage;
+  initiallyExpanded?: boolean;
+  preview?: boolean;
+  previewLines?: number;
+}
+
+export interface DetailedCodeButtonProps {
+  isExpanded: boolean;
+  onToggle: () => void;
+  language: SourceLanguage;
+}
+
+export interface DetailedCodeBodyProps {
+  code: string;
+  language: SourceLanguage;
+  showFloatingBadge?: boolean;
+}

package/.storybook/components/index.tsx

@@ -2,6 +2,7 @@ export * from './ImageWrapper';
 export * from './TokenTable';
 export * from './Headers';
 export * from './Elements/Callout';
+export * from './Elements/DetailedCode';
 export * from './Elements/KeyboardKey';
 export * from './Elements/Markdown';
 export * from './Elements/ImageGallery';

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.1-alpha.9135d1.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.0...@codecademy/styleguide@79.2.1-alpha.9135d1.0) (2026-03-12)
+### [79.2.1-alpha.cb2cfc.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.0...@codecademy/styleguide@79.2.1-alpha.cb2cfc.0) (2026-03-16)
 
 **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.1-alpha.9135d1.0",
+  "version": "79.2.1-alpha.cb2cfc.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "e523ddaf3dad8a0af4e022007aaca3a2fd5930e4"
+  "gitHead": "8f7b19e053cc39e26d9be621c1b408d692e012f5"
 }

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

@@ -1,8 +1,9 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 
-import { ComponentHeader, LinkTo } from '~styleguide/blocks';
+import { ComponentHeader, DetailedCode, LinkTo } from '~styleguide/blocks';
 
 import * as ConnectedFormStories from './ConnectedForm.stories';
+import { example } from './example';
 
 export const parameters = {
   title: 'ConnectedForm',
@@ -40,75 +41,7 @@ This hook also returns the `FormRequiredText` component - include this before yo
 
 ### Example code
 
-```tsx
-import {
-  ConnectedCheckbox,
-  ConnectedInput,
-  ConnectedSelect,
-  useConnectedForm,
-} from '@codecademy/gamut';
-
-import { TerminalIcon } from '@codecademy/gamut-icons';
-
-export const GoodForm = () => {
-  const {
-    ConnectedFormGroup,
-    ConnectedForm,
-    connectedFormProps,
-    FormRequiredText,
-  } = useConnectedForm({
-    defaultValues: {
-      thisField: true,
-      thatField: 'zero',
-      anotherField: 'state your name.',
-    },
-    validationRules: {
-      thisField: { required: 'you need to check this.' },
-      thatField: {
-        pattern: {
-          value: /^(?:(?!zero).)*$/,
-          message: 'literally anything but zero',
-        },
-      },
-    },
-  });
-
-  return (
-    <ConnectedForm
-      onSubmit={({ thisField }) => console.log(thisField)}
-      resetOnSubmit
-      {...connectedFormProps}
-    >
-      <SubmitButton>submit this form.</SubmitButton>
-      <ConnectedFormGroup
-        name="thisField"
-        label="cool checkbox bruh"
-        field={{
-          component: ConnectedCheckbox,
-          label: 'check it ouuut',
-        }}
-      />
-      <ConnectedFormGroup
-        name="thatField"
-        label="cool select dude"
-        field={{
-          component: ConnectedSelect,
-          options: ['one', 'two', 'zero'],
-        }}
-      />
-      <ConnectedFormGroup
-        name="anotherField"
-        label="cool input"
-        field={{
-          component: ConnectedInput,
-          icon: TerminalIcon,
-        }}
-      />
-      <FormRequiredText />
-    </ConnectedForm>
-  );
-};
-```
+<DetailedCode code={example} language="tsx" preview />
 
 ## Variants
 

package/src/lib/Organisms/ConnectedForm/ConnectedForm/example.ts

@@ -0,0 +1,67 @@
+export const example = `import {
+  ConnectedCheckbox,
+  ConnectedInput,
+  ConnectedSelect,
+  useConnectedForm,
+} from '@codecademy/gamut';
+
+import { TerminalIcon } from '@codecademy/gamut-icons';
+
+export const GoodForm = () => {
+  const {
+    ConnectedFormGroup,
+    ConnectedForm,
+    connectedFormProps,
+    FormRequiredText,
+  } = useConnectedForm({
+    defaultValues: {
+      thisField: true,
+      thatField: 'zero',
+      anotherField: 'state your name.',
+    },
+    validationRules: {
+      thisField: { required: 'you need to check this.' },
+      thatField: {
+        pattern: {
+          value: /^(?:(?!zero).)*$/,
+          message: 'literally anything but zero',
+        },
+      },
+    },
+  });
+
+  return (
+    <ConnectedForm
+      onSubmit={({ thisField }) => console.log(thisField)}
+      resetOnSubmit
+      {...connectedFormProps}
+    >
+      <SubmitButton>submit this form.</SubmitButton>
+      <ConnectedFormGroup
+        name="thisField"
+        label="cool checkbox bruh"
+        field={{
+          component: ConnectedCheckbox,
+          label: 'check it ouuut',
+        }}
+      />
+      <ConnectedFormGroup
+        name="thatField"
+        label="cool select dude"
+        field={{
+          component: ConnectedSelect,
+          options: ['one', 'two', 'zero'],
+        }}
+      />
+      <ConnectedFormGroup
+        name="anotherField"
+        label="cool input"
+        field={{
+          component: ConnectedInput,
+          icon: TerminalIcon,
+        }}
+      />
+      <FormRequiredText />
+    </ConnectedForm>
+  );
+};`;

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,124 +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 p={32}>
-        <DatePicker
-          label="Date"
-          locale="de-DE"
-          placeholder="MM/DD/YYYY"
-          selectedDate={selectedDate}
-          setSelectedDate={setSelectedDate}
-        />
-      </Box>
-    );
-  },
-};
-
-export const WithInitialDate: Story = {
-  render: function DatePickerStory() {
-    const [selectedDate, setSelectedDate] = useState<Date | null>(
-      () => new Date(2026, 1, 15)
-    );
-    return (
-      <DatePicker
-        label="Date"
-        placeholder="MM/DD/YYYY"
-        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 p={32}>
-        <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"
-          placeholder="MM/DD/YYYY"
-          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>
-    </>
-  );
-}