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

package/{AssetAction-6a1cfc04.js → AssetAction-4de602e2.js}

@@ -20,6 +20,7 @@ var react = require('@floating-ui/react');
 var polished = require('polished');
 var ContextMenu = require('./ContextMenu-9645746f.js');
 require('./AssetPreviewTopBar-6eaa7df8.js');
+require('./ProgressBar-66f8ed2c.js');
 var ActionButton = require('./ActionButton-5bc79370.js');
 require('./Button-a9afcec0.js');
 require('./Checkbox-406f005c.js');

package/ProgressBar-66f8ed2c.js

@@ -0,0 +1,160 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-24ea5c47.js');
+var React = require('react');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _path;
+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); }
+function SvgArrowForward(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "arrow-forward_svg__st0",
+    d: "M12.2 9H0V7h12.2L6.6 1.4 8 0l8 8-8 8-1.4-1.4L12.2 9z"
+  })));
+}
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var getBackgroundColor = function getBackgroundColor(props) {
+  if (props.barColor) {
+    return "background: ".concat(props.barColor, ";");
+  }
+  var colorMap = {
+    success: ['emerald-600', 'emerald-300'],
+    error: ['red-600', 'cercise-200'],
+    warning: ['orange-600', 'orange-400'],
+    none: ['gray-500', 'gray-300'],
+    "default": ['emerald-600', 'emerald-500']
+  };
+  var _ref = colorMap[props.type] || colorMap["default"],
+    _ref2 = defaultTheme._slicedToArray(_ref, 2),
+    darkColor = _ref2[0],
+    lightColor = _ref2[1];
+  return props.theme.themeProp('background', props.theme.getColor(darkColor), props.theme.getColor(lightColor));
+};
+styled__default["default"].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 500;\n"])), function (props) {
+  return props.theme.primaryFontFamily;
+});
+var Container = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  width: 100%;\n  height: ", ";\n  font-family: ", ";\n"])), function (props) {
+  return props.height ? "".concat(props.height, "px") : '50px';
+}, function (props) {
+  return props.theme.primaryFontFamily;
+});
+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"])));
+var Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.875rem;\n  ", "\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
+});
+styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.875rem;\n  font-weight: 500;\n  ", "\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
+});
+var ProgressBarTrack = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 3px;\n  height: 100%;\n  ", "\n"])), function (props) {
+  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200'));
+});
+var Completed = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 1.2rem;\n  font-weight: 400;\n  height: 100%;\n  padding: 0 8px;\n  border-radius: 3px 0 0 3px;\n  border-right: 1px solid rgba(255, 255, 255, 0.2);\n  display: flex;\n  align-items: center;\n  ", "\n  ", ";\n"])), function (props) {
+  return getBackgroundColor(props);
+}, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-800'));
+});
+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) {
+  if (props.percentage <= 10) {
+    return "\n        left: ".concat(7 + props.percentage, "%;   \n      ");
+  } else if (!props.hasLink && props.percentage >= 100) {
+    return "\n        right: 50px;\n        left: auto;\n      ";
+  } else if (props.percentage >= 90) {
+    var divisor = props.hasLink ? 1.25 : 1.03;
+    return "\n       left: ".concat(props.percentage / divisor, "%;\n      ");
+  } else if (props.percentage >= 75) {
+    var offset = props.hasLink ? 50 : 10;
+    return "\n        left: calc(".concat(props.percentage, "% - ").concat(offset, "px);\n      ");
+  } else {
+    return "\n        left: ".concat(props.percentage, "%;\n      ");
+  }
+}, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
+});
+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) {
+  return props.percentage;
+}, function (props) {
+  return getBackgroundColor(props);
+});
+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"])));
+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) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-500'));
+});
+var StyledArrowIcon = styled__default["default"](SvgArrowForward).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n  height: 15px;\n  margin-right: 10px;\n  ", ";\n"])), function (props) {
+  return props.theme.themeProp('fill', props.theme.getColor('gray-100'), props.theme.getColor('gray-500'));
+});
+
+var _excluded = ["totalAssets", "completedAssets", "percentageText", "barColor", "height", "label", "type", "linkText", "onClick"];
+var ProgressBar = function ProgressBar(_ref) {
+  var totalAssets = _ref.totalAssets,
+    completedAssets = _ref.completedAssets,
+    percentageText = _ref.percentageText,
+    barColor = _ref.barColor,
+    height = _ref.height,
+    label = _ref.label,
+    type = _ref.type,
+    linkText = _ref.linkText,
+    onClick = _ref.onClick,
+    props = defaultTheme._objectWithoutProperties(_ref, _excluded);
+  var safeCompletedAssets = Math.max(0, completedAssets);
+  var safeTotalAssets = Math.max(1, totalAssets);
+  var percentage = safeCompletedAssets / safeTotalAssets * 100;
+  var formattedPercentage = "".concat(Math.round(percentage), "%");
+  var handleLinkClick = function handleLinkClick(e) {
+    return onClick(e);
+  };
+  return React__default["default"].createElement(Container, defaultTheme._extends({
+    height: height
+  }, 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, {
+    type: type
+  }, safeCompletedAssets), React__default["default"].createElement(ProgressBarFill, {
+    type: type,
+    percentage: percentage,
+    barColor: barColor
+  }), React__default["default"].createElement(PercentageIndicator, {
+    percentage: percentage,
+    hasLink: Boolean(linkText)
+  }, percentageText || formattedPercentage), linkText && React__default["default"].createElement(Link, {
+    onClick: handleLinkClick
+  }, React__default["default"].createElement(ButtonLink, null, linkText), React__default["default"].createElement(StyledArrowIcon, null))));
+};
+ProgressBar.propTypes = process.env.NODE_ENV !== "production" ? {
+  totalAssets: defaultTheme.PropTypes.number.isRequired,
+  completedAssets: defaultTheme.PropTypes.number.isRequired,
+  percentageText: defaultTheme.PropTypes.string,
+  barColor: defaultTheme.PropTypes.string,
+  height: defaultTheme.PropTypes.number,
+  label: defaultTheme.PropTypes.string,
+  type: defaultTheme.PropTypes.string,
+  linkText: defaultTheme.PropTypes.string,
+  onClick: defaultTheme.PropTypes.func
+} : {};
+
+exports.ProgressBar = ProgressBar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "1.3.0-rc.61",
+  "version": "1.3.0-rc.62",
   "description": "NTBs common front-end design utilities and React components.",
   "scripts": {
     "build": "cross-env NODE_ENV=production rollup -c",

package/widgets/AssetGallery/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var AssetAction = require('../../AssetAction-6a1cfc04.js');
+var AssetAction = require('../../AssetAction-4de602e2.js');
 require('../../defaultTheme-24ea5c47.js');
 require('styled-components');
 require('lodash');
@@ -38,6 +38,7 @@ require('../../TextArea-10a01b00.js');
 require('@floating-ui/react');
 require('../../ContextMenu-9645746f.js');
 require('../../AssetPreviewTopBar-6eaa7df8.js');
+require('../../ProgressBar-66f8ed2c.js');
 require('../../ActionButton-5bc79370.js');
 require('../../Button-a9afcec0.js');
 require('../../CompactStarRating-d228de55.js');

package/widgets/ProgressBar/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var ProgressBar = require('../../ProgressBar-66f8ed2c.js');
+require('../../defaultTheme-24ea5c47.js');
+require('styled-components');
+require('react');
+
+
+
+module.exports = ProgressBar.ProgressBar;

package/widgets/index.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AssetAction = require('../AssetAction-6a1cfc04.js');
+var AssetAction = require('../AssetAction-4de602e2.js');
 var ContextMenu = require('../ContextMenu-9645746f.js');
 var AssetPreviewTopBar = require('../AssetPreviewTopBar-6eaa7df8.js');
 var Instructions = require('../Instructions-655dd119.js');
+var ProgressBar = require('../ProgressBar-66f8ed2c.js');
 require('../defaultTheme-24ea5c47.js');
 require('styled-components');
 require('lodash');
@@ -58,3 +59,4 @@ exports.SummaryCard = AssetAction.SummaryCard;
 exports.ContextMenu = ContextMenu.ContextMenu;
 exports.AssetPreviewTopBar = AssetPreviewTopBar.AssetPreviewTopBar;
 exports.Instructions = Instructions.Instructions;
+exports.ProgressBar = ProgressBar.ProgressBar;