diff --git a/packages/typography/examples/list.md b/packages/typography/examples/list.md
new file mode 100644
index 00000000000..56db9649153
--- /dev/null
+++ b/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 (
+
+ {content[0]}
+
+ {content[1]}
+
+
+ {content[2]}
+ {content[3]}
+
+ );
+ } else {
+ return <>;
+ }
+};
+
+<>
+
+
+ setState({ ordered: event.target.checked })}
+ >
+
+
+
+
+ Levels
+ setState({ levels: event.target.value })}
+ />
+
+
+ Length
+ setState({ length: event.target.value })}
+ />
+
+ setState({ size })}>
+
+ Size
+
+
+
+
+
+
+ setState({ start: event.target.value })}
+ />
+
+
+
+ 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.
+
+
+
+ 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.
+
+;
+```
diff --git a/packages/typography/src/index.js b/packages/typography/src/index.js
index 34db0dbc1f0..857d6692930 100644
--- a/packages/typography/src/index.js
+++ b/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';
diff --git a/packages/typography/src/index.spec.js b/packages/typography/src/index.spec.js
index b8a4aff7114..9d643a325a6 100644
--- a/packages/typography/src/index.spec.js
+++ b/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);
});
diff --git a/packages/typography/src/views/lists/OrderedList.example.md b/packages/typography/src/views/lists/OrderedList.example.md
new file mode 100644
index 00000000000..35316a3c32f
--- /dev/null
+++ b/packages/typography/src/views/lists/OrderedList.example.md
@@ -0,0 +1,79 @@
+### Sizes
+
+```jsx
+Size small
+
+
+ One
+ Two
+ Three
+
+
+Size medium (default)
+
+
+ One
+ Two
+ Three
+
+
+Size large
+
+
+ One
+ Two
+ Three
+
+```
+
+### Types
+
+```jsx
+Type decimal (default)
+
+
+ One
+ Two
+ Three
+
+
+Type decimal-leading-zero
+
+
+ One
+ Two
+ Three
+
+
+Type lower-alpha
+
+
+ One
+ Two
+ Three
+
+
+Type upper-alpha
+
+
+ One
+ Two
+ Three
+
+
+Type lower-roman
+
+
+ One
+ Two
+ Three
+
+
+Type upper-roman
+
+
+ One
+ Two
+ Three
+
+```
diff --git a/packages/typography/src/views/lists/OrderedList.js b/packages/typography/src/views/lists/OrderedList.js
new file mode 100644
index 00000000000..00a9dbffdfb
--- /dev/null
+++ b/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 }) => (
+
+ {children}
+
+);
+
+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;
diff --git a/packages/typography/src/views/lists/OrderedList.spec.js b/packages/typography/src/views/lists/OrderedList.spec.js
new file mode 100644
index 00000000000..ac6ee29592b
--- /dev/null
+++ b/packages/typography/src/views/lists/OrderedList.spec.js
@@ -0,0 +1,94 @@
+/**
+ * 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 OrderedList from './OrderedList';
+
+describe('OrderedList', () => {
+ it('applies rendering if provided', () => {
+ const { container } = render();
+
+ expect(container.querySelector('ol')).not.toBe(null);
+ });
+
+ it('applies correct styling with RTL layout', () => {
+ const { container } = renderRtl();
+
+ expect(container.firstChild).toHaveStyleRule('direction', 'rtl');
+ });
+
+ describe('size', () => {
+ it('renders small styling if provided', () => {
+ const { container } = render(
+
+ item
+
+ );
+
+ expect(container.querySelector('div')).toHaveStyleRule('padding', '0');
+ });
+
+ it('renders medium styling if provided', () => {
+ const { container } = render(
+
+ item
+
+ );
+
+ expect(container.querySelector('div')).toHaveStyleRule('padding', '2px 0');
+ });
+
+ it('renders large styling if provided', () => {
+ const { container } = render(
+
+ item
+
+ );
+
+ expect(container.querySelector('div')).toHaveStyleRule('padding', '4px 0');
+ });
+ });
+
+ describe('type', () => {
+ it('renders decimal styling if provided', () => {
+ const { container } = render();
+
+ expect(container.firstChild).toHaveStyleRule('list-style-type', 'decimal');
+ });
+
+ it('renders decimal-leading-zero styling if provided', () => {
+ const { container } = render();
+
+ expect(container.firstChild).toHaveStyleRule('list-style-type', 'decimal-leading-zero');
+ });
+
+ it('renders lower-alpha styling if provided', () => {
+ const { container } = render();
+
+ expect(container.firstChild).toHaveStyleRule('list-style-type', 'lower-alpha');
+ });
+
+ it('renders upper-alpha styling if provided', () => {
+ const { container } = render();
+
+ expect(container.firstChild).toHaveStyleRule('list-style-type', 'upper-alpha');
+ });
+
+ it('renders lower-roman styling if provided', () => {
+ const { container } = render();
+
+ expect(container.firstChild).toHaveStyleRule('list-style-type', 'lower-roman');
+ });
+
+ it('renders upper-roman styling if provided', () => {
+ const { container } = render();
+
+ expect(container.firstChild).toHaveStyleRule('list-style-type', 'upper-roman');
+ });
+ });
+});
diff --git a/packages/typography/src/views/lists/OrderedListItem.js b/packages/typography/src/views/lists/OrderedListItem.js
new file mode 100644
index 00000000000..b02f39b91e1
--- /dev/null
+++ b/packages/typography/src/views/lists/OrderedListItem.js
@@ -0,0 +1,49 @@
+/**
+ * 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 useOrderedListContext from './useOrderedListContext';
+import MD from '../MD';
+import { listItemContentCSS } from './styles';
+
+const COMPONENT_ID = 'typography.ordered_list_item';
+
+const StyledOrderedListItem = styled.li.attrs({
+ 'data-garden-id': COMPONENT_ID,
+ 'data-garden-version': PACKAGE_VERSION
+})`
+ /* stylelint-disable */
+ margin-${props => (isRtl(props) ? 'right' : 'left')}: -4px;
+ padding-${props => (isRtl(props) ? 'right' : 'left')}: 4px;
+ /* stylelint-enable */
+
+ ${props => retrieveTheme(COMPONENT_ID, props)};
+`;
+
+const StyledOrderedListItemContent = styled(MD)`
+ ${props => listItemContentCSS(props)};
+`;
+
+const OrderedListItem = ({ children, ...props }) => {
+ const { size } = useOrderedListContext();
+
+ return (
+
+ {children}
+
+ );
+};
+
+OrderedListItem.propTypes = {
+ children: PropTypes.any
+};
+
+/** @component */
+export default OrderedListItem;
diff --git a/packages/typography/src/views/lists/OrderedListItem.spec.js b/packages/typography/src/views/lists/OrderedListItem.spec.js
new file mode 100644
index 00000000000..cae617ac82e
--- /dev/null
+++ b/packages/typography/src/views/lists/OrderedListItem.spec.js
@@ -0,0 +1,22 @@
+/**
+ * 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 } from 'garden-test-utils';
+import OrderedList from './OrderedList';
+
+describe('OrderedListItem', () => {
+ it('applies default padding', () => {
+ const { container } = render(
+
+
+
+ );
+
+ expect(container.querySelector('div')).toHaveStyleRule('padding', '2px 0');
+ });
+});
diff --git a/packages/typography/src/views/lists/UnorderedList.example.md b/packages/typography/src/views/lists/UnorderedList.example.md
new file mode 100644
index 00000000000..d8c8cce3f8f
--- /dev/null
+++ b/packages/typography/src/views/lists/UnorderedList.example.md
@@ -0,0 +1,55 @@
+### Sizes
+
+```jsx
+Size small
+
+
+ One
+ Two
+ Three
+
+
+Size medium (default)
+
+
+ One
+ Two
+ Three
+
+
+Size large
+
+
+ One
+ Two
+ Three
+
+```
+
+### Types
+
+```jsx
+Type disc (default)
+
+
+ Item
+ Item
+ Item
+
+
+Type circle
+
+
+ Item
+ Item
+ Item
+
+
+Type square
+
+
+ Item
+ Item
+ Item
+
+```
diff --git a/packages/typography/src/views/lists/UnorderedList.js b/packages/typography/src/views/lists/UnorderedList.js
new file mode 100644
index 00000000000..1835be96a73
--- /dev/null
+++ b/packages/typography/src/views/lists/UnorderedList.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, { createContext } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { retrieveTheme } from '@zendeskgarden/react-theming';
+import { listCSS } from './styles';
+import UnorderedListItem from './UnorderedListItem';
+
+const COMPONENT_ID = 'typography.unordered_list';
+
+const TYPE = {
+ CIRCLE: 'circle',
+ DISC: 'disc',
+ SQUARE: 'square'
+};
+
+const SIZE = {
+ SMALL: 'small',
+ MEDIUM: 'medium',
+ LARGE: 'large'
+};
+
+const StyledUnorderedList = styled.ul.attrs({
+ 'data-garden-id': COMPONENT_ID,
+ 'data-garden-version': PACKAGE_VERSION
+})`
+ ${props => listCSS(props)};
+ ${props => retrieveTheme(COMPONENT_ID, props)};
+`;
+
+export const UnorderedListContext = createContext();
+
+/**
+ * Accepts all `ul` props
+ */
+const UnorderedList = ({ size, children, ...other }) => (
+
+ {children}
+
+);
+
+UnorderedList.propTypes = {
+ children: PropTypes.node,
+ size: PropTypes.oneOf([SIZE.SMALL, SIZE.MEDIUM, SIZE.LARGE]),
+ type: PropTypes.oneOf([TYPE.CIRCLE, TYPE.DISC, TYPE.SQUARE])
+};
+
+UnorderedList.defaultProps = {
+ size: SIZE.MEDIUM
+};
+
+UnorderedList.Item = UnorderedListItem;
+
+/** @component */
+export default UnorderedList;
diff --git a/packages/typography/src/views/lists/UnorderedList.spec.js b/packages/typography/src/views/lists/UnorderedList.spec.js
new file mode 100644
index 00000000000..41b73277998
--- /dev/null
+++ b/packages/typography/src/views/lists/UnorderedList.spec.js
@@ -0,0 +1,76 @@
+/**
+ * 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 UnorderedList from './UnorderedList';
+
+describe('UnorderedList', () => {
+ it('applies rendering by default', () => {
+ const { container } = render();
+
+ expect(container.querySelector('ul')).not.toBe(null);
+ });
+
+ it('applies correct styling with RTL layout', () => {
+ const { container } = renderRtl();
+
+ expect(container.firstChild).toHaveStyleRule('direction', 'rtl');
+ });
+
+ describe('size', () => {
+ it('renders small styling if provided', () => {
+ const { container } = render(
+
+ item
+
+ );
+
+ expect(container.querySelector('div')).toHaveStyleRule('padding', '0');
+ });
+
+ it('renders medium styling if provided', () => {
+ const { container } = render(
+
+ item
+
+ );
+
+ expect(container.querySelector('div')).toHaveStyleRule('padding', '2px 0');
+ });
+
+ it('renders large styling if provided', () => {
+ const { container } = render(
+
+ item
+
+ );
+
+ expect(container.querySelector('div')).toHaveStyleRule('padding', '4px 0');
+ });
+ });
+
+ describe('type', () => {
+ it('renders disc styling if provided', () => {
+ const { container } = render();
+
+ expect(container.firstChild).toHaveStyleRule('list-style-type', 'disc');
+ });
+
+ it('renders circle styling if provided', () => {
+ const { container } = render();
+
+ expect(container.firstChild).toHaveStyleRule('list-style-type', 'circle');
+ });
+
+ it('renders square styling if provided', () => {
+ const { container } = render();
+
+ expect(container.firstChild).toHaveStyleRule('list-style-type', 'square');
+ });
+ });
+});
diff --git a/packages/typography/src/views/lists/UnorderedListItem.js b/packages/typography/src/views/lists/UnorderedListItem.js
new file mode 100644
index 00000000000..e7e66d9815a
--- /dev/null
+++ b/packages/typography/src/views/lists/UnorderedListItem.js
@@ -0,0 +1,44 @@
+/**
+ * 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 { retrieveTheme } from '@zendeskgarden/react-theming';
+import useUnorderedListContext from './useUnorderedListContext';
+import MD from '../MD';
+import { listItemContentCSS } from './styles';
+
+const COMPONENT_ID = 'typography.unordered_list_item';
+
+const StyledUnorderedListItem = styled.li.attrs({
+ 'data-garden-id': COMPONENT_ID,
+ 'data-garden-version': PACKAGE_VERSION
+})`
+ ${props => retrieveTheme(COMPONENT_ID, props)};
+`;
+
+const StyledUnorderedListItemContent = styled(MD)`
+ ${props => listItemContentCSS(props)};
+`;
+
+const UnorderedListItem = ({ children, ...props }) => {
+ const { size } = useUnorderedListContext();
+
+ return (
+
+ {children}
+
+ );
+};
+
+UnorderedListItem.propTypes = {
+ children: PropTypes.any
+};
+
+/** @component */
+export default UnorderedListItem;
diff --git a/packages/typography/src/views/lists/UnorderedListItem.spec.js b/packages/typography/src/views/lists/UnorderedListItem.spec.js
new file mode 100644
index 00000000000..04faca3d0f1
--- /dev/null
+++ b/packages/typography/src/views/lists/UnorderedListItem.spec.js
@@ -0,0 +1,22 @@
+/**
+ * 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 } from 'garden-test-utils';
+import UnorderedList from './UnorderedList';
+
+describe('UnorderedListItem', () => {
+ it('applies default padding', () => {
+ const { container } = render(
+
+
+
+ );
+
+ expect(container.querySelector('div')).toHaveStyleRule('padding', '2px 0');
+ });
+});
diff --git a/packages/typography/src/views/lists/styles.js b/packages/typography/src/views/lists/styles.js
new file mode 100644
index 00000000000..3bc325005f6
--- /dev/null
+++ b/packages/typography/src/views/lists/styles.js
@@ -0,0 +1,44 @@
+/**
+ * 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 { css } from 'styled-components';
+import { isRtl } from '@zendeskgarden/react-theming';
+
+export const listCSS = props => {
+ const rtl = isRtl(props);
+
+ return css`
+ direction: ${rtl ? 'rtl' : 'ltr'};
+ margin: 0;
+ /* stylelint-disable-next-line property-no-unknown */
+ margin-${rtl ? 'right' : 'left'}: 24px;
+ padding: 0;
+ list-style-position: outside;
+ list-style-type: ${props.type};
+ `;
+};
+
+export const listItemContentCSS = props => {
+ let padding;
+
+ switch (props.size) {
+ case 'small':
+ padding = '0';
+ break;
+ case 'large':
+ padding = '4px 0';
+ break;
+ case 'medium':
+ default:
+ padding = '2px 0';
+ break;
+ }
+
+ return css`
+ padding: ${padding};
+ `;
+};
diff --git a/packages/typography/src/views/lists/useOrderedListContext.js b/packages/typography/src/views/lists/useOrderedListContext.js
new file mode 100644
index 00000000000..1419d32236c
--- /dev/null
+++ b/packages/typography/src/views/lists/useOrderedListContext.js
@@ -0,0 +1,24 @@
+/**
+ * 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 { useContext } from 'react';
+import { OrderedListContext } from './OrderedList';
+
+/**
+ * Retrieve OrderedList component context
+ */
+const useOrderedListContext = () => {
+ const listContext = useContext(OrderedListContext);
+
+ if (!listContext) {
+ throw new Error('This component must be rendered within an `OrderedList` component.');
+ }
+
+ return listContext;
+};
+
+export default useOrderedListContext;
diff --git a/packages/typography/src/views/lists/useOrderedListContext.spec.js b/packages/typography/src/views/lists/useOrderedListContext.spec.js
new file mode 100644
index 00000000000..3b93f0d8ec5
--- /dev/null
+++ b/packages/typography/src/views/lists/useOrderedListContext.spec.js
@@ -0,0 +1,46 @@
+/**
+ * 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 } from 'garden-test-utils';
+import OrderedList from './OrderedList';
+import useOrderedListContext from './useOrderedListContext';
+
+describe('useOrderedListContext', () => {
+ const OrderedListContextConsumer = () => {
+ const context = useOrderedListContext();
+
+ return {context && 'it works'}
;
+ };
+
+ it('throws if called outside of OrderedList component', () => {
+ /* eslint-disable no-console */
+ const originalError = console.error;
+
+ console.error = jest.fn();
+
+ const Example = () => ;
+
+ expect(() => {
+ render();
+ }).toThrow();
+
+ console.error = originalError;
+ });
+
+ it('does not throw if called within OrderedList component', () => {
+ const Example = () => (
+
+
+
+ );
+
+ expect(() => {
+ render();
+ }).not.toThrow();
+ });
+});
diff --git a/packages/typography/src/views/lists/useUnorderedListContext.js b/packages/typography/src/views/lists/useUnorderedListContext.js
new file mode 100644
index 00000000000..b4ab956beaf
--- /dev/null
+++ b/packages/typography/src/views/lists/useUnorderedListContext.js
@@ -0,0 +1,24 @@
+/**
+ * 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 { useContext } from 'react';
+import { UnorderedListContext } from './UnorderedList';
+
+/**
+ * Retrieve UnorderedList component context
+ */
+const useUnorderedListContext = () => {
+ const listContext = useContext(UnorderedListContext);
+
+ if (!listContext) {
+ throw new Error('This component must be rendered within an `UnorderedList` component.');
+ }
+
+ return listContext;
+};
+
+export default useUnorderedListContext;
diff --git a/packages/typography/src/views/lists/useUnorderedListContext.spec.js b/packages/typography/src/views/lists/useUnorderedListContext.spec.js
new file mode 100644
index 00000000000..f3e8fb36299
--- /dev/null
+++ b/packages/typography/src/views/lists/useUnorderedListContext.spec.js
@@ -0,0 +1,46 @@
+/**
+ * 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 } from 'garden-test-utils';
+import UnorderedList from './UnorderedList';
+import useUnorderedListContext from './useUnorderedListContext';
+
+describe('useUnorderedListContext', () => {
+ const UnorderedListContextConsumer = () => {
+ const context = useUnorderedListContext();
+
+ return {context && 'it works'}
;
+ };
+
+ it('throws if called outside of UnorderedList component', () => {
+ /* eslint-disable no-console */
+ const originalError = console.error;
+
+ console.error = jest.fn();
+
+ const Example = () => ;
+
+ expect(() => {
+ render();
+ }).toThrow();
+
+ console.error = originalError;
+ });
+
+ it('does not throw if called within UnorderedList component', () => {
+ const Example = () => (
+
+
+
+ );
+
+ expect(() => {
+ render();
+ }).not.toThrow();
+ });
+});
diff --git a/packages/typography/styleguide.config.js b/packages/typography/styleguide.config.js
index 9630bb3ff0c..424fcf3a9c7 100644
--- a/packages/typography/styleguide.config.js
+++ b/packages/typography/styleguide.config.js
@@ -15,6 +15,15 @@ module.exports = {
name: '',
content: '../../packages/typography/README.md'
},
+ {
+ name: 'Examples',
+ sections: [
+ {
+ name: 'Lists',
+ content: '../../packages/typography/examples/list.md'
+ }
+ ]
+ },
{
name: 'Components',
components: [
@@ -25,7 +34,9 @@ module.exports = {
'../../packages/typography/src/views/XXL.js',
'../../packages/typography/src/views/XXXL.js',
'../../packages/typography/src/views/Code.js',
- '../../packages/typography/src/views/Ellipsis.js'
+ '../../packages/typography/src/views/Ellipsis.js',
+ '../../packages/typography/src/views/lists/OrderedList.js',
+ '../../packages/typography/src/views/lists/UnorderedList.js'
]
}
]