@pareto-engineering/design-system 2.0.0-alpha.7 → 2.0.0-alpha.70

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

@@ -1,54 +1,153 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+
 @use "@pareto-engineering/bem";
 @use "@aztlan/stylebook/src/mixins";
 @use "@aztlan/stylebook/src/globals" as *;
 
 $default-padding: var(--u);
 $default-conversation-background: var(--y);
-$default-message-max-width: calc(100% - #{$default-padding});
+$default-message-max-width: calc(100% - 4 * #{$default-padding});
 $default-message-min-width: 12em;
 $default-message-border: var(--theme-border);
+$triangle-border-size: 15px;
+$triangle-border-style: $triangle-border-size solid;
+$triangle-border-style-subtracted: ($triangle-border-size - 1px) solid;
+$triangle-border1: $triangle-border-style var(--paragraph);
+$triangle-border2: $triangle-border-style transparent;
+$triangle-border3: $triangle-border-style-subtracted var(--x);
+$triangle-border4: $triangle-border-style-subtracted transparent;
+$triangle-before-side:24px;
+$triangle-before-bottom:-30px;
+$triangle-after-bottom:-27px;
+$triangle-after-side:25px;
 
 .#{bem.$base}.conversation {
-    display: flex;
-    flex-direction: column;
-    background-color: $default-conversation-background;
-    padding: $default-padding;
-    border-radius: var(--theme-border-radius);
+  background-color: $default-conversation-background;
+  border-radius: var(--theme-border-radius);
+  display: flex;
+  flex-direction: column;
+  padding: $default-padding;
 
-    >:not(:last-child) {
-        margin-bottom: $default-padding;
-    }
+  >:not(:last-child) {
+    margin-bottom: $default-padding;
+  }
+
+  // >:nth-child(1) {
+  // animation-delay: 1s;
+  // }
+  // >:nth-child(2) {
+  // animation-delay: 3s;
+  // }
 
+  &.has-triangle {
+    padding-bottom: calc(#{$default-padding} * 2);
     .#{bem.$base}.message {
-        min-width: $default-message-min-width;
-        max-width: $default-message-max-width;
-        padding: $default-padding;
-        border-radius: var(--theme-border-radius);
-        background-color: var(--x);
-        align-self: flex-start;
-        border: $default-message-border;
-
-        .#{bem.$element-content} {
-            display: flex;
-            flex-direction: column;
-
-            >p {
-                color: var(--on-x);
-            }
-
-            .sender {
-                font-weight: 800;
-                margin-bottom: .5em;
-            }
+      ::before {
+        border-bottom: $triangle-border2;
+        border-left: $triangle-border2;
+        border-right: $triangle-border1;
+        border-top: $triangle-border1;
+        bottom: $triangle-before-bottom;
+        content: "";
+        height: 0;
+        position: absolute;
+        right: $triangle-before-side;
+        width: 0;
+      }
+
+      ::after {
+        border-bottom: $triangle-border4;
+        border-left: $triangle-border4;
+        border-right: $triangle-border3;
+        border-top: $triangle-border3;
+        bottom: $triangle-after-bottom;
+        content: "";
+        height: 0;
+        position: absolute;
+        right: $triangle-after-side;
+        width: 0;
+      }
+
+      &:not(.ours) {
+        ::before {
+          border-bottom: $triangle-border2;
+          border-left: $triangle-border1;
+          border-right: $triangle-border2;
+          border-top: $triangle-border1;
+          bottom: $triangle-before-bottom;
+          content: "";
+          height: 0;
+          left: $triangle-before-side;
+          position: absolute;
+          width: 0;
         }
-    }
 
-    .#{bem.$base}.ours {
-        align-self: flex-end;
+        ::after {
+          border-bottom: $triangle-border4;
+          border-left: $triangle-border3;
+          border-right: $triangle-border4;
+          border-top: $triangle-border3;
+          bottom: $triangle-after-bottom;
+          content: "";
+          height: 0;
+          left: $triangle-after-side;
+          position: absolute;
+          width: 0;
+        }
+      }
     }
+  }
 
-}
+  .#{bem.$base}.message {
+    align-self: flex-start;
+    background-color: var(--x);
+    //  animation: fadeIn 1s ease-in both;
+    border: $default-message-border;
+    border-radius: var(--theme-border-radius);
+    max-width: $default-message-max-width;
+    min-width: $default-message-min-width;
+    padding: $default-padding;
+    position: relative;
 
+    .#{bem.$element-content} {
+      display: flex;
+      flex-direction: column;
 
+      >p {
+        color: var(--on-x);
+      }
 
+      .sender {
+        font-weight: 800;
+        margin-bottom: .5em;
+      }
+
+      .attachment {
+        align-self: baseline;
+        background-color: var(--y);
+        display: flex;
+        flex-direction: row;
+        padding: .5em 1em;
+
+        > p {
+          margin-bottom: 0;
+        }
+
+        > img {
+          width: 40px;
+        }
+      }
+    }
+    &.#{bem.$base}.ours {
+      align-self: flex-end;
+    }
+
+
+    // mobile style
+    @include mixins.media($to:$sm-md) {
+      .message {
+        margin-top: 2em;
+      }
+    }
+  }
+}

package/dist/es/{c/TeamGallery/TeamGallery.js → a/Label/Label.js}

@@ -1,38 +1,35 @@
-/* @pareto-engineering/generator-front 1.0.2 */
+/* @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'; // Imports from the component folder
-
-import { PersonCard } from "./common"; // Local Definitions
-// import('./styles.scss')
+import styleNames from '@pareto-engineering/bem'; // Local Definitions
 
 const baseClassName = styleNames.base;
-const componentClassName = 'team-gallery';
+const componentClassName = 'label';
+/**
+ * This is the component description.
+ */
 
-const TeamGallery = ({
+const Label = ({
   id,
   className: userClassName,
   style,
   children,
-  title // ...otherProps
-
+  color,
+  isCompact,
+  isGhost
 }) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`, isCompact && styleNames.modifierCompact, isGhost && styleNames.modifierGhost].filter(e => e).join(' '),
     style: style
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "title"
-  }, title), /*#__PURE__*/React.createElement("div", {
-    className: "content"
-  }, children));
+  }, children);
 };
 
-TeamGallery.propTypes = {
+Label.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -49,16 +46,26 @@ TeamGallery.propTypes = {
   style: PropTypes.objectOf(PropTypes.string),
 
   /**
-   *  The children JSX
+   * Whether the button has the ghost style
+   */
+  isGhost: PropTypes.bool,
+
+  /**
+   * Whether the button is compact
    */
-  children: PropTypes.node.isRequired,
+  isCompact: PropTypes.bool,
 
   /**
-   *  Title of gallery
+   *  The default font color to display for the label
+   */
+  color: PropTypes.string,
+
+  /**
+   *  The children JSX
    */
-  title: PropTypes.string.isRequired
+  children: PropTypes.node
 };
-TeamGallery.defaultProps = {// someProp:false
+Label.defaultProps = {
+  color: 'main1'
 };
-TeamGallery.PersonCard = PersonCard;
-export default TeamGallery;
+export default Label;

package/dist/es/{f/fields/TextArea → a/Label}/index.js

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

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

@@ -0,0 +1,34 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-padding-bottom: .4em;
+$default-padding-side: .7em;
+$default-padding-top: .5em;
+
+$compact-padding: $default-padding-top*.8 $default-padding-side*.8 $default-padding-bottom*.8;
+$default-padding: $default-padding-top $default-padding-side $default-padding-bottom;
+
+$default-color: primary;
+$default-image-size: 2em;
+$default-font-size: calc(1em * var(--s-1));
+
+.#{bem.$base}.label {
+    align-items: center;
+    background: var(--x, var(--#{$default-color}));
+    border-radius: 3em;
+    color: var(--on-x, var(--on-#{$default-color}));
+    display: inline-flex;
+    font-size: $default-font-size;
+    padding: $default-padding;
+    white-space: nowrap;
+
+    &.#{bem.$modifier-compact} {
+        padding: $compact-padding;
+    }
+
+    &.#{bem.$modifier-ghost} {
+        background: transparent;
+        border: 1px solid var(--x, var(--#{$default-color}));
+        color: var(--x, var(--#{$default-color}));
+    }
+}

package/dist/es/a/ModalContextProvider/Context.js

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export default /*#__PURE__*/React.createContext({});

package/dist/es/a/ModalContextProvider/ModalContextProvider.js

@@ -0,0 +1,47 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useState, useCallback } from 'react';
+import PropTypes from 'prop-types'; // Package-level Imports
+
+import ModalContext from "./Context";
+import { ModalRoot } from "./common";
+/**
+ * This is the component description.
+ */
+
+const ModalContextProvider = ({
+  children
+}) => {
+  const [isOpen, setModalState] = useState(false);
+  const [modal, setModal] = useState({});
+  const setOpen = useCallback(() => setModalState(true), []);
+  const setClose = useCallback(() => setModalState(false), []);
+
+  const openModal = component => {
+    setModal(() => component);
+    setOpen();
+  };
+
+  return /*#__PURE__*/React.createElement(ModalContext.Provider, {
+    value: {
+      isOpen,
+      modal,
+      setOpen,
+      setClose,
+      setModal,
+      openModal
+    }
+  }, children, modal && /*#__PURE__*/React.createElement(ModalRoot, {
+    modal: modal
+  }));
+};
+
+ModalContextProvider.propTypes = {
+  /**
+   *  The children JSX
+   */
+  children: PropTypes.node
+};
+ModalContextProvider.defaultProps = {// someProp:false
+};
+export default ModalContextProvider;

package/dist/es/a/ModalContextProvider/common/ModalRoot/ModalRoot.js

@@ -0,0 +1,36 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useLayoutEffect } from 'react';
+import styleNames from '@pareto-engineering/bem';
+import PropTypes from 'prop-types';
+import { useModal } from "../../../..";
+const baseClassName = styleNames.base;
+const componentClassName = 'modal-root'; // Local Definitions
+
+/**
+ * This is the component description.
+ */
+
+const ModalRoot = ({
+  modal: ModalComponent
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const {
+    isOpen
+  } = useModal();
+  return isOpen ? /*#__PURE__*/React.createElement("div", {
+    className: [baseClassName, componentClassName].filter(e => e).join(' ')
+  }, /*#__PURE__*/React.createElement(ModalComponent, null)) : null;
+};
+
+ModalRoot.propTypes = {
+  /**
+   *  The component to render
+   */
+  modal: PropTypes.oneOfType([PropTypes.elementType, PropTypes.object])
+};
+ModalRoot.defaultProps = {// someProp:false
+};
+export default ModalRoot;

package/dist/es/a/ModalContextProvider/common/ModalRoot/index.js

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

package/dist/es/a/ModalContextProvider/common/ModalRoot/styles.scss

@@ -0,0 +1,14 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.modal-root{
+  align-items: center;
+  background-color: rgba($color: #000000, $alpha: 0.35);
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+}

package/dist/es/{c/BlogPost → a/ModalContextProvider/common}/index.js

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

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

@@ -0,0 +1,4 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as Context } from "./Context";
+export { default as ModalContextProvider } from "./ModalContextProvider";
+export { default as useModal } from "./useModal";

package/dist/es/a/ModalContextProvider/useModal.js

@@ -0,0 +1,3 @@
+import { useContext } from 'react';
+import Context from "./Context";
+export default (() => useContext(Context));

package/dist/es/a/OvalIllustration/OvalIllustration.js

@@ -18,7 +18,10 @@ const OvalIllustration = ({
   src,
   alt,
   ovalBackground,
-  backgroundColor // ...otherProps
+  backgroundColor,
+  mobileSize,
+  tabletSize,
+  desktopSize // ...otherProps
 
 }) => {
   useLayoutEffect(() => {
@@ -27,7 +30,11 @@ const OvalIllustration = ({
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, layout].filter(e => e).join(' '),
-    style: style // {...otherProps}
+    style: { ...style,
+      '--mobile-size': mobileSize,
+      '--tablet-size': tabletSize,
+      '--desktop-size': desktopSize
+    } // {...otherProps}
 
   }, ovalBackground && /*#__PURE__*/React.createElement("div", {
     className: `oval-background y-${backgroundColor}`
@@ -78,9 +85,27 @@ OvalIllustration.propTypes = {
   /**
    * background color of the oval behind the image
    */
-  backgroundColor: PropTypes.string
+  backgroundColor: PropTypes.string,
+
+  /**
+   * size of the oval for mobile screen
+   */
+  mobileSize: PropTypes.string,
+
+  /**
+   * size of the oval for tablet screen
+   */
+  tabletSize: PropTypes.string,
+
+  /**
+   * size of the oval for desktop screen
+   */
+  desktopSize: PropTypes.string
 };
 OvalIllustration.defaultProps = {
-  layout: 'left'
+  layout: 'left',
+  mobileSize: '20em',
+  tabletSize: '35em',
+  desktopSize: '45em'
 };
 export default OvalIllustration;

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

@@ -4,9 +4,6 @@
 @use "@aztlan/stylebook/src/mixins";
 @use "@aztlan/stylebook/src/globals" as *;
 
-$default-desktop-shape-size:45em;
-$default-tablet-shape-size:35em;
-$default-mobile-shape-size:20em;
 $default-clockwise-degree:60deg;
 $default-counter-clockwise-degree:-60deg;
 $default-ellipse-size:30% 43% at 50% 50%;
@@ -50,7 +47,7 @@ $default-ellipse-size:30% 43% at 50% 50%;
     clip-path: ellipse($default-ellipse-size);
     overflow: hidden;
     position: absolute;
-    z-index: -100;
+    z-index: 0;
   }
 
   .illustration {
@@ -67,39 +64,39 @@ $default-ellipse-size:30% 43% at 50% 50%;
   // mobile style
   @include mixins.media($to:$sm-md) {
     .oval-background {
-      height: $default-mobile-shape-size;
-      width: $default-mobile-shape-size;
+      height: var(--mobile-size);
+      width: var(--mobile-size);
     }
 
     .illustration {
-      height: $default-mobile-shape-size;
-      width: $default-mobile-shape-size;
+      height: var(--mobile-size);
+      width: var(--mobile-size);
     }
   }
 
   // tablet style
   @include mixins.media($from:$xs-sm, $to:$sm-md) {
     .oval-background {
-      height: $default-tablet-shape-size;
-      width: $default-tablet-shape-size;
+      height: var(--tablet-size);
+      width: var(--tablet-size);
     }
 
     .illustration {
-      height: $default-tablet-shape-size;
-      width: $default-tablet-shape-size;
+      height: var(--tablet-size);
+      width: var(--tablet-size);
     }
   }
 
   // desktop style
   @include mixins.media($from:$sm-md) {
     .oval-background {
-      height: $default-desktop-shape-size;
-      width: $default-desktop-shape-size;
+      height: var(--desktop-size);
+      width: var(--desktop-size);
     }
 
     .illustration {
-      height: $default-desktop-shape-size;
-      width: $default-desktop-shape-size;
+      height: var(--desktop-size);
+      width: var(--desktop-size);
     }
   }
 }

package/dist/es/a/Popover/Popover.js

@@ -0,0 +1,118 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useRef, useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem'; // Local Definitions
+
+import { useDynamicPosition } from "../../utils";
+const baseClassName = styleNames.base;
+const componentClassName = 'popover';
+/**
+ * This is the component description.
+ */
+
+const Popover = ({
+  id,
+  className: userClassName,
+  style,
+  color,
+  children,
+  isOpen,
+  parentRef,
+  preferredPrimaryOrder,
+  preferredSecondaryOrder,
+  offsetXPx,
+  offsetYPx // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const popoverRef = useRef(null);
+  const {
+    primaryPosition,
+    secondaryPosition
+  } = useDynamicPosition({
+    preferredPrimaryOrder,
+    preferredSecondaryOrder,
+    elementRef: popoverRef,
+    parentRef,
+    offsetXPx,
+    offsetYPx
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, isOpen && 'open', `x-${color}`, primaryPosition, secondaryPosition].filter(e => e).join(' '),
+    style: style,
+    ref: popoverRef // {...otherProps}
+
+  }, children);
+};
+
+Popover.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,
+
+  /**
+   * The base color of the popover
+   */
+  color: PropTypes.string,
+
+  /**
+   * Whether the popover should be visible or not
+   */
+  isOpen: PropTypes.bool,
+
+  /**
+   * The preferred primary position order of the popover
+   */
+  preferredPrimaryOrder: PropTypes.arrayOf(PropTypes.oneOf(['bottom', 'top', 'right', 'left'])),
+
+  /**
+   * The preferred secondary position order of the popover
+   */
+  preferredSecondaryOrder: PropTypes.arrayOf(PropTypes.oneOf(['left', 'right', 'bottom', 'top'])),
+
+  /**
+   * The horizonal offset in pixels from the anchor point to the popover
+   */
+  offsetXPx: PropTypes.number,
+
+  /**
+   * The vertical offset in pixels from the anchor point to the popover
+   */
+  offsetYPx: PropTypes.number,
+
+  /**
+   * The reference to the parent element
+   */
+  parentRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })])
+};
+Popover.defaultProps = {
+  color: 'background1',
+  isOpen: false,
+  preferredPrimaryOrder: ['bottom', 'top', 'right', 'left'],
+  preferredSecondaryOrder: ['left', 'right', 'bottom', 'top'],
+  offsetXPx: 16,
+  offsetYPx: 0
+};
+export default Popover;

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

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