@ntbjs/react-components 0.0.1-beta.42 → 0.0.1-beta.43

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 (7) hide show
  1. package/{AssetGallery-b52dbb14.js → AssetGallery-514bef11.js} +1 -1
  2. package/{TextInput-1ed37e22.js → TextInput-770f2416.js} +18 -9
  3. package/inputs/TextInput/index.js +1 -1
  4. package/inputs/index.js +1 -1
  5. package/package.json +1 -1
  6. package/widgets/AssetGallery/index.js +2 -2
  7. package/widgets/index.js +2 -2
package/{AssetGallery-b52dbb14.js → AssetGallery-514bef11.js} RENAMED
@@ -10,7 +10,7 @@ require('./Button-6f6b4ed4.js');
10
10
  require('./Checkbox-791a409f.js');
11
11
  require('./Radio-9271a4b6.js');
12
12
  require('./TextArea-70a74014.js');
13
- require('./TextInput-1ed37e22.js');
13
+ require('./TextInput-770f2416.js');
14
14
  require('./Popover-0ff13419.js');
15
15
  var Tooltip = require('./Tooltip-85e7d561.js');
16
16
  var styled = require('styled-components');
package/{TextInput-1ed37e22.js → TextInput-770f2416.js} RENAMED
@@ -11,25 +11,30 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
11
11
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
12
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
13
13
 
14
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
15
- var activeLabel = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.75rem;\n padding: 0 3px;\n ", "\n top: -7px;\n left: 7px;\n opacity: 1;\n"])), function (props) {
14
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
15
+ var activeLabel = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.75rem;\n padding: 0 3px;\n ", "\n top: -7px;\n left: 7px !important;\n opacity: 1;\n"])), function (props) {
16
16
  return props.theme.themeProp('background', "linear-gradient(0deg, ".concat(props.theme.getColor('gray-900'), " calc(50% + 1px), transparent 50%)"), "linear-gradient(0deg, ".concat(props.theme.getColor('white'), " calc(50% + 1px), transparent 50%)"));
17
17
  });
18
18
  var placeholderBaseStyle = styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n color: inherit;\n opacity: 0.7;\n"])));
19
- var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n ", "\n\n ", "\n"])), placeholderBaseStyle, function (props) {
19
+ var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n ", "\n\n ", "\ncontent: \"\";\n ", "\n"])), placeholderBaseStyle, function (props) {
20
20
  var _props$inputValue;
21
21
 
22
- return (props.placeholderVisible || ((_props$inputValue = props.inputValue) === null || _props$inputValue === void 0 ? void 0 : _props$inputValue.length)) && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
22
+ return (props.placeholderVisible || ((_props$inputValue = props.inputValue) === null || _props$inputValue === void 0 ? void 0 : _props$inputValue.length) > 0) && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
23
+ }, function (props) {
24
+ return props.hasIcon && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n left: 35px;\n "])));
23
25
  });
24
- var TextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n margin-top: 8px;\n\n &:focus-within {\n ", " {\n ", "\n }\n }\n\n ", "\n"])), TextInputLabel, activeLabel, function (props) {
25
- return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n > * {\n cursor: not-allowed;\n }\n "])));
26
+ var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n display: flex;\n padding: 0 10px;\n\n svg {\n width: 15px;\n opacity: 0.6;\n transition: opacity 250ms;\n }\n"])));
27
+ var TextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n margin-top: 8px;\n\n &:focus-within {\n ", " {\n ", "\n }\n\n ", " {\n svg {\n opacity: 1;\n }\n }\n }\n\n ", "\n"])), TextInputLabel, activeLabel, TextInputFieldIcon, function (props) {
28
+ return props.disabled && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
26
29
  });
27
- var TextInputField = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 12px 10px;\n margin: 0 0 1.07143rem;\n color: inherit;\n ", "\n border: 1px solid;\n ", "\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n\n ", "\n\n &::placeholder {\n ", "\n }\n\n :focus {\n outline: none;\n ", "\n }\n"])), function (props) {
30
+ var TextInputField = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 12px 10px;\n margin: 0 0 1.07143rem;\n color: inherit;\n ", "\n border: 1px solid;\n ", "\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n\n ", "\n\n ", "\n &::placeholder {\n ", "\n }\n\n :focus {\n outline: none;\n ", "\n }\n"])), function (props) {
28
31
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
29
32
  }, function (props) {
30
33
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
31
34
  }, function (props) {
32
- return props.error && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('red-500'));
35
+ return props.error && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('red-500'));
36
+ }, function (props) {
37
+ return props.hasIcon && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 35px;\n "])));
33
38
  }, placeholderBaseStyle, function (props) {
34
39
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'));
35
40
  });
@@ -44,6 +49,7 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
44
49
  disabled = _ref.disabled,
45
50
  autoComplete = _ref.autoComplete,
46
51
  error = _ref.error,
52
+ icon = _ref.icon,
47
53
  onChange = _ref.onChange,
48
54
  onBlur = _ref.onBlur;
49
55
 
@@ -75,8 +81,9 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
75
81
  }, label && React__default['default'].createElement(TextInputLabel, {
76
82
  htmlFor: "text-input-".concat(uniqueId),
77
83
  placeholderVisible: Boolean(placeholder),
84
+ hasIcon: Boolean(icon),
78
85
  inputValue: controlledValue
79
- }, label, required && ' *'), React__default['default'].createElement(TextInputField, {
86
+ }, label, required && ' *'), React__default['default'].createElement(TextInputFieldIcon, null, icon), React__default['default'].createElement(TextInputField, {
80
87
  ref: forwardedRef,
81
88
  value: controlledValue,
82
89
  name: name,
@@ -84,6 +91,7 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
84
91
  required: required,
85
92
  disabled: disabled,
86
93
  autoComplete: autoComplete,
94
+ hasIcon: Boolean(icon),
87
95
  error: error,
88
96
  id: "text-input-".concat(uniqueId),
89
97
  onChange: onInputChange,
@@ -100,6 +108,7 @@ TextInput.propTypes = process.env.NODE_ENV !== "production" ? {
100
108
  disabled: defaultTheme.PropTypes.bool,
101
109
  autoComplete: defaultTheme.PropTypes.string,
102
110
  error: defaultTheme.PropTypes.bool,
111
+ icon: defaultTheme.PropTypes.element,
103
112
  onChange: defaultTheme.PropTypes.func,
104
113
  onBlur: defaultTheme.PropTypes.func
105
114
  } : {};
package/inputs/TextInput/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var TextInput = require('../../TextInput-1ed37e22.js');
3
+ var TextInput = require('../../TextInput-770f2416.js');
4
4
  require('../../defaultTheme-18d7c1ee.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/index.js CHANGED
@@ -7,7 +7,7 @@ var Button = require('../Button-6f6b4ed4.js');
7
7
  var Checkbox = require('../Checkbox-791a409f.js');
8
8
  var Radio = require('../Radio-9271a4b6.js');
9
9
  var TextArea = require('../TextArea-70a74014.js');
10
- var TextInput = require('../TextInput-1ed37e22.js');
10
+ var TextInput = require('../TextInput-770f2416.js');
11
11
  require('../defaultTheme-18d7c1ee.js');
12
12
  require('styled-components');
13
13
  require('react');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "0.0.1-beta.42",
3
+ "version": "0.0.1-beta.43",
4
4
  "description": "NTBs common front-end design utilities and React components.",
5
5
  "scripts": {
6
6
  "build": "cross-env NODE_ENV=production rollup -c",
package/widgets/AssetGallery/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var AssetGallery = require('../../AssetGallery-b52dbb14.js');
3
+ var AssetGallery = require('../../AssetGallery-514bef11.js');
4
4
  require('../../defaultTheme-18d7c1ee.js');
5
5
  require('styled-components');
6
6
  require('react');
@@ -14,7 +14,7 @@ require('nanoid');
14
14
  require('../../Radio-9271a4b6.js');
15
15
  require('polished');
16
16
  require('../../TextArea-70a74014.js');
17
- require('../../TextInput-1ed37e22.js');
17
+ require('../../TextInput-770f2416.js');
18
18
  require('../../Popover-0ff13419.js');
19
19
  require('@tippyjs/react');
20
20
  require('../../Tooltip-85e7d561.js');
package/widgets/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var AssetGallery = require('../AssetGallery-b52dbb14.js');
5
+ var AssetGallery = require('../AssetGallery-514bef11.js');
6
6
  require('../defaultTheme-18d7c1ee.js');
7
7
  require('styled-components');
8
8
  require('react');
@@ -16,7 +16,7 @@ require('nanoid');
16
16
  require('../Radio-9271a4b6.js');
17
17
  require('polished');
18
18
  require('../TextArea-70a74014.js');
19
- require('../TextInput-1ed37e22.js');
19
+ require('../TextInput-770f2416.js');
20
20
  require('../Popover-0ff13419.js');
21
21
  require('@tippyjs/react');
22
22
  require('../Tooltip-85e7d561.js');