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

Update Rule Stack component and tests

Browse Source
This commit is contained in:
adilallo
2026-02-05 16:58:15 -07:00
parent 7e2348048a
commit b012c73e65
6 changed files with 245 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/RuleCard/RuleCard.view.tsx
+76 -44
View File
@@ -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>