@flodesk/grain 2.20.4 → 2.22.1

package/es/components/arrange.js

@@ -4,7 +4,7 @@ import "core-js/modules/es.object.define-properties.js";
 import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.symbol.js";
-var _excluded = ["children", "gap", "columns", "autoFlow", "justifyItems", "alignItems", "justifyContent", "alignContent", "placeItems", "placeContent"];
+var _excluded = ["children", "gap", "alignItems", "justifyItems", "justifyContent", "alignContent", "columns", "autoFlow", "width", "height"];
 
 var _templateObject;
 
@@ -16,11 +16,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-import { getGridColumns, getResponsiveSpace } from '../utilities';
+import { getGridColumns, getResponsiveDimension, getResponsiveSpace } from '../utilities';
 import React from 'react';
 import styled from '@emotion/styled';
 import { types } from '../types';
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  ", ";\n  ", ";\n  grid-template-columns: ", ";\n  justify-items: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  align-content: ", ";\n  place-items: ", ";\n  place-content: ", ";\n"])), function (p) {
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  ", ";\n  ", ";\n  grid-template-columns: ", ";\n  justify-items: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  align-content: ", ";\n  ", ";\n  ", ";\n"])), function (p) {
   return !p.columns && "grid-auto-flow: ".concat(p.autoFlow);
 }, function (p) {
   return getResponsiveSpace('gap', p.gap);
@@ -35,46 +35,46 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
 }, function (p) {
   return p.alignContent;
 }, function (p) {
-  return p.placeItems;
+  return getResponsiveDimension('width', p.width);
 }, function (p) {
-  return p.placeContent;
+  return getResponsiveDimension('height', p.height);
 });
 export var Arrange = function Arrange(_ref) {
   var children = _ref.children,
       gap = _ref.gap,
-      columns = _ref.columns,
-      _ref$autoFlow = _ref.autoFlow,
-      autoFlow = _ref$autoFlow === void 0 ? 'column' : _ref$autoFlow,
-      justifyItems = _ref.justifyItems,
       _ref$alignItems = _ref.alignItems,
       alignItems = _ref$alignItems === void 0 ? 'center' : _ref$alignItems,
+      justifyItems = _ref.justifyItems,
       _ref$justifyContent = _ref.justifyContent,
       justifyContent = _ref$justifyContent === void 0 ? 'start' : _ref$justifyContent,
       alignContent = _ref.alignContent,
-      placeItems = _ref.placeItems,
-      placeContent = _ref.placeContent,
+      columns = _ref.columns,
+      _ref$autoFlow = _ref.autoFlow,
+      autoFlow = _ref$autoFlow === void 0 ? 'column' : _ref$autoFlow,
+      width = _ref.width,
+      height = _ref.height,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
     gap: gap,
     columns: columns,
     autoFlow: autoFlow,
-    justifyItems: justifyItems,
     alignItems: alignItems,
+    justifyItems: justifyItems,
     justifyContent: justifyContent,
     alignContent: alignContent,
-    placeItems: placeItems,
-    placeContent: placeContent
+    width: width,
+    height: height
   }, props), children);
 };
 Arrange.propTypes = {
   gap: types.space,
   columns: types.columns,
   autoFlow: types.autoFlow,
-  justifyItems: types.gridItemsAlignments,
-  alignItems: types.gridItemsAlignments,
-  justifyContent: types.gridContentPositions,
-  alignContent: types.gridContentPositions,
-  placeItems: types.gridItemsAlignments,
-  placeContent: types.gridContentPositions
+  alignItems: types.gridItemsAlignment,
+  justifyItems: types.gridItemsAlignment,
+  justifyContent: types.gridContentPosition,
+  alignContent: types.gridContentPosition,
+  width: types.dimension,
+  height: types.dimension
 };

package/es/types.js

@@ -1,12 +1,15 @@
 import "core-js/modules/es.object.keys.js";
 import PropTypes from 'prop-types';
 import { vars } from './variables';
+export var gridContentPositions = ['start', 'end', 'center', 'stretch', 'space-around', 'space-between', 'space-evenly'];
+export var gridItemsAlignments = ['start', 'end', 'center', 'stretch'];
+export var autoFlows = ['column', 'row'];
 export var types = {
   color: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.colors)), PropTypes.string]),
   space: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.spaces)), PropTypes.number, PropTypes.string, PropTypes.object]),
   dimension: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
   side: PropTypes.oneOf(['all', 'left', 'right', 'top', 'bottom', 'x', 'y']),
-  radius: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.radii)), PropTypes.string]),
+  radius: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.radii)), PropTypes.string, PropTypes.number]),
   shadow: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.shadows)), PropTypes.string]),
   position: PropTypes.oneOf(['static', 'relative', 'fixed', 'absolute', 'sticky']),
   textSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.texts)), PropTypes.string, PropTypes.object]),
@@ -16,8 +19,8 @@ export var types = {
   overflow: PropTypes.oneOf(['visible', 'hidden', 'scroll', 'auto']),
   fieldSize: PropTypes.oneOf(['s', 'm']),
   columns: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-  autoFlow: PropTypes.oneOf(['column', 'row']),
-  gridItemsAlignments: PropTypes.oneOf(['start', 'end', 'center', 'stretch']),
-  gridContentPositions: PropTypes.oneOf(['start', 'end', 'center', 'stretch', 'space-around', 'space-between', 'space-evenly']),
+  autoFlow: PropTypes.oneOf(autoFlows),
+  gridItemsAlignment: PropTypes.oneOf(gridItemsAlignments),
+  gridContentPosition: PropTypes.oneOf(gridContentPositions),
   icon: PropTypes.node
 };

package/es/utilities/responsive.js

@@ -26,31 +26,31 @@ import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.regexp.exec.js";
 import { getCssVar, isNumber, isString, u, isObject } from '.';
 import { vars, varInfo } from '../variables';
-export var getMediaCss = function getMediaCss(breakpoint, property, value) {
+export var getMediaCss = function getMediaCss(mediaQuery, property, value) {
   var getValue = function getValue(val) {
     if (val === 0) return val;
     if (isNumber(val)) return u(val);
     if (isString(val)) return val;
   };
 
-  if (breakpoint === 'default') {
+  if (mediaQuery === 'default') {
     return "".concat(property, ": ").concat(getValue(value), ";");
   }
 
-  return "\n    @media ".concat(breakpoint, " {\n      ").concat(property, ": ").concat(getValue(value), ";\n    }\n  ");
+  return "\n    ".concat(mediaQuery, " {\n      ").concat(property, ": ").concat(getValue(value), ";\n    }\n  ");
 };
 export var mapObjToMedia = function mapObjToMedia(property, obj, type) {
   var varPrefix = varInfo[type].prefix;
   var declarations = Object.entries(obj).map(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
-        breakpoint = _ref2[0],
+        mediaQuery = _ref2[0],
         value = _ref2[1];
 
     if (value in vars[type]) {
-      return getMediaCss(breakpoint, property, getCssVar(varPrefix, value));
+      return getMediaCss(mediaQuery, property, getCssVar(varPrefix, value));
     }
 
-    return getMediaCss(breakpoint, property, value);
+    return getMediaCss(mediaQuery, property, value);
   }); // reverse array to make sure max-widths correctly override
 
   declarations.reverse().join('');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "2.20.4",
+  "version": "2.22.1",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",