diff --git a/.changeset/blue-frogs-rush.md b/.changeset/blue-frogs-rush.md
new file mode 100644
index 00000000000..b431259607b
--- /dev/null
+++ b/.changeset/blue-frogs-rush.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': minor
+---
+
+chore(TUX-1228): update CollapsiblePanel to support multiple actions
diff --git a/packages/design-system/src/components/Accordion/Accordion.cy.tsx b/packages/design-system/src/components/Accordion/Accordion.cy.tsx
index 8c4899f8285..4b203d5ed34 100644
--- a/packages/design-system/src/components/Accordion/Accordion.cy.tsx
+++ b/packages/design-system/src/components/Accordion/Accordion.cy.tsx
@@ -68,12 +68,12 @@ context('', () => {
,
);
cy.get('#CollapsiblePanel__control--disabled-panel').should('not.exist');
- cy.findByTestId('action.button').should('not.exist');
+ cy.findByTestId('action.button.0').should('not.exist');
});
it('should display action toolip', () => {
cy.mount();
- cy.findByTestId('action.button')
+ cy.findByTestId('action.button.0')
.focus()
.should('have.attr', 'aria-describedby')
.then(describedBy => cy.get(`#${describedBy}`).should('have.text', 'action tooltip'));
diff --git a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.tsx b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.tsx
index 2e6d8408b29..0b781fa4cda 100644
--- a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.tsx
+++ b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.tsx
@@ -1,12 +1,13 @@
-import { forwardRef, ReactChild, Ref, useState, useEffect, HTMLAttributes } from 'react';
+import { forwardRef, HTMLAttributes, ReactChild, Ref, useEffect, useState } from 'react';
+
import classNames from 'classnames';
-import { useId } from '../../../useId';
import { DataAttributes } from '../../../types';
+import { useId } from '../../../useId';
import { variants } from '../../Status/Primitive/StatusPrimitive';
-
import CollapsiblePanelHeader from './CollapsiblePanelHeader';
import { PanelHeaderAction } from './types';
+
import styles from './CollapsiblePanel.module.scss';
type CollapsiblePanelCommonPropsType = {
@@ -14,7 +15,7 @@ type CollapsiblePanelCommonPropsType = {
managed?: boolean;
expanded?: boolean;
index?: number;
- action?: PanelHeaderAction;
+ action?: PanelHeaderAction | PanelHeaderAction[];
size?: 'S' | 'M';
metadata?: ReactChild[];
isFirst?: boolean;
diff --git a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.tsx b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.tsx
index d3ace503620..607c5e8f68d 100644
--- a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.tsx
+++ b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.tsx
@@ -22,7 +22,7 @@ export type CollapsiblePanelHeaderPropsType = {
title?: ReactChild;
status?: keyof typeof variants;
metadata?: ReactChild[];
- action?: PanelHeaderAction;
+ action?: PanelHeaderAction | PanelHeaderAction[];
handleClick: () => unknown;
disabled?: boolean;
};
@@ -59,6 +59,8 @@ const CollapsiblePanelHeader = forwardRef(
const iconSize = size === 'S' ? 'S' : 'M';
const buttonIconSize = size === 'S' ? 'XS' : 'S';
+ const actions = Array.isArray(action) ? action : [action];
+
const getChevron = () => {
if (action) {
return (
@@ -109,17 +111,23 @@ const CollapsiblePanelHeader = forwardRef(
{listMetadata}
)}
- {action && !disabled && (
-
- {action.tooltip}
-
- )}
+ {action &&
+ !disabled &&
+ actions.map(
+ (actionItem, index) =>
+ actionItem && (
+
+ {actionItem.tooltip}
+
+ ),
+ )}
>
);
diff --git a/packages/design-system/src/stories/navigation/Accordion.mdx b/packages/design-system/src/stories/navigation/Accordion.mdx
index 8631981e69f..854d40bb856 100644
--- a/packages/design-system/src/stories/navigation/Accordion.mdx
+++ b/packages/design-system/src/stories/navigation/Accordion.mdx
@@ -36,15 +36,15 @@ Use the prop `size` to change the height, font size and icon size of the panel h
-**With action**
+**With actions**
-The prop `action` takes an object with 3 attributes :
+The prop `action` takes an object or an array of objects with 3 attributes :
- icon: a string containing a talend icon id
- title: the content of the tooltip displayed on mouseOver
- callback: a function called when the action is triggered
-
+
**With metadata**
diff --git a/packages/design-system/src/stories/navigation/Accordion.stories.tsx b/packages/design-system/src/stories/navigation/Accordion.stories.tsx
index 5ce5126f4e4..57149c872af 100644
--- a/packages/design-system/src/stories/navigation/Accordion.stories.tsx
+++ b/packages/design-system/src/stories/navigation/Accordion.stories.tsx
@@ -126,20 +126,27 @@ export const WithMetadata = () => (
);
-export const WithAction = {
+export const WithActions = {
render: (props: Story) => (
window.alert('action callback'),
- }}
+ id="panel-with-actions"
+ title="panel with actions"
+ action={[
+ {
+ icon: 'talend-cog',
+ tooltip: 'action tooltip',
+ callback: () => window.alert('action callback'),
+ },
+ {
+ icon: 'plus',
+ tooltip: 'action tooltip',
+ callback: () => window.alert('action callback'),
+ },
+ ]}
>