Merge branch 'main' into cass-gm-833

Author: dreamwasp

package.json

@@ -24,26 +24,25 @@
     "@codecademy/tsconfig": "^0.3.0",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/jest": "^11.11.0",
-    "@mdx-js/react": "^3.1.0",
     "@nx/jest": "21.4.0",
     "@nx/js": "21.4.0",
     "@nx/react": "21.4.0",
     "@nx/storybook": "21.4.0",
     "@nx/web": "21.4.0",
     "@nx/webpack": "21.4.0",
-    "@storybook/addon-controls": "8.3.6",
+    "@storybook/addon-controls": "8.6.15",
     "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-docs": "^8.3.6",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
+    "@storybook/addon-docs": "^8.6.15",
+    "@storybook/addon-essentials": "^8.6.15",
+    "@storybook/addon-links": "^8.6.15",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/core-server": "8.3.6",
-    "@storybook/docs-tools": "^8.3.6",
+    "@storybook/blocks": "^8.6.15",
+    "@storybook/core-server": "8.6.15",
+    "@storybook/docs-tools": "^8.6.15",
     "@storybook/icons": "1.2.12",
-    "@storybook/manager-api": "^8.3.6",
-    "@storybook/react-webpack5": "^8.3.6",
-    "@storybook/theming": "^8.3.6",
+    "@storybook/manager-api": "^8.6.15",
+    "@storybook/react-webpack5": "^8.6.15",
+    "@storybook/theming": "^8.6.15",
     "@svgr/cli": "5.5.0",
     "@testing-library/dom": "^8.11.1",
     "@testing-library/jest-dom": "^5.16.1",
@@ -86,7 +85,7 @@
     "onchange": "^7.0.2",
     "prettier": "^2.8.7",
     "react-test-renderer": "18.3.1",
-    "storybook": "^8.3.6",
+    "storybook": "^8.6.15",
     "storybook-addon-deep-controls": "^0.9.5",
     "style-loader": "^4.0.0",
     "svgo": "^1.3.2",

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

@@ -2,7 +2,6 @@ import {
   AssetProvider,
   coreTheme,
   createEmotionCache,
-  css,
   GamutProvider,
   platformPalette,
   adminTheme,
@@ -12,18 +11,13 @@ import {
   platformTheme,
   ColorMode,
 } from '@codecademy/gamut-styles';
-import { MDXProvider } from '@mdx-js/react';
 import {
-  CodeOrSourceMdx,
   DocsContainer as StorybookDocsContainer,
   DocsContextProps,
-  HeadersMdx,
   SourceContainer,
 } from '@storybook/blocks';
-import { components as htmlComponents } from '@storybook/components';
-import { styled, ThemeProvider } from '@storybook/theming';
+import { ThemeProvider } from '@storybook/theming';
 import { useMemo } from 'react';
-import { Link } from './Markdown';
 import { HelmetProvider } from 'react-helmet-async';
 import theme from '../../theming/GamutTheme';
 import { createTheme } from '@codecademy/variance';
@@ -39,21 +33,6 @@ const themeMap = {
   platform: platformTheme,
 } as const;
 
-const WrappedPre = styled(htmlComponents.pre)(
-  // gives the source block a white background - pretty fragile but easy to change if needed
-  css({
-    '.docblock-source, .css-5owncf': { backgroundColor: 'background' },
-  })
-);
-
-const defaultComponents = {
-  ...htmlComponents,
-  code: CodeOrSourceMdx,
-  pre: WrappedPre,
-  ...HeadersMdx,
-  a: Link as any,
-};
-
 const themeSpecificStories = {
   'foundations-theme-lx-studio-theme--docs': 'lxStudio',
   'foundations-theme-percipio-theme--docs': 'percipio',
@@ -104,11 +83,7 @@ export const DocsContainer: React.FC<{
             <AssetProvider />
           </HelmetProvider>
           <SourceContainer channel={context.channel}>
-            <ThemeProvider theme={currentTheme}>
-              <MDXProvider components={defaultComponents}>
-                {children}
-              </MDXProvider>
-            </ThemeProvider>
+            <ThemeProvider theme={currentTheme}>{children}</ThemeProvider>
           </SourceContainer>
         </ColorMode>
       </GamutProvider>

packages/styleguide/.storybook/main.ts

@@ -45,6 +45,7 @@ const config: StorybookConfig = {
     config.resolve = {
       ...config.resolve,
       alias: {
+        ...config.resolve?.alias,
         '~styleguide/blocks': resolve(__dirname, './components/'),
         '~styleguide/argTypes': resolve(__dirname, './argTypes/'),
         '@codecademy/gamut-styles$': resolve(

packages/styleguide/.storybook/preview.ts

@@ -2,8 +2,27 @@ import { Preview } from '@storybook/react';
 
 import theme from './theming/GamutTheme';
 import { withEmotion } from './theming/GamutThemeProvider';
-import { breakpoints } from '@codecademy/gamut-styles';
+import { breakpoints, css } from '@codecademy/gamut-styles';
 import { DocsContainer } from './components/Elements/DocsContainer';
+import { CodeOrSourceMdx, HeadersMdx } from '@storybook/blocks';
+import { components as htmlComponents } from '@storybook/components';
+import { styled } from '@storybook/theming';
+import { Link } from './components/Elements/Markdown';
+
+const WrappedPre = styled(htmlComponents.pre)(
+  // gives the source block a white background - pretty fragile but easy to change if needed
+  css({
+    '.docblock-source, .css-5owncf': { backgroundColor: 'background' },
+  })
+);
+
+const mdxComponents = {
+  ...htmlComponents,
+  code: CodeOrSourceMdx,
+  pre: WrappedPre,
+  ...HeadersMdx,
+  a: Link as any,
+};
 
 const preview: Preview = {
   parameters: {
@@ -15,6 +34,7 @@ const preview: Preview = {
       container: DocsContainer,
       theme: theme,
       toc: { headingSelector: 'h1, h2, h3' },
+      mdxComponents,
     },
     options: {
       storySort: {

packages/styleguide/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [78.5.4](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-12-18)
+
+**Note:** Version bump only for package @codecademy/styleguide
+
+### [78.5.3](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-12-12)
+
+**Note:** Version bump only for package @codecademy/styleguide
+
 ### [78.5.2](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-12-08)
 
 **Note:** Version bump only for package @codecademy/styleguide

packages/styleguide/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "78.5.2",
+  "version": "78.5.4",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {

packages/styleguide/src/lib/Atoms/Icons/About.mdx

@@ -42,8 +42,8 @@ export const parameters = {
    3. You should be using the Icon from Streamline, NOT Figma.
 2. If it doesn't already have it add the streamline slug (IE: `delete-1`) as the SVG title if it does not already exist and ensure the viewBox is set to `viewBox="0 0 24 24"`. Preserve the source URL, add any relevent comments, and disregard the asset size.
 3. Add the SVG asset to the appropriate folder in `packages/gamut-icons/src/svg/` - either [regular](https://github.com/Codecademy/gamut/tree/main/packages/gamut-icons) or [mini](https://github.com/Codecademy/gamut/tree/main/packages/gamut-icons/mini).
-   1. Regular Icons should follow the naming convention: `<ICON_NAME>Icon.svg`. (e.g. `AddIcon.svg`)
-   2. Mini Icons should follow the naming convention: `Mini<ICON_NAME>Icon.svg` (e.g. `MiniStarIcon.svg`).
+   1. Regular Icons should follow the naming convention: `<icon_name>-icon.svg` (e.g. `add-icon.svg` or `alarm-clock-icon.svg`)
+   2. Mini Icons should follow the naming convention: `mini-<icon_name>-icon.svg` (e.g. `mini-star-icon.svg`)
 4. Run `yarn build-all && yarn start` to see the icon add to Storybook.
    1. Regular Icons will by default be added to the `Interface` section alphabetically, however, you may change this in the config. I.e. if you added an icon that should belong in the `Vendor` section, you can make this change in the `constants.tsx` file.
 5. Make a PR describing where you got the Icon, what its use is with a description of its naming choice.