@newtonschool/grauity 0.1.11 → 1.0.1

package/ui/elements/Modal/Modal.tsx

@@ -1,179 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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

@@ -1,184 +0,0 @@
-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

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