feat(DataGrid): Update styling inline with new designs

Royal-Navy · May 16, 2024 · 9fd3fed · 9fd3fed
1 parent 9b0b8ac
commit 9fd3fed
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 32 deletions.
diff --git a/packages/react-component-library/src/components/DataGrid/DataGrid.tsx b/packages/react-component-library/src/components/DataGrid/DataGrid.tsx
@@ -21,16 +21,17 @@ import type {
   TableOptions,
 } from '@tanstack/react-table'
 import {
-  IconSortAscending,
-  IconSortDescending,
-  IconSortUnsorted,
+  IconSwapVert,
+  IconArrowDownward,
+  IconArrowUpward,
 } from '@royalnavy/icon-library'
 
 import { IndeterminateCheckbox } from '../Checkbox'
 import { ComponentWithClass } from '../../common/ComponentWithClass'
 import { TABLE_SORT_ORDER } from '../Table'
 import {
   StyledDataGrid,
+  StyledCaption,
   StyledTable,
   StyledHead,
   StyledBody,
@@ -83,10 +84,10 @@ export interface DataGridProps<T extends object>
 
 const SORT_ORDER_ICONS_MAP = {
   [TABLE_SORT_ORDER.ASCENDING]: (
-    <IconSortAscending aria-hidden data-testid="ascending" />
+    <IconArrowDownward aria-hidden data-testid="ascending" />
   ),
   [TABLE_SORT_ORDER.DESCENDING]: (
-    <IconSortDescending aria-hidden data-testid="descending" />
+    <IconArrowUpward aria-hidden data-testid="descending" />
   ),
 }
 
@@ -101,7 +102,7 @@ function getIcon(sortable: boolean, sortOrder?: SortDirection | false) {
   }
 
   if (!sortOrder) {
-    return <IconSortUnsorted aria-hidden data-testid="unsorted" />
+    return <IconSwapVert aria-hidden data-testid="unsorted" />
   }
 
   return SORT_ORDER_ICONS_MAP[sortOrder]
@@ -220,7 +221,7 @@ export const DataGrid = <T extends object>(props: DataGridProps<T>) => {
         $isFullWidth={isFullWidth}
         role="grid"
       >
-        {caption && <caption>{caption}</caption>}
+        {caption && <StyledCaption>{caption}</StyledCaption>}
         <StyledHead>
           {table
             .getHeaderGroups()
@@ -247,10 +248,12 @@ export const DataGrid = <T extends object>(props: DataGridProps<T>) => {
                       key={headerId}
                       onClick={getToggleSortingHandler()}
                     >
-                      {isPlaceholder
-                        ? null
-                        : flexRender(columnDef.header, getContext())}
-                      {getIcon(getCanSort(), getIsSorted())}
+                      <div>
+                        {isPlaceholder
+                          ? null
+                          : flexRender(columnDef.header, getContext())}
+                        {getIcon(getCanSort(), getIsSorted())}
+                      </div>
                     </StyledCol>
                   )
                 )}

diff --git a/packages/react-component-library/src/components/DataGrid/partials/StyledCaption.tsx b/packages/react-component-library/src/components/DataGrid/partials/StyledCaption.tsx
@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+import { selectors } from '@royalnavy/design-tokens'
+
+const { spacing } = selectors
+
+export const StyledCaption = styled.caption`
+  padding: ${spacing('8')} ${spacing('4')};
+  text-align: left;
+`
diff --git a/packages/react-component-library/src/components/DataGrid/partials/StyledCell.tsx b/packages/react-component-library/src/components/DataGrid/partials/StyledCell.tsx
@@ -9,9 +9,14 @@ interface StyledCellProps {
 const { spacing, fontSize, color } = selectors
 
 export const StyledCell = styled.td<StyledCellProps>`
-  padding: ${spacing('4')} ${spacing('4')} ${spacing('4')} ${spacing('8')};
+  padding: ${spacing('9')} ${spacing('4')} ${spacing('9')} ${spacing('8')};
   width: ${({ $width }) => $width || 'auto'};
   font-size: ${fontSize('s')};
-  color: ${color('neutral', '500')};
+  color: ${color('neutral', '400')};
   text-align: ${({ $alignment }) => $alignment || 'left'};
+  border-bottom: 1px solid ${color('neutral', '200')};
+
+  &:last-of-type {
+    border-right: unset;
+  }
 `
diff --git a/packages/react-component-library/src/components/DataGrid/partials/StyledCol.tsx b/packages/react-component-library/src/components/DataGrid/partials/StyledCol.tsx
@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components'
 import { selectors } from '@royalnavy/design-tokens'
 
-const { fontSize, spacing } = selectors
+const { fontSize, spacing, color } = selectors
 
 interface StyledColProps {
   $isSortable?: boolean
@@ -10,26 +10,49 @@ interface StyledColProps {
 }
 
 export const StyledCol = styled.th<StyledColProps>`
-  padding: ${spacing('8')} ${spacing('4')} ${spacing('8')} ${spacing('8')};
+  position: relative;
+  padding: ${spacing('9')} ${spacing('4')} ${spacing('9')} ${spacing('8')};
   width: ${({ $width }) => $width || 'auto'};
   text-align: left;
   font-size: ${fontSize('s')};
+  color: ${color('neutral', '600')};
   font-weight: 600;
-  text-transform: uppercase;
-  text-align: ${({ $alignment }) => $alignment || 'left'};
+  text-transform: capitalize;
+  border-bottom: 1px solid ${color('neutral', '200')};
+
+  > div {
+    display: flex;
+    align-items: center;
+    justify-content: ${({ $alignment }) =>
+      $alignment === 'right' ? 'flex-end' : 'space-between'};
+
+    & svg {
+      height: 1rem;
+      margin-left: ${spacing('2')};
+    }
+  }
+
+  &:not(:last-of-type) > div::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+    width: 1px;
+    height: 16px;
+    background: ${color('neutral', '200')};
+  }
 
   ${({ $isSortable }) =>
     $isSortable &&
     css`
       cursor: pointer;
       user-select: none;
-    `}
 
-  & svg {
-    position: relative;
-    top: 2px;
-    left: ${spacing('2')};
-    width: ${spacing('6')};
-    height: ${spacing('6')};
-  }
+      &:hover {
+        svg {
+          opacity: 0.75;
+        }
+      }
+    `}
 `
diff --git a/packages/react-component-library/src/components/DataGrid/partials/StyledHead.tsx b/packages/react-component-library/src/components/DataGrid/partials/StyledHead.tsx
@@ -4,5 +4,13 @@ import { selectors } from '@royalnavy/design-tokens'
 const { color } = selectors
 
 export const StyledHead = styled.thead`
-  border-bottom: 2px solid ${color('neutral', '100')};
+  background: ${color('neutral', '000')};
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+
+  tr,
+  th {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
 `
diff --git a/packages/react-component-library/src/components/DataGrid/partials/StyledRow.tsx b/packages/react-component-library/src/components/DataGrid/partials/StyledRow.tsx
@@ -9,10 +9,12 @@ interface StyledRowProps {
 const { color } = selectors
 
 export const StyledRow = styled.tr<StyledRowProps>`
-  border-bottom: 1px solid ${color('neutral', '100')};
-
   &:last-child {
     border-bottom: none;
+
+    td {
+      border-bottom: unset;
+    }
   }
 
   ${({ $hasHover }) =>

diff --git a/packages/react-component-library/src/components/DataGrid/partials/StyledTable.tsx b/packages/react-component-library/src/components/DataGrid/partials/StyledTable.tsx
@@ -6,22 +6,25 @@ interface StyledTableProps {
   $isFullWidth?: boolean
 }
 
-const { spacing } = selectors
+const { color } = selectors
 
 export const StyledTable = styled.table<StyledTableProps>`
   table-layout: fixed;
   width: ${({ $isFullWidth }) => ($isFullWidth ? '100%' : 'auto')};
-  border-collapse: collapse;
+  border-collapse: seperate;
+  border-spacing: 0;
+  border-radius: 4px;
+  border: 1px solid ${color('neutral', '200')};
 
   ${({ $hasRowSelection }) =>
     $hasRowSelection &&
     `
     th:first-child, td:first-child {
-      width: calc(22px + ${spacing('6')}) !important;
+      width: calc(22px + 1.75rem) !important;
 
       > * {
         margin-top: -2px;
       }
     }
-  `}
+  `};
 `
diff --git a/packages/react-component-library/src/components/DataGrid/partials/index.ts b/packages/react-component-library/src/components/DataGrid/partials/index.ts
@@ -5,3 +5,4 @@ export * from './StyledDataGrid'
 export * from './StyledHead'
 export * from './StyledRow'
 export * from './StyledTable'
+export * from './StyledCaption'