list component accepting the Custom component on the link tag

WestpacGEL · Oct 17, 2024 · d45cf6c · d45cf6c
1 parent f15c148
commit d45cf6c
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 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
@@ -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
@@ -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
@@ -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>
+);