@newtonschool/grauity 0.1.11 → 1.0.1

package/ui/elements/Modal/ConfirmationDialog/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 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

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

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

@@ -1,117 +0,0 @@
-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);
-    });
-});