@bundle-stats/ui 4.17.0-beta.2 → 4.17.0-beta.3
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/lib/css/variables.css +1 -1
- package/lib/ui/dialog/dialog.module.css +2 -2
- package/lib/ui/hover-card/hover-card.module.css +1 -1
- package/lib/ui/tooltip/tooltip.stories.module.css +8 -0
- package/lib-esm/css/variables.css +1 -1
- package/lib-esm/ui/dialog/dialog.module.css +2 -2
- package/lib-esm/ui/hover-card/hover-card.module.css +1 -1
- package/lib-esm/ui/tooltip/tooltip.stories.module.css +8 -0
- package/package.json +3 -3
- package/src/css/variables.css +1 -1
- package/src/ui/dialog/dialog.module.css +2 -2
- package/src/ui/dialog/dialog.stories.tsx +60 -49
- package/src/ui/hover-card/hover-card.module.css +1 -1
- package/src/ui/tooltip/tooltip.stories.module.css +8 -0
- package/src/ui/tooltip/tooltip.stories.tsx +24 -13
package/lib/css/variables.css
CHANGED
|
@@ -177,7 +177,7 @@
|
|
|
177
177
|
--color-outline-danger: var(--color-red-100);
|
|
178
178
|
|
|
179
179
|
--color-backdrop: rgba(0, 0, 0, 0.05);
|
|
180
|
-
--color-shadow: rgba(0, 0, 0, 0.
|
|
180
|
+
--color-shadow: rgba(0, 0, 0, 0.25);
|
|
181
181
|
|
|
182
182
|
--transition-duration-in: 0.2s;
|
|
183
183
|
--transition-duration-out: 0.17s;
|
|
@@ -177,7 +177,7 @@
|
|
|
177
177
|
--color-outline-danger: var(--color-red-100);
|
|
178
178
|
|
|
179
179
|
--color-backdrop: rgba(0, 0, 0, 0.05);
|
|
180
|
-
--color-shadow: rgba(0, 0, 0, 0.
|
|
180
|
+
--color-shadow: rgba(0, 0, 0, 0.25);
|
|
181
181
|
|
|
182
182
|
--transition-duration-in: 0.2s;
|
|
183
183
|
--transition-duration-out: 0.17s;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bundle-stats/ui",
|
|
3
|
-
"version": "4.17.0-beta.
|
|
3
|
+
"version": "4.17.0-beta.3",
|
|
4
4
|
"description": "UI components for BundleStats projects.",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-esm/index.js",
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"react-router-dom": "^5.0.0"
|
|
75
75
|
},
|
|
76
76
|
"dependencies": {
|
|
77
|
-
"@bundle-stats/utils": "4.17.0-beta.
|
|
77
|
+
"@bundle-stats/utils": "4.17.0-beta.3",
|
|
78
78
|
"ariakit": "2.0.0-next.44",
|
|
79
79
|
"d3": "7.9.0",
|
|
80
80
|
"modern-css-reset": "1.4.0",
|
|
@@ -82,5 +82,5 @@
|
|
|
82
82
|
"snarkdown": "2.0.0",
|
|
83
83
|
"use-query-params": "2.2.1"
|
|
84
84
|
},
|
|
85
|
-
"gitHead": "
|
|
85
|
+
"gitHead": "dd42ad7ca20c8489980b10c1d15a408121b4b98f"
|
|
86
86
|
}
|
package/src/css/variables.css
CHANGED
|
@@ -177,7 +177,7 @@
|
|
|
177
177
|
--color-outline-danger: var(--color-red-100);
|
|
178
178
|
|
|
179
179
|
--color-backdrop: rgba(0, 0, 0, 0.05);
|
|
180
|
-
--color-shadow: rgba(0, 0, 0, 0.
|
|
180
|
+
--color-shadow: rgba(0, 0, 0, 0.25);
|
|
181
181
|
|
|
182
182
|
--transition-duration-in: 0.2s;
|
|
183
183
|
--transition-duration-out: 0.17s;
|
|
@@ -8,60 +8,71 @@ import { Dialog, useDialogState } from '.';
|
|
|
8
8
|
const meta: Meta<typeof Dialog> = {
|
|
9
9
|
title: 'UI/Dialog',
|
|
10
10
|
component: Dialog,
|
|
11
|
+
argTypes: {
|
|
12
|
+
width: {
|
|
13
|
+
control: {
|
|
14
|
+
type: 'select',
|
|
15
|
+
},
|
|
16
|
+
options: ['narrow', 'medium', 'wide', 'extra-wide'],
|
|
17
|
+
},
|
|
18
|
+
},
|
|
11
19
|
};
|
|
12
20
|
|
|
13
21
|
export default meta;
|
|
14
22
|
|
|
15
23
|
type Story = StoryObj<typeof meta>;
|
|
16
24
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
25
|
+
const DialogComponent = (storyArgs: Story['args']) => {
|
|
26
|
+
const { width } = storyArgs;
|
|
27
|
+
const dialog = useDialogState();
|
|
20
28
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
29
|
+
return (
|
|
30
|
+
<>
|
|
31
|
+
<Button type="button" onClick={dialog.toggle}>
|
|
32
|
+
Open
|
|
33
|
+
</Button>
|
|
34
|
+
<Dialog title="Title" state={dialog} width={width}>
|
|
35
|
+
<div>
|
|
36
|
+
<Dropdown label="Select option">
|
|
37
|
+
<DropdownItem>Option 1</DropdownItem>
|
|
38
|
+
<DropdownItem>Option 2</DropdownItem>
|
|
39
|
+
<DropdownItem>Option 3</DropdownItem>
|
|
40
|
+
</Dropdown>
|
|
41
|
+
<br />
|
|
42
|
+
<br />
|
|
43
|
+
{[1, 2, 3].map((item) => (
|
|
44
|
+
<Fragment key={item}>
|
|
45
|
+
<p>
|
|
46
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate, lectus
|
|
47
|
+
vitae tristique facilisis, quam ex vulputate risus, vitae mattis eros diam quis
|
|
48
|
+
velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
|
|
49
|
+
turpis egestas. Sed et velit tortor. Suspendisse risus ipsum, convallis ultricies
|
|
50
|
+
justo vel, auctor semper est. Sed viverra pulvinar odio eget pharetra. In eleifend
|
|
51
|
+
felis nec odio convallis, eleifend rhoncus diam maximus. Cras diam libero, egestas
|
|
52
|
+
blandit vestibulum nec, volutpat a mi. Etiam blandit turpis ac nulla molestie
|
|
53
|
+
vehicula. Duis bibendum a nisl sollicitudin lobortis. Vestibulum lobortis eget justo
|
|
54
|
+
ac elementum. Vestibulum vel lorem arcu. Etiam sagittis luctus justo eu interdum. Ut
|
|
55
|
+
lobortis tempus turpis, vitae auctor elit congue id.
|
|
56
|
+
</p>
|
|
57
|
+
<br />
|
|
58
|
+
<p>
|
|
59
|
+
Nulla eu ullamcorper quam. Mauris rhoncus tristique dui in rutrum. Ut eget justo a
|
|
60
|
+
lorem efficitur consequat. Nunc sed erat at ipsum convallis iaculis at ac lacus.
|
|
61
|
+
Etiam pellentesque felis quis maximus ultrices. Vivamus non pretium quam. Aenean vel
|
|
62
|
+
nunc fringilla, lacinia felis a, vehicula purus. Vestibulum in varius purus. Class
|
|
63
|
+
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
|
|
64
|
+
himenaeos. Quisque laoreet ultrices ligula eget iaculis. Vivamus lacinia ante mattis
|
|
65
|
+
lorem ultricies consequat. Integer dui odio, semper ac neque vitae, elementum
|
|
66
|
+
hendrerit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
67
|
+
</p>
|
|
68
|
+
</Fragment>
|
|
69
|
+
))}
|
|
70
|
+
</div>
|
|
71
|
+
</Dialog>
|
|
72
|
+
</>
|
|
73
|
+
);
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
export const Default: Story = {
|
|
77
|
+
render: (storyArgs) => <DialogComponent {...storyArgs} />,
|
|
67
78
|
};
|
|
@@ -1,30 +1,41 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Story } from '@storybook/react'; // eslint-disable-line
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
2
|
|
|
4
|
-
import { getWrapperDecorator } from '../../stories';
|
|
5
3
|
import { Tooltip } from '.';
|
|
4
|
+
import css from './tooltip.stories.module.css';
|
|
6
5
|
|
|
7
|
-
|
|
6
|
+
const meta: Meta<typeof Tooltip> = {
|
|
8
7
|
title: 'UI/Tooltip',
|
|
9
8
|
component: Tooltip,
|
|
10
|
-
decorators: [getWrapperDecorator({ padding: '100px', textAlign: 'center' })],
|
|
11
9
|
args: {
|
|
12
10
|
title: 'View job #123',
|
|
11
|
+
children: 'Trigger',
|
|
12
|
+
},
|
|
13
|
+
parameters: {
|
|
14
|
+
layout: 'centered',
|
|
13
15
|
},
|
|
14
16
|
};
|
|
15
17
|
|
|
16
|
-
|
|
18
|
+
export default meta;
|
|
17
19
|
|
|
18
|
-
|
|
20
|
+
type Story = StoryObj<typeof meta>;
|
|
19
21
|
|
|
20
|
-
export const
|
|
22
|
+
export const Default: Story = {};
|
|
21
23
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
+
export const LongTitle: Story = {
|
|
25
|
+
args: {
|
|
26
|
+
title:
|
|
27
|
+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam molestie neque id lectus mollis, et imperdiet libero porta.',
|
|
28
|
+
},
|
|
24
29
|
};
|
|
25
30
|
|
|
26
|
-
export const DarkModeFalse: Story =
|
|
31
|
+
export const DarkModeFalse: Story = {
|
|
32
|
+
args: {
|
|
33
|
+
darkMode: false,
|
|
34
|
+
},
|
|
35
|
+
};
|
|
27
36
|
|
|
28
|
-
|
|
29
|
-
|
|
37
|
+
export const CustomTooltip: Story = {
|
|
38
|
+
args: {
|
|
39
|
+
tooltipClassName: css.customTooltip,
|
|
40
|
+
},
|
|
30
41
|
};
|