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

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) {

package/src/ui/b/Logo/Logo.jsx

@@ -15,7 +15,22 @@ const baseClassName = styleNames.base
 
 const componentClassName = 'logo'
 
-const defaultTargets = [
+const defaultTargetssquare = [
+  {
+    id    :'logo',
+    target:'logo',
+  },
+]
+
+const contentMapSquare = {
+  default:{
+    sprite :'/logo_square.svg',
+    viewBox:'0 0 39 39',
+    targets:defaultTargetssquare,
+  },
+}
+
+const defaultTargetsWithName = [
   {
     id    :'logo_squares',
     target:'logo_squares',
@@ -26,11 +41,11 @@ const defaultTargets = [
   },
 ]
 
-const contentMap = {
+const contentMapWithName = {
   default:{
     sprite :'/logo.svg',
     viewBox:'0 0 156 30',
-    targets:defaultTargets,
+    targets:defaultTargetsWithName,
   },
 }
 
@@ -46,12 +61,14 @@ const Logo = ({
   width,
   variant,
   strokeColor,
+  square,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
     import('./styles.scss')
   }, [])
 
+  const contentMap = square ? contentMapSquare : contentMapWithName
   const svgConfig = useMemo(() => contentMap[variant], [variant])
 
   return (
@@ -117,6 +134,11 @@ Logo.propTypes = {
    * The color of the svg stroke
    */
   strokeColor:PropTypes.string,
+
+  /**
+   * Whether the logo should have a name.
+   */
+  square:PropTypes.bool,
 }
 
 Logo.defaultProps = {
@@ -124,6 +146,7 @@ Logo.defaultProps = {
   height     :'2em',
   variant    :'default',
   strokeColor:'transparent',
+  square     :false,
 }
 
 export default Logo

package/src/ui/c/SocialMediaShareButton/SocialMediaShareButton.jsx

@@ -29,8 +29,10 @@ const SocialMediaShareButton = ({
     import('./styles.scss')
   }, [])
 
-  const { title } = document
-  const link = window.location.href
+  const isServer = typeof window === 'undefined'
+
+  const title = isServer ? '' : document.title
+  const link = isServer ? '' : window.location.href
 
   const defaultsMap = {
     facebook:{

package/stylelint.config.js

@@ -1,24 +1,24 @@
 module.exports = {
-  extends: [
+  extends:[
     'stylelint-config-palantir',
     'stylelint-config-palantir/sass.js',
   ],
-  rules: {
-    indentation: 2,
-    'number-leading-zero': 'never',
-    'at-rule-no-unknown': [true,
+  rules:{
+    indentation          :2,
+    'number-leading-zero':'never',
+    'at-rule-no-unknown' :[true,
       {
-        ignoreAtRules: [
+        ignoreAtRules:[
         // additional scss at-rules:
           'content', 'each', 'else', 'error', 'extend', 'for', 'function', 'if', 'include', 'mixin', 'return', 'use', 'forward',
         ],
       },
     ],
-    'at-rule-empty-line-before': ['always', {
-      except: ['after-same-name', 'inside-block'],
-      ignoreAtRules: ['include', 'mixin', 'function'],
+    'at-rule-empty-line-before':['always', {
+      except       :['after-same-name', 'inside-block'],
+      ignoreAtRules:['include', 'mixin', 'function'],
     }],
-    'order/order': [
+    'order/order':[
       [
         'custom-properties',
         'at-variables',
@@ -34,12 +34,12 @@ module.exports = {
       ],
       { unspecified: 'ignore' },
     ],
-    'property-no-unknown': [
+    'property-no-unknown':[
       true,
       {
-        ignoreProperties: ['text-stroke', 'font-smooth'],
+        ignoreProperties:['text-stroke', 'font-smooth'],
       },
     ],
-    'max-nesting-depth': 5,
+    'max-nesting-depth':5,
   },
 }