@ntbjs/react-components 1.3.0-rc.9 → 2.0.0-rc.5

package/.eslintrc

@@ -8,13 +8,12 @@
   "parserOptions": {
     "sourceType": "module"
   },
-  "ignorePatterns": [
-    "build",
-    "storybook-static"
-  ],
+  "ignorePatterns": ["build", "storybook-static"],
   "parser": "@babel/eslint-parser",
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended"
-  ]
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
 }

package/cjs/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+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 ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+
+exports.defineProperty = _defineProperty;
+exports["extends"] = _extends;
+exports.objectSpread2 = _objectSpread2;
+exports.objectWithoutProperties = _objectWithoutProperties;
+exports.objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;
+exports.toPrimitive = _toPrimitive;
+exports.toPropertyKey = _toPropertyKey;

package/cjs/_virtual/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = {exports: {}};
+
+exports.react = react;

package/cjs/_virtual/index2.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var propTypes = {exports: {}};
+
+exports.propTypes = propTypes;

package/cjs/_virtual/index3.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactIs = {exports: {}};
+
+exports.reactIs = reactIs;

package/cjs/_virtual/index4.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDom = {exports: {}};
+
+exports.reactDom = reactDom;

package/cjs/_virtual/react-dom.development.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDom_development = {};
+
+exports.__exports = reactDom_development;

package/cjs/_virtual/react-dom.production.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDom_production = {};
+
+exports.__exports = reactDom_production;

package/cjs/_virtual/react-is.development.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactIs_development = {};
+
+exports.__exports = reactIs_development;

package/cjs/_virtual/react-is.production.min.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactIs_production_min = {};
+
+exports.__exports = reactIs_production_min;

package/cjs/_virtual/react.development.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react_development = {exports: {}};
+
+exports.react_development = react_development;

package/cjs/_virtual/react.production.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react_production = {};
+
+exports.__exports = react_production;

package/cjs/components/data/Alert/Alert.js

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var index = require('../../../node_modules/react/index.js');
+var index$1 = require('../../../node_modules/prop-types/index.js');
+var Alert_styled = require('./Alert.styled.js');
+var lodash = require('lodash');
+
+const _excluded = ["type", "alertMessage", "align", "icon", "fontSize", "lineHeight", "lineClamp", "verticalPadding", "horizontalPadding", "width"];
+const Alert = index["default"].forwardRef(function Alert(_ref, forwardedRef) {
+  let {
+      type,
+      alertMessage,
+      align,
+      icon,
+      fontSize,
+      lineHeight,
+      lineClamp,
+      verticalPadding,
+      horizontalPadding,
+      width
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  let isWarning = false;
+  let isError = false;
+  let isInfo = true;
+  if (!lodash.isEmpty(type)) {
+    if (type === 'warning') {
+      isWarning = true;
+    } else if (type === 'error') {
+      isError = true;
+    } else {
+      isInfo = true;
+    }
+  } else {
+    if (isWarning || isError) {
+      isInfo = false;
+    }
+  }
+  return index["default"].createElement(Alert_styled.Alert, _rollupPluginBabelHelpers["extends"]({
+    ref: forwardedRef,
+    alertMessage: alertMessage,
+    warning: isWarning,
+    error: isError,
+    info: isInfo,
+    align: align,
+    verticalPadding: verticalPadding,
+    horizontalPadding: horizontalPadding,
+    width: width
+  }, props), index["default"].createElement(Alert_styled.AlertRender, {
+    fontSize: fontSize,
+    lineHeight: lineHeight,
+    lineClamp: lineClamp
+  }, icon, " ", index["default"].createElement("span", null, alertMessage)));
+});
+Alert.propTypes = process.env.NODE_ENV !== "production" ? {
+  type: index$1["default"].oneOf(['warning', 'error', 'info']),
+  icon: index$1["default"].element,
+  align: index$1["default"].oneOf(['left', 'center']),
+  alertMessage: index$1["default"].string,
+  fontSize: index$1["default"].number,
+  lineHeight: index$1["default"].number,
+  lineClamp: index$1["default"].number,
+  verticalPadding: index$1["default"].number,
+  horizontalPadding: index$1["default"].number,
+  width: index$1["default"].number
+} : {};
+Alert.defaultProps = {
+  warning: false,
+  error: false,
+  align: 'left',
+  alertMessage: 'Use subject to restrictions. Editorial use only, no commercial use without prior consent from rights holder.',
+  lineClamp: 0,
+  horizontalPadding: 30,
+  verticalPadding: 17
+};
+var Alert$1 = Alert;
+
+exports["default"] = Alert$1;

package/cjs/components/data/Alert/Alert.styled.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var defaultTheme = require('../../../utils/defaultTheme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6;
+const Alert = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  display: flex;
+  flex-direction: column;
+  padding: ${0};
+  width: ${0};
+  box-sizing: border-box;
+
+  ${0}
+
+  ${0}
+  
+  ${0}
+  
+  text-align: ${0};
+`), props => {
+  var _props$verticalPaddin, _props$horizontalPadd;
+  const verticalPadding = (_props$verticalPaddin = props.verticalPadding) !== null && _props$verticalPaddin !== void 0 ? _props$verticalPaddin : 17;
+  const horizontalPadding = (_props$horizontalPadd = props.horizontalPadding) !== null && _props$horizontalPadd !== void 0 ? _props$horizontalPadd : 30;
+  return `${verticalPadding}px ${horizontalPadding}px`;
+}, props => props.width ? `${props.width}px` : '100%', props => props.warning && styled.css(_t2 || (_t2 = _`
+      ${0}
+    `), props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))), props => props.error && styled.css(_t3 || (_t3 = _`
+      ${0}
+    `), props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200'))), props => props.info && styled.css(_t4 || (_t4 = _`
+      background: transparent;
+    `)), props => props.align === 'center' ? 'center' : 'left');
+const AlertRender = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
+  display: flex;
+  align-items: center;
+  word-break: break-word;
+  ${0}
+  ${0}
+  ${0};
+
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  span {
+    flex: 1;
+    padding-left: 5px;
+    ${0};
+  }
+`), props => props.lineHeight ? `line-height: ${props.lineHeight}px;` : null, props => props.fontSize ? `font-size: ${props.fontSize}px;` : null, props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.lineClamp ? styled.css(_t6 || (_t6 = _`
+            display: -webkit-box;
+            -webkit-line-clamp: ${0};
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          `), props.lineClamp) : null);
+
+exports.Alert = Alert;
+exports.AlertRender = AlertRender;

package/cjs/components/data/Alert/data/Alert/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Alert = require('../../Alert.js');
+
+
+
+exports["default"] = Alert["default"];

package/cjs/components/data/Badge/Badge.js

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var index$1 = require('../../../node_modules/prop-types/index.js');
+var index = require('../../../node_modules/react/index.js');
+var Badge_styled = require('./Badge.styled.js');
+
+const _excluded = ["badgeContent", "badgeIcon", "children", "elevated", "fontSize", "fontWeight", "lineHeight", "active", "error", "warning", "backgroundColors", "colors", "verticalPadding", "horizontalPadding", "height", "minHeight", "width", "minWidth"];
+const Badge = index["default"].forwardRef(function Badge(_ref, forwardedRef) {
+  let {
+      badgeContent,
+      badgeIcon,
+      children,
+      elevated,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      active,
+      error,
+      warning,
+      backgroundColors,
+      colors,
+      verticalPadding,
+      horizontalPadding,
+      height,
+      minHeight,
+      width,
+      minWidth
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  if (typeof badgeContent === 'number') {
+    badgeContent = Intl.NumberFormat('en', {
+      notation: 'compact'
+    }).format(badgeContent);
+  }
+  return index["default"].createElement(Badge_styled.Badge, _rollupPluginBabelHelpers["extends"]({
+    ref: forwardedRef,
+    elevated: elevated,
+    hasChildren: Boolean(children)
+  }, props), children && index["default"].createElement(Badge_styled.BadgeChildrenContainer, null, children), (badgeIcon || badgeContent) && index["default"].createElement(Badge_styled.BadgeLabel, {
+    backgroundColors: backgroundColors,
+    colors: colors,
+    elevated: elevated,
+    fontSize: fontSize,
+    fontWeight: fontWeight,
+    lineHeight: lineHeight,
+    active: active,
+    error: error,
+    warning: warning,
+    verticalPadding: verticalPadding,
+    horizontalPadding: horizontalPadding,
+    height: height,
+    minHeight: minHeight,
+    width: width,
+    minWidth: minWidth
+  }, badgeIcon && index["default"].createElement(Badge_styled.BadgeIcon, {
+    useGutter: !!badgeContent
+  }, badgeIcon), badgeContent));
+});
+Badge.propTypes = process.env.NODE_ENV !== "production" ? {
+  badgeIcon: index$1["default"].node,
+  badgeContent: index$1["default"].oneOfType([index$1["default"].string, index$1["default"].number, index$1["default"].func, index$1["default"].element]),
+  children: index$1["default"].oneOfType([index$1["default"].node, index$1["default"].string]),
+  elevated: index$1["default"].bool,
+  active: index$1["default"].bool,
+  error: index$1["default"].bool,
+  warning: index$1["default"].bool,
+  fontSize: index$1["default"].oneOfType([index$1["default"].number, index$1["default"].string]),
+  fontWeight: index$1["default"].oneOfType([index$1["default"].number, index$1["default"].string]),
+  lineHeight: index$1["default"].oneOfType([index$1["default"].number, index$1["default"].string]),
+  colors: index$1["default"].arrayOf(index$1["default"].string),
+  backgroundColors: index$1["default"].arrayOf(index$1["default"].string),
+  verticalPadding: index$1["default"].number,
+  horizontalPadding: index$1["default"].number,
+  height: index$1["default"].number,
+  minHeight: index$1["default"].number,
+  width: index$1["default"].number,
+  minWidth: index$1["default"].number
+} : {};
+Badge.defaultProps = {
+  elevated: false,
+  active: false,
+  error: false,
+  warning: false,
+  badgeIcon: null,
+  fontWeight: 'normal',
+  lineHeight: 'normal'
+};
+var Badge$1 = Badge;
+
+exports["default"] = Badge$1;

package/cjs/components/data/Badge/Badge.styled.js

@@ -0,0 +1,156 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var defaultTheme = require('../../../utils/defaultTheme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6,
+  _t7,
+  _t8;
+const Badge = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  align-content: center;
+  display: ${0};
+  font-family: ${0};
+  font-size: 1rem;
+  font-weight: 500;
+  min-height: 24px;
+  position: relative;
+  width: ${0};
+`), props => props.elevated || !props.hasChildren ? 'inline-flex' : 'flex', props => props.theme.primaryFontFamily, props => props.elevated ? 'fit-content' : 'initial');
+const BadgeChildrenContainer = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
+  align-self: center;
+  height: fit-content;
+  margin-right: 8px;
+`));
+const BadgeLabel = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+  border-radius: ${0};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  font-size: ${0};
+  font-weight: ${0};
+  line-height: ${0};
+  height: ${0};
+  letter-spacing: 0.32px;
+  margin-left: ${0};
+  position: ${0};
+  right: 0;
+  transform: ${0};
+
+  ${0}
+
+  ${0}
+
+  ${0}
+      
+
+  ${0}
+
+  ${0}
+
+    ${0}
+`), props => props.elevated ? '12px' : '14px', props => {
+  if (props.fontSize) {
+    return `${props.fontSize}px`;
+  } else {
+    return props.elevated ? '0.625rem' : '0.750rem';
+  }
+}, props => props.fontWeight ? props.fontWeight : 'normal', props => props.lineHeight ? `${props.lineHeight}px` : 'normal', props => props.height ? `${props.height}px` : 'fit-content', props => props.elevated ? '15px' : 'auto', props => props.elevated ? 'absolute' : 'initial', props => props.elevated ? 'translate(33%, -8px)' : 'initial', props => props.width ? styled.css(_t4 || (_t4 = _`
+          width: ${0}px;
+        `), props.width) : null, props => props.minWidth ? styled.css(_t5 || (_t5 = _`
+          min-width: ${0}px;
+        `), props.minWidth) : null, props => props.minHeight ? styled.css(_t6 || (_t6 = _`
+          min-height: ${0}px;
+        `), props.minHeight) : null, props => {
+  const verticalPadding = props.verticalPadding ? `${props.verticalPadding}px` : props.elevated ? '4px' : '6px';
+  const horizontalPadding = props.horizontalPadding ? `${props.horizontalPadding}px` : props.elevated ? '7px' : '10px';
+  return styled.css(_t7 || (_t7 = _`
+      padding: ${0} ${0};
+    `), verticalPadding, horizontalPadding);
+}, props => props.theme.themeProp('background', () => {
+  var _props$backgroundColo, _props$backgroundColo2;
+  const active = props.active;
+  const error = props.error;
+  const warning = props.warning;
+  const defaultBgColor = (_props$backgroundColo = props === null || props === void 0 || (_props$backgroundColo2 = props.backgroundColors) === null || _props$backgroundColo2 === void 0 ? void 0 : _props$backgroundColo2[0]) !== null && _props$backgroundColo !== void 0 ? _props$backgroundColo : props.theme.getColor('gray-600');
+  switch (true) {
+    case !error && !warning && !active:
+      return defaultBgColor;
+    case !error && !warning && active:
+      return props.theme.getColor('gray-700');
+    case error && active:
+      return props.theme.getColor('red-500');
+    case error:
+      return props.theme.getColor('red-200');
+    case warning && active:
+      return props.theme.getColor('signal-yellow-500');
+    case warning:
+      return props.theme.getColor('signal-yellow-400');
+    default:
+      return props.theme.getColor('gray-600');
+  }
+}, () => {
+  var _props$backgroundColo3, _props$backgroundColo4;
+  const active = props.active;
+  const error = props.error;
+  const warning = props.warning;
+  const defaultBgColor = (_props$backgroundColo3 = props === null || props === void 0 || (_props$backgroundColo4 = props.backgroundColors) === null || _props$backgroundColo4 === void 0 ? void 0 : _props$backgroundColo4[1]) !== null && _props$backgroundColo3 !== void 0 ? _props$backgroundColo3 : props.theme.getColor('gray-200');
+  switch (true) {
+    case !error && !warning && !active:
+      return defaultBgColor;
+    case !error && !warning && active:
+      return props.theme.getColor('white');
+    case error && active:
+      return props.theme.getColor('red-500');
+    case error:
+      return props.theme.getColor('red-200');
+    case warning && active:
+      return props.theme.getColor('signal-yellow-500');
+    case warning:
+      return props.theme.getColor('signal-yellow-400');
+    default:
+      return props.theme.getColor('gray-200');
+  }
+}), props => props.theme.themeProp('color', () => {
+  var _props$colors$, _props$colors;
+  const defaultColor = (_props$colors$ = props === null || props === void 0 || (_props$colors = props.colors) === null || _props$colors === void 0 ? void 0 : _props$colors[0]) !== null && _props$colors$ !== void 0 ? _props$colors$ : props.theme.getColor('white');
+  if (props.warning && !props.error || props.error && !props.active) {
+    return props.theme.getColor('gray-900');
+  } else {
+    return defaultColor;
+  }
+}, () => {
+  var _props$colors$2, _props$colors2;
+  const defaultColor = (_props$colors$2 = props === null || props === void 0 || (_props$colors2 = props.colors) === null || _props$colors2 === void 0 ? void 0 : _props$colors2[1]) !== null && _props$colors$2 !== void 0 ? _props$colors$2 : props.theme.getColor('gray-900');
+  if (props.error && props.active) {
+    return props.theme.getColor('white');
+  } else {
+    return defaultColor;
+  }
+}));
+const BadgeIcon = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
+  display: flex;
+  align-items: center;
+  margin-right: ${0};
+  svg {
+    height: 12px;
+  }
+`), props => props.useGutter ? '4px' : 0);
+
+exports.Badge = Badge;
+exports.BadgeChildrenContainer = BadgeChildrenContainer;
+exports.BadgeIcon = BadgeIcon;
+exports.BadgeLabel = BadgeLabel;

package/cjs/components/data/Badge/data/Badge/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Badge = require('../../Badge.js');
+
+
+
+exports["default"] = Badge["default"];