@newtonschool/grauity 0.0.13 → 0.1.10

package/ui/elements/Button/ButtonGroup.tsx

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { StyledButtonGroup } from './ButtonGroup.styles';
+import { ButtonGroupProps } from './types';
+
+const ButtonGroup = ({children}: ButtonGroupProps) => (
+    <StyledButtonGroup>
+        {children}
+    </StyledButtonGroup>
+);
+
+ButtonGroup.defaultProps = {
+    children: null,
+} as ButtonGroupProps;
+
+ButtonGroup.propTypes = {
+    children: PropTypes.any,
+};
+
+export default ButtonGroup;

package/ui/elements/Button/IconButton.test.tsx

@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import IconButton from './IconButton';
+import { IconButtonProps } from './types';
+
+describe('IconButton', () => {
+    const defaultProps: IconButtonProps = {
+        icon: 'exclamation-circle',
+        variant: 'primary',
+        size: 'medium',
+        onClick: jest.fn(),
+    };
+
+    it('renders the icon button', () => {
+        render(<IconButton {...defaultProps} />);
+        expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('calls onClick when clicked', () => {
+        render(<IconButton {...defaultProps} />);
+        fireEvent.click(screen.getByRole('button'));
+        expect(defaultProps.onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders with custom class', () => {
+        render(<IconButton {...defaultProps} className="custom-class" />);
+        expect(screen.getByRole('button')).toHaveClass('custom-class');
+    });
+
+    it('renders with custom icon', () => {
+        render(<IconButton {...defaultProps} icon="bell" />);
+        const buttonIcon = screen.getByTestId('testid-icon');
+        expect(buttonIcon).toBeInTheDocument();
+        expect(buttonIcon).toHaveClass('grauity-icon-bell');
+    });
+});

package/ui/elements/Button/IconButton.tsx

@@ -0,0 +1,118 @@
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
+
+import { Icon } from '../Icon';
+import { StyledButton } from './Button.styles';
+import { BUTTON_SIZES, BUTTON_VARIANTS } from './constants';
+import { IconButtonProps } from './types';
+
+/**
+ * An IconButton is a button that contains an icon.
+ */
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+    (props, ref) => {
+        const {
+            variant,
+            size,
+            icon,
+            iconSize,
+            className,
+            disabled,
+            loading,
+            style,
+            onClick,
+            fullWidth,
+            type,
+            ariaLabel,
+            tooltip,
+            tabIndex,
+            onMouseEnter,
+            onMouseLeave,
+            buttonProps,
+        } = props;
+        const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+            if (disabled) {
+                e.preventDefault();
+                return;
+            }
+            onClick(e);
+        };
+
+        const classes = classnames(className);
+
+        return (
+            <StyledButton
+                ref={ref}
+                onClick={handleClick}
+                className={classes}
+                style={style}
+                isLoading={loading}
+                disabled={disabled || loading}
+                variant={variant}
+                size={size}
+                fullWidth={fullWidth}
+                type={type}
+                role="button"
+                aria-label={ariaLabel || icon}
+                title={tooltip}
+                tabIndex={tabIndex}
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}
+                isIconButton
+                {...buttonProps}
+                data-testid="testid-iconbutton"
+            >
+                {icon && !loading && (
+                    <Icon name={icon} color="inherit" size={iconSize || '24'} />
+                )}
+                {loading && (
+                    <Icon
+                        name="load"
+                        color="inherit"
+                        size={iconSize || '24'}
+                        loading={loading}
+                    />
+                )}
+            </StyledButton>
+        );
+    }
+);
+
+IconButton.propTypes = {
+    variant: PropTypes.oneOf(BUTTON_VARIANTS),
+    size: PropTypes.oneOf(BUTTON_SIZES),
+    icon: PropTypes.any,
+    iconSize: PropTypes.any,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    loading: PropTypes.bool,
+    style: PropTypes.object,
+    onClick: PropTypes.func,
+    type: PropTypes.oneOf(['button', 'submit', 'reset']),
+    ariaLabel: PropTypes.string,
+    tooltip: PropTypes.string,
+    tabIndex: PropTypes.number,
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func,
+};
+
+IconButton.defaultProps = {
+    variant: 'primary',
+    size: 'medium',
+    icon: null,
+    iconSize: '24',
+    className: '',
+    disabled: false,
+    loading: false,
+    style: {},
+    onClick: () => {},
+    type: 'button',
+    ariaLabel: '',
+    tooltip: '',
+    tabIndex: 0,
+    onMouseEnter: () => {},
+    onMouseLeave: () => {},
+};
+
+export default IconButton;

package/ui/elements/Button/constants.ts

@@ -0,0 +1,304 @@
+export enum BUTTON_VARIANTS_ENUM {
+    PRIMARY = 'primary',
+    SECONDARY = 'secondary',
+    TERTIARY = 'tertiary',
+    SUCCESS = 'success',
+    DANGER = 'danger',
+    WARNING = 'warning',
+    PRIMARY_OUTLINED = 'primary-outlined',
+    SECONDARY_OUTLINED = 'secondary-outlined',
+    TERTIARY_OUTLINED = 'tertiary-outlined',
+    SUCCESS_OUTLINED = 'success-outlined',
+    DANGER_OUTLINED = 'danger-outlined',
+    WARNING_OUTLINED = 'warning-outlined',
+}
+
+export enum BUTTON_SIZES_ENUM {
+    SMALL = 'small',
+    MEDIUM = 'medium',
+    LARGE = 'large',
+    EXTRA_LARGE = 'extra-large',
+}
+
+export enum BUTTON_ICON_POSITIONS_ENUM {
+    LEFT = 'left',
+    RIGHT = 'right',
+}
+
+export const BUTTON_VARIANTS = [
+    BUTTON_VARIANTS_ENUM.PRIMARY,
+    BUTTON_VARIANTS_ENUM.SECONDARY,
+    BUTTON_VARIANTS_ENUM.TERTIARY,
+    BUTTON_VARIANTS_ENUM.SUCCESS,
+    BUTTON_VARIANTS_ENUM.DANGER,
+    BUTTON_VARIANTS_ENUM.WARNING,
+    BUTTON_VARIANTS_ENUM.PRIMARY_OUTLINED,
+    BUTTON_VARIANTS_ENUM.SECONDARY_OUTLINED,
+    BUTTON_VARIANTS_ENUM.TERTIARY_OUTLINED,
+    BUTTON_VARIANTS_ENUM.SUCCESS_OUTLINED,
+    BUTTON_VARIANTS_ENUM.DANGER_OUTLINED,
+    BUTTON_VARIANTS_ENUM.WARNING_OUTLINED,
+];
+
+export const BUTTON_SIZES = [
+    BUTTON_SIZES_ENUM.SMALL,
+    BUTTON_SIZES_ENUM.MEDIUM,
+    BUTTON_SIZES_ENUM.LARGE,
+    BUTTON_SIZES_ENUM.EXTRA_LARGE,
+];
+
+export const BUTTON_ICON_POSITIONS = [
+    BUTTON_ICON_POSITIONS_ENUM.LEFT,
+    BUTTON_ICON_POSITIONS_ENUM.RIGHT,
+];
+
+export const BUTTON_VARIANT_STYLES_MAPPING = {
+    [BUTTON_VARIANTS_ENUM.PRIMARY]: `
+        background: var(--bg-action-brand, #0673f9);
+        color: #fff;
+        border: none;
+        outline: none;
+
+        &:hover {
+            background: var(--bg-action-brand-hover, #2989ff);
+        }
+
+        &:focus {
+            background: var(--bg-action-brand-hover, #2989ff);
+            outline: var(--spacing-3px, 3px) solid
+                var(--border-brand, #94c4ff);
+        }
+    `,
+    [BUTTON_VARIANTS_ENUM.PRIMARY_OUTLINED]: `
+        background: transparent;
+        color: var(--text-brand, #0673f9);
+        border: none;
+        outline: none;
+
+        &:hover {
+            background: var(--bg-brand, #e5f1ff);
+        }
+
+        &:focus {
+            background: var(--bg-brand, #e5f1ff);
+            outline: var(--spacing-3px, 3px) solid
+                var(--border-brand, #94c4ff);
+        }
+    `,
+    [BUTTON_VARIANTS_ENUM.SECONDARY]: `
+        background: var(--bg-invert-primary, #0b0c0e);
+        color: var(--text-action2, #ffffff);
+        border: none;
+        outline: none;
+
+        &:hover {
+            background: var(--bg-invert-primary-hover, #16191d);
+        }
+
+        &:focus {
+            background: var(--bg-invert-primary-hover, #16191d);
+            outline: var(--spacing-3px, 3px) solid
+                var(--border, #e1e5ea);
+        }
+    `,
+    [BUTTON_VARIANTS_ENUM.SECONDARY_OUTLINED]: `
+        background: transparent;
+        color: var(--text-primary, #16191d);
+        border: none;
+        outline: none;
+
+        &:hover {
+            background: var(--bg-secondary, #f6f7f9);
+        }
+
+        &:focus {
+            background: var(--bg-secondary, #f6f7f9);
+            outline: var(--spacing-3px, 3px) solid
+                var(--border, #e1e5ea);
+        }
+    `,
+    [BUTTON_VARIANTS_ENUM.TERTIARY]: `
+        background: var(--bg-primary, #fff);
+        color: var(--text-primary, #16191d);
+        outline: var(--spacing-1px, 1px) solid
+            var(--border-neutral, #e1e5ea);
+
+        &:hover {
+            background: var(--bg-primary-hover, #f6f7f9);
+        }
+
+        &:focus {
+            background: var(--bg-primary-hover, #f6f7f9);
+            outline: var(--spacing-3px, 3px) solid
+                var(--border, #e1e5ea);
+        }
+    `,
+    [BUTTON_VARIANTS_ENUM.TERTIARY_OUTLINED]: `
+        background: transparent;
+        color: var(--text-primary, #16191d);
+        border: none;
+        outline: none;
+
+        &:hover {
+            background: var(--bg-primary-hover, #f6f7f9);
+        }
+
+        &:focus {
+            background: var(--bg-primary-hover, #f6f7f9);
+            outline: var(--spacing-3px, 3px) solid
+                var(--border, #e1e5ea);
+        }
+    `,
+    [BUTTON_VARIANTS_ENUM.SUCCESS]: `
+        background: var(--bg-action-success, #009965);
+        color: var(--text-action, #ffffff);
+        border: none;
+        outline: none;
+
+        &:hover {
+            background: var(--bg-action-success-hover, #13b97c);
+        }
+
+        &:focus {
+            background: var(--bg-action-success-hover, #13b97c);
+            outline: var(--spacing-3px, 3px) solid
+                var(--border-success, #acf7d3);
+        }
+    `,
+    [BUTTON_VARIANTS_ENUM.SUCCESS_OUTLINED]: `
+        background: transparent;
+        color: var(--text-success, #007a51);
+        border: none;
+        outline: none;
+
+        &:hover {
+            background: var(--bg-success, #d9fced);
+        }
+
+        &:focus {
+            background: var(--bg-success, #d9fced);
+            outline: var(--spacing-3px, 3px) solid
+                var(--border-success, #acf7d3);
+        }
+    `,
+    [BUTTON_VARIANTS_ENUM.DANGER]: `
+        background: var(--bg-action-error, #d22d3a);
+        color: var(--text-action, #ffffff);
+        border: none;
+        outline: none;
+
+        &:hover {
+            background: var(--bg-action-error-hover, #ee3f44);
+        }
+
+        &:focus {
+            background: var(--bg-action-error-hover, #ee3f44);
+            outline: var(--spacing-3px, 3px) solid
+                var(--border-error, #fbbbbf);
+        }
+    `,
+    [BUTTON_VARIANTS_ENUM.DANGER_OUTLINED]: `
+        background: transparent;
+        color: var(--text-error, #d22d3a);
+        border: none;
+        outline: none;
+
+        &:hover {
+            background: var(--bg-error, #ffe5e7);
+        }
+
+        &:focus {
+            background: var(--bg-error, #ffe5e7);
+            outline: var(--spacing-3px, 3px) solid
+                var(--border-error, #fbbbbf);
+        }
+    `,
+    [BUTTON_VARIANTS_ENUM.WARNING]: `
+        background: var(--bg-action-warning, #f37216);
+        color: var(--text-action, #ffffff);
+        border: none;
+        outline: none;
+
+        &:hover {
+            background: var(--bg-action-warning-hover, #fd9254);
+        }
+
+        &:focus {
+            background: var(--bg-action-warning-hover, #fd9254);
+            outline: var(--spacing-3px, 3px) solid
+                var(--border-warning, #ffd2ba);
+        }
+    `,
+    [BUTTON_VARIANTS_ENUM.WARNING_OUTLINED]: `
+        background: transparent;
+        color: var(--text-warning, #de5a02);
+        border: none;
+        outline: none;
+
+        &:hover {
+            background: var(--bg-warning, #fff1e5);
+        }
+
+        &:focus {
+            background: var(--bg-warning, #fff1e5);
+            outline: var(--spacing-3px, 3px) solid
+                var(--border-warning, #ffd2ba);
+        }
+    `,
+};
+
+export const BUTTON_SIZE_STYLES_MAPPING = {
+    [BUTTON_SIZES_ENUM.SMALL]: `
+        padding: var(--spacing-4px, 4px) var(--spacing-8px, 8px);
+        height: var(--spacing-32px, 32px);
+        min-height: var(--spacing-32px, 32px);
+        gap: var(--spacing-4px, 4px);
+    `,
+    [BUTTON_SIZES_ENUM.MEDIUM]: `
+        padding: var(--spacing-8px, 8px) var(--spacing-12px, 12px);
+        height: var(--spacing-40px, 40px);
+        min-height: var(--spacing-40px, 40px);
+    `,
+    [BUTTON_SIZES_ENUM.LARGE]: `
+        padding: var(--spacing-12px, 12px) var(--spacing-16px, 16px);
+        height: var(--spacing-48px, 48px);
+        min-height: var(--spacing-48px, 48px);
+    `,
+    [BUTTON_SIZES_ENUM.EXTRA_LARGE]: `
+        padding: var(--spacing-16px, 16px) var(--spacing-20px, 20px);
+        height: var(--spacing-56px, 56px);
+        min-height: var(--spacing-56px, 56px);
+    `,
+};
+
+export const ICON_BUTTON_SIZE_STYLES_MAPPING = {
+    [BUTTON_SIZES_ENUM.SMALL]: `
+        height: var(--spacing-32px, 32px);
+        min-height: var(--spacing-32px, 32px);
+        gap: var(--spacing-4px, 4px);
+        padding: var(--spacing-4px, 4px);
+        width: var(--spacing-32px, 32px);
+        min-width: var(--spacing-32px, 32px);
+    `,
+    [BUTTON_SIZES_ENUM.MEDIUM]: `
+        height: var(--spacing-40px, 40px);
+        min-height: var(--spacing-40px, 40px);
+        padding: var(--spacing-8px, 8px);
+        width: var(--spacing-40px, 40px);
+        min-width: var(--spacing-40px, 40px);
+    `,
+    [BUTTON_SIZES_ENUM.LARGE]: `
+        height: var(--spacing-48px, 48px);
+        min-height: var(--spacing-48px, 48px);
+        padding: var(--spacing-12px, 12px);
+        width: var(--spacing-48px, 48px);
+        min-width: var(--spacing-48px, 48px);
+    `,
+    [BUTTON_SIZES_ENUM.EXTRA_LARGE]: `
+        height: var(--spacing-56px, 56px);
+        min-height: var(--spacing-56px, 56px);
+        padding: var(--spacing-16px, 16px);
+        width: var(--spacing-56px, 56px);
+        min-width: var(--spacing-56px, 56px);
+    `,
+};

package/ui/elements/Button/index.ts

@@ -0,0 +1,8 @@
+export { default } from './Button';
+export { default as ButtonGroup } from './ButtonGroup';
+export { BUTTON_VARIANTS_ENUM } from './constants';
+export { BUTTON_SIZES_ENUM } from './constants';
+export { BUTTON_VARIANTS } from './constants';
+export { BUTTON_ICON_POSITIONS_ENUM } from './constants';
+export { default as IconButton } from './IconButton';
+export type { ButtonProps, IconButtonProps } from './types';