fix(table): [SIDE-634] Update table component (#398)

getPopsure · Oct 2, 2024 · a6ca898 · a6ca898
1 parent 3e368e6
commit a6ca898
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 17 deletions.
diff --git a/src/lib/components/table/Table.stories.tsx b/src/lib/components/table/Table.stories.tsx
@@ -110,7 +110,7 @@ const initialData: TableData = [
   },
   {
     section: {
-      icon: <DentalPlusIcon size={24} noMargin />,
+      icon: <DentalPlusIcon size={20} noMargin />,
       title: 'Dental',
     },
     rows: [

diff --git a/src/lib/components/table/Table.tsx b/src/lib/components/table/Table.tsx
@@ -175,7 +175,7 @@ const Table = ({
           data-testid="show-hide-details"
           classNames={{
             buttonWrapper: 'm8 mt32',
-            title: 'd-flex gap8 ai-center jc-center',
+            title: 'd-flex gap8 ai-center jc-center fw-bold',
             wrapper: 'bg-grey-200',
           }}
           title={
@@ -184,9 +184,9 @@ const Table = ({
                 ? textOverrides.showDetails
                 : textOverrides.hideDetails}
               {shouldHideDetails ? (
-                <ChevronDownIcon size={24} />
+                <ChevronDownIcon size={20} />
               ) : (
-                <ChevronUpIcon size={24} />
+                <ChevronUpIcon size={20} />
               )}
             </>
           }

diff --git a/src/lib/components/table/components/IconRenderer/IconRenderer.tsx b/src/lib/components/table/components/IconRenderer/IconRenderer.tsx
@@ -3,14 +3,15 @@ import { ReactNode } from 'react';
 export type IconRendererProps = {
   icon?: ReactNode;
   imageComponent?: (args: any) => JSX.Element;
+  width?: number;
 };
 
-export const IconRenderer = ({ icon, imageComponent }: IconRendererProps) => {
+export const IconRenderer = ({ icon, imageComponent, width = 24 }: IconRendererProps) => {
   const ImageComponent = imageComponent ?? 'img';
   const iconIsUrl = typeof icon === 'string';
 
   const renderedIcon = iconIsUrl ? (
-    <ImageComponent src={icon} width={24} alt="" />
+    <ImageComponent src={icon} width={width} alt="" />
   ) : (
     icon
   );

diff --git a/src/lib/components/table/components/TableCell/BaseCell/BaseCell.tsx b/src/lib/components/table/components/TableCell/BaseCell/BaseCell.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import {
-  CheckIcon,
+  CheckThickIcon,
   StarFilledIcon,
   XIcon,
   ZapFilledIcon,
@@ -42,6 +42,9 @@ export type BaseCellProps = {
     value: number;
     type: 'zap' | 'star';
   };
+  className?: string;
+  dataTestId?: string;
+  dataCy?: string;
 };
 
 export const BaseCell = ({
@@ -55,6 +58,7 @@ export const BaseCell = ({
   openModal,
   rating,
   text = '',
+  className,
 }: BaseCellProps) => {
   const alignClassName = {
     center: 'ta-center jc-center ai-center',
@@ -72,7 +76,9 @@ export const BaseCell = ({
 
   return (
     <div
-      className={classNames('d-flex gap8 ai-center', {
+      className={classNames(
+        className,
+        'd-flex gap8 ai-center', {
         'jc-center': align === 'center',
       })}
     >
@@ -97,15 +103,16 @@ export const BaseCell = ({
                   key={value}
                   color={value <= rating?.value ? 'primary-500' : 'grey-400'}
                   className={styles.icon}
+                  size={rating?.type === 'zap' ? 16 : 14}
                 />
               ))}
             </span>
           )}
 
           {checkmarkValue !== undefined && (
-            <span title={checkmarkValue ? 'Yes' : 'No'}>
+            <span className='d-inline-block mx8' title={checkmarkValue ? 'Yes' : 'No'}>
               {checkmarkValue ? (
-                <CheckIcon
+                <CheckThickIcon
                   noMargin
                   data-testid="table-cell-boolean-yes"
                   size={24}

diff --git a/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.tsx b/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.tsx
@@ -10,6 +10,9 @@ export type ButtonCellProps = {
   isSelected?: boolean;
   onClick: () => void;
   price?: ReactNode;
+  className?: string;
+  dataTestId?: string;
+  dataCy?: string;
 };
 
 export const ButtonCell = ({
@@ -18,9 +21,19 @@ export const ButtonCell = ({
   buttonCaption,
   price,
   disabled,
+  className,
+  ...rest
 }: ButtonCellProps) => {
   return (
-    <div className="w100 d-flex fd-column ai-center jc-center gap8">
+    <div
+      className={
+        classNames(
+          "w100 d-flex fd-column ai-center jc-center gap8",
+          className,
+        )
+      }
+      {...rest}
+    >
       <Button
         className={classNames('w100 wmx5 d-flex fd-column', styles.buttonCell, {
           [styles.selected]: isSelected,

diff --git a/src/lib/components/table/components/TableCell/CTACell/CTACell.tsx b/src/lib/components/table/components/TableCell/CTACell/CTACell.tsx
@@ -13,6 +13,9 @@ export type CTACellProps = {
   grey?: boolean;
   narrow?: boolean;
   href: string;
+  className?: string;
+  dataTestId?: string;
+  dataCy?: string;
 };
 
 export const CTACell = ({
@@ -24,13 +27,15 @@ export const CTACell = ({
   href,
   buttonCaption,
   imageComponent,
+  className,
+  ...rest
 }: CTACellProps) => {
   const renderedIcon = (
     <IconRenderer icon={icon} imageComponent={imageComponent} />
   );
 
   return (
-    <div className="ta-center">
+    <div className={classNames(className, "ta-center")} {...rest}>
       <div className="d-flex jc-center ai-center gap8">
         {renderedIcon}
         <p className="p-h3">

diff --git a/src/lib/components/table/components/TableCell/TableCell.module.scss b/src/lib/components/table/components/TableCell/TableCell.module.scss
@@ -12,7 +12,13 @@
   }
 
   &Navigation {
-    width: auto;
+    width: 100%;
+  }
+
+  @include p-size-tablet {
+    &Navigation {
+      width: auto;
+    }
   }
 }
 

diff --git a/src/lib/components/table/components/TableContents/TableContents.module.scss b/src/lib/components/table/components/TableContents/TableContents.module.scss
@@ -7,4 +7,9 @@
   left: 0;
   right: 0;
   z-index: 3;
+}
+
+.cardIcon {
+  width: 20px;
+  margin-right: 8px;
 }
diff --git a/src/lib/components/table/components/TableContents/TableContents.tsx b/src/lib/components/table/components/TableContents/TableContents.tsx
@@ -55,7 +55,7 @@ const TableContents = ({
         const isVisible = hideDetails ? !shouldHideDetails : true;
 
         const renderedIcon = (
-          <IconRenderer icon={section.icon} imageComponent={imageComponent} />
+          <IconRenderer icon={section.icon} imageComponent={imageComponent} width={20} />
         );
 
         return (
@@ -75,8 +75,8 @@ const TableContents = ({
                       aria-expanded={isExpanded ? 'true' : 'false'}
                       aria-hidden
                       classNames={{
-                        wrapper: 'bg-grey-200 pl16',
-                        icon: 'tc-grey-900',
+                        wrapper: 'bg-purple-50 pl16',
+                        icon: classNames(styles.cardIcon, 'tc-grey-900'),
                       }}
                       dropShadow={false}
                       icon={renderedIcon}

diff --git a/src/lib/components/table/components/TableControls/TableControls.module.scss b/src/lib/components/table/components/TableControls/TableControls.module.scss
@@ -13,4 +13,5 @@
   width: 32px;
   height: 32px;
   padding: 0;
+  min-width: 32px;
 }
diff --git a/src/lib/models/styles.ts b/src/lib/models/styles.ts
@@ -56,4 +56,4 @@ export type Color = 'transparent' | 'blue-100'
 | 'yellow-700'
 | 'yellow-900';
 
-export type Size = 0 | 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 88 | 96;
+export type Size = 0 | 4 | 8 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 88 | 96;