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

package/src/ui/a/BackgroundGradient/BackgroundGradient.jsx

@@ -0,0 +1,76 @@
+/* @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 (
+    <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/src/ui/a/BackgroundGradient/index.js

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

package/src/ui/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/src/ui/a/Conversation/Conversation.jsx

@@ -28,19 +28,19 @@ const Conversation = ({
   ourColor,
   theirColor,
   children,
+  hasTriangle,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
     import('./styles.scss')
   }, [])
 
-  // const messageColors = { ours: color, theirs: 'main2' }
-
   return (
     <ConversationContext.Provider
       value={{
         ourColor,
         theirColor,
+        hasTriangle,
       }}
     >
       <div
@@ -76,11 +76,13 @@ Conversation.propTypes = {
   /**
    * The React-written, css properties for this element.
    */
-  style     :PropTypes.objectOf(PropTypes.string),
+  style:PropTypes.objectOf(PropTypes.string),
+
   /**
    * The base color to our messages component
    */
-  ourColor  :PropTypes.string,
+  ourColor:PropTypes.string,
+
   /**
    * The base color to their messages component
    */
@@ -94,12 +96,18 @@ Conversation.propTypes = {
    *  The children JSX
    */
   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

package/src/ui/a/Conversation/common/Message/Message.jsx

@@ -23,9 +23,12 @@ const Message = ({
   message,
   sender,
   from,
+  attachment,
+  attachmentIcon,
+  attachmentColor,
   // ...otherProps
 }) => {
-  const { ourColor, theirColor } = useConversation()
+  const { hasTriangle, ourColor, theirColor } = useConversation()
 
   return (
     <div
@@ -36,6 +39,8 @@ const Message = ({
         userClassName,
         `x-${from === 'ours' ? ourColor : theirColor}`,
         from === 'ours' && 'ours',
+        hasTriangle === true ? 'has-triangle' : '',
+        'v1',
       ]
         .filter((e) => e)
         .join(' ')}
@@ -49,11 +54,19 @@ const Message = ({
         <p>
           {message}
         </p>
+        {attachment
+      && (
+      <div className={`attachment y-${attachmentColor}`}>
+        <span className="f-icons">{attachmentIcon}</span>
+        <p className="ml-v">
+          {attachment}
+        </p>
+      </div>
+      )}
       </div>
     </div>
   )
 }
-
 Message.propTypes = {
   /**
    * The HTML id for this element
@@ -65,26 +78,46 @@ Message.propTypes = {
    */
   className:PropTypes.string,
 
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
   /**
    * The message in the conversation
    */
   message:PropTypes.string.isRequired,
+
   /**
    * The sender of the message
    */
-  sender :PropTypes.string.isRequired,
+  sender:PropTypes.string.isRequired,
+
   /**
    * The owner of the message
    */
-  from   :PropTypes.oneOf(['ours', 'theirs']),
+  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/src/ui/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/src/ui/a/OvalIllustration/OvalIllustration.jsx

@@ -0,0 +1,134 @@
+/* @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 (
+    <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
+        && <div className={`oval-background y-${backgroundColor}`} />}
+      <div className="illustration">
+        <img src={src} alt={alt} />
+      </div>
+    </div>
+  )
+}
+
+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/src/ui/a/OvalIllustration/index.js

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

package/src/ui/a/OvalIllustration/styles.scss

@@ -0,0 +1,102 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-clockwise-degree:60deg;
+$default-counter-clockwise-degree:-60deg;
+$default-ellipse-size:30% 43% at 50% 50%;
+
+.#{bem.$base}.oval-illustration {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+
+  &.left {
+    .oval-background {
+      transform: rotate($default-clockwise-degree);
+    }
+
+    .illustration {
+      transform: rotate($default-counter-clockwise-degree);
+
+      > img {
+        transform: rotate($default-clockwise-degree);
+      }
+    }
+  }
+
+  &.right {
+    .oval-background {
+      transform: rotate($default-counter-clockwise-degree);
+    }
+
+    .illustration {
+      transform: rotate($default-clockwise-degree);
+
+      > img {
+        transform: rotate($default-counter-clockwise-degree);
+      }
+    }
+  }
+
+  .oval-background {
+    background: var(--y);
+    clip-path: ellipse($default-ellipse-size);
+    overflow: hidden;
+    position: absolute;
+    z-index: 0;
+  }
+
+  .illustration {
+    clip-path: ellipse($default-ellipse-size);
+    overflow: hidden;
+
+    > img {
+      height: 100%;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+
+  // mobile style
+  @include mixins.media($to:$sm-md) {
+    .oval-background {
+      height: var(--mobile-size);
+      width: var(--mobile-size);
+    }
+
+    .illustration {
+      height: var(--mobile-size);
+      width: var(--mobile-size);
+    }
+  }
+
+  // tablet style
+  @include mixins.media($from:$xs-sm, $to:$sm-md) {
+    .oval-background {
+      height: var(--tablet-size);
+      width: var(--tablet-size);
+    }
+
+    .illustration {
+      height: var(--tablet-size);
+      width: var(--tablet-size);
+    }
+  }
+
+  // desktop style
+  @include mixins.media($from:$sm-md) {
+    .oval-background {
+      height: var(--desktop-size);
+      width: var(--desktop-size);
+    }
+
+    .illustration {
+      height: var(--desktop-size);
+      width: var(--desktop-size);
+    }
+  }
+}

package/src/ui/a/People/People.jsx

@@ -22,8 +22,9 @@ const People = ({
   id,
   className:userClassName,
   style,
-  imageHeightWidth,
+  imageSize,
   children,
+  columnWidth,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
@@ -44,8 +45,9 @@ const People = ({
         .filter((e) => e)
         .join(' ')}
       style={{
-        '--image-height-width':imageHeightWidth,
         ...style,
+        '--image-size'  :imageSize,
+        '--column-width':columnWidth,
       }}
       // {...otherProps}
     >
@@ -78,11 +80,17 @@ People.propTypes = {
   /**
    * The height and width of all the person's image
    */
-  imageHeightWidth:PropTypes.string,
+  imageSize:PropTypes.string,
+
+  /**
+   * The width of the a person's column
+   */
+  columnWidth:PropTypes.string,
 }
 
 People.defaultProps = {
-  imageHeightWidth:'3em',
+  imageSize  :'3em',
+  columnWidth:'12em',
 }
 
 People.Person = Person