@wix/design-system/dist/types/Text/Text.types.d.ts

@wix/design-system

import * as React from 'react';
import { EllipsisCommonProps } from '../common/Ellipsis';
import { TooltipCommonProps } from '../common';
import { ValuesOf } from '../utils/typeUtils';
import { WEIGHTS, SKINS, SIZES } from './constants';
export type TextWithAsProp<T> = TextAsSpanProps<T> | TextAsAnchorProps<T> | TextAsLabelProps<T> | TextGenericProps<T> | TextAsComponentProps<T>;
type TextAsSpanProps<T> = React.HTMLAttributes<HTMLSpanElement> & T & {
    tagName?: 'span';
    onClick?: React.MouseEventHandler<HTMLElement>;
};
type TextAsAnchorProps<T> = React.AnchorHTMLAttributes<HTMLAnchorElement> & T & {
    tagName: 'a';
    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
};
type TextAsLabelProps<T> = React.LabelHTMLAttributes<HTMLLabelElement> & T & {
    tagName: 'label';
};
type TextGenericProps<T> = T & {
    tagName: keyof Omit<HTMLElementTagNameMap, 'a' | 'span' | 'label'>;
    onClick?: React.MouseEventHandler<HTMLElement>;
    [additionalProps: string]: any;
};
type TextAsComponentProps<T> = T & {
    tagName: React.ComponentType<any>;
    onClick?: React.MouseEventHandler<HTMLElement>;
    [additionalProps: string]: any;
};
export type TextPropsBase = Omit<EllipsisCommonProps, 'size'> & {
    /** Applies a data-hook HTML attribute that can be used in the tests. */
    dataHook?: string;
    /** Defines a tag name that text should be rendered inside of (e.g., div, a, p). */
    tagName?: string;
    /** Specifies a CSS class name to be appended to the component’s root element.
     * @internal
     */
    className?: string;
    /** Controls the font size of the text. */
    size?: TextSize;
    /** Sets text type to secondary. Affects font color only. */
    secondary?: boolean;
    /** Controls the skin of the text. */
    skin?: TextSkin;
    /** Inverts text color so it can be used on dark backgrounds. */
    light?: boolean;
    /** Controls the font weight of the text. */
    weight?: TextWeight;
    /** Sets list items style. */
    listStyle?: ListStyle;
    /** Allows to pass all common tooltip props.
     * @linkTypeTo components-overlays--tooltip
     * @setTypeName TooltipCommonProps
     */
    tooltipProps?: TooltipCommonProps;
    /** Applies id HTML attribute. */
    id?: string;
    /** if true it will support widows in the text */
    widows?: boolean;
    /** Renders any kind of content within a heading. Usually it’s a text string. */
    children?: React.ReactNode;
    /** Component displayed at the end of text, after ellipsis if truncated.
     * @internal
     */
    suffix?: React.ReactNode;
    /**  Sets "overflow-wrap" CSS property. Controls how text will behave upon overflowing parent component */
    overflowWrap?: OverflowWrap;
    /** A callback fired when ellipsis state changes. */
    onEllipsisStateChange?: (isActive: boolean) => void;
};
export type TextProps = TextWithAsProp<TextPropsBase>;
export type TextSize = ValuesOf<typeof SIZES>;
export type TextSkin = ValuesOf<typeof SKINS>;
export type TextWeight = ValuesOf<typeof WEIGHTS>;
export type ListStyle = 'checkmark' | 'circle';
export type OverflowWrap = 'normal' | 'break-word' | 'anywhere';
export {};
//# sourceMappingURL=Text.types.d.ts.map