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

package/src/ui/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.jsx

@@ -0,0 +1,145 @@
+/* @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 'ui/a'
+import { Logo } from 'ui/b'
+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,
+  color,
+  // ...otherProps
+}) => {
+  const {
+    setPrevStepIndex,
+    // setNextStepIndex,
+    currentStep,
+    isFirstStep,
+    // currentStep,
+    // currentStepIndex,
+  } = useContentSlides()
+
+  const mobilePreviousStep = () => {
+    if (customPrevStep) {
+      customPrevStep()
+    } else {
+      setPrevStepIndex(stepsBackwards)
+    }
+  }
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        // baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      {
+        (currentStep?.progress > 0)
+      && <ProgressBar progress={currentStep.progress} attached height=".4em" color={color} className="y-background1 b-dark-y" />
+      }
+      <div className={styleNames.elementContent}>
+        <div className="left">
+          {(!isFirstStep && !hideBackIcon) && (
+          <span
+            className="prev-button pointer"
+            onClick={mobilePreviousStep}
+            role="button"
+            onKeyDown={mobilePreviousStep}
+            tabIndex={0}
+          >
+            {'<--'}
+          </span>
+          )}
+        </div>
+        <div className="title">
+          <span className="md-h lg-h">
+            { currentStep?.title }
+          </span>
+          <Logo className="xs-h sm-h y-transparent" height="1.1em" color={logoColor} />
+        </div>
+        {/*
+      <div className="right">
+        { !isLastStep
+        && (
+        <span className="pointer" onClick={setNextStepIndex}>
+          &gt;
+        </span>
+        )}
+      </div>
+      */}
+      </div>
+    </div>
+  )
+}
+
+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/src/ui/c/ContentSlides/common/HorizontalMenu/index.js

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

package/src/ui/c/ContentSlides/common/Navigator/Navigator.jsx

@@ -0,0 +1,150 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import PropTypes from 'prop-types'
+
+import { Button } from 'ui/b'
+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 {
+    setPrevStepIndex,
+    setNextStepIndex,
+    isFirstStep,
+    isLastStep,
+    isDebug,
+    // currentStep,
+    // currentStepIndex,
+  } = useContentSlides()
+
+  return (
+    <div
+      id={id}
+      className={[
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      { !isFirstStep
+        ? (
+          <Button
+            className={`x-${previousColor} prev`}
+            isSimple
+            onClick={() => {
+              if (customPrevStep) {
+                customPrevStep()
+              } else {
+                setPrevStepIndex(stepsBackwards)
+              }
+            }}
+          >
+            Previous
+          </Button>
+        )
+        : <span />}
+      { !isLastStep
+        ? (
+          <Button
+            className={`x-${nextColor} next`}
+            disabled={!isDebug && !canMoveForward}
+            isLoading={isLoading}
+            onClick={() => {
+              if (customNextStep) {
+                customNextStep()
+              } else {
+                setNextStepIndex(stepsForward)
+              }
+            }}
+            isCompact
+          >
+            Next
+          </Button>
+        )
+        : <span />}
+    </div>
+  )
+}
+
+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/src/ui/c/ContentSlides/common/Navigator/index.js

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

package/src/ui/c/ContentSlides/common/Sidebar/Sidebar.jsx

@@ -0,0 +1,135 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import { IconList } from 'ui/a'
+import { ThemeSelector } from 'ui/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 = ({
+  id,
+  className:userClassName,
+  style,
+  header,
+  footer,
+  // ...otherProps
+}) => {
+  const {
+    steps,
+    // setPrevStepIndex,
+    // setNextStepIndex,
+    setStepIndex,
+    // isFirstStep,
+    // isLastStep,
+    // currentStep,
+    currentStepIndex,
+  } = useContentSlides()
+
+  return (
+    <nav
+      id={id}
+      className={[
+
+        // baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      { header
+        ? (
+          <header>
+            { header }
+
+          </header>
+        )
+        : <span />}
+      <div className={styleNames.elementContent}>
+        <IconList>
+          { steps.map((step, i) => (
+            /* eslint-disable no-nested-ternary -- bc of math inequality cases */
+            <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 }
+            </IconList.Item>
+            /* eslint-enable no-nested-ternary */
+          )) }
+        </IconList>
+      </div>
+      { (footer || true)
+        ? (
+          <footer>
+            {footer}
+            <ThemeSelector className="x-heading" />
+          </footer>
+        )
+        : <span />}
+    </nav>
+  )
+}
+
+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/src/ui/c/ContentSlides/common/Sidebar/index.js

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

package/src/ui/c/ContentSlides/common/Slide/Slide.jsx

@@ -0,0 +1,87 @@
+/* @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 = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+
+  index,
+  // ...otherProps
+}) => {
+  const {
+    currentStepIndex,
+  } = useContentSlides()
+
+  const isActive = currentStepIndex === index
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        // baseClassName,
+        isActive && styleNames.modifierActive,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <div className="wrapper">
+        <div className="content">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+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/src/ui/c/ContentSlides/common/Slide/index.js

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

package/src/ui/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/src/ui/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'