feat(message): initial styling for message

src/primevue/global.css

@@ -1,3 +1,12 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --ris-icon-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 5.99L19.53 19H4.47zM12 2L1 21h22z'/%3E%3Cpath fill='%23000' d='M13 16h-2v2h2zm0-6h-2v5h2z'/%3E%3C/svg%3E");
+    --ris-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238E001B' d='M12 5.99L19.53 19H4.47zM12 2L1 21h22z'/%3E%3Cpath fill='%238E001B' d='M13 16h-2v2h2zm0-6h-2v5h2z'/%3E%3C/svg%3E");
+    --ris-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23004B76' d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8'/%3E%3C/svg%3E");
+    --ris-icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23005E34' d='M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41z'/%3E%3C/svg%3E");
+  }
+}

src/primevue/index.ts

@@ -6,6 +6,7 @@ import fileUpload from "./fileUpload/fileUpload";
 import inputGroup from "./inputGroup/inputGroup";
 import inputGroupAddon from "./inputGroup/inputGroupAddon";
 import inputText from "./inputText/inputText";
+import message from "./message/message";
 import password from "./password/password";
 import progressSpinner from "./progressSpinner/progressSpinner";
 import radioButton from "./radioButton/radioButton";
@@ -17,6 +18,7 @@ export const RisUiTheme = {
   inputText,
   inputGroup,
   inputGroupAddon,
+  message,
   password,
   fileUpload,
   progressSpinner,

src/primevue/message/message.stories.ts

@@ -0,0 +1,100 @@
+import { html } from "@/lib/tags";
+import { Meta, StoryObj } from "@storybook/vue3";
+import Message from "primevue/message";
+
+const meta: Meta<typeof Message> = {
+  component: Message,
+
+  tags: ["autodocs"],
+
+  args: {
+    severity: undefined,
+    closable: true,
+  },
+
+  argTypes: {
+    severity: {
+      control: "select",
+      options: ["success", "info", "warn", "error"],
+    },
+  },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = {
+  render: (args) => ({
+    components: { Message },
+    setup() {
+      return { args };
+    },
+    template: html`<Message v-bind="args">Message content</Message>`,
+  }),
+};
+
+export const Success: StoryObj<typeof meta> = {
+  args: {
+    severity: "success",
+  },
+  render: (args) => ({
+    components: { Message },
+    setup() {
+      return { args };
+    },
+    template: html`<Message v-bind="args">Message content</Message>`,
+  }),
+};
+
+export const Info: StoryObj<typeof meta> = {
+  args: {
+    severity: "info",
+  },
+  render: (args) => ({
+    components: { Message },
+    setup() {
+      return { args };
+    },
+    template: html`<Message v-bind="args">Message content</Message>`,
+  }),
+};
+
+export const Warn: StoryObj<typeof meta> = {
+  args: {
+    severity: "warn",
+  },
+  render: (args) => ({
+    components: { Message },
+    setup() {
+      return { args };
+    },
+    template: html`<Message v-bind="args">Message content</Message>`,
+  }),
+};
+
+export const Error: StoryObj<typeof meta> = {
+  args: {
+    severity: "error",
+  },
+  render: (args) => ({
+    components: { Message },
+    setup() {
+      return { args };
+    },
+    template: html`<Message v-bind="args">Message content</Message>`,
+  }),
+};
+
+export const WithHeadingAndContent: StoryObj<typeof meta> = {
+  render: (args) => ({
+    components: { Message },
+    setup() {
+      return { args };
+    },
+    template: html`
+      <Message v-bind="args">
+        <p class="ris-body1-bold">Heading</p>
+        <p>Message content</p>
+      </Message>
+    `,
+  }),
+};

src/primevue/message/message.ts

@@ -0,0 +1,84 @@
+import { tw } from "@/lib/tags";
+import { MessagePassThroughOptions } from "primevue/message";
+
+const message: MessagePassThroughOptions = {
+  root: ({ props, instance }) => {
+    // Base
+    const base = tw`ris-body1-regular border-l-4 px-20 py-14`;
+
+    // Severity
+    const severity = props.severity ?? "info";
+
+    const success = tw`border-l-green-800 bg-green-200`;
+
+    const info = tw`border-l-blue-800 bg-blue-200`;
+
+    const warn = tw`border-l-yellow-800 bg-yellow-200`;
+
+    const error = tw`border-l-red-800 bg-red-200`;
+
+    // Default icon for severities
+    const hasDefaultIcon = !!instance.$slots.icon;
+
+    const iconNames: Record<string, string> = {
+      success: "var(--ris-icon-success)",
+      info: "var(--ris-icon-info)",
+      warn: "var(--ris-icon-warn)",
+      error: "var(--ris-icon-error)",
+    };
+
+    const iconName = iconNames[severity];
+
+    const iconBg = tw`bg-[length:20px] bg-[16px_18px] bg-no-repeat pl-44`;
+
+    return {
+      class: {
+        [base]: true,
+        [success]: severity === "success",
+        [info]: severity === "info",
+        [warn]: severity === "warn",
+        [error]: severity === "error",
+        [iconBg]: !hasDefaultIcon,
+      },
+      style: {
+        backgroundImage: !hasDefaultIcon ? iconName : undefined,
+      },
+    };
+  },
+
+  content: {
+    class: tw`flex items-start gap-8`,
+  },
+
+  text: {
+    class: tw`flex-1`,
+  },
+
+  closeButton: ({ props }) => {
+    // Base
+    const base = tw`mt-4 inline-flex h-20 w-20 flex-none items-center justify-center rounded-sm p-2 leading-none`;
+
+    // Severity
+    const severity = props.severity ?? "info";
+
+    const success = tw`text-green-800 hover:bg-green-400 active:bg-green-500`;
+
+    const info = tw`text-blue-800 hover:bg-blue-400 active:bg-blue-500`;
+
+    const warn = tw`text-black hover:bg-yellow-400 active:bg-yellow-500`;
+
+    const error = tw`text-red-800 hover:bg-red-400 active:bg-red-500`;
+
+    return {
+      class: {
+        [base]: true,
+        [success]: severity === "success",
+        [info]: severity === "info",
+        [warn]: severity === "warn",
+        [error]: severity === "error",
+      },
+    };
+  },
+};
+
+export default message;