Footer fix
This commit is contained in:
@@ -25,7 +25,7 @@ const Footer = memo(() => {
|
|||||||
/** Figma 18411:62925 (1024+): org name is one line, `w-full whitespace-nowrap`. */
|
/** Figma 18411:62925 (1024+): org name is one line, `w-full whitespace-nowrap`. */
|
||||||
const orgNameClass = `${bodyTextClass} lg:whitespace-nowrap`;
|
const orgNameClass = `${bodyTextClass} lg:whitespace-nowrap`;
|
||||||
|
|
||||||
const primaryLinkClass = `inline-flex w-fit max-w-full shrink-0 whitespace-nowrap self-start md:self-end text-[var(--color-content-default-primary)] font-inter text-base font-medium leading-5 tracking-[0%] ${linkFocusClass} p-2 -m-2 cursor-pointer lg:text-2xl lg:font-normal lg:leading-7`;
|
const primaryLinkClass = `inline-flex w-fit max-w-full shrink-0 whitespace-nowrap self-start md:ml-auto md:self-end text-left md:text-right md:justify-end text-[var(--color-content-default-primary)] font-inter text-base font-medium leading-5 tracking-[0%] ${linkFocusClass} p-2 -m-2 cursor-pointer lg:text-2xl lg:font-normal lg:leading-7`;
|
||||||
|
|
||||||
/** Figma 18411:62944: 40px gaps, w-[396px] link block; `p-2` on links overruns 396px—tighten x at `md+` row. */
|
/** Figma 18411:62944: 40px gaps, w-[396px] link block; `p-2` on links overruns 396px—tighten x at `md+` row. */
|
||||||
const legalLinkClass = `inline-flex w-fit max-w-full self-start text-[var(--color-content-default-secondary)] font-inter text-sm font-normal leading-5 tracking-[0%] ${linkFocusClass} p-2 -m-2 cursor-pointer underline decoration-solid [text-decoration-skip-ink:none] md:self-auto md:px-0 md:py-1 md:mx-0 md:text-xs md:leading-4 md:whitespace-nowrap md:no-underline md:text-[var(--color-content-default-primary)] lg:text-sm lg:leading-5 lg:text-[var(--color-content-default-primary)]`;
|
const legalLinkClass = `inline-flex w-fit max-w-full self-start text-[var(--color-content-default-secondary)] font-inter text-sm font-normal leading-5 tracking-[0%] ${linkFocusClass} p-2 -m-2 cursor-pointer underline decoration-solid [text-decoration-skip-ink:none] md:self-auto md:px-0 md:py-1 md:mx-0 md:text-xs md:leading-4 md:whitespace-nowrap md:no-underline md:text-[var(--color-content-default-primary)] lg:text-sm lg:leading-5 lg:text-[var(--color-content-default-primary)]`;
|
||||||
@@ -148,30 +148,22 @@ const Footer = memo(() => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Figma 18411:62937: column on the right, labels text-right at md+. Mobile stays start-aligned. */}
|
||||||
<nav
|
<nav
|
||||||
aria-label={tChrome("footerAriaLabel")}
|
aria-label={tChrome("footerAriaLabel")}
|
||||||
className="order-1 flex w-full max-w-full flex-col
|
className="order-1 flex w-full max-w-full flex-col
|
||||||
items-start
|
items-start
|
||||||
gap-[var(--spacing-scale-032)]
|
gap-[var(--spacing-scale-032)]
|
||||||
md:order-2 md:w-auto md:items-end md:text-right
|
md:order-2 md:ml-auto md:w-auto md:items-end md:text-right
|
||||||
md:gap-[var(--spacing-scale-032)]"
|
md:gap-[var(--spacing-scale-032)]"
|
||||||
>
|
>
|
||||||
<Link
|
<Link href="/use-cases" className={primaryLinkClass}>
|
||||||
href="/use-cases"
|
|
||||||
className={`text-left ${primaryLinkClass} md:text-right`}
|
|
||||||
>
|
|
||||||
{t("navigation.useCases")}
|
{t("navigation.useCases")}
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link href="/learn" className={primaryLinkClass}>
|
||||||
href="/learn"
|
|
||||||
className={`text-left ${primaryLinkClass} md:text-right`}
|
|
||||||
>
|
|
||||||
{t("navigation.learn")}
|
{t("navigation.learn")}
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link href="/about" className={primaryLinkClass}>
|
||||||
href="/about"
|
|
||||||
className={`text-left ${primaryLinkClass} md:text-right`}
|
|
||||||
>
|
|
||||||
{t("navigation.about")}
|
{t("navigation.about")}
|
||||||
</Link>
|
</Link>
|
||||||
</nav>
|
</nav>
|
||||||
@@ -196,7 +188,13 @@ const Footer = memo(() => {
|
|||||||
md:text-xs md:leading-4
|
md:text-xs md:leading-4
|
||||||
lg:text-sm lg:leading-5"
|
lg:text-sm lg:leading-5"
|
||||||
>
|
>
|
||||||
{t("copyright")}
|
<a
|
||||||
|
href={t("license.href")}
|
||||||
|
rel="license"
|
||||||
|
className={`${linkFocusClass} p-2 -m-2 cursor-pointer`}
|
||||||
|
>
|
||||||
|
{t("license.label")}
|
||||||
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<div
|
<div
|
||||||
className="flex w-full min-w-0 flex-col flex-wrap
|
className="flex w-full min-w-0 flex-col flex-wrap
|
||||||
|
|||||||
@@ -36,5 +36,9 @@
|
|||||||
"cookiesSettings": "Cookies Settings",
|
"cookiesSettings": "Cookies Settings",
|
||||||
"cookiesSettingsHref": "#"
|
"cookiesSettingsHref": "#"
|
||||||
},
|
},
|
||||||
"copyright": "© All right reserved"
|
"license": {
|
||||||
|
"_comment": "Replaces Figma's '© All right reserved'. Covers user-facing content (guides, template copy, marketing) per README — not GPL-3.0 application source. Published user-authored rules are a separate grant.",
|
||||||
|
"label": "Content licensed under CC BY-SA 4.0",
|
||||||
|
"href": "https://creativecommons.org/licenses/by-sa/4.0/"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -77,8 +77,37 @@ describe("Footer (behavioral tests)", () => {
|
|||||||
it("renders navigation links with baseline width-fit focus targets", () => {
|
it("renders navigation links with baseline width-fit focus targets", () => {
|
||||||
render(<Footer />);
|
render(<Footer />);
|
||||||
const useCases = screen.getAllByRole("link", { name: "Use cases" })[0];
|
const useCases = screen.getAllByRole("link", { name: "Use cases" })[0];
|
||||||
expect(useCases).toHaveClass("w-fit", "self-start", "md:self-end");
|
expect(useCases).toHaveClass(
|
||||||
|
"w-fit",
|
||||||
|
"self-start",
|
||||||
|
"text-left",
|
||||||
|
"md:ml-auto",
|
||||||
|
"md:self-end",
|
||||||
|
"md:text-right",
|
||||||
|
"md:justify-end",
|
||||||
|
);
|
||||||
expect(useCases).not.toHaveClass("w-full");
|
expect(useCases).not.toHaveClass("w-full");
|
||||||
|
const nav = screen.getByRole("navigation", { name: "Footer" });
|
||||||
|
expect(nav).toHaveClass(
|
||||||
|
"items-start",
|
||||||
|
"md:ml-auto",
|
||||||
|
"md:w-auto",
|
||||||
|
"md:items-end",
|
||||||
|
"md:text-right",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("renders a CC BY-SA 4.0 license link instead of an all-rights-reserved notice", () => {
|
||||||
|
render(<Footer />);
|
||||||
|
const license = screen.getAllByRole("link", {
|
||||||
|
name: "Content licensed under CC BY-SA 4.0",
|
||||||
|
})[0];
|
||||||
|
expect(license).toHaveAttribute(
|
||||||
|
"href",
|
||||||
|
"https://creativecommons.org/licenses/by-sa/4.0/",
|
||||||
|
);
|
||||||
|
expect(license).toHaveAttribute("rel", "license");
|
||||||
|
expect(screen.queryByText(/all right reserved/i)).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("renders legal links", () => {
|
it("renders legal links", () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user