@flodesk/grain 3.1.1 → 5.0.0

package/es/components/text-input.js

@@ -12,7 +12,7 @@ import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.regexp.exec.js";
-var _excluded = ["value", "placeholder", "size", "label", "id", "icon"];
+var _excluded = ["value", "placeholder", "label", "id", "icon"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
@@ -36,55 +36,28 @@ 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 { getColor, getRadius, getTextSize } from '../utilities';
+import { getColor, getRadius } from '../utilities';
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from '@emotion/styled';
-import { types } from '../types';
 import { css } from '@emotion/react';
 import { Box } from './box';
 import { Icon } from './icon';
 import { transitions } from '../foundational';
-var variables = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --grn-color-fieldBorder: var(--grn-color-fade3);\n  --grn-color-fieldBorder-hover: var(--grn-color-fade6);\n"])));
-var sizesStyles = {
-  s: {
-    height: 'var(--grn-textBoxHeight-s)',
-    padding: '0 8px',
-    labelGap: '2px',
-    iconOffsetPx: 8,
-    iconTextGapPx: 4
-  },
-  m: {
-    height: 'var(--grn-textBoxHeight-m)',
-    padding: '0 12px',
-    labelGap: '4px',
-    iconOffsetPx: 12,
-    iconTextGapPx: 8
-  }
-};
-var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  font-size: ", ";\n"])), variables, function (p) {
-  return getTextSize(p.size);
-});
-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 () {
+var variables = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --grn-fieldBorderColor: var(--grn-color-fade3);\n  --grn-fieldBorderColor-hover: var(--grn-color-fade6);\n  --grn-fieldXPadding: 12px;\n"])));
+var iconOffsetPx = 12;
+var iconTextGapPx = 8;
+var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n"])), variables);
+var Label = styled.label(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: block;\n  margin-bottom: 4px;\n"])));
+var InputField = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  appearance: none;\n  border: none;\n  font: inherit;\n  color: inherit;\n  background-color: transparent;\n  transition-property: border-color;\n  border: 1px solid var(--grn-fieldBorderColor);\n  width: 100%;\n  border-radius: ", ";\n  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-fieldXPadding) 0 ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:hover {\n    border-color: var(--grn-fieldBorderColor-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;
-}, function (p) {
-  return sizesStyles[p.size].padding;
-}, function (p) {
-  return p.paddingLeft && "padding-left: ".concat(p.paddingLeft, "px");
+  return p.paddingLeft;
 }, getColor('grey5'));
-var IconSection = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  margin: auto;\n  left: ", "px;\n  top: 0;\n  bottom: 0;\n  height: fit-content;\n  pointer-events: none;\n"])), function (p) {
-  return sizesStyles[p.size].iconOffsetPx;
-});
+var IconSection = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  margin: auto;\n  left: ", "px;\n  top: 0;\n  bottom: 0;\n  height: fit-content;\n  pointer-events: none;\n"])), iconOffsetPx);
 export var TextInput = function TextInput(_ref) {
   var value = _ref.value,
       placeholder = _ref.placeholder,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'm' : _ref$size,
       label = _ref.label,
       id = _ref.id,
       icon = _ref.icon,
@@ -102,25 +75,19 @@ export var TextInput = function TextInput(_ref) {
       setIconWidth(iconRef.current.getBoundingClientRect().width);
     }
   }, []);
-  var paddingLeft = icon && sizesStyles[size].iconOffsetPx + iconWidth + sizesStyles[size].iconTextGapPx;
+  var paddingLeft = icon ? "".concat(iconOffsetPx + iconWidth + iconTextGapPx, "px") : "var(--grn-fieldXPadding)";
   return /*#__PURE__*/React.createElement(Wrapper, {
-    size: size,
     type: "text"
   }, label && /*#__PURE__*/React.createElement(Label, {
-    htmlFor: id,
-    size: size
+    htmlFor: id
   }, label), /*#__PURE__*/React.createElement(Box, {
     position: "relative"
-  }, icon && /*#__PURE__*/React.createElement(IconSection, {
-    size: size
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, icon && /*#__PURE__*/React.createElement(IconSection, null, /*#__PURE__*/React.createElement(Icon, {
     ref: iconRef,
-    icon: icon,
-    size: size
+    icon: icon
   })), /*#__PURE__*/React.createElement(InputField, Object.assign({
     value: value,
     placeholder: placeholder,
-    size: size,
     label: label,
     icon: icon,
     id: id,
@@ -131,7 +98,6 @@ TextInput.propTypes = {
   id: PropTypes.string.isRequired,
   placeholder: PropTypes.string,
   value: PropTypes.string,
-  size: types.fieldSize,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   icon: PropTypes.node
 };

package/es/index.js

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './icons';
-export * from './variables';
+export * from './variables';
+export * from './utilities';

package/es/utilities/helpers.js

@@ -8,10 +8,12 @@ import "core-js/modules/es.symbol.iterator.js";
 import "core-js/modules/es.array.iterator.js";
 import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/web.dom-collections.iterator.js";
-import { grnPrefix } from '../variables';
+import { grnPrefix, varInfo } from '../variables';
 export var isBrowser = typeof window !== 'undefined';
 export var getCssVarCore = function getCssVarCore(type, value) {
-  return "".concat(grnPrefix).concat(type, "-").concat(value);
+  var typeInfo = varInfo[type];
+  var prefix = typeInfo ? typeInfo.prefix : type;
+  return "".concat(grnPrefix).concat(prefix, "-").concat(value);
 };
 export var getCssVar = function getCssVar(type, value) {
   return "var(".concat(getCssVarCore(type, value), ")");

package/es/utilities/index.js

@@ -1,21 +1,3 @@
-export { getDimension } from './responsive';
-export { getResponsiveDimension } from './responsive';
-export { getResponsiveGridColumns } from './responsive';
-export { getColor } from './styles';
-export { getShadow } from './styles';
-export { getTextSize } from './responsive';
-export { getResponsiveTextSize } from './responsive';
-export { getWeight } from './styles';
-export { getRadius } from './styles';
-export { getTransition } from './styles';
-export { getResponsiveSpace } from './responsive';
-export { getIconSize } from './styles';
-export { getBorder } from './styles';
-export { isBrowser } from './helpers';
-export { getCssVarCore } from './helpers';
-export { getCssVar } from './helpers';
-export { u } from './helpers';
-export { isNumber } from './helpers';
-export { isString } from './helpers';
-export { isArray } from './helpers';
-export { isObject } from './helpers';
+export * from './helpers';
+export * from './responsive';
+export * from './styles';

package/es/utilities/responsive.js

@@ -41,8 +41,7 @@ export var getMediaCss = function getMediaCss(mediaQuery, property, value) {
 export var mapObjToMedia = function mapObjToMedia(property, obj, type) {
   var checkValueInVars = function checkValueInVars(value) {
     if (type && value in vars[type]) {
-      var varPrefix = varInfo[type].prefix;
-      return getCssVar(varPrefix, value);
+      return getCssVar(varInfo[type].name, value);
     }
 
     return value;
@@ -65,7 +64,7 @@ export var getDimension = function getDimension(dimension) {
 };
 export var getSpace = function getSpace(space) {
   if (space in vars.spaces) {
-    return getCssVar(varInfo.spaces.prefix, space);
+    return getCssVar(varInfo.spaces.name, space);
   }
 
   if (space === 0) return space;
@@ -92,7 +91,7 @@ export var getResponsiveSpace = function getResponsiveSpace(property, space) {
 };
 export var getTextSize = function getTextSize(size) {
   if (size in vars.texts) {
-    return getCssVar(varInfo.texts.prefix, size);
+    return getCssVar(varInfo.texts.name, size);
   }
 
   if (isString(size)) return size;

package/es/utilities/styles.js

@@ -1,49 +1,30 @@
 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";
-import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.object.get-own-property-descriptor.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.object.get-own-property-descriptors.js";
-import "core-js/modules/es.object.define-properties.js";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-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 } from '.';
 import { vars, varInfo } from '../variables';
 import { getDimension } from './responsive';
-
-var allColors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, vars.colors.bases), vars.colors.greys), vars.colors.semantics), vars.colors.fades);
-
 export var getColor = function getColor(color) {
-  if (color in allColors) {
-    return getCssVar(varInfo.colors.prefix, color);
+  if (color in vars.colors) {
+    return getCssVar(varInfo.colors.name, color);
   }
 
   return color;
 };
 export var getShadow = function getShadow(shadow) {
   if (shadow in vars.shadows) {
-    return getCssVar(varInfo.shadows.prefix, shadow);
+    return getCssVar(varInfo.shadows.name, shadow);
   }
 
   return shadow;
 };
 export var getWeight = function getWeight(weight) {
   if (weight in vars.weights) {
-    return getCssVar(varInfo.weights.prefix, weight);
+    return getCssVar(varInfo.weights.name, weight);
   }
 };
 export var getRadius = function getRadius(radius) {
   if (radius in vars.radii) {
-    return getCssVar(varInfo.radii.prefix, radius);
+    return getCssVar(varInfo.radii.name, radius);
   }
 
   if (radius === 0) return radius;
@@ -52,12 +33,12 @@ export var getRadius = function getRadius(radius) {
 };
 export var getTransition = function getTransition(transition) {
   if (transition in vars.transitions) {
-    return getCssVar(varInfo.transitions.prefix, transition);
+    return getCssVar(varInfo.transitions.name, transition);
   }
 };
 export var getIconSize = function getIconSize(size) {
   if (size in vars.icons) {
-    return getCssVar(varInfo.icons.prefix, size);
+    return getCssVar(varInfo.icons.name, size);
   }
 
   return getDimension(size);

package/es/variables.js

@@ -1,4 +1,58 @@
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.define-properties.js";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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; }
+
 export var grnPrefix = '--grn-';
+export var colors = {
+  greys: {
+    grey8: 'grey8',
+    grey7: 'grey7',
+    grey6: 'grey6',
+    grey5: 'grey5',
+    grey4: 'grey4',
+    grey3: 'grey3',
+    grey2: 'grey2',
+    grey1: 'grey1'
+  },
+  fades: {
+    fade7: 'fade7',
+    fade6: 'fade6',
+    fade5: 'fade5',
+    fade4: 'fade4',
+    fade3: 'fade3',
+    fade2: 'fade2',
+    fade1: 'fade1'
+  },
+  bases: {
+    blue: 'blue',
+    red: 'red'
+  },
+  semantics: {
+    body: 'body',
+    bodyDimmed: 'bodyDimmed',
+    accent: 'accent',
+    backgroundSecondary: 'backgroundSecondary',
+    background: 'background',
+    overlay: 'overlay',
+    border: 'border',
+    selection: 'selection',
+    danger: 'danger',
+    disabledContent: 'disabledContent',
+    disabledBackground: 'disabledBackground'
+  }
+};
 export var vars = {
   texts: {
     s: 's',
@@ -42,44 +96,7 @@ export var vars = {
     fast: 'fast',
     xFast: 'xFast'
   },
-  colors: {
-    greys: {
-      grey8: 'grey8',
-      grey7: 'grey7',
-      grey6: 'grey6',
-      grey5: 'grey5',
-      grey4: 'grey4',
-      grey3: 'grey3',
-      grey2: 'grey2',
-      grey1: 'grey1'
-    },
-    fades: {
-      fade7: 'fade7',
-      fade6: 'fade6',
-      fade5: 'fade5',
-      fade4: 'fade4',
-      fade3: 'fade3',
-      fade2: 'fade2',
-      fade1: 'fade1'
-    },
-    bases: {
-      blue: 'blue',
-      red: 'red'
-    },
-    semantics: {
-      body: 'body',
-      bodyDimmed: 'bodyDimmed',
-      accent: 'accent',
-      backgroundSecondary: 'backgroundSecondary',
-      background: 'background',
-      overlay: 'overlay',
-      border: 'border',
-      selection: 'selection',
-      danger: 'danger',
-      disabledContent: 'disabledContent',
-      disabledBackground: 'disabledBackground'
-    }
-  }
+  colors: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colors.greys), colors.fades), colors.bases), colors.semantics)
 };
 export var varInfo = {
   texts: {

package/package.json

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