@kivid/native-components 1.0.0-alpha.4 → 1.0.0-alpha.6

package/src/components/Title/index.stories.tsx

@@ -1,729 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-native";
-import { Title } from "./index";
-import { GradientDocLab200BasicPink } from "@kivid/icons/native";
-
-import { View } from "react-native";
-import { HighlightedText } from "../HighlightedText";
-import { IconVariants } from "./components/icon/types";
-
-const meta = {
-  title: "Components/Title",
-  component: Title,
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component:
-          "Title component with multiple variants, sizes, and states matching the Figma design system.",
-      },
-    },
-  },
-  tags: ["autodocs"],
-  args: {
-    children: "Default Title",
-    head: <Title.Marker />,
-  },
-} satisfies Meta<typeof Title>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const WithMarker: Story = {
-  render: () => (
-    <View className="flex items-center">
-      <Title head={<Title.Marker />}>
-        <HighlightedText text="Title" highlightText="with marker" />
-      </Title>
-    </View>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Title with Marker with default value.",
-      },
-    },
-  },
-};
-
-export const WithIcon: Story = {
-  render: () => (
-    <View className="flex items-center">
-      <Title head={<Title.Icon variants={IconVariants.WARNING} />}>
-        <HighlightedText text="Warning" highlightText="icon" />
-      </Title>
-    </View>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Title with Icon with default value.",
-      },
-    },
-  },
-};
-
-export const WithCustomIcon: Story = {
-  render: () => {
-    return (
-      <View className="flex items-center">
-        <Title
-          head={
-            <Title.Icon
-              size="medium"
-              variants={IconVariants.CUSTOM}
-              customIcon={<GradientDocLab200BasicPink size={48} />}
-            />
-          }
-        >
-          <HighlightedText
-            text="Custom"
-            highlightText="icon"
-            variant="headline_large"
-            weight="400"
-            highlightedTextProps={{
-              variant: "headline_large",
-              weight: "700",
-            }}
-          />
-        </Title>
-      </View>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Title with Icon receives a config to render a custom icon.",
-      },
-    },
-  },
-};
-
-export const Large2X: Story = {
-  render: () => {
-    function renderContent() {
-      return (
-        <>
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            variant="headline_large"
-            weight="400"
-            highlightedTextProps={{
-              variant: "headline_large",
-              weight: "700",
-            }}
-          />
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            variant="headline_large"
-            weight="400"
-            highlightedTextProps={{
-              variant: "headline_large",
-              weight: "700",
-            }}
-          />
-          <HighlightedText
-            text="Curabitur blandit tempus porttitor."
-            className="mt-400"
-          />
-          <HighlightedText
-            text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            className="mt-400"
-          />
-        </>
-      );
-    }
-
-    return (
-      <View className="flex items-center gap-700">
-        <Title
-          variant="2xlarge"
-          head={<Title.Icon size="large" variants={IconVariants.SUCCESS} />}
-        >
-          {renderContent()}
-        </Title>
-
-        <Title
-          variant="2xlarge"
-          head={<Title.Marker size="medium" color="chia" />}
-        >
-          {renderContent()}
-        </Title>
-      </View>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Title 2x large with Heading, subtitle and multiples texts",
-      },
-    },
-  },
-};
-
-export const LargeX: Story = {
-  render: () => {
-    function renderContent() {
-      return (
-        <>
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            variant="headline_medium"
-            weight="400"
-            highlightedTextProps={{
-              variant: "headline_medium",
-              weight: "700",
-            }}
-          />
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            variant="headline_medium"
-            weight="400"
-            highlightedTextProps={{
-              variant: "headline_medium",
-              weight: "700",
-            }}
-          />
-          <HighlightedText
-            text="Curabitur blandit tempus porttitor."
-            variant="body_medium"
-            weight="500"
-            className="mt-400"
-          />
-          <HighlightedText
-            text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            variant="body_medium"
-            weight="500"
-            className="mt-400"
-          />
-        </>
-      );
-    }
-
-    return (
-      <View className="flex items-center gap-700">
-        <Title
-          variant="xlarge"
-          head={<Title.Icon size="large" variants={IconVariants.SUCCESS} />}
-        >
-          {renderContent()}
-        </Title>
-
-        <Title
-          variant="xlarge"
-          head={<Title.Marker size="medium" color="chia" />}
-        >
-          {renderContent()}
-        </Title>
-      </View>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Title x large with Heading, subtitle and multiples texts",
-      },
-    },
-  },
-};
-
-export const Large: Story = {
-  render: () => {
-    function renderContent() {
-      return (
-        <>
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            variant="headline_small"
-            weight="400"
-            highlightedTextProps={{
-              variant: "headline_small",
-              weight: "700",
-            }}
-          />
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            variant="headline_small"
-            weight="400"
-            highlightedTextProps={{
-              variant: "headline_small",
-              weight: "700",
-            }}
-          />
-          <HighlightedText
-            text="Curabitur blandit tempus porttitor."
-            variant="body_medium"
-            weight="500"
-            className="mt-400"
-          />
-          <HighlightedText
-            text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            variant="body_medium"
-            weight="500"
-            className="mt-400"
-          />
-        </>
-      );
-    }
-
-    return (
-      <View className="flex items-center gap-700">
-        <Title
-          variant="large"
-          head={<Title.Icon variants={IconVariants.SUCCESS} />}
-        >
-          {renderContent()}
-        </Title>
-
-        <Title variant="large" head={<Title.Marker color="chia" />}>
-          {renderContent()}
-        </Title>
-      </View>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Title large with Heading, subtitle and multiples texts",
-      },
-    },
-  },
-};
-
-export const Medium: Story = {
-  render: () => {
-    function renderContent() {
-      return (
-        <>
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            variant="title_large"
-            weight="400"
-            highlightedTextProps={{
-              variant: "title_large",
-              weight: "700",
-            }}
-          />
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            variant="title_large"
-            weight="400"
-            highlightedTextProps={{
-              variant: "title_large",
-              weight: "700",
-            }}
-          />
-          <HighlightedText
-            text="Curabitur blandit tempus porttitor."
-            variant="body_medium"
-            weight="500"
-            className="mt-400"
-          />
-          <HighlightedText
-            text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            variant="body_medium"
-            weight="500"
-            className="mt-400"
-          />
-        </>
-      );
-    }
-
-    return (
-      <View className="flex items-center gap-700">
-        <Title
-          variant="medium"
-          head={<Title.Icon variants={IconVariants.SUCCESS} />}
-        >
-          {renderContent()}
-        </Title>
-
-        <Title variant="medium" head={<Title.Marker color="chia" />}>
-          {renderContent()}
-        </Title>
-      </View>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Title medium with Heading, subtitle and multiples texts",
-      },
-    },
-  },
-};
-
-export const Small: Story = {
-  render: () => {
-    function renderContent() {
-      return (
-        <>
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            variant="title_medium"
-            weight="400"
-            highlightedTextProps={{
-              variant: "title_medium",
-              weight: "700",
-            }}
-          />
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            variant="title_medium"
-            weight="400"
-            highlightedTextProps={{
-              variant: "title_medium",
-              weight: "700",
-            }}
-          />
-          <HighlightedText
-            text="Curabitur blandit tempus porttitor."
-            variant="body_small"
-            weight="500"
-            className="mt-400"
-          />
-          <HighlightedText
-            text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            variant="body_small"
-            weight="500"
-            className="mt-400"
-          />
-        </>
-      );
-    }
-
-    return (
-      <View className="flex items-center gap-700">
-        <Title
-          variant="small"
-          head={<Title.Icon size="small" variants={IconVariants.SUCCESS} />}
-        >
-          {renderContent()}
-        </Title>
-
-        <Title variant="small" head={<Title.Marker color="chia" />}>
-          {renderContent()}
-        </Title>
-      </View>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Title small with Heading, subtitle and multiples texts",
-      },
-    },
-  },
-};
-
-export const XSmall: Story = {
-  render: () => {
-    function renderContent() {
-      return (
-        <>
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            variant="title_small"
-            weight="400"
-            highlightedTextProps={{
-              variant: "title_small",
-              weight: "700",
-            }}
-          />
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            variant="title_small"
-            weight="400"
-            highlightedTextProps={{
-              variant: "title_small",
-              weight: "700",
-            }}
-          />
-          <HighlightedText
-            text="Curabitur blandit tempus porttitor."
-            variant="body_small"
-            weight="500"
-            className="mt-400"
-          />
-          <HighlightedText
-            text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            variant="body_small"
-            weight="500"
-            className="mt-400"
-          />
-        </>
-      );
-    }
-
-    return (
-      <View className="flex items-center gap-700">
-        <Title
-          variant="xsmall"
-          head={<Title.Icon size="small" variants={IconVariants.SUCCESS} />}
-        >
-          {renderContent()}
-        </Title>
-
-        <Title variant="xsmall" head={<Title.Marker color="chia" />}>
-          {renderContent()}
-        </Title>
-      </View>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Title x small with Heading, subtitle and multiples texts",
-      },
-    },
-  },
-};
-
-export const MarkerSizesAndVariants: Story = {
-  render: () => (
-    <>
-      <View className="flex flex-column gap-400 mb-700">
-        <HighlightedText
-          text="Small"
-          variant="label_small"
-          weight="700"
-          className="text-center"
-        />
-
-        <View className="flex flex-row gap-300 justify-center">
-          <Title head={<Title.Marker color="blackberry" size="small" />}>
-            <HighlightedText
-              text="Blackberry"
-              variant="label_small"
-              weight="700"
-            />
-          </Title>
-          <Title head={<Title.Marker color="chia" size="small" />}>
-            <HighlightedText text="Chia" variant="label_small" weight="700" />
-          </Title>
-          <Title head={<Title.Marker color="java" size="small" />}>
-            <HighlightedText text="Java" variant="label_small" weight="700" />
-          </Title>
-          <Title head={<Title.Marker color="grape" size="small" />}>
-            <HighlightedText text="Grape" variant="label_small" weight="700" />
-          </Title>
-        </View>
-
-        <View className="flex flex-row gap-300 justify-center">
-          <Title head={<Title.Marker color="mango" size="small" />}>
-            <HighlightedText text="Mango" variant="label_small" weight="700" />
-          </Title>
-          <Title head={<Title.Marker color="tangerine" size="small" />}>
-            <HighlightedText
-              text="Tangerine"
-              variant="label_small"
-              weight="700"
-            />
-          </Title>
-          <Title head={<Title.Marker color="pear" size="small" />}>
-            <HighlightedText text="Pear" variant="label_small" weight="700" />
-          </Title>
-          <Title head={<Title.Marker color="ghost" size="small" />}>
-            <HighlightedText text="Ghost" variant="label_small" weight="700" />
-          </Title>
-        </View>
-      </View>
-
-      <View className="flex flex-column gap-400">
-        <HighlightedText
-          text="Medium"
-          variant="label_medium"
-          weight="700"
-          className="text-center"
-        />
-
-        <View className="flex flex-row gap-300 justify-center">
-          <Title head={<Title.Marker color="blackberry" />}>
-            <HighlightedText
-              text="Blackberry"
-              variant="label_medium"
-              weight="700"
-            />
-          </Title>
-          <Title head={<Title.Marker color="chia" />}>
-            <HighlightedText text="Chia" variant="label_medium" weight="700" />
-          </Title>
-          <Title head={<Title.Marker color="java" />}>
-            <HighlightedText text="Java" variant="label_medium" weight="700" />
-          </Title>
-          <Title head={<Title.Marker color="grape" />}>
-            <HighlightedText text="Grape" variant="label_medium" weight="700" />
-          </Title>
-        </View>
-
-        <View className="flex flex-row gap-300 justify-center">
-          <Title head={<Title.Marker color="mango" />}>
-            <HighlightedText text="Mango" variant="label_medium" weight="700" />
-          </Title>
-          <Title head={<Title.Marker color="tangerine" />}>
-            <HighlightedText
-              text="Tangerine"
-              variant="label_medium"
-              weight="700"
-            />
-          </Title>
-          <Title head={<Title.Marker color="pear" />}>
-            <HighlightedText text="Pear" variant="label_medium" weight="700" />
-          </Title>
-          <Title head={<Title.Marker color="ghost" />}>
-            <HighlightedText text="Ghost" variant="label_medium" weight="700" />
-          </Title>
-        </View>
-      </View>
-    </>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Complete showcase of the Title.Marker design system matching the Figma specifications with all variants, sizes, and states.",
-      },
-    },
-  },
-};
-
-export const IconSizesAndVariants: Story = {
-  render: () => (
-    <>
-      <View className="flex flex-column gap-300 mb-500">
-        <HighlightedText
-          text="Small"
-          variant="label_small"
-          weight="700"
-          className="text-center"
-        />
-
-        <View className="flex flex-row gap-300">
-          <Title head={<Title.Icon size="small" variants={IconVariants.ADD} />}>
-            <HighlightedText text="add" variant="label_small" weight="700" />
-          </Title>
-          <Title
-            head={<Title.Icon size="small" variants={IconVariants.WARNING} />}
-          >
-            <HighlightedText
-              text="warning"
-              variant="label_small"
-              weight="700"
-            />
-          </Title>
-          <Title
-            head={<Title.Icon size="small" variants={IconVariants.ERROR} />}
-          >
-            <HighlightedText text="error" variant="label_small" weight="700" />
-          </Title>
-          <Title
-            head={<Title.Icon size="small" variants={IconVariants.SUCCESS} />}
-          >
-            <HighlightedText
-              text="success"
-              variant="label_small"
-              weight="700"
-            />
-          </Title>
-        </View>
-      </View>
-
-      <View className="flex flex-column gap-300 mb-500">
-        <HighlightedText
-          text="Medium"
-          variant="label_medium"
-          weight="700"
-          className="text-center"
-        />
-
-        <View className="flex flex-row gap-300">
-          <Title
-            head={<Title.Icon size="medium" variants={IconVariants.ADD} />}
-          >
-            <HighlightedText text="add" variant="label_medium" weight="700" />
-          </Title>
-          <Title
-            head={<Title.Icon size="medium" variants={IconVariants.WARNING} />}
-          >
-            <HighlightedText
-              text="warning"
-              variant="label_medium"
-              weight="700"
-            />
-          </Title>
-          <Title
-            head={<Title.Icon size="medium" variants={IconVariants.ERROR} />}
-          >
-            <HighlightedText text="error" variant="label_medium" weight="700" />
-          </Title>
-          <Title
-            head={<Title.Icon size="medium" variants={IconVariants.SUCCESS} />}
-          >
-            <HighlightedText
-              text="success"
-              variant="label_medium"
-              weight="700"
-            />
-          </Title>
-        </View>
-      </View>
-
-      <View className="flex flex-column gap-300 mb-500">
-        <HighlightedText
-          text="Large"
-          variant="label_large"
-          weight="700"
-          className="text-center"
-        />
-
-        <View className="flex flex-row gap-300">
-          <Title head={<Title.Icon size="large" variants={IconVariants.ADD} />}>
-            <HighlightedText text="add" variant="label_large" weight="700" />
-          </Title>
-          <Title
-            head={<Title.Icon size="large" variants={IconVariants.WARNING} />}
-          >
-            <HighlightedText
-              text="warning"
-              variant="label_large"
-              weight="700"
-            />
-          </Title>
-          <Title
-            head={<Title.Icon size="large" variants={IconVariants.ERROR} />}
-          >
-            <HighlightedText text="error" variant="label_large" weight="700" />
-          </Title>
-          <Title
-            head={<Title.Icon size="large" variants={IconVariants.SUCCESS} />}
-          >
-            <HighlightedText
-              text="success"
-              variant="label_large"
-              weight="700"
-            />
-          </Title>
-        </View>
-      </View>
-    </>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Complete showcase of the Title.Marker design system matching the Figma specifications with all variants, sizes, and states.",
-      },
-    },
-  },
-};