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

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

@@ -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/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/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,
   },
 }