chore(TUX-1228): update CollapsiblePanel to support multiple actions (#…

…5211)
Talend · Feb 28, 2024 · 08ba8f0 · 08ba8f0
1 parent bf62964
commit 08ba8f0
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 29 deletions.
diff --git a/.changeset/blue-frogs-rush.md 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
@@ -68,12 +68,12 @@ context('<CollapsiblePanel />', () => {
 			</div>,
 		);
 		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(<WithAction />);
-		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
@@ -1,20 +1,21 @@
-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 = {
 	children: ReactChild;
 	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
@@ -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}
 					</StackHorizontal>
 				)}
-				{action && !disabled && (
-					<ButtonIcon
-						size={buttonIconSize}
-						icon={action.icon}
-						onClick={action.callback}
-						data-test="action.button"
-						data-testid="action.button"
-					>
-						{action.tooltip}
-					</ButtonIcon>
-				)}
+				{action &&
+					!disabled &&
+					actions.map(
+						(actionItem, index) =>
+							actionItem && (
+								<ButtonIcon
+									key={`action-${index}`}
+									size={buttonIconSize}
+									icon={actionItem.icon}
+									onClick={actionItem.callback}
+									data-test={`action.button.${index}`}
+									data-testid={`action.button.${index}`}
+								>
+									{actionItem.tooltip}
+								</ButtonIcon>
+							),
+					)}
 			</>
 		);
 

diff --git 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
 
 <Canvas of={Stories.SmallPanel} />
 
-**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 :
 
 - <b>icon</b>: a string containing a talend icon id
 - <b>title</b>: the content of the tooltip displayed on mouseOver
 - <b>callback</b>: a function called when the action is triggered
 
-<Canvas of={Stories.WithAction} />
+<Canvas of={Stories.WithActions} />
 
 **With metadata**
 

diff --git 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 = () => (
 	</div>
 );
 
-export const WithAction = {
+export const WithActions = {
 	render: (props: Story) => (
 		<div
 			style={{ maxWidth: '50rem', marginLeft: 'auto', marginRight: 'auto', padding: '1.875rem' }}
 		>
 			<CollapsiblePanel
 				{...props}
-				id="panel-with-action"
-				title="panel with action"
-				action={{
-					icon: 'plus',
-					tooltip: 'action tooltip',
-					callback: () => 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'),
+					},
+				]}
 			>
 				<SampleParagraph />
 			</CollapsiblePanel>