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

innovaccer · Jun 14, 2024 · ca173cb · ca173cb
1 parent ab9b33c
commit ca173cb
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 24 deletions.
diff --git a/core/components/atoms/selectionCard/SelectionCard.tsx b/core/components/atoms/selectionCard/SelectionCard.tsx
@@ -41,21 +41,21 @@ export const SelectionCard = (props: SelectionCardProps) => {
 
   const classes = classNames(
     {
-      ['Selection-card']: true,
-      ['Selection-card--selected']: selected,
+      ['Selection-card']: !disabled,
+      ['Selection-card--selected']: selected && !disabled,
       ['Selection-card--disabled']: disabled && !selected,
       ['Selection-card--selected-disabled']: disabled && selected,
     },
     className
   );
 
   const onClickHandler = (event: ClickEventType) => {
-    onClick && onClick(event, id, cardValue);
+    !disabled && onClick && onClick(event, id, cardValue);
   };
 
   const onKeyDownHandler = (event: React.KeyboardEvent) => {
     if (event.key === 'Enter') {
-      onClickHandler(event);
+      !disabled && onClickHandler(event);
     }
   };
 

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="pl-6 py-6 pr-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="pl-6 py-6 pr-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="pl-6 py-6 pr-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="pl-6 py-6 pr-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="pl-6 py-6 pr-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="pl-6 py-6 pr-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="pl-6 py-6 pr-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/__tests__/__snapshots__/SelectionCard.test.tsx.snap b/core/components/atoms/selectionCard/__tests__/__snapshots__/SelectionCard.test.tsx.snap
@@ -74,7 +74,7 @@ exports[`selection card item component snapshot
 <body>
   <div>
     <div
-      class="Selection-card Selection-card--disabled"
+      class="Selection-card--disabled"
       data-test="DesignSystem-SelectionCard"
       role="checkbox"
       tabindex="0"
@@ -97,7 +97,7 @@ exports[`selection card item component snapshot
   <div>
     <div
       aria-checked="false"
-      class="Selection-card Selection-card--disabled"
+      class="Selection-card--disabled"
       data-test="DesignSystem-SelectionCard"
       role="checkbox"
       tabindex="0"
@@ -120,7 +120,7 @@ exports[`selection card item component snapshot
   <div>
     <div
       aria-checked="true"
-      class="Selection-card Selection-card--selected Selection-card--selected-disabled"
+      class="Selection-card--selected-disabled"
       data-test="DesignSystem-SelectionCard"
       role="checkbox"
       tabindex="0"

diff --git a/css/src/components/selectionCard.css b/css/src/components/selectionCard.css
@@ -14,7 +14,7 @@
 .Selection-card:focus,
 .Selection-card:focus-visible {
   outline: none;
-  box-shadow: var(--shadow-spread) var(--secondary-shadow), inset 0 0 0 var(--spacing-xs) var(--secondary-light);
+  box-shadow: var(--shadow-spread) var(--secondary-shadow), inset 0 0 0 var(--spacing-xs) var(--secondary-dark);
 }
 
 .Selection-card:active {
@@ -23,8 +23,11 @@
 }
 
 .Selection-card--disabled {
-  pointer-events: none;
+  border-radius: var(--spacing-m);
+  position: relative;
+  cursor: not-allowed;
   box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary-lighter);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 /* selected states */
@@ -48,8 +51,11 @@
 }
 
 .Selection-card--selected-disabled {
-  pointer-events: none;
+  border-radius: var(--spacing-m);
+  position: relative;
+  cursor: not-allowed;
   box-shadow: inset 0 0 0 var(--spacing-xs) var(--primary-lighter);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 /* overlay classes */