feat(select): add select/dropdown component

src/primevue/index.ts

@@ -15,6 +15,7 @@ import radioButton from "./radioButton/radioButton";
 import autocomplete from "./autocomplete/autocomplete";
 import textarea from "./textarea/textarea";
 import toast from "./toast/toast";
+import select from "./select/select";
 
 import { deDE } from "@/config/locale";
 
@@ -34,6 +35,7 @@ export const RisUiTheme = {
   textarea,
   toast,
   autocomplete,
+  select,
 };
 
 export const RisUiLocale = {

src/primevue/select/select.css

@@ -0,0 +1,7 @@
+[aria-invalid="true"] {
+  @apply border-red-800 bg-red-100 outline-red-800;
+}
+
+[aria-invalid="true"] + small {
+  @apply ris-label3-regular mt-2 flex items-center gap-4 text-red-900;
+}

src/primevue/select/select.stories.ts

@@ -0,0 +1,133 @@
+import { html } from "@/lib/tags";
+import { Meta, StoryObj } from "@storybook/vue3";
+import Select from "primevue/select";
+import { ref } from "vue";
+import ErrorOutline from "~icons/material-symbols/error-outline";
+
+const meta: Meta<typeof Select> = {
+  component: Select,
+
+  tags: ["autodocs"],
+
+  args: {
+    placeholder: "Dropdown",
+    disabled: false,
+    invalid: false,
+  },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = {
+  render: (args) => ({
+    components: { Select },
+    setup() {
+      const selectedOption = ref();
+      const options = ref([
+        { name: "Text 1", code: "AB" },
+        { name: "Text 2", code: "CD" },
+        { name: "Text 3", code: "EF" },
+        { name: "Text 4", code: "GH" },
+        { name: "Text 5", code: "IJ" },
+      ]);
+      return { args, selectedOption, options };
+    },
+    template: html` <select
+      id="with-top-label"
+      v-bind="args"
+      v-model="selectedOption"
+      optionLabel="name"
+      :options="options"
+    />`,
+  }),
+};
+
+export const WithLabel: StoryObj<typeof meta> = {
+  args: {
+    disabled: false,
+  },
+  render: (args) => ({
+    components: { Select },
+    setup() {
+      const selectedOption = ref();
+      const options = ref([
+        { name: "Text 1", code: "AB" },
+        { name: "Text 2", code: "CD" },
+        { name: "Text 3", code: "EF" },
+        { name: "Text 4", code: "GH" },
+        { name: "Text 5", code: "IJ" },
+      ]);
+      return { args, selectedOption, options };
+    },
+    template: html` <label class="ris-label2-regular" for="with-top-label"
+        >Label</label
+      >
+      <select
+        id="with-top-label"
+        v-bind="args"
+        v-model="selectedOption"
+        optionLabel="name"
+        :options="options"
+      />`,
+  }),
+};
+
+export const WithHorizontalLabel: StoryObj<typeof meta> = {
+  render: (args) => ({
+    components: { Select },
+    setup() {
+      const selectedOption = ref();
+      const options = ref([
+        { name: "Text 1", code: "AB" },
+        { name: "Text 2", code: "CD" },
+        { name: "Text 3", code: "EF" },
+        { name: "Text 4", code: "GH" },
+        { name: "Text 5", code: "IJ" },
+      ]);
+      return { args, selectedOption, options };
+    },
+    template: html`<div class="flex w-1/2 items-center gap-16">
+      <label class="ris-label2-regular" for="with-left-label">Label</label>
+      <select
+        id="with-left-label"
+        v-bind="args"
+        v-model="selectedOption"
+        optionLabel="name"
+        :options="options"
+      />
+    </div>`,
+  }),
+};
+
+export const InvalidWithHint: StoryObj<typeof meta> = {
+  args: {
+    invalid: true,
+    "aria-invalid": "true",
+  },
+  render: (args) => ({
+    components: { Select, ErrorOutline },
+    setup() {
+      const selectedOption = ref();
+      const options = ref([
+        { name: "Text 1", code: "AB" },
+        { name: "Text 2", code: "CD" },
+        { name: "Text 3", code: "EF" },
+        { name: "Text 4", code: "GH" },
+        { name: "Text 5", code: "IJ" },
+      ]);
+      return { args, selectedOption, options };
+    },
+    template: html`
+      <label class="ris-label2-regular" for="invalid">Dropdown</label>
+      <select
+        id="invalid"
+        aria-describedby="invalid-hint"
+        v-bind="args"
+        v-model="selectedOption"
+        optionLabel="name"
+        :options="options"
+      />
+      <small id="invalid-hint"> <ErrorOutline /> Invalid date </small>
+    `,
+  }),
+};

src/primevue/select/select.ts

@@ -0,0 +1,48 @@
+import { SelectPassThroughOptions } from "primevue/select";
+import { tw } from "@/lib/tags.ts";
+import "./select.css";
+
+export const base = tw`ris-body2-regular h-full min-h-48 w-full border-2 border-blue-800 bg-white px-16 py-4 outline-4 -outline-offset-4 outline-blue-800 placeholder:text-gray-600 hover:outline focus:outline disabled:border-blue-500 disabled:bg-white disabled:text-blue-500 disabled:outline-none [&+label]:my-4`;
+
+const select: SelectPassThroughOptions = {
+  root: ({}) => {
+    return {
+      class: {
+        [base]: true,
+        "flex items-center justify-between": true,
+      },
+      tabindex: 0,
+      onKeydown: (event: KeyboardEvent) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          const dropdown = event.currentTarget as HTMLElement;
+          dropdown.click();
+        }
+      },
+    };
+  },
+  label: () => {
+    return {
+      tabindex: -1,
+    };
+  },
+  list: () => {
+    const listStyle = tw`shadow-md`;
+    return {
+      class: {
+        [listStyle]: true,
+      },
+    };
+  },
+  option: ({}) => {
+    const optionStyle = tw`ris-body2-regular relative h-full min-h-48 w-full bg-white px-24 py-16 after:absolute after:bottom-0 after:left-8 after:right-8 after:border-b after:border-gray-300 after:content-[''] last:after:border-b-0 hover:bg-gray-100`;
+    return {
+      class: {
+        [optionStyle]: true,
+      },
+      tabindex: 0,
+    };
+  },
+};
+
+export default select;