Version 0.8.0 (#32)

* Update nodejs versions in Travis configuration (to latest, 6, 5 and 4)

* Fix ResponsiveNavigation resize handler leak (#27)

* Fix ResponsiveNavigation resize event leak

* Use bind instead of class properties

* Add accordion component (#30)

* Add accordion component

* Add missing isActive prop on AccordionContent

* Add tests for isActive prop on AccordionContent

* Add yarn.lock

* Change to use prop-types library

* Fix warning in progress bar test

* Fix linting errors

* Add precommit hook

.travis.yml

@@ -4,12 +4,10 @@ language: node_js
 sudo: false
 
 node_js:
+  - "node"
+  - "6"
   - "5"
-  - "5.1"
   - "4"
-  - "4.2"
-  - "4.1"
-  - "4.0"
 
 script:
   - npm run lint

README.md

@@ -18,27 +18,28 @@
 
 ## Motivation
 
-[Foundation](http://foundation.zurb.com) is both feature-rich and easy to customize. 
+[Foundation](http://foundation.zurb.com) is both feature-rich and easy to customize.
 [React](https://facebook.github.io/react/) on the other hand is awesome because of its simplicity.
 It's even more awesome when combined with
 [Redux](http://redux.js.org/) and [Immutable](https://facebook.github.io/immutable-js/).
 
 After building quite a few applications with React and Foundation we noticed that we were writing the
-same components over and over again. First we tried to find a library that would do the job, 
-but there was none that met our needs. So we collected our notes, started coding and here's the result. 
+same components over and over again. First we tried to find a library that would do the job,
+but there was none that met our needs. So we collected our notes, started coding and here's the result.
 
 We hope you enjoy it as much as we do!
 
 ## What's in the box?
 
 The goal is to wrap every part of Foundation into re-usable React components following the framework's
-best practices. The primary focus is ease-of-use and extensibility. We use pure render components, 
+best practices. The primary focus is ease-of-use and extensibility. We use pure render components,
 also known as stateless components, whenever possible to keep the memory usage to a minimum. Stateful
 components are only used for larger components, such as `ResponsiveNavigation`, where state is actually necessary.
 All components are unit-tested to ensure their quality.
 
 Here is a list of the available components:
 
+- [Accordion](src/components/accordion.js)
 - [Badge](src/components/badge.js)
 - [Breadcrumbs](src/components/breadcrumbs.js)
 - [Button](src/components/button.js)

package.json

@@ -15,10 +15,11 @@
   "scripts": {
     "compile": "babel --loose es6.modules -d lib/ src/",
     "lint": "eslint src test",
-    "prepublish": "npm run lint && npm run compile",
+    "precommit": "yarn lint && yarn test",
+    "prepublish": "yarn lint && yarn compile",
     "test": "NODE_ENV=test mocha --compilers js:babel-core/register --require test/index.js --recursive",
     "test:cover": "istanbul cover _mocha -- --compilers js:babel-core/register --require test/index.js --recursive",
-    "test:watch": "npm test -- --watch --reporter min"
+    "test:watch": "yarn test -- --watch --reporter min"
   },
   "repository": {
     "type": "git",
@@ -49,7 +50,8 @@
   },
   "homepage": "https://github.com/nordsoftware/react-foundation#readme",
   "dependencies": {
-    "classnames": "^2.2.3"
+    "classnames": "^2.2.3",
+    "prop-types": "^15.5.10"
   },
   "devDependencies": {
     "babel-cli": "^6.6.5",
@@ -70,6 +72,7 @@
     "estraverse-fb": "^1.3.1",
     "expect": "^1.15.1",
     "foundation-sites": "^6.2.0",
+    "husky": "^0.13.4",
     "istanbul": "^1.0.0-alpha.2",
     "jsdom": "^8.1.0",
     "mocha": "^2.4.5",

src/components/accordion.js

@@ -0,0 +1,100 @@
+import React, { PropTypes } from 'react';
+import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
+
+/**
+ * Accordion component.
+ * http://foundation.zurb.com/sites/docs/accordion.html
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export const Accordion = (props) => {
+  const className = createClassName(
+    props.noDefaultClassName ? null : 'accordion',
+    props.className,
+    generalClassNames(props)
+  );
+
+  const passProps = removeProps(props, objectKeys(Accordion.propTypes));
+
+  return <ul {...passProps} className={className}>{props.children || []}</ul>;
+};
+
+Accordion.propTypes = {
+  ...GeneralPropTypes,
+  children: PropTypes.any,
+};
+
+/**
+ * Accordion item component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export const AccordionItem = (props) => {
+  const className = createClassName(
+    props.noDefaultClassName ? null : 'accordion-item',
+    props.className,
+    {
+      'is-active': props.isActive
+    },
+    generalClassNames(props)
+  );
+
+  const passProps = removeProps(props, objectKeys(AccordionItem.propTypes));
+
+  return <li {...passProps} className={className}/>;
+};
+
+AccordionItem.propTypes = {
+  ...GeneralPropTypes,
+  isActive: PropTypes.bool
+};
+
+/**
+ * Accordion panel container component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export const AccordionContent = (props) => {
+  const className = createClassName(
+    props.noDefaultClassName ? null : 'accordion-content',
+    props.className,
+    {
+      'is-active': props.isActive
+    },
+    generalClassNames(props)
+  );
+
+  const passProps = removeProps(props, objectKeys(AccordionContent.propTypes));
+
+  return <div {...passProps} className={className}/>;
+};
+
+AccordionContent.propTypes = {
+  ...GeneralPropTypes,
+  isActive: PropTypes.bool
+};
+
+/**
+ * Accordion panel title component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export const AccordionTitle = (props) => {
+  const className = createClassName(
+    props.noDefaultClassName ? null : 'accordion-title',
+    props.className,
+    generalClassNames(props)
+  );
+
+  const passProps = removeProps(props, objectKeys(AccordionContent.propTypes));
+
+  return <a {...passProps} className={className}/>;
+};
+
+AccordionTitle.propTypes = {
+  ...GeneralPropTypes,
+};

src/components/badge.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { BadgeColors } from '../enums';
 import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
 

src/components/breadcrumbs.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
 
 /**

src/components/button-group.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Breakpoints, ButtonGroupColors, ButtonGroupSizes } from '../enums';
 import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
 

src/components/button.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { ButtonSizes, ButtonColors } from '../enums';
 import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
 

src/components/callout.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { CalloutColors, CalloutSizes } from '../enums';
 import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
 

src/components/flex-video.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
 
 /**

src/components/grid.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { HorizontalAlignments, VerticalAlignments } from '../enums';
 import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, isDefined } from '../utils';
 

src/components/icon.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
 
 /**

src/components/label.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { LabelColors } from '../enums';
 import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
 

src/components/media-object.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { HorizontalAlignments } from '../enums';
 import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
 

src/components/menu.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { MenuAlignments } from '../enums';
 import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
 

src/components/pagination.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
 
 /**

src/components/progress-bar.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { ProgressColors } from '../enums';
 import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
 

src/components/responsive.js

@@ -17,18 +17,21 @@ export class ResponsiveNavigation extends Component {
       isTitleBarVisible: true,
       isTopBarVisible: false
     };
+
+    this.update = this.update.bind(this);
+    this.toggle = this.toggle.bind(this);
   }
 
   componentWillMount() {
     this.update();
   }
 
   componentDidMount() {
-    window.addEventListener('resize', this.update.bind(this));
+    window.addEventListener('resize', this.update);
   }
 
   componentWillUnmount() {
-    window.removeEventListener('resize', this.update.bind(this));
+    window.removeEventListener('resize', this.update);
   }
 
   /**
@@ -71,7 +74,7 @@ export class ResponsiveNavigation extends Component {
     return (
       <div {...removeProps(this.props, ['breakpoint'])}>
         <TitleBar {...titleBarProps} isHidden={!isTitleBarVisible}>
-          <MenuIcon {...menuIconProps} onClick={this.toggle.bind(this)}/>
+          <MenuIcon {...menuIconProps} onClick={this.toggle}/>
           <TitleBarTitle {...titleBarTitleProps}/>
         </TitleBar>
         <TopBar {...topBarProps} isHidden={!isTopBarVisible}>

src/components/reveal.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
 
 /**

src/components/switch.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { SwitchSizes, SwitchInputTypes } from '../enums';
 import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectValues } from '../utils';
 

src/components/tabs.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
 
 /**

src/index.js

@@ -1,3 +1,4 @@
+export { Accordion, AccordionItem, AccordionTitle, AccordionContent } from './components/accordion';
 export { Badge } from './components/badge';
 export { Breadcrumbs, BreadcrumbItem } from './components/breadcrumbs';
 export { Button, Link } from './components/button';

src/utils.js

@@ -1,4 +1,4 @@
-import { PropTypes } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Breakpoints, FloatTypes } from './enums';