@pareto-engineering/design-system 4.0.0-alpha.9 → 4.0.1-alpha.1

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

@@ -1,9 +1,10 @@
 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 { memo, useInsertionEffect } from 'react';
+import { memo } from 'react';
 import PropTypes from 'prop-types';
-import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices } from "../fields";
+import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices, LinkInput, EditorInput } from "../fields";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -21,9 +22,6 @@ const FormInput = ({
   disabled,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const newClassName = [className, componentClassName].filter(Boolean).join(' ');
   if (type === 'textarea') {
     return /*#__PURE__*/React.createElement(TextareaInput, _extends({
@@ -31,6 +29,13 @@ const FormInput = ({
       disabled: disabled
     }, otherProps));
   }
+  if (type === 'multiple') {
+    return /*#__PURE__*/React.createElement(ChoicesInput, _extends({
+      className: newClassName,
+      disabled: disabled,
+      multiple: true
+    }, otherProps));
+  }
   if (type === 'choices') {
     return /*#__PURE__*/React.createElement(ChoicesInput, _extends({
       className: newClassName,
@@ -72,6 +77,18 @@ const FormInput = ({
       disabled: disabled
     }, otherProps));
   }
+  if (type === 'link') {
+    return /*#__PURE__*/React.createElement(LinkInput, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
+  if (type === 'editor') {
+    return /*#__PURE__*/React.createElement(EditorInput, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
   if (extraTypes?.[type]) {
     const Component = extraTypes[type];
     return /*#__PURE__*/React.createElement(Component, _extends({

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

@@ -1,9 +1,10 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useState, useInsertionEffect, useContext } from 'react';
+import { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from "../../../b";
 import { FormikContext } from 'formik';
+import "./styles.scss";
 
 // Local Definitions
 
@@ -19,9 +20,6 @@ const Debugger = ({
   initialIsOpen
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [isOpen, setIsOpen] = useState(initialIsOpen);
   const toggleDebugger = () => setIsOpen(!isOpen);
   const formikContext = useContext(FormikContext);

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

@@ -1,12 +1,12 @@
 /* @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
 
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'description';
 
@@ -22,16 +22,14 @@ const Description = ({
   color
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  const [field, meta] = useField(name);
-  if (description || (meta.touched || field.value) && meta.error) {
+  const [, meta] = useField(name);
+  const hasError = meta.touched && meta.error;
+  if (hasError || description) {
     return /*#__PURE__*/React.createElement("div", {
       id: id,
-      className: [baseClassName, componentClassName, userClassName, meta.error ? 'x-error' : `x-${color}`].filter(e => e).join(' '),
+      className: [baseClassName, componentClassName, userClassName, hasError ? 'x-error' : `x-${color}`].filter(e => e).join(' '),
       style: style
-    }, meta.error || description);
+    }, hasError ? meta.error : description);
   }
   return null;
 };

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

@@ -5,6 +5,5 @@
 
 .#{bem.$base}.description {
   color: var(--x);
+  height: 0;
 }
-
-

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

@@ -1,11 +1,10 @@
 /* @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
-
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'form-label';
 
@@ -22,18 +21,12 @@ const Label = ({
   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)');
-};
+}) => /*#__PURE__*/React.createElement(Wrapper, {
+  htmlFor: Wrapper === 'label' ? name : undefined,
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
+  style: style
+}, children, optional && ' (Optional)');
 Label.propTypes = {
   /**
    * The HTML id for this element
@@ -70,7 +63,7 @@ Label.propTypes = {
 };
 Label.defaultProps = {
   as: 'label',
-  color: 'main2',
+  color: 'paragraph',
   optional: false
 };
 export default Label;

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

@@ -1,8 +1,9 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
-@use "../../../form.scss";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
 
 .#{bem.$base}.form-label {
-  color: var(--hard-x);
+  color: var(--x);
 }

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

@@ -1,3 +1,4 @@
 export { Label as FormLabel } from "./Label";
 export { Description as FormDescription } from "./Description";
-export { Debugger as FormDebugger } from "./Debugger";
+export { Debugger as FormDebugger } from "./Debugger";
+export * from "./utils";

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

@@ -0,0 +1 @@
+export { lookUpInputValueFromFetchedOptions } from "./lookUpInputValueFromFetchedOptions";

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

@@ -0,0 +1,20 @@
+import Fuse from 'fuse.js';
+const fuseOptions = {
+  findAllMatches: true,
+  keys: ['label']
+};
+export const lookUpInputValueFromFetchedOptions = ({
+  items,
+  inputValue,
+  setOptions,
+  minLength
+}) => {
+  const fuseSearch = new Fuse(items, fuseOptions);
+  const result = fuseSearch.search(inputValue);
+  if (result.length === 0 && inputValue.length > minLength) {
+    setOptions(prevItems => [...prevItems, {
+      label: `${inputValue} (Create new)`,
+      value: inputValue
+    }]);
+  }
+};

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

@@ -1,19 +1,18 @@
 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 { FormLabel, FormDescription } from "../../common";
 
 // Local Definitions
-
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'checkbox';
 
 /**
- * This is the component description.
+ * This is the component description
  */
 const Checkbox = ({
   id,
@@ -23,12 +22,10 @@ const Checkbox = ({
   label,
   description,
   disabled,
-  optional
+  optional,
+  labelColor
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [field] = useField({
     name,
     type: 'checkbox'
@@ -37,17 +34,18 @@ const Checkbox = ({
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
-    // {...otherProps}
   }, label && /*#__PURE__*/React.createElement(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(FormDescription, {
-    className: "v50 mt-v s-1",
+    className: "s-1",
     description: description,
     name: name
   }));
@@ -77,10 +75,30 @@ Checkbox.propTypes = {
    * 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
    */

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

@@ -1,15 +1,16 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
-
-$default-margin: 1em;
+@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}.label {
-    margin-bottom: $default-margin;
+  > .#{bem.$base}.form-label {
+    margin-bottom: var(--gap);
   }
 }

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

@@ -1,7 +1,7 @@
 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, memo } from 'react';
+import { memo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -9,11 +9,12 @@ import styleNames from '@pareto-engineering/bem/exports';
 
 import { Choice } from "./common";
 import { FormDescription, FormLabel } from "../../common";
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'choices-input';
 
 /**
- * This is the component description.
+ * This is the component description
  */
 const ChoicesInput = ({
   id,
@@ -23,46 +24,37 @@ const ChoicesInput = ({
   validate,
   options,
   multiple,
-  gridColumnsMobile,
-  gridColumnsDesktop,
   color,
   label,
+  labelColor,
   optional,
   disabled,
-  description
-  // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, multiple && 'multiple', color && `x-${color}`].filter(e => e).join(' '),
-    style: {
-      '--grid-columns-desktop': gridColumnsDesktop,
-      '--grid-columns-mobile': gridColumnsMobile,
-      ...style
-    }
-    // {...otherProps}
-  }, label && /*#__PURE__*/React.createElement(FormLabel, {
-    as: "p",
-    optional: optional
-  }, label), /*#__PURE__*/React.createElement("div", {
-    className: "choices"
-  }, options.map(choice => /*#__PURE__*/React.createElement(Choice, _extends({
-    labelClassName: "with-faded-border",
-    key: choice.value,
-    name: name,
-    id: `${name}-${choice.value}`,
-    multiple: multiple,
-    validate: validate,
-    disabled: disabled
-  }, choice)))), /*#__PURE__*/React.createElement(FormDescription, {
-    className: "v50 mt-v s-1",
-    description: description,
-    name: name
-  }));
-};
+  description,
+  spaceBetween,
+  ...otherProps
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+}, label && /*#__PURE__*/React.createElement(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(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(FormDescription, {
+  className: "s-1",
+  description: description,
+  name: name
+}));
 ChoicesInput.propTypes = {
   /**
    * The HTML id for this element
@@ -99,10 +91,6 @@ ChoicesInput.propTypes = {
    * how many columns should be displayed on the mobile grid
    */
   gridColumnsMobile: PropTypes.number,
-  /**
-   * how many columns should be displayed on the desktop grid
-   */
-  gridColumnsDesktop: PropTypes.number,
   /**
    * The choice color
    */
@@ -126,12 +114,30 @@ ChoicesInput.propTypes = {
   /**
    * The select input description
    */
-  description: PropTypes.string
+  description: 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,
+  /**
+   * The color of the label
+   */
+  labelColor: PropTypes.string
 };
 ChoicesInput.defaultProps = {
-  gridColumnsMobile: 2,
-  gridColumnsDesktop: 3,
-  color: 'main',
+  color: 'interactive',
   disabled: false
 };
 export default /*#__PURE__*/memo(ChoicesInput);

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

@@ -44,7 +44,7 @@ const Choice = ({
     disabled: disabled
   })), /*#__PURE__*/React.createElement("label", {
     htmlFor: id,
-    className: labelClassName,
+    className: [labelClassName, disabled && 'disabled'].filter(e => e).join(' '),
     style: labelStyle
   }, label));
 };

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

@@ -1,5 +1,6 @@
 /* @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";
@@ -9,30 +10,49 @@ $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 {
-  >.choices {
+  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: absolute;
+        position: fixed;
         visibility: none;
         z-index: -1;
       }
 
       input:disabled + label {
-        background-color: var(--hard-x);
+        background-color: $disabled-background;
       }
 
-      label {
-        background-color: var(--background-inputs);
-        border-radius: var(--theme-default-border-radius);
+      > 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;
@@ -40,9 +60,12 @@ $default-label-height: .5em;
         padding: $default-label-padding;
         position: relative;
         transition: $default-transition;
+        white-space: nowrap;
 
-        &:hover {
-          box-shadow: var(--theme-default-input-box-shadow);
+        &:not(.disabled) {
+          &:hover {
+            border: $hover-border;
+          }
         }
       }
 
@@ -53,3 +76,4 @@ $default-label-height: .5em;
     }
   }
 }
+