diff --git a/src/components/Plugin/Plugin.stories.tsx b/src/components/Plugin/Plugin.stories.tsx index 0a409d44..e04d38e1 100644 --- a/src/components/Plugin/Plugin.stories.tsx +++ b/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: , - topAction: ( - console.log('topAction')} variant="toggle"> - on - - ), + topAction: on, + topActionFunction: () => console.log('download'), title: `plugin name - 30 characters...`, subtitle: `Author's Name`, subtitleIcon: , @@ -39,10 +36,12 @@ const argsOn = { const argsOff = { preIcon: , topAction: ( - console.log('topAction')} disabled variant="toggle"> + off ), + topActionFunction: () => console.log('download'), + title: `plugin name - 30 characters...`, subtitle: `Author's Name`, content: [ @@ -57,7 +56,8 @@ const argsOff = { const argsStore = { preIcon: , - topAction: console.log('download')} />, + topAction: , + topActionFunction: () => console.log('download'), title: `plugin name - 30 characters...`, subtitle: `Author's Name`, subtitleIcon: , @@ -75,3 +75,14 @@ export const _PluginOff = { export const _PluginStore = { render: () => , }; +export const _PluginStoreIncompatible = { + render: () => ( + , + , + ]} + /> + ), +}; diff --git a/src/components/Plugin/Plugin.test.tsx b/src/components/Plugin/Plugin.test.tsx index b45e00db..1648b86d 100644 --- a/src/components/Plugin/Plugin.test.tsx +++ b/src/components/Plugin/Plugin.test.tsx @@ -8,11 +8,7 @@ describe('Components | Buttons | Plugin', () => { test('it should render', () => { const args = { preIcon: , - topAction: ( - console.log('topAction')} variant="toggle"> - on - - ), + topAction: on, title: `That's is the huge name of the plugin with limit of chars`, subtitle: `Author's Name`, content: [ diff --git a/src/components/Plugin/Plugin.tsx b/src/components/Plugin/Plugin.tsx index fc36c806..0c109054 100644 --- a/src/components/Plugin/Plugin.tsx +++ b/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; + topActions?: ReactNode[]; } interface classNames { @@ -107,9 +108,9 @@ export function PluginStore(props: PluginProps) { content, variant = 'primary', customClass, + topActions, ...rest } = props; - const CLASSES: classNames = { root: 'flex justify-center items-center', primary: { @@ -144,7 +145,17 @@ export function PluginStore(props: PluginProps) { > {clonedPreIcon} - {clonedTopAction} + + {topActions + ? topActions.map((action, index) => { + return ( + + {action} + + ); + }) + : clonedTopAction} + {title}