@evolve.ui/core-components 1.0.1 → 1.1.0

package/src/FormLabel/FormLabel.tsx

@@ -0,0 +1,212 @@
+import { cn } from '@evolve.ui/theme-system';
+import { forwardRef, HTMLProps, ReactNode } from 'react';
+
+import { Lock } from '../Icons';
+import { Caption } from '../Typography/Text/Text';
+
+// This is imported in other files, hence, not just "Props"
+type Props = {
+    className?: string;
+    disabled?: boolean;
+    /**
+     * Whether to show the error text / styles.
+     */
+    hasError?: boolean;
+    helpText?: ReactNode;
+    labelText?: ReactNode;
+    /** Render the text as a sibling of the label rather than a child of label */
+    renderErrorTextAdjacent?: boolean;
+    /** Render the text as a sibling of the label rather than a child of label */
+    renderHelpTextAdjacent?: boolean;
+    /**
+     * Show secure label at the top right of the component.
+     */
+    secure?: boolean;
+    /* Useful for overriding */
+    showTopLeft?: boolean;
+    /* Useful for overriding */
+    showTopRight?: boolean;
+    /* Useful for overriding */
+    topLeft?: ReactNode;
+    /* Useful for overriding */
+    topRight?: ReactNode;
+} & (
+    | {
+          errorText?: ReactNode;
+          /**
+           * Must be defined if `errorText` is defined.
+           */
+          errorTextId?: undefined;
+      }
+    | {
+          errorText?: undefined;
+          /**
+           * Must be defined if `errorText` is defined.
+           */
+          errorTextId: string;
+      }
+    | {
+          errorText: ReactNode;
+          /**
+           * Must be defined if `errorText` is defined.
+           */
+          errorTextId: string;
+      }
+);
+
+export type FormLabelProps = Omit<
+    Props,
+    'topLeft' | 'topRight' | 'showTopLeft' | 'showTopRight' | 'renderErrorTextAdjacent' | 'renderHelpTextAdjacent'
+>;
+
+/**
+ * Here's a quick snippet of code to forward all props
+ * ```tsx
+ * <FormLabel
+ * className={className}
+ * disabled={disabled}
+ * errorText={errorText}
+ * errorTextId={errorTextId}
+ * hasError={hasError}
+ * helpText={helpText}
+ * labelText={labelText}
+ * secure={secure}
+ * showTopLeft={showTopLeft}
+ * showTopRight={showTopRight}
+ * topLeft={topLeft}
+ * topRight={topRight}
+ * ```
+ */
+export const FormLabel = forwardRef<HTMLLabelElement, Props & HTMLProps<HTMLLabelElement>>(
+    (
+        {
+            children,
+            className,
+            disabled,
+            errorText,
+            errorTextId,
+            hasError = false,
+            helpText,
+            labelText,
+            renderErrorTextAdjacent,
+            renderHelpTextAdjacent,
+            secure = false,
+            showTopLeft = Boolean(labelText),
+            showTopRight = secure,
+            topLeft = (
+                <span
+                    className={cn('hui-text-label-mini whitespace-nowrap', {
+                        'text-text-disabled': disabled,
+                        'text-text-secondary': !disabled,
+                    })}
+                >
+                    {labelText}
+                </span>
+            ),
+            topRight = (
+                <span
+                    className={cn('hui-text-label-mini ml-auto flex items-center gap-[2px] text-text-secondary', {
+                        'text-text-disabled': disabled,
+                        'text-text-secondary': !disabled,
+                    })}
+                >
+                    <Lock
+                        size="xs"
+                        style="fill"
+                    />
+                    Secure
+                </span>
+            ),
+            ...rest
+        },
+        ref
+    ) => {
+        const help = Boolean(helpText) ? (
+            <span
+                className={cn('hui-text-caption whitespace-nowrap', {
+                    'text-text-disabled': disabled,
+                    'text-text-secondary': !disabled,
+                })}
+            >
+                {helpText}
+            </span>
+        ) : null;
+        const error =
+            Boolean(errorText) && hasError ? (
+                <Caption
+                    color="critical"
+                    id={errorTextId}
+                >
+                    {errorText}
+                </Caption>
+            ) : null;
+
+        return (
+            <>
+                <label
+                    {...rest}
+                    className={cn('flex flex-col gap-2xs', className)}
+                    ref={ref}
+                >
+                    <FormLabelHeader
+                        showTopLeft={showTopLeft}
+                        showTopRight={showTopRight}
+                        topLeft={topLeft}
+                        topRight={topRight}
+                    />
+                    {children}
+                    {!renderHelpTextAdjacent && help}
+                    {!renderErrorTextAdjacent && error}
+                </label>
+                {renderHelpTextAdjacent && help}
+                {renderErrorTextAdjacent && error}
+            </>
+        );
+    }
+);
+
+const FormLabelHeader = ({
+    showTopLeft,
+    showTopRight,
+    topLeft,
+    topRight,
+}: Pick<Props, 'topLeft' | 'topRight' | 'showTopLeft' | 'showTopRight'>) => {
+    if (!showTopLeft && !showTopRight) {
+        return null;
+    }
+
+    if (showTopLeft && !showTopRight) {
+        return topLeft;
+    }
+
+    if (!showTopLeft && showTopRight) {
+        return topRight;
+    }
+
+    return (
+        <div className="flex items-center">
+            {showTopLeft && topLeft}
+            {showTopRight && topRight}
+        </div>
+    );
+};
+
+export const extractFormLabelProps = <T extends FormLabelProps>(
+    props: T
+): [FormLabelProps, Omit<T, keyof FormLabelProps> & Pick<FormLabelProps, 'disabled'>] => {
+    const { className, disabled, errorText, errorTextId, hasError, helpText, labelText, secure, ...rest } = props;
+
+    return [
+        {
+            className,
+            disabled,
+            errorText,
+            errorTextId,
+            hasError,
+            helpText,
+            labelText,
+            secure,
+        },
+        { disabled, ...rest },
+    ];
+};

package/src/IconButton/IconButton.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { cn } from '@evolve.ui/theme-system';
+import { forwardRef, type ComponentProps, type ElementType, type HTMLProps, useId, useMemo } from 'react';
+
+import type { ButtonStyle, ButtonVariant } from '../Button/Button.types';
+import type { AnyIcon } from '../Icons/anyIcon';
+import type { IconComponent } from '../Icons/IconBase';
+
+import {
+    filledCriticalClasses,
+    filledInverseClasses,
+    filledNeutralClasses,
+    filledPrimaryClasses,
+    outlinedCriticalClasses,
+    outlinedInverseClasses,
+    outlinedNeutralClasses,
+    outlinedPrimaryClasses,
+    transparentCriticalClasses,
+    transparentInverseClasses,
+    transparentNeutralClasses,
+    transparentPrimaryClasses,
+} from '../Button/buttonColorClasses';
+import { Tooltip } from '../Tooltip/Tooltip';
+
+type IconSize = NonNullable<ComponentProps<IconComponent>['size']>;
+export type IconButtonSize = IconSize;
+
+const outlineSizeFromIconSize: Record<IconButtonSize, string> = {
+    lg: '54px',
+    md: '42px',
+    sm: '34px',
+    xs: '20px',
+};
+
+export type IconButtonProps = {
+    as?: ElementType;
+    /** Disables the automatic aria-label tooltip. */
+    hideTooltip?: boolean;
+    /** Icon to render inside the button. */
+    icon: AnyIcon;
+    /** Only works with v2 icons. */
+    iconStyle?: ComponentProps<IconComponent>['style'];
+    /**
+     * Button shape.
+     *
+     * @default 'circle'
+     */
+    shape?: 'circle' | 'square';
+    /**
+     * Button style. This matches a color palette in the theme.
+     *
+     * @default 'neutral'
+     */
+    style?: ButtonStyle;
+    /** Optional stable tooltip ID for SSR scenarios. */
+    tooltipId?: string;
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * What kind of button to render.
+     *
+     * @default 'transparent'
+     */
+    variant?: ButtonVariant;
+} & Omit<HTMLProps<HTMLButtonElement>, 'as' | 'size' | 'style'> & {
+        size?: IconButtonSize;
+    };
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+    (
+        {
+            as: Component = 'button',
+            className,
+            disabled = false,
+            hideTooltip = false,
+            icon: Icon,
+            iconStyle,
+            shape = 'circle',
+            size = 'md',
+            style = 'neutral',
+            tooltipId: providedTooltipId,
+            variant = 'transparent',
+            ...rest
+        },
+        ref
+    ) => {
+        const dimension = outlineSizeFromIconSize[size];
+
+        const colorClasses = useMemo(
+            () => ({
+                [filledCriticalClasses]: variant === 'filled' && style === 'critical',
+                [filledInverseClasses]: variant === 'filled' && style === 'inverse',
+                [filledNeutralClasses]: variant === 'filled' && style === 'neutral',
+                [filledPrimaryClasses]: variant === 'filled' && style === 'primary',
+                [outlinedCriticalClasses]: variant === 'outlined' && style === 'critical',
+                [outlinedInverseClasses]: variant === 'outlined' && style === 'inverse',
+                [outlinedNeutralClasses]: variant === 'outlined' && style === 'neutral',
+                [outlinedPrimaryClasses]: variant === 'outlined' && style === 'primary',
+                [transparentCriticalClasses]: variant === 'transparent' && style === 'critical',
+                [transparentInverseClasses]: variant === 'transparent' && style === 'inverse',
+                [transparentNeutralClasses]: variant === 'transparent' && style === 'neutral',
+                [transparentPrimaryClasses]: variant === 'transparent' && style === 'primary',
+            }),
+            [style, variant]
+        );
+
+        const fallbackId = useId();
+        const generatedId = rest['aria-label']
+            ? `tooltip-${rest['aria-label'].replace(/\s+/g, '-').toLowerCase()}`
+            : fallbackId;
+        const tooltipId = providedTooltipId ?? generatedId;
+        const shouldShowTooltip = Boolean(rest['aria-label']) && !disabled && !hideTooltip;
+
+        return (
+            <>
+                <Component
+                    className={cn(
+                        'hui-focus-visible-outline flex items-center justify-center rounded-container disabled:text-text-disabled',
+                        colorClasses,
+                        shape === 'circle' && 'rounded-full',
+                        className
+                    )}
+                    data-hui-id="IconButton"
+                    data-tooltip-id={shouldShowTooltip ? tooltipId : undefined}
+                    disabled={disabled}
+                    ref={ref}
+                    style={{
+                        height: dimension,
+                        minHeight: dimension,
+                        minWidth: dimension,
+                        width: dimension,
+                    }}
+                    {...rest}
+                >
+                    <Icon
+                        $withoutAriaLabel={rest['aria-label'] !== undefined ? true : undefined}
+                        color="inherit"
+                        size={size}
+                        style={iconStyle}
+                    />
+                </Component>
+                {shouldShowTooltip && (
+                    <Tooltip
+                        content={rest['aria-label']}
+                        delayShow={200}
+                        id={tooltipId}
+                    />
+                )}
+            </>
+        );
+    }
+);
+
+IconButton.displayName = 'IconButton';

package/src/Icons/CreditCardIcon/CreditCardIcon.tsx

@@ -0,0 +1,73 @@
+import { cn } from '@evolve.ui/theme-system';
+
+import {
+    amex,
+    cash,
+    check,
+    diners,
+    discover,
+    jcb,
+    mastercard,
+    moneyOrder,
+    other,
+    visa,
+    wireTransfer,
+} from './cardIcons';
+
+export type CardBrands =
+    | 'amex'
+    | 'cash'
+    | 'check'
+    | 'diners'
+    | 'discover'
+    | 'jcb'
+    | 'mastercard'
+    | 'money-order'
+    | 'other'
+    | 'visa'
+    | 'wire-transfer';
+
+export type CardIconProps = {
+    brand: CardBrands;
+    className?: string;
+};
+
+export const cardImages = {
+    amex,
+    cash,
+    check,
+    diners,
+    discover,
+    jcb,
+    mastercard,
+    'money-order': moneyOrder,
+    other,
+    visa,
+    'wire-transfer': wireTransfer,
+} as const;
+
+export const CreditCardIcon = ({ brand, className }: CardIconProps) => {
+    let svg = other;
+    let testId = 'other';
+
+    if (brand in cardImages) {
+        svg = cardImages[brand];
+        testId = brand;
+    }
+
+    return (
+        <svg
+            className={cn('h-[20px] w-[30px]', className)}
+            data-testid={`credit-card-icon-${testId}`}
+            fill="none"
+            height="20"
+            viewBox="0 0 30 20"
+            width="30"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            {svg}
+        </svg>
+    );
+};
+
+CreditCardIcon.displayName = 'CreditCardIcon';