Feature/list: add linkTag to ListItem

.changeset/weak-tomatoes-wave.md

@@ -0,0 +1,5 @@
+---
+'@westpac/ui': minor
+---
+
+List component with custom component tag

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
       )}

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?: 'a' | ((...args: any[]) => ReactElement | null);
   /**
    * The look of the bullet, icon, tick and cross lists
    */

packages/ui/src/components/list/list.stories.tsx

@@ -121,3 +121,29 @@ 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} href="#href1">
+        Styled bullet list
+      </ListItem>
+      <ListItem linkTag={CustomLink} href="#href2">
+        Styled bullet list
+      </ListItem>
+      <ListItem linkTag={CustomLink} href="#href3">
+        Styled bullet list
+      </ListItem>
+    </List>
+  </div>
+);