Skip to content

Commit

Permalink
feat(docs): link, actionable, dismissible inline banner 스토리를 추가해요
Browse files Browse the repository at this point in the history
  • Loading branch information
te6-in committed Nov 20, 2024
1 parent 24e8fae commit e911581
Show file tree
Hide file tree
Showing 7 changed files with 160 additions and 40 deletions.
8 changes: 4 additions & 4 deletions docs/components/example/index.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"actionable-inline-banner-informative-weak": "import { ActionableInlineBanner } from \"seed-design/ui/actionable-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function ActionableInlineBannerInformativeWeak() {\n return (\n <ActionableInlineBanner\n onClick={() => window.alert(\"Hello World\")}\n variant=\"informativeWeak\"\n icon={<IconExclamationmarkCircleFill />}\n >\n 사업자 정보를 등록해주세요.\n </ActionableInlineBanner>\n );\n}",
"actionable-inline-banner-neutral-weak": "import { ActionableInlineBanner } from \"seed-design/ui/actionable-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function ActionableInlineBannerNeutralWeak() {\n return (\n <ActionableInlineBanner\n onClick={() => window.alert(\"Hello World\")}\n variant=\"neutralWeak\"\n icon={<IconExclamationmarkCircleFill />}\n >\n 사업자 정보를 등록해주세요.\n </ActionableInlineBanner>\n );\n}",
"actionable-inline-banner-positive-weak": "import { ActionableInlineBanner } from \"seed-design/ui/actionable-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function ActionableInlineBannerPositiveWeak() {\n return (\n <ActionableInlineBanner\n onClick={() => window.alert(\"Hello World\")}\n variant=\"positiveWeak\"\n icon={<IconExclamationmarkCircleFill />}\n >\n 사업자 정보를 등록해주세요.\n </ActionableInlineBanner>\n );\n}",
"actionable-inline-banner-preview": "import { ActionableInlineBanner } from \"seed-design/ui/actionable-inline-banner\";\n\nexport default function ActionableInlineBannerPreview() {\n const onClick = () => window.alert(\"Hello World\");\n\n return (\n <div className=\"flex flex-col gap-3\">\n <ActionableInlineBanner onClick={onClick}>ullamco</ActionableInlineBanner>\n <ActionableInlineBanner onClick={onClick}>\n Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet.\n </ActionableInlineBanner>\n </div>\n );\n}",
"actionable-inline-banner-preview": "import { ActionableInlineBanner } from \"seed-design/ui/actionable-inline-banner\";\n\nexport default function ActionableInlineBannerPreview() {\n const onClick = () => window.alert(\"Hello World\");\n\n return (\n <div className=\"flex flex-col gap-3 w-full\">\n <ActionableInlineBanner onClick={onClick}>ullamco</ActionableInlineBanner>\n <ActionableInlineBanner onClick={onClick}>\n Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet.\n </ActionableInlineBanner>\n </div>\n );\n}",
"actionable-inline-banner-text-only": "import { ActionableInlineBanner } from \"seed-design/ui/actionable-inline-banner\";\n\nexport default function ActionableInlineBannerTextOnly() {\n return (\n <ActionableInlineBanner variant=\"informativeWeak\" onClick={() => window.alert(\"Hello World\")}>\n 다른 사람과 예약된 물품이 있어요.\n </ActionableInlineBanner>\n );\n}",
"actionable-inline-banner-warning-solid": "import { ActionableInlineBanner } from \"seed-design/ui/actionable-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function ActionableInlineBannerWarningSolid() {\n return (\n <ActionableInlineBanner\n onClick={() => window.alert(\"Hello World\")}\n variant=\"warningSolid\"\n icon={<IconExclamationmarkCircleFill />}\n >\n 사업자 정보를 등록해주세요.\n </ActionableInlineBanner>\n );\n}",
"actionable-inline-banner-warning-weak": "import { ActionableInlineBanner } from \"seed-design/ui/actionable-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function ActionableInlineBannerWarningWeak() {\n return (\n <ActionableInlineBanner\n onClick={() => window.alert(\"Hello World\")}\n variant=\"warningWeak\"\n icon={<IconExclamationmarkCircleFill />}\n >\n 사업자 정보를 등록해주세요.\n </ActionableInlineBanner>\n );\n}",
Expand Down Expand Up @@ -52,7 +52,7 @@
"dismissible-inline-banner-informative-weak": "import { DismissibleInlineBanner } from \"seed-design/ui/dismissible-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function DismissibleInlineBannerInformativeWeak() {\n return (\n <DismissibleInlineBanner\n dismissAriaLabel=\"닫기\"\n variant=\"informativeWeak\"\n icon={<IconExclamationmarkCircleFill />}\n >\n 사업자 정보를 등록해주세요.\n </DismissibleInlineBanner>\n );\n}",
"dismissible-inline-banner-neutral-weak": "import { DismissibleInlineBanner } from \"seed-design/ui/dismissible-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function DismissibleInlineBannerNeutralWeak() {\n return (\n <DismissibleInlineBanner\n dismissAriaLabel=\"닫기\"\n variant=\"neutralWeak\"\n icon={<IconExclamationmarkCircleFill />}\n >\n 사업자 정보를 등록해주세요.\n </DismissibleInlineBanner>\n );\n}",
"dismissible-inline-banner-positive-weak": "import { DismissibleInlineBanner } from \"seed-design/ui/dismissible-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function DismissibleInlineBannerPositiveWeak() {\n return (\n <DismissibleInlineBanner\n dismissAriaLabel=\"닫기\"\n variant=\"positiveWeak\"\n icon={<IconExclamationmarkCircleFill />}\n >\n 사업자 정보를 등록해주세요.\n </DismissibleInlineBanner>\n );\n}",
"dismissible-inline-banner-preview": "import { DismissibleInlineBanner } from \"seed-design/ui/dismissible-inline-banner\";\n\nexport default function DismissibleInlineBannerPreview() {\n const onDismiss = () => window.alert(\"닫기 버튼 클릭\");\n\n return (\n <div className=\"flex flex-col gap-3\">\n <DismissibleInlineBanner dismissAriaLabel=\"닫기\" onDismiss={onDismiss}>\n ullamco\n </DismissibleInlineBanner>\n <DismissibleInlineBanner dismissAriaLabel=\"닫기\" onDismiss={onDismiss}>\n Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet.\n </DismissibleInlineBanner>\n </div>\n );\n}",
"dismissible-inline-banner-preview": "import { DismissibleInlineBanner } from \"seed-design/ui/dismissible-inline-banner\";\n\nexport default function DismissibleInlineBannerPreview() {\n const onDismiss = () => window.alert(\"닫기 버튼 클릭\");\n\n return (\n <div className=\"flex flex-col gap-3 w-full\">\n <DismissibleInlineBanner dismissAriaLabel=\"닫기\" onDismiss={onDismiss}>\n ullamco\n </DismissibleInlineBanner>\n <DismissibleInlineBanner dismissAriaLabel=\"닫기\" onDismiss={onDismiss}>\n Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet.\n </DismissibleInlineBanner>\n </div>\n );\n}",
"dismissible-inline-banner-text-only": "import { DismissibleInlineBanner } from \"seed-design/ui/dismissible-inline-banner\";\n\nexport default function DismissibleInlineBannerTextOnly() {\n return (\n <DismissibleInlineBanner dismissAriaLabel=\"닫기\" variant=\"informativeWeak\">\n 다른 사람과 예약된 물품이 있어요.\n </DismissibleInlineBanner>\n );\n}",
"dismissible-inline-banner-warning-solid": "import { DismissibleInlineBanner } from \"seed-design/ui/dismissible-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function DismissibleInlineBannerWarningSolid() {\n return (\n <DismissibleInlineBanner\n dismissAriaLabel=\"닫기\"\n variant=\"warningSolid\"\n icon={<IconExclamationmarkCircleFill />}\n >\n 사업자 정보를 등록해주세요.\n </DismissibleInlineBanner>\n );\n}",
"dismissible-inline-banner-warning-weak": "import { DismissibleInlineBanner } from \"seed-design/ui/dismissible-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function DismissibleInlineBannerWarningWeak() {\n return (\n <DismissibleInlineBanner\n dismissAriaLabel=\"닫기\"\n variant=\"warningWeak\"\n icon={<IconExclamationmarkCircleFill />}\n >\n 사업자 정보를 등록해주세요.\n </DismissibleInlineBanner>\n );\n}",
Expand All @@ -65,7 +65,7 @@
"inline-banner-informative-weak": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function InlineBannerInformativeWeak() {\n return (\n <InlineBanner variant=\"informativeWeak\" icon={<IconExclamationmarkCircleFill />}>\n 사업자 정보를 등록해주세요.\n </InlineBanner>\n );\n}",
"inline-banner-neutral-weak": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function InlineBannerNeutralWeak() {\n return (\n <InlineBanner variant=\"neutralWeak\" icon={<IconExclamationmarkCircleFill />}>\n 사업자 정보를 등록해주세요.\n </InlineBanner>\n );\n}",
"inline-banner-positive-weak": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function InlineBannerPositiveWeak() {\n return (\n <InlineBanner variant=\"positiveWeak\" icon={<IconExclamationmarkCircleFill />}>\n 사업자 정보를 등록해주세요.\n </InlineBanner>\n );\n}",
"inline-banner-preview": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\n\nexport default function InlineBannerPreview() {\n return (\n <div className=\"flex flex-col gap-3\">\n <InlineBanner>ullamco</InlineBanner>\n <InlineBanner>\n Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet.\n </InlineBanner>\n </div>\n );\n}",
"inline-banner-preview": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\n\nexport default function InlineBannerPreview() {\n return (\n <div className=\"flex flex-col gap-3 w-full\">\n <InlineBanner>ullamco</InlineBanner>\n <InlineBanner>\n Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet.\n </InlineBanner>\n </div>\n );\n}",
"inline-banner-text-only": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\n\nexport default function InlineBannerTextOnly() {\n return <InlineBanner variant=\"informativeWeak\">다른 사람과 예약된 물품이 있어요.</InlineBanner>;\n}",
"inline-banner-warning-solid": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function InlineBannerWarningSolid() {\n return (\n <InlineBanner variant=\"warningSolid\" icon={<IconExclamationmarkCircleFill />}>\n 사업자 정보를 등록해주세요.\n </InlineBanner>\n );\n}",
"inline-banner-warning-weak": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function InlineBannerWarningWeak() {\n return (\n <InlineBanner variant=\"warningWeak\" icon={<IconExclamationmarkCircleFill />}>\n 사업자 정보를 등록해주세요.\n </InlineBanner>\n );\n}",
Expand All @@ -78,7 +78,7 @@
"link-inline-banner-informative-weak": "import { LinkInlineBanner } from \"seed-design/ui/link-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function LinkInlineBannerInformativeWeak() {\n return (\n <LinkInlineBanner\n linkLabel=\"자세히 보기\"\n onLinkLabelClick={() => window.alert(\"Hello World\")}\n variant=\"informativeWeak\"\n icon={<IconExclamationmarkCircleFill />}\n >\n 사업자 정보를 등록해주세요.\n </LinkInlineBanner>\n );\n}",
"link-inline-banner-neutral-weak": "import { LinkInlineBanner } from \"seed-design/ui/link-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function LinkInlineBannerNeutralWeak() {\n return (\n <LinkInlineBanner\n linkLabel=\"자세히 보기\"\n onLinkLabelClick={() => window.alert(\"Hello World\")}\n variant=\"neutralWeak\"\n icon={<IconExclamationmarkCircleFill />}\n >\n 사업자 정보를 등록해주세요.\n </LinkInlineBanner>\n );\n}",
"link-inline-banner-positive-weak": "import { LinkInlineBanner } from \"seed-design/ui/link-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function LinkInlineBannerPositiveWeak() {\n return (\n <LinkInlineBanner\n linkLabel=\"자세히 보기\"\n onLinkLabelClick={() => window.alert(\"Hello World\")}\n variant=\"positiveWeak\"\n icon={<IconExclamationmarkCircleFill />}\n >\n 사업자 정보를 등록해주세요.\n </LinkInlineBanner>\n );\n}",
"link-inline-banner-preview": "import { LinkInlineBanner } from \"seed-design/ui/link-inline-banner\";\n\nexport default function LinkInlineBannerPreview() {\n return (\n <div className=\"flex flex-col gap-3\">\n <LinkInlineBanner linkLabel=\"Details\" onLinkLabelClick={() => window.alert(\"Hello World\")}>\n ullamco\n </LinkInlineBanner>\n <LinkInlineBanner\n linkLabel=\"자세히 보기\"\n onLinkLabelClick={() => window.alert(\"Hello World\")}\n >\n Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet.\n </LinkInlineBanner>\n </div>\n );\n}",
"link-inline-banner-preview": "import { LinkInlineBanner } from \"seed-design/ui/link-inline-banner\";\n\nexport default function LinkInlineBannerPreview() {\n return (\n <div className=\"flex flex-col gap-3 w-full\">\n <LinkInlineBanner linkLabel=\"Details\" onLinkLabelClick={() => window.alert(\"Hello World\")}>\n ullamco\n </LinkInlineBanner>\n <LinkInlineBanner\n linkLabel=\"자세히 보기\"\n onLinkLabelClick={() => window.alert(\"Hello World\")}\n >\n Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet.\n </LinkInlineBanner>\n </div>\n );\n}",
"link-inline-banner-text-only": "import { LinkInlineBanner } from \"seed-design/ui/link-inline-banner\";\n\nexport default function LinkInlineBannerTextOnly() {\n return (\n <LinkInlineBanner\n linkLabel=\"자세히 보기\"\n onLinkLabelClick={() => window.alert(\"Hello World\")}\n variant=\"informativeWeak\"\n >\n 다른 사람과 예약된 물품이 있어요.\n </LinkInlineBanner>\n );\n}",
"link-inline-banner-warning-solid": "import { LinkInlineBanner } from \"seed-design/ui/link-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function LinkInlineBannerWarningSolid() {\n return (\n <LinkInlineBanner\n linkLabel=\"자세히 보기\"\n onLinkLabelClick={() => window.alert(\"Hello World\")}\n variant=\"warningSolid\"\n icon={<IconExclamationmarkCircleFill />}\n >\n 사업자 정보를 등록해주세요.\n </LinkInlineBanner>\n );\n}",
"link-inline-banner-warning-weak": "import { LinkInlineBanner } from \"seed-design/ui/link-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function LinkInlineBannerWarningWeak() {\n return (\n <LinkInlineBanner\n linkLabel=\"자세히 보기\"\n onLinkLabelClick={() => window.alert(\"Hello World\")}\n variant=\"warningWeak\"\n icon={<IconExclamationmarkCircleFill />}\n >\n 사업자 정보를 등록해주세요.\n </LinkInlineBanner>\n );\n}",
Expand Down
37 changes: 37 additions & 0 deletions docs/stories/ActionableInlineBanner.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import type { Meta, StoryObj } from "@storybook/react";

import { ActionableInlineBanner } from "seed-design/ui/actionable-inline-banner";

import { inlineBannerVariantMap } from "@seed-design/recipe/inlineBanner";
import { VariantTable } from "./components/variant-table";
import { IconBellLine } from "@daangn/react-monochrome-icon";
import { SeedThemeDecorator } from "./components/decorator";

const meta = {
component: ActionableInlineBanner,
decorators: [SeedThemeDecorator],
} satisfies Meta<typeof ActionableInlineBanner>;

export default meta;

type Story = StoryObj<typeof meta>;

const CommonStoryTemplate: Story = {
args: {
children:
"Ex do aliqua est non ea adipisicing nostrud. Exercitation ea mollit sunt magna quis quis exercitation.",
icon: <IconBellLine />,
onClick: () => {},
},
render: (args) => (
<VariantTable Component={meta.component} variantMap={inlineBannerVariantMap} {...args} />
),
};

export const LightTheme: Story = CommonStoryTemplate;

export const DarkTheme: Story = CommonStoryTemplate;

export const FontScalingExtraSmall: Story = CommonStoryTemplate;

export const FontScalingExtraExtraExtraLarge: Story = CommonStoryTemplate;
37 changes: 37 additions & 0 deletions docs/stories/DismissibleInlineBanner.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import type { Meta, StoryObj } from "@storybook/react";

import { DismissibleInlineBanner } from "seed-design/ui/dismissible-inline-banner";

import { inlineBannerVariantMap } from "@seed-design/recipe/inlineBanner";
import { VariantTable } from "./components/variant-table";
import { IconBellLine } from "@daangn/react-monochrome-icon";
import { SeedThemeDecorator } from "./components/decorator";

const meta = {
component: DismissibleInlineBanner,
decorators: [SeedThemeDecorator],
} satisfies Meta<typeof DismissibleInlineBanner>;

export default meta;

type Story = StoryObj<typeof meta>;

const CommonStoryTemplate: Story = {
args: {
children:
"Ex do aliqua est non ea adipisicing nostrud. Exercitation ea mollit sunt magna quis quis exercitation.",
icon: <IconBellLine />,
dismissAriaLabel: "닫기",
},
render: (args) => (
<VariantTable Component={meta.component} variantMap={inlineBannerVariantMap} {...args} />
),
};

export const LightTheme: Story = CommonStoryTemplate;

export const DarkTheme: Story = CommonStoryTemplate;

export const FontScalingExtraSmall: Story = CommonStoryTemplate;

export const FontScalingExtraExtraExtraLarge: Story = CommonStoryTemplate;
Loading

0 comments on commit e911581

Please sign in to comment.