feat: add form error component (#4802)

apps/tailwind-components/components/form/Error.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="flex flex-row bg-invalid p-2 justify-between">
+    <div></div>
+    <div class="flex flex-row gap-1">
+      <BaseIcon name="info" class="text-invalid stroke-2 min-h-6 min-w-6" />
+      <span class="my-auto text-invalid font-bold px-1">{{ message }}</span>
+    </div>
+
+    <ButtonBar>
+      <Button
+        :icon-only="true"
+        type="tertiary"
+        icon="caret-up"
+        label="Go to previous error"
+        @click="$emit('error-prev')"
+      />
+      <Button
+        :icon-only="true"
+        type="tertiary"
+        icon="caret-down"
+        label="Go to next error"
+        @click="$emit('error-next')"
+      />
+    </ButtonBar>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  message: string;
+}>();
+
+defineEmits(["error-prev", "error-next"]);
+</script>

apps/tailwind-components/pages/form/Error.story.vue

@@ -0,0 +1,17 @@
+<template>
+  <FormError
+    message="3 fields require your attention before you can save this cohort"
+    @error-prev="errorPrev"
+    @error-next="errorNext"
+  />
+</template>
+
+<script setup lang="ts">
+function errorPrev() {
+  alert("Previous error");
+}
+
+function errorNext() {
+  alert("Next error");
+}
+</script>

apps/tailwind-components/tests/vitest/components/form/Error.spec.ts

@@ -0,0 +1,20 @@
+import { mount } from "@vue/test-utils";
+import { expect, it } from "vitest";
+import Error from "~/components/form/Error.vue";
+import FloatingVue from "floating-vue";
+import "floating-vue/dist/style.css"; // Ensure styles are loaded
+
+const wrapper = mount(Error, {
+  props: {
+    message: "this is an error message",
+  },
+  global: {
+    plugins: [FloatingVue], // Register the plugin
+  },
+});
+
+it("should show the message", async () => {
+  expect(wrapper.html()).toContain("this is an error message");
+  expect(wrapper.findAll("button")[0].text()).toContain("Go to previous error");
+  expect(wrapper.findAll("button")[1].text()).toContain("Go to next error");
+});