@ntbjs/react-components 1.3.0-rc.62 → 1.3.0-rc.63

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.
@@ -20,7 +20,8 @@ var react = require('@floating-ui/react');
20
20
  var polished = require('polished');
21
21
  var ContextMenu = require('./ContextMenu-9645746f.js');
22
22
  require('./AssetPreviewTopBar-6eaa7df8.js');
23
- require('./ProgressBar-66f8ed2c.js');
23
+ require('./ProgressBar-561547dc.js');
24
+ require('./InfoCard-4395be90.js');
24
25
  var ActionButton = require('./ActionButton-5bc79370.js');
25
26
  require('./Button-a9afcec0.js');
26
27
  require('./Checkbox-406f005c.js');
@@ -0,0 +1,66 @@
1
+ 'use strict';
2
+
3
+ var defaultTheme = require('./defaultTheme-24ea5c47.js');
4
+ var React = require('react');
5
+ var styled = require('styled-components');
6
+ var arrowForward = require('./arrow-forward-d7c77ae3.js');
7
+
8
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
+
10
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
+ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
12
+
13
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
14
+ var Container = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 500;\n ", ";\n height: ", ";\n border-radius: 3px;\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 5px 0;\n"])), function (props) {
15
+ return props.theme.primaryFontFamily;
16
+ }, function (props) {
17
+ return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200'));
18
+ }, function (props) {
19
+ return props.height ? "".concat(props.height, "px") : '50px';
20
+ });
21
+ var MetricsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n width: 85%;\n gap: 5px;\n padding-left: 15px;\n"])));
22
+ var IconTotalContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n"])));
23
+ var Total = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1.22rem;\n font-weight: 700;\n ", ";\n"])), function (props) {
24
+ return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
25
+ });
26
+ var Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n font-weight: 400;\n opacity: 0.8;\n ", ";\n"])), function (props) {
27
+ return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-500'));
28
+ });
29
+ var IconContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 18px;\n margin-top: -0.05rem;\n"])));
30
+ var Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n font-weight: 400;\n width: 15%;\n opacity: 0.7;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n margin-right: 20px;\n cursor: pointer;\n height: 100%;\n gap: 10px;\n svg {\n transition: transform 0.2s ease-in-out;\n }\n &:hover svg {\n transform: translateX(2px);\n }\n"])));
31
+ var ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n font-weight: 500;\n height: 100%;\n display: flex;\n align-items: center;\n ", ";\n"])), function (props) {
32
+ return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('black'));
33
+ });
34
+ var StyledArrowIcon = styled__default["default"](arrowForward.SvgArrowForward).attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n height: 15px;\n margin-right: 10px;\n ", ";\n"])), function (props) {
35
+ return props.theme.themeProp('fill', props.theme.getColor('gray-100'), props.theme.getColor('black'));
36
+ });
37
+
38
+ var _excluded = ["icon", "total", "label", "linkLabel", "onClick", "height"];
39
+ var InfoCard = React__default["default"].forwardRef(function InfoCard(_ref, forwardedRef) {
40
+ var icon = _ref.icon,
41
+ total = _ref.total,
42
+ label = _ref.label,
43
+ linkLabel = _ref.linkLabel,
44
+ onClick = _ref.onClick,
45
+ height = _ref.height,
46
+ props = defaultTheme._objectWithoutProperties(_ref, _excluded);
47
+ var handleLinkClick = function handleLinkClick(e) {
48
+ return onClick(e);
49
+ };
50
+ return React__default["default"].createElement(Container, defaultTheme._extends({
51
+ height: height,
52
+ ref: forwardedRef
53
+ }, props), React__default["default"].createElement(MetricsContainer, null, React__default["default"].createElement(IconTotalContainer, null, React__default["default"].createElement(IconContainer, null, icon), React__default["default"].createElement(Total, null, total)), React__default["default"].createElement(Label, null, label)), React__default["default"].createElement(Link, {
54
+ onClick: handleLinkClick
55
+ }, React__default["default"].createElement(ButtonLink, null, linkLabel), React__default["default"].createElement(StyledArrowIcon, null)));
56
+ });
57
+ InfoCard.propTypes = process.env.NODE_ENV !== "production" ? {
58
+ icon: defaultTheme.PropTypes.element,
59
+ total: defaultTheme.PropTypes.number.isRequired,
60
+ label: defaultTheme.PropTypes.string,
61
+ linkLabel: defaultTheme.PropTypes.string.isRequired,
62
+ onClick: defaultTheme.PropTypes.func,
63
+ height: defaultTheme.PropTypes.number
64
+ } : {};
65
+
66
+ exports.InfoCard = InfoCard;
@@ -3,43 +3,13 @@
3
3
  var defaultTheme = require('./defaultTheme-24ea5c47.js');
4
4
  var React = require('react');
5
5
  var styled = require('styled-components');
6
+ var arrowForward = require('./arrow-forward-d7c77ae3.js');
6
7
 
7
8
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
9
 
9
- function _interopNamespace(e) {
10
- if (e && e.__esModule) return e;
11
- var n = Object.create(null);
12
- if (e) {
13
- Object.keys(e).forEach(function (k) {
14
- if (k !== 'default') {
15
- var d = Object.getOwnPropertyDescriptor(e, k);
16
- Object.defineProperty(n, k, d.get ? d : {
17
- enumerable: true,
18
- get: function () { return e[k]; }
19
- });
20
- }
21
- });
22
- }
23
- n["default"] = e;
24
- return Object.freeze(n);
25
- }
26
-
27
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
28
10
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
29
11
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
30
12
 
31
- var _path;
32
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
33
- function SvgArrowForward(props) {
34
- return /*#__PURE__*/React__namespace.createElement("svg", _extends({
35
- xmlns: "http://www.w3.org/2000/svg",
36
- viewBox: "0 0 16 16"
37
- }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
38
- className: "arrow-forward_svg__st0",
39
- d: "M12.2 9H0V7h12.2L6.6 1.4 8 0l8 8-8 8-1.4-1.4L12.2 9z"
40
- })));
41
- }
42
-
43
13
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
44
14
  var getBackgroundColor = function getBackgroundColor(props) {
45
15
  if (props.barColor) {
@@ -66,7 +36,9 @@ var Container = styled__default["default"].div.attrs(defaultTheme.applyDefaultTh
66
36
  }, function (props) {
67
37
  return props.theme.primaryFontFamily;
68
38
  });
69
- var MetricsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 4px;\n"])));
39
+ var MetricsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: 100%;\n flex-direction: row;\n justify-content: flex-start;\n"])), function (props) {
40
+ return props.hasLink ? '85%' : '100%';
41
+ });
70
42
  var Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n ", "\n"])), function (props) {
71
43
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
72
44
  });
@@ -81,21 +53,7 @@ var Completed = styled__default["default"].div.attrs(defaultTheme.applyDefaultTh
81
53
  }, function (props) {
82
54
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-800'));
83
55
  });
84
- var PercentageIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n ", "\n font-weight: 400;\n font-size: 0.875rem;\n white-space: nowrap;\n opacity: 0.8;\n ", ";\n"])), function (props) {
85
- if (props.percentage <= 10) {
86
- return "\n left: ".concat(7 + props.percentage, "%; \n ");
87
- } else if (!props.hasLink && props.percentage >= 100) {
88
- return "\n right: 50px;\n left: auto;\n ";
89
- } else if (props.percentage >= 90) {
90
- var divisor = props.hasLink ? 1.25 : 1.03;
91
- return "\n left: ".concat(props.percentage / divisor, "%;\n ");
92
- } else if (props.percentage >= 75) {
93
- var offset = props.hasLink ? 50 : 10;
94
- return "\n left: calc(".concat(props.percentage, "% - ").concat(offset, "px);\n ");
95
- } else {
96
- return "\n left: ".concat(props.percentage, "%;\n ");
97
- }
98
- }, function (props) {
56
+ var PercentageIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n right: 10px;\n font-weight: 400;\n font-size: 0.875rem;\n white-space: nowrap;\n opacity: 0.8;\n ", ";\n"])), function (props) {
99
57
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
100
58
  });
101
59
  var ProgressBarFill = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n height: 100%;\n border-radius: 0 3px 3px 0;\n width: ", "%;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n ", "\n transition: width 0.3s ease;\n"])), function (props) {
@@ -103,12 +61,12 @@ var ProgressBarFill = styled__default["default"].div.attrs(defaultTheme.applyDef
103
61
  }, function (props) {
104
62
  return getBackgroundColor(props);
105
63
  });
106
- var Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n width: 15%;\n font-size: 0.875rem;\n font-weight: 400;\n height: 100%;\n opacity: 0.7;\n display: flex;\n margin-left: auto;\n align-items: center;\n cursor: pointer;\n svg {\n transition: transform 0.2s ease-in-out;\n }\n &:hover svg {\n transform: translateX(2px);\n }\n"])));
107
- var ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n font-weight: 400;\n height: 100%;\n display: flex;\n align-items: center;\n margin-left: auto;\n padding-right: 10px;\n ", ";\n"])), function (props) {
108
- return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-500'));
64
+ var Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n font-weight: 400;\n width: 15%;\n opacity: 0.7;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n margin-right: 20px;\n cursor: pointer;\n height: 100%;\n gap: 10px;\n svg {\n transition: transform 0.2s ease-in-out;\n }\n &:hover svg {\n transform: translateX(2px);\n }\n"])));
65
+ var ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n font-weight: 500;\n height: 100%;\n display: flex;\n align-items: center;\n ", ";\n"])), function (props) {
66
+ return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
109
67
  });
110
- var StyledArrowIcon = styled__default["default"](SvgArrowForward).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n height: 15px;\n margin-right: 10px;\n ", ";\n"])), function (props) {
111
- return props.theme.themeProp('fill', props.theme.getColor('gray-100'), props.theme.getColor('gray-500'));
68
+ var StyledArrowIcon = styled__default["default"](arrowForward.SvgArrowForward).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n height: 15px;\n margin-right: 10px;\n ", ";\n"])), function (props) {
69
+ return props.theme.themeProp('fill', props.theme.getColor('black'), props.theme.getColor('black'));
112
70
  });
113
71
 
114
72
  var _excluded = ["totalAssets", "completedAssets", "percentageText", "barColor", "height", "label", "type", "linkText", "onClick"];
@@ -132,16 +90,17 @@ var ProgressBar = function ProgressBar(_ref) {
132
90
  };
133
91
  return React__default["default"].createElement(Container, defaultTheme._extends({
134
92
  height: height
135
- }, props), React__default["default"].createElement(MetricsContainer, null, React__default["default"].createElement(Label, null, label)), React__default["default"].createElement(ProgressBarTrack, null, React__default["default"].createElement(Completed, {
93
+ }, props), React__default["default"].createElement(Label, null, label), React__default["default"].createElement(ProgressBarTrack, null, React__default["default"].createElement(MetricsContainer, {
94
+ hasLink: Boolean(linkText)
95
+ }, React__default["default"].createElement(Completed, {
136
96
  type: type
137
97
  }, safeCompletedAssets), React__default["default"].createElement(ProgressBarFill, {
138
98
  type: type,
139
99
  percentage: percentage,
140
100
  barColor: barColor
141
- }), React__default["default"].createElement(PercentageIndicator, {
142
- percentage: percentage,
101
+ }, React__default["default"].createElement(PercentageIndicator, {
143
102
  hasLink: Boolean(linkText)
144
- }, percentageText || formattedPercentage), linkText && React__default["default"].createElement(Link, {
103
+ }, percentageText || formattedPercentage))), linkText && React__default["default"].createElement(Link, {
145
104
  onClick: handleLinkClick
146
105
  }, React__default["default"].createElement(ButtonLink, null, linkText), React__default["default"].createElement(StyledArrowIcon, null))));
147
106
  };
@@ -0,0 +1,37 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+
5
+ function _interopNamespace(e) {
6
+ if (e && e.__esModule) return e;
7
+ var n = Object.create(null);
8
+ if (e) {
9
+ Object.keys(e).forEach(function (k) {
10
+ if (k !== 'default') {
11
+ var d = Object.getOwnPropertyDescriptor(e, k);
12
+ Object.defineProperty(n, k, d.get ? d : {
13
+ enumerable: true,
14
+ get: function () { return e[k]; }
15
+ });
16
+ }
17
+ });
18
+ }
19
+ n["default"] = e;
20
+ return Object.freeze(n);
21
+ }
22
+
23
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
24
+
25
+ var _path;
26
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
27
+ function SvgArrowForward(props) {
28
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends({
29
+ xmlns: "http://www.w3.org/2000/svg",
30
+ viewBox: "0 0 16 16"
31
+ }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
32
+ className: "arrow-forward_svg__st0",
33
+ d: "M12.2 9H0V7h12.2L6.6 1.4 8 0l8 8-8 8-1.4-1.4L12.2 9z"
34
+ })));
35
+ }
36
+
37
+ exports.SvgArrowForward = SvgArrowForward;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.3.0-rc.62",
3
+ "version": "1.3.0-rc.63",
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",
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var AssetAction = require('../../AssetAction-4de602e2.js');
3
+ var AssetAction = require('../../AssetAction-311c598b.js');
4
4
  require('../../defaultTheme-24ea5c47.js');
5
5
  require('styled-components');
6
6
  require('lodash');
@@ -38,7 +38,9 @@ require('../../TextArea-10a01b00.js');
38
38
  require('@floating-ui/react');
39
39
  require('../../ContextMenu-9645746f.js');
40
40
  require('../../AssetPreviewTopBar-6eaa7df8.js');
41
- require('../../ProgressBar-66f8ed2c.js');
41
+ require('../../ProgressBar-561547dc.js');
42
+ require('../../arrow-forward-d7c77ae3.js');
43
+ require('../../InfoCard-4395be90.js');
42
44
  require('../../ActionButton-5bc79370.js');
43
45
  require('../../Button-a9afcec0.js');
44
46
  require('../../CompactStarRating-d228de55.js');
@@ -0,0 +1,11 @@
1
+ 'use strict';
2
+
3
+ var InfoCard = require('../../InfoCard-4395be90.js');
4
+ require('../../defaultTheme-24ea5c47.js');
5
+ require('styled-components');
6
+ require('react');
7
+ require('../../arrow-forward-d7c77ae3.js');
8
+
9
+
10
+
11
+ module.exports = InfoCard.InfoCard;
@@ -1,9 +1,10 @@
1
1
  'use strict';
2
2
 
3
- var ProgressBar = require('../../ProgressBar-66f8ed2c.js');
3
+ var ProgressBar = require('../../ProgressBar-561547dc.js');
4
4
  require('../../defaultTheme-24ea5c47.js');
5
5
  require('styled-components');
6
6
  require('react');
7
+ require('../../arrow-forward-d7c77ae3.js');
7
8
 
8
9
 
9
10
 
package/widgets/index.js CHANGED
@@ -2,11 +2,12 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var AssetAction = require('../AssetAction-4de602e2.js');
5
+ var AssetAction = require('../AssetAction-311c598b.js');
6
6
  var ContextMenu = require('../ContextMenu-9645746f.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-6eaa7df8.js');
8
8
  var Instructions = require('../Instructions-655dd119.js');
9
- var ProgressBar = require('../ProgressBar-66f8ed2c.js');
9
+ var ProgressBar = require('../ProgressBar-561547dc.js');
10
+ var InfoCard = require('../InfoCard-4395be90.js');
10
11
  require('../defaultTheme-24ea5c47.js');
11
12
  require('styled-components');
12
13
  require('lodash');
@@ -49,6 +50,7 @@ require('../Radio-758fd8f3.js');
49
50
  require('../TextArea-10a01b00.js');
50
51
  require('../Switch-26547abb.js');
51
52
  require('../ContextMenuItem-ae252503.js');
53
+ require('../arrow-forward-d7c77ae3.js');
52
54
 
53
55
 
54
56
 
@@ -60,3 +62,4 @@ exports.ContextMenu = ContextMenu.ContextMenu;
60
62
  exports.AssetPreviewTopBar = AssetPreviewTopBar.AssetPreviewTopBar;
61
63
  exports.Instructions = Instructions.Instructions;
62
64
  exports.ProgressBar = ProgressBar.ProgressBar;
65
+ exports.InfoCard = InfoCard.InfoCard;