Merge branch 'release/0.7.0'

.styleci.yml

@@ -0,0 +1 @@
+preset: psr2

README.md

@@ -3,9 +3,12 @@
 [![Build Status](https://travis-ci.org/nordsoftware/react-foundation.svg?branch=develop)](https://travis-ci.org/nordsoftware/react-foundation)
 [![Test Coverage](https://codeclimate.com/github/nordsoftware/react-foundation/badges/coverage.svg)](https://codeclimate.com/github/nordsoftware/react-foundation/coverage)
 [![Code Climate](https://codeclimate.com/github/nordsoftware/react-foundation/badges/gpa.svg)](https://codeclimate.com/github/nordsoftware/react-foundation)
+[![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/nordsoftware/react-foundation/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/nordsoftware/react-foundation/?branch=master)
+[![StyleCI](https://styleci.io/repos/53612920/shield?style=flat)](https://styleci.io/repos/53612920)
 [![npm version](https://img.shields.io/npm/v/react-foundation.svg)](https://www.npmjs.com/package/react-foundation)
 [![npm downloads](https://img.shields.io/npm/dt/react-foundation.svg)](https://www.npmjs.com/package/react-foundation)
-[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/nordsoftware/react-foundation/master/LICENSE)
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/nordsoftware/react-foundation/master/LICENSE)
+[![Gitter](https://img.shields.io/gitter/room/norsoftware/open-source.svg?maxAge=2592000)](https://gitter.im/nordsoftware/open-source)
 
 [Foundation](http://foundation.zurb.com/sites/docs/) as [React](https://facebook.github.io/react/) components.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-foundation",
-  "version": "0.6.8",
+  "version": "0.7.0",
   "description": "Foundation as React components.",
   "main": "lib/index.js",
   "jsnext:main": "src/index.js",

src/components/badge.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 import { BadgeColors } from '../enums';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectValues } from '../utils';
+import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
 
 /**
  * Badge component.
@@ -9,17 +9,17 @@ import { GeneralPropTypes, createClassName, generalClassNames, removeProps, obje
  * @param {Object} props
  * @returns {Object}
  */
-export const Badge = props => {
+export const Badge = (props) => {
   const className = createClassName(
     props.noDefaultClassName ? null : 'badge',
     props.className,
     props.color,
     generalClassNames(props)
   );
 
-  return (
-    <span {...removeProps(props, ['color'])} className={className}/>
-  );
+  const passProps = removeProps(props, objectKeys(Badge.propTypes));
+
+  return <span {...passProps} className={className}/>;
 };
 
 Badge.propTypes = {

src/components/breadcrumbs.js

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import { GeneralPropTypes, createClassName, generalClassNames } from '../utils';
+import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
 
 /**
  * Breadcrumbs component.
@@ -8,16 +8,20 @@ import { GeneralPropTypes, createClassName, generalClassNames } from '../utils';
  * @param {Object} props
  * @returns {Object}
  */
-export const Breadcrumbs = props => {
+export const Breadcrumbs = (props) => {
   const className = createClassName(
     props.noDefaultClassName ? null : 'breadcrumbs',
     props.className,
     generalClassNames(props)
   );
 
-  return (
-    <ul {...props} className={className}/>
-  );
+  const passProps = removeProps(props, objectKeys(Breadcrumbs.propTypes));
+
+  return <ul {...passProps} className={className}/>;
+};
+
+Breadcrumbs.propTypes = {
+  ...GeneralPropTypes
 };
 
 /**
@@ -26,7 +30,7 @@ export const Breadcrumbs = props => {
  * @param {Object} props
  * @returns {Object}
  */
-export const BreadcrumbItem = props => {
+export const BreadcrumbItem = (props) => {
   const className = createClassName(
     props.className,
     {
@@ -35,9 +39,9 @@ export const BreadcrumbItem = props => {
     generalClassNames(props)
   );
 
-  return (
-    <li {...props} className={className}/>
-  );
+  const passProps = removeProps(props, objectKeys(BreadcrumbItem.propTypes));
+
+  return <li {...passProps} className={className}/>;
 };
 
 BreadcrumbItem.propTypes = {

src/components/button-group.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 import { Breakpoints, ButtonGroupColors, ButtonGroupSizes } from '../enums';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectValues } from '../utils';
+import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
 
 /**
  * Button group component.
@@ -9,7 +9,7 @@ import { GeneralPropTypes, createClassName, generalClassNames, removeProps, obje
  * @param {Object} props
  * @returns {Object}
  */
-export const ButtonGroup = props => {
+export const ButtonGroup = (props) => {
   const className = createClassName(
     props.noDefaultClassName ? null : 'button-group',
     props.className,
@@ -25,9 +25,9 @@ export const ButtonGroup = props => {
     generalClassNames(props)
   );
 
-  return (
-    <div {...removeProps(props, ['color'])} className={className}/>
-  );
+  const passProps = removeProps(props, objectKeys(ButtonGroup.propTypes));
+
+  return <div {...passProps} className={className}/>;
 };
 
 ButtonGroup.propTypes = {

src/components/button.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 import { ButtonSizes, ButtonColors } from '../enums';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectValues } from '../utils';
+import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
 
 /**
  * Button property types.
@@ -24,9 +24,11 @@ const ButtonPropTypes = {
  * @param {Object} props
  * @returns {Object}
  */
-export const Button = props => (
-  <button {...removeProps(props, ['color'])} className={createButtonClassName(props)}/>
-);
+export const Button = (props) => {
+  const passProps = removeProps(props, objectKeys(Button.propTypes));
+
+  return <button {...passProps} className={createButtonClassName(props)}/>;
+};
 
 Button.propTypes = ButtonPropTypes;
 
@@ -37,9 +39,11 @@ Button.propTypes = ButtonPropTypes;
  * @param {Object} props
  * @returns {Object}
  */
-export const Link = props => (
-  <a {...removeProps(props, ['color'])} className={createButtonClassName(props)}/>
-);
+export const Link = (props) => {
+  const passProps = removeProps(props, objectKeys(Button.propTypes));
+
+  return <a {...passProps} className={createButtonClassName(props)}/>;
+};
 
 Link.propTypes = ButtonPropTypes;
 

src/components/callout.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 import { CalloutColors, CalloutSizes } from '../enums';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectValues } from '../utils';
+import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
 
 /**
  * Callout component.
@@ -18,9 +18,9 @@ export const Callout = props => {
     generalClassNames(props)
   );
 
-  return (
-    <div {...removeProps(props, ['color'])} className={className}/>
-  );
+  const passProps = removeProps(props, objectKeys(Callout.propTypes));
+
+  return <div {...passProps} className={className}/>;
 };
 
 Callout.propTypes = {

src/components/close-button.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GeneralPropTypes, createClassName, generalClassNames } from '../utils';
+import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
 
 /**
  * Close button component.
@@ -15,9 +15,9 @@ export const CloseButton = props => {
     generalClassNames(props)
   );
 
-  return (
-    <button {...props} className={className}/>
-  );
+  const passProps = removeProps(props, objectKeys(CloseButton.propTypes));
+
+  return <button {...passProps} className={className}/>;
 };
 
 CloseButton.propTypes = {

src/components/element.js

@@ -1,15 +1,17 @@
 import React from 'react';
-import { createClassName, generalClassNames, GeneralPropTypes } from '../utils';
+import { createClassName, generalClassNames, GeneralPropTypes, removeProps, objectKeys } from '../utils';
 
 /**
  * Div component.
  *
  * @param {Object} props
  * @returns {Object}
  */
-export const Block = props => (
-  <div {...props} className={createClassName(props.className, generalClassNames(props))}/>
-);
+export const Block = (props) => {
+  const passProps = removeProps(props, objectKeys(Block.propTypes));
+
+  return <div {...passProps} className={createClassName(props.className, generalClassNames(props))}/>;
+};
 
 Block.propTypes = {
   ...GeneralPropTypes
@@ -21,9 +23,11 @@ Block.propTypes = {
  * @param {Object} props
  * @returns {Object}
  */
-export const Inline = props => (
-  <span {...props} className={createClassName(props.className, generalClassNames(props))}/>
-);
+export const Inline = (props) => {
+  const passProps = removeProps(props, objectKeys(Inline.propTypes));
+
+  return <span {...passProps} className={createClassName(props.className, generalClassNames(props))}/>;
+};
 
 Inline.propTypes = {
   ...GeneralPropTypes

src/components/flex-video.js

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import { GeneralPropTypes, createClassName, generalClassNames } from '../utils';
+import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
 
 /**
  * FlexVideo component.
@@ -8,7 +8,7 @@ import { GeneralPropTypes, createClassName, generalClassNames } from '../utils';
  * @param {Object} props
  * @returns {Object}
  */
-export const FlexVideo = props => {
+export const FlexVideo = (props) => {
   const className = createClassName(
     props.noDefaultClassName ? null : 'flex-video',
     props.className,
@@ -19,9 +19,9 @@ export const FlexVideo = props => {
     generalClassNames(props)
   );
 
-  return (
-    <div {...props} className={className}/>
-  );
+  const passProps = removeProps(props, objectKeys(FlexVideo.propTypes));
+
+  return <div {...passProps} className={className}/>;
 };
 
 FlexVideo.propTypes = {

src/components/grid.js

@@ -1,25 +1,20 @@
 import React, { PropTypes } from 'react';
 import { HorizontalAlignments, VerticalAlignments } from '../enums';
-import {
-  GeneralPropTypes,
-  createClassName,
-  generalClassNames,
-  removeProps
-} from '../utils';
+import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, isDefined } from '../utils';
 
 /**
  * Row component.
  *
  * @param {Object} props
  * @returns {Object}
  */
-export const Row = props => {
+export const Row = (props) => {
   const className = createClassName(
     props.noDefaultClassName ? null : 'row',
     props.className,
-    props.upOnSmall ? `small-up-${props.upOnSmall}` : null,
-    props.upOnMedium ? `medium-up-${props.upOnMedium}` : null,
-    props.upOnLarge ? `large-up-${props.upOnLarge}` : null,
+    isDefined(props.upOnSmall) ? `small-up-${props.upOnSmall}` : null,
+    isDefined(props.upOnMedium) ? `medium-up-${props.upOnMedium}` : null,
+    isDefined(props.upOnLarge) ? `large-up-${props.upOnLarge}` : null,
     {
       'align-right': props.horizontalAlignment === HorizontalAlignments.RIGHT,
       'align-center': props.horizontalAlignment === HorizontalAlignments.CENTER,
@@ -45,9 +40,9 @@ export const Row = props => {
     generalClassNames(props)
   );
 
-  return (
-    <div {...props} className={className}/>
-  );
+  const passProps = removeProps(props, objectKeys(Row.propTypes));
+
+  return <div {...passProps} className={className}/>;
 };
 
 Row.propTypes = {
@@ -77,26 +72,26 @@ Row.propTypes = {
  * @param {Object} props
  * @returns {Object}
  */
-export const Column = props => {
+export const Column = (props) => {
   const defaultClassName = props.isColumn ? 'column' : 'columns';
   const className = createClassName(
     props.noDefaultClassName ? null : defaultClassName,
     props.className,
     props.small ? `small-${props.small}` : null,
     props.medium ? `medium-${props.medium}` : null,
     props.large ? `large-${props.large}` : null,
-    props.offsetOnSmall ? `small-offset-${props.offsetOnSmall}` : null,
-    props.offsetOnMedium ? `medium-offset-${props.offsetOnMedium}` : null,
-    props.offsetOnLarge ? `large-offset-${props.offsetOnLarge}` : null,
-    props.pushOnSmall ? `small-push-${props.pushOnSmall}` : null,
-    props.pushOnMedium ? `medium-push-${props.pushOnMedium}` : null,
-    props.pushOnLarge ? `large-push-${props.pushOnLarge}` : null,
-    props.pullOnSmall ? `small-pull-${props.pullOnSmall}` : null,
-    props.pullOnMedium ? `medium-pull-${props.pullOnMedium}` : null,
-    props.pullOnLarge ? `large-pull-${props.pullOnLarge}` : null,
-    props.orderOnSmall ? `small-order-${props.orderOnSmall}` : null,
-    props.orderOnMedium ? `medium-order-${props.orderOnMedium}` : null,
-    props.orderOnLarge ? `large-order-${props.orderOnLarge}` : null,
+    isDefined(props.offsetOnSmall) ? `small-offset-${props.offsetOnSmall}` : null,
+    isDefined(props.offsetOnMedium) ? `medium-offset-${props.offsetOnMedium}` : null,
+    isDefined(props.offsetOnLarge) ? `large-offset-${props.offsetOnLarge}` : null,
+    isDefined(props.pushOnSmall) ? `small-push-${props.pushOnSmall}` : null,
+    isDefined(props.pushOnMedium) ? `medium-push-${props.pushOnMedium}` : null,
+    isDefined(props.pushOnLarge) ? `large-push-${props.pushOnLarge}` : null,
+    isDefined(props.pullOnSmall) ? `small-pull-${props.pullOnSmall}` : null,
+    isDefined(props.pullOnMedium) ? `medium-pull-${props.pullOnMedium}` : null,
+    isDefined(props.pullOnLarge) ? `large-pull-${props.pullOnLarge}` : null,
+    isDefined(props.orderOnSmall) ? `small-order-${props.orderOnSmall}` : null,
+    isDefined(props.orderOnMedium) ? `medium-order-${props.orderOnMedium}` : null,
+    isDefined(props.orderOnLarge) ? `large-order-${props.orderOnLarge}` : null,
     {
       'small-centered': props.centerOnSmall,
       'medium-centered': props.centerOnMedium,
@@ -113,9 +108,9 @@ export const Column = props => {
     generalClassNames(props)
   );
 
-  return (
-    <div {...removeProps(props, ['offset'])} className={className}/>
-  );
+  const passProps = removeProps(props, objectKeys(Column.propTypes));
+
+  return <div {...passProps} className={className}/>;
 };
 
 Column.propTypes = {