Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(selectionCard): update states and spacing in selection card #2240

Merged
merged 1 commit into from
Jun 25, 2024
Merged

feat(selectionCard): update states and spacing in selection card #2240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions core/components/atoms/selectionCard/SelectionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,19 +42,23 @@ export const SelectionCard = (props: SelectionCardProps) => {
const classes = classNames(
{
['Selection-card']: true,
['Selection-card--selected']: selected,
['Selection-card--disabled']: disabled && !selected,
['Selection-card--default']: !disabled,
['Selection-card--selected']: selected && !disabled,
['Selection-card--disabled']: disabled,
['Selection-card--default-disabled']: disabled && !selected,
['Selection-card--selected-disabled']: disabled && selected,
},
className
);

const onClickHandler = (event: ClickEventType) => {
onClick && onClick(event, id, cardValue);
if (!disabled && onClick) {
onClick(event, id, cardValue);
}
};

const onKeyDownHandler = (event: React.KeyboardEvent) => {
if (event.key === 'Enter') {
if (event.key === 'Enter' && !disabled) {
onClickHandler(event);
}
};
Expand All @@ -63,7 +67,7 @@ export const SelectionCard = (props: SelectionCardProps) => {
<div
role="checkbox"
aria-checked={selected}
tabIndex={0}
tabIndex={disabled ? -1 : 0}
onKeyDown={onKeyDownHandler}
onClick={(event) => onClickHandler(event)}
className={classes}
Expand Down
10 changes: 6 additions & 4 deletions core/components/atoms/selectionCard/__stories__/index.story.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,17 @@ export const all = () => {
<SelectionCard
id={id}
cardValue={cardItem}
className="pl-5 py-6 pr-6 d-flex mr-6"
className="p-6 d-flex mr-6"
onClick={onClickHandler}
selected={isCardSelected(id)}
>
<Icon size={20} name={iconName} />
<div className="ml-5">
<Text weight="strong">{title}</Text>
<br />
<Text appearance="subtle">{description}</Text>
<Text className="pt-2" appearance="subtle">
{description}
</Text>
</div>
</SelectionCard>
</Column>
Expand Down Expand Up @@ -93,15 +95,15 @@ const customCode = `() => {
<SelectionCard
id={id}
cardValue={cardItem}
className="pl-5 py-6 pr-6 d-flex mr-6"
className="p-6 d-flex mr-6"
onClick={onClickHandler}
selected={isCardSelected(id)}
>
<Icon size={20} name={iconName} />
<div className="ml-5">
<Text weight="strong">{title}</Text>
<br />
<Text appearance="subtle">{description}</Text>
<Text className="pt-2" appearance="subtle">{description}</Text>
</div>
</SelectionCard>
</Column>
Expand Down
6 changes: 4 additions & 2 deletions core/components/atoms/selectionCard/__stories__/layout.story.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,14 @@ export const layout = () => {
return (
<div>
<Text weight="strong">Left Content Alignment:</Text>
<SelectionCard name="item1" className="pl-5 py-6 pr-6 w-25 d-flex mb-8 mt-6" selected={true}>
<SelectionCard name="item1" className="p-6 w-25 d-flex mb-8 mt-6" selected={true}>
<Icon size={24} name="adjust" />
<div className="ml-5">
<Text weight="strong">Manual drop on SFTP disk</Text>
<br />
<Text appearance="subtle">Give access to a separate SFTP disk image</Text>
<Text className="pt-2" appearance="subtle">
Give access to a separate SFTP disk image
</Text>
</div>
</SelectionCard>

Expand Down
10 changes: 6 additions & 4 deletions core/components/atoms/selectionCard/__stories__/multiSelect.story.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,15 +51,17 @@ export const multiSelect = () => {
<SelectionCard
id={id}
cardValue={cardItem}
className="pl-5 py-6 pr-6 d-flex mr-6"
className="p-6 d-flex mr-6"
onClick={onClickHandler}
selected={isCardSelected(id)}
>
<Icon size={20} name={iconName} />
<div className="ml-5">
<Text weight="strong">{title}</Text>
<br />
<Text appearance="subtle">{description}</Text>
<Text className="pt-2" appearance="subtle">
{description}
</Text>
</div>
</SelectionCard>
</Column>
Expand Down Expand Up @@ -117,15 +119,15 @@ const customCode = `() => {
<SelectionCard
id={id}
cardValue={cardItem}
className="pl-5 py-6 pr-6 d-flex mr-6"
className="p-6 d-flex mr-6"
onClick={onClickHandler}
selected={isCardSelected(id)}
>
<Icon size={20} name={iconName} />
<div className="ml-5">
<Text weight="strong">{title}</Text>
<br />
<Text appearance="subtle">{description}</Text>
<Text className="pt-2" appearance="subtle">{description}</Text>
</div>
</SelectionCard>
</Column>
Expand Down
10 changes: 6 additions & 4 deletions core/components/atoms/selectionCard/__stories__/singleSelect.story.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,15 +51,17 @@ export const singleSelect = () => {
<SelectionCard
id={id}
cardValue={cardItem}
className="pl-5 py-6 pr-6 d-flex mr-6"
className="p-6 d-flex mr-6"
onClick={onClickHandler}
selected={isCardSelected(id)}
>
<Icon size={20} name={iconName} />
<div className="ml-5">
<Text weight="strong">{title}</Text>
<br />
<Text appearance="subtle">{description}</Text>
<Text className="pt-2" appearance="subtle">
{description}
</Text>
</div>
</SelectionCard>
</Column>
Expand Down Expand Up @@ -117,15 +119,15 @@ const customCode = `() => {
<SelectionCard
id={id}
cardValue={cardItem}
className="pl-5 py-6 pr-6 d-flex mr-6"
className="p-6 d-flex mr-6"
onClick={onClickHandler}
selected={isCardSelected(id)}
>
<Icon size={20} name={iconName} />
<div className="ml-5">
<Text weight="strong">{title}</Text>
<br />
<Text appearance="subtle">{description}</Text>
<Text className="pt-2" appearance="subtle">{description}</Text>
</div>
</SelectionCard>
</Column>
Expand Down
76 changes: 76 additions & 0 deletions core/components/atoms/selectionCard/__stories__/state.story.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import * as React from 'react';
import { SelectionCard, Row, Column, Icon, Text } from '@/index';

// CSF format story

export const state = () => {
const cardConfigs = [
{ label: 'Default:', props: {} },
{ label: 'Disabled:', props: { disabled: true } },
{ label: 'Selected:', props: { selected: true } },
{ label: 'Selected and disabled:', props: { disabled: true, selected: true } },
];

return (
<Row>
{cardConfigs.map((config, index) => (
<Column key={index} size={6}>
<Text weight="strong">{config.label}</Text>
<SelectionCard className="p-6 d-flex mt-6 mb-8 mr-6" {...config.props}>
<Icon size={20} name="adjust" />
<div className="ml-5">
<Text weight="strong">Manual drop on SFTP disk</Text>
<br />
<Text className="pt-2" appearance="subtle">
Give access to a separate SFTP disk image
</Text>
</div>
</SelectionCard>
</Column>
))}
</Row>
);
};

const customCode = `() => {
const cardConfigs = [
{ label: 'Default:', props: {} },
{ label: 'Disabled:', props: { disabled: true } },
{ label: 'Selected:', props: { selected: true } },
{ label: 'Selected and disabled:', props: { disabled: true, selected: true } },
];

return (
<Row>
{cardConfigs.map((config, index) => (
<Column key={index} size={6}>
<Text weight="strong">{config.label}</Text>
<SelectionCard className="p-6 d-flex mt-6 mb-8 mr-6" {...config.props}>
<Icon size={20} name="adjust" />
<div className="ml-5">
<Text weight="strong">Manual drop on SFTP disk</Text>
<br />
<Text className="pt-2" appearance="subtle">
Give access to a separate SFTP disk image
</Text>
</div>
</SelectionCard>
</Column>
))}
</Row>
);
}`;

export default {
title: 'Components/Interactive Card/Selection Card/State',
component: SelectionCard,
parameters: {
docs: {
docPage: {
title: 'SelectionCard',
propDescription: `Note: All the valid properties of HTML DIV elements are acceptable as a prop`,
customCode,
},
},
},
};
47 changes: 47 additions & 0 deletions core/components/atoms/selectionCard/__tests__/SelectionCard.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,16 @@ const SingleSelect = () => {
>
Single Selection Item 2
</SelectionCard>

<SelectionCard
id="item3"
data-test="Selection-card-3"
disabled={true}
onClick={() => updateCardSelection('item3')}
selected={isCardSelected('item3')}
>
Single Selection Item 3
</SelectionCard>
</div>
);
};
Expand All @@ -49,6 +59,7 @@ const MultiSelect = () => {
>
Multi Selection
</SelectionCard>

<SelectionCard
id="item2"
cardValue={{ title: 'Item 2' }}
Expand All @@ -58,6 +69,16 @@ const MultiSelect = () => {
>
Multi Selection
</SelectionCard>

<SelectionCard
id="item3"
data-test="Selection-card-3"
disabled={true}
onClick={() => updateCardSelection('item3')}
selected={isCardSelected('item3')}
>
Single Selection Item 3
</SelectionCard>
</div>
);
};
Expand Down Expand Up @@ -88,6 +109,7 @@ describe('selection card component tests', () => {
const element = getByTestId('DesignSystem-SelectionCard');
expect(element).toBeInTheDocument();
expect(element).toHaveClass('Selection-card');
expect(element).toHaveClass('Selection-card--default');
expect(element).toHaveTextContent(StringValue);
});
});
Expand Down Expand Up @@ -120,6 +142,7 @@ describe('selection card disabled item component tests', () => {
);
const element = getByTestId('DesignSystem-SelectionCard');
expect(element).toHaveClass('Selection-card--disabled');
expect(element).toHaveClass('Selection-card--default-disabled');
});

it('check for disabled class for selected item', () => {
Expand All @@ -129,8 +152,20 @@ describe('selection card disabled item component tests', () => {
</SelectionCard>
);
const element = getByTestId('DesignSystem-SelectionCard');
expect(element).toHaveClass('Selection-card--disabled');
expect(element).toHaveClass('Selection-card--selected-disabled');
});

it('check for onClick event for disabled item', () => {
const { getByTestId } = render(
<SelectionCard id={name} onClick={FunctionValue} disabled={true} selected={true}>
{StringValue}
</SelectionCard>
);
const element = getByTestId('DesignSystem-SelectionCard');
fireEvent.click(element);
expect(FunctionValue).not.toHaveBeenCalled();
});
});

describe('selection card component classes', () => {
Expand Down Expand Up @@ -181,6 +216,12 @@ describe('selection card component hooks test', () => {

fireEvent.click(element2);
expect(element2).not.toHaveClass('Selection-card--selected');
const element3 = getByTestId('Selection-card-3');
fireEvent.click(element2);

fireEvent.click(element3);
expect(element3).not.toHaveClass('Selection-card--selected');
expect(element2).toHaveClass('Selection-card--selected');
});

it('test for multi select hook', () => {
Expand All @@ -195,5 +236,11 @@ describe('selection card component hooks test', () => {

fireEvent.click(element1);
expect(element1).not.toHaveClass('Selection-card--selected');

const element3 = getByTestId('Selection-card-3');
fireEvent.click(element3);
expect(element3).not.toHaveClass('Selection-card--selected');
Comment on lines +240 to +242
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please check this test case once as on selection of element3 it should have Selection-card--selected class present. This test contradicts with the expected behavior. Please check how this test case is passing

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@anuradha9712 element3 is a disabled card so it must not be selected if it get clicked.


expect(element2).toHaveClass('Selection-card--selected');
});
});
Loading
Loading