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

package/build/ActionButton-4db754c3.js

@@ -0,0 +1,85 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
+import React__default from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
+import styled, { css } from 'styled-components';
+import { rgba } from 'polished';
+
+const ActionButton$1 = styled.button.attrs(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 => 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 ${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.forwardRef(function ActionButton({
+  icon,
+  disabled,
+  active,
+  onClick,
+  actionWidthHeight,
+  ...props
+}, forwardedRef) {
+  return React__default.createElement(ActionButton$1, _extends({
+    ref: forwardedRef,
+    disabled: disabled,
+    active: active,
+    onClick: onClick,
+    actionWidthHeight: actionWidthHeight
+  }, props), icon);
+});
+ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  icon: PropTypes.element.isRequired,
+  disabled: PropTypes.bool,
+  active: PropTypes.bool,
+  onClick: PropTypes.func,
+  backgroundColors: PropTypes.arrayOf(PropTypes.string),
+  actionWidthHeight: PropTypes.array
+} : {};
+ActionButton.defaultProps = {
+  onClick: () => {},
+  actionWidthHeight: [40, 40]
+};
+
+export { ActionButton as A };

package/build/Alert-e6847a22.js

@@ -0,0 +1,131 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
+import React__default from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
+import styled, { css } from 'styled-components';
+import { isEmpty } from 'lodash';
+
+const Alert$1 = styled.div.attrs(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 && css`
+      ${props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))}
+    `}
+
+  ${props => props.error && css`
+      ${props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200'))}
+    `}
+  
+  ${props => props.info && css`
+      background: transparent;
+    `}
+  
+  text-align: ${props => props.align === 'center' ? 'center' : 'left'};
+`;
+const AlertRender = styled.div.attrs(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 ? css`
+            display: -webkit-box;
+            -webkit-line-clamp: ${props.lineClamp};
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          ` : null};
+  }
+`;
+
+const Alert = React__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 (!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.createElement(Alert$1, _extends({
+    ref: forwardedRef,
+    alertMessage: alertMessage,
+    warning: isWarning,
+    error: isError,
+    info: isInfo,
+    align: align,
+    verticalPadding: verticalPadding,
+    horizontalPadding: horizontalPadding,
+    width: width
+  }, props), React__default.createElement(AlertRender, {
+    fontSize: fontSize,
+    lineHeight: lineHeight,
+    lineClamp: lineClamp
+  }, icon, " ", React__default.createElement("span", null, alertMessage)));
+});
+Alert.propTypes = process.env.NODE_ENV !== "production" ? {
+  warning: PropTypes.bool,
+  error: PropTypes.bool,
+  type: PropTypes.oneOf(['warning', 'error', 'info']),
+  icon: PropTypes.element,
+  align: PropTypes.oneOf(['left', 'center']),
+  alertMessage: PropTypes.string,
+  fontSize: PropTypes.number,
+  lineHeight: PropTypes.number,
+  lineClamp: PropTypes.number,
+  verticalPadding: PropTypes.number,
+  horizontalPadding: PropTypes.number,
+  width: 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
+};
+
+export { Alert as A };

package/build/Badge-d93586a9.js

@@ -0,0 +1,214 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
+import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
+import React__default from 'react';
+import styled, { css } from 'styled-components';
+
+const Badge$1 = styled.span.attrs(applyDefaultTheme)`
+  align-content: center;
+  display: ${props => props.elevated || !props.hasChildren ? 'inline-flex' : 'flex'};
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 1rem;
+  font-weight: 500;
+  min-height: 24px;
+  position: relative;
+  width: ${props => props.elevated ? 'fit-content' : 'initial'};
+`;
+const BadgeChildrenContainer = styled.span.attrs(applyDefaultTheme)`
+  align-self: center;
+  height: fit-content;
+  margin-right: 8px;
+`;
+const BadgeLabel = styled.span.attrs(applyDefaultTheme)`
+  border-radius: ${props => props.elevated ? '12px' : '14px'};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  font-size: ${props => {
+  if (props.fontSize) {
+    return `${props.fontSize}px`;
+  } else {
+    return props.elevated ? '0.625rem' : '0.750rem';
+  }
+}};
+  font-weight: ${props => props.fontWeight ? props.fontWeight : 'normal'};
+  line-height: ${props => props.lineHeight ? `${props.lineHeight}px` : 'normal'};
+  height: ${props => props.height ? `${props.height}px` : 'fit-content'};
+  letter-spacing: 0.32px;
+  margin-left: ${props => props.elevated ? '15px' : 'auto'};
+  position: ${props => props.elevated ? 'absolute' : 'initial'};
+  right: 0;
+  transform: ${props => props.elevated ? 'translate(33%, -8px)' : 'initial'};
+
+  ${props => props.width ? css`
+          width: ${props.width}px;
+        ` : null}
+
+  ${props => props.minWidth ? css`
+          min-width: ${props.minWidth}px;
+        ` : null}
+
+  ${props => props.minHeight ? css`
+          min-height: ${props.minHeight}px;
+        ` : 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 css`
+      padding: ${verticalPadding} ${horizontalPadding};
+    `;
+}}
+
+  ${props => props.theme.themeProp('background', () => {
+  const active = props.active;
+  const error = props.error;
+  const warning = props.warning;
+  const defaultBgColor = props?.backgroundColors?.[0] ?? 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');
+  }
+}, () => {
+  const active = props.active;
+  const error = props.error;
+  const warning = props.warning;
+  const defaultBgColor = props?.backgroundColors?.[1] ?? 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', () => {
+  const defaultColor = props?.colors?.[0] ?? props.theme.getColor('white');
+  if (props.warning && !props.error || props.error && !props.active) {
+    return props.theme.getColor('gray-900');
+  } else {
+    return defaultColor;
+  }
+}, () => {
+  const defaultColor = props?.colors?.[1] ?? props.theme.getColor('gray-900');
+  if (props.error && props.active) {
+    return props.theme.getColor('white');
+  } else {
+    return defaultColor;
+  }
+})}
+`;
+const BadgeIcon = styled.span.attrs(applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  margin-right: ${props => props.useGutter ? '4px' : 0};
+  svg {
+    height: 12px;
+  }
+`;
+
+const Badge = React__default.forwardRef(function Badge({
+  badgeContent,
+  badgeIcon,
+  children,
+  elevated,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  active,
+  error,
+  warning,
+  backgroundColors,
+  colors,
+  verticalPadding,
+  horizontalPadding,
+  height,
+  minHeight,
+  width,
+  minWidth,
+  ...props
+}, forwardedRef) {
+  if (typeof badgeContent === 'number') {
+    badgeContent = Intl.NumberFormat('en', {
+      notation: 'compact'
+    }).format(badgeContent);
+  }
+  return React__default.createElement(Badge$1, _extends({
+    ref: forwardedRef,
+    elevated: elevated,
+    hasChildren: Boolean(children)
+  }, props), children && React__default.createElement(BadgeChildrenContainer, null, children), (badgeIcon || badgeContent) && React__default.createElement(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 && React__default.createElement(BadgeIcon, {
+    useGutter: !!badgeContent
+  }, badgeIcon), badgeContent));
+});
+Badge.propTypes = process.env.NODE_ENV !== "production" ? {
+  badgeIcon: PropTypes.node,
+  badgeContent: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.func, PropTypes.element]),
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  elevated: PropTypes.bool,
+  active: PropTypes.bool,
+  error: PropTypes.bool,
+  warning: PropTypes.bool,
+  fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  fontWeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  colors: PropTypes.arrayOf(PropTypes.string),
+  backgroundColors: PropTypes.arrayOf(PropTypes.string),
+  verticalPadding: PropTypes.number,
+  horizontalPadding: PropTypes.number,
+  height: PropTypes.number,
+  minHeight: PropTypes.number,
+  width: PropTypes.number,
+  minWidth: PropTypes.number
+} : {};
+Badge.defaultProps = {
+  elevated: false,
+  active: false,
+  error: false,
+  warning: false,
+  badgeIcon: null,
+  fontWeight: 'normal',
+  lineHeight: 'normal'
+};
+
+export { Badge as B };