temporarily move offending stories

.circleci/config.yml

@@ -169,7 +169,7 @@ jobs:
       - *build_all_packages
       - run:
           name: build storybook
-          command: yarn build-storybook
+          command: yarn nx run styleguide:build-storybook
       - run:
           name: deploy
           command: yarn deploy

.vscode/stories.code-snippets

@@ -1,86 +1,137 @@
 {
-  "Component Story": {
-    "prefix": "component-story",
+  "Component Doc": {
+    "prefix": "component-doc",
     "body": [
-      "import { $1 } from '@codecademy/$2';",
-      "import title from '@codecademy/macros/lib/title.macro';",
-      "import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';",
-      "import { PropsTable } from '@codecademy/storybook-addon-variance';",
+      "import { Canvas, Controls, Meta } from '@storybook/blocks';",
+      "",
+      "import { ComponentHeader } from '~styleguide/blocks';",
+      "",
+      "import * as $1Stories from './$1.stories';",
+      "",
+      "export const parameters = {",
+      "subtitle: `Template component`,",
+      "design: {",
+      "type: 'figma',",
+      "url: 'https: //www.figma.com/file/XXX',",
+      " },",
+      "status: 'current',",
+      "source: {",
+      "repo: '$2',",
+      "// this is easy to find by right clicking on the file in VSCode and clicking 'Copy Remote File Url From...' and the selecting 'main' or amending the url path below like so: https://github.com/Codecademy/gamut/blob/main/packages/${2}/src/file/location",
+      "githubLink:",
+      "'https: //github.com/Codecademy/gamut/blob/main/packages/gamut/src/Logo',",
+      " },",
+      "};",
+      "<Meta of={$1Stories}/>",
+      "",
+      "<ComponentHeader {...parameters} />",
+      "",
+      "## Usage",
+      "",
+      "Use $1 to [what it should be used for]",
+      "",
+      "### Best practices:",
+      "",
+      "- [recommendation / best practice for implementation]",
+      "- [recommendation / best practice for implementation]",
+      "",
+      "When NOT to use",
+      "",
+      "- [use case]- for [describe the use case], use the [similar component] component.",
+      "- [use case]- for [describe the use case], use the [similar component] component",
+      "",
+      "## Anatomy",
+      "",
+      "[Insert image exported from Figma]",
+      "",
+      "1. [Element name]",
+      "- [description including available options and ux writing if relevant]",
       "",
-      "<Meta",
-      "  title={title}",
-      "  component={$1}",
-      "  parameters={{",
-      "    subtitle: '$3',",
-      "    source: '$2',",
-      "    status: 'current' | 'updating' | 'deprecated' | 'static'$4 ,",
-      "    design: {",
-      "      type: 'figma',",
-      "      url: 'https://www.figma.com/file/$5',",
-      "    }",
-      "  }}",
-      "  args={{}}",
-      "/>",
+      "## Variants",
       "",
-      "`$1` component summary goes here",
+      "### [Variant 1 name]",
       "",
-      "## Design Principles",
+      "Use the [variant 1 name] to [what it should be used for]",
       "",
-      "Design Principles summary",
+      "<Canvas of={$1Stories.Default} />",
       "",
-      "## Usage Guidelines",
+      "## Playground",
       "",
-      "Usage summary",
+      "If you are using a story named 'Default', you can forgo the `of` prop.",
       "",
-      "## Code Playground",
+      "<Canvas sourceState='shown' of={$1Stories.Default} />",
       "",
-      "<Canvas>",
-      "  <Story name=\"$1\">",
-      "    {(args) => <$1 {...args} />}",
-      "  </Story>",
-      "</Canvas>",
+      "<Controls />",
       "",
-      "<PropsTable story=\"$1\"/>"
+      "## Accessibility considerations",
+      "",
+      "- [Accessibility guidance]",
+      "",
+      "## UX writing",
+      "",
+      "- [content]",
+      " - [guidance]",
+      " - [guidance]"
     ],
-    "description": "Default Component Story Structure."
+    "description": "Default Component Doc Structure."
   },
   "Table of Contents Story": {
     "prefix": "toc-story",
     "body": [
-      "import title from '@codecademy/macros/lib/title.macro';",
-      "import { Meta } from '@storybook/addon-docs/blocks';",
+      "import { Meta } from '@storybook/blocks';",
+      "import { AboutHeader, TableOfContents } from '~styleguide/blocks';",
+      "",
+      "export const parameters = {",
+      "  id: '$1',",
+      "  title: '$1/About',",
+      "  subtitle: '$2',",
+      "  }",
       "",
-      "import { TableOfContents } from '~styleguide/blocks';",
+      "<Meta title='$1/About' />",
       "",
-      "<Meta",
-      "  title={title}",
-      "  parameters={{",
-      "    subtitle: '$3',",
-      "  }}",
-      "/>",
+      "<AboutHeader {...parameters} />",
       "",
-      "<TableOfContents />"
+      "Foundations make up the smallest scale design values that comprise a design system. Sometimes referred to elsewhere as "tokens", they are the abstract units that comprise and stitch together our atoms, molecules, and organisms.",
+      "",
+      "<TableOfContents",
+      " links={[",
+      "   {",
+      "     id: '$1/Category',",
+      "     subtitle: 'Short description',",
+      "     title: 'Category',",
+      "   }",
+      " ]}",
+      "/>"
     ],
     "description": "TOC Story Structure."
   },
-  "Canvas Block": {
-    "prefix": "canvas-block",
-    "body": [
-      "<Canvas>",
-      "  <Story name=\"$1\" args={{}}>",
-      "    {(args) => <$2 {...args} />}",
-      "  </Story>",
-      "</Canvas>"
-    ],
-    "description": "A single story block wrapped in a canvas"
-  },
-  "Story Block": {
-    "prefix": "story-block",
+  "Component Story": {
+    "prefix": "component-story",
     "body": [
-      "  <Story name=\"$1\" args={{}}>",
-      "    {(args) => <$2 {...args} />}",
-      "  </Story>"
+      "import { $1 } from '@codecademy/gamut';",
+      "import type { Meta, StoryObj } from '@storybook/react';",
+      "",
+      "const meta: Meta<typeof $1> = {",
+      " component: $1,",
+      " args: {},",
+      "};",
+      "",
+      "export default meta;",
+      "type Story = StoryObj<typeof $1>;",
+      "",
+      "export const Default: Story = {",
+      " args: {",
+      "   children: 'Test'",
+      " },",
+      "};",
+      "",
+      "export const Secondary: Story = {",
+      " args: {",
+      "   children: 'Test again',",
+      "   variant: 'secondary'",
+      " }",
+      "};"
     ],
-    "description": "A single story block without a canvas"
+    "description": "Default TSX story structure."
   }
 }

package.json

@@ -10,7 +10,7 @@
     "lodash": "^4.17.5",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-helmet": "6.1.0"
+    "react-helmet-async": "^2.0.5"
   },
   "devDependencies": {
     "@babel/cli": "7.24.7",
@@ -23,21 +23,26 @@
     "@codecademy/tsconfig": "^0.3.0",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/jest": "^11.11.0",
+    "@mdx-js/react": "^3.1.0",
     "@nx/jest": "19.3.2",
     "@nx/js": "19.3.2",
     "@nx/react": "19.3.2",
     "@nx/storybook": "19.3.2",
     "@nx/web": "19.3.2",
     "@nx/webpack": "19.3.2",
-    "@storybook/addon-controls": "8.3.5",
+    "@storybook/addon-controls": "8.3.6",
     "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-docs": "^8.3.6",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/core-server": "8.3.5",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/core-server": "8.3.6",
+    "@storybook/docs-tools": "^8.3.6",
     "@storybook/icons": "1.2.12",
-    "@storybook/react-webpack5": "^8.3.5",
+    "@storybook/manager-api": "^8.3.6",
+    "@storybook/react-webpack5": "^8.3.6",
+    "@storybook/theming": "^8.3.6",
     "@svgr/cli": "5.5.0",
     "@testing-library/dom": "^8.11.1",
     "@testing-library/jest-dom": "^5.16.1",
@@ -79,7 +84,7 @@
     "onchange": "^7.0.2",
     "prettier": "^2.6.2",
     "react-test-renderer": "18.3.1",
-    "storybook": "^8.3.5",
+    "storybook": "^8.3.6",
     "svgo": "^1.3.2",
     "syncpack": "^10.9.3",
     "ts-jest": "29.1.1",

packages/gamut/src/AccordionButtonDeprecated/ButtonDeprecated/index.tsx

@@ -4,7 +4,7 @@ import hasIn from 'lodash/hasIn';
 import { ReactNode } from 'react';
 import * as React from 'react';
 
-import { omitProps } from '../../utils/omitProps';
+import { omitProps } from '../../utils';
 import {
   ButtonDeprecatedBase,
   ButtonDeprecatedBaseProps,
@@ -39,7 +39,7 @@ const themes = [
 
 export type ButtonDeprecatedThemes =
   | keyof typeof buttonPresetThemes
-  | typeof themes[number];
+  | (typeof themes)[number];
 
 const propKeys = [
   'theme',

packages/gamut/src/AccordionButtonDeprecated/ButtonDeprecatedBase/index.tsx

@@ -3,7 +3,7 @@ import { HTMLProps, ReactNode } from 'react';
 import * as React from 'react';
 
 import { ChildComponentDescriptor } from '../../typings/react';
-import { omitProps } from '../../utils/omitProps';
+import { omitProps } from '../../utils';
 // eslint-disable-next-line gamut/no-css-standalone
 import styles from './styles.module.scss';
 

packages/gamut/src/Popover/elements.tsx

@@ -78,7 +78,7 @@ export const PopoverPortal: React.FC<
     <BodyPortal {...rest} />
   );
 
-type PopoverContainerProps = Pick<PopoverProps, 'position' | 'align'>;
+export type PopoverContainerProps = Pick<PopoverProps, 'position' | 'align'>;
 
 export const PopoverContainer = styled.div<PopoverContainerProps>`
   position: fixed;

packages/styleguide/.storybook/components/Elements/Callout.tsx

@@ -0,0 +1,9 @@
+import { Alert } from '@codecademy/gamut';
+
+export const Callout: React.FC<{ text: string }> = ({ text }) => {
+  return (
+    <Alert type="subtle" placement="inline">
+      {text}
+    </Alert>
+  );
+};

packages/styleguide/.storybook/components/Elements/ComponentSource.tsx

@@ -0,0 +1,27 @@
+import { OpenIcon } from '@codecademy/gamut-icons';
+import { Anchor } from '@codecademy/gamut';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const SourceAnchor = styled(Anchor)(
+  css({ height: '100%', alignContent: 'center' })
+);
+
+export const sourceAnchorProps = {
+  icon: OpenIcon,
+  iconPosition: 'right',
+  target: '_blank',
+} as const;
+
+export const ComponentSource: React.FC<{
+  repo: string;
+  githubLink?: string;
+}> = ({ repo, githubLink }) => {
+  const npmLink =
+    githubLink ?? `https://www.npmjs.com/package/@codecademy/${repo}`;
+  return (
+    <SourceAnchor href={npmLink} {...sourceAnchorProps}>
+      @codecademy/{repo}
+    </SourceAnchor>
+  );
+};