@pareto-engineering/design-system 5.3.0 → 5.5.0

package/dist/cjs/f/common/index.js

@@ -1,43 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  FormLabel: true,
-  FormDescription: true,
-  FormDebugger: true
-};
-Object.defineProperty(exports, "FormDebugger", {
-  enumerable: true,
-  get: function () {
-    return _Debugger.Debugger;
-  }
-});
-Object.defineProperty(exports, "FormDescription", {
-  enumerable: true,
-  get: function () {
-    return _Description.Description;
-  }
-});
-Object.defineProperty(exports, "FormLabel", {
-  enumerable: true,
-  get: function () {
-    return _Label.Label;
-  }
-});
-var _Label = require("./Label");
-var _Description = require("./Description");
-var _Debugger = require("./Debugger");
-var _utils = require("./utils");
-Object.keys(_utils).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _utils[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _utils[key];
-    }
-  });
-});

package/dist/cjs/f/common/utils/index.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "integerAndGreaterThanZero", {
-  enumerable: true,
-  get: function () {
-    return _validators.integerAndGreaterThanZero;
-  }
-});
-Object.defineProperty(exports, "lookUpInputValueFromFetchedOptions", {
-  enumerable: true,
-  get: function () {
-    return _lookUpInputValueFromFetchedOptions.lookUpInputValueFromFetchedOptions;
-  }
-});
-var _lookUpInputValueFromFetchedOptions = require("./lookUpInputValueFromFetchedOptions");
-var _validators = require("./validators");

package/dist/cjs/f/common/utils/lookUpInputValueFromFetchedOptions.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.lookUpInputValueFromFetchedOptions = void 0;
-var _fuse = _interopRequireDefault(require("fuse.js"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const fuseOptions = {
-  findAllMatches: true,
-  keys: ['label']
-};
-const lookUpInputValueFromFetchedOptions = _ref => {
-  let {
-    items,
-    inputValue,
-    setOptions,
-    minLength
-  } = _ref;
-  const fuseSearch = new _fuse.default(items, fuseOptions);
-  const result = fuseSearch.search(inputValue);
-  if (result.length === 0 && inputValue.length > minLength) {
-    setOptions(prevItems => [...prevItems, {
-      label: `${inputValue} (Create new)`,
-      value: inputValue
-    }]);
-  }
-};
-exports.lookUpInputValueFromFetchedOptions = lookUpInputValueFromFetchedOptions;

package/dist/cjs/f/common/utils/validators.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.integerAndGreaterThanZero = void 0;
-const integerAndGreaterThanZero = value => {
-  let error = '';
-  if (value && value <= 0 || value === 0) {
-    error = 'Value must be greator than zero.';
-  }
-  if (value && value % 1 !== 0) {
-    error = 'You must enter a whole number.';
-  }
-  return error;
-};
-exports.integerAndGreaterThanZero = integerAndGreaterThanZero;

package/dist/cjs/f/fields/Checkbox/Checkbox.js

@@ -1,117 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-var _formik = require("formik");
-var _common = require("../../common");
-require("./styles.scss");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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); } /* @pareto-engineering/generator-front 1.0.12 */ // Local Definitions
-const baseClassName = _exports.default.base;
-const componentClassName = 'checkbox';
-
-/**
- * This is the component description
- */
-const Checkbox = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    name,
-    label,
-    description,
-    disabled,
-    optional,
-    labelColor
-    // ...otherProps
-  } = _ref;
-  const [field] = (0, _formik.useField)({
-    name,
-    type: 'checkbox'
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-  }, label && /*#__PURE__*/React.createElement(_common.FormLabel, {
-    name: name,
-    color: labelColor,
-    optional: optional
-    // {...otherProps}
-  }, label), /*#__PURE__*/React.createElement("input", _extends({
-    id: name,
-    className: "input",
-    type: "checkbox",
-    disabled: disabled
-  }, field)), /*#__PURE__*/React.createElement(_common.FormDescription, {
-    className: "s-1",
-    description: description,
-    name: name
-  }));
-};
-Checkbox.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: _propTypes.default.string,
-  /**
-   * The HTML class names for this element
-   */
-  className: _propTypes.default.string,
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-  /**
-   * The input name (html - and Formik state)
-   */
-  name: _propTypes.default.string.isRequired,
-  /**
-   * The Input description to guide the user if it's not obvious
-   */
-  description: _propTypes.default.string,
-  /**
-   * Whether the input should be disabled
-   */
-  disabled: _propTypes.default.bool,
-  /**
-   * The color of the label
-   */
-  labelColor: _propTypes.default.string,
-  /**
-   * The input label
-   */
-  label: _propTypes.default.string,
-  /**
-  * The number of columns the label should span
-  */
-  labelSpan: _propTypes.default.number,
-  /**
-   * The number of columns the input should span
-   */
-  inputSpan: _propTypes.default.number,
-  /**
-   * The number of columns the label should span on desktop
-   */
-  desktopLabelSpan: _propTypes.default.number,
-  /**
-   * The number of columns the input should span on desktop
-   */
-  desktopInputSpan: _propTypes.default.number,
-  /**
-   * Whether the input should have an optional tag
-   */
-  optional: _propTypes.default.bool
-};
-Checkbox.defaultProps = {
-  disabled: false
-};
-var _default = exports.default = Checkbox;

package/dist/cjs/f/fields/Checkbox/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Checkbox", {
-  enumerable: true,
-  get: function () {
-    return _Checkbox.default;
-  }
-});
-var _Checkbox = _interopRequireDefault(require("./Checkbox"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/f/fields/Checkbox/styles.scss

@@ -1,16 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@pareto-engineering/styles/src/mixins";
-@use "@pareto-engineering/styles/src/globals" as *;
-
-.#{bem.$base}.checkbox {
-  align-items: flex-start;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-  > .#{bem.$base}.form-label {
-    margin-bottom: var(--gap);
-  }
-}

package/dist/cjs/f/fields/ChoicesInput/ChoicesInput.js

@@ -1,151 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-var _common = require("./common");
-var _common2 = require("../../common");
-require("./styles.scss");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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); } /* @pareto-engineering/generator-front 1.0.12 */ // Local Definitions
-const baseClassName = _exports.default.base;
-const componentClassName = 'choices-input';
-
-/**
- * This is the component description
- */
-const ChoicesInput = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    name,
-    validate,
-    options,
-    multiple,
-    color,
-    label,
-    labelColor,
-    optional,
-    disabled,
-    description,
-    spaceBetween,
-    ...otherProps
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-  }, label && /*#__PURE__*/React.createElement(_common2.FormLabel, {
-    name: name,
-    color: labelColor,
-    optional: optional
-  }, label), /*#__PURE__*/React.createElement("div", {
-    className: ['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')
-  }, options.map(choice => /*#__PURE__*/React.createElement(_common.Choice, _extends({
-    className: `x-${color}`,
-    key: choice.value,
-    name: name,
-    id: `${name}-${choice.value}`,
-    multiple: multiple,
-    validate: validate,
-    disabled: disabled
-  }, otherProps, choice)))), /*#__PURE__*/React.createElement(_common2.FormDescription, {
-    className: "s-1",
-    description: description,
-    name: name
-  }));
-};
-ChoicesInput.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: _propTypes.default.string,
-  /**
-   * The HTML class names for this element
-   */
-  className: _propTypes.default.string,
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-  /**
-   * The choices name
-   */
-  name: _propTypes.default.string.isRequired,
-  /**
-   * The input field validator function
-   */
-  validate: _propTypes.default.string,
-  /**
-   * The choices input options
-   */
-  options: _propTypes.default.arrayOf(_propTypes.default.shape({
-    value: _propTypes.default.string,
-    label: _propTypes.default.string
-  })),
-  /**
-   * If the input should be multiple - checkbox
-   */
-  multiple: _propTypes.default.bool,
-  /**
-   * how many columns should be displayed on the mobile grid
-   */
-  gridColumnsMobile: _propTypes.default.number,
-  /**
-   * The choice color
-   */
-  color: _propTypes.default.string,
-  /**
-   * The selected choice color
-   */
-  colorChecked: _propTypes.default.string,
-  /**
-   * The label of the choices input
-   */
-  label: _propTypes.default.string,
-  /**
-   * Whether all the Choices inputs should be disabled
-   */
-  disabled: _propTypes.default.bool,
-  /**
-  * Whether the input is optional or not
-  */
-  optional: _propTypes.default.bool,
-  /**
-   * The select input description
-   */
-  description: _propTypes.default.string,
-  /**
-  * The number of columns the label should span
-  */
-  labelSpan: _propTypes.default.number,
-  /**
-   * The number of columns the input should span
-   */
-  inputSpan: _propTypes.default.number,
-  /**
-   * The number of columns the label should span on desktop
-   */
-  desktopLabelSpan: _propTypes.default.number,
-  /**
-   * The number of columns the input should span on desktop
-   */
-  desktopInputSpan: _propTypes.default.number,
-  /**
-   * The color of the label
-   */
-  labelColor: _propTypes.default.string
-};
-ChoicesInput.defaultProps = {
-  color: 'interactive',
-  disabled: false
-};
-var _default = exports.default = /*#__PURE__*/(0, _react.memo)(ChoicesInput);

package/dist/cjs/f/fields/ChoicesInput/common/Choice/Choice.js

@@ -1,105 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _formik = require("formik");
-var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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); } /* @pareto-engineering/generator-front 1.0.12 */ // Local Definitions
-const baseClassName = _exports.default.base;
-const componentClassName = 'choice';
-
-/**
- * This is the component description.
- */
-const Choice = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    name,
-    label,
-    labelClassName,
-    labelStyle,
-    value,
-    multiple,
-    validate,
-    disabled,
-    ...otherProps
-  } = _ref;
-  const type = multiple ? 'checkbox' : 'radio';
-  const [field] = (0, _formik.useField)({
-    name,
-    validate,
-    type,
-    value
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement("input", _extends({
-    type: type,
-    id: id,
-    name: name
-  }, field, otherProps, {
-    value: value,
-    disabled: disabled
-  })), /*#__PURE__*/React.createElement("label", {
-    htmlFor: id,
-    className: [labelClassName, disabled && 'disabled'].filter(e => e).join(' '),
-    style: labelStyle
-  }, label));
-};
-Choice.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: _propTypes.default.string,
-  /**
-   * The HTML class names for this element
-   */
-  className: _propTypes.default.string,
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-  /**
-   * The input name.
-   */
-  name: _propTypes.default.string.isRequired,
-  /**
-   * The input label.
-   */
-  label: _propTypes.default.string.isRequired,
-  /**
-   * The input label class name.
-   */
-  labelClassName: _propTypes.default.string,
-  /**
-   * The input label styles.
-   */
-  labelStyle: _propTypes.default.objectOf(_propTypes.default.string),
-  /**
-   * The input value.
-   */
-  value: _propTypes.default.string.isRequired,
-  /**
-   * If the input should be multiple - checkbox
-   */
-  multiple: _propTypes.default.bool,
-  /**
-   * The input field validator function
-   */
-  validate: _propTypes.default.func,
-  /**
-   * Whether the radio or checkbox choice should be disabled
-   */
-  disabled: _propTypes.default.bool
-};
-var _default = exports.default = Choice;

package/dist/cjs/f/fields/ChoicesInput/common/Choice/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Choice", {
-  enumerable: true,
-  get: function () {
-    return _Choice.default;
-  }
-});
-var _Choice = _interopRequireDefault(require("./Choice"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/f/fields/ChoicesInput/common/index.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Choice", {
-  enumerable: true,
-  get: function () {
-    return _Choice.Choice;
-  }
-});
-var _Choice = require("./Choice");

package/dist/cjs/f/fields/ChoicesInput/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ChoicesInput", {
-  enumerable: true,
-  get: function () {
-    return _ChoicesInput.default;
-  }
-});
-var _ChoicesInput = _interopRequireDefault(require("./ChoicesInput"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/f/fields/ChoicesInput/styles.scss

@@ -1,79 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-/* stylelint-disable selector-max-compound-selectors -- exception */
-/* stylelint-disable max-nesting-depth -- exception */
-
-@use "@pareto-engineering/bem";
-@use "@pareto-engineering/styles/src/mixins";
-@use "@pareto-engineering/styles/src/globals" as *;
-
-$default-flex-separator:calc(1em / 2) calc(.75em / 2);
-$default-transition:var(--theme-default-transition);
-$default-label-padding: .3em 1em calc(2em - .3em);
-$default-label-height: .5em;
-$default-input-border-radius: var(--theme-default-input-border-radius);
-$default-border: var(--theme-default-input-border);
-$hover-border: var(--theme-hover-input-border);
-$focus-border: var(--theme-focus-input-border);
-$default-background: var(--background-inputs);
-$disabled-background: var(--background-inputs-30);
-
-.#{bem.$base}.choices-input {
-  display: flex;
-  flex-direction: column;
-
-  > .#{bem.$base}.form-label {
-    margin-bottom: var(--gap);
-  }
-
-  > .choices {
-    display: flex;
-    flex-wrap: wrap;
-    gap: $default-flex-separator;
-
-    &.space-between {
-      justify-content: space-between;
-    }
-
-    >.choice {
-      display: flex;
-
-      input {
-        opacity: 0;
-        position: fixed;
-        visibility: none;
-        z-index: -1;
-      }
-
-      input:disabled + label {
-        background-color: $disabled-background;
-      }
-
-      > label {
-        background-color: $default-background;
-        border: $default-border;
-        border-radius: $default-input-border-radius;
-        color: var(--paragraph);
-        cursor: pointer;
-        display: block;
-        height: $default-label-height;
-        max-width: 100%;
-        padding: $default-label-padding;
-        position: relative;
-        transition: $default-transition;
-        white-space: nowrap;
-
-        &:not(.disabled) {
-          &:hover {
-            border: $hover-border;
-          }
-        }
-      }
-
-      input:checked + label {
-        background: var(--x);
-        color: var(--on-x);
-      }
-    }
-  }
-}
-