@codecademy/styleguide 79.2.4-alpha.be71e3.0 → 79.2.4-alpha.ee1acd.0

package/src/lib/Molecules/Popover/Popover.mdx

@@ -1,5 +1,5 @@
 import { Column, LayoutGrid } from '@codecademy/gamut';
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Molecules/Tabs/Tabs.mdx

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

package/src/lib/Molecules/Tips/About.mdx

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

package/src/lib/Molecules/Tips/InfoTip/InfoTip.mdx

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

package/src/lib/Molecules/Tips/PreviewTip/PreviewTip.mdx

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

package/src/lib/Molecules/Tips/ToolTip/ToolTip.mdx

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

package/src/lib/Molecules/Toasts/About.mdx

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

package/src/lib/Molecules/Toasts/Toast/Toast.mdx

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

package/src/lib/Molecules/Toasts/Toaster/Toaster.mdx

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

package/src/lib/Molecules/Video/Video.mdx

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

package/src/lib/Organisms/About.mdx

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

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

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

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

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/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/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/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/blocks';
+import { Meta } from '@storybook/addon-docs/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/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/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/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import {
   AboutHeader,

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

@@ -1,4 +1,4 @@
-import { Canvas, Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/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/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/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/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/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/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/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/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/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/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

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

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

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

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/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/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/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/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { Callout, ComponentHeader } from '~styleguide/blocks';
 

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

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

package/src/lib/Typography/About.mdx

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

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

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

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

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/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/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/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/blocks';
+import { Meta } from '@storybook/addon-docs/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/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import { AboutHeader } from '~styleguide/blocks';
 

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

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

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

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/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/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import { AboutHeader, LinkTo } from '~styleguide/blocks';
 

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

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/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/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import { AboutHeader } from '~styleguide/blocks';
 

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

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

package/src/lib/UX Writing/DIY UX writing in 8 steps.mdx

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

package/src/lib/Meta/Gamut writing guide/About.mdx

@@ -1,43 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import {
-  AboutHeader,
-  addParentPath,
-  LinkTo,
-  TableOfContents,
-} from '~styleguide/blocks';
-
-import { parameters as documentationInCodeParameters } from './Documentation in code.mdx';
-import { parameters as formattingParameters } from './Formatting.mdx';
-import { parameters as generalPrinciplesParameters } from './General principles.mdx';
-import { parameters as languageAndGrammarParameters } from './Language and grammar.mdx';
-import { parameters as linkingParameters } from './Linking.mdx';
-import { parameters as referencingCodeParameters } from './Referencing code.mdx';
-import { parameters as storiesParameters } from './Stories/About.mdx';
-
-export const parameters = {
-  id: 'Meta/Gamut writing guide',
-  title: 'Gamut writing guide',
-  subtitle:
-    'Guidelines and standards for creating consistent, clear, and effective documentation.',
-};
-
-<Meta title="Meta/Gamut writing guide/About" />
-
-<AboutHeader {...parameters} />
-
-Welcome to the Gamut writing guide! Thanks for taking the time to learn about our documentation standards. This guide helps keep our documentation clear, consistent, and useful across the Gamut design system.
-
-The <LinkTo id="Meta/Gamut writing guide/General principles">General principles</LinkTo> is a great place to get an overview of our documentation philosophy and best practices. For specific topics like formatting, code documentation, or writing Storybook stories, check out the other pages below.
-
-<TableOfContents
-  links={addParentPath(parameters.id, [
-    generalPrinciplesParameters,
-    documentationInCodeParameters,
-    formattingParameters,
-    languageAndGrammarParameters,
-    linkingParameters,
-    referencingCodeParameters,
-    storiesParameters,
-  ])}
-/>

package/src/lib/Meta/Gamut writing guide/Documentation in code.mdx

@@ -1,134 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader } from '~styleguide/blocks';
-
-export const parameters = {
-  title: 'Documentation in code',
-  subtitle: `Guidelines for documenting code in Gamut component files`,
-  status: 'static',
-};
-
-<Meta title="Meta/Gamut writing guide/Documentation in code" />
-
-<AboutHeader {...parameters} />
-
-Good documentation starts in the code itself. By documenting components, props, and functions directly in source files, we create a single source of truth that stays synchronized with the implementation and surfaces automatically in developer tools and Storybook.
-
-## Naming conventions
-
-Clear, descriptive names reduce the need for comments and make code self-documenting. Choose names that reveal intent and follow established patterns.
-
-### Variables and constants
-
-- Use `camelCase` for variables: `userName`, `isLoading`, `itemCount`
-- Use descriptive names that reveal purpose: `filteredResults` not `arr`
-- Boolean variables should use `is`, `has`, `should`, or `can` prefixes: `isVisible`, `hasError`, `shouldRender`
-- Use `SCREAMING_SNAKE_CASE` for true constants: `MAX_RETRY_COUNT`, `DEFAULT_TIMEOUT`
-- Avoid single-letter names except for short loops or mathematical operations
-- Use plural names for arrays and collections: `users`, `menuItems`
-
-### Functions and methods
-
-- Use `camelCase` for function names: `getUserData`, `calculateTotal`, `handleClick`
-- Start with verbs that describe the action: `get`, `set`, `fetch`, `handle`, `render`, `calculate`
-- Event handlers should use `handle` prefix: `handleSubmit`, `handleClickOutside`
-- Boolean-returning functions should ask a question: `isValidEmail`, `canAccessResource`, `hasPermission`
-- Keep names concise but descriptive: `fetchUserProfile` not `getUserProfileDataFromAPI`
-
-### Components
-
-- Use `PascalCase` for component names: `Button`, `UserProfile`, `NavigationMenu`
-- Name folders to match the component: `Button`, `UserProfile`
-  - Subsequently, name files within the folder to match the component: `Button.tsx`, `UserProfile.tsx`
-- Use descriptive names that indicate purpose: `SkipToContent`, `RadialProgress`, `Toggle`
-- Avoid generic names like `Component`, `Container`, `Wrapper` without context
-
-## Code comments
-
-Comments should explain _why_ code exists, not _what_ it does. Well-named variables and functions handle the "what." Reserve comments for non-obvious decisions, complex logic, and important context.
-
-### When to comment
-
-- **Complex logic**: Explain algorithms or non-obvious implementations
-
-  ```tsx
-  // Use binary search for O(log n) performance on sorted arrays
-  const index = binarySearch(sortedArray, target);
-  ```
-
-- **Business logic**: Document requirements or constraints
-
-  ```tsx
-  // Per WCAG 2.2, focus must return to trigger element on close
-  previousFocusRef.current?.focus();
-  ```
-
-- **Workarounds**: Explain temporary fixes or browser-specific code
-
-  ```tsx
-  // Safari doesn't support :focus-visible, fallback to :focus
-  // TODO: Remove when Safari 15+ is minimum supported version
-  ```
-
-- **Non-obvious decisions**: Clarify choices that might seem strange
-  ```tsx
-  // Delay state update to avoid race condition with async validation
-  setTimeout(() => setIsValid(true), 0);
-  ```
-
-### When NOT to comment
-
-- **Self-explanatory code**: Good names eliminate the need
-
-  ```tsx
-  // ❌ Bad: Comment restates the code
-  // Set loading to true
-  setIsLoading(true);
-
-  // ✅ Good: Code is self-documenting
-  setIsLoading(true);
-  ```
-
-- **Commented-out code**: Delete it; Git tracks history
-  ```tsx
-  // ❌ Bad: Dead code clutters the file
-  // const oldImplementation = () => { ... };
-  ```
-
-### Comment style
-
-- Use `//` for single-line comments, add a space after the `//` before commenting
-- Use `/** */` for JSDoc comments on exports (functions, types, components)
-- Write complete sentences with proper punctuation
-- Keep comments up-to-date when code changes
-
-## API reference
-
-Well-documented APIs make components easier to use and understand. Clear prop descriptions and type information help developers implement components correctly without needing to read the source code.
-
-### Props documentation:
-
-Add [JSDoc](https://jsdoc.app/) comments to the props to provide additional clarity for what these props do — these comments is used by TypeScript when hovering over a prop, additional it also shows up in the props table of a component's story in Storybook.
-
-```tsx
-export type ButtonProps = {
-  /**
-   * The visual style variant of the button.
-   */
-  variant: 'primary' | 'secondary';
-
-  /**
-   * Whether the button is disabled.
-   */
-  disabled?: boolean;
-};
-```
-
-### Guidelines:
-
-- Full sentence descriptions
-- Start boolean descriptions with "Whether"
-- Document required vs. optional props
-- Include type information
-- Use discretion for whether a comment is needed or not
-  - If unsure, include a comment