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

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/a/TextSteps/TextSteps.js

@@ -6,12 +6,12 @@ import "./styles.scss";
 // Local Definitions
 
 const baseClassName = styleNames.base;
-const componentClassName = 'steps';
+const componentClassName = 'text-steps';
 
 /**
  * This is the component description.
  */
-const Steps = ({
+const TextSteps = ({
   id,
   className: userClassName,
   style,
@@ -28,7 +28,7 @@ const Steps = ({
 }, /*#__PURE__*/React.createElement("p", null, i + 1)), /*#__PURE__*/React.createElement("div", {
   className: " description"
 }, /*#__PURE__*/React.createElement("p", null, item)))));
-Steps.propTypes = {
+TextSteps.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -53,4 +53,4 @@ Steps.propTypes = {
    */
   title: PropTypes.string
 };
-export default Steps;
+export default TextSteps;

package/dist/es/a/TextSteps/styles.scss

@@ -6,7 +6,7 @@
 
 $default-padding: 1em;
 
-.#{bem.$base}.steps {
+.#{bem.$base}.text-steps {
   grid-column: 1 / -1;
   grid-template-columns: repeat(var(--columns), 1fr);
   padding: $default-padding 0;

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);

package/dist/es/f/common/V2/Description/Description.js

@@ -0,0 +1,68 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useInsertionEffect } from 'react';
+import { useField } from 'formik';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'description';
+
+/**
+ * This is the component description.
+ */
+const Description = ({
+  id,
+  className: userClassName,
+  style,
+  description,
+  name,
+  color
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const [, meta] = useField(name);
+  const hasError = meta.touched && meta.error;
+  if (hasError || description) {
+    return /*#__PURE__*/React.createElement("div", {
+      id: id,
+      className: [baseClassName, componentClassName, userClassName, hasError ? 'x-error' : `x-${color}`].filter(e => e).join(' '),
+      style: style
+    }, hasError ? meta.error : description);
+  }
+  return null;
+};
+Description.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: PropTypes.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string),
+  /**
+   * The base color for the description
+   */
+  color: PropTypes.string,
+  /**
+   * Input description - extra description to guide a use in filling the input
+   */
+  description: PropTypes.string,
+  /**
+   * The input name (html - and Formik state)
+   */
+  name: PropTypes.string.isRequired
+};
+Description.defaultProps = {
+  color: 'metadata'
+};
+export default Description;

package/dist/es/f/common/V2/Description/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as Description } from "./Description";

package/dist/es/f/common/V2/Description/styles.scss

@@ -0,0 +1,10 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+
+.#{bem.$base}.description {
+  color: var(--x);
+}
+
+

package/dist/es/f/common/V2/Label/Label.js

@@ -0,0 +1,76 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useInsertionEffect } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'form-label';
+
+/**
+ * This is the component description.
+ */
+const Label = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  name,
+  color,
+  optional,
+  as: Wrapper
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    htmlFor: Wrapper === 'label' ? name : undefined,
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
+    style: style
+    // {...otherProps}
+  }, children, optional && ' (Optional)');
+};
+Label.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: PropTypes.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string),
+  /**
+   *  The children JSX
+   */
+  children: PropTypes.node,
+  /**
+   *  The name of the input label
+   */
+  name: PropTypes.string,
+  /**
+   *  The html tag that acts as an input label
+   */
+  as: PropTypes.node,
+  /**
+   *  The default color of the label
+   */
+  color: PropTypes.string,
+  /**
+   * Whether the input should have an optional tag
+   */
+  optional: PropTypes.bool
+};
+Label.defaultProps = {
+  as: 'label',
+  color: 'paragraph',
+  optional: false
+};
+export default Label;

package/dist/es/f/common/V2/Label/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as Label } from "./Label";

package/dist/es/f/common/V2/Label/styles.scss

@@ -0,0 +1,9 @@
+/* @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}.form-label {
+  color: var(--x);
+}

package/dist/es/f/common/V2/index.js

@@ -0,0 +1,2 @@
+export { Label as FormLabelV2 } from "./Label";
+export { Description as FormDescriptionV2 } from "./Description";

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

@@ -2,4 +2,5 @@ export { Label as FormLabel } from "./Label";
 export { Description as FormDescription } from "./Description";
 export { Debugger as FormDebugger } from "./Debugger";
 export { InputWrapper } from "./InputWrapper";
-export * from "./utils";
+export * from "./utils";
+export * from "./V2";

package/dist/es/f/fields/V2/Checkbox/Checkbox.js

@@ -0,0 +1,114 @@
+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); }
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useInsertionEffect } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+import { useField } from 'formik';
+import { FormLabelV2, FormDescriptionV2 } from "../../../common";
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'checkbox';
+
+/**
+ * This is the component description.
+ */
+const Checkbox = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  label,
+  description,
+  disabled,
+  optional,
+  labelColor
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const [field] = 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(FormLabelV2, {
+    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(FormDescriptionV2, {
+    className: "s-1",
+    description: description,
+    name: name
+  }));
+};
+Checkbox.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: PropTypes.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string),
+  /**
+   * The input name (html - and Formik state)
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * The Input description to guide the user if it's not obvious
+   */
+  description: PropTypes.string,
+  /**
+   * Whether the input should be disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * The color of the label
+   */
+  labelColor: PropTypes.string,
+  /**
+   * The input label
+   */
+  label: PropTypes.string,
+  /**
+  * The number of columns the label should span
+  */
+  labelSpan: PropTypes.number,
+  /**
+   * The number of columns the input should span
+   */
+  inputSpan: PropTypes.number,
+  /**
+   * The number of columns the label should span on desktop
+   */
+  desktopLabelSpan: PropTypes.number,
+  /**
+   * The number of columns the input should span on desktop
+   */
+  desktopInputSpan: PropTypes.number,
+  /**
+   * Whether the input should have an optional tag
+   */
+  optional: PropTypes.bool
+};
+Checkbox.defaultProps = {
+  disabled: false
+};
+export default Checkbox;

package/dist/es/f/fields/V2/Checkbox/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as Checkbox } from "./Checkbox";

package/dist/es/f/fields/V2/Checkbox/styles.scss

@@ -0,0 +1,16 @@
+/* @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);
+  }
+}