@codecademy/styleguide 79.2.0-alpha.4dfb89.0 → 79.2.0-alpha.5cfa7b.0

package/.storybook/preview.ts

@@ -183,12 +183,13 @@ export const globalTypes = {
   },
   direction: {
     name: 'Direction',
-    description: 'Text direction for the page',
+    description: 'Text direction (LTR or RTL)',
     defaultValue: 'ltr',
     toolbar: {
+      icon: 'arrowright',
       items: [
-        { value: 'ltr', icon: 'arrowright', title: 'Left-To-Right' },
-        { value: 'rtl', icon: 'arrowleft', title: 'Right-To-Left' },
+        { value: 'ltr', title: 'Left-to-Right (LTR)', icon: 'arrowright' },
+        { value: 'rtl', title: 'Right-to-Left (RTL)', icon: 'arrowleft' },
       ],
       showName: true,
     },

package/.storybook/theming/GamutThemeProvider.tsx

@@ -12,6 +12,8 @@ import {
 } from '@codecademy/gamut-styles/src';
 import { Theme } from '@emotion/react';
 
+const STORYBOOK_CSP_NONCE = 'storybook-csp-nonce';
+
 /**
  * Story functions must be called as a regular function to avoid full-remounts
  * See: https://github.com/storybookjs/storybook/issues/12255
@@ -68,9 +70,8 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
           alwaysSetVariables
           bg={themeBackground[colorMode]}
           ref={storyRef}
-          dir={direction}
         >
-          {Story()}
+          <div dir={direction}>{Story()}</div>
         </Background>
       </GamutProvider>
     );
@@ -86,9 +87,8 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
         alwaysSetVariables
         bg={themeBackground[colorMode]}
         ref={storyRef}
-        dir={direction}
       >
-        {Story()}
+        <div dir={direction}>{Story()}</div>
       </Background>
     </GamutProvider>
   );

package/CHANGELOG.md

@@ -3,13 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [79.2.0-alpha.4dfb89.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.2...@codecademy/styleguide@79.2.0-alpha.4dfb89.0) (2026-02-20)
+## [79.2.0-alpha.5cfa7b.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.3...@codecademy/styleguide@79.2.0-alpha.5cfa7b.0) (2026-03-10)
 
 ### Features
 
+- Layout related logical CSS props ([#3267](https://github.com/Codecademy/gamut/issues/3267)) ([b43cbf1](https://github.com/Codecademy/gamut/commit/b43cbf1256fbf292a141c77a3251fd95f0085a04))
+- logical properties for inset and overflow ([#3269](https://github.com/Codecademy/gamut/issues/3269)) ([18a4d7f](https://github.com/Codecademy/gamut/commit/18a4d7fa7e203b847a9f2b7defdd91345bb30194))
 - Updates to ThemeProvider, tokens, and transform to allow Logical vs Physical prop resolution ([#3234](https://github.com/Codecademy/gamut/issues/3234)) ([7efbb9a](https://github.com/Codecademy/gamut/commit/7efbb9aabcd07dc6429432d007eaa5603ac1d70c))
 - Updates to ThemeProvider, tokens, and transform to allow Logical vs Physical prop resolution ([#3234](https://github.com/Codecademy/gamut/issues/3234)) ([567a6ae](https://github.com/Codecademy/gamut/commit/567a6aeffb3e8628db4b5c9a37dab965b716d969))
 
+### [79.1.3](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.2...@codecademy/styleguide@79.1.3) (2026-03-02)
+
+### Bug Fixes
+
+- **GamutProvider:** CSP improvements ([1026353](https://github.com/Codecademy/gamut/commit/10263537c190aff0e5686872da2be2a30b1d9201)), closes [/github.com/adobe/react-spectrum/issues/8273#issuecomment-3897820426](https://github.com/Codecademy//github.com/adobe/react-spectrum/issues/8273/issues/issuecomment-3897820426)
+
 ### [79.1.2](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.1...@codecademy/styleguide@79.1.2) (2026-02-12)
 
 **Note:** Version bump only for package @codecademy/styleguide

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.2.0-alpha.4dfb89.0",
+  "version": "79.2.0-alpha.5cfa7b.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "c78f864e1d6e187f4957ee587e92bf459dfb79c2"
+  "gitHead": "98e232df10565ce248ce6bb11f32f7a2a0d16c1c"
 }

package/src/lib/Foundations/System/Props/Layout.mdx

@@ -1,8 +1,9 @@
-import { Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
 
 import { AboutHeader, TokenTable } from '~styleguide/blocks';
 
 import { defaultColumns, getPropRows } from '../../shared/elements';
+import * as LayoutStories from './Layout.stories';
 
 export const parameters = {
   title: 'Layout',
@@ -11,12 +12,22 @@ export const parameters = {
   status: 'updating',
 };
 
-<Meta title="Foundations/System/Props/Layout" />
+<Meta title="Foundations/System/Props/Layout" of={LayoutStories} />
 
 <AboutHeader {...parameters} />
 
 Layout props control the visual structure and dimensions of elements. These properties determine how components take up space, their display behavior, and how they align within their containers. Use these props to set widths, heights, overflow behavior, and container types for responsive layouts.
 
+## Examples
+
+### Overflow X
+
+<Canvas of={LayoutStories.OverflowXExample} />
+
+### Overflow Y
+
+<Canvas of={LayoutStories.OverflowYExample} />
+
 ```tsx
 import styled from '@emotion/styled';
 import { system } from '@codecademy/gamut-styles';
@@ -31,4 +42,14 @@ const LayoutExample = styled.div(system.layout);
 />;
 ```
 
+## Examples
+
+### Width
+
+<Canvas of={LayoutStories.WidthExample} />
+
+### Direction
+
+<Canvas of={LayoutStories.DirectionExample} />
+
 <TokenTable rows={getPropRows('layout')} columns={defaultColumns} />

package/src/lib/Foundations/System/Props/Layout.stories.tsx

@@ -0,0 +1,85 @@
+import { Box, Markdown } from '@codecademy/gamut';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Box> = {
+  title: 'Foundations/System/Props/Layout',
+  component: Box,
+};
+
+export default meta;
+type Story = StoryObj<typeof Box>;
+
+export const OverflowXExample: Story = {
+  render: () => (
+    <Box
+      bg="background-selected"
+      overflowX="scroll"
+      p={16}
+      whiteSpace="nowrap"
+      width="200px"
+    >
+      <Box
+        bg="primary"
+        color="background-contrast"
+        display="inline-block"
+        p={8}
+      >
+        This content is wider than its container and has{' '}
+        <Markdown text="`overflowX='scroll'`." /> Inspect the example to see
+        what CSS properties are rendered.
+      </Box>
+    </Box>
+  ),
+};
+
+export const OverflowYExample: Story = {
+  render: () => (
+    <Box bg="background-selected" height="100px" overflowY="scroll" p={16}>
+      <Box bg="primary" color="background-contrast" p={8}>
+        This content is taller than its container and has{' '}
+        <Markdown text="`overflowY='scroll'`." /> Inspect the example to see
+        what CSS properties are rendered.
+        <Box mt={16}>Line 2</Box>
+        <Box mt={16}>Line 3</Box>
+        <Box mt={16}>Line 4</Box>
+        <Box mt={16}>Line 5</Box>
+      </Box>
+    </Box>
+  ),
+};
+
+export const WidthExample: Story = {
+  render: () => (
+    <Box bg="background-selected" p={16}>
+      <Box
+        bg="primary"
+        color="background-contrast"
+        height="300px"
+        p={16}
+        width="50%"
+      >
+        This box has <Markdown text="`width='50%' and height='300px'`." />{' '}
+        Inspect the box to see the rendered CSS property.
+      </Box>
+    </Box>
+  ),
+};
+
+export const DirectionExample: Story = {
+  render: () => (
+    <Box display="flex" flexDirection="row" gap={16}>
+      <Box bg="background-selected" p={16} width="50%">
+        <Box bg="primary" color="background-contrast" direction="ltr" p={16}>
+          <Markdown text="`direction='ltr'`." /> Left-to-right text direction
+          (default for English).
+        </Box>
+      </Box>
+      <Box bg="background-selected" p={16} width="50%">
+        <Box bg="primary" color="background-contrast" direction="rtl" p={16}>
+          <Markdown text="`direction='rtl'`." /> Right-to-left text direction
+          (used for Arabic, Hebrew, etc.).
+        </Box>
+      </Box>
+    </Box>
+  ),
+};

package/src/lib/Meta/Installation.mdx

@@ -68,7 +68,7 @@ GamutProvider handles a few critical tasks that need to happen in order for comp
 - **Next** `_app.tsx`
 - **Gatsby** `gatsby-ssr.js` `gatsby-browser.js` and use `wrapRootElement` in each.
 
-4. Add required types for your theme, which will determine what props Gamut components allow.
+5. Add required types for your theme, which will determine what props Gamut components allow.
 
 ```tsx
 // theme.d.ts
@@ -84,7 +84,7 @@ declare module '@emotion/react' {
 
 For more information this declaration please checkout the [official emotion documentation](https://emotion.sh/docs/typescript#define-a-theme)!
 
-5. Start Building!
+6. Start Building!
 
 ```tsx
 import { Background } from '@codecademy/gamut-styles';
@@ -96,3 +96,15 @@ export const App = () => (
   </Background>
 );
 ```
+
+### Content Security Policy (CSP)
+
+If your app uses a strict Content-Security-Policy (e.g. `style-src` without `'unsafe-inline'`), pass a nonce to `GamutProvider` so Emotion and other Gamut-managed style tags are allowed:
+
+```tsx
+<GamutProvider nonce={yourCspNonce}>
+  <App />
+</GamutProvider>
+```
+
+Your nonce should be the same value you use in your CSP header (e.g. `style-src 'self' 'nonce-{value}'`).