feat: basic styles

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

Hide file tree

Showing 3 changed files with 156 additions and 55 deletions.
diff --git a/packages/design-system/src/lib/assets/styles/design-tokens/colors.module.scss b/packages/design-system/src/lib/assets/styles/design-tokens/colors.module.scss
@@ -1,6 +1,6 @@
 // Base colors
-$dv-brand-color: #C55B28;
-$dv-primary-color: #337AB7;
+$dv-brand-color: #c55b28;
+$dv-primary-color: #337ab7;
 $dv-secondary-color: #e0e0e0;
 $dv-success-color: #3c763d;
 $dv-danger-color: #a94442;
@@ -10,7 +10,7 @@ $dv-success-box-color: #e0e0e0;
 $dv-danger-box-color: #f2dede;
 $dv-warning-box-color: #fcf8e3;
 $dv-info-box-color: #d9edf7;
-$dv-info-border-color: #428BCA;
+$dv-info-border-color: #428bca;
 
 // Text colors
 $dv-text-color: #333;
@@ -22,13 +22,16 @@ $dv-secondary-text-color: $dv-text-color;
 $dv-headings-color: #333;
 
 // Link colors
-$dv-link-color: #3174AF;
+$dv-link-color: #3174af;
 $dv-link-hover-color: #23527c;
 $dv-tooltip-color: #99bcdb;
 $dv-tooltip-hover-color: #337ab7;
 
 // Button colors
-$dv-button-border-color: #CCC;
+$dv-button-border-color: #ccc;
+
+// Border colors
+$dv-border-color: #dee2e6;
 
 :export {
   brand: $dv-brand-color;
@@ -52,4 +55,5 @@ $dv-button-border-color: #CCC;
   buttonBorderColor: $dv-button-border-color;
   tooltipFillColor: $dv-tooltip-color;
   tooltipBorderColor: $dv-tooltip-hover-color;
-}
+  borderColor: $dv-border-color;
+}
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
@@ -0,0 +1,78 @@
+@use 'sass:color';
+@import 'src/lib/assets/styles/design-tokens/colors.module';
+
+.transfer-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  @media screen and (min-width: 768px) {
+    flex-flow: row wrap;
+  }
+}
+
+.items-column {
+  position: relative;
+  z-index: 1;
+  width: 230px;
+  height: 230px;
+  padding-block: 0.75rem;
+  overflow-y: auto;
+  border: solid 2px $dv-border-color;
+  border-radius: 6px;
+
+  .items-list {
+    margin-bottom: 0;
+    padding-left: 0;
+    list-style-type: none;
+
+    .list-item {
+      padding-inline: 1rem;
+
+      &:hover {
+        color: $dv-text-color;
+        background-color: color.adjust($dv-secondary-color, $alpha: -0.7);
+      }
+
+      &:has(input[type='checkbox']:checked) {
+        background-color: color.adjust($dv-secondary-color, $alpha: -0.4);
+      }
+
+      :global .form-check {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0;
+        padding-left: 0;
+      }
+
+      input[type='checkbox'] {
+        flex-shrink: 0;
+        float: unset;
+        margin-top: 0;
+        margin-left: 0;
+        cursor: pointer;
+      }
+
+      label {
+        width: 100%;
+        padding-left: 0.5rem;
+        padding-block: 0.25rem;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.middle-column {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem 2rem;
+
+  .transfer-button {
+    min-width: 64px;
+  }
+}
diff --git a/packages/design-system/src/lib/components/transfer-list/TransferList.tsx b/packages/design-system/src/lib/components/transfer-list/TransferList.tsx
@@ -1,9 +1,14 @@
 import { useEffect, useId, useState } from 'react'
 import { ListGroup } from 'react-bootstrap'
 import { Button } from '../button/Button'
-import { Row } from '../grid/Row'
-import { Col } from '../grid/Col'
 import { Form } from '../form/Form'
+import {
+  ChevronDoubleLeft,
+  ChevronDoubleRight,
+  ChevronLeft,
+  ChevronRight
+} from 'react-bootstrap-icons'
+import styles from './TransferList.module.scss'
 
 function not(a: readonly TransferListItem[], b: readonly TransferListItem[]) {
   return a.filter((item) => !b.some((bItem) => bItem.value === item.value))
@@ -26,6 +31,8 @@ export interface TransferListProps {
   rightLabel?: string
 }
 
+// TODO:ME Check scrollbar styles for chrome and safari
+
 export const TransferList = ({
   availableItems,
   defaultSelected = [],
@@ -91,59 +98,71 @@ export const TransferList = ({
   }, [availableItems])
 
   const customList = (items: readonly TransferListItem[]) => (
-    <div style={{ width: 200, height: 230, overflow: 'auto' }}>
-      <ListGroup as="ul">
-        {items.map((item: TransferListItem) => {
-          const labelId = `transfer-list-item-${item.value}-label-${uniqueID}`
-
-          return (
-            <ListGroup.Item as="li" key={item.value}>
-              <Form.Group.Checkbox
-                label={item.label}
-                onChange={handleToggle(item)}
-                id={labelId}
-                checked={checked.indexOf(item) !== -1}
-                tabIndex={-1}
-              />
-            </ListGroup.Item>
-          )
-        })}
-      </ListGroup>
-    </div>
+    <ListGroup as="ul" className={styles['items-list']}>
+      {items.map((item: TransferListItem) => {
+        const labelId = `transfer-list-item-${item.value}-label-${uniqueID}`
+
+        return (
+          <ListGroup.Item as="li" key={item.value} className={styles['list-item']}>
+            <Form.Group.Checkbox
+              label={item.label}
+              onChange={handleToggle(item)}
+              id={labelId}
+              checked={checked.indexOf(item) !== -1}
+              tabIndex={-1}
+            />
+          </ListGroup.Item>
+        )
+      })}
+    </ListGroup>
   )
 
   return (
-    <Row>
-      <Col>
+    <div className={styles['transfer-list']}>
+      <div className={styles['items-column']}>
         {leftLabel && <p>{leftLabel}</p>}
         {customList(left)}
-      </Col>
-      <Col>
-        <Col>
-          <Button onClick={handleAllRight} disabled={left.length === 0} aria-label="move all right">
-            ≫
-          </Button>
-          <Button
-            onClick={handleCheckedRight}
-            disabled={leftChecked.length === 0}
-            aria-label="move selected right">
-            &gt;
-          </Button>
-          <Button
-            onClick={handleCheckedLeft}
-            disabled={rightChecked.length === 0}
-            aria-label="move selected left">
-            &lt;
-          </Button>
-          <Button onClick={handleAllLeft} disabled={right.length === 0} aria-label="move all left">
-            ≪
-          </Button>
-        </Col>
-      </Col>
-      <Col>
+      </div>
+      <div className={styles['middle-column']}>
+        <Button
+          size="sm"
+          onClick={handleAllRight}
+          disabled={left.length === 0}
+          icon={<ChevronDoubleRight />}
+          aria-label="move all right"
+          className={styles['transfer-button']}
+        />
+
+        <Button
+          size="sm"
+          onClick={handleCheckedRight}
+          disabled={leftChecked.length === 0}
+          icon={<ChevronRight />}
+          aria-label="move selected right"
+          className={styles['transfer-button']}
+        />
+
+        <Button
+          size="sm"
+          onClick={handleCheckedLeft}
+          disabled={rightChecked.length === 0}
+          icon={<ChevronLeft />}
+          aria-label="move selected left"
+          className={styles['transfer-button']}
+        />
+        <Button
+          size="sm"
+          onClick={handleAllLeft}
+          disabled={right.length === 0}
+          icon={<ChevronDoubleLeft />}
+          aria-label="move all left"
+          className={styles['transfer-button']}
+        />
+      </div>
+      <div className={styles['items-column']}>
         {rightLabel && <p>{rightLabel}</p>}
         {customList(right)}
-      </Col>
-    </Row>
+      </div>
+    </div>
   )
 }