feat: add listStyle props to Box and Column

packages/gamut-styles/src/variance/config.ts

@@ -192,6 +192,13 @@ export const layout = {
   ...flexItems,
 } as const;
 
+export const list = {
+  listStyle: { property: 'listStyle' },
+  listStyleType: { property: 'listStyleType' },
+  listStylePosition: { property: 'listStylePosition' },
+  listStyleImage: { property: 'listStyleImage' },
+} as const;
+
 export const typography = {
   fontFamily: { property: 'fontFamily', scale: 'fontFamily' },
   fontWeight: { property: 'fontWeight', scale: 'fontWeight' },
@@ -257,4 +264,5 @@ export const all = {
   ...border,
   ...background,
   ...color,
+  ...list,
 };

packages/gamut-styles/src/variance/props.ts

@@ -13,6 +13,7 @@ export const color = variance.create(PROPERTIES.color);
 export const shadow = variance.create(PROPERTIES.shadows);
 export const space = variance.create(PROPERTIES.space);
 export const border = variance.create(PROPERTIES.border);
+export const list = variance.create(PROPERTIES.list);
 
 /** Sub Groups */
 export const padding = variance.create(PROPERTIES.padding);

packages/gamut/src/Box/props.ts

@@ -13,7 +13,8 @@ export const boxProps = variance.compose(
   system.background,
   system.typography,
   system.flex,
-  system.grid
+  system.grid,
+  system.list
 );
 
 export const sharedStates = system.states({

packages/gamut/src/Layout/Column.tsx

@@ -56,6 +56,7 @@ const columnProps = variance.compose(
   system.layout,
   system.space,
   system.grid,
+  system.list,
   gridProps
 );
 

packages/styleguide/stories/Foundations/System/Props.stories.mdx

@@ -220,3 +220,29 @@ const Box = styled.div(system.shadow);
 <Story name="shadows">
   <DataTable rows={getPropRows('shadows')} columns={defaultColumns} />
 </Story>
+
+# List
+
+Props for adjusting list styles when rendering a component as a `ul` or `ol`
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const Box = styled.div(system.list);
+
+<Box
+  as="ul"
+  listStyleType="square"
+  listStylePosition="inside"
+  listStyleImage="none"
+>
+  <Box as="li">
+    a list item
+  </Box>
+</Box>;
+```
+
+<Story name="lists">
+  <DataTable rows={getPropRows('list')} columns={defaultColumns} />
+</Story>

packages/styleguide/stories/Layouts/Box/index.stories.mdx

@@ -85,3 +85,25 @@ Positioning elements and maintaining stacking contexts can be annoying, especial
     )}
   </Story>
 </Canvas>
+
+### Lists
+
+When presenting multiple boxes as a group, it is often necessary to render them as a list to make the content more accessible. An outer `<Box />` can be rendered as a `<ul />` or `<ol />` element, and its `<Box />` children can be rendered as `<li />` elements. The list styles can also be adjusted via the `listStyle`, `listStyleType`, `listStylePosition`, and `listStyleImage` props.
+
+<Canvas>
+  <Story name="Lists">
+    {() => (
+      <Box as="ul" listStyle="none" p={16} border={1}>
+        <Box as="li" border={1} p={8} my={8}>
+          list item 1
+        </Box>
+        <Box as="li" border={1} p={8} my={8}>
+          list item 2
+        </Box>
+        <Box as="li" border={1} p={8} my={8}>
+          and so on
+        </Box>
+      </Box>
+    )}
+  </Story>
+</Canvas>