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

package/cjs/components/inputs/TextInput/TextInput.js

@@ -0,0 +1,147 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var index = require('../../../node_modules/react/index.js');
+var nanoid = require('nanoid');
+var index$2 = require('../../../node_modules/prop-types/index.js');
+var useMergedRefs = require('../../../node_modules/@restart/hooks/esm/useMergedRefs.js');
+var lodash = require('lodash');
+var editNote = require('../../../icons/edit-note.svg.js');
+var TextInput_styled = require('./TextInput.styled.js');
+var index$1 = require('../../../_virtual/index.js');
+
+const _excluded = ["value", "defaultValue", "name", "label", "placeholder", "type", "required", "disabled", "readOnly", "autoComplete", "description", "error", "warning", "icon", "adornments", "className", "style", "onChange", "onBlur", "noBorder"];
+const TextInput = index["default"].forwardRef(function TextInput(_ref, forwardedRef) {
+  let {
+      value,
+      defaultValue,
+      name,
+      label,
+      placeholder,
+      type,
+      required,
+      disabled,
+      readOnly,
+      autoComplete,
+      description,
+      error,
+      warning,
+      icon,
+      adornments,
+      className,
+      style,
+      onChange,
+      onBlur,
+      noBorder
+    } = _ref,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  const textInputDomNode = index$1.react.exports.useRef(null);
+  const textInputRef = useMergedRefs["default"](forwardedRef, textInputDomNode);
+  const [uniqueId] = index$1.react.exports.useState(nanoid.nanoid());
+  const hasError = index$1.react.exports.useMemo(() => {
+    if (lodash.isBoolean(error)) {
+      return error;
+    }
+    return !lodash.isEmpty(error);
+  }, [error]);
+  const hasWarning = index$1.react.exports.useMemo(() => {
+    if (lodash.isBoolean(warning)) {
+      return warning;
+    }
+    return !lodash.isEmpty(warning);
+  }, [warning]);
+  const descriptionText = index$1.react.exports.useMemo(() => {
+    if (!lodash.isEmpty(error)) {
+      return error;
+    }
+    if (!lodash.isEmpty(warning)) {
+      return warning;
+    }
+    if (!lodash.isEmpty(description)) {
+      return description;
+    }
+    return null;
+  }, [description, error, warning]);
+  return index["default"].createElement(TextInput_styled.TextInput, {
+    error: hasError,
+    disabled: disabled,
+    warning: hasWarning,
+    className: className,
+    style: style
+  }, typeof icon !== 'undefined' && index["default"].createElement(TextInput_styled.TextInputFieldIcon, null, icon), index["default"].createElement(TextInput_styled.TextInputWrapper, null, typeof (adornments === null || adornments === void 0 ? void 0 : adornments.prefix) === 'string' && adornments.prefix.length > 0 && index["default"].createElement(TextInput_styled.Adornment, {
+    htmlFor: `text-input-${uniqueId}`,
+    error: hasError,
+    warning: hasWarning,
+    isPrefix: true,
+    onClick: () => textInputDomNode.current.focus()
+  }, adornments.prefix), index["default"].createElement(TextInput_styled.TextInputField, _rollupPluginBabelHelpers["extends"]({
+    ref: textInputRef,
+    value: value,
+    defaultValue: defaultValue,
+    name: name,
+    placeholder: placeholder || ' ',
+    type: type,
+    required: required,
+    autoComplete: autoComplete,
+    hasIcon: Boolean(icon),
+    error: hasError,
+    warning: hasWarning,
+    id: `text-input-${uniqueId}`,
+    onChange: onChange,
+    onBlur: onBlur,
+    readOnly: readOnly,
+    noBorder: noBorder
+  }, rest)), !readOnly && noBorder && index["default"].createElement(TextInput_styled.InputIconContainer, {
+    error: error,
+    warning: warning
+  }, index["default"].createElement(editNote.ReactComponent, null)), label && index["default"].createElement(TextInput_styled.TextInputLabel, {
+    htmlFor: `text-input-${uniqueId}`,
+    hasPlaceholder: Boolean(placeholder),
+    hasAdornments: Boolean(typeof (adornments === null || adornments === void 0 ? void 0 : adornments.prefix) === 'string' && adornments.prefix.length > 0 || typeof (adornments === null || adornments === void 0 ? void 0 : adornments.suffix) === 'string' && adornments.suffix.length > 0),
+    hasIcon: Boolean(icon),
+    error: hasError,
+    warning: hasWarning
+  }, label, required && ' *'), typeof (adornments === null || adornments === void 0 ? void 0 : adornments.suffix) === 'string' && adornments.suffix.length > 0 && index["default"].createElement(TextInput_styled.Adornment, {
+    error: hasError,
+    warning: hasWarning,
+    isPrefix: false,
+    onClick: () => textInputDomNode.current.focus()
+  }, adornments.suffix)), typeof descriptionText === 'string' && descriptionText.length > 0 && index["default"].createElement(TextInput_styled.Description, {
+    error: hasError,
+    warning: hasWarning
+  }, descriptionText));
+});
+TextInput.defaultProps = {
+  type: 'text',
+  noBorder: false
+};
+TextInput.propTypes = process.env.NODE_ENV !== "production" ? {
+  value: index$2["default"].string,
+  defaultValue: index$2["default"].string,
+  name: index$2["default"].string,
+  label: index$2["default"].string,
+  placeholder: index$2["default"].string,
+  type: index$2["default"].string,
+  required: index$2["default"].bool,
+  disabled: index$2["default"].bool,
+  readOnly: index$2["default"].bool,
+  autoComplete: index$2["default"].string,
+  description: index$2["default"].string,
+  error: index$2["default"].oneOfType([index$2["default"].bool, index$2["default"].string]),
+  warning: index$2["default"].oneOfType([index$2["default"].bool, index$2["default"].string]),
+  icon: index$2["default"].element,
+  adornments: index$2["default"].shape({
+    prefix: index$2["default"].string,
+    suffix: index$2["default"].string
+  }),
+  className: index$2["default"].string,
+  style: index$2["default"].object,
+  onChange: index$2["default"].func,
+  onBlur: index$2["default"].func,
+  noBorder: index$2["default"].bool
+} : {};
+var TextInput$1 = TextInput;
+
+exports["default"] = TextInput$1;

package/cjs/components/inputs/TextInput/TextInput.styled.js

@@ -0,0 +1,276 @@
+'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,
+  _t9,
+  _t10,
+  _t11,
+  _t12,
+  _t13,
+  _t14,
+  _t15,
+  _t16,
+  _t17,
+  _t18,
+  _t19,
+  _t20,
+  _t21,
+  _t22,
+  _t23,
+  _t24,
+  _t25;
+const activeLabel = styled.css(_t || (_t = _`
+  font-size: 0.75rem;
+  padding: 0 3px;
+  top: -7px;
+  letter-spacing: 0.03em;
+  left: 8px !important;
+  opacity: 1 !important;
+`));
+const Adornment = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
+  flex-shrink: 0;
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: initial;
+  padding: 13px 10px;
+
+  ${0}
+  ${0}
+  border: 1px solid;
+  ${0}
+  border-radius: 3px;
+  ${0}
+  box-sizing: border-box;
+  appearance: none;
+  transition: border-color 350ms;
+  height: 2.75rem;
+
+  ${0}
+  ${0}
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')), props => props.isPrefix ? styled.css(_t3 || (_t3 = _`
+          padding-right: 10px;
+          border-right: 0;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        `)) : styled.css(_t4 || (_t4 = _`
+          padding-left: 0;
+          margin-left: -3px;
+          border-left: 0;
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        `)), props => props.warning && styled.css(_t5 || (_t5 = _`
+      border-color: ${0} !important;
+    `), props.theme.getColor('orange-500')), props => props.error && styled.css(_t6 || (_t6 = _`
+      border-color: ${0} !important;
+    `), props.theme.getColor('red-500')));
+const TextInputWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
+  display: flex;
+  align-content: center;
+
+  &:focus-within {
+    ${0} {
+      outline: none;
+      ${0}
+    }
+  }
+`), Adornment, props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'), 1));
+const InputIconContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
+  opacity: 0;
+  pointer-events: none;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  padding-right: 4px;
+  padding-left: 30px;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  color: ${0};
+
+  ${0}
+
+  ${0}
+
+  > svg {
+    width: 12px;
+  }
+`), props => props.theme.getColor('gray-400'), props => props.warning && props.theme.themeProp('color', '#C3AF43', '#C3AF43'), props => props.error && props.theme.themeProp('color', '#CB968F', '#CB968F'));
+const TextInputField = styled__default["default"].input.attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
+  display: block;
+  width: 100%;
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1;
+  padding: 13px 10px;
+  border-radius: 3px;
+  box-sizing: border-box;
+  appearance: none;
+  transition: border-color 350ms;
+  height: 2.75rem !important; // important is needed to override the default Foundation styling used in the Mediebank;
+  margin-bottom: 0; // needed to override the default Foundation styling used in the Mediebank;
+  ${0}
+  ${0}
+  border: 1px solid;
+  ${0};
+
+  ${0}
+
+  ${0}
+  ${0}
+  ${0}
+
+  &::placeholder {
+    ${0}
+
+    ${0}
+  }
+
+
+  &&:hover:not(:focus) {
+    ${0};
+    transition: background 350ms;
+    & + ${0} {
+      opacity: 1;
+      transition: opacity 350ms;
+    }
+  }
+
+  :focus {
+    outline: none;
+    border-color: ${0} !important
+    ${0}
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.noBorder || props.readOnly ? 'border-color: transparent !important' : props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')), props => props.readOnly && styled.css(_t10 || (_t10 = _`
+      user-select: text;
+      cursor: default;
+    `)), props => props.warning && styled.css(_t11 || (_t11 = _`
+      border-color: ${0} !important;
+    `), props.theme.getColor('orange-500')), props => props.error && styled.css(_t12 || (_t12 = _`
+      border-color: ${0} !important;
+    `), props.theme.getColor('red-500')), props => props.hasIcon && styled.css(_t13 || (_t13 = _`
+      padding-left: 35px;
+    `)), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1), props => props.theme.themeProp('opacity', 0.6, 0.5, 1), props => props.noBorder ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200')) : 'background: transparent', InputIconContainer, props => props.theme.getColor('gray-600'), props => props.readOnly && styled.css(_t14 || (_t14 = _`
+        outline: none;
+      `)));
+const TextInputLabel = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_t15 || (_t15 = _`
+  position: absolute;
+  top: 15px;
+  left: 11px;
+  line-height: 1.2;
+  font-size: 0.875rem;
+  transition: all 150ms;
+
+  ${0}
+
+  ${0}
+
+  ${0}
+
+  ${0}
+
+
+  ${0}
+
+
+   ${0}
+
+   ${0}
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')), props => props.theme.themeProp('opacity', 0.6, 0.5), props => props.theme.themeProp('background', `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`, `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`), props => (props.hasPlaceholder || props.hasAdornments) && styled.css(_t16 || (_t16 = _`
+      ${0};
+    `), activeLabel), props => props.hasIcon && styled.css(_t17 || (_t17 = _`
+      left: 35px;
+    `)), props => props.warning && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500')), props => props.error && props.theme.themeProp('color', props.theme.getColor('red-500'), props.theme.getColor('red-500')));
+const TextInputFieldIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t18 || (_t18 = _`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 2.625rem;
+  display: flex;
+  padding: 0 10px;
+
+  svg {
+    width: 15px;
+    opacity: 0.6;
+    transition: opacity 250ms;
+  }
+`));
+const TextInput = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t19 || (_t19 = _`
+  position: relative;
+
+  ${0}
+
+  &:focus-within {
+    ${0} {
+      ${0};
+    }
+
+    ${0} {
+      svg {
+        opacity: 1;
+      }
+    }
+  }
+
+  ${0}:not(:placeholder-shown) + ${0} {
+    ${0};
+    ${0}
+
+    ${0}
+    ${0} 
+  } 
+ 
+}
+`), props => props.disabled && styled.css(_t20 || (_t20 = _`
+      user-select: none;
+      opacity: 0.5;
+      cursor: not-allowed;
+      > * {
+        pointer-events: none;
+      }
+    `)), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, props => props.error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')), props => props.error && styled.css(_t21 || (_t21 = _`
+        color: ${0};
+      `), props.theme.getColor('red-500')), props => props.warning && styled.css(_t22 || (_t22 = _`
+        color: ${0};
+      `), props.theme.getColor('orange-500')));
+const Description = styled__default["default"].p.attrs(defaultTheme.applyDefaultTheme)(_t23 || (_t23 = _`
+  margin: 8px 0 0 0;
+  padding: 0 0.6875rem;
+  font-size: 0.75rem;
+  line-height: 1.333;
+
+  ${0};
+
+  ${0}
+
+  ${0}
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.error && styled.css(_t24 || (_t24 = _`
+      ${0}
+    `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))), props => props.warning && styled.css(_t25 || (_t25 = _`
+      ${0}
+    `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500'))));
+
+exports.Adornment = Adornment;
+exports.Description = Description;
+exports.InputIconContainer = InputIconContainer;
+exports.TextInput = TextInput;
+exports.TextInputField = TextInputField;
+exports.TextInputFieldIcon = TextInputFieldIcon;
+exports.TextInputLabel = TextInputLabel;
+exports.TextInputWrapper = TextInputWrapper;

package/cjs/components/inputs/TextInput/inputs/TextInput/index.js

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

package/cjs/components/inputs/inputs/index.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ActionButton = require('../ActionButton/ActionButton.js');
+var Button = require('../Button/Button.js');
+var Checkbox = require('../Checkbox/Checkbox.js');
+var CompactAutocompleteSelect = require('../CompactAutocompleteSelect/CompactAutocompleteSelect.js');
+var CompactStarRating = require('../CompactStarRating/CompactStarRating.js');
+var CompactTextInput = require('../CompactTextInput/CompactTextInput.js');
+var MultiSelect = require('../MultiSelect/MultiSelect.js');
+var Radio = require('../Radio/Radio.js');
+var TextArea = require('../TextArea/TextArea.js');
+var TextInput = require('../TextInput/TextInput.js');
+var Switch = require('../Switch/Switch.js');
+var MultiLevelCheckbox = require('../MultiLevelCheckbox/MultiLevelCheckbox.js');
+var MultiLevelCheckboxSelect = require('../MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js');
+
+
+
+exports.ActionButton = ActionButton["default"];
+exports.Button = Button["default"];
+exports.Checkbox = Checkbox["default"];
+exports.CompactAutocompleteSelect = CompactAutocompleteSelect["default"];
+exports.CompactStarRating = CompactStarRating["default"];
+exports.CompactTextInput = CompactTextInput["default"];
+exports.MultiSelect = MultiSelect["default"];
+exports.Radio = Radio["default"];
+exports.TextArea = TextArea["default"];
+exports.TextInput = TextInput["default"];
+exports.Switch = Switch["default"];
+exports.MultiLevelCheckbox = MultiLevelCheckbox["default"];
+exports.MultiLevelCheckboxSelect = MultiLevelCheckboxSelect["default"];

package/cjs/components/layout/InputGroup/InputGroup.js

@@ -0,0 +1,26 @@
+'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 InputGroup_styled = require('./InputGroup.styled.js');
+
+const _excluded = ["children"];
+const InputGroup = index["default"].forwardRef(function InputGroup(_ref, forwardedRef) {
+  let {
+      children
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return index["default"].createElement(InputGroup_styled.InputGroup, _rollupPluginBabelHelpers["extends"]({
+    ref: forwardedRef
+  }, props), children);
+});
+InputGroup.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: index$1["default"].node
+} : {};
+InputGroup.defaultProps = {};
+var InputGroup$1 = InputGroup;
+
+exports["default"] = InputGroup$1;

package/cjs/components/layout/InputGroup/InputGroup.styled.js

@@ -0,0 +1,18 @@
+'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;
+const InputGroup = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  margin: 8px 0;
+`));
+
+exports.InputGroup = InputGroup;

package/cjs/components/layout/InputGroup/layout/InputGroup/index.js

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

package/cjs/components/layout/SectionSeparator/SectionSeparator.js

@@ -0,0 +1,29 @@
+'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 SectionSeparator_styled = require('./SectionSeparator.styled.js');
+
+const _excluded = ["vertical"];
+const SectionSeparator = index["default"].forwardRef(function SectionSeparator(_ref, forwardedRef) {
+  let {
+      vertical
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return index["default"].createElement(SectionSeparator_styled.SectionSeparator, _rollupPluginBabelHelpers["extends"]({
+    vertical: vertical,
+    ref: forwardedRef
+  }, props));
+});
+SectionSeparator.propTypes = process.env.NODE_ENV !== "production" ? {
+  vertical: index$1["default"].bool
+} : {};
+SectionSeparator.defaultProps = {
+  vertical: false
+};
+var SectionSeparator$1 = SectionSeparator;
+
+exports["default"] = SectionSeparator$1;

package/cjs/components/layout/SectionSeparator/SectionSeparator.styled.js

@@ -0,0 +1,21 @@
+'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;
+const SectionSeparator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+ height: ${0};
+ width: ${0};
+
+ ${0}
+`), props => props.vertical ? '100%' : '1px', props => props.vertical ? '1px' : '100%', props => props.theme.themeProp('background-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200')));
+
+exports.SectionSeparator = SectionSeparator;

package/cjs/components/layout/SectionSeparator/layout/SectionSeparator/index.js

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

package/cjs/components/layout/layout/index.js

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