feat: adds the chip component

src/components/Chips/Chip.stories.mdx

@@ -0,0 +1,139 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+
+import Chip from './Chip.vue';
+import IconList from '../Shared/IconList.js';
+export const icons = [null, ...Object.keys(IconList.solid)];
+
+export const defaultArgs = {
+  variant: {
+    control: {
+      type: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'success',
+        'danger',
+        'warning',
+        'info',
+        'light',
+        'dark',
+      ],
+    },
+    defaultValue: 'primary',
+  },
+  size: {
+    control: {
+      type: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+    defaultValue: 'medium',
+  },
+  label: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Chip',
+  },
+  iconLeft: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  disabled: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  icon: {
+    control: {
+      type: 'select',
+      options: icons,
+    },
+    defaultValue: icons[0],
+  },
+  square: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  onClick: {
+    control: {
+      type: 'function',
+    },
+    action: 'click',
+  },
+};
+
+<Meta title="Components/Chips" component={Chip} argTypes={{ ...defaultArgs }} />
+
+export const Default = (args) => ({
+  components: { Chip },
+  setup() {
+    return { args };
+  },
+  template: `
+    <Chip v-bind="args">slot</Chip>
+  `,
+});
+
+# Chips
+
+<Canvas>
+  <Story name="Primary" argTypes={{ ...Default.argTypes }} args={{}}>
+    {Default.bind({})}
+  </Story>
+  <Story
+    name="Secondary"
+    argTypes={{ ...Default.argTypes }}
+    args={{ variant: 'secondary' }}
+  >
+    {Default.bind({})}
+  </Story>
+  <Story
+    name="Success"
+    argTypes={{ ...Default.argTypes }}
+    args={{ variant: 'success' }}
+  >
+    {Default.bind({})}
+  </Story>
+  <Story
+    name="Danger"
+    argTypes={{ ...Default.argTypes }}
+    args={{ variant: 'danger' }}
+  >
+    {Default.bind({})}
+  </Story>
+  <Story
+    name="Warning"
+    argTypes={{ ...Default.argTypes }}
+    args={{ variant: 'warning' }}
+  >
+    {Default.bind({})}
+  </Story>
+  <Story
+    name="Info"
+    argTypes={{ ...Default.argTypes }}
+    args={{ variant: 'info' }}
+  >
+    {Default.bind({})}
+  </Story>
+  <Story
+    name="Light"
+    argTypes={{ ...Default.argTypes }}
+    args={{ variant: 'light' }}
+  >
+    {Default.bind({})}
+  </Story>
+  <Story
+    name="Dark"
+    argTypes={{ ...Default.argTypes }}
+    args={{ variant: 'dark' }}
+  >
+    {Default.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Primary" />

src/components/Chips/Chip.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
+import Icon from '../Icon/Icon.vue';
+import './chip.css';
+
+export interface Props {
+  variant:
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'info'
+    | 'light'
+    | 'dark';
+  size?: 'small' | 'medium' | 'large';
+  label?: string | number;
+  iconLeft?: boolean;
+  disabled?: boolean;
+  icon?: string;
+  square?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  size: 'medium',
+  label: 'label',
+  iconLeft: false,
+  disabled: false,
+  icon: '',
+  square: false,
+});
+const emit = defineEmits(['click']);
+const classes = computed(() => {
+  return {
+    chip: true,
+    'chip--iconLeft': props.iconLeft,
+    'chip--disabled': props.disabled,
+    [`chip--${props.variant}`]: props.variant,
+    [`chip--${props.size}`]: props.size,
+    'chip--square': props.square,
+    'chip--reverse': props.iconLeft,
+  };
+});
+const iconSize = computed<string>(() => {
+  if (props.size === 'small') return '14';
+  if (props.size === 'large') return '20';
+  return '16';
+});
+const handleClick = () => {
+  if (props.disabled) return;
+  emit('click');
+};
+</script>
+<template>
+  <div :class="classes">
+    <span class="chip__text">{{ props.label }}</span>
+    <Icon
+      v-if="props.icon"
+      :name="props.icon"
+      :size="iconSize"
+      :aria-disabled="props.disabled"
+      class="chip__icon"
+      @click="handleClick"
+    />
+  </div>
+</template>

src/components/Chips/chip.css

@@ -0,0 +1,65 @@
+@tailwind components;
+
+.chip {
+  @apply font-sans inline-flex items-center px-2 py-1 text-xs font-medium leading-4 rounded-full;
+}
+
+.chip--primary {
+  @apply text-teal-600 bg-teal-100;
+}
+
+.chip--secondary {
+  @apply text-gray-600 bg-gray-100;
+}
+
+.chip--success {
+  @apply text-green-600 bg-green-100;
+}
+
+.chip--danger {
+  @apply text-red-600 bg-red-100;
+}
+
+.chip--warning {
+  @apply text-yellow-600 bg-yellow-100;
+}
+
+.chip--info {
+  @apply text-blue-600 bg-blue-100;
+}
+
+.chip--light {
+  @apply text-slate-600 bg-slate-100;
+}
+
+.chip--dark {
+  @apply text-white bg-black;
+}
+
+.chip--small {
+  @apply text-xs px-1 py-0.5;
+}
+
+.chip--large {
+  @apply text-base px-3 py-1.5;
+}
+
+.chip--square {
+  @apply rounded-none;
+}
+
+.chip--reverse {
+  @apply flex-row-reverse;
+}
+
+.chip--disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+.chip__icon {
+  @apply ml-1 hover:opacity-80 transition-opacity duration-200;
+}
+
+.chip--reverse > .chip__icon {
+  @apply mr-1 ml-0;
+}

src/components/Chips/chip.spec.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+
+import Chip from './Chip.vue';
+
+describe('Chip', () => {
+  it('renders properly', () => {
+    const wrapper = mount(Chip, {
+      props: {
+        variant: 'primary',
+        label: 'Hello',
+        size: 'small',
+      },
+    });
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.classes()).toContain('chip');
+    expect(wrapper.classes()).toContain('chip--primary');
+    expect(wrapper.classes()).toContain('chip--small');
+    expect(wrapper.text()).toBe('Hello');
+  });
+});