@codecademy/styleguide 78.5.5-alpha.6dced4.0 → 78.5.5-alpha.7e2d80.0

package/.storybook/components/Elements/KeyboardKey.tsx

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+import { css } from '@codecademy/gamut-styles';
+
+export const KeyboardKey = styled.kbd(
+  css({
+    mx: 2 as any,
+    fontFamily: 'monospace',
+    fontSize: '0.75rem' as any,
+    bg: 'background-selected',
+    border: 1,
+    borderColor: 'border-tertiary',
+    borderRadius: 'sm',
+    px: 4,
+    py: 2 as any,
+    boxShadow: 'inset 0 -1px 0 rgba(0, 0, 0, 0.2)',
+  })
+);

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/KeyboardKey';
 export * from './Elements/Markdown';
 export * from './Elements/ImageGallery';
 export * from './Scales/ColorScale';

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.5-alpha.6dced4.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@78.5.4...@codecademy/styleguide@78.5.5-alpha.6dced4.0) (2026-01-05)
+### [78.5.5-alpha.7e2d80.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@78.5.4...@codecademy/styleguide@78.5.5-alpha.7e2d80.0) (2026-01-06)
 
 **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.5-alpha.6dced4.0",
+  "version": "78.5.5-alpha.7e2d80.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "e46527aa333a945b06c5ff675d72dc30250f8de3"
+  "gitHead": "32955354e4424e7ed406926d63c1e4dbe253318f"
 }

package/src/lib/Atoms/SkipToContent/SkipToContent.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 
-import { ComponentHeader } from '~styleguide/blocks';
+import { ComponentHeader, KeyboardKey } from '~styleguide/blocks';
 
 import * as SkipToContentStories from './SkipToContent.stories';
 
@@ -21,11 +21,10 @@ export const parameters = {
 
 ## Usage
 
-Use `<SkipToContent />` to add a hidden-by-default link that becomes visible when the user <kbd>Tab</kbd>s over it (gives it focus).
+Use `<SkipToContent />` to add a hidden-by-default link that becomes visible when the user <KeyboardKey>Tab</KeyboardKey>s over it (gives it focus).
 It takes in the ID of the element it will scroll to and focus ([dev.to article explaining why](https://dev.to/robdodson/managing-focus-64l)) on click (via mouse or keyboard).
 
-This type of control is necessary for pages that have a bunch of stuff keyboard users would have to Tab through to get
-to the page's main content (like navigations).
+This type of control is necessary for pages that have a bunch of stuff keyboard users would have to <KeyboardKey>Tab</KeyboardKey> through to get to the page's main content (like navigations).
 
 For this element to work properly, there must be a `<SkipToContentTarget />` component with the id passed into this component for the `contentId` prop. The `<SkipToContentTarget />` component by default has a `tabIndex` of -1.
 Example:
@@ -43,7 +42,7 @@ Example:
 </div>
 ```
 
-To see it, keep tabbing around on this page or visit [the catalog](https://www.codecademy.com/catalog/language/javascript) and navigate via tab to see it in action.
+To see it, keep pressing <KeyboardKey>Tab</KeyboardKey> around on this page or visit [the catalog](https://www.codecademy.com/catalog/language/javascript) and navigate via <KeyboardKey>Tab</KeyboardKey> to see it in action.
 
 ## Playground
 

package/src/lib/Molecules/Flyout/Flyout.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 
-import { ComponentHeader, LinkTo } from '~styleguide/blocks';
+import { ComponentHeader, KeyboardKey, LinkTo } from '~styleguide/blocks';
 
 import * as FlyoutStories from './Flyout.stories';
 
@@ -25,7 +25,7 @@ export const parameters = {
 
 ## Usage
 
-On button click, a container animates in from the left or right side of the window. Flyout can be configured to close by pressing the “X” close icon, pressing they “esc” key, and/or clicking outside of the container.
+On button click, a container animates in from the left or right side of the window. Flyout can be configured to close by pressing the "X" close icon, pressing the <KeyboardKey>Esc</KeyboardKey> key, and/or clicking outside of the container.
 
 Internally, Flyout is a combination of <LinkTo id="Molecules/Modals/Overlay">Overlay</LinkTo> and <LinkTo id="Atoms/Drawer">Drawer</LinkTo>.
 

package/src/lib/Molecules/Modals/Modal/Modal.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 
-import { ComponentHeader } from '~styleguide/blocks';
+import { ComponentHeader, KeyboardKey } from '~styleguide/blocks';
 
 import * as ModalStories from './Modal.stories';
 
@@ -77,7 +77,7 @@ If the close button is hidden, you will need to create a custom way to close the
 Other than creating buttons that can close the Modal, there are other ways a Modal can be closed by the user.
 
 1. Clicking the content outside of the Modal
-2. Clicking the escape key on their keyboard
+2. Pressing the <KeyboardKey>Esc</KeyboardKey> key on their keyboard
 
 All of these methods default to `true` for accessibility reasons, and rely on setting the required `onRequestClose` prop and making sure it toggles the `isOpen` prop on the Modal.
 

package/src/lib/Molecules/Tabs/Tabs.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 
-import { ComponentHeader, LinkTo } from '~styleguide/blocks';
+import { ComponentHeader, KeyboardKey, LinkTo } from '~styleguide/blocks';
 
 import * as TabStories from './Tabs.stories';
 
@@ -67,7 +67,7 @@ It is recommended to add a unique `aria-label` to the `TabNav` component, to dif
 
 ### Tabs with interactive content
 
-Normally, when you navigate to the contents of a `TabPanel` using the <kbd>tab</kbd> key or arrow keys, the entire section of the `TabPanel` will be in focus.
+Normally, when you navigate to the contents of a `TabPanel` using the <KeyboardKey>Tab</KeyboardKey> key or arrow keys, the entire section of the `TabPanel` will be in focus.
 
 However, if you have tabs with interactive content within them (such as a button or link), and tab into the `TabPanel`, the focus will be on the interactive content and not the entirety of the `TabPanel`.
 

package/src/lib/Molecules/Tips/InfoTip/InfoTip.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 
-import { ComponentHeader } from '~styleguide/blocks';
+import { ComponentHeader, KeyboardKey } from '~styleguide/blocks';
 
 import * as InfoTipStories from './InfoTip.stories';
 
@@ -25,7 +25,7 @@ export const parameters = {
 
 ## Usage
 
-A tip is triggered by clicking on an information icon button and can be closed by clicking outside, pressing <kbd>Esc</kbd>, or clicking the info button again.
+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.
 
@@ -65,9 +65,9 @@ Links or buttons within InfoTips should be used sparingly and only when the info
 
 When using `placement="floating"`, InfoTips implements focus management for easier navigation:
 
-- **Tab**: Navigate forward through focusable elements (links, buttons) inside the tip. When reaching the last element, wraps back to the InfoTip button for convenience
-- **Shift+Tab**: Navigate backward naturally through the page
-- **Escape**: Closes the tip and returns focus to the InfoTip button
+- **<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
 
 <Canvas of={InfoTipStories.KeyboardNavigation} />
 
@@ -75,10 +75,10 @@ When using `placement="floating"`, InfoTips implements focus management for easi
 
 InfoTips have intelligent Escape key handling that works correctly both inside and outside Modals:
 
-- **InfoTips close on Escape** regardless of where keyboard focus is, and focus returns to the InfoTip button
-- **InfoTips inside Modals close first** - When an InfoTip is placed inside a Modal, pressing Escape closes the InfoTip while keeping the Modal open
-- **Layered navigation** - After closing an InfoTip inside a Modal, pressing Escape again closes the Modal
-- **Modals take priority over external InfoTips** - InfoTips detect when `dialog[open]`, `role="dialog"`, or `role="alertdialog"` elements are present and defer Escape handling to them when the InfoTip is outside the Modal
+- **InfoTips close on <KeyboardKey>Esc</KeyboardKey>** regardless of where keyboard focus is, and focus returns to the InfoTip button
+- **InfoTips inside Modals close first** - When an InfoTip is placed inside a Modal, pressing <KeyboardKey>Esc</KeyboardKey> closes the InfoTip while keeping the Modal open
+- **Layered navigation** - After closing an InfoTip inside a Modal, pressing <KeyboardKey>Esc</KeyboardKey> again closes the Modal
+- **Modals take priority over external InfoTips** - InfoTips detect when `dialog[open]`, `role="dialog"`, or `role="alertdialog"` elements are present and defer <KeyboardKey>Esc</KeyboardKey> handling to them when the InfoTip is outside the Modal
 
 <Canvas of={InfoTipStories.InfoTipInsideModal} />
 

package/src/lib/Organisms/BarChart/BarChart.mdx

@@ -1,92 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
-
-import { ComponentHeader } from '~styleguide/blocks';
-
-import * as BarChartStories from './BarChart.stories';
-
-export const parameters = {
-  subtitle: `A horizontal bar chart for visualizing comparative data`,
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=55123-4176',
-  },
-  status: 'current',
-  source: {
-    repo: 'gamut',
-    githubLink:
-      'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/BarChart',
-  },
-};
-
-<Meta of={BarChartStories} />;
-
-<ComponentHeader {...parameters} />
-
-## Usage
-
-Use BarChart to display comparative data across categories, such as skills progress, XP earned, or any quantitative metrics that benefit from visual comparison.
-
-### Best practices:
-
-- Use consistent units across all bars in a chart
-- Limit the number of bars to maintain readability (5-10 is optimal)
-- Consider using the stacked variant to show progress toward a goal
-- Sort bars by value (descending) when ranking is important
-
-When NOT to use
-
-- For showing trends over time - use a line chart instead
-- For showing parts of a whole - use a pie or donut chart
-- For very small datasets (1-2 items) - consider using ProgressBar
-
-## Variants
-
-### Simple (Non-stacked)
-
-Use the simple variant when showing single values per category. Only `seriesOneValue` is provided.
-
-<Canvas of={BarChartStories.Default} />
-
-### Stacked
-
-Use the stacked variant when showing progress within a total. Provide both `seriesOneValue` (progress) and `seriesTwoValue` (total).
-
-<Canvas of={BarChartStories.Stacked} />
-
-### With Icons
-
-Add icons to labels for better visual identification of categories.
-
-<Canvas of={BarChartStories.WithIcons} />
-
-### Animated
-
-Enable entrance animations for a more engaging experience.
-
-<Canvas of={BarChartStories.Animated} />
-
-### Interactive
-
-Rows can be made interactive with `onClick` handlers or `href` links.
-
-<Canvas of={BarChartStories.Interactive} />
-
-## Playground
-
-<Canvas sourceState="shown" of={BarChartStories.Default} />
-
-<Controls />
-
-## Accessibility considerations
-
-- Always provide either `aria-label` or `aria-labelledby` to describe the chart
-- Each row automatically generates an accessible label summarizing its values
-- Interactive rows (with onClick/href) are properly announced as buttons/links
-- Grid lines are marked as decorative and hidden from screen readers
-- The scale header is hidden on small screens and marked as decorative
-
-## UX writing
-
-- Keep y-axis labels concise (1-3 words)
-- Use consistent unit labels (e.g., "XP", "hours", "points")
-- Consider locale-aware number formatting for international audiences

package/src/lib/Organisms/BarChart/BarChart.stories.tsx

@@ -1,183 +0,0 @@
-import { BarChart, BarProps } from '@codecademy/gamut';
-import {
-  BookFlipPageIcon,
-  CodeIcon,
-  DataScienceIcon,
-  GameControllerIcon,
-  TerminalIcon,
-} from '@codecademy/gamut-icons';
-import { action } from '@storybook/addon-actions';
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta: Meta<typeof BarChart> = {
-  component: BarChart,
-  args: {
-    'aria-label': 'Skills experience chart',
-    minRange: 0,
-    maxRange: 2000,
-    unit: 'XP',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof BarChart>;
-
-// Sample data for non-stacked (simple) bars
-const simpleBarData: BarProps[] = [
-  { yLabel: 'Python', seriesOneValue: 1500 },
-  { yLabel: 'JavaScript', seriesOneValue: 2000 },
-  { yLabel: 'HTML/CSS', seriesOneValue: 800 },
-  { yLabel: 'SQL', seriesOneValue: 600 },
-  { yLabel: 'React', seriesOneValue: 450 },
-];
-
-// Sample data for stacked bars (with seriesTwoValue)
-const stackedBarData: BarProps[] = [
-  { yLabel: 'Python', seriesOneValue: 200, seriesTwoValue: 1500 },
-  { yLabel: 'JavaScript', seriesOneValue: 1800, seriesTwoValue: 2000 },
-  { yLabel: 'HTML/CSS', seriesOneValue: 100, seriesTwoValue: 800 },
-  { yLabel: 'SQL', seriesOneValue: 50, seriesTwoValue: 600 },
-  { yLabel: 'React', seriesOneValue: 75, seriesTwoValue: 450 },
-];
-
-// Sample data with icons
-const barDataWithIcons: BarProps[] = [
-  {
-    yLabel: 'Python',
-    seriesOneValue: 200,
-    seriesTwoValue: 1500,
-    icon: CodeIcon,
-  },
-  {
-    yLabel: 'JavaScript',
-    seriesOneValue: 150,
-    seriesTwoValue: 2000,
-    icon: TerminalIcon,
-  },
-  {
-    yLabel: 'Data Science',
-    seriesOneValue: 100,
-    seriesTwoValue: 800,
-    icon: DataScienceIcon,
-  },
-  {
-    yLabel: 'Game Dev',
-    seriesOneValue: 50,
-    seriesTwoValue: 600,
-    icon: GameControllerIcon,
-  },
-  {
-    yLabel: 'Reading',
-    seriesOneValue: 75,
-    seriesTwoValue: 450,
-    icon: BookFlipPageIcon,
-  },
-];
-
-/**
- * Default non-stacked bar chart showing single values
- */
-export const Default: Story = {
-  args: {
-    barValues: simpleBarData,
-  },
-};
-
-/**
- * Stacked bar chart showing progress (seriesOneValue) over total (seriesTwoValue)
- */
-export const Stacked: Story = {
-  args: {
-    barValues: stackedBarData,
-  },
-};
-
-/**
- * Bar chart with icons next to labels
- */
-export const WithIcons: Story = {
-  args: {
-    barValues: barDataWithIcons,
-  },
-};
-
-/**
- * Animated bar chart with staggered entrance
- */
-export const Animated: Story = {
-  args: {
-    barValues: stackedBarData,
-    animate: true,
-  },
-};
-
-/**
- * Bar chart sorted by value in descending order
- */
-export const SortedByValue: Story = {
-  args: {
-    barValues: simpleBarData,
-    sortBy: 'value',
-    order: 'descending',
-  },
-};
-
-/**
- * Bar chart sorted alphabetically by label
- */
-export const SortedByLabel: Story = {
-  args: {
-    barValues: simpleBarData,
-    sortBy: 'label',
-    order: 'ascending',
-  },
-};
-
-/**
- * Interactive bar chart with clickable rows
- */
-export const Interactive: Story = {
-  args: {
-    barValues: simpleBarData.map((bar) => ({
-      ...bar,
-      onClick: action(`Clicked ${bar.yLabel}`),
-    })),
-  },
-};
-
-/**
- * Interactive bar chart with linked rows
- */
-export const WithLinks: Story = {
-  args: {
-    barValues: simpleBarData.map((bar) => ({
-      ...bar,
-      href: `#${bar.yLabel.toLowerCase().replace(/\s+/g, '-')}`,
-    })),
-  },
-};
-
-/**
- * Bar chart with custom styling
- */
-export const CustomStyles: Story = {
-  args: {
-    barValues: stackedBarData,
-    styleConfig: {
-      backgroundBarColor: 'paleGreen',
-      foregroundBarColor: 'feedback-success',
-      textColor: 'navy',
-    },
-  },
-};
-
-/**
- * Bar chart with custom xScale interval
- */
-export const CustomScale: Story = {
-  args: {
-    barValues: simpleBarData,
-    maxRange: 2000,
-    xScale: 250,
-  },
-};