@youcan/celeste 0.6.40 → 0.6.41

package/src/components/radio-group/stories/radio-group.stories.ts

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import RadioGroupItem from '../radio-group-item.vue';
+import RadioGroup from '../radio-group.vue';
+
+const meta: Meta<typeof RadioGroup> = {
+  title: 'Components/Radio Group',
+  component: RadioGroup,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioGroup>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: 'option2',
+    orientation: 'vertical',
+    disabled: false,
+    name: 'radio-group',
+    modelValue: '',
+    dir: 'ltr',
+    loop: true,
+    required: true,
+  },
+
+  render: args => ({
+    components: { RadioGroup, RadioGroupItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <RadioGroup v-bind="args" v-model="option2" style="display: flex; gap: 20px;">
+        <div style="display: flex; align-items: center;">
+          <RadioGroupItem id="r1" value="option1"></RadioGroupItem>
+          <label for="r1" style="padding-inline-start: 10px;">Option 1</label>
+        </div>
+        <div style="display: flex; align-items: center;">
+          <RadioGroupItem id="r2" value="option2"></RadioGroupItem>
+          <label for="r2" style="padding-inline-start: 10px;">Option 2</label>
+        </div>
+        <div style="display: flex; align-items: center;">
+          <RadioGroupItem id="r3" value="option3"></RadioGroupItem>
+          <label for="r3" style="padding-inline-start: 10px;">Option 3</label>
+        </div>
+      </RadioGroup>
+    `,
+  }),
+};

package/src/components/tag/index.ts

@@ -0,0 +1,2 @@
+export * from './tag.vue';
+export { default as Tag } from './tag.vue';

package/src/components/tag/stories/tag.stories.ts

@@ -0,0 +1,162 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
+import Tag from '../tag.vue';
+
+const meta: Meta<typeof Tag> = {
+  title: 'Components/Tag',
+  component: Tag,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['stroke', 'gray'],
+      description: 'Visual variant of the tag',
+    },
+    dismissable: {
+      control: { type: 'boolean' },
+      description: 'Whether the tag can be dismissed with a close button',
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Whether the tag is in a disabled state',
+    },
+    class: {
+      control: { type: 'text' },
+      description: 'Additional CSS classes to apply',
+    },
+    onDismiss: {
+      action: 'dismiss',
+      description: 'Event emitted when the dismiss button is clicked',
+    },
+  },
+  args: {
+    variant: 'stroke',
+    dismissable: false,
+    disabled: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tag>;
+
+export const Default: Story = {
+  args: {},
+  render: args => ({
+    components: { Tag },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Tag v-bind="args">
+        Tag
+      </Tag>
+    `,
+  }),
+};
+
+export const Variants: Story = {
+  render: () => ({
+    components: { Tag },
+    template: `
+      <div style="display: flex; gap: 12px; align-items: center;">
+        <Tag variant="stroke">Stroke Variant</Tag>
+        <Tag variant="gray">Gray Variant</Tag>
+      </div>
+    `,
+  }),
+};
+
+export const Dismissable: Story = {
+  render: args => ({
+    components: { Tag },
+    setup() {
+      function handleDismiss(): void {};
+      return { args, handleDismiss };
+    },
+    template: `
+      <div style="display: flex; gap: 12px; align-items: center;">
+        <Tag variant="stroke" dismissable @dismiss="handleDismiss">Dismissable Stroke</Tag>
+        <Tag variant="gray" dismissable @dismiss="handleDismiss">Dismissable Gray</Tag>
+      </div>
+    `,
+  }),
+  args: {
+    dismissable: true,
+  },
+};
+
+export const Disabled: Story = {
+  render: () => ({
+    components: { Tag },
+    template: `
+      <div style="display: flex; gap: 12px; align-items: center;">
+        <Tag disabled variant="stroke">Disabled Stroke</Tag>
+        <Tag disabled variant="gray">Disabled Gray</Tag>
+        <Tag disabled dismissable variant="stroke">Disabled Dismissable</Tag>
+      </div>
+    `,
+  }),
+};
+
+export const TagList: Story = {
+  render: () => ({
+    components: { Tag },
+    setup() {
+      const tags = ref([
+        { id: 1, text: 'Facebook' },
+        { id: 2, text: 'Google Analytics' },
+        { id: 3, text: 'Snap' },
+        { id: 4, text: 'TikTok' },
+      ]);
+
+      const removeTag = (id: number): void => {
+        tags.value = tags.value.filter(tag => tag.id !== id);
+      };
+
+      return { tags, removeTag };
+    },
+    template: `
+      <div style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-height: 32px;">
+        <Tag
+          v-for="tag in tags"
+          :key="tag.id"
+          :variant="tag.variant"
+          dismissable
+          @dismiss="removeTag(tag.id)"
+        >
+          {{ tag.text }}
+        </Tag>
+      </div>
+    `,
+  }),
+};
+
+export const WithIcon: Story = {
+  render: () => ({
+    components: { Tag },
+    template: `
+      <Tag variant="stroke">
+        <i class="i-celeste-star-line" />
+        Star
+      </Tag>
+    `,
+  }),
+};
+
+export const WithImage: Story = {
+  render: () => ({
+    components: { Tag },
+    template: `
+      <Tag variant="stroke">
+        <img 
+          width="16"
+          height="16"
+          style="object-fit: fill; clip-path: circle()" 
+          src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Flag_of_the_United_States.png/1024px-Flag_of_the_United_States.png" alt="USA" />
+        United States of America
+      </Tag>
+    `,
+  }),
+};

package/src/components/tag/tag.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = withDefaults(defineProps<TagProps>(), {
+  variant: 'stroke',
+  dismissable: false,
+});
+
+defineEmits<TagEmits>();
+</script>
+
+<script lang="ts">
+export interface TagProps {
+  variant?: 'stroke' | 'gray';
+  class?: HTMLAttributes['class'];
+  dismissable?: boolean;
+  disabled?: boolean;
+}
+
+export interface TagEmits {
+  dismiss: [];
+}
+</script>
+
+<template>
+  <div
+    :class="clsx('celeste-tag', props.class)"
+    :data-tag-variant="variant"
+    :aria-disabled="disabled"
+  >
+    <slot />
+    <button
+      v-if="dismissable"
+      :disabled="disabled"
+      class="celeste-tag-dismiss-button"
+      aria-label="dismiss"
+      @click.prevent.stop="$emit('dismiss')"
+    >
+      <i class="i-celeste-close-line" />
+    </button>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.celeste-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-4) var(--spacing-8);
+  transition: background-color, border-color;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  border: 1px solid transparent;
+  border-radius: var(--radius-6);
+  color: var(--color-text-sub-600);
+  font: var(--label-xs);
+  gap: var(--spacing-4);
+
+  &[data-tag-variant='stroke']:not([aria-disabled='true']) {
+    border-color: var(--color-stroke-soft-200);
+    background-color: var(--color-bg-white-0);
+
+    &:hover {
+      border-color: transparent;
+      background-color: var(--color-bg-weak-50);
+    }
+  }
+
+  &[data-tag-variant='gray']:not([aria-disabled='true']) {
+    border-color: transparent;
+    background-color: var(--color-bg-weak-50);
+
+    &:hover {
+      border-color: var(--color-stroke-soft-200);
+      background-color: var(--color-bg-white-0);
+    }
+  }
+
+  .celeste-tag-dismiss-button {
+    --size: 16px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--size);
+    height: var(--size);
+    margin-inline-end: calc(var(--spacing-4) * -1);
+    padding: var(--spacing-0);
+    border: none;
+    border-radius: calc(var(--radius-4) / 2);
+    background-color: transparent;
+    cursor: pointer;
+
+    i {
+      transition: background-color var(--animation-fast) ease-out;
+      background-color: var(--color-icon-soft-400);
+    }
+
+    &:disabled {
+      cursor: auto;
+
+      i {
+        background-color: var(--color-icon-disabled-300);
+      }
+    }
+
+    &:focus:not([aria-disabled='true']) {
+      outline: none;
+      box-shadow: var(--shadow-buttons-important-focus);
+    }
+
+    &:not(:disabled):hover {
+      i {
+        background-color: var(--color-icon-sub-600);
+      }
+    }
+  }
+
+  &[aria-disabled='true'] {
+    background-color: var(--color-bg-weak-50);
+    color: var(--color-text-disabled-300);
+  }
+}
+</style>