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,111 @@
+import React, { useCallback, useRef, useState } 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 selectedIndex = registeredSteps.current.findIndex(step => step.name === currentStepName);
+    const hoveredIndex = registeredSteps.current.findIndex(step => step.name === hoveredStepName);
+
+    return (
+        <StyledContainer id={id} className={className} style={style} ref={containerRef}>
+            <StyledStepsList>
+                <Provider
+                    value={{
+                        selectedIndex,
+                        hoveredIndex,
+                        someStepHasError: hasErrors,
+                        privateGetStepIndex: getStepIndex,
+                        privateGetStepZIndex,
+                        privateRegisterStep,
+                        privateUnregisterStep,
+                        privateUpdateStepProps,
+                        privateOnClick: onClick,
+                        privateUpdateHoveredStep: setHoveredStepName,
+                    }}
+                >
+                    {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,60 @@
+##### Path basic example
+
+```js
+
+import React, { useState, useCallback } from 'react';
+import { Path, PathStep } from 'react-rainbow-components';
+
+
+const BasicPath = () => {
+    const [currentStep, setCurrentStep] = useState('arrived');
+
+    const handleClick = useCallback(stepName => {
+        setCurrentStep(stepName);
+    }, []);
+
+    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" />
+            </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,30 @@
+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 512 512"
+        >
+            <path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" />
+        </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,30 @@
+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 512 512"
+        >
+            <path d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z" />
+        </svg>
+    );
+};
+
+Exclamation.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+};
+
+Exclamation.defaultProps = {
+    className: undefined,
+    style: undefined,
+};
+
+export default Exclamation;

src/components/PathStep/index.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { BaseProps } from '../types';
+
+export interface PathStepProps extends BaseProps {
+    name?: string;
+    label?: ReactNode;
+    hasError?: boolean;
+}
+
+export default function(props: PathStepProps): JSX.Element | null;