@codecademy/styleguide 79.2.3-alpha.03730f.0 → 79.2.3-alpha.36b8c2.0

package/.storybook/main.ts

@@ -1,6 +1,6 @@
 // This file has been automatically migrated to valid ESM format by Storybook.
-import { fileURLToPath } from "node:url";
-import { createRequire } from "node:module";
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
 import type { StorybookConfig } from '@storybook/react-webpack5';
 import { resolve, dirname, join } from 'node:path';
 
@@ -9,9 +9,6 @@ const __dirname = dirname(__filename);
 const require = createRequire(import.meta.url);
 
 const config: StorybookConfig = {
-  features: {
-    developmentModeForBuild: true,
-  },
   stories: [
     '../src/lib/**/*.@(mdx)',
     '../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)',
@@ -19,7 +16,10 @@ const config: StorybookConfig = {
   staticDirs: ['../src/static'],
   addons: [
     getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
-    join(dirname(require.resolve('@nx/react/plugins/storybook')), 'index.js'),
+    // the @nx/react storybook plugin is just a subdirectory of the @nx/react package
+    // so getting the absolute path of the package.json won't work. they do expose
+    // a require export though, so we can just use that directly
+    require.resolve('@nx/react/plugins/storybook'),
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-docs'),
     getAbsolutePath('@storybook/addon-a11y'),
@@ -69,8 +69,6 @@ const config: StorybookConfig = {
           __dirname,
           '../../gamut-illustrations/src'
         ),
-        // Dist bundles use Rolldown `require("react")` shims that break under Storybook's
-        // webpack iframe build; source resolves through normal ESM imports.
         '@codecademy/gamut-icons$': resolve(__dirname, '../../gamut-icons/src'),
         '@codecademy/gamut-patterns$': resolve(
           __dirname,

package/.storybook/preview.ts

@@ -30,7 +30,7 @@ const preview: Preview = {
       test: 'todo',
     },
     backgrounds: {
-      disabled: true,
+      disable: true,
     },
     deepControls: { enabled: true },
     docs: {
@@ -89,16 +89,6 @@ const preview: Preview = {
     },
     viewport: {
       options: {
-        responsive: {
-          name: 'Responsive',
-          type: 'desktop',
-          // Storybook 10 requires `styles` on every viewport; missing it breaks the
-          // iframe wrapper (e.g. "can't access property 'width', … is undefined").
-          styles: {
-            width: '100%',
-            height: '100%',
-          },
-        },
         xs: {
           name: `XS - ${breakpoints.xs}`,
           styles: {
@@ -139,16 +129,9 @@ const preview: Preview = {
           },
           type: 'desktop',
         },
-      }
+      },
     },
   },
-
-  initialGlobals: {
-    viewport: {
-      value: 'responsive',
-      isRotated: false
-    }
-  }
 };
 
 export const globalTypes = {
@@ -160,8 +143,8 @@ export const globalTypes = {
       icon: 'circlehollow',
       // Array of plain string values or MenuItem shape (see below)
       items: [
-        { value: 'light', icon: 'circlehollow', title: 'light' },
-        { value: 'dark', icon: 'circle', title: 'dark' },
+        { value: 'light', icon: 'circlehollow', title: 'Light' },
+        { value: 'dark', icon: 'circle', title: 'Dark' },
       ],
       // Property that specifies if the name of the item will be displayed
       showName: true,

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [79.2.3-alpha.03730f.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.2...@codecademy/styleguide@79.2.3-alpha.03730f.0) (2026-03-19)
+### [79.2.3-alpha.36b8c2.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.2...@codecademy/styleguide@79.2.3-alpha.36b8c2.0) (2026-03-20)
 
-**Note:** Version bump only for package @codecademy/styleguide
+### Bug Fixes
+
+- consistent title casing ([de25bb3](https://github.com/Codecademy/gamut/commit/de25bb3700607314c18b7487e4dec39aafa8922b))
+- remove responsive viewport option ([27378f9](https://github.com/Codecademy/gamut/commit/27378f9105f184e3f79705b018c08d88ac26d9ac))
 
 ### [79.2.2](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.1...@codecademy/styleguide@79.2.2) (2026-03-19)
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.2.3-alpha.03730f.0",
+  "version": "79.2.3-alpha.36b8c2.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "27859b3f2047d2f8a4a92403134d3b961b697994"
+  "gitHead": "a556865605c54b47668a9e65dd8a14f97f447e41"
 }

package/project.json

@@ -33,11 +33,12 @@
         }
       }
     },
-    "test": {
+    "storybook-test": {
       "executor": "nx:run-commands",
       "dependsOn": ["build-storybook"],
       "options": {
         "cwd": "{workspaceRoot}",
+        "forwardAllArgs": false,
         "command": "start-server-and-test \"http-server dist/storybook/styleguide -p 6007 --silent\" http://127.0.0.1:6007 \"test-storybook --url http://127.0.0.1:6007 --config-dir packages/styleguide/.storybook\""
       }
     }

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/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.stories.tsx

@@ -7,8 +7,8 @@ import {
   Text,
   useConnectedForm,
 } from '@codecademy/gamut';
-import { action } from 'storybook/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/SubmitButton/SubmitButton.stories.tsx

@@ -1,6 +1,6 @@
 import { ConnectedForm, FlexBox, SubmitButton, Text } from '@codecademy/gamut';
-import { action } from 'storybook/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/Buttons.stories.tsx

@@ -1,6 +1,6 @@
 import { GridForm } from '@codecademy/gamut';
-import { action } from 'storybook/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.stories.tsx

@@ -1,6 +1,6 @@
 import { FormGroup, GridForm, Input, Text } from '@codecademy/gamut';
-import { action } from 'storybook/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.stories.tsx

@@ -1,6 +1,6 @@
 import { GridForm, Markdown } from '@codecademy/gamut';
-import { action } from 'storybook/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.stories.tsx

@@ -1,7 +1,7 @@
 import { GridForm } from '@codecademy/gamut';
-import { action } from 'storybook/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.stories.tsx

@@ -1,6 +1,6 @@
 import { GridForm } from '@codecademy/gamut';
-import { action } from 'storybook/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>> = {