norma-library 0.4.3 → 0.4.6

package/src/stories/Tabs.stories.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tabs } from "../components";
+import { DataTabs } from "../types";
+import { Typography } from "@mui/material";
+
+const data: DataTabs[] = [
+  {
+    label: "Tab 1",
+    id: "panel-1",
+    children: (
+      <Typography>
+        Tab 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+      </Typography>
+    ),
+  },
+  {
+    label: "Tab 2",
+    id: "panel-2",
+    children: (
+      <Typography>
+        Tab 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+      </Typography>
+    ),
+  },
+];
+
+const meta = {
+  title: "Display/Tabs",
+  component: Tabs,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    data: data,
+  },
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {
+    textColor: "primary",
+    data: data,
+  },
+};
+
+export const TabsBasic = () => {
+  return (
+    <div style={{ width: "480px", marginBottom: 30 }}>
+      <Tabs data={data} />
+    </div>
+  );
+};
+
+TabsBasic.storyName = "Tabs Basic";

package/src/stories/Tag.stories.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tag } from "../components";
+import { ColorVariant, SizeVariant, TextFieldSizeVariant } from "../types";
+
+const colors: ColorVariant[] = [
+  "inherit",
+  "primary",
+  "secondary",
+  "success",
+  "error",
+  "info",
+  "warning",
+];
+
+const sizes: TextFieldSizeVariant[] = ["small", "medium"];
+
+const meta = {
+  title: "Display/Tag",
+  component: Tag,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const TagBasic = () => {
+  return (
+    <>
+      <Tag label="Chip Filled" color="primary" style={{ margin: 5 }} />
+      <Tag label="Chip Outlined" outlined style={{ margin: 5 }} />
+    </>
+  );
+};
+
+export const TagColors = () => {
+  return (
+    <>
+      {colors.map((color, key) => (
+        <div>
+          <Tag label="Chip Filled" color={color} style={{ margin: 5 }} />
+          <Tag
+            label="Chip Outlined"
+            color={color}
+            outlined
+            style={{ margin: 5 }}
+          />
+        </div>
+      ))}
+    </>
+  );
+};
+
+export const TagSizes = () => {
+  return (
+    <>
+      {sizes.map((size, key) => (
+        <div>
+          <Tag label="Chip Filled" size={size} style={{ margin: 5 }} />
+          <Tag
+            label="Chip Outlined"
+            size={size}
+            outlined={true}
+            style={{ margin: 5 }}
+          />
+        </div>
+      ))}
+    </>
+  );
+};