Merge pull request #119 from linked-planet/dev

new component: SlideOpen, slightly improved TruncatedText one

Author: marcus-wishes

library/src/components/SlideOpen.tsx

@@ -0,0 +1,43 @@
+import type { CSSProperties, RefObject } from "react"
+import { twMerge } from "tailwind-merge"
+
+export function SlideOpen({
+	children,
+	containerClassName,
+	containerStyle,
+	contentStyle,
+	contentClassName,
+	open,
+	ref,
+}: {
+	children: React.ReactNode
+	containerClassName?: string
+	containerStyle?: CSSProperties
+	contentClassName?: string
+	contentStyle?: CSSProperties
+	open: boolean
+	ref?: RefObject<HTMLDivElement>
+}) {
+	return (
+		<div
+			className={twMerge(
+				"grid relative p-0 m-0 box-border overflow-hidden ease-in-out min-h-0 transition-all data-[open=true]:grid-rows-[1fr] data-[open=false]:grid-rows-[0fr]",
+				containerClassName,
+			)}
+			style={containerStyle}
+			data-open={open}
+			ref={ref}
+		>
+			<div
+				className={twMerge(
+					"relative bottom-0 min-h-0 data-[open=false]:p-0 data-[open=false]:border-0 m-0 box-border transition-all",
+					contentClassName,
+				)}
+				style={contentStyle}
+				data-open={open}
+			>
+				{children}
+			</div>
+		</div>
+	)
+}

library/src/components/TruncatedText.tsx

@@ -15,7 +15,6 @@ const TruncatedText = ({
 	moreButtonStyle,
 	className,
 	style,
-	testId,
 	duration = 150,
 }: {
 	children: React.ReactNode
@@ -29,7 +28,6 @@ const TruncatedText = ({
 	moreButtonStyle?: React.CSSProperties
 	className?: string
 	style?: React.CSSProperties
-	testId?: string
 	duration?: number
 }) => {
 	const ref = useRef<HTMLParagraphElement>(null)
@@ -56,7 +54,6 @@ const TruncatedText = ({
 				className,
 			)}
 			style={style}
-			data-testid={testId}
 		>
 			<div
 				className={`transition-[grid-template-rows] ease-in-out ${
@@ -75,12 +72,15 @@ const TruncatedText = ({
 				<div
 					style={{
 						...textStyle,
-						display: open || animating ? "block" : "-webkit-box",
+						display: open ? "block" : "-webkit-box",
+						//display: "-webkit-box",
 						WebkitLineClamp: lines,
 						WebkitBoxOrient: "vertical",
 						overflow: "hidden",
 						textOverflow: "ellipsis",
 						whiteSpace: "normal",
+						lineClamp: lines,
+						minHeight: `${lines + 0.5}rem`,
 					}}
 					ref={ref}
 					className={textClassName}

library/src/components/index.ts

@@ -38,3 +38,4 @@ export * from "./tour"
 export * from "./form"
 export * from "./EventList"
 export * from "./HighlightedText"
+export * from "./SlideOpen"