@flodesk/grain 2.14.1 → 2.15.0

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/icon.js +28 -5
  2. package/es/components/text-input.js +89 -16
  3. package/package.json +1 -1
package/es/components/icon.js CHANGED
@@ -17,37 +17,52 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
17
17
 
18
18
  var _utilities = require("../utilities");
19
19
 
20
+ var _propTypes = require("prop-types");
21
+
20
22
  var _react = _interopRequireDefault(require("react"));
21
23
 
22
24
  var _styled = _interopRequireDefault(require("@emotion/styled"));
23
25
 
24
26
  var _types = require("../types");
25
27
 
26
- var _excluded = ["icon", "size", "color"];
28
+ var _excluded = ["icon", "size", "color", "hasEvenBoundary"];
27
29
 
28
30
  var _templateObject;
29
31
 
30
32
  var __jsx = _react.default.createElement;
31
33
 
32
- var Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n width: fit-content;\n color: ", ";\n \n svg {\n display: block;\n height: ", ";\n }\n"])), function (p) {
34
+ var Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n width: ", ";\n color: ", ";\n \n svg {\n display: block;\n height: ", ";\n ", ";\n }\n"])), function (p) {
35
+ return (0, _utilities.getColor)(p.color);
36
+ }, function (p) {
33
37
  return (0, _utilities.getColor)(p.color);
34
38
  }, function (p) {
35
39
  return (0, _utilities.getIconSize)(p.size);
40
+ }, function (p) {
41
+ return p.hasEvenBoundary && "width: ".concat((0, _utilities.getIconSize)(p.size));
36
42
  });
37
43
 
38
- var Icon = function Icon(_ref) {
44
+ var Icon = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
39
45
  var icon = _ref.icon,
40
46
  _ref$size = _ref.size,
41
47
  size = _ref$size === void 0 ? 'm' : _ref$size,
42
48
  color = _ref.color,
49
+ hasEvenBoundary = _ref.hasEvenBoundary,
43
50
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
44
51
  return __jsx(Wrapper, (0, _extends2.default)({
45
52
  size: size,
46
- color: color
53
+ color: color,
54
+ hasEvenBoundary: hasEvenBoundary,
55
+ ref: ref
47
56
  }, props), icon && icon);
48
- };
57
+ });
49
58
 
50
59
  exports.Icon = Icon;
60
+ Icon.propTypes = {
61
+ icon: _propTypes.PropTypes.node,
62
+ hasEvenBoundary: _propTypes.PropTypes.boolean,
63
+ size: _types.types.iconSize,
64
+ color: _types.types.color
65
+ };
51
66
  Icon.__docgenInfo = {
52
67
  "description": "",
53
68
  "methods": [],
@@ -94,6 +109,14 @@ Icon.__docgenInfo = {
94
109
  "required": false,
95
110
  "description": ""
96
111
  },
112
+ "hasEvenBoundary": {
113
+ "type": {
114
+ "name": "custom",
115
+ "raw": "PropTypes.boolean"
116
+ },
117
+ "required": false,
118
+ "description": ""
119
+ },
97
120
  "color": {
98
121
  "type": {
99
122
  "name": "union",
package/es/components/text-input.js CHANGED
@@ -11,6 +11,8 @@ exports.TextInput = void 0;
11
11
 
12
12
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
13
 
14
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
+
14
16
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
15
17
 
16
18
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -25,33 +27,59 @@ var _types = require("../types");
25
27
 
26
28
  var _react2 = require("@emotion/react");
27
29
 
28
- var _excluded = ["value", "placeholder", "size", "label", "id"];
30
+ var _box = require("./box");
31
+
32
+ var _icon = require("./icon");
29
33
 
30
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
34
+ var _excluded = ["value", "placeholder", "size", "label", "id", "icon"];
35
+
36
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
31
37
 
32
38
  var __jsx = _react.default.createElement;
33
39
  var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n --grn-fieldTextBoxPaddingX-s: 8px;\n --grn-fieldTextBoxPaddingX-m: 12px;\n --grn-color-fieldBorder: var(--grn-color-fade3);\n --grn-color-fieldBorder-hover: var(--grn-color-fade6);\n"])));
34
- var inputSizes = {
35
- s: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: var(--grn-textBoxHeight-s);\n padding: 0 var(--grn-fieldTextBoxPaddingX-s);\n border-radius: ", ";\n "])), (0, _utilities.getRadius)('xs')),
36
- m: (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n height: var(--grn-textBoxHeight-m);\n padding: 0 var(--grn-fieldTextBoxPaddingX-m);\n border-radius: ", ";\n "])), (0, _utilities.getRadius)('s'))
40
+ var inputSizesStyles = {
41
+ s: {
42
+ height: 'var(--grn-textBoxHeight-s)',
43
+ padding: '0 var(--grn-fieldTextBoxPaddingX-s)',
44
+ borderRadius: (0, _utilities.getRadius)('xs')
45
+ },
46
+ m: {
47
+ height: 'var(--grn-textBoxHeight-m)',
48
+ padding: '0 var(--grn-fieldTextBoxPaddingX-m)',
49
+ borderRadius: (0, _utilities.getRadius)('s')
50
+ }
37
51
  };
38
- var labelSizes = {
39
- s: '2px',
40
- m: 'xs'
52
+ var sizesStyles = {
53
+ s: {
54
+ labelGap: 2,
55
+ iconOffset: 8,
56
+ iconTextGap: 4
57
+ },
58
+ m: {
59
+ labelGap: 4,
60
+ iconOffset: 12,
61
+ iconTextGap: 8
62
+ }
41
63
  };
42
64
 
43
- var Wrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n font-size: ", ";\n"])), variables, function (p) {
65
+ var Wrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n font-size: ", ";\n"])), variables, function (p) {
44
66
  return (0, _utilities.getTextSize)(p.size);
45
67
  });
46
68
 
47
- var Label = _styled.default.label(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n margin-bottom: ", ";\n"])), function (p) {
48
- return (0, _utilities.getSpace)(labelSizes[p.size]);
69
+ var Label = _styled.default.label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n margin-bottom: ", "px;\n"])), function (p) {
70
+ return sizesStyles[p.size].labelGap;
49
71
  });
50
72
 
51
- var InputField = _styled.default.input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n appearance: none;\n border: none;\n font-family: inherit;\n background-color: transparent;\n color: inherit;\n font-size: inherit;\n transition: ", ";\n border: 1px solid var(--grn-color-fieldBorder);\n width: 100%;\n ", ";\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n &:hover {\n transition: ", ";\n border-color: var(--grn-color-fieldBorder-hover);\n }\n \n &:focus {\n transition: 0s;\n border-color: var(--grn-color-selection);\n }\n"])), (0, _utilities.getTransition)('slow'), function (p) {
52
- return inputSizes[p.size];
73
+ var InputField = _styled.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n appearance: none;\n border: none;\n font-family: inherit;\n background-color: transparent;\n color: inherit;\n font-size: inherit;\n transition: border-color ", ";\n border: 1px solid var(--grn-color-fieldBorder);\n width: 100%;\n ", ";\n ", ";\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n &:hover {\n transition: ", ";\n border-color: var(--grn-color-fieldBorder-hover);\n }\n \n &:focus {\n transition: 0s;\n border-color: var(--grn-color-selection);\n }\n"])), (0, _utilities.getTransition)('slow'), function (p) {
74
+ return inputSizesStyles[p.size];
75
+ }, function (p) {
76
+ return p.paddingLeft && "padding-left: ".concat(p.paddingLeft, "px");
53
77
  }, (0, _utilities.getColor)('grey5'), (0, _utilities.getTransition)('fast'));
54
78
 
79
+ var IconSection = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n margin: auto;\n left: ", "px;\n top: 0; \n bottom: 0;\n height: fit-content;\n"])), function (p) {
80
+ return sizesStyles[p.size].iconOffset;
81
+ });
82
+
55
83
  var TextInput = function TextInput(_ref) {
56
84
  var value = _ref.value,
57
85
  placeholder = _ref.placeholder,
@@ -59,20 +87,46 @@ var TextInput = function TextInput(_ref) {
59
87
  size = _ref$size === void 0 ? 'm' : _ref$size,
60
88
  label = _ref.label,
61
89
  id = _ref.id,
90
+ icon = _ref.icon,
62
91
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
92
+
93
+ var iconRef = _react.default.useRef(null);
94
+
95
+ var _React$useState = _react.default.useState(),
96
+ _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
97
+ iconWidth = _React$useState2[0],
98
+ setIconWidth = _React$useState2[1];
99
+
100
+ _react.default.useEffect(function () {
101
+ if (iconRef.current) {
102
+ setIconWidth(iconRef.current.getBoundingClientRect().width);
103
+ }
104
+ }, []);
105
+
106
+ var paddingLeft = icon && sizesStyles[size].iconOffset + iconWidth + sizesStyles[size].iconTextGap;
63
107
  return __jsx(Wrapper, {
64
108
  size: size,
65
109
  type: "text"
66
110
  }, label && __jsx(Label, {
67
111
  htmlFor: id,
68
112
  size: size
69
- }, label), __jsx(InputField, (0, _extends2.default)({
113
+ }, label), __jsx(_box.Box, {
114
+ position: "relative"
115
+ }, icon && __jsx(IconSection, {
116
+ size: size
117
+ }, __jsx(_icon.Icon, {
118
+ ref: iconRef,
119
+ icon: icon,
120
+ size: size
121
+ })), __jsx(InputField, (0, _extends2.default)({
70
122
  value: value,
71
123
  placeholder: placeholder,
72
124
  size: size,
73
125
  label: label,
74
- id: id
75
- }, props)));
126
+ icon: icon,
127
+ id: id,
128
+ paddingLeft: paddingLeft
129
+ }, props))));
76
130
  };
77
131
 
78
132
  exports.TextInput = TextInput;
@@ -106,6 +160,13 @@ TextInput.__docgenInfo = {
106
160
  "required": true,
107
161
  "description": ""
108
162
  },
163
+ "placeholder": {
164
+ "type": {
165
+ "name": "string"
166
+ },
167
+ "required": false,
168
+ "description": ""
169
+ },
109
170
  "value": {
110
171
  "type": {
111
172
  "name": "string"
@@ -114,6 +175,18 @@ TextInput.__docgenInfo = {
114
175
  "description": ""
115
176
  },
116
177
  "label": {
178
+ "type": {
179
+ "name": "union",
180
+ "value": [{
181
+ "name": "string"
182
+ }, {
183
+ "name": "node"
184
+ }]
185
+ },
186
+ "required": false,
187
+ "description": ""
188
+ },
189
+ "icon": {
117
190
  "type": {
118
191
  "name": "node"
119
192
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flodesk/grain",
3
- "version": "2.14.1",
3
+ "version": "2.15.0",
4
4
  "description": "Flodesk design system",
5
5
  "module": "es/index.js",
6
6
  "author": "Flodesk",