Update Rule Stack component and tests
This commit is contained in:
adilallo
@@ -29,15 +29,22 @@ export function RuleCardView({
|
||||
const isSmall = size === "S";
|
||||
const isExtraSmall = size === "XS";
|
||||
|
||||
// Card dimensions - fixed width for expanded states (568px for L, 398px for M per Figma)
|
||||
// XS and S don't have fixed widths when expanded
|
||||
const cardPadding = isLarge || isSmall
|
||||
// Card dimensions - use CSS classes from className if provided, otherwise use size-based logic
|
||||
// Check if className already has padding/gap classes
|
||||
const hasResponsivePadding = className?.includes("p-[") || className?.includes("px-[") || className?.includes("py-[") || className?.includes("pt-[") || className?.includes("pb-[");
|
||||
const hasResponsiveGap = className?.includes("gap-[");
|
||||
|
||||
const cardPadding = hasResponsivePadding
|
||||
? "" // If className has responsive padding, don't add size-based padding
|
||||
: isLarge || isSmall
|
||||
? "p-[24px]"
|
||||
: isMedium
|
||||
? "p-[16px]"
|
||||
: "pb-[24px] pt-[12px] px-[12px]"; // XS: asymmetric padding
|
||||
const cardGap = expanded
|
||||
? "gap-[16px]"
|
||||
: hasResponsiveGap
|
||||
? "" // If className has responsive gap, don't add size-based gap
|
||||
: isLarge
|
||||
? "gap-[10px]"
|
||||
: isMedium
|
||||
@@ -51,32 +58,24 @@ export function RuleCardView({
|
||||
: "" // XS and S: no fixed width
|
||||
: "";
|
||||
|
||||
// Logo/Icon dimensions
|
||||
// Logo/Icon dimensions - use CSS responsive classes
|
||||
// For S: 80px container with 12px padding = 56px icon area
|
||||
// For XS: 40px container with 16px padding = 8px icon area (very small, but matches Figma)
|
||||
const logoSize = isLarge
|
||||
? 103
|
||||
: isMedium
|
||||
? 56
|
||||
: isSmall
|
||||
? 56 // S: 80px container - 12px padding * 2 = 56px icon
|
||||
: 8; // XS: 40px container - 16px padding * 2 = 8px icon
|
||||
const logoContainerClass = isLarge
|
||||
? "size-[103px]"
|
||||
: isMedium
|
||||
? "size-[56px]"
|
||||
: isSmall
|
||||
? "size-[80px]" // S: 80px container
|
||||
: "size-[40px]"; // XS: 40px container
|
||||
// For XS: 72px container with 16px padding = 40px icon (72 - 16*2 = 40px)
|
||||
const logoSize = 103; // Use max size, CSS will resize
|
||||
const logoContainerClass = `
|
||||
max-[639px]:size-[72px]
|
||||
min-[640px]:max-[1023px]:size-[80px]
|
||||
min-[1024px]:max-[1439px]:size-[56px]
|
||||
min-[1440px]:size-[103px]
|
||||
`;
|
||||
|
||||
// Title typography
|
||||
const titleClass = isLarge
|
||||
? "font-bricolage-grotesque font-extrabold text-[36px] leading-[44px]"
|
||||
: isMedium
|
||||
? "font-bricolage-grotesque font-bold text-[24px] leading-[32px]"
|
||||
: isSmall
|
||||
? "font-bricolage-grotesque font-bold text-[28px] leading-[36px]" // S: 28px, bold, Bricolage
|
||||
: "font-inter font-bold text-[20px] leading-[28px]"; // XS: 20px, bold, Inter
|
||||
// Title typography - use CSS responsive classes
|
||||
const titleClass = `
|
||||
max-[639px]:font-inter max-[639px]:font-bold max-[639px]:text-[20px] max-[639px]:leading-[28px]
|
||||
min-[640px]:max-[1023px]:font-bricolage-grotesque min-[640px]:max-[1023px]:font-bold min-[640px]:max-[1023px]:text-[28px] min-[640px]:max-[1023px]:leading-[36px]
|
||||
min-[1024px]:max-[1439px]:font-bricolage-grotesque min-[1024px]:max-[1439px]:font-bold min-[1024px]:max-[1439px]:text-[24px] min-[1024px]:max-[1439px]:leading-[32px]
|
||||
min-[1440px]:font-bricolage-grotesque min-[1440px]:font-extrabold min-[1440px]:text-[36px] min-[1440px]:leading-[44px]
|
||||
`;
|
||||
|
||||
// Description typography
|
||||
const descriptionClass = isLarge
|
||||
@@ -93,7 +92,7 @@ export function RuleCardView({
|
||||
// Check if it's a localhost URL or external URL that needs regular img tag
|
||||
const isLocalhost = logoUrl.startsWith("http://localhost") || logoUrl.startsWith("https://localhost");
|
||||
|
||||
const containerClass = `${logoContainerClass} relative rounded-full overflow-hidden mix-blend-luminosity ${isSmall ? "p-[12px]" : isExtraSmall ? "p-[16px]" : ""}`;
|
||||
const containerClass = `${logoContainerClass} relative rounded-full overflow-hidden mix-blend-luminosity max-[639px]:p-[16px] min-[640px]:max-[1023px]:p-[12px]`;
|
||||
|
||||
if (isLocalhost) {
|
||||
return (
|
||||
@@ -104,7 +103,7 @@ export function RuleCardView({
|
||||
alt={logoAlt || title}
|
||||
width={logoSize}
|
||||
height={logoSize}
|
||||
className={`${isSmall || isExtraSmall ? "w-full h-full" : "absolute inset-0 w-full h-full"} object-cover rounded-full`}
|
||||
className="w-full h-full object-cover rounded-full"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@@ -117,7 +116,7 @@ export function RuleCardView({
|
||||
alt={logoAlt || title}
|
||||
width={logoSize}
|
||||
height={logoSize}
|
||||
className={`${isSmall || isExtraSmall ? "w-full h-full" : "absolute inset-0 w-full h-full"} object-cover rounded-full`}
|
||||
className="w-full h-full object-cover rounded-full"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@@ -125,20 +124,19 @@ export function RuleCardView({
|
||||
|
||||
if (icon) {
|
||||
return (
|
||||
<div className={`${logoContainerClass} flex items-center justify-center ${isSmall ? "p-[12px]" : isExtraSmall ? "p-[16px]" : ""}`}>
|
||||
<div className={`${logoContainerClass} flex items-center justify-center max-[639px]:p-[16px] min-[640px]:max-[1023px]:p-[12px]`}>
|
||||
{icon}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (communityInitials) {
|
||||
const initialsSize = isLarge
|
||||
? "text-[36px]"
|
||||
: isMedium
|
||||
? "text-[24px]"
|
||||
: isSmall
|
||||
? "text-[20px]"
|
||||
: "text-[16px]";
|
||||
const initialsSize = `
|
||||
max-[639px]:text-[16px]
|
||||
min-[640px]:max-[1023px]:text-[20px]
|
||||
min-[1024px]:max-[1439px]:text-[24px]
|
||||
min-[1440px]:text-[36px]
|
||||
`;
|
||||
return (
|
||||
<div className={`${logoContainerClass} rounded-full bg-[var(--color-surface-default-primary)] flex items-center justify-center`}>
|
||||
<span className={`${initialsSize} font-bricolage-grotesque font-bold text-[var(--color-content-default-primary,white)]`}>
|
||||
@@ -152,9 +150,18 @@ export function RuleCardView({
|
||||
};
|
||||
|
||||
|
||||
// Border radius - use CSS classes if provided via className, otherwise use size-based logic
|
||||
const borderRadiusClass = className?.includes("rounded-")
|
||||
? "" // If className already has border radius, don't add size-based one
|
||||
: isExtraSmall
|
||||
? "rounded-[var(--measures-radius-200,8px)]"
|
||||
: isSmall
|
||||
? "rounded-[var(--measures-radius-300,12px)]"
|
||||
: "rounded-[var(--radius-measures-radius-small)]";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${backgroundColor} ${cardPadding} ${cardGap} ${isExtraSmall ? "rounded-[var(--measures-radius-200,8px)]" : isSmall ? "rounded-[var(--measures-radius-300,12px)]" : "rounded-[var(--radius-measures-radius-small)]"} shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] hover:shadow-[0px_0px_64px_0px_rgba(0,0,0,0.15)] transition-shadow duration-200 flex flex-col items-start justify-center relative ${cardWidth || "w-full"} ${className}`}
|
||||
className={`${backgroundColor} ${cardPadding} ${cardGap} ${borderRadiusClass} shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] hover:shadow-[0px_0px_64px_0px_rgba(0,0,0,0.15)] transition-shadow duration-200 flex flex-col items-start justify-center relative ${cardWidth || "w-full"} ${className || ""}`}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
aria-label={ariaLabel}
|
||||
@@ -163,20 +170,45 @@ export function RuleCardView({
|
||||
onKeyDown={onKeyDown}
|
||||
>
|
||||
{/* Outermost container with bottom border - taller to match Figma */}
|
||||
<div className={`border-b border-black border-solid flex items-center relative shrink-0 w-full ${isLarge ? "h-[136px]" : isMedium ? "h-[88px]" : isSmall ? "h-[80px]" : "h-[40px]"}`}>
|
||||
<div className={`
|
||||
border-b border-black border-solid flex items-center relative shrink-0 w-full
|
||||
max-[639px]:h-[72px]
|
||||
min-[640px]:max-[1023px]:h-[80px]
|
||||
min-[1024px]:max-[1439px]:h-[88px]
|
||||
min-[1440px]:h-[136px]
|
||||
`}>
|
||||
{/* Logo/Icon - fixed width/height, vertically centered, does not touch bottom */}
|
||||
{renderLogo() && (
|
||||
<div className={`flex items-center justify-center shrink-0 ${isLarge ? "w-[103px] h-[103px]" : isMedium ? "w-[56px] h-[56px]" : isSmall ? "w-[80px] h-[80px]" : "w-[40px] h-[40px]"} ${isSmall || isExtraSmall ? "border-r border-black border-solid" : ""}`}>
|
||||
<div className={`
|
||||
flex items-center justify-center shrink-0
|
||||
max-[639px]:w-[72px] max-[639px]:h-[72px] max-[639px]:border-r max-[639px]:border-black max-[639px]:border-solid
|
||||
min-[640px]:max-[1023px]:w-[80px] min-[640px]:max-[1023px]:h-[80px] min-[640px]:max-[1023px]:border-r min-[640px]:max-[1023px]:border-black min-[640px]:max-[1023px]:border-solid
|
||||
min-[1024px]:max-[1439px]:w-[56px] min-[1024px]:max-[1439px]:h-[56px]
|
||||
min-[1440px]:w-[103px] min-[1440px]:h-[103px]
|
||||
`}>
|
||||
{renderLogo()}
|
||||
</div>
|
||||
)}
|
||||
{/* Spacing between icon and title */}
|
||||
{!isSmall && !isExtraSmall && <div className="w-[16px] shrink-0" />}
|
||||
<div className="
|
||||
max-[1023px]:hidden
|
||||
min-[1024px]:w-[16px] min-[1024px]:shrink-0
|
||||
" />
|
||||
{/* Container with no padding and left border - extends full height to touch bottom */}
|
||||
{title && (
|
||||
<div className={`${!isSmall && !isExtraSmall ? "border-l border-black border-solid" : ""} flex-1 min-w-0 h-full flex`}>
|
||||
<div className={`
|
||||
flex-1 min-w-0 h-full flex
|
||||
max-[1023px]:border-0
|
||||
min-[1024px]:border-l min-[1024px]:border-black min-[1024px]:border-solid
|
||||
`}>
|
||||
{/* Inner container for header text with padding */}
|
||||
<div className={`flex ${isLarge ? "px-[16px] py-[24px]" : isMedium ? "px-[16px] py-[12px]" : isSmall ? "pl-[12px] py-[12px]" : "pl-[8px] py-[8px]"} items-center justify-center w-full`}>
|
||||
<div className={`
|
||||
flex items-center justify-center w-full
|
||||
max-[639px]:pl-[8px] max-[639px]:py-[8px]
|
||||
min-[640px]:max-[1023px]:pl-[12px] min-[640px]:max-[1023px]:py-[12px]
|
||||
min-[1024px]:max-[1439px]:px-[16px] min-[1024px]:max-[1439px]:py-[12px]
|
||||
min-[1440px]:px-[16px] min-[1440px]:py-[24px]
|
||||
`}>
|
||||
<h3 className={`${titleClass} text-black overflow-hidden text-ellipsis w-full`}>
|
||||
{title}
|
||||
</h3>
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
import { useTranslation } from "../../contexts/MessagesContext";
|
||||
import { useMediaQuery } from "../../hooks/useMediaQuery";
|
||||
import RuleCard from "../RuleCard";
|
||||
import SectionHeader from "../SectionHeader";
|
||||
import Button from "../Button";
|
||||
import { getAssetPath } from "../../../lib/assetUtils";
|
||||
import type { RuleStackViewProps } from "./RuleStack.types";
|
||||
@@ -12,78 +15,153 @@ export function RuleStackView({
|
||||
onTemplateClick,
|
||||
}: RuleStackViewProps) {
|
||||
const t = useTranslation("pages.home.ruleStack");
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
|
||||
// Debug: Log button text to ensure translation works
|
||||
const buttonText = t("button.seeAllTemplates");
|
||||
|
||||
// Determine current breakpoint for RuleCard size
|
||||
// 320-639: XS, 640-767: S, 768-1023: S, 1024-1439: M, 1440+: L
|
||||
const isMax639 = useMediaQuery("(max-width: 639px)");
|
||||
const isMin640Max1023 = useMediaQuery("(min-width: 640px) and (max-width: 1023px)");
|
||||
const isMin1024Max1439 = useMediaQuery("(min-width: 1024px) and (max-width: 1439px)");
|
||||
const isMin1440 = useMediaQuery("(min-width: 1440px)");
|
||||
|
||||
// Handle hydration: only use media queries after mount
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
}, []);
|
||||
|
||||
// Use CSS classes for responsive sizing to avoid hydration mismatch
|
||||
// Default to M size for SSR, then let CSS handle the responsive sizing
|
||||
const cardSize = isMounted
|
||||
? isMax639
|
||||
? "XS"
|
||||
: isMin640Max1023
|
||||
? "S"
|
||||
: isMin1024Max1439
|
||||
? "M"
|
||||
: isMin1440
|
||||
? "L"
|
||||
: "M"
|
||||
: "M";
|
||||
|
||||
// Icon sizes: XS=40px, S=56px, M=56px, L=90px
|
||||
// Use a large default (90px) and let CSS handle responsive sizing
|
||||
const iconSize = 90;
|
||||
|
||||
// Card data
|
||||
const cards = [
|
||||
{
|
||||
title: t("cards.consensusClusters.title"),
|
||||
description: t("cards.consensusClusters.description"),
|
||||
iconAlt: t("cards.consensusClusters.iconAlt"),
|
||||
iconPath: "assets/Icon_Sociocracy.svg",
|
||||
backgroundColor: "bg-[var(--color-surface-default-brand-lime)]",
|
||||
},
|
||||
{
|
||||
title: t("cards.consensus.title"),
|
||||
description: t("cards.consensus.description"),
|
||||
iconAlt: t("cards.consensus.iconAlt"),
|
||||
iconPath: "assets/Icon_Consensus.svg",
|
||||
backgroundColor: "bg-[var(--color-surface-default-brand-rust)]",
|
||||
},
|
||||
{
|
||||
title: t("cards.electedBoard.title"),
|
||||
description: t("cards.electedBoard.description"),
|
||||
iconAlt: t("cards.electedBoard.iconAlt"),
|
||||
iconPath: "assets/Icon_ElectedBoard.svg",
|
||||
backgroundColor: "bg-[var(--color-surface-default-brand-red)]",
|
||||
},
|
||||
{
|
||||
title: t("cards.petition.title"),
|
||||
description: t("cards.petition.description"),
|
||||
iconAlt: t("cards.petition.iconAlt"),
|
||||
iconPath: "assets/Icon_Petition.svg",
|
||||
backgroundColor: "bg-[var(--color-surface-default-brand-teal)]",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section
|
||||
className={`w-full bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:py-[var(--spacing-scale-048)] md:px-[var(--spacing-scale-032)] xmd:py-[var(--spacing-scale-056)] xmd:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-064)] xl:px-[var(--spacing-scale-096)] flex flex-col gap-[var(--spacing-scale-024)] xmd:gap-[var(--spacing-scale-032)] lg:gap-[var(--spacing-scale-040)] ${className}`}
|
||||
className={`
|
||||
w-full bg-transparent flex flex-col
|
||||
px-[20px] py-[32px]
|
||||
min-[640px]:px-[32px] min-[640px]:py-[48px]
|
||||
min-[768px]:py-[56px]
|
||||
min-[1024px]:px-[64px] min-[1024px]:py-[64px]
|
||||
min-[1440px]:px-[96px]
|
||||
gap-[24px]
|
||||
min-[640px]:gap-[32px]
|
||||
min-[1024px]:gap-[40px]
|
||||
${className}
|
||||
`}
|
||||
>
|
||||
<div className="flex flex-col gap-[18px] xmd:grid xmd:grid-cols-2 lg:gap-[var(--spacing-scale-024)]">
|
||||
<RuleCard
|
||||
title={t("cards.consensusClusters.title")}
|
||||
description={t("cards.consensusClusters.description")}
|
||||
icon={
|
||||
<Image
|
||||
src={getAssetPath("assets/Icon_Sociocracy.svg")}
|
||||
alt={t("cards.consensusClusters.iconAlt")}
|
||||
width={40}
|
||||
height={40}
|
||||
className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
|
||||
/>
|
||||
}
|
||||
backgroundColor="bg-[var(--color-surface-default-brand-lime)]"
|
||||
onClick={() => onTemplateClick(t("cards.consensusClusters.title"))}
|
||||
/>
|
||||
<RuleCard
|
||||
title={t("cards.consensus.title")}
|
||||
description={t("cards.consensus.description")}
|
||||
icon={
|
||||
<Image
|
||||
src={getAssetPath("assets/Icon_Consensus.svg")}
|
||||
alt={t("cards.consensus.iconAlt")}
|
||||
width={40}
|
||||
height={40}
|
||||
className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
|
||||
/>
|
||||
}
|
||||
backgroundColor="bg-[var(--color-surface-default-brand-rust)]"
|
||||
onClick={() => onTemplateClick(t("cards.consensus.title"))}
|
||||
/>
|
||||
<RuleCard
|
||||
title={t("cards.electedBoard.title")}
|
||||
description={t("cards.electedBoard.description")}
|
||||
icon={
|
||||
<Image
|
||||
src={getAssetPath("assets/Icon_ElectedBoard.svg")}
|
||||
alt={t("cards.electedBoard.iconAlt")}
|
||||
width={40}
|
||||
height={40}
|
||||
className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
|
||||
/>
|
||||
}
|
||||
backgroundColor="bg-[var(--color-surface-default-brand-red)]"
|
||||
onClick={() => onTemplateClick(t("cards.electedBoard.title"))}
|
||||
/>
|
||||
<RuleCard
|
||||
title={t("cards.petition.title")}
|
||||
description={t("cards.petition.description")}
|
||||
icon={
|
||||
<Image
|
||||
src={getAssetPath("assets/Icon_Petition.svg")}
|
||||
alt={t("cards.petition.iconAlt")}
|
||||
width={40}
|
||||
height={40}
|
||||
className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
|
||||
/>
|
||||
}
|
||||
backgroundColor="bg-[var(--color-surface-default-brand-teal)]"
|
||||
onClick={() => onTemplateClick(t("cards.petition.title"))}
|
||||
/>
|
||||
{/* Section Header */}
|
||||
<SectionHeader
|
||||
title={t("title")}
|
||||
subtitle={t("subtitle")}
|
||||
variant="multi-line"
|
||||
/>
|
||||
|
||||
{/* Cards Container */}
|
||||
<div
|
||||
className={`
|
||||
flex flex-col gap-[18px]
|
||||
min-[768px]:grid min-[768px]:grid-cols-2 min-[768px]:gap-[18px]
|
||||
min-[1024px]:gap-[24px]
|
||||
`}
|
||||
>
|
||||
{cards.map((card, index) => (
|
||||
<RuleCard
|
||||
key={index}
|
||||
title={card.title}
|
||||
description={card.description}
|
||||
size={cardSize}
|
||||
className="
|
||||
max-[639px]:rounded-[var(--measures-radius-200,8px)]
|
||||
min-[640px]:max-[1023px]:rounded-[var(--measures-radius-300,12px)]
|
||||
min-[1024px]:rounded-[var(--radius-measures-radius-small)]
|
||||
max-[639px]:pb-[24px] max-[639px]:pt-[12px] max-[639px]:px-[12px]
|
||||
min-[640px]:max-[1023px]:p-[24px]
|
||||
min-[1024px]:max-[1439px]:p-[16px]
|
||||
min-[1440px]:p-[24px]
|
||||
max-[1023px]:gap-[18px]
|
||||
min-[1024px]:max-[1439px]:gap-[12px]
|
||||
min-[1440px]:gap-[10px]
|
||||
"
|
||||
icon={
|
||||
<Image
|
||||
src={getAssetPath(card.iconPath)}
|
||||
alt={card.iconAlt}
|
||||
width={90}
|
||||
height={90}
|
||||
className="
|
||||
max-[639px]:w-[40px] max-[639px]:h-[40px]
|
||||
min-[640px]:max-[1023px]:w-[56px] min-[640px]:max-[1023px]:h-[56px]
|
||||
min-[1024px]:max-[1439px]:w-[56px] min-[1024px]:max-[1439px]:h-[56px]
|
||||
min-[1440px]:w-[90px] min-[1440px]:h-[90px]
|
||||
"
|
||||
/>
|
||||
}
|
||||
backgroundColor={card.backgroundColor}
|
||||
onClick={() => onTemplateClick(card.title)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* See all templates button */}
|
||||
<div className="flex justify-center">
|
||||
<Button variant="outline" size="large">
|
||||
{t("button.seeAllTemplates")}
|
||||
<div className="
|
||||
flex justify-center w-full
|
||||
max-[767px]:mt-[var(--measures-spacing-600,24px)]
|
||||
min-[768px]:max-[1023px]:mt-[var(--measures-spacing-800,32px)]
|
||||
min-[1024px]:mt-[var(--measures-spacing-1000,40px)]
|
||||
">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="large"
|
||||
>
|
||||
{buttonText}
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -54,6 +54,9 @@
|
||||
"buttonHref": "#contact"
|
||||
},
|
||||
"ruleStack": {
|
||||
"title": "Popular templates",
|
||||
"subtitle": "These are popular patterns for making decisions in mutual aid and open source communities. You can use them as they are or as a starting place for customizing your own CommunityRule.",
|
||||
"subtitleLg": "These are popular patterns for making decisions in communities with egalitarian values. You can use them as they are or as a starting place for customizing your own CommunityRule.",
|
||||
"cards": {
|
||||
"consensusClusters": {
|
||||
"title": "Consensus clusters",
|
||||
|
||||
@@ -251,7 +251,8 @@ describe("User Journey Integration", () => {
|
||||
|
||||
// 3. User sees governance options - wait for dynamically imported component
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Consensus clusters")).toBeInTheDocument();
|
||||
// Use a more flexible matcher in case text is split across elements
|
||||
expect(screen.getByText(/Consensus clusters/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// 4. User sees features and benefits - wait for dynamically imported component
|
||||
|
||||
@@ -147,7 +147,9 @@ describe("RuleCard Component", () => {
|
||||
render(<RuleCard {...defaultProps} size="L" />);
|
||||
|
||||
const heading = screen.getByRole("heading", { level: 3 });
|
||||
expect(heading).toHaveClass("font-bricolage-grotesque", "font-extrabold");
|
||||
// Check for responsive font classes - at 1440px+ it should have font-bricolage-grotesque and font-extrabold
|
||||
expect(heading?.className).toMatch(/min-\[1440px\]:font-bricolage-grotesque/);
|
||||
expect(heading?.className).toMatch(/min-\[1440px\]:font-extrabold/);
|
||||
});
|
||||
|
||||
it("renders expanded state with categories", () => {
|
||||
|
||||
@@ -74,17 +74,17 @@ describe("RuleStack Component", () => {
|
||||
render(<RuleStack />);
|
||||
|
||||
const section = document.querySelector("section");
|
||||
expect(section).toHaveClass(
|
||||
"py-[var(--spacing-scale-032)]",
|
||||
"px-[var(--spacing-scale-020)]",
|
||||
);
|
||||
// Check for responsive padding classes
|
||||
expect(section).toHaveClass("px-[20px]", "py-[32px]");
|
||||
expect(section?.className).toMatch(/min-\[640px\]:px-\[32px\]/);
|
||||
expect(section?.className).toMatch(/min-\[640px\]:py-\[48px\]/);
|
||||
});
|
||||
|
||||
test("applies responsive grid layout", () => {
|
||||
render(<RuleStack />);
|
||||
|
||||
const grid = document.querySelector('[class*="flex flex-col gap-[18px]"]');
|
||||
expect(grid).toHaveClass("xmd:grid", "xmd:grid-cols-2");
|
||||
expect(grid).toHaveClass("min-[768px]:grid", "min-[768px]:grid-cols-2");
|
||||
});
|
||||
|
||||
test("renders RuleCard components with correct props", () => {
|
||||
@@ -124,19 +124,18 @@ describe("RuleStack Component", () => {
|
||||
const section = document.querySelector("section");
|
||||
expect(section).toBeInTheDocument();
|
||||
|
||||
// Check for proper heading structure in cards
|
||||
// Check for proper heading structure: 1 from SectionHeader + 4 from RuleCards
|
||||
const headings = screen.getAllByRole("heading");
|
||||
expect(headings).toHaveLength(4); // Four rule cards
|
||||
expect(headings).toHaveLength(5); // One section header + four rule cards
|
||||
});
|
||||
|
||||
test("applies responsive spacing", () => {
|
||||
render(<RuleStack />);
|
||||
|
||||
const section = document.querySelector("section");
|
||||
expect(section).toHaveClass(
|
||||
"md:py-[var(--spacing-scale-048)]",
|
||||
"lg:py-[var(--spacing-scale-064)]",
|
||||
);
|
||||
// Check for responsive padding classes
|
||||
expect(section?.className).toMatch(/min-\[640px\]:py-\[48px\]/);
|
||||
expect(section?.className).toMatch(/min-\[1024px\]:py-\[64px\]/);
|
||||
});
|
||||
|
||||
test("renders icons with correct attributes", () => {
|
||||
@@ -147,12 +146,11 @@ describe("RuleStack Component", () => {
|
||||
"src",
|
||||
"/assets/Icon_Sociocracy.svg",
|
||||
);
|
||||
expect(sociocracyIcon).toHaveClass(
|
||||
"md:w-[56px]",
|
||||
"md:h-[56px]",
|
||||
"lg:w-[90px]",
|
||||
"lg:h-[90px]",
|
||||
);
|
||||
// Check for responsive icon size classes
|
||||
expect(sociocracyIcon?.className).toMatch(/min-\[640px\]:max-\[1023px\]:w-\[56px\]/);
|
||||
expect(sociocracyIcon?.className).toMatch(/min-\[640px\]:max-\[1023px\]:h-\[56px\]/);
|
||||
expect(sociocracyIcon?.className).toMatch(/min-\[1440px\]:w-\[90px\]/);
|
||||
expect(sociocracyIcon?.className).toMatch(/min-\[1440px\]:h-\[90px\]/);
|
||||
});
|
||||
|
||||
test("applies different background colors to cards", () => {
|
||||
@@ -174,7 +172,9 @@ describe("RuleStack Component", () => {
|
||||
render(<RuleStack />);
|
||||
|
||||
const button = screen.getByRole("button", { name: "See all templates" });
|
||||
expect(button).toHaveClass("bg-transparent", "border-[1.5px]");
|
||||
// Button component uses outline variant which has bg-transparent and border
|
||||
expect(button?.className).toMatch(/bg-transparent/);
|
||||
expect(button?.className).toMatch(/border/);
|
||||
});
|
||||
|
||||
test("applies flex layout for button container", () => {
|
||||
|
||||
Reference in New Issue
Block a user