@pareto-engineering/design-system 2.0.0-alpha.9 → 3.0.0-alpha.22

package/dist/es/c/ContentSlides/ContentSlides.js

@@ -3,51 +3,52 @@ import * as React from 'react';
 import { useLayoutEffect, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
-import styleNames from '@pareto-engineering/bem';
+import styleNames from '@pareto-engineering/bem/exports';
 import ContentSlidesContext from "./Context";
-import { Slide, HorizontalMenu, Sidebar, Navigator } from "./common"; // Local Definitions
+import { Slide, HorizontalMenu, Sidebar, Navigator } from "./common";
+
+// Local Definitions
 
 const baseClassName = styleNames.base;
 const componentClassName = 'content-slides';
-
 const reducer = (state, action) => {
   switch (action.type) {
     case 'SET_STEP_INDEX':
-      return { ...state,
+      return {
+        ...state,
         currentStepIndex: action.payload
       };
-
     case 'SET_CURRENT_STEP':
-      return { ...state,
+      return {
+        ...state,
         ...action.payload
       };
-
     case 'SET_EXTRA_CONTEXT':
-      return { ...state,
+      return {
+        ...state,
         ...action.payload
       };
-
     default:
       return state;
   }
 };
+
 /**
  * This is the component description.
  * Colors :
  * `y` : the background of the content
  */
-
-
-const ContentSlides = ({
-  id,
-  className: userClassName,
-  style,
-  children,
-  steps,
-  simple,
-  isDebug // ...otherProps
-
-}) => {
+const ContentSlides = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    steps,
+    simple,
+    isDebug
+    // ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
@@ -61,8 +62,8 @@ const ContentSlides = ({
     isFirstStep,
     isLastStep
   } = state;
-
-  const setNextStepIndex = (step = 1) => {
+  const setNextStepIndex = function () {
+    let step = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
     if (!isLastStep) {
       dispatch({
         type: 'SET_STEP_INDEX',
@@ -70,8 +71,8 @@ const ContentSlides = ({
       });
     }
   };
-
-  const setPrevStepIndex = (step = 1) => {
+  const setPrevStepIndex = function () {
+    let step = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
     if (!isFirstStep) {
       dispatch({
         type: 'SET_STEP_INDEX',
@@ -79,21 +80,17 @@ const ContentSlides = ({
       });
     }
   };
-
   const setStepIndex = index => {
     dispatch({
       type: 'SET_STEP_INDEX',
       payload: index
     });
   };
-
   const setCurrentStep = index => {
     const newStep = steps[index];
-
     if (newStep.location) {
       history.push(newStep.location);
     }
-
     dispatch({
       type: 'SET_CURRENT_STEP',
       payload: {
@@ -103,7 +100,6 @@ const ContentSlides = ({
       }
     });
   };
-
   useLayoutEffect(() => {
     setCurrentStep(currentStepIndex);
   }, [currentStepIndex]);
@@ -123,28 +119,23 @@ const ContentSlides = ({
     style: style
   }, children));
 };
-
 ContentSlides.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 children JSX
    */
   children: PropTypes.node,
-
   /**
   * The slides properties
   */
@@ -154,12 +145,10 @@ ContentSlides.propTypes = {
     progress: PropTypes.number.isRequired,
     location: PropTypes.string.isRequired
   })),
-
   /**
    * Whether this shouldn't use a sidebar on desktop
    */
   simple: PropTypes.bool,
-
   /**
    * Whether the debug mode is enabled
    */

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

@@ -1,36 +1,40 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem';
+import styleNames from '@pareto-engineering/bem/exports';
 import { ProgressBar } from "../../../../a";
 import { Logo } from "../../../../b";
-import useContentSlides from "../../useContentSlides"; // Local Definitions
+import useContentSlides from "../../useContentSlides";
+
+// Local Definitions
+
 // const baseClassName = styleNames.base
 
 const componentClassName = 'horizontal-menu';
+
 /**
  * This is the component description.
  */
-
-const HorizontalMenu = ({
-  id,
-  className: userClassName,
-  style,
-  logoColor,
-  hideBackIcon,
-  stepsBackwards,
-  customPrevStep // ...otherProps
-
-}) => {
+const HorizontalMenu = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    logoColor,
+    hideBackIcon,
+    stepsBackwards,
+    customPrevStep,
+    color
+    // ...otherProps
+  } = _ref;
   const {
     setPrevStepIndex,
     // setNextStepIndex,
     currentStep,
-    isFirstStep // currentStep,
+    isFirstStep
+    // currentStep,
     // currentStepIndex,
-
   } = useContentSlides();
-
   const mobilePreviousStep = () => {
     if (customPrevStep) {
       customPrevStep();
@@ -38,77 +42,76 @@ const HorizontalMenu = ({
       setPrevStepIndex(stepsBackwards);
     }
   };
-
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [// baseClassName,
+    className: [
+    // baseClassName,
+
     componentClassName, userClassName].filter(e => e).join(' '),
     style: style
-  }, (currentStep === null || currentStep === void 0 ? void 0 : currentStep.progress) > 0 && /*#__PURE__*/React.createElement(ProgressBar, {
+  }, currentStep?.progress > 0 && /*#__PURE__*/React.createElement(ProgressBar, {
     progress: currentStep.progress,
     attached: true,
     height: ".4em",
-    color: "main2",
-    className: "y-background1 b-dark-y"
+    color: color,
+    className: "y-background1 b-hard-y"
   }), /*#__PURE__*/React.createElement("div", {
     className: styleNames.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(Logo, {
-    className: "xs-h sm-h",
-    height: "2em",
+  }, currentStep?.title), /*#__PURE__*/React.createElement(Logo, {
+    className: "xs-h sm-h y-transparent",
+    height: "1.1em",
     color: logoColor
   }))));
 };
-
 HorizontalMenu.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),
-
   /**
    * Number of backward steps for the customPrevStep
    */
   stepsBackwards: PropTypes.number,
-
   /**
    * A custom previous function
    */
   customPrevStep: PropTypes.func,
-
   /**
    * The logo color
    */
   logoColor: PropTypes.string,
-
   /**
    * Hide back icon boolean
    */
-  hideBackIcon: PropTypes.bool
+  hideBackIcon: PropTypes.bool,
+  /**
+   * String that will represent color for Progress bar
+   */
+  color: PropTypes.string
 };
 HorizontalMenu.defaultProps = {
-  logoColor: 'main2',
-  stepsBackwards: 1
+  logoColor: 'paragraph',
+  stepsBackwards: 1,
+  color: 'main2'
 };
 export default HorizontalMenu;

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

@@ -2,35 +2,38 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from "../../../../b";
-import useContentSlides from "../../useContentSlides"; // Local Definitions
+import useContentSlides from "../../useContentSlides";
+
+// Local Definitions
 
 const componentClassName = 'navigator';
+
 /**
  * This is the component description.
  */
-
-const Navigator = ({
-  id,
-  className: userClassName,
-  style,
-  canMoveForward,
-  previousColor,
-  nextColor,
-  stepsForward,
-  stepsBackwards,
-  customPrevStep,
-  customNextStep,
-  isLoading // ...otherProps
-
-}) => {
+const Navigator = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    canMoveForward,
+    previousColor,
+    nextColor,
+    stepsForward,
+    stepsBackwards,
+    customPrevStep,
+    customNextStep,
+    isLoading
+    // ...otherProps
+  } = _ref;
   const {
     setPrevStepIndex,
     setNextStepIndex,
     isFirstStep,
     isLastStep,
-    isDebug // currentStep,
+    isDebug
+    // currentStep,
     // currentStepIndex,
-
   } = useContentSlides();
   return /*#__PURE__*/React.createElement("div", {
     id: id,
@@ -56,61 +59,51 @@ const Navigator = ({
       } else {
         setNextStepIndex(stepsForward);
       }
-    }
+    },
+    isCompact: true
   }, "Next") : /*#__PURE__*/React.createElement("span", null));
 };
-
 Navigator.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),
-
   /**
    * Whether the user can move to the next slide
    */
   canMoveForward: PropTypes.bool,
-
   /**
    * The previous color
    */
   previousColor: PropTypes.string,
-
   /**
    * The next color
    */
   nextColor: PropTypes.string,
-
   /**
    * Number of forward steps for the customNextStep
    */
   stepsForward: PropTypes.number,
-
   /**
    * Number of backward steps for the customPrevStep
    */
   stepsBackwards: PropTypes.number,
-
   /**
    * A custom previous function
    */
   customPrevStep: PropTypes.func,
-
   /**
    * A custom next function
    */
   customNextStep: PropTypes.func,
-
   /**
    * Button loading state
    */
@@ -118,8 +111,8 @@ Navigator.propTypes = {
 };
 Navigator.defaultProps = {
   canMoveForward: true,
-  previousColor: 'main1',
-  nextColor: 'main1',
+  previousColor: 'main2',
+  nextColor: 'main2',
   stepsForward: 1,
   stepsBackwards: 1
 };

package/dist/es/c/ContentSlides/common/Sidebar/Sidebar.js

@@ -3,23 +3,27 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { IconList } from "../../../../a";
 import { ThemeSelector } from "../../../../b";
-import styleNames from '@pareto-engineering/bem';
-import useContentSlides from "../../useContentSlides"; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+import useContentSlides from "../../useContentSlides";
+
+// Local Definitions
+
 // const baseClassName = styleNames.base
 
 const componentClassName = 'sidebar';
+
 /**
  * This is the component description.
  */
-
-const Sidebar = ({
-  id,
-  className: userClassName,
-  style,
-  header,
-  footer // ...otherProps
-
-}) => {
+const Sidebar = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    header,
+    footer
+    // ...otherProps
+  } = _ref;
   const {
     steps,
     // setPrevStepIndex,
@@ -32,14 +36,15 @@ const Sidebar = ({
   } = useContentSlides();
   return /*#__PURE__*/React.createElement("nav", {
     id: id,
-    className: [// baseClassName,
+    className: [
+    // baseClassName,
+
     componentClassName, userClassName].filter(e => e).join(' '),
     style: style
   }, header ? /*#__PURE__*/React.createElement("header", null, header) : /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("div", {
     className: styleNames.elementContent
   }, /*#__PURE__*/React.createElement(IconList, null, steps.map((step, i) =>
   /*#__PURE__*/
-
   /* eslint-disable no-nested-ternary -- bc of math inequality cases */
   React.createElement(IconList.Item, {
     key: step.location,
@@ -48,38 +53,33 @@ const Sidebar = ({
     className: [currentStepIndex === i ? 'x-heading' : i < currentStepIndex ? 'pointer x-paragraph xh-main2' : 'x-subtitle', 'c-x'].filter(e => e).join(' '),
     onClick: i < currentStepIndex ? () => setStepIndex(i) : undefined
   }, step.title)
-  /* eslint-enable no-nested-ternary */
-  ))), footer || true ? /*#__PURE__*/React.createElement("footer", null, footer, /*#__PURE__*/React.createElement(ThemeSelector, {
+  /* eslint-enable no-nested-ternary */))), footer ? /*#__PURE__*/React.createElement("footer", null, footer, /*#__PURE__*/React.createElement(ThemeSelector, {
     className: "x-heading"
   })) : /*#__PURE__*/React.createElement("span", null));
 };
-
 Sidebar.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 header JSX
    */
   header: PropTypes.node,
-
   /**
    *  The footer JSX
    */
   footer: PropTypes.node
 };
-Sidebar.defaultProps = {// someProp:false
+Sidebar.defaultProps = {
+  // someProp:false
 };
 export default Sidebar;

package/dist/es/c/ContentSlides/common/Slide/Slide.js

@@ -1,30 +1,35 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem'; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
 
-import useContentSlides from "../../useContentSlides"; // const baseClassName = styleNames.base
+// Local Definitions
+import useContentSlides from "../../useContentSlides";
+
+// const baseClassName = styleNames.base
 
 const componentClassName = 'slide';
+
 /**
  * This is the component description.
  */
-
-const Slide = ({
-  id,
-  className: userClassName,
-  style,
-  children,
-  index // ...otherProps
-
-}) => {
+const Slide = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    index
+    // ...otherProps
+  } = _ref;
   const {
     currentStepIndex
   } = useContentSlides();
   const isActive = currentStepIndex === index;
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [// baseClassName,
+    className: [
+    // baseClassName,
     isActive && styleNames.modifierActive, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement("div", {
@@ -33,33 +38,29 @@ const Slide = ({
     className: "content"
   }, children)));
 };
-
 Slide.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 children JSX
    */
   children: PropTypes.node,
-
   /**
    * The index of this slide
    */
   index: PropTypes.number
 };
-Slide.defaultProps = {// someProp:false
+Slide.defaultProps = {
+  // someProp:false
 };
 export default Slide;

package/dist/es/c/ContentSlides/styles.scss

@@ -1,8 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
 
 $class-sidebar:sidebar;
 $class-horizontal-menu:horizontal-menu;
@@ -14,7 +14,7 @@ $class-navigator:navigator;
 $default-sidebar-width:minmax(250px, 330px);
 $default-border:none;//2px solid var(--grid);
 $default-border-radius:var(--theme-border-radius);
-$default-content-background:var(--y);
+$default-content-background: var(--background1);
 $default-padding:var(--u);
 
 $mobile-content-margin:6em;
@@ -61,7 +61,6 @@ $mobile-content-margin:6em;
 
   //.#{$class-main-container} {
   main {
-    background: var(--dark-y);
     overflow: hidden;
     position: relative;
 
@@ -79,7 +78,7 @@ $mobile-content-margin:6em;
         .#{bem.$element-content} {
           background: $default-content-background;
 
-          border: $default-border;
+          border: var(--theme-border);
           border-radius: $default-border-radius;
           max-width: 600px;
           padding: $default-padding;
@@ -108,8 +107,9 @@ $mobile-content-margin:6em;
 
   .#{$class-horizontal-menu} {
     background: $default-content-background;
-    border-bottom: $default-border;
+    border-bottom: var(--theme-border);
     color: var(--heading);
+    z-index: 1;
 
     .#{bem.$element-content} {
       display: grid;
@@ -124,6 +124,11 @@ $mobile-content-margin:6em;
 
       .left {
         text-align: left;
+
+        .prev-button {
+          font-family: var(--theme-default-paragraph);
+          font-size: calc(var(--s2) * 1em);
+        }
       }
 
       .right {
@@ -210,6 +215,7 @@ $mobile-content-margin:6em;
 
               .next {
                 flex-grow: 1;
+                justify-content: flex-end;
               }
             }
           }