feat: more tweaks

IQSS · Aug 9, 2024 · be6de50 · be6de50
1 parent fde095b
commit be6de50
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 11 deletions.
diff --git a/packages/design-system/src/lib/components/transfer-list/TransferList.module.scss b/packages/design-system/src/lib/components/transfer-list/TransferList.module.scss
@@ -16,8 +16,7 @@
   position: relative;
   z-index: 1;
   width: 230px;
-  height: 230px;
-  padding-block: 0.75rem;
+  height: 240px;
   overflow-y: auto;
   border: solid 2px $dv-border-color;
   border-radius: 6px;
@@ -57,11 +56,22 @@
       label {
         width: 100%;
         padding-left: 0.5rem;
-        padding-block: 0.25rem;
+        padding-block: 0.5rem;
         cursor: pointer;
       }
     }
   }
+
+  .column-label {
+    position: sticky;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0.35rem 0.5rem;
+    font-weight: bold;
+    text-align: center;
+    background-color: #f5f5f5;
+  }
 }
 
 .middle-column {

diff --git a/packages/design-system/src/lib/components/transfer-list/TransferList.tsx b/packages/design-system/src/lib/components/transfer-list/TransferList.tsx
@@ -32,6 +32,7 @@ export interface TransferListProps {
 }
 
 // TODO:ME Check scrollbar styles for chrome and safari
+// TODO:ME Check navigation with keyboard
 
 export const TransferList = ({
   availableItems,
@@ -103,7 +104,7 @@ export const TransferList = ({
         const labelId = `transfer-list-item-${item.value}-label-${uniqueID}`
 
         return (
-          <ListGroup.Item as="li" key={item.value} className={styles['list-item']}>
+          <ListGroup.Item as="li" className={styles['list-item']} key={item.value}>
             <Form.Group.Checkbox
               label={item.label}
               onChange={handleToggle(item)}
@@ -119,8 +120,8 @@ export const TransferList = ({
 
   return (
     <div className={styles['transfer-list']}>
-      <div className={styles['items-column']}>
-        {leftLabel && <p>{leftLabel}</p>}
+      <div className={styles['items-column']} tabIndex={0}>
+        {leftLabel && <p className={styles['column-label']}>{leftLabel}</p>}
         {customList(left)}
       </div>
       <div className={styles['middle-column']}>
@@ -159,8 +160,8 @@ export const TransferList = ({
           className={styles['transfer-button']}
         />
       </div>
-      <div className={styles['items-column']}>
-        {rightLabel && <p>{rightLabel}</p>}
+      <div className={styles['items-column']} tabIndex={0}>
+        {rightLabel && <p className={styles['column-label']}>{rightLabel}</p>}
         {customList(right)}
       </div>
     </div>

diff --git a/packages/design-system/src/lib/stories/transfer-list/TransferList.stories.tsx b/packages/design-system/src/lib/stories/transfer-list/TransferList.stories.tsx
@@ -40,21 +40,37 @@ const availableItems: TransferListItem[] = [
   {
     label: 'Item 6',
     value: 6
+  },
+  {
+    label: 'Item 7',
+    value: 7
+  },
+  {
+    label: 'Item 8',
+    value: 8
+  },
+  {
+    label: 'Item 9',
+    value: 9
+  },
+  {
+    label: 'Item 10',
+    value: 10
   }
 ]
 
 const availableItemsTypeHobbies: TransferListItem[] = [
   {
     label: 'Soccer',
-    value: 10
+    value: 20
   },
   {
     label: 'Basketball',
-    value: 20
+    value: 30
   },
   {
     label: 'Tennis',
-    value: 30
+    value: 40
   }
 ]