@ntbjs/react-components 1.2.0-rc.7 → 1.2.0-rc.9

package/{ActionButton-f150aedb.js → ActionButton-06df3d6c.js}

@@ -1,8 +1,9 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var styled = require('styled-components');
+var polished = require('polished');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -10,12 +11,18 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _templateObject, _templateObject2;
-var ActionButton$1 = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  height: 40px;\n  width: 40px;\n  border: 0;\n  color: inherit;\n  background-color: transparent;\n  ", "\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 0 0;\n  transition: background-size 250ms ease;\n  cursor: pointer;\n\n  ", "\n\n  &:disabled {\n    opacity: 0.5;\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  svg {\n    width: 100%;\n    max-height: 20px;\n    max-width: 20px;\n    pointer-events: none;\n    transition: color 250ms;\n  }\n"])), function (props) {
-  return props.theme.themeProp('background-image', "radial-gradient(circle at center, ".concat(props.theme.getColor('gray-600'), " 50%, transparent 50%)"), "radial-gradient(circle at center, ".concat(props.theme.getColor('gray-200'), " 50%, transparent 50%)"));
+var ActionButton$1 = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  height: 40px;\n  width: 40px;\n  border: 0;\n  color: inherit;\n  background-color: transparent;\n  ", "\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 0 0;\n  transition: background-size 250ms ease;\n  cursor: pointer;\n\n  ", "\n\n  ", "\n\n  &:disabled {\n    opacity: 0.5;\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  svg {\n    width: 100%;\n    max-height: 20px;\n    max-width: 20px;\n    pointer-events: none;\n    transition: color 250ms;\n  }\n"])), function (props) {
+  var _props$backgroundColo, _props$backgroundColo2, _props$backgroundColo3, _props$backgroundColo4;
+
+  var darkThemeBgColor = (_props$backgroundColo = props === null || props === void 0 ? 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');
+  var lightThemeBgColor = (_props$backgroundColo3 = props === null || props === void 0 ? 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');
+  return props.theme.themeProp('background-image', "radial-gradient(circle at center, ".concat(darkThemeBgColor, " 50%, transparent 50%)"), "radial-gradient(circle at center, ".concat(lightThemeBgColor, " 50%, transparent 50%)"));
 }, function (props) {
   return styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n    ", ":not(:disabled) {\n      background-size: 200% 200%;\n\n      svg {\n        ", ";\n      }\n    }\n  "])), props.active ? '' : ':hover', function (props) {
     return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
   });
+}, function (props) {
+  return props.useShadow ? props.theme.themeProp('box-shadow', "0px 3px 6px ".concat(polished.rgba(props.theme.getColor('black'), 0.7)), "0px 3px 6px ".concat(props.theme.getColor('black'))) : null;
 });
 
 var ActionButton = React__default['default'].forwardRef(function ActionButton(_ref, forwardedRef) {
@@ -36,8 +43,11 @@ ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
   icon: defaultTheme.PropTypes.element.isRequired,
   disabled: defaultTheme.PropTypes.bool,
   active: defaultTheme.PropTypes.bool,
-  onClick: defaultTheme.PropTypes.func
+  onClick: defaultTheme.PropTypes.func,
+  backgroundColors: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string)
 } : {};
-ActionButton.defaultProps = {};
+ActionButton.defaultProps = {
+  onClick: function onClick() {}
+};
 
 exports.ActionButton = ActionButton;

package/Alert-13b75102.js

@@ -0,0 +1,117 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
+var React = require('react');
+var styled = require('styled-components');
+var lodash = require('lodash');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var Alert$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: ", ";\n  width: ", ";\n  box-sizing: border-box;\n\n  ", "\n\n  ", "\n  \n  ", "\n  \n  text-align: ", ";\n"])), function (props) {
+  var _props$verticalPaddin, _props$horizontalPadd;
+
+  var verticalPadding = (_props$verticalPaddin = props.verticalPadding) !== null && _props$verticalPaddin !== void 0 ? _props$verticalPaddin : 17;
+  var horizontalPadding = (_props$horizontalPadd = props.horizontalPadding) !== null && _props$horizontalPadd !== void 0 ? _props$horizontalPadd : 30;
+  return "".concat(verticalPadding, "px ").concat(horizontalPadding, "px");
+}, function (props) {
+  return props.width ? "".concat(props.width, "px") : '100%';
+}, function (props) {
+  return props.warning && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')));
+}, function (props) {
+  return props.error && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200')));
+}, function (props) {
+  return props.info && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n      background: transparent;\n    "])));
+}, function (props) {
+  return props.align === 'center' ? 'center' : 'left';
+});
+var AlertRender = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  word-break: break-word;\n  ", "\n  ", "\n  ", ";\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n\n  span {\n    flex: 1;\n    padding-left: 5px;\n    ", ";\n  }\n"])), function (props) {
+  return props.lineHeight ? "line-height: ".concat(props.lineHeight, "px;") : null;
+}, function (props) {
+  return props.fontSize ? "font-size: ".concat(props.fontSize, "px;") : null;
+}, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
+}, function (props) {
+  return props.lineClamp ? styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n            display: -webkit-box;\n            -webkit-line-clamp: ", ";\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            text-overflow: ellipsis;\n          "])), props.lineClamp) : null;
+});
+
+var Alert = React__default['default'].forwardRef(function Alert(_ref, forwardedRef) {
+  var warning = _ref.warning,
+      error = _ref.error,
+      type = _ref.type,
+      alertMessage = _ref.alertMessage,
+      align = _ref.align,
+      icon = _ref.icon,
+      fontSize = _ref.fontSize,
+      lineHeight = _ref.lineHeight,
+      lineClamp = _ref.lineClamp,
+      verticalPadding = _ref.verticalPadding,
+      horizontalPadding = _ref.horizontalPadding,
+      width = _ref.width,
+      props = defaultTheme._objectWithoutProperties(_ref, ["warning", "error", "type", "alertMessage", "align", "icon", "fontSize", "lineHeight", "lineClamp", "verticalPadding", "horizontalPadding", "width"]);
+
+  var isWarning = false;
+  var isError = false;
+  var isInfo = true;
+
+  if (!lodash.isEmpty(type)) {
+    if (type === 'warning') {
+      isWarning = true;
+    } else if (type === 'error') {
+      isError = true;
+    } else {
+      isInfo = true;
+    }
+  } else {
+    isWarning = warning;
+    isError = error;
+
+    if (isWarning || isError) {
+      isInfo = false;
+    }
+  }
+
+  return React__default['default'].createElement(Alert$1, defaultTheme._extends({
+    ref: forwardedRef,
+    alertMessage: alertMessage,
+    warning: isWarning,
+    error: isError,
+    info: isInfo,
+    align: align,
+    verticalPadding: verticalPadding,
+    horizontalPadding: horizontalPadding,
+    width: width
+  }, props), React__default['default'].createElement(AlertRender, {
+    fontSize: fontSize,
+    lineHeight: lineHeight,
+    lineClamp: lineClamp
+  }, icon, " ", React__default['default'].createElement("span", null, alertMessage)));
+});
+Alert.propTypes = process.env.NODE_ENV !== "production" ? {
+  warning: defaultTheme.PropTypes.bool,
+  error: defaultTheme.PropTypes.bool,
+  type: defaultTheme.PropTypes.oneOf(['warning', 'error', 'info']),
+  icon: defaultTheme.PropTypes.element,
+  align: defaultTheme.PropTypes.oneOf(['left', 'center']),
+  alertMessage: defaultTheme.PropTypes.string,
+  fontSize: defaultTheme.PropTypes.number,
+  lineHeight: defaultTheme.PropTypes.number,
+  lineClamp: defaultTheme.PropTypes.number,
+  verticalPadding: defaultTheme.PropTypes.number,
+  horizontalPadding: defaultTheme.PropTypes.number,
+  width: defaultTheme.PropTypes.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
+};
+
+exports.Alert = Alert;