Implement Alert and Tooltip components

stories/Alert.stories.js

@@ -0,0 +1,154 @@
+import React, { useState } from "react";
+import Alert from "../app/components/Alert";
+
+export default {
+  title: "Components/Alert",
+  component: Alert,
+  argTypes: {
+    status: {
+      control: { type: "select" },
+      options: ["default", "positive", "warning", "danger"],
+    },
+    type: {
+      control: { type: "select" },
+      options: ["toast", "banner"],
+    },
+    title: {
+      control: { type: "text" },
+    },
+    description: {
+      control: { type: "text" },
+    },
+  },
+};
+
+const Template = (args) => {
+  const [isVisible, setIsVisible] = useState(true);
+  if (!isVisible) return <div>Alert closed</div>;
+  return (
+    <div className="p-8 max-w-[600px]">
+      <Alert {...args} onClose={() => setIsVisible(false)} />
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Short alert banner message goes here",
+  description: "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
+  status: "default",
+  type: "toast",
+};
+
+export const Positive = Template.bind({});
+Positive.args = {
+  title: "Short alert banner message goes here",
+  description: "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
+  status: "positive",
+  type: "toast",
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  title: "Short alert banner message goes here",
+  description: "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
+  status: "warning",
+  type: "toast",
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  title: "Short alert banner message goes here",
+  description: "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
+  status: "danger",
+  type: "toast",
+};
+
+export const Banner = Template.bind({});
+Banner.args = {
+  title: "Short alert banner message goes here",
+  description: "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
+  status: "default",
+  type: "banner",
+};
+
+export const BannerPositive = Template.bind({});
+BannerPositive.args = {
+  title: "Short alert banner message goes here",
+  description: "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
+  status: "positive",
+  type: "banner",
+};
+
+export const BannerWarning = Template.bind({});
+BannerWarning.args = {
+  title: "Short alert banner message goes here",
+  description: "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
+  status: "warning",
+  type: "banner",
+};
+
+export const BannerDanger = Template.bind({});
+BannerDanger.args = {
+  title: "Short alert banner message goes here",
+  description: "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
+  status: "danger",
+  type: "banner",
+};
+
+export const TitleOnly = Template.bind({});
+TitleOnly.args = {
+  title: "Short alert banner message goes here",
+  status: "default",
+  type: "toast",
+};
+
+export const AllStatuses = () => {
+  const [visible, setVisible] = useState({
+    default: true,
+    positive: true,
+    warning: true,
+    danger: true,
+  });
+
+  return (
+    <div className="p-8 space-y-4 max-w-[600px]">
+      {visible.default && (
+        <Alert
+          title="Default alert"
+          description="This is a default alert message"
+          status="default"
+          type="toast"
+          onClose={() => setVisible({ ...visible, default: false })}
+        />
+      )}
+      {visible.positive && (
+        <Alert
+          title="Positive alert"
+          description="This is a positive alert message"
+          status="positive"
+          type="toast"
+          onClose={() => setVisible({ ...visible, positive: false })}
+        />
+      )}
+      {visible.warning && (
+        <Alert
+          title="Warning alert"
+          description="This is a warning alert message"
+          status="warning"
+          type="toast"
+          onClose={() => setVisible({ ...visible, warning: false })}
+        />
+      )}
+      {visible.danger && (
+        <Alert
+          title="Danger alert"
+          description="This is a danger alert message"
+          status="danger"
+          type="toast"
+          onClose={() => setVisible({ ...visible, danger: false })}
+        />
+      )}
+    </div>
+  );
+};

stories/Tooltip.stories.js

@@ -0,0 +1,85 @@
+import React from "react";
+import Tooltip from "../app/components/Tooltip";
+import Button from "../app/components/Button";
+
+export default {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  argTypes: {
+    position: {
+      control: { type: "select" },
+      options: ["top", "bottom"],
+    },
+    disabled: {
+      control: { type: "boolean" },
+    },
+    text: {
+      control: { type: "text" },
+    },
+  },
+};
+
+const Template = (args) => (
+  <div className="p-16 flex items-center justify-center min-h-[200px]">
+    <Tooltip {...args}>
+      <Button variant="default" size="medium">
+        Hover me
+      </Button>
+    </Tooltip>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  text: "Tooltip text goes here",
+  position: "top",
+  disabled: false,
+};
+
+export const Top = Template.bind({});
+Top.args = {
+  text: "Tooltip positioned at top",
+  position: "top",
+};
+
+export const Bottom = Template.bind({});
+Bottom.args = {
+  text: "Tooltip positioned at bottom",
+  position: "bottom",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  text: "This tooltip is disabled",
+  disabled: true,
+};
+
+export const LongText = Template.bind({});
+LongText.args = {
+  text: "This is a longer tooltip text that demonstrates how the component handles multiple words and extended content",
+  position: "top",
+};
+
+export const WithIcon = () => (
+  <div className="p-16 flex items-center justify-center min-h-[200px]">
+    <Tooltip text="Tooltip with icon button" position="top">
+      <button className="p-2 rounded-full hover:bg-[var(--color-surface-default-tertiary)] transition-colors">
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M10 9V11M10 15H10.01M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+    </Tooltip>
+  </div>
+);