diff --git a/app/components/ContentLockup.js b/app/components/ContentLockup.js index fbff962..d47b370 100644 --- a/app/components/ContentLockup.js +++ b/app/components/ContentLockup.js @@ -104,8 +104,9 @@ const ContentLockup = ({ {variant === "hero" && ( Decorative shapes )} diff --git a/app/components/HeaderTab.js b/app/components/HeaderTab.js index 0756504..9c37e99 100644 --- a/app/components/HeaderTab.js +++ b/app/components/HeaderTab.js @@ -16,17 +16,20 @@ export default function HeaderTab({ {children} Union Union Union diff --git a/stories/Header.responsive.stories.js b/stories/Header.responsive.stories.js index 39b6ac6..4c958a8 100644 --- a/stories/Header.responsive.stories.js +++ b/stories/Header.responsive.stories.js @@ -1,5 +1,4 @@ import Header from "../app/components/Header.js"; -import { within, userEvent } from "@storybook/test"; export default { title: "Components/Header/Responsive", @@ -180,140 +179,6 @@ export const ExtraLarge = { }, }; -// Interactive story for testing user interactions -export const Interactive = { - args: { - onToggle: () => console.log("Navigation toggled"), - }, - parameters: { - docs: { - description: { - story: - "Interactive header for testing user interactions. Check the Actions panel to see triggered events.", - }, - }, - }, - play: async ({ canvasElement, step }) => { - const canvas = within(canvasElement); - - await step("Click navigation items", async () => { - const useCasesLink = canvas.getByRole("menuitem", { name: /Use cases/i }); - await userEvent.click(useCasesLink); - - const learnLink = canvas.getByRole("menuitem", { name: /Learn/i }); - await userEvent.click(learnLink); - - const aboutLink = canvas.getByRole("menuitem", { name: /About/i }); - await userEvent.click(aboutLink); - }); - - await step("Click authentication elements", async () => { - const loginLink = canvas.getByRole("menuitem", { - name: /log in to your account/i, - }); - await userEvent.click(loginLink); - - const createRuleButton = canvas.getByRole("button", { - name: /create a new rule with avatar decoration/i, - }); - await userEvent.click(createRuleButton); - }); - }, -}; - -// Story for testing hover states -export const HoverStates = { - args: { - onToggle: () => console.log("Navigation toggled"), - }, - parameters: { - docs: { - description: { - story: - "Header with hover states visible. This story captures the visual appearance when elements are hovered.", - }, - }, - }, - play: async ({ canvasElement, step }) => { - const canvas = within(canvasElement); - - await step("Hover over navigation items", async () => { - const useCasesLink = canvas.getByRole("menuitem", { name: /Use cases/i }); - await userEvent.hover(useCasesLink); - // Wait for hover state to be visible - await new Promise((resolve) => setTimeout(resolve, 100)); - - const learnLink = canvas.getByRole("menuitem", { name: /Learn/i }); - await userEvent.hover(learnLink); - await new Promise((resolve) => setTimeout(resolve, 100)); - - const aboutLink = canvas.getByRole("menuitem", { name: /About/i }); - await userEvent.hover(aboutLink); - await new Promise((resolve) => setTimeout(resolve, 100)); - }); - - await step("Hover over authentication elements", async () => { - const loginLink = canvas.getByRole("menuitem", { - name: /log in to your account/i, - }); - await userEvent.hover(loginLink); - await new Promise((resolve) => setTimeout(resolve, 100)); - - const createRuleButton = canvas.getByRole("button", { - name: /create a new rule with avatar decoration/i, - }); - await userEvent.hover(createRuleButton); - await new Promise((resolve) => setTimeout(resolve, 100)); - }); - }, -}; - -// Story for testing focus states -export const FocusStates = { - args: { - onToggle: () => console.log("Navigation toggled"), - }, - parameters: { - docs: { - description: { - story: - "Header with focus states visible. This story captures the visual appearance when elements are focused.", - }, - }, - }, - play: async ({ canvasElement, step }) => { - const canvas = within(canvasElement); - - await step("Focus on navigation items", async () => { - const useCasesLink = canvas.getByRole("menuitem", { name: /Use cases/i }); - useCasesLink.focus(); - await new Promise((resolve) => setTimeout(resolve, 100)); - - const learnLink = canvas.getByRole("menuitem", { name: /Learn/i }); - learnLink.focus(); - await new Promise((resolve) => setTimeout(resolve, 100)); - - const aboutLink = canvas.getByRole("menuitem", { name: /About/i }); - aboutLink.focus(); - await new Promise((resolve) => setTimeout(resolve, 100)); - }); - - await step("Focus on authentication elements", async () => { - const loginLink = canvas.getByRole("menuitem", { - name: /log in to your account/i, - }); - loginLink.focus(); - await new Promise((resolve) => setTimeout(resolve, 100)); - - const createRuleButton = canvas.getByRole("button", { - name: /create a new rule with avatar decoration/i, - }); - createRuleButton.focus(); - await new Promise((resolve) => setTimeout(resolve, 100)); - }); - }, -}; - // Story for testing with long content export const WithLongContent = { args: {