diff --git a/packages/core/lib/components/CriticalAlert.tsx b/packages/core/lib/components/CriticalAlert.tsx new file mode 100644 index 0000000..040c81f --- /dev/null +++ b/packages/core/lib/components/CriticalAlert.tsx @@ -0,0 +1,239 @@ +import { colors } from '../colors/color'; +import { Color } from '../colors/color.type'; +import { Label } from './Label'; +import { LinkButton } from './LinkButton'; + +type AlertVariant = 'danger' | 'ok' | 'info'; + +export type CriticalAlertProps = { + text: string; + variant: AlertVariant; + link?: string; + title?: string; + className?: string; +}; + +//TODO: need i18n +const ALERT_TAG_MAP: Record = { + danger: '긴급', + ok: '안전', + info: '안내', +} as const; + +const variantStyles: Record< + NonNullable, + { + fill: { backgroundColor: string; color: Color }; + } +> = { + info: { + fill: { backgroundColor: colors.primary70, color: 'gray-90' }, + }, + ok: { + fill: { backgroundColor: colors.success, color: 'success-70' }, + }, + danger: { + fill: { backgroundColor: colors.danger, color: 'danger-70' }, + }, +}; + +export const CriticalAlert = ({ + text, + variant, + link, + title, + className, +}: CriticalAlertProps) => { + return ( +
+
+ + +
+ {link && } +
+
+ {link && ( + + + + )} +
+
+
+ ); +}; + +const UrgentBadge = ({ variant }: { variant: AlertVariant }) => { + const { backgroundColor } = variantStyles[variant].fill; + const tag = ALERT_TAG_MAP[variant]; + + return ( + + {variant === 'info' && } + {variant === 'ok' && } + {variant === 'danger' && } + + + ); +}; + +const MoreLinkButton = ({ link, title }: { link: string; title?: string }) => { + return ( + + + + + ); +}; + +const InfoIcon: React.FC = () => ( + + + + + + + +); + +const DangerIcon: React.FC = () => ( + + + + + +); + +const OkIcon: React.FC = () => ( + + + + + +); + +const ArrowIcon: React.FC = () => ( + + + + +); diff --git a/packages/core/lib/index.ts b/packages/core/lib/index.ts index 017f343..14bee94 100644 --- a/packages/core/lib/index.ts +++ b/packages/core/lib/index.ts @@ -29,6 +29,7 @@ import { FileUpload } from './components/FileUpload'; import { Calendar } from './components/Calendar'; import { Select } from './components/Select'; import { Masthead } from './components/Masthead'; +import { CriticalAlert } from './components/CriticalAlert'; export { Display, Heading, Title, Body, Detail, Label, Link, colors }; export { @@ -53,4 +54,5 @@ export { Calendar, Select, Masthead, + CriticalAlert, }; diff --git a/stories/core/CriticalAlert.stories.ts b/stories/core/CriticalAlert.stories.ts new file mode 100644 index 0000000..5fedb76 --- /dev/null +++ b/stories/core/CriticalAlert.stories.ts @@ -0,0 +1,41 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { fn } from '@storybook/test'; +import { CriticalAlert } from '../../packages/core/lib'; + +export default { + title: 'Components/CriticalAlert', + component: CriticalAlert, + tags: ['autodocs'], + parameters: { + backgrounds: { default: 'dark' } + }, +} as Meta; + +type Story = StoryObj; + +export const Danger: Story = { + args: { + text: '미세먼지 노출 시 철저한 위생관리로 건강관리에 유의바랍니다.', + variant: 'danger', + link: 'https://github.com/KRDS-community/krds-react', + title: 'krds-react로 이동', + }, +}; + +export const Info: Story = { + args: { + text: '미세먼지 노출 시 철저한 위생관리로 건강관리에 유의바랍니다.', + variant: 'info', + link: 'https://github.com/KRDS-community/krds-react', + title: 'krds-react로 이동', + }, +}; + +export const Ok: Story = { + args: { + text: '미세먼지 노출 시 철저한 위생관리로 건강관리에 유의바랍니다.', + variant: 'ok', + link: 'https://github.com/KRDS-community/krds-react', + title: 'krds-react로 이동', + }, +};