@charcoal-ui/react-sandbox 5.3.0-beta.2 → 5.4.0
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@charcoal-ui/react-sandbox",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.4.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -41,11 +41,11 @@
|
|
|
41
41
|
"polished": "^4.1.4",
|
|
42
42
|
"react-spring": "^9.0.0",
|
|
43
43
|
"warning": "^4.0.3",
|
|
44
|
-
"@charcoal-ui/foundation": "5.
|
|
45
|
-
"@charcoal-ui/
|
|
46
|
-
"@charcoal-ui/
|
|
47
|
-
"@charcoal-ui/
|
|
48
|
-
"@charcoal-ui/
|
|
44
|
+
"@charcoal-ui/foundation": "5.4.0",
|
|
45
|
+
"@charcoal-ui/react": "5.4.0",
|
|
46
|
+
"@charcoal-ui/styled": "5.4.0",
|
|
47
|
+
"@charcoal-ui/theme": "5.4.0",
|
|
48
|
+
"@charcoal-ui/utils": "5.4.0"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"react": ">=17.0.0",
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-webpack5'
|
|
2
|
+
import { TextEllipsis } from '.'
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: 'react-sandbox/TextEllipsis',
|
|
6
|
+
component: TextEllipsis,
|
|
7
|
+
parameters: {
|
|
8
|
+
layout: 'centered',
|
|
9
|
+
},
|
|
10
|
+
render(args) {
|
|
11
|
+
return (
|
|
12
|
+
<div style={{ width: 200 }}>
|
|
13
|
+
<TextEllipsis {...args} />
|
|
14
|
+
</div>
|
|
15
|
+
)
|
|
16
|
+
},
|
|
17
|
+
} satisfies Meta<typeof TextEllipsis>
|
|
18
|
+
|
|
19
|
+
export const Default: StoryObj<typeof TextEllipsis> = {
|
|
20
|
+
args: {
|
|
21
|
+
lineHeight: 24,
|
|
22
|
+
lineLimit: 1,
|
|
23
|
+
children:
|
|
24
|
+
'これは非常に長いテキストです。1行で収まらない場合に省略記号（...）で表示が切り詰められます。ホバーすると全文がツールチップで表示されます。',
|
|
25
|
+
},
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export const SingleLine: StoryObj<typeof TextEllipsis> = {
|
|
29
|
+
args: {
|
|
30
|
+
lineHeight: 24,
|
|
31
|
+
lineLimit: 1,
|
|
32
|
+
children:
|
|
33
|
+
'Single line ellipsis. This long text will be truncated with an ellipsis at the end.',
|
|
34
|
+
},
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
export const MultiLine: StoryObj<typeof TextEllipsis> = {
|
|
38
|
+
args: {
|
|
39
|
+
lineHeight: 24,
|
|
40
|
+
lineLimit: 2,
|
|
41
|
+
children:
|
|
42
|
+
'複数行の省略表示です。lineLimit で指定した行数まで表示し、それ以降は...で省略されます。',
|
|
43
|
+
},
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export const CustomTitle: StoryObj<typeof TextEllipsis> = {
|
|
47
|
+
args: {
|
|
48
|
+
lineHeight: 24,
|
|
49
|
+
lineLimit: 1,
|
|
50
|
+
title: 'カスタムのツールチップ文言',
|
|
51
|
+
children: 'title を渡すとツールチップはその文言になります。',
|
|
52
|
+
},
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
export const EmptyTitle: StoryObj<typeof TextEllipsis> = {
|
|
56
|
+
args: {
|
|
57
|
+
lineHeight: 24,
|
|
58
|
+
lineLimit: 1,
|
|
59
|
+
title: '',
|
|
60
|
+
children:
|
|
61
|
+
'title="" を渡すとツールチップは表示されません。ホバーしても何も出ません。',
|
|
62
|
+
},
|
|
63
|
+
}
|