feat: implement Path and PathStep components

src/components/Path/context.js

@@ -0,0 +1,4 @@
+import React from 'react';
+
+export const PathContext = React.createContext();
+export const { Provider, Consumer } = PathContext;

src/components/Path/helpers/getChildStepsNodes.js

@@ -0,0 +1,6 @@
+export default function getChildStepsNodes(ref) {
+    if (ref) {
+        return ref.querySelectorAll('li[role="option"]');
+    }
+    return [];
+}

src/components/Path/helpers/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export { default as getChildStepsNodes } from './getChildStepsNodes';

src/components/Path/index.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode, MouseEvent } from 'react';
+import { BaseProps } from '../types';
+
+export interface PathProps extends BaseProps {
+    currentStepName?: string;
+    onClick?: (stepName: string) => void;
+    children?: ReactNode;
+    id?: string;
+}
+
+export default function(props: PathProps): JSX.Element | null;

src/components/Path/index.js

@@ -0,0 +1,125 @@
+import React, { useCallback, useRef, useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Provider } from './context';
+import isChildRegistered from '../InternalDropdown/helpers/isChildRegistered';
+import insertChildOrderly from '../InternalDropdown/helpers/insertChildOrderly';
+import { getChildStepsNodes } from './helpers';
+import { StyledContainer, StyledStepsList } from './styled';
+
+export default function Path(props) {
+    const { currentStepName, onClick, children, id, className, style } = props;
+    const [hoveredStepName, setHoveredStepName] = useState(null);
+    const [stepsCount, setStepsCount] = useState(0);
+    const [hasErrors, setHasErrors] = useState(false);
+    const registeredSteps = useRef([]);
+    const containerRef = useRef();
+
+    const privateRegisterStep = useCallback((stepRef, stepProps) => {
+        if (isChildRegistered(stepProps.name, registeredSteps.current)) return;
+        const [...nodes] = getChildStepsNodes(containerRef.current);
+        const newStepsList = insertChildOrderly(
+            registeredSteps.current,
+            {
+                ref: stepRef,
+                ...stepProps,
+            },
+            nodes,
+        );
+        registeredSteps.current = newStepsList;
+        setStepsCount(registeredSteps.current.length);
+        setHasErrors(stepProps.hasError);
+    }, []);
+
+    const privateUnregisterStep = useCallback((stepRef, stepName) => {
+        if (!isChildRegistered(stepName, registeredSteps.current)) return;
+        registeredSteps.current = registeredSteps.current.filter(step => step.name !== stepName);
+        setStepsCount(registeredSteps.current.length);
+    }, []);
+
+    const getStepIndex = useCallback(
+        name => registeredSteps.current.findIndex(step => step.name === name),
+        [],
+    );
+
+    const privateGetStepZIndex = useCallback(name => stepsCount - getStepIndex(name), [
+        getStepIndex,
+        stepsCount,
+    ]);
+
+    const privateUpdateStepProps = useCallback(stepProps => {
+        if (!isChildRegistered(stepProps.name, registeredSteps.current)) return;
+        const index = registeredSteps.current.findIndex(
+            registeredStep => registeredStep.name === stepProps.name,
+        );
+        const updatedStep = registeredSteps.current[index];
+        registeredSteps.current[index] = {
+            ...updatedStep,
+            ...stepProps,
+        };
+        setHasErrors(registeredSteps.current.some(step => step.hasError));
+    }, []);
+
+    const context = useMemo(() => {
+        const selectedIndex = registeredSteps.current.findIndex(
+            step => step.name === currentStepName,
+        );
+        const hoveredIndex = registeredSteps.current.findIndex(
+            step => step.name === hoveredStepName,
+        );
+
+        return {
+            selectedIndex,
+            hoveredIndex,
+            someStepHasError: hasErrors,
+            privateGetStepIndex: getStepIndex,
+            privateGetStepZIndex,
+            privateRegisterStep,
+            privateUnregisterStep,
+            privateUpdateStepProps,
+            privateOnClick: onClick,
+            privateUpdateHoveredStep: setHoveredStepName,
+        };
+    }, [
+        currentStepName,
+        getStepIndex,
+        hasErrors,
+        hoveredStepName,
+        onClick,
+        privateGetStepZIndex,
+        privateRegisterStep,
+        privateUnregisterStep,
+        privateUpdateStepProps,
+    ]);
+
+    return (
+        <StyledContainer id={id} className={className} style={style} ref={containerRef}>
+            <StyledStepsList>
+                <Provider value={context}>{children}</Provider>
+            </StyledStepsList>
+        </StyledContainer>
+    );
+}
+
+Path.propTypes = {
+    /** Specifies the current step in path. */
+    currentStepName: PropTypes.string,
+    /** The action triggered when the element is clicked. */
+    onClick: PropTypes.func,
+    /** The content of the Path. */
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.object]),
+    /** The id of the outer element. */
+    id: PropTypes.string,
+    /** A CSS class for the outer element, in addition to the component's base classes. */
+    className: PropTypes.string,
+    /** An object with custom style applied to the outer element. */
+    style: PropTypes.object,
+};
+
+Path.defaultProps = {
+    currentStepName: undefined,
+    onClick: () => {},
+    children: null,
+    id: undefined,
+    className: undefined,
+    style: undefined,
+};

src/components/Path/readme.md

@@ -0,0 +1,56 @@
+##### Path basic example
+
+```js
+
+import React, { useState } from 'react';
+import { Path, PathStep } from 'react-rainbow-components';
+
+
+const BasicPath = () => {
+    const [currentStep, setCurrentStep] = useState('arrived');
+
+    return (
+        <div className="rainbow-p-around_x-large rainbow-align-content_center">
+            <Path currentStepName={currentStep} onClick={setCurrentStep}>
+                <PathStep name="scheduled" label="Scheduled" />
+                <PathStep name="in-progress" label="InProgress" />
+                <PathStep name="arrived" label="Arrived" />
+                <PathStep name="delivered" label="Delivered" />
+            </Path>
+        </div>
+    );
+};
+
+    <BasicPath />
+```
+
+##### Path with error in step
+
+```js
+import React, { useState, useCallback } from 'react';
+import { Path, PathStep } from 'react-rainbow-components';
+
+
+const PathWithErrorInStep = () => {
+    const [currentStep, setCurrentStep] = useState('delivered');
+    const [stepHasError, setStepHasError] = useState(true);
+
+    const handleClick = useCallback(stepName => {
+        setCurrentStep(stepName);
+        setStepHasError(stepName === 'delivered');
+    }, []);
+
+    return (
+        <div className="rainbow-p-around_x-large rainbow-align-content_center">
+            <Path currentStepName={currentStep} onClick={handleClick}>
+                <PathStep name="scheduled" label="Scheduled" />
+                <PathStep name="in-progress" label="InProgress" />
+                <PathStep name="arrived" label="Arrived" />
+                <PathStep name="delivered" label="Delivered" hasError={stepHasError} />
+            </Path>
+        </div>
+    );
+};
+
+    <PathWithErrorInStep />
+```

src/components/Path/styled/index.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const StyledContainer = styled.nav`
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    box-sizing: border-box;
+    padding: 0.25rem;
+`;
+
+export const StyledStepsList = styled.ol`
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    box-sizing: border-box;
+`;

src/components/PathStep/helpers/__test__/getActiveStepIndex.spec.js

@@ -0,0 +1,20 @@
+import getActiveStepIndex from '../getActiveStepIndex';
+
+describe('getActiveStepIndex function', () => {
+    it('should return correct index', () => {
+        const paramsList = [
+            { hoveredIndex: -1, selectedIndex: -1, someStepHasError: false },
+            { hoveredIndex: -1, selectedIndex: -1, someStepHasError: true },
+            { hoveredIndex: -1, selectedIndex: 10, someStepHasError: false },
+            { hoveredIndex: -1, selectedIndex: 10, someStepHasError: true },
+            { hoveredIndex: 5, selectedIndex: -1, someStepHasError: false },
+            { hoveredIndex: 5, selectedIndex: -1, someStepHasError: true },
+            { hoveredIndex: 5, selectedIndex: 10, someStepHasError: false },
+            { hoveredIndex: 5, selectedIndex: 10, someStepHasError: true },
+        ];
+        const results = [-1, -1, 10, -1, 5, 5, 5, 5];
+        paramsList.forEach((params, index) => {
+            expect(getActiveStepIndex(params)).toBe(results[index]);
+        });
+    });
+});

src/components/PathStep/helpers/__test__/isStepSelected.spec.js

@@ -0,0 +1,26 @@
+import isStepSelected from '../isStepSelected';
+
+describe('getActiveStepIndex function', () => {
+    it('should return false', () => {
+        const paramsList = [
+            { hoveredIndex: -1, selectedIndex: -1, index: 2, someStepHasError: false },
+            { hoveredIndex: -1, selectedIndex: -1, index: 2, someStepHasError: true },
+            { hoveredIndex: -1, selectedIndex: 2, index: 2, someStepHasError: true },
+            { hoveredIndex: 5, selectedIndex: -1, index: 2, someStepHasError: true },
+            { hoveredIndex: 5, selectedIndex: -1, index: 2, someStepHasError: false },
+        ];
+        paramsList.forEach(params => {
+            expect(isStepSelected(params)).toBe(false);
+        });
+    });
+    it('should return true', () => {
+        expect(
+            isStepSelected({
+                hoveredIndex: -1,
+                selectedIndex: 2,
+                index: 2,
+                someStepHasError: false,
+            }),
+        ).toBe(true);
+    });
+});

src/components/PathStep/helpers/getActiveStepIndex.js

@@ -0,0 +1,6 @@
+export default function getActiveStepIndex(params) {
+    const { hoveredIndex, someStepHasError, selectedIndex } = params;
+    if (hoveredIndex !== -1) return hoveredIndex;
+    if (someStepHasError) return -1;
+    return selectedIndex;
+}

src/components/PathStep/helpers/index.js

@@ -0,0 +1,2 @@
+export { default as isStepSelected } from './isStepSelected';
+export { default as getActiveStepIndex } from './getActiveStepIndex';

src/components/PathStep/helpers/isStepSelected.js

@@ -0,0 +1,5 @@
+export default function isStepSelected(params) {
+    const { hoveredIndex, someStepHasError, selectedIndex, index } = params;
+    if (hoveredIndex !== -1 || someStepHasError) return false;
+    return selectedIndex === index;
+}

src/components/PathStep/icons/checkMark.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Checkmark = props => {
+    const { className, style } = props;
+    return (
+        <svg
+            fill="currentColor"
+            className={className}
+            style={style}
+            width="1rem"
+            height="1rem"
+            viewBox="0 0 20 20"
+        >
+            <g id="components" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                <g
+                    id="Components-Path-DesignGuidelines"
+                    transform="translate(-185.000000, -899.000000)"
+                    fill="currentColor"
+                    fillRule="nonzero"
+                >
+                    <g id="Group-11" transform="translate(73.000000, 889.000000)">
+                        <g
+                            id="Group-16"
+                            transform="translate(122.000000, 20.000000) rotate(-270.000000) translate(-122.000000, -20.000000) translate(112.000000, 10.000000)"
+                        >
+                            <path
+                                d="M9.98052632,0 C15.4926188,0 19.9610526,4.46843384 19.9610526,9.98052632 C19.9610526,15.4926188 15.4926188,19.9610526 9.98052632,19.9610526 C4.46843384,19.9610526 0,15.4926188 0,9.98052632 C0,4.46843384 4.46843384,0 9.98052632,0 Z M7.60678972,4.07946225 C7.23869632,3.70684592 6.64399109,3.70684592 6.27607005,4.07946225 C5.90797665,4.45225309 5.90797665,5.05454767 6.27607005,5.42716395 L6.27607005,5.42716395 L11.7280227,10.9488666 L9.33472631,13.3727052 C8.96663291,13.745496 8.96663291,14.3477906 9.33472631,14.7204069 C9.70264736,15.0931977 10.2975249,15.0931977 10.665446,14.7204069 L10.665446,14.7204069 L13.7241022,11.6227174 C13.907632,11.4368456 14,11.1928561 14,10.9488666 C14,10.704877 13.907632,10.4608875 13.7241022,10.2750157 L13.7241022,10.2750157 Z"
+                                id="Combined-Shape"
+                            />
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </svg>
+    );
+};
+
+Checkmark.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+};
+
+Checkmark.defaultProps = {
+    className: undefined,
+    style: undefined,
+};
+
+export default Checkmark;

src/components/PathStep/icons/exclamation.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Exclamation = props => {
+    const { className, style } = props;
+    return (
+        <svg
+            fill="currentColor"
+            className={className}
+            style={style}
+            width="1rem"
+            height="1rem"
+            viewBox="0 0 18 18"
+        >
+            <g id="components" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                <g
+                    id="Components-Path-DesignGuidelines"
+                    transform="translate(-909.000000, -628.000000)"
+                    fill="currentColor"
+                    fillRule="nonzero"
+                >
+                    <g id="Group-10" transform="translate(429.000000, 617.000000)">
+                        <g id="cancel" transform="translate(480.000000, 11.000000)">
+                            <path
+                                d="M8.98247368,-1.47082346e-12 C13.9433569,-1.47082346e-12 17.9649474,4.02159045 17.9649474,8.98247368 C17.9649474,13.9433569 13.9433569,17.9649474 8.98247368,17.9649474 C4.02159045,17.9649474 -5.61328761e-13,13.9433569 -5.61328761e-13,8.98247368 C-5.61328761e-13,4.02159045 4.02159045,-1.47082346e-12 8.98247368,-1.47082346e-12 Z M9.16988641,12.2673399 C8.87027215,12.2673399 8.61678887,12.3707789 8.40997849,12.5775893 C8.20343906,12.7846707 8.1,13.0356476 8.1,13.3306555 C8.1,13.6682719 8.20797765,13.9311033 8.42440712,14.1186756 C8.64036241,14.306451 8.89384569,14.4 9.18404408,14.4 C9.46943293,14.4 9.71885181,14.304893 9.9327749,14.1151531 C10.1472399,13.9248035 10.2542015,13.6634624 10.2542015,13.3306555 C10.2542015,13.0355798 10.148256,12.7843997 9.93663608,12.5775893 C9.72474519,12.370508 9.46970389,12.2673399 9.16988641,12.2673399 Z M9.22692354,3.6 C8.88951033,3.6 8.61678887,3.71028081 8.40997849,3.93206174 C8.20343906,4.15309754 8.1,4.46104382 8.1,4.85569738 C8.1,5.14562481 8.12106716,5.62366637 8.16387887,6.2895511 L8.16387887,6.2895511 L8.39223059,9.70629167 C8.43483909,10.1485665 8.50630484,10.4780541 8.60642464,10.6940771 C8.70600252,10.9107776 8.8842266,11.0184843 9.14123237,11.0184843 C9.39295441,11.0184843 9.57395583,10.9069164 9.68342376,10.6836452 C9.79316265,10.459832 9.86442518,10.1389474 9.89761781,9.72024612 L9.89761781,9.72024612 L10.204548,6.20338575 C10.2374697,5.88073987 10.2542015,5.56161648 10.2542015,5.24757359 C10.2542015,4.71554321 10.1850389,4.30747712 10.0473911,4.0243237 C9.90974328,3.74144123 9.63600572,3.6 9.22692354,3.6 Z"
+                                id="Combined-Shape"
+                            />
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </svg>
+    );
+};
+
+Exclamation.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+};
+
+Exclamation.defaultProps = {
+    className: undefined,
+    style: undefined,
+};
+
+export default Exclamation;