CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Content Page #19

Merged
an.di merged 48 commits from adilallo/feature/Blog into main 2025-09-18 15:44:46 +00:00
Conversation 0 Commits 48 Files Changed 99
+8 -139
3 changed files with 8 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit eb9a108d86 - Show all commits
app/components/ContentLockup.js
+2 -1
View File
@@ -104,8 +104,9 @@ const ContentLockup = ({
{variant === "hero" && (
<img
src="assets/Shapes_1.svg"
alt="Decorative shapes"
alt=""
className={styles.shape}
role="presentation"
/>
)}
</div>
app/components/HeaderTab.js
+6 -3
View File
@@ -16,17 +16,20 @@ export default function HeaderTab({
{children}
<img
src="assets/Union_xsm.svg"
alt="Union"
alt=""
role="presentation"
className="absolute -bottom-[3px] -right-[52px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] sm:hidden -z-10"
/>
<img
src="assets/Union_sm_md_lg.svg"
alt="Union"
alt=""
role="presentation"
className="absolute -bottom-[3.7px] -right-[53px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block xl:hidden -z-10"
/>
<img
src="assets/Union_xlg.svg"
alt="Union"
alt=""
role="presentation"
className="absolute -bottom-[6px] -right-[94px] w-[105px] h-[53px] hidden xl:block -z-10"
/>
</div>
stories/Header.responsive.stories.js
-135
View File
@@ -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: {