From d45cf6c15d619c27278b2b17fde49593f18cbbb7 Mon Sep 17 00:00:00 2001
From: Kenji Shiroma <kenji.shiroma@westpac.com.au>
Date: Thu, 17 Oct 2024 15:48:38 +1000
Subject: [PATCH] list component accepting the Custom component on the link tag

---
 .../list-item/list-item.component.tsx         |  6 +++---
 .../components/list-item/list-item.types.ts   |  6 +++++-
 .../ui/src/components/list/list.stories.tsx   | 20 +++++++++++++++++++
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/list/components/list-item/list-item.component.tsx b/packages/ui/src/components/list/components/list-item/list-item.component.tsx
index 30cbe60b7..3178f35bd 100644
--- a/packages/ui/src/components/list/components/list-item/list-item.component.tsx
+++ b/packages/ui/src/components/list/components/list-item/list-item.component.tsx
@@ -10,7 +10,7 @@ import { styles as itemStyles } from './list-item.styles.js';
 import { type ListItemProps } from './list-item.types.js';
 
 export function BaseListItem(
-  { className, children, href, target, look, type, spacing, icon, ...props }: ListItemProps,
+  { className, linkTag: LinkTag = 'a', children, href, target, look, type, spacing, icon, ...props }: ListItemProps,
   ref: Ref<HTMLAnchorElement>,
 ) {
   const state = useContext(ListContext);
@@ -45,9 +45,9 @@ export function BaseListItem(
     <li className={styles.base({ className })} {...props} key={state.nested}>
       {bulletToRender()}
       {type === 'link' ? (
-        <a href={href} target={target} className={styles.link()} ref={ref} {...focusProps}>
+        <LinkTag href={href} target={target} className={styles.link()} ref={ref} {...focusProps}>
           {children}
-        </a>
+        </LinkTag>
       ) : (
         children
       )}
diff --git a/packages/ui/src/components/list/components/list-item/list-item.types.ts b/packages/ui/src/components/list/components/list-item/list-item.types.ts
index fbb5f4555..e4ede2b2c 100644
--- a/packages/ui/src/components/list/components/list-item/list-item.types.ts
+++ b/packages/ui/src/components/list/components/list-item/list-item.types.ts
@@ -1,4 +1,4 @@
-import { HTMLAttributeAnchorTarget, HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributeAnchorTarget, HTMLAttributes, ReactElement, ReactNode } from 'react';
 
 import { IconProps } from '../../../icon/index.js';
 
@@ -15,6 +15,10 @@ export type ListItemProps = {
    * The icon for list item
    */
   icon?: (props: IconProps) => JSX.Element;
+  /**
+   * Link tag to render
+   */
+  linkTag?: keyof JSX.IntrinsicElements | ((...args: any[]) => ReactElement | null);
   /**
    * The look of the bullet, icon, tick and cross lists
    */
diff --git a/packages/ui/src/components/list/list.stories.tsx b/packages/ui/src/components/list/list.stories.tsx
index 2a8ec8583..a11201a92 100644
--- a/packages/ui/src/components/list/list.stories.tsx
+++ b/packages/ui/src/components/list/list.stories.tsx
@@ -121,3 +121,23 @@ export const Spacing = () => (
     </List>
   </div>
 );
+
+const CustomLink = (props: any) => {
+  // eslint-disable-next-line no-console
+  console.info('TEST');
+  return <a {...props}>{props.children}</a>;
+};
+
+/**
+ * Custom Component
+ */
+export const CustomComponent = () => (
+  <div>
+    <h1 className="typography-body-10 mb-2">Title</h1>
+    <List type="link" className="mb-4" spacing="medium">
+      <ListItem linkTag={CustomLink}>Styled bullet list</ListItem>
+      <ListItem linkTag={CustomLink}>Styled bullet list</ListItem>
+      <ListItem linkTag={CustomLink}>Styled bullet list</ListItem>
+    </List>
+  </div>
+);