scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Matilda Landström
2025-08-20 09:41:54 +00:00
parent 7891ae3ae6
commit fe376c63f7
9 changed files with 58 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
apps/scandic-web/components/TempDesignSystem/ScrollWrapper/index.tsx
View File

@@ -1,36 +0,0 @@
"use client"
import { useMemo } from "react"
import useScrollShadows from "@/hooks/useScrollShadows"
import styles from "./scrollWrapper.module.css"
import type { ScrollWrapperProps } from "./scrollWrapper"
export default function ScrollWrapper({
className,
children,
}: ScrollWrapperProps) {
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>
)
}

33
apps/scandic-web/components/TempDesignSystem/ScrollWrapper/scrollWrapper.module.css
View File

@@ -1,33 +0,0 @@
.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;
}

2
apps/scandic-web/components/TempDesignSystem/ScrollWrapper/scrollWrapper.ts
View File

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