aural-ui 3.0.6 → 3.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React from "react"
|
|
2
2
|
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
3
|
+
import { toast } from "sonner"
|
|
3
4
|
|
|
4
5
|
import { ClampLines } from "."
|
|
6
|
+
import { Toaster } from "../toast"
|
|
5
7
|
|
|
6
8
|
const LONG_TEXT =
|
|
7
9
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
|
|
@@ -108,6 +110,29 @@ export const WithCustomButton: Story = {
|
|
|
108
110
|
},
|
|
109
111
|
}
|
|
110
112
|
|
|
113
|
+
export const WithOnToggle: Story = {
|
|
114
|
+
name: "With onToggle (Toast)",
|
|
115
|
+
args: {
|
|
116
|
+
children: LONG_TEXT,
|
|
117
|
+
wordLimit: 20,
|
|
118
|
+
onToggle: (open) => {
|
|
119
|
+
toast(open ? "Expanded" : "Collapsed", {
|
|
120
|
+
description: open
|
|
121
|
+
? "Full text is now visible."
|
|
122
|
+
: "Text has been collapsed.",
|
|
123
|
+
})
|
|
124
|
+
},
|
|
125
|
+
},
|
|
126
|
+
decorators: [
|
|
127
|
+
(Story) => (
|
|
128
|
+
<>
|
|
129
|
+
<Story />
|
|
130
|
+
<Toaster />
|
|
131
|
+
</>
|
|
132
|
+
),
|
|
133
|
+
],
|
|
134
|
+
}
|
|
135
|
+
|
|
111
136
|
export const ShortText: Story = {
|
|
112
137
|
name: "Short Text (no truncation)",
|
|
113
138
|
args: {
|
|
@@ -17,6 +17,7 @@ export interface IClampLinesProps {
|
|
|
17
17
|
minWordLimit?: number
|
|
18
18
|
readMoreText?: string
|
|
19
19
|
readLessText?: string
|
|
20
|
+
onToggle?: (open: boolean) => void
|
|
20
21
|
}
|
|
21
22
|
|
|
22
23
|
export const ClampLines = ({
|
|
@@ -28,6 +29,7 @@ export const ClampLines = ({
|
|
|
28
29
|
minWordLimit,
|
|
29
30
|
readMoreText = "READ MORE",
|
|
30
31
|
readLessText = "READ LESS",
|
|
32
|
+
onToggle,
|
|
31
33
|
}: IClampLinesProps) => {
|
|
32
34
|
const [open, setOpen] = useState(false)
|
|
33
35
|
const ref = useRef<HTMLParagraphElement | null>(null)
|
|
@@ -112,11 +114,14 @@ export const ClampLines = ({
|
|
|
112
114
|
}, [shouldTruncate, effectiveWordLimit, children, open])
|
|
113
115
|
|
|
114
116
|
const handleClick = () => {
|
|
115
|
-
|
|
117
|
+
const next = !open
|
|
118
|
+
setOpen(next)
|
|
119
|
+
onToggle?.(next)
|
|
116
120
|
}
|
|
117
121
|
|
|
118
122
|
const renderButton = !button ? (
|
|
119
123
|
<Button
|
|
124
|
+
data-nosnippet
|
|
120
125
|
variant="text"
|
|
121
126
|
noise="none"
|
|
122
127
|
innerClassName={cn("px-0! h-fit inline", classes.clampLineBtnInnerClass)}
|