feat(typography): add List component

packages/typography/examples/list.md

@@ -0,0 +1,128 @@
+```jsx
+const { Well } = require('@zendeskgarden/react-notifications/src');
+const { Checkbox, Field, Input, Label } = require('@zendeskgarden/react-forms/src');
+const {
+  Dropdown,
+  Select,
+  Field: SelectField,
+  Label: SelectLabel,
+  Menu,
+  Item: MenuItem
+} = require('@zendeskgarden/react-dropdowns/src');
+const { Range, RangeField, Label: RangeLabel } = require('@zendeskgarden/react-ranges/src');
+
+initialState = {
+  length: 1,
+  levels: 1,
+  ordered: false,
+  size: UnorderedList.defaultProps.size,
+  start: 1
+};
+
+const text = [
+  'garden es bonus vobis proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic beet greens corn soko endive gumbo gourd shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato cucumber earthnut pea peanut soko zucchini.'.split(
+    ' '
+  ),
+  'greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale celery potato scallion desert raisin horseradish spinach carrot soko lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin sprout coriander.'.split(
+    ' '
+  ),
+  'water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify celery quandong swiss chard.'.split(
+    ' '
+  ),
+  'rock melon radish asparagus spinach beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens.'.split(
+    ' '
+  )
+];
+const getType = (ordered, level) => {
+  const types = ordered ? ['decimal', 'lower-alpha', 'lower-roman'] : ['disc', 'circle', 'square'];
+  const index = level % types.length;
+
+  return types[index];
+};
+
+const NestedList = ({ level = 0, ...props }) => {
+  const content = text.map(string => string.slice(0, state.length).join(' '));
+  const List = state.ordered ? OrderedList : UnorderedList;
+
+  if (level < state.levels) {
+    return (
+      <List start={state.start} type={getType(state.ordered, level)} {...props}>
+        <List.Item>{content[0]}</List.Item>
+        <List.Item>
+          {content[1]}
+          <NestedList level={level + 1} {...props} />
+        </List.Item>
+        <List.Item>{content[2]}</List.Item>
+        <List.Item>{content[3]}</List.Item>
+      </List>
+    );
+  } else {
+    return <></>;
+  }
+};
+
+<>
+  <Well recessed style={{ width: 300 }}>
+    <Field>
+      <Checkbox
+        checked={state.ordered}
+        onChange={event => setState({ ordered: event.target.checked })}
+      >
+        <Label style={{ marginBottom: 8 }}>Ordered</Label>
+      </Checkbox>
+    </Field>
+    <RangeField>
+      <RangeLabel>Levels</RangeLabel>
+      <Range
+        max={9}
+        min={1}
+        value={state.levels}
+        onChange={event => setState({ levels: event.target.value })}
+      />
+    </RangeField>
+    <RangeField>
+      <RangeLabel>Length</RangeLabel>
+      <Range
+        max={text[0].length}
+        min={1}
+        value={state.length}
+        onChange={event => setState({ length: event.target.value })}
+      />
+    </RangeField>
+    <Dropdown selectedItem={state.size} onSelect={size => setState({ size })}>
+      <SelectField>
+        <SelectLabel>Size</SelectLabel>
+        <Select small>{state.size}</Select>
+      </SelectField>
+      <Menu small>
+        <MenuItem value="small">small</MenuItem>
+        <MenuItem value="medium">medium (default)</MenuItem>
+        <MenuItem value="large">large</MenuItem>
+      </Menu>
+    </Dropdown>
+    <Field>
+      <Label>Start</Label>
+      <Input
+        disabled={!state.ordered}
+        small
+        type="number"
+        value={state.start}
+        onChange={event => setState({ start: event.target.value })}
+      />
+    </Field>
+  </Well>
+  <MD tag="p">
+    Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts
+    black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water
+    chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko
+    chicory celtuce parsley jícama salsify.
+  </MD>
+  <NestedList {...state} />
+  <MD tag="p" style={{ marginBottom: 0 }}>
+    Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce
+    brussels sprout cabbage. Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper
+    napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut. Sea
+    lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra.
+  </MD>
+</>;
+```

packages/typography/src/index.js

@@ -13,3 +13,5 @@ export { default as XXL } from './views/XXL';
 export { default as XXXL } from './views/XXXL';
 export { default as Code } from './views/Code';
 export { default as Ellipsis } from './views/Ellipsis';
+export { default as OrderedList } from './views/lists/OrderedList';
+export { default as UnorderedList } from './views/lists/UnorderedList';

packages/typography/src/index.spec.js

@@ -10,7 +10,20 @@ import * as rootIndex from './';
 
 describe('Index', () => {
   it('exports all components and utilities', async () => {
-    const exports = await getExports({ cwd: __dirname });
+    const exports = await getExports({
+      cwd: __dirname,
+      fileMapper: files => {
+        return files
+          .filter(file => !/Item|use(Ordered|Unordered)ListContext|styles/u.test(file))
+          .map(entry =>
+            entry
+              .replace(/\.js$/u, '')
+              .split('/')
+              .pop()
+          )
+          .sort();
+      }
+    });
 
     expect(Object.keys(rootIndex).sort()).toEqual(exports);
   });

packages/typography/src/views/lists/OrderedList.example.md

@@ -0,0 +1,79 @@
+### Sizes
+
+```jsx
+<p style={{marginTop: 0}}>Size <Code>small</Code></p>
+
+<OrderedList size="small">
+  <OrderedList.Item>One</OrderedList.Item>
+  <OrderedList.Item>Two</OrderedList.Item>
+  <OrderedList.Item>Three</OrderedList.Item>
+</OrderedList>
+
+<p>Size <Code>medium</Code> (default)</p>
+
+<OrderedList size="medium">
+  <OrderedList.Item>One</OrderedList.Item>
+  <OrderedList.Item>Two</OrderedList.Item>
+  <OrderedList.Item>Three</OrderedList.Item>
+</OrderedList>
+
+<p>Size <Code>large</Code></p>
+
+<OrderedList size="large">
+  <OrderedList.Item>One</OrderedList.Item>
+  <OrderedList.Item>Two</OrderedList.Item>
+  <OrderedList.Item>Three</OrderedList.Item>
+</OrderedList>
+```
+
+### Types
+
+```jsx
+<p style={{marginTop: 0}}>Type <Code>decimal</Code> (default)</p>
+
+<OrderedList>
+  <OrderedList.Item>One</OrderedList.Item>
+  <OrderedList.Item>Two</OrderedList.Item>
+  <OrderedList.Item>Three</OrderedList.Item>
+</OrderedList>
+
+<p>Type <Code>decimal-leading-zero</Code></p>
+
+<OrderedList type="decimal-leading-zero">
+  <OrderedList.Item>One</OrderedList.Item>
+  <OrderedList.Item>Two</OrderedList.Item>
+  <OrderedList.Item>Three</OrderedList.Item>
+</OrderedList>
+
+<p>Type <Code>lower-alpha</Code></p>
+
+<OrderedList type="lower-alpha">
+  <OrderedList.Item>One</OrderedList.Item>
+  <OrderedList.Item>Two</OrderedList.Item>
+  <OrderedList.Item>Three</OrderedList.Item>
+</OrderedList>
+
+<p>Type <Code>upper-alpha</Code></p>
+
+<OrderedList type="upper-alpha">
+  <OrderedList.Item>One</OrderedList.Item>
+  <OrderedList.Item>Two</OrderedList.Item>
+  <OrderedList.Item>Three</OrderedList.Item>
+</OrderedList>
+
+<p>Type <Code>lower-roman</Code></p>
+
+<OrderedList type="lower-roman">
+  <OrderedList.Item>One</OrderedList.Item>
+  <OrderedList.Item>Two</OrderedList.Item>
+  <OrderedList.Item>Three</OrderedList.Item>
+</OrderedList>
+
+<p>Type <Code>upper-roman</Code></p>
+
+<OrderedList type="upper-roman">
+  <OrderedList.Item>One</OrderedList.Item>
+  <OrderedList.Item>Two</OrderedList.Item>
+  <OrderedList.Item>Three</OrderedList.Item>
+</OrderedList>
+```

packages/typography/src/views/lists/OrderedList.js

@@ -0,0 +1,71 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React, { createContext } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { retrieveTheme } from '@zendeskgarden/react-theming';
+import OrderedListItem from './OrderedListItem';
+import { listCSS } from './styles';
+
+const COMPONENT_ID = 'typography.ordered_list';
+
+const TYPE = {
+  DECIMAL: 'decimal',
+  DECIMAL_LEADING_ZERO: 'decimal-leading-zero',
+  LOWER_ALPHA: 'lower-alpha',
+  LOWER_ROMAN: 'lower-roman',
+  UPPER_ALPHA: 'upper-alpha',
+  UPPER_ROMAN: 'upper-roman'
+};
+
+const SIZE = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+};
+
+const StyledOrderedList = styled.ol.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': PACKAGE_VERSION
+})`
+  ${props => listCSS(props)};
+  ${props => retrieveTheme(COMPONENT_ID, props)};
+`;
+
+export const OrderedListContext = createContext();
+
+/**
+ * Accepts all `ol` props
+ */
+const OrderedList = ({ size, children, ...other }) => (
+  <OrderedListContext.Provider value={{ size }}>
+    <StyledOrderedList {...other}>{children}</StyledOrderedList>
+  </OrderedListContext.Provider>
+);
+
+OrderedList.propTypes = {
+  children: PropTypes.node,
+  size: PropTypes.oneOf([SIZE.SMALL, SIZE.MEDIUM, SIZE.LARGE]),
+  type: PropTypes.oneOf([
+    TYPE.DECIMAL,
+    TYPE.DECIMAL_LEADING_ZERO,
+    TYPE.LOWER_ALPHA,
+    TYPE.UPPER_ALPHA,
+    TYPE.LOWER_ROMAN,
+    TYPE.UPPER_ROMAN
+  ])
+};
+
+OrderedList.defaultProps = {
+  size: SIZE.MEDIUM
+};
+
+OrderedList.Item = OrderedListItem;
+
+/** @component */
+export default OrderedList;