Right rail template

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