@newtonschool/grauity 0.0.13 → 0.1.10

package/ui/elements/AlertBanner/constants.ts

@@ -0,0 +1,179 @@
+import { grauityIconName } from '../../core';
+import { BUTTON_VARIANTS_ENUM } from '../Button';
+
+export enum ALERT_BANNER_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_BANNER_VARIANTS_ENUM {
+    PRIMARY = 'primary',
+    SUCCESS = 'success',
+    WARNING = 'warning',
+    ERROR = 'error',
+    DEFAULT = 'default',
+}
+
+export const ERRONEOUS_ALERT_BANNER_VARIANTS = [
+    ALERT_BANNER_VARIANTS_ENUM.WARNING,
+    ALERT_BANNER_VARIANTS_ENUM.ERROR,
+];
+
+export const ALERT_BANNER_VARIANTS = [
+    ALERT_BANNER_VARIANTS_ENUM.PRIMARY,
+    ALERT_BANNER_VARIANTS_ENUM.SUCCESS,
+    ALERT_BANNER_VARIANTS_ENUM.WARNING,
+    ALERT_BANNER_VARIANTS_ENUM.ERROR,
+    ALERT_BANNER_VARIANTS_ENUM.DEFAULT,
+];
+
+export const ALERT_BANNER_TYPES = [
+    ALERT_BANNER_TYPES_ENUM.DEFAULT,
+    ALERT_BANNER_TYPES_ENUM.OUTLINED,
+    ALERT_BANNER_TYPES_ENUM.FILLED,
+];
+
+export const DEFAULT_ALERT_VARIANT_ICON_MAPPING: Record<
+    ALERT_BANNER_VARIANTS_ENUM,
+    grauityIconName
+> = {
+    [ALERT_BANNER_VARIANTS_ENUM.PRIMARY]: 'info-circle',
+    [ALERT_BANNER_VARIANTS_ENUM.SUCCESS]: 'check-circle',
+    [ALERT_BANNER_VARIANTS_ENUM.WARNING]: 'exclamation-triangle',
+    [ALERT_BANNER_VARIANTS_ENUM.ERROR]: 'exclamation-circle',
+    [ALERT_BANNER_VARIANTS_ENUM.DEFAULT]: 'info-circle',
+};
+
+export const ALERT_BANNER_COLOR_MAPPINGS = {
+    [ALERT_BANNER_TYPES_ENUM.DEFAULT]: {
+        [ALERT_BANNER_VARIANTS_ENUM.PRIMARY]: {
+            iconColor: 'var(--text-brand, #0673F9)',
+            textColor: 'var(--text-primary, #16191D)',
+            backgroundColor: 'var(--bg-primary, #FFF)',
+            borderColor: 'var(--border, #E1E5EA)',
+        },
+        [ALERT_BANNER_VARIANTS_ENUM.SUCCESS]: {
+            iconColor: 'var(--text-success, #007A51)',
+            textColor: 'var(--text-primary, #16191D)',
+            backgroundColor: 'var(--bg-primary, #FFF)',
+            borderColor: 'var(--border, #E1E5EA)',
+        },
+        [ALERT_BANNER_VARIANTS_ENUM.WARNING]: {
+            iconColor: 'var(--text-warning, #DE5A02)',
+            textColor: 'var(--text-primary, #16191D)',
+            backgroundColor: 'var(--bg-primary, #FFF)',
+            borderColor: 'var(--border, #E1E5EA)',
+        },
+        [ALERT_BANNER_VARIANTS_ENUM.ERROR]: {
+            iconColor: 'var(--text-error, #D22D3A)',
+            textColor: 'var(--text-primary, #16191D)',
+            backgroundColor: 'var(--bg-primary, #FFF)',
+            borderColor: 'var(--border, #E1E5EA)',
+        },
+        [ALERT_BANNER_VARIANTS_ENUM.DEFAULT]: {
+            iconColor: 'var(--text-primary, #16191D)',
+            textColor: 'var(--text-primary, #16191D)',
+            backgroundColor: 'var(--bg-primary, #FFF)',
+            borderColor: 'var(--border, #E1E5EA)',
+        },
+    },
+    [ALERT_BANNER_TYPES_ENUM.OUTLINED]: {
+        [ALERT_BANNER_VARIANTS_ENUM.PRIMARY]: {
+            iconColor: 'var(--text-brand, #0673F9)',
+            textColor: 'var(--text-brand, #0673F9)',
+            backgroundColor: 'var(--bg-brand, #E5F1FF)',
+            borderColor: 'var(--border-brand, #94C4FF)',
+        },
+        [ALERT_BANNER_VARIANTS_ENUM.SUCCESS]: {
+            iconColor: 'var(--text-success, #007A51)',
+            textColor: 'var(--text-success, #007A51)',
+            backgroundColor: 'var(--bg-success, #D9FCED)',
+            borderColor: 'var(--border-success, #ACF7D3)',
+        },
+        [ALERT_BANNER_VARIANTS_ENUM.WARNING]: {
+            iconColor: 'var(--text-warning, #DE5A02)',
+            textColor: 'var(--text-warning, #DE5A02)',
+            backgroundColor: 'var(--bg-warning, #FFF1E5)',
+            borderColor: 'var(--border-warning, #FFD2BA)',
+        },
+        [ALERT_BANNER_VARIANTS_ENUM.ERROR]: {
+            iconColor: 'var(--text-error, #D22D3A)',
+            textColor: 'var(--text-error, #D22D3A)',
+            backgroundColor: 'var(--bg-error, #FFE5E7)',
+            borderColor: 'var(--border-error, #FBBBBF)',
+        },
+        [ALERT_BANNER_VARIANTS_ENUM.DEFAULT]: {
+            iconColor: 'var(--text-primary, #16191D)',
+            textColor: 'var(--text-primary, #16191D)',
+            backgroundColor: 'var(--bg-secondary, #F6F7F9)',
+            borderColor: 'var(--border, #E1E5EA)',
+        },
+    },
+    [ALERT_BANNER_TYPES_ENUM.FILLED]: {
+        [ALERT_BANNER_VARIANTS_ENUM.PRIMARY]: {
+            iconColor: 'var(--text-action, #FFF)',
+            textColor: 'var(--text-action, #FFF)',
+            backgroundColor: 'var(--bg-action-brand, #0673F9)',
+            borderColor: 'transparent',
+        },
+        [ALERT_BANNER_VARIANTS_ENUM.SUCCESS]: {
+            iconColor: 'var(--text-action, #FFF)',
+            textColor: 'var(--text-action, #FFF)',
+            backgroundColor: 'var(--bg-action-success, #007A51)',
+            borderColor: 'transparent',
+        },
+        [ALERT_BANNER_VARIANTS_ENUM.WARNING]: {
+            iconColor: 'var(--text-action, #FFF)',
+            textColor: 'var(--text-action, #FFF)',
+            backgroundColor: 'var(--bg-action-warning, #DE5A02)',
+            borderColor: 'transparent',
+        },
+        [ALERT_BANNER_VARIANTS_ENUM.ERROR]: {
+            iconColor: 'var(--text-action, #FFF)',
+            textColor: 'var(--text-action, #FFF)',
+            backgroundColor: 'var(--bg-action-error, #D22D3A)',
+            borderColor: 'transparent',
+        },
+        [ALERT_BANNER_VARIANTS_ENUM.DEFAULT]: {
+            iconColor: 'var(--text-action2, #FFF)',
+            textColor: 'var(--text-action2, #FFF)',
+            backgroundColor: 'var(--bg-invert-primary, #16191D)',
+            borderColor: 'transparent',
+        },
+    },
+};
+
+export const ALERT_BANNER_TYPE_AND_VARIANT_TO_BUTTON_VARIANT_MAPPING = {
+    [ALERT_BANNER_TYPES_ENUM.DEFAULT]: {
+        [ALERT_BANNER_VARIANTS_ENUM.PRIMARY]:
+            BUTTON_VARIANTS_ENUM.TERTIARY_OUTLINED,
+        [ALERT_BANNER_VARIANTS_ENUM.SUCCESS]:
+            BUTTON_VARIANTS_ENUM.TERTIARY_OUTLINED,
+        [ALERT_BANNER_VARIANTS_ENUM.WARNING]:
+            BUTTON_VARIANTS_ENUM.TERTIARY_OUTLINED,
+        [ALERT_BANNER_VARIANTS_ENUM.ERROR]:
+            BUTTON_VARIANTS_ENUM.TERTIARY_OUTLINED,
+        [ALERT_BANNER_VARIANTS_ENUM.DEFAULT]:
+            BUTTON_VARIANTS_ENUM.TERTIARY_OUTLINED,
+    },
+    [ALERT_BANNER_TYPES_ENUM.OUTLINED]: {
+        [ALERT_BANNER_VARIANTS_ENUM.PRIMARY]:
+            BUTTON_VARIANTS_ENUM.PRIMARY_OUTLINED,
+        [ALERT_BANNER_VARIANTS_ENUM.SUCCESS]:
+            BUTTON_VARIANTS_ENUM.SUCCESS_OUTLINED,
+        [ALERT_BANNER_VARIANTS_ENUM.WARNING]:
+            BUTTON_VARIANTS_ENUM.WARNING_OUTLINED,
+        [ALERT_BANNER_VARIANTS_ENUM.ERROR]:
+            BUTTON_VARIANTS_ENUM.DANGER_OUTLINED,
+        [ALERT_BANNER_VARIANTS_ENUM.DEFAULT]:
+            BUTTON_VARIANTS_ENUM.TERTIARY_OUTLINED,
+    },
+    [ALERT_BANNER_TYPES_ENUM.FILLED]: {
+        [ALERT_BANNER_VARIANTS_ENUM.PRIMARY]: BUTTON_VARIANTS_ENUM.PRIMARY,
+        [ALERT_BANNER_VARIANTS_ENUM.SUCCESS]: BUTTON_VARIANTS_ENUM.SUCCESS,
+        [ALERT_BANNER_VARIANTS_ENUM.WARNING]: BUTTON_VARIANTS_ENUM.WARNING,
+        [ALERT_BANNER_VARIANTS_ENUM.ERROR]: BUTTON_VARIANTS_ENUM.DANGER,
+        [ALERT_BANNER_VARIANTS_ENUM.DEFAULT]: BUTTON_VARIANTS_ENUM.SECONDARY,
+    },
+};

package/ui/elements/AlertBanner/index.ts

@@ -0,0 +1,6 @@
+export { default } from './AlertBanner';
+export { ALERT_BANNER_VARIANTS_ENUM } from './constants';
+export { ALERT_BANNER_VARIANTS } from './constants';
+export { ALERT_BANNER_TYPES_ENUM } from './constants';
+export { ALERT_BANNER_TYPES } from './constants';
+export type { AlertBannerProps } from './types';

package/ui/elements/AlertBanner/types.ts

@@ -0,0 +1,133 @@
+import React from 'react';
+
+import { grauityIconName } from '../../core';
+import { ButtonProps } from '../Button';
+
+export type AlertBannerType = 'default' | 'outlined' | 'filled';
+
+export type AlertBannerVariant =
+    | 'primary'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'default';
+
+export interface AlertBannerProps {
+    /**
+     * Type of the alert banner
+     *
+     * Available choices: `'default'`, `'outlined'`, `'filled'`
+     *
+     * Default: `'default'`
+     * */
+    type?: AlertBannerType;
+
+    /**
+     * Variant of the alert banner
+     *
+     * Available choices: `'primary'`, `'secondary'`, `'tertiary'`, `'success'`, `'danger'`, `'warning'`
+     *
+     * Default: `'primary'`
+     * */
+    variant?: AlertBannerVariant;
+
+    /**
+     * Alert banner padding
+     *
+     * Default: `'var(--spacing-8px, 8px)'`
+     * */
+    padding?: string;
+
+    /**
+     * Alert banner icon, used to override the default icons used in the alert banner
+     *
+     * Use value `auto` to automatically select the icon based on the variant (error vs checkmark icon)
+     *
+     * Default: `null`
+     * */
+    icon?: grauityIconName | 'auto';
+
+    /**
+     * Alert banner top position, useful for fixed positioning
+     *
+     * Default: `null`
+     * */
+    top?: string;
+
+    /**
+     * Alert banner bottom position, useful for fixed positioning
+     *
+     * Default: `null`
+     * */
+    bottom?: string;
+
+    /**
+     * Alert banner left position, useful for fixed positioning
+     *
+     * Default: `null`
+     * */
+    left?: string;
+
+    /**
+     * Alert banner right position, useful for fixed positioning
+     *
+     * Default: `null`
+     * */
+    right?: string;
+
+    /**
+     * Alert banner position, useful for fixed positioning
+     *
+     * Default: `'static'`
+     * */
+    position?: 'static' | 'fixed' | 'absolute' | 'relative';
+
+    /**
+     * Alert banner content
+     * */
+    children: React.ReactNode;
+
+    /**
+     * Alert banner content justify content
+     *
+     * Default: `'center'`
+     * */
+    justifyContent?: 'center' | 'space-between' | 'space-around';
+
+    /**
+     * Alert banner close button click handler
+     * */
+    onClose?: () => void;
+
+    /**
+     * Show close button
+     *
+     * Default: `false`
+     * */
+    showCloseButton?: boolean;
+
+    /**
+     * Alert banner action buttons.
+     *
+     * Type: ButtonProps[]
+     * */
+    actionButtons?: ButtonProps[];
+}
+
+export interface AlertBannerContainerProps {
+    type: AlertBannerType;
+    variant: AlertBannerVariant;
+    justifyContent: string;
+    padding: string;
+    top: string;
+    bottom: string;
+    left: string;
+    right: string;
+    position: string;
+    textColor: string;
+    backgroundColor: string;
+    borderColor: string;
+    children: React.ReactNode;
+    ref: React.Ref<HTMLDivElement>;
+    role: string;
+}

package/ui/elements/AlertBanner/utils.ts

@@ -0,0 +1,52 @@
+import { AlertProps, AlertType, AlertVariant } from '../Alert/types';
+import {
+    ALERT_BANNER_COLOR_MAPPINGS,
+    ALERT_BANNER_TYPE_AND_VARIANT_TO_BUTTON_VARIANT_MAPPING,
+    DEFAULT_ALERT_VARIANT_ICON_MAPPING,
+} from './constants';
+import { AlertBannerProps, AlertBannerType, AlertBannerVariant } from './types';
+
+/**
+ * Get alert banner icon name based on variant and icon prop
+ *
+ * If icon prop is set to 'auto', the icon will be selected based on the variant
+ *
+ * @param icon - Alert banner icon prop
+ * @param variant - Alert banner variant
+ * @returns Alert banner icon name
+ */
+export const getAlertIconName = (
+    icon: AlertBannerProps['icon'] | AlertProps['icon'],
+    variant: AlertBannerVariant | AlertVariant
+) => {
+    if (icon !== 'auto') {
+        return icon;
+    }
+
+    return DEFAULT_ALERT_VARIANT_ICON_MAPPING[variant];
+};
+
+/**
+ * Get alert banner colors based on variant and type
+ *
+ * @param variant - Alert banner variant
+ * @param type - Alert banner type
+ * @returns Alert banner colors
+ */
+export const getAlertBannerColors = (
+    variant: AlertBannerVariant | AlertVariant,
+    type: AlertBannerType | AlertType
+) => ALERT_BANNER_COLOR_MAPPINGS[type][variant];
+
+/**
+ * Get button variant based on alert banner variant and type.
+ * Useful for showing correct variant for close button.
+ *
+ * @param variant - Alert banner variant
+ * @param type - Alert banner type
+ * @returns Button variant
+ */
+export const getButtonVariantFromAlertBannerTypeVariant = (
+    variant: AlertBannerVariant | AlertVariant,
+    type: AlertBannerType | AlertType
+) => ALERT_BANNER_TYPE_AND_VARIANT_TO_BUTTON_VARIANT_MAPPING[type][variant];

package/ui/elements/Button/Button.styles.ts

@@ -0,0 +1,88 @@
+import styled, { css } from 'styled-components';
+
+import {
+    BUTTON_SIZE_STYLES_MAPPING,
+    BUTTON_VARIANT_STYLES_MAPPING,
+    ICON_BUTTON_SIZE_STYLES_MAPPING,
+} from './constants';
+import { ButtonComponentProps, ButtonContentProps } from './types';
+
+export const StyledButton = styled.button<ButtonComponentProps>`
+    padding: var(--spacing-4px, 4px) var(--spacing-12px, 12px);
+    font-size: var(--font-size-14px, 14px);
+    border-radius: var(--corner-radius-8px, 8px);
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: var(--font-weight-semibold, 600);
+    font-family: var(--font-family, 'Mona Sans');
+    border: none;
+    outline: none;
+    cursor: pointer;
+    width: max-content;
+    gap: var(--spacing-8px, 8px);
+
+    ${({ variant }) =>
+        variant &&
+        css`
+            ${BUTTON_VARIANT_STYLES_MAPPING[variant]}
+        `}
+
+    ${({ size, isIconButton }) => {
+        if (!isIconButton) {
+            return css`
+                ${BUTTON_SIZE_STYLES_MAPPING[size]}
+            `;
+        }
+
+        return css`
+            ${ICON_BUTTON_SIZE_STYLES_MAPPING[size]}
+        `;
+    }}
+
+    ${({ fullWidth }) =>
+        fullWidth &&
+        css`
+            width: 100%;
+        `}
+
+    ${({ disabled }) =>
+        disabled &&
+        css`
+            background: var(--bg-disabled, #23282f);
+            color: var(--text-disabled, #5b6271);
+            border: none;
+            outline: none;
+            cursor: not-allowed;
+
+            &:hover {
+                background: var(--bg-disabled, #23282f);
+                color: var(--text-disabled, #5b6271);
+            }
+        `}
+
+    ${({ isLoading }) =>
+        isLoading &&
+        css`
+            cursor: progress;
+        `}
+
+    ${({ iconPosition }) =>
+        iconPosition === 'right' &&
+        css`
+            flex-direction: row-reverse;
+        `}
+
+    transition: background-color 0.2s ease-in, outline 0.2s ease-in, border 0.2s ease-in, border-color 0.2s ease-in;
+`;
+
+export const StyledButtonContent = styled.div<ButtonContentProps>`
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-8px, 8px);
+    font-size: var(--font-size-14px, 14px);
+    font-weight: var(--font-weight-semibold, 600);
+    line-height: 160%;
+    letter-spacing: 0.4px;
+`;

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

@@ -0,0 +1,78 @@
+import '@testing-library/jest-dom';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import Button from './Button';
+
+describe('Button', () => {
+    it('renders with default props', () => {
+        render(<Button>Click Me</Button>);
+        const button = screen.getByRole('button');
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveTextContent('Click Me');
+    });
+
+    it('calls onClick handler when clicked', () => {
+        const handleClick = jest.fn();
+        render(<Button onClick={handleClick}>Click Me</Button>);
+        const button = screen.getByRole('button');
+        fireEvent.click(button);
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onClick handler when disabled', () => {
+        const handleClick = jest.fn();
+        render(
+            <Button onClick={handleClick} disabled>
+                Click Me
+            </Button>
+        );
+        const button = screen.getByRole('button');
+        fireEvent.click(button);
+        expect(handleClick).not.toHaveBeenCalled();
+    });
+
+    it('does not call onClick handler when loading', () => {
+        const handleClick = jest.fn();
+        render(
+            <Button onClick={handleClick} loading>
+                Click Me
+            </Button>
+        );
+        const button = screen.getByRole('button');
+        fireEvent.click(button);
+        expect(handleClick).not.toHaveBeenCalled();
+    });
+
+    it('shows loading icon when loading is true', () => {
+        render(<Button loading>Click Me</Button>);
+        const loadingIcon = screen.getByTestId('testid-icon');
+        expect(loadingIcon).toBeInTheDocument();
+    });
+
+    it('displays the correct icon', () => {
+        render(<Button icon="check">Click Me</Button>);
+        const icon = screen.getByTestId('testid-icon');
+        expect(icon).toHaveClass('grauity-icon');
+        expect(icon).toHaveClass('grauity-icon-check');
+    });
+
+    it('applies fullWidth style correctly', () => {
+        render(<Button fullWidth>Click Me</Button>);
+        const button = screen.getByRole('button');
+        expect(button).toHaveStyle('width: 100%');
+    });
+
+    it('displays tooltip correctly', () => {
+        render(<Button tooltip="Tooltip Text">Click Me</Button>);
+        const button = screen.getByRole('button');
+        expect(button).toHaveAttribute('title', 'Tooltip Text');
+    });
+
+    it('applies custom class correctly', () => {
+        render(<Button className="custom-class">Click Me</Button>);
+        const button = screen.getByRole('button');
+        expect(button).toHaveClass('custom-class');
+    });
+});

package/ui/elements/Button/Button.tsx

@@ -0,0 +1,134 @@
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { forwardRef, useId } from 'react';
+
+import { Icon } from '../Icon';
+import { StyledButton, StyledButtonContent } from './Button.styles';
+import {
+    BUTTON_ICON_POSITIONS,
+    BUTTON_SIZES,
+    BUTTON_VARIANTS,
+} from './constants';
+import { ButtonProps } from './types';
+
+/**
+ * A Button is a component that is used to trigger an action.
+ * It can contain text and an icon, or only text.
+ * 
+ * To create an icon button, checkout the IconButton component.
+ */
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+    (props, ref) => {
+        const {
+            variant,
+            size,
+            icon,
+            iconSize,
+            iconPosition,
+            className,
+            disabled,
+            loading,
+            style,
+            onClick,
+            fullWidth,
+            type,
+            tooltip,
+            tabIndex,
+            onMouseEnter,
+            onMouseLeave,
+            children,
+            buttonProps,
+        } = props;
+        const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+            if (disabled) {
+                e.preventDefault();
+                return;
+            }
+            onClick(e);
+        };
+
+        const classes = classnames(className);
+
+        const id = useId();
+
+        return (
+            <StyledButton
+                ref={ref}
+                onClick={handleClick}
+                className={classes}
+                style={style}
+                isLoading={loading}
+                disabled={disabled || loading}
+                variant={variant}
+                size={size}
+                fullWidth={fullWidth}
+                iconPosition={iconPosition}
+                type={type}
+                title={tooltip}
+                tabIndex={tabIndex}
+                data-testid="testid-button"
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}
+                {...buttonProps}
+                aria-labelledby={`button-content-${id}`}
+            >
+                {icon && !loading && (
+                    <Icon name={icon} color="inherit" size={iconSize || '24'} />
+                )}
+                {loading && (
+                    <Icon
+                        name="load"
+                        color="inherit"
+                        size={iconSize || '24'}
+                        loading={loading}
+                    />
+                )}
+                {children && (
+                    <StyledButtonContent id={`button-content-${id}`}>{children}</StyledButtonContent>
+                )}
+            </StyledButton>
+        );
+    }
+);
+
+Button.propTypes = {
+    variant: PropTypes.oneOf(BUTTON_VARIANTS),
+    size: PropTypes.oneOf(BUTTON_SIZES),
+    icon: PropTypes.any,
+    iconSize: PropTypes.any,
+    iconPosition: PropTypes.oneOf(BUTTON_ICON_POSITIONS),
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    loading: PropTypes.bool,
+    style: PropTypes.object,
+    onClick: PropTypes.func,
+    fullWidth: PropTypes.bool,
+    children: PropTypes.any,
+    type: PropTypes.oneOf(['button', 'submit', 'reset']),
+    tooltip: PropTypes.string,
+    tabIndex: PropTypes.number,
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func,
+};
+
+Button.defaultProps = {
+    variant: 'primary',
+    size: 'medium',
+    icon: null,
+    iconSize: '24',
+    iconPosition: 'left',
+    className: '',
+    disabled: false,
+    loading: false,
+    style: {},
+    onClick: () => {},
+    fullWidth: false,
+    children: '',
+    type: 'button',
+    tooltip: '',
+    tabIndex: 0,
+    onMouseEnter: () => {},
+    onMouseLeave: () => {},
+};
+
+export default Button;

package/ui/elements/Button/ButtonGroup.styles.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const StyledButtonGroup = styled.div`
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-8px, 8px);
+`;