@spaced-out/ui-design-system/lib/components/Link/Link.d.ts

Sense UI components library

import * as React from 'react';
import type { Flow } from 'flow-to-typescript-codemod';
import type { ColorTypes } from '../../types/typography';
import type { IconSize, IconType } from '../../components/Icon';
export declare const LINK_AS: Readonly<{
    bodyLarge: "bodyLarge";
    bodyMedium: "bodyMedium";
    bodySmall: "bodySmall";
    buttonTextExtraSmall: "buttonTextExtraSmall";
    buttonTextMedium: "buttonTextMedium";
    buttonTextSmall: "buttonTextSmall";
    formInputMedium: "formInputMedium";
    formInputSmall: "formInputSmall";
    formLabelMedium: "formLabelMedium";
    formLabelSmall: "formLabelSmall";
    jumboMedium: "jumboMedium";
    subTitleExtraSmall: "subTitleExtraSmall";
    subTitleLarge: "subTitleLarge";
    subTitleMedium: "subTitleMedium";
    subTitleSmall: "subTitleSmall";
    titleMedium: "titleMedium";
}>;
export type LinkAs = (typeof LINK_AS)[keyof typeof LINK_AS];
export declare const ANCHOR_REL: Readonly<{
    alternate: "alternate";
    author: "author";
    bookmark: "bookmark";
    external: "external";
    help: "help";
    license: "license";
    next: "next";
    nofollow: "nofollow";
    noopener: "noopener";
    noreferrer: "noreferrer";
    search: "search";
    tag: "tag";
}>;
export type AnchorRel = (typeof ANCHOR_REL)[keyof typeof ANCHOR_REL];
export declare const ANCHOR_TARGET: Readonly<{
    _blank: "_blank";
    _self: "_self";
    _parent: "_parent";
    _top: "_top";
    framename: "framename";
}>;
export type AnchorTarget = (typeof ANCHOR_TARGET)[keyof typeof ANCHOR_TARGET];
export interface BaseLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'onClick' | 'tabIndex' | 'disabled' | 'className' | 'as' | 'rel' | 'target' | 'iconLeftName' | 'iconLeftSize' | 'iconLeftType' | 'iconRightName' | 'iconRightSize' | 'iconRightType' | 'to' | 'href'> {
    children: React.ReactNode;
    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
    tabIndex?: number;
    disabled?: boolean;
    className?: string;
    as?: LinkAs;
    rel?: AnchorRel;
    target?: AnchorTarget;
    iconLeftName?: string;
    iconLeftSize?: IconSize;
    iconLeftType?: IconType;
    iconRightName?: string;
    iconRightSize?: IconSize;
    iconRightType?: IconType;
    testId?: string;
    /**
     * IMPORTANT: If you are using `to` make sure to provide link component from your router
     * if you want to prevent full page reloads in a Single Page Application (SPA).
     *
     * Using `href` in anchor tags causes the browser to navigate to a new URL,
     * resulting in a full page reload. However, in a Single Page Application (SPA), we aim to provide a seamless
     * user experience without such reloads.
     *
     * To achieve client-side navigation and prevent page reloads, use client-side routing libraries
     * (e.g., React Router) and their navigation components (e.g., <Link> or <a> with an onClick handler)
     * to handle navigation within your SPA. These components work without triggering full page reloads
     * and maintain the SPA's performance and user experience.
     *
     */
    to?: string;
    href?: string;
}
export interface LinkProps extends Omit<BaseLinkProps, 'color' | 'underline' | 'linkComponent'> {
    color?: ColorTypes;
    underline?: boolean;
    /**
     * Provide your router's link component
     *
     * import {Link} from 'src/rerouter';
     * import {Link as GenesisLink} from '@spaced-out/ui-design-system/lib/components/Link';
     *
     * <GenesisLink linkComponent={Link} to="/pages" />
     */
    linkComponent?: Flow.AbstractComponent<BaseLinkProps, HTMLAnchorElement | null | undefined>;
}
export declare const Link: Flow.AbstractComponent<LinkProps, HTMLAnchorElement | null | undefined>;
//# sourceMappingURL=Link.d.ts.map