@pareto-engineering/design-system 0.0.1-alpha.9 → 0.0.4-testing-id.0

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

@@ -0,0 +1,117 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem';
+import { ProgressBar } from "../../../../a";
+import { Logo } from "../../../../b";
+import useContentSlides from "../../useContentSlides";
+
+// Local Definitions
+
+// const baseClassName = styleNames.base
+
+const componentClassName = 'horizontal-menu';
+
+/**
+ * This is the component description.
+ */
+const HorizontalMenu = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    logoColor,
+    hideBackIcon,
+    stepsBackwards,
+    customPrevStep,
+    color
+    // ...otherProps
+  } = _ref;
+  const {
+    setPrevStepIndex,
+    // setNextStepIndex,
+    currentStep,
+    isFirstStep
+    // currentStep,
+    // currentStepIndex,
+  } = useContentSlides();
+  const mobilePreviousStep = () => {
+    if (customPrevStep) {
+      customPrevStep();
+    } else {
+      setPrevStepIndex(stepsBackwards);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [
+    // baseClassName,
+
+    componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, currentStep?.progress > 0 && /*#__PURE__*/React.createElement(ProgressBar, {
+    progress: currentStep.progress,
+    attached: true,
+    height: ".4em",
+    color: color,
+    className: "y-background1 b-dark-y"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styleNames.elementContent
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "left"
+  }, !isFirstStep && !hideBackIcon && /*#__PURE__*/React.createElement("span", {
+    className: "prev-button pointer",
+    onClick: mobilePreviousStep,
+    role: "button",
+    onKeyDown: mobilePreviousStep,
+    tabIndex: 0
+  }, '<--')), /*#__PURE__*/React.createElement("div", {
+    className: "title"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "md-h lg-h"
+  }, 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,
+  /**
+   * String that will represent color for Progress bar
+   */
+  color: PropTypes.string
+};
+HorizontalMenu.defaultProps = {
+  logoColor: 'paragraph',
+  stepsBackwards: 1,
+  color: 'main2'
+};
+export default HorizontalMenu;

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

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as HorizontalMenu } from "./HorizontalMenu";

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

@@ -0,0 +1,119 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from "../../../../b";
+import useContentSlides from "../../useContentSlides";
+
+// Local Definitions
+
+const componentClassName = 'navigator';
+
+/**
+ * This is the component description.
+ */
+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,
+    // currentStepIndex,
+  } = useContentSlides();
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, !isFirstStep ? /*#__PURE__*/React.createElement(Button, {
+    className: `x-${previousColor} prev`,
+    isSimple: true,
+    onClick: () => {
+      if (customPrevStep) {
+        customPrevStep();
+      } else {
+        setPrevStepIndex(stepsBackwards);
+      }
+    }
+  }, "Previous") : /*#__PURE__*/React.createElement("span", null), !isLastStep ? /*#__PURE__*/React.createElement(Button, {
+    className: `x-${nextColor} next`,
+    disabled: !isDebug && !canMoveForward,
+    isLoading: isLoading,
+    onClick: () => {
+      if (customNextStep) {
+        customNextStep();
+      } 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
+   */
+  isLoading: PropTypes.bool
+};
+Navigator.defaultProps = {
+  canMoveForward: true,
+  previousColor: 'main2',
+  nextColor: 'main2',
+  stepsForward: 1,
+  stepsBackwards: 1
+};
+export default Navigator;

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

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as Navigator } from "./Navigator";

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

@@ -0,0 +1,85 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+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
+
+// const baseClassName = styleNames.base
+
+const componentClassName = 'sidebar';
+
+/**
+ * This is the component description.
+ */
+const Sidebar = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    header,
+    footer
+    // ...otherProps
+  } = _ref;
+  const {
+    steps,
+    // setPrevStepIndex,
+    // setNextStepIndex,
+    setStepIndex,
+    // isFirstStep,
+    // isLastStep,
+    // currentStep,
+    currentStepIndex
+  } = useContentSlides();
+  return /*#__PURE__*/React.createElement("nav", {
+    id: id,
+    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,
+    icon: currentStepIndex === i ? 'L' : i < currentStepIndex ? 'I' : undefined,
+    iconHover: i < currentStepIndex ? 'L' : undefined,
+    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, {
+    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
+};
+export default Sidebar;

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

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as Sidebar } from "./Sidebar";

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

@@ -0,0 +1,66 @@
+/* @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 useContentSlides from "../../useContentSlides";
+
+// const baseClassName = styleNames.base
+
+const componentClassName = 'slide';
+
+/**
+ * This is the component description.
+ */
+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,
+    isActive && styleNames.modifierActive, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    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
+};
+export default Slide;

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

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as Slide } from "./Slide";

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

@@ -0,0 +1,4 @@
+export { Sidebar } from "./Sidebar";
+export { HorizontalMenu } from "./HorizontalMenu";
+export { Slide } from "./Slide";
+export { Navigator } from "./Navigator";

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

@@ -0,0 +1,4 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as ContentSlides } from "./ContentSlides";
+export { default as useContentSlides } from "./useContentSlides";
+export { default as ContentSlidesContext } from "./Context";