Merge pull request #1 in FFE/ffe-lists-react from master_FFE-65-ffe-l…

…ists-react to master

* commit '4d0771bed8b51babcf2769eb5e92647e2f251050':
  Init commit

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.js]
+indent_style = space
+indent_size = 2
+
+[*.{json,yml}]
+indent_style = space
+indent_size = 2

.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "ffe",
+  "env": {
+    "mocha": true
+  }
+}

.gitattributes

@@ -0,0 +1,2 @@
+* text=auto
+*.js text eol=lf

.gitignore

@@ -38,3 +38,6 @@ node_modules
 
 # Ignore IntelliJ project files
 .idea/
+
+# Swap files
+*.swp

.npmrc

@@ -0,0 +1 @@
+git-tag-version=false

CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## v1.0.0
+
+* Initial release

README.md

@@ -1 +1,42 @@
-# ffe-lists-react
+# ffe-lists-react
+
+## Install
+
+```
+$ npm install --save ffe-core ffe-lists ffe-lists-react
+```
+
+`ffe-lists-react` has peer dependencies on `ffe-core` and `ffe-lists`.
+
+## Usage
+
+```
+import BulletList from 'ffe-lists-react';
+```
+
+Supported list-types are `BulletList`, `CheckList`, `NumberList`, `StylizedNumberList`, `DescriptionListFlex` and `DescriptionListMultiCol`.
+
+To render a list, use `<li>` as children:
+
+```
+<BulletList>
+  <li>List element</li>
+  <li>Another list element</li>
+</BulletList>
+```
+
+To render a description list (i.e. `DescriptionListFlex` or `DescriptionListMultiCol`) make sure both `dt` and `dd` are present as children.
+
+```
+<DescriptionListFlex>
+  <dt>Term</dt>
+  <dd>Description</dd>
+
+  <dt>Another term</dt>
+  <dd>Another description</dd>
+</DescriptionListFlex>
+```
+
+## Examples
+
+To view live example lists, run `npm start`

build.sh

@@ -0,0 +1,4 @@
+#!/bin/bash -e
+
+npm install
+npm test

examples/example.less

@@ -0,0 +1,19 @@
+@import "../node_modules/ffe-core/less/ffe.less";
+@import "../node_modules/ffe-lists/less/lists.less";
+@font-url: "../node_modules/ffe-core/fonts";
+
+body {
+  font-family: "MuseoSansRounded-500", arial, sans-serif;
+}
+
+section .ffe-body-text {
+	max-width: 800px;
+	margin: 0 auto;
+}
+
+ul,
+ol,
+dl,
+h2 {
+	margin: 30px 0!important;
+}

examples/lists.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { render } from 'react-dom';
+import BulletList from '../src/BulletList';
+import CheckList from '../src/CheckList';
+import NumberedList from '../src/NumberedList';
+import StylizedNumberedList from '../src/StylizedNumberedList';
+import DescriptionListFlex from '../src/DescriptionListFlex';
+import DescriptionListMultiCol from '../src/DescriptionListMultiCol';
+
+require('./example.less');
+
+const listDOM = document.createElement('section');
+document.body.appendChild(listDOM);
+
+render(
+	<div className="ffe-body-text">
+		<h2 className="ffe-h4">BulletList</h2>
+		<BulletList>
+			<li>List item</li>
+			<li>Another list item</li>
+			<li>Yet another list item</li>
+		</BulletList>
+
+		<hr className="ffe-divider-line"/>
+
+		<h2 className="ffe-h4">CheckList</h2>
+		<CheckList>
+			<li>List item</li>
+			<li>Another list item</li>
+			<li>Yet another list item</li>
+		</CheckList>
+
+		<hr className="ffe-divider-line"/>
+
+		<h2 className="ffe-h4">NumberedList</h2>
+		<NumberedList>
+			<li>List item</li>
+			<li>Another list item</li>
+			<li>Yet another list item</li>
+		</NumberedList>
+
+		<hr className="ffe-divider-line"/>
+
+		<h2 className="ffe-h4">StylizedNumberedList</h2>
+		<StylizedNumberedList>
+			<li>List item</li>
+			<li>Another list item</li>
+			<li>Yet another list item</li>
+		</StylizedNumberedList>
+
+		<hr className="ffe-divider-line"/>
+
+		<h2 className="ffe-h4">DescriptionListFlex</h2>
+		<DescriptionListFlex>
+			<dt>Term</dt>
+			<dd>Description</dd>
+
+			<dt>Another term</dt>
+			<dd>Another description</dd>
+
+			<dt>Yet another term</dt>
+			<dd>Yet another description</dd>
+		</DescriptionListFlex>
+
+		<hr className="ffe-divider-line"/>
+
+		<h2 className="ffe-h4">DescriptionListMultiCol</h2>
+		<DescriptionListMultiCol>
+			<dt>Term</dt>
+			<dd>Description</dd>
+			<dt>Another term</dt>
+			<dd>Another description</dd>
+			<dt>Yet another term</dt>
+			<dd>Yet another description</dd>
+		</DescriptionListMultiCol>
+	</div>
+	, listDOM);

flow.sh

@@ -0,0 +1,42 @@
+#!/bin/bash
+
+# Makes functions inherit trap ERR
+set -E
+
+
+trap 'executionFailed ${LINENO}' ERR
+
+function main() {
+    ./build.sh
+
+    if should_publish; then
+        npm run has-published -s || npm publish
+        bob ci job build --jobname ffe-design-system_build_deploy
+    fi
+}
+
+function should_publish() {
+    [[ $GIT_BRANCH =~ ^(origin/)?master$ ]]
+}
+
+# Fail the build if someone tries to send it parameters since script doesn't handle params at the moment.
+if [ $# -ne 0 ] ; then
+    echo "Failed the build. flow.sh does not support input parameters. Input parameters were '$@'"
+    exit 1;
+fi
+
+function executionFailed() {
+   # Called when some command fail execution
+   local self=$(basename "$0")
+   local parent_lineno="$1"
+   local message="$2"
+   local resultCode="${3:-1}"
+   if [[ -n "$message" ]]; then
+       echo "${self}: Error on or near line ${parent_lineno}: ${message}; exiting with status ${resultCode}"
+   else
+       echo "${self}: Error on or near line ${parent_lineno}; exiting with status ${resultCode}"
+   fi
+   exit "${resultCode}"
+}
+
+main

package.json

@@ -0,0 +1,64 @@
+{
+  "name": "ffe-lists-react",
+  "version": "1.0.0",
+  "description": "React implementation of ffe-lists",
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "babel -d lib/. --ignore=*.test.js src/.",
+    "watch": "onchange 'src/**/*.js' -- npm run build",
+    "pretest": "eslint src/.",
+    "test": "mocha --require babel-register 'src/**/*.test.js'",
+    "posttest": "nsp check",
+    "start": "budo examples/lists.js --open --live --title \"FFE Lists React\" -- -t [ babelify --presets [ es2015 react ] ] -t node-lessify",
+    "test:watch": "npm test -- -w",
+    "prepublish": "npm run build",
+    "has-published": "npm show . versions -s | grep -q ${npm_package_version}",
+    "postpublish": "git tag ${npm_package_version} && git push --tags"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.4.5",
+    "babel-eslint": "^6.0.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-register": "^6.4.3",
+    "babelify": "^7.2.0",
+    "budo": "^9.2.1",
+    "chai": "^3.5.0",
+    "enzyme": "^2.3.0",
+    "eslint": "^2.8.0",
+    "eslint-config-ffe": "^5.0.0",
+    "eslint-plugin-import": "^1.5.0",
+    "eslint-plugin-jsx-a11y": "^1.0.2",
+    "eslint-plugin-react": "^6.0.0",
+    "ffe-core": "^8.1.2",
+    "mocha": "^2.5.3",
+    "node-lessify": "^0.1.4",
+    "nsp": "^2.2.0",
+    "onchange": "^2.3.0",
+    "react": "^15.0.1",
+    "react-addons-test-utils": "^15.1.0",
+    "react-dom": "^15.0.1"
+  },
+  "publishConfig": {
+    "registry": "***REMOVED***"
+  },
+  "files": [
+    "lib",
+    "*.js"
+  ],
+  "babel": {
+    "presets": [
+      "es2015",
+      "react"
+    ]
+  },
+  "peerDependencies": {
+    "ffe-core": "^8.1.2",
+    "ffe-lists": "^2.2.0"
+  },
+  "dependencies": {
+    "classnames": "^2.2.5",
+    "nfe-hash": "^1.1.0",
+    "react-addons-create-fragment": "15.2.0"
+  }
+}

src/BulletList.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default function BulletList({ children }) {
+    return  <ul className="ffe-bullet-list">
+                {children}
+            </ul>;
+}
+
+BulletList.propTypes = {
+    children: React.PropTypes.array.isRequired,
+};

src/BulletList.test.js

@@ -0,0 +1,20 @@
+/* eslint-disable no-unused-expressions */
+
+import React from 'react';
+import { assert } from 'chai';
+import { shallow } from 'enzyme';
+import BulletList from './BulletList';
+
+describe('<BulletList>', () => {
+  it('should render a <ul> with class ffe-bullet-list', () => {
+    const wrapper = shallow(<BulletList><li>First</li><li>Second</li></BulletList>);
+
+    assert.ok(wrapper.find('ul').hasClass('ffe-bullet-list'));
+  });
+  it('should render two list elements', () => {
+    const wrapper = shallow(<BulletList><li>First</li><li>Second</li></BulletList>);
+
+    assert.ok(wrapper.find('li').at(0).text(), 'First');
+    assert.ok(wrapper.find('li').at(1).text(), 'Second');
+  });
+});

src/CheckList.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default function CheckList({ children }) {
+    return  <ul className="ffe-check-list">
+                {children}
+            </ul>;
+}
+
+CheckList.propTypes = {
+    children: React.PropTypes.array.isRequired,
+};

src/CheckList.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { assert } from 'chai';
+import { shallow } from 'enzyme';
+import CheckList from './CheckList';
+
+describe('<CheckList>', () => {
+  it('should render a <ul> with class ffe-check-list', () => {
+    const wrapper = shallow(<CheckList><li>First</li><li>Second</li></CheckList>);
+
+    assert.ok(wrapper.find('ul').hasClass('ffe-check-list'));
+  });
+  it('should render two list elements', () => {
+    const wrapper = shallow(<CheckList><li>First</li><li>Second</li></CheckList>);
+
+    assert.ok(wrapper.find('li').at(0).text(), 'First');
+    assert.ok(wrapper.find('li').at(1).text(), 'Second');
+  });
+});

src/DescriptionListFlex.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default function DescriptionListFlex({ children }) {
+    return  <dl className="ffe-description-list ffe-description-list--flex">
+                {children}
+            </dl>;
+}
+
+DescriptionListFlex.propTypes = {
+    children: React.PropTypes.array.isRequired,
+};