@evolve.ui/core-components 1.0.0 → 1.1.0

package/src/Carousel/components/NavigationButtons/NavigationButtons.tsx

@@ -0,0 +1,77 @@
+import { cn } from '@evolve.ui/theme-system';
+
+import { IconButton } from '../../../IconButton/IconButton';
+import { ArrowLeft, ArrowRight } from '../../../Icons';
+
+type Props = {
+    goToNextPage: () => void;
+    goToPreviousPage: () => void;
+    showNextPageButton: boolean;
+    showPreviousPageButton: boolean;
+    useOverlayControls?: boolean;
+    variant: 'primary' | 'secondary';
+};
+
+export const NavigationButtons = ({
+    goToNextPage,
+    goToPreviousPage,
+    showNextPageButton,
+    showPreviousPageButton,
+    useOverlayControls,
+    variant,
+}: Props) => {
+    if (!useOverlayControls) {
+        return (
+            <div className="z-10 flex gap-xs xsMax:hidden">
+                <IconButton
+                    aria-label="Previous Page"
+                    disabled={!showPreviousPageButton}
+                    icon={ArrowLeft}
+                    onClick={goToPreviousPage}
+                    shape="circle"
+                    size={variant === 'primary' ? 'md' : 'sm'}
+                    variant="outlined"
+                />
+                <IconButton
+                    aria-label="Next Page"
+                    disabled={!showNextPageButton}
+                    icon={ArrowRight}
+                    onClick={goToNextPage}
+                    shape="circle"
+                    size={variant === 'primary' ? 'md' : 'sm'}
+                    variant="outlined"
+                />
+            </div>
+        );
+    }
+
+    // calculate from the top to put the button halfway down its parent relative to its own center.
+    // this will break if the size of the IconButton is ever changed,
+    const sharedPreviousNextStyles = cn('absolute top-[calc(50%-21px)]');
+    return (
+        <div className="z-10 xsMax:hidden">
+            {showPreviousPageButton && (
+                <IconButton
+                    aria-label="Previous Page"
+                    className={cn(sharedPreviousNextStyles, '-left-xs')}
+                    icon={ArrowLeft}
+                    onClick={goToPreviousPage}
+                    shape="circle"
+                    size={variant === 'primary' ? 'md' : 'sm'}
+                    variant="outlined"
+                />
+            )}
+            {showNextPageButton && (
+                <IconButton
+                    aria-label="Next Page"
+                    className={cn(sharedPreviousNextStyles, '-right-xs')}
+                    icon={ArrowRight}
+                    onClick={goToNextPage}
+                    shape="circle"
+                    size={variant === 'primary' ? 'md' : 'sm'}
+                    variant="outlined"
+                />
+            )}
+        </div>
+    );
+};

package/src/Carousel/components/TitleSection/TitleSection.tsx

@@ -0,0 +1,61 @@
+import { MouseEvent, ReactNode } from 'react';
+
+import { BodySecondary } from '../../../Typography/Text/Text';
+import { SubHeaderLeft } from './components/SubHeaderLeft/SubHeaderLeft';
+import { Title } from './components/Title/Title';
+
+type SubHeaderLink = {
+    /** Accessible label for the link */
+    ariaLabel?: string;
+    /** URL for the link */
+    href: string;
+    /** Text to display for the link */
+    label: string;
+    /** Click handler for the link */
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /** Visual style variant of the link */
+    variant?: 'default' | 'subtle';
+};
+
+type Props = {
+    /** Description text to display in the subheader (right side) */
+    subHeaderDescription?: string;
+    /** Left side content - either a link or plain text */
+    subHeaderLeft?: { link: SubHeaderLink; type: 'link' } | { text: string; type: 'text' };
+    /** Main title text */
+    title?: ReactNode;
+    /** Link configuration for the title - when provided, title becomes clickable */
+    titleLink?: {
+        /** Accessible label for the title link */
+        ariaLabel?: string;
+        /** URL for the title link */
+        href: string;
+        /** Click handler for the title link */
+        onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    };
+    /** Visual style variant of the title */
+    variant?: 'primary' | 'secondary';
+};
+
+export const TitleSection = ({ subHeaderDescription, subHeaderLeft, title, titleLink, variant }: Props) => {
+    const hasSubHeaderLeft = Boolean(subHeaderLeft);
+    const hasSubHeaderDescription = Boolean(subHeaderDescription?.length);
+    const showBorder = hasSubHeaderLeft && hasSubHeaderDescription;
+
+    return (
+        <div className="flex flex-col gap-2xs">
+            {title && (
+                <Title
+                    title={title}
+                    titleLink={titleLink}
+                    variant={variant}
+                />
+            )}
+            <div className="flex items-center gap-xs xsMax:flex-col xsMax:items-start xsMax:gap-2xs">
+                {subHeaderLeft && <SubHeaderLeft subHeaderLeft={subHeaderLeft} />}
+                {showBorder && <div className="h-sm w-px bg-border-secondary xsMax:hidden" />}
+                {hasSubHeaderDescription && <BodySecondary color="primary">{subHeaderDescription}</BodySecondary>}
+            </div>
+        </div>
+    );
+};

package/src/Carousel/components/TitleSection/components/SubHeaderLeft/SubHeaderLeft.tsx

@@ -0,0 +1,53 @@
+import { MouseEvent } from 'react';
+
+import { useWindowIsMobile } from '../../../../../providers';
+import { SubtleWeakLink, WeakLink } from '../../../../../Typography/Links/Links';
+import { BodySecondary } from '../../../../../Typography/Text/Text';
+
+type SubHeaderLink = {
+    /** Accessible label for the link */
+    ariaLabel?: string;
+    /** URL for the link */
+    href: string;
+    /** Text to display for the link */
+    label: string;
+    /** Click handler for the link */
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /** Visual style variant of the link */
+    variant?: 'default' | 'subtle';
+};
+
+type Props = {
+    /** Left side content - either a link or plain text */
+    subHeaderLeft: { link: SubHeaderLink; type: 'link' } | { text: string; type: 'text' };
+};
+
+/**
+ * SubHeaderLeft component displays either a link or plain text on the left side of the carousel subheader
+ */
+export const SubHeaderLeft = ({ subHeaderLeft }: Props) => {
+    const isMobile = useWindowIsMobile();
+
+    if (subHeaderLeft.type === 'text') {
+        return <BodySecondary color="secondary">{subHeaderLeft.text}</BodySecondary>;
+    }
+
+    const { link } = subHeaderLeft;
+    const linkVariant = link.variant ?? 'default';
+    const LinkComponent = linkVariant === 'subtle' && !isMobile ? SubtleWeakLink : WeakLink;
+
+    return (
+        <LinkComponent
+            aria-label={link.ariaLabel ?? `Navigate to ${link.label}`}
+            data-testid="catalog-link"
+            href={link.href}
+            onClick={(event) => {
+                event.preventDefault();
+                link.onClick?.(event);
+            }}
+            size="sm"
+        >
+            {link.label}
+        </LinkComponent>
+    );
+};

package/src/Carousel/components/TitleSection/components/Title/Title.tsx

@@ -0,0 +1,46 @@
+import { MouseEvent, ReactNode } from 'react';
+
+import { H2, H5 } from '../../../../../Typography/Text/Text';
+
+type Props = {
+    /** The title text to display */
+    title: ReactNode;
+    /** Link configuration for the title - when provided, title becomes clickable */
+    titleLink?: {
+        /** Accessible label for the title link */
+        ariaLabel?: string;
+        /** URL for the title link */
+        href: string;
+        /** Click handler for the title link */
+        onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    };
+    /** Visual style variant of the title */
+    variant?: 'primary' | 'secondary';
+};
+
+/**
+ * Title component for the carousel - displays H2 for primary or H5 for secondary variant.
+ * Can be wrapped in a link when titleLink is provided.
+ */
+export const Title = ({ title, titleLink, variant = 'primary' }: Props) => {
+    const TitleComponent = variant === 'primary' ? H2 : H5;
+    const titleContent = <TitleComponent>{title}</TitleComponent>;
+
+    if (titleLink) {
+        return (
+            <a
+                aria-label={titleLink.ariaLabel ?? `Navigate to ${title}`}
+                className="w-fit no-underline hover:underline"
+                href={titleLink.href}
+                onClick={(event) => {
+                    event.preventDefault();
+                    titleLink.onClick?.(event);
+                }}
+            >
+                {titleContent}
+            </a>
+        );
+    }
+
+    return titleContent;
+};

package/src/Carousel/index.ts

@@ -0,0 +1,2 @@
+export * from './Carousel';
+export * from './Carousel.types';

package/src/Carousel/testUtils.ts

@@ -0,0 +1,10 @@
+export const mockOffsetWidths = (containerWidth: number, cardWidth: number) =>
+    jest.spyOn(HTMLDivElement.prototype, 'offsetWidth', 'get').mockImplementation(function (this: HTMLDivElement) {
+        if (this.getAttribute('role') === 'list') {
+            return containerWidth;
+        }
+        if (this.getAttribute('role') === 'listitem') {
+            return cardWidth;
+        }
+        return 0;
+    });

package/src/Chips/Chip.tsx

@@ -0,0 +1,153 @@
+import { cn } from '@evolve.ui/theme-system';
+import { ComponentProps } from 'react';
+
+import { CaretDown, Check, Close, SlidersHorizontal } from '../Icons';
+import { LabelStrong } from '../Typography/Text/Text';
+import { ChipProps } from './chipTypes';
+
+/**
+ * Chip component that can be used for filters, suggestions, or input selections
+ * see Storybook for design-approved implementation examples
+ * @param children - Content to display inside the chip
+ * @param className - Additional CSS classes to apply
+ * @param disabled - Whether the chip is disabled
+ * @param filterCount - Number to display for filter count (only used with style="allFilters")
+ * @param onClick - Click handler for the chip
+ * @param onClose - Handler for when close button is clicked
+ * @param selected - Whether the chip is in selected state
+ * @param size - Size of the chip: "xs" | "md" (default: "md") - Note: x-small size is only used for input chips
+ * @param style - Visual style: "suggestion" | "input" | "singleFilter" | "allFilters" | "selectable" (default: "suggestion")
+ */
+export const Chip = ({
+    'aria-haspopup': ariaHasPopup,
+    'aria-label': ariaLabel,
+    as: Component = 'button',
+    children,
+    className,
+    disabled,
+    filterCount,
+    onClick,
+    onClose,
+    selected,
+    size = 'md',
+    style = 'suggestion',
+    value,
+    ...props
+}: ChipProps) => {
+    // 'xs' size is only used for input and selectable chips
+    const realSize = style === 'input' || style === 'selectable' ? size : 'md';
+    const showClose = Boolean((style === 'input' || style === 'singleFilter') && selected);
+    const showCaretDown = Boolean(style === 'singleFilter' && !selected);
+
+    const baseClasses = cn(
+        'group hui-text-body-secondary rounded-full border border-border-secondary px-sm py-[6px] text-text-primary',
+        // TRANSITIONS: enable fade from background to background-hover
+        'transition-colors duration-200 ease-in-out',
+        'cursor-pointer select-none whitespace-nowrap',
+        'flex h-[34px] w-min items-center no-underline',
+        'focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-focus-primary',
+        {
+            'bg-background-primary hover:bg-background-hover active:bg-background-pressed': !disabled,
+            'border-border-selected text-primary-500 hover:bg-primary-50 hover:text-primary-700 active:bg-primary-100':
+                selected && !disabled && style !== 'allFilters',
+            'hui-text-caption h-md pl-[12px] pr-xs': realSize === 'xs',
+            'pl-xs': style === 'allFilters' && filterCount,
+            'pointer-events-none border-border-disabled bg-background-disabled text-text-disabled': disabled,
+            'pr-[12px]': showClose || showCaretDown,
+        },
+        className
+    );
+
+    return (
+        <Component
+            aria-label={
+                ariaLabel ??
+                (typeof children === 'string' || typeof children === 'number' ? `${children} filter` : undefined)
+            }
+            className={baseClasses}
+            data-hui-id="Chip"
+            {...(Component === 'button' && { type: 'button' })}
+            {...props}
+            {...(value !== undefined && { value: value as ComponentProps<'button'>['value'] })}
+            {...(!disabled &&
+                !showClose && {
+                    onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+                        onClick?.(event);
+                    },
+                })}
+            {...(disabled && { 'aria-disabled': true })}
+            {...(ariaHasPopup && { 'aria-haspopup': ariaHasPopup })}
+            {...(selected && { 'aria-current': selected })}
+        >
+            {style === 'selectable' && selected && (
+                <Check
+                    className="mr-2xs"
+                    size="xs"
+                />
+            )}
+            {style === 'allFilters' && Boolean(filterCount) && (
+                <LabelStrong
+                    className={cn(
+                        'mr-xs inline-flex h-5 min-w-5 items-center justify-center rounded-lg bg-primary-500 px-[2px]',
+                        {
+                            'bg-background-subdued text-text-disabled': disabled,
+                            'group-hover:bg-primary-700 group-active:bg-primary-900': !disabled,
+                            'hui-label-caption h-sm min-w-sm': realSize === 'xs',
+                        }
+                    )}
+                    color="inverse"
+                >
+                    {filterCount}
+                </LabelStrong>
+            )}
+            {children}
+            {showCaretDown && (
+                <CaretDown
+                    className="ml-2xs"
+                    color="inherit"
+                    size="xs"
+                />
+            )}
+            {showClose && (
+                <span
+                    {...(!disabled &&
+                        onClose && {
+                            onClick: (event) => {
+                                event.stopPropagation();
+                                onClose(event);
+                            },
+                        })}
+                >
+                    <Close
+                        aria-label={`remove ${children} filter`}
+                        className="ml-2xs"
+                        color="inherit"
+                        data-testid="remove-filter"
+                        size="xs"
+                    />
+                </span>
+            )}
+            {style === 'allFilters' && (
+                <span
+                    {...(!disabled &&
+                        onClick && {
+                            onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+                                event.stopPropagation();
+                                onClick(event);
+                            },
+                        })}
+                >
+                    <SlidersHorizontal
+                        aria-label="change filters"
+                        className="ml-2xs"
+                        color="inherit"
+                        data-testid="filter-button"
+                        size="xs"
+                    />
+                </span>
+            )}
+        </Component>
+    );
+};
+
+Chip.displayName = 'Chip';

package/src/Chips/ChipGroup.tsx

@@ -0,0 +1,173 @@
+import { cn } from '@evolve.ui/theme-system';
+import { atom, PrimitiveAtom, useAtom, useStore } from 'jotai';
+import { ChangeEventHandler, Children, cloneElement, Key, ReactElement, useCallback, useMemo, useRef } from 'react';
+
+import { usePrevious } from '../hooks/usePrevious';
+import { ChipGroupProps, ChipProps } from './chipTypes';
+
+/**
+ * ChipGroup component that can be used for filters, suggestions, or input selections
+ * see Storybook for design-approved implementation examples
+ * @param children - Content to display inside the chip
+ * @param chipType - Type of the chip: "link" | "radio" | "checkbox"
+ * @param className - Additional CSS classes to apply
+ * @param data-testid - Test ID for the chip group
+ * @param name - Name for the chip group
+ * @param onChange - Change handler for the chip group
+ */
+export const ChipGroup = ({
+    children,
+    chipType,
+    className,
+    'data-testid': testId = 'chip-group',
+    name,
+    onChange: propOnChange,
+}: ChipGroupProps) => {
+    const renderedElement = chipType === 'link' ? 'a' : 'button';
+    const store = useStore();
+    const chipMap = useRef<Record<string, [PrimitiveAtom<boolean>, unknown]>>({});
+    const oldChipType = usePrevious(chipType);
+
+    if (oldChipType !== undefined && oldChipType !== chipType) {
+        chipMap.current = {};
+    }
+
+    const onChange = useCallback(
+        (chipId: string, selected: boolean, value: unknown) => {
+            const totalState = Object.fromEntries(
+                Object.entries(chipMap.current).map(([id, [atom, value]]) => {
+                    if (chipType !== 'radio') {
+                        return [id, { id, selected: store.get(atom), value }];
+                    }
+
+                    if (id === chipId) {
+                        return [id, { id, selected: true, value }];
+                    }
+
+                    store.set(atom, false);
+                    return [id, { id, selected: false, value }];
+                })
+            );
+
+            propOnChange?.({ id: chipId, selected, value }, totalState);
+        },
+        [chipType, propOnChange, store]
+    );
+
+    const formattedChildren = useMemo(
+        () =>
+            Children.map(children, (child) => {
+                if (!child) {
+                    return child;
+                }
+
+                const chipId = child.props.id;
+                const chipValue = child.props.value;
+
+                if (!chipId) {
+                    throw new Error('ChipGroup children must have an id');
+                }
+
+                const chipState: [PrimitiveAtom<boolean>, unknown] =
+                    chipId in chipMap.current
+                        ? chipMap.current[chipId]
+                        : [atom(Boolean(child.props.selected)), chipValue];
+
+                chipMap.current[chipId] = chipState;
+
+                return (
+                    <ChipController
+                        child={child as ReactElement<ChipProps>}
+                        chipAtom={chipState[0]}
+                        chipType={chipType}
+                        groupName={name}
+                        key={chipValue as Key}
+                        onChange={onChange}
+                        renderedElement={renderedElement}
+                    />
+                );
+            }),
+        [children, chipType, name, onChange, renderedElement]
+    );
+
+    const Element = chipType === 'link' ? 'ul' : 'fieldset';
+
+    return (
+        <Element
+            className={cn('-ml-xs min-w-0 list-none border-none p-xs', 'flex gap-xs overflow-x-auto', className)}
+            data-testid={testId}
+            role={renderedElement === 'a' ? 'list' : 'group'}
+        >
+            {formattedChildren}
+        </Element>
+    );
+};
+
+const ChipController = ({
+    child,
+    chipAtom,
+    chipType,
+    groupName,
+    onChange: parentOnChange,
+    renderedElement,
+}: {
+    child: ReactElement<ChipProps>;
+    chipAtom: PrimitiveAtom<boolean>;
+    chipType: 'link' | 'radio' | 'checkbox';
+    groupName?: string;
+    onChange: (id: string, selected: boolean, value: unknown) => void;
+    renderedElement: 'a' | 'button';
+}) => {
+    const [selected, setSelected] = useAtom(chipAtom);
+
+    const onClickOrChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+        (e) => {
+            let newSelected: boolean;
+
+            if (e.currentTarget.checked) {
+                newSelected = e.currentTarget.checked ?? !selected;
+            } else {
+                e.preventDefault();
+                e.stopPropagation();
+                newSelected = !selected;
+            }
+
+            setSelected(newSelected);
+
+            parentOnChange(child.props.id!, newSelected, child.props.value);
+        },
+        [child.props.id, child.props.value, parentOnChange, selected, setSelected]
+    );
+
+    const newChild = cloneElement(child, {
+        as: renderedElement,
+        ...(child.props.disabled
+            ? {}
+            : {
+                  onClick: (event: React.MouseEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement>) => {
+                      onClickOrChange(event as React.ChangeEvent<HTMLInputElement>);
+                  },
+              }),
+        selected,
+    });
+
+    if (chipType === 'link') {
+        return <li>{newChild}</li>;
+    }
+
+    return (
+        <>
+            <input
+                checked={selected}
+                className="absolute h-0 w-0 opacity-0"
+                disabled={child.props.disabled}
+                id={child.props.id}
+                name={groupName}
+                onChange={onClickOrChange}
+                tabIndex={-1}
+                type={chipType}
+            />
+            {newChild}
+        </>
+    );
+};

package/src/Chips/SuggestionChip.tsx

@@ -0,0 +1,15 @@
+import { Chip } from './Chip';
+import { ChipProps } from './chipTypes';
+
+export const SuggestionChip = ({ children, ...props }: ChipProps) => {
+    return (
+        <Chip
+            {...props}
+            style="suggestion"
+        >
+            {children}
+        </Chip>
+    );
+};
+
+SuggestionChip.displayName = 'SuggestionChip';