@pareto-engineering/design-system 2.0.0-alpha.9 → 3.0.0-alpha.22

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 *;
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/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/a/DotInfo/DotInfo.js

@@ -2,25 +2,28 @@
 import * as React from 'react';
 import { useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem'; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
 
 const baseClassName = styleNames.base;
 const componentClassName = 'dot-info';
+
 /**
  * This is the component description.
  */
-
-const DotInfo = ({
-  id,
-  className: userClassName,
-  style,
-  booleanValue,
-  height,
-  colorTrue,
-  colorFalse,
-  colorEmpty // ...otherProps
-
-}) => {
+const DotInfo = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    booleanValue,
+    height,
+    colorTrue,
+    colorFalse,
+    colorEmpty
+    // ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
@@ -33,43 +36,35 @@ const DotInfo = ({
     }
   });
 };
-
 DotInfo.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),
-
   /**
    *  Boolean value to be converted into string
    */
   booleanValue: PropTypes.bool,
-
   /**
    * Color for true case
    */
   colorTrue: PropTypes.string,
-
   /**
    * Color for false case
    */
   colorFalse: PropTypes.string,
-
   /**
    * Color for the border when empty value
    */
   colorEmpty: PropTypes.string,
-
   /**
    * The height of the dot
    */
@@ -79,7 +74,8 @@ DotInfo.defaultProps = {
   colorTrue: 'success',
   colorFalse: 'error',
   colorEmpty: 'metadata',
-  height: '2em' // someProp:false
-
+  height: '2em'
+  // someProp:false
 };
+
 export default DotInfo;

package/dist/es/a/Figure/Figure.js

@@ -2,67 +2,65 @@
 import * as React from 'react';
 import { useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem'; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
 
 const baseClassName = styleNames.base;
 const componentClassName = 'photo-card';
+
 /**
  * This is the component description.
  */
-
-const Figure = ({
-  id,
-  className: userClassName,
-  style,
-  src,
-  alt,
-  caption
-}) => {
+const Figure = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    src,
+    alt,
+    caption
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
+    style: style
+    // {...otherProps}
   }, /*#__PURE__*/React.createElement("figure", null, /*#__PURE__*/React.createElement("img", {
     src: src,
     alt: alt
   }), /*#__PURE__*/React.createElement("figcaption", null, caption || alt)));
 };
-
 Figure.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 source to the photo to be displayed
    */
   src: PropTypes.string,
-
   /**
    * The alternate text for the photo
    */
   alt: PropTypes.string,
-
   /**
    * The caption that will appear beneath the photo
    */
   caption: PropTypes.string
 };
-Figure.defaultProps = {// someProp:false
+Figure.defaultProps = {
+  // someProp:false
 };
 export default Figure;

package/dist/es/a/HamburgerButton/HamburgerButton.js

@@ -1,10 +1,11 @@
-function _extends() { _extends = Object.assign || 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); }
-
+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 { useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem'; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
 
 const baseClassName = styleNames.base;
 const componentClassName = 'hamburger-button';
@@ -13,17 +14,17 @@ const hamburgerType = 'squeeze'; // docs : https://jonsuh.com/hamburgers/#sass
 /**
  * This is the component description.
  */
-
-const HamburgerButton = ({
-  id,
-  className: userClassName,
-  style,
-  children,
-  isOpen,
-  ariaLabel,
-  color,
-  ...otherProps
-}) => {
+const HamburgerButton = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    isOpen,
+    ariaLabel,
+    color,
+    ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
@@ -40,38 +41,31 @@ const HamburgerButton = ({
     className: "hamburger-inner"
   })));
 };
-
 HamburgerButton.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,
-
   /**
    * Whether the menu is open
    */
   isOpen: PropTypes.bool.isRequired,
-
   /**
    * The button color
    */
   color: PropTypes.string,
-
   /**
    * The accessibility label
    */

package/dist/es/a/IconList/IconList.js

@@ -1,72 +1,70 @@
-function _extends() { _extends = Object.assign || 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); }
-
+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 { useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem';
-import { Item } from "./common"; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+import { Item } from "./common";
+
+// Local Definitions
 
 const baseClassName = styleNames.base;
 const componentClassName = 'icon-list';
+
 /**
  * This is the component description.
  */
-
-const IconList = ({
-  id,
-  className: userClassName,
-  style,
-  children,
-  icon,
-  iconHover,
-  ...otherProps
-}) => {
+const IconList = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    icon,
+    iconHover,
+    ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("ul", _extends({
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: { ...style,
+    style: {
+      ...style,
       '--list-icon': icon && `"${icon}"`,
       '--list-icon-hover': iconHover && `"${iconHover}"`
     }
   }, otherProps), children);
 };
-
 IconList.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 icon of the list element
    */
   icon: PropTypes.string,
-
   /**
    * The icon of the list element on hover
    */
   iconHover: PropTypes.string
 };
-IconList.defaultProps = {// someProp:false
+IconList.defaultProps = {
+  // someProp:false
 };
 IconList.Item = Item;
 export default IconList;

package/dist/es/a/IconList/common/Item/Item.js

@@ -1,63 +1,63 @@
-function _extends() { _extends = Object.assign || 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); }
-
+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 PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem'; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
 
 const componentClassName = styleNames.elementItem;
+
 /**
  * This is the component description.
  */
-
-const Item = ({
-  id,
-  className: userClassName,
-  style,
-  children,
-  icon,
-  iconHover,
-  ...otherProps
-}) => /*#__PURE__*/React.createElement("li", _extends({
-  id: id,
-  className: [componentClassName, userClassName].filter(e => e).join(' '),
-  style: { ...style,
-    '--list-icon': icon && `"${icon}"`,
-    '--list-icon-hover': iconHover && `"${iconHover}"`
-  }
-}, otherProps), children);
-
+const Item = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    icon,
+    iconHover,
+    ...otherProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement("li", _extends({
+    id: id,
+    className: [componentClassName, userClassName].filter(e => e).join(' '),
+    style: {
+      ...style,
+      '--list-icon': icon && `"${icon}"`,
+      '--list-icon-hover': iconHover && `"${iconHover}"`
+    }
+  }, otherProps), children);
+};
 Item.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 icon of the list element
    */
   icon: PropTypes.string,
-
   /**
    * The icon of the list element on hover
    */
   iconHover: PropTypes.string
 };
+
 /*
 Item.defaultProps = {
 }

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

@@ -5,7 +5,7 @@
 $default-icon:"";
 $default-icon-width:2em;
 $default-icon-margin:.5em;
-$default-icon-font:var(--font-icons);
+$default-icon-font:icons;
 $default-icon-margin-top:.1em;//.2em;
 
 .#{bem.$base}.icon-list {