Skip to content

Commit

Permalink
chore(TUX-1228): update CollapsiblePanel to support multiple actions (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
andrewmoreno authored Feb 28, 2024
1 parent bf62964 commit 08ba8f0
Show file tree
Hide file tree
Showing 6 changed files with 50 additions and 29 deletions.
5 changes: 5 additions & 0 deletions .changeset/blue-frogs-rush.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@talend/design-system': minor
---

chore(TUX-1228): update CollapsiblePanel to support multiple actions
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export type CollapsiblePanelHeaderPropsType = {
title?: ReactChild;
status?: keyof typeof variants;
metadata?: ReactChild[];
action?: PanelHeaderAction;
action?: PanelHeaderAction | PanelHeaderAction[];
handleClick: () => unknown;
disabled?: boolean;
};
Expand Down Expand Up @@ -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 (
Expand Down Expand Up @@ -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>
),
)}
</>
);

Expand Down
6 changes: 3 additions & 3 deletions packages/design-system/src/stories/navigation/Accordion.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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**

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 08ba8f0

Please sign in to comment.