import type { IconNames } from "@jobber/design"; import type { LinkProps } from "react-router-dom"; import type { XOR } from "ts-xor"; import type { CSSProperties } from "react"; import type { TypographyProps } from "../Typography/Typography"; import type { IconProps } from "../Icon/Icon"; export type HTMLButtonType = "button" | "submit"; export type ButtonVariation = "work" | "learning" | "subtle" | "destructive"; export type ButtonSize = "small" | "base" | "large"; export type ButtonType = "primary" | "secondary" | "tertiary"; export interface ButtonFoundationProps { /** * Used for screen readers. Will override label on screen * reader if present. */ readonly ariaControls?: string; readonly ariaHaspopup?: boolean; readonly ariaExpanded?: boolean; readonly disabled?: boolean; readonly external?: boolean; readonly fullWidth?: boolean; readonly id?: string; readonly loading?: boolean; readonly size?: ButtonSize; readonly ariaLabel?: string; onClick?(event: React.MouseEvent): void; onMouseDown?(event: React.MouseEvent): void; /** * **Use at your own risk:** Custom class names for specific elements. This should only be used as a * **last resort**. Using this may result in unexpected side effects. * **Note:** If you are applying fill override to buttonIcon.path, you will need to add !important due * to Button's children element css inheritance. * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components). */ readonly UNSAFE_className?: { container?: string; buttonLabel?: TypographyProps["UNSAFE_className"]; buttonIcon?: IconProps["UNSAFE_className"]; }; /** * **Use at your own risk:** Custom style for specific elements. This should only be used as a * **last resort**. Using this may result in unexpected side effects. * **Note:** If you are applying fill override to buttonIcon.path, you will need to add !important due * to Button's children element css inheritance. * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components). */ readonly UNSAFE_style?: { container?: CSSProperties; buttonLabel?: TypographyProps["UNSAFE_style"]; buttonIcon?: IconProps["UNSAFE_style"]; }; } interface ButtonNonComposableProps extends ButtonFoundationProps { readonly icon?: IconNames; readonly iconOnRight?: boolean; readonly label?: string; } interface ButtonIconProps extends ButtonNonComposableProps { readonly icon: IconNames; readonly ariaLabel: string; } interface ButtonLabelProps extends ButtonNonComposableProps { readonly label: string; } interface ButtonAnchorProps extends ButtonFoundationProps { /** * Used to create an 'href' on an anchor tag. */ readonly url?: string; } interface ButtonLinkProps extends ButtonFoundationProps { /** * **Deprecated**: to will be removed in the next major version * @deprecated */ readonly to?: LinkProps["to"]; } interface BaseActionProps extends ButtonFoundationProps { readonly variation?: ButtonVariation; readonly type?: ButtonType; } interface DestructiveActionProps extends ButtonFoundationProps { readonly variation: Extract; readonly type?: ButtonType; } interface SubmitActionProps extends Omit { readonly name?: string; readonly submit: boolean; readonly type?: ButtonType; readonly value?: string; } interface SubmitButtonProps extends Omit { /** * Allows the button to submit a form */ submit: boolean; } interface BasicButtonProps extends ButtonFoundationProps { /** * Used to override the default button role. */ readonly role?: string; } type BaseButtonProps = XOR> & XOR, XOR>; export type ButtonWithChildrenProps = BaseButtonProps & { readonly children: React.ReactNode; }; export type ButtonWithoutChildrenProps = BaseButtonProps & XOR & { readonly children?: never; }; export type ButtonProps = XOR; export {};