Merged in feat/SW-2847-table (pull request #2665)

fix(SW-2847): move ScrollWrapper to design system and Table component

* fix(SW-2847): move ScrollWrapper to design system and Table component


Approved-by: Erik Tiekstra

apps/scandic-web/components/Blocks/Table/index.tsx

@@ -12,7 +12,6 @@ import Table from "@scandic-hotels/design-system/Table"
 
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
-import ScrollWrapper from "@/components/TempDesignSystem/ScrollWrapper"
 import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
 
 import styles from "./table.module.css"
@@ -56,50 +55,45 @@ export default function TableBlock({ data }: TableBlockProps) {
     <SectionContainer>
       <SectionHeader preamble={preamble} title={heading} />
       <div className={styles.tableWrapper}>
-        <ScrollWrapper>
+        <Table
-          <Table
+          width={`${totalWidth}%`}
-            width={`${totalWidth}%`}
+          variant="content"
-            variant="content"
+          intent="striped"
-            intent="striped"
+          layout="fixed"
-            layout="fixed"
+          borderRadius="none"
-            borderRadius="none"
+        >
-          >
+          {hasHeader ? (
-            {hasHeader ? (
+            <Table.THead>
-              <Table.THead>
+              {table.getHeaderGroups().map((headerGroup) => (
-                {table.getHeaderGroups().map((headerGroup) => (
+                <Table.TR key={headerGroup.id}>
-                  <Table.TR key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
-                    {headerGroup.headers.map((header) => (
+                    <Table.TH
-                      <Table.TH
+                      key={header.id}
-                        key={header.id}
+                      width={`${header.column.columnDef.size}%`}
-                        width={`${header.column.columnDef.size}%`}
+                    >
-                      >
-                        {flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
-                      </Table.TH>
-                    ))}
-                  </Table.TR>
-                ))}
-              </Table.THead>
-            ) : null}
-
-            <Table.TBody>
-              {table.getRowModel().rows.map((row) => (
-                <Table.TR key={row.id}>
-                  {row.getVisibleCells().map((cell) => (
-                    <Table.TD key={cell.id}>
                       {flexRender(
-                        cell.column.columnDef.cell,
+                        header.column.columnDef.header,
-                        cell.getContext()
+                        header.getContext()
                       )}
-                    </Table.TD>
+                    </Table.TH>
                   ))}
                 </Table.TR>
               ))}
-            </Table.TBody>
+            </Table.THead>
-          </Table>
+          ) : null}
-        </ScrollWrapper>
+
+          <Table.TBody>
+            {table.getRowModel().rows.map((row) => (
+              <Table.TR key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <Table.TD key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </Table.TD>
+                ))}
+              </Table.TR>
+            ))}
+          </Table.TBody>
+        </Table>
         {showMoreVisible ? (
           <ShowMoreButton
             loadMoreData={handleShowMore}

apps/scandic-web/components/ContentType/HotelPage/TabNavigation/index.tsx

@@ -11,11 +11,11 @@ import {
   useState,
 } from "react"
 
+import useScrollShadows from "@scandic-hotels/common/hooks/useScrollShadows"
 import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
 import { StickyElementNameEnum } from "@scandic-hotels/common/stores/sticky-position"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import useScrollShadows from "@/hooks/useScrollShadows"
 import useScrollSpy from "@/hooks/useScrollSpy"
 import { trackHotelTabClick } from "@/utils/tracking"
 

apps/scandic-web/components/TabFilters/index.tsx

@@ -2,11 +2,10 @@
 
 import { cx } from "class-variance-authority"
 
+import useScrollShadows from "@scandic-hotels/common/hooks/useScrollShadows"
 import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
 import IconByCSSelect from "@scandic-hotels/design-system/Icons/IconByCSSelect"
 
-import useScrollShadows from "@/hooks/useScrollShadows"
-
 import styles from "./tabFilters.module.css"
 
 interface Filter {

apps/scandic-web/components/TempDesignSystem/ScrollWrapper/scrollWrapper.ts

@@ -1,2 +0,0 @@
-export interface ScrollWrapperProps
-  extends React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>> {}

packages/design-system/lib/components/Table/ScrollWrapper/index.tsx

@@ -1,17 +1,15 @@
-"use client"
+'use client'
 
-import { useMemo } from "react"
+import { useMemo } from 'react'
 
-import useScrollShadows from "@/hooks/useScrollShadows"
+import styles from './scrollWrapper.module.css'
 
-import styles from "./scrollWrapper.module.css"
+import useScrollShadows from '@scandic-hotels/common/hooks/useScrollShadows'
-
-import type { ScrollWrapperProps } from "./scrollWrapper"
 
 export default function ScrollWrapper({
   className,
   children,
-}: ScrollWrapperProps) {
+}: React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>) {
   const { containerRef, showLeftShadow, showRightShadow } =
     useScrollShadows<HTMLDivElement>()
 
@@ -23,7 +21,7 @@ export default function ScrollWrapper({
     if (showRightShadow) {
       cls.push(styles.rightShadow)
     }
-    return cls.join(" ")
+    return cls.join(' ')
   }, [showLeftShadow, showRightShadow, className])
 
   return (

packages/design-system/lib/components/Table/ScrollWrapper/scrollWrapper.module.css

@@ -5,7 +5,7 @@
 
 .scrollWrapper::before,
 .scrollWrapper::after {
-  content: "";
+  content: '';
   position: absolute;
   top: 0;
   height: 100%;

packages/design-system/lib/components/Table/index.tsx

@@ -6,6 +6,7 @@ import TR from './TR'
 import { tableVariants } from './variants'
 
 import type { TableProps } from './table'
+import ScrollWrapper from './ScrollWrapper'
 
 function Table({
   className,
@@ -26,9 +27,11 @@ function Table({
   })
 
   return (
-    <table className={classNames} style={{ width }} {...props}>
+    <ScrollWrapper>
-      {children}
+      <table className={classNames} style={{ width }} {...props}>
-    </table>
+        {children}
+      </table>
+    </ScrollWrapper>
   )
 }
 

packages/design-system/lib/components/Table/table.module.css

@@ -14,16 +14,16 @@
 }
 
 .tr:not(:last-of-type) {
-  border-bottom: 1px solid var(--Base-Border-Subtle);
+  border-bottom: 1px solid var(--Border-Default);
 }
 
 .th {
-  padding: var(--Spacing-x2);
+  padding: var(--Space-x2);
   text-align: left;
 }
 
 .td {
-  padding: var(--Spacing-x2);
+  padding: var(--Space-x2);
 }
 
 .fixed {
@@ -41,26 +41,26 @@
 }
 
 .content .thead {
-  background-color: var(--Base-Surface-Subtle-Hover);
+  background-color: var(--Surface-Secondary-Hover);
 }
 
 .content .tbody {
-  background-color: var(--Background-Primary);
+  background-color: var(--Surface-Primary-OnSurface-Default);
 }
 
 .content.striped .tbody .tr:nth-child(odd) {
-  background-color: var(--Base-Surface-Subtle-Normal);
+  background-color: var(--Surface-Secondary-Default);
 }
 .content.striped .tbody .tr:nth-child(even) {
-  background-color: var(--Background-Primary);
+  background-color: var(--Surface-Primary-OnSurface-Default);
 }
 
 @media screen and (min-width: 768px) {
   .th {
-    padding: var(--Spacing-x2) var(--Spacing-x3);
+    padding: var(--Space-x2) var(--Space-x3);
   }
 
   .td {
-    padding: var(--Spacing-x3);
+    padding: var(--Space-x3);
   }
 }