@storybook/addon-interactions 6.4.0-beta.31 → 6.4.0-rc.1

package/dist/modern/components/AccountForm/addon-interactions.stories.js

@@ -1,5 +1,5 @@
 import { expect } from '@storybook/jest';
-import { within, waitFor, fireEvent, userEvent } from '@storybook/testing-library';
+import { within, waitFor, fireEvent, userEvent, waitForElementToBeRemoved } from '@storybook/testing-library';
 import React from 'react';
 import { AccountForm } from './AccountForm';
 export default {
@@ -46,6 +46,60 @@ WaitFor.play = async ({
   });
 };
 
+export const WaitForElementToBeRemoved = () => {
+  const [isLoading, setIsLoading] = React.useState(true);
+  React.useEffect(() => {
+    setTimeout(() => setIsLoading(false), 1500);
+  }, []);
+  return isLoading ? /*#__PURE__*/React.createElement("div", null, "Loading...") : /*#__PURE__*/React.createElement("button", {
+    type: "button"
+  }, "Loaded!");
+};
+
+WaitForElementToBeRemoved.play = async ({
+  canvasElement
+}) => {
+  const canvas = within(canvasElement);
+  await waitForElementToBeRemoved(await canvas.findByText('Loading...'), {
+    timeout: 2000
+  });
+  const button = await canvas.findByText('Loaded!');
+  await expect(button).not.toBeNull();
+};
+
+export const WithLoaders = (args, {
+  loaded: {
+    todo
+  }
+}) => {
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: args.onSubmit(todo.title)
+  }, "Todo: ", todo.title);
+};
+WithLoaders.loaders = [async () => {
+  // long fake timeout
+  await new Promise(resolve => setTimeout(resolve, 2000));
+  return {
+    todo: {
+      userId: 1,
+      id: 1,
+      title: 'delectus aut autem',
+      completed: false
+    }
+  };
+}];
+
+WithLoaders.play = async ({
+  args,
+  canvasElement
+}) => {
+  const canvas = within(canvasElement);
+  const todoItem = await canvas.findByText('Todo: delectus aut autem');
+  await userEvent.click(todoItem);
+  await expect(args.onSubmit).toHaveBeenCalledWith('delectus aut autem');
+};
+
 export const Standard = {
   args: {
     passwordVerification: false

package/dist/modern/components/Subnav/Subnav.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Icons, Separator, P, TooltipNote, WithTooltip, Bar } from '@storybook/components';
+import { Button, IconButton, Icons, Separator, P, TooltipNote, WithTooltip, Bar } from '@storybook/components';
 import { CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 import { StatusBadge } from '../StatusBadge/StatusBadge';
@@ -34,16 +34,11 @@ const Note = styled(TooltipNote)(({
 }) => ({
   fontFamily: theme.typography.fonts.base
 }));
-export const StyledIconButton = styled(StyledButton)(({
+export const StyledIconButton = styled(IconButton)(({
   theme
 }) => ({
   color: theme.color.mediumdark,
-  margin: '0 3px',
-  '&:not(:disabled)': {
-    '&:hover,&:focus-visible': {
-      background: theme.background.hoverable
-    }
-  }
+  margin: '0 3px'
 }));
 const StyledSeparator = styled(Separator)({
   marginTop: 0
@@ -109,7 +104,6 @@ export const Subnav = ({
       note: "Go to start"
     })
   }, /*#__PURE__*/React.createElement(RewindButton, {
-    containsIcon: true,
     onClick: onStart,
     disabled: isDisabled || !hasPrevious
   }, /*#__PURE__*/React.createElement(Icons, {
@@ -122,7 +116,6 @@ export const Subnav = ({
       note: "Go back"
     })
   }, /*#__PURE__*/React.createElement(StyledIconButton, {
-    containsIcon: true,
     onClick: onPrevious,
     disabled: isDisabled || !hasPrevious
   }, /*#__PURE__*/React.createElement(Icons, {
@@ -135,7 +128,6 @@ export const Subnav = ({
       note: "Go forward"
     })
   }, /*#__PURE__*/React.createElement(StyledIconButton, {
-    containsIcon: true,
     onClick: onNext,
     disabled: isDisabled || !hasNext
   }, /*#__PURE__*/React.createElement(Icons, {
@@ -148,7 +140,6 @@ export const Subnav = ({
       note: "Go to end"
     })
   }, /*#__PURE__*/React.createElement(StyledIconButton, {
-    containsIcon: true,
     onClick: onEnd,
     disabled: isDisabled || !hasNext
   }, /*#__PURE__*/React.createElement(Icons, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "6.4.0-beta.31",
+  "version": "6.4.0-rc.1",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",
@@ -41,14 +41,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.31",
-    "@storybook/api": "6.4.0-beta.31",
-    "@storybook/components": "6.4.0-beta.31",
-    "@storybook/core-common": "6.4.0-beta.31",
-    "@storybook/core-events": "6.4.0-beta.31",
+    "@storybook/addons": "6.4.0-rc.1",
+    "@storybook/api": "6.4.0-rc.1",
+    "@storybook/components": "6.4.0-rc.1",
+    "@storybook/core-common": "6.4.0-rc.1",
+    "@storybook/core-events": "6.4.0-rc.1",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/instrumenter": "6.4.0-beta.31",
-    "@storybook/theming": "6.4.0-beta.31",
+    "@storybook/instrumenter": "6.4.0-rc.1",
+    "@storybook/theming": "6.4.0-rc.1",
     "global": "^4.4.0",
     "jest-mock": "^27.0.6",
     "polished": "^4.0.5",
@@ -74,7 +74,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
+  "gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Interactions",