fix review comments 2

Talend · Feb 27, 2024 · 9370f1a · 9370f1a
1 parent 71da6e6
commit 9370f1a
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 49 deletions.
diff --git a/packages/design-system/src/components/Accordion/Accordion.cy.tsx b/packages/design-system/src/components/Accordion/Accordion.cy.tsx
@@ -17,18 +17,16 @@ const SampleParagraph = () => (
 		velit, eget ornare velit. Praesent porttitor sagittis nulla non vehicula. u
 	</p>
 );
-const WithActions = () => (
+const WithAction = () => (
 	<div style={{ maxWidth: '50rem', marginLeft: 'auto', marginRight: 'auto', padding: '1.875rem' }}>
 		<CollapsiblePanel
 			id="panel-with-action"
 			title="panel with action"
-			actions={[
-				{
-					icon: 'plus',
-					tooltip: 'action tooltip',
-					callback: () => window.alert('action callback'),
-				},
-			]}
+			action={{
+				icon: 'plus',
+				tooltip: 'action tooltip',
+				callback: () => window.alert('action callback'),
+			}}
 		>
 			<SampleParagraph />
 		</CollapsiblePanel>
@@ -37,13 +35,13 @@ const WithActions = () => (
 
 context('<CollapsiblePanel />', () => {
 	it('should render header', () => {
-		cy.mount(<WithActions />);
+		cy.mount(<WithAction />);
 		cy.findByTestId('panel.header').should('be.visible');
 		cy.findByTestId('panel.section').should('not.exist');
 	});
 
 	it('should expand and collapse', () => {
-		cy.mount(<WithActions />);
+		cy.mount(<WithAction />);
 		cy.get('#CollapsiblePanel__control--panel-with-action').focus().click();
 		cy.findByTestId('panel.section').should('be.visible');
 		cy.get('#CollapsiblePanel__control--panel-with-action').focus().click();
@@ -58,13 +56,11 @@ context('<CollapsiblePanel />', () => {
 				<CollapsiblePanel
 					id="disabled-panel"
 					title="disabled panel"
-					actions={[
-						{
-							icon: 'plus',
-							tooltip: 'action tooltip',
-							callback: () => window.alert('action callback'),
-						},
-					]}
+					action={{
+						icon: 'plus',
+						tooltip: 'action tooltip',
+						callback: () => window.alert('action callback'),
+					}}
 					disabled
 				>
 					<SampleParagraph />
@@ -76,7 +72,7 @@ context('<CollapsiblePanel />', () => {
 	});
 
 	it('should display action toolip', () => {
-		cy.mount(<WithActions />);
+		cy.mount(<WithAction />);
 		cy.findByTestId('action.button.0')
 			.focus()
 			.should('have.attr', 'aria-describedby')

diff --git a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.tsx b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.tsx
@@ -15,7 +15,7 @@ type CollapsiblePanelCommonPropsType = {
 	managed?: boolean;
 	expanded?: boolean;
 	index?: number;
-	actions?: PanelHeaderAction[];
+	action: PanelHeaderAction | PanelHeaderAction[];
 	size?: 'S' | 'M';
 	metadata?: ReactChild[];
 	isFirst?: boolean;
@@ -49,7 +49,7 @@ export const CollapsiblePanel = forwardRef(
 			onToggleExpanded,
 			title,
 			status,
-			actions,
+			action,
 			size,
 			metadata,
 			isFirst = false,
@@ -96,7 +96,7 @@ export const CollapsiblePanel = forwardRef(
 					handleClick={handleToggleExpanded}
 					title={title}
 					status={status}
-					actions={actions}
+					action={action}
 					metadata={metadata}
 					size={size}
 					disabled={disabled}

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[];
-	actions?: PanelHeaderAction[];
+	action?: PanelHeaderAction | PanelHeaderAction[];
 	handleClick: () => unknown;
 	disabled?: boolean;
 };
@@ -34,7 +34,7 @@ const CollapsiblePanelHeader = forwardRef(
 			sectionId,
 			expanded,
 			handleClick,
-			actions,
+			action,
 			metadata,
 			title,
 			status,
@@ -44,7 +44,7 @@ const CollapsiblePanelHeader = forwardRef(
 		ref: Ref<HTMLButtonElement>,
 	) => {
 		const listMetadata = metadata?.map((item, index) => {
-			if (index === metadata.length - 1 && (!actions || disabled)) {
+			if (index === metadata.length - 1 && (!action || disabled)) {
 				return item;
 			}
 
@@ -59,8 +59,10 @@ 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 (actions) {
+			if (action) {
 				return (
 					<ButtonIcon
 						id={controlId}
@@ -109,27 +111,27 @@ const CollapsiblePanelHeader = forwardRef(
 						{listMetadata}
 					</StackHorizontal>
 				)}
-				{actions &&
+				{action &&
 					!disabled &&
 					actions.map(
-						(action, index) =>
-							action && (
+						(actionItem, index) =>
+							actionItem && (
 								<ButtonIcon
 									key={`action-${index}`}
 									size={buttonIconSize}
-									icon={action.icon}
-									onClick={action.callback}
+									icon={actionItem.icon}
+									onClick={actionItem.callback}
 									data-test={`action.button.${index}`}
 									data-testid={`action.button.${index}`}
 								>
-									{action.tooltip}
+									{actionItem.tooltip}
 								</ButtonIcon>
 							),
 					)}
 			</>
 		);
 
-		if (actions) {
+		if (action) {
 			return (
 				<div
 					className={classnames(styles.headerWrapper, {

diff --git a/packages/design-system/src/stories/navigation/Accordion.mdx b/packages/design-system/src/stories/navigation/Accordion.mdx
@@ -36,9 +36,9 @@ 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

diff --git a/packages/design-system/src/stories/navigation/Accordion.stories.tsx b/packages/design-system/src/stories/navigation/Accordion.stories.tsx
@@ -78,13 +78,11 @@ export const DisabledPanel = {
 				{...props}
 				id="disabled-panel"
 				title="disabled panel"
-				actions={[
-					{
-						icon: 'plus',
-						tooltip: 'action tooltip',
-						callback: () => window.alert('action callback'),
-					},
-				]}
+				action={{
+					icon: 'plus',
+					tooltip: 'action tooltip',
+					callback: () => window.alert('action callback'),
+				}}
 				disabled
 			>
 				<SampleParagraph />
@@ -113,13 +111,11 @@ export const WithMetadata = () => (
 			<CollapsiblePanel
 				title="Simple panel with several metadata and action"
 				metadata={['Duration : 3sec', <TagSuccess key="successTag">Success</TagSuccess>]}
-				actions={[
-					{
-						icon: 'plus',
-						tooltip: 'action tooltip',
-						callback: () => window.alert('action callback'),
-					},
-				]}
+				action={{
+					icon: 'plus',
+					tooltip: 'action tooltip',
+					callback: () => window.alert('action callback'),
+				}}
 			>
 				<SampleParagraph />
 			</CollapsiblePanel>
@@ -139,7 +135,7 @@ export const WithActions = {
 				{...props}
 				id="panel-with-actions"
 				title="panel with actions"
-				actions={[
+				action={[
 					{
 						icon: 'talend-cog',
 						tooltip: 'action tooltip',