@codecademy/styleguide 79.1.2 → 79.1.3-alpha.09ab91.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [79.1.3-alpha.09ab91.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.2...@codecademy/styleguide@79.1.3-alpha.09ab91.0) (2026-02-26)
+
+**Note:** Version bump only for package @codecademy/styleguide
+
 ### [79.1.2](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.1...@codecademy/styleguide@79.1.2) (2026-02-12)
 
 **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.1.2",
+  "version": "79.1.3-alpha.09ab91.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "bbc4cf8da76ebc754ed05b11acd9d2e81bb8683e"
+  "gitHead": "014ac90de1bb9d802dc412b4008732d3225e03e9"
 }

package/src/lib/Organisms/Lists & Tables/DataList/CurrentEmployeeTable.tsx

@@ -0,0 +1,175 @@
+// @ts-nocheck
+import { DataList, FlexBox, Text } from '@codecademy/gamut';
+import styled from '@emotion/styled';
+
+const StyledDataListWrapper = styled.div`
+  width: 100%;
+
+  thead tr {
+    background: var(--color-background-selected) !important;
+  }
+
+  thead th,
+  thead th a {
+    font-weight: 700;
+  }
+`;
+
+const EmployeeCell = ({ name, role }) => (
+  <FlexBox flexDirection="column">
+    <Text fontWeight={700} variant="p-large">
+      {name}
+    </Text>
+    <Text variant="p-small">{role}</Text>
+  </FlexBox>
+);
+
+const columns = [
+  {
+    header: 'Employee',
+    key: 'employee',
+    size: 'xl',
+    sortable: true,
+    type: 'header',
+  },
+  {
+    header: 'Skill health avg',
+    key: 'skillHealthAvg',
+    size: 'lg',
+    sortable: true,
+  },
+  {
+    header: 'Skill spread',
+    key: 'skillSpread',
+    size: 'lg',
+    sortable: true,
+  },
+  {
+    header: 'Gaps',
+    key: 'gaps',
+    size: 'md',
+    sortable: true,
+  },
+  {
+    header: 'Gaps closed',
+    key: 'gapsClosed',
+    size: 'md',
+    sortable: true,
+  },
+];
+
+const rows = [
+  {
+    id: '1',
+    employee: (
+      <EmployeeCell name="Joshua Lewis" role="Quality Control Analyst" />
+    ),
+    skillHealthAvg: 'On target',
+    skillSpread: '44 skills',
+    gaps: 2,
+    gapsClosed: '0 +6%',
+  },
+  {
+    id: '2',
+    employee: (
+      <EmployeeCell
+        name="Kathryn Mallory Murphy-Richards"
+        role="Clinical Data Manager"
+      />
+    ),
+    skillHealthAvg: 'Needs improvement',
+    skillSpread: '19 skills',
+    gaps: 2,
+    gapsClosed: '0 +6%',
+  },
+  {
+    id: '3',
+    employee: (
+      <EmployeeCell
+        name="Cameron Williamson"
+        role="Regulatory Affairs Specialist"
+      />
+    ),
+    skillHealthAvg: 'Above target',
+    skillSpread: '23 skills',
+    gaps: 1,
+    gapsClosed: '0 +6%',
+  },
+  {
+    id: '4',
+    employee: (
+      <EmployeeCell name="Theresa Webb" role="Pharmacovigilance Scientist" />
+    ),
+    skillHealthAvg: 'Needs improvement',
+    skillSpread: '41 skills',
+    gaps: 1,
+    gapsClosed: '0 +6%',
+  },
+  {
+    id: '5',
+    employee: (
+      <EmployeeCell name="Savannah Nguyen" role="Medical Science Liaison" />
+    ),
+    skillHealthAvg: 'On target',
+    skillSpread: '18 skills',
+    gaps: 0,
+    gapsClosed: '0 +6%',
+  },
+  {
+    id: '6',
+    employee: <EmployeeCell name="Jacob Jones" role="Research Scientist" />,
+    skillHealthAvg: 'Above target',
+    skillSpread: '33 skills',
+    gaps: 0,
+    gapsClosed: '0 +6%',
+  },
+  {
+    id: '7',
+    employee: (
+      <EmployeeCell name="Jane Cooper" role="Clinical Trial Coordinator" />
+    ),
+    skillHealthAvg: 'Critical',
+    skillSpread: '40 skills',
+    gaps: 4,
+    gapsClosed: '0 +6%',
+  },
+  {
+    id: '8',
+    employee: (
+      <EmployeeCell name="Joshua Lewis" role="Quality Assurance Manager" />
+    ),
+    skillHealthAvg: 'Needs improvement',
+    skillSpread: '29 skills',
+    gaps: 3,
+    gapsClosed: '0 +6%',
+  },
+  {
+    id: '9',
+    employee: (
+      <EmployeeCell
+        name="Kathryn Mallory Murphy-Richards"
+        role="Formulation Development Scientist"
+      />
+    ),
+    skillHealthAvg: 'Needs improvement',
+    skillSpread: '12 skills',
+    gaps: 1,
+    gapsClosed: '0 +6%',
+  },
+];
+
+export function CurrentEmployeeTable() {
+  return (
+    <StyledDataListWrapper>
+      <DataList
+        header
+        id="employees-table"
+        idKey="id"
+        rows={rows}
+        columns={columns}
+        spacing="normal"
+        onRowSelect={() => {}}
+      />
+    </StyledDataListWrapper>
+  );
+}

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

@@ -191,6 +191,18 @@ The example below demonstrates the difference between default container query be
 
 <Callout text="In most cases, you should use the default container query behavior as it provides better responsive design. Only disable container queries when you have specific layout requirements that conflict with the default behavior." />
 
+## Employee table example
+
+An example of a DataList used to display employee skill data, with custom cell renderers for health status tags, gap warning indicators, and a row action menu.
+
+<Canvas of={DataListStories.EmployeeTableExample} />
+
+### Passing React elements directly as row values
+
+Row values can be React elements — rendered as-is inside the cell without needing a `render` function on the column. This is useful when the data is already shaped at the call site.
+
+<Canvas of={DataListStories.CurrentEmployeeTableExample} />
+
 ## Playground
 
 <Canvas sourceState="shown" of={DataListStories.Default} />

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

@@ -12,6 +12,8 @@ import {
   simpleColumns,
   simpleRows,
 } from '../examples';
+import { CurrentEmployeeTable } from './CurrentEmployeeTable';
+import { EmployeeTable } from './EmployeeTable';
 
 const meta: Meta<typeof DataList> = {
   component: DataList,
@@ -213,3 +215,11 @@ export const DisableContainerQuery: Story = {
   args: {},
   render: () => <DataListDisableContainerQueryExample />,
 };
+
+export const EmployeeTableExample: Story = {
+  render: () => <EmployeeTable />,
+};
+
+export const CurrentEmployeeTableExample: Story = {
+  render: () => <CurrentEmployeeTable />,
+};

package/src/lib/Organisms/Lists & Tables/DataList/EmployeeTable.tsx

@@ -0,0 +1,362 @@
+// @ts-nocheck
+import {
+  Box,
+  ColumnConfig,
+  DataList,
+  FlexBox,
+  IconButton,
+  Text,
+  useLocalQuery,
+} from '@codecademy/gamut';
+import {
+  MiniKebabMenuIcon,
+  MiniWarningTriangleIcon,
+} from '@codecademy/gamut-icons';
+import { theme } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
+import { useCallback, useMemo, useState } from 'react';
+
+const StyledDataListWrapper = styled.div`
+  width: 100%;
+
+  thead tr {
+    background: var(--color-background-selected);
+    border-top-left-radius: ${theme.borderRadii.xl};
+    border-top-right-radius: ${theme.borderRadii.xl};
+  }
+
+  thead th > div {
+    align-items: center;
+  }
+
+  thead th,
+  thead th button {
+    font-weight: 700 !important;
+  }
+
+  tbody tr:last-child {
+    border-bottom-left-radius: ${theme.borderRadii.xl};
+    border-bottom-right-radius: ${theme.borderRadii.xl};
+  }
+`;
+
+type SkillHealth =
+  | 'On target'
+  | 'Above target'
+  | 'Needs improvement'
+  | 'Critical';
+
+interface EmployeeRow {
+  id: string;
+  name: string;
+  title: string;
+  skillHealthAvg: SkillHealth;
+  skillSpread: number;
+  gapCount: number;
+  criticalGapCount: number;
+  gapsClosed: number;
+  gapGrowthPct: number;
+}
+
+const HEALTH_TAG_STYLES: Record<SkillHealth, { bg: string; color: string }> = {
+  'On target': { bg: 'background-success', color: 'feedback-success' },
+  'Above target': { bg: 'background-success', color: 'feedback-success' },
+  // NOTE: `theme.colors` is a global variable that is imported from `@codecademy/gamut-styles`
+  // and `yellow-400` is a static color, i.e. it doesn't switch when toggling between light and dark mode.
+  // it also does NOT pass a contrast test
+  'Needs improvement': {
+    bg: 'background-warning',
+    color: `${theme.colors['yellow-400']}`,
+  },
+  Critical: { bg: 'background-error', color: 'feedback-error' },
+};
+
+const EMPLOYEES: EmployeeRow[] = [
+  {
+    id: '1',
+    name: 'Joshua Lewis',
+    title: 'Quality Control Analyst',
+    skillHealthAvg: 'On target',
+    skillSpread: 44,
+    gapCount: 0,
+    criticalGapCount: 0,
+    gapsClosed: 8,
+    gapGrowthPct: 8,
+  },
+  {
+    id: '2',
+    name: 'Kathryn Mallory Murphy-Richards',
+    title: 'Clinical Data Manager',
+    skillHealthAvg: 'Needs improvement',
+    skillSpread: 19,
+    gapCount: 2,
+    criticalGapCount: 0,
+    gapsClosed: 8,
+    gapGrowthPct: 8,
+  },
+  {
+    id: '3',
+    name: 'Cameron Williamson',
+    title: 'Regulatory Affairs Specialist',
+    skillHealthAvg: 'Above target',
+    skillSpread: 23,
+    gapCount: 0,
+    criticalGapCount: 0,
+    gapsClosed: 8,
+    gapGrowthPct: 8,
+  },
+  {
+    id: '4',
+    name: 'Theresa Webb',
+    title: 'Pharmacovigilance Scientist',
+    skillHealthAvg: 'Needs improvement',
+    skillSpread: 41,
+    gapCount: 1,
+    criticalGapCount: 0,
+    gapsClosed: 8,
+    gapGrowthPct: 8,
+  },
+  {
+    id: '5',
+    name: 'Savannah Nguyen',
+    title: 'Medical Science Liaison',
+    skillHealthAvg: 'On target',
+    skillSpread: 18,
+    gapCount: 0,
+    criticalGapCount: 0,
+    gapsClosed: 8,
+    gapGrowthPct: 8,
+  },
+  {
+    id: '6',
+    name: 'Jacob Jones',
+    title: 'Research Scientist',
+    skillHealthAvg: 'Above target',
+    skillSpread: 33,
+    gapCount: 0,
+    criticalGapCount: 0,
+    gapsClosed: 8,
+    gapGrowthPct: 8,
+  },
+  {
+    id: '7',
+    name: 'Jane Cooper',
+    title: 'Clinical Trial Coordinator',
+    skillHealthAvg: 'Critical',
+    skillSpread: 48,
+    gapCount: 4,
+    criticalGapCount: 1,
+    gapsClosed: 8,
+    gapGrowthPct: 8,
+  },
+  {
+    id: '8',
+    name: 'Joshua Lewis',
+    title: 'Quality Assurance Manager',
+    skillHealthAvg: 'Needs improvement',
+    skillSpread: 29,
+    gapCount: 3,
+    criticalGapCount: 0,
+    gapsClosed: 8,
+    gapGrowthPct: 8,
+  },
+  {
+    id: '9',
+    name: 'Kathryn Mallory Murphy-Richards',
+    title: 'Formulation Development Scientist',
+    skillHealthAvg: 'Needs improvement',
+    skillSpread: 12,
+    gapCount: 1,
+    criticalGapCount: 0,
+    gapsClosed: 8,
+    gapGrowthPct: 8,
+  },
+  {
+    id: '10',
+    name: 'Cameron Williamson',
+    title: 'Bioinformatician',
+    skillHealthAvg: 'Critical',
+    skillSpread: 38,
+    gapCount: 5,
+    criticalGapCount: 2,
+    gapsClosed: 8,
+    gapGrowthPct: 8,
+  },
+];
+
+function HealthStatusTag({ status }: { status: SkillHealth }) {
+  const { bg, color } = HEALTH_TAG_STYLES[status];
+  return (
+    <FlexBox alignItems="center" bg={bg} px={8} py={2}>
+      <Text color={color} fontSize={14}>
+        {status}
+      </Text>
+    </FlexBox>
+  );
+}
+
+function GapTag({
+  count,
+  severity,
+}: {
+  count: number;
+  severity: 'warning' | 'critical';
+}) {
+  const isWarning = severity === 'warning';
+  return (
+    <FlexBox
+      alignItems="center"
+      bg={isWarning ? 'background-warning' : 'background-error'}
+      gap={8}
+      px={8}
+      py={2}
+    >
+      <MiniWarningTriangleIcon
+        color={isWarning ? `${theme.colors['yellow-400']}` : 'feedback-error'}
+        size={16}
+      />
+      <Text
+        color={isWarning ? `${theme.colors['yellow-400']}` : 'feedback-error'}
+        fontSize={14}
+      >
+        {count}
+      </Text>
+    </FlexBox>
+  );
+}
+
+const COLUMNS: ColumnConfig<EmployeeRow>[] = [
+  {
+    key: 'name',
+    header: 'Employee',
+    sortable: true,
+    size: 'xl',
+    type: 'header',
+    render: (row) => (
+      <FlexBox flexDirection="column" py={12}>
+        <Text
+          fontFamily="accent"
+          fontSize={18}
+          fontWeight={700}
+          lineHeight="title"
+        >
+          {row.name}
+        </Text>
+        <Text fontSize={16}>{row.title}</Text>
+      </FlexBox>
+    ),
+  },
+  {
+    // InfoTip labels require a custom header row beyond the standard ColumnConfig API
+    key: 'skillHealthAvg',
+    header: 'Skill health avg',
+    sortable: true,
+    size: 'lg',
+    render: (row) => <HealthStatusTag status={row.skillHealthAvg} />,
+  },
+  {
+    key: 'skillSpread',
+    header: 'Skill spread',
+    sortable: true,
+    size: 'md',
+    render: (row) => (
+      <FlexBox alignItems="center" gap={8}>
+        <Text fontSize={16}>{row.skillSpread}</Text>
+        <Text color="text-secondary" fontSize={16}>
+          skills
+        </Text>
+      </FlexBox>
+    ),
+  },
+  {
+    key: 'gapCount',
+    header: 'Gaps',
+    sortable: true,
+    size: 'md',
+    render: (row) => (
+      <FlexBox alignItems="center" gap={8}>
+        {row.gapCount > 0 && <GapTag count={row.gapCount} severity="warning" />}
+        {row.criticalGapCount > 0 && (
+          <GapTag count={row.criticalGapCount} severity="critical" />
+        )}
+      </FlexBox>
+    ),
+  },
+  {
+    key: 'gapsClosed',
+    header: 'Gaps closed',
+    sortable: true,
+    size: 'md',
+    render: (row) => (
+      <FlexBox alignItems="center" gap={8}>
+        <Text fontSize={16}>{row.gapsClosed}</Text>
+        <FlexBox alignItems="center" bg="background-success" px={8} py={2}>
+          <Text color="feedback-success" fontSize={16}>
+            +{row.gapGrowthPct}%
+          </Text>
+        </FlexBox>
+      </FlexBox>
+    ),
+  },
+  {
+    key: 'actions',
+    header: 'Actions',
+    size: 'content',
+    type: 'control',
+    render: () => (
+      <IconButton
+        icon={MiniKebabMenuIcon}
+        size="small"
+        tip="Show more options"
+      />
+    ),
+  },
+];
+
+export function EmployeeTable() {
+  const [selectedRows, setSelectedRows] = useState<string[]>([]);
+
+  const { idKey, query, rows, onQueryChange } = useLocalQuery({
+    idKey: 'id',
+    rows: EMPLOYEES,
+    columns: COLUMNS,
+  });
+
+  const allIds = useMemo(() => EMPLOYEES.map(({ id }) => id), []);
+
+  const onRowSelect = useCallback(
+    ({
+      type,
+      payload: { toggle, rowId },
+    }: {
+      type: string;
+      payload: { toggle: boolean; rowId: string };
+    }) => {
+      if (type === 'select') {
+        return setSelectedRows((prev) =>
+          toggle ? prev.filter((id) => id !== rowId) : [...prev, rowId]
+        );
+      }
+      if (type === 'select-all') {
+        return setSelectedRows(toggle ? [] : allIds);
+      }
+    },
+    [allIds]
+  );
+
+  return (
+    <StyledDataListWrapper>
+      <DataList
+        columns={COLUMNS}
+        header
+        id="employee-table"
+        idKey={idKey}
+        query={query}
+        rows={rows}
+        selected={selectedRows}
+        onQueryChange={onQueryChange}
+        onRowSelect={onRowSelect}
+      />
+    </StyledDataListWrapper>
+  );
+}