CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

QA pass: layout, create-flow, and About books #68

Merged
an.di merged 38 commits from adilallo/fix/CR-129-create-rule-button into main 2026-08-26 15:46:56 +00:00
Conversation 0 Commits 38 Files Changed 202
+15 -9
4 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a525b12b5c - Show all commits
app/components/type/TripleStep/TripleStep.container.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import TripleStepView from "./TripleStep.view";
import type { TripleStepProps } from "./TripleStep.types"; import type { TripleStepProps } from "./TripleStep.types";
/** /**
* Figma: **Section / Triple Step** ([22084-859405](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859405&m=dev)); type baseline ([22112-871527](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22112-871527&m=dev)); **md+** two-column + **`triple-step.svg`**. * Figma: **Section / Triple Step** ([22084-859405](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859405&m=dev)); type baseline ([22112-871527](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22112-871527&m=dev)); **md+** two-column + **`triple-step.svg`** in a 1:2 frame (tablet [22084-859257](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859257&m=dev); desktop [22084-858823](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-858823&m=dev)).
*/ */
const TripleStepContainer = memo<TripleStepProps>((props) => { const TripleStepContainer = memo<TripleStepProps>((props) => {
const reactId = useId(); const reactId = useId();
app/components/type/TripleStep/TripleStep.view.tsx
+7 -7
View File
@@ -28,10 +28,10 @@ function TripleStepView({
<section <section
data-figma-node="22084-859405" data-figma-node="22084-859405"
aria-labelledby={headingId} aria-labelledby={headingId}
className={`bg-transparent p-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-048)] lg:px-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-048)] ${className}`.trim()} className={`bg-transparent px-[var(--spacing-scale-032)] py-[var(--spacing-scale-032)] md:px-0 md:py-[var(--spacing-scale-048)] ${className}`.trim()}
> >
<div className="mx-auto grid w-full min-w-0 max-w-[560px] grid-cols-1 gap-[var(--spacing-scale-032)] md:max-w-[1400px] md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] md:items-stretch md:gap-[var(--spacing-scale-060)] lg:items-center"> <div className="mx-auto grid w-full min-w-0 max-w-[560px] grid-cols-1 items-center gap-[var(--spacing-scale-032)] md:max-w-none md:grid-cols-2 md:gap-0">
<div className="flex w-full min-w-0 flex-col gap-[var(--spacing-scale-040)] break-words md:self-start lg:self-center"> <div className="flex w-full min-w-0 flex-col gap-[var(--spacing-scale-040)] break-words md:pl-[var(--spacing-scale-032)] lg:min-w-[358px] lg:pl-[var(--spacing-scale-064)]">
<h2 <h2
id={headingId} id={headingId}
className="font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:text-large-heading" className="font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:text-large-heading"
@@ -73,16 +73,16 @@ function TripleStepView({
</div> </div>
</div> </div>
<div <div
className="hidden min-h-0 min-w-0 w-full md:flex md:items-center md:justify-center" className="relative hidden aspect-[1/2] min-w-0 w-full md:block"
aria-hidden aria-hidden
> >
<Image <Image
src={shapeSrc} src={shapeSrc}
alt="" alt=""
width={288} fill
height={576}
unoptimized unoptimized
className="pointer-events-none h-auto w-full max-w-full min-w-0 select-none object-contain" sizes="(min-width: 640px) 50vw, 100vw"
className="object-contain"
/> />
</div> </div>
</div> </div>
stories/type/TripleStep.stories.js
+1 -1
View File
@@ -23,7 +23,7 @@ export default {
docs: { docs: {
description: { description: {
component: component:
"Figma **Section / Triple Step** ([22084-859405](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859405&m=dev)); type baseline ([22112-871527](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22112-871527)). Headline uses **Large/Heading** from **md**; steps use **18px/22px** Bricolage medium + **Small/Paragraph** (14/20); outline CTA; **md+** second column shows **`triple-step.svg`**.", "Figma **Section / Triple Step** ([22084-859405](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859405&m=dev)); type baseline ([22112-871527](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22112-871527)). Headline uses **Large/Heading** from **md**; steps use **18px/22px** Bricolage medium + **Small/Paragraph** (14/20); outline CTA; **md+** right column is a 1:2 **`triple-step.svg`** frame flush to the section edge.",
}, },
}, },
}, },
tests/components/type/TripleStep.test.tsx
+6
View File
@@ -28,5 +28,11 @@ describe("TripleStep", () => {
"href", "href",
"/create", "/create",
); );
const artImg = document.querySelector(
'[data-figma-node="22084-859405"] img',
);
expect(artImg).toBeTruthy();
expect(artImg?.parentElement).toHaveClass("aspect-[1/2]");
}); });
}); });