chore: update stories and mdx to use new storybook v7 format

okta · May 18, 2023 · 3954f11 · 3954f11
1 parent 7fe98c2
commit 3954f11
Show file tree

Hide file tree

Showing 12 changed files with 638 additions and 599 deletions.
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.mdx b/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.mdx
@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story } from "@storybook/addon-docs";
+import { DatePickerStandard } from "./DatePicker.stories.tsx";
 
-<Meta anchor />
+<Meta title="Labs Components/DatePicker" anchor />
 
 # DatePicker
 

diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx
@@ -21,17 +21,11 @@ import {
   LocalizationProvider,
 } from "@okta/odyssey-react-labs";
 
-import DatePickerMdx from "./DatePicker.mdx";
 import { MuiThemeDecorator } from "../../../../.storybook/components/MuiThemeDecorator";
 
 const storybookMeta: Meta<DatePickerProps<unknown, unknown>> = {
   title: "Labs Components/DatePicker",
   component: DatePicker,
-  parameters: {
-    docs: {
-      page: DatePickerMdx,
-    },
-  },
   argTypes: {
     label: {
       control: "text",

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.stories.tsx
@@ -11,19 +11,13 @@
  */
 
 import { Banner, BannerProps } from "@okta/odyssey-react-mui";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { MuiThemeDecorator } from "../../../../.storybook/components";
-import BannerMdx from "./Banner.mdx";
 
 const storybookMeta: Meta<typeof Banner> = {
   title: "MUI Components/Alerts/Banner",
   component: Banner,
-  parameters: {
-    docs: {
-      page: BannerMdx,
-    },
-  },
   argTypes: {
     linkText: {
       control: "text",
@@ -53,39 +47,42 @@ const storybookMeta: Meta<typeof Banner> = {
 
 export default storybookMeta;
 
-const Template: StoryFn<BannerProps> = (props) => <Banner {...props}></Banner>;
-
-export const InfoBanner = Template.bind({});
-InfoBanner.args = {
-  severity: "info",
-  text: "The mission to Sagittarius A is set for January 7.",
+export const InfoBanner: StoryObj<BannerProps> = {
+  args: {
+    severity: "info",
+    text: "The mission to Sagittarius A is set for January 7.",
+  },
 };
 
-export const ErrorBanner = Template.bind({});
-ErrorBanner.args = {
-  role: "status",
-  severity: "error",
-  text: "An unidentified flying object compromised Hangar 18.",
+export const ErrorBanner: StoryObj<BannerProps> = {
+  args: {
+    role: "status",
+    severity: "error",
+    text: "An unidentified flying object compromised Hangar 18.",
+  },
 };
 
-export const WarningBanner = Template.bind({});
-WarningBanner.args = {
-  role: "status",
-  severity: "warning",
-  text: "Severe solar winds detected. Local system flights may be delayed.",
+export const WarningBanner: StoryObj<BannerProps> = {
+  args: {
+    role: "status",
+    severity: "warning",
+    text: "Severe solar winds detected. Local system flights may be delayed.",
+  },
 };
 
-export const BannerWithLink = Template.bind({});
-BannerWithLink.args = {
-  linkText: "View report",
-  linkUrl: "#anchor",
-  role: "status",
-  severity: "error",
-  text: "An unidentified flying object compromised Hangar 18.",
+export const BannerWithLink: StoryObj<BannerProps> = {
+  args: {
+    linkText: "View report",
+    linkUrl: "#anchor",
+    role: "status",
+    severity: "error",
+    text: "An unidentified flying object compromised Hangar 18.",
+  },
 };
 
-export const DismissibleBanner = Template.bind({});
-DismissibleBanner.args = {
-  role: "status",
-  severity: "warning",
+export const DismissibleBanner: StoryObj<BannerProps> = {
+  args: {
+    role: "status",
+    severity: "warning",
+  },
 };
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Button/Button.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Button/Button.stories.tsx
@@ -10,22 +10,18 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import { Button, AddIcon } from "@okta/odyssey-react-mui";
 import type { ButtonProps } from "@okta/odyssey-react-mui";
 import { MuiThemeDecorator } from "../../../../.storybook/components/MuiThemeDecorator";
 
-import ButtonMdx from "./Button.mdx";
+import { userEvent, within } from "@storybook/testing-library";
+import { expect } from "@storybook/jest";
 
 const storybookMeta: Meta<ButtonProps> = {
   title: "MUI Components/Button",
   component: Button,
-  parameters: {
-    docs: {
-      page: ButtonMdx,
-    },
-  },
   argTypes: {
     isDisabled: {
       control: "boolean",
@@ -61,70 +57,89 @@ const storybookMeta: Meta<ButtonProps> = {
 
 export default storybookMeta;
 
-const Template: StoryFn<ButtonProps> = (props) => <Button {...props} />;
-
-export const ButtonPrimary = Template.bind({});
-ButtonPrimary.args = {
-  text: "Add crew",
+export const ButtonPrimary: StoryObj<ButtonProps> = {
+  args: {
+    text: "Add crew",
+  },
+  play: async ({ args, canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByText(args.text!);
+    await step("hover and click", async (ctx) => {
+      console.log(ctx);
+      await userEvent.hover(button);
+      await userEvent.click(button);
+      await expect(args.onClick).toHaveBeenCalledTimes(1);
+    });
+  },
 };
 
-export const ButtonSecondary = Template.bind({});
-ButtonSecondary.args = {
-  text: "Add crew",
-  variant: "secondary",
+export const ButtonSecondary: StoryObj<ButtonProps> = {
+  args: {
+    text: "Add crew",
+    variant: "secondary",
+  },
 };
 
-export const ButtonDanger = Template.bind({});
-ButtonDanger.args = {
-  text: "Add crew",
-  variant: "danger",
+export const ButtonDanger: StoryObj<ButtonProps> = {
+  args: {
+    text: "Add crew",
+    variant: "danger",
+  },
 };
 
-export const ButtonFloating = Template.bind({});
-ButtonFloating.args = {
-  text: "Add crew",
-  variant: "floating",
+export const ButtonFloating: StoryObj<ButtonProps> = {
+  args: {
+    text: "Add crew",
+    variant: "floating",
+  },
 };
 
-export const ButtonSmall = Template.bind({});
-ButtonSmall.args = {
-  text: "Add crew",
-  size: "small",
+export const ButtonSmall: StoryObj<ButtonProps> = {
+  args: {
+    text: "Add crew",
+    size: "small",
+  },
 };
 
-export const ButtonMedium = Template.bind({});
-ButtonMedium.args = {
-  text: "Add crew",
-  size: "medium",
+export const ButtonMedium: StoryObj<ButtonProps> = {
+  args: {
+    text: "Add crew",
+    size: "medium",
+  },
 };
 
-export const ButtonLarge = Template.bind({});
-ButtonLarge.args = {
-  text: "Add crew",
-  size: "large",
+export const ButtonLarge: StoryObj<ButtonProps> = {
+  args: {
+    text: "Add crew",
+    size: "large",
+  },
 };
 
-export const ButtonFullWidth = Template.bind({});
-ButtonFullWidth.args = {
-  text: "Add crew",
-  isFullWidth: true,
+export const ButtonFullWidth: StoryObj<ButtonProps> = {
+  args: {
+    text: "Add crew",
+    isFullWidth: true,
+  },
 };
 
-export const ButtonPrimaryDisabled = Template.bind({});
-ButtonPrimaryDisabled.args = {
-  text: "Add crew",
-  isDisabled: true,
+export const ButtonPrimaryDisabled: StoryObj<ButtonProps> = {
+  args: {
+    text: "Add crew",
+    isDisabled: true,
+  },
 };
 
-export const ButtonWithIcon = Template.bind({});
-ButtonWithIcon.args = {
-  text: "Add crew",
-  startIcon: <AddIcon />,
+export const ButtonWithIcon: StoryObj<ButtonProps> = {
+  args: {
+    text: "Add crew",
+    startIcon: <AddIcon />,
+  },
 };
 
-export const IconOnly = Template.bind({});
-IconOnly.args = {
-  startIcon: <AddIcon />,
-  text: undefined,
-  tooltipText: "Add crew",
+export const IconOnly: StoryObj<ButtonProps> = {
+  args: {
+    startIcon: <AddIcon />,
+    text: undefined, // FIXME
+    tooltipText: "Add crew", // FIXME
+  },
 };