Right rail template
This commit is contained in:
adilallo
@@ -40,7 +40,23 @@ const WebVitalsDashboardContainer = memo(() => {
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
import("web-vitals").then((webVitals) => {
|
||||
const { getCLS, getFID, getFCP, getLCP, getTTFB } = webVitals as any;
|
||||
const { getCLS, getFID, getFCP, getLCP, getTTFB } = webVitals as {
|
||||
getCLS: (
|
||||
_fn: (_m: { value: number; rating: string }) => void,
|
||||
) => void;
|
||||
getFID: (
|
||||
_fn: (_m: { value: number; rating: string }) => void,
|
||||
) => void;
|
||||
getFCP: (
|
||||
_fn: (_m: { value: number; rating: string }) => void,
|
||||
) => void;
|
||||
getLCP: (
|
||||
_fn: (_m: { value: number; rating: string }) => void,
|
||||
) => void;
|
||||
getTTFB: (
|
||||
_fn: (_m: { value: number; rating: string }) => void,
|
||||
) => void;
|
||||
};
|
||||
|
||||
getLCP((metric: { value: number; rating: VitalData["rating"] }) => {
|
||||
setVitals((prev) => ({
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import ExclamationIcon from "./icon/exclamation.svg";
|
||||
|
||||
export type IconName = "exclamation";
|
||||
|
||||
/** SVG import may be a React component or a module object { default: Component } (e.g. with Turbopack) */
|
||||
const iconMap: Record<
|
||||
IconName,
|
||||
React.ComponentType<React.SVGProps<SVGSVGElement>> | { default: React.ComponentType<React.SVGProps<SVGSVGElement>> }
|
||||
> = {
|
||||
exclamation: ExclamationIcon,
|
||||
};
|
||||
|
||||
export interface IconProps {
|
||||
name: IconName;
|
||||
className?: string;
|
||||
/** Width and height (default 24) */
|
||||
size?: number;
|
||||
"aria-hidden"?: boolean;
|
||||
}
|
||||
|
||||
function IconComponent({
|
||||
name,
|
||||
className = "",
|
||||
size = 24,
|
||||
"aria-hidden": ariaHidden = true,
|
||||
}: IconProps) {
|
||||
const SvgModule = iconMap[name];
|
||||
if (!SvgModule) return null;
|
||||
// Turbopack/bundler may expose SVG as { default: Component } instead of the component directly
|
||||
const Svg =
|
||||
typeof SvgModule === "object" && SvgModule !== null && "default" in SvgModule
|
||||
? (SvgModule as { default: React.ComponentType<React.SVGProps<SVGSVGElement>> }).default
|
||||
: (SvgModule as React.ComponentType<React.SVGProps<SVGSVGElement>>);
|
||||
if (typeof Svg !== "function") return null;
|
||||
return (
|
||||
<Svg
|
||||
width={size}
|
||||
height={size}
|
||||
className={className}
|
||||
aria-hidden={ariaHidden}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(IconComponent);
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.25 14.0386V5.53857H12.75V14.0386H11.25ZM11.25 18.4616V16.9616H12.75V18.4616H11.25Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 224 B |
@@ -0,0 +1,2 @@
|
||||
export { default as Icon } from "./Icon";
|
||||
export type { IconName, IconProps } from "./Icon";
|
||||
@@ -42,7 +42,7 @@ export function CardView({
|
||||
const selectedBorder = selected
|
||||
? "outline outline-2 outline-dashed outline-black outline-offset-[-2px]"
|
||||
: "";
|
||||
const baseClasses = `rounded-[var(--radius-measures-radius-small)] bg-[#FFFFFF] p-4 transition-all duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
|
||||
const baseClasses = `select-none rounded-[var(--radius-measures-radius-small)] bg-[#FFFFFF] p-4 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
|
||||
|
||||
if (orientation === "horizontal") {
|
||||
return (
|
||||
@@ -93,7 +93,7 @@ export function CardView({
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="shrink-0">
|
||||
<div className="shrink-0 w-[6rem]">
|
||||
<CardTag recommended={recommended} selected={selected} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -75,7 +75,8 @@ export function SelectInputView({
|
||||
}: SelectInputViewProps) {
|
||||
// Styles based on Figma design
|
||||
const containerClasses = "flex flex-col gap-[8px]";
|
||||
const labelClasses = "text-[14px] leading-[20px] font-medium font-inter text-[var(--color-content-default-primary)]";
|
||||
const labelClasses =
|
||||
"text-[14px] leading-[20px] font-medium font-inter text-[var(--color-content-default-primary)]";
|
||||
|
||||
// Button styles per Figma
|
||||
const getButtonClasses = (): string => {
|
||||
@@ -101,7 +102,9 @@ export function SelectInputView({
|
||||
cursor-pointer
|
||||
appearance-none
|
||||
m-0
|
||||
`.trim().replace(/\s+/g, " ");
|
||||
`
|
||||
.trim()
|
||||
.replace(/\s+/g, " ");
|
||||
|
||||
if (disabled) {
|
||||
return `${baseClasses} bg-[var(--color-surface-default-secondary)] text-[var(--color-content-inverse-tertiary,#2d2d2d)] border-[var(--color-border-default-primary)] cursor-not-allowed opacity-40`;
|
||||
@@ -142,10 +145,7 @@ export function SelectInputView({
|
||||
{label && (
|
||||
<div className="flex flex-wrap gap-[var(--measures-spacing-200,4px_8px)] items-baseline pr-[var(--measures-spacing-100,4px)] relative shrink-0 w-full">
|
||||
<div className="flex gap-[var(--measures-spacing-050,2px)] items-center relative shrink-0">
|
||||
<label
|
||||
id={labelId}
|
||||
className={labelClasses}
|
||||
>
|
||||
<label id={labelId} className={labelClasses}>
|
||||
{label}
|
||||
</label>
|
||||
{asterisk && (
|
||||
@@ -155,6 +155,7 @@ export function SelectInputView({
|
||||
)}
|
||||
{iconHelp && (
|
||||
<div className="relative shrink-0 size-[12px]">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element -- icon asset */}
|
||||
<img
|
||||
src={getAssetPath(ASSETS.ICON_HELP)}
|
||||
alt="Help"
|
||||
@@ -186,8 +187,10 @@ export function SelectInputView({
|
||||
onFocus={onButtonFocus}
|
||||
onBlur={onButtonBlur}
|
||||
>
|
||||
<span className={`flex-1 text-left ${iconRight ? "pr-[32px]" : ""} ${textColorClass}`}>
|
||||
{textData ? displayText : placeholder}
|
||||
<span
|
||||
className={`flex-1 text-left ${iconRight ? "pr-[32px]" : ""} ${textColorClass}`}
|
||||
>
|
||||
{textData ? displayText : _placeholder}
|
||||
</span>
|
||||
{iconRight && (
|
||||
<div className="flex items-center justify-center shrink-0">
|
||||
|
||||
@@ -48,6 +48,7 @@ export const TextAreaView = forwardRef<HTMLTextAreaElement, TextAreaViewProps>(
|
||||
</label>
|
||||
{showHelpIcon && (
|
||||
<div className="relative shrink-0 size-[12px]">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element -- icon asset */}
|
||||
<img
|
||||
src={getAssetPath(ASSETS.ICON_HELP)}
|
||||
alt="Help"
|
||||
|
||||
@@ -45,6 +45,7 @@ export const TextInputView = forwardRef<HTMLInputElement, TextInputViewProps>(
|
||||
</label>
|
||||
{showHelpIcon && (
|
||||
<div className="relative shrink-0 size-[12px]">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element -- icon asset */}
|
||||
<img
|
||||
src={getAssetPath(ASSETS.ICON_HELP)}
|
||||
alt="Help"
|
||||
|
||||
@@ -27,7 +27,10 @@ const Avatar = memo<AvatarProps>(
|
||||
|
||||
const baseStyles = `rounded-[var(--radius-measures-radius-full)] object-cover box-border ${sizeStyles[size]} ${className}`;
|
||||
|
||||
return <img src={src} alt={alt} className={baseStyles} {...props} />;
|
||||
return (
|
||||
/* eslint-disable-next-line @next/next/no-img-element -- avatar image from URL */
|
||||
<img src={src} alt={alt} className={baseStyles} {...props} />
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
|
||||
@@ -66,6 +66,7 @@ const Footer = memo(() => {
|
||||
className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer group"
|
||||
aria-label={t("social.bluesky.ariaLabel")}
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element -- social logo */}
|
||||
<img
|
||||
src={getAssetPath(ASSETS.BLUESKY_LOGO)}
|
||||
alt="Bluesky"
|
||||
@@ -82,6 +83,7 @@ const Footer = memo(() => {
|
||||
className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer group"
|
||||
aria-label={t("social.gitlab.ariaLabel")}
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element -- social icon */}
|
||||
<img
|
||||
src={getAssetPath(ASSETS.GITLAB_ICON)}
|
||||
alt="GitLab"
|
||||
|
||||
@@ -7,7 +7,6 @@ import MenuBarItem from "../MenuBarItem";
|
||||
import Button from "../../buttons/Button";
|
||||
import AvatarContainer from "../../utility/AvatarContainer";
|
||||
import Avatar from "../../icons/Avatar";
|
||||
import Logo from "../../icons/Logo";
|
||||
import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
|
||||
import { TopNavView } from "./TopNav.view";
|
||||
import type { TopNavProps, NavSize } from "./TopNav.types";
|
||||
@@ -19,12 +18,7 @@ export const avatarImages = [
|
||||
];
|
||||
|
||||
const TopNavContainer = memo<TopNavProps>(
|
||||
({
|
||||
folderTop = false,
|
||||
loggedIn = false,
|
||||
profile = false,
|
||||
logIn = true,
|
||||
}) => {
|
||||
({ folderTop = false, loggedIn = false, profile = false, logIn = true }) => {
|
||||
const pathname = usePathname();
|
||||
const t = useTranslation("header");
|
||||
|
||||
@@ -34,7 +28,9 @@ const TopNavContainer = memo<TopNavProps>(
|
||||
"@type": "WebSite",
|
||||
name: "CommunityRule",
|
||||
url: "https://communityrule.com",
|
||||
...(folderTop && { description: "Build operating manuals for successful communities" }),
|
||||
...(folderTop && {
|
||||
description: "Build operating manuals for successful communities",
|
||||
}),
|
||||
potentialAction: {
|
||||
"@type": "SearchAction",
|
||||
target: "https://communityrule.com/search?q={search_term_string}",
|
||||
@@ -54,7 +50,10 @@ const TopNavContainer = memo<TopNavProps>(
|
||||
|
||||
const renderNavigationItems = (size: NavSize) => {
|
||||
// Map NavSize to Figma MenuBarItem sizes
|
||||
const sizeMap: Record<NavSize, "X Small" | "Small" | "Medium" | "Large" | "X Large"> = {
|
||||
const sizeMap: Record<
|
||||
NavSize,
|
||||
"X Small" | "Small" | "Medium" | "Large" | "X Large"
|
||||
> = {
|
||||
default: "Small",
|
||||
xsmall: "X Small",
|
||||
xsmallUseCases: "X Small",
|
||||
@@ -85,7 +84,10 @@ const TopNavContainer = memo<TopNavProps>(
|
||||
mode={mode}
|
||||
state={pathname === item.href ? "selected" : "default"}
|
||||
reducedPadding={isUseCases}
|
||||
ariaLabel={t("ariaLabels.navigateToPage").replace("{text}", item.text)}
|
||||
ariaLabel={t("ariaLabels.navigateToPage").replace(
|
||||
"{text}",
|
||||
item.text,
|
||||
)}
|
||||
>
|
||||
{item.text}
|
||||
</MenuBarItem>
|
||||
@@ -113,7 +115,10 @@ const TopNavContainer = memo<TopNavProps>(
|
||||
|
||||
const renderLoginButton = (size: NavSize) => {
|
||||
// Map NavSize to Figma MenuBarItem sizes
|
||||
const sizeMap: Record<NavSize, "X Small" | "Small" | "Medium" | "Large" | "X Large"> = {
|
||||
const sizeMap: Record<
|
||||
NavSize,
|
||||
"X Small" | "Small" | "Medium" | "Large" | "X Large"
|
||||
> = {
|
||||
default: "Small",
|
||||
xsmall: "X Small",
|
||||
xsmallUseCases: "X Small",
|
||||
|
||||
@@ -55,18 +55,21 @@ function TopNavView({
|
||||
</div>
|
||||
|
||||
{/* Decorative Union images for tab appearance */}
|
||||
{/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG, not content */}
|
||||
<img
|
||||
src={getAssetPath("assets/Union_xsm.svg")}
|
||||
alt=""
|
||||
role="presentation"
|
||||
className="absolute -bottom-[3px] -right-[52px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] sm:hidden -z-10"
|
||||
/>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG */}
|
||||
<img
|
||||
src={getAssetPath("assets/Union_sm_md_lg.svg")}
|
||||
alt=""
|
||||
role="presentation"
|
||||
className="absolute -bottom-[3.7px] -right-[53px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block xl:hidden -z-10"
|
||||
/>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG */}
|
||||
<img
|
||||
src={getAssetPath("assets/Union_xlg.svg")}
|
||||
alt=""
|
||||
|
||||
@@ -46,6 +46,7 @@ const HeroBanner = memo<HeroBannerProps>(
|
||||
|
||||
{/* Hero Image Container */}
|
||||
<div className="w-full h-full md:flex-1 rounded-[8px] overflow-hidden relative z-10 flex items-center justify-center">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element -- dynamic path from getAssetPath */}
|
||||
<img
|
||||
src={getAssetPath("assets/HeroImage.png")}
|
||||
alt={imageAlt}
|
||||
|
||||
@@ -16,19 +16,24 @@ export function RuleStackView({
|
||||
}: 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 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(() => {
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: defer breakpoint until after mount to avoid hydration mismatch
|
||||
setIsMounted(true);
|
||||
}, []);
|
||||
|
||||
@@ -38,12 +43,12 @@ export function RuleStackView({
|
||||
? isMax639
|
||||
? "XS"
|
||||
: isMin640Max1023
|
||||
? "S"
|
||||
: isMin1024Max1439
|
||||
? "M"
|
||||
: isMin1440
|
||||
? "L"
|
||||
: "M"
|
||||
? "S"
|
||||
: isMin1024Max1439
|
||||
? "M"
|
||||
: isMin1440
|
||||
? "L"
|
||||
: "M"
|
||||
: "M";
|
||||
|
||||
// Icon sizes: XS=40px, S=56px, M=56px, L=90px
|
||||
@@ -150,17 +155,15 @@ export function RuleStackView({
|
||||
</div>
|
||||
|
||||
{/* See all templates button */}
|
||||
<div className="
|
||||
<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
|
||||
buttonType="outline"
|
||||
palette="default"
|
||||
size="large"
|
||||
>
|
||||
"
|
||||
>
|
||||
<Button buttonType="outline" palette="default" size="large">
|
||||
{buttonText}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -26,6 +26,7 @@ const SectionNumber = memo<SectionNumberProps>(({ number }) => {
|
||||
|
||||
return (
|
||||
<div className="relative size-[40px] overflow-visible -rotate-[15deg]">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element -- dynamic src from getImageSrc */}
|
||||
<img
|
||||
src={getImageSrc(number)}
|
||||
alt={`Section ${number}`}
|
||||
|
||||
@@ -60,12 +60,15 @@ function ContentLockupView({
|
||||
</h1>
|
||||
) : null}
|
||||
{variant === "hero" && (
|
||||
<img
|
||||
src={getAssetPath("assets/Shapes_1.svg")}
|
||||
alt=""
|
||||
className={styles.shape}
|
||||
role="presentation"
|
||||
/>
|
||||
<>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element -- decorative shape SVG */}
|
||||
<img
|
||||
src={getAssetPath("assets/Shapes_1.svg")}
|
||||
alt=""
|
||||
className={styles.shape}
|
||||
role="presentation"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -20,6 +20,7 @@ const CardStackContainer = memo<CardStackProps>(
|
||||
showLessLabel = DEFAULT_SHOW_LESS_LABEL,
|
||||
title = "",
|
||||
description = "",
|
||||
layout = "default",
|
||||
className = "",
|
||||
}) => {
|
||||
const [internalExpanded, setInternalExpanded] = useState(false);
|
||||
@@ -68,6 +69,7 @@ const CardStackContainer = memo<CardStackProps>(
|
||||
showLessLabel={showLessLabel}
|
||||
title={title}
|
||||
description={description}
|
||||
layout={layout}
|
||||
className={className}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -17,6 +17,8 @@ export interface CardStackProps {
|
||||
showLessLabel?: string;
|
||||
title?: string;
|
||||
description?: string;
|
||||
/** "default" = compact grid/column + expanded grid; "singleStack" = always one column, expand shows more in same stack */
|
||||
layout?: "default" | "singleStack";
|
||||
className?: string;
|
||||
}
|
||||
|
||||
@@ -31,5 +33,6 @@ export interface CardStackViewProps {
|
||||
showLessLabel: string;
|
||||
title: string;
|
||||
description: string;
|
||||
layout: "default" | "singleStack";
|
||||
className: string;
|
||||
}
|
||||
|
||||
@@ -15,17 +15,59 @@ export function CardStackView({
|
||||
showLessLabel,
|
||||
title,
|
||||
description,
|
||||
layout,
|
||||
className,
|
||||
}: CardStackViewProps) {
|
||||
const isSelected = (id: string) => selectedIds.includes(id);
|
||||
// Compact: recommended only (up to 5). Expanded: all cards.
|
||||
const compactCards = cards
|
||||
.filter((c) => c.recommended ?? false)
|
||||
.slice(0, 5);
|
||||
const compactCards = cards.filter((c) => c.recommended ?? false).slice(0, 5);
|
||||
|
||||
// Single stack: always one column; expand reveals more in same stack (scrollable)
|
||||
if (layout === "singleStack") {
|
||||
const displayedCards = expanded ? cards : compactCards;
|
||||
return (
|
||||
<div className={`flex w-full flex-col gap-6 min-w-0 ${className}`}>
|
||||
{title || description ? (
|
||||
<div className="min-w-0 shrink-0">
|
||||
<HeaderLockup
|
||||
title={title}
|
||||
description={description}
|
||||
justification="center"
|
||||
size="L"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="flex flex-col gap-[8px] w-full min-w-0">
|
||||
{displayedCards.map((item) => (
|
||||
<Card
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
label={item.label}
|
||||
supportText={item.supportText}
|
||||
recommended={item.recommended ?? false}
|
||||
selected={isSelected(item.id)}
|
||||
orientation="vertical"
|
||||
showInfoIcon={true}
|
||||
onClick={() => onCardSelect(item.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{hasMore ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggleExpand}
|
||||
className="font-inter text-base font-normal leading-6 text-[var(--color-gray-000)] underline hover:opacity-90 focus:outline-none self-center cursor-pointer"
|
||||
>
|
||||
{expanded ? showLessLabel : toggleLabel}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`flex w-full flex-col gap-6 min-w-0 ${className}`}>
|
||||
{(title || description) ? (
|
||||
{title || description ? (
|
||||
<div className="min-w-0">
|
||||
<HeaderLockup
|
||||
title={title}
|
||||
|
||||
@@ -17,7 +17,7 @@ export function CreateFlowTopNavView({
|
||||
|
||||
return (
|
||||
<header
|
||||
className={`bg-black w-full border-b border-[var(--color-border-default-tertiary)] ${className}`}
|
||||
className={`bg-black w-full ${className}`}
|
||||
role="banner"
|
||||
aria-label="Create Rule Flow Navigation"
|
||||
>
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import DecisionMakingSidebarView from "./DecisionMakingSidebar.view";
|
||||
import type { DecisionMakingSidebarProps } from "./DecisionMakingSidebar.types";
|
||||
import {
|
||||
normalizeHeaderLockupJustification,
|
||||
normalizeHeaderLockupSize,
|
||||
} from "../../../../lib/propNormalization";
|
||||
|
||||
const DecisionMakingSidebarContainer = memo<DecisionMakingSidebarProps>(
|
||||
({
|
||||
title,
|
||||
description,
|
||||
messageBoxTitle,
|
||||
messageBoxItems,
|
||||
messageBoxCheckedIds,
|
||||
onMessageBoxCheckboxChange,
|
||||
size: sizeProp = "L",
|
||||
justification: justificationProp = "left",
|
||||
className = "",
|
||||
}) => {
|
||||
const size = normalizeHeaderLockupSize(sizeProp);
|
||||
const justification = normalizeHeaderLockupJustification(justificationProp);
|
||||
|
||||
return (
|
||||
<DecisionMakingSidebarView
|
||||
title={title}
|
||||
description={description}
|
||||
messageBoxTitle={messageBoxTitle}
|
||||
messageBoxItems={messageBoxItems}
|
||||
messageBoxCheckedIds={messageBoxCheckedIds}
|
||||
onMessageBoxCheckboxChange={onMessageBoxCheckboxChange}
|
||||
size={size}
|
||||
justification={justification}
|
||||
className={className}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
DecisionMakingSidebarContainer.displayName = "DecisionMakingSidebar";
|
||||
|
||||
export default DecisionMakingSidebarContainer;
|
||||
@@ -0,0 +1,31 @@
|
||||
import type { ReactNode } from "react";
|
||||
import type {
|
||||
HeaderLockupJustificationValue,
|
||||
HeaderLockupSizeValue,
|
||||
} from "../../type/HeaderLockup/HeaderLockup.types";
|
||||
import type { InfoMessageBoxItem } from "../InfoMessageBox/InfoMessageBox.types";
|
||||
|
||||
export interface DecisionMakingSidebarProps {
|
||||
title: string;
|
||||
/** Description text or ReactNode (e.g. with underlined "add") */
|
||||
description?: string | ReactNode;
|
||||
messageBoxTitle: string;
|
||||
messageBoxItems: InfoMessageBoxItem[];
|
||||
messageBoxCheckedIds?: string[];
|
||||
onMessageBoxCheckboxChange?: (id: string, checked: boolean) => void;
|
||||
size?: HeaderLockupSizeValue;
|
||||
justification?: HeaderLockupJustificationValue;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export interface DecisionMakingSidebarViewProps {
|
||||
title: string;
|
||||
description: string | ReactNode | undefined;
|
||||
messageBoxTitle: string;
|
||||
messageBoxItems: InfoMessageBoxItem[];
|
||||
messageBoxCheckedIds: string[] | undefined;
|
||||
onMessageBoxCheckboxChange: ((id: string, checked: boolean) => void) | undefined;
|
||||
size: "L" | "M";
|
||||
justification: "left" | "center";
|
||||
className: string;
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import HeaderLockup from "../../type/HeaderLockup";
|
||||
import InfoMessageBox from "../InfoMessageBox";
|
||||
import type { DecisionMakingSidebarViewProps } from "./DecisionMakingSidebar.types";
|
||||
|
||||
function DecisionMakingSidebarView({
|
||||
title,
|
||||
description,
|
||||
messageBoxTitle,
|
||||
messageBoxItems,
|
||||
messageBoxCheckedIds,
|
||||
onMessageBoxCheckboxChange,
|
||||
size,
|
||||
justification,
|
||||
className,
|
||||
}: DecisionMakingSidebarViewProps) {
|
||||
const isL = size === "L";
|
||||
const isLeft = justification === "left";
|
||||
const isStringDescription = typeof description === "string";
|
||||
|
||||
return (
|
||||
<div className={`flex flex-col gap-3 w-full min-w-0 ${className}`}>
|
||||
{isStringDescription ? (
|
||||
<HeaderLockup
|
||||
title={title}
|
||||
description={description as string}
|
||||
justification={justification}
|
||||
size={size}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className={`flex flex-col gap-[var(--measures-spacing-200,8px)] py-[12px] relative ${
|
||||
isLeft ? "items-start" : "items-center"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center relative shrink-0 w-full">
|
||||
<h1
|
||||
className={`flex-[1_0_0] min-h-px min-w-px overflow-hidden relative text-[var(--color-content-default-primary,white)] text-ellipsis whitespace-pre-wrap ${
|
||||
isLeft ? "text-left" : "text-center"
|
||||
} ${
|
||||
isL
|
||||
? "font-bricolage-grotesque font-extrabold text-[36px] leading-[44px]"
|
||||
: "font-bricolage-grotesque font-bold text-[28px] leading-[36px]"
|
||||
}`}
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
</div>
|
||||
{description != null && (
|
||||
<p
|
||||
className={`font-inter font-normal max-w-[640px] overflow-hidden relative shrink-0 text-[var(--color-content-default-tertiary,#b4b4b4)] text-ellipsis w-full whitespace-pre-wrap ${
|
||||
isLeft ? "" : "text-center"
|
||||
} ${
|
||||
isL
|
||||
? "text-[18px] leading-[1.3]"
|
||||
: "text-[14px] leading-[20px]"
|
||||
}`}
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<InfoMessageBox
|
||||
title={messageBoxTitle}
|
||||
items={messageBoxItems}
|
||||
checkedIds={messageBoxCheckedIds}
|
||||
onCheckboxChange={onMessageBoxCheckboxChange ?? undefined}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
DecisionMakingSidebarView.displayName = "DecisionMakingSidebarView";
|
||||
|
||||
export default memo(DecisionMakingSidebarView);
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default } from "./DecisionMakingSidebar.container";
|
||||
export type { DecisionMakingSidebarProps } from "./DecisionMakingSidebar.types";
|
||||
@@ -0,0 +1,56 @@
|
||||
"use client";
|
||||
|
||||
import { memo, useCallback, useState } from "react";
|
||||
import InfoMessageBoxView from "./InfoMessageBox.view";
|
||||
import type { InfoMessageBoxProps } from "./InfoMessageBox.types";
|
||||
|
||||
const InfoMessageBoxContainer = memo<InfoMessageBoxProps>(
|
||||
({
|
||||
title,
|
||||
items,
|
||||
icon,
|
||||
checkedIds: controlledCheckedIds,
|
||||
onCheckboxChange,
|
||||
className = "",
|
||||
}) => {
|
||||
const [internalCheckedIds, setInternalCheckedIds] = useState<string[]>([]);
|
||||
const checkedIds =
|
||||
controlledCheckedIds !== undefined
|
||||
? controlledCheckedIds
|
||||
: internalCheckedIds;
|
||||
|
||||
const handleGroupChange = useCallback(
|
||||
(newValue: string[]) => {
|
||||
if (controlledCheckedIds === undefined) {
|
||||
setInternalCheckedIds(newValue);
|
||||
}
|
||||
if (!onCheckboxChange) return;
|
||||
const prevSet = new Set(checkedIds);
|
||||
const newSet = new Set(newValue);
|
||||
items.forEach((item) => {
|
||||
const nowChecked = newSet.has(item.id);
|
||||
const wasChecked = prevSet.has(item.id);
|
||||
if (nowChecked !== wasChecked) {
|
||||
onCheckboxChange(item.id, nowChecked);
|
||||
}
|
||||
});
|
||||
},
|
||||
[checkedIds, controlledCheckedIds, items, onCheckboxChange],
|
||||
);
|
||||
|
||||
return (
|
||||
<InfoMessageBoxView
|
||||
title={title}
|
||||
items={items}
|
||||
icon={icon}
|
||||
checkedIds={checkedIds}
|
||||
onGroupChange={handleGroupChange}
|
||||
className={className}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
InfoMessageBoxContainer.displayName = "InfoMessageBox";
|
||||
|
||||
export default InfoMessageBoxContainer;
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
export interface InfoMessageBoxItem {
|
||||
id: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface InfoMessageBoxProps {
|
||||
/** Heading text for the message box */
|
||||
title: string;
|
||||
/** Checkbox items (id used as value for CheckboxGroup) */
|
||||
items: InfoMessageBoxItem[];
|
||||
/** Optional icon (e.g. exclamation); default exclamation icon used if not provided */
|
||||
icon?: ReactNode;
|
||||
/** Controlled checked ids; if undefined, uncontrolled */
|
||||
checkedIds?: string[];
|
||||
/** Callback when a checkbox is toggled */
|
||||
onCheckboxChange?: (id: string, checked: boolean) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export interface InfoMessageBoxViewProps {
|
||||
title: string;
|
||||
items: InfoMessageBoxItem[];
|
||||
icon?: ReactNode;
|
||||
checkedIds: string[];
|
||||
onGroupChange: (value: string[]) => void;
|
||||
className: string;
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import CheckboxGroup from "../../controls/CheckboxGroup";
|
||||
import type { InfoMessageBoxViewProps } from "./InfoMessageBox.types";
|
||||
|
||||
/** Exclamation icon per Figma 19751:35053 – vertical bar + dot inside circle; circle bg white 10% opacity, no border */
|
||||
function ExclamationIconInline() {
|
||||
const fillColor = "var(--color-content-default-primary, white)";
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="shrink-0"
|
||||
aria-hidden
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" fill="rgba(255,255,255,0.1)" />
|
||||
<path
|
||||
d="M11.25 14.0386V5.53857H12.75V14.0386H11.25ZM11.25 18.4616V16.9616H12.75V18.4616H11.25Z"
|
||||
fill={fillColor}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function InfoMessageBoxView({
|
||||
title,
|
||||
items,
|
||||
icon,
|
||||
checkedIds,
|
||||
onGroupChange,
|
||||
className,
|
||||
}: InfoMessageBoxViewProps) {
|
||||
const options = items.map((item) => ({
|
||||
value: item.id,
|
||||
label: item.label,
|
||||
}));
|
||||
|
||||
const handleChange = (data: { value: string[] }) => {
|
||||
onGroupChange(data.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col gap-[12px] p-[var(--spacing-measures-spacing-500,20px)] rounded-[var(--measures-radius-300,12px)] border-l-2 border-solid border-[var(--color-border-default-secondary,#1f1f1f)] bg-[var(--color-content-inverse-secondary,#1f1f1f)] w-full min-w-0 ${className}`}
|
||||
role="region"
|
||||
aria-label={title}
|
||||
>
|
||||
<div className="flex items-center gap-[var(--measures-spacing-200,8px)] min-w-0">
|
||||
<div
|
||||
className="relative shrink-0 size-6 flex items-center justify-center"
|
||||
data-name="Asset / Icon / exclamation"
|
||||
>
|
||||
{icon ?? <ExclamationIconInline />}
|
||||
</div>
|
||||
<p className="font-inter font-medium text-[14px] leading-[16px] text-[var(--color-content-default-primary,white)] min-w-0">
|
||||
{title}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-[12px] [&_label]:gap-[6px] [&_label_span]:text-[12px] [&_label_span]:leading-[16px] [&_label_span]:opacity-80 pl-8">
|
||||
<CheckboxGroup
|
||||
mode="standard"
|
||||
value={checkedIds}
|
||||
onChange={handleChange}
|
||||
options={options}
|
||||
aria-label={title}
|
||||
className="flex flex-col gap-[12px] !space-y-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(InfoMessageBoxView);
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default } from "./InfoMessageBox.container";
|
||||
export type { InfoMessageBoxProps, InfoMessageBoxItem } from "./InfoMessageBox.types";
|
||||
@@ -75,6 +75,7 @@ function InputLabelView({
|
||||
</div>
|
||||
{helpIcon && (
|
||||
<div className={`relative shrink-0 ${helpIconSize}`}>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element -- icon from asset path */}
|
||||
<img
|
||||
src={getAssetPath(ASSETS.ICON_HELP)}
|
||||
alt="Help"
|
||||
|
||||
@@ -19,6 +19,7 @@ export function ModalHeaderView({
|
||||
className="absolute bg-[var(--color-surface-default-secondary)] h-[24px] w-[24px] rounded-full left-[24px] top-[12px] flex items-center justify-center cursor-pointer"
|
||||
aria-label="Close dialog"
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element -- icon asset */}
|
||||
<img
|
||||
src={getAssetPath("assets/Icon_Close.svg")}
|
||||
alt=""
|
||||
|
||||
@@ -10,16 +10,12 @@ import type { TagViewProps } from "./Tag.types";
|
||||
*/
|
||||
export function TagView({ variant, children, className }: TagViewProps) {
|
||||
const isRecommended = variant === "recommended";
|
||||
const bgClass = isRecommended
|
||||
? "bg-[#F6EEA7]"
|
||||
: "bg-[#3F3F3F]";
|
||||
const textClass = isRecommended
|
||||
? "text-[#3F3F3F]"
|
||||
: "text-[#FFFFFF]";
|
||||
const bgClass = isRecommended ? "bg-[#F6EEA7]" : "bg-[#3F3F3F]";
|
||||
const textClass = isRecommended ? "text-[#3F3F3F]" : "text-[#FFFFFF]";
|
||||
|
||||
return (
|
||||
<span
|
||||
className={`inline-flex items-center justify-center rounded px-2 py-0.5 font-inter text-[10px] font-medium uppercase leading-3 ${bgClass} ${textClass} ${className}`}
|
||||
className={`inline-flex w-[6rem] min-w-[6rem] items-center justify-center rounded px-2 py-0.5 font-inter text-[10px] font-medium uppercase leading-3 ${bgClass} ${textClass} ${className}`}
|
||||
role="status"
|
||||
>
|
||||
{children}
|
||||
|
||||
Reference in New Issue
Block a user