-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into feat/select
- Loading branch information
Showing
48 changed files
with
1,258 additions
and
194 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,5 @@ | ||
| { | ||
| "typescript.tsdk": "node_modules/typescript/lib" | ||
| "typescript.tsdk": "node_modules/typescript/lib", | ||
| "editor.formatOnSave": true, | ||
| "editor.defaultFormatter": "esbenp.prettier-vscode" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import { Callout } from "@sopt-makers/ui"; | ||
| import { Meta, StoryObj } from "@storybook/react"; | ||
|
|
||
| interface CalloutProps { | ||
| children: React.ReactNode; | ||
| type: "danger" | "information" | "warning"; | ||
| hasIcon?: boolean; | ||
| buttonLabel?: string; | ||
| isButtonDisabled?: boolean; | ||
| onClick?: () => void; | ||
| } | ||
|
|
||
| export default { | ||
| title: "Components/Callout", | ||
| component: Callout, | ||
| tags: ["autodocs"], | ||
| argTypes: { | ||
| type: { control: 'radio', options: ['danger', 'information', 'warning'] }, | ||
| } | ||
| } as Meta<CalloutProps>; | ||
|
|
||
| // danger 콜아웃 스토리 | ||
| export const Danger: StoryObj<CalloutProps> = { | ||
| args: { | ||
| children: "hasIcon 옵션으로 통해 아이콘을 표시할 수 있어요", | ||
| type: "danger", | ||
| hasIcon: false, | ||
| }, | ||
| }; | ||
| // information 콜아웃 스토리 | ||
| export const Information: StoryObj<CalloutProps> = { | ||
| args: { | ||
| children: "hasIcon 옵션으로 통해 아이콘을 표시할 수 있어요", | ||
| type: "information", | ||
| hasIcon: false, | ||
| }, | ||
| }; | ||
| // warning 콜아웃 스토리 | ||
| export const Warning: StoryObj<CalloutProps> = { | ||
| args: { | ||
| children: "hasIcon 옵션으로 통해 아이콘을 표시할 수 있어요", | ||
| type: "warning", | ||
| hasIcon: false, | ||
| }, | ||
| }; | ||
|
|
||
| // warning+icon+button 콜아웃 스토리 | ||
| export const CalloutWithBtn: StoryObj<CalloutProps> = { | ||
| args: { | ||
| children: ( | ||
| <> | ||
| 버튼이 있는 경우 hasIcon과 무관하게 아이콘이 항상 표시돼요. <br /> | ||
| isButtonDisabled 옵션으로 disabled state를 확인해보세요. | ||
| </> | ||
| ), | ||
| type: "warning", | ||
| hasIcon: true, | ||
| buttonLabel: "hover, press 해보세요!", | ||
| isButtonDisabled: false, | ||
| }, | ||
| }; | ||
|
|
||
| // 여러줄 텍스트 콜아웃 스토리 | ||
| export const CalloutWithLongText: StoryObj<CalloutProps> = { | ||
| args: { | ||
| children: | ||
| "Facebook 정책이 변경되어, 앞으로 Facebook 로그인이 불가해요. 다른 계정으로 재설정 부탁드려요. Facebook 정책이 변경되어, 앞으로 Facebook 로그인이 불가해요. 다른 계정으로 재설정 부탁드려요.", | ||
| type: "information", | ||
| hasIcon: true, | ||
| buttonLabel: "소셜 계정 재설정하기", | ||
| isButtonDisabled: false, | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import { Meta, StoryObj } from '@storybook/react'; | ||
| import { Chip } from '@sopt-makers/ui'; | ||
| import { IconCheck, IconAlarmClock } from '@sopt-makers/icons'; | ||
|
|
||
| interface ChipOwnProps { | ||
| iconColor?: string; | ||
| size?: 'sm' | 'md'; | ||
| active?: boolean; | ||
| LeftIcon?: React.ComponentType; | ||
| RightIcon?: React.ComponentType; | ||
| } | ||
|
|
||
| type ChipStoryProps = ChipOwnProps & { children: string }; | ||
|
|
||
| export default { | ||
| title: 'Components/Chip', | ||
| component: Chip, | ||
| tags: ['autodocs'], | ||
| argTypes: { | ||
| size: { control: 'radio', options: ['sm', 'md'] }, | ||
| iconColor: { control: 'color' }, | ||
| LeftIcon: { control: false }, | ||
| RightIcon: { control: false }, | ||
| } | ||
| } as Meta<ChipStoryProps>; | ||
|
|
||
| // 기본 chip 스토리 | ||
| export const Default: StoryObj<ChipStoryProps> = { | ||
| args: { | ||
| children: 'Default Chip', | ||
| size: 'sm', | ||
| active: false, | ||
| }, | ||
| }; | ||
|
|
||
| // active chip 스토리 | ||
| export const Active: StoryObj<ChipStoryProps> = { | ||
| args: { | ||
| children: 'Active Chip', | ||
| size: 'md', | ||
| active: true, | ||
| }, | ||
| }; | ||
|
|
||
| // left icon (with color) chip 스토리 | ||
| export const LeftIcon: StoryObj<ChipStoryProps> = { | ||
| args: { | ||
| children: 'Chip with a LeftIcon', | ||
| size: 'sm', | ||
| active: false, | ||
| LeftIcon: IconCheck, | ||
| }, | ||
| }; | ||
|
|
||
| // colored right icon chip 스토리 | ||
| export const RightIconWithColor: StoryObj<ChipStoryProps> = { | ||
| args: { | ||
| children: 'Chip with a colored RightIcon', | ||
| iconColor: '#cd24ea', | ||
| size: 'sm', | ||
| active: false, | ||
| RightIcon: IconAlarmClock, | ||
| }, | ||
| }; |
Oops, something went wrong.