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

package/dist/es/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/es/b/Button/styles.scss

@@ -13,24 +13,23 @@ $default-margin:.5em;
   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{
+  &.arrow-right {
     &::after {
-      content: "L";
-      font-family: "icons";
-      vertical-align: middle;
+      content: "-->";
       margin-left: $default-margin;
     }
   }
 
-  &.arrow-left{
+  &.arrow-left {
     &::before {
-      content: "H";
-      font-family: "icons";
-      vertical-align: middle;
+      content: "<--";
       margin-right: $default-margin;
     }
   }
@@ -41,6 +40,7 @@ $default-margin:.5em;
     &:hover {
       background: var(--light-x, var(--light-#{$default-color}));
     }
+
     &:focus {
       background: var(--dark-x, var(--dark-#{$default-color}));
     }
@@ -58,7 +58,7 @@ $default-margin:.5em;
 
     &:hover,
     &:focus,
-    &:disabled{
+    &:disabled {
       background: transparent;
     }
 
@@ -74,7 +74,7 @@ $default-margin:.5em;
       }
     }
 
-    &:disabled{
+    &:disabled {
       border: 1px solid var(--x, var(--#{$default-color}));
       color: var(--x, var(--#{$default-color}));
     }
@@ -83,8 +83,8 @@ $default-margin:.5em;
   &.#{bem.$modifier-simple} {
     background: transparent;
     border: 1px solid transparent;
-    padding: 0;
     color: var(--x, var(--#{$default-color}));
+    padding: 0;
 
     &:disabled,
     &:hover,
@@ -93,13 +93,13 @@ $default-margin:.5em;
     }
 
     &: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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.13",
+  "version": "2.0.0-alpha.14",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -79,7 +79,7 @@
     "stylelint-config-palantir": "^5.1.0"
   },
   "dependencies": {
-    "@pareto-engineering/assets": "^2.0.0-alpha.5",
+    "@pareto-engineering/assets": "^2.0.0-alpha.8",
     "@pareto-engineering/bem": "^0.1.5",
     "@pareto-engineering/styles": "^2.0.0-alpha.8",
     "date-fns": "^2.22.1",

package/src/__snapshots__/Storyshots.test.js.snap

@@ -114,10 +114,10 @@ exports[`Storyshots a/ContentCard Content After 1`] = `
         </p>
       </div>
       <div
-        className="base conversation illustration y-background u1"
+        className="base conversation illustration y-background2 u1"
       >
         <div
-          className="base message x-main2 ours"
+          className="base message x-background1 ours v1"
         >
           <div
             className="elementContent"
@@ -134,7 +134,7 @@ exports[`Storyshots a/ContentCard Content After 1`] = `
           </div>
         </div>
         <div
-          className="base message x-background2"
+          className="base message x-background1 v1"
         >
           <div
             className="elementContent"
@@ -151,7 +151,7 @@ exports[`Storyshots a/ContentCard Content After 1`] = `
           </div>
         </div>
         <div
-          className="base message x-main2 ours"
+          className="base message x-background1 ours v1"
         >
           <div
             className="elementContent"
@@ -228,10 +228,10 @@ exports[`Storyshots a/ContentCard Layout Left 1`] = `
         </p>
       </div>
       <div
-        className="base conversation illustration y-background u1"
+        className="base conversation illustration y-background2 u1"
       >
         <div
-          className="base message x-main2 ours"
+          className="base message x-background1 ours v1"
         >
           <div
             className="elementContent"
@@ -248,7 +248,7 @@ exports[`Storyshots a/ContentCard Layout Left 1`] = `
           </div>
         </div>
         <div
-          className="base message x-background2"
+          className="base message x-background1 v1"
         >
           <div
             className="elementContent"
@@ -265,7 +265,7 @@ exports[`Storyshots a/ContentCard Layout Left 1`] = `
           </div>
         </div>
         <div
-          className="base message x-main2 ours"
+          className="base message x-background1 ours v1"
         >
           <div
             className="elementContent"
@@ -317,10 +317,10 @@ exports[`Storyshots a/ContentCard Layout Right 1`] = `
         </p>
       </div>
       <div
-        className="base conversation illustration y-background u1"
+        className="base conversation illustration y-background2 u1"
       >
         <div
-          className="base message x-main2 ours"
+          className="base message x-background1 ours v1"
         >
           <div
             className="elementContent"
@@ -337,7 +337,7 @@ exports[`Storyshots a/ContentCard Layout Right 1`] = `
           </div>
         </div>
         <div
-          className="base message x-background2"
+          className="base message x-background1 v1"
         >
           <div
             className="elementContent"
@@ -354,7 +354,7 @@ exports[`Storyshots a/ContentCard Layout Right 1`] = `
           </div>
         </div>
         <div
-          className="base message x-main2 ours"
+          className="base message x-background1 ours v1"
         >
           <div
             className="elementContent"
@@ -378,10 +378,10 @@ exports[`Storyshots a/ContentCard Layout Right 1`] = `
 
 exports[`Storyshots a/Conversation Base 1`] = `
 <div
-  className="base conversation y-background u1"
+  className="base conversation y-background2 u1"
 >
   <div
-    className="base message x-background2"
+    className="base message x-background1 v1"
   >
     <div
       className="elementContent"
@@ -398,7 +398,7 @@ exports[`Storyshots a/Conversation Base 1`] = `
     </div>
   </div>
   <div
-    className="base message x-main2 ours"
+    className="base message x-background1 ours v1"
   >
     <div
       className="elementContent"
@@ -410,12 +410,12 @@ exports[`Storyshots a/Conversation Base 1`] = `
         :
       </p>
       <p>
-        Hi Humbl, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.
+        Hi Morgan! Here is the database we prepared for you.
       </p>
     </div>
   </div>
   <div
-    className="base message x-background2"
+    className="base message x-background1 v1"
   >
     <div
       className="elementContent"
@@ -431,6 +431,201 @@ exports[`Storyshots a/Conversation Base 1`] = `
       </p>
     </div>
   </div>
+  <div
+    className="base message x-background1 ours v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        CAMILLE
+        :
+      </p>
+      <p>
+        Hi Morgan! Here is the database we prepared for you.
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Conversation With Attachment 1`] = `
+<div
+  className="base conversation y-background2 u1"
+>
+  <div
+    className="base message x-background1 v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        HUMBL
+        :
+      </p>
+      <p>
+        Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.
+      </p>
+    </div>
+  </div>
+  <div
+    className="base message x-background1 ours v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        CAMILLE
+        :
+      </p>
+      <p>
+        Hi Morgan! Here is the database we prepared for you.
+      </p>
+      <div
+        className="attachment y-main4"
+      >
+        <span
+          className="f-icons"
+        >
+          A
+        </span>
+        <p
+          className="ml-v"
+        >
+          spreadsheet.xlsx
+        </p>
+      </div>
+    </div>
+  </div>
+  <div
+    className="base message x-background1 v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        HUMBL
+        :
+      </p>
+      <p>
+        Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.
+      </p>
+    </div>
+  </div>
+  <div
+    className="base message x-background1 ours v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        CAMILLE
+        :
+      </p>
+      <p>
+        Hi Morgan! Here is the database we prepared for you.
+      </p>
+      <div
+        className="attachment y-main4"
+      >
+        <span
+          className="f-icons"
+        >
+          A
+        </span>
+        <p
+          className="ml-v"
+        >
+          spreadsheet.xlsx
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Conversation With Triangle 1`] = `
+<div
+  className="base conversation y-background2 u1"
+>
+  <div
+    className="base message x-background1 has-triangle v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        HUMBL
+        :
+      </p>
+      <p>
+        Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.
+      </p>
+    </div>
+  </div>
+  <div
+    className="base message x-background1 ours has-triangle v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        CAMILLE
+        :
+      </p>
+      <p>
+        Hi Morgan! Here is the database we prepared for you.
+      </p>
+    </div>
+  </div>
+  <div
+    className="base message x-background1 has-triangle v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        HUMBL
+        :
+      </p>
+      <p>
+        Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.
+      </p>
+    </div>
+  </div>
+  <div
+    className="base message x-background1 ours has-triangle v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        CAMILLE
+        :
+      </p>
+      <p>
+        Hi Morgan! Here is the database we prepared for you.
+      </p>
+    </div>
+  </div>
 </div>
 `;
 

package/src/local.scss

@@ -10,5 +10,6 @@
 html {
   font-family: var(--font-default);
   font-size: 18px;
+  font-feature-settings:'liga' on;
 }
 

package/src/stories/a/BackgroundGradient.stories.jsx

@@ -13,9 +13,8 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    verticalAlign:{ control: 'select' },
-    height       :{ control: 'text' },
-    color        :{ control: 'text' },
+    height:{ control: 'text' },
+    color :{ control: 'text' },
   },
 }