diff --git a/CHANGELOG.md b/CHANGELOG.md index b40575c5a6..47bf7c6c2d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## v1.1.0 + +* Added className support for ffe-check-list + ## v1.0.0 * Initial release diff --git a/README.md b/README.md index bb1dd5ada4..6360ee6e78 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,14 @@ To render a list, use `
  • ` as children: ``` +`bg-sand` is a modifier of `CheckList` and can be used by passing the correct className: + +``` + + ... + +``` + To render a description list (i.e. `DescriptionListFlex` or `DescriptionListMultiCol`) make sure both `dt` and `dd` are present as children. ``` diff --git a/examples/lists.js b/examples/lists.js index 984cc5e09c..3bf5294d0b 100644 --- a/examples/lists.js +++ b/examples/lists.js @@ -14,7 +14,7 @@ document.body.appendChild(listDOM); render(
    -

    BulletList

    +

    Bullet list

  • List item
  • Another list item
  • @@ -23,7 +23,7 @@ render(
    -

    CheckList

    +

    Check list

  • List item
  • Another list item
  • @@ -32,7 +32,16 @@ render(
    -

    NumberedList

    +

    Check list (bg-sand)

    + +
  • List item
  • +
  • Another list item
  • +
  • Yet another list item
  • +
    + +
    + +

    Numbered list

  • List item
  • Another list item
  • @@ -41,7 +50,7 @@ render(
    -

    StylizedNumberedList

    +

    Stylized numbered list

  • List item
  • Another list item
  • @@ -50,7 +59,7 @@ render(
    -

    DescriptionListFlex

    +

    Description list (Flex)

    Term
    Description
    @@ -64,7 +73,7 @@ render(
    -

    DescriptionListMultiCol

    +

    Description list (Multicolumn)

    Term
    Description
    diff --git a/package.json b/package.json index 5132c44c22..52b547e4f0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ffe-lists-react", - "version": "1.0.0", + "version": "1.1.0", "description": "React implementation of ffe-lists", "main": "lib/index.js", "scripts": { @@ -54,7 +54,7 @@ }, "peerDependencies": { "ffe-core": "^8.1.2", - "ffe-lists": "^2.2.0" + "ffe-lists": "^2.3.0" }, "dependencies": { "classnames": "^2.2.5", diff --git a/src/CheckList.js b/src/CheckList.js index 30d2d8d96c..73ce8ff93d 100644 --- a/src/CheckList.js +++ b/src/CheckList.js @@ -1,11 +1,12 @@ import React from 'react'; -export default function CheckList({ children }) { - return
      +export default function CheckList({ children, className = '' }) { + return
        {children}
      ; } CheckList.propTypes = { children: React.PropTypes.array.isRequired, + className: React.PropTypes.string, }; \ No newline at end of file diff --git a/src/CheckList.test.js b/src/CheckList.test.js index cf588c46ec..f3a78c6625 100644 --- a/src/CheckList.test.js +++ b/src/CheckList.test.js @@ -15,4 +15,9 @@ describe('', () => { assert.ok(wrapper.find('li').at(0).text(), 'First'); assert.ok(wrapper.find('li').at(1).text(), 'Second'); }); + it('should render a
        with class ffe-check-list--bg-sand', () => { + const wrapper = shallow(
      • First
      • Second
      • ); + + assert.ok(wrapper.find('ul').hasClass('ffe-check-list--bg-sand')); + }); });