nishant-design-system/lib/components/Link/Link.js.flow

Sense UI components library

// @flow strict

import * as React from 'react';

import type {ColorTypes} from '../../types/typography';
import {TEXT_COLORS} from '../../types/typography';
import classify from '../../utils/classify';

import css from '../../styles/typography.module.css';


export const LINK_AS = Object.freeze({
  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 = $Values<typeof LINK_AS>;

export const ANCHOR_REL = Object.freeze({
  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 = $Values<typeof ANCHOR_REL>;

export const ANCHOR_TARGET = Object.freeze({
  _blank: '_blank',
  _self: '_self',
  _parent: '_parent',
  _top: '_top',
  framename: 'framename',
});

export type AnchorTarget = $Values<typeof ANCHOR_TARGET>;

export type LinkProps = {
  color?: ColorTypes,
  children: React.Node,
  className?: string,
  as?: LinkAs,
  rel?: AnchorRel,
  underline?: boolean,
  target?: AnchorTarget,
  href?: string,
  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
  tabIndex?: number,
  disabled?: boolean,
  ...
};

export const Link: React$AbstractComponent<LinkProps, HTMLAnchorElement> =
  React.forwardRef<LinkProps, HTMLAnchorElement>(
    (
      {
        color = TEXT_COLORS.clickable,
        children,
        className,
        as = 'buttonTextExtraSmall',
        underline = true,
        tabIndex = 0,
        disabled,
        ...props
      }: LinkProps,
      ref,
    ) => {
      const linkRef = React.useRef(null);
      React.useImperativeHandle(ref, () => linkRef.current);
      React.useEffect(() => {
        if (disabled) {
          linkRef.current?.blur();
        }
      }, [disabled]);

      return (
        <a
          {...props}
          tabIndex={disabled ? -1 : tabIndex}
          ref={linkRef}
          data-testid="Link"
          className={classify(
            css.link,
            css[as],
            css[color],
            {
              [css.underline]: underline,
              [css.disabled]: disabled,
            },
            className,
          )}
        >
          {children}
        </a>
      );
    },
  );