TOC + Theme working, need DataTable + code background color

packages/old_styleguide/layout/addons/system/components/PropsTable.tsx

@@ -1,25 +1,26 @@
-import { ComponentProps, useMemo } from 'react';
-import * as React from 'react';
-import { PROP_GROUPS } from '../propMeta';
+import {
+  Box,
+  FlexBox,
+  FloatingCard,
+  GridBox,
+  Text,
+  Toggle,
+} from '@codecademy/gamut';
 import { ArgsTable } from '@storybook/addon-docs/blocks';
 import isArray from 'lodash/isArray';
+import { ComponentProps, useMemo } from 'react';
+import * as React from 'react';
+
+import { Link } from '~styleguide/blocks';
 
+import { PROP_GROUPS } from '../propMeta';
 import {
-  PropItem,
-  PropGroupTooltip,
   PropGroupTag,
+  PropGroupTooltip,
+  PropItem,
   ToggleLabel,
 } from './Elements';
 import { useSystemProps } from './useSystemProps';
-import {
-  Box,
-  GridBox,
-  FlexBox,
-  Text,
-  Toggle,
-  FloatingCard,
-} from '@codecademy/gamut/src';
-import { Link } from '~styleguide/blocks';
 
 type PropTagProps = {
   prop: keyof typeof PROP_GROUPS;

packages/old_styleguide/layout/components/Markdown/Elements.tsx

@@ -4,7 +4,6 @@ import styled from '@emotion/styled';
 import { ComponentProps } from 'react';
 import * as React from 'react';
 import { linkTo } from '@storybook/addon-links';
-import { useComponentLinks } from '../Navigation';
 
 export const Reset = styled.div`
   p:first-of-type {

packages/styleguide/.storybook/components/DocsContainer.tsx → packages/styleguide/.storybook/components/Elements/DocsContainer.tsx

@@ -16,7 +16,7 @@ import { ThemeProvider } from '@storybook/theming';
 import * as React from 'react';
 import { Link } from './Markdown';
 import { HelmetProvider } from 'react-helmet-async';
-import theme from '../theming/GamutTheme';
+import theme from '../../theming/GamutTheme';
 
 const defaultComponents = {
   ...htmlComponents,

packages/styleguide/.storybook/components/Markdown.tsx → packages/styleguide/.storybook/components/Elements/Markdown.tsx

@@ -1,4 +1,5 @@
 import { Anchor } from '@codecademy/gamut';
+import { themed } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
 import { linkTo } from '@storybook/addon-links';
 import { ComponentProps } from 'react';
@@ -45,3 +46,31 @@ export const Link: React.FC<LinkProps> = ({ ref, id, variant, ...props }) => {
 };
 
 export const LinkTo = Link;
+
+export const Code = styled.code`
+  max-width: 100%;
+  overflow-x: auto;
+  line-height: 1;
+  padding: 5px 7px 1px;
+  white-space: nowrap;
+  border-radius: 3px;
+  font-size: 0.8em;
+  border: 1px solid ${themed('colors.gray-200')};
+  color: ${themed('colors.navy-700')};
+  background-color: ${themed('colors.gray-100')};
+  display: inline-block;
+  overflow-x: scroll;
+
+  ::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: themed('colors.gray-200');
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+`;

packages/styleguide/.storybook/components/Headers/ComponentHeader.tsx

@@ -12,9 +12,10 @@ import { Figma } from '@storybook/addon-designs/blocks';
 import { Title } from '@storybook/blocks';
 import * as React from 'react';
 
-import { StatusIndicator } from '../StatusIndicator';
+import { StatusIndicator } from '../Elements/StatusIndicator';
 
 export interface ComponentHeaderProps {
+  title?: string;
   subtitle?: string;
   status?: 'current' | 'updating' | 'deprecated' | 'static';
   design?: { url?: string };
@@ -42,6 +43,7 @@ const STATUS = {
 } as const;
 
 export const ComponentHeader: React.FC<ComponentHeaderProps> = ({
+  title,
   subtitle,
   status: storyStatus = 'static',
   design,
@@ -72,8 +74,16 @@ export const ComponentHeader: React.FC<ComponentHeaderProps> = ({
       mb={24}
     >
       <ContentContainer>
-        <Title />
-        <Text mb={16}>{subtitle}</Text>
+        {title ? (
+          <Text as="h1" fontSize={28 as any}>
+            {title}
+          </Text>
+        ) : (
+          <Title />
+        )}
+        <Text mt={8} mb={16}>
+          {subtitle}
+        </Text>
         {(design?.url || storyStatus !== 'static') && (
           <Background p={16} bg="white" borderRadius="md">
             <GridBox

packages/styleguide/.storybook/components/Scales/ColorScale.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { themed } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
+import { Card, GridBox } from '@codecademy/gamut/src';
+
+const HexCode = styled.span`
+  font-family: ${themed('fontFamily.monospace')};
+  font-size: 12px;
+`;
+
+const Color = styled.div<{ bg?: string }>(({ bg }) => ({
+  backgroundColor: bg,
+}));
+
+export const ColorScale: React.FC<{ colors: Record<string, string> }> = ({
+  colors,
+}) => {
+  const weights = Object.entries(colors);
+
+  return (
+    <>
+      <Card
+        p={0}
+        width="100%"
+        borderRadius="md"
+        display="grid"
+        minHeight="3rem"
+        gridAutoFlow="column"
+        overflow="hidden"
+      >
+        {weights.map(([key, hex]) => (
+          <Color key={`color-${key}`} bg={hex} />
+        ))}
+      </Card>
+      <GridBox width="100%" p={4} gridAutoFlow="column">
+        {weights.map(([key, hex]) => (
+          <GridBox
+            key={`hex-${key}`}
+            alignItems="center"
+            justifyContent="center"
+            textAlign="center"
+            textColor="gray-700"
+          >
+            {weights.length > 1 && <HexCode>{key}</HexCode>}
+            <HexCode>{hex}</HexCode>
+          </GridBox>
+        ))}
+      </GridBox>
+    </>
+  );
+};

packages/styleguide/.storybook/components/index.tsx

@@ -1,3 +1,4 @@
 export * from './DataTable';
 export * from './Headers';
-export * from './Markdown';
+export * from './Elements/Markdown';
+export * from './Scales/ColorScale';

packages/styleguide/.storybook/preview.ts

@@ -3,13 +3,14 @@ import { Preview } from '@storybook/react';
 import theme from './theming/GamutTheme';
 import { withEmotion } from './theming/GamutThemeProvider';
 import { breakpoints } from '@codecademy/gamut-styles';
-import { DocsContainer } from './components/DocsContainer';
+import { DocsContainer } from './components/Elements/DocsContainer';
 
 const preview: Preview = {
   parameters: {
     docs: {
       container: DocsContainer,
       theme: theme,
+      toc: { headingSelector: 'h1, h2, h3' },
     },
     backgrounds: {
       disable: true,

packages/styleguide/src/lib/Atoms/Logo/Logo.mdx

@@ -23,8 +23,6 @@ export const parameters = {
 
 <Controls />
 
-// Layouts
-
 ## Variants
 
 Variants of the Codecademy logo.

packages/styleguide/src/lib/Foundations/About.mdx

@@ -6,7 +6,7 @@ export const parameters = {
   id: 'Foundations',
   title: 'Foundations',
   subtitle:
-    'Foundations are the abstract concepts our system is built on: colors, spacing, responsive layouts, and the like.',
+    'The abstract concepts our system is built on: colors, spacing, responsive layouts, and the like.',
 };
 
 <Meta title="Foundations" />

packages/styleguide/src/lib/Foundations/Layout.mdx

@@ -1,12 +1,12 @@
 import { Box } from '@codecademy/gamut/src';
 import { Meta } from '@storybook/blocks';
 
-import { AboutHeader, DataTable, LinkTo } from '~styleguide/blocks';
+import { ComponentHeader, DataTable, LinkTo } from '~styleguide/blocks';
 
 export const parameters = {
   title: 'Layout',
   subtitle: 'Design guidelines for overall page layout',
-  status: 'current',
+  status: 'static',
   design: {
     type: 'figma',
     url: 'https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=464%3A691',
@@ -15,7 +15,7 @@ export const parameters = {
 
 <Meta title="Foundations/Layout" />
 
-<AboutHeader {...parameters} />
+<ComponentHeader {...parameters} />
 
 These are the grids we use for all the screen sizes we design for. We use a 12-column grid approach, meaning every layout can be divided in sections of 2 or 3. It’s important to design with the in mind to create structured and consistent experiences. On smaller screensizes try to avoid using smaller components while using the grid as a guide.