@flodesk/grain 2.22.1 → 3.0.2

package/es/components/arrange.js

@@ -16,16 +16,16 @@ 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, getResponsiveDimension, getResponsiveSpace } from '../utilities';
+import { getResponsiveDimension, getResponsiveGridColumns, 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  ", ";\n  ", ";\n"])), function (p) {
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  ", ";\n  ", ";\n  ", ";\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);
 }, function (p) {
-  return getGridColumns(p.columns);
+  return getResponsiveGridColumns(p.columns);
 }, function (p) {
   return p.justifyItems;
 }, function (p) {

package/es/components/text-input.js

@@ -68,7 +68,7 @@ var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplate
 var Label = styled.label(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: block;\n  margin-bottom: ", ";\n"])), function (p) {
   return sizesStyles[p.size].labelGap;
 });
-var InputField = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  background-color: transparent;\n  color: inherit;\n  font-size: inherit;\n  transition-property: border-color;\n  border: 1px solid var(--grn-color-fieldBorder);\n  width: 100%;\n  border-radius: ", ";\n  height: ", ";\n  padding: ", ";\n  ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:hover {\n    border-color: var(--grn-color-fieldBorder-hover);\n  }\n\n  &:focus {\n    transition: 0s;\n    border-color: var(--grn-color-grey6);\n  }\n"])), transitions, function (p) {
+var InputField = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  background-color: transparent;\n  color: inherit;\n  font-size: inherit;\n  transition-property: border-color;\n  border: 1px solid var(--grn-color-fieldBorder);\n  width: 100%;\n  border-radius: ", ";\n  height: ", ";\n  padding: ", ";\n  ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:hover {\n    border-color: var(--grn-color-fieldBorder-hover);\n  }\n\n  &:focus {\n    transition: 0s;\n    border-color: var(--grn-color-grey6);\n  }\n"])), transitions, function () {
   return getRadius('s');
 }, function (p) {
   return sizesStyles[p.size].height;

package/es/types.js

@@ -18,7 +18,7 @@ export var types = {
   textAlign: PropTypes.oneOf(['left', 'center', 'right']),
   overflow: PropTypes.oneOf(['visible', 'hidden', 'scroll', 'auto']),
   fieldSize: PropTypes.oneOf(['s', 'm']),
-  columns: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+  columns: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   autoFlow: PropTypes.oneOf(autoFlows),
   gridItemsAlignment: PropTypes.oneOf(gridItemsAlignments),
   gridContentPosition: PropTypes.oneOf(gridContentPositions),

package/es/utilities/index.js

@@ -1,5 +1,6 @@
 export { getDimension } from './responsive';
 export { getResponsiveDimension } from './responsive';
+export { getResponsiveGridColumns } from './responsive';
 export { getColor } from './styles';
 export { getShadow } from './styles';
 export { getTextSize } from './responsive';
@@ -9,7 +10,6 @@ export { getRadius } from './styles';
 export { getTransition } from './styles';
 export { getResponsiveSpace } from './responsive';
 export { getIconSize } from './styles';
-export { getGridColumns } from './styles';
 export { getBorder } from './styles';
 export { isBrowser } from './helpers';
 export { getCssVarCore } from './helpers';

package/es/utilities/responsive.js

@@ -104,4 +104,24 @@ export var getResponsiveTextSize = function getResponsiveTextSize(size) {
   }
 
   return "".concat(property, ": ").concat(getTextSize(size));
+};
+export var mapColumnsToMedia = function mapColumnsToMedia(property, obj) {
+  var declarations = Object.entries(obj).map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+        breakpoint = _ref4[0],
+        value = _ref4[1];
+
+    return getMediaCss(breakpoint, property, value);
+  });
+  return declarations.join('');
+};
+export var getResponsiveGridColumns = function getResponsiveGridColumns(columns) {
+  if (!columns) return;
+  var property = 'grid-template-columns';
+
+  if (isObject(columns)) {
+    return mapColumnsToMedia(property, columns);
+  }
+
+  return "".concat(property, ": ").concat(columns);
 };

package/es/utilities/styles.js

@@ -1,5 +1,5 @@
-import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.object.define-property.js";
 import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.symbol.js";
@@ -16,7 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import { getCssVar, isNumber, isString, u, isArray } from '.';
+import { getCssVar, isNumber, isString, u } from '.';
 import { vars, varInfo } from '../variables';
 import { getDimension } from './responsive';
 
@@ -62,17 +62,6 @@ export var getIconSize = function getIconSize(size) {
 
   return getDimension(size);
 };
-export var getGridColumns = function getGridColumns(columns) {
-  if (columns) {
-    if (isArray(columns)) {
-      return columns.map(function (column) {
-        return getDimension(column);
-      }).join(' ');
-    }
-
-    if (isString(columns)) return columns;
-  }
-};
 export var getBorder = function getBorder(borderSide, borderWidth, borderColor) {
   var borderSides = {
     all: ["top", "right", "bottom", "left"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "2.22.1",
+  "version": "3.0.2",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",
@@ -10,7 +10,7 @@
     "dev": "next dev -p 4000",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint --dir .",
+    "lint": "eslint --ext .js --ext .ts --ext .jsx --ext .mdx .",
     "semantic-release": "semantic-release",
     "build:es": "del es/* && cross-env NODE_ENV=production babel --no-babelrc --config-file ./babel.config.es.js --out-dir es --copy-files src"
   },
@@ -47,6 +47,7 @@
     "eslint-config-next": "12.1.6",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-mdx": "^2.0.2",
     "eslint-plugin-prettier": "^4.2.1",
     "next": "12.1.6",
     "prettier": "^2.7.1",