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" && (
)}
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}
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: {