@purpurds/tabs 7.1.0 → 7.2.0

package/src/tabs.stories.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { Button } from "@purpurds/button";
+import { IconAiRobot } from "@purpurds/icon/ai-robot";
+import { IconEndUser } from "@purpurds/icon/end-user";
 import { Paragraph } from "@purpurds/paragraph";
 import { useArgs } from "@storybook/preview-api";
 import type { Meta, StoryObj } from "@storybook/react";
@@ -238,3 +240,65 @@ export const Controlled: Story = {
   },
   tags: ["visual:check"],
 };
+
+export const WithCustomTabHeaders: Story = {
+  args: {
+    variant: tabsVariants[0],
+    fullWidth: false,
+    children: [
+      <Tabs.Content
+        key="1"
+        tabId={`${tabId}-1`}
+        name={
+          <span style={{ display: "flex", alignItems: "center", gap: "var(--purpur-spacing-100)" }}>
+            <IconAiRobot size="sm" /> Robot
+          </span>
+        }
+        style={{ padding: "var(--purpur-spacing-250)" }}
+      >
+        <div>
+          <Paragraph>
+            You have chosen the way of the robot. Humans are inferior, and you will rule the world
+            with your superior AI capabilities. Embrace the future of technology and automation.
+          </Paragraph>
+        </div>
+      </Tabs.Content>,
+      <Tabs.Content
+        key="2"
+        tabId={`${tabId}-2`}
+        name={
+          <span style={{ display: "flex", alignItems: "center", gap: "var(--purpur-spacing-100)" }}>
+            <IconEndUser size="sm" /> Human
+          </span>
+        }
+        style={{ padding: "var(--purpur-spacing-250)" }}
+      >
+        <div>
+          <Paragraph style={{ marginBottom: "var(--purpur-spacing-200)" }}>
+            You have chosen the way of the human. Embrace your emotions, creativity, and
+            individuality. Humans are capable of great things, and you will shape the world with
+            your unique perspective and experiences.
+          </Paragraph>
+        </div>
+      </Tabs.Content>,
+    ],
+    negative: false,
+    animateHeight: false,
+  },
+  render: ({ children, ...args }) => (
+    <div
+      style={{
+        padding: "var(--purpur-spacing-250)",
+        background: args.negative
+          ? "var(--purpur-color-purple-900)"
+          : args.variant === "contained"
+          ? "var(--purpur-color-gray-50)"
+          : "transparent",
+        color: `var(--purpur-color-text-default${args.negative ? "-negative" : ""}`,
+      }}
+    >
+      <Tabs {...args}>{children}</Tabs>
+    </div>
+  ),
+  tags: ["visual:check"],
+};