@pareto-engineering/design-system 2.0.0-alpha.28 → 2.0.0-alpha.29

package/dist/cjs/b/Logo/Logo.js

@@ -48,7 +48,8 @@ var Logo = _ref => {
     color,
     height,
     width,
-    variant // ...otherProps
+    variant,
+    strokeColor // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
@@ -62,7 +63,7 @@ var Logo = _ref => {
     targets: svgConfig.targets,
     sprite: svgConfig.sprite,
     id: id,
-    className: [baseClassName, componentClassName, "x-".concat(color), userClassName].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, "x-".concat(color), "y-".concat(strokeColor), userClassName].filter(e => e).join(' '),
     style: style // {...otherProps}
 
   });
@@ -102,12 +103,18 @@ Logo.propTypes = {
   /**
    * The variant to display. At the moment only `beta` is available.
    */
-  variant: _propTypes.default.string
+  variant: _propTypes.default.string,
+
+  /**
+   * The color of the svg stroke
+   */
+  strokeColor: _propTypes.default.string
 };
 Logo.defaultProps = {
   color: 'paragraph',
   height: '2em',
-  variant: 'default'
+  variant: 'default',
+  strokeColor: 'transparent'
 };
 var _default = Logo;
 exports.default = _default;

package/dist/es/b/Logo/Logo.js

@@ -32,7 +32,8 @@ const Logo = ({
   color,
   height,
   width,
-  variant // ...otherProps
+  variant,
+  strokeColor // ...otherProps
 
 }) => {
   useLayoutEffect(() => {
@@ -46,7 +47,7 @@ const Logo = ({
     targets: svgConfig.targets,
     sprite: svgConfig.sprite,
     id: id,
-    className: [baseClassName, componentClassName, `x-${color}`, userClassName].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, `x-${color}`, `y-${strokeColor}`, userClassName].filter(e => e).join(' '),
     style: style // {...otherProps}
 
   });
@@ -86,11 +87,17 @@ Logo.propTypes = {
   /**
    * The variant to display. At the moment only `beta` is available.
    */
-  variant: PropTypes.string
+  variant: PropTypes.string,
+
+  /**
+   * The color of the svg stroke
+   */
+  strokeColor: PropTypes.string
 };
 Logo.defaultProps = {
   color: 'paragraph',
   height: '2em',
-  variant: 'default'
+  variant: 'default',
+  strokeColor: 'transparent'
 };
 export default Logo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.28",
+  "version": "2.0.0-alpha.29",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

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

@@ -6569,7 +6569,7 @@ exports[`Storyshots b/Card Group 1`] = `
 
 exports[`Storyshots b/Logo Base 1`] = `
 <svg
-  className="base svg base logo x-paragraph"
+  className="base svg base logo x-paragraph y-transparent"
   height="2em"
   preserveAspectRatio="xMinYMin meet"
   version="1.1"
@@ -6602,7 +6602,7 @@ exports[`Storyshots b/Logo Base 1`] = `
 exports[`Storyshots b/Logo Color 1`] = `
 Array [
   <svg
-    className="base svg base logo x-main1"
+    className="base svg base logo x-main1 y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -6631,7 +6631,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-main2"
+    className="base svg base logo x-main2 y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -6660,7 +6660,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-main3"
+    className="base svg base logo x-main3 y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -6689,7 +6689,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-main4"
+    className="base svg base logo x-main4 y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -6718,7 +6718,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-success"
+    className="base svg base logo x-success y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -6747,7 +6747,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-warning"
+    className="base svg base logo x-warning y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -6776,7 +6776,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-error"
+    className="base svg base logo x-error y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -6805,7 +6805,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-background1"
+    className="base svg base logo x-background1 y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -6834,7 +6834,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-background2"
+    className="base svg base logo x-background2 y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -6863,7 +6863,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-background3"
+    className="base svg base logo x-background3 y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -6892,7 +6892,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-background4"
+    className="base svg base logo x-background4 y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -6921,7 +6921,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-background5"
+    className="base svg base logo x-background5 y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -6950,7 +6950,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-background6"
+    className="base svg base logo x-background6 y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -6979,7 +6979,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-heading"
+    className="base svg base logo x-heading y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -7008,7 +7008,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-paragraph"
+    className="base svg base logo x-paragraph y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -7037,7 +7037,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-subtitle"
+    className="base svg base logo x-subtitle y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -7066,7 +7066,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-metadata"
+    className="base svg base logo x-metadata y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -7095,7 +7095,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-link"
+    className="base svg base logo x-link y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -7124,7 +7124,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-navlink"
+    className="base svg base logo x-navlink y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -7153,7 +7153,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-twitter"
+    className="base svg base logo x-twitter y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -7182,7 +7182,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-facebook"
+    className="base svg base logo x-facebook y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -7211,7 +7211,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-instagram"
+    className="base svg base logo x-instagram y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -7240,7 +7240,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-google"
+    className="base svg base logo x-google y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -7269,7 +7269,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-black"
+    className="base svg base logo x-black y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -7298,7 +7298,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-anchor"
+    className="base svg base logo x-anchor y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -7327,7 +7327,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-grey"
+    className="base svg base logo x-grey y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -7356,7 +7356,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-pearl"
+    className="base svg base logo x-pearl y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -7385,7 +7385,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-white"
+    className="base svg base logo x-white y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -8148,7 +8148,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
     >
       <header>
         <svg
-          className="base svg base logo x-paragraph"
+          className="base svg base logo x-paragraph y-transparent"
           height="2em"
           preserveAspectRatio="xMinYMin meet"
           version="1.1"
@@ -8280,7 +8280,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             Welcome
           </span>
           <svg
-            className="base svg base logo x-paragraph xs-h sm-h"
+            className="base svg base logo x-paragraph y-transparent xs-h sm-h"
             height="2em"
             preserveAspectRatio="xMinYMin meet"
             version="1.1"
@@ -8523,7 +8523,7 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
           Welcome
         </span>
         <svg
-          className="base svg base logo x-paragraph xs-h sm-h"
+          className="base svg base logo x-paragraph y-transparent xs-h sm-h"
           height="2em"
           preserveAspectRatio="xMinYMin meet"
           version="1.1"
@@ -8792,7 +8792,7 @@ exports[`Storyshots c/ContentSlides With Background Shape 1`] = `
           Welcome
         </span>
         <svg
-          className="base svg base logo x-paragraph xs-h sm-h"
+          className="base svg base logo x-paragraph y-transparent xs-h sm-h"
           height="2em"
           preserveAspectRatio="xMinYMin meet"
           version="1.1"

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

@@ -45,6 +45,7 @@ const Logo = ({
   height,
   width,
   variant,
+  strokeColor,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
@@ -65,6 +66,7 @@ const Logo = ({
         baseClassName,
         componentClassName,
         `x-${color}`,
+        `y-${strokeColor}`,
         userClassName,
       ]
         .filter((e) => e)
@@ -110,12 +112,18 @@ Logo.propTypes = {
    * The variant to display. At the moment only `beta` is available.
    */
   variant:PropTypes.string,
+
+  /**
+   * The color of the svg stroke
+   */
+  strokeColor:PropTypes.string,
 }
 
 Logo.defaultProps = {
-  color  :'paragraph',
-  height :'2em',
-  variant:'default',
+  color      :'paragraph',
+  height     :'2em',
+  variant    :'default',
+  strokeColor:'transparent',
 }
 
 export default Logo