@codecademy/styleguide 79.1.0-alpha.70191a.0 → 79.1.0-alpha.986593.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [79.1.0-alpha.70191a.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.0.0...@codecademy/styleguide@79.1.0-alpha.70191a.0) (2026-02-06)
+## [79.1.0-alpha.986593.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.0.0...@codecademy/styleguide@79.1.0-alpha.986593.0) (2026-02-12)
 
 ### Features
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.1.0-alpha.70191a.0",
+  "version": "79.1.0-alpha.986593.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "76beb857751273911a3530b724b41ec4544f39c2"
+  "gitHead": "896f89ffb9384706a1df3a1dad16f56b89f9cfc1"
 }

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,7 +12,7 @@ export const parameters = {
   status: 'updating',
 };
 
-<Meta title="Foundations/System/Props/Layout" />
+<Meta title="Foundations/System/Props/Layout" of={LayoutStories} />
 
 <AboutHeader {...parameters} />
 
@@ -31,4 +32,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,46 @@
+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 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/Foundations/shared/elements.tsx

@@ -485,8 +485,8 @@ const TRANSFORM_COLUMN = {
   size: 'fill',
   render: ({ transform, resolveProperty }: any) => (
     <>
-      {transform && <Code>{transform?.name}</Code>}
-      {resolveProperty && <Code>{resolveProperty?.name}</Code>}
+      {transform && <Code>{transform.name}</Code>}{' '}
+      {resolveProperty && <Code>{resolveProperty.name}</Code>}
     </>
   ),
 };