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

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

@@ -24,14 +24,14 @@ export const Base = () => (
 
 export const Color = () => ALL_COLORS.map((color) => <Logo color={color} key={color} />)
 
-export const Animated = () => (
-  <Logo animated />
-)
+// export const Animated = () => (
+//   <Logo animated />
+// )
 
-export const Loop = () => (
-  <Logo animated loop />
-)
+// export const Loop = () => (
+//   <Logo animated loop />
+// )
 
-export const Beta = () => (
-  <Logo variant="beta" color="main1" />
-)
+// export const Beta = () => (
+//   <Logo variant="beta" color="main1" />
+// )

package/src/ui/a/SVG/SVG.jsx

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

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

@@ -17,36 +17,21 @@ const componentClassName = 'logo'
 
 const defaultTargets = [
   {
-    id    :'logo__p',
-    target:'logo__p',
+    id    :'logo_squares',
+    target:'logo_squares',
   },
   {
-    id    :'logo__areto',
-    target:'logo__areto',
-  },
-  {
-    id    :'logo__t',
-    target:'logo__t',
+    id    :'logo_pareto',
+    target:'logo_pareto',
   },
 ]
 
 const contentMap = {
   default:{
-    sprite :'/logo_parts.svg',
-    viewBox:'0 0 688 250',
+    sprite :'/logo.svg',
+    viewBox:'0 0 156 30',
     targets:defaultTargets,
   },
-  beta:{
-    sprite :'/logo_parts_beta.svg',
-    viewBox:'0 0 1000 300',
-    targets:[
-      ...defaultTargets,
-      {
-        id    :'logo__beta',
-        target:'logo__beta',
-      },
-    ],
-  },
 }
 
 /**
@@ -57,11 +42,10 @@ const Logo = ({
   className:userClassName,
   style,
   color,
-  animated,
-  loop,
   height,
   width,
   variant,
+  strokeColor,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
@@ -82,13 +66,12 @@ const Logo = ({
         baseClassName,
         componentClassName,
         `x-${color}`,
+        `y-${strokeColor}`,
         userClassName,
-        loop && 'loop',
       ]
         .filter((e) => e)
         .join(' ')}
       style={style}
-      animated={animated}
       // {...otherProps}
     />
   )
@@ -115,16 +98,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
    */
@@ -139,14 +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   :'primary',
-  animated:false,
-  loop    :false,
-  height  :'4em',
-  variant :'default',
+  color      :'paragraph',
+  height     :'2em',
+  variant    :'default',
+  strokeColor:'transparent',
 }
 
 export default Logo

package/src/ui/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/src/ui/f/fields/SelectInput/SelectInput.jsx

@@ -67,7 +67,6 @@ const SelectInput = ({
               key={newOption.value}
               value={newOption.value}
               disabled={newOption?.disabled || false}
-              selected={newOption?.disabled || true}
             >
               {newOption.label}
             </option>