@codecademy/styleguide 79.2.5-alpha.a33c0b.0 → 79.3.0

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

@@ -0,0 +1,352 @@
+import {
+  BarChart,
+  BarProps,
+  Box,
+  PartialBarChartTranslations,
+} from '@codecademy/gamut';
+import {
+  BookFlipPageIcon,
+  DataScienceIcon,
+  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: {
+    description: 'Chart showing programming language experience levels',
+    maxScaleValue: 2000,
+    title: 'Skills experience chart',
+    unit: 'XP',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof BarChart>;
+
+const simpleBarData: BarProps[] = [
+  { categoryLabel: 'Python', seriesOneValue: 1500 },
+  { categoryLabel: 'JavaScript', seriesOneValue: 2000 },
+  { categoryLabel: 'HTML/CSS', seriesOneValue: 800 },
+  { categoryLabel: 'SQL', seriesOneValue: 600 },
+  { categoryLabel: 'React', seriesOneValue: 450 },
+];
+
+const stackedBarData: BarProps[] = [
+  { categoryLabel: 'Python', seriesOneValue: 200, seriesTwoValue: 1500 },
+  {
+    categoryLabel: 'JavaScript',
+    icon: TerminalIcon,
+    seriesOneValue: 1800,
+    seriesTwoValue: 2000,
+  },
+  { categoryLabel: 'HTML/CSS', seriesOneValue: 600, seriesTwoValue: 800 },
+  { categoryLabel: 'SQL', seriesOneValue: 550, seriesTwoValue: 600 },
+  { categoryLabel: 'React', seriesOneValue: 300, seriesTwoValue: 450 },
+];
+
+const accessibilityBarData: BarProps[] = [
+  { categoryLabel: 'Python', seriesOneValue: 200, seriesTwoValue: 1500 },
+  {
+    categoryLabel: 'JavaScript',
+    seriesOneValue: 1800,
+    seriesTwoValue: 2000,
+    href: '/javascript',
+  },
+  { categoryLabel: 'HTML/CSS', seriesOneValue: 600, seriesTwoValue: 800 },
+  { categoryLabel: 'SQL', seriesOneValue: 550, href: '/sql' },
+  { categoryLabel: 'Rust', seriesOneValue: 400 },
+  { categoryLabel: 'React', seriesOneValue: 300, seriesTwoValue: 450 },
+];
+
+const accessibilityTranslations: PartialBarChartTranslations = {
+  accessibility: {
+    stackedBarSummary: (ctx) =>
+      `${ctx.seriesOneValue} ${ctx.unit} gained — now at ${ctx.seriesTwoValue} ${ctx.unit} in ${ctx.categoryLabel}`,
+    singleValueBarSummary: (ctx) =>
+      `${ctx.value} ${ctx.unit} in ${ctx.categoryLabel}`,
+  },
+  locale: 'en',
+};
+
+const barDataWithIcons: BarProps[] = [
+  {
+    categoryLabel: 'Python',
+    seriesOneValue: 200,
+    seriesTwoValue: 1500,
+    icon: TerminalIcon,
+  },
+  {
+    categoryLabel: 'JavaScript',
+    seriesOneValue: 150,
+    seriesTwoValue: 2000,
+    icon: TerminalIcon,
+  },
+  {
+    categoryLabel: 'Data Science',
+    seriesOneValue: 100,
+    seriesTwoValue: 800,
+    icon: DataScienceIcon,
+  },
+  {
+    categoryLabel: 'Backend',
+    seriesOneValue: 50,
+    seriesTwoValue: 600,
+    icon: TerminalIcon,
+  },
+  {
+    categoryLabel: 'Reading',
+    seriesOneValue: 75,
+    seriesTwoValue: 450,
+    icon: BookFlipPageIcon,
+  },
+];
+
+export const Default: Story = {
+  args: {
+    barValues: simpleBarData,
+    title: 'Skills experience chart',
+    description: 'Chart showing programming language experience levels',
+  },
+};
+
+export const Stacked: Story = {
+  args: {
+    barValues: stackedBarData,
+    title: 'Skills progress chart',
+    description: 'Progress toward total goals for each programming language',
+  },
+};
+
+export const WithIcons: Story = {
+  args: {
+    barValues: barDataWithIcons,
+    title: 'Skills progress with icons',
+    description: 'Skills progress with visual icons for each category',
+  },
+};
+
+export const Animated: Story = {
+  args: {
+    barValues: stackedBarData,
+    animate: true,
+    title: 'Animated skills chart',
+    description: 'Animated chart showing progress with entrance animations',
+  },
+};
+
+export const Interactive: Story = {
+  args: {
+    barValues: simpleBarData.map((bar) => ({
+      ...bar,
+      onClick: action(`Clicked ${bar.categoryLabel}`),
+    })),
+    title: 'Interactive skills chart',
+    description: 'Click on any row to view detailed course information',
+  },
+};
+
+export const WithLinks: Story = {
+  args: {
+    barValues: simpleBarData.map((bar) => ({
+      ...bar,
+      href: `#${bar.categoryLabel.toLowerCase().replace(/\s+/g, '-')}`,
+    })),
+    title: 'Skills chart with links',
+    description: 'Each row links to its corresponding course page',
+  },
+};
+
+export const WithVisualTitleAndDescription: Story = {
+  args: {
+    barValues: simpleBarData,
+    title: 'Programming Skills Overview',
+    description:
+      'Experience points earned across different programming languages',
+  },
+};
+
+export const WithHiddenTitleAndDescription: Story = {
+  render: () => {
+    return (
+      <BarChart
+        barValues={simpleBarData}
+        description="Experience points earned across different programming languages"
+        hideDescription
+        hideTitle
+        maxScaleValue={2000}
+        title="Programming Skills Overview"
+        unit="XP"
+      />
+    );
+  },
+};
+
+export const WithExternalTitle: Story = {
+  render: () => {
+    return (
+      <>
+        <Box
+          as="h2"
+          bg="background-selected"
+          border={1}
+          borderRadius="lg"
+          id="external-chart-title"
+          p={16}
+          textAlign="right"
+        >
+          Programming Skills Overview
+        </Box>
+        <BarChart
+          aria-labelledby="external-chart-title"
+          barValues={simpleBarData}
+          description="Experience points earned across different programming languages"
+          hideDescription={false}
+          maxScaleValue={2000}
+          unit="XP"
+        />
+      </>
+    );
+  },
+};
+
+export const WithSorting: Story = {
+  args: {
+    barValues: simpleBarData,
+    sortFns: ['alphabetically', 'numerically', 'none'],
+    title: 'Skills experience chart',
+    description: 'Use the dropdown to sort bars by different criteria',
+  },
+};
+
+const customSortingBarValues = [
+  {
+    categoryLabel: 'Python',
+    seriesOneValue: 1500,
+    dateAdded: new Date('2023-01-15'),
+  },
+  {
+    categoryLabel: 'JavaScript',
+    seriesOneValue: 2000,
+    dateAdded: new Date('2023-03-20'),
+  },
+  {
+    categoryLabel: 'React',
+    seriesOneValue: 450,
+    dateAdded: new Date('2023-06-10'),
+  },
+  {
+    categoryLabel: 'TypeScript',
+    seriesOneValue: 300,
+    dateAdded: new Date('2023-08-05'),
+  },
+  {
+    categoryLabel: 'SQL',
+    seriesOneValue: 600,
+    dateAdded: new Date('2023-02-28'),
+  },
+];
+
+export const WithCustomSorting: Story = {
+  args: {
+    barValues: customSortingBarValues,
+    sortFns: [
+      'none',
+      {
+        label: 'Recently Added',
+        value: 'recent',
+        sortFn: (bars) => {
+          return [...bars].sort((a, b) => {
+            const aDate = a.dateAdded as Date | undefined;
+            const bDate = b.dateAdded as Date | undefined;
+            if (!aDate && !bDate) return 0;
+            if (!aDate) return 1;
+            if (!bDate) return -1;
+            return bDate.getTime() - aDate.getTime();
+          });
+        },
+      },
+      {
+        label: 'Oldest First',
+        value: 'oldest',
+        sortFn: (bars) => {
+          return [...bars].sort((a, b) => {
+            const aDate = a.dateAdded as Date | undefined;
+            const bDate = b.dateAdded as Date | undefined;
+            if (!aDate && !bDate) return 0;
+            if (!aDate) return 1;
+            if (!bDate) return -1;
+            return aDate.getTime() - bDate.getTime();
+          });
+        },
+      },
+    ],
+    title: 'Skills chart with date sorting',
+    description:
+      'Custom sort functions can access additional properties on BarProps, such as dates',
+  },
+};
+
+export const CustomStyles: Story = {
+  args: {
+    barValues: stackedBarData,
+    styleConfig: {
+      seriesTwoBarColor: 'text',
+      seriesOneBarColor: 'primary',
+      textColor: 'primary',
+      seriesOneLabel: 'feedback-error',
+      seriesTwoLabel: 'feedback-success',
+    },
+    title: 'Custom styled skills chart',
+    description: 'Custom color scheme applied to chart elements',
+  },
+};
+
+export const CustomScale: Story = {
+  args: {
+    barValues: simpleBarData,
+    maxScaleValue: 2000,
+    scaleInterval: 250,
+    title: 'Skills chart with custom scale',
+    description: 'Custom scale intervals for more granular value display',
+  },
+};
+
+export const WithStringTranslations: Story = {
+  args: {
+    barValues: stackedBarData,
+    sortFns: ['alphabetically', 'numerically', 'none'],
+    title: 'Gráfico de habilidades',
+    description: 'Progreso hacia los objetivos totales por lenguaje',
+    unit: 'XP',
+    translations: {
+      locale: 'es',
+      sortLabel: 'Ordenar por:',
+      sortOptions: {
+        none: 'Ninguno',
+        labelAsc: 'Etiqueta (A-Z)',
+        labelDesc: 'Etiqueta (Z-A)',
+        valueAsc: 'Valor (Bajo-Alto)',
+        valueDesc: 'Valor (Alto-Bajo)',
+      },
+      accessibility: {
+        stackedBarSummary: (ctx) =>
+          `Valor inicial - ${ctx.seriesOneValue} ${ctx.unit}. ${ctx.gained} ${ctx.unit} ganado - ahora en ${ctx.seriesTwoValue} ${ctx.unit} en ${ctx.categoryLabel}`,
+        singleValueBarSummary: (ctx) =>
+          `${ctx.value} ${ctx.unit} en ${ctx.categoryLabel}`,
+      },
+    },
+  },
+};
+
+export const WithFunctionTranslations: Story = {
+  args: {
+    barValues: accessibilityBarData,
+    description:
+      'Custom aria-label summaries via translation functions (stacked, link, and non-interactive bars)',
+    title: 'Skills experience (accessibility functions)',
+    translations: accessibilityTranslations,
+    unit: 'XP',
+  },
+};

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

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 import {
   AboutHeader,

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

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

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

@@ -12,9 +12,9 @@ import {
   useConnectedForm,
 } from '@codecademy/gamut';
 import { MiniArrowRightIcon, TerminalIcon } from '@codecademy/gamut-icons';
+import { action } from '@storybook/addon-actions';
 import type { Meta } from '@storybook/react';
 import { useState } from 'react';
-import { action } from 'storybook/actions';
 
 const meta: Meta<typeof ConnectedForm> = {
   component: ConnectedForm,

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

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Organisms/ConnectedForm/ConnectedFormGroup/ConnectedFormGroup.stories.tsx

@@ -7,8 +7,8 @@ import {
   Text,
   useConnectedForm,
 } from '@codecademy/gamut';
+import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from 'storybook/actions';
 import type { TypeWithDeepControls } from 'storybook-addon-deep-controls';
 
 import { infotipNestedArgTypes } from '~styleguide/argTypes';

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

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

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

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Organisms/ConnectedForm/SubmitButton/SubmitButton.stories.tsx

@@ -1,6 +1,6 @@
 import { ConnectedForm, FlexBox, SubmitButton, Text } from '@codecademy/gamut';
+import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from 'storybook/actions';
 
 const meta: Meta<typeof SubmitButton> = {
   component: SubmitButton,

package/src/lib/Organisms/GridForm/About.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 import {
   AboutHeader,

package/src/lib/Organisms/GridForm/Buttons.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Organisms/GridForm/Buttons.stories.tsx

@@ -1,6 +1,6 @@
 import { GridForm } from '@codecademy/gamut';
+import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from 'storybook/actions';
 
 const meta: Meta<typeof GridForm> = {
   component: GridForm,

package/src/lib/Organisms/GridForm/Fields.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Organisms/GridForm/Fields.stories.tsx

@@ -1,6 +1,6 @@
 import { FormGroup, GridForm, Input, Text } from '@codecademy/gamut';
+import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from 'storybook/actions';
 
 const meta: Meta<typeof GridForm> = {
   component: GridForm,

package/src/lib/Organisms/GridForm/Layout.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Organisms/GridForm/Layout.stories.tsx

@@ -1,6 +1,6 @@
 import { GridForm, Markdown } from '@codecademy/gamut';
+import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from 'storybook/actions';
 
 const meta: Meta<typeof GridForm> = {
   component: GridForm,

package/src/lib/Organisms/GridForm/States.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Organisms/GridForm/States.stories.tsx

@@ -1,7 +1,7 @@
 import { GridForm } from '@codecademy/gamut';
+import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
-import { action } from 'storybook/actions';
 
 const meta: Meta<typeof GridForm> = {
   component: GridForm,

package/src/lib/Organisms/GridForm/Usage.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Organisms/GridForm/Usage.stories.tsx

@@ -1,6 +1,6 @@
 import { GridForm } from '@codecademy/gamut';
+import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from 'storybook/actions';
 import type { TypeWithDeepControls } from 'storybook-addon-deep-controls';
 
 const meta: TypeWithDeepControls<Meta<typeof GridForm>> = {

package/src/lib/Organisms/GridForm/Validation.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Organisms/Lists & Tables/About.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 import {
   AboutHeader,

package/src/lib/Organisms/Lists & Tables/DataList/DataList.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 
 import { Callout, ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Organisms/Lists & Tables/DataTable/DataTable.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 
 import { Callout, ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Organisms/Lists & Tables/List/List.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 
 import { Callout, ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Organisms/Markdown/Markdown.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Typography/About.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 import {
   AboutHeader,

package/src/lib/Typography/Anchor/Anchor.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 
 import {
   Callout,

package/src/lib/Typography/HiddenText/HiddenText.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 
 import { Callout, ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Typography/Text/Text.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/UX Writing/About.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 import {
   AboutHeader,

package/src/lib/UX Writing/Accessibility guidelines.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 import { AboutHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/UX Writing/Component guidelines/About.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 import {
   AboutHeader,

package/src/lib/UX Writing/Component guidelines/Alerts.mdx

@@ -1,5 +1,5 @@
 import { Alert, Text } from '@codecademy/gamut/src';
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 import { AboutHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/UX Writing/Component guidelines/Alternative text.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 import { AboutHeader } from '~styleguide/blocks';
 

package/src/lib/UX Writing/Component guidelines/Buttons.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 import { AboutHeader } from '~styleguide/blocks';
 

package/src/lib/UX Writing/Component guidelines/Confirmation dialogs.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 import { AboutHeader, ImageWrapper, LinkTo } from '~styleguide/blocks';
 

package/src/lib/UX Writing/Component guidelines/Error messages.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 import { AboutHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/UX Writing/Component guidelines/Notifications.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 import { AboutHeader } from '~styleguide/blocks';
 

package/src/lib/UX Writing/Component guidelines/Toasts.mdx

@@ -1,6 +1,6 @@
 import { Anchor, Toast } from '@codecademy/gamut';
 import { MegaphoneIcon } from '@codecademy/gamut-icons';
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 import { AboutHeader } from '~styleguide/blocks';
 

package/src/lib/UX Writing/Component guidelines/Tooltips.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 import { AboutHeader } from '~styleguide/blocks';