feat: add list component

src/List/List.tsx

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import React, { ElementType, FC, HTMLAttributes } from 'react';
+
+export interface ListProps extends HTMLAttributes<HTMLUListElement> {
+  /** Classi aggiuntive da usare per il componente lista del List */
+  className?: string;
+  /** Classi aggiuntive da usare per il componente wrapper del List */
+  wrapperClassName?: string;
+  /**
+   * Utilizzarlo in caso di utilizzo di componenti personalizzati per il wrapper della lista.
+   * Nota: viene ignorato quando usato in lista annidate.
+   * */
+  tag?: ElementType;
+  /** Quando attivo rimuove il componente contenitore della ListList. Utile per alcuni tipi di liste annidate. */
+  noWrapper?: boolean;
+  testId?: string;
+}
+
+export const List: FC<ListProps> = ({
+  className,
+  wrapperClassName,
+  tag = 'div',
+  noWrapper,
+  testId,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const wrapperClasses = classNames('it-list-wrapper', wrapperClassName);
+  const classes = classNames(className, 'it-list');
+
+  if (noWrapper) {
+    return <ul {...attributes} className={classes} data-testid={testId} />;
+  }
+
+  return (
+    <Tag className={wrapperClasses} data-testid={testId}>
+      <ul {...attributes} className={classes} />
+    </Tag>
+  );
+};

src/List/ListItem.tsx

@@ -0,0 +1,86 @@
+import classNames from 'classnames';
+import React, { AnchorHTMLAttributes, ElementType, FC, ReactNode } from 'react';
+
+export interface ListItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Indica se l'elemento è attivo o no */
+  active?: boolean;
+  /** Indica se l'elemento ha un avatar */
+  avatar?: ReactNode;
+  /** Indica se l'elemento ha una icona */
+  icon?: ReactNode;
+  /** Indica se l'elemento ha una immagine */
+  img?: ReactNode;
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente ListItem */
+  className?: string;
+  /** Classi aggiuntive da usare per l'elemento contenitore dell'item */
+  wrapperClassName?: string;
+  /** Indica il link a cui l'elemento deve puntare. */
+  href?: string;
+  /** Indica il link route a cui l'elemento deve puntare. */
+  to?: string;
+  testId?: string;
+}
+
+export const ListItem: FC<ListItemProps> & {
+  MultipleAction: typeof MultipleAction;
+} = ({
+  className,
+  active,
+  avatar,
+  icon,
+  img,
+  href,
+  tag = 'div',
+  to,
+  wrapperClassName,
+  testId,
+  children,
+  ...attributes
+}) => {
+    let Tag = tag;
+    const classes = classNames(
+      className,
+      { active },
+      'list-item'
+    ),
+      classesItem = classNames(className, {
+        'it-rounded-icon': icon,
+        'avatar size-lg': avatar,
+        'it-thumb': img
+      }),
+      leftItem = icon || avatar || img;
+
+    if (href) {
+      return (
+        <li className={wrapperClassName} data-testid={testId}>
+          <Tag>
+            <a href={href || '#'} {...attributes} className={classes}>
+              {children}
+            </a>
+          </Tag>
+        </li>
+      );
+    }
+
+    return (
+      <li className={wrapperClassName} data-testid={testId}>
+        <Tag
+          {...attributes}
+          className={classes}
+          href={href}
+          to={to}
+        >
+          {leftItem && <div className={classesItem}>{leftItem}</div>}
+          <div className="it-right-zone">{children}</div>
+        </Tag>
+      </li>
+    );
+  };
+
+const MultipleAction: FC<ListItemProps> = ({ children }) => {
+  return <span className='it-multiple'>{children}</span>
+};
+
+ListItem.MultipleAction = MultipleAction;

src/index.ts

@@ -96,17 +96,19 @@ export { HeaderBrand } from './Header/HeaderBrand';
 export { HeaderContent } from './Header/HeaderContent';
 export { HeaderLinkZone } from './Header/HeaderLinkZone';
 export { HeaderRightZone } from './Header/HeaderRightZone';
+export { Headers } from './Header/Headers';
 export { HeaderSearch } from './Header/HeaderSearch';
 export { HeaderSocialsZone } from './Header/HeaderSocialsZone';
 export { HeaderToggler } from './Header/HeaderToggler';
-export { Headers } from './Header/Headers';
 export { Hero, HeroBackground, HeroBody, HeroButton, HeroCategory, HeroTitle } from './Hero/index';
 export { Icon, clearIconCache, iconsList as icons, preloadIcons } from './Icon/Icon';
 export { Input } from './Input/Input';
 export { InputContainer } from './Input/InputContainer';
 export { TextArea } from './Input/TextArea';
 export { LinkList } from './LinkList/LinkList';
 export { LinkListItem } from './LinkList/LinkListItem';
+export { List } from './List/List';
+export { ListItem } from './List/ListItem';
 export { MegamenuFooter } from './Megamenu/MegamenuFooter';
 export { MegamenuHighlightColumn } from './Megamenu/MegamenuHighlightColumn';
 export { MegamenuItem } from './Megamenu/MegamenuItem';
@@ -193,10 +195,10 @@ export type { HeaderBrandProps } from './Header/HeaderBrand';
 export type { HeaderContentProps } from './Header/HeaderContent';
 export type { HeaderLinkZoneProps } from './Header/HeaderLinkZone';
 export type { HeaderRightZoneProps } from './Header/HeaderRightZone';
+export type { HeadersProps } from './Header/Headers';
 export type { HeaderSearchProps } from './Header/HeaderSearch';
 export type { HeaderSocialsZoneProps } from './Header/HeaderSocialsZone';
 export type { HeaderTogglerProps } from './Header/HeaderToggler';
-export type { HeadersProps } from './Header/Headers';
 export type {
   HeroBackgroundProps,
   HeroBodyProps,
@@ -211,6 +213,8 @@ export type { InputContainerProps } from './Input/InputContainer';
 export type { TextAreaProps } from './Input/TextArea';
 export type { LinkListProps } from './LinkList/LinkList';
 export type { LinkListItemProps } from './LinkList/LinkListItem';
+export type { ListProps } from './List/List';
+export type { ListItemProps } from './List/ListItem';
 export type { MegamenuFooterProps } from './Megamenu/MegamenuFooter';
 export type { MegamenuHCProps } from './Megamenu/MegamenuHighlightColumn';
 export type { MegamenuItemProps } from './Megamenu/MegamenuItem';

stories/Components/LinkList/LinkList.stories.tsx

@@ -16,7 +16,7 @@ import {
 } from "../../../src";
 
 const meta: Meta<typeof LinkList> = {
-  title: "Documentazione/Organizzare i contenuti/Liste",
+  title: "Documentazione/Organizzare i contenuti/Liste di link",
   component: LinkList
 };