@pareto-engineering/design-system 2.0.0-alpha.36 → 2.0.0-alpha.39

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>
 `;
 
@@ -7571,6 +7571,543 @@ Array [
 ]
 `;
 
+exports[`Storyshots b/Logo Square 1`] = `
+Array [
+  <svg
+    className="base svg base logo x-main1 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-main2 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-main3 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-main4 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-success y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-warning y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-error y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-background1 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-background2 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-background3 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-background4 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-background5 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-background6 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-heading y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-paragraph y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-subtitle y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-metadata y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-link y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-navlink y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-twitter y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-facebook y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-instagram y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-google y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-black y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-anchor y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-grey y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-pearl y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-white y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+]
+`;
+
 exports[`Storyshots b/Metrics Base 1`] = `
 <div
   className="base metrics"

package/src/stories/b/Logo.stories.jsx

@@ -24,6 +24,14 @@ export const Base = () => (
 
 export const Color = () => ALL_COLORS.map((color) => <Logo color={color} key={color} />)
 
+export const Square = () => ALL_COLORS.map((color) => (
+  <Logo
+    square
+    color={color}
+    key={color}
+  />
+))
+
 // export const Animated = () => (
 //   <Logo animated />
 // )

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)