🤦 Fix(web-react): Mandatory href for anchors #DS-661

packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx

@@ -9,6 +9,7 @@ import { Link } from '../Link';
 import { useBreadcrumbsStyleProps } from './useBreadcrumbsStyleProps';
 
 const defaultProps = {
+  href: '',
   iconNameEnd: 'chevron-right',
   iconNameStart: 'chevron-left',
   isCurrent: false,

packages/web-react/src/components/Breadcrumbs/demo/BreadcrumbsCustom.tsx

@@ -1,4 +1,6 @@
 import React, { Fragment } from 'react';
+import { ActionLinkColors } from '../../../constants';
+import { UNDERLINED_OPTIONS } from '../../../types';
 import { Icon } from '../../Icon';
 import { Link } from '../../Link';
 import Breadcrumbs from '../Breadcrumbs';
@@ -29,9 +31,9 @@ const BreadcrumbsCustom = () => {
         const isLastItem = index === items.length - 1;
 
         const linkParams = {
-          underlined: isLastItem ? 'hover' : 'always',
+          underlined: isLastItem ? UNDERLINED_OPTIONS.HOVER : UNDERLINED_OPTIONS.ALWAYS,
           'aria-current': isLastItem ? 'page' : undefined,
-          color: isLastItem ? 'secondary' : 'primary',
+          color: isLastItem ? ActionLinkColors.SECONDARY : ActionLinkColors.PRIMARY,
         };
 
         return (

packages/web-react/src/components/Link/Link.tsx

@@ -3,10 +3,10 @@
 import classNames from 'classnames';
 import React, { ElementType, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
-import { PolymorphicRef, SpiritLinkProps } from '../../types';
+import { PolymorphicForwardRef, PolymorphicRef, SpiritLinkProps } from '../../types';
 import { useLinkStyleProps } from './useLinkStyleProps';
 
-const defaultProps: Partial<SpiritLinkProps> = {
+const defaultProps: Partial<SpiritLinkProps<ElementType>> = {
   elementType: 'a',
   color: 'primary',
   hasVisitedStyleAllowed: false,
@@ -41,6 +41,7 @@ const _Link = <E extends ElementType = 'a', T = void>(
   );
 };
 
-const Link = forwardRef<HTMLAnchorElement, SpiritLinkProps<ElementType>>(_Link);
+const Link = (forwardRef as PolymorphicForwardRef)(_Link);
+// const Link = forwardRef(_Link) as typeof _Link;
 
 export default Link;

packages/web-react/src/components/Link/__tests__/Link.test.tsx

@@ -23,8 +23,8 @@ describe('Link', () => {
       <Link
         href="/"
         color={color as ActionLinkColorsDictionaryType<string>}
-        underlined={underlined}
-        isDisabled={isDisabled}
+        underlined={underlined as string}
+        isDisabled={isDisabled as boolean}
       />,
     );
 

packages/web-react/src/components/Link/__tests__/useLinkStyleProps.test.ts

@@ -26,7 +26,7 @@ describe('useLinkStyleProps', () => {
   });
 
   it('should return link-allowed-visited class', () => {
-    const props = { color: 'primary', hasVisitedStyleAllowed: true } as SpiritLinkProps;
+    const props = { href: '#', color: 'primary', hasVisitedStyleAllowed: true } as SpiritLinkProps;
     const { result } = renderHook(() => useLinkStyleProps(props));
 
     expect(result.current.classProps).toContain('link-allow-visited-style');

packages/web-react/src/components/Link/demo/LinkDefault.tsx

@@ -3,11 +3,13 @@ import Link from '../Link';
 
 const LinkDefault = () => (
   <>
-    <Link href="#">Link</Link>
+    <Link href="https://www.example.com/">Link</Link>
 
     <Link href="https://www.example.com/" target="_blank" title="Warning">
       ⚠️ Link with Icon
     </Link>
+
+    <Link elementType="button">Button</Link>
   </>
 );
 

packages/web-react/src/components/Link/useLinkStyleProps.ts

@@ -10,7 +10,9 @@ export interface LinkStyles<E extends ElementType = 'p'> {
   props: Partial<LinkProps<E>>;
 }
 
-export function useLinkStyleProps<E extends ElementType = 'a', T = void>(props: SpiritLinkProps<E, T>): LinkStyles<E> {
+export function useLinkStyleProps<E extends ElementType = 'a', T = void>(
+  props: Partial<SpiritLinkProps<E, T>>,
+): LinkStyles<E> {
   const { color, hasVisitedStyleAllowed, isDisabled, underlined, ...restProps } = props;
 
   const linkClass = useClassNamePrefix('link');

packages/web-react/src/types/link.ts

@@ -2,6 +2,7 @@ import { ElementType } from 'react';
 import {
   ActionLinkColorsDictionaryType,
   ChildrenProps,
+  LinkHrefProps,
   SpiritPolymorphicElementPropsWithRef,
   StyleProps,
   TransferProps,
@@ -13,19 +14,20 @@ export const UNDERLINED_OPTIONS = {
   NEVER: 'never',
 } as const;
 
+export type UnderlinedDictionaryKeys = keyof typeof UNDERLINED_OPTIONS;
+export type UnderlinedDictionaryType = (typeof UNDERLINED_OPTIONS)[UnderlinedDictionaryKeys];
+
 export type LinkTarget = '_blank' | '_self' | '_parent' | '_top';
 
 export type UnderlineOptions = (typeof UNDERLINED_OPTIONS)[keyof typeof UNDERLINED_OPTIONS];
 
 export interface LinkBaseProps<C = void> extends ChildrenProps, StyleProps, TransferProps {
-  /** Link's href attribute */
-  href?: string;
   /** Link's target attribute */
   target?: LinkTarget;
   /** Color of the Link */
   color?: ActionLinkColorsDictionaryType<C>;
   /** When is the Link underlined */
-  underlined?: UnderlineOptions;
+  underlined?: UnderlinedDictionaryType | string;
   /** Whether is the Link disabled */
   isDisabled?: boolean;
 }
@@ -40,4 +42,5 @@ export type LinkProps<E extends ElementType = 'a', C = void> = {
 } & LinkBaseProps<C>;
 
 export type SpiritLinkProps<E extends ElementType = 'a', C = void> = LinkProps<E, C> &
+  LinkHrefProps<E> &
   SpiritPolymorphicElementPropsWithRef<E, LinkProps<E, C>>;

packages/web-react/src/types/shared/index.ts

@@ -10,6 +10,7 @@ export * from './element';
 export * from './events';
 export * from './inputs';
 export * from './item';
+export * from './links';
 export * from './positions';
 export * from './refs';
 export * from './rest';

packages/web-react/src/types/shared/links.ts

@@ -0,0 +1,5 @@
+import { ElementType } from 'react';
+
+export type LinkHrefProps<E extends ElementType> = E extends 'a'
+  ? { href: string; elementType?: E; target?: '_blank'; title?: string }
+  : { href?: string; elementType: E };

packages/web-react/src/types/shared/refs.ts

@@ -1,7 +1,11 @@
-import { Ref } from 'react';
+import { Ref, RefAttributes } from 'react';
 
 export interface DOMRefValue<T extends HTMLElement = HTMLElement> {
   UNSAFE_getDOMNode(): T;
 }
 
 export type DOMRef<T extends HTMLElement = HTMLElement> = Ref<DOMRefValue<T>>;
+
+export type PolymorphicForwardRef = <T, P>(
+  render: (props: P, ref: Ref<T>) => JSX.Element,
+) => (props: P & RefAttributes<T>) => JSX.Element;