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;
+}