@newtonschool/grauity 0.0.13 → 0.1.10

package/ui/elements/Modal/Modal.tsx

@@ -0,0 +1,179 @@
+import PropTypes from 'prop-types';
+import React, { forwardRef, useId, useImperativeHandle, useRef } from 'react';
+
+import {
+    useClickAway,
+    useDisableBodyScroll,
+    useKeyboardEvent,
+} from '../../../hooks';
+import { IconButton } from '../Button';
+import {
+    StyledModal,
+    StyledModalAction,
+    StyledModalBanner,
+    StyledModalBody,
+    StyledModalDescription,
+    StyledModalDivider,
+    StyledModalMain,
+    StyledModalTitle,
+    StyledModalWrapper,
+} from './Modal.styles';
+import { ModalProps } from './types';
+
+/**
+ * A modal is used to display content that temporarily blocks
+ * interactions with the main view of a site or to get user attention
+ * on a specific action or information.
+ */
+const Modal = forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
+    const {
+        banner,
+        title,
+        description,
+        body,
+        action,
+        width,
+        height,
+        minHeight,
+        onHide,
+        mobileBottomFullWidth,
+        modalPadding,
+        modalBodyMargin,
+        showCloseButton,
+        hideOnClickAway,
+        blurBackground,
+    } = props;
+    const modalRef = useRef<HTMLDivElement>(null);
+
+    useImperativeHandle(ref, () => modalRef.current);
+
+    useDisableBodyScroll();
+
+    useKeyboardEvent(() => {
+        if (hideOnClickAway) {
+            onHide();
+        }
+    }, ['Escape']);
+
+    useClickAway(modalRef, () => {
+        if (hideOnClickAway) {
+            onHide();
+        }
+    });
+
+    const id = useId();
+
+    return (
+        <StyledModalWrapper blurBackground={blurBackground} data-testid="testid-modalwrapper">
+            <StyledModal
+                onClick={(e: Event) => e.stopPropagation()}
+                ref={modalRef}
+                width={width}
+                height={height}
+                minHeight={minHeight}
+                mobileBottomFullWidth={mobileBottomFullWidth}
+                modalPadding={modalPadding}
+                aria-labelledby={`modal-title-${id}`}
+                aria-describedby={`modal-description-${id}`}
+                aria-modal="true"
+                role="dialog"
+                data-testid="testid-modal"
+            >
+                <StyledModalMain>
+                    {showCloseButton && (
+                        <StyledModalAction justifyContent="end">
+                            <IconButton
+                                onClick={onHide}
+                                variant="secondary-outlined"
+                                icon="close"
+                                ariaLabel="Close"
+                            />
+                        </StyledModalAction>
+                    )}
+
+                    {banner && <StyledModalBanner>{banner}</StyledModalBanner>}
+
+                    {title && (
+                        <StyledModalTitle id={`modal-title-${id}`}>
+                            {title}
+                        </StyledModalTitle>
+                    )}
+
+                    {description && (
+                        <StyledModalDescription id={`modal-description-${id}`}>
+                            {description}
+                        </StyledModalDescription>
+                    )}
+
+                    {body && (
+                        <StyledModalBody modalBodyMargin={modalBodyMargin}>
+                            {body}
+                        </StyledModalBody>
+                    )}
+                </StyledModalMain>
+
+                {action && <StyledModalAction>{action}</StyledModalAction>}
+            </StyledModal>
+        </StyledModalWrapper>
+    );
+}) as React.ForwardRefExoticComponent<
+    ModalProps & React.RefAttributes<HTMLDivElement>
+> & {
+    Wrapper: typeof StyledModalWrapper;
+    Modal: typeof StyledModal;
+    Main: typeof StyledModalMain;
+    Banner: typeof StyledModalBanner;
+    Title: typeof StyledModalTitle;
+    Description: typeof StyledModalDescription;
+    Body: typeof StyledModalBody;
+    Action: typeof StyledModalAction;
+    Divider: typeof StyledModalDivider;
+};
+
+Modal.propTypes = {
+    banner: PropTypes.string || PropTypes.node,
+    title: PropTypes.string || PropTypes.node,
+    description: PropTypes.string,
+    body: PropTypes.string || PropTypes.node,
+    action: PropTypes.string || PropTypes.node,
+    hideOnClickAway: PropTypes.bool,
+    blurBackground: PropTypes.bool,
+    onHide: PropTypes.func,
+    mobileBottomFullWidth: PropTypes.bool,
+    modalPadding: PropTypes.string,
+    modalBodyMargin: PropTypes.string,
+    width: PropTypes.string,
+    height: PropTypes.string,
+    minHeight: PropTypes.string,
+    showCloseButton: PropTypes.bool,
+};
+
+Modal.defaultProps = {
+    banner: null,
+    title: null,
+    description: null,
+    body: null,
+    action: null,
+    hideOnClickAway: false,
+    blurBackground: false,
+    onHide: () => {},
+    mobileBottomFullWidth: false,
+    modalPadding: '20px',
+    modalBodyMargin: null,
+    width: null,
+    height: null,
+    minHeight: null,
+    showCloseButton: false,
+};
+
+Modal.Wrapper = StyledModalWrapper;
+Modal.Modal = StyledModal;
+Modal.Main = StyledModalMain;
+Modal.Banner = StyledModalBanner;
+Modal.Title = StyledModalTitle;
+Modal.Description = StyledModalDescription;
+Modal.Body = StyledModalBody;
+Modal.Action = StyledModalAction;
+Modal.Divider = StyledModalDivider;
+
+export default Modal;

package/ui/elements/Modal/MultiStepModal/index.test.tsx

@@ -0,0 +1,116 @@
+import '@testing-library/jest-dom';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { MultiStepModalProps } from '../types';
+import MultiStepModal from '.';
+
+describe('MultiStepModal', () => {
+    const defaultProps: MultiStepModalProps = {
+        modalSteps: [
+            {
+                banner: (
+                    <img
+                        src="https://via.placeholder.com/300x100"
+                        alt="Banner"
+                    />
+                ),
+                title: 'Step 1',
+                description: 'Description for step 1',
+                body: 'Body for step 1',
+                nextButtonText: 'Next',
+                showBackButton: false,
+                buttonVariant: 'primary',
+            },
+            {
+                banner: 'Banner 2',
+                title: 'Step 2',
+                description: 'Description for step 2',
+                body: <div>Body for step 2</div>,
+                nextButtonText: 'Finish',
+                showBackButton: true,
+                buttonVariant: 'secondary',
+            },
+        ],
+        hideOnClickAway: false,
+        blurBackground: false,
+        onHide: jest.fn(),
+        onFinalStep: jest.fn(),
+        mobileBottomFullWidth: false,
+        onStepChange: jest.fn(),
+        showModalStepsPagination: true,
+        modalPadding: '20px',
+        modalBodyMargin: '12px 0 0 0',
+        width: '500px',
+        height: 'auto',
+        minHeight: 'auto',
+        showCloseButton: true,
+    };
+
+    it('renders the first step correctly', () => {
+        render(<MultiStepModal {...defaultProps} />);
+        expect(screen.getByText('Step 1')).toBeInTheDocument();
+        expect(screen.getByText('Description for step 1')).toBeInTheDocument();
+        expect(screen.getByAltText('Banner')).toBeInTheDocument();
+    });
+
+    it('navigates to the next step when the next button is clicked', () => {
+        render(<MultiStepModal {...defaultProps} />);
+        fireEvent.click(screen.getByText('Next'));
+        expect(screen.getByText('Step 2')).toBeInTheDocument();
+        expect(screen.getByText('Description for step 2')).toBeInTheDocument();
+        expect(screen.getByText('Body for step 2')).toBeInTheDocument();
+    });
+
+    it('navigates to the previous step when the back button is clicked', () => {
+        render(<MultiStepModal {...defaultProps} />);
+        fireEvent.click(screen.getByText('Next'));
+        fireEvent.click(screen.getByText('Back'));
+        expect(screen.getByText('Step 1')).toBeInTheDocument();
+        expect(screen.getByText('Description for step 1')).toBeInTheDocument();
+        expect(screen.getByAltText('Banner')).toBeInTheDocument();
+    });
+
+    it('calls onStepChange when the step changes', () => {
+        const onStepChange = jest.fn();
+        render(<MultiStepModal {...defaultProps} onStepChange={onStepChange} />);
+        fireEvent.click(screen.getByText('Next'));
+        expect(onStepChange).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onFinalStep and onHide when the final step button is clicked', () => {
+        const onFinalStep = jest.fn();
+        const onHide = jest.fn();
+        render(
+            <MultiStepModal
+                {...defaultProps}
+                onFinalStep={onFinalStep}
+                onHide={onHide}
+            />
+        );
+        fireEvent.click(screen.getByText('Next'));
+        fireEvent.click(screen.getByText('Finish'));
+        expect(onFinalStep).toHaveBeenCalledTimes(1);
+        expect(onHide).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders the close button when stated', () => {
+        render(<MultiStepModal {...defaultProps} showCloseButton />);
+        expect(screen.getByTestId('testid-iconbutton')).toBeInTheDocument();
+    });
+
+    it('renders the close button and calls onHide when clicked', () => {
+        const onHide = jest.fn();
+        render(<MultiStepModal {...defaultProps} showCloseButton onHide={onHide} />);
+        fireEvent.click(screen.getByTestId('testid-iconbutton'));
+        expect(onHide).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not render the close button when showCloseButton is false', () => {
+        render(<MultiStepModal {...defaultProps} showCloseButton={false} />);
+        expect(
+            screen.queryByTestId('testid-iconbutton')
+        ).not.toBeInTheDocument();
+    });
+});

package/ui/elements/Modal/MultiStepModal/index.tsx

@@ -0,0 +1,184 @@
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+
+import useClickAway from '../../../../hooks/useClickAway';
+import useDisableBodyScroll from '../../../../hooks/useDisableBodyScroll';
+import Button from '../../Button';
+import Modal from '../Modal';
+import {
+    StyledModalPaginatedActions,
+    StyledModalPagination,
+    StyledModalPaginationItem,
+} from '../Modal.styles';
+import { MultiStepModalProps } from '../types';
+
+/**
+ * A multi-step modal is a modal that has multiple steps.
+ */
+const MultiStepModal = ({
+    modalSteps,
+    showModalStepsPagination,
+    hideOnClickAway,
+    blurBackground,
+    onHide,
+    onFinalStep,
+    mobileBottomFullWidth,
+    onStepChange,
+    modalPadding,
+    modalBodyMargin,
+    width,
+    height,
+    minHeight,
+    showCloseButton,
+}: MultiStepModalProps) => {
+    const [currentStep, setCurrentStep] = useState(0);
+    const hasMounted = useRef(false);
+    const modalRef = useRef(null);
+
+    const {
+        banner,
+        title,
+        description,
+        body,
+        nextButtonText,
+        showBackButton,
+        buttonVariant,
+    } = modalSteps[currentStep] || {};
+
+    const isLastStep = currentStep === modalSteps.length - 1;
+    const isFirstStep = currentStep === 0;
+
+    useDisableBodyScroll();
+
+    useClickAway(modalRef, () => {
+        if (hideOnClickAway) {
+            onHide();
+        }
+    });
+
+    useEffect(() => {
+        if (
+            hasMounted.current &&
+            onStepChange &&
+            typeof onStepChange === 'function'
+        ) {
+            onStepChange();
+        } else {
+            hasMounted.current = true;
+        }
+    }, [currentStep]);
+
+    if (modalSteps.length === 0) {
+        return null;
+    }
+
+    return (
+        <Modal
+            banner={banner}
+            title={title}
+            description={description}
+            body={body}
+            hideOnClickAway={hideOnClickAway}
+            blurBackground={blurBackground}
+            onHide={onHide}
+            mobileBottomFullWidth={mobileBottomFullWidth}
+            modalPadding={modalPadding}
+            modalBodyMargin={modalBodyMargin}
+            width={width}
+            height={height}
+            minHeight={minHeight}
+            showCloseButton={showCloseButton}
+            action={
+                <StyledModalPaginatedActions>
+                    {showModalStepsPagination && modalSteps.length > 1 && (
+                        <StyledModalPagination>
+                            {modalSteps.map((item, index) => (
+                                <StyledModalPaginationItem
+                                    key={`modal-pagination-item-${index + 1}`}
+                                    active={index === currentStep}
+                                    onClick={() => setCurrentStep(index)}
+                                />
+                            ))}
+                        </StyledModalPagination>
+                    )}
+
+                    <Modal.Action>
+                        {showBackButton && !isFirstStep && (
+                            <Button
+                                variant="secondary-outlined"
+                                onClick={() => {
+                                    setCurrentStep(currentStep - 1);
+                                }}
+                                icon="arrow-right"
+                                iconPosition="left"
+                            >
+                                Back
+                            </Button>
+                        )}
+
+                        {nextButtonText && (
+                            <Button
+                                variant={buttonVariant || 'secondary'}
+                                fullWidth
+                                onClick={() => {
+                                    if (isLastStep) {
+                                        onFinalStep();
+                                        onHide();
+                                    } else {
+                                        setCurrentStep(currentStep + 1);
+                                    }
+                                }}
+                                icon={isLastStep ? null : 'arrow-left'}
+                                iconPosition="right"
+                            >
+                                {nextButtonText}
+                            </Button>
+                        )}
+                    </Modal.Action>
+                </StyledModalPaginatedActions>
+            }
+        />
+    );
+};
+
+MultiStepModal.propTypes = {
+    modalSteps: PropTypes.array,
+    showModalStepsPagination: PropTypes.bool,
+    hideOnClickAway: PropTypes.bool,
+    blurBackground: PropTypes.bool,
+    onHide: PropTypes.func,
+    onFinalStep: PropTypes.func,
+    mobileBottomFullWidth: PropTypes.bool,
+    onStepChange: PropTypes.func,
+    modalPadding: PropTypes.string,
+    modalBodyMargin: PropTypes.string,
+    width: PropTypes.string,
+    height: PropTypes.string,
+    minHeight: PropTypes.string,
+    showCloseButton: PropTypes.bool,
+};
+
+MultiStepModal.defaultProps = {
+    modalSteps: [],
+    showModalStepsPagination: true,
+    hideOnClickAway: false,
+    blurBackground: false,
+    onHide: () => {},
+    onFinalStep: () => {},
+    mobileBottomFullWidth: false,
+    onStepChange: () => {},
+    modalPadding: '20px',
+    modalBodyMargin: '12px 0 0 0',
+    width: null,
+    height: null,
+    minHeight: null,
+    showCloseButton: false,
+};
+
+MultiStepModal.PaginatedActions = StyledModalPaginatedActions;
+MultiStepModal.Pagination = StyledModalPagination;
+MultiStepModal.PaginationItem = StyledModalPaginationItem;
+
+export { MultiStepModalProps };
+
+export default MultiStepModal;

package/ui/elements/Modal/index.ts

@@ -0,0 +1,4 @@
+export { default as ConfirmationDialog } from './ConfirmationDialog';
+export { default } from './Modal';
+export { default as MultiStepModal } from './MultiStepModal';
+export type { ConfirmationDialogProps, ModalProps } from './types';