shkim4
031f88033d
- brand title to 한맥 디자인 시스템 - Foundation: 한맥 컬러 / 가족사 컬러 titles, Story IDs kept via explicit id - Company Colors card order 2/2/3, Foundation/Layout hidden with verification tag - sidebar order for Foundation and 조직도
37 lines
3.3 KiB
TypeScript
37 lines
3.3 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import { layoutProperties, radiusReferences, spacingReferences } from "./reference-data"
|
|
import { ReferencePage, ReferenceSection, useResolvedProperties } from "./reference"
|
|
|
|
// Compact specification page: item name, key value and preview only. PC shows every section within one screen, narrow screens stack and scroll naturally.
|
|
// Token names stay in the data (reference-data.ts) and in data-token attributes. Shortened wording (kept here for reference):
|
|
// Desktop: "Desktop Navigation · LNB 표시 · GNB desktop menu" / Mobile: "Mobile Navigation · LNB 숨김 · GNB mobile menu"
|
|
// Only verified items are shown (checked against the token definitions, CSS usage and docs on 2026-11-09):
|
|
// - "Mobile 20px" for Dashboard padding is not implemented: --hm-dashboard-padding is 34px in every viewport (docs/patterns/dashboard-layout.md).
|
|
// - --hm-radius-select is declared in default.css but has no consumer (Select uses --hm-select-radius -> --hm-radius-input), so it is not listed.
|
|
const radiusLabels: Record<string, string> = {
|
|
"--hm-radius-control-md": "Control",
|
|
"--hm-radius-button": "Button",
|
|
"--hm-radius-input": "Input",
|
|
"--hm-radius-container": "Container",
|
|
}
|
|
const shownRadiusReferences = radiusReferences.filter(property => property in radiusLabels)
|
|
|
|
function Item({ name, value, note }: { name: string; value: string; note?: string }) {
|
|
return <div><div className="hm-layout-spacing-head"><h3>{name}</h3><span className="hm-layout-value">{value}</span></div>{note ? <p className="hm-foundation-note">{note}</p> : null}</div>
|
|
}
|
|
|
|
function LayoutReferencePage() {
|
|
const values = useResolvedProperties(layoutProperties)
|
|
return <ReferencePage title="Layout">
|
|
<div className="hm-layout-ref">
|
|
<ReferenceSection title="Responsive"><div className="hm-foundation-panel hm-layout-list"><Item name="Desktop" value="≥ 1024px" note="LNB 표시" /><Item name="Mobile" value="≤ 1023px" note="LNB 숨김" /></div></ReferenceSection>
|
|
<ReferenceSection title="Spacing"><div className="hm-layout-spacing-grid">{spacingReferences.map(([property, name]) =><article className="hm-foundation-card" key={property} data-token={property}><div className="hm-layout-spacing-head"><h3>{name}</h3><span className="hm-layout-value" data-layout-value>{values[property]}</span></div><div className="hm-layout-spacing-foot"><div className="hm-foundation-spacing" style={{ width: `var(${property})` }} aria-hidden="true" /></div></article>)}</div></ReferenceSection>
|
|
<ReferenceSection title="Radius"><div className="hm-layout-radius-grid">{shownRadiusReferences.map(property => <article className="hm-foundation-card hm-layout-radius" key={property} data-token={property}><div className="hm-foundation-radius" style={{ borderRadius: `var(${property})` }} /><div className="hm-layout-spacing-head"><h3>{radiusLabels[property]}</h3><span className="hm-layout-value">{values[property]}</span></div></article>)}</div></ReferenceSection>
|
|
</div>
|
|
</ReferencePage>
|
|
}
|
|
// Hidden from the sidebar with the verification tag; the Story ID and direct URL (foundation-layout--all) stay available.
|
|
const meta = { title: "Foundation/Layout", tags: ["verification"], parameters: { layout: "fullscreen" } } satisfies Meta
|
|
export default meta
|
|
export const All: StoryObj<typeof meta> = { name: "Layout", render: () => <LayoutReferencePage /> }
|