-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: button 타입 설정, Chip 컴포넌트 Compound 구성 * feat: Chip 모양새 거의 다 다듬어 감 * feat: Chip Storybook 문서 다듬기 * chore: 주석 제거 * chore: ally 테스트 통과하기 위해 * chore: 접근성 테스트 직접 해보기 * chore: 코드리뷰 반영 * chore:코드리뷰 반영2 * refac: 디자인 명세 교체에 따른 Chip 컴포넌트 동작 방식 수정 * refac: disabled 속성 추가 * chore: 오타 수정 및 docs 테스트 * fix: 빌드 에러 제거 * chore: displayName 추가 * chore: 버전업 * chore: 없어졌던 clickable 추가 * feat: clickable * fix: 모든 내용 해결 * fix: 코드리뷰 반영 * fix: 코드리뷰 반영 * chore: eslint 해결? * fix: ref 타입 미정 * fix: 마지막 코드리뷰 * fix: 디펜던시 수정 * fix: a11y 설정 변경 * fix: test-runner 설정 변경
- Loading branch information
Showing
17 changed files
with
635 additions
and
6 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 |
|---|---|---|
|
|
@@ -42,4 +42,4 @@ styled-system-studio | |
|
|
||
| *storybook.log | ||
|
|
||
| .eslintcache | ||
| eslintcache | ||
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
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
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,138 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
|
|
||
| import Chip from "@/components/Chip"; | ||
|
|
||
| const meta = { | ||
| title: "UI/Chip", | ||
| component: Chip, | ||
| tags: ["autodocs"], | ||
| parameters: { | ||
| componentSubtitle: "칩 컴포넌트", | ||
| a11y: { | ||
| config: { | ||
| rules: [{ id: "color-contrast", enabled: false }], | ||
| }, | ||
| }, | ||
| }, | ||
|
|
||
| argTypes: { | ||
| disabled: { | ||
| description: "disabled는 칩 버튼이 비활성화 상태인지 여부를 나타냅니다.", | ||
| table: { | ||
| type: { summary: "boolean" }, | ||
| defaultValue: { summary: "false" }, | ||
| }, | ||
| control: { | ||
| type: "boolean", | ||
| }, | ||
| }, | ||
| defaultChecked: { | ||
| description: | ||
| "defaultChecked는 칩 버튼이 처음에 눌려 있는지 여부를 나타냅니다.", | ||
| table: { | ||
| type: { summary: "boolean" }, | ||
| defaultValue: { summary: "false" }, | ||
| }, | ||
| control: { | ||
| type: "boolean", | ||
| }, | ||
| }, | ||
|
|
||
| isChecked: { | ||
| description: "isChecked는 외부에서 제어할 활성 상태를 나타냅니다.", | ||
| table: { | ||
| type: { summary: "boolean" }, | ||
| defaultValue: { summary: "false" }, | ||
| }, | ||
| control: { | ||
| type: "boolean", | ||
| }, | ||
| }, | ||
| clickable: { | ||
| description: "Toggle이 가능한 칩인지에 대한 여부를 확인합니다.", | ||
| table: { | ||
| type: { summary: "boolean" }, | ||
| defaultValue: { summary: "true" }, | ||
| }, | ||
| control: { | ||
| type: "boolean", | ||
| }, | ||
| }, | ||
| label: { | ||
| description: "칩에 들어가게 될 텍스트입니다.", | ||
| table: { | ||
| type: { summary: "string" }, | ||
| }, | ||
| type: { | ||
| name: "string", | ||
| required: true, | ||
| }, | ||
| control: { | ||
| type: "text", | ||
| }, | ||
| }, | ||
| onClick: { | ||
| description: "칩 클릭 시 동작할 이벤트입니다.", | ||
| table: { | ||
| type: { summary: "() => void" }, | ||
| control: { | ||
| type: "function", | ||
| }, | ||
| }, | ||
| }, | ||
| onDelete: { | ||
| description: "칩에 대한 필터를 제거하기 위한 함수입니다.", | ||
| table: { | ||
| type: { summary: "() => void" }, | ||
| control: { | ||
| type: "function", | ||
| }, | ||
| }, | ||
| }, | ||
| onKeyDown: { | ||
| description: | ||
| "칩이 포커스됐을 때 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트입니다.", | ||
| table: { | ||
| type: { summary: "() => void" }, | ||
| control: { | ||
| type: "function", | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| } satisfies Meta<typeof Chip>; | ||
|
|
||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| export const Default: Story = { | ||
| args: { | ||
| label: "Chip", | ||
| as: "button", | ||
| clickable: true, | ||
| }, | ||
| }; | ||
|
|
||
| export const DivChip: Story = { | ||
| args: { | ||
| label: "Chip", | ||
| clickable: false, | ||
| as: "div", | ||
| }, | ||
| }; | ||
| export const DisabledChip: Story = { | ||
| args: { | ||
| label: "Chip", | ||
| clickable: true, | ||
| disabled: true, | ||
| as: "button", | ||
| }, | ||
| }; | ||
|
|
||
| export const NonClickable: Story = { | ||
| args: { | ||
| label: "Chip", | ||
| clickable: false, | ||
| }, | ||
| }; |
Oops, something went wrong.