44 lines
1.9 KiB
TypeScript
44 lines
1.9 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import { CenterTitle, CENTER_TITLE_COMPOSITIONS, type CenterTitleComposition } from "@hm-design/center-graphic"
|
|
import { CenterTitleReferenceDemo } from "@hm-design/center-graphic/reference"
|
|
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
|
import { withRepresentation } from "./center-shared"
|
|
|
|
// Owner: ui-viz docs/components/center-title.md. Title Resolution B numeric output is TBD; the per-Type palette is SCOPED_DESIGN_APPROVAL.
|
|
const meta = {
|
|
title: "노선도/Title",
|
|
id: "center-graphic-title",
|
|
component: CenterTitle,
|
|
parameters: { layout: "padded" },
|
|
} satisfies Meta<typeof CenterTitle>
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
// Representative Story: the four title types. Named after the area so Storybook shows it as a single sidebar item.
|
|
// Common Story page. The CENTER representation wraps only the specimen, so the page title is never scaled with the graphic.
|
|
export const Compositions: Story = {
|
|
name: "Title",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader title="Title" />
|
|
<StorySection title="Overview">
|
|
{withRepresentation(() => <CenterTitleReferenceDemo />)}
|
|
</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|
|
|
|
export const Playground: Story = {
|
|
tags: ["verification"],
|
|
decorators: [withRepresentation],
|
|
args: { composition: "routeProjectNameRoute", context: "서산영덕선", projectName: "대산~당진 건설공사", routeClassification: "고속국도 제30호", projectRoute: "L=25.36km" },
|
|
argTypes: {
|
|
composition: {
|
|
control: { type: "select", labels: Object.fromEntries(Object.entries(CENTER_TITLE_COMPOSITIONS).map(([key, { type, label }]) => [key, `${type} · ${label}`])) },
|
|
options: Object.keys(CENTER_TITLE_COMPOSITIONS) as CenterTitleComposition[],
|
|
},
|
|
},
|
|
render: (args) => <CenterTitle {...args} />,
|
|
}
|