@pareto-engineering/design-system 2.0.0-alpha.10 → 2.0.0-alpha.14

package/dist/cjs/a/BackgroundGradient/BackgroundGradient.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+
+// Local Definitions
+var baseClassName = _bem.default.base;
+var componentClassName = 'background-gradient';
+/**
+ * This is the component description.
+ */
+
+var BackgroundGradient = _ref => {
+  var {
+    id,
+    className: userClassName,
+    style,
+    height // ...otherProps
+
+  } = _ref;
+  (0, React.useLayoutEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      '--gradient-height': height
+    })
+  });
+};
+
+BackgroundGradient.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 height of the shape.
+   */
+  height: _propTypes.default.string
+};
+BackgroundGradient.defaultProps = {// someProp: false,
+};
+var _default = BackgroundGradient;
+exports.default = _default;

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

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

package/dist/cjs/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(transparent, var(--y) 25%, var(--light-y) 75%, transparent);
+    opacity: .4;
+    z-index: -1;
+}
+
+
+

package/dist/cjs/a/Conversation/Conversation.js

@@ -35,17 +35,18 @@ var Conversation = _ref => {
     backgroundColor,
     ourColor,
     theirColor,
-    children // ...otherProps
+    children,
+    hasTriangle // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
-  }, []); // const messageColors = { ours: color, theirs: 'main2' }
-
+  }, []);
   return /*#__PURE__*/React.createElement(_Context.default.Provider, {
     value: {
       ourColor,
-      theirColor
+      theirColor,
+      hasTriangle
     }
   }, /*#__PURE__*/React.createElement("div", {
     id: id,
@@ -88,12 +89,18 @@ Conversation.propTypes = {
   /**
    *  The children JSX
    */
-  children: _propTypes.default.node
+  children: _propTypes.default.node,
+
+  /**
+   * whether to add triangle to bubble chats
+   */
+  hasTriangle: _propTypes.default.bool
 };
 Conversation.defaultProps = {
-  backgroundColor: 'background',
-  ourColor: 'main2',
-  theirColor: 'background2'
+  backgroundColor: 'background2',
+  ourColor: 'background1',
+  theirColor: 'background1',
+  hasTriangle: 'false'
 };
 Conversation.Message = _common.Message;
 var _default = Conversation;

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

@@ -34,22 +34,32 @@ var Message = _ref => {
     style,
     message,
     sender,
-    from // ...otherProps
+    from,
+    attachment,
+    attachmentIcon,
+    attachmentColor // ...otherProps
 
   } = _ref;
   var {
+    hasTriangle,
     ourColor,
     theirColor
   } = (0, _useConversation.default)();
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, "x-".concat(from === 'ours' ? ourColor : theirColor), from === 'ours' && 'ours'].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, "x-".concat(from === 'ours' ? ourColor : theirColor), from === 'ours' && 'ours', hasTriangle === true ? 'has-triangle' : '', 'v1'].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement("div", {
     className: _bem.default.elementContent
   }, /*#__PURE__*/React.createElement("p", {
     className: "sender v25 mb-v s-1"
-  }, sender, ":"), /*#__PURE__*/React.createElement("p", null, message)));
+  }, sender, ":"), /*#__PURE__*/React.createElement("p", null, message), attachment && /*#__PURE__*/React.createElement("div", {
+    className: "attachment y-".concat(attachmentColor)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "f-icons"
+  }, attachmentIcon), /*#__PURE__*/React.createElement("p", {
+    className: "ml-v"
+  }, attachment))));
 };
 
 Message.propTypes = {
@@ -63,6 +73,11 @@ Message.propTypes = {
    */
   className: _propTypes.default.string,
 
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+
   /**
    * The message in the conversation
    */
@@ -79,12 +94,24 @@ Message.propTypes = {
   from: _propTypes.default.oneOf(['ours', 'theirs']),
 
   /**
-   * The React-written, css properties for this element.
+   * name of the attachment file
+   */
+  attachment: _propTypes.default.string,
+
+  /**
+   * source of the attachment icon
+   */
+  attachmentIcon: _propTypes.default.string,
+
+  /**
+   * background color of the attachment box
    */
-  style: _propTypes.default.objectOf(_propTypes.default.string)
+  attachmentColor: _propTypes.default.string
 };
 Message.defaultProps = {
-  from: 'theirs'
+  from: 'theirs',
+  attachmentIcon: 'A',
+  attachmentColor: 'main4'
 };
 var _default = Message;
 exports.default = _default;

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

@@ -1,4 +1,5 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+
 @use "@pareto-engineering/bem";
 @use "@aztlan/stylebook/src/mixins";
 @use "@aztlan/stylebook/src/globals" as *;
@@ -8,47 +9,153 @@ $default-conversation-background: var(--y);
 $default-message-max-width: calc(100% - #{$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;
+  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;
+  }
+
+  // >:nth-child(1) {
+  // animation-delay: 1s;
+  // }
+  // >:nth-child(2) {
+  // animation-delay: 3s;
+  // }
+
+  .#{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;
 
-    >:not(:last-child) {
-        margin-bottom: $default-padding;
-    }
+    .#{bem.$element-content} {
+      display: flex;
+      flex-direction: column;
+
+      >p {
+        color: var(--on-x);
+      }
+
+      .sender {
+        font-weight: 800;
+        margin-bottom: .5em;
+      }
 
-    .#{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;
-            }
+      .attachment {
+        align-self: baseline;
+        background-color: var(--y);
+        display: flex;
+        flex-direction: row;
+        padding: .5em 1em;
+
+        > p {
+          margin-bottom: 0;
         }
-    }
 
-    .#{bem.$base}.ours {
-        align-self: flex-end;
+        > img {
+          width: 40px;
+        }
+      }
+    }
+    &.#{bem.$base}.ours {
+      align-self: flex-end;
     }
 
-}
+    &.has-triangle {
+      ::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;
+        }
 
+        ::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;
+        }
+      }
+    }
 
+    // mobile style
+    @include mixins.media($to:$sm-md) {
+      .message {
+        margin-top: 2em;
+      }
+    }
+  }
+}
 
+//@keyframes fadeIn {
+//  from {
+//    opacity: 0;
+//    transform: translate3d(0, 50%, 0);
+//  }
+//
+//  to {
+//    opacity: 1;
+//    transform: translate3d(0, 0, 0);
+//  }
+//}

package/dist/cjs/a/Shapes/Shapes.js

@@ -57,6 +57,8 @@ var Shapes = _ref => {
 
   }, shape === 'triangle' && /*#__PURE__*/React.createElement("div", {
     className: "triangle"
+  }), shape === 'inverted-triangle' && /*#__PURE__*/React.createElement("div", {
+    className: "inverted-triangle"
   }), shape === 'half-ellipses' && /*#__PURE__*/React.createElement("div", {
     className: "half-ellipses"
   }, /*#__PURE__*/React.createElement("div", {
@@ -109,6 +111,12 @@ var Shapes = _ref => {
     className: "ellipse-one"
   }), /*#__PURE__*/React.createElement("div", {
     className: "ellipse-two"
+  })), shape === 'intersecting-circles' && /*#__PURE__*/React.createElement("div", {
+    className: "intersecting-circles"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "left"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "right"
   })));
 };
 
@@ -146,7 +154,7 @@ Shapes.propTypes = {
   /**
    * The options of a shape to use
    */
-  shape: _propTypes.default.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles', 'rotated-ellipses']),
+  shape: _propTypes.default.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles', 'rotated-ellipses', 'inverted-triangle', 'intersecting-circles']),
 
   /**
    * The overflow of the shape.

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

@@ -29,6 +29,14 @@ $default-shapes-opacity:.8;
       width: var(--shape-height, #{$default-triangle-height});
     }
 
+    .inverted-triangle {
+      background-image: linear-gradient(var(--dark-y), transparent);
+      clip-path: polygon(50% 0, 0 100%, 100% 100%);
+      height: calc(var(--shape-height, #{$default-triangle-height}) * 0.86);
+      opacity: $default-shapes-opacity;
+      width: var(--shape-height, #{$default-triangle-height});
+    }
+
     .half-ellipses {
       height: var(--shape-height, #{$default-ellipse-height});
       opacity: $default-shapes-opacity;
@@ -218,4 +226,30 @@ $default-shapes-opacity:.8;
         clip-path: ellipse(50% 35% at 50% 50%);
       }
     }
-}
+
+    .intersecting-circles {
+      height: var(--shape-height, #{$default-circle-height});
+      opacity: $default-shapes-opacity;
+      width: calc(var(--shape-height, #{$default-circle-height}) * 2);
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      position: relative;
+
+      > * {
+        border-radius: 50%;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        opacity: .8;
+      }
+
+      .left {
+        background-image: linear-gradient(to right ,var(--dark-y),var(--y), transparent);
+        grid-column: 1 / 5;
+      }
+      .right {
+        background-image: linear-gradient(to left, var(--dark-y), var(--y), transparent);
+        grid-column: 4 / 8;
+      }
+    }
+}

package/dist/cjs/a/index.js

@@ -153,6 +153,12 @@ Object.defineProperty(exports, "OvalIllustration", {
     return _OvalIllustration.OvalIllustration;
   }
 });
+Object.defineProperty(exports, "BackgroundGradient", {
+  enumerable: true,
+  get: function get() {
+    return _BackgroundGradient.BackgroundGradient;
+  }
+});
 
 var _SVG = require("./SVG");
 
@@ -196,4 +202,6 @@ var _Timestamp = require("./Timestamp");
 
 var _Shapes = require("./Shapes");
 
-var _OvalIllustration = require("./OvalIllustration");
+var _OvalIllustration = require("./OvalIllustration");
+
+var _BackgroundGradient = require("./BackgroundGradient");

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

@@ -13,7 +13,7 @@ var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
 
 var _ = require("../..");
 
-var _excluded = ["id", "className", "style", "children", "isLoading", "color", "isCompact", "isGhost", "isSimple"];
+var _excluded = ["id", "className", "style", "children", "isLoading", "color", "isCompact", "isGhost", "isSimple", "arrowDirection"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -43,7 +43,8 @@ var Button = _ref => {
     color,
     isCompact,
     isGhost,
-    isSimple
+    isSimple,
+    arrowDirection
   } = _ref,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
@@ -52,7 +53,7 @@ var Button = _ref => {
   }, []);
   return /*#__PURE__*/React.createElement("button", _extends({
     id: id,
-    className: [baseClassName, componentClassName, userClassName, "x-".concat(color), isGhost && _bem.default.modifierGhost, isCompact && _bem.default.modifierCompact, isSimple && _bem.default.modifierSimple].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, "x-".concat(color), isGhost && _bem.default.modifierGhost, isCompact && _bem.default.modifierCompact, isSimple && _bem.default.modifierSimple, arrowDirection && "arrow-".concat(arrowDirection)].filter(e => e).join(' '),
     style: style,
     type: "button"
   }, otherProps), isLoading ? /*#__PURE__*/React.createElement(_.LoadingCircle, {
@@ -107,7 +108,12 @@ Button.propTypes = {
   /**
    * Button loading state
    */
-  isLoading: _propTypes.default.bool
+  isLoading: _propTypes.default.bool,
+
+  /**
+   * The direction of the arrow if the button has one
+   */
+  arrowDirection: _propTypes.default.string
 };
 Button.defaultProps = {
   color: 'main1'

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

@@ -6,22 +6,41 @@ $default-padding: 1em 1em .84em;
 $compact-padding: .6em .6em .48em;
 $default-color:primary;
 $font-weight:bold;
+$default-margin:.5em;
 
 .#{bem.$base}.button {
   background: var(--x, var(--#{$default-color}));
   border: transparent;
   border-radius: var(--theme-border-radius);
   color: var(--on-x, var(--on-#{$default-color}));
+  display: inline-flex;
   font-weight: 600;
+  font-family: var(--theme-default-paragraph);
+  justify-content: space-between;
   padding: $default-padding;
   transition: all .25s;
 
+  &.arrow-right {
+    &::after {
+      content: "-->";
+      margin-left: $default-margin;
+    }
+  }
+
+  &.arrow-left {
+    &::before {
+      content: "<--";
+      margin-right: $default-margin;
+    }
+  }
+
   &:not(:disabled) {
     cursor: pointer;
 
     &:hover {
       background: var(--light-x, var(--light-#{$default-color}));
     }
+
     &:focus {
       background: var(--dark-x, var(--dark-#{$default-color}));
     }
@@ -39,7 +58,7 @@ $font-weight:bold;
 
     &:hover,
     &:focus,
-    &:disabled{
+    &:disabled {
       background: transparent;
     }
 
@@ -55,7 +74,7 @@ $font-weight:bold;
       }
     }
 
-    &:disabled{
+    &:disabled {
       border: 1px solid var(--x, var(--#{$default-color}));
       color: var(--x, var(--#{$default-color}));
     }
@@ -65,6 +84,7 @@ $font-weight:bold;
     background: transparent;
     border: 1px solid transparent;
     color: var(--x, var(--#{$default-color}));
+    padding: 0;
 
     &:disabled,
     &:hover,
@@ -73,13 +93,13 @@ $font-weight:bold;
     }
 
     &:not(:disabled) {
-       &:hover {
-         color: var(--light-x, var(--light-#{$default-color}));
-       }
+      &:hover {
+        color: var(--light-x, var(--light-#{$default-color}));
+      }
 
-       &:focus {
-         color: var(--dark-x, var(--dark-#{$default-color}));
-       }
+      &:focus {
+        color: var(--dark-x, var(--dark-#{$default-color}));
+      }
     }
 
     &:disabled {