shkim4
625cdf0045
Deploy Storybook / deploy (push) Successful in 53s
Typography: drop the page intro, section notes, the Font Stack details and the per-specimen source path / size list that repeated the computed summary. Layout: drop the intro, section notes, CSS source paths, the boundary and QA preset notes, the current preview line and the Grid / Container note. ReferencePage intro and ReferenceSection note become optional; Color keeps its text.
21 lines
1.6 KiB
TypeScript
21 lines
1.6 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import { typographyProperties, typographyReferences } from "./reference-data"
|
|
import { ReferencePage, ReferenceSection, Specimen, useResolvedProperties } from "./reference"
|
|
|
|
const weights = [
|
|
{ property: "--hm-input-font-weight", label: "Regular" },
|
|
{ property: "--hm-font-weight-medium", label: "Medium" },
|
|
{ property: "--hm-font-weight-bold", label: "Bold" },
|
|
]
|
|
function TypographyReferencePage() {
|
|
const values = useResolvedProperties(typographyProperties)
|
|
return <ReferencePage title="Typography">
|
|
<ReferenceSection title="Font Family"><div className="hm-foundation-panel"><p>Noto Sans KR → 맑은 고딕 → 시스템 sans-serif</p></div></ReferenceSection>
|
|
<ReferenceSection title="Font Weight"><div className="hm-foundation-grid">{weights.map(({ property, label }) => <article className="hm-foundation-card" key={property}><code>{property}</code><p>{values[property]} — {label}</p><p style={{ fontWeight: `var(${property})` }}>한맥 프로젝트<br />Hanmac Project<br />0123456789</p></article>)}</div></ReferenceSection>
|
|
<ReferenceSection title="Component Specimens"><div className="hm-foundation-specimens">{typographyReferences.map(item => <article className="hm-foundation-panel" key={item.label}><h3>{item.label}</h3><Specimen {...item} /></article>)}</div></ReferenceSection>
|
|
</ReferencePage>
|
|
}
|
|
const meta = { title: "Foundation/Typography", parameters: { layout: "fullscreen" } } satisfies Meta
|
|
export default meta
|
|
export const All: StoryObj<typeof meta> = { name: "Typography", render: () => <TypographyReferencePage /> }
|