@ntbjs/react-components 2.0.0-rc.13 → 2.0.0-rc.26

package/build/ActionButton-03dc5f67.js

@@ -0,0 +1,92 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
+var React = require('react');
+var defaultTheme = require('./defaultTheme-d9a7342e.js');
+var styled = require('styled-components');
+var polished = require('polished');
+
+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);
+
+const ActionButton$1 = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  width: ${props => `${props.actionWidthHeight[0]}px`};
+  height: ${props => `${props.actionWidthHeight[1]}px`};
+  border: 0;
+  color: inherit;
+  background-color: transparent;
+  ${props => {
+  const darkThemeBgColor = props?.backgroundColors?.[0] ?? props.theme.getColor('gray-600');
+  const lightThemeBgColor = props?.backgroundColors?.[1] ?? props.theme.getColor('gray-200');
+  return props.theme.themeProp('background-image', `radial-gradient(circle at center, ${darkThemeBgColor} 50%, transparent 50%)`, `radial-gradient(circle at center, ${lightThemeBgColor} 50%, transparent 50%)`);
+}}
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 0 0;
+  transition: background-size 250ms ease;
+  cursor: pointer;
+
+  ${props => styled.css`
+    ${props.active ? '' : ':hover'}:not(:disabled) {
+      background-size: 200% 200%;
+
+      svg {
+        ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))};
+      }
+    }
+  `}
+
+  ${props => props.useShadow ? props.theme.themeProp('box-shadow', `0px 3px 6px ${polished.rgba(props.theme.getColor('black'), 0.7)}`, `0px 3px 6px ${props.theme.getColor('black')}`) : null}
+
+  &:disabled {
+    opacity: 0.5;
+    color: inherit;
+    cursor: not-allowed;
+  }
+
+  svg {
+    width: 100%;
+    max-width: ${props => `${props.actionWidthHeight[0] - 15}px`};
+    max-height: ${props => `${props.actionWidthHeight[1] - 15}px`};
+
+    pointer-events: none;
+    transition: color 250ms;
+  }
+`;
+
+const ActionButton = React__default["default"].forwardRef(function ActionButton({
+  icon,
+  disabled,
+  active,
+  onClick,
+  actionWidthHeight,
+  ...props
+}, forwardedRef) {
+  return React__default["default"].createElement(ActionButton$1, _rollupPluginBabelHelpers._extends({
+    ref: forwardedRef,
+    disabled: disabled,
+    active: active,
+    onClick: onClick,
+    actionWidthHeight: actionWidthHeight
+  }, props), icon);
+});
+ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  icon: defaultTheme.PropTypes.element.isRequired,
+  disabled: defaultTheme.PropTypes.bool,
+  active: defaultTheme.PropTypes.bool,
+  onClick: defaultTheme.PropTypes.func,
+  backgroundColors: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string),
+  actionWidthHeight: defaultTheme.PropTypes.array
+} : {};
+ActionButton.defaultProps = {
+  onClick: () => {},
+  actionWidthHeight: [40, 40]
+};
+
+exports.ActionButton = ActionButton;

package/build/Alert-8a511bdc.js

@@ -0,0 +1,138 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
+var React = require('react');
+var defaultTheme = require('./defaultTheme-d9a7342e.js');
+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);
+
+const Alert$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  display: flex;
+  flex-direction: column;
+  padding: ${props => {
+  const verticalPadding = props.verticalPadding ?? 17;
+  const horizontalPadding = props.horizontalPadding ?? 30;
+  return `${verticalPadding}px ${horizontalPadding}px`;
+}};
+  width: ${props => props.width ? `${props.width}px` : '100%'};
+  box-sizing: border-box;
+
+  ${props => props.warning && styled.css`
+      ${props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))}
+    `}
+
+  ${props => props.error && styled.css`
+      ${props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200'))}
+    `}
+  
+  ${props => props.info && styled.css`
+      background: transparent;
+    `}
+  
+  text-align: ${props => props.align === 'center' ? 'center' : 'left'};
+`;
+const AlertRender = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  word-break: break-word;
+  ${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'))};
+
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  span {
+    flex: 1;
+    padding-left: 5px;
+    ${props => props.lineClamp ? styled.css`
+            display: -webkit-box;
+            -webkit-line-clamp: ${props.lineClamp};
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          ` : null};
+  }
+`;
+
+const Alert = React__default["default"].forwardRef(function Alert({
+  warning,
+  error,
+  type,
+  alertMessage,
+  align,
+  icon,
+  fontSize,
+  lineHeight,
+  lineClamp,
+  verticalPadding,
+  horizontalPadding,
+  width,
+  ...props
+}, forwardedRef) {
+  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 {
+    isWarning = warning;
+    isError = error;
+    if (isWarning || isError) {
+      isInfo = false;
+    }
+  }
+  return React__default["default"].createElement(Alert$1, _rollupPluginBabelHelpers._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;