diff --git a/docs/stories/components/decorator.tsx b/docs/stories/components/decorator.tsx index 775bfbf04..0f5ceabb5 100644 --- a/docs/stories/components/decorator.tsx +++ b/docs/stories/components/decorator.tsx @@ -1,20 +1,31 @@ import type { Decorator } from "@storybook/react"; +import type { DetailedHTMLProps, HtmlHTMLAttributes } from "react"; const STORY_LIGHT_THEME = "Light Theme"; const STORY_DARK_THEME = "Dark Theme"; const FONT_SCALING = "Font Scaling"; +const DEFAULT_PROPERTIES: DetailedHTMLProps< + HtmlHTMLAttributes, + HTMLHtmlElement +> & { + [key: string]: unknown; +} = { + lang: "ko", + "data-seed-scale-letter-spacing": "ios", + style: { + display: "flex", + flexDirection: "column", + padding: "0 20px", + fontFamily: `-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`, + }, +}; + export const SeedThemeDecorator: Decorator = (Story, ctx) => { if (ctx.name === STORY_LIGHT_THEME) { return ( - + ); @@ -22,13 +33,7 @@ export const SeedThemeDecorator: Decorator = (Story, ctx) => { if (ctx.name === STORY_DARK_THEME) { return ( - + ); @@ -49,16 +54,10 @@ export const SeedThemeDecorator: Decorator = (Story, ctx) => { return ( @@ -66,12 +65,7 @@ export const SeedThemeDecorator: Decorator = (Story, ctx) => { } return ( - + );