From c6f6f8f895e68f2d85ca681997ef613d982bac14 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 20 Oct 2023 14:06:48 +0200
Subject: refactor(components): rewrite NavList component

* extract NavItem from NavList
* remove `kind` and `listClassName` props (since the consumer has
control over NavList, NavItem and NavLink components these props are
obsolete)
---
 src/components/atoms/lists/list/list-item.tsx    | 44 ++++++++++++++++--------
 src/components/atoms/lists/list/list.module.scss |  6 ++++
 2 files changed, 36 insertions(+), 14 deletions(-)

(limited to 'src/components/atoms')

diff --git a/src/components/atoms/lists/list/list-item.tsx b/src/components/atoms/lists/list/list-item.tsx
index 3438eac..41e90fc 100644
--- a/src/components/atoms/lists/list/list-item.tsx
+++ b/src/components/atoms/lists/list/list-item.tsx
@@ -1,23 +1,39 @@
-import type { FC, LiHTMLAttributes } from 'react';
+import {
+  forwardRef,
+  type LiHTMLAttributes,
+  type ForwardRefRenderFunction,
+} from 'react';
 import styles from './list.module.scss';
 
-export type ListItemProps = LiHTMLAttributes<HTMLElement>;
+export type ListItemProps = LiHTMLAttributes<HTMLElement> & {
+  /**
+   * Should we hide the marker in front of the list item?
+   *
+   * @default false
+   */
+  hideMarker?: boolean;
+};
 
-/**
- * ListItem component
- *
- * Used it inside a `<List />` component.
- */
-export const ListItem: FC<ListItemProps> = ({
-  children,
-  className = '',
-  ...props
-}) => {
-  const itemClass = `${styles.item} ${className}`;
+const ListItemWithRef: ForwardRefRenderFunction<
+  HTMLLIElement,
+  ListItemProps
+> = ({ children, className = '', hideMarker = false, ...props }, ref) => {
+  const itemClass = [
+    styles.item,
+    styles[hideMarker ? 'item--no-marker' : ''],
+    className,
+  ].join(' ');
 
   return (
-    <li {...props} className={itemClass}>
+    <li {...props} className={itemClass} ref={ref}>
       {children}
     </li>
   );
 };
+
+/**
+ * ListItem component
+ *
+ * Used it inside a `<List />` component.
+ */
+export const ListItem = forwardRef(ListItemWithRef);
diff --git a/src/components/atoms/lists/list/list.module.scss b/src/components/atoms/lists/list/list.module.scss
index fc23ce5..d9d1f64 100644
--- a/src/components/atoms/lists/list/list.module.scss
+++ b/src/components/atoms/lists/list/list.module.scss
@@ -1,5 +1,11 @@
 @use "../../../../styles/abstracts/placeholders";
 
+.item {
+  &--no-marker {
+    list-style-type: none;
+  }
+}
+
 .list {
   &--hierarchical {
     @extend %hierarchical-list;
-- 
cgit v1.2.3