@newtonschool/grauity 0.1.11 → 1.0.1

package/ui/elements/Alert/Alert.test.tsx

@@ -1,81 +0,0 @@
-import '@testing-library/jest-dom';
-
-import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
-
-import { ButtonProps } from '../Button';
-import Alert from './Alert';
-import { AlertProps } from './types';
-
-describe('Alert', () => {
-    const defaultProps: AlertProps = {
-        type: 'default',
-        variant: 'primary',
-        title: 'This is an alert',
-        description: 'This is a description',
-        showCloseButton: true,
-        onClose: jest.fn(),
-    };
-
-    it('renders the alert title and description', () => {
-        render(<Alert {...defaultProps} />);
-        expect(screen.getByText('This is an alert')).toBeInTheDocument();
-        expect(screen.getByText('This is a description')).toBeInTheDocument();
-    });
-
-    it('renders the alert close button', () => {
-        render(<Alert {...defaultProps} />);
-        expect(screen.getByRole('button')).toBeInTheDocument();
-    });
-
-    it('calls onClose when close button is clicked', () => {
-        render(<Alert {...defaultProps} />);
-        fireEvent.click(screen.getByRole('button'));
-        expect(defaultProps.onClose).toHaveBeenCalledTimes(1);
-    });
-
-    it('renders with different types and variants', () => {
-        render(<Alert {...defaultProps} type="outlined" variant="success" />);
-        expect(screen.getByText('This is an alert')).toBeInTheDocument();
-    });
-
-    it('renders with a custom icon', () => {
-        render(<Alert {...defaultProps} icon="bell" />);
-        const customIcon = screen.queryAllByTestId('testid-icon');
-        const targetIcon = customIcon.filter(
-            (icon) => icon.classList.contains('grauity-icon-bell')
-        );
-        expect(targetIcon.length).toBe(1);
-    });
-
-    it('renders without icon when stated explicitly', () => {
-        render(<Alert {...defaultProps} icon={null} />);
-        const icons = screen.queryAllByTestId('testid-icon');
-        const nonCloseIcons = icons.filter(
-            (icon) => !icon.classList.contains('grauity-icon-close')
-        );
-        expect(nonCloseIcons.length).toBe(0);
-    });
-
-    it('renders action buttons', () => {
-        const actionButtons: ButtonProps[] = [
-            { children: 'Button 1', variant: 'primary', size: 'small' },
-        ];
-        render(<Alert {...defaultProps} actionButtons={actionButtons} />);
-        expect(screen.getByText('Button 1')).toBeInTheDocument();
-    });
-
-    it('calls action button onClick', () => {
-        const actionButtons: ButtonProps[] = [
-            {
-                children: 'Button 1',
-                variant: 'primary',
-                size: 'small',
-                onClick: jest.fn(),
-            },
-        ];
-        render(<Alert {...defaultProps} actionButtons={actionButtons} />);
-        fireEvent.click(screen.getByText('Button 1'));
-        expect(actionButtons[0].onClick).toHaveBeenCalledTimes(1);
-    });
-});

package/ui/elements/Alert/Alert.tsx

@@ -1,153 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { forwardRef, useId } from 'react';
-
-import {
-    getAlertBannerColors,
-    getAlertIconName,
-    getButtonVariantFromAlertBannerTypeVariant,
-} from '../AlertBanner/utils';
-import Button from '../Button';
-import ButtonGroup from '../Button/ButtonGroup';
-import IconButton from '../Button/IconButton';
-import { Icon } from '../Icon';
-import {
-    StyledAlertBody,
-    StyledAlertContainer,
-    StyledAlertContent,
-    StyledAlertDescription,
-    StyledAlertTitle,
-} from './Alert.styles';
-import { ALERT_TYPES, ALERT_VARIANTS } from './constants';
-import { AlertProps } from './types';
-
-/**
- * An alert component is used to display important messages to the user.
- */
-const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
-    const {
-        type,
-        variant,
-        icon,
-        title,
-        description,
-        top,
-        bottom,
-        left,
-        right,
-        position,
-        onClose,
-        showCloseButton,
-        actionButtons,
-        maxWidth,
-        inlineButtons,
-    } = props;
-    const id = useId();
-    const iconName = getAlertIconName(icon, variant);
-    const { iconColor, textColor, backgroundColor, borderColor } =
-        getAlertBannerColors(variant, type);
-
-    const hasButton = !!actionButtons?.length || showCloseButton;
-
-    return (
-        <StyledAlertContainer
-            position={position}
-            top={top}
-            bottom={bottom}
-            left={left}
-            right={right}
-            backgroundColor={backgroundColor}
-            borderColor={borderColor}
-            ref={ref}
-            role="alert"
-            aria-labelledby={`alert-title-${id}`}
-            aria-describedby={`alert-description-${id}`}
-            maxWidth={maxWidth}
-        >
-            {iconName && (
-                <Icon
-                    name={iconName}
-                    color={iconColor || 'inherit'}
-                    size="20"
-                />
-            )}
-            <StyledAlertBody inlineButtons={inlineButtons}>
-                <StyledAlertContent>
-                    {title && (
-                        <StyledAlertTitle
-                            textColor={textColor}
-                            id={`alert-title-${id}`}
-                        >
-                            {title}
-                        </StyledAlertTitle>
-                    )}
-                    {description && (
-                        <StyledAlertDescription
-                            textColor={textColor}
-                            id={`alert-description-${id}`}
-                        >
-                            {description}
-                        </StyledAlertDescription>
-                    )}
-                </StyledAlertContent>
-                {hasButton && (
-                    <ButtonGroup>
-                        {actionButtons?.map((button) => (
-                            <Button {...button} key={button.variant}>
-                                {button.children}
-                            </Button>
-                        ))}
-                    </ButtonGroup>
-                )}
-            </StyledAlertBody>
-            {showCloseButton && (
-                <IconButton
-                    icon="close"
-                    variant={getButtonVariantFromAlertBannerTypeVariant(
-                        variant,
-                        type
-                    )}
-                    onClick={onClose}
-                    size="small"
-                />
-            )}
-        </StyledAlertContainer>
-    );
-});
-
-Alert.defaultProps = {
-    type: 'default',
-    variant: 'primary',
-    icon: null,
-    title: 'This is an alert',
-    description: 'This is a description',
-    top: null,
-    bottom: null,
-    left: null,
-    right: null,
-    position: 'static',
-    onClose: undefined,
-    showCloseButton: false,
-    actionButtons: [],
-    inlineButtons: false,
-    maxWidth: '440px',
-};
-
-Alert.propTypes = {
-    type: PropTypes.oneOf(ALERT_TYPES),
-    variant: PropTypes.oneOf(ALERT_VARIANTS),
-    icon: PropTypes.any,
-    title: PropTypes.string,
-    description: PropTypes.string,
-    top: PropTypes.string,
-    bottom: PropTypes.string,
-    left: PropTypes.string,
-    right: PropTypes.string,
-    position: PropTypes.oneOf(['static', 'fixed', 'absolute', 'relative']),
-    onClose: PropTypes.func,
-    showCloseButton: PropTypes.bool,
-    actionButtons: PropTypes.array,
-    inlineButtons: PropTypes.bool,
-    maxWidth: PropTypes.string,
-};
-
-export default Alert;

package/ui/elements/Alert/constants.ts

@@ -1,169 +0,0 @@
-import { grauityIconName } from '../../core';
-import { BUTTON_VARIANTS_ENUM } from '../Button';
-
-export enum ALERT_TYPES_ENUM {
-    DEFAULT = 'default', // Colorless background, colored icon & text
-    OUTLINED = 'outlined', // Light colored background with outline, colored icon & text
-    FILLED = 'filled', // Colored background, white icon & text
-}
-
-export enum ALERT_VARIANTS_ENUM {
-    PRIMARY = 'primary',
-    SUCCESS = 'success',
-    WARNING = 'warning',
-    ERROR = 'error',
-    DEFAULT = 'default',
-}
-
-export const ERRONEOUS_ALERT_VARIANTS = [
-    ALERT_VARIANTS_ENUM.WARNING,
-    ALERT_VARIANTS_ENUM.ERROR,
-];
-
-export const ALERT_VARIANTS = [
-    ALERT_VARIANTS_ENUM.PRIMARY,
-    ALERT_VARIANTS_ENUM.SUCCESS,
-    ALERT_VARIANTS_ENUM.WARNING,
-    ALERT_VARIANTS_ENUM.ERROR,
-    ALERT_VARIANTS_ENUM.DEFAULT,
-];
-
-export const ALERT_TYPES = [
-    ALERT_TYPES_ENUM.DEFAULT,
-    ALERT_TYPES_ENUM.OUTLINED,
-    ALERT_TYPES_ENUM.FILLED,
-];
-
-export const DEFAULT_ALERT_VARIANT_ICON_MAPPING: Record<
-    ALERT_VARIANTS_ENUM,
-    grauityIconName
-> = {
-    [ALERT_VARIANTS_ENUM.PRIMARY]: 'info-circle',
-    [ALERT_VARIANTS_ENUM.SUCCESS]: 'check-circle',
-    [ALERT_VARIANTS_ENUM.WARNING]: 'exclamation-triangle',
-    [ALERT_VARIANTS_ENUM.ERROR]: 'exclamation-circle',
-    [ALERT_VARIANTS_ENUM.DEFAULT]: 'info-circle',
-};
-
-export const ALERT_COLOR_MAPPINGS = {
-    [ALERT_TYPES_ENUM.DEFAULT]: {
-        [ALERT_VARIANTS_ENUM.PRIMARY]: {
-            iconColor: 'var(--text-brand, #0673F9)',
-            textColor: 'var(--text-primary, #16191D)',
-            backgroundColor: 'var(--bg-primary, #FFF)',
-            borderColor: 'var(--border, #E1E5EA)',
-        },
-        [ALERT_VARIANTS_ENUM.SUCCESS]: {
-            iconColor: 'var(--text-success, #007A51)',
-            textColor: 'var(--text-primary, #16191D)',
-            backgroundColor: 'var(--bg-primary, #FFF)',
-            borderColor: 'var(--border, #E1E5EA)',
-        },
-        [ALERT_VARIANTS_ENUM.WARNING]: {
-            iconColor: 'var(--text-warning, #DE5A02)',
-            textColor: 'var(--text-primary, #16191D)',
-            backgroundColor: 'var(--bg-primary, #FFF)',
-            borderColor: 'var(--border, #E1E5EA)',
-        },
-        [ALERT_VARIANTS_ENUM.ERROR]: {
-            iconColor: 'var(--text-error, #D22D3A)',
-            textColor: 'var(--text-primary, #16191D)',
-            backgroundColor: 'var(--bg-primary, #FFF)',
-            borderColor: 'var(--border, #E1E5EA)',
-        },
-        [ALERT_VARIANTS_ENUM.DEFAULT]: {
-            iconColor: 'var(--text-primary, #16191D)',
-            textColor: 'var(--text-primary, #16191D)',
-            backgroundColor: 'var(--bg-primary, #FFF)',
-            borderColor: 'var(--border, #E1E5EA)',
-        },
-    },
-    [ALERT_TYPES_ENUM.OUTLINED]: {
-        [ALERT_VARIANTS_ENUM.PRIMARY]: {
-            iconColor: 'var(--text-brand, #0673F9)',
-            textColor: 'var(--text-brand, #0673F9)',
-            backgroundColor: 'var(--bg-brand, #E5F1FF)',
-            borderColor: 'var(--border-brand, #94C4FF)',
-        },
-        [ALERT_VARIANTS_ENUM.SUCCESS]: {
-            iconColor: 'var(--text-success, #007A51)',
-            textColor: 'var(--text-success, #007A51)',
-            backgroundColor: 'var(--bg-success, #D9FCED)',
-            borderColor: 'var(--border-success, #ACF7D3)',
-        },
-        [ALERT_VARIANTS_ENUM.WARNING]: {
-            iconColor: 'var(--text-warning, #DE5A02)',
-            textColor: 'var(--text-warning, #DE5A02)',
-            backgroundColor: 'var(--bg-warning, #FFF1E5)',
-            borderColor: 'var(--border-warning, #FFD2BA)',
-        },
-        [ALERT_VARIANTS_ENUM.ERROR]: {
-            iconColor: 'var(--text-error, #D22D3A)',
-            textColor: 'var(--text-error, #D22D3A)',
-            backgroundColor: 'var(--bg-error, #FFE5E7)',
-            borderColor: 'var(--border-error, #FBBBBF)',
-        },
-        [ALERT_VARIANTS_ENUM.DEFAULT]: {
-            iconColor: 'var(--text-primary, #16191D)',
-            textColor: 'var(--text-primary, #16191D)',
-            backgroundColor: 'var(--bg-secondary, #F6F7F9)',
-            borderColor: 'var(--border, #E1E5EA)',
-        },
-    },
-    [ALERT_TYPES_ENUM.FILLED]: {
-        [ALERT_VARIANTS_ENUM.PRIMARY]: {
-            iconColor: 'var(--text-action, #FFF)',
-            textColor: 'var(--text-action, #FFF)',
-            backgroundColor: 'var(--bg-action-brand, #0673F9)',
-            borderColor: 'transparent',
-        },
-        [ALERT_VARIANTS_ENUM.SUCCESS]: {
-            iconColor: 'var(--text-action, #FFF)',
-            textColor: 'var(--text-action, #FFF)',
-            backgroundColor: 'var(--bg-action-success, #007A51)',
-            borderColor: 'transparent',
-        },
-        [ALERT_VARIANTS_ENUM.WARNING]: {
-            iconColor: 'var(--text-action, #FFF)',
-            textColor: 'var(--text-action, #FFF)',
-            backgroundColor: 'var(--bg-action-warning, #DE5A02)',
-            borderColor: 'transparent',
-        },
-        [ALERT_VARIANTS_ENUM.ERROR]: {
-            iconColor: 'var(--text-action, #FFF)',
-            textColor: 'var(--text-action, #FFF)',
-            backgroundColor: 'var(--bg-action-error, #D22D3A)',
-            borderColor: 'transparent',
-        },
-        [ALERT_VARIANTS_ENUM.DEFAULT]: {
-            iconColor: 'var(--text-action, #FFF)',
-            textColor: 'var(--text-action, #FFF)',
-            backgroundColor: 'var(--bg-action, #16191D)',
-            borderColor: 'transparent',
-        },
-    },
-};
-
-export const ALERT_TYPE_AND_VARIANT_TO_BUTTON_VARIANT_MAPPING = {
-    [ALERT_TYPES_ENUM.DEFAULT]: {
-        [ALERT_VARIANTS_ENUM.PRIMARY]: BUTTON_VARIANTS_ENUM.TERTIARY_OUTLINED,
-        [ALERT_VARIANTS_ENUM.SUCCESS]: BUTTON_VARIANTS_ENUM.TERTIARY_OUTLINED,
-        [ALERT_VARIANTS_ENUM.WARNING]: BUTTON_VARIANTS_ENUM.TERTIARY_OUTLINED,
-        [ALERT_VARIANTS_ENUM.ERROR]: BUTTON_VARIANTS_ENUM.TERTIARY_OUTLINED,
-        [ALERT_VARIANTS_ENUM.DEFAULT]: BUTTON_VARIANTS_ENUM.TERTIARY_OUTLINED,
-    },
-    [ALERT_TYPES_ENUM.OUTLINED]: {
-        [ALERT_VARIANTS_ENUM.PRIMARY]: BUTTON_VARIANTS_ENUM.PRIMARY_OUTLINED,
-        [ALERT_VARIANTS_ENUM.SUCCESS]: BUTTON_VARIANTS_ENUM.SUCCESS_OUTLINED,
-        [ALERT_VARIANTS_ENUM.WARNING]: BUTTON_VARIANTS_ENUM.WARNING_OUTLINED,
-        [ALERT_VARIANTS_ENUM.ERROR]: BUTTON_VARIANTS_ENUM.DANGER_OUTLINED,
-        [ALERT_VARIANTS_ENUM.DEFAULT]: BUTTON_VARIANTS_ENUM.TERTIARY_OUTLINED,
-    },
-    [ALERT_TYPES_ENUM.FILLED]: {
-        [ALERT_VARIANTS_ENUM.PRIMARY]: BUTTON_VARIANTS_ENUM.PRIMARY,
-        [ALERT_VARIANTS_ENUM.SUCCESS]: BUTTON_VARIANTS_ENUM.SUCCESS,
-        [ALERT_VARIANTS_ENUM.WARNING]: BUTTON_VARIANTS_ENUM.WARNING,
-        [ALERT_VARIANTS_ENUM.ERROR]: BUTTON_VARIANTS_ENUM.DANGER,
-        [ALERT_VARIANTS_ENUM.DEFAULT]: BUTTON_VARIANTS_ENUM.SECONDARY,
-    },
-};

package/ui/elements/Alert/index.ts

@@ -1,6 +0,0 @@
-export { default } from './Alert';
-export { ALERT_VARIANTS_ENUM } from './constants';
-export { ALERT_VARIANTS } from './constants';
-export { ALERT_TYPES_ENUM } from './constants';
-export { ALERT_TYPES } from './constants';
-export type { AlertProps } from './types';

package/ui/elements/Alert/types.ts

@@ -1,150 +0,0 @@
-import React from 'react';
-
-import { grauityIconName } from '../../core';
-import { ButtonProps } from '../Button';
-
-export type AlertType = 'default' | 'outlined' | 'filled';
-
-export type AlertVariant =
-    | 'primary'
-    | 'success'
-    | 'warning'
-    | 'error'
-    | 'default';
-
-export interface AlertProps {
-    /**
-     * Type of the alert
-     *
-     * Available choices: `'default'`, `'outlined'`, `'filled'`
-     *
-     * Default: `'default'`
-     * */
-    type?: AlertType;
-
-    /**
-     * Variant of the alert
-     *
-     * Available choices: `'primary'`, `'secondary'`, `'tertiary'`, `'success'`, `'danger'`, `'warning'`
-     *
-     * Default: `'primary'`
-     * */
-    variant?: AlertVariant;
-
-    /**
-     * Alert icon, used to override the default icons used in the alert
-     *
-     * Use value `auto` to automatically select the icon based on the variant (error vs checkmark icon)
-     *
-     * Default: `null`
-     * */
-    icon?: grauityIconName | 'auto';
-
-    /**
-     * Alert title
-     * */
-    title?: React.ReactNode;
-
-    /**
-     * Alert description
-     * */
-    description?: React.ReactNode;
-    /**
-     * Alert top position, useful for fixed positioning
-     *
-     * Default: `null`
-     * */
-    top?: string;
-
-    /**
-     * Alert bottom position, useful for fixed positioning
-     *
-     * Default: `null`
-     * */
-    bottom?: string;
-
-    /**
-     * Alert left position, useful for fixed positioning
-     *
-     * Default: `null`
-     * */
-    left?: string;
-
-    /**
-     * Alert right position, useful for fixed positioning
-     *
-     * Default: `null`
-     * */
-    right?: string;
-
-    /**
-     * Alert position, useful for fixed positioning
-     *
-     * Default: `'static'`
-     * */
-    position?: 'static' | 'fixed' | 'absolute' | 'relative';
-
-    /**
-     * Alert close button click handler
-     * */
-    onClose?: () => void;
-
-    /**
-     * Show close button
-     *
-     * Default: `false`
-     * */
-    showCloseButton?: boolean;
-
-    /**
-     * Alert action buttons.
-     *
-     * Type: ButtonProps[]
-     * */
-    actionButtons?: ButtonProps[];
-
-    /**
-     * Show action buttons inline
-     *
-     * Default: `false`
-     * */
-    inlineButtons?: boolean;
-
-    /**
-     * Maximum width of the alert
-     *
-     * Default: `'440px'`
-     * */
-    maxWidth?: string;
-}
-
-export interface AlertContainerProps {
-    position: string;
-    top: string;
-    bottom: string;
-    left: string;
-    right: string;
-    backgroundColor: string;
-    borderColor: string;
-    ref: React.Ref<HTMLDivElement>;
-    role: string;
-    children: React.ReactNode;
-    maxWidth: string;
-}
-
-export interface AlertBodyProps {
-    inlineButtons: boolean;
-    children: React.ReactNode;
-}
-
-export interface AlertTitleProps {
-    textColor: string;
-    children: React.ReactNode;
-    id: string;
-}
-
-export interface AlertDescriptionProps {
-    textColor: string;
-    children: React.ReactNode;
-    id?: string;
-}

package/ui/elements/AlertBanner/AlertBanner.styles.ts

@@ -1,35 +0,0 @@
-import styled from 'styled-components';
-
-import { AlertBannerContainerProps } from './types';
-
-export const StyledAlertBannerContainer = styled.div<AlertBannerContainerProps>`
-    display: flex;
-    gap: var(--spacing-12px, 12px);
-    width: 100%;
-    min-height: var(--spacing-40px, 40px);
-    align-items: center;
-    flex-shrink: 0;
-
-    position: ${({ position }) => position};
-    top: ${({ top }) => top};
-    bottom: ${({ bottom }) => bottom};
-    left: ${({ left }) => left};
-    right: ${({ right }) => right};
-    padding: ${({ padding }) => padding};
-    justify-content: ${({ justifyContent }) => justifyContent};
-
-    color: ${({ textColor }) => textColor};
-    background-color: ${({ backgroundColor }) => backgroundColor};
-`;
-
-export const StyledAlertBannerContent = styled.div<any>`
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-8px, 8px);
-    color: ${({ color }) => color};
-    font-family: var(--font-family, 'Mona Sans');
-    font-size: var(--font-size-14px, 14px);
-    font-weight: var(--font-weight-semibold, 600);
-    line-height: 120%;
-    letter-spacing: 0.5px;
-`;

package/ui/elements/AlertBanner/AlertBanner.test.tsx

@@ -1,70 +0,0 @@
-import '@testing-library/jest-dom';
-
-import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
-
-import AlertBanner from './AlertBanner';
-
-describe('AlertBanner', () => {
-    it('renders the alert banner text', () => {
-        render(<AlertBanner>Test Title</AlertBanner>);
-        expect(screen.getByText('Test Title')).toBeInTheDocument();
-    });
-
-    it('renders the alert banner action buttons', () => {
-        render(
-            <AlertBanner
-                actionButtons={[
-                    { children: 'Button 1', variant: 'primary', size: 'small' },
-                ]}
-            >
-                Test Title
-            </AlertBanner>
-        );
-        expect(screen.getByText('Test Title')).toBeInTheDocument();
-        expect(screen.getByText('Button 1')).toBeInTheDocument();
-    });
-
-    it('renders the alert banner close button', () => {
-        const onClose = jest.fn();
-        render(
-            <AlertBanner showCloseButton onClose={onClose}>
-                Test Title
-            </AlertBanner>
-        );
-        expect(screen.getByText('Test Title')).toBeInTheDocument();
-        expect(screen.getByRole('button')).toBeInTheDocument();
-    });
-
-    it('renders with different types and variants', () => {
-        render(
-            <AlertBanner type="outlined" variant="success">
-                Success Alert
-            </AlertBanner>
-        );
-        expect(screen.getByText('Success Alert')).toBeInTheDocument();
-    });
-
-    it('renders with a custom icon', () => {
-        render(<AlertBanner icon="bell">Alert with Custom Icon</AlertBanner>);
-        expect(screen.getByText('Alert with Custom Icon')).toBeInTheDocument();
-        expect(screen.getByTestId('testid-icon')).toBeInTheDocument();
-    });
-
-    it('renders without icon when stated explicitly', () => {
-        render(<AlertBanner icon={null}>Alert without Icon</AlertBanner>);
-        expect(screen.getByText('Alert without Icon')).toBeInTheDocument();
-        expect(screen.queryByTestId('testid-icon')).not.toBeInTheDocument();
-    });
-
-    it('calls onClose when close button is clicked', () => {
-        const onClose = jest.fn();
-        render(
-            <AlertBanner showCloseButton onClose={onClose}>
-                Closable Alert
-            </AlertBanner>
-        );
-        fireEvent.click(screen.getByRole('button'));
-        expect(onClose).toHaveBeenCalledTimes(1);
-    });
-});