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

lmc-eu · Nov 19, 2024 · 3dd8297 · 3dd8297
1 parent 271af54
commit 3dd8297
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 7 deletions.
diff --git a/packages/web-react/src/components/Link/Link.tsx b/packages/web-react/src/components/Link/Link.tsx
@@ -6,7 +6,7 @@ import { useStyleProps } from '../../hooks';
 import { PolymorphicRef, SpiritLinkProps } from '../../types';
 import { useLinkStyleProps } from './useLinkStyleProps';
 
-const defaultProps: Partial<SpiritLinkProps> = {
+const defaultProps: Partial<SpiritLinkProps<ElementType>> = {
   elementType: 'a',
   color: 'primary',
   hasVisitedStyleAllowed: false,

diff --git a/packages/web-react/src/components/Link/__tests__/useLinkStyleProps.test.ts b/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');

diff --git a/packages/web-react/src/components/Link/demo/LinkDefault.tsx b/packages/web-react/src/components/Link/demo/LinkDefault.tsx
@@ -3,11 +3,13 @@ import Link from '../Link';
 
 const LinkDefault = () => (
   <>
-    <Link href="#">Link</Link>
+    <Link>Link</Link>
 
     <Link href="https://www.example.com/" target="_blank" title="Warning">
       ⚠️ Link with Icon
     </Link>
+
+    <Link elementType="button">Button</Link>
   </>
 );
 

diff --git a/packages/web-react/src/components/Link/useLinkStyleProps.ts b/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: Omit<SpiritLinkProps<E, T>, 'href'>,
+): LinkStyles<E> {
   const { color, hasVisitedStyleAllowed, isDisabled, underlined, ...restProps } = props;
 
   const linkClass = useClassNamePrefix('link');

diff --git a/packages/web-react/src/types/link.ts b/packages/web-react/src/types/link.ts
@@ -18,8 +18,6 @@ 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 */
@@ -39,5 +37,8 @@ export type LinkProps<E extends ElementType = 'a', C = void> = {
   elementType?: E;
 } & LinkBaseProps<C>;
 
-export type SpiritLinkProps<E extends ElementType = 'a', C = void> = LinkProps<E, C> &
+export type LinkHrefProps<E extends ElementType> = E extends 'a' ? { href: string } : { href?: string };
+
+export type SpiritLinkProps<E extends ElementType = 'a', C = void> = LinkHrefProps<E> &
+  LinkProps<E, C> &
   SpiritPolymorphicElementPropsWithRef<E, LinkProps<E, C>>;