Component cleanup

2026-04-29 07:20:16 -06:00
parent 252848eba9
commit e6127f1a3f
267 changed files with 2087 additions and 2196 deletions
@@ -0,0 +1,40 @@
+"use client";
+
+import { memo } from "react";
+import { useSchemaData } from "../../../hooks";
+import CardStepsView from "./CardSteps.view";
+import type { CardStepsProps } from "./CardSteps.types";
+
+/**
+ * Figma: "Community Rule System" → Sections → SectionCardSteps ([17434:19695](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=17434-19695)).
+ * Composes **`cards/Step`** (Figma Card / Step), not **`progress/Stepper`**.
+ */
+const CardStepsContainer = memo<CardStepsProps>(
+  ({ title, subtitle, steps, headingDesktopLines }) => {
+    const schemaData = useSchemaData({
+      type: "HowTo",
+      name: title,
+      description: subtitle,
+      steps: steps.map((item) => ({
+        name: item.text,
+        text: item.text,
+      })),
+    });
+
+    const schemaJson = JSON.stringify(schemaData);
+
+    return (
+      <CardStepsView
+        title={title}
+        subtitle={subtitle}
+        steps={steps}
+        headingDesktopLines={headingDesktopLines}
+        schemaJson={schemaJson}
+      />
+    );
+  },
+);
+
+CardStepsContainer.displayName = "CardSteps";
+
+export default CardStepsContainer;
@@ -0,0 +1,18 @@
+/** One row in the section grid; rendered with `cards/Step`. */
+export interface CardStepsItem {
+  text: string;
+  iconShape?: string;
+  iconColor?: string;
+}
+
+export interface CardStepsProps {
+  title: string;
+  subtitle: string;
+  steps: CardStepsItem[];
+  /** Large-screen heading split: line 1–3 (e.g. How / CommunityRule / helps). */
+  headingDesktopLines?: readonly [string, string, string];
+}
+
+export interface CardStepsViewProps extends CardStepsProps {
+  schemaJson: string;
+}
@@ -0,0 +1,61 @@
+"use client";
+
+import { useTranslation } from "../../../contexts/MessagesContext";
+import SectionHeader from "../../type/SectionHeader";
+import Step from "../../cards/Step";
+import Button from "../../buttons/Button";
+import type { CardStepsViewProps } from "./CardSteps.types";
+
+function CardStepsView({
+  title,
+  subtitle,
+  steps,
+  headingDesktopLines,
+  schemaJson,
+}: CardStepsViewProps) {
+  const t = useTranslation();
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: schemaJson }}
+      />
+      <section className="bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] sm:py-[var(--spacing-scale-048)] sm:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)] xl:px-[var(--spacing-scale-064)]">
+        <div className="max-w-[var(--spacing-measures-max-width-lg)] mx-auto">
+          <div className="grid grid-cols-1 gap-y-[var(--spacing-scale-032)] sm:gap-y-[var(--spacing-scale-048)] lg:gap-y-[var(--spacing-scale-056)]">
+            <div>
+              <SectionHeader
+                variant="multi-line"
+                title={title}
+                subtitle={subtitle}
+                titleLg={t("cardSteps.titleLg")}
+                stackedDesktopLines={headingDesktopLines}
+              />
+            </div>
+
+            <div className="grid grid-cols-1 gap-y-[var(--spacing-scale-024)] lg:grid-cols-3 lg:gap-[var(--spacing-scale-024)]">
+              {steps.map((item, index) => (
+                <Step
+                  key={index}
+                  number={index + 1}
+                  text={item.text}
+                  iconShape={item.iconShape}
+                  iconColor={item.iconColor}
+                />
+              ))}
+            </div>
+
+            <div className="text-center">
+              <Button buttonType="outline" palette="default" size="large">
+                {t("cardSteps.buttons.seeHowItWorks")}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
+export default CardStepsView;
@@ -0,0 +1,2 @@
+export { default } from "./CardSteps.container";
+export * from "./CardSteps.types";