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

Match the marketing homepage, About page, and folder header to the latest Figma #74

Merged
an.di merged 3 commits from adilallo/fix/CR-173-home-about-feature-grid into main 2026-09-10 03:41:44 +00:00
Conversation 0 Commits 3 Files Changed 40
+110 -43
7 changed files with 110 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4bd9fa6dc6 - Show all commits
app/components/asset/Logo/Logo.tsx
+1 -1
View File
@@ -93,7 +93,7 @@ const Logo = memo<LogoProps>(
? "text-[var(--color-content-invert-primary)]" ? "text-[var(--color-content-invert-primary)]"
: "text-[var(--color-content-default-primary)]"; : "text-[var(--color-content-default-primary)]";
const wordmarkVisibilityClass = const wordmarkVisibilityClass =
size === "topNavFolderTop" || size === "topNavHeader" size === "topNavHeader"
? wordmark ? wordmark
? "hidden md:block" ? "hidden md:block"
: "hidden" : "hidden"
app/components/navigation/Top/Top.container.tsx
+25 -6
View File
@@ -1,7 +1,8 @@
"use client"; "use client";
/** /**
* Figma: "Navigation / Top" (22078-808559) * Figma: "Navigation / Top" (22078-808559); Folder-top 430–639 (18582:22056),
* 640–1023 (18580:17113).
*/ */
import { memo, useCallback } from "react"; import { memo, useCallback } from "react";
@@ -39,6 +40,9 @@ const FOLDER_NAV_ITEM_RESPONSIVE_CLASS =
const CREATE_RULE_RESPONSIVE_CLASS = const CREATE_RULE_RESPONSIVE_CLASS =
"lg:p-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-006)] lg:text-medium-label xl:p-[var(--spacing-scale-016)] xl:gap-[var(--spacing-scale-008)] xl:text-x-large-label"; "lg:p-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-006)] lg:text-medium-label xl:p-[var(--spacing-scale-016)] xl:gap-[var(--spacing-scale-008)] xl:text-x-large-label";
const FOLDER_CREATE_RULE_RESPONSIVE_CLASS =
"md:p-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-002)] md:text-x-small-label lg:p-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-006)] lg:text-medium-label xl:p-[var(--spacing-scale-016)] xl:gap-[var(--spacing-scale-008)] xl:text-x-large-label";
const TopContainer = memo<TopProps>( const TopContainer = memo<TopProps>(
({ folderTop = false, loggedIn = false, profile = false, logIn = true }) => { ({ folderTop = false, loggedIn = false, profile = false, logIn = true }) => {
const pathname = usePathname(); const pathname = usePathname();
@@ -120,6 +124,9 @@ const TopContainer = memo<TopProps>(
const navSelected = const navSelected =
(loggedIn && pathname === "/profile") || (loggedIn && pathname === "/profile") ||
(!loggedIn && pathname === "/login"); (!loggedIn && pathname === "/login");
const loginClassName = folderTop
? FOLDER_NAV_ITEM_RESPONSIVE_CLASS
: NAV_ITEM_RESPONSIVE_CLASS;
if (loggedIn) { if (loggedIn) {
return ( return (
@@ -128,7 +135,7 @@ const TopContainer = memo<TopProps>(
size="X Small" size="X Small"
mode="default" mode="default"
state={navSelected ? "selected" : "default"} state={navSelected ? "selected" : "default"}
className={NAV_ITEM_RESPONSIVE_CLASS} className={loginClassName}
ariaLabel={ariaLabel} ariaLabel={ariaLabel}
> >
{label} {label}
@@ -149,7 +156,7 @@ const TopContainer = memo<TopProps>(
size="X Small" size="X Small"
mode="default" mode="default"
state={navSelected ? "selected" : "default"} state={navSelected ? "selected" : "default"}
className={NAV_ITEM_RESPONSIVE_CLASS} className={loginClassName}
ariaLabel={ariaLabel} ariaLabel={ariaLabel}
> >
{label} {label}
@@ -165,11 +172,19 @@ const TopContainer = memo<TopProps>(
palette="inverse" palette="inverse"
onClick={handleCreateRuleClick} onClick={handleCreateRuleClick}
ariaLabel={t("ariaLabels.createNewRule")} ariaLabel={t("ariaLabels.createNewRule")}
className={CREATE_RULE_RESPONSIVE_CLASS} className={
folderTop
? FOLDER_CREATE_RULE_RESPONSIVE_CLASS
: CREATE_RULE_RESPONSIVE_CLASS
}
> >
<AvatarContainer <AvatarContainer
size="small" size="small"
className="lg:-space-x-[var(--spacing-scale-010)] xl:-space-x-[13px]" className={
folderTop
? "md:-space-x-[9px] lg:-space-x-[var(--spacing-scale-010)] xl:-space-x-[13px]"
: "lg:-space-x-[var(--spacing-scale-010)] xl:-space-x-[13px]"
}
> >
{avatarImageSources.map((src, index) => ( {avatarImageSources.map((src, index) => (
<Avatar <Avatar
@@ -177,7 +192,11 @@ const TopContainer = memo<TopProps>(
src={src} src={src}
alt={tTopNav(`avatarAlts.${3 - index}`)} alt={tTopNav(`avatarAlts.${3 - index}`)}
size="small" size="small"
className="lg:h-[var(--spacing-scale-024)] lg:w-[var(--spacing-scale-024)] xl:h-[var(--spacing-scale-032)] xl:w-[var(--spacing-scale-032)]" className={
folderTop
? "md:h-[var(--spacing-scale-018)] md:w-[var(--spacing-scale-018)] lg:h-[var(--spacing-scale-024)] lg:w-[var(--spacing-scale-024)] xl:h-[var(--spacing-scale-032)] xl:w-[var(--spacing-scale-032)]"
: "lg:h-[var(--spacing-scale-024)] lg:w-[var(--spacing-scale-024)] xl:h-[var(--spacing-scale-032)] xl:w-[var(--spacing-scale-032)]"
}
/> />
))} ))}
</AvatarContainer> </AvatarContainer>
app/components/navigation/Top/Top.view.tsx
+18 -13
View File
@@ -37,17 +37,17 @@ function TopView({
dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }} dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
/> />
<header <header
className="w-full overflow-hidden bg-transparent" className="w-full overflow-visible bg-transparent"
role="banner" role="banner"
aria-label={t("ariaLabels.homePageNavigationHeader")} aria-label={t("ariaLabels.homePageNavigationHeader")}
> >
<nav <nav
className="relative mx-auto flex h-[50px] items-end justify-between gap-[var(--spacing-scale-008)] pl-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:h-[62px] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:h-[68px] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:h-[68px] lg:pl-[var(--spacing-scale-024)] lg:pr-[var(--spacing-scale-056)] lg:pt-[var(--spacing-scale-016)] xl:h-[88px] xl:pl-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-056)] xl:pt-[var(--spacing-scale-024)]" className="relative mx-auto flex h-[50px] items-end justify-between pl-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:h-[62px] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:h-[68px] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:h-[68px] lg:pl-[var(--spacing-scale-024)] lg:pr-[var(--spacing-scale-056)] lg:pt-[var(--spacing-scale-016)] xl:h-[88px] xl:pl-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-056)] xl:pt-[var(--spacing-scale-024)]"
role="navigation" role="navigation"
aria-label={t("ariaLabels.mainNavigation")} aria-label={t("ariaLabels.mainNavigation")}
> >
<div className="HeaderTab header-breakpoint-transition relative flex h-[var(--spacing-scale-040)] min-w-0 flex-1 items-center self-end rounded-tl-[var(--radius-measures-radius-medium)] rounded-tr-[var(--radius-measures-radius-medium)] bg-[var(--color-surface-inverse-brand-primary)] pl-[var(--spacing-scale-012)] pr-[var(--spacing-scale-012)] sm:mr-[var(--spacing-scale-008)] sm:h-[52px] sm:rounded-t-[var(--radius-measures-radius-xlarge)] sm:pr-[var(--spacing-scale-006)] md:h-[52px] md:rounded-t-[var(--radius-measures-radius-xlarge)] md:pl-[var(--spacing-scale-024)] md:pr-[var(--spacing-scale-012)] lg:h-[52px] lg:rounded-t-[var(--radius-measures-radius-xlarge)] lg:pl-[var(--spacing-scale-024)] lg:pr-[var(--spacing-scale-048)] xl:h-[64px] xl:rounded-t-[var(--radius-measures-radius-xlarge)] xl:pl-[var(--spacing-scale-032)] xl:pr-[var(--spacing-scale-120)]"> <div className="HeaderTab header-breakpoint-transition relative flex h-[var(--spacing-scale-040)] w-fit min-w-0 items-center self-end overflow-visible rounded-tl-[var(--radius-measures-radius-medium)] rounded-tr-[var(--radius-measures-radius-medium)] bg-[var(--color-surface-inverse-brand-primary)] pl-[var(--spacing-scale-012)] pr-[var(--spacing-scale-012)] sm:mr-[var(--spacing-scale-008)] sm:h-[52px] sm:w-auto sm:flex-1 sm:rounded-t-[var(--radius-measures-radius-xlarge)] sm:pr-[var(--spacing-scale-006)] md:h-[52px] md:min-w-0 md:rounded-t-[var(--radius-measures-radius-xlarge)] md:pl-[var(--spacing-scale-024)] md:pr-[var(--spacing-scale-012)] lg:mr-[var(--spacing-scale-024)] lg:h-[52px] lg:rounded-t-[var(--radius-measures-radius-xlarge)] lg:pl-[var(--spacing-scale-024)] lg:pr-[var(--spacing-scale-048)] xl:mr-[var(--spacing-scale-032)] xl:h-[64px] xl:rounded-t-[var(--radius-measures-radius-xlarge)] xl:pl-[var(--spacing-scale-032)] xl:pr-[var(--spacing-scale-120)]">
<div className="shrink-0"> <div className="relative z-[1] shrink-0">
<Logo <Logo
size={logoSize} size={logoSize}
wordmark wordmark
@@ -55,7 +55,10 @@ function TopView({
/> />
</div> </div>
<div className="ml-auto shrink-0" data-top="nav"> <div
className="relative z-[1] shrink-0 md:absolute md:top-1/2 md:left-[calc(50vw-var(--spacing-scale-016))] md:-translate-x-1/2 md:-translate-y-1/2 lg:left-[calc(50vw-var(--spacing-scale-024))] xl:left-[calc(50vw-var(--spacing-scale-048))]"
data-top="nav"
>
<Menu <Menu
size="X Small" size="X Small"
className="md:gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-012)]" className="md:gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-012)]"
@@ -69,21 +72,21 @@ function TopView({
src={getAssetPath(ASSETS.UNION_XSM)} src={getAssetPath(ASSETS.UNION_XSM)}
alt="" alt=""
role="presentation" role="presentation"
className="absolute -bottom-[3px] -right-[52px] -z-10 h-[24px] w-[61px] sm:hidden sm:h-[31.5px] sm:w-[61px]" className="pointer-events-none absolute -bottom-[3px] -right-[52px] z-0 h-[24px] w-[61px] sm:hidden sm:h-[31.5px] sm:w-[61px]"
/> />
{/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG */} {/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG */}
<img <img
src={getAssetPath(ASSETS.UNION_SM_MD_LG)} src={getAssetPath(ASSETS.UNION_SM_MD_LG)}
alt="" alt=""
role="presentation" role="presentation"
className="absolute -bottom-[3.7px] -right-[53px] -z-10 hidden h-[24px] w-[61px] sm:block sm:h-[31.5px] sm:w-[61px] xl:hidden" className="pointer-events-none absolute -bottom-[3.7px] -right-[53px] z-0 hidden h-[24px] w-[61px] sm:block sm:h-[31.5px] sm:w-[61px] xl:hidden"
/> />
{/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG */} {/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG */}
<img <img
src={getAssetPath(ASSETS.UNION_XLG)} src={getAssetPath(ASSETS.UNION_XLG)}
alt="" alt=""
role="presentation" role="presentation"
className="absolute -bottom-[6px] -right-[94px] -z-10 hidden h-[53px] w-[105px] xl:block" className="pointer-events-none absolute -bottom-[6px] -right-[94px] z-0 hidden h-[53px] w-[105px] xl:block"
/> />
</div> </div>
@@ -103,8 +106,10 @@ function TopView({
/** /**
* Standard marketing / app top nav. * Standard marketing / app top nav.
* Figma: "Navigation / Top" (Community-Rule-System, node 22078-808559). * Figma: "Navigation / Top" (Community-Rule-System, node 22078-808559).
* Three columns so the logo cannot paint over the nav cluster (no absolute * Below md: auto | 1fr | auto so the logo cannot paint over the cluster.
* overlay, no reserved 200px hit box below `lg`). * From md: 1fr | auto | 1fr so the cluster sits on the same page midline
* as Folder-top (Create rule is wider than the logo, so a leftover-column
* center sits off-center).
*/ */
return ( return (
<> <>
@@ -118,11 +123,11 @@ function TopView({
aria-label={t("ariaLabels.mainNavigationHeader")} aria-label={t("ariaLabels.mainNavigationHeader")}
> >
<nav <nav
className="grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center px-[var(--spacing-scale-016)] py-[var(--spacing-scale-008)] sm:px-[var(--spacing-measures-spacing-016)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-scale-016)]" className="grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center px-[var(--spacing-scale-016)] py-[var(--spacing-scale-008)] sm:px-[var(--spacing-measures-spacing-016)] md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-scale-016)]"
role="navigation" role="navigation"
aria-label={t("ariaLabels.mainNavigation")} aria-label={t("ariaLabels.mainNavigation")}
> >
<div className="min-w-0 shrink-0 lg:w-[200px] lg:max-w-[200px]" data-top="logo"> <div className="min-w-0 shrink-0 justify-self-start lg:w-[200px] lg:max-w-[200px]" data-top="logo">
<Logo <Logo
size={logoSize} size={logoSize}
wordmark wordmark
@@ -143,7 +148,7 @@ function TopView({
</div> </div>
<div <div
className="flex shrink-0 items-center gap-[var(--spacing-scale-004)] md:gap-[var(--spacing-measures-spacing-010)] lg:gap-[var(--spacing-measures-spacing-004)]" className="flex shrink-0 items-center justify-self-end gap-[var(--spacing-scale-004)] md:gap-[var(--spacing-measures-spacing-010)] lg:gap-[var(--spacing-measures-spacing-004)]"
data-top="auth" data-top="auth"
> >
{loginControl} {loginControl}
app/globals.css
-23
View File
@@ -58,26 +58,3 @@ body {
background-color: black; background-color: black;
min-height: 100vh; min-height: 100vh;
} }
/* Skip link: parked above the viewport until focused. */
.skip-to-content {
position: absolute;
left: var(--spacing-scale-016);
top: var(--spacing-scale-016);
z-index: 100;
padding: var(--spacing-scale-012) var(--spacing-scale-016);
border-radius: var(--radius-measures-radius-full);
background-color: var(--color-surface-inverse-primary);
color: var(--color-content-inverse-primary);
text-decoration: none;
outline: none;
cursor: pointer;
box-shadow:
0 0 0 2px var(--color-border-default-primary),
0 0 0 4px var(--color-border-invert-primary);
transform: translateY(-200%);
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
transform: translateY(0);
}
app/tailwind.css
+27
View File
@@ -45,6 +45,33 @@
background: #292d32; background: #292d32;
} }
/*
* Must live in this file (same sheet as `@import "tailwindcss"`). Rules in
* `globals.css` after that import never reach the browser.
* Parked above the viewport until focused so it does not add header offset.
*/
.skip-to-content {
position: absolute;
left: var(--spacing-scale-016);
top: var(--spacing-scale-016);
z-index: 100;
padding: var(--spacing-scale-012) var(--spacing-scale-016);
border-radius: var(--radius-measures-radius-full);
background-color: var(--color-surface-inverse-primary);
color: var(--color-content-inverse-primary);
text-decoration: none;
outline: none;
cursor: pointer;
box-shadow:
0 0 0 2px var(--color-border-default-primary),
0 0 0 4px var(--color-border-invert-primary);
transform: translateY(-200%);
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
transform: translateY(0);
}
@theme inline { @theme inline {
/* Custom breakpoints */ /* Custom breakpoints */
--breakpoint-xsm: 429px; --breakpoint-xsm: 429px;
tests/components/Logo.test.tsx
+6
View File
@@ -79,6 +79,12 @@ describe("Logo (behavioral tests)", () => {
expect(row?.className).toContain("h-[var(--spacing-scale-040)]"); expect(row?.className).toContain("h-[var(--spacing-scale-040)]");
}); });
it("shows the folder-top wordmark without a breakpoint hide", () => {
render(<Logo size="topNavFolderTop" wordmark />);
const wordmark = screen.getByText("CommunityRule");
expect(wordmark.className).not.toMatch(/\bhidden\b/);
});
it("renders with different size variants", () => { it("renders with different size variants", () => {
const { rerender } = render(<Logo size="default" />); const { rerender } = render(<Logo size="default" />);
expect(screen.getByRole("link")).toBeInTheDocument(); expect(screen.getByRole("link")).toBeInTheDocument();
tests/components/Top.test.tsx
+33
View File
@@ -172,7 +172,40 @@ describe("Top header chrome", () => {
renderWithProviders(<Top folderTop={false} loggedIn />); renderWithProviders(<Top folderTop={false} loggedIn />);
const logo = document.querySelector("[data-top='logo']"); const logo = document.querySelector("[data-top='logo']");
const nav = document.querySelector("[data-top='nav']"); const nav = document.querySelector("[data-top='nav']");
const headerNav = document.querySelector("header nav");
expect(logo?.className).not.toMatch(/\bz-20\b/); expect(logo?.className).not.toMatch(/\bz-20\b/);
expect(nav?.className).not.toMatch(/\babsolute\b/); expect(nav?.className).not.toMatch(/\babsolute\b/);
expect(headerNav?.className).toContain(
"md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]",
);
});
it("hugs the home folder tab below md and page-centers nav from md", () => {
renderWithProviders(<Top folderTop />);
const tab = document.querySelector(".HeaderTab");
const nav = document.querySelector("[data-top='nav']");
expect(tab?.className).toContain("w-fit");
expect(tab?.className).toContain("sm:w-auto");
expect(tab?.className).toContain("sm:flex-1");
expect(nav?.className).toContain("md:absolute");
expect(nav?.className).toContain(
"md:left-[calc(50vw-var(--spacing-scale-016))]",
);
expect(nav?.className).not.toContain("ml-auto");
});
it("keeps a single home nav cluster and shows the folder wordmark", () => {
renderWithProviders(<Top folderTop />);
expect(
screen.getAllByRole("menuitem", {
name: /navigate to use cases page/i,
hidden: true,
}),
).toHaveLength(1);
const wordmark = screen.getByText("CommunityRule");
expect(wordmark.className).not.toMatch(/\bhidden\b/);
expect(
screen.getByRole("button", { name: /create a new rule/i }).className,
).toContain("md:text-x-small-label");
}); });
}); });