@codecademy/styleguide 78.5.5-alpha.4615f3.0 → 78.5.5-alpha.6dced4.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.
 
-### [78.5.5-alpha.4615f3.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@78.5.4...@codecademy/styleguide@78.5.5-alpha.4615f3.0) (2025-12-19)
+### [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)
 
 **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.4615f3.0",
+  "version": "78.5.5-alpha.6dced4.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "ecdbb1e8e5dfbdc49939350ac4b9acd28333725a"
+  "gitHead": "e46527aa333a945b06c5ff675d72dc30250f8de3"
 }

package/src/lib/Atoms/Icons/constants.tsx

@@ -38,7 +38,6 @@ export const VENDOR_ICONS = pick(
     'ReactIcon',
     'RedditIcon',
     'RedditSolidIcon',
-    'SkillsoftIcon',
     'SlackIcon',
     'SpotifyIcon',
     'TikTokIcon',

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

@@ -0,0 +1,92 @@
+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

@@ -0,0 +1,183 @@
+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,
+  },
+};