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

package/dist/cjs/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js

@@ -48,7 +48,6 @@ const node /*: ConcreteRequest*/ = function () {
       "name": "QueryLoaderHelloQuery",
       "selections": v0 /*: any*/
     },
-
     "params": {
       "cacheID": "463f9ee8a82dd6ec8dedeb28649cce74",
       "id": null,

package/dist/cjs/test/QueryLoader/common/PreloadedTestData/PreloadedTestData.js

@@ -8,8 +8,8 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactRelay = require("react-relay");
 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; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /* @pareto-engineering/generator-front 1.0.12 */
 
 /**
@@ -37,5 +37,4 @@ PreloadedTestData.propTypes = {
 PreloadedTestData.defaultProps = {
   // someProp:false
 };
-var _default = PreloadedTestData;
-exports.default = _default;
+var _default = exports.default = PreloadedTestData;

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

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "useDynamicPosition", {
     return _useDynamicPosition.default;
   }
 });
+Object.defineProperty(exports, "useOutsideClick", {
+  enumerable: true,
+  get: function () {
+    return _useOutsideClick.default;
+  }
+});
 Object.defineProperty(exports, "useWindowSize", {
   enumerable: true,
   get: function () {
@@ -17,4 +23,5 @@ Object.defineProperty(exports, "useWindowSize", {
 });
 var _useWindowSize = _interopRequireDefault(require("./useWindowSize"));
 var _useDynamicPosition = _interopRequireDefault(require("./useDynamicPosition"));
+var _useOutsideClick = _interopRequireDefault(require("./useOutsideClick"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -88,5 +88,4 @@ const useDynamicPosition = _ref => {
     secondaryPosition
   };
 };
-var _default = useDynamicPosition;
-exports.default = _default;
+var _default = exports.default = useDynamicPosition;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const useOutsideClick = (ref, callback) => {
+  // const ref = useRef(null)
+
+  (0, _react.useEffect)(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, [callback]);
+};
+var _default = exports.default = useOutsideClick;

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

@@ -27,5 +27,4 @@ const useWindowSize = function () {
   }, [getSize, handle, isClient]);
   return windowSize;
 };
-var _default = useWindowSize;
-exports.default = _default;
+var _default = exports.default = useWindowSize;

package/dist/cjs/utils/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "useDynamicPosition", {
     return _hooks.useDynamicPosition;
   }
 });
+Object.defineProperty(exports, "useOutsideClick", {
+  enumerable: true,
+  get: function () {
+    return _hooks.useOutsideClick;
+  }
+});
 Object.defineProperty(exports, "useWindowSize", {
   enumerable: true,
   get: function () {

package/dist/es/a/AnimatedBlobs/AnimatedBlobs.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,28 +21,23 @@ const AnimatedBlobs = ({
   width,
   opacity
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: {
-      ...style,
-      '--blob-color': `var(--${color})`,
-      '--height': height,
-      '--opacity': opacity,
-      '--width': width
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "shape-blob"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "shape-blob one"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "shape-blob two"
-  }));
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: {
+    ...style,
+    '--blob-color': `var(--${color})`,
+    '--height': height,
+    '--opacity': opacity,
+    '--width': width
+  }
+}, /*#__PURE__*/React.createElement("div", {
+  className: "shape-blob"
+}), /*#__PURE__*/React.createElement("div", {
+  className: "shape-blob one"
+}), /*#__PURE__*/React.createElement("div", {
+  className: "shape-blob two"
+}));
 AnimatedBlobs.propTypes = {
   /**
   * The HTML id for this element

package/dist/es/a/AnimatedGradient/AnimatedGradient.js

@@ -1,9 +1,11 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useEffect, useInsertionEffect } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import { useApp } from "./..";
 import { Gradient } from "./webGIRenderer";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -17,9 +19,9 @@ const AnimatedGradient = ({
   className: userClassName
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
+  const {
+    userTheme
+  } = useApp();
   const isClient = typeof window !== 'undefined';
   useEffect(() => {
     // Only initialize the Gradient if we're in the browser
@@ -27,7 +29,7 @@ const AnimatedGradient = ({
       const gradient = new Gradient();
       gradient.initGradient('#gradient-canvas');
     }
-  }, []);
+  }, [userTheme]);
   return /*#__PURE__*/React.createElement("canvas", {
     id: "gradient-canvas",
     "data-transition-in": true,
@@ -35,7 +37,6 @@ const AnimatedGradient = ({
     // {...otherProps}
   });
 };
-
 AnimatedGradient.propTypes = {
   /**
   * The HTML class names for this element
@@ -43,6 +44,6 @@ AnimatedGradient.propTypes = {
   className: PropTypes.string
 };
 AnimatedGradient.defaultProps = {
-  // primaryColor:'black',
+  // primaryColor:'heading',
 };
 export default AnimatedGradient;

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

@@ -3,10 +3,11 @@
 @use "@pareto-engineering/bem";
 
 .#{bem.$base}.animated-gradient {
-  --gradient-color-1: var(--background-mesh);
+  --gradient-color-1: var(--hard-background-mesh);
   --gradient-color-2: var(--soft-background-mesh);
   --gradient-color-3: var(--background-mesh);
   --gradient-color-4: var(--soft-background-mesh);
+  background-color: var(--background-mesh);
   height: 100%;
   left: 0;
   top: 0;

package/dist/es/a/AnimatedGradient/webGIRenderer.js

@@ -319,7 +319,6 @@ class Gradient {
                     window.addEventListener("scroll", this.handleScroll), window.addEventListener("mousedown", this.handleMouseDown), window.addEventListener("mouseup", this.handleMouseUp), window.addEventListener("keydown", this.handleKeyDown), this.isIntersecting = !0, this.addIsLoadedClass(), this.play()
                 }) */);
   }
-
   disconnect() {
     this.scrollObserver && (window.removeEventListener('scroll', this.handleScroll), window.removeEventListener('mousedown', this.handleMouseDown), window.removeEventListener('mouseup', this.handleMouseUp), window.removeEventListener('keydown', this.handleKeyDown), this.scrollObserver.disconnect()), window.removeEventListener('resize', this.resize);
   }

package/dist/es/a/AppContext/useTheme.js

@@ -7,19 +7,15 @@ export default ((initialTheme, storageKey = 'theme') => {
     const storage = window.localStorage;
     if (isClient) {
       const storedTheme = window.localStorage.getItem(storageKey);
-      // console.log(storedTheme, storedTheme != userTheme)
       if (storedTheme && storedTheme !== userTheme) {
-        // console.warn('Theme load')
         setPreferredTheme(storedTheme);
         setUserTheme(storedTheme);
       } else if (preferredTheme && preferredTheme.length && preferredTheme !== 'system') {
         setUserTheme(preferredTheme);
         storage.setItem(storageKey, preferredTheme);
-        // console.warn('theme change', preferredTheme)
       } else {
         setUserTheme(window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light');
         storage.removeItem(storageKey);
-        // console.warn('theme reset')
       }
     } else {
       setUserTheme('light');

package/dist/es/a/BlurOverlay/BlurOverlay.js

@@ -0,0 +1,45 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
+const baseClassName = styleNames.base;
+const componentClassName = 'blur-overlay';
+const BlurOverlay = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  blur
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, blur && styleNames.modifierActive].filter(e => e).join(' '),
+  style: style
+}, children);
+BlurOverlay.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,
+  /**
+   *  Boolean to toggle blur effect
+   */
+  blur: PropTypes.bool
+};
+BlurOverlay.defaultProps = {
+  blur: true
+  // someProp:false
+};
+export default BlurOverlay;

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

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

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

@@ -0,0 +1,33 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.blur-overlay {
+  background: inherit;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 3;
+  &.#{bem.$modifier-active} {
+    animation: blurAnimation .3s ease-in-out;
+    backdrop-filter: blur(5px);
+    background: var(--blur-overlay-background, inherit);
+    height: 100%;
+    z-index: var(--blur-overlay-z-index, 3);
+  }
+}
+
+@keyframes blurAnimation {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  1% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}

package/dist/es/a/ContentTree/ContentTree.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
 import { Tree, useContentTree } from "./common";
@@ -17,12 +17,10 @@ const ContentTree = ({
   className: userClassName,
   style,
   target,
-  selectors
+  selectors,
+  color
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const contentTree = useContentTree(target, selectors);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
@@ -30,6 +28,7 @@ const ContentTree = ({
     style: style
     // {...otherProps}
   }, /*#__PURE__*/React.createElement(Tree, {
+    color: color,
     tree: contentTree
   }));
 };
@@ -55,7 +54,11 @@ ContentTree.propTypes = {
    */
   target: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.node
-  })])
+  })]),
+  /**
+   * The color for the tree.
+   */
+  color: PropTypes.string
 };
 ContentTree.defaultProps = {
   selectors: ['h2', 'h3']

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

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import { Card } from "../../../..";
 
 // Local Definitions
 
@@ -18,7 +19,8 @@ const Tree = ({
   className: userClassName,
   style,
   tree,
-  displayDepth
+  displayDepth,
+  color
   // ...otherProps
 }) => {
   // The nodeIds to be used to get the first visible node
@@ -53,11 +55,11 @@ const Tree = ({
     }, 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", {
+  return ContentTree.length ? /*#__PURE__*/React.createElement(Card, {
     id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, color && `x-${color}`].filter(e => e).join(' '),
     style: style
-  }, ContentTree);
+  }, /*#__PURE__*/React.createElement(Card.Section, null, /*#__PURE__*/React.createElement("ul", null, ContentTree))) : null;
 };
 Tree.propTypes = {
   /**
@@ -86,9 +88,14 @@ Tree.propTypes = {
   /**
    * The levels of the tree to display.
    */
-  displayDepth: PropTypes.number
+  displayDepth: PropTypes.number,
+  /**
+   * The color of the tree.
+   */
+  color: PropTypes.string
 };
 Tree.defaultProps = {
+  color: 'interactive',
   displayDepth: 4
 };
 export default Tree;

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

@@ -1,23 +1,48 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable selector-max-compound-selectors -- exception */
 
 @use "@pareto-engineering/bem";
 
+$default-dot-size: .5em;
 $default-margin: 1em;
 $default-padding: 1em;
 
 .#{bem.$base}.content-tree {
-  ul {
-    list-style: none;
-  }
-
-  .#{bem.$base}.tree {
-    padding: 0;
+  > .#{bem.$base}.tree {
     position: sticky;
-    top: 0;
+    top: var(--theme-default-header-height-offset);
+
+    ul {
+      list-style: none;
+      padding: 0;
+
+      &:first-child > li > p {
+        margin-top: 0;
+      }
+
+      &:last-child > li > p {
+        margin-bottom: 0;
+      }
+
+      > li > p > a {
+        color: var(--paragraph);
+        text-decoration: none;
+      }
+    }
 
     .#{bem.$modifier-active} {
-      color: var(--main2);
-      transition: color .2s;
+      font-weight: 700;
+
+      &::before {
+        background: var(--x);
+        border-radius: 50%;
+        content: "";
+        display: inline-block;
+        height: $default-dot-size;
+        margin-right: $default-margin;
+        text-align: center;
+        width: $default-dot-size;
+      }
     }
 
     li:not(:last-child) {
@@ -29,5 +54,3 @@ $default-padding: 1em;
     }
   }
 }
-
-

package/dist/es/a/Conversation/Conversation.js

@@ -1,8 +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 { Card } from "../..";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -18,27 +19,21 @@ const Conversation = ({
   id,
   className: userClassName,
   style,
-  backgroundColor,
   ourColor,
   theirColor,
   children,
-  hasTriangle
+  backgroundColor
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement(ConversationContext.Provider, {
-    value: {
-      ourColor,
-      theirColor
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, hasTriangle && 'has-triangle', `y-${backgroundColor}`, 'u1'].filter(e => e).join(' '),
-    style: style
-  }, children));
-};
+}) => /*#__PURE__*/React.createElement(ConversationContext.Provider, {
+  value: {
+    ourColor,
+    theirColor
+  }
+}, /*#__PURE__*/React.createElement(Card, {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, `y-${backgroundColor}`].filter(e => e).join(' '),
+  style: style
+}, /*#__PURE__*/React.createElement(Card.Section, null, children)));
 Conversation.propTypes = {
   /**
    * The HTML id for this element
@@ -60,24 +55,19 @@ Conversation.propTypes = {
    * The base color to their messages component
    */
   theirColor: PropTypes.string,
-  /**
-   * The component background color
-   */
-  backgroundColor: PropTypes.string,
   /**
    *  The children JSX
    */
   children: PropTypes.node,
   /**
-   * whether to add triangle to bubble chats
+   * The background color
    */
-  hasTriangle: PropTypes.bool
+  backgroundColor: PropTypes.string
 };
 Conversation.defaultProps = {
-  backgroundColor: 'background2',
-  ourColor: 'background1',
-  theirColor: 'background1',
-  hasTriangle: false
+  ourColor: 'main',
+  theirColor: 'main2',
+  backgroundColor: 'background-near'
 };
 Conversation.Message = Message;
 export default Conversation;

package/dist/es/a/Conversation/common/Message/Message.js

@@ -17,6 +17,7 @@ const Message = ({
   className: userClassName,
   style,
   message,
+  customMessage,
   sender,
   from,
   attachment,
@@ -30,19 +31,17 @@ const Message = ({
   } = useConversation();
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${from === 'ours' ? ourColor : theirColor}`, from === 'ours' && 'ours', 'v1'].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${from === 'ours' ? ourColor : theirColor}`, from].filter(e => e).join(' '),
     style: style
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styleNames.elementContent
-  }, /*#__PURE__*/React.createElement("p", {
-    className: "sender v25 mb-v s-1"
-  }, sender, ":"), /*#__PURE__*/React.createElement("p", null, message), attachment && /*#__PURE__*/React.createElement("div", {
+  }, sender && /*#__PURE__*/React.createElement("p", {
+    className: "sender"
+  }, sender, ":"), /*#__PURE__*/React.createElement("div", {
+    className: "message-content"
+  }, customMessage || /*#__PURE__*/React.createElement("p", null, message), attachment && /*#__PURE__*/React.createElement("div", {
     className: `attachment y-${attachmentColor}`
   }, /*#__PURE__*/React.createElement("span", {
-    className: "f-icons"
-  }, attachmentIcon), /*#__PURE__*/React.createElement("p", {
-    className: "ml-v"
-  }, attachment))));
+    className: "icon"
+  }, attachmentIcon), /*#__PURE__*/React.createElement("p", null, attachment))));
 };
 Message.propTypes = {
   /**
@@ -60,7 +59,11 @@ Message.propTypes = {
   /**
    * The message in the conversation
    */
-  message: PropTypes.string.isRequired,
+  message: PropTypes.string,
+  /**
+   * The custom message if it uses more complex html
+   */
+  customMessage: PropTypes.node,
   /**
    * The sender of the message
    */
@@ -85,6 +88,6 @@ Message.propTypes = {
 Message.defaultProps = {
   from: 'theirs',
   attachmentIcon: 'A',
-  attachmentColor: 'main4'
+  attachmentColor: 'interactive'
 };
 export default Message;