/** * Figma โ†” Code mapping for cf-list-item * * Figma components: "project.item", "menu.item", "subtitle" (all in list.item page) * @see https://www.figma.com/design/LPebgX2vf5Axd6yuo4umBE/CF.design--WIP-?node-id=484:22605 * * cf-list-item unifies three Figma list row variants into a single component * inspired by SwiftUI's List. The Figma page has: * - project.item: checkbox + title + actions (star, expand) + expandable detail + action bar * - menu.item: icon + label + optional description + keyboard shortcut * - subtitle: title + chevron (simple navigation row) */ export const figmaMapping = { figmaUrl: "https://www.figma.com/design/LPebgX2vf5Axd6yuo4umBE/CF.design--WIP-?node-id=484:22605", element: "cf-list-item", // How each Figma variant maps to cf-list-item usage: variants: { "subtitle (simple row)": { example: ``, }, "menu.item (command row)": { props: { label: { figmaProp: "Label", type: "string" }, description: { figmaProp: "Description", note: "Shown when showDescription=true in Figma", }, State: { codeProp: "disabled", values: { Disabled: true }, }, }, example: ` ๐Ÿ“ โŒ˜N `, }, "project.item (expandable row)": { props: { title: { codeProp: "label", type: "string" }, // NOTE: expanded requires expandable to also be set for the expansion // UI (chevron + detail slot) to render. Always pair them together. Expanded: { codeProp: "expanded", type: "boolean", staticProps: { expandable: true }, }, State: { codeProp: "disabled", values: { Disabled: true }, }, }, example: ` 3 tasks
โณ Building UI ยท 29 tokens
`, }, }, unmapped: [ "project.item checkbox (leading selection) โ€” could add a selectable prop", "project.item star/expand icon buttons โ€” use action slot composition", ], // Sub-components used within list items relatedMappings: { "tag.action โ†’ cf-badge": "see cf-card/cf-card.figma.ts", "tag.category โ†’ cf-chip": "see cf-card/cf-card.figma.ts", "Action bar โ†’ cf-alert": "see cf-alert/cf-alert.figma.ts", }, };