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

package/dist/es/a/AnimatedCounter/AnimatedCounter.js

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useLayoutEffect } from 'react';
+import { useLayoutEffect, useCallback } from 'react';
 import CountUp from 'react-countup';
 import VisibilitySensor from 'react-visibility-sensor';
 import PropTypes from 'prop-types';
@@ -18,28 +18,29 @@ const AnimatedCounter = ({
   style,
   color,
   number,
-  unit,
-  description,
-  descriptionPosition,
-  unitPosition,
+  before,
+  after,
   delay // ...otherProps
 
 }) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
+  const countDecimals = 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-${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(CountUp, {
+  }, before && /*#__PURE__*/React.createElement("span", null, before), /*#__PURE__*/React.createElement(CountUp, {
     end: number,
     delay: delay,
+    decimals: countDecimals(number),
     redraw: true
   }, ({
     countUpRef,
@@ -49,9 +50,7 @@ const AnimatedCounter = ({
     delayedCall: true
   }, /*#__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 = {
@@ -81,33 +80,21 @@ AnimatedCounter.propTypes = {
   number: PropTypes.number,
 
   /**
-   *  The review count unit
+   *  The unit before the number
    */
-  unit: PropTypes.string,
+  before: PropTypes.string,
 
   /**
-   *  The review description
+   *  The unit after the number
    */
-  description: PropTypes.string,
+  after: PropTypes.string,
 
   /**
    *  react counter delay
    */
-  delay: PropTypes.number,
-
-  /**
-   *  If the animated counter description should be at the top
-   */
-  descriptionPosition: PropTypes.oneOf(['top', 'bottom']),
-
-  /**
-   * If the unit should be before or after the animated numbers
-   */
-  unitPosition: PropTypes.string
+  delay: PropTypes.number
 };
 AnimatedCounter.defaultProps = {
-  color: 'main1',
-  descriptionPosition: 'bottom',
-  unitPosition: 'after'
+  color: 'main1'
 };
 export default AnimatedCounter;

package/dist/es/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/es/a/BackgroundGradient/BackgroundGradient.js

@@ -0,0 +1,55 @@
+/* @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
+
+const baseClassName = styleNames.base;
+const componentClassName = 'background-gradient';
+/**
+ * This is the component description.
+ */
+
+const BackgroundGradient = ({
+  id,
+  className: userClassName,
+  style,
+  height // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: { ...style,
+      '--gradient-height': height
+    }
+  });
+};
+
+BackgroundGradient.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 height of the shape.
+   */
+  height: PropTypes.string
+};
+BackgroundGradient.defaultProps = {// someProp: false,
+};
+export default BackgroundGradient;

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

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

package/dist/es/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/es/a/Conversation/Conversation.js

@@ -19,17 +19,18 @@ const Conversation = ({
   backgroundColor,
   ourColor,
   theirColor,
-  children // ...otherProps
+  children,
+  hasTriangle // ...otherProps
 
 }) => {
   useLayoutEffect(() => {
     import("./styles.scss");
-  }, []); // const messageColors = { ours: color, theirs: 'main2' }
-
+  }, []);
   return /*#__PURE__*/React.createElement(ConversationContext.Provider, {
     value: {
       ourColor,
-      theirColor
+      theirColor,
+      hasTriangle
     }
   }, /*#__PURE__*/React.createElement("div", {
     id: id,
@@ -72,12 +73,18 @@ Conversation.propTypes = {
   /**
    *  The children JSX
    */
-  children: PropTypes.node
+  children: PropTypes.node,
+
+  /**
+   * whether to add triangle to bubble chats
+   */
+  hasTriangle: PropTypes.bool
 };
 Conversation.defaultProps = {
-  backgroundColor: 'background',
-  ourColor: 'main2',
-  theirColor: 'background2'
+  backgroundColor: 'background2',
+  ourColor: 'background1',
+  theirColor: 'background1',
+  hasTriangle: 'false'
 };
 Conversation.Message = Message;
 export default Conversation;

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

@@ -16,22 +16,32 @@ const Message = ({
   style,
   message,
   sender,
-  from // ...otherProps
+  from,
+  attachment,
+  attachmentIcon,
+  attachmentColor // ...otherProps
 
 }) => {
   const {
+    hasTriangle,
     ourColor,
     theirColor
   } = useConversation();
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${from === 'ours' ? ourColor : theirColor}`, from === 'ours' && 'ours'].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${from === 'ours' ? ourColor : theirColor}`, from === 'ours' && 'ours', hasTriangle === true ? 'has-triangle' : '', 'v1'].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)));
+  }, sender, ":"), /*#__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))));
 };
 
 Message.propTypes = {
@@ -45,6 +55,11 @@ Message.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string),
+
   /**
    * The message in the conversation
    */
@@ -61,11 +76,23 @@ Message.propTypes = {
   from: PropTypes.oneOf(['ours', 'theirs']),
 
   /**
-   * The React-written, css properties for this element.
+   * name of the attachment file
+   */
+  attachment: PropTypes.string,
+
+  /**
+   * source of the attachment icon
+   */
+  attachmentIcon: PropTypes.string,
+
+  /**
+   * background color of the attachment box
    */
-  style: PropTypes.objectOf(PropTypes.string)
+  attachmentColor: PropTypes.string
 };
 Message.defaultProps = {
-  from: 'theirs'
+  from: 'theirs',
+  attachmentIcon: 'A',
+  attachmentColor: 'main4'
 };
 export default Message;

package/dist/es/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;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,111 @@
+/* @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
+
+const baseClassName = styleNames.base;
+const componentClassName = 'oval-illustration';
+/**
+ * This is the component description.
+ */
+
+const OvalIllustration = ({
+  id,
+  className: userClassName,
+  style,
+  layout,
+  src,
+  alt,
+  ovalBackground,
+  backgroundColor,
+  mobileSize,
+  tabletSize,
+  desktopSize // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, layout].filter(e => e).join(' '),
+    style: { ...style,
+      '--mobile-size': mobileSize,
+      '--tablet-size': tabletSize,
+      '--desktop-size': desktopSize
+    } // {...otherProps}
+
+  }, ovalBackground && /*#__PURE__*/React.createElement("div", {
+    className: `oval-background y-${backgroundColor}`
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "illustration"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: src,
+    alt: alt
+  })));
+};
+
+OvalIllustration.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),
+
+  /**
+   * side definition of the illustration
+   */
+  layout: PropTypes.oneOf(['left', 'right']),
+
+  /**
+   * image url
+   */
+  src: PropTypes.string,
+
+  /**
+   * alt tag for the image
+   */
+  alt: PropTypes.string,
+
+  /**
+   * whether to have a oval shape as background
+   */
+  ovalBackground: PropTypes.bool,
+
+  /**
+   * background color of the oval behind the image
+   */
+  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',
+  mobileSize: '20em',
+  tabletSize: '35em',
+  desktopSize: '45em'
+};
+export default OvalIllustration;

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

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