@toptal/picasso-link 3.0.5-alpha-fx-6095-number-input-misses-type-button-353a18c00.1 → 3.0.5-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14

package/dist-package/src/Link/Link.d.ts

@@ -32,6 +32,21 @@ export declare type Props = BaseProps & AnchorHTMLAttributes<HTMLAnchorElement>
     noUnderline?: boolean;
     'aria-disabled'?: boolean;
 };
+declare type ViewModel = {
+    className: string;
+    href?: string;
+    target?: string;
+    color?: 'inherit';
+    rel?: string;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    weight: 'inherit' | 'semibold';
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    as: Props['as'];
+    ariaDisabled?: boolean;
+    nativeHTMLAttributes: Omit<Props, keyof BaseProps>;
+};
+export declare const calculateViewModel: (props: Props) => ViewModel;
 export declare const Link: OverridableComponent<Props>;
 export default Link;
 //# sourceMappingURL=Link.d.ts.map

package/dist-package/src/Link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACzE,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAG7E,QAAA,MAAM,eAAe,4BAA6B,CAAA;AAClD,QAAA,MAAM,iBAAiB,+BAAgC,CAAA;AAEvD,aAAK,WAAW,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,aAAK,SAAS,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AA0CjD,oBAAY,KAAK,GAAG,SAAS,GAC3B,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IACxC,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iDAAiD;IACjD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC9D;;;OAGG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAA;IACnD,qDAAqD;IACrD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,iCAAiC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAKH,eAAO,MAAM,IAAI,EAAE,oBAAoB,CAAC,KAAK,CA+D3C,CAAA;AAWF,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACzE,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAG7E,QAAA,MAAM,eAAe,4BAA6B,CAAA;AAClD,QAAA,MAAM,iBAAiB,+BAAgC,CAAA;AAEvD,aAAK,WAAW,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,aAAK,SAAS,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AA0CjD,oBAAY,KAAK,GAAG,SAAS,GAC3B,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IACxC,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iDAAiD;IACjD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC9D;;;OAGG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAA;IACnD,qDAAqD;IACrD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,iCAAiC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAKH,aAAK,SAAS,GAAG;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC9D,MAAM,EAAE,SAAS,GAAG,UAAU,CAAA;IAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;IACf,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,oBAAoB,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,SAAS,CAAC,CAAA;CACnD,CAAA;AAGD,eAAO,MAAM,kBAAkB,UAAW,KAAK,KAAG,SAqDjD,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,oBAAoB,CAAC,KAAK,CA0B3C,CAAA;AAWF,eAAe,IAAI,CAAA"}

package/dist-package/src/Link/Link.js

@@ -48,22 +48,39 @@ const COLOR_DISABLED_MAP = {
 };
 const defaultColor = 'blue';
 const defaultVariant = 'anchor';
-export const Link = forwardRef(function Link(props, ref) {
-    const { href, onClick, children, className, color: inputColor = 'blue', style, as = 'a', variant: inputVariant = 'anchor', tabIndex, target, rel, disabled, visited = false, noUnderline, 'aria-disabled': ariaDisabled } = props, rest = __rest(props, ["href", "onClick", "children", "className", "color", "style", "as", "variant", "tabIndex", "target", "rel", "disabled", "visited", "noUnderline", 'aria-disabled']);
-    const nativeHTMLAttributes = rest;
+/* eslint-disable complexity */
+export const calculateViewModel = (props) => {
+    const { href, onClick, className, as = 'a', color: inputColor = 'blue', style, variant: inputVariant = 'anchor', tabIndex, target, rel, disabled, visited = false, noUnderline, 'aria-disabled': ariaDisabled } = props, nativeHTMLAttributes = __rest(props, ["href", "onClick", "className", "as", "color", "style", "variant", "tabIndex", "target", "rel", "disabled", "visited", "noUnderline", 'aria-disabled']);
     const sanitizedRel = sanitizeRel(rel, target);
     // When Link is used as={Link}, TypeScript can't ensure the input to the Link is compatible with its Props type.
     const color = supportedColors.includes(inputColor) ? inputColor : defaultColor;
     const variant = supportedVariants.includes(inputVariant)
         ? inputVariant
         : defaultVariant;
-    return (React.createElement(Typography, Object.assign({}, nativeHTMLAttributes, { ref: ref, as: as, 
-        // @ts-expect-error Typography is incompatible with href prop
-        href: disabled ? undefined : href, target: disabled ? undefined : target, rel: sanitizedRel, onClick: disabled ? undefined : onClick, color: 'inherit', weight: variant === 'action' ? 'semibold' : 'inherit', className: twMerge('focus:outline-none hover:underline leading-[inherit]', COLOR_DISABLED_MAP[color][variant][disabled ? 'disabled' : 'normal'], disabled ? 'cursor-not-allowed' : '', noUnderline ? '!no-underline' : '', visited
+    return {
+        className: twMerge('focus:outline-none hover:underline leading-[inherit]', COLOR_DISABLED_MAP[color][variant][disabled ? 'disabled' : 'normal'], disabled ? 'cursor-not-allowed' : '', noUnderline ? '!no-underline' : '', visited
             ? color === 'blue'
                 ? 'visited text-purple-500'
                 : 'visited text-gray-500'
-            : '', onClick || href ? 'cursor-pointer' : '', className), style: style, tabIndex: tabIndex, "aria-disabled": disabled || ariaDisabled }), children));
+            : '', onClick || href ? 'cursor-pointer' : '', className),
+        href: disabled ? undefined : href,
+        target: disabled ? undefined : target,
+        rel: sanitizedRel,
+        onClick: disabled ? undefined : onClick,
+        weight: variant === 'action' ? 'semibold' : 'inherit',
+        color: 'inherit',
+        style,
+        tabIndex,
+        as,
+        ariaDisabled: disabled || ariaDisabled,
+        nativeHTMLAttributes,
+    };
+};
+export const Link = forwardRef(function Link(props, ref) {
+    const viewModel = calculateViewModel(props);
+    return (React.createElement(Typography, Object.assign({}, viewModel.nativeHTMLAttributes, { ref: ref, as: viewModel.as, 
+        // @ts-expect-error Typography is incompatible with href prop
+        href: viewModel.href, target: viewModel.target, rel: viewModel.rel, onClick: viewModel.onClick, color: viewModel.color, weight: viewModel.weight, className: viewModel.className, style: viewModel.style, tabIndex: viewModel.tabIndex, "aria-disabled": viewModel.ariaDisabled }), props.children));
 });
 Link.defaultProps = {
     as: 'a',

package/dist-package/src/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/Link/Link.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/Link/Link.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-link",
-  "version": "3.0.5-alpha-fx-6095-number-input-misses-type-button-353a18c00.1+353a18c00",
+  "version": "3.0.5-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916",
   "description": "Toptal UI components library - Link",
   "publishConfig": {
     "access": "public"
@@ -22,8 +22,8 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-typography": "4.0.3-alpha-fx-6095-number-input-misses-type-button-353a18c00.1+353a18c00",
-    "@toptal/picasso-utils": "3.0.1-alpha-fx-6095-number-input-misses-type-button-353a18c00.1+353a18c00"
+    "@toptal/picasso-typography": "4.0.3-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916",
+    "@toptal/picasso-utils": "3.0.1-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916"
   },
   "sideEffects": [
     "**/styles.ts",
@@ -39,14 +39,14 @@
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "5.0.1-alpha-fx-6095-number-input-misses-type-button-353a18c00.175+353a18c00",
-    "@toptal/picasso-tailwind-merge": "2.0.3-alpha-fx-6095-number-input-misses-type-button-353a18c00.1+353a18c00",
-    "@toptal/picasso-test-utils": "1.1.2-alpha-fx-6095-number-input-misses-type-button-353a18c00.254+353a18c00"
+    "@toptal/picasso-provider": "5.0.1-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.188+3ab759916",
+    "@toptal/picasso-tailwind-merge": "2.0.3-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916",
+    "@toptal/picasso-test-utils": "1.1.2-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.267+3ab759916"
   },
   "files": [
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
   ],
-  "gitHead": "353a18c00d04fe7c52e2ba8a52a4bc900ca33bda"
+  "gitHead": "3ab75991614e7b60794ebca5dcc0ec8863b417b9"
 }

package/src/Link/Link.tsx

@@ -83,18 +83,30 @@ export type Props = BaseProps &
 const defaultColor = 'blue'
 const defaultVariant = 'anchor'
 
-export const Link: OverridableComponent<Props> = forwardRef<
-  HTMLAnchorElement,
-  Props
->(function Link(props, ref) {
+type ViewModel = {
+  className: string
+  href?: string
+  target?: string
+  color?: 'inherit'
+  rel?: string
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void
+  weight: 'inherit' | 'semibold'
+  style?: React.CSSProperties
+  tabIndex?: number
+  as: Props['as']
+  ariaDisabled?: boolean
+  nativeHTMLAttributes: Omit<Props, keyof BaseProps>
+}
+
+/* eslint-disable complexity */
+export const calculateViewModel = (props: Props): ViewModel => {
   const {
     href,
     onClick,
-    children,
     className,
+    as = 'a',
     color: inputColor = 'blue',
     style,
-    as = 'a',
     variant: inputVariant = 'anchor',
     tabIndex,
     target,
@@ -103,9 +115,9 @@ export const Link: OverridableComponent<Props> = forwardRef<
     visited = false,
     noUnderline,
     'aria-disabled': ariaDisabled,
-    ...rest
+    ...nativeHTMLAttributes
   } = props
-  const nativeHTMLAttributes = rest
+
   const sanitizedRel = sanitizeRel(rel, target)
 
   // When Link is used as={Link}, TypeScript can't ensure the input to the Link is compatible with its Props type.
@@ -114,36 +126,58 @@ export const Link: OverridableComponent<Props> = forwardRef<
     ? inputVariant
     : defaultVariant
 
+  return {
+    className: twMerge(
+      'focus:outline-none hover:underline leading-[inherit]',
+      COLOR_DISABLED_MAP[color][variant][disabled ? 'disabled' : 'normal'],
+      disabled ? 'cursor-not-allowed' : '',
+      noUnderline ? '!no-underline' : '',
+      visited
+        ? color === 'blue'
+          ? 'visited text-purple-500'
+          : 'visited text-gray-500'
+        : '',
+      onClick || href ? 'cursor-pointer' : '',
+      className
+    ),
+    href: disabled ? undefined : href,
+    target: disabled ? undefined : target,
+    rel: sanitizedRel,
+    onClick: disabled ? undefined : onClick,
+    weight: variant === 'action' ? 'semibold' : 'inherit',
+    color: 'inherit',
+    style,
+    tabIndex,
+    as,
+    ariaDisabled: disabled || ariaDisabled,
+    nativeHTMLAttributes,
+  }
+}
+
+export const Link: OverridableComponent<Props> = forwardRef<
+  HTMLAnchorElement,
+  Props
+>(function Link(props, ref) {
+  const viewModel = calculateViewModel(props)
+
   return (
     <Typography
-      {...nativeHTMLAttributes}
+      {...viewModel.nativeHTMLAttributes}
       ref={ref}
-      as={as}
+      as={viewModel.as}
       // @ts-expect-error Typography is incompatible with href prop
-      href={disabled ? undefined : href}
-      target={disabled ? undefined : target}
-      rel={sanitizedRel}
-      onClick={disabled ? undefined : onClick}
-      color='inherit'
-      weight={variant === 'action' ? 'semibold' : 'inherit'}
-      className={twMerge(
-        'focus:outline-none hover:underline leading-[inherit]',
-        COLOR_DISABLED_MAP[color][variant][disabled ? 'disabled' : 'normal'],
-        disabled ? 'cursor-not-allowed' : '',
-        noUnderline ? '!no-underline' : '',
-        visited
-          ? color === 'blue'
-            ? 'visited text-purple-500'
-            : 'visited text-gray-500'
-          : '',
-        onClick || href ? 'cursor-pointer' : '',
-        className
-      )}
-      style={style}
-      tabIndex={tabIndex}
-      aria-disabled={disabled || ariaDisabled}
+      href={viewModel.href}
+      target={viewModel.target}
+      rel={viewModel.rel}
+      onClick={viewModel.onClick}
+      color={viewModel.color}
+      weight={viewModel.weight}
+      className={viewModel.className}
+      style={viewModel.style}
+      tabIndex={viewModel.tabIndex}
+      aria-disabled={viewModel.ariaDisabled}
     >
-      {children}
+      {props.children}
     </Typography>
   )
 })

package/src/Link/__snapshots__/test.tsx.snap

@@ -14,24 +14,7 @@ exports[`Link renders 1`] = `
 </div>
 `;
 
-exports[`Link renders a Link from react-router 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <div>
-      <a
-        class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline"
-        href="/"
-      >
-        Please verify your email
-      </a>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Link renders disabled link 1`] = `
+exports[`Link when disabled renders disabled link 1`] = `
 <div>
   <div
     class="Picasso-root"
@@ -48,7 +31,7 @@ exports[`Link renders disabled link 1`] = `
 </div>
 `;
 
-exports[`Link renders native attributes 1`] = `
+exports[`Link when native attributes are provided renders native attributes 1`] = `
 <div>
   <div
     class="Picasso-root"
@@ -65,3 +48,20 @@ exports[`Link renders native attributes 1`] = `
   </div>
 </div>
 `;
+
+exports[`Link when using react-router Link renders a Link from react-router 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div>
+      <a
+        class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline"
+        href="/"
+      >
+        Please verify your email
+      </a>
+    </div>
+  </div>
+</div>
+`;

package/src/Link/test.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { render, fireEvent } from '@toptal/picasso-test-utils'
 import { MemoryRouter, Link as RouterLink } from 'react-router-dom'
 
+import { calculateViewModel } from './Link'
 import { Link } from '../Link'
 
 describe('Link', () => {
@@ -11,91 +12,335 @@ describe('Link', () => {
     expect(container).toMatchSnapshot()
   })
 
-  it('renders native attributes', () => {
-    const { container } = render(
-      <Link
-        onBlur={() => window.alert('onBlur')}
-        rel='noopener'
-        target='_blank'
-        download='filename'
-        href='https://toptal.com/filename.txt'
-      >
-        Please verify your email
-      </Link>
-    )
+  describe('when native attributes are provided', () => {
+    it('renders native attributes', () => {
+      const { container } = render(
+        <Link
+          onBlur={() => window.alert('onBlur')}
+          rel='noopener'
+          target='_blank'
+          download='filename'
+          href='https://toptal.com/filename.txt'
+        >
+          Please verify your email
+        </Link>
+      )
 
-    expect(container).toMatchSnapshot()
+      expect(container).toMatchSnapshot()
+    })
   })
 
-  it('renders a Link from react-router', () => {
-    const { container } = render(
-      <MemoryRouter>
-        <div>
-          <Link as={RouterLink} to='/'>
-            Please verify your email
-          </Link>
-        </div>
-      </MemoryRouter>
-    )
+  describe('when using react-router Link', () => {
+    it('renders a Link from react-router', () => {
+      const { container } = render(
+        <MemoryRouter>
+          <div>
+            <Link as={RouterLink} to='/'>
+              Please verify your email
+            </Link>
+          </div>
+        </MemoryRouter>
+      )
 
-    expect(container).toMatchSnapshot()
+      expect(container).toMatchSnapshot()
+    })
   })
 
-  it('renders disabled link', () => {
-    const { container } = render(
-      <Link
-        rel='noopener'
-        target='_blank'
-        download='filename'
-        href='https://toptal.com/filename.txt'
-        disabled
-      >
-        Please verify your email
-      </Link>
-    )
+  describe('when disabled', () => {
+    it('renders disabled link', () => {
+      const { container } = render(
+        <Link
+          rel='noopener'
+          target='_blank'
+          download='filename'
+          href='https://toptal.com/filename.txt'
+          disabled
+        >
+          Please verify your email
+        </Link>
+      )
 
-    expect(container).toMatchSnapshot()
+      expect(container).toMatchSnapshot()
+    })
+
+    it('does not allow onClick', () => {
+      const onClick = jest.fn()
+      const { getByTestId } = render(
+        <Link
+          data-testid='foo'
+          onClick={onClick}
+          href='https://foo.bar'
+          disabled
+        >
+          Test
+        </Link>
+      )
+
+      fireEvent.click(getByTestId('foo'))
+      expect(onClick).not.toHaveBeenCalled()
+    })
+
+    it('does not have href', () => {
+      const { getByTestId } = render(
+        <Link data-testid='foo' href='https://foo.bar' disabled>
+          Test
+        </Link>
+      )
+
+      expect(getByTestId('foo')).not.toHaveAttribute('href')
+    })
+  })
+
+  describe('when target="_blank"', () => {
+    it('adds rel="noopener" if rel is absent', () => {
+      render(
+        <Link href='http://example.com' target='_blank'>
+          External Link
+        </Link>
+      )
+      expect(document.querySelector('a')).toHaveAttribute('rel', 'noopener')
+    })
+
+    it('does not add rel="noopener" if noreferrer is present', () => {
+      render(
+        <Link href='http://example.com' target='_blank' rel='noreferrer'>
+          External Link
+        </Link>
+      )
+      expect(document.querySelector('a')).not.toHaveAttribute('rel', 'noopener')
+    })
+  })
+})
+
+describe('calculateViewModel', () => {
+  describe('when no props are provided', () => {
+    it('applies default values', () => {
+      const props = {}
+      const result = calculateViewModel(props)
+
+      expect(result.className).toContain('text-blue-500')
+      expect(result.href).toBeUndefined()
+      expect(result.target).toBeUndefined()
+      expect(result.rel).toBeUndefined()
+      expect(result.onClick).toBeUndefined()
+      expect(result.weight).toBe('inherit')
+      expect(result.ariaDisabled).toBeUndefined()
+    })
+  })
+
+  describe('when href, target and onClick are provided', () => {
+    it('passes them through to view model', () => {
+      const props = {
+        href: 'https://example.com',
+        target: '_blank',
+        onClick: jest.fn(),
+      }
+      const result = calculateViewModel(props)
+
+      expect(result.href).toBe('https://example.com')
+      expect(result.target).toBe('_blank')
+      expect(result.onClick).toBe(props.onClick)
+    })
+  })
+
+  describe('when target="_blank" and rel is provided', () => {
+    it('sanitizes rel for target="_blank"', () => {
+      const props = {
+        target: '_blank',
+        rel: 'nofollow',
+      }
+      const result = calculateViewModel(props)
+
+      expect(result.rel).toBe('nofollow noopener')
+    })
+  })
+
+  describe('when disabled', () => {
+    it('applies disabled behavior', () => {
+      const props = {
+        disabled: true,
+        href: 'https://example.com',
+        target: '_blank',
+        onClick: jest.fn(),
+      }
+      const result = calculateViewModel(props)
+
+      expect(result.className).toContain('cursor-pointer')
+      expect(result.href).toBeUndefined()
+      expect(result.target).toBeUndefined()
+      expect(result.onClick).toBeUndefined()
+      expect(result.ariaDisabled).toBe(true)
+    })
+
+    it('applies disabled color styles for the provided color', () => {
+      const blueProps = {
+        color: 'blue',
+        disabled: true,
+      }
+      const whiteProps = {
+        color: 'white',
+        disabled: true,
+      }
+
+      const blueResult = calculateViewModel(blueProps)
+      const whiteResult = calculateViewModel(whiteProps)
+
+      expect(blueResult.className).toContain(
+        'focus:outline-none hover:underline leading-[inherit] text-gray-600 underline cursor-not-allowed'
+      )
+      expect(whiteResult.className).toContain('text-gray-600')
+    })
   })
 
-  it('adds rel="noopener" to target="_blank" links in its absence', () => {
-    render(
-      <Link href='http://example.com' target='_blank'>
-        External Link
-      </Link>
-    )
+  describe('when visited is true', () => {
+    it('applies visited class when color is blue', () => {
+      const props = {
+        visited: true,
+        color: 'blue',
+      }
+      const result = calculateViewModel(props)
 
-    expect(document.querySelector('a')).toHaveAttribute('rel', 'noopener')
+      expect(result.className).toContain('visited text-purple-500')
+    })
+
+    it('applies visited class when color is white', () => {
+      const props = {
+        color: 'white',
+        visited: true,
+      }
+      const result = calculateViewModel(props)
+
+      expect(result.className).toContain('visited text-gray-500')
+    })
+  })
+
+  describe('when noUnderline is true', () => {
+    it('handles noUnderline properly', () => {
+      const props = {
+        noUnderline: true,
+        color: 'blue',
+      }
+      const result = calculateViewModel(props)
+
+      expect(result.className).toContain('!no-underline')
+    })
+  })
+
+  describe('when variant is provided', () => {
+    it('applies correct weight based on variant', () => {
+      const actionProps = {
+        variant: 'action' as const,
+      }
+      const anchorProps = {
+        variant: 'anchor' as const,
+      }
+
+      const actionResult = calculateViewModel(actionProps)
+      const anchorResult = calculateViewModel(anchorProps)
+
+      expect(actionResult.weight).toBe('semibold')
+      expect(anchorResult.weight).toBe('inherit')
+    })
+  })
+
+  describe('when unsupported color or variant is provided', () => {
+    it('uses default values', () => {
+      const props = {
+        color: 'unsupportedColor',
+        variant: 'unsupportedVariant',
+      }
+      const result = calculateViewModel(props)
+
+      expect(result.className).toContain('text-blue-500')
+      expect(result.weight).toBe('inherit')
+    })
+  })
+
+  describe('when className is provided', () => {
+    it('applies custom className', () => {
+      const props = {
+        className: 'custom-class',
+      }
+      const result = calculateViewModel(props)
+
+      expect(result.className).toContain('custom-class')
+    })
   })
 
-  it('does not add rel="noopener" to target="_blank" if noreferrer is present', () => {
-    render(
-      <Link href='http://example.com' target='_blank' rel='noreferrer'>
-        External Link
-      </Link>
-    )
+  describe('when tabIndex is provided', () => {
+    it('applies tabIndex', () => {
+      const props = {
+        tabIndex: 0,
+      }
+      const result = calculateViewModel(props)
 
-    expect(document.querySelector('a')).not.toHaveAttribute('rel', 'noopener')
+      expect(result.tabIndex).toBe(0)
+    })
   })
 
-  it('does not allow onClick when disabled', () => {
-    const onClick = jest.fn()
-    const { getByTestId } = render(
-      <Link data-testid='foo' onClick={onClick} href='https://foo.bar' disabled>
-        Test
-      </Link>
-    )
+  describe('when additional native HTML attributes are provided', () => {
+    it('includes them', () => {
+      const props = {
+        'data-test-id': 'link-element',
+      }
+      const result = calculateViewModel(props)
 
-    fireEvent.click(getByTestId('foo'))
-    expect(onClick).not.toHaveBeenCalled()
+      expect(result.nativeHTMLAttributes['data-test-id']).toBe('link-element')
+    })
   })
 
-  it('does not have href when disabled', () => {
-    const { getByTestId } = render(
-      <Link data-testid='foo' href='https://foo.bar' disabled>
-        Test
-      </Link>
-    )
+  describe('when "as" prop is provided', () => {
+    it('applies the default "as" prop as "a" when no "as" prop is provided', () => {
+      const props = {}
+      const result = calculateViewModel(props)
+
+      expect(result.as).toBe('a')
+    })
+
+    it('applies the provided "as" prop when a custom element type is given', () => {
+      const props = {
+        as: 'button',
+      }
+      const result = calculateViewModel(props)
+
+      expect(result.as).toBe('button')
+    })
+
+    it('applies the provided "as" prop with a custom React component', () => {
+      const CustomComponent = () => <div />
+      const props = {
+        as: CustomComponent,
+      }
+      const result = calculateViewModel(props)
+
+      expect(result.as).toBe(CustomComponent)
+    })
+  })
+
+  describe('when color prop is provided', () => {
+    it('applies the default color "blue" when no color prop is provided', () => {
+      const props = {}
+      const result = calculateViewModel(props)
+
+      expect(result.className).toContain('text-blue-500')
+    })
+
+    it('applies the white color when color="white" is provided', () => {
+      const props = {
+        color: 'white',
+      }
+      const result = calculateViewModel(props)
+
+      expect(result.className).toContain('inherit')
+    })
+
+    it('fallbacks to the default color "blue" if an unsupported color is provided', () => {
+      const props = {
+        color: 'unsupportedColor',
+      }
+      const result = calculateViewModel(props)
 
-    expect(getByTestId('foo')).not.toHaveAttribute('href')
+      expect(result.className).toContain('text-blue-500')
+    })
   })
 })