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

package/dist/es/b/Title/Title.js

@@ -1,118 +1,107 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 /* @pareto-engineering/generator-front 0.3.1 */
 import * as React from 'react';
-import PropTypes from 'prop-types'; // Package-level Imports
+import PropTypes from 'prop-types';
 
-import styleNames from '@pareto-engineering/bem'; // Component-level imports
+// Package-level Imports
+import styleNames from '@pareto-engineering/bem/exports';
 
-import("./styles.scss"); // Helper Definition
+// Component-level imports
+import("./styles.scss");
 
+// Helper Definition
 const baseClassName = styleNames.base;
 const componentClassName = 'title';
-
-const Title = ({
-  id,
-  className: userClassName,
-  style,
-  // children,
-  heading,
-  headingAs: HeadingWrapper,
-  headingClassName,
-  headingStyle,
-  headingProps,
-  subtitle,
-  subtitleAs: SubtitleWrapper,
-  subtitleClassName,
-  subtitleStyle,
-  subtitleProps // ...otherProps
-
-}) => /*#__PURE__*/React.createElement("div", {
-  id: id,
-  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-  style: style
-}, /*#__PURE__*/React.createElement(HeadingWrapper, _extends({
-  className: [headingClassName, styleNames.heading].filter(e => e).join(' '),
-  style: headingStyle
-}, headingProps), heading), subtitle && /*#__PURE__*/React.createElement(SubtitleWrapper, _extends({
-  className: [subtitleClassName, styleNames.subtitle].filter(e => e).join(' '),
-  style: subtitleStyle
-}, subtitleProps), subtitle));
-
+const Title = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    // children,
+    heading,
+    headingAs: HeadingWrapper,
+    headingClassName,
+    headingStyle,
+    headingProps,
+    subtitle,
+    subtitleAs: SubtitleWrapper,
+    subtitleClassName,
+    subtitleStyle,
+    subtitleProps
+    // ...otherProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement(HeadingWrapper, _extends({
+    className: [headingClassName, styleNames.heading].filter(e => e).join(' '),
+    style: headingStyle
+  }, headingProps), heading), subtitle && /*#__PURE__*/React.createElement(SubtitleWrapper, _extends({
+    className: [subtitleClassName, styleNames.subtitle].filter(e => e).join(' '),
+    style: subtitleStyle
+  }, subtitleProps), subtitle));
+};
 Title.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 heading
    */
   heading: PropTypes.node.isRequired,
-
   /**
   * The node to display the heading with
   */
   headingAs: PropTypes.node,
-
   /**
   * The heading html class
   */
   headingClassName: PropTypes.string,
-
   /**
   * The JSX-Written, css styles to apply to the element.
   */
   headingStyle: PropTypes.objectOf(PropTypes.string),
-
   /**
    * Extra props to pass to the heading
    */
-
   /* eslint-disable react/forbid-prop-types -- Does not apply to a full prop object */
   headingProps: PropTypes.object,
-
   /* eslint-enable react/forbid-prop-types */
 
   /**
    *  The subtitle
    */
   subtitle: PropTypes.node,
-
   /**
    * The node to display the heading with
    */
   subtitleAs: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-
   /**
    * The subtitle html class
    */
   subtitleClassName: PropTypes.string,
-
   /**
    * The JSX-Written, css styles to apply to the element.
    */
   subtitleStyle: PropTypes.objectOf(PropTypes.string),
-
   /**
    * Extra props to pass to the subtitle
    */
-
   /* eslint-disable react/forbid-prop-types -- Does not apply to a full prop object */
   subtitleProps: PropTypes.object
   /* eslint-enable react/forbid-prop-types */
-
 };
+
 Title.defaultProps = {
   headingAs: 'h1',
   subtitleAs: 'p'

package/dist/es/b/index.js

@@ -1,10 +1,6 @@
 export { Button } from "./Button";
-export { Segment } from "./Segment";
-export { Card } from "./Card";
-export { Title } from "./Title";
-export { Page } from "./Page";
-export { QuestionDropdown } from "./QuestionDropdown";
-export { ThemeSelector } from "./ThemeSelector";
 export { Logo } from "./Logo";
+export { Page } from "./Page";
 export { SocialMediaButton } from "./SocialMediaButton";
-export { Metrics } from "./Metrics";
+export { ThemeSelector } from "./ThemeSelector";
+export { Title } from "./Title";

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
 };