@ntbjs/react-components 1.1.28 → 1.1.30

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/{AssetAction-af841b38.js → AssetAction-00fd6db4.js} +1 -1
  2. package/{Button-e1c2d914.js → Button-259d619f.js} +33 -16
  3. package/inputs/Button/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/{AssetAction-af841b38.js → AssetAction-00fd6db4.js} RENAMED
@@ -23,7 +23,7 @@ require('./AssetPreviewTopBar-d8887502.js');
23
23
  require('./ProgressBar-e6a86080.js');
24
24
  require('./InfoCard-11f0ca7f.js');
25
25
  var ActionButton = require('./ActionButton-41ea1bda.js');
26
- require('./Button-e1c2d914.js');
26
+ require('./Button-259d619f.js');
27
27
  require('./Checkbox-153048de.js');
28
28
  require('./CompactAutocompleteSelect-d87f259e.js');
29
29
  require('./CompactStarRating-224afe96.js');
package/{Button-e1c2d914.js → Button-259d619f.js} RENAMED
@@ -12,9 +12,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
12
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
14
14
 
15
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29;
16
- var Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n border-radius: 3px;\n font-family: inherit;\n font-size: 0.875rem;\n font-weight: 400;\n padding: 12px 16px;\n cursor: pointer;\n background: ", ";\n border: 2px solid ", ";\n transition: all 250ms, opacity 200ms;\n\n &:hover,\n &.dropdown-is-active {\n background: #296c58;\n border-color: #296c58;\n }\n\n ", "\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (props) {
15
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32;
16
+ var Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n border-radius: 3px;\n font-family: inherit;\n font-size: 0.875rem;\n font-weight: 400;\n padding: 12px 16px;\n cursor: pointer;\n background: ", ";\n border: ", "px solid ", ";\n transition: all 250ms, opacity 200ms;\n\n &:hover,\n &.dropdown-is-active {\n background: #296c58;\n border-color: #296c58;\n }\n\n ", "\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (props) {
17
17
  return props.theme.getColor('emerald-500');
18
+ }, function (props) {
19
+ return props.border;
18
20
  }, function (props) {
19
21
  return props.theme.getColor('emerald-500');
20
22
  }, function (props) {
@@ -64,27 +66,33 @@ var LoadingIndicator = styled__default["default"].div.attrs(defaultTheme.applyDe
64
66
  });
65
67
  var LoadingIndicatorSvg = styled__default["default"].svg.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n height: 100%;\n color: inherit;\n transform: rotate(-88deg);\n"])));
66
68
  var LoadingIndicatorSvgCircle = styled__default["default"].circle.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n transition: stroke-dashoffset 300ms linear;\n stroke-dasharray: 113;\n"])));
67
- var ButtonWrapper = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n white-space: nowrap;\n display: flex;\n"])));
68
- var MainButtonWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n border-radius: 3px;\n ", ";\n"])), function (props) {
69
- return (props.activeDropdown || props.dropdownItems) && !props.outlined && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n background: ", ";\n "])), props.secondary ? props.theme.getColor('gray-200') : props.theme.getColor('emerald-500'));
69
+ var ButtonWrapper = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n white-space: nowrap;\n display: flex;\n ", "\n"])), function (props) {
70
+ return props.block && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n "])));
71
+ });
72
+ var MainButtonWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n border-radius: 3px;\n ", "\n\n ", ";\n"])), function (props) {
73
+ return props.block && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n "])));
74
+ }, function (props) {
75
+ return (props.activeDropdown || props.dropdownItems) && !props.outlined && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n background: ", ";\n "])), props.secondary ? props.theme.getColor('gray-200') : props.theme.getColor('emerald-500'));
70
76
  });
71
- var MainButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n button {\n ", ";\n\n ", ";\n }\n"])), function (props) {
72
- return (props.activeDropdown || props.dropdownItems) && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n "])));
77
+ var MainButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n\n ", "\n\n button {\n ", ";\n\n ", ";\n }\n"])), function (props) {
78
+ return props.block && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n flex: 1;\n width: 100%;\n "])));
79
+ }, function (props) {
80
+ return (props.activeDropdown || props.dropdownItems) && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n "])));
73
81
  }, function (props) {
74
- return (props.activeDropdown || props.dropdownItems) && props.outlined && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n border-right: none;\n "])));
82
+ return (props.activeDropdown || props.dropdownItems) && props.outlined && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n border-right: none;\n "])));
75
83
  });
76
- var MainButtonContainerSingle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n width: 100%;\n ", ";\n\n button {\n ", ";\n }\n"])), function (props) {
77
- return props.singleAction && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n border-radius: 3px !important;\n transition: all 250ms, opacity 200ms;\n "])));
84
+ var MainButtonContainerSingle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n width: 100%;\n ", ";\n\n button {\n ", ";\n }\n"])), function (props) {
85
+ return props.singleAction && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n border-radius: 3px !important;\n transition: all 250ms, opacity 200ms;\n "])));
78
86
  }, function (props) {
79
- return (props.activeDropdown || props.dropdownItems) && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n "])));
87
+ return (props.activeDropdown || props.dropdownItems) && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n "])));
80
88
  });
81
- var DropdownButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n\n button {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n\n ", ";\n }\n\n svg {\n color: inherit;\n height: 7px;\n width: 12px;\n\n ", ";\n }\n"])), function (props) {
89
+ var DropdownButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n\n button {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n\n ", ";\n }\n\n svg {\n color: inherit;\n height: 7px;\n width: 12px;\n\n ", ";\n }\n"])), function (props) {
82
90
  return !props.singleAction && 'border-left: none';
83
91
  }, function (props) {
84
92
  return !props.singleAction && 'margin-bottom: 1px';
85
93
  });
86
94
 
87
- var _excluded = ["onClickEffect", "singleAction", "activeDropdown", "dropdownItems", "secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children", "singleActionGap", "width"];
95
+ var _excluded = ["onClickEffect", "singleAction", "activeDropdown", "dropdownItems", "secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children", "singleActionGap", "width", "border"];
88
96
  var Button = React__default["default"].forwardRef(function Button(_ref, forwardedRef) {
89
97
  var onClickEffect = _ref.onClickEffect,
90
98
  _ref$singleAction = _ref.singleAction,
@@ -94,7 +102,8 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
94
102
  dropdownItems = _ref.dropdownItems,
95
103
  secondary = _ref.secondary,
96
104
  outlined = _ref.outlined,
97
- block = _ref.block,
105
+ _ref$block = _ref.block,
106
+ block = _ref$block === void 0 ? false : _ref$block,
98
107
  icon = _ref.icon,
99
108
  _ref$size = _ref.size,
100
109
  size = _ref$size === void 0 ? 'normal' : _ref$size,
@@ -105,6 +114,8 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
105
114
  _ref$singleActionGap = _ref.singleActionGap,
106
115
  singleActionGap = _ref$singleActionGap === void 0 ? 34 : _ref$singleActionGap,
107
116
  width = _ref.width,
117
+ _ref$border = _ref.border,
118
+ border = _ref$border === void 0 ? 2 : _ref$border,
108
119
  props = defaultTheme._objectWithoutProperties(_ref, _excluded);
109
120
  var _useState = React.useState(loading || false),
110
121
  _useState2 = defaultTheme._slicedToArray(_useState, 2),
@@ -159,14 +170,17 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
159
170
  activeDropdown: activeDropdown,
160
171
  dropdownItems: dropdownItems,
161
172
  outlined: outlined,
162
- secondary: secondary
173
+ secondary: secondary,
174
+ block: block
163
175
  }, React__default["default"].createElement(MainButtonContainer, {
164
176
  dropdownItems: dropdownItems,
165
177
  secondary: secondary,
166
- outlined: outlined
178
+ outlined: outlined,
179
+ block: block
167
180
  }, React__default["default"].createElement(Button$1, defaultTheme._extends({
168
181
  ref: forwardedRef,
169
182
  onClick: onClickEffect,
183
+ border: border,
170
184
  singleAction: singleAction,
171
185
  dropdownItems: dropdownItems,
172
186
  secondary: secondary,
@@ -214,6 +228,7 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
214
228
  dropdownItems: dropdownItems,
215
229
  secondary: secondary,
216
230
  outlined: outlined,
231
+ border: border,
217
232
  block: block,
218
233
  size: size,
219
234
  disabled: disabled,
@@ -240,6 +255,7 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
240
255
  dropdownItems: dropdownItems,
241
256
  secondary: secondary,
242
257
  outlined: outlined,
258
+ border: border,
243
259
  block: block,
244
260
  size: size,
245
261
  disabled: disabled,
@@ -259,6 +275,7 @@ Button.propTypes = process.env.NODE_ENV !== "production" ? {
259
275
  dropdownItems: defaultTheme.PropTypes.node,
260
276
  secondary: defaultTheme.PropTypes.bool,
261
277
  outlined: defaultTheme.PropTypes.bool,
278
+ border: defaultTheme.PropTypes.number,
262
279
  block: defaultTheme.PropTypes.bool,
263
280
  icon: defaultTheme.PropTypes.element,
264
281
  size: defaultTheme.PropTypes.oneOf(['x-small', 'small', 'normal', 'large']),
package/inputs/Button/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Button = require('../../Button-e1c2d914.js');
3
+ var Button = require('../../Button-259d619f.js');
4
4
  require('../../defaultTheme-e27880d7.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/index.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var ActionButton = require('../ActionButton-41ea1bda.js');
6
- var Button = require('../Button-e1c2d914.js');
6
+ var Button = require('../Button-259d619f.js');
7
7
  var Checkbox = require('../Checkbox-153048de.js');
8
8
  var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-d87f259e.js');
9
9
  var CompactStarRating = require('../CompactStarRating-224afe96.js');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.1.28",
3
+ "version": "1.1.30",
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 AssetAction = require('../../AssetAction-af841b38.js');
3
+ var AssetAction = require('../../AssetAction-00fd6db4.js');
4
4
  require('../../defaultTheme-e27880d7.js');
5
5
  require('styled-components');
6
6
  require('lodash');
@@ -42,7 +42,7 @@ require('../../ProgressBar-e6a86080.js');
42
42
  require('../../arrow-forward-d7c77ae3.js');
43
43
  require('../../InfoCard-11f0ca7f.js');
44
44
  require('../../ActionButton-41ea1bda.js');
45
- require('../../Button-e1c2d914.js');
45
+ require('../../Button-259d619f.js');
46
46
  require('../../CompactStarRating-224afe96.js');
47
47
  require('../../CompactTextInput-f951e9e5.js');
48
48
  require('../../MultiSelect-efaecd6e.js');
package/widgets/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var AssetAction = require('../AssetAction-af841b38.js');
5
+ var AssetAction = require('../AssetAction-00fd6db4.js');
6
6
  var ContextMenu = require('../ContextMenu-5198c59f.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-d8887502.js');
8
8
  var Instructions = require('../Instructions-fa82c59d.js');
@@ -36,7 +36,7 @@ require('../close-1751121a.js');
36
36
  require('react-lazy-load-image-component');
37
37
  require('@floating-ui/react');
38
38
  require('../ActionButton-41ea1bda.js');
39
- require('../Button-e1c2d914.js');
39
+ require('../Button-259d619f.js');
40
40
  require('../expand-more-d74e2bd2.js');
41
41
  require('../CompactAutocompleteSelect-d87f259e.js');
42
42
  require('react-select');