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

package/dist/es/c/Modal/Modal.js

@@ -1,9 +1,9 @@
 /* @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 { ModalHeader } from "./common";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -22,23 +22,18 @@ const Modal = ({
   color,
   close
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-    // {...otherProps}
-  }, /*#__PURE__*/React.createElement(ModalHeader, {
-    title: title,
-    close: close,
-    color: color
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "modal-body"
-  }, children));
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+  // {...otherProps}
+}, /*#__PURE__*/React.createElement(ModalHeader, {
+  title: title,
+  close: close,
+  color: color
+}), /*#__PURE__*/React.createElement("div", {
+  className: "modal-body"
+}, children));
 Modal.propTypes = {
   /**
    * The HTML id for this element
@@ -70,6 +65,6 @@ Modal.propTypes = {
   close: PropTypes.func
 };
 Modal.defaultProps = {
-  //
+  color: 'heading'
 };
 export default Modal;

package/dist/es/c/Modal/common/ModalHeader/ModalHeader.js

@@ -30,7 +30,7 @@ const ModalHeader = ({
   isCompact: true,
   className: "close-button"
 }, /*#__PURE__*/React.createElement("span", {
-  className: "f-icons"
+  className: "icon"
 }, "Y")));
 ModalHeader.propTypes = {
   /**

package/dist/es/c/Modal/styles.scss

@@ -3,14 +3,12 @@
 @use "@pareto-engineering/bem";
 @use "sass:math";
 
-$default-background: var(--background1);
+$default-background: var(--background-cards);
+$default-border: var(--theme-default-border-style) var(--metadata);
 /* stylelint-disable-next-line color-named -- needed for rgba function */
 $default-box-shadow: 0 10px 20px rgba(black, .2);
 $default-padding: math.div(1em, 2);
 $default-margin: 2em;
-$default-max-height: 75vh;
-$default-max-width: 90%;
-$default-min-width: 20em;
 
 .#{bem.$base}.modal {
   background: $default-background;
@@ -18,22 +16,15 @@ $default-min-width: 20em;
   display: flex;
   flex-direction: column;
   left: 50%;
-  max-height: $default-max-height;
-  max-width: $default-max-width;
-  min-width: $default-min-width;
   overflow: auto;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
   z-index: 100;
 
-  .modal-body {
-    padding: $default-padding;
-  }
-
   .modal-header {
     background: $default-background;
-    border-bottom: var(--theme-border);
+    border-bottom: $default-border;
     display: flex;
     font-size: calc(var(--theme-heading-font-size-multiplier, 1) * var(--s1) * 1em);
     justify-content: space-between;
@@ -45,5 +36,9 @@ $default-min-width: 20em;
       margin: 0;
       padding: $default-padding;
     }
+
+    .close-button {
+      display: block;
+    }
   }
 }

package/dist/es/c/Shortener/Shortener.js

@@ -1,11 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect, useState } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
 // Local Definitions
 import { Button } from "../../b";
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'shortener';
 
@@ -24,9 +25,6 @@ const Shortener = ({
   separator,
   countLetters
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [displayFull, setDisplayFull] = useState(false);
   const text = children || '';
   const excerpt = countLetters ? text.slice(0, limit) : text.split(separator).slice(0, limit).join(separator);

package/dist/es/c/SocialMediaShareButton/SocialMediaShareButton.js

@@ -1,8 +1,8 @@
 /* @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 "./styles.scss";
 
 // Local Definitions
 
@@ -21,9 +21,6 @@ const SocialMediaShareButton = ({
   type,
   color
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const isServer = typeof window === 'undefined';
   const link = isServer ? '' : window.location.href;
 
@@ -40,14 +37,12 @@ const SocialMediaShareButton = ({
       link: `https://www.facebook.com/sharer/sharer.php?u=${link}`
       // link: `https://www.facebook.com/sharer/sharer.php?u=${link}&quote=${title}`,
     },
-
     twitter: {
       icon: 't',
       link: `https://twitter.com/intent/tweet?url=${link}`
       // link: `https://twitter.com/intent/tweet?text=${title}&url=${link}`,
     }
   };
-
   return /*#__PURE__*/React.createElement("a", {
     href: defaultsMap[type].link,
     target: "_blank",

package/dist/es/c/index.js

@@ -1,4 +1,3 @@
-export { ContentSlides, useContentSlides } from "./ContentSlides";
 export { Shortener } from "./Shortener";
 export { SocialMediaShareButton } from "./SocialMediaShareButton";
 export { Modal } from "./Modal";

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({
@@ -72,6 +70,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));
 };