diff --git a/src/components/Lists/OrderedList/OrderedItem.jsx b/src/components/Lists/OrderedList/OrderedItem.jsx index a046733f06..58ab5995ab 100644 --- a/src/components/Lists/OrderedList/OrderedItem.jsx +++ b/src/components/Lists/OrderedList/OrderedItem.jsx @@ -2,26 +2,32 @@ import React from 'react' import PropTypes from 'prop-types' import safeRest from '../../../safeRest' -import Text from '../../Typography/Text/Text' + +import styles from '../../Typography/Text/Text.modules.scss' const OrderedItem = ({ size, children, ...rest }) => { return ( -
  • - - {children} - +
  • + {children}
  • ) } OrderedItem.propTypes = { - size: PropTypes.string, + size: PropTypes.oneOf([ + 'medium', + 'large' + ]), /** * The content */ children: PropTypes.node.isRequired } +OrderedItem.defaultProps = { + size: undefined +} + OrderedItem.displayName = 'OrderedList.Item' export default OrderedItem diff --git a/src/components/Lists/OrderedList/OrderedList.jsx b/src/components/Lists/OrderedList/OrderedList.jsx index da039016d9..dfcdf5cce5 100644 --- a/src/components/Lists/OrderedList/OrderedList.jsx +++ b/src/components/Lists/OrderedList/OrderedList.jsx @@ -2,7 +2,6 @@ import React from 'react' import PropTypes from 'prop-types' import safeRest from '../../../safeRest' -import Text from '../../Typography/Text/Text' import OrderedItem from './OrderedItem' import styles from './OrderedList.modules.scss' @@ -20,11 +19,9 @@ const OrderedList = ({ listStyle, size, children, ...rest }) => { const items = React.Children.map(children, sizeChildren) return ( - -
      - {items} -
    -
    +
      + {items} +
    ) } diff --git a/src/components/Lists/OrderedList/OrderedList.md b/src/components/Lists/OrderedList/OrderedList.md index f42eaf45ee..f26b43e593 100644 --- a/src/components/Lists/OrderedList/OrderedList.md +++ b/src/components/Lists/OrderedList/OrderedList.md @@ -1,18 +1,6 @@ ``` - - Nunc condimentum non est sed rutrum. Donec porta torto mattis velit fermentum iaculis - - Lorem ipsum dolor sit amet, consectetur adipiscing elit - - Quisque tincidunt dolor - Nunc condimentum non est sed rutrum. Donec porta tortor mattis velit - - - - Non est sed rutrum - - - Donec porta tortor mattis velit - - + + Quisque tincidunt dolor + Nunc condimentum non est sed rutrum. Donec porta tortor mattis velit + ``` diff --git a/src/components/Lists/OrderedList/OrderedList.modules.scss b/src/components/Lists/OrderedList/OrderedList.modules.scss index bd1d763a7a..040453ea5f 100644 --- a/src/components/Lists/OrderedList/OrderedList.modules.scss +++ b/src/components/Lists/OrderedList/OrderedList.modules.scss @@ -8,13 +8,13 @@ list-style-type: decimal; } -.upper-alpha { +.upperAlpha { composes: base; list-style-type: upper-alpha; } -.lower-alpha { +.lowerAlpha { composes: base; list-style-type: lower-alpha; diff --git a/src/components/Lists/OrderedList/__tests__/OrderedList.spec.jsx b/src/components/Lists/OrderedList/__tests__/OrderedList.spec.jsx index 8a22de7544..f7cc924ebb 100644 --- a/src/components/Lists/OrderedList/__tests__/OrderedList.spec.jsx +++ b/src/components/Lists/OrderedList/__tests__/OrderedList.spec.jsx @@ -2,7 +2,6 @@ import React from 'react' import { shallow, render } from 'enzyme' import toJson from 'enzyme-to-json' -import Text from '../../../Typography/Text/Text' import OrderedList from '../OrderedList' describe('', () => { @@ -35,14 +34,13 @@ describe('', () => { it('OrderList renders an HTML ol tag', () => { const orderedList = doShallowList() - expect(orderedList).toHaveTagName('Text') + expect(orderedList).toHaveTagName('ol') }) it('OrderList.Item renders an HTML li tag', () => { const orderedListItem = doShallowItem() expect(orderedListItem).toHaveTagName('li') - expect(orderedListItem).toContainReact(Some content) }) it('can have a list style', () => { diff --git a/src/components/Lists/OrderedList/__tests__/__snapshots__/OrderedList.spec.jsx.snap b/src/components/Lists/OrderedList/__tests__/__snapshots__/OrderedList.spec.jsx.snap index 909656c685..e75b6ab349 100644 --- a/src/components/Lists/OrderedList/__tests__/__snapshots__/OrderedList.spec.jsx.snap +++ b/src/components/Lists/OrderedList/__tests__/__snapshots__/OrderedList.spec.jsx.snap @@ -1,40 +1,20 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` renders 1`] = ` - -
      -
    1. - - Lorem ipsum - -
    2. -
    3. - - Dolor sit amet - -
    4. -
    -
    + Lorem ipsum + +
  • + Dolor sit amet +
  • + `; diff --git a/src/components/Lists/UnorderedList/UnorderedItem.jsx b/src/components/Lists/UnorderedList/UnorderedItem.jsx index 3fccfe9eb3..d410679f90 100644 --- a/src/components/Lists/UnorderedList/UnorderedItem.jsx +++ b/src/components/Lists/UnorderedList/UnorderedItem.jsx @@ -30,6 +30,11 @@ UnorderedItem.propTypes = { children: PropTypes.node.isRequired } +UnorderedItem.defaultProps = { + listStyle: 'circle', + size: undefined +} + UnorderedItem.displayName = 'UnorderedList.Item' export default UnorderedItem