+ {/* Logo Text - responsive visibility for topNav sizes */}
+
+
+ );
+ },
+);
+
+Logo.displayName = "Logo";
+
+export default Logo;
diff --git a/app/components/asset/logo/index.ts b/app/components/asset/logo/index.ts
new file mode 100644
index 0000000..f252704
--- /dev/null
+++ b/app/components/asset/logo/index.ts
@@ -0,0 +1 @@
+export { default } from "./Logo";
diff --git a/app/components/buttons/Button.tsx b/app/components/buttons/Button.tsx
index 2aa2c6a..50b8c2d 100644
--- a/app/components/buttons/Button.tsx
+++ b/app/components/buttons/Button.tsx
@@ -109,15 +109,11 @@ const Button = memo
+ CommunityRule
+
+
+ {/* Vector Icon */}
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
{/* Section Number - Direct child for Small */}
);
}
@@ -92,9 +97,7 @@ const NumberCard = memo- {text} -
+{text}
-
);
@@ -103,7 +106,9 @@ const NumberCard = memo- {text} -
+{text}
+
{/* Section Number - Responsive positioning */}
);
}
-
+
if (icon) {
return (
-
@@ -108,7 +115,7 @@ export function RuleCardView({
);
}
-
+
return (
+
{icon}
);
}
-
+
if (communityInitials) {
const initialsSize = `
max-[639px]:text-[16px]
@@ -138,26 +147,29 @@ export function RuleCardView({
min-[1440px]:text-[36px]
`;
return (
-
-
+
+
{communityInitials}
);
}
-
+
return null;
};
-
// Border radius - use CSS classes if provided via className, otherwise use size-based logic
- const borderRadiusClass = className?.includes("rounded-")
+ 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)]";
+ : isExtraSmall
+ ? "rounded-[var(--measures-radius-200,8px)]"
+ : isSmall
+ ? "rounded-[var(--measures-radius-300,12px)]"
+ : "rounded-[var(--radius-measures-radius-small)]";
return (
{/* Outermost container with bottom border - taller to match Figma */}
-
)
)}
diff --git a/app/components/content/ContentContainer/ContentContainer.types.ts b/app/components/content/ContentContainer/ContentContainer.types.ts
index 18716f8..7fbe41d 100644
--- a/app/components/content/ContentContainer/ContentContainer.types.ts
+++ b/app/components/content/ContentContainer/ContentContainer.types.ts
@@ -1,6 +1,10 @@
import type { BlogPost } from "../../../../lib/content";
-export type ContentContainerSizeValue = "xs" | "responsive" | "Xs" | "Responsive";
+export type ContentContainerSizeValue =
+ | "xs"
+ | "responsive"
+ | "Xs"
+ | "Responsive";
export interface ContentContainerProps {
post: BlogPost;
diff --git a/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts b/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts
index 3c8fe75..425ee5b 100644
--- a/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts
+++ b/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts
@@ -1,6 +1,10 @@
import type { BlogPost } from "../../../../lib/content";
-export type ContentThumbnailTemplateVariantValue = "vertical" | "horizontal" | "Vertical" | "Horizontal";
+export type ContentThumbnailTemplateVariantValue =
+ | "vertical"
+ | "horizontal"
+ | "Vertical"
+ | "Horizontal";
export interface ContentThumbnailTemplateProps {
post: BlogPost;
diff --git a/app/components/controls/Checkbox/Checkbox.container.tsx b/app/components/controls/Checkbox/Checkbox.container.tsx
index 7650f3a..df9e74d 100644
--- a/app/components/controls/Checkbox/Checkbox.container.tsx
+++ b/app/components/controls/Checkbox/Checkbox.container.tsx
@@ -4,7 +4,10 @@ import { memo } from "react";
import { useComponentId } from "../../../hooks";
import { CheckboxView } from "./Checkbox.view";
import type { CheckboxProps } from "./Checkbox.types";
-import { normalizeMode, normalizeState } from "../../../../lib/propNormalization";
+import {
+ normalizeMode,
+ normalizeState,
+} from "../../../../lib/propNormalization";
const CheckboxContainer = memo(
({
@@ -24,7 +27,7 @@ const CheckboxContainer = memo(
// Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
const mode = normalizeMode(modeProp);
const state = normalizeState(stateProp);
-
+
const isInverse = mode === "inverse";
const isStandard = mode === "standard";
@@ -43,7 +46,9 @@ const CheckboxContainer = memo(
transition-all
duration-200
ease-in-out
- `.trim().replace(/\s+/g, " ");
+ `
+ .trim()
+ .replace(/\s+/g, " ");
// Get box styles based on state and checked status per Figma designs
const getBoxStyles = (): string => {
diff --git a/app/components/controls/CheckboxGroup/CheckboxGroup.container.tsx b/app/components/controls/CheckboxGroup/CheckboxGroup.container.tsx
index 2fac6e8..ea96562 100644
--- a/app/components/controls/CheckboxGroup/CheckboxGroup.container.tsx
+++ b/app/components/controls/CheckboxGroup/CheckboxGroup.container.tsx
@@ -22,8 +22,10 @@ const CheckboxGroupContainer = ({
const groupId = name || `checkbox-group-${generatedId}`;
// Internal state to track checked values (only used if value prop is not provided)
- const [internalCheckedValues, setInternalCheckedValues] = useState([]);
-
+ const [internalCheckedValues, setInternalCheckedValues] = useState(
+ [],
+ );
+
// Use controlled value if provided, otherwise use internal state
const checkedValues = value !== undefined ? value : internalCheckedValues;
diff --git a/app/components/controls/CheckboxGroup/CheckboxGroup.view.tsx b/app/components/controls/CheckboxGroup/CheckboxGroup.view.tsx
index 8c2d7e0..b43b6f4 100644
--- a/app/components/controls/CheckboxGroup/CheckboxGroup.view.tsx
+++ b/app/components/controls/CheckboxGroup/CheckboxGroup.view.tsx
@@ -23,10 +23,7 @@ export function CheckboxGroupView({
// If there's subtext, render checkbox without label and handle layout separately
if (option.subtext) {
return (
-
+ `}
+ >
{/* Logo/Icon - fixed width/height, vertically centered, does not touch bottom */}
{renderLogo() && (
-
)}
{/* Footer: Description */}
- {description && (
+ {description && (
+ `}
+ >
{renderLogo()}
)}
{/* Spacing between icon and title */}
-
+ "
+ />
{/* Container with no padding and left border - extends full height to touch bottom */}
{title && (
-
+ `}
+ >
{/* Inner container for header text with padding */}
-
)}
@@ -237,7 +261,11 @@ export function RuleCardView({
category.onAddClick?.(category.name);
}}
onCustomChipConfirm={(chipId, value) => {
- category.onCustomChipConfirm?.(category.name, chipId, value);
+ category.onCustomChipConfirm?.(
+ category.name,
+ chipId,
+ value,
+ );
}}
onCustomChipClose={(chipId) => {
category.onCustomChipClose?.(category.name, chipId);
@@ -250,11 +278,9 @@ export function RuleCardView({
-
- {title} -
+ `} + > ++ {title} +
-
)}
@@ -263,8 +289,8 @@ export function RuleCardView({
description && (
- {description} -
+{description}
- {description} -
+ {description} +
+
(
}
}, [isCustom]);
- const handleCheck = (value: string, event: React.MouseEvent) => {
+ const handleCheck = (
+ value: string,
+ event: React.MouseEvent,
+ ) => {
if (onCheck && value.trim()) {
onCheck(value.trim(), event);
// Reset input after successful check
@@ -63,7 +66,10 @@ const ChipContainer = memo(
const handleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === "Enter" && inputValue.trim() && onCheck) {
event.preventDefault();
- handleCheck(inputValue.trim(), event as unknown as React.MouseEvent);
+ handleCheck(
+ inputValue.trim(),
+ event as unknown as React.MouseEvent,
+ );
} else if (event.key === "Escape" && onClose) {
event.preventDefault();
handleClose(event as unknown as React.MouseEvent);
@@ -95,4 +101,3 @@ const ChipContainer = memo(
ChipContainer.displayName = "Chip";
export default ChipContainer;
-
diff --git a/app/components/controls/Chip/Chip.types.ts b/app/components/controls/Chip/Chip.types.ts
index 13ca6ed..dab6332 100644
--- a/app/components/controls/Chip/Chip.types.ts
+++ b/app/components/controls/Chip/Chip.types.ts
@@ -68,4 +68,3 @@ export interface ChipViewProps {
inputRef?: React.RefObject;
ariaLabel?: string;
}
-
diff --git a/app/components/controls/Chip/Chip.view.tsx b/app/components/controls/Chip/Chip.view.tsx
index 2402994..a393411 100644
--- a/app/components/controls/Chip/Chip.view.tsx
+++ b/app/components/controls/Chip/Chip.view.tsx
@@ -42,32 +42,26 @@ function ChipView({
// Palette + state styling based on Figma examples
// Use consistent border width to prevent layout shift
const borderWidth = isSmall ? "border-[1.25px]" : "border-2";
-
- let background = "bg-[var(--color-surface-default-transparent,rgba(0,0,0,0))]";
- let border =
- `${borderWidth} border-[var(--color-border-default-tertiary,#464646)]`;
+
+ let background =
+ "bg-[var(--color-surface-default-transparent,rgba(0,0,0,0))]";
+ let border = `${borderWidth} border-[var(--color-border-default-tertiary,#464646)]`;
let textColor =
"text-[color:var(--color-content-default-brand-primary,#fefcc9)]";
if (isDefault) {
if (state === "custom") {
- background =
- "bg-[var(--color-surface-default-secondary,#141414)]"; // dark background for custom
+ background = "bg-[var(--color-surface-default-secondary,#141414)]"; // dark background for custom
border = "border-none";
- textColor =
- "text-[color:var(--color-content-default-tertiary,#b4b4b4)]";
+ textColor = "text-[color:var(--color-content-default-tertiary,#b4b4b4)]";
} else if (state === "disabled") {
- background =
- "bg-[var(--color-surface-default-secondary,#141414)]"; // dark background
+ background = "bg-[var(--color-surface-default-secondary,#141414)]"; // dark background
border = "border-none";
- textColor =
- "text-[color:var(--color-content-default-tertiary,#b4b4b4)]";
+ textColor = "text-[color:var(--color-content-default-tertiary,#b4b4b4)]";
} else if (isSelected) {
- background =
- "bg-[var(--color-surface-inverse-brandaccent,#fdfaa8)]"; // yellow selected
+ background = "bg-[var(--color-surface-inverse-brandaccent,#fdfaa8)]"; // yellow selected
border = `${borderWidth} border-[var(--color-border-default-brand-primary,#fdfaa8)]`;
- textColor =
- "text-[color:var(--color-content-inverse-primary,black)]";
+ textColor = "text-[color:var(--color-content-inverse-primary,black)]";
} else {
// Unselected default
background =
@@ -78,24 +72,20 @@ function ChipView({
}
} else if (isInverse) {
if (state === "disabled") {
- background =
- "bg-[var(--color-surface-inverse-tertiary,#d2d2d2)]";
+ background = "bg-[var(--color-surface-inverse-tertiary,#d2d2d2)]";
border = "border-none";
- textColor =
- "text-[color:var(--color-content-inverse-primary,black)]";
+ textColor = "text-[color:var(--color-content-inverse-primary,black)]";
} else if (isSelected) {
background =
"bg-[var(--color-surface-default-semi-opaque,rgba(0,0,0,0.05))]";
border = `${borderWidth} border-[var(--color-border-default-primary,#141414)]`;
- textColor =
- "text-[color:var(--color-content-inverse-primary,black)]";
+ textColor = "text-[color:var(--color-content-inverse-primary,black)]";
} else {
// Unselected / custom inverse
background =
"bg-[var(--color-surface-default-transparent,rgba(0,0,0,0))]";
border = `${borderWidth} border-[var(--color-border-default-primary,#141414)]`;
- textColor =
- "text-[color:var(--color-content-inverse-primary,black)]";
+ textColor = "text-[color:var(--color-content-inverse-primary,black)]";
}
}
@@ -134,7 +124,9 @@ function ChipView({
.filter(Boolean)
.join(" ");
- const handleClick = (event: React.MouseEvent) => {
+ const handleClick = (
+ event: React.MouseEvent,
+ ) => {
if (isDisabled) {
event.preventDefault();
return;
@@ -162,7 +154,9 @@ function ChipView({
}}
{...sharedA11y}
>
-
+
{/* Check button */}
{onCheck && (