feat(textarea): initial styling for textarea

src/primevue/index.ts

@@ -5,11 +5,13 @@ import inputGroup from "./inputGroup/inputGroup";
 import inputGroupAddon from "./inputGroup/inputGroupAddon";
 import inputText from "./inputText/inputText";
 import password from "./password/password";
+import textarea from "./textarea/textarea";
 
 export const RisUiTheme = {
   button,
   inputText,
   inputGroup,
   inputGroupAddon,
   password,
+  textarea,
 };

src/primevue/textarea/textarea.css

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

src/primevue/textarea/textarea.stories.ts

@@ -0,0 +1,118 @@
+import { html } from "@/lib/tags";
+import { Meta, StoryObj } from "@storybook/vue3";
+import PrimevueTextarea from "primevue/textarea";
+import ErrorOutline from "~icons/ic/error-outline";
+
+// Imported as Btn because somehow formatting sometimes changes
+// "PrimevueTextarea" to "PrimevueTextarea", breaking the stories
+const meta: Meta<typeof PrimevueTextarea> = {
+  component: PrimevueTextarea,
+
+  tags: ["autodocs"],
+
+  args: {
+    autoResize: true,
+    disabled: false,
+    fluid: false,
+    placeholder: "Placeholder",
+    readonly: false,
+    value: "Text",
+    invalid: false,
+  },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = {
+  render: (args) => ({
+    components: { PrimevueTextarea },
+    setup() {
+      return { args };
+    },
+    template: html`<PrimevueTextarea v-bind="args" />`,
+  }),
+};
+
+export const WithLabelAndHint: StoryObj<typeof meta> = {
+  render: (args) => ({
+    components: { PrimevueTextarea },
+    setup() {
+      return { args };
+    },
+    template: html`
+      <div class="flex flex-col gap-2">
+        <label class="ris-label2-regular" for="with-label">Label</label>
+        <PrimevueTextarea
+          id="with-label"
+          aria-describedby="with-label-hint"
+          v-bind="args"
+        />
+        <small id="with-label-hint">Additional hint text</small>
+      </div>
+    `,
+  }),
+};
+
+export const Disabled: StoryObj<typeof meta> = {
+  args: {
+    disabled: true,
+  },
+  render: (args) => ({
+    components: { PrimevueTextarea },
+    setup() {
+      return { args };
+    },
+    template: html`<PrimevueTextarea v-bind="args" />`,
+  }),
+};
+
+export const Readonly: StoryObj<typeof meta> = {
+  args: {
+    readonly: true,
+  },
+  render: (args) => ({
+    components: { PrimevueTextarea },
+    setup() {
+      return { args };
+    },
+    template: html`<PrimevueTextarea v-bind="args" />`,
+  }),
+};
+
+export const Invalid: StoryObj<typeof meta> = {
+  args: {
+    invalid: true,
+  },
+  render: (args) => ({
+    components: { PrimevueTextarea, ErrorOutline },
+    setup() {
+      return { args };
+    },
+    template: html`
+      <div class="flex flex-col gap-2">
+        <label class="ris-label2-regular" for="invalid-with-label">Label</label>
+        <PrimevueTextarea
+          id="invalid-with-label"
+          aria-describedby="invalid-with-label-hint"
+          v-bind="args"
+        />
+        <small id="invalid-with-label-hint">
+          <ErrorOutline /> Error message with helper text goes here
+        </small>
+      </div>
+    `,
+  }),
+};
+
+export const FluidProp: StoryObj<typeof meta> = {
+  args: {
+    fluid: true,
+  },
+  render: (args) => ({
+    components: { PrimevueTextarea },
+    setup() {
+      return { args };
+    },
+    template: html`<PrimevueTextarea v-bind="args" />`,
+  }),
+};

src/primevue/textarea/textarea.ts

@@ -0,0 +1,22 @@
+import { tw } from "@/lib/tags";
+import { TextareaPassThroughOptions } from "primevue/textarea";
+import "./textarea.css";
+
+const textarea: TextareaPassThroughOptions = {
+  root: ({ props }) => {
+    // Base
+    const base = tw`ris-body2-regular h-48 border-2 border-blue-800 bg-white px-16 py-10 outline-4 -outline-offset-4 outline-blue-800 placeholder:text-gray-900 read-only:cursor-not-allowed read-only:border-blue-300 read-only:bg-blue-300 hover:outline focus:outline disabled:border-blue-500 disabled:bg-white disabled:text-blue-500 disabled:outline-none aria-[invalid]:border-red-800 aria-[invalid]:bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:disabled:outline-none`;
+
+    // Integration for primevue/fluid
+    const fluid = tw`w-full`;
+
+    return {
+      class: {
+        [base]: true,
+        [fluid]: !!props.fluid,
+      },
+    };
+  },
+};
+
+export default textarea;