@flodesk/grain 3.0.1 → 3.1.0

package/es/components/index.js

@@ -8,4 +8,5 @@ export { IconButton } from './icon-button';
 export { TextButton } from './text-button';
 export { IconToggleGroup, IconToggle } from './icon-toggle';
 export { TextToggleGroup, TextToggle } from './text-toggle';
-export { Stack } from './stack';
+export { Stack } from './stack';
+export { Slider } from './slider';

package/es/components/slider.js

@@ -0,0 +1,60 @@
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.freeze.js";
+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 = ["min", "max", "value", "step", "onChange"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import "core-js/modules/es.object.assign.js";
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import { PropTypes } from 'prop-types';
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --trackHeight: 2px;\n  --sliderHeight: 12px;\n  --thumbSize: var(--sliderHeight);\n\n  position: relative;\n\n  &:after {\n    content: '';\n    width: 100%;\n    height: var(--trackHeight);\n    top: 0;\n    bottom: 0;\n    margin: auto;\n    background: linear-gradient(\n      90deg,\n      var(--grn-color-body) 0 var(--value),\n      var(--grn-color-fade2) var(--value) 100%\n    );\n    display: block;\n    position: absolute;\n    z-index: -1;\n    border-radius: 100px;\n  }\n"])));
+var trackStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: var(--sliderHeight);\n  cursor: pointer;\n  background: transparent;\n"])));
+var thumbStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  -webkit-appearance: none;\n  height: var(--thumbSize);\n  width: var(--thumbSize);\n  border-radius: 100px;\n  background: var(--grn-color-body);\n  cursor: pointer;\n"])));
+var InputWrapper = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  -webkit-appearance: none;\n  width: 100%;\n  margin: 0;\n  display: block;\n  background: transparent;\n\n  &::-webkit-slider-runnable-track {\n    ", "\n  }\n  &::-moz-range-track {\n    ", "\n  }\n\n  &::-webkit-slider-thumb {\n    ", "\n  }\n  &::-moz-range-thumb {\n    ", "\n  }\n"])), trackStyles, trackStyles, thumbStyles, thumbStyles);
+export var Slider = function Slider(_ref) {
+  var _ref$min = _ref.min,
+      min = _ref$min === void 0 ? 0 : _ref$min,
+      _ref$max = _ref.max,
+      max = _ref$max === void 0 ? 100 : _ref$max,
+      value = _ref.value,
+      step = _ref.step,
+      onChange = _ref.onChange,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var getPercentage = function getPercentage() {
+    return (value - min) / (max - min) * 100;
+  };
+
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    style: {
+      '--value': "".concat(getPercentage(), "%")
+    }
+  }, /*#__PURE__*/React.createElement(InputWrapper, Object.assign({
+    type: "range",
+    min: min,
+    max: max,
+    value: value,
+    step: step,
+    onChange: onChange
+  }, props)));
+};
+Slider.propTypes = {
+  min: PropTypes.number,
+  max: PropTypes.number,
+  value: PropTypes.number,
+  step: PropTypes.number,
+  onChange: PropTypes.func
+};

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/utilities/responsive.js

@@ -13,7 +13,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.object.entries.js";
-import "core-js/modules/es.array.reverse.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
 import "core-js/modules/es.object.to-string.js";
@@ -40,20 +39,23 @@ export var getMediaCss = function getMediaCss(mediaQuery, property, value) {
   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 checkValueInVars = function checkValueInVars(value) {
+    if (type && value in vars[type]) {
+      var varPrefix = varInfo[type].prefix;
+      return getCssVar(varPrefix, value);
+    }
+
+    return value;
+  };
+
   var declarations = Object.entries(obj).map(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
         mediaQuery = _ref2[0],
         value = _ref2[1];
 
-    if (value in vars[type]) {
-      return getMediaCss(mediaQuery, property, getCssVar(varPrefix, value));
-    }
-
-    return getMediaCss(mediaQuery, property, value);
-  }); // reverse array to make sure max-widths correctly override
-
-  declarations.reverse().join('');
+    return getMediaCss(mediaQuery, property, checkValueInVars(value));
+  });
+  declarations.join('');
   return declarations;
 };
 export var getDimension = function getDimension(dimension) {
@@ -61,14 +63,14 @@ export var getDimension = function getDimension(dimension) {
   if (isString(dimension)) return dimension;
   if (isNumber(dimension)) return u(dimension);
 };
-export var getSpace = function getSpace(value) {
-  if (value in vars.spaces) {
-    return getCssVar(varInfo.spaces.prefix, value);
+export var getSpace = function getSpace(space) {
+  if (space in vars.spaces) {
+    return getCssVar(varInfo.spaces.prefix, space);
   }
 
-  if (value === 0) return value;
-  if (isString(value)) return value;
-  if (isNumber(value)) return u(value);
+  if (space === 0) return space;
+  if (isString(space)) return space;
+  if (isNumber(space)) return u(space);
 };
 export var getResponsiveDimension = function getResponsiveDimension(property, dimension) {
   if (!dimension) return;
@@ -105,22 +107,12 @@ 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 mapObjToMedia(property, columns);
   }
 
   return "".concat(property, ": ").concat(columns);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "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": "eslint .",
+    "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"
   },