frontend: add support for custom icon in actionable-item component

This allows to confugire a custom icon for actionable items with
fallback to the carret.

Changed that carret icon is only shown in button mode to visually
indicate that this element is clickable. The carret is not needed
when the element is not clickable.

Author: thisconnect

frontends/web/src/components/actionable-item/actionable-item.tsx

@@ -22,36 +22,35 @@ type TProps = {
   className?: string;
   disabled?: boolean;
   children: ReactNode;
+  icon?: ReactNode;
   onClick?: () => void;
 }
 
 export const ActionableItem = ({
   className = '',
   disabled,
   children,
+  icon,
   onClick,
 }: TProps) => {
   const notButton = disabled || onClick === undefined;
 
-  const content = (
-    <div className={styles.content}>
-      {children}
-      <ChevronRightDark />
-    </div>
-  );
-
   return (
     <>
       {notButton ? (
         <div className={`${styles.container} ${className}`}>
-          {content}
+          {children}
+          {icon && icon}
         </div>
       ) : (
         <button
           type="button"
           className={`${styles.container} ${styles.isButton} ${className}`}
           onClick={onClick}>
-          {content}
+          {children}
+          {icon ? icon : (
+            <ChevronRightDark />
+          )}
         </button>
       )}
     </>