@flodesk/grain 4.0.0 → 5.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/es/components/slider.js +1 -1
  2. package/es/components/text-input.js +30 -53
  3. package/package.json +1 -1
package/es/components/slider.js CHANGED
@@ -20,7 +20,7 @@ import { PropTypes } from 'prop-types';
20
20
  import React from 'react';
21
21
  import styled from '@emotion/styled';
22
22
  import { css } from '@emotion/react';
23
- 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"])));
23
+ 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"])));
24
24
  var trackStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n height: var(--sliderHeight);\n cursor: pointer;\n background: transparent;\n"])));
25
25
  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"])));
26
26
  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 CHANGED
@@ -12,7 +12,7 @@ import "core-js/modules/es.string.iterator.js";
12
12
  import "core-js/modules/web.dom-collections.iterator.js";
13
13
  import "core-js/modules/es.array.from.js";
14
14
  import "core-js/modules/es.regexp.exec.js";
15
- var _excluded = ["value", "placeholder", "size", "label", "id", "icon"];
15
+ var _excluded = ["value", "placeholder", "label", "id", "icon", "hasError", "errorMessage"];
16
16
 
17
17
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
18
18
 
@@ -36,58 +36,35 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
36
36
 
37
37
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
38
38
 
39
- import { getColor, getRadius, getTextSize } from '../utilities';
39
+ import { getColor, getRadius } from '../utilities';
40
40
  import PropTypes from 'prop-types';
41
41
  import React from 'react';
42
42
  import styled from '@emotion/styled';
43
- import { types } from '../types';
44
43
  import { css } from '@emotion/react';
45
- import { Box } from './box';
44
+ import { Box, Text } from '.';
46
45
  import { Icon } from './icon';
47
46
  import { transitions } from '../foundational';
48
- var variables = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n --grn-color-fieldBorder: var(--grn-color-fade3);\n --grn-color-fieldBorder-hover: var(--grn-color-fade6);\n"])));
49
- var sizesStyles = {
50
- s: {
51
- height: 'var(--grn-textBoxHeight-s)',
52
- padding: '0 8px',
53
- labelGap: '2px',
54
- iconOffsetPx: 8,
55
- iconTextGapPx: 4
56
- },
57
- m: {
58
- height: 'var(--grn-textBoxHeight-m)',
59
- padding: '0 12px',
60
- labelGap: '4px',
61
- iconOffsetPx: 12,
62
- iconTextGapPx: 8
63
- }
64
- };
65
- var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", ";\n font-size: ", ";\n"])), variables, function (p) {
66
- return getTextSize(p.size);
67
- });
68
- var Label = styled.label(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: block;\n margin-bottom: ", ";\n"])), function (p) {
69
- return sizesStyles[p.size].labelGap;
70
- });
71
- 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 () {
72
- return getRadius('s');
47
+ 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"])));
48
+ var iconOffsetPx = 12;
49
+ var iconTextGapPx = 8;
50
+ var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", ";\n"])), variables);
51
+ var Label = styled.label(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: block;\n margin-bottom: 4px;\n"])));
52
+ 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) {
53
+ return p.paddingLeft;
73
54
  }, function (p) {
74
- return sizesStyles[p.size].height;
75
- }, function (p) {
76
- return sizesStyles[p.size].padding;
77
- }, function (p) {
78
- return p.paddingLeft && "padding-left: ".concat(p.paddingLeft, "px");
79
- }, getColor('grey5'));
80
- 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) {
81
- return sizesStyles[p.size].iconOffsetPx;
55
+ return p.hasError ? 'var(--grn-color-danger)' : 'var(--grn-fieldBorderColor)';
56
+ }, getColor('grey5'), function (p) {
57
+ 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 ";
82
58
  });
59
+ 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);
83
60
  export var TextInput = function TextInput(_ref) {
84
61
  var value = _ref.value,
85
62
  placeholder = _ref.placeholder,
86
- _ref$size = _ref.size,
87
- size = _ref$size === void 0 ? 'm' : _ref$size,
88
63
  label = _ref.label,
89
64
  id = _ref.id,
90
65
  icon = _ref.icon,
66
+ hasError = _ref.hasError,
67
+ errorMessage = _ref.errorMessage,
91
68
  props = _objectWithoutProperties(_ref, _excluded);
92
69
 
93
70
  var iconRef = React.useRef(null);
@@ -102,36 +79,36 @@ export var TextInput = function TextInput(_ref) {
102
79
  setIconWidth(iconRef.current.getBoundingClientRect().width);
103
80
  }
104
81
  }, []);
105
- var paddingLeft = icon && sizesStyles[size].iconOffsetPx + iconWidth + sizesStyles[size].iconTextGapPx;
82
+ var paddingLeft = icon ? "".concat(iconOffsetPx + iconWidth + iconTextGapPx, "px") : "var(--grn-fieldXPadding)";
106
83
  return /*#__PURE__*/React.createElement(Wrapper, {
107
- size: size,
108
84
  type: "text"
109
85
  }, label && /*#__PURE__*/React.createElement(Label, {
110
- htmlFor: id,
111
- size: size
86
+ htmlFor: id
112
87
  }, label), /*#__PURE__*/React.createElement(Box, {
113
88
  position: "relative"
114
- }, icon && /*#__PURE__*/React.createElement(IconSection, {
115
- size: size
116
- }, /*#__PURE__*/React.createElement(Icon, {
89
+ }, icon && /*#__PURE__*/React.createElement(IconSection, null, /*#__PURE__*/React.createElement(Icon, {
117
90
  ref: iconRef,
118
- icon: icon,
119
- size: size
91
+ icon: icon
120
92
  })), /*#__PURE__*/React.createElement(InputField, Object.assign({
121
93
  value: value,
122
94
  placeholder: placeholder,
123
- size: size,
124
95
  label: label,
125
96
  icon: icon,
126
97
  id: id,
127
- paddingLeft: paddingLeft
128
- }, props))));
98
+ paddingLeft: paddingLeft,
99
+ hasError: hasError
100
+ }, props))), errorMessage && /*#__PURE__*/React.createElement(Box, {
101
+ marginTop: 0.5
102
+ }, /*#__PURE__*/React.createElement(Text, {
103
+ color: "danger"
104
+ }, errorMessage)));
129
105
  };
130
106
  TextInput.propTypes = {
131
107
  id: PropTypes.string.isRequired,
132
108
  placeholder: PropTypes.string,
133
109
  value: PropTypes.string,
134
- size: types.fieldSize,
135
110
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
136
- icon: PropTypes.node
111
+ icon: PropTypes.node,
112
+ hasError: PropTypes.bool,
113
+ errorMessage: PropTypes.string
137
114
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flodesk/grain",
3
- "version": "4.0.0",
3
+ "version": "5.1.1",
4
4
  "description": "Flodesk design system",
5
5
  "module": "es/index.js",
6
6
  "author": "Flodesk",