@evolve.ui/core-components 1.0.1 → 1.1.0

package/src/Toast/Toast.tsx

@@ -0,0 +1,64 @@
+import { ReactNode } from 'react';
+import { toast as RTToast, ToastOptions } from 'react-toastify';
+
+import { BodyPrimary } from '../Typography/Text/Text';
+import { Role } from './types/role';
+import { getIcon } from './utils/getIcon';
+
+export const toast = (
+    role: Role,
+    {
+        description,
+        title,
+    }:
+        | {
+              description?: string | ReactNode;
+              title: string;
+          }
+        | {
+              description: string | ReactNode;
+              title?: string;
+          },
+    opts?: Omit<ToastOptions, 'role' | 'icon'>
+) => {
+    const hasBoth = Boolean(title && description);
+    const finalOpts = {
+        ...opts,
+        icon: <div>{getIcon(role)}</div>,
+        // Use inline style for vertical alignment to override ToastContainer's items-start class
+        // The inline style is used so as not to override the ToastContainer's classes, passing the
+        // className prop to the ToastContainer component overrides all the classes set in the ToastContainer component.
+        // When only title OR description is present, center the content vertically
+        // When both are present, align to start to match the icon position
+        style: {
+            alignItems: hasBoth ? 'start' : 'center',
+        },
+    };
+
+    const content = (
+        <div
+            className="ml-sm flex w-full flex-col gap-2xs"
+            data-hui-id="Toast"
+        >
+            {title && <span className="hui-text-h5 text-text-primary">{title}</span>}
+            {description && <BodyPrimary>{description}</BodyPrimary>}
+        </div>
+    );
+
+    switch (role) {
+        case 'info':
+            RTToast.info(content, finalOpts);
+            break;
+        case 'success':
+            RTToast.success(content, finalOpts);
+            break;
+        case 'warning':
+            RTToast.warning(content, finalOpts);
+            break;
+        case 'error':
+            RTToast.error(content, finalOpts);
+            break;
+        default:
+            throw new Error(`Unknown role for toast: ${role}`);
+    }
+};

package/src/Toast/components/ToastContainer/ToastContainer.tsx

@@ -0,0 +1,48 @@
+import { cn } from '@evolve.ui/theme-system';
+import { ComponentProps } from 'react';
+import { CloseButtonProps, ToastContainer as RTTC } from 'react-toastify';
+
+import { IconButton } from '../../../IconButton/IconButton';
+import { Close } from '../../../Icons';
+
+const CloseButton = ({ closeToast }: CloseButtonProps) => {
+    return (
+        <IconButton
+            data-testid="toastCloseButton"
+            icon={Close}
+            onClick={closeToast}
+        />
+    );
+};
+
+export const ToastContainer = ({ className, ...props }: ComponentProps<typeof RTTC>) => {
+    // Note: items-start is the default alignment for toasts with both title and description
+    // Individual toasts can override this with inline styles (see Toast.tsx) to center
+    // content when only title or description is present
+    const baseToastClasses = cn(
+        'relative z-0 mb-sm box-border flex w-[355px] cursor-default items-start justify-between overflow-hidden border-l-4 border-solid p-sm pl-[12px] shadow-03'
+    );
+    return (
+        <RTTC
+            autoClose={5000}
+            className={cn('fixed [--toastify-z-index:9999]', className)}
+            closeButton={CloseButton}
+            data-hui-id="ToastContainer"
+            hideProgressBar
+            toastClassName={(context) =>
+                cn(
+                    'relative z-0 mb-sm box-border flex max-h-[var(--toastify-toast-max-height)] min-h-[var(--toastify-toast-min-height)] cursor-default items-start justify-between overflow-hidden p-sm pl-[12px]',
+                    'rounded-container border-l-4 border-solid shadow-[var(--shadow-03)]',
+                    {
+                        'border-border-critical bg-background-critical-light': context?.type === 'error',
+                        'border-border-info bg-background-info-light': context?.type === 'info',
+                        'border-border-success bg-background-success-light': context?.type === 'success',
+                        'border-border-warning bg-background-warning-light': context?.type === 'warning',
+                    },
+                    baseToastClasses
+                )
+            }
+            {...props}
+        />
+    );
+};

package/src/Toast/index.ts

@@ -0,0 +1,2 @@
+export { toast } from './Toast';
+export { ToastContainer } from './components/ToastContainer/ToastContainer';

package/src/Toast/types/role.ts

@@ -0,0 +1 @@
+export type Role = 'info' | 'success' | 'warning' | 'error';

package/src/Toast/utils/getIcon.tsx

@@ -0,0 +1,41 @@
+import { CheckCircle, Info, Warning } from '../../Icons';
+import { Role } from '../types/role';
+
+export const getIcon = (role: Role) => {
+    switch (role) {
+        case 'info':
+            return (
+                <Info
+                    color="info"
+                    size="md"
+                    style="fill"
+                />
+            );
+        case 'success':
+            return (
+                <CheckCircle
+                    color="success"
+                    size="md"
+                    style="fill"
+                />
+            );
+        case 'warning':
+            return (
+                <Warning
+                    color="warning"
+                    size="md"
+                    style="fill"
+                />
+            );
+        case 'error':
+            return (
+                <Warning
+                    color="critical"
+                    size="md"
+                    style="fill"
+                />
+            );
+        default:
+            return null;
+    }
+};

package/src/ToggleSwitch/ToggleSwitch.tsx

@@ -0,0 +1,188 @@
+import { cn } from '@evolve.ui/theme-system';
+import { forwardRef, HTMLProps, MouseEvent, Ref, useCallback, useEffect, useState } from 'react';
+
+import { Check } from '../Icons';
+
+type Props = {
+    /**
+     * If provided, describes the switch to screen readers via the ARIA label attribute.
+     * @default 'Toggle Switch'
+     */
+    'aria-label'?: string;
+    className?: string;
+    /**
+     * data-testid is placed on the hidden checkbox input
+     */
+    'data-testid'?: string;
+    /**
+     * sets height to min-content when true
+     * @default 'false'
+     */
+    dense?: boolean;
+    /**
+     * Determines if the switch is disabled or not
+     * @default 'false'
+     */
+    disabled?: boolean;
+    /**
+     * If provided, the switch renders a checkmark icon in its toggled state.
+     * @default 'false'
+     */
+    hasIcon?: boolean;
+    /**
+     * id is placed on the hidden checkbox input
+     */
+    id?: string;
+    /**
+     * Determines if the switch is toggled on or not
+     * @default 'false'
+     */
+    isToggled?: boolean;
+    /**
+     * If provided, populates the name attribute of the hidden checkbox input. Recommended for form usage.
+     */
+    name?: string;
+    /**
+     * If provided, provides a callback function for when the switch is toggled with optional access to the toggle state.
+     */
+    onToggleChange?: (toggled?: boolean) => void;
+    /**
+     * If provided, uses the small variant of the toggle switch.
+     * @default 'false'
+     */
+    small?: boolean;
+    /**
+     * use to enable or disable the tab focus on toggle control
+     */
+    tabIndex?: number;
+};
+
+export const ToggleSwitch = forwardRef(
+    (
+        {
+            'aria-label': ariaLabel = 'Toggle Switch',
+            className,
+            'data-testid': dataTestId = 'toggle-switch',
+            dense = false,
+            disabled = false,
+            hasIcon = false,
+            id = 'toggle-switch',
+            isToggled = false,
+            name,
+            onToggleChange,
+            small = false,
+            tabIndex = 0,
+            ...divProps
+        }: Props & HTMLProps<HTMLDivElement>,
+        ref: Ref<HTMLDivElement>
+    ) => {
+        const [toggled, setToggled] = useState(isToggled);
+
+        const handleClick = useCallback(
+            (e: MouseEvent<HTMLButtonElement>) => {
+                e.preventDefault();
+
+                if (!disabled) {
+                    onToggleChange?.(!toggled);
+                    setToggled(!toggled);
+                }
+            },
+            [disabled, toggled, onToggleChange]
+        );
+
+        useEffect(() => {
+            setToggled(isToggled);
+        }, [isToggled]);
+
+        // Target area classes
+        const targetAreaClasses = cn('flex w-[48px] items-center justify-center', {
+            'cursor-not-allowed': disabled,
+            'cursor-pointer': !disabled,
+            'h-[48px]': !dense,
+            'h-min': dense,
+        });
+
+        // Toggle switch button classes
+        const buttonClasses = cn(
+            'relative cursor-pointer rounded-full border py-0 transition-all duration-200 ease-in-out focus-visible:outline focus-visible:outline-4 focus-visible:outline-focus-primary',
+            {
+                'bg-background-disabled': disabled && toggled,
+                'bg-background-subdued': disabled && !toggled,
+                // Default state (unchecked)
+                'border-border-primary bg-background-subdued': !toggled && !disabled,
+                // Checked state
+                'border-primary-500 bg-primary-500': toggled && !disabled,
+                // Disabled states
+                'cursor-not-allowed border-icon-disabled': disabled,
+                // Size variants
+                'h-4 w-8': small,
+                'h-6 w-12': !small,
+            },
+            className
+        );
+
+        // Switch thumb classes
+        const thumbClasses = cn(
+            'absolute -translate-x-1/2 -translate-y-1/2 rounded-full border bg-background-primary transition-all duration-200 ease-in-out',
+            {
+                'border-border-disabled': disabled,
+                // Border colors
+                'border-border-primary': !toggled && !disabled,
+                'border-primary-500': toggled && !disabled,
+                // Size variants
+                'h-4 w-4': small,
+                'h-6 w-6': !small,
+                'left-[11px]': !small && !toggled,
+                'left-[23px]': small && toggled, // calc(32px - 9px)
+                'left-[35px]': !small && toggled, // calc(48px - 13px)
+                // Position based on toggle state and size
+                'left-[7px]': small && !toggled,
+            }
+        );
+
+        // Check icon classes
+        const checkIconClasses = cn('absolute -translate-x-1/2 -translate-y-1/2 text-icon-inverse', {
+            'left-2': small, // 8px
+            'left-[13px]': !small,
+            'text-icon-disabled': disabled,
+        });
+
+        return (
+            <div
+                className={targetAreaClasses}
+                data-testid={`${dataTestId}-target-area`}
+                ref={ref}
+                {...divProps}
+            >
+                <button
+                    aria-checked={toggled}
+                    aria-label={ariaLabel}
+                    className={buttonClasses}
+                    disabled={disabled}
+                    onClick={handleClick}
+                    role="switch"
+                    tabIndex={tabIndex}
+                    type="button"
+                >
+                    {hasIcon && (
+                        <Check
+                            className={checkIconClasses}
+                            size="xs"
+                        />
+                    )}
+                    <input
+                        checked={toggled}
+                        className="hidden"
+                        data-testid={dataTestId}
+                        disabled={disabled}
+                        id={id}
+                        name={name}
+                        readOnly
+                        type="checkbox"
+                    />
+                    <div className={thumbClasses} />
+                </button>
+            </div>
+        );
+    }
+);

package/src/Tooltip/InfoIconTooltip.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+
+import { cn } from '@evolve.ui/theme-system';
+
+import type { IconComponent } from '../Icons/IconBase';
+
+import { Info } from '../Icons';
+import { Tooltip, type TooltipProps } from './Tooltip';
+
+export type InfoIconTooltipProps = {
+    'aria-label'?: string;
+    color?: ComponentProps<IconComponent>['color'];
+    iconStyle?: ComponentProps<IconComponent>['style'];
+    id: string;
+    size?: ComponentProps<IconComponent>['size'];
+} & Omit<TooltipProps, 'anchorSelect'>;
+
+export const InfoIconTooltip = ({
+    'aria-label': ariaLabel = 'Open tooltip',
+    className,
+    color,
+    iconStyle = 'regular',
+    id,
+    size = 'xs',
+    ...props
+}: InfoIconTooltipProps) => (
+    <>
+        <Info
+            aria-label={ariaLabel}
+            className={cn('overflow-visible focus:outline-0 focus-visible:outline-0', className)}
+            color={color}
+            id={id}
+            role="button"
+            size={size}
+            style={iconStyle}
+            tabIndex={0}
+        />
+        <Tooltip
+            {...props}
+            anchorSelect={`#${id}`}
+        />
+    </>
+);
+
+InfoIconTooltip.displayName = 'InfoIconTooltip';

package/src/Tooltip/Tooltip.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import type { ComponentProps, CSSProperties } from 'react';
+
+import { cn } from '@evolve.ui/theme-system';
+import * as reactTooltip from 'react-tooltip';
+
+export { reactTooltip };
+
+export type TooltipProps = Omit<ComponentProps<typeof reactTooltip.Tooltip>, 'className' | 'style' | 'variant'> & {
+    /** Additional CSS classes to apply to the tooltip. */
+    className?: string;
+    /** Whether the tooltip should use inverse styling. */
+    isInverse?: boolean;
+    /** Inline styles to apply to the tooltip. Default z-index is 10000 but can be overridden. */
+    style?: CSSProperties;
+};
+
+export const Tooltip = ({ className, isInverse, style, ...props }: TooltipProps) => (
+    <reactTooltip.Tooltip
+        className={cn(
+            'hui-text-body-secondary !bg-background-primary !shadow-03',
+            { '!bg-background-inverse': isInverse },
+            className
+        )}
+        opacity={1}
+        positionStrategy="fixed"
+        style={{
+            animationDuration: '0s',
+            borderRadius: '8px',
+            maxWidth: '282px',
+            transitionDuration: '0s',
+            zIndex: 10000,
+            ...style,
+        }}
+        variant={isInverse ? 'dark' : 'light'}
+        {...props}
+    />
+);
+
+Tooltip.displayName = 'Tooltip';

package/src/Typography/InlineButton/InlineButton.tsx

@@ -0,0 +1,166 @@
+import { cn } from '@evolve.ui/theme-system';
+import { forwardRef, HTMLProps, MouseEventHandler, ReactNode, useCallback } from 'react';
+
+import { AnyIcon } from '../../Icons/anyIcon';
+
+type InlineButtonStyle = 'primary' | 'critical' | 'neutral' | 'inverse';
+
+type InlineStyles = {
+    inlineStyles?: HTMLProps<HTMLDivElement>['style'];
+};
+
+const downSizeIconSize = {
+    md: 'sm',
+    sm: 'xs',
+    xs: 'xs',
+} as const;
+
+type Props = {
+    children: ReactNode;
+    /**
+     * Optional className to add to the button.
+     */
+    className?: string;
+    /**
+     * Optional icon to show alongside the component.
+     *
+     * Usage:
+     * ```tsx
+     * <InlineButton icon={Info} />
+     * ```
+     */
+    icon?: AnyIcon;
+    /**
+     * Optional location for the icon's rendering. Requires `icon` prop to do anything
+     *
+     * Usage:
+     * ```tsx
+     * <InlineButton icon={Info} iconPlacement="right" />
+     * ```
+     *
+     * @default 'left'
+     */
+    iconPlacement?: 'left' | 'right';
+    /**
+     * Optional style for the icon's rendering.
+     */
+    iconStyle?: 'fill' | 'bold' | 'regular' | 'duotone';
+    /**
+     * Optional loading state trigger. Disables button and adds a loading state.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * The size of the inline button to render.
+     *
+     * sm = small
+     * md = medium (default)
+     */
+    size?: 'md' | 'sm' | 'xs';
+    /**
+     * Button style. This matches a color palette in the theme.
+     *
+     * @default 'primary'
+     */
+    style?: InlineButtonStyle;
+    /**
+     * The type of the button.
+     *
+     * @default 'button'
+     */
+    type?: 'button' | 'reset' | 'submit';
+} & Omit<HTMLProps<HTMLButtonElement>, 'style' | 'size' | 'as'> &
+    InlineStyles;
+
+export const InlineButton = forwardRef<HTMLButtonElement, Props>(
+    (
+        {
+            children,
+            className,
+            disabled = false,
+            icon: Icon,
+            iconPlacement = 'left',
+            iconStyle,
+            loading = false,
+            onClick: onClickProp,
+            size = 'md',
+            style = 'primary',
+            ...rest
+        },
+        ref
+    ) => {
+        const onClick: MouseEventHandler<HTMLButtonElement> = useCallback(
+            (e) => {
+                if (!disabled && !loading && onClickProp) {
+                    onClickProp(e);
+                }
+
+                // Handle the case where the button is in a Form and shouldnt trigger the form's onSubmit callback
+                if (disabled || loading) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            },
+            [disabled, loading, onClickProp]
+        );
+
+        return (
+            <button
+                aria-busy={loading}
+                aria-live="polite"
+                className={cn(
+                    // GENERAL
+                    'hui-text-body-primary inline-flex w-min cursor-pointer items-center gap-2xs whitespace-nowrap border-none bg-transparent p-0 tracking-[0.5px] outline-none',
+                    // FOCUS
+                    'focus-visible:hui-focus-visible-outline focus-visible:underline',
+                    {
+                        'focus-visible:hui-focus-visible-outline-inverse': style === 'inverse',
+                    },
+                    // HOVER
+                    'hover:underline',
+                    { 'hover:no-underline': disabled || loading },
+                    // DISABLED
+                    'disabled:cursor-not-allowed disabled:text-text-disabled',
+                    // SIZE
+                    'h-[24px] text-base',
+                    {
+                        'h-[20px] text-xs leading-4': size === 'xs',
+                        'h-[22px] text-sm leading-5': size === 'sm',
+                    },
+                    // STYLE
+                    {
+                        'text-link-primary hover:text-primary-700 active:text-primary-900': style === 'primary',
+                        'text-link-secondary hover:text-surface-700 active:text-surface-900': style === 'neutral',
+                        'text-text-critical hover:text-critical-700 active:text-critical-900': style === 'critical',
+                        'text-text-inverse hover:text-surface-100 active:text-surface-200': style === 'inverse',
+                    },
+                    className
+                )}
+                data-hui-id="InlineButton"
+                disabled={disabled || loading}
+                onClick={onClick}
+                ref={ref}
+                {...rest}
+            >
+                {Icon && iconPlacement === 'left' && (
+                    <Icon
+                        color="inherit"
+                        size={downSizeIconSize[size]}
+                        style={iconStyle}
+                    />
+                )}
+                {children}
+                {Icon && iconPlacement === 'right' && (
+                    <Icon
+                        color="inherit"
+                        size={downSizeIconSize[size]}
+                        style={iconStyle}
+                    />
+                )}
+            </button>
+        );
+    }
+);
+
+InlineButton.displayName = 'InlineButton';