@pareto-engineering/design-system 2.0.0-alpha.23 → 2.0.0-alpha.27

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/BackgroundGradient/styles.scss

@@ -7,7 +7,7 @@
     left: 0;
     width: 100%;
     height: var(--gradient-height);
-    background-image: linear-gradient(transparent, var(--y) 25%, var(--light-y) 75%, transparent);
+    background-image: linear-gradient(var(--background1), var(--y) 25%, var(--light-y) 75%, var(--background1));
     opacity: .4;
     z-index: -1;
 }

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/a/Shapes/styles.scss

@@ -22,7 +22,7 @@ $default-shapes-opacity:.8;
     width: 100%;
 
     .triangle {
-      background-image: linear-gradient(transparent, var(--dark-y));
+      background-image: linear-gradient(var(--light-y), var(--dark-y));
       clip-path: polygon(0 0, 50% 100%, 100% 0);
       height: calc(var(--shape-height, #{$default-triangle-height}) * 0.86);
       opacity: $default-shapes-opacity;
@@ -30,7 +30,7 @@ $default-shapes-opacity:.8;
     }
 
     .inverted-triangle {
-      background-image: linear-gradient(var(--dark-y), transparent);
+      background-image: linear-gradient(var(--dark-y), var(--light-y));
       clip-path: polygon(50% 0, 0 100%, 100% 100%);
       height: calc(var(--shape-height, #{$default-triangle-height}) * 0.86);
       opacity: $default-shapes-opacity;
@@ -117,7 +117,7 @@ $default-shapes-opacity:.8;
     }
 
     .half-ellipse {
-      background-image: radial-gradient(ellipse at center bottom, var(--y) 10%, transparent 65%);
+      background-image: radial-gradient(ellipse at center bottom, var(--y) 10%, var(--light-y) 65%);
       clip-path: ellipse(60% 100% at 50% 0%);
       height: var(--shape-height, #{$default-ellipse-height});
       opacity: $default-shapes-opacity;
@@ -147,7 +147,7 @@ $default-shapes-opacity:.8;
       width: var(--shape-height, #{$default-ellipse-height});
 
       .first {
-        background-image: linear-gradient(to top, var(--dark-y), var(--y), var(--light-y) 50%, transparent);
+        background-image: linear-gradient(to top, var(--dark-y), var(--y), var(--light-y) 50%, var(--background1));
         clip-path: ellipse(50% 20% at 50% 60%);
         height: 100%;
         position: absolute;
@@ -156,7 +156,7 @@ $default-shapes-opacity:.8;
       }
 
       .second {
-        background-image: linear-gradient(to bottom,var(--dark-y), var(--y), var(--light-y) 45%, transparent);
+        background-image: linear-gradient(to bottom,var(--dark-y), var(--y), var(--light-y) 45%, var(--background1));
         clip-path: ellipse(50% 20% at 50% 40%);
         height: 100%;
         position: absolute;
@@ -175,7 +175,7 @@ $default-shapes-opacity:.8;
 
       > * {
         border-radius: 50%;
-        background: radial-gradient(ellipse at center bottom ,var(--dark-y) 10%, transparent 60%);
+        background: radial-gradient(ellipse at center bottom, var(--dark-y) 10%, var(--light-y) 60%);
         position: absolute;
         opacity: .5;
       }
@@ -244,12 +244,12 @@ $default-shapes-opacity:.8;
       }
 
       .left {
-        background-image: linear-gradient(to right ,var(--dark-y),var(--y), transparent);
+        background-image: linear-gradient(to right ,var(--dark-y),var(--y), var(--light-y));
         grid-column: 1 / 5;
       }
       .right {
-        background-image: linear-gradient(to left, var(--dark-y), var(--y), transparent);
+        background-image: linear-gradient(to left, var(--dark-y), var(--y), var(--light-y));
         grid-column: 4 / 8;
       }
     }
-}
+}

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

@@ -15,37 +15,16 @@ 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,
   },
 }
 
@@ -57,8 +36,6 @@ const Logo = ({
   className:userClassName,
   style,
   color,
-  animated,
-  loop,
   height,
   width,
   variant,
@@ -75,7 +52,7 @@ const Logo = ({
       height={height}
       width={width}
       viewBox={svgConfig.viewBox}
-      targets={svgConfig.targets}
+      target={svgConfig.target}
       sprite={svgConfig.sprite}
       id={id}
       className={[
@@ -83,12 +60,10 @@ const Logo = ({
         componentClassName,
         `x-${color}`,
         userClassName,
-        loop && 'loop',
       ]
         .filter((e) => e)
         .join(' ')}
       style={style}
-      animated={animated}
       // {...otherProps}
     />
   )
@@ -115,16 +90,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
    */
@@ -142,11 +107,9 @@ Logo.propTypes = {
 }
 
 Logo.defaultProps = {
-  color   :'primary',
-  animated:false,
-  loop    :false,
-  height  :'4em',
-  variant :'default',
+  color  :'paragraph',
+  height :'4em',
+  variant:'default',
 }
 
 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>

package/dist/cjs/a/RatingsInput/common/Rating/Rating.js

@@ -1,120 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _formik = require("formik");
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }
-
-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); }
-
-// Local Definitions
-var baseClassName = _bem.default.base;
-var componentClassName = 'rating';
-/**
- * This is the component description.
- */
-
-var Rating = _ref => {
-  var {
-    id,
-    className: userClassName,
-    style,
-    value,
-    name,
-    ratingId,
-    hover,
-    setHover,
-    activeBackgroundColor,
-    inactiveBackgroundColor // ...otherProps
-
-  } = _ref;
-  var [field] = (0, _formik.useField)(name);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, "x-".concat(activeBackgroundColor), "y-".concat(inactiveBackgroundColor)].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement("label", {
-    htmlFor: ratingId,
-    onMouseEnter: () => setHover(value),
-    onMouseLeave: () => setHover(null)
-  }, ' ', /*#__PURE__*/React.createElement("span", {
-    className: ['f-icons', value <= (hover || Number(field.value)) ? 'c-x' : 'c-dark-y'].filter(e => e).join(' ')
-  }, "[")), /*#__PURE__*/React.createElement("input", _extends({}, field, {
-    type: "radio",
-    id: ratingId,
-    name: name,
-    value: value
-  })));
-};
-
-Rating.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: _propTypes.default.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className: _propTypes.default.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-
-  /**
-   * The value of each an every rating star
-   */
-  value: _propTypes.default.number,
-
-  /**
-   * The current hover value
-   */
-  hover: _propTypes.default.number,
-
-  /**
-   * Function to update the hover value
-   */
-  setHover: _propTypes.default.func,
-
-  /**
-   * Unique Id for each rating star
-   */
-  ratingId: _propTypes.default.string,
-
-  /**
-   * Name of the rating input
-   */
-  name: _propTypes.default.string,
-
-  /**
-   * The start rating backgriund color when hovered or clicked
-   */
-  activeBackgroundColor: _propTypes.default.string,
-
-  /**
-   * The start rating backgriund color when not hovered and not clicked
-   */
-  inactiveBackgroundColor: _propTypes.default.string
-};
-Rating.defaultProps = {
-  activeBackgroundColor: 'secondary2',
-  inactiveBackgroundColor: 'background'
-};
-var _default = Rating;
-exports.default = _default;

package/dist/cjs/a/RatingsInput/common/Rating/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Rating", {
-  enumerable: true,
-  get: function get() {
-    return _Rating.default;
-  }
-});
-
-var _Rating = _interopRequireDefault(require("./Rating"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/a/RatingsInput/common/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Rating", {
-  enumerable: true,
-  get: function get() {
-    return _Rating.Rating;
-  }
-});
-
-var _Rating = require("./Rating");

package/dist/cjs/a/RatingsInput/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "RatingsInput", {
-  enumerable: true,
-  get: function get() {
-    return _RatingsInput.default;
-  }
-});
-
-var _RatingsInput = _interopRequireDefault(require("./RatingsInput"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/a/RatingsInput/styles.scss

@@ -1,35 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-@use "@pareto-engineering/bem";
-
-$default-rating-icon-margin: .5em;
-$default-padding: .2em;
-$default-transition: all .2s;
-
-.#{bem.$base}.ratings-input {
-  display: flex;
-
-  >:not(:first-child) {
-    margin-left: $default-rating-icon-margin;
-  }
-
-  .#{bem.$base}.rating {
-    display: flex;
-
-    input {
-      opacity: 0;
-      position: absolute;
-      visibility: none;
-      z-index: -1;
-    }
-
-    label {
-      padding: $default-padding;
-      transition: $default-transition;
-      cursor: pointer;
-    }
-  }
-}
-
-
-
-

package/dist/es/a/RatingsInput/RatingsInput.js

@@ -1,72 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react';
-import { useState, useLayoutEffect } from 'react';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem'; // Local Definitions
-
-import { Rating } from "./common";
-const baseClassName = styleNames.base;
-const componentClassName = 'ratings-input';
-/**
- * This is the component description.
- */
-
-const RatingsInput = ({
-  id,
-  className: userClassName,
-  style,
-  name,
-  ratingCount // ...otherProps
-
-}) => {
-  useLayoutEffect(() => {
-    import("./styles.scss");
-  }, []);
-  const [hover, setHover] = useState(null);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, [...Array(ratingCount)].map((_, index) => {
-    const ratingValue = index + 1;
-    return /*#__PURE__*/React.createElement(Rating, {
-      key: ratingValue,
-      ratingId: `${name}-${ratingValue}`,
-      value: ratingValue,
-      name: name,
-      hover: hover,
-      setHover: setHover
-    });
-  }));
-};
-
-RatingsInput.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: PropTypes.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className: PropTypes.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: PropTypes.objectOf(PropTypes.string),
-
-  /**
-   * The number of ratings input stars to be displayed
-   */
-  ratingCount: PropTypes.number,
-
-  /**
-   * Name of the rating input
-   */
-  name: PropTypes.string
-};
-RatingsInput.defaultProps = {// someProp:false
-};
-export default RatingsInput;