@newtonschool/grauity 0.0.13 → 0.1.10

package/ui/elements/Modal/ConfirmationDialog/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 ConfirmationDialog, { ConfirmationDialogProps } from '.';
+
+describe('ConfirmationDialog', () => {
+    const defaultProps: ConfirmationDialogProps = {
+        onConfirm: jest.fn(),
+        onCancel: jest.fn(),
+        title: 'Modal title',
+        description: 'Modal description',
+        confirmText: 'Modal confirmText',
+        cancelText: 'Modal cancelText',
+    };
+
+    it('renders the confirmation dialog title, description and buttons', () => {
+        render(<ConfirmationDialog {...defaultProps} />);
+        expect(screen.getByText('Modal title')).toBeInTheDocument();
+        expect(screen.getByText('Modal description')).toBeInTheDocument();
+        expect(screen.getByText('Modal confirmText')).toBeInTheDocument();
+        expect(screen.getByText('Modal cancelText')).toBeInTheDocument();
+    });
+
+    it('calls onConfirm when confirm button is clicked', () => {
+        render(<ConfirmationDialog {...defaultProps} />);
+        fireEvent.click(screen.getByText('Modal confirmText'));
+        expect(defaultProps.onConfirm).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onCancel when cancel button is clicked', () => {
+        render(<ConfirmationDialog {...defaultProps} />);
+        fireEvent.click(screen.getByText('Modal cancelText'));
+        expect(defaultProps.onCancel).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders the close button when showCloseButton is not falsy', () => {
+        render(<ConfirmationDialog {...defaultProps} showCloseButton />);
+        expect(screen.getByTestId('testid-iconbutton')).toBeInTheDocument();
+    });
+
+    it('does not render the close button when showCloseButton is false', () => {
+        render(
+            <ConfirmationDialog {...defaultProps} showCloseButton={false} />
+        );
+        expect(
+            screen.queryByTestId('testid-iconbutton')
+        ).not.toBeInTheDocument();
+    });
+
+    it('calls onCancel when close button is present and clicked', () => {
+        const onCancelFn = jest.fn();
+        render(
+            <ConfirmationDialog
+                {...defaultProps}
+                showCloseButton
+                onCancel={onCancelFn}
+            />
+        );
+        fireEvent.click(screen.getByTestId('testid-iconbutton'));
+        expect(onCancelFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onCancel when hideOnClickAway is true and Escape button is pressed', () => {
+        const onCancelFn = jest.fn();
+        render(
+            <ConfirmationDialog
+                {...defaultProps}
+                hideOnClickAway
+                onCancel={onCancelFn}
+            />
+        );
+        fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
+        expect(onCancelFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onCancel when hideOnClickAway is false and Escape button is pressed', () => {
+        const onCancelFn = jest.fn();
+        render(
+            <ConfirmationDialog
+                {...defaultProps}
+                hideOnClickAway={false}
+                onCancel={onCancelFn}
+            />
+        );
+        fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
+        expect(onCancelFn).toHaveBeenCalledTimes(0);
+    });
+
+    it('calls onCancel when hideOnClickAway is true and clicked outside the modal', () => {
+        const onCancelFn = jest.fn();
+        render(
+            <ConfirmationDialog
+                {...defaultProps}
+                hideOnClickAway
+                onCancel={onCancelFn}
+            />
+        );
+        fireEvent.mouseDown(document);
+        expect(onCancelFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onCancel when hideOnClickAway is false and clicked outside the modal', () => {
+        const onCancelFn = jest.fn();
+        render(
+            <ConfirmationDialog
+                {...defaultProps}
+                hideOnClickAway={false}
+                onCancel={onCancelFn}
+            />
+        );
+        fireEvent.mouseDown(document);
+        expect(onCancelFn).toHaveBeenCalledTimes(0);
+    });
+});

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

@@ -0,0 +1,151 @@
+import PropTypes from 'prop-types';
+import React, { useId } from 'react';
+
+import { useKeyboardEvent } from '../../../../hooks';
+import useClickAway from '../../../../hooks/useClickAway';
+import useDisableBodyScroll from '../../../../hooks/useDisableBodyScroll';
+import Button, { BUTTON_VARIANTS_ENUM, IconButton } from '../../Button';
+import Modal from '../Modal';
+import { ConfirmationDialogProps } from '../types';
+
+/**
+ * A confirmation dialog is a dialog box that asks the user to confirm an action.
+ */
+const ConfirmationDialog = ({
+    cancelText,
+    confirmText,
+    onCancel,
+    onConfirm,
+    banner,
+    title,
+    description,
+    body,
+    cancelButtonVariant,
+    confirmButtonVariant,
+    showCloseButton,
+    hideOnClickAway,
+    blurBackground,
+    mobileBottomFullWidth,
+}: ConfirmationDialogProps) => {
+    const modalRef = React.useRef(null);
+
+    useDisableBodyScroll();
+
+    useKeyboardEvent(() => {
+        if (hideOnClickAway) {
+            onCancel();
+        }
+    }, ['Escape']);
+
+    useClickAway(modalRef, () => {
+        if (hideOnClickAway) {
+            onCancel();
+        }
+    });
+
+    const id = useId();
+
+    return (
+        <Modal.Wrapper blurBackground={blurBackground}>
+            <Modal.Modal
+                onClick={(e: Event) => e.stopPropagation()}
+                width="auto"
+                height="auto"
+                ref={modalRef}
+                aria-labelledby={`modal-title-${id}`}
+                aria-describedby={`modal-description-${id}`}
+                aria-modal="true"
+                role="dialog"
+                mobileBottomFullWidth={mobileBottomFullWidth}
+            >
+                <Modal.Main>
+                    {showCloseButton && (
+                        <Modal.Action justifyContent="end">
+                            <IconButton
+                                onClick={onCancel}
+                                variant="secondary-outlined"
+                                icon="close"
+                                ariaLabel="Close"
+                            />
+                        </Modal.Action>
+                    )}
+
+                    {banner && <Modal.Banner>{banner}</Modal.Banner>}
+
+                    {title && (
+                        <Modal.Title id={`modal-title-${id}`}>
+                            {title}
+                        </Modal.Title>
+                    )}
+
+                    {description && (
+                        <Modal.Description id={`modal-description-${id}`}>
+                            {description}
+                        </Modal.Description>
+                    )}
+
+                    {body && <Modal.Body>{body}</Modal.Body>}
+                </Modal.Main>
+
+                <Modal.Action>
+                    <Button
+                        variant={
+                            cancelButtonVariant || BUTTON_VARIANTS_ENUM.DANGER
+                        }
+                        fullWidth
+                        onClick={onCancel}
+                    >
+                        {cancelText}
+                    </Button>
+                    <Button
+                        variant={
+                            confirmButtonVariant || BUTTON_VARIANTS_ENUM.SUCCESS
+                        }
+                        fullWidth
+                        onClick={onConfirm}
+                    >
+                        {confirmText}
+                    </Button>
+                </Modal.Action>
+            </Modal.Modal>
+        </Modal.Wrapper>
+    );
+};
+
+ConfirmationDialog.propTypes = {
+    cancelText: PropTypes.string,
+    confirmText: PropTypes.string,
+    onCancel: PropTypes.func,
+    onConfirm: PropTypes.func,
+    banner: PropTypes.string || PropTypes.node,
+    title: PropTypes.string || PropTypes.node,
+    description: PropTypes.string,
+    body: PropTypes.string || PropTypes.node,
+    cancelButtonVariant: PropTypes.string,
+    confirmButtonVariant: PropTypes.string,
+    showCloseButton: PropTypes.bool,
+    hideOnClickAway: PropTypes.bool,
+    blurBackground: PropTypes.bool,
+    mobileBottomFullWidth: PropTypes.bool,
+};
+
+ConfirmationDialog.defaultProps = {
+    cancelText: 'Cancel',
+    confirmText: 'Confirm',
+    banner: null,
+    title: 'Are you sure?',
+    description: 'Please confirm your action.',
+    body: null,
+    onCancel: () => {},
+    onConfirm: () => {},
+    cancelButtonVariant: 'danger',
+    confirmButtonVariant: 'success',
+    showCloseButton: false,
+    hideOnClickAway: false,
+    blurBackground: false,
+    mobileBottomFullWidth: false,
+};
+
+export { ConfirmationDialogProps };
+
+export default ConfirmationDialog;

package/ui/elements/Modal/Modal.styles.ts

@@ -0,0 +1,230 @@
+import { ReactNode } from 'react';
+import styled, { css } from 'styled-components';
+
+import {
+    ModalBodyMainProps,
+    ModalBodyProps,
+    ModalContainerProps,
+    ModalDescriptionProps,
+    ModalPaginationItemProps,
+    ModalTitleProps,
+    ModalWrapperProps,
+} from './types';
+
+export const StyledModalWrapper = styled.div<ModalWrapperProps>`
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--alpha-overlay, rgba(22, 25, 29, 0.8));
+    z-index: 1000;
+    padding: var(--spacing-16px, 16px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: var(--font-family, 'Mona Sans');
+
+    ${({ blurBackground }) =>
+        blurBackground &&
+        css`
+            backdrop-filter: var(--backdrop-blur-8px);
+        `}
+`;
+
+export const StyledModal = styled.div<ModalContainerProps>`
+    border: var(--spacing-1px, 1px) solid var(--border, #e1e5ea);
+    background: var(--bg-primary, #fff);
+    z-index: 1000;
+    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.25);
+    border-radius: var(--corner-radius-12px, 12px);
+    width: 500px;
+    min-width: 400px;
+    height: 525px;
+    padding: var(--spacing-20px, 20px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-16px, 16px);
+
+    @media only screen and (max-width: 600px) {
+        padding: var(--spacing-18px, 18px);
+    }
+
+    ${({ width }) =>
+        width
+            ? css`
+                  width: ${width};
+              `
+            : ''}
+    ${({ height }) =>
+        height
+            ? css`
+                  height: ${height};
+              `
+            : ''}
+    ${({ minHeight }) =>
+        minHeight
+            ? css`
+                  min-height: ${minHeight};
+              `
+            : ''}
+    ${({ mobileBottomFullWidth }) =>
+        mobileBottomFullWidth
+            ? css`
+                  @media only screen and (max-width: 600px) {
+                      position: fixed;
+                      bottom: 0;
+                      border-bottom-left-radius: 0;
+                      border-bottom-right-radius: 0;
+                      max-width: unset;
+                      width: 100%;
+                      padding: var(--spacing-16px, 16px);
+                  }
+              `
+            : ''}
+
+    ${({ modalPadding }) =>
+        css`
+            padding: ${modalPadding};
+        `}
+`;
+
+export const StyledModalMain = styled.div<ModalBodyMainProps>`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    flex: 1;
+    gap: var(--spacing-12px, 12px);
+
+    @media only screen and (max-width: 600px) {
+        padding: 0;
+    }
+`;
+
+export const StyledModalDivider = styled.div`
+    width: 100%;
+    height: var(--spacing-1px, 1px);
+    background: var(--border, #e1e5ea);
+`;
+
+export const StyledModalTitle = styled.h2<ModalTitleProps>`
+    color: var(--text-primary, #16191d);
+    font-weight: var(--font-weight-semibold, 600);
+    font-size: var(--font-size-24px, 24px);
+    line-height: var(--spacing-32px, 32px);
+    margin: var(--spacing-0px, 0px) auto;
+    text-align: center;
+
+    img {
+        width: 100%;
+        border-radius: var(--corner-radius-8px, 8px);
+    }
+
+    @media only screen and (max-width: 600px) {
+        font-size: var(--font-size-16px, 16px);
+        line-height: var(--spacing-24px, 24px);
+    }
+`;
+
+export const StyledModalDescription = styled.div<ModalDescriptionProps>`
+    font-weight: var(--font-weight-450, 450);
+    font-size: var(--font-size-16px, 16px);
+    line-height: var(--spacing-28px, 28px);
+    text-align: center;
+    letter-spacing: 0.2px;
+    color: var(--text-secondary, #5b6271);
+    white-space: pre-line;
+
+    @media only screen and (max-width: 600px) {
+        font-size: var(--font-size-14px, 14px);
+        line-height: var(--spacing-24px, 24px);
+    }
+`;
+
+export const StyledModalBody = styled.div<ModalBodyProps>`
+    font-weight: var(--font-weight-450, 450);
+    font-size: var(--font-size-16px, 16px);
+    line-height: var(--spacing-28px, 28px);
+    text-align: center;
+    letter-spacing: 0.2px;
+    color: var(--text-secondary, #5b6271);
+    margin: ${({ modalBodyMargin }) => modalBodyMargin && modalBodyMargin};
+    white-space: pre-line;
+    width: 100%;
+    flex: 1;
+
+    img {
+        width: 100%;
+        border-radius: var(--corner-radius-8px, 8px);
+    }
+
+    @media only screen and (max-width: 600px) {
+        font-size: var(--font-size-14px, 14px);
+        line-height: var(--spacing-24px, 24px);
+    }
+`;
+
+export const StyledModalPaginatedActions = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    justify-content: center;
+    gap: var(--spacing-12px, 12px);
+`;
+
+export const StyledModalPagination = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-4px, 4px);
+    margin-top: auto;
+`;
+
+export const StyledModalPaginationItem = styled.div<ModalPaginationItemProps>`
+    width: 6px;
+    height: 6px;
+    border-radius: var(--corner-radius-50percent, 50%);
+    background: var(--border, #e1e5ea);
+    cursor: pointer;
+    transition: all 0.1s ease-in-out;
+
+    ${({ active }) =>
+        active
+            ? 'background: var(--text-secondary, #5b6271);'
+            : '&:hover {background: var(--text-disabled, #8C95A6);}'}
+`;
+
+export const StyledModalAction = styled.div<{
+    justifyContent?: string;
+    children: ReactNode;
+}>`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    gap: var(--spacing-8px, 8px);
+
+    ${({ justifyContent }) =>
+        justifyContent &&
+        css`
+            justify-content: ${justifyContent};
+        `}
+
+    img {
+        width: 100%;
+        border-radius: var(--corner-radius-8px, 8px);
+    }
+`;
+
+export const StyledModalBanner = styled.div`
+    width: 100%;
+    position: relative;
+
+    img {
+        width: 100%;
+        border-radius: var(--corner-radius-8px, 8px);
+    }
+`;

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

@@ -0,0 +1,117 @@
+import '@testing-library/jest-dom';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import Button from '../Button';
+import Modal from './Modal';
+import { ModalProps } from './types';
+
+describe('Modal', () => {
+    const defaultProps: ModalProps = {
+        banner: 'Modal banner',
+        title: 'Modal title',
+        description: 'Modal description',
+        body: 'Modal body',
+        action: (
+            <>
+                <Button variant="primary" onClick={() => {}} fullWidth>
+                    Primary Button
+                </Button>
+                <Button variant="secondary" onClick={() => {}} fullWidth>
+                    Secondary Button
+                </Button>
+            </>
+        ),
+        hideOnClickAway: true,
+        blurBackground: false,
+        onHide: () => {},
+        mobileBottomFullWidth: false,
+        modalPadding: '20px',
+        modalBodyMargin: '',
+        width: '500px',
+        height: 'auto',
+        minHeight: 'auto',
+        showCloseButton: true,
+    };
+
+    it('renders the modal banner, title, description and body', () => {
+        render(<Modal {...defaultProps} />);
+        expect(screen.getByText('Modal banner')).toBeInTheDocument();
+        expect(screen.getByText('Modal title')).toBeInTheDocument();
+        expect(screen.getByText('Modal description')).toBeInTheDocument();
+        expect(screen.getByText('Modal body')).toBeInTheDocument();
+    });
+
+    it('renders the modal action buttons', () => {
+        render(<Modal {...defaultProps} />);
+        expect(screen.getByText('Primary Button')).toBeInTheDocument();
+        expect(screen.getByText('Secondary Button')).toBeInTheDocument();
+    });
+
+    it('renders the close button', () => {
+        render(<Modal {...defaultProps} />);
+        expect(screen.getByTestId('testid-iconbutton')).toBeInTheDocument();
+    });
+
+    it('does not render the close button when showCloseButton is false', () => {
+        render(<Modal {...defaultProps} showCloseButton={false} />);
+        expect(
+            screen.queryByTestId('testid-iconbutton')
+        ).not.toBeInTheDocument();
+    });
+
+    it('calls onHide when close button is clicked', () => {
+        const onHideFn = jest.fn();
+        render(<Modal {...defaultProps} onHide={onHideFn} />);
+        fireEvent.click(screen.getByTestId('testid-iconbutton'));
+        expect(onHideFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onHide when Escape button is pressed', () => {
+        const onHideFn = jest.fn();
+        render(<Modal {...defaultProps} onHide={onHideFn} />);
+        fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
+        expect(onHideFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onHide when clicked outside the modal', () => {
+        const onHideFn = jest.fn();
+        render(<Modal {...defaultProps} onHide={onHideFn} />);
+        fireEvent.mouseDown(document);
+        expect(onHideFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onHide when clicked inside the modal', () => {
+        const onHideFn = jest.fn();
+        render(<Modal {...defaultProps} onHide={onHideFn} />);
+        fireEvent.click(screen.getByTestId('testid-modal'));
+        expect(onHideFn).toHaveBeenCalledTimes(0);
+    });
+
+    it('does not call onHide on outside click when hideOnClickAway is false', () => {
+        const onHideFn = jest.fn();
+        render(
+            <Modal
+                {...defaultProps}
+                onHide={onHideFn}
+                hideOnClickAway={false}
+            />
+        );
+        fireEvent.click(screen.getByTestId('testid-modalwrapper'));
+        expect(onHideFn).toHaveBeenCalledTimes(0);
+    });
+
+    it('does not call onHide on Escape key press when hideOnClickAway is false', () => {
+        const onHideFn = jest.fn();
+        render(
+            <Modal
+                {...defaultProps}
+                onHide={onHideFn}
+                hideOnClickAway={false}
+            />
+        );
+        fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
+        expect(onHideFn).toHaveBeenCalledTimes(0);
+    });
+});