@pareto-engineering/design-system 2.0.0-alpha.37 → 2.0.0-alpha.38

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

@@ -45,12 +45,11 @@ var Conversation = _ref => {
   return /*#__PURE__*/React.createElement(_Context.default.Provider, {
     value: {
       ourColor,
-      theirColor,
-      hasTriangle
+      theirColor
     }
   }, /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, "y-".concat(backgroundColor), 'u1'].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, hasTriangle && 'has-triangle', "y-".concat(backgroundColor), 'u1'].filter(e => e).join(' '),
     style: style
   }, children));
 };
@@ -100,7 +99,7 @@ Conversation.defaultProps = {
   backgroundColor: 'background2',
   ourColor: 'background1',
   theirColor: 'background1',
-  hasTriangle: 'false'
+  hasTriangle: false
 };
 Conversation.Message = _common.Message;
 var _default = Conversation;

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

@@ -41,13 +41,12 @@ var Message = _ref => {
 
   } = _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', hasTriangle === true ? 'has-triangle' : '', 'v1'].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, "x-".concat(from === 'ours' ? ourColor : theirColor), from === 'ours' && 'ours', 'v1'].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement("div", {
     className: _bem.default.elementContent

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

@@ -39,51 +39,9 @@ $triangle-after-side:25px;
   // 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;
-
-    .#{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;
-        }
-
-        > img {
-          width: 40px;
-        }
-      }
-    }
-    &.#{bem.$base}.ours {
-      align-self: flex-end;
-    }
-
-    &.has-triangle {
+  &.has-triangle {
+    padding-bottom: calc(#{$default-padding} * 2);
+    .#{bem.$base}.message {
       ::before {
         border-bottom: $triangle-border2;
         border-left: $triangle-border2;
@@ -138,6 +96,52 @@ $triangle-after-side:25px;
         }
       }
     }
+  }
+
+  .#{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;
+
+    .#{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;
+        }
+
+        > img {
+          width: 40px;
+        }
+      }
+    }
+    &.#{bem.$base}.ours {
+      align-self: flex-end;
+    }
+
 
     // mobile style
     @include mixins.media($to:$sm-md) {

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

@@ -29,12 +29,11 @@ const Conversation = ({
   return /*#__PURE__*/React.createElement(ConversationContext.Provider, {
     value: {
       ourColor,
-      theirColor,
-      hasTriangle
+      theirColor
     }
   }, /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `y-${backgroundColor}`, 'u1'].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, hasTriangle && 'has-triangle', `y-${backgroundColor}`, 'u1'].filter(e => e).join(' '),
     style: style
   }, children));
 };
@@ -84,7 +83,7 @@ Conversation.defaultProps = {
   backgroundColor: 'background2',
   ourColor: 'background1',
   theirColor: 'background1',
-  hasTriangle: 'false'
+  hasTriangle: false
 };
 Conversation.Message = Message;
 export default Conversation;

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

@@ -23,13 +23,12 @@ const Message = ({
 
 }) => {
   const {
-    hasTriangle,
     ourColor,
     theirColor
   } = useConversation();
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${from === 'ours' ? ourColor : theirColor}`, from === 'ours' && 'ours', hasTriangle === true ? 'has-triangle' : '', 'v1'].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${from === 'ours' ? ourColor : theirColor}`, from === 'ours' && 'ours', 'v1'].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement("div", {
     className: styleNames.elementContent

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

@@ -39,51 +39,9 @@ $triangle-after-side:25px;
   // 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;
-
-    .#{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;
-        }
-
-        > img {
-          width: 40px;
-        }
-      }
-    }
-    &.#{bem.$base}.ours {
-      align-self: flex-end;
-    }
-
-    &.has-triangle {
+  &.has-triangle {
+    padding-bottom: calc(#{$default-padding} * 2);
+    .#{bem.$base}.message {
       ::before {
         border-bottom: $triangle-border2;
         border-left: $triangle-border2;
@@ -138,6 +96,52 @@ $triangle-after-side:25px;
         }
       }
     }
+  }
+
+  .#{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;
+
+    .#{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;
+        }
+
+        > img {
+          width: 40px;
+        }
+      }
+    }
+    &.#{bem.$base}.ours {
+      align-self: flex-end;
+    }
+
 
     // mobile style
     @include mixins.media($to:$sm-md) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.37",
+  "version": "2.0.0-alpha.38",
   "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.15",
+    "@pareto-engineering/assets": "^2.0.0-alpha.16",
     "@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

@@ -711,10 +711,10 @@ exports[`Storyshots a/Conversation With Attachment 1`] = `
 
 exports[`Storyshots a/Conversation With Triangle 1`] = `
 <div
-  className="base conversation y-background2 u1"
+  className="base conversation has-triangle y-background2 u1"
 >
   <div
-    className="base message x-background1 has-triangle v1"
+    className="base message x-background1 v1"
   >
     <div
       className="elementContent"
@@ -731,7 +731,7 @@ exports[`Storyshots a/Conversation With Triangle 1`] = `
     </div>
   </div>
   <div
-    className="base message x-background1 ours has-triangle v1"
+    className="base message x-background1 ours v1"
   >
     <div
       className="elementContent"
@@ -748,7 +748,7 @@ exports[`Storyshots a/Conversation With Triangle 1`] = `
     </div>
   </div>
   <div
-    className="base message x-background1 has-triangle v1"
+    className="base message x-background1 v1"
   >
     <div
       className="elementContent"
@@ -765,7 +765,7 @@ exports[`Storyshots a/Conversation With Triangle 1`] = `
     </div>
   </div>
   <div
-    className="base message x-background1 ours has-triangle v1"
+    className="base message x-background1 ours v1"
   >
     <div
       className="elementContent"
@@ -2251,7 +2251,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  in 8 months
+  in 7 months
 </p>
 `;
 

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

@@ -40,7 +40,6 @@ const Conversation = ({
       value={{
         ourColor,
         theirColor,
-        hasTriangle,
       }}
     >
       <div
@@ -49,6 +48,7 @@ const Conversation = ({
           baseClassName,
           componentClassName,
           userClassName,
+          hasTriangle && 'has-triangle',
           `y-${backgroundColor}`,
           'u1',
         ]
@@ -107,7 +107,7 @@ Conversation.defaultProps = {
   backgroundColor:'background2',
   ourColor       :'background1',
   theirColor     :'background1',
-  hasTriangle    :'false',
+  hasTriangle    :false,
 }
 
 Conversation.Message = Message

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

@@ -28,7 +28,7 @@ const Message = ({
   attachmentColor,
   // ...otherProps
 }) => {
-  const { hasTriangle, ourColor, theirColor } = useConversation()
+  const { ourColor, theirColor } = useConversation()
 
   return (
     <div
@@ -39,7 +39,6 @@ const Message = ({
         userClassName,
         `x-${from === 'ours' ? ourColor : theirColor}`,
         from === 'ours' && 'ours',
-        hasTriangle === true ? 'has-triangle' : '',
         'v1',
       ]
         .filter((e) => e)

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

@@ -39,51 +39,9 @@ $triangle-after-side:25px;
   // 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;
-
-    .#{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;
-        }
-
-        > img {
-          width: 40px;
-        }
-      }
-    }
-    &.#{bem.$base}.ours {
-      align-self: flex-end;
-    }
-
-    &.has-triangle {
+  &.has-triangle {
+    padding-bottom: calc(#{$default-padding} * 2);
+    .#{bem.$base}.message {
       ::before {
         border-bottom: $triangle-border2;
         border-left: $triangle-border2;
@@ -138,6 +96,52 @@ $triangle-after-side:25px;
         }
       }
     }
+  }
+
+  .#{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;
+
+    .#{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;
+        }
+
+        > img {
+          width: 40px;
+        }
+      }
+    }
+    &.#{bem.$base}.ours {
+      align-self: flex-end;
+    }
+
 
     // mobile style
     @include mixins.media($to:$sm-md) {