Right rail template

2026-02-28 23:16:10 -07:00
parent f5bfb25f5e
commit 0799636c78
60 changed files with 1255 additions and 305 deletions
@@ -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}