@codecademy/styleguide 78.5.6-alpha.ea1cbb.0 → 78.5.6-alpha.eca584.0

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

@@ -1,31 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'Grid',
-  subtitle: 'Grid specific properties',
-  status: 'current',
-};
-
-<Meta title="Foundations/System/Props/Grid" />
-
-<AboutHeader {...parameters} />
-
-Grid props give you powerful control over CSS Grid layouts. Define grid templates, control auto-placement behavior, and set gaps between grid items. These properties make it straightforward to create complex, responsive grid layouts with precise control over both container and item positioning.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const GridExample = styled.div(system.grid);
-
-<GridExample
-  gridTemplateColumns="max-content 1fr max-content"
-  columnGap={32}
-/>;
-```
-
-<TokenTable rows={getPropRows('grid')} columns={defaultColumns} />

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

@@ -1,34 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'Layout',
-  subtitle:
-    'Props for handling dimensions and other layout specific properties.',
-  status: 'updating',
-};
-
-<Meta title="Foundations/System/Props/Layout" />
-
-<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.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const LayoutExample = styled.div(system.layout);
-
-<LayoutExample
-  display="flex"
-  width="50%"
-  height="300px"
-  verticalAlign="middle"
-/>;
-```
-
-<TokenTable rows={getPropRows('layout')} columns={defaultColumns} />

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

@@ -1,38 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, LinkTo, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'List',
-  subtitle:
-    'Props for adjusting list styles when rendering a component as a `ul` or `ol`',
-  status: 'current',
-};
-
-<Meta title="Foundations/System/Props/List" />
-
-<AboutHeader {...parameters} />
-
-List props control the appearance of ordered and unordered lists when components are rendered as `ul` or `ol` elements. These properties let you customize bullet styles, list positioning, and even use custom images as list markers, giving you full control over list presentation.
-
-For more advanced list features, refer to the <LinkTo id="Organisms/Lists & Tables/List">List component</LinkTo>.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const ListExample = styled.div(system.list);
-
-<ListExample
-  as="ul"
-  listStyleType="square"
-  listStylePosition="inside"
-  listStyleImage="none"
->
-  <ListExample as="li">a list item</ListExample>
-</ListExample>;
-```
-
-<TokenTable rows={getPropRows('list')} columns={defaultColumns} />

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

@@ -1,29 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'Positioning',
-  subtitle:
-    'Props that affect stacking and position contexts. Like `top`, `position` and `opacity`.',
-  status: 'updating',
-};
-
-<Meta title="Foundations/System/Props/Positioning" />
-
-<AboutHeader {...parameters} />
-
-Positioning props control how elements are positioned within their parent containers and manage their stacking order. Use these properties to create fixed headers, absolute overlays, sticky navigation, and control layering with z-index. The `inset` shorthand provides a convenient way to set all four position values at once.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const PositioningExample = styled.div(system.positioning);
-
-<PositioningExample position="absolute" zIndex={2} top="0" left="0" />;
-```
-
-<TokenTable rows={getPropRows('positioning')} columns={defaultColumns} />

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

@@ -1,31 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'Shadow',
-  subtitle: 'Props for box and text shadows.',
-  status: 'current',
-};
-
-<Meta title="Foundations/System/Props/Shadow" />
-
-<AboutHeader {...parameters} />
-
-Shadow props add depth and visual interest to your components through box and text shadows. These properties accept standard CSS shadow syntax, allowing you to create subtle elevation effects or dramatic visual depth. Use shadows consistently to establish visual hierarchy in your interface.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const ShadowExample = styled.div(system.shadow);
-
-<ShadowExample
-  boxShadow="0 0 4px rgba(0, 0, 0, .15)"
-  textShadow="0 0 4px rgba(0, 0, 0, .15)"
-/>;
-```
-
-<TokenTable rows={getPropRows('shadows')} columns={defaultColumns} />

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

@@ -1,28 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'Space',
-  subtitle: 'Props for maintaining specific vertical and horizontal rhythms',
-  status: 'updating',
-};
-
-<Meta title="Foundations/System/Props/Space" />
-
-<AboutHeader {...parameters} />
-
-Space props provide a consistent way to apply margin and padding throughout your application. All spacing values reference the theme's spacing scale, ensuring visual consistency and making it easy to create responsive spacing patterns using array syntax.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const SpaceExample = styled.div(system.space);
-
-<SpaceExample p={8} my={[16, 24, 32]} />;
-```
-
-<TokenTable rows={getPropRows('space')} columns={defaultColumns} />

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

@@ -1,28 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'Typography',
-  subtitle: 'Props for text manipulation',
-  status: 'current',
-};
-
-<Meta title="Foundations/System/Props/Typography" />
-
-<AboutHeader {...parameters} />
-
-Typography props give you fine-grained control over text styling and appearance. These properties connect to the theme's typography scales for font families, sizes, weights, and line heights, making it simple to maintain typographic consistency across your application while allowing for custom text transformations and decorations.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const TextExample = styled.p(system.typography);
-
-<TextExample fontSize={16} fontFamily="accent" textTransform="uppercase" />;
-```
-
-<TokenTable rows={getPropRows('typography')} columns={defaultColumns} />