@pareto-engineering/design-system 2.0.0-alpha.5 → 2.0.0-alpha.52

package/dist/cjs/a/index.js

@@ -147,6 +147,36 @@ Object.defineProperty(exports, "Shapes", {
     return _Shapes.Shapes;
   }
 });
+Object.defineProperty(exports, "OvalIllustration", {
+  enumerable: true,
+  get: function get() {
+    return _OvalIllustration.OvalIllustration;
+  }
+});
+Object.defineProperty(exports, "SnapScroller", {
+  enumerable: true,
+  get: function get() {
+    return _SnapScroller.SnapScroller;
+  }
+});
+Object.defineProperty(exports, "BackgroundGradient", {
+  enumerable: true,
+  get: function get() {
+    return _BackgroundGradient.BackgroundGradient;
+  }
+});
+Object.defineProperty(exports, "ContentTree", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTree.ContentTree;
+  }
+});
+Object.defineProperty(exports, "Popover", {
+  enumerable: true,
+  get: function get() {
+    return _Popover.Popover;
+  }
+});
 
 var _SVG = require("./SVG");
 
@@ -188,4 +218,14 @@ var _DotInfo = require("./DotInfo");
 
 var _Timestamp = require("./Timestamp");
 
-var _Shapes = require("./Shapes");
+var _Shapes = require("./Shapes");
+
+var _OvalIllustration = require("./OvalIllustration");
+
+var _SnapScroller = require("./SnapScroller");
+
+var _BackgroundGradient = require("./BackgroundGradient");
+
+var _ContentTree = require("./ContentTree");
+
+var _Popover = require("./Popover");

package/dist/cjs/b/Button/Button.js

@@ -13,7 +13,7 @@ var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
 
 var _ = require("../..");
 
-var _excluded = ["id", "className", "style", "children", "isLoading", "color", "isCompact", "isGhost", "isSimple"];
+var _excluded = ["id", "className", "style", "children", "isLoading", "color", "isCompact", "isGhost", "isSimple", "arrowDirection"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -43,7 +43,8 @@ var Button = _ref => {
     color,
     isCompact,
     isGhost,
-    isSimple
+    isSimple,
+    arrowDirection
   } = _ref,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
@@ -52,7 +53,7 @@ var Button = _ref => {
   }, []);
   return /*#__PURE__*/React.createElement("button", _extends({
     id: id,
-    className: [baseClassName, componentClassName, userClassName, "x-".concat(color), isGhost && _bem.default.modifierGhost, isCompact && _bem.default.modifierCompact, isSimple && _bem.default.modifierSimple].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, "x-".concat(color), isGhost && _bem.default.modifierGhost, isCompact && _bem.default.modifierCompact, isSimple && _bem.default.modifierSimple, arrowDirection && "arrow-".concat(arrowDirection)].filter(e => e).join(' '),
     style: style,
     type: "button"
   }, otherProps), isLoading ? /*#__PURE__*/React.createElement(_.LoadingCircle, {
@@ -107,7 +108,12 @@ Button.propTypes = {
   /**
    * Button loading state
    */
-  isLoading: _propTypes.default.bool
+  isLoading: _propTypes.default.bool,
+
+  /**
+   * The direction of the arrow if the button has one
+   */
+  arrowDirection: _propTypes.default.string
 };
 Button.defaultProps = {
   color: 'main1'

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

@@ -6,28 +6,63 @@ $default-padding: 1em 1em .84em;
 $compact-padding: .6em .6em .48em;
 $default-color:primary;
 $font-weight:bold;
+$default-margin:.5em;
+$default-animation-time: .3s;
 
 .#{bem.$base}.button {
   background: var(--x, var(--#{$default-color}));
   border: transparent;
   border-radius: var(--theme-border-radius);
   color: var(--on-x, var(--on-#{$default-color}));
-  font-weight: 600;
+  display: inline-flex;
+  font-family: var(--theme-default-paragraph);
+  font-weight: 400;
+  justify-content: space-between;
   padding: $default-padding;
   transition: all .25s;
 
+  &.arrow-right {
+    &::after {
+      content: "-->";
+      margin-left: $default-margin;
+      vertical-align: middle;
+    }
+
+    &:hover {
+      &::after {
+        --final-position: 50%;
+        animation: animateArrow $default-animation-time forwards;
+      }
+    }
+  }
+
+  &.arrow-left {
+    &::before {
+      content: "<--";
+      margin-right: $default-margin;
+      vertical-align: middle;
+    }
+
+    &:hover {
+      &::before {
+        --final-position: -50%;
+        animation: animateArrow $default-animation-time forwards;
+      }
+    }
+  }
+
   &:not(:disabled) {
     cursor: pointer;
 
     &:hover {
       background: var(--light-x, var(--light-#{$default-color}));
     }
+
     &:focus {
       background: var(--dark-x, var(--dark-#{$default-color}));
     }
   }
 
-
   &.#{bem.$modifier-compact} {
     padding: $compact-padding;
   }
@@ -39,7 +74,7 @@ $font-weight:bold;
 
     &:hover,
     &:focus,
-    &:disabled{
+    &:disabled {
       background: transparent;
     }
 
@@ -55,7 +90,7 @@ $font-weight:bold;
       }
     }
 
-    &:disabled{
+    &:disabled {
       border: 1px solid var(--x, var(--#{$default-color}));
       color: var(--x, var(--#{$default-color}));
     }
@@ -65,6 +100,7 @@ $font-weight:bold;
     background: transparent;
     border: 1px solid transparent;
     color: var(--x, var(--#{$default-color}));
+    padding: 0;
 
     &:disabled,
     &:hover,
@@ -73,13 +109,13 @@ $font-weight:bold;
     }
 
     &:not(:disabled) {
-       &:hover {
-         color: var(--light-x, var(--light-#{$default-color}));
-       }
+      &:hover {
+        color: var(--light-x, var(--light-#{$default-color}));
+      }
 
-       &:focus {
-         color: var(--dark-x, var(--dark-#{$default-color}));
-       }
+      &:focus {
+        color: var(--dark-x, var(--dark-#{$default-color}));
+      }
     }
 
     &:disabled {
@@ -94,3 +130,12 @@ $font-weight:bold;
 }
 
 
+@keyframes animateArrow {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(var(--final-position));
+  }
+}

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

@@ -22,29 +22,29 @@ 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'
+var defaultTargetssquare = [{
+  id: 'logo',
+  target: 'logo'
+}];
+var contentMapSquare = {
+  default: {
+    sprite: '/logo_square.svg',
+    viewBox: '0 0 39 39',
+    targets: defaultTargetssquare
+  }
+};
+var defaultTargetsWithName = [{
+  id: 'logo_squares',
+  target: 'logo_squares'
 }, {
-  id: 'logo__t',
-  target: 'logo__t'
+  id: 'logo_pareto',
+  target: 'logo_pareto'
 }];
-var contentMap = {
+var contentMapWithName = {
   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 156 30',
+    targets: defaultTargetsWithName
   }
 };
 /**
@@ -57,16 +57,17 @@ var Logo = _ref => {
     className: userClassName,
     style,
     color,
-    animated,
-    loop,
     height,
     width,
-    variant // ...otherProps
+    variant,
+    strokeColor,
+    square // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
+  var contentMap = square ? contentMapSquare : contentMapWithName;
   var svgConfig = (0, React.useMemo)(() => contentMap[variant], [variant]);
   return /*#__PURE__*/React.createElement(_a.SVG, {
     height: height,
@@ -75,9 +76,8 @@ var Logo = _ref => {
     targets: svgConfig.targets,
     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), "y-".concat(strokeColor), userClassName].filter(e => e).join(' '),
+    style: style // {...otherProps}
 
   });
 };
@@ -104,36 +104,36 @@ Logo.propTypes = {
   color: _propTypes.default.string,
 
   /**
-   *  Whether the logo is animated
+   * The height of the element
    */
-  animated: _propTypes.default.bool,
+  height: _propTypes.default.string,
 
   /**
-   *  Whether the animation loops
+   * The width of the element
    */
-  loop: _propTypes.default.bool,
+  width: _propTypes.default.string,
 
   /**
-   * The height of the element
+   * The variant to display. At the moment only `beta` is available.
    */
-  height: _propTypes.default.string,
+  variant: _propTypes.default.string,
 
   /**
-   * The width of the element
+   * The color of the svg stroke
    */
-  width: _propTypes.default.string,
+  strokeColor: _propTypes.default.string,
 
   /**
-   * The variant to display. At the moment only `beta` is available.
+   * Whether the logo should have a name.
    */
-  variant: _propTypes.default.string
+  square: _propTypes.default.bool
 };
 Logo.defaultProps = {
-  color: 'primary',
-  animated: false,
-  loop: false,
-  height: '4em',
-  variant: 'default'
+  color: 'paragraph',
+  height: '2em',
+  variant: 'default',
+  strokeColor: 'transparent',
+  square: false
 };
 var _default = Logo;
 exports.default = _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/cjs/b/Page/common/Section/Section.js

@@ -15,7 +15,7 @@ var _a = require("../../../../a");
 
 var _usePage = _interopRequireDefault(require("../../usePage"));
 
-var _excluded = ["id", "className", "style", "children", "backgroundShape", "backgroundPin", "backgroundHeight"];
+var _excluded = ["id", "className", "style", "children", "backgroundShape", "backgroundGradient", "backgroundGradientHeight", "backgroundVerticalAlign", "backgroundHorizontalAlign", "backgroundHeight", "backgroundOverflow"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -39,8 +39,12 @@ var Section = _ref => {
     style,
     children,
     backgroundShape,
-    backgroundPin,
-    backgroundHeight
+    backgroundGradient,
+    backgroundGradientHeight,
+    backgroundVerticalAlign,
+    backgroundHorizontalAlign,
+    backgroundHeight,
+    backgroundOverflow
   } = _ref,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
@@ -53,9 +57,13 @@ var Section = _ref => {
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
   }, otherProps), children, backgroundShape && /*#__PURE__*/React.createElement(_a.Shapes, {
-    pin: backgroundPin,
+    verticalAlign: backgroundVerticalAlign,
+    horizontalAlign: backgroundHorizontalAlign,
+    overflow: backgroundOverflow,
     height: backgroundHeight,
     shape: backgroundShape
+  }), backgroundGradient && /*#__PURE__*/React.createElement(_a.BackgroundGradient, {
+    height: backgroundGradientHeight
   }));
 };
 
@@ -86,14 +94,34 @@ Section.propTypes = {
   backgroundShape: _propTypes.default.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles']),
 
   /**
-   * The background pin to use for if the background shape is set.
+   * The background vertical alingment to use for if the background shape is set.
    */
-  backgroundPin: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
+  backgroundVerticalAlign: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
+
+  /**
+   * The background horizontal alingment to use for if the background shape is set.
+   */
+  backgroundHorizontalAlign: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
 
   /**
    * The background height to use for if the background shape is set.
    */
-  backgroundHeight: _propTypes.default.string
+  backgroundHeight: _propTypes.default.string,
+
+  /**
+   * The background overflow to use for if the background shape is set.
+   */
+  backgroundOverflow: _propTypes.default.oneOf(['visible', 'hidden', 'scroll']),
+
+  /**
+   * The background gradient to use for if the background gradient is set.
+   */
+  backgroundGradient: _propTypes.default.bool,
+
+  /**
+   * The background gradient height to use for if the background gradient is set.
+   */
+  backgroundGradientHeight: _propTypes.default.string
 };
 Section.defaultProps = {// someProp:false
 };

package/dist/cjs/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js

@@ -39,7 +39,8 @@ var HorizontalMenu = _ref => {
     logoColor,
     hideBackIcon,
     stepsBackwards,
-    customPrevStep // ...otherProps
+    customPrevStep,
+    color // ...otherProps
 
   } = _ref;
   var {
@@ -68,25 +69,25 @@ var HorizontalMenu = _ref => {
     progress: currentStep.progress,
     attached: true,
     height: ".4em",
-    color: "main2",
+    color: color,
     className: "y-background1 b-dark-y"
   }), /*#__PURE__*/React.createElement("div", {
     className: _bem.default.elementContent
   }, /*#__PURE__*/React.createElement("div", {
     className: "left"
   }, !isFirstStep && !hideBackIcon && /*#__PURE__*/React.createElement("span", {
-    className: "f-icons pointer",
+    className: "prev-button pointer",
     onClick: mobilePreviousStep,
     role: "button",
     onKeyDown: mobilePreviousStep,
     tabIndex: 0
-  }, "H")), /*#__PURE__*/React.createElement("div", {
+  }, '<--')), /*#__PURE__*/React.createElement("div", {
     className: "title"
   }, /*#__PURE__*/React.createElement("span", {
     className: "md-h lg-h"
   }, currentStep === null || currentStep === void 0 ? void 0 : currentStep.title), /*#__PURE__*/React.createElement(_b.Logo, {
-    className: "xs-h sm-h",
-    height: "2em",
+    className: "xs-h sm-h y-transparent",
+    height: "1.1em",
     color: logoColor
   }))));
 };
@@ -125,11 +126,17 @@ HorizontalMenu.propTypes = {
   /**
    * Hide back icon boolean
    */
-  hideBackIcon: _propTypes.default.bool
+  hideBackIcon: _propTypes.default.bool,
+
+  /**
+   * String that will represent color for Progress bar
+   */
+  color: _propTypes.default.string
 };
 HorizontalMenu.defaultProps = {
-  logoColor: 'main2',
-  stepsBackwards: 1
+  logoColor: 'paragraph',
+  stepsBackwards: 1,
+  color: 'main2'
 };
 var _default = HorizontalMenu;
 exports.default = _default;

package/dist/cjs/c/ContentSlides/common/Navigator/Navigator.js

@@ -74,7 +74,8 @@ var Navigator = _ref => {
       } else {
         setNextStepIndex(stepsForward);
       }
-    }
+    },
+    isCompact: true
   }, "Next") : /*#__PURE__*/React.createElement("span", null));
 };
 
@@ -136,8 +137,8 @@ Navigator.propTypes = {
 };
 Navigator.defaultProps = {
   canMoveForward: true,
-  previousColor: 'main1',
-  nextColor: 'main1',
+  previousColor: 'main2',
+  nextColor: 'main2',
   stepsForward: 1,
   stepsBackwards: 1
 };