@pareto-engineering/design-system 2.0.0-alpha.2 → 2.0.0-alpha.20

package/dist/cjs/a/AnimatedCounter/AnimatedCounter.js

@@ -35,28 +35,29 @@ var AnimatedCounter = _ref => {
     style,
     color,
     number,
-    unit,
-    description,
-    descriptionPosition,
-    unitPosition,
+    before,
+    after,
     delay // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
+  var countDecimals = (0, React.useCallback)(value => {
+    if (value % 1 !== 0) return value.toString().split('.')[1].length;
+    return 0;
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, "x-".concat(color)].filter(e => e).join(' '),
     style: style // {...otherProps}
 
-  }, descriptionPosition === 'top' && /*#__PURE__*/React.createElement("p", {
-    className: "info top-description uc s-1 md-s0"
-  }, description), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "count s3"
-  }, unitPosition === 'before' && /*#__PURE__*/React.createElement("span", null, unit), /*#__PURE__*/React.createElement(_reactCountup.default, {
+  }, before && /*#__PURE__*/React.createElement("span", null, before), /*#__PURE__*/React.createElement(_reactCountup.default, {
     end: number,
     delay: delay,
+    decimals: countDecimals(number),
     redraw: true
   }, _ref2 => {
     var {
@@ -69,9 +70,7 @@ var AnimatedCounter = _ref => {
     }, /*#__PURE__*/React.createElement("span", {
       ref: countUpRef
     }));
-  }), unitPosition === 'after' && /*#__PURE__*/React.createElement("span", null, unit)), descriptionPosition === 'bottom' && /*#__PURE__*/React.createElement("p", {
-    className: "info uc s-1 md-s0 v50 mt-v"
-  }, description));
+  }), after && /*#__PURE__*/React.createElement("span", null, after)));
 };
 
 AnimatedCounter.propTypes = {
@@ -101,34 +100,22 @@ AnimatedCounter.propTypes = {
   number: _propTypes.default.number,
 
   /**
-   *  The review count unit
+   *  The unit before the number
    */
-  unit: _propTypes.default.string,
+  before: _propTypes.default.string,
 
   /**
-   *  The review description
+   *  The unit after the number
    */
-  description: _propTypes.default.string,
+  after: _propTypes.default.string,
 
   /**
    *  react counter delay
    */
-  delay: _propTypes.default.number,
-
-  /**
-   *  If the animated counter description should be at the top
-   */
-  descriptionPosition: _propTypes.default.oneOf(['top', 'bottom']),
-
-  /**
-   * If the unit should be before or after the animated numbers
-   */
-  unitPosition: _propTypes.default.string
+  delay: _propTypes.default.number
 };
 AnimatedCounter.defaultProps = {
-  color: 'main1',
-  descriptionPosition: 'bottom',
-  unitPosition: 'after'
+  color: 'main1'
 };
 var _default = AnimatedCounter;
 exports.default = _default;

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

@@ -1,24 +1,16 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
-
+//@use "@aztlan/stylebook/src/mixins";
+//@use "@aztlan/stylebook/src/globals" as *;
 
 .#{bem.$base}.animated-counter {
-  align-items: center;
   display: flex;
-  flex-direction: column;
+  justify-content: center;
 
   .count {
     color: var(--x);
   }
-
-  .top-description {
-    margin-bottom: .5em;
-  }
-
-  .info {
-    color: var(--metadata);
-  }
 }
 
 

package/dist/cjs/a/{RatingsInput/common/Rating/Rating.js → BackgroundGradient/BackgroundGradient.js}

@@ -9,59 +9,48 @@ var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _formik = require("formik");
-
 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; }
 
-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); }
-
 // Local Definitions
 var baseClassName = _bem.default.base;
-var componentClassName = 'rating';
+var componentClassName = 'background-gradient';
 /**
  * This is the component description.
  */
 
-var Rating = _ref => {
+var BackgroundGradient = _ref => {
   var {
     id,
     className: userClassName,
     style,
-    value,
-    name,
-    ratingId,
-    hover,
-    setHover,
-    activeBackgroundColor,
-    inactiveBackgroundColor // ...otherProps
+    height // ...otherProps
 
   } = _ref;
-  var [field] = (0, _formik.useField)(name);
+  (0, React.useLayoutEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, "x-".concat(activeBackgroundColor), "y-".concat(inactiveBackgroundColor)].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement("label", {
-    htmlFor: ratingId,
-    onMouseEnter: () => setHover(value),
-    onMouseLeave: () => setHover(null)
-  }, ' ', /*#__PURE__*/React.createElement("span", {
-    className: ['f-icons', value <= (hover || Number(field.value)) ? 'c-x' : 'c-dark-y'].filter(e => e).join(' ')
-  }, "[")), /*#__PURE__*/React.createElement("input", _extends({}, field, {
-    type: "radio",
-    id: ratingId,
-    name: name,
-    value: value
-  })));
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      '--gradient-height': height
+    })
+  });
 };
 
-Rating.propTypes = {
+BackgroundGradient.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -78,43 +67,11 @@ Rating.propTypes = {
   style: _propTypes.default.objectOf(_propTypes.default.string),
 
   /**
-   * The value of each an every rating star
-   */
-  value: _propTypes.default.number,
-
-  /**
-   * The current hover value
-   */
-  hover: _propTypes.default.number,
-
-  /**
-   * Function to update the hover value
-   */
-  setHover: _propTypes.default.func,
-
-  /**
-   * Unique Id for each rating star
-   */
-  ratingId: _propTypes.default.string,
-
-  /**
-   * Name of the rating input
-   */
-  name: _propTypes.default.string,
-
-  /**
-   * The start rating backgriund color when hovered or clicked
-   */
-  activeBackgroundColor: _propTypes.default.string,
-
-  /**
-   * The start rating backgriund color when not hovered and not clicked
+   * The height of the shape.
    */
-  inactiveBackgroundColor: _propTypes.default.string
+  height: _propTypes.default.string
 };
-Rating.defaultProps = {
-  activeBackgroundColor: 'secondary2',
-  inactiveBackgroundColor: 'background'
+BackgroundGradient.defaultProps = {// someProp: false,
 };
-var _default = Rating;
+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,52 +1,149 @@
 /* @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;
+  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;
+      }
+
+      .attachment {
+        align-self: baseline;
+        background-color: var(--y);
+        display: flex;
+        flex-direction: row;
+        padding: .5em 1em;
 
-    .#{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;
-
-        .#{bem.$element-content} {
-            display: flex;
-            flex-direction: column;
-
-            >p {
-                color: var(--on-x);
-            }
-
-            .sender {
-                font-weight: 800;
-                margin-bottom: .5em;
-            }
+        > 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;
+      }
+    }
+  }
+}