@pareto-engineering/design-system 4.0.0-alpha.9 → 4.0.0

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

@@ -1,216 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { useInsertionEffect, useReducer } from 'react'
-
-import PropTypes from 'prop-types'
-
-import { useHistory } from 'react-router-dom'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-import ContentSlidesContext from './Context'
-
-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,
-        currentStepIndex:action.payload,
-      }
-
-    case 'SET_CURRENT_STEP':
-      return {
-        ...state,
-        ...action.payload,
-      }
-
-    case 'SET_EXTRA_CONTEXT':
-      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
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  const history = useHistory()
-
-  const [state, dispatch] = useReducer(reducer, {
-    currentStepIndex:0,
-  })
-
-  const {
-  // currentSlide,
-    currentStepIndex,
-    isFirstStep,
-    isLastStep,
-  } = state
-
-  const setNextStepIndex = (step = 1) => {
-    if (!isLastStep) {
-      dispatch({
-        type   :'SET_STEP_INDEX',
-        payload:currentStepIndex + step,
-      })
-    }
-  }
-
-  const setPrevStepIndex = (step = 1) => {
-    if (!isFirstStep) {
-      dispatch({
-        type   :'SET_STEP_INDEX',
-        payload:currentStepIndex - step,
-      })
-    }
-  }
-
-  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:{
-        currentStep:steps[index],
-        isFirstStep:index === 0,
-        isLastStep :index === (steps.length - 1),
-      },
-    })
-  }
-
-  useInsertionEffect(() => {
-    setCurrentStep(currentStepIndex)
-  },
-  [currentStepIndex])
-
-  return (
-    <ContentSlidesContext.Provider
-      value={{
-        steps,
-        setNextStepIndex,
-        setPrevStepIndex,
-        setStepIndex,
-        dispatch,
-        isDebug,
-        ...state,
-      }}
-    >
-      <div
-        id={id}
-        className={[
-          baseClassName,
-          componentClassName,
-          userClassName,
-          simple && 'simple',
-          'u1 md-u2',
-        ]
-          .filter((e) => e)
-          .join(' ')}
-        style={style}
-      >
-        {children}
-      </div>
-    </ContentSlidesContext.Provider>
-  )
-}
-
-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
- */
-  steps:PropTypes.arrayOf(
-    PropTypes.shape({
-      id      :PropTypes.string.isRequired,
-      title   :PropTypes.string.isRequired,
-      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
-   */
-  isDebug:PropTypes.bool,
-}
-
-ContentSlides.defaultProps = {
-  simple :false,
-  isDebug:false,
-}
-
-ContentSlides.Sidebar = Sidebar
-ContentSlides.HorizontalMenu = HorizontalMenu
-ContentSlides.Slide = Slide
-ContentSlides.Navigator = Navigator
-
-export default ContentSlides

package/src/ui/c/ContentSlides/Context.js

@@ -1,3 +0,0 @@
-import * as React from 'react'
-
-export default React.createContext({})

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

@@ -1,145 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import PropTypes from 'prop-types'
-import styleNames from '@pareto-engineering/bem/exports'
-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-hard-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

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

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

@@ -1,150 +0,0 @@
-/* @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

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

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

@@ -1,135 +0,0 @@
-/* @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/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 {
-    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
-        ? (
-          <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