@storybook/addon-interactions 6.5.9 → 6.5.10
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/README.md
CHANGED
|
@@ -41,22 +41,25 @@ Interactions relies on "instrumented" versions of Jest and Testing Library, that
|
|
|
41
41
|
`@storybook/testing-library` instead of their original package. You can then use these libraries in your `play` function.
|
|
42
42
|
|
|
43
43
|
```js
|
|
44
|
+
import { Button } from './Button';
|
|
44
45
|
import { expect } from '@storybook/jest';
|
|
45
46
|
import { within, userEvent } from '@storybook/testing-library';
|
|
46
47
|
|
|
47
48
|
export default {
|
|
48
49
|
title: 'Button',
|
|
50
|
+
component: Button,
|
|
49
51
|
argTypes: {
|
|
50
52
|
onClick: { action: true },
|
|
51
53
|
},
|
|
52
54
|
};
|
|
53
55
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
56
|
+
const Template = (args) => <Button {...args} />;
|
|
57
|
+
|
|
58
|
+
export const Demo = Template.bind({});
|
|
59
|
+
Demo.play = async ({ args, canvasElement }) => {
|
|
60
|
+
const canvas = within(canvasElement);
|
|
61
|
+
await userEvent.click(canvas.getByRole('button'));
|
|
62
|
+
await expect(args.onClick).toHaveBeenCalled();
|
|
60
63
|
};
|
|
61
64
|
```
|
|
62
65
|
|
|
@@ -67,9 +67,9 @@ var ListWrapper = _theming.styled.ul({
|
|
|
67
67
|
var Wrapper = _theming.styled.div({
|
|
68
68
|
display: 'flex',
|
|
69
69
|
width: '100%',
|
|
70
|
-
borderBottom: "1px solid ".concat((0, _theming.convert)(_theming.themes.
|
|
70
|
+
borderBottom: "1px solid ".concat((0, _theming.convert)(_theming.themes.light).appBorderColor),
|
|
71
71
|
'&:hover': {
|
|
72
|
-
background: (0, _theming.convert)(_theming.themes.
|
|
72
|
+
background: (0, _theming.convert)(_theming.themes.light).background.hoverable
|
|
73
73
|
}
|
|
74
74
|
});
|
|
75
75
|
|
|
@@ -77,7 +77,7 @@ var Icon = (0, _theming.styled)(_components.Icons)({
|
|
|
77
77
|
height: 10,
|
|
78
78
|
width: 10,
|
|
79
79
|
minWidth: 10,
|
|
80
|
-
color: (0, _theming.convert)(_theming.themes.
|
|
80
|
+
color: (0, _theming.convert)(_theming.themes.light).color.mediumdark,
|
|
81
81
|
marginRight: 10,
|
|
82
82
|
transition: 'transform 0.1s ease-in-out',
|
|
83
83
|
alignSelf: 'center',
|
|
@@ -85,8 +85,8 @@ var Icon = (0, _theming.styled)(_components.Icons)({
|
|
|
85
85
|
});
|
|
86
86
|
|
|
87
87
|
var HeaderBar = _theming.styled.div({
|
|
88
|
-
padding: (0, _theming.convert)(_theming.themes.
|
|
89
|
-
paddingLeft: (0, _theming.convert)(_theming.themes.
|
|
88
|
+
padding: (0, _theming.convert)(_theming.themes.light).layoutMargin,
|
|
89
|
+
paddingLeft: (0, _theming.convert)(_theming.themes.light).layoutMargin - 3,
|
|
90
90
|
background: 'none',
|
|
91
91
|
color: 'inherit',
|
|
92
92
|
textAlign: 'left',
|
|
@@ -95,13 +95,13 @@ var HeaderBar = _theming.styled.div({
|
|
|
95
95
|
width: '100%',
|
|
96
96
|
'&:focus': {
|
|
97
97
|
outline: '0 none',
|
|
98
|
-
borderLeft: "3px solid ".concat((0, _theming.convert)(_theming.themes.
|
|
98
|
+
borderLeft: "3px solid ".concat((0, _theming.convert)(_theming.themes.light).color.secondary)
|
|
99
99
|
}
|
|
100
100
|
});
|
|
101
101
|
|
|
102
102
|
var Description = _theming.styled.div({
|
|
103
|
-
padding: (0, _theming.convert)(_theming.themes.
|
|
104
|
-
marginBottom: (0, _theming.convert)(_theming.themes.
|
|
103
|
+
padding: (0, _theming.convert)(_theming.themes.light).layoutMargin,
|
|
104
|
+
marginBottom: (0, _theming.convert)(_theming.themes.light).layoutMargin,
|
|
105
105
|
fontStyle: 'italic'
|
|
106
106
|
});
|
|
107
107
|
|
|
@@ -120,7 +120,7 @@ var ListItem = function ListItem(_ref) {
|
|
|
120
120
|
role: "button"
|
|
121
121
|
}, /*#__PURE__*/_react.default.createElement(Icon, {
|
|
122
122
|
icon: "chevrondown",
|
|
123
|
-
color: (0, _theming.convert)(_theming.themes.
|
|
123
|
+
color: (0, _theming.convert)(_theming.themes.light).appBorderColor,
|
|
124
124
|
style: {
|
|
125
125
|
transform: "rotate(".concat(open ? 0 : -90, "deg)")
|
|
126
126
|
}
|
|
@@ -35,24 +35,24 @@ var ListWrapper = styled.ul({
|
|
|
35
35
|
var Wrapper = styled.div({
|
|
36
36
|
display: 'flex',
|
|
37
37
|
width: '100%',
|
|
38
|
-
borderBottom: "1px solid ".concat(convert(themes.
|
|
38
|
+
borderBottom: "1px solid ".concat(convert(themes.light).appBorderColor),
|
|
39
39
|
'&:hover': {
|
|
40
|
-
background: convert(themes.
|
|
40
|
+
background: convert(themes.light).background.hoverable
|
|
41
41
|
}
|
|
42
42
|
});
|
|
43
43
|
var Icon = styled(Icons)({
|
|
44
44
|
height: 10,
|
|
45
45
|
width: 10,
|
|
46
46
|
minWidth: 10,
|
|
47
|
-
color: convert(themes.
|
|
47
|
+
color: convert(themes.light).color.mediumdark,
|
|
48
48
|
marginRight: 10,
|
|
49
49
|
transition: 'transform 0.1s ease-in-out',
|
|
50
50
|
alignSelf: 'center',
|
|
51
51
|
display: 'inline-flex'
|
|
52
52
|
});
|
|
53
53
|
var HeaderBar = styled.div({
|
|
54
|
-
padding: convert(themes.
|
|
55
|
-
paddingLeft: convert(themes.
|
|
54
|
+
padding: convert(themes.light).layoutMargin,
|
|
55
|
+
paddingLeft: convert(themes.light).layoutMargin - 3,
|
|
56
56
|
background: 'none',
|
|
57
57
|
color: 'inherit',
|
|
58
58
|
textAlign: 'left',
|
|
@@ -61,12 +61,12 @@ var HeaderBar = styled.div({
|
|
|
61
61
|
width: '100%',
|
|
62
62
|
'&:focus': {
|
|
63
63
|
outline: '0 none',
|
|
64
|
-
borderLeft: "3px solid ".concat(convert(themes.
|
|
64
|
+
borderLeft: "3px solid ".concat(convert(themes.light).color.secondary)
|
|
65
65
|
}
|
|
66
66
|
});
|
|
67
67
|
var Description = styled.div({
|
|
68
|
-
padding: convert(themes.
|
|
69
|
-
marginBottom: convert(themes.
|
|
68
|
+
padding: convert(themes.light).layoutMargin,
|
|
69
|
+
marginBottom: convert(themes.light).layoutMargin,
|
|
70
70
|
fontStyle: 'italic'
|
|
71
71
|
});
|
|
72
72
|
export var ListItem = function ListItem(_ref) {
|
|
@@ -84,7 +84,7 @@ export var ListItem = function ListItem(_ref) {
|
|
|
84
84
|
role: "button"
|
|
85
85
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
86
86
|
icon: "chevrondown",
|
|
87
|
-
color: convert(themes.
|
|
87
|
+
color: convert(themes.light).appBorderColor,
|
|
88
88
|
style: {
|
|
89
89
|
transform: "rotate(".concat(open ? 0 : -90, "deg)")
|
|
90
90
|
}
|
|
@@ -10,24 +10,24 @@ const ListWrapper = styled.ul({
|
|
|
10
10
|
const Wrapper = styled.div({
|
|
11
11
|
display: 'flex',
|
|
12
12
|
width: '100%',
|
|
13
|
-
borderBottom: `1px solid ${convert(themes.
|
|
13
|
+
borderBottom: `1px solid ${convert(themes.light).appBorderColor}`,
|
|
14
14
|
'&:hover': {
|
|
15
|
-
background: convert(themes.
|
|
15
|
+
background: convert(themes.light).background.hoverable
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
18
|
const Icon = styled(Icons)({
|
|
19
19
|
height: 10,
|
|
20
20
|
width: 10,
|
|
21
21
|
minWidth: 10,
|
|
22
|
-
color: convert(themes.
|
|
22
|
+
color: convert(themes.light).color.mediumdark,
|
|
23
23
|
marginRight: 10,
|
|
24
24
|
transition: 'transform 0.1s ease-in-out',
|
|
25
25
|
alignSelf: 'center',
|
|
26
26
|
display: 'inline-flex'
|
|
27
27
|
});
|
|
28
28
|
const HeaderBar = styled.div({
|
|
29
|
-
padding: convert(themes.
|
|
30
|
-
paddingLeft: convert(themes.
|
|
29
|
+
padding: convert(themes.light).layoutMargin,
|
|
30
|
+
paddingLeft: convert(themes.light).layoutMargin - 3,
|
|
31
31
|
background: 'none',
|
|
32
32
|
color: 'inherit',
|
|
33
33
|
textAlign: 'left',
|
|
@@ -36,12 +36,12 @@ const HeaderBar = styled.div({
|
|
|
36
36
|
width: '100%',
|
|
37
37
|
'&:focus': {
|
|
38
38
|
outline: '0 none',
|
|
39
|
-
borderLeft: `3px solid ${convert(themes.
|
|
39
|
+
borderLeft: `3px solid ${convert(themes.light).color.secondary}`
|
|
40
40
|
}
|
|
41
41
|
});
|
|
42
42
|
const Description = styled.div({
|
|
43
|
-
padding: convert(themes.
|
|
44
|
-
marginBottom: convert(themes.
|
|
43
|
+
padding: convert(themes.light).layoutMargin,
|
|
44
|
+
marginBottom: convert(themes.light).layoutMargin,
|
|
45
45
|
fontStyle: 'italic'
|
|
46
46
|
});
|
|
47
47
|
export const ListItem = ({
|
|
@@ -53,7 +53,7 @@ export const ListItem = ({
|
|
|
53
53
|
role: "button"
|
|
54
54
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
55
55
|
icon: "chevrondown",
|
|
56
|
-
color: convert(themes.
|
|
56
|
+
color: convert(themes.light).appBorderColor,
|
|
57
57
|
style: {
|
|
58
58
|
transform: `rotate(${open ? 0 : -90}deg)`
|
|
59
59
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-interactions",
|
|
3
|
-
"version": "6.5.
|
|
3
|
+
"version": "6.5.10",
|
|
4
4
|
"description": "Automate, test and debug user interactions",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook-addons",
|
|
@@ -42,15 +42,15 @@
|
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@devtools-ds/object-inspector": "^1.1.2",
|
|
45
|
-
"@storybook/addons": "6.5.
|
|
46
|
-
"@storybook/api": "6.5.
|
|
47
|
-
"@storybook/client-logger": "6.5.
|
|
48
|
-
"@storybook/components": "6.5.
|
|
49
|
-
"@storybook/core-common": "6.5.
|
|
50
|
-
"@storybook/core-events": "6.5.
|
|
45
|
+
"@storybook/addons": "6.5.10",
|
|
46
|
+
"@storybook/api": "6.5.10",
|
|
47
|
+
"@storybook/client-logger": "6.5.10",
|
|
48
|
+
"@storybook/components": "6.5.10",
|
|
49
|
+
"@storybook/core-common": "6.5.10",
|
|
50
|
+
"@storybook/core-events": "6.5.10",
|
|
51
51
|
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
|
52
|
-
"@storybook/instrumenter": "6.5.
|
|
53
|
-
"@storybook/theming": "6.5.
|
|
52
|
+
"@storybook/instrumenter": "6.5.10",
|
|
53
|
+
"@storybook/theming": "6.5.10",
|
|
54
54
|
"core-js": "^3.8.2",
|
|
55
55
|
"global": "^4.4.0",
|
|
56
56
|
"jest-mock": "^27.0.6",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"publishConfig": {
|
|
78
78
|
"access": "public"
|
|
79
79
|
},
|
|
80
|
-
"gitHead": "
|
|
80
|
+
"gitHead": "893881ff6f87272c0ab0f21776ef8fef990d0c36",
|
|
81
81
|
"sbmodern": "dist/modern/index.js",
|
|
82
82
|
"storybook": {
|
|
83
83
|
"displayName": "Interactions",
|