From ea957f4f010936dcc462a30f3509b5b1fb523ba1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9A=B0=EC=88=98=EC=97=B0?= <sean123@pubg.com>
Date: Thu, 28 Dec 2023 00:48:24 +0900
Subject: [PATCH] feat(VsChip): add vs-chip component

---
 .../vlossom/.storybook/examples/style-set.ts  |  11 +
 packages/vlossom/src/assets/icons/check.ts    |   6 +
 packages/vlossom/src/assets/icons/close.ts    |   4 +-
 packages/vlossom/src/assets/icons/person.ts   |   6 +
 packages/vlossom/src/components/types.ts      |   1 +
 .../src/components/vs-chip/VsChip.scss        |  92 +++++++++
 .../vlossom/src/components/vs-chip/VsChip.vue |  81 ++++++++
 .../vs-chip/__tests__/vs-chip.test.ts         |  73 +++++++
 .../vlossom/src/components/vs-chip/index.ts   |  12 ++
 .../vs-chip/stories/VsChip.stories.ts         | 190 ++++++++++++++++++
 packages/vlossom/src/declaration/types.ts     |   3 +
 11 files changed, 477 insertions(+), 2 deletions(-)
 create mode 100644 packages/vlossom/src/assets/icons/check.ts
 create mode 100644 packages/vlossom/src/assets/icons/person.ts
 create mode 100644 packages/vlossom/src/components/vs-chip/VsChip.scss
 create mode 100644 packages/vlossom/src/components/vs-chip/VsChip.vue
 create mode 100644 packages/vlossom/src/components/vs-chip/__tests__/vs-chip.test.ts
 create mode 100644 packages/vlossom/src/components/vs-chip/index.ts
 create mode 100644 packages/vlossom/src/components/vs-chip/stories/VsChip.stories.ts

diff --git a/packages/vlossom/.storybook/examples/style-set.ts b/packages/vlossom/.storybook/examples/style-set.ts
index c54475908..1208974ae 100644
--- a/packages/vlossom/.storybook/examples/style-set.ts
+++ b/packages/vlossom/.storybook/examples/style-set.ts
@@ -8,6 +8,7 @@ import type {
     VsValueTagStyleSet,
     VsNoticeStyleSet,
     VsProgressStyleSet,
+    VsChipStyleSet,
 } from '@/components/types';
 
 const vsButton: VsButtonStyleSet = {
@@ -15,6 +16,15 @@ const vsButton: VsButtonStyleSet = {
     color: 'white',
 };
 
+const vsChip: VsChipStyleSet = {
+    backgroundColor: '#a5d6ad',
+    borderRadius: '1.2rem',
+    color: '#304d30',
+    height: '3rem',
+    minHeight: '2rem',
+    padding: '0.8rem 1.5rem',
+};
+
 const vsDivider: VsDividerStyleSet = {
     lineColor: '#7071e8',
     lineStyle: 'double',
@@ -61,6 +71,7 @@ const vsProgress: VsProgressStyleSet = {
 
 export const styleSet: StyleSet = {
     VsButton: { myStyleSet: vsButton },
+    VsChip: { myStyleSet: vsChip },
     VsDivider: { myStyleSet: vsDivider },
     VsInput: { myStyleSet: vsInput },
     VsNotice: { myStyleSet: vsNotice },
diff --git a/packages/vlossom/src/assets/icons/check.ts b/packages/vlossom/src/assets/icons/check.ts
new file mode 100644
index 000000000..6437a15f8
--- /dev/null
+++ b/packages/vlossom/src/assets/icons/check.ts
@@ -0,0 +1,6 @@
+export default {
+    template: `
+		<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+			<path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/>
+		</svg>`,
+};
diff --git a/packages/vlossom/src/assets/icons/close.ts b/packages/vlossom/src/assets/icons/close.ts
index 03502d441..234106715 100644
--- a/packages/vlossom/src/assets/icons/close.ts
+++ b/packages/vlossom/src/assets/icons/close.ts
@@ -1,6 +1,6 @@
 export default {
     template: `
-		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
-			<path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+		<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+			<path fill="currentColor" d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/>
 		</svg>`,
 };
diff --git a/packages/vlossom/src/assets/icons/person.ts b/packages/vlossom/src/assets/icons/person.ts
new file mode 100644
index 000000000..72a15c26f
--- /dev/null
+++ b/packages/vlossom/src/assets/icons/person.ts
@@ -0,0 +1,6 @@
+export default {
+    template: `
+		<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+			<path fill="currentColor" d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/>
+		</svg>`,
+};
diff --git a/packages/vlossom/src/components/types.ts b/packages/vlossom/src/components/types.ts
index f10756d95..fe497e115 100644
--- a/packages/vlossom/src/components/types.ts
+++ b/packages/vlossom/src/components/types.ts
@@ -1,4 +1,5 @@
 export type * from './vs-button';
+export type * from './vs-chip';
 export type * from './vs-container';
 export type * from './vs-divider';
 export type * from './vs-form';
diff --git a/packages/vlossom/src/components/vs-chip/VsChip.scss b/packages/vlossom/src/components/vs-chip/VsChip.scss
new file mode 100644
index 000000000..335b2b331
--- /dev/null
+++ b/packages/vlossom/src/components/vs-chip/VsChip.scss
@@ -0,0 +1,92 @@
+.pointer {
+    // TODO: reset.scss에 추가
+    cursor: pointer;
+}
+
+.vs-chip {
+    box-sizing: border-box; // TODO: reset.scss에 추가
+
+    button {
+        all: unset;
+    }
+
+    align-items: center;
+    background-color: var(--vs-chip-backgroundColor, var(--vs-comp-backgroundColor));
+    border: var(--vs-chip-outlineBorder, 1px solid var(--vs-comp-color), 0);
+    border-radius: var(--vs-chip-borderRadius, 1.3rem);
+    color: var(--vs-chip-color, var(--vs-comp-color));
+    display: inline-flex;
+    font-size: var(--vs-chip-fontSize, 0.82rem);
+    font-weight: var(--vs-button-fontWeight, 400);
+    height: var(--vs-chip-height, 1.5rem);
+    justify-content: center;
+    min-height: var(--vs-chip-minHeight, 1.2rem);
+    padding: 0 0.4rem;
+    position: relative;
+
+    &:after {
+        background: #ffffff;
+        content: '';
+        display: block;
+        height: 100%;
+        left: 0;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        transition: all 0.4s ease-out;
+        width: 120%;
+    }
+
+    .vs-chip-icon {
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .vs-chip-leading-icon {
+        overflow: hidden;
+    }
+
+    .vs-chip-close {
+        cursor: pointer;
+        background-color: rgba(255, 255, 255, 0.7);
+        height: calc(var(--vs-chip-height, 1.2rem) * 0.8);
+        width: calc(var(--vs-chip-height, 1.2rem) * 0.8);
+    }
+
+    .vs-chip-content {
+        padding: var(--vs-chip-padding, 0 0.2rem);
+    }
+
+    .vs-chip-icon + .vs-chip-content {
+        margin-left: 0.05rem;
+    }
+
+    &.noRound {
+        border-radius: 0.25rem;
+        .chip-icon {
+            border-radius: 0.25rem;
+        }
+    }
+
+    &.clickable {
+        cursor: pointer;
+
+        &:active:after {
+            opacity: 0.6;
+            transition: 0s;
+            width: 0%;
+        }
+    }
+
+    &.primary {
+        background-color: var(--vs-chip-backgroundColor, var(--vs-comp-backgroundColor-primary));
+        color: var(--vs-chip-color, var(--vs-comp-color-primary));
+    }
+}
+
+.vs-chip + .vs-chip {
+    margin-left: 0.2rem;
+}
diff --git a/packages/vlossom/src/components/vs-chip/VsChip.vue b/packages/vlossom/src/components/vs-chip/VsChip.vue
new file mode 100644
index 000000000..7132555c2
--- /dev/null
+++ b/packages/vlossom/src/components/vs-chip/VsChip.vue
@@ -0,0 +1,81 @@
+<template>
+    <div :class="['vs-chip', `vs-${computedColorScheme}`, { ...classObj }]" :style="customProperties">
+        <span v-if="hasLeadingIcon" class="vs-chip-icon vs-chip-leading-icon">
+            <slot name="leading-icon" />
+        </span>
+
+        <span class="vs-chip-content">
+            <slot />
+        </span>
+
+        <button v-if="closable" type="button" class="vs-chip-icon vs-chip-close pointer" @click.stop="$emit('close')">
+            <close aria-label="close" class="close-icon" />
+        </button>
+    </div>
+</template>
+
+<script lang="ts">
+import { PropType, computed, defineComponent, toRefs, useAttrs } from 'vue';
+import { useColorScheme, useCustomStyle } from '@/composables';
+import { ColorScheme, VsComponent } from '@/declaration/types';
+import Close from '@/assets/icons/close';
+
+interface ChipStyleSet {
+    backgroundColor: string;
+    borderRadius: string;
+    color: string;
+    fontSize: string;
+    fontWeight: string;
+    height: string;
+    minHeight: string;
+    outlineBorder: string;
+    padding: string;
+}
+
+export type VsChipStyleSet = Partial<ChipStyleSet>;
+
+interface SetupContextAttrs {
+    onClick?: () => void;
+}
+
+const name = VsComponent.VsChip;
+
+export default defineComponent({
+    name,
+    components: { Close },
+    props: {
+        closable: { type: Boolean, default: false },
+        colorScheme: { type: String as PropType<ColorScheme> },
+        noRound: { type: Boolean, default: false },
+        primary: { type: Boolean, default: false },
+        styleSet: { type: [String, Object] as PropType<string | VsChipStyleSet>, default: '' },
+    },
+    emits: ['close'],
+    setup(props, { slots }) {
+        const { colorScheme, noRound, primary, styleSet } = toRefs(props);
+
+        const { computedColorScheme } = useColorScheme(name, colorScheme);
+
+        const { customProperties } = useCustomStyle<VsChipStyleSet>(name, styleSet);
+
+        const hasLeadingIcon = computed((): boolean => !!slots['leading-icon']);
+
+        const attrs: SetupContextAttrs = useAttrs();
+
+        const classObj = computed(() => ({
+            noRound: noRound.value,
+            primary: primary.value,
+            clickable: attrs.onClick ?? false,
+        }));
+
+        return {
+            hasLeadingIcon,
+            computedColorScheme,
+            customProperties,
+            classObj,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped src="./VsChip.scss" />
diff --git a/packages/vlossom/src/components/vs-chip/__tests__/vs-chip.test.ts b/packages/vlossom/src/components/vs-chip/__tests__/vs-chip.test.ts
new file mode 100644
index 000000000..10f0d6a0a
--- /dev/null
+++ b/packages/vlossom/src/components/vs-chip/__tests__/vs-chip.test.ts
@@ -0,0 +1,73 @@
+import { describe, expect, it, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import VsChip from './../VsChip.vue';
+
+function mountComponent() {
+    return mount(VsChip);
+}
+
+describe('vs-chip', () => {
+    describe('leading-icon', () => {
+        it('leading-icon 있는 경우 leading-icon 슬롯이 렌더된다', () => {
+            // given
+            const wrapper = mount(VsChip, {
+                slots: {
+                    'leading-icon': '<div>icon</div>',
+                },
+            });
+
+            // then
+            expect(wrapper.find('.vs-chip-leading-icon').exists()).toBe(true);
+            expect(wrapper.html()).toContain('<div>icon</div>');
+        });
+        it('leading-icon이 없는 경우 leading-icon 슬롯이 렌더되지 않는다', () => {
+            // given
+            const wrapper = mount(VsChip);
+
+            // then
+            expect(wrapper.find('.vs-chip-leading-icon').exists()).toBe(false);
+            expect(wrapper.html()).not.toContain('<div>icon</div>');
+        });
+    });
+
+    describe('closable', () => {
+        describe('closable 이 true 인 경우', () => {
+            let wrapper: ReturnType<typeof mountComponent>;
+
+            // given
+            beforeEach(() => {
+                wrapper = mount(VsChip, {
+                    props: {
+                        closable: true,
+                    },
+                });
+            });
+
+            it('close 버튼이 렌더된다', () => {
+                // then
+                expect(wrapper.find('.vs-chip-close').exists()).toBe(true);
+            });
+
+            it('close 버튼이 눌렸을 때 close 함수를 emit 한다', async () => {
+                // when
+                const closeBtn = wrapper.find('.vs-chip-close');
+                await closeBtn.trigger('click');
+
+                // then
+                expect(wrapper.emitted()).toHaveProperty('close');
+            });
+        });
+
+        it('closable 이 false 인 경우 close 버튼이 렌더되지 않는다', () => {
+            // given
+            const wrapper = mount(VsChip, {
+                props: {
+                    closable: false,
+                },
+            });
+
+            // then
+            expect(wrapper.find('.vs-chip-close').exists()).toBe(false);
+        });
+    });
+});
diff --git a/packages/vlossom/src/components/vs-chip/index.ts b/packages/vlossom/src/components/vs-chip/index.ts
new file mode 100644
index 000000000..e592da3a3
--- /dev/null
+++ b/packages/vlossom/src/components/vs-chip/index.ts
@@ -0,0 +1,12 @@
+import { VsComponent } from '@/declaration/types';
+import VsChip from './VsChip.vue';
+import type { VsChipStyleSet } from './VsChip.vue';
+
+type VsChipInstance = InstanceType<typeof VsChip>;
+
+export type { VsChipInstance, VsChipStyleSet };
+
+export default {
+    name: VsComponent.VsChip,
+    component: VsChip,
+};
diff --git a/packages/vlossom/src/components/vs-chip/stories/VsChip.stories.ts b/packages/vlossom/src/components/vs-chip/stories/VsChip.stories.ts
new file mode 100644
index 000000000..7bafe61cb
--- /dev/null
+++ b/packages/vlossom/src/components/vs-chip/stories/VsChip.stories.ts
@@ -0,0 +1,190 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Ref } from 'vue';
+import { ref } from 'vue';
+import { colorScheme } from '@/storybook/args';
+import VsChip from './../VsChip.vue';
+import Check from '@/assets/icons/check';
+import Person from '@/assets/icons/person';
+
+const meta: Meta<typeof VsChip> = {
+    title: 'Components/Base Components/VsChip',
+    component: VsChip,
+    render: (args: any) => ({
+        components: { VsChip },
+        setup() {
+            return { args };
+        },
+        template: '<vs-chip v-bind="args">Chip</vs-chip>',
+    }),
+    tags: ['autodocs'],
+    argTypes: {
+        colorScheme,
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof VsChip>;
+
+export const Default: Story = {};
+
+export const ColorScheme: Story = {
+    render: () => ({
+        components: { VsChip },
+        setup() {
+            const coloredChips = ref([...colorScheme.options]);
+            return { coloredChips };
+        },
+        template: `
+            <div>
+				<vs-chip v-for="(color, index) in coloredChips" :key="index" :color-scheme="color">
+					Chip	
+				</vs-chip>
+            </div>
+        `,
+    }),
+};
+
+export const Closable: Story = {
+    render: () => ({
+        components: { VsChip },
+        setup() {
+            const initialColoredChips = colorScheme.options.map((color, index) => ({ id: index, color: color }));
+            const coloredChips = ref(initialColoredChips);
+            const close = (index: number) => {
+                coloredChips.value = coloredChips.value.filter((_, i) => i !== index);
+            };
+            const reset = () => {
+                coloredChips.value = initialColoredChips;
+            };
+
+            return { coloredChips, close, reset };
+        },
+        template: `
+            <div>
+			<vs-chip v-for="({color, id}, index) in coloredChips" :key="id" :color-scheme="color" 
+					closable @close="close(index)"
+				>
+					Chip	
+				</vs-chip>
+				<vs-button v-if="!coloredChips.length" color-scheme="blue" @click="reset" dense> Reset </vs-button>
+            </div>
+        `,
+    }),
+};
+
+export const NoRound: Story = {
+    render: () => ({
+        components: { VsChip },
+        setup() {
+            const coloredChips = ref([...colorScheme.options]);
+            return { coloredChips };
+        },
+        template: `
+            <div>
+				<vs-chip v-for="(color, index) in coloredChips" :key="index" :color-scheme="color" 
+					no-round
+				>
+					Chip	
+				</vs-chip>
+            </div>
+        `,
+    }),
+};
+
+export const Primary: Story = {
+    render: () => ({
+        components: { VsChip },
+        setup() {
+            const coloredChips = ref([...colorScheme.options]);
+            return { coloredChips };
+        },
+        template: `
+            <div>
+				<vs-chip v-for="(color, index) in coloredChips" :key="index" :color-scheme="color" 
+					primary
+				>
+					Chip	
+				</vs-chip>
+            </div>
+        `,
+    }),
+};
+
+export const StyleSet: Story = {
+    args: {
+        styleSet: {
+            backgroundColor: '#1e88e5',
+            borderRadius: '0.2rem',
+            color: 'white',
+            fontSize: '1.2rem',
+            fontWeight: '500',
+            height: '2rem',
+            minHeight: '1rem',
+            outlineBorder: '3px solid #304d30',
+            padding: '0.8rem 1.5rem',
+        },
+    },
+};
+
+export const PreDefinedStyleSet: Story = {
+    args: {
+        styleSet: 'myStyleSet',
+    },
+};
+
+export const LeadingIcon: Story = {
+    render: () => ({
+        components: { VsChip, Check, Person },
+        template: `
+            <div>
+				<vs-chip>
+					<template #leading-icon>
+						<check aria-label="check" width="16px" height="16px"/>
+					</template>
+					Chip	
+				</vs-chip>
+
+				<vs-chip>
+					<template #leading-icon>
+						<person aria-label="person" width="16px" height="16px"/>
+					</template>
+					Chip	
+				</vs-chip>
+            </div>
+        `,
+    }),
+};
+
+export const ClickEventWithPrimary: Story = {
+    render: () => ({
+        components: { VsChip, Check },
+        setup() {
+            const coloredChips = ref(colorScheme.options.map((color, index) => ({ id: index, color: color })));
+
+            const selectedChips: Ref<number[]> = ref([]);
+            const onClick = (id: number) => {
+                if (selectedChips.value.includes(id)) {
+                    selectedChips.value = selectedChips.value.filter((chipId) => chipId !== id);
+                } else {
+                    selectedChips.value.push(id);
+                }
+            };
+
+            const isSelected = (id: number) => selectedChips.value.includes(id);
+
+            return { coloredChips, selectedChips, onClick, isSelected };
+        },
+        template: `
+            <div style="display:flex; align-items:center">
+				<vs-chip v-for="({color, id}, index) in coloredChips" :key="id" :color-scheme="color" 
+					@click="onClick(id)" :primary="isSelected(id)"
+				>
+					<template #leading-icon>
+						<check v-if="isSelected(id)" aria-label="check" width="16px" height="16px"/>
+					</template>
+					Chip	
+				</vs-chip>
+            </div>
+        `,
+    }),
+};
diff --git a/packages/vlossom/src/declaration/types.ts b/packages/vlossom/src/declaration/types.ts
index 5cc0548ac..40382692e 100644
--- a/packages/vlossom/src/declaration/types.ts
+++ b/packages/vlossom/src/declaration/types.ts
@@ -1,5 +1,6 @@
 import type {
     VsButtonStyleSet,
+    VsChipStyleSet,
     VsDividerStyleSet,
     VsInputStyleSet,
     VsPageStyleSet,
@@ -12,6 +13,7 @@ import type { Ref } from 'vue';
 
 export enum VsComponent {
     VsButton = 'VsButton',
+    VsChip = 'VsChip',
     VsContainer = 'VsContainer',
     VsDivider = 'VsDivider',
     VsForm = 'VsForm',
@@ -32,6 +34,7 @@ export type GlobalColorScheme = { default?: ColorScheme } & { [key in VsComponen
 
 export interface StyleSet {
     VsButton?: { [key: string]: VsButtonStyleSet };
+    VsChip?: { [key: string]: VsChipStyleSet };
     VsDivider?: { [key: string]: VsDividerStyleSet };
     VsInput?: { [key: string]: VsInputStyleSet };
     VsSection?: { [key: string]: VsSectionStyleSet };