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

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

@@ -0,0 +1,34 @@
+'use client'
+
+import { useMemo } from 'react'
+
+import styles from './scrollWrapper.module.css'
+
+import useScrollShadows from '@scandic-hotels/common/hooks/useScrollShadows'
+
+export default function ScrollWrapper({
+  className,
+  children,
+}: React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>) {
+  const { containerRef, showLeftShadow, showRightShadow } =
+    useScrollShadows<HTMLDivElement>()
+
+  const classNames = useMemo(() => {
+    const cls = [styles.scrollWrapper, className]
+    if (showLeftShadow) {
+      cls.push(styles.leftShadow)
+    }
+    if (showRightShadow) {
+      cls.push(styles.rightShadow)
+    }
+    return cls.join(' ')
+  }, [showLeftShadow, showRightShadow, className])
+
+  return (
+    <div className={classNames}>
+      <div className={styles.content} ref={containerRef}>
+        {children}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,33 @@
+.scrollWrapper {
+  position: relative;
+  overflow: hidden;
+}
+
+.scrollWrapper::before,
+.scrollWrapper::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+  transition: opacity 0.2s ease;
+  opacity: 0;
+  width: 50px;
+}
+
+.scrollWrapper.leftShadow::before {
+  left: 0;
+  background: linear-gradient(to right, rgba(128, 110, 99, 0.37), transparent);
+  opacity: 1;
+}
+
+.scrollWrapper.rightShadow::after {
+  right: 0;
+  background: linear-gradient(to left, rgba(128, 110, 99, 0.37), transparent);
+  opacity: 1;
+}
+
+.content {
+  overflow-x: auto;
+}

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}>
-      {children}
-    </table>
+    <ScrollWrapper>
+      <table className={classNames} style={{ width }} {...props}>
+        {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);
   }
 }