feat(typography): add List component

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 List } from './views/lists/List';
+export { default as Item } from './views/lists/Item';

packages/typography/src/views/MD.js

@@ -18,7 +18,7 @@ import { retrieveTheme, isRtl } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'typography.md';
 
-const StyledMD = styled.div.attrs({
+export const StyledMD = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })`

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

@@ -0,0 +1,61 @@
+/**
+ * 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, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { isRtl, retrieveTheme } from '@zendeskgarden/react-theming';
+import { ListContext, StyledOrderedList } from './List';
+import { StyledMD } from '../MD';
+
+const COMPONENT_ID = 'typography.list_item';
+
+const StyledListItem = styled.li.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': PACKAGE_VERSION
+})`
+  /* stylelint-disable */
+  ${StyledOrderedList} > & {
+    margin-${props => (isRtl(props) ? 'right' : 'left')}: -4px;
+    padding-${props => (isRtl(props) ? 'right' : 'left')}: 4px;
+  }
+  /* stylelint-enable */
+
+  ${props => retrieveTheme(COMPONENT_ID, props)};
+`;
+
+const StyledListItemContent = styled(StyledMD)`
+  /* stylelint-disable-next-line declaration-colon-newline-after */
+  padding: ${props => {
+    switch (props.size) {
+      case 'small':
+        return '0';
+      case 'large':
+        return '4px 0';
+      case 'medium':
+      default:
+        return '2px 0';
+    }
+  }};
+`;
+
+const Item = ({ children, ...props }) => {
+  const size = useContext(ListContext);
+
+  return (
+    <StyledListItem>
+      <StyledListItemContent size={size}>{children}</StyledListItemContent>
+    </StyledListItem>
+  );
+};
+
+Item.propTypes = {
+  children: PropTypes.any
+};
+
+/** @component */
+export default Item;

packages/typography/src/views/lists/Item.spec.js

@@ -0,0 +1,18 @@
+/**
+ * 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 from 'react';
+import { render, renderRtl } from 'garden-test-utils';
+import Item from './Item';
+
+describe('Item', () => {
+  it('applies default padding', () => {
+    const { container } = render(<Item />);
+
+    expect(container.querySelector('li').firstChild).toHaveStyleRule('padding', '2px 0');
+  });
+});

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

@@ -0,0 +1,202 @@
+The following example shows unordered lists. Unordered lists may receive
+style types of `circle`, `disc`, or `square`.
+
+```jsx
+<p style={{marginTop: 0}}>Type <Code>disc</Code> (default)</p>
+
+<List>
+  <Item>Item</Item>
+  <Item>Item</Item>
+  <Item>Item</Item>
+</List>
+
+<p>Type <Code>circle</Code></p>
+
+<List type="circle">
+  <Item>Item</Item>
+  <Item>Item</Item>
+  <Item>Item</Item>
+</List>
+
+<p>Type <Code>square</Code></p>
+
+<List type="square">
+  <Item>Item</Item>
+  <Item>Item</Item>
+  <Item>Item</Item>
+</List>
+```
+
+The following example shows ordered lists. Ordered lists may receive style
+types of `decimal`, `decimal-leading-zero`, `lower-alpha`, `upper-alpha`,
+`lower-roman`, or `upper-roman`.
+
+```jsx
+<p style={{marginTop: 0}}>Type <Code>decimal</Code> (default)</p>
+
+<List ordered>
+  <Item>One</Item>
+  <Item>Two</Item>
+  <Item>Three</Item>
+</List>
+
+<p>Type <Code>decimal-leading-zero</Code></p>
+
+<List ordered type="decimal-leading-zero">
+  <Item>One</Item>
+  <Item>Two</Item>
+  <Item>Three</Item>
+</List>
+
+<p>Type <Code>lower-alpha</Code></p>
+
+<List ordered type="lower-alpha">
+  <Item>One</Item>
+  <Item>Two</Item>
+  <Item>Three</Item>
+</List>
+
+<p>Type <Code>upper-alpha</Code></p>
+
+<List ordered type="upper-alpha">
+  <Item>One</Item>
+  <Item>Two</Item>
+  <Item>Three</Item>
+</List>
+
+<p>Type <Code>lower-roman</Code></p>
+
+<List ordered type="lower-roman">
+  <Item>One</Item>
+  <Item>Two</Item>
+  <Item>Three</Item>
+</List>
+
+<p>Type <Code>upper-roman</Code></p>
+
+<List ordered type="upper-roman">
+  <Item>One</Item>
+  <Item>Two</Item>
+  <Item>Three</Item>
+</List>
+```
+
+### Interactive Demo
+
+```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: List.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(
+  ' '
+);
+
+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.slice(0, state.length).join(' ');
+
+  if (level < state.levels) {
+    return (
+      <List start={state.start} type={getType(props.ordered, level)} {...props}>
+        <Item>{content}</Item>
+        <Item>
+          {content}
+          <NestedList level={level + 1} {...props} />
+        </Item>
+        <Item>{content}</Item>
+        <Item>{content}</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.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>
+</>;
+```