@pareto-engineering/design-system 4.0.0-alpha.62 → 4.0.0-alpha.63

package/dist/cjs/f/fields/V2/TextInput/TextInput.js

@@ -0,0 +1,155 @@
+"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 _formik = require("formik");
+var _common = require("../../../common");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 && Object.prototype.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; } /* @pareto-engineering/generator-front 1.0.12 */
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'text-input';
+
+/**
+ * This is the component description.
+ */
+const TextInput = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    type,
+    name,
+    label,
+    color,
+    labelColor,
+    validate,
+    description,
+    disabled,
+    placeholder,
+    optional,
+    autoComplete,
+    symbol,
+    ...otherProps
+  } = _ref;
+  (0, _react.useInsertionEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
+  const [field] = (0, _formik.useField)({
+    name,
+    validate
+  });
+  const symbolStyle = symbol ? {
+    '--symbol': symbol
+  } : {};
+  const InputWrapper = symbol ? 'div' : React.Fragment;
+  const inputWrapperProps = symbol ? {
+    className: 'input-wrapper'
+  } : {};
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `y-${color} ${symbol ? 'has-symbol' : ''}`].filter(e => e).join(' '),
+    style: {
+      ...symbolStyle,
+      ...style
+    }
+  }, /*#__PURE__*/React.createElement(_common.FormLabelV2, {
+    name: name,
+    color: labelColor,
+    optional: optional
+    // {...otherProps}
+  }, label), /*#__PURE__*/React.createElement(InputWrapper, inputWrapperProps, /*#__PURE__*/React.createElement("input", _extends({
+    id: name,
+    className: "input",
+    type: type,
+    disabled: disabled,
+    placeholder: placeholder,
+    autoComplete: autoComplete
+  }, field, otherProps))), /*#__PURE__*/React.createElement(_common.FormDescriptionV2, {
+    className: "s-1",
+    description: description,
+    name: name
+  }));
+};
+TextInput.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 label
+   */
+  label: _propTypes.default.string.isRequired,
+  /**
+   * The input label color
+   */
+  labelColor: _propTypes.default.string,
+  /**
+   * The type of the input (html)
+   */
+  type: _propTypes.default.oneOf(['text', 'email', 'password', 'number', 'date', 'time', 'datetime', 'month', 'tel', 'hidden', 'url']),
+  /**
+   * The input field validator function
+   */
+  validate: _propTypes.default.func,
+  /**
+   * If the slide will only have one input
+   */
+  oneInputLabel: _propTypes.default.bool,
+  /**
+   * Input description
+   */
+  description: _propTypes.default.string,
+  /**
+   * Whether the text input should be disabled
+   */
+  disabled: _propTypes.default.bool,
+  /**
+   * The placeholder text for the input
+   */
+  placeholder: _propTypes.default.string,
+  /**
+   * The text input color
+   */
+  color: _propTypes.default.string,
+  /**
+  * Whether the input is optional or not
+  */
+  optional: _propTypes.default.bool,
+  /**
+   * The autoComplete value that the browser should watch for the input
+   * `https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete`
+   */
+  autoComplete: _propTypes.default.string,
+  /**
+   * A symbol to be set inside the input field
+   */
+  symbol: _propTypes.default.string
+};
+TextInput.defaultProps = {
+  type: 'text',
+  color: 'paragraph',
+  disabled: false
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(TextInput);

package/dist/cjs/f/fields/V2/TextInput/index.js

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

package/dist/cjs/f/fields/V2/TextInput/styles.scss

@@ -0,0 +1,78 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+$default-padding: .55em .75em;
+$default-symbol-left: 1em;
+$default-padding-with-symbol:
+  .55em
+  calc($default-symbol-left - 1em)
+  .55em
+  calc($default-symbol-left + 1em);
+$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}.text-input {
+  display: flex;
+  flex-direction: column;
+
+  > .#{bem.$base}.form-label {
+    margin-bottom: var(--gap);
+  }
+
+
+  &.has-symbol {
+    > .input-wrapper {
+      position: relative;
+
+      &::before {
+        color: var(--y);
+        content: var(--symbol);
+        left: $default-symbol-left;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    input {
+      padding: $default-padding-with-symbol;
+    }
+  }
+
+  .input {
+    background-color: $default-background;
+    border: $default-border;
+    border-radius: $default-input-border-radius;
+    color: var(--y);
+    outline: none;
+    padding: $default-padding;
+    width: 100%;
+
+    &::placeholder {
+      color: var(--metadata);
+    }
+
+    &:disabled {
+      background-color: $disabled-background;
+    }
+
+    &:not(:disabled) {
+      &:hover,
+      &:active {
+        border: $hover-border;
+      }
+
+      &:focus {
+        border: $focus-border;
+      }
+    }
+  }
+}
+

package/dist/cjs/f/fields/V2/TextareaInput/TextareaInput.js

@@ -0,0 +1,152 @@
+"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 _formik = require("formik");
+var _common = require("../../../common");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 && Object.prototype.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; } /* @pareto-engineering/generator-front 1.0.12 */ // Local Definitions
+const baseClassName = _exports.default.base;
+const componentClassName = 'text-area-input';
+
+/**
+ * This is the component description.
+ */
+const TextareaInput = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    name,
+    label,
+    validate,
+    color,
+    rows,
+    optional,
+    labelColor,
+    description,
+    disabled,
+    placeholder,
+    autoComplete,
+    resize
+    // ...otherProps
+  } = _ref;
+  (0, _react.useInsertionEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
+  const [field] = (0, _formik.useField)({
+    name,
+    validate
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement(_common.FormLabelV2, {
+    name: name,
+    color: labelColor,
+    optional: optional
+    // {...otherProps}
+  }, label), /*#__PURE__*/React.createElement("textarea", _extends({
+    id: name,
+    className: "textarea"
+  }, field, {
+    style: {
+      resize
+    },
+    placeholder: placeholder,
+    rows: rows,
+    disabled: disabled,
+    autoComplete: autoComplete
+  })), /*#__PURE__*/React.createElement(_common.FormDescriptionV2, {
+    className: "s-1",
+    description: description,
+    name: name
+  }));
+};
+TextareaInput.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 label
+   */
+  label: _propTypes.default.string.isRequired,
+  /**
+   * The input value validator function
+   */
+  validate: _propTypes.default.func,
+  /**
+   * If the text area depends on it's label's text as the default description
+   */
+  labelAsDescription: _propTypes.default.bool,
+  /**
+   * The textarea id
+  */
+  textAreaId: _propTypes.default.string,
+  /**
+   * The number of rows int the text area
+   */
+  rows: _propTypes.default.number,
+  /**
+   * Color of the text
+   */
+  color: _propTypes.default.string,
+  /**
+   * Label base color
+   */
+  labelColor: _propTypes.default.string,
+  /**
+   * Text area description
+   */
+  description: _propTypes.default.string,
+  /**
+   * Whether the text area should be disabled
+   */
+  disabled: _propTypes.default.bool,
+  /**
+   * The textarea placeholder text
+   */
+  placeholder: _propTypes.default.string,
+  /**
+   * The autoComplete value that the browser should watch for the input
+   */
+  autoComplete: _propTypes.default.string,
+  /**
+   * Whether to disable or allow only a certain method of resizing the area
+   * Textarea docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
+   */
+  resize: _propTypes.default.string,
+  /**
+  * Whether the input is optional or not
+  */
+  optional: _propTypes.default.bool
+};
+TextareaInput.defaultProps = {
+  rows: 10,
+  disabled: false,
+  resize: 'vertical',
+  color: 'paragraph'
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(TextareaInput);

package/dist/cjs/f/fields/V2/TextareaInput/index.js

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

package/dist/cjs/f/fields/V2/TextareaInput/styles.scss

@@ -0,0 +1,53 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+$default-padding: .55em .75em;
+$default-border: 1px solid var(--outline-inputs);
+$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}.text-area-input {
+  display: flex;
+  flex-direction: column;
+
+  > .#{bem.$base}.form-label {
+    margin-bottom: var(--gap);
+  }
+
+
+  > .textarea {
+    background: $default-background;
+    border: $default-border;
+    border-radius: $default-input-border-radius;
+    color: var(--y);
+    outline: none;
+    padding: $default-padding;
+    width: 100%;
+
+    &::placeholder {
+      color: var(--metadata);
+    }
+
+    &:disabled {
+      background-color: $disabled-background;
+    }
+
+    &:not(:disabled) {
+      &:hover,
+      &:active {
+        border: $hover-border;
+      }
+
+      &:focus {
+        border: $focus-border;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CheckboxV2", {
+  enumerable: true,
+  get: function () {
+    return _Checkbox.Checkbox;
+  }
+});
+Object.defineProperty(exports, "ChoicesInputV2", {
+  enumerable: true,
+  get: function () {
+    return _ChoicesInput.ChoicesInput;
+  }
+});
+Object.defineProperty(exports, "EditorInputV2", {
+  enumerable: true,
+  get: function () {
+    return _EditorInput.EditorInput;
+  }
+});
+Object.defineProperty(exports, "LinkInputV2", {
+  enumerable: true,
+  get: function () {
+    return _LinkInput.LinkInput;
+  }
+});
+Object.defineProperty(exports, "QueryChoicesV2", {
+  enumerable: true,
+  get: function () {
+    return _QueryChoices.QueryChoices;
+  }
+});
+Object.defineProperty(exports, "QueryComboboxV2", {
+  enumerable: true,
+  get: function () {
+    return _QueryCombobox.QueryCombobox;
+  }
+});
+Object.defineProperty(exports, "QuerySelectV2", {
+  enumerable: true,
+  get: function () {
+    return _QuerySelect.QuerySelect;
+  }
+});
+Object.defineProperty(exports, "RatingsInputV2", {
+  enumerable: true,
+  get: function () {
+    return _RatingsInput.RatingsInput;
+  }
+});
+Object.defineProperty(exports, "SelectInputV2", {
+  enumerable: true,
+  get: function () {
+    return _SelectInput.SelectInput;
+  }
+});
+Object.defineProperty(exports, "TextInputV2", {
+  enumerable: true,
+  get: function () {
+    return _TextInput.TextInput;
+  }
+});
+Object.defineProperty(exports, "TextareaInputV2", {
+  enumerable: true,
+  get: function () {
+    return _TextareaInput.TextareaInput;
+  }
+});
+var _TextInput = require("./TextInput");
+var _SelectInput = require("./SelectInput");
+var _ChoicesInput = require("./ChoicesInput");
+var _TextareaInput = require("./TextareaInput");
+var _RatingsInput = require("./RatingsInput");
+var _QueryCombobox = require("./QueryCombobox");
+var _QuerySelect = require("./QuerySelect");
+var _Checkbox = require("./Checkbox");
+var _QueryChoices = require("./QueryChoices");
+var _LinkInput = require("./LinkInput");
+var _EditorInput = require("./EditorInput");

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

@@ -3,6 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  TextInput: true,
+  SelectInput: true,
+  ChoicesInput: true,
+  TextareaInput: true,
+  RatingsInput: true,
+  QueryCombobox: true,
+  QuerySelect: true,
+  Checkbox: true,
+  QueryChoices: true,
+  LinkInput: true,
+  EditorInput: true
+};
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function () {
@@ -79,4 +92,16 @@ var _QuerySelect = require("./QuerySelect");
 var _Checkbox = require("./Checkbox");
 var _QueryChoices = require("./QueryChoices");
 var _LinkInput = require("./LinkInput");
-var _EditorInput = require("./EditorInput");
+var _EditorInput = require("./EditorInput");
+var _V = require("./V2");
+Object.keys(_V).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _V[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _V[key];
+    }
+  });
+});

package/dist/es/f/FormInput/FormInput.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import * as React from 'react';
 import { memo } from 'react';
 import PropTypes from 'prop-types';
-import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices, LinkInput, EditorInput } from "../fields";
+import { TextInput as TextInputV1, TextareaInput as TextareaInputV1, ChoicesInput as ChoicesInputV1, SelectInput as SelectInputV1, QueryCombobox as QueryComboboxV1, QuerySelect as QuerySelectV1, RatingsInput as RatingsInputV1, Checkbox as CheckboxV1, QueryChoices as QueryChoicesV1, LinkInput as LinkInputV1, EditorInput as EditorInputV1, TextInputV2, TextareaInputV2, ChoicesInputV2, SelectInputV2, QueryComboboxV2, QuerySelectV2, RatingsInputV2, CheckboxV2, QueryChoicesV2, LinkInputV2, EditorInputV2 } from "../fields";
 import "./styles.scss";
 
 // Local Definitions
@@ -20,9 +20,34 @@ const FormInput = ({
   type,
   extraTypes,
   disabled,
+  isVersionTwo,
   ...otherProps
 }) => {
   const newClassName = [className, componentClassName].filter(Boolean).join(' ');
+  let TextInput = TextInputV1;
+  let TextareaInput = TextareaInputV1;
+  let ChoicesInput = ChoicesInputV1;
+  let SelectInput = SelectInputV1;
+  let QueryCombobox = QueryComboboxV1;
+  let QuerySelect = QuerySelectV1;
+  let RatingsInput = RatingsInputV1;
+  let Checkbox = CheckboxV1;
+  let QueryChoices = QueryChoicesV1;
+  let LinkInput = LinkInputV1;
+  let EditorInput = EditorInputV1;
+  if (isVersionTwo) {
+    TextInput = TextInputV2;
+    TextareaInput = TextareaInputV2;
+    ChoicesInput = ChoicesInputV2;
+    SelectInput = SelectInputV2;
+    QueryCombobox = QueryComboboxV2;
+    QuerySelect = QuerySelectV2;
+    RatingsInput = RatingsInputV2;
+    Checkbox = CheckboxV2;
+    QueryChoices = QueryChoicesV2;
+    LinkInput = LinkInputV2;
+    EditorInput = EditorInputV2;
+  }
   if (type === 'textarea') {
     return /*#__PURE__*/React.createElement(TextareaInput, _extends({
       className: newClassName,
@@ -113,9 +138,14 @@ FormInput.propTypes = {
   /**
    * Whether the Form input input should be disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * Whethe the Form input is version 2
+   */
+  isVersionTwo: PropTypes.bool
 };
 FormInput.defaultProps = {
-  disabled: false
+  disabled: false,
+  isVersionTwo: false
 };
 export default /*#__PURE__*/memo(FormInput);