react-foundation - npm Package Compare versions

Comparing version 0.8.2 to 0.9.0

lib/components/xy-grid.js

+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Cell = exports.Grid = exports.GridContainer = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _enums = require('../enums');
+
+var _utils = require('../utils');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Grid container component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+var GridContainer = exports.GridContainer = function GridContainer(props) {
+  var className = (0, _utils.createClassName)(props.noDefaultClassName ? null : 'grid-container', props.className, {
+    'fluid': props.fluid,
+    'full': props.full
+  }, (0, _utils.generalClassNames)(props));
+
+  var passProps = (0, _utils.removeProps)(props, (0, _utils.objectKeys)(Grid.propTypes));
+
+  return _react2.default.createElement('div', _extends({}, passProps, { className: className }));
+};
+
+GridContainer.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
+  fluid: _propTypes2.default.bool,
+  full: _propTypes2.default.bool
+});
+
+/**
+ * Grid component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+var Grid = exports.Grid = function Grid(props) {
+  var className = (0, _utils.createClassName)(props.noDefaultClassName ? null : (0, _utils.setDirection)(props.vertical), props.className, (0, _utils.isDefined)(props.gutters) ? (0, _utils.setDirection)(props.vertical, props.gutters) : null, (0, _utils.isDefined)(props.upOnSmall) ? 'small-up-' + props.upOnSmall : null, (0, _utils.isDefined)(props.upOnMedium) ? 'medium-up-' + props.upOnMedium : null, (0, _utils.isDefined)(props.upOnLarge) ? 'large-up-' + props.upOnLarge : null, (0, _utils.isDefined)(props.collapseOnSmall) ? 'small-' + props.collapseOnSmall + '-collapse' : null, (0, _utils.isDefined)(props.collapseOnMedium) ? 'medium-' + props.collapseOnMedium + '-collapse' : null, (0, _utils.isDefined)(props.collapseOnLarge) ? 'large-' + props.collapseOnLarge + '-collapse' : null, (0, _utils.isDefined)(props.gridFrame) ? (0, _utils.addBreakpoint)('grid-frame', props.gridFrame) : null, (0, _utils.generalClassNames)(props));
+
+  var passProps = (0, _utils.removeProps)(props, (0, _utils.objectKeys)(Grid.propTypes));
+
+  return _react2.default.createElement('div', _extends({}, passProps, { className: className }));
+};
+
+Grid.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
+  vertical: _propTypes2.default.bool,
+  gutters: _propTypes2.default.oneOf((0, _utils.objectValues)(_enums.GutterTypes)),
+  upOnSmall: _propTypes2.default.number,
+  upOnMedium: _propTypes2.default.number,
+  upOnLarge: _propTypes2.default.number,
+  collapseOnSmall: _propTypes2.default.oneOf((0, _utils.objectValues)(_enums.GutterTypes)),
+  collapseOnMedium: _propTypes2.default.oneOf((0, _utils.objectValues)(_enums.GutterTypes)),
+  collapseOnLarge: _propTypes2.default.oneOf((0, _utils.objectValues)(_enums.GutterTypes)),
+  gridFrame: _propTypes2.default.oneOf((0, _utils.objectValues)(_enums.ExtendedBreakpoints))
+});
+
+/**
+ * Cell component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+var Cell = exports.Cell = function Cell(props) {
+  var className = (0, _utils.createClassName)(props.noDefaultClassName ? null : 'cell', props.className, props.small ? 'small-' + props.small : null, props.medium ? 'medium-' + props.medium : null, props.large ? 'large-' + props.large : null, (0, _utils.isDefined)(props.auto) ? (0, _utils.addBreakpoint)('auto', props.auto) : null, (0, _utils.isDefined)(props.shrink) ? (0, _utils.addBreakpoint)('shrink', props.shrink) : null, (0, _utils.isDefined)(props.offsetOnSmall) ? 'small-offset-' + props.offsetOnSmall : null, (0, _utils.isDefined)(props.offsetOnMedium) ? 'medium-offset-' + props.offsetOnMedium : null, (0, _utils.isDefined)(props.offsetOnLarge) ? 'large-offset-' + props.offsetOnLarge : null);
+
+  var passProps = (0, _utils.removeProps)(props, (0, _utils.objectKeys)(Cell.propTypes));
+
+  return _react2.default.createElement('div', _extends({}, passProps, { className: className }));
+};
+
+Cell.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
+  small: _propTypes2.default.number,
+  medium: _propTypes2.default.number,
+  large: _propTypes2.default.number,
+  auto: _propTypes2.default.oneOf((0, _utils.objectValues)(_enums.ExtendedBreakpoints)),
+  shrink: _propTypes2.default.oneOf((0, _utils.objectValues)(_enums.ExtendedBreakpoints)),
+  offsetOnSmall: _propTypes2.default.number,
+  offsetOnMedium: _propTypes2.default.number,
+  offsetOnLarge: _propTypes2.default.number
+});

src/components/xy-grid.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { GutterTypes, ExtendedBreakpoints } from '../enums';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys, isDefined, objectValues, addBreakpoint, setDirection } from '../utils';
+
+/**
+ * Grid container component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export const GridContainer = (props) => {
+  const className = createClassName(
+    props.noDefaultClassName ? null : 'grid-container',
+    props.className,
+    {
+      'fluid': props.fluid,
+      'full': props.full
+    },
+    generalClassNames(props)
+  );
+
+  const passProps = removeProps(props, objectKeys(Grid.propTypes));
+
+  return <div {...passProps} className={className}/>;
+};
+
+GridContainer.propTypes = {
+  ...GeneralPropTypes,
+  ...FlexboxPropTypes,
+  fluid: PropTypes.bool,
+  full: PropTypes.bool
+};
+
+/**
+ * Grid component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export const Grid = (props) => {
+  const className = createClassName(
+    props.noDefaultClassName ? null : setDirection(props.vertical),
+    props.className,
+    isDefined(props.gutters) ? setDirection(props.vertical, props.gutters) : 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,
+    isDefined(props.collapseOnSmall) ? `small-${props.collapseOnSmall}-collapse` : null,
+    isDefined(props.collapseOnMedium) ? `medium-${props.collapseOnMedium}-collapse` : null,
+    isDefined(props.collapseOnLarge) ? `large-${props.collapseOnLarge}-collapse` : null,
+    isDefined(props.gridFrame) ? addBreakpoint('grid-frame', props.gridFrame) : null,
+    generalClassNames(props)
+  );
+
+  const passProps = removeProps(props, objectKeys(Grid.propTypes));
+
+  return <div {...passProps} className={className}/>;
+};
+
+Grid.propTypes = {
+  ...GeneralPropTypes,
+  ...FlexboxPropTypes,
+  vertical: PropTypes.bool,
+  gutters: PropTypes.oneOf(objectValues(GutterTypes)),
+  upOnSmall: PropTypes.number,
+  upOnMedium: PropTypes.number,
+  upOnLarge: PropTypes.number,
+  collapseOnSmall: PropTypes.oneOf(objectValues(GutterTypes)),
+  collapseOnMedium: PropTypes.oneOf(objectValues(GutterTypes)),
+  collapseOnLarge: PropTypes.oneOf(objectValues(GutterTypes)),
+  gridFrame: PropTypes.oneOf(objectValues(ExtendedBreakpoints)),
+};
+
+/**
+ * Cell component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export const Cell = (props) => {
+  const className = createClassName(
+    props.noDefaultClassName ? null : 'cell',
+    props.className,
+    props.small ? `small-${props.small}` : null,
+    props.medium ? `medium-${props.medium}` : null,
+    props.large ? `large-${props.large}` : null,
+    isDefined(props.auto) ? addBreakpoint('auto', props.auto) : null,
+    isDefined(props.shrink) ? addBreakpoint('shrink', props.shrink) : 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,
+  );
+
+  const passProps = removeProps(props, objectKeys(Cell.propTypes));
+
+  return <div {...passProps} className={className}/>;
+};
+
+Cell.propTypes = {
+  ...GeneralPropTypes,
+  ...FlexboxPropTypes,
+  small: PropTypes.number,
+  medium: PropTypes.number,
+  large: PropTypes.number,
+  auto: PropTypes.oneOf(objectValues(ExtendedBreakpoints)),
+  shrink: PropTypes.oneOf(objectValues(ExtendedBreakpoints)),
+  offsetOnSmall: PropTypes.number,
+  offsetOnMedium: PropTypes.number,
+  offsetOnLarge: PropTypes.number,
+};

lib/components/accordion.js

@@ -41,3 +41,3 @@ 'use strict';
 
-Accordion.propTypes = _extends({}, _utils.GeneralPropTypes, {
+Accordion.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   children: _propTypes2.default.any
@@ -62,3 +62,3 @@ });
 
-AccordionItem.propTypes = _extends({}, _utils.GeneralPropTypes, {
+AccordionItem.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   isActive: _propTypes2.default.bool
@@ -83,3 +83,3 @@ });
 
-AccordionContent.propTypes = _extends({}, _utils.GeneralPropTypes, {
+AccordionContent.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   isActive: _propTypes2.default.bool
@@ -102,2 +102,2 @@ });
 
-AccordionTitle.propTypes = _extends({}, _utils.GeneralPropTypes);
+AccordionTitle.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes);

lib/components/badge.js

@@ -39,4 +39,4 @@ 'use strict';
 
-Badge.propTypes = _extends({}, _utils.GeneralPropTypes, {
+Badge.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   color: _propTypes2.default.oneOf((0, _utils.objectValues)(_enums.BadgeColors))
 });

lib/components/breadcrumbs.js

@@ -55,4 +55,4 @@ 'use strict';
 
-BreadcrumbItem.propTypes = _extends({}, _utils.GeneralPropTypes, {
+BreadcrumbItem.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   isDisabled: _propTypes2.default.bool
 });

lib/components/button-group.js

@@ -45,3 +45,3 @@ 'use strict';
 
-ButtonGroup.propTypes = _extends({}, _utils.GeneralPropTypes, {
+ButtonGroup.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   color: _propTypes2.default.oneOf((0, _utils.objectValues)(_enums.ButtonGroupColors)),
@@ -48,0 +48,0 @@ size: _propTypes2.default.oneOf((0, _utils.objectValues)(_enums.ButtonGroupSizes)),

lib/components/button.js

@@ -29,3 +29,3 @@ 'use strict';
  */
-var ButtonPropTypes = _extends({}, _utils.GeneralPropTypes, {
+var ButtonPropTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   color: _propTypes2.default.oneOf((0, _utils.objectValues)(_enums.ButtonColors)),
@@ -32,0 +32,0 @@ size: _propTypes2.default.oneOf((0, _utils.objectValues)(_enums.ButtonSizes)),

lib/components/callout.js

@@ -39,5 +39,5 @@ 'use strict';
 
-Callout.propTypes = _extends({}, _utils.GeneralPropTypes, {
+Callout.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   color: _propTypes2.default.oneOf((0, _utils.objectValues)(_enums.CalloutColors)),
   size: _propTypes2.default.oneOf((0, _utils.objectValues)(_enums.CalloutSizes))
 });

lib/components/close-button.js

@@ -33,2 +33,2 @@ 'use strict';
 
-CloseButton.propTypes = _extends({}, _utils.GeneralPropTypes);
+CloseButton.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes);

lib/components/element.js

@@ -30,3 +30,3 @@ 'use strict';
 
-Block.propTypes = _extends({}, _utils.GeneralPropTypes);
+Block.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes);
 
@@ -45,2 +45,2 @@ /**
 
-Inline.propTypes = _extends({}, _utils.GeneralPropTypes);
+Inline.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes);

lib/components/flex-video.js

@@ -40,5 +40,5 @@ 'use strict';
 
-FlexVideo.propTypes = _extends({}, _utils.GeneralPropTypes, {
+FlexVideo.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   isWidescreen: _propTypes2.default.bool,
   isVimeo: _propTypes2.default.bool
 });

lib/components/grid.js

@@ -59,3 +59,3 @@ 'use strict';
 
-Row.propTypes = _extends({}, _utils.GeneralPropTypes, {
+Row.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   upOnSmall: _propTypes2.default.number,
@@ -107,3 +107,3 @@ upOnMedium: _propTypes2.default.number,
 
-Column.propTypes = _extends({}, _utils.GeneralPropTypes, {
+Column.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   small: _propTypes2.default.number,
@@ -110,0 +110,0 @@ medium: _propTypes2.default.number,

lib/components/icon.js

@@ -36,5 +36,5 @@ 'use strict';
 
-Icon.propTypes = _extends({}, _utils.GeneralPropTypes, {
+Icon.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   name: _propTypes2.default.string.isRequired,
   prefix: _propTypes2.default.string
 });

lib/components/label.js

@@ -39,4 +39,4 @@ 'use strict';
 
-Label.propTypes = _extends({}, _utils.GeneralPropTypes, {
+Label.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   color: _propTypes2.default.oneOf((0, _utils.objectValues)(_enums.LabelColors))
 });

lib/components/media-object.js

@@ -40,3 +40,3 @@ 'use strict';
 
-MediaObject.propTypes = _extends({}, _utils.GeneralPropTypes, {
+MediaObject.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   stackForSmall: _propTypes2.default.bool
@@ -67,3 +67,3 @@ });
 
-MediaObjectSection.propTypes = _extends({}, _utils.GeneralPropTypes, {
+MediaObjectSection.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   alignment: _propTypes2.default.oneOf((0, _utils.objectValues)(_enums.HorizontalAlignments)),
@@ -70,0 +70,0 @@ isMain: _propTypes2.default.bool,

lib/components/menu.js

@@ -49,3 +49,3 @@ 'use strict';
 
-Menu.propTypes = _extends({}, _utils.GeneralPropTypes, {
+Menu.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   alignment: _propTypes2.default.oneOf((0, _utils.objectValues)(_enums.MenuAlignments)),
@@ -77,3 +77,3 @@ iconsOnTop: _propTypes2.default.bool,
 
-MenuItem.propTypes = _extends({}, _utils.GeneralPropTypes, {
+MenuItem.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   isActive: _propTypes2.default.bool
@@ -80,0 +80,0 @@ });

lib/components/pagination.js

@@ -39,3 +39,3 @@ 'use strict';
 
-Pagination.propTypes = _extends({}, _utils.GeneralPropTypes, {
+Pagination.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   isCentered: _propTypes2.default.bool
@@ -61,3 +61,3 @@ });
 
-PaginationItem.propTypes = _extends({}, _utils.GeneralPropTypes, {
+PaginationItem.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   isCurrent: _propTypes2.default.bool,
@@ -64,0 +64,0 @@ isDisabled: _propTypes2.default.bool

lib/components/progress-bar.js

@@ -58,3 +58,3 @@ 'use strict';
 
-Progress.propTypes = _extends({}, _utils.GeneralPropTypes, {
+Progress.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   min: _propTypes2.default.number,
@@ -104,3 +104,3 @@ max: _propTypes2.default.number,
 
-ProgressMeterWithText.propTypes = _extends({}, _utils.GeneralPropTypes, {
+ProgressMeterWithText.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   text: _propTypes2.default.string.isRequired
@@ -139,3 +139,3 @@ });
 
-NativeProgress.propTypes = _extends({}, _utils.GeneralPropTypes, {
+NativeProgress.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   max: _propTypes2.default.number,
@@ -142,0 +142,0 @@ value: _propTypes2.default.number,

lib/components/responsive.js

@@ -142,3 +142,3 @@ 'use strict';
 
-ResponsiveNavigation.propTypes = _extends({}, _utils.GeneralPropTypes, {
+ResponsiveNavigation.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   breakpoint: _propTypes2.default.number.isRequired
@@ -145,0 +145,0 @@ });

lib/components/reveal.js

@@ -43,3 +43,3 @@ 'use strict';
 
-Reveal.propTypes = _extends({}, _utils.GeneralPropTypes, {
+Reveal.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   isTiny: _propTypes2.default.bool,
@@ -46,0 +46,0 @@ isSmall: _propTypes2.default.bool,

lib/components/switch.js

@@ -53,3 +53,3 @@ 'use strict';
 
-Switch.propTypes = _extends({}, _utils.GeneralPropTypes, {
+Switch.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   size: _propTypes2.default.oneOf((0, _utils.objectValues)(_enums.SwitchSizes)),
@@ -56,0 +56,0 @@ id: _propTypes2.default.string

lib/components/tabs.js

@@ -39,3 +39,3 @@ 'use strict';
 
-Tabs.propTypes = _extends({}, _utils.GeneralPropTypes, {
+Tabs.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   isVertical: _propTypes2.default.bool
@@ -60,3 +60,3 @@ });
 
-TabItem.propTypes = _extends({}, _utils.GeneralPropTypes, {
+TabItem.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   isActive: _propTypes2.default.bool
@@ -81,3 +81,3 @@ });
 
-TabsContent.propTypes = _extends({}, _utils.GeneralPropTypes, {
+TabsContent.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   isActive: _propTypes2.default.bool,
@@ -103,4 +103,4 @@ isVertical: _propTypes2.default.bool
 
-TabPanel.propTypes = _extends({}, _utils.GeneralPropTypes, {
+TabPanel.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes, {
   isActive: _propTypes2.default.bool
 });

lib/components/thumbnail.js

@@ -33,3 +33,3 @@ 'use strict';
 
-Thumbnail.propTypes = _extends({}, _utils.GeneralPropTypes);
+Thumbnail.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes);
 
@@ -57,2 +57,2 @@ /**
 
-ThumbnailLink.propTypes = _extends({}, _utils.GeneralPropTypes);
+ThumbnailLink.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes);

lib/components/top-bar.js

@@ -33,3 +33,3 @@ 'use strict';
 
-TopBar.propTypes = _extends({}, _utils.GeneralPropTypes);
+TopBar.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes);
 
@@ -50,3 +50,3 @@ /**
 
-TopBarTitle.propTypes = _extends({}, _utils.GeneralPropTypes);
+TopBarTitle.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes);
 
@@ -67,3 +67,3 @@ /**
 
-TopBarLeft.propTypes = _extends({}, _utils.GeneralPropTypes);
+TopBarLeft.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes);
 
@@ -84,2 +84,2 @@ /**
 
-TopBarRight.propTypes = _extends({}, _utils.GeneralPropTypes);
+TopBarRight.propTypes = _extends({}, _utils.GeneralPropTypes, _utils.FlexboxPropTypes);

lib/enums.js

@@ -227,2 +227,37 @@ 'use strict';
  */
-var InputTypes = exports.InputTypes = _extends({}, SwitchInputTypes);
+var InputTypes = exports.InputTypes = _extends({}, SwitchInputTypes);
+
+/**
+ * Gutter type enumerable.
+ *
+ * @type {Object}
+ */
+var GutterTypes = exports.GutterTypes = {
+  MARGIN: 'margin',
+  PADDING: 'padding'
+};
+
+/**
+ * Extended breakpoints enumerable (includes 'ALL' option, which is useful when breakpoint is not defined).
+ *
+ * @type {{SMALL: string, MEDIUM: string, LARGE: string, XLARGE: string, XXLARGE: string, ALL: string}}
+ */
+var ExtendedBreakpoints = exports.ExtendedBreakpoints = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+  XLARGE: 'xlarge',
+  XXLARGE: 'xxlarge',
+  ALL: 'all'
+};
+
+/**
+ * Space control enumerable.
+ *
+ * @type {Object}
+ */
+var SpaceControls = exports.SpaceControls = {
+  AUTO: 'auto',
+  GROW: 'grow',
+  SHRINK: 'shrink'
+};

lib/index.js

@@ -434,2 +434,20 @@ 'use strict';
   }
+});
+Object.defineProperty(exports, 'GutterTypes', {
+  enumerable: true,
+  get: function get() {
+    return _enums.GutterTypes;
+  }
+});
+Object.defineProperty(exports, 'ExtendedBreakpoints', {
+  enumerable: true,
+  get: function get() {
+    return _enums.ExtendedBreakpoints;
+  }
+});
+Object.defineProperty(exports, 'SpaceControls', {
+  enumerable: true,
+  get: function get() {
+    return _enums.SpaceControls;
+  }
 });

lib/utils.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.GeneralPropTypes = undefined;
+exports.FlexboxPropTypes = exports.GeneralPropTypes = undefined;
 exports.createClassName = createClassName;
@@ -14,2 +14,5 @@ exports.generalClassNames = generalClassNames;
 exports.isDefined = isDefined;
+exports.addBreakpoint = addBreakpoint;
+exports.setDirection = setDirection;
+exports.flexboxClassNames = flexboxClassNames;
 
@@ -147,2 +150,82 @@ var _propTypes = require('prop-types');
   return typeof value !== 'undefined';
+}
+
+/**
+ * Adds a breakpoint to a class if breakpoint is specified.
+ *
+ * @param {String} prop
+ * @param {String} size
+ * @returns {string}
+ */
+function addBreakpoint(prop, size) {
+  return size === 'all' ? prop : size + '-' + prop;
+}
+
+/**
+ * Sets direction for grid and gutters (horizontal or vertical).
+ *
+ * @param {boolean} isVertical
+ * @param {String} gutters
+ * @returns {string}
+ */
+function setDirection(isVertical) {
+  var gutters = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+
+  if (gutters) {
+    return isVertical === true ? 'grid-' + gutters + '-y' : 'grid-' + gutters + '-x';
+  } else {
+    return isVertical === true ? 'grid-y' : 'grid-x';
+  }
+}
+
+// Flexbox Utilities
+
+/**
+ * Property types for flexbox utilities.
+ *
+ * @returns {Object}
+ */
+var FlexboxPropTypes = exports.FlexboxPropTypes = {
+  alignX: _propTypes2.default.oneOf(objectValues(_enums.HorizontalAlignments)),
+  alignY: _propTypes2.default.oneOf(objectValues(_enums.VerticalAlignments)),
+  selfAlignX: _propTypes2.default.oneOf(objectValues(_enums.HorizontalAlignments)),
+  selfAlignY: _propTypes2.default.oneOf(objectValues(_enums.VerticalAlignments)),
+  centerAlign: _propTypes2.default.bool,
+  flexContainer: _propTypes2.default.bool,
+  flexDirRow: _propTypes2.default.oneOf(objectValues(_enums.ExtendedBreakpoints)),
+  flexDirRowRev: _propTypes2.default.oneOf(objectValues(_enums.ExtendedBreakpoints)),
+  flexDirCol: _propTypes2.default.oneOf(objectValues(_enums.ExtendedBreakpoints)),
+  flexDirColRev: _propTypes2.default.oneOf(objectValues(_enums.ExtendedBreakpoints)),
+  flexChild: _propTypes2.default.oneOf(objectValues(_enums.SpaceControls)),
+  flexOrder: _propTypes2.default.number,
+  flexOrderSmall: _propTypes2.default.number,
+  flexOrderMedium: _propTypes2.default.number,
+  flexOrderLarge: _propTypes2.default.number
+};
+
+/**
+ * Parses the flexbox class names from the given properties.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+function flexboxClassNames(props) {
+  var flexClassNames = {
+    'flex-container': props.flexContainer,
+    'align-center-middle': props.centerAlign
+  };
+
+  if (isDefined(props.alignX)) flexClassNames['align-' + props.alignX] = true;
+  if (isDefined(props.alignY)) flexClassNames['align-' + props.alignY] = true;
+  if (isDefined(props.flexDirRow)) flexClassNames[addBreakpoint('flex-dir-row', props.flexDirRow)] = true;
+  if (isDefined(props.flexDirRowRev)) flexClassNames[addBreakpoint('flex-dir-row-reverse', props.flexDirRowRev)] = true;
+  if (isDefined(props.flexDirCol)) flexClassNames[addBreakpoint('flex-dir-column', props.flexDirCol)] = true;
+  if (isDefined(props.flexDirColRev)) flexClassNames[addBreakpoint('flex-dir-column-reverse', props.flexDirColRev)] = true;
+  if (isDefined(props.flexChild)) flexClassNames['flex-child-' + props.flexChild] = true;
+  if (isDefined(props.flexOrder)) flexClassNames['order-' + props.flexOrder] = true;
+  if (isDefined(props.flexOrderSmall)) flexClassNames['small-order-' + props.flexOrder] = true;
+  if (isDefined(props.flexOrderMedium)) flexClassNames['medium-order-' + props.flexOrder] = true;
+  if (isDefined(props.flexOrderLarge)) flexClassNames['large-order-' + props.flexOrder] = true;
+
+  return flexClassNames;
 }

package.json

 {
   "name": "react-foundation",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "description": "Foundation as React components.",
@@ -74,3 +74,3 @@ "main": "lib/index.js",
     "expect": "^1.15.1",
-    "foundation-sites": "^6.2.0",
+    "foundation-sites": "^6.4.3",
     "husky": "^0.13.4",
@@ -77,0 +77,0 @@ "istanbul": "^1.0.0-alpha.2",

README.md

 # React + Foundation
 
-[![Build Status](https://travis-ci.org/digiaonline/react-foundation.svg?branch=develop)](https://travis-ci.org/digiaonline/react-foundation)
+[![Build Status](https://travis-ci.org/digiaonline/react-foundation.svg?branch=master)](https://travis-ci.org/digiaonline/react-foundation)
 [![Test Coverage](https://codeclimate.com/github/nordsoftware/react-foundation/badges/coverage.svg)](https://codeclimate.com/github/nordsoftware/react-foundation/coverage)
@@ -5,0 +5,0 @@ [![Code Climate](https://codeclimate.com/github/nordsoftware/react-foundation/badges/gpa.svg)](https://codeclimate.com/github/nordsoftware/react-foundation)

src/components/accordion.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
 
@@ -26,2 +26,3 @@ /**
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   children: PropTypes.any,
@@ -53,2 +54,3 @@ };
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   isActive: PropTypes.bool
@@ -80,2 +82,3 @@ };
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   isActive: PropTypes.bool
@@ -104,2 +107,3 @@ };
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
 };

src/components/badge.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import { BadgeColors } from '../enums';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
 
@@ -28,3 +28,4 @@ /**
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   color: PropTypes.oneOf(objectValues(BadgeColors))
 };

src/components/breadcrumbs.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
 
@@ -50,3 +50,4 @@ /**
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   isDisabled: PropTypes.bool
 };

src/components/button-group.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import { Breakpoints, ButtonGroupColors, ButtonGroupSizes } from '../enums';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
 
@@ -36,2 +36,3 @@ /**
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   color: PropTypes.oneOf(objectValues(ButtonGroupColors)),
@@ -38,0 +39,0 @@ size: PropTypes.oneOf(objectValues(ButtonGroupSizes)),

src/components/button.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import { ButtonSizes, ButtonColors } from '../enums';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
 
@@ -13,2 +13,3 @@ /**
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   color: PropTypes.oneOf(objectValues(ButtonColors)),
@@ -15,0 +16,0 @@ size: PropTypes.oneOf(objectValues(ButtonSizes)),

src/components/callout.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import { CalloutColors, CalloutSizes } from '../enums';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
 
@@ -29,4 +29,5 @@ /**
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   color: PropTypes.oneOf(objectValues(CalloutColors)),
   size: PropTypes.oneOf(objectValues(CalloutSizes))
 };

src/components/close-button.js

 import React from 'react';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
 
@@ -24,3 +24,4 @@ /**
 CloseButton.propTypes = {
-  ...GeneralPropTypes
+  ...GeneralPropTypes,
+  ...FlexboxPropTypes
 };

src/components/element.js

 import React from 'react';
-import { createClassName, generalClassNames, GeneralPropTypes, removeProps, objectKeys } from '../utils';
+import { createClassName, generalClassNames, GeneralPropTypes, FlexboxPropTypes, removeProps, objectKeys } from '../utils';
 
@@ -17,3 +17,4 @@ /**
 Block.propTypes = {
-  ...GeneralPropTypes
+  ...GeneralPropTypes,
+  ...FlexboxPropTypes
 };
@@ -34,3 +35,4 @@
 Inline.propTypes = {
-  ...GeneralPropTypes
+  ...GeneralPropTypes,
+  ...FlexboxPropTypes
 };

src/components/flex-video.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
 
@@ -30,4 +30,5 @@ /**
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   isWidescreen: PropTypes.bool,
   isVimeo: PropTypes.bool
 };

src/components/grid.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import { HorizontalAlignments, VerticalAlignments } from '../enums';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, isDefined } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys, isDefined } from '../utils';
 
@@ -51,2 +51,3 @@ /**
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   upOnSmall: PropTypes.number,
@@ -120,2 +121,3 @@ upOnMedium: PropTypes.number,
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   small: PropTypes.number,
@@ -122,0 +124,0 @@ medium: PropTypes.number,

src/components/icon.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
 
@@ -25,4 +25,5 @@ /**
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   name: PropTypes.string.isRequired,
   prefix: PropTypes.string
 };

src/components/label.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import { LabelColors } from '../enums';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
 
@@ -28,3 +28,4 @@ /**
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   color: PropTypes.oneOf(objectValues(LabelColors))
 };

src/components/media-object.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import { HorizontalAlignments } from '../enums';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
 
@@ -29,2 +29,3 @@ /**
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   stackForSmall: PropTypes.bool
@@ -62,2 +63,3 @@ };
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   alignment: PropTypes.oneOf(objectValues(HorizontalAlignments)),
@@ -64,0 +66,0 @@ isMain: PropTypes.bool,

src/components/menu.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import { MenuAlignments } from '../enums';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
 
@@ -38,2 +38,3 @@ /**
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   alignment: PropTypes.oneOf(objectValues(MenuAlignments)),
@@ -71,2 +72,3 @@ iconsOnTop: PropTypes.bool,
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   isActive: PropTypes.bool
@@ -73,0 +75,0 @@ };

src/components/pagination.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
 
@@ -29,2 +29,3 @@ /**
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   isCentered: PropTypes.bool
@@ -56,2 +57,3 @@ };
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   isCurrent: PropTypes.bool,
@@ -58,0 +60,0 @@ isDisabled: PropTypes.bool

src/components/progress-bar.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import { ProgressColors } from '../enums';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys, objectValues } from '../utils';
 
@@ -45,2 +45,3 @@ /**
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   min: PropTypes.number,
@@ -98,2 +99,3 @@ max: PropTypes.number,
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   text: PropTypes.string.isRequired
@@ -144,2 +146,3 @@ };
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   max: PropTypes.number,
@@ -146,0 +149,0 @@ value: PropTypes.number,

src/components/responsive.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { TopBar } from './top-bar';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps } from '../utils';
 
@@ -91,2 +91,3 @@ // Default pixel value when title bar is displayed and top bar is hidden.
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   breakpoint: PropTypes.number.isRequired
@@ -93,0 +94,0 @@ };

src/components/reveal.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
 
@@ -33,2 +33,3 @@ /**
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   isTiny: PropTypes.bool,
@@ -35,0 +36,0 @@ isSmall: PropTypes.bool,

src/components/switch.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import { SwitchSizes, SwitchInputTypes } from '../enums';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectValues } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectValues } from '../utils';
 
@@ -40,2 +40,3 @@ let currentId = 0;
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   size: PropTypes.oneOf(objectValues(SwitchSizes)),
@@ -42,0 +43,0 @@ id: PropTypes.string

src/components/tabs.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
 
@@ -29,2 +29,3 @@ /**
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   isVertical: PropTypes.bool
@@ -56,2 +57,3 @@ };
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   isActive: PropTypes.bool
@@ -83,2 +85,3 @@ };
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   isActive: PropTypes.bool,
@@ -111,3 +114,4 @@ isVertical: PropTypes.bool
   ...GeneralPropTypes,
+  ...FlexboxPropTypes,
   isActive: PropTypes.bool
 };

src/components/thumbnail.js

 import React from 'react';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
 
@@ -24,3 +24,4 @@ /**
 Thumbnail.propTypes = {
-  ...GeneralPropTypes
+  ...GeneralPropTypes,
+  ...FlexboxPropTypes
 };
@@ -50,3 +51,4 @@
 ThumbnailLink.propTypes = {
-  ...GeneralPropTypes
+  ...GeneralPropTypes,
+  ...FlexboxPropTypes
 };

src/components/top-bar.js

 import React from 'react';
-import { GeneralPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
+import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';
 
@@ -24,3 +24,4 @@ /**
 TopBar.propTypes = {
-  ...GeneralPropTypes
+  ...GeneralPropTypes,
+  ...FlexboxPropTypes
 };
@@ -47,3 +48,4 @@
 TopBarTitle.propTypes = {
-  ...GeneralPropTypes
+  ...GeneralPropTypes,
+  ...FlexboxPropTypes
 };
@@ -70,3 +72,4 @@
 TopBarLeft.propTypes = {
-  ...GeneralPropTypes
+  ...GeneralPropTypes,
+  ...FlexboxPropTypes
 };
@@ -93,3 +96,4 @@
 TopBarRight.propTypes = {
-  ...GeneralPropTypes
+  ...GeneralPropTypes,
+  ...FlexboxPropTypes
 };

src/enums.js

@@ -238,1 +238,36 @@ /**
 };
+
+/**
+ * Gutter type enumerable.
+ *
+ * @type {Object}
+ */
+export const GutterTypes = {
+  MARGIN: 'margin',
+  PADDING: 'padding'
+};
+
+/**
+ * Extended breakpoints enumerable (includes 'ALL' option, which is useful when breakpoint is not defined).
+ *
+ * @type {{SMALL: string, MEDIUM: string, LARGE: string, XLARGE: string, XXLARGE: string, ALL: string}}
+ */
+export const ExtendedBreakpoints = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+  XLARGE: 'xlarge',
+  XXLARGE: 'xxlarge',
+  ALL: 'all'
+};
+
+/**
+ * Space control enumerable.
+ *
+ * @type {Object}
+ */
+export const SpaceControls = {
+  AUTO: 'auto',
+  GROW: 'grow',
+  SHRINK: 'shrink'
+};

src/index.js

@@ -23,2 +23,2 @@ export { Accordion, AccordionItem, AccordionTitle, AccordionContent } from './components/accordion';
 export { TopBar, TopBarTitle, TopBarLeft, TopBarRight } from './components/top-bar';
-export { Breakpoints, Colors, Sizes, Alignments, FloatTypes, InputTypes } from './enums';
+export { Breakpoints, Colors, Sizes, Alignments, FloatTypes, InputTypes, GutterTypes, ExtendedBreakpoints, SpaceControls } from './enums';

src/utils.js

 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Breakpoints, FloatTypes } from './enums';
+import { Breakpoints, FloatTypes, HorizontalAlignments, VerticalAlignments, SpaceControls, ExtendedBreakpoints } from './enums';
 
@@ -125,1 +125,79 @@ /**
 }
+
+/**
+ * Adds a breakpoint to a class if breakpoint is specified.
+ *
+ * @param {String} prop
+ * @param {String} size
+ * @returns {string}
+ */
+export function addBreakpoint(prop, size) {
+  return size === 'all' ? prop : `${size}-${prop}`;
+}
+
+/**
+ * Sets direction for grid and gutters (horizontal or vertical).
+ *
+ * @param {boolean} isVertical
+ * @param {String} gutters
+ * @returns {string}
+ */
+export function setDirection(isVertical, gutters = null) {
+  if (gutters) {
+    return isVertical === true ? `grid-${gutters}-y` : `grid-${gutters}-x`;
+  } else {
+    return isVertical === true ? 'grid-y' : 'grid-x';
+  }
+}
+
+// Flexbox Utilities
+
+/**
+ * Property types for flexbox utilities.
+ *
+ * @returns {Object}
+ */
+export const FlexboxPropTypes = {
+  alignX: PropTypes.oneOf(objectValues(HorizontalAlignments)),
+  alignY: PropTypes.oneOf(objectValues(VerticalAlignments)),
+  selfAlignX: PropTypes.oneOf(objectValues(HorizontalAlignments)),
+  selfAlignY: PropTypes.oneOf(objectValues(VerticalAlignments)),
+  centerAlign: PropTypes.bool,
+  flexContainer: PropTypes.bool,
+  flexDirRow: PropTypes.oneOf(objectValues(ExtendedBreakpoints)),
+  flexDirRowRev: PropTypes.oneOf(objectValues(ExtendedBreakpoints)),
+  flexDirCol: PropTypes.oneOf(objectValues(ExtendedBreakpoints)),
+  flexDirColRev: PropTypes.oneOf(objectValues(ExtendedBreakpoints)),
+  flexChild: PropTypes.oneOf(objectValues(SpaceControls)),
+  flexOrder: PropTypes.number,
+  flexOrderSmall: PropTypes.number,
+  flexOrderMedium: PropTypes.number,
+  flexOrderLarge: PropTypes.number,
+};
+
+/**
+ * Parses the flexbox class names from the given properties.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export function flexboxClassNames(props) {
+  const flexClassNames = {
+    'flex-container': props.flexContainer,
+    'align-center-middle': props.centerAlign,
+  };
+
+  if (isDefined(props.alignX)) flexClassNames[`align-${props.alignX}`] = true;
+  if (isDefined(props.alignY)) flexClassNames[`align-${props.alignY}`] = true;
+  if (isDefined(props.flexDirRow)) flexClassNames[addBreakpoint('flex-dir-row', props.flexDirRow)] = true;
+  if (isDefined(props.flexDirRowRev)) flexClassNames[addBreakpoint('flex-dir-row-reverse', props.flexDirRowRev)] = true;
+  if (isDefined(props.flexDirCol)) flexClassNames[addBreakpoint('flex-dir-column', props.flexDirCol)] = true;
+  if (isDefined(props.flexDirColRev)) flexClassNames[addBreakpoint('flex-dir-column-reverse', props.flexDirColRev)] = true;
+  if (isDefined(props.flexChild)) flexClassNames[`flex-child-${props.flexChild}`] = true;
+  if (isDefined(props.flexOrder)) flexClassNames[`order-${props.flexOrder}`] = true;
+  if (isDefined(props.flexOrderSmall)) flexClassNames[`small-order-${props.flexOrder}`] = true;
+  if (isDefined(props.flexOrderMedium)) flexClassNames[`medium-order-${props.flexOrder}`] = true;
+  if (isDefined(props.flexOrderLarge)) flexClassNames[`large-order-${props.flexOrder}`] = true;
+
+  return flexClassNames;
+}

No alert changes

Improved metrics

Total package byte prevSize

162904

13.33%

Number of package files

58

3.57%

Lines of code

4369

11.31%

No dependency changes