@newtonschool/grauity 0.0.13 → 0.1.10

package/ui/elements/Alert/constants.ts

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

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

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

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

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

package/ui/elements/AlertBanner/AlertBanner.tsx

@@ -0,0 +1,137 @@
+import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
+
+import Button from '../Button';
+import ButtonGroup from '../Button/ButtonGroup';
+import IconButton from '../Button/IconButton';
+import { Icon } from '../Icon';
+import {
+    StyledAlertBannerContainer,
+    StyledAlertBannerContent,
+} from './AlertBanner.styles';
+import { ALERT_BANNER_TYPES, ALERT_BANNER_VARIANTS } from './constants';
+import { AlertBannerProps } from './types';
+import {
+    getAlertBannerColors,
+    getAlertIconName,
+    getButtonVariantFromAlertBannerTypeVariant,
+} from './utils';
+
+/**
+ * An alert banner is a component that is used to typically display
+ * important messages to the user. It is normally shown at the top of the page.
+ */
+const AlertBanner = forwardRef<HTMLDivElement, AlertBannerProps>(
+    (props, ref) => {
+        const {
+            type,
+            variant,
+            icon,
+            padding,
+            top,
+            bottom,
+            left,
+            right,
+            position,
+            children,
+            justifyContent,
+            onClose,
+            showCloseButton,
+            actionButtons,
+        } = props;
+        const iconName = getAlertIconName(icon, variant);
+        const { iconColor, textColor, backgroundColor, borderColor } =
+            getAlertBannerColors(variant, type);
+
+        const hasButton = !!actionButtons?.length || showCloseButton;
+
+        return (
+            <StyledAlertBannerContainer
+                type={type}
+                variant={variant}
+                padding={
+                    padding || hasButton
+                        ? 'var(--spacing-4px, 4px) var(--spacing-8px, 8px)'
+                        : 'var(--spacing-8px, 8px)'
+                }
+                top={top}
+                bottom={bottom}
+                left={left}
+                right={right}
+                position={position}
+                ref={ref}
+                textColor={textColor}
+                backgroundColor={backgroundColor}
+                borderColor={borderColor}
+                justifyContent={justifyContent}
+                role="alert"
+            >
+                <StyledAlertBannerContent color={textColor}>
+                    {iconName && (
+                        <Icon
+                            name={iconName}
+                            color={iconColor || 'inherit'}
+                            size="20"
+                        />
+                    )}
+                    {children}
+                </StyledAlertBannerContent>
+
+                {hasButton && (
+                    <ButtonGroup>
+                        {actionButtons?.map((button) => (
+                            <Button {...button} key={button.variant}>{button.children}</Button>
+                        ))}
+                        {showCloseButton && (
+                            <IconButton
+                                variant={getButtonVariantFromAlertBannerTypeVariant(
+                                    variant,
+                                    type
+                                )}
+                                icon="close"
+                                onClick={onClose}
+                                size="small"
+                            />
+                        )}
+                    </ButtonGroup>
+                )}
+            </StyledAlertBannerContainer>
+        );
+    }
+);
+
+AlertBanner.defaultProps = {
+    type: 'default',
+    variant: 'primary',
+    icon: null,
+    padding: 'var(--spacing-8px, 8px)',
+    top: null,
+    bottom: null,
+    left: null,
+    right: null,
+    position: 'static',
+    children: null,
+    justifyContent: 'center',
+    onClose: undefined,
+    showCloseButton: false,
+    actionButtons: [],
+};
+
+AlertBanner.propTypes = {
+    type: PropTypes.oneOf(ALERT_BANNER_TYPES),
+    variant: PropTypes.oneOf(ALERT_BANNER_VARIANTS),
+    padding: PropTypes.string,
+    icon: PropTypes.any,
+    top: PropTypes.string,
+    bottom: PropTypes.string,
+    left: PropTypes.string,
+    right: PropTypes.string,
+    position: PropTypes.oneOf(['static', 'fixed', 'absolute', 'relative']),
+    children: PropTypes.node,
+    justifyContent: PropTypes.oneOf(['center', 'space-between', 'space-around']),
+    onClose: PropTypes.func,
+    showCloseButton: PropTypes.bool,
+    actionButtons: PropTypes.array,
+};
+
+export default AlertBanner;