Merge pull request #2240 from samyak3009/feat-selection-card-states

feat(selectionCard): update states and spacing in selection card
innovaccer · Jun 25, 2024 · 9042910 · 9042910
2 parents 2f31d94 + 8ea2982
commit 9042910
Show file tree

Hide file tree

Showing 9 changed files with 183 additions and 42 deletions.
diff --git a/core/components/atoms/selectionCard/SelectionCard.tsx b/core/components/atoms/selectionCard/SelectionCard.tsx
@@ -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);
     }
   };
@@ -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}

diff --git a/core/components/atoms/selectionCard/__stories__/index.story.jsx b/core/components/atoms/selectionCard/__stories__/index.story.jsx
@@ -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>
@@ -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>

diff --git a/core/components/atoms/selectionCard/__stories__/layout.story.jsx b/core/components/atoms/selectionCard/__stories__/layout.story.jsx
@@ -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>
 

diff --git a/core/components/atoms/selectionCard/__stories__/multiSelect.story.jsx b/core/components/atoms/selectionCard/__stories__/multiSelect.story.jsx
@@ -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>
@@ -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>

diff --git a/core/components/atoms/selectionCard/__stories__/singleSelect.story.jsx b/core/components/atoms/selectionCard/__stories__/singleSelect.story.jsx
@@ -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>
@@ -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>

diff --git a/core/components/atoms/selectionCard/__stories__/state.story.jsx b/core/components/atoms/selectionCard/__stories__/state.story.jsx
@@ -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,
+      },
+    },
+  },
+};
diff --git a/core/components/atoms/selectionCard/__tests__/SelectionCard.test.tsx b/core/components/atoms/selectionCard/__tests__/SelectionCard.test.tsx
@@ -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>
   );
 };
@@ -49,6 +59,7 @@ const MultiSelect = () => {
       >
         Multi Selection
       </SelectionCard>
+
       <SelectionCard
         id="item2"
         cardValue={{ title: 'Item 2' }}
@@ -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>
   );
 };
@@ -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);
   });
 });
@@ -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', () => {
@@ -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', () => {
@@ -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', () => {
@@ -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');
+
+    expect(element2).toHaveClass('Selection-card--selected');
   });
 });