@pareto-engineering/design-system 2.0.0-alpha.4 → 2.0.0-alpha.42

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

@@ -43,7 +43,8 @@ var TextareaInput = _ref => {
     textAreaColor,
     labelColor,
     description,
-    disabled // ...otherProps
+    disabled,
+    placeholder // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
@@ -55,16 +56,18 @@ var TextareaInput = _ref => {
   });
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, "x-".concat(textAreaColor), "y-".concat(labelColor)].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, "y-".concat(textAreaColor)].filter(e => e).join(' '),
     style: style // {...otherProps}
 
   }, /*#__PURE__*/React.createElement(_common.FormLabel, {
-    className: ['c-y', labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
-    name: name
+    className: [labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
+    name: name,
+    color: labelColor
   }, label), /*#__PURE__*/React.createElement("textarea", _extends({
     id: textAreaId,
-    className: "textarea v50 pv-v ".concat(meta.touched && meta.error ? 'input-border-error' : 'input-border')
+    className: "textarea"
   }, field, {
+    placeholder: placeholder,
     rows: rows,
     disabled: disabled
   })), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(_common.FormDescription, {
@@ -137,12 +140,16 @@ TextareaInput.propTypes = {
   /**
    * Whether the text area should be disabled
    */
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+
+  /**
+   * The textarea placeholder text
+   */
+  placeholder: _propTypes.default.string
 };
 TextareaInput.defaultProps = {
   rows: 3,
-  textAreaColor: 'background1',
-  labelColor: 'main1',
+  textAreaColor: 'background2',
   disabled: false
 };
 

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

@@ -1,19 +1,32 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 @use "@pareto-engineering/bem";
 
+$default-padding: .5em;
+
 .#{bem.$base}.text-area-input{
   display: flex;
   flex-direction: column;
 
   .textarea {
-    background: var(--light-x);
-    color: var(--on-x);
+    border: var(--theme-border-style) var(--dark-y);
+    background: var(--light-y);
+    color: var(--on-y);
+    padding: $default-padding;
 
-    &:focus {
-      background: var(--dark-x);
+    &::placeholder{
+      color: var(--metadata);
     }
-  }
-}
 
+    &:not(:disabled):hover{
+      border: var(--theme-border-style) var(--light-background4);
+    }
 
+     &:disabled {
+      background-color: var(--dark-y);
+    }
 
+    &:focus {
+      background: var(--light-background4);
+    }
+  }
+}

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

@@ -15,24 +15,6 @@ Object.defineProperty(exports, "SelectInput", {
     return _SelectInput.SelectInput;
   }
 });
-Object.defineProperty(exports, "RadioInput", {
-  enumerable: true,
-  get: function get() {
-    return _RadioInput.RadioInput;
-  }
-});
-Object.defineProperty(exports, "CheckboxInput", {
-  enumerable: true,
-  get: function get() {
-    return _CheckboxInput.CheckboxInput;
-  }
-});
-Object.defineProperty(exports, "TaskRecommendationInput", {
-  enumerable: true,
-  get: function get() {
-    return _TaskRecommendationInput.TaskRecommendationInput;
-  }
-});
 Object.defineProperty(exports, "ChoicesInput", {
   enumerable: true,
   get: function get() {
@@ -56,12 +38,6 @@ var _TextInput = require("./TextInput");
 
 var _SelectInput = require("./SelectInput");
 
-var _RadioInput = require("./RadioInput");
-
-var _CheckboxInput = require("./CheckboxInput");
-
-var _TaskRecommendationInput = require("./TaskRecommendationInput");
-
 var _ChoicesInput = require("./ChoicesInput");
 
 var _TextareaInput = require("./TextareaInput");

package/dist/cjs/form-reset.scss

@@ -19,7 +19,7 @@ button,
 textarea,
 label,
 select {
-  background-color: inherit;
+  // background-color: inherit;
   border: 0;
   display: inline-block;
   font: inherit;

package/dist/cjs/index.js

@@ -80,4 +80,17 @@ Object.keys(_f).forEach(function (key) {
       return _f[key];
     }
   });
+});
+
+var _utils = require("./utils");
+
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _utils[key];
+    }
+  });
 });

package/dist/cjs/utils/hooks/index.js

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

package/dist/cjs/utils/hooks/useDynamicPosition.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+
+var _useWindowSize = _interopRequireDefault(require("./useWindowSize"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var verticalPositions = ['top', 'bottom'];
+var horizontalPositions = ['left', 'right'];
+
+var findCompatiblePositions = (primary, secondaryArray) => {
+  if (verticalPositions.includes(primary)) {
+    return secondaryArray.filter(secondary => horizontalPositions.includes(secondary));
+  }
+
+  if (horizontalPositions.includes(primary)) {
+    return secondaryArray.filter(secondary => verticalPositions.includes(secondary));
+  }
+
+  return [];
+};
+
+var useDynamicPosition = _ref => {
+  var {
+    elementRef,
+    parentRef,
+    preferredPrimaryOrder,
+    preferredSecondaryOrder,
+    // offsetYPx,
+    offsetXPx,
+    throttleMs = 200
+  } = _ref;
+  var isClient = typeof window === 'object';
+  var {
+    height: currentHeight,
+    width: currentWidth
+  } = (0, _useWindowSize.default)();
+  var [primaryPosition, setPrimaryPosition] = (0, _react.useState)(preferredPrimaryOrder[0]);
+  var compatibleSecondaryPositions = (0, _react.useMemo)(() => findCompatiblePositions(primaryPosition, preferredSecondaryOrder), [primaryPosition, preferredSecondaryOrder]);
+  var [secondaryPosition, setSecondaryPosition] = (0, _react.useState)(compatibleSecondaryPositions[0]);
+  var handle = (0, _react.useCallback)((0, _throttle.default)(() => {
+    var parentNode = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current;
+    var elementNode = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
+    var {
+      top: parentTop,
+      bottom: parentBottom,
+      right: parentRight,
+      left: parentLeft
+    } = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.getBoundingClientRect()) || {};
+    var {
+      width: elementWidth,
+      height: elementHeight
+    } = (elementNode === null || elementNode === void 0 ? void 0 : elementNode.getBoundingClientRect()) || {};
+    var availablePositions = {
+      top: parentTop >= elementHeight,
+      bottom: currentHeight - parentBottom >= elementHeight,
+      right: parentRight >= elementWidth,
+      left: currentWidth - parentLeft >= elementWidth
+    };
+
+    for (var i = 0; i < preferredPrimaryOrder.length; i += 1) {
+      var position = preferredPrimaryOrder[i];
+
+      if (availablePositions[position]) {
+        setPrimaryPosition(position);
+        break;
+      }
+    }
+
+    for (var _i = 0; _i < compatibleSecondaryPositions.length; _i += 1) {
+      var _position = compatibleSecondaryPositions[_i];
+
+      if (availablePositions[_position]) {
+        setSecondaryPosition(_position);
+        break;
+      }
+    }
+  }, throttleMs), [elementRef, offsetXPx, throttleMs]);
+  (0, _react.useEffect)(() => {
+    if (!isClient) {
+      return false;
+    }
+
+    handle();
+    window.addEventListener('scroll', handle);
+    window.addEventListener('resize', handle);
+    return () => {
+      window.removeEventListener('scroll', handle);
+      window.removeEventListener('resize', handle);
+    };
+  }, [handle]);
+  return {
+    primaryPosition,
+    secondaryPosition
+  };
+};
+
+var _default = useDynamicPosition;
+exports.default = _default;

package/dist/cjs/utils/hooks/useWindowSize.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var useWindowSize = function useWindowSize() {
+  var debounceMs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 700;
+  var isClient = typeof window === 'object';
+
+  var getSize = () => ({
+    width: isClient ? window.innerWidth : undefined,
+    height: isClient ? window.innerHeight : undefined
+  });
+
+  var [windowSize, setWindowSize] = (0, _react.useState)(getSize);
+  var handle = (0, _react.useCallback)((0, _debounce.default)(() => {
+    setWindowSize(getSize());
+  }, debounceMs));
+  (0, _react.useEffect)(() => {
+    if (!isClient) {
+      return false;
+    }
+
+    window.addEventListener('resize', handle);
+    return () => window.removeEventListener('resize', handle);
+  }, [getSize, handle, isClient]);
+  return windowSize;
+};
+
+var _default = useWindowSize;
+exports.default = _default;

package/dist/cjs/utils/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useWindowSize", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useWindowSize;
+  }
+});
+Object.defineProperty(exports, "useDynamicPosition", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useDynamicPosition;
+  }
+});
+
+var _hooks = require("./hooks");

package/dist/es/a/BackgroundGradient/BackgroundGradient.js

@@ -0,0 +1,55 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem'; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'background-gradient';
+/**
+ * This is the component description.
+ */
+
+const BackgroundGradient = ({
+  id,
+  className: userClassName,
+  style,
+  height // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: { ...style,
+      '--gradient-height': height
+    }
+  });
+};
+
+BackgroundGradient.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 height of the shape.
+   */
+  height: PropTypes.string
+};
+BackgroundGradient.defaultProps = {// someProp: false,
+};
+export default BackgroundGradient;

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

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

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

@@ -0,0 +1,16 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.background-gradient{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: var(--gradient-height);
+    background-image: linear-gradient(var(--background1), var(--y) 25%, var(--light-y) 75%, var(--background1));
+    opacity: .4;
+    z-index: -1;
+}
+
+
+

package/dist/es/a/ContentTree/ContentTree.js

@@ -0,0 +1,67 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem'; // Local Definitions
+
+import { Tree, useContentTree } from "./common";
+const baseClassName = styleNames.base;
+const componentClassName = 'content-tree';
+/**
+ * This is the component description.
+ */
+
+const ContentTree = ({
+  id,
+  className: userClassName,
+  style,
+  target,
+  selectors // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const contentTree = useContentTree(target, selectors);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style // {...otherProps}
+
+  }, /*#__PURE__*/React.createElement(Tree, {
+    tree: contentTree
+  }));
+};
+
+ContentTree.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 selectors to use to extract the navigation tree from the content.
+   */
+  selectors: PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * The reference to the parent element.
+   */
+  target: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })])
+};
+ContentTree.defaultProps = {
+  selectors: ['h2', 'h3']
+};
+export default ContentTree;

package/dist/es/a/ContentTree/common/Tree/Tree.js

@@ -0,0 +1,98 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useState, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem'; // Local Definitions
+
+import useFirstVisibleNode from "../useFirstVisibleNode";
+const baseClassName = styleNames.base;
+const componentClassName = 'tree';
+/**
+ * This is the component description.
+ */
+
+const Tree = ({
+  id,
+  className: userClassName,
+  style,
+  tree,
+  displayDepth // ...otherProps
+
+}) => {
+  // The nodeIds to be used to get the first visible node
+  const [nodeIds, setNodeIds] = useState([]); // current visible nodeId
+
+  const visibleNodeId = useFirstVisibleNode(nodeIds);
+  useEffect(() => {
+    const node = document.getElementsByClassName(visibleNodeId)[0];
+    node === null || node === void 0 ? void 0 : node.classList.add(styleNames.modifierActive);
+    return () => {
+      node === null || node === void 0 ? void 0 : node.classList.remove(styleNames.modifierActive);
+    };
+  }, [visibleNodeId]); // Generate the tree structure from the content tree data depending on the display depth
+
+  const getNestedTree = (node, depth) => {
+    setNodeIds(prev => [...prev, node.id]);
+
+    if (depth <= 1) {
+      return /*#__PURE__*/React.createElement("li", {
+        key: node.id
+      }, /*#__PURE__*/React.createElement("a", {
+        className: node.id,
+        href: node.id
+      }, node.text));
+    }
+
+    return /*#__PURE__*/React.createElement("li", {
+      key: node.id
+    }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {
+      href: node.id,
+      className: node.id
+    }, node.text)), node.children.length > 0 && /*#__PURE__*/React.createElement("ul", null, node.children.map(child => getNestedTree(child, depth - 1))));
+  };
+
+  const ContentTree = useMemo(() => tree.map(node => getNestedTree(node, displayDepth)), [tree]);
+  return /*#__PURE__*/React.createElement("ul", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, ContentTree);
+};
+
+Tree.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 tree to render.
+   */
+  tree: PropTypes.arrayOf(PropTypes.shape({
+    text: PropTypes.string,
+    id: PropTypes.string,
+    children: PropTypes.arrayOf(PropTypes.shape({
+      text: PropTypes.string,
+      id: PropTypes.string
+    }))
+  })),
+
+  /**
+   * The levels of the tree to display.
+   */
+  displayDepth: PropTypes.number
+};
+Tree.defaultProps = {
+  displayDepth: 4
+};
+export default Tree;

package/dist/es/a/ContentTree/common/Tree/index.js

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

package/dist/es/a/ContentTree/common/index.js

@@ -0,0 +1,3 @@
+export { default as useContentTree } from "./useContentTree";
+export { default as useFirstVisibleNode } from "./useFirstVisibleNode";
+export { Tree } from "./Tree";

package/dist/es/a/ContentTree/common/useContentTree.js

@@ -0,0 +1,74 @@
+import { useState, useEffect, useCallback } from 'react';
+
+const useContentTree = (target, selectors) => {
+  const [contentTree, setContentTree] = useState([]);
+  const getNodes = useCallback(parentTag => {
+    const nodeList = parentTag.querySelectorAll(selectors.join(', '));
+    const nodes = [];
+    nodeList.forEach(nodeNode => {
+      const {
+        id,
+        innerText,
+        tagName
+      } = nodeNode;
+      nodes.push({
+        id: `#${id}`,
+        text: innerText,
+        level: selectors.indexOf(tagName.toLowerCase())
+      });
+    });
+    return nodes;
+  }, [selectors]);
+  const buildTree = useCallback(nodes => {
+    // Track the nodes we've seen so far in the same level
+    const currentSameLevelNodes = []; // Track nodes of the next level which will be children of the current node
+
+    let nextLevelNodes = []; // Track the current node level
+
+    let lastLevel = -1; // If the nodes are empty, return an empty tree
+
+    if (nodes.length === 0) {
+      return [];
+    }
+
+    const buildSubTree = () => {
+      if (nextLevelNodes.length > 0) {
+        currentSameLevelNodes[currentSameLevelNodes.length - 1].children.push(...buildTree(nextLevelNodes));
+      }
+    };
+
+    nodes.forEach(node => {
+      // If the node is of a greater level, we need to build the sub tree
+      if (lastLevel !== -1 && lastLevel < node.level) {
+        nextLevelNodes.push(node);
+        return;
+      } // build a subtree
+
+
+      buildSubTree(); // reset the next level nodes
+
+      lastLevel = node.level; // add the current node to the current level nodes
+
+      currentSameLevelNodes.push({
+        id: node.id,
+        text: node.text,
+        children: []
+      }); // reset the next level nodes after building the subtree
+
+      nextLevelNodes = [];
+    }); // build subtree
+
+    buildSubTree();
+    return currentSameLevelNodes;
+  }, []);
+  useEffect(() => {
+    if (target.current) {
+      const nodes = getNodes(target.current);
+      const tree = buildTree(nodes);
+      setContentTree(tree);
+    }
+  }, [target.current]);
+  return contentTree;
+};
+
+export default useContentTree;