From 6b16f19e67a52270679d29a826f4234af28d48c7 Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Thu, 11 Jul 2019 10:15:24 -0700 Subject: [PATCH 01/11] Initial `List` and `Item` components --- packages/typography/src/index.js | 2 + .../src/views/lists/Item.example.md | 0 packages/typography/src/views/lists/Item.js | 33 ++++++++ .../src/views/lists/List.example.md | 30 +++++++ packages/typography/src/views/lists/List.js | 84 +++++++++++++++++++ packages/typography/styleguide.config.js | 4 +- 6 files changed, 152 insertions(+), 1 deletion(-) create mode 100644 packages/typography/src/views/lists/Item.example.md create mode 100644 packages/typography/src/views/lists/Item.js create mode 100644 packages/typography/src/views/lists/List.example.md create mode 100644 packages/typography/src/views/lists/List.js diff --git a/packages/typography/src/index.js b/packages/typography/src/index.js index 34db0dbc1f0..cc67f5181c6 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 List } from './views/lists/List'; +export { default as Item } from './views/lists/Item'; diff --git a/packages/typography/src/views/lists/Item.example.md b/packages/typography/src/views/lists/Item.example.md new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/typography/src/views/lists/Item.js b/packages/typography/src/views/lists/Item.js new file mode 100644 index 00000000000..01dfa9f17a9 --- /dev/null +++ b/packages/typography/src/views/lists/Item.js @@ -0,0 +1,33 @@ +/** + * 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 PropTypes from 'prop-types'; +import styled from 'styled-components'; +import { isRtl, retrieveTheme } from '@zendeskgarden/react-theming'; +import { StyledOrderedList } from './List'; + +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 Item = ({ children, ...props }) => {children}; + +/** @component */ +export default Item; diff --git a/packages/typography/src/views/lists/List.example.md b/packages/typography/src/views/lists/List.example.md new file mode 100644 index 00000000000..a7773446575 --- /dev/null +++ b/packages/typography/src/views/lists/List.example.md @@ -0,0 +1,30 @@ +```jsx +Pea horseradish azuki bean lettuce avocado asparagus okra. +Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green +bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. +Grape silver beet watercress potato tigernut corn groundnut. + + + Item + Item + Item + + Sub-item + Sub-item + Sub-item + + + + + + Item + Item + Item + + Sub-item + Sub-item + Sub-item + + + +``` diff --git a/packages/typography/src/views/lists/List.js b/packages/typography/src/views/lists/List.js new file mode 100644 index 00000000000..e83b44e0de9 --- /dev/null +++ b/packages/typography/src/views/lists/List.js @@ -0,0 +1,84 @@ +/** + * 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 PropTypes from 'prop-types'; +import styled, { css } from 'styled-components'; +import { isRtl, retrieveTheme } from '@zendeskgarden/react-theming'; + +const COMPONENT_ID = 'typography.list'; + +const TYPE_ORDERED = { + 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 TYPE_UNORDERED = { + CIRCLE: 'circle', + DISC: 'disc', + SQUARE: 'square' +}; + +const listAttributes = { + 'data-garden-id': COMPONENT_ID, + 'data-garden-version': PACKAGE_VERSION +}; + +const listCSS = css` + direction: ${props => (isRtl(props) ? 'rtl' : 'ltr')}; + margin: 0; + /* stylelint-disable-next-line property-no-unknown */ + margin-${props => (isRtl(props) ? 'right' : 'left')}: 24px; + padding: 0; + list-style-position: outside; + + ${props => retrieveTheme(COMPONENT_ID, props)}; +`; + +export const StyledOrderedList = styled.ol.attrs(listAttributes)` + ${listCSS}; + list-style-type: ${props => Object.values(TYPE_ORDERED).indexOf(props.type) !== -1 && props.type}; +`; + +export const StyledUnorderedList = styled.ul.attrs(listAttributes)` + ${listCSS}; + /* stylelint-disable-next-line declaration-colon-newline-after */ + list-style-type: ${props => + Object.values(TYPE_UNORDERED).indexOf(props.type) !== -1 && props.type}; +`; + +/** + * Accepts all `ul`/`ol` props + */ +const List = ({ ordered, children, ...other }) => + ordered ? ( + {children} + ) : ( + {children} + ); + +List.propTypes = { + ordered: PropTypes.bool, + type: PropTypes.oneOf([ + TYPE_UNORDERED.CIRCLE, + TYPE_UNORDERED.DISC, + TYPE_UNORDERED.SQUARE, + TYPE_ORDERED.DECIMAL, + TYPE_ORDERED.DECIMAL_LEADING_ZERO, + TYPE_ORDERED.LOWER_ALPHA, + TYPE_ORDERED.UPPER_ALPHA, + TYPE_ORDERED.LOWER_ROMAN, + TYPE_ORDERED.UPPER_ROMAN + ]) +}; + +/** @component */ +export default List; diff --git a/packages/typography/styleguide.config.js b/packages/typography/styleguide.config.js index 9630bb3ff0c..060c438fec9 100644 --- a/packages/typography/styleguide.config.js +++ b/packages/typography/styleguide.config.js @@ -25,7 +25,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/List.js', + '../../packages/typography/src/views/lists/Item.js' ] } ] From 42830faebd79cd3a62e9f0e3a533a35415f7ce0a Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Fri, 12 Jul 2019 13:38:49 -0700 Subject: [PATCH 02/11] Handle size variations and add interactive demo --- packages/typography/src/views/MD.js | 2 +- packages/typography/src/views/lists/Item.js | 34 +++- .../src/views/lists/List.example.md | 189 ++++++++++++++++-- packages/typography/src/views/lists/List.js | 31 ++- 4 files changed, 225 insertions(+), 31 deletions(-) diff --git a/packages/typography/src/views/MD.js b/packages/typography/src/views/MD.js index aa5a4095224..2da7981341c 100644 --- a/packages/typography/src/views/MD.js +++ b/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 })` diff --git a/packages/typography/src/views/lists/Item.js b/packages/typography/src/views/lists/Item.js index 01dfa9f17a9..73034642de1 100644 --- a/packages/typography/src/views/lists/Item.js +++ b/packages/typography/src/views/lists/Item.js @@ -5,11 +5,12 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import React from 'react'; +import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import { isRtl, retrieveTheme } from '@zendeskgarden/react-theming'; -import { StyledOrderedList } from './List'; +import { ListContext, StyledOrderedList } from './List'; +import { StyledMD } from '../MD'; const COMPONENT_ID = 'typography.list_item'; @@ -27,7 +28,34 @@ const StyledListItem = styled.li.attrs({ ${props => retrieveTheme(COMPONENT_ID, props)}; `; -const Item = ({ children, ...props }) => {children}; +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 ( + + {children} + + ); +}; + +Item.propTypes = { + children: PropTypes.any +}; /** @component */ export default Item; diff --git a/packages/typography/src/views/lists/List.example.md b/packages/typography/src/views/lists/List.example.md index a7773446575..993bbfdea31 100644 --- a/packages/typography/src/views/lists/List.example.md +++ b/packages/typography/src/views/lists/List.example.md @@ -1,30 +1,179 @@ +The following example shows unordered lists. Unordered lists may receive +style types of `circle`, `disc`, or `square`. + ```jsx -Pea horseradish azuki bean lettuce avocado asparagus okra. -Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green -bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. -Grape silver beet watercress potato tigernut corn groundnut. +

Type disc (default)

- + + Item Item Item - Item - - Sub-item - Sub-item - Sub-item - - - +

Type circle

+ + + Item + Item + Item + + +

Type square

+ + + Item Item Item - Item - - Sub-item - Sub-item - Sub-item - - ``` + +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 +

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 + +``` + +### Interactive Demo + +```jsx +const { Well } = require('@zendeskgarden/react-notifications/src'); +const { + Checkbox, + Field: CheckboxField, + Label: CheckboxLabel +} = 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 = { + levels: 5, + ordered: false, + size: List.defaultProps.size +}; + +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 }) => { + if (level < state.levels) { + return ( + + item + + item + + + item + item + + ); + } else { + return <>; + } +}; + +<> + + + setState({ ordered: event.target.checked })} + > + Ordered + + + + Levels + setState({ levels: event.target.value })} + /> + + setState({ size })}> + + Size + + + + small + medium (default) + large + + + + + 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/views/lists/List.js b/packages/typography/src/views/lists/List.js index e83b44e0de9..d4c903acf1d 100644 --- a/packages/typography/src/views/lists/List.js +++ b/packages/typography/src/views/lists/List.js @@ -5,7 +5,7 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import React from 'react'; +import React, { createContext } from 'react'; import PropTypes from 'prop-types'; import styled, { css } from 'styled-components'; import { isRtl, retrieveTheme } from '@zendeskgarden/react-theming'; @@ -27,6 +27,12 @@ const TYPE_UNORDERED = { SQUARE: 'square' }; +const SIZE = { + SMALL: 'small', + MEDIUM: 'medium', + LARGE: 'large' +}; + const listAttributes = { 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION @@ -55,18 +61,25 @@ export const StyledUnorderedList = styled.ul.attrs(listAttributes)` Object.values(TYPE_UNORDERED).indexOf(props.type) !== -1 && props.type}; `; +export const ListContext = createContext(); + /** * Accepts all `ul`/`ol` props */ -const List = ({ ordered, children, ...other }) => - ordered ? ( - {children} - ) : ( - {children} - ); +const List = ({ ordered, size, children, ...other }) => ( + + {ordered ? ( + {children} + ) : ( + {children} + )} + +); List.propTypes = { + children: PropTypes.node, ordered: PropTypes.bool, + size: PropTypes.oneOf([SIZE.SMALL, SIZE.MEDIUM, SIZE.LARGE]), type: PropTypes.oneOf([ TYPE_UNORDERED.CIRCLE, TYPE_UNORDERED.DISC, @@ -80,5 +93,9 @@ List.propTypes = { ]) }; +List.defaultProps = { + size: SIZE.MEDIUM +}; + /** @component */ export default List; From 39dee54b32c1804a174744d156c39de9e90d9d64 Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Fri, 12 Jul 2019 14:00:12 -0700 Subject: [PATCH 03/11] Add long text to interactive demo --- .../src/views/lists/List.example.md | 24 +++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/typography/src/views/lists/List.example.md b/packages/typography/src/views/lists/List.example.md index 993bbfdea31..0df90ed4f1d 100644 --- a/packages/typography/src/views/lists/List.example.md +++ b/packages/typography/src/views/lists/List.example.md @@ -101,11 +101,16 @@ const { const { Range, RangeField, Label: RangeLabel } = require('@zendeskgarden/react-ranges/src'); initialState = { + length: 1, levels: 5, ordered: false, size: List.defaultProps.size }; +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; @@ -114,16 +119,18 @@ const getType = (ordered, level) => { }; const NestedList = ({ level = 0, ...props }) => { + const content = text.slice(0, state.length).join(' '); + if (level < state.levels) { return ( - item + {content} - item + {content} - item - item + {content} + {content} ); } else { @@ -150,6 +157,15 @@ const NestedList = ({ level = 0, ...props }) => { onChange={event => setState({ levels: event.target.value })} /> + + Length + setState({ length: event.target.value })} + /> + setState({ size })}> Size From e8b3f8e93afd9b9087278804109e62c7cd1abaeb Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Fri, 12 Jul 2019 17:16:07 -0700 Subject: [PATCH 04/11] Add list/item tests --- .../typography/src/views/lists/Item.spec.js | 18 +++ .../src/views/lists/List.example.md | 2 +- .../typography/src/views/lists/List.spec.js | 135 ++++++++++++++++++ 3 files changed, 154 insertions(+), 1 deletion(-) create mode 100644 packages/typography/src/views/lists/Item.spec.js create mode 100644 packages/typography/src/views/lists/List.spec.js diff --git a/packages/typography/src/views/lists/Item.spec.js b/packages/typography/src/views/lists/Item.spec.js new file mode 100644 index 00000000000..f87d1aa982a --- /dev/null +++ b/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(); + + expect(container.querySelector('li').firstChild).toHaveStyleRule('padding', '2px 0'); + }); +}); diff --git a/packages/typography/src/views/lists/List.example.md b/packages/typography/src/views/lists/List.example.md index 0df90ed4f1d..10a4b95dc40 100644 --- a/packages/typography/src/views/lists/List.example.md +++ b/packages/typography/src/views/lists/List.example.md @@ -171,7 +171,7 @@ const NestedList = ({ level = 0, ...props }) => { Size - + small medium (default) large diff --git a/packages/typography/src/views/lists/List.spec.js b/packages/typography/src/views/lists/List.spec.js new file mode 100644 index 00000000000..fe424821816 --- /dev/null +++ b/packages/typography/src/views/lists/List.spec.js @@ -0,0 +1,135 @@ +/** + * 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 List from './List'; +import Item from './Item'; + +describe('List', () => { + it('applies unordered rendering by default', () => { + const { container } = render(); + + expect(container.querySelector('ul')).not.toBe(null); + }); + + it('applies ordered 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', () => { + describe('unordered', () => { + 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'); + }); + }); + + describe('ordered', () => { + 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'); + }); + }); + + it('falls back to default styling if type is not applicable to an unordered list', () => { + const { container } = render(); + + expect(container.firstChild).toHaveStyleRule('list-style-type', undefined); + }); + + it('falls back to default styling if type is not applicable to an ordered list', () => { + const { container } = render(); + + expect(container.firstChild).toHaveStyleRule('list-style-type', undefined); + }); + }); +}); From d0498383db3e37a37a09cdcbd10ede22299a1e0b Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Fri, 12 Jul 2019 17:21:30 -0700 Subject: [PATCH 05/11] Update default levels --- packages/typography/src/views/lists/List.example.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/typography/src/views/lists/List.example.md b/packages/typography/src/views/lists/List.example.md index 10a4b95dc40..40ecaa2ce70 100644 --- a/packages/typography/src/views/lists/List.example.md +++ b/packages/typography/src/views/lists/List.example.md @@ -102,7 +102,7 @@ const { Range, RangeField, Label: RangeLabel } = require('@zendeskgarden/react-r initialState = { length: 1, - levels: 5, + levels: 1, ordered: false, size: List.defaultProps.size }; From 79112fb15356de11bed45ac2546380b844a469aa Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Fri, 12 Jul 2019 17:48:44 -0700 Subject: [PATCH 06/11] Add start value to interactive demo --- .../src/views/lists/List.example.md | 27 ++++++++++++------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/packages/typography/src/views/lists/List.example.md b/packages/typography/src/views/lists/List.example.md index 40ecaa2ce70..74fedba2bdd 100644 --- a/packages/typography/src/views/lists/List.example.md +++ b/packages/typography/src/views/lists/List.example.md @@ -85,11 +85,7 @@ types of `decimal`, `decimal-leading-zero`, `lower-alpha`, `upper-alpha`, ```jsx const { Well } = require('@zendeskgarden/react-notifications/src'); -const { - Checkbox, - Field: CheckboxField, - Label: CheckboxLabel -} = require('@zendeskgarden/react-forms/src'); +const { Checkbox, Field, Input, Label } = require('@zendeskgarden/react-forms/src'); const { Dropdown, Select, @@ -104,7 +100,8 @@ initialState = { length: 1, levels: 1, ordered: false, - size: List.defaultProps.size + 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( @@ -123,7 +120,7 @@ const NestedList = ({ level = 0, ...props }) => { if (level < state.levels) { return ( - + {content} {content} @@ -140,14 +137,14 @@ const NestedList = ({ level = 0, ...props }) => { <> - + setState({ ordered: event.target.checked })} > - Ordered + - + Levels { large + + + setState({ start: event.target.value })} + /> + Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts From 45cd0daa5f897cbf48b1350f4971817b6fedb20e Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Mon, 15 Jul 2019 11:47:08 -0700 Subject: [PATCH 07/11] Address @austin94 review comments --- packages/typography/src/index.js | 1 - packages/typography/src/index.spec.js | 15 ++++- packages/typography/src/views/MD.js | 2 +- .../src/views/lists/Item.example.md | 0 packages/typography/src/views/lists/Item.js | 11 ++-- .../typography/src/views/lists/Item.spec.js | 9 ++- .../src/views/lists/List.example.md | 64 +++++++++---------- packages/typography/src/views/lists/List.js | 35 ++++++---- .../src/views/lists/useListContext.js | 24 +++++++ .../src/views/lists/useListContext.spec.js | 46 +++++++++++++ packages/typography/styleguide.config.js | 3 +- 11 files changed, 153 insertions(+), 57 deletions(-) delete mode 100644 packages/typography/src/views/lists/Item.example.md create mode 100644 packages/typography/src/views/lists/useListContext.js create mode 100644 packages/typography/src/views/lists/useListContext.spec.js diff --git a/packages/typography/src/index.js b/packages/typography/src/index.js index cc67f5181c6..64deb0bf2d4 100644 --- a/packages/typography/src/index.js +++ b/packages/typography/src/index.js @@ -14,4 +14,3 @@ 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'; diff --git a/packages/typography/src/index.spec.js b/packages/typography/src/index.spec.js index b8a4aff7114..f6e8e80a24f 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|useListContext/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/MD.js b/packages/typography/src/views/MD.js index 2da7981341c..aa5a4095224 100644 --- a/packages/typography/src/views/MD.js +++ b/packages/typography/src/views/MD.js @@ -18,7 +18,7 @@ import { retrieveTheme, isRtl } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'typography.md'; -export const StyledMD = styled.div.attrs({ +const StyledMD = styled.div.attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` diff --git a/packages/typography/src/views/lists/Item.example.md b/packages/typography/src/views/lists/Item.example.md deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/packages/typography/src/views/lists/Item.js b/packages/typography/src/views/lists/Item.js index 73034642de1..de266b90e28 100644 --- a/packages/typography/src/views/lists/Item.js +++ b/packages/typography/src/views/lists/Item.js @@ -9,8 +9,9 @@ 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'; +import { StyledOrderedList } from './List'; +import useListContext from './useListContext'; +import MD from '../MD'; const COMPONENT_ID = 'typography.list_item'; @@ -19,7 +20,7 @@ const StyledListItem = styled.li.attrs({ 'data-garden-version': PACKAGE_VERSION })` /* stylelint-disable */ - ${StyledOrderedList} > & { + ${StyledOrderedList} & { margin-${props => (isRtl(props) ? 'right' : 'left')}: -4px; padding-${props => (isRtl(props) ? 'right' : 'left')}: 4px; } @@ -28,7 +29,7 @@ const StyledListItem = styled.li.attrs({ ${props => retrieveTheme(COMPONENT_ID, props)}; `; -const StyledListItemContent = styled(StyledMD)` +const StyledListItemContent = styled(MD)` /* stylelint-disable-next-line declaration-colon-newline-after */ padding: ${props => { switch (props.size) { @@ -44,7 +45,7 @@ const StyledListItemContent = styled(StyledMD)` `; const Item = ({ children, ...props }) => { - const size = useContext(ListContext); + const { size } = useListContext(); return ( diff --git a/packages/typography/src/views/lists/Item.spec.js b/packages/typography/src/views/lists/Item.spec.js index f87d1aa982a..2d74d2c608a 100644 --- a/packages/typography/src/views/lists/Item.spec.js +++ b/packages/typography/src/views/lists/Item.spec.js @@ -7,12 +7,17 @@ import React from 'react'; import { render, renderRtl } from 'garden-test-utils'; +import List from './List'; import Item from './Item'; describe('Item', () => { it('applies default padding', () => { - const { container } = render(); + const { container } = render( + + + + ); - expect(container.querySelector('li').firstChild).toHaveStyleRule('padding', '2px 0'); + expect(container.querySelector('div')).toHaveStyleRule('padding', '2px 0'); }); }); diff --git a/packages/typography/src/views/lists/List.example.md b/packages/typography/src/views/lists/List.example.md index 74fedba2bdd..d2fdad2b100 100644 --- a/packages/typography/src/views/lists/List.example.md +++ b/packages/typography/src/views/lists/List.example.md @@ -5,25 +5,25 @@ style types of `circle`, `disc`, or `square`.

Type disc (default)

- Item - Item - Item + Item + Item + Item

Type circle

- Item - Item - Item + Item + Item + Item

Type square

- Item - Item - Item + Item + Item + Item ``` @@ -35,49 +35,49 @@ types of `decimal`, `decimal-leading-zero`, `lower-alpha`, `upper-alpha`,

Type decimal (default)

- One - Two - Three + One + Two + Three

Type decimal-leading-zero

- One - Two - Three + One + Two + Three

Type lower-alpha

- One - Two - Three + One + Two + Three

Type upper-alpha

- One - Two - Three + One + Two + Three

Type lower-roman

- One - Two - Three + One + Two + Three

Type upper-roman

- One - Two - Three + One + Two + Three ``` @@ -121,13 +121,13 @@ const NestedList = ({ level = 0, ...props }) => { if (level < state.levels) { return ( - {content} - + {content} + {content} - - {content} - {content} + + {content} + {content} ); } else { diff --git a/packages/typography/src/views/lists/List.js b/packages/typography/src/views/lists/List.js index d4c903acf1d..4ba11ed61c6 100644 --- a/packages/typography/src/views/lists/List.js +++ b/packages/typography/src/views/lists/List.js @@ -9,6 +9,7 @@ import React, { createContext } from 'react'; import PropTypes from 'prop-types'; import styled, { css } from 'styled-components'; import { isRtl, retrieveTheme } from '@zendeskgarden/react-theming'; +import Item from './Item'; const COMPONENT_ID = 'typography.list'; @@ -50,15 +51,13 @@ const listCSS = css` `; export const StyledOrderedList = styled.ol.attrs(listAttributes)` + list-style-type: ${props => props.type}; ${listCSS}; - list-style-type: ${props => Object.values(TYPE_ORDERED).indexOf(props.type) !== -1 && props.type}; `; export const StyledUnorderedList = styled.ul.attrs(listAttributes)` + list-style-type: ${props => props.type}; ${listCSS}; - /* stylelint-disable-next-line declaration-colon-newline-after */ - list-style-type: ${props => - Object.values(TYPE_UNORDERED).indexOf(props.type) !== -1 && props.type}; `; export const ListContext = createContext(); @@ -66,15 +65,23 @@ export const ListContext = createContext(); /** * Accepts all `ul`/`ol` props */ -const List = ({ ordered, size, children, ...other }) => ( - - {ordered ? ( - {children} - ) : ( - {children} - )} - -); +const List = ({ ordered, size, type, children, ...other }) => { + const isValidType = Object.values(ordered ? TYPE_ORDERED : TYPE_UNORDERED).indexOf(type) !== -1; + + return ( + + {ordered ? ( + + {children} + + ) : ( + + {children} + + )} + + ); +}; List.propTypes = { children: PropTypes.node, @@ -97,5 +104,7 @@ List.defaultProps = { size: SIZE.MEDIUM }; +List.Item = Item; + /** @component */ export default List; diff --git a/packages/typography/src/views/lists/useListContext.js b/packages/typography/src/views/lists/useListContext.js new file mode 100644 index 00000000000..4e5605119cf --- /dev/null +++ b/packages/typography/src/views/lists/useListContext.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 { ListContext } from './List'; + +/** + * Retrieve List component context + */ +const useListContext = () => { + const listContext = useContext(ListContext); + + if (!listContext) { + throw new Error('This component must be rendered within a `List` component.'); + } + + return listContext; +}; + +export default useListContext; diff --git a/packages/typography/src/views/lists/useListContext.spec.js b/packages/typography/src/views/lists/useListContext.spec.js new file mode 100644 index 00000000000..1d942c1418d --- /dev/null +++ b/packages/typography/src/views/lists/useListContext.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 List from './List'; +import useListContext from './useListContext'; + +describe('useListContext', () => { + const ListContextConsumer = () => { + const context = useListContext(); + + return
{context && 'it works'}
; + }; + + it('throws if called outside of List 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 List component', () => { + const Example = () => ( + + + + ); + + expect(() => { + render(); + }).not.toThrow(); + }); +}); diff --git a/packages/typography/styleguide.config.js b/packages/typography/styleguide.config.js index 060c438fec9..3eda36e8fa4 100644 --- a/packages/typography/styleguide.config.js +++ b/packages/typography/styleguide.config.js @@ -26,8 +26,7 @@ module.exports = { '../../packages/typography/src/views/XXXL.js', '../../packages/typography/src/views/Code.js', '../../packages/typography/src/views/Ellipsis.js', - '../../packages/typography/src/views/lists/List.js', - '../../packages/typography/src/views/lists/Item.js' + '../../packages/typography/src/views/lists/List.js' ] } ] From 5c24cfe339a9f07bf54b5db2f81649aa178a0be5 Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Mon, 15 Jul 2019 15:24:00 -0700 Subject: [PATCH 08/11] Divide out ordered/unordered list components --- packages/typography/src/index.js | 3 +- packages/typography/src/index.spec.js | 2 +- packages/typography/src/views/lists/Item.js | 62 -------- .../src/views/lists/List.example.md | 83 ----------- packages/typography/src/views/lists/List.js | 110 -------------- .../typography/src/views/lists/List.spec.js | 135 ------------------ .../src/views/lists/OrderedList.example.md | 51 +++++++ .../typography/src/views/lists/OrderedList.js | 71 +++++++++ .../src/views/lists/OrderedList.spec.js | 94 ++++++++++++ .../src/views/lists/OrderedListItem.js | 49 +++++++ .../{Item.spec.js => OrderedListItem.spec.js} | 14 +- .../src/views/lists/UnorderedList.example.md | 27 ++++ .../src/views/lists/UnorderedList.js | 61 ++++++++ .../src/views/lists/UnorderedList.spec.js | 76 ++++++++++ .../src/views/lists/UnorderedListItem.js | 44 ++++++ .../src/views/lists/UnorderedListItem.spec.js | 23 +++ packages/typography/src/views/lists/styles.js | 44 ++++++ .../src/views/lists/useListContext.js | 24 ---- .../src/views/lists/useOrderedListContext.js | 24 ++++ ....spec.js => useOrderedListContext.spec.js} | 22 +-- .../views/lists/useUnorderedListContext.js | 24 ++++ .../lists/useUnorderedListContext.spec.js | 46 ++++++ packages/typography/styleguide.config.js | 3 +- 23 files changed, 657 insertions(+), 435 deletions(-) delete mode 100644 packages/typography/src/views/lists/Item.js delete mode 100644 packages/typography/src/views/lists/List.js delete mode 100644 packages/typography/src/views/lists/List.spec.js create mode 100644 packages/typography/src/views/lists/OrderedList.example.md create mode 100644 packages/typography/src/views/lists/OrderedList.js create mode 100644 packages/typography/src/views/lists/OrderedList.spec.js create mode 100644 packages/typography/src/views/lists/OrderedListItem.js rename packages/typography/src/views/lists/{Item.spec.js => OrderedListItem.spec.js} (60%) create mode 100644 packages/typography/src/views/lists/UnorderedList.example.md create mode 100644 packages/typography/src/views/lists/UnorderedList.js create mode 100644 packages/typography/src/views/lists/UnorderedList.spec.js create mode 100644 packages/typography/src/views/lists/UnorderedListItem.js create mode 100644 packages/typography/src/views/lists/UnorderedListItem.spec.js create mode 100644 packages/typography/src/views/lists/styles.js delete mode 100644 packages/typography/src/views/lists/useListContext.js create mode 100644 packages/typography/src/views/lists/useOrderedListContext.js rename packages/typography/src/views/lists/{useListContext.spec.js => useOrderedListContext.spec.js} (55%) create mode 100644 packages/typography/src/views/lists/useUnorderedListContext.js create mode 100644 packages/typography/src/views/lists/useUnorderedListContext.spec.js diff --git a/packages/typography/src/index.js b/packages/typography/src/index.js index 64deb0bf2d4..857d6692930 100644 --- a/packages/typography/src/index.js +++ b/packages/typography/src/index.js @@ -13,4 +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 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 f6e8e80a24f..9d643a325a6 100644 --- a/packages/typography/src/index.spec.js +++ b/packages/typography/src/index.spec.js @@ -14,7 +14,7 @@ describe('Index', () => { cwd: __dirname, fileMapper: files => { return files - .filter(file => !/Item|useListContext/u.test(file)) + .filter(file => !/Item|use(Ordered|Unordered)ListContext|styles/u.test(file)) .map(entry => entry .replace(/\.js$/u, '') diff --git a/packages/typography/src/views/lists/Item.js b/packages/typography/src/views/lists/Item.js deleted file mode 100644 index de266b90e28..00000000000 --- a/packages/typography/src/views/lists/Item.js +++ /dev/null @@ -1,62 +0,0 @@ -/** - * 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 { StyledOrderedList } from './List'; -import useListContext from './useListContext'; -import MD 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(MD)` - /* 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 } = useListContext(); - - return ( - - {children} - - ); -}; - -Item.propTypes = { - children: PropTypes.any -}; - -/** @component */ -export default Item; diff --git a/packages/typography/src/views/lists/List.example.md b/packages/typography/src/views/lists/List.example.md index d2fdad2b100..0284c5d5114 100644 --- a/packages/typography/src/views/lists/List.example.md +++ b/packages/typography/src/views/lists/List.example.md @@ -1,86 +1,3 @@ -The following example shows unordered lists. Unordered lists may receive -style types of `circle`, `disc`, or `square`. - -```jsx -

Type disc (default)

- - - Item - Item - Item - - -

Type circle

- - - Item - Item - Item - - -

Type square

- - - Item - Item - Item - -``` - -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 -

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 - -``` - ### Interactive Demo ```jsx diff --git a/packages/typography/src/views/lists/List.js b/packages/typography/src/views/lists/List.js deleted file mode 100644 index 4ba11ed61c6..00000000000 --- a/packages/typography/src/views/lists/List.js +++ /dev/null @@ -1,110 +0,0 @@ -/** - * 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, { css } from 'styled-components'; -import { isRtl, retrieveTheme } from '@zendeskgarden/react-theming'; -import Item from './Item'; - -const COMPONENT_ID = 'typography.list'; - -const TYPE_ORDERED = { - 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 TYPE_UNORDERED = { - CIRCLE: 'circle', - DISC: 'disc', - SQUARE: 'square' -}; - -const SIZE = { - SMALL: 'small', - MEDIUM: 'medium', - LARGE: 'large' -}; - -const listAttributes = { - 'data-garden-id': COMPONENT_ID, - 'data-garden-version': PACKAGE_VERSION -}; - -const listCSS = css` - direction: ${props => (isRtl(props) ? 'rtl' : 'ltr')}; - margin: 0; - /* stylelint-disable-next-line property-no-unknown */ - margin-${props => (isRtl(props) ? 'right' : 'left')}: 24px; - padding: 0; - list-style-position: outside; - - ${props => retrieveTheme(COMPONENT_ID, props)}; -`; - -export const StyledOrderedList = styled.ol.attrs(listAttributes)` - list-style-type: ${props => props.type}; - ${listCSS}; -`; - -export const StyledUnorderedList = styled.ul.attrs(listAttributes)` - list-style-type: ${props => props.type}; - ${listCSS}; -`; - -export const ListContext = createContext(); - -/** - * Accepts all `ul`/`ol` props - */ -const List = ({ ordered, size, type, children, ...other }) => { - const isValidType = Object.values(ordered ? TYPE_ORDERED : TYPE_UNORDERED).indexOf(type) !== -1; - - return ( - - {ordered ? ( - - {children} - - ) : ( - - {children} - - )} - - ); -}; - -List.propTypes = { - children: PropTypes.node, - ordered: PropTypes.bool, - size: PropTypes.oneOf([SIZE.SMALL, SIZE.MEDIUM, SIZE.LARGE]), - type: PropTypes.oneOf([ - TYPE_UNORDERED.CIRCLE, - TYPE_UNORDERED.DISC, - TYPE_UNORDERED.SQUARE, - TYPE_ORDERED.DECIMAL, - TYPE_ORDERED.DECIMAL_LEADING_ZERO, - TYPE_ORDERED.LOWER_ALPHA, - TYPE_ORDERED.UPPER_ALPHA, - TYPE_ORDERED.LOWER_ROMAN, - TYPE_ORDERED.UPPER_ROMAN - ]) -}; - -List.defaultProps = { - size: SIZE.MEDIUM -}; - -List.Item = Item; - -/** @component */ -export default List; diff --git a/packages/typography/src/views/lists/List.spec.js b/packages/typography/src/views/lists/List.spec.js deleted file mode 100644 index fe424821816..00000000000 --- a/packages/typography/src/views/lists/List.spec.js +++ /dev/null @@ -1,135 +0,0 @@ -/** - * 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 List from './List'; -import Item from './Item'; - -describe('List', () => { - it('applies unordered rendering by default', () => { - const { container } = render(); - - expect(container.querySelector('ul')).not.toBe(null); - }); - - it('applies ordered 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', () => { - describe('unordered', () => { - 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'); - }); - }); - - describe('ordered', () => { - 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'); - }); - }); - - it('falls back to default styling if type is not applicable to an unordered list', () => { - const { container } = render(); - - expect(container.firstChild).toHaveStyleRule('list-style-type', undefined); - }); - - it('falls back to default styling if type is not applicable to an ordered list', () => { - const { container } = render(); - - expect(container.firstChild).toHaveStyleRule('list-style-type', undefined); - }); - }); -}); 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..4af3dea1664 --- /dev/null +++ b/packages/typography/src/views/lists/OrderedList.example.md @@ -0,0 +1,51 @@ +### 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/Item.spec.js b/packages/typography/src/views/lists/OrderedListItem.spec.js similarity index 60% rename from packages/typography/src/views/lists/Item.spec.js rename to packages/typography/src/views/lists/OrderedListItem.spec.js index 2d74d2c608a..feafd6456b1 100644 --- a/packages/typography/src/views/lists/Item.spec.js +++ b/packages/typography/src/views/lists/OrderedListItem.spec.js @@ -6,16 +6,16 @@ */ import React from 'react'; -import { render, renderRtl } from 'garden-test-utils'; -import List from './List'; -import Item from './Item'; +import { render } from 'garden-test-utils'; +import OrderedList from './OrderedList'; +import OrderedListItem from './OrderedListItem'; -describe('Item', () => { +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..6e7cf0faaff --- /dev/null +++ b/packages/typography/src/views/lists/UnorderedList.example.md @@ -0,0 +1,27 @@ +### 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..8bf628a4c3f --- /dev/null +++ b/packages/typography/src/views/lists/UnorderedListItem.spec.js @@ -0,0 +1,23 @@ +/** + * 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 UnorderedListItem from './UnorderedListItem'; + +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/useListContext.js b/packages/typography/src/views/lists/useListContext.js deleted file mode 100644 index 4e5605119cf..00000000000 --- a/packages/typography/src/views/lists/useListContext.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * 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 { ListContext } from './List'; - -/** - * Retrieve List component context - */ -const useListContext = () => { - const listContext = useContext(ListContext); - - if (!listContext) { - throw new Error('This component must be rendered within a `List` component.'); - } - - return listContext; -}; - -export default useListContext; 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/useListContext.spec.js b/packages/typography/src/views/lists/useOrderedListContext.spec.js similarity index 55% rename from packages/typography/src/views/lists/useListContext.spec.js rename to packages/typography/src/views/lists/useOrderedListContext.spec.js index 1d942c1418d..3b93f0d8ec5 100644 --- a/packages/typography/src/views/lists/useListContext.spec.js +++ b/packages/typography/src/views/lists/useOrderedListContext.spec.js @@ -7,23 +7,23 @@ import React from 'react'; import { render } from 'garden-test-utils'; -import List from './List'; -import useListContext from './useListContext'; +import OrderedList from './OrderedList'; +import useOrderedListContext from './useOrderedListContext'; -describe('useListContext', () => { - const ListContextConsumer = () => { - const context = useListContext(); +describe('useOrderedListContext', () => { + const OrderedListContextConsumer = () => { + const context = useOrderedListContext(); return
      {context && 'it works'}
      ; }; - it('throws if called outside of List component', () => { + it('throws if called outside of OrderedList component', () => { /* eslint-disable no-console */ const originalError = console.error; console.error = jest.fn(); - const Example = () => ; + const Example = () => ; expect(() => { render(); @@ -32,11 +32,11 @@ describe('useListContext', () => { console.error = originalError; }); - it('does not throw if called within List component', () => { + it('does not throw if called within OrderedList component', () => { const Example = () => ( - - - + + + ); expect(() => { 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 3eda36e8fa4..98ea41b9f05 100644 --- a/packages/typography/styleguide.config.js +++ b/packages/typography/styleguide.config.js @@ -26,7 +26,8 @@ module.exports = { '../../packages/typography/src/views/XXXL.js', '../../packages/typography/src/views/Code.js', '../../packages/typography/src/views/Ellipsis.js', - '../../packages/typography/src/views/lists/List.js' + '../../packages/typography/src/views/lists/OrderedList.js', + '../../packages/typography/src/views/lists/UnorderedList.js' ] } ] From 9c1a4f3281b0ef42953660446dbf430d291f16a9 Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Mon, 15 Jul 2019 16:42:28 -0700 Subject: [PATCH 09/11] Update lists demo --- .../List.example.md => examples/list.md} | 37 ++++++++++++------- packages/typography/styleguide.config.js | 9 +++++ 2 files changed, 32 insertions(+), 14 deletions(-) rename packages/typography/{src/views/lists/List.example.md => examples/list.md} (62%) diff --git a/packages/typography/src/views/lists/List.example.md b/packages/typography/examples/list.md similarity index 62% rename from packages/typography/src/views/lists/List.example.md rename to packages/typography/examples/list.md index 0284c5d5114..56db9649153 100644 --- a/packages/typography/src/views/lists/List.example.md +++ b/packages/typography/examples/list.md @@ -1,5 +1,3 @@ -### Interactive Demo - ```jsx const { Well } = require('@zendeskgarden/react-notifications/src'); const { Checkbox, Field, Input, Label } = require('@zendeskgarden/react-forms/src'); @@ -17,14 +15,24 @@ initialState = { length: 1, levels: 1, ordered: false, - size: List.defaultProps.size, + 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( - ' ' -); - +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; @@ -33,18 +41,19 @@ const getType = (ordered, level) => { }; const NestedList = ({ level = 0, ...props }) => { - const content = text.slice(0, state.length).join(' '); + const content = text.map(string => string.slice(0, state.length).join(' ')); + const List = state.ordered ? OrderedList : UnorderedList; if (level < state.levels) { return ( - - {content} + + {content[0]} - {content} + {content[1]} - {content} - {content} + {content[2]} + {content[3]} ); } else { @@ -74,7 +83,7 @@ const NestedList = ({ level = 0, ...props }) => { Length setState({ length: event.target.value })} diff --git a/packages/typography/styleguide.config.js b/packages/typography/styleguide.config.js index 98ea41b9f05..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: [ From 691b32b2e576c5bea425af93cc7b7778571b33f4 Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Mon, 15 Jul 2019 17:00:52 -0700 Subject: [PATCH 10/11] Add "sizes" to lists demo --- .../src/views/lists/OrderedList.example.md | 28 +++++++++++++++++++ .../src/views/lists/UnorderedList.example.md | 28 +++++++++++++++++++ 2 files changed, 56 insertions(+) diff --git a/packages/typography/src/views/lists/OrderedList.example.md b/packages/typography/src/views/lists/OrderedList.example.md index 4af3dea1664..35316a3c32f 100644 --- a/packages/typography/src/views/lists/OrderedList.example.md +++ b/packages/typography/src/views/lists/OrderedList.example.md @@ -1,3 +1,31 @@ +### Sizes + +```jsx +

      Size small

      + + + One + Two + Three + + +

      Size medium (default)

      + + + One + Two + Three + + +

      Size large

      + + + One + Two + Three + +``` + ### Types ```jsx diff --git a/packages/typography/src/views/lists/UnorderedList.example.md b/packages/typography/src/views/lists/UnorderedList.example.md index 6e7cf0faaff..d8c8cce3f8f 100644 --- a/packages/typography/src/views/lists/UnorderedList.example.md +++ b/packages/typography/src/views/lists/UnorderedList.example.md @@ -1,3 +1,31 @@ +### Sizes + +```jsx +

      Size small

      + + + One + Two + Three + + +

      Size medium (default)

      + + + One + Two + Three + + +

      Size large

      + + + One + Two + Three + +``` + ### Types ```jsx From dcbd020949e2d0f8102da2bebc79087edc21055b Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Tue, 16 Jul 2019 10:28:46 -0700 Subject: [PATCH 11/11] Test using static notation --- packages/typography/src/views/lists/OrderedListItem.spec.js | 3 +-- packages/typography/src/views/lists/UnorderedListItem.spec.js | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/typography/src/views/lists/OrderedListItem.spec.js b/packages/typography/src/views/lists/OrderedListItem.spec.js index feafd6456b1..cae617ac82e 100644 --- a/packages/typography/src/views/lists/OrderedListItem.spec.js +++ b/packages/typography/src/views/lists/OrderedListItem.spec.js @@ -8,13 +8,12 @@ import React from 'react'; import { render } from 'garden-test-utils'; import OrderedList from './OrderedList'; -import OrderedListItem from './OrderedListItem'; describe('OrderedListItem', () => { it('applies default padding', () => { const { container } = render( - + ); diff --git a/packages/typography/src/views/lists/UnorderedListItem.spec.js b/packages/typography/src/views/lists/UnorderedListItem.spec.js index 8bf628a4c3f..04faca3d0f1 100644 --- a/packages/typography/src/views/lists/UnorderedListItem.spec.js +++ b/packages/typography/src/views/lists/UnorderedListItem.spec.js @@ -8,13 +8,12 @@ import React from 'react'; import { render } from 'garden-test-utils'; import UnorderedList from './UnorderedList'; -import UnorderedListItem from './UnorderedListItem'; describe('UnorderedListItem', () => { it('applies default padding', () => { const { container } = render( - + );