add plugin store not compatible

src/components/Plugin/Plugin.stories.tsx

@@ -3,6 +3,7 @@ import {
   FiTrash2,
   FiRefreshCcw,
   FiDownload,
+  FiAlertTriangle,
 } from 'react-icons/fi';
 import { MassaWallet } from '../Icons/Svg/Massa/MassaWallet';
 import { Plugin } from './Plugin';
@@ -12,14 +13,10 @@ import { Certificate } from '../Icons';
 export default {
   title: 'Components/Plugin',
 };
-
 const argsOn = {
   preIcon: <img src="https://placehold.jp/40x40.png" />,
-  topAction: (
-    <Button onClick={() => console.log('topAction')} variant="toggle">
-      on
-    </Button>
-  ),
+  topAction: <Button variant="toggle">on</Button>,
+  topActionFunction: () => console.log('download'),
   title: `plugin name - 30 characters...`,
   subtitle: `Author's Name`,
   subtitleIcon: <Certificate />,
@@ -39,10 +36,12 @@ const argsOn = {
 const argsOff = {
   preIcon: <MassaWallet variant="rounded" size={40} />,
   topAction: (
-    <Button onClick={() => console.log('topAction')} disabled variant="toggle">
+    <Button disabled variant="toggle">
       off
     </Button>
   ),
+  topActionFunction: () => console.log('download'),
+
   title: `plugin name - 30 characters...`,
   subtitle: `Author's Name`,
   content: [
@@ -57,7 +56,8 @@ const argsOff = {
 
 const argsStore = {
   preIcon: <MassaWallet variant="rounded" size={40} />,
-  topAction: <FiDownload onClick={() => console.log('download')} />,
+  topAction: <FiDownload />,
+  topActionFunction: () => console.log('download'),
   title: `plugin name - 30 characters...`,
   subtitle: `Author's Name`,
   subtitleIcon: <Certificate />,
@@ -75,3 +75,14 @@ export const _PluginOff = {
 export const _PluginStore = {
   render: () => <Plugin {...argsStore} />,
 };
+export const _PluginStoreIncompatible = {
+  render: () => (
+    <Plugin
+      {...argsStore}
+      OverrideTopAction={[
+        <FiAlertTriangle color="#FFA41D" />,
+        <FiDownload className="w-6 h-10 text-tertiary" />,
+      ]}
+    />
+  ),
+};

src/components/Plugin/Plugin.test.tsx

@@ -8,11 +8,8 @@ describe('Components | Buttons | Plugin', () => {
   test('it should render', () => {
     const args = {
       preIcon: <MassaWallet size={40} />,
-      topAction: (
-        <Button onClick={() => console.log('topAction')} variant="toggle">
-          on
-        </Button>
-      ),
+      topAction: <Button variant="toggle">on</Button>,
+      topActionFunction: () => console.log('topAction'),
       title: `That's is the huge name of the plugin with limit of chars`,
       subtitle: `Author's Name`,
       content: [

src/components/Plugin/Plugin.tsx

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import React from 'react';
+import React, { useState } from 'react';
 
 import { ReactNode, cloneElement } from 'react';
 import { IconContext } from 'react-icons/lib';
@@ -15,6 +15,7 @@ export interface PluginProps {
   content: string | ReactNode[];
   variant?: string;
   customClass?: string;
+  OverrideTopAction?: ReactNode[];
 }
 
 interface classNames {
@@ -107,9 +108,9 @@ export function PluginStore(props: PluginProps) {
     content,
     variant = 'primary',
     customClass,
+    OverrideTopAction,
     ...rest
   } = props;
-
   const CLASSES: classNames = {
     root: 'flex justify-center items-center',
     primary: {
@@ -144,7 +145,17 @@ export function PluginStore(props: PluginProps) {
     >
       <div className="flex justify-between items-center h-10 mb-3">
         {clonedPreIcon}
-        {clonedTopAction}
+        <div className="flex items-center gap-4 p-2">
+          {OverrideTopAction
+            ? OverrideTopAction.map((action, index) => {
+                return (
+                  <IconContext.Provider key={index} value={{}}>
+                    {action}
+                  </IconContext.Provider>
+                );
+              })
+            : clonedTopAction}
+        </div>
       </div>
       <h5 className="mb-2 text-f-primary mas-menu-active truncate">{title}</h5>
       <div className="flex items-center gap-1 mb-3 text-f-primary mas-caption">