@flodesk/grain 5.0.0 → 5.1.2

package/es/components/slider.js

@@ -20,7 +20,7 @@ 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    border-radius: 100px;\n  }\n"])));
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --trackHeight: 2px;\n  --sliderHeight: 16px;\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    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);

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", "label", "id", "icon"];
+var _excluded = ["value", "placeholder", "label", "id", "icon", "hasError", "errorMessage"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
@@ -41,19 +41,21 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-import { Box } from './box';
+import { Box, Text } from '.';
 import { Icon } from './icon';
 import { transitions } from '../foundational';
-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 variables = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --grn-fieldBorderColor: var(--grn-color-fade3);\n  --grn-fieldBorderColor-hover: var(--grn-color-fade6);\n  --grn-fieldBorderColor-focus: var(--grn-color-grey6);\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) {
+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  width: 100%;\n  border-radius: ", ";\n  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-fieldXPadding) 0 ", ";\n  outline: none;\n  border: 1px solid ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  ", "\n"])), transitions, getRadius('s'), function (p) {
   return p.paddingLeft;
-}, getColor('grey5'));
+}, function (p) {
+  return p.hasError ? 'var(--grn-color-danger)' : 'var(--grn-fieldBorderColor)';
+}, getColor('grey5'), function (p) {
+  return !p.hasError && "\n    &:hover {\n      border-color: var(--grn-fieldBorderColor-hover);\n    }\n\n    &:focus {\n      transition: 0s;\n      border-color: var(--grn-fieldBorderColor-focus);\n    }\n  ";
+});
 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,
@@ -61,6 +63,8 @@ export var TextInput = function TextInput(_ref) {
       label = _ref.label,
       id = _ref.id,
       icon = _ref.icon,
+      hasError = _ref.hasError,
+      errorMessage = _ref.errorMessage,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var iconRef = React.useRef(null);
@@ -91,13 +95,20 @@ export var TextInput = function TextInput(_ref) {
     label: label,
     icon: icon,
     id: id,
-    paddingLeft: paddingLeft
-  }, props))));
+    paddingLeft: paddingLeft,
+    hasError: hasError
+  }, props))), errorMessage && /*#__PURE__*/React.createElement(Box, {
+    marginTop: 0.5
+  }, /*#__PURE__*/React.createElement(Text, {
+    color: "danger"
+  }, errorMessage)));
 };
 TextInput.propTypes = {
   id: PropTypes.string.isRequired,
   placeholder: PropTypes.string,
   value: PropTypes.string,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  icon: PropTypes.node
+  icon: PropTypes.node,
+  hasError: PropTypes.bool,
+  errorMessage: PropTypes.string
 };

package/es/components/text.js

@@ -43,7 +43,8 @@ export var Text = function Text(_ref) {
       _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? 'normal' : _ref$weight,
       color = _ref.color,
-      tag = _ref.tag,
+      _ref$tag = _ref.tag,
+      tag = _ref$tag === void 0 ? 'span' : _ref$tag,
       hasEllipsis = _ref.hasEllipsis,
       ellipsisLines = _ref.ellipsisLines,
       align = _ref.align,
@@ -64,7 +65,7 @@ Text.propTypes = {
   weight: types.weight,
   color: types.color,
   align: types.textAlign,
-  tag: PropTypes.string,
+  tag: types.textTag,
   hasEllipsis: PropTypes.bool,
   ellipsisLines: PropTypes.number
 };

package/es/types.js

@@ -18,6 +18,7 @@ export var types = {
   textAlign: PropTypes.oneOf(['left', 'center', 'right']),
   overflow: PropTypes.oneOf(['visible', 'hidden', 'scroll', 'auto']),
   fieldSize: PropTypes.oneOf(['s', 'm']),
+  textTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span']),
   columns: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   autoFlow: PropTypes.oneOf(autoFlows),
   gridItemsAlignment: PropTypes.oneOf(gridItemsAlignments),

package/package.json

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