@pareto-engineering/design-system 2.0.0-alpha.25 → 2.0.0-alpha.26

package/dist/cjs/a/SVG/SVG.js

@@ -19,6 +19,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -53,10 +59,10 @@ var SVG = _ref => {
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   });
-  var useSVGProps = (0, React.useMemo)(() => ({
+  var useSVGProps = (0, React.useMemo)(() => _objectSpread(_objectSpread({
     className: useClassName,
-    source,
-    target,
+    source
+  }, target), {}, {
     sprite,
     strokeWidth
   }), [useClassName, source, target, strokeWidth, sprite]);

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

@@ -22,29 +22,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 // Local Definitions
 var baseClassName = _bem.default.base;
 var componentClassName = 'logo';
-var defaultTargets = [{
-  id: 'logo__p',
-  target: 'logo__p'
-}, {
-  id: 'logo__areto',
-  target: 'logo__areto'
-}, {
-  id: 'logo__t',
-  target: 'logo__t'
-}];
+var defaultTarget = {
+  id: 'logo',
+  target: 'logo'
+};
 var contentMap = {
   default: {
-    sprite: '/logo_parts.svg',
-    viewBox: '0 0 688 250',
-    targets: defaultTargets
-  },
-  beta: {
-    sprite: '/logo_parts_beta.svg',
-    viewBox: '0 0 1000 300',
-    targets: [...defaultTargets, {
-      id: 'logo__beta',
-      target: 'logo__beta'
-    }]
+    sprite: '/logo.svg',
+    viewBox: '0 0 39 39',
+    target: defaultTarget
   }
 };
 /**
@@ -57,8 +43,6 @@ var Logo = _ref => {
     className: userClassName,
     style,
     color,
-    animated,
-    loop,
     height,
     width,
     variant // ...otherProps
@@ -72,12 +56,11 @@ var Logo = _ref => {
     height: height,
     width: width,
     viewBox: svgConfig.viewBox,
-    targets: svgConfig.targets,
+    target: svgConfig.target,
     sprite: svgConfig.sprite,
     id: id,
-    className: [baseClassName, componentClassName, "x-".concat(color), userClassName, loop && 'loop'].filter(e => e).join(' '),
-    style: style,
-    animated: animated // {...otherProps}
+    className: [baseClassName, componentClassName, "x-".concat(color), userClassName].filter(e => e).join(' '),
+    style: style // {...otherProps}
 
   });
 };
@@ -103,16 +86,6 @@ Logo.propTypes = {
    */
   color: _propTypes.default.string,
 
-  /**
-   *  Whether the logo is animated
-   */
-  animated: _propTypes.default.bool,
-
-  /**
-   *  Whether the animation loops
-   */
-  loop: _propTypes.default.bool,
-
   /**
    * The height of the element
    */
@@ -129,9 +102,7 @@ Logo.propTypes = {
   variant: _propTypes.default.string
 };
 Logo.defaultProps = {
-  color: 'primary',
-  animated: false,
-  loop: false,
+  color: 'paragraph',
   height: '4em',
   variant: 'default'
 };

package/dist/cjs/b/Logo/styles.scss

@@ -1,147 +1,9 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
-/* stylelint-disable selector-id-pattern, selector-max-id -- because of the custom svg */
-
 @use "@pareto-engineering/bem";
 
-// Main animation - finishes after the drawing
-
-@keyframes draw-logo-p {
-  0% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  20%,
-  100% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-}
-@keyframes draw-logo-areto {
-  0%,
-  20% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  90%,
-  100% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-}
-@keyframes draw-logo-t {
-  0%,
-  90% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  100% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-}
-
-// Alt animation - looping
-
-@keyframes draw-alt-logo-p {
-  0% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  10%,
-  50% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-
-  60%,
-  100% {
-    stroke-dashoffset: var(--svg-final-stroke-dashoffset, 1000);
-  }
-}
-@keyframes draw-alt-logo-areto {
-  0%,
-  10% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  45%,
-  60% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-
-  95%,
-  100% {
-    stroke-dashoffset: var(--svg-final-stroke-dashoffset, 1000);
-  }
-}
-@keyframes draw-alt-logo-t {
-  0%,
-  45% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  50%,
-  95% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-
-  100% {
-    stroke-dashoffset: var(--svg-final-stroke-dashoffset, 1000);
-  }
-}
-
 .#{bem.$base}.logo {
-  &.animated.animated {
-    --svg-animation-repeats: 1;
-    --svg-animation-time: 3.5s;
-
-    &:hover,
-    &:focus {
-      //--path-animation: dash-a 1s linear 0s 1 forwards;
-    }
-
-    use#logo__p {
-      //--svg-animation-delay: 0;
-      --svg-dasharray: 1000;
-      --svg-origin-stroke-dashoffset: -1000;
-      //--svg-target-stroke-dashoffset: 0;
-      --svg-final-stroke-dashoffset: 1000;
-      animation-name: draw-logo-p;
-    }
-
-    use#logo__areto {
-      --svg-dasharray: 2000;
-      --svg-origin-stroke-dashoffset: 2000;
-      //--svg-target-stroke-dashoffset: 0;
-      --svg-final-stroke-dashoffset: -2000;
-      animation-name: draw-logo-areto;
-    }
-
-    use#logo__t {
-      --svg-dasharray: 200;
-      --svg-origin-stroke-dashoffset: 200;
-      //--svg-target-stroke-dashoffset: 0;
-      --svg-final-stroke-dashoffset: -200;
-      animation-name: draw-logo-t;
-    }
-
-    &.loop.loop {
-      --svg-animation-time: 6s;
-      --svg-animation-repeats: infinite;
-
-      use#logo__p {
-        --svg-final-stroke-dashoffset: 1000;
-        animation-name: draw-alt-logo-p;
-      }
-
-      use#logo__areto {
-        --svg-final-stroke-dashoffset: -2000;
-        animation-name: draw-alt-logo-areto;
-      }
 
-      use#logo__t {
-        --svg-final-stroke-dashoffset: -200;
-        animation-name: draw-alt-logo-t;
-      }
-    }
-  }
 }
 
 

package/dist/es/a/SVG/SVG.js

@@ -33,7 +33,7 @@ const SVG = ({
   const useSVGProps = useMemo(() => ({
     className: useClassName,
     source,
-    target,
+    ...target,
     sprite,
     strokeWidth
   }), [useClassName, source, target, strokeWidth, sprite]);

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

@@ -7,29 +7,15 @@ import { SVG } from "../../a"; // Local Definitions
 
 const baseClassName = styleNames.base;
 const componentClassName = 'logo';
-const defaultTargets = [{
-  id: 'logo__p',
-  target: 'logo__p'
-}, {
-  id: 'logo__areto',
-  target: 'logo__areto'
-}, {
-  id: 'logo__t',
-  target: 'logo__t'
-}];
+const defaultTarget = {
+  id: 'logo',
+  target: 'logo'
+};
 const contentMap = {
   default: {
-    sprite: '/logo_parts.svg',
-    viewBox: '0 0 688 250',
-    targets: defaultTargets
-  },
-  beta: {
-    sprite: '/logo_parts_beta.svg',
-    viewBox: '0 0 1000 300',
-    targets: [...defaultTargets, {
-      id: 'logo__beta',
-      target: 'logo__beta'
-    }]
+    sprite: '/logo.svg',
+    viewBox: '0 0 39 39',
+    target: defaultTarget
   }
 };
 /**
@@ -41,8 +27,6 @@ const Logo = ({
   className: userClassName,
   style,
   color,
-  animated,
-  loop,
   height,
   width,
   variant // ...otherProps
@@ -56,12 +40,11 @@ const Logo = ({
     height: height,
     width: width,
     viewBox: svgConfig.viewBox,
-    targets: svgConfig.targets,
+    target: svgConfig.target,
     sprite: svgConfig.sprite,
     id: id,
-    className: [baseClassName, componentClassName, `x-${color}`, userClassName, loop && 'loop'].filter(e => e).join(' '),
-    style: style,
-    animated: animated // {...otherProps}
+    className: [baseClassName, componentClassName, `x-${color}`, userClassName].filter(e => e).join(' '),
+    style: style // {...otherProps}
 
   });
 };
@@ -87,16 +70,6 @@ Logo.propTypes = {
    */
   color: PropTypes.string,
 
-  /**
-   *  Whether the logo is animated
-   */
-  animated: PropTypes.bool,
-
-  /**
-   *  Whether the animation loops
-   */
-  loop: PropTypes.bool,
-
   /**
    * The height of the element
    */
@@ -113,9 +86,7 @@ Logo.propTypes = {
   variant: PropTypes.string
 };
 Logo.defaultProps = {
-  color: 'primary',
-  animated: false,
-  loop: false,
+  color: 'paragraph',
   height: '4em',
   variant: 'default'
 };

package/dist/es/b/Logo/styles.scss

@@ -1,147 +1,9 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
-/* stylelint-disable selector-id-pattern, selector-max-id -- because of the custom svg */
-
 @use "@pareto-engineering/bem";
 
-// Main animation - finishes after the drawing
-
-@keyframes draw-logo-p {
-  0% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  20%,
-  100% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-}
-@keyframes draw-logo-areto {
-  0%,
-  20% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  90%,
-  100% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-}
-@keyframes draw-logo-t {
-  0%,
-  90% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  100% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-}
-
-// Alt animation - looping
-
-@keyframes draw-alt-logo-p {
-  0% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  10%,
-  50% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-
-  60%,
-  100% {
-    stroke-dashoffset: var(--svg-final-stroke-dashoffset, 1000);
-  }
-}
-@keyframes draw-alt-logo-areto {
-  0%,
-  10% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  45%,
-  60% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-
-  95%,
-  100% {
-    stroke-dashoffset: var(--svg-final-stroke-dashoffset, 1000);
-  }
-}
-@keyframes draw-alt-logo-t {
-  0%,
-  45% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  50%,
-  95% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-
-  100% {
-    stroke-dashoffset: var(--svg-final-stroke-dashoffset, 1000);
-  }
-}
-
 .#{bem.$base}.logo {
-  &.animated.animated {
-    --svg-animation-repeats: 1;
-    --svg-animation-time: 3.5s;
-
-    &:hover,
-    &:focus {
-      //--path-animation: dash-a 1s linear 0s 1 forwards;
-    }
-
-    use#logo__p {
-      //--svg-animation-delay: 0;
-      --svg-dasharray: 1000;
-      --svg-origin-stroke-dashoffset: -1000;
-      //--svg-target-stroke-dashoffset: 0;
-      --svg-final-stroke-dashoffset: 1000;
-      animation-name: draw-logo-p;
-    }
-
-    use#logo__areto {
-      --svg-dasharray: 2000;
-      --svg-origin-stroke-dashoffset: 2000;
-      //--svg-target-stroke-dashoffset: 0;
-      --svg-final-stroke-dashoffset: -2000;
-      animation-name: draw-logo-areto;
-    }
-
-    use#logo__t {
-      --svg-dasharray: 200;
-      --svg-origin-stroke-dashoffset: 200;
-      //--svg-target-stroke-dashoffset: 0;
-      --svg-final-stroke-dashoffset: -200;
-      animation-name: draw-logo-t;
-    }
-
-    &.loop.loop {
-      --svg-animation-time: 6s;
-      --svg-animation-repeats: infinite;
-
-      use#logo__p {
-        --svg-final-stroke-dashoffset: 1000;
-        animation-name: draw-alt-logo-p;
-      }
-
-      use#logo__areto {
-        --svg-final-stroke-dashoffset: -2000;
-        animation-name: draw-alt-logo-areto;
-      }
 
-      use#logo__t {
-        --svg-final-stroke-dashoffset: -200;
-        animation-name: draw-alt-logo-t;
-      }
-    }
-  }
 }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.25",
+  "version": "2.0.0-alpha.26",
   "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.10",
+    "@pareto-engineering/assets": "^2.0.0-alpha.11",
     "@pareto-engineering/bem": "^0.1.5",
     "@pareto-engineering/styles": "^2.0.0-alpha.8",
     "date-fns": "^2.22.1",