@pareto-engineering/design-system 4.0.0-alpha.42 → 4.0.0-alpha.44

package/dist/cjs/a/Removable/Removable.js

@@ -0,0 +1,72 @@
+"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"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } /* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'removable';
+
+/**
+ * This is a wrapper component that adds a close button to its children.
+ */
+const Removable = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    handleClose,
+    children
+    // ...otherProps
+  } = _ref;
+  (0, React.useInsertionEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+    // {...otherProps}
+  }, children, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "close-button",
+    onClick: handleClose || (() => null)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon"
+  }, "Y")));
+};
+Removable.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 function to call when the close button is clicked
+   */
+  handleClose: _propTypes.default.func,
+  /**
+   *  The children JSX
+   */
+  children: _propTypes.default.node
+};
+Removable.defaultProps = {
+  // someProp:false
+};
+var _default = Removable;
+exports.default = _default;

package/dist/cjs/a/Removable/index.js

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

package/dist/cjs/a/Removable/styles.scss

@@ -0,0 +1,33 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+
+@use "@pareto-engineering/bem";
+
+$default-padding: .5rem;
+
+.#{bem.$base}.removable {
+  align-items: center;
+  background-color: var(--background-inputs);
+  border: var(--theme-default-border-style) var(--main2);
+  border-radius: $default-padding;
+  display: flex;
+  justify-content: space-between;
+  padding: $default-padding;
+
+  > :first-child {
+    flex-grow: 1;
+  }
+
+  .close-button {
+    background-color: transparent;
+    border: none;
+    color: var(--metadata);
+    cursor: pointer;
+    margin-left: var(--gap);
+
+    &:hover {
+      color: var(--hard-metadata);
+    }
+  }
+}
+
+

package/dist/cjs/a/index.js

@@ -111,6 +111,12 @@ Object.defineProperty(exports, "Quote", {
     return _Quote.Quote;
   }
 });
+Object.defineProperty(exports, "Removable", {
+  enumerable: true,
+  get: function () {
+    return _Removable.Removable;
+  }
+});
 Object.defineProperty(exports, "SVG", {
   enumerable: true,
   get: function () {
@@ -181,4 +187,5 @@ var _MetaCard = require("./MetaCard");
 var _AnimatedBlobs = require("./AnimatedBlobs");
 var _Tip = require("./Tip");
 var _AnimatedGradient = require("./AnimatedGradient");
-var _TextSteps = require("./TextSteps");
+var _TextSteps = require("./TextSteps");
+var _Removable = require("./Removable");

package/dist/cjs/b/Button/Button.js

@@ -25,6 +25,7 @@ const Button = _ref => {
     children,
     isLoading,
     color,
+    textColor,
     isCompact,
     isGhost,
     isSimple,
@@ -41,7 +42,7 @@ const Button = _ref => {
   }, children) : children;
   return /*#__PURE__*/React.createElement("button", _extends({
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`, isGhost && _exports.default.modifierGhost, isCompact && _exports.default.modifierCompact, isSimple && _exports.default.modifierSimple, isGradient && _exports.default.modifierGradient, isSpaced && _exports.default.modifierSpaced, !isLoading && arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`, textColor && `y-${textColor}`, isGhost && _exports.default.modifierGhost, isCompact && _exports.default.modifierCompact, isSimple && _exports.default.modifierSimple, isGradient && _exports.default.modifierGradient, isSpaced && _exports.default.modifierSpaced, !isLoading && arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
     style: style,
     type: "button"
   }, otherProps), isLoading ? /*#__PURE__*/React.createElement(_.LoadingCircle, {

package/dist/cjs/b/Button/styles.scss

@@ -92,7 +92,7 @@ $default-animation-time: .31s;
   &.#{bem.$modifier-ghost} {
     background: transparent;
     border: 1px solid var(--x, var(--#{$default-color}));
-    color: var(--x, var(--#{$default-color}));
+    color: var(--y, var(--x, var(--#{$default-color})));
 
     &:hover,
     &:focus,
@@ -103,12 +103,12 @@ $default-animation-time: .31s;
     &:not(:disabled) {
       &:hover {
         border: 1px solid var(--soft-x, var(--soft-#{$default-color}));
-        color: var(--soft-x, var(--soft-#{$default-color}));
+        color: var(--soft-y, var(--soft-x, var(--soft-#{$default-color})));
       }
 
       &:focus {
         border: 1px solid var(--hard-x, var(--hard-#{$default-color}));
-        color: var(--hard-x, var(--hard-#{$default-color}));
+        color: var(--hard-y, var(--hard-x, var(--hard-#{$default-color})));
       }
     }
 

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

@@ -32,13 +32,14 @@ const Description = _ref => {
   (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
-  const [field, meta] = (0, _formik.useField)(name);
-  if (description || (meta.touched || field.value) && meta.error) {
+  const [, meta] = (0, _formik.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/cjs/f/fields/Checkbox/styles.scss

@@ -9,5 +9,6 @@
     align-items: flex-start;
     display: flex;
     flex-direction: column;
+    justify-content: center;
   }
 }

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

@@ -36,7 +36,7 @@ $disabled-background: var(--background-inputs-30);
 
         input {
           opacity: 0;
-          position: absolute;
+          position: fixed;
           visibility: none;
           z-index: -1;
         }

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

@@ -61,7 +61,6 @@ const EditorInput = _ref => {
       JSON.parse(value);
       return value;
     } catch {
-      // eslint-disable-next-line no-useless-escape
       const defaultValue = {
         root: {
           children: [{

package/dist/cjs/f/fields/EditorInput/common/Toolbar.js

@@ -11,6 +11,7 @@ var _selection = require("@lexical/selection");
 var _link = require("@lexical/link");
 var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 var _utils = require("@lexical/utils");
+var _ = require("../../../..");
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -35,6 +36,8 @@ const getSelectedNode = selection => {
   }
   return (0, _selection.$isAtNodeEnd)(anchor) ? focusNode : anchorNode;
 };
+const defaultColor = 'var(--paragraph)';
+const colorOptions = ['red', 'blue', 'green', 'yellow', 'orange', 'purple', 'pink', 'brown'];
 const Toolbar = () => {
   const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
   const [isBold, setIsBold] = (0, React.useState)(false);
@@ -43,6 +46,8 @@ const Toolbar = () => {
   const [blockType, setBlockType] = (0, React.useState)('paragraph');
   const [isLink, setIsLink] = (0, React.useState)(false);
   const [isUnderline, setIsUnderline] = (0, React.useState)(false);
+  const [color, setColor] = (0, React.useState)(defaultColor);
+  const colorMenuRef = (0, React.useRef)(false);
   const formatBulletList = () => {
     if (blockType !== 'ul') {
       editor.dispatchCommand(_list.INSERT_UNORDERED_LIST_COMMAND);
@@ -81,6 +86,18 @@ const Toolbar = () => {
         setBlockType(element);
       }
 
+      // Check nodes for color
+      const nodes = selection.getNodes().filter(node => node.getType() === 'text');
+      nodes.forEach(node => {
+        const style = node.getStyle();
+        const colorProperty = style.match(/color: ([^;]+)/);
+        if (colorProperty) {
+          setColor(colorProperty[1]);
+          return;
+        }
+        setColor(false);
+      });
+
       // Check selection text styles
       setIsBold(selection.hasFormat('bold'));
       setIsItalic(selection.hasFormat('italic'));
@@ -98,6 +115,22 @@ const Toolbar = () => {
       }
     }
   }, [editor]);
+  const UPDATE_COLOR_COMMAND = (0, _lexical.createCommand)();
+  editor.registerCommand(UPDATE_COLOR_COMMAND, payload => {
+    const selection = (0, _lexical.$getSelection)();
+    const nodes = selection?.extract().filter(node => node.getType() === 'text');
+    nodes?.forEach(node => {
+      const style = node.getStyle();
+      const colorProperty = style?.match(/color: ([^;]+)/);
+      if (colorProperty && color !== payload) {
+        node.setStyle(style.replace(colorProperty[0], `color: ${payload}`));
+      } else if (colorProperty) {
+        node.setStyle(`color: ${defaultColor}`);
+      } else {
+        node.setStyle(`color: ${payload}`);
+      }
+    });
+  }, _lexical.COMMAND_PRIORITY_NORMAL);
   (0, React.useEffect)(() => (0, _utils.mergeRegister)(editor.registerUpdateListener(_ref => {
     let {
       editorState
@@ -106,6 +139,10 @@ const Toolbar = () => {
       updateToolbar();
     });
   })), [updateToolbar, editor]);
+  const dispatchUpdateColor = (0, React.useCallback)((e, payload) => {
+    e.stopPropagation();
+    editor.dispatchCommand(UPDATE_COLOR_COMMAND, payload);
+  }, [editor]);
   return /*#__PURE__*/React.createElement("div", {
     className: `${baseClassName} ${componentClassName}`
   }, /*#__PURE__*/React.createElement("div", {
@@ -135,6 +172,33 @@ const Toolbar = () => {
   }, /*#__PURE__*/React.createElement("span", {
     className: "icon"
   }, "?")), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: color && color !== defaultColor ? 'active color-menu-button' : 'color-menu-button',
+    onClick: () => editor.dispatchCommand(UPDATE_COLOR_COMMAND, color !== defaultColor ? defaultColor : color),
+    ref: colorMenuRef,
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon",
+    style: {
+      color
+    }
+  }, "Q"), /*#__PURE__*/React.createElement(_.Popover, {
+    parentRef: colorMenuRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "color-menu"
+  }, colorOptions.map(option => /*#__PURE__*/React.createElement("span", {
+    role: "button",
+    className: "icon color-option",
+    style: {
+      color: option
+    },
+    onClick: e => dispatchUpdateColor(e, option),
+    onKeyDown: e => dispatchUpdateColor(e, option),
+    tabIndex: 0,
+    key: option
+  }, "o"))))), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: isLink ? 'active' : undefined,
     onClick: () => formatLink()

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

@@ -15,6 +15,7 @@ $active-background: var(--hard-background-inputs);
 $default-background: var(--background-inputs);
 $default-icon-color: var(--on-background-inputs);
 $disabled-background: var(--background-inputs-30);
+$default-color-menu-padding: .5em .25em;
 
 .#{bem.$base}.editor-input {
   &.#{bem.$base}.input-wrapper {
@@ -62,6 +63,31 @@ $disabled-background: var(--background-inputs-30);
       }
     }
 
+    .color-menu-button {
+      &:hover {
+        > .#{bem.$base}.popover {
+          display: block;
+        }
+      }
+
+      > .#{bem.$base}.popover {
+        padding: $default-color-menu-padding;
+
+        .color-menu {
+          display: flex;
+          flex-wrap: wrap;
+          gap: calc($default-gap / 2);
+          justify-content: center;
+          max-width: 10em;
+          min-width: 5em;
+        }
+
+        .color-option:hover {
+          opacity: .5;
+        }
+      }
+    }
+
     > .content-editable {
       background: $default-background;
       border: $default-border;

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

@@ -41,8 +41,8 @@ const TextInput = _ref => {
     desktopLabelSpan,
     inputSpan,
     desktopInputSpan,
-    symbol
-    // ...otherProps
+    symbol,
+    ...otherProps
   } = _ref;
   (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
@@ -77,7 +77,7 @@ const TextInput = _ref => {
     disabled: disabled,
     placeholder: placeholder,
     autoComplete: autoComplete
-  }, field)), /*#__PURE__*/React.createElement(_common.FormDescription, {
+  }, field, otherProps)), /*#__PURE__*/React.createElement(_common.FormDescription, {
     className: "s-1",
     description: description,
     name: name

package/dist/es/a/Removable/Removable.js

@@ -0,0 +1,64 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+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 = 'removable';
+
+/**
+ * This is a wrapper component that adds a close button to its children.
+ */
+const Removable = ({
+  id,
+  className: userClassName,
+  style,
+  handleClose,
+  children
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+    // {...otherProps}
+  }, children, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "close-button",
+    onClick: handleClose || (() => null)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon"
+  }, "Y")));
+};
+Removable.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 function to call when the close button is clicked
+   */
+  handleClose: PropTypes.func,
+  /**
+   *  The children JSX
+   */
+  children: PropTypes.node
+};
+Removable.defaultProps = {
+  // someProp:false
+};
+export default Removable;

package/dist/es/a/Removable/index.js

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

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

@@ -0,0 +1,33 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+
+@use "@pareto-engineering/bem";
+
+$default-padding: .5rem;
+
+.#{bem.$base}.removable {
+  align-items: center;
+  background-color: var(--background-inputs);
+  border: var(--theme-default-border-style) var(--main2);
+  border-radius: $default-padding;
+  display: flex;
+  justify-content: space-between;
+  padding: $default-padding;
+
+  > :first-child {
+    flex-grow: 1;
+  }
+
+  .close-button {
+    background-color: transparent;
+    border: none;
+    color: var(--metadata);
+    cursor: pointer;
+    margin-left: var(--gap);
+
+    &:hover {
+      color: var(--hard-metadata);
+    }
+  }
+}
+
+

package/dist/es/a/index.js

@@ -20,4 +20,5 @@ export { MetaCard } from "./MetaCard";
 export { AnimatedBlobs } from "./AnimatedBlobs";
 export { Tip } from "./Tip";
 export { AnimatedGradient } from "./AnimatedGradient";
-export { TextSteps } from "./TextSteps";
+export { TextSteps } from "./TextSteps";
+export { Removable } from "./Removable";

package/dist/es/b/Button/Button.js

@@ -20,6 +20,7 @@ const Button = ({
   children,
   isLoading,
   color,
+  textColor,
   isCompact,
   isGhost,
   isSimple,
@@ -36,7 +37,7 @@ const Button = ({
   }, children) : children;
   return /*#__PURE__*/React.createElement("button", _extends({
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`, isGhost && styleNames.modifierGhost, isCompact && styleNames.modifierCompact, isSimple && styleNames.modifierSimple, isGradient && styleNames.modifierGradient, isSpaced && styleNames.modifierSpaced, !isLoading && arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`, textColor && `y-${textColor}`, isGhost && styleNames.modifierGhost, isCompact && styleNames.modifierCompact, isSimple && styleNames.modifierSimple, isGradient && styleNames.modifierGradient, isSpaced && styleNames.modifierSpaced, !isLoading && arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
     style: style,
     type: "button"
   }, otherProps), isLoading ? /*#__PURE__*/React.createElement(LoadingCircle, {

package/dist/es/b/Button/styles.scss

@@ -92,7 +92,7 @@ $default-animation-time: .31s;
   &.#{bem.$modifier-ghost} {
     background: transparent;
     border: 1px solid var(--x, var(--#{$default-color}));
-    color: var(--x, var(--#{$default-color}));
+    color: var(--y, var(--x, var(--#{$default-color})));
 
     &:hover,
     &:focus,
@@ -103,12 +103,12 @@ $default-animation-time: .31s;
     &:not(:disabled) {
       &:hover {
         border: 1px solid var(--soft-x, var(--soft-#{$default-color}));
-        color: var(--soft-x, var(--soft-#{$default-color}));
+        color: var(--soft-y, var(--soft-x, var(--soft-#{$default-color})));
       }
 
       &:focus {
         border: 1px solid var(--hard-x, var(--hard-#{$default-color}));
-        color: var(--hard-x, var(--hard-#{$default-color}));
+        color: var(--hard-y, var(--hard-x, var(--hard-#{$default-color})));
       }
     }
 

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

@@ -25,13 +25,14 @@ const Description = ({
   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/fields/Checkbox/styles.scss

@@ -9,5 +9,6 @@
     align-items: flex-start;
     display: flex;
     flex-direction: column;
+    justify-content: center;
   }
 }

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

@@ -36,7 +36,7 @@ $disabled-background: var(--background-inputs-30);
 
         input {
           opacity: 0;
-          position: absolute;
+          position: fixed;
           visibility: none;
           z-index: -1;
         }

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

@@ -57,7 +57,6 @@ const EditorInput = ({
       JSON.parse(value);
       return value;
     } catch {
-      // eslint-disable-next-line no-useless-escape
       const defaultValue = {
         root: {
           children: [{