From 925bb61dae7a90140bc6170f0c81f4d64d2a48b6 Mon Sep 17 00:00:00 2001
From: Roid-obi <contohdiamazon2@gmail.com>
Date: Wed, 10 Jan 2024 00:15:49 +0700
Subject: [PATCH] feat: docs navbar, paddingcontainer, and text

---
 src/stories/Button/Button.stories.tsx         |   8 +-
 src/stories/Button/Button.tsx                 |  32 ++--
 .../Card-solutions/CardSolution.stories.tsx   |   4 +-
 .../Card-solutions/CardSolution.style.ts      |   2 +-
 src/stories/Card-solutions/CardSolution.tsx   |  10 +-
 src/stories/Card/Card.stories.tsx             |  10 +-
 src/stories/Card/Card.style.ts                |   2 +-
 src/stories/Card/Card.tsx                     |  12 +-
 src/stories/Navbar/link.tsx                   |  73 ++++++++
 src/stories/Navbar/navbar.stories.tsx         |  33 ++++
 src/stories/Navbar/navbar.style.ts            | 175 ++++++++++++++++++
 src/stories/Navbar/navbar.tsx                 |  40 ++++
 .../paddingContainer.stories.tsx              |  39 ++++
 .../paddingContainer.style.ts                 |  21 +++
 .../PaddingContainer/paddingContainer.tsx     |  10 +
 src/stories/Text/Text.stories.tsx             |  49 +++++
 src/stories/Text/text.style.ts                |  13 ++
 src/stories/Text/text.tsx                     |  74 ++++++++
 src/stories/assets/Font/Font.tsx              |  21 ++-
 styles/globals.css                            |   9 +-
 yarn.lock                                     |  77 ++------
 21 files changed, 615 insertions(+), 99 deletions(-)
 create mode 100644 src/stories/Navbar/link.tsx
 create mode 100644 src/stories/Navbar/navbar.stories.tsx
 create mode 100644 src/stories/Navbar/navbar.style.ts
 create mode 100644 src/stories/Navbar/navbar.tsx
 create mode 100644 src/stories/PaddingContainer/paddingContainer.stories.tsx
 create mode 100644 src/stories/PaddingContainer/paddingContainer.style.ts
 create mode 100644 src/stories/PaddingContainer/paddingContainer.tsx
 create mode 100644 src/stories/Text/Text.stories.tsx
 create mode 100644 src/stories/Text/text.style.ts
 create mode 100644 src/stories/Text/text.tsx

diff --git a/src/stories/Button/Button.stories.tsx b/src/stories/Button/Button.stories.tsx
index 7fcf220..9d95e07 100644
--- a/src/stories/Button/Button.stories.tsx
+++ b/src/stories/Button/Button.stories.tsx
@@ -30,15 +30,15 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    Type: "primary",
-    Text: "Button",  
+    type: "primary",
+    content: "Button",  
   },
 };
 
 export const Secondary: Story = {
   args: {
-    Type: "secondary",
-    Text: "Button",
+    type: "secondary",
+    content: "Button",
   },
 };
 
diff --git a/src/stories/Button/Button.tsx b/src/stories/Button/Button.tsx
index b78f154..5948261 100644
--- a/src/stories/Button/Button.tsx
+++ b/src/stories/Button/Button.tsx
@@ -2,20 +2,19 @@
 import Link from 'next/link';
 import { StyledButton } from './Button.style';
 import { useState } from 'react';
-import Font from '../assets/Font/Font';
 
 export interface ButtonProps {
   /**
    * Enter the button type "primary" or "secondary"
    */
-  Type?: "primary" | "secondary";
+  type: 'primary' | 'secondary';
   /**
-   * Enter text button
+   * Enter content button
    */
-  Text?: string;
-  /** 
+  content: string;
+  /**
    * Leading to where
-  */
+   */
   href?: string;
   /**
    * Enter additional styles
@@ -27,15 +26,26 @@ export interface ButtonProps {
   onClick?: () => void;
 }
 
-export default function Button({ Type="primary", Text, href, style, ...props }: ButtonProps) {
+export default function Button({
+  type = 'primary',
+  content,
+  href,
+  style,
+  ...props
+}: ButtonProps) {
   const [isDisabled, setIsDisabled] = useState(false);
-  const mode = `button--${Type}`
+  const mode = `button--${type}`;
   return (
     <>
-      <Font/>
       <Link href={href || '/'}>
-        <StyledButton className={['button', mode].join(" ")} disabled={isDisabled} style={style} {...props}>
-          {Text}
+        <StyledButton
+          data-testid={`button--${type}`}
+          className={['button', mode].join(' ')}
+          disabled={isDisabled}
+          style={style}
+          {...props}
+        >
+          {content}
         </StyledButton>
       </Link>
     </>
diff --git a/src/stories/Card-solutions/CardSolution.stories.tsx b/src/stories/Card-solutions/CardSolution.stories.tsx
index 0cae454..cfe8858 100644
--- a/src/stories/Card-solutions/CardSolution.stories.tsx
+++ b/src/stories/Card-solutions/CardSolution.stories.tsx
@@ -5,7 +5,7 @@ import CardSolution from "./CardSolution";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
-  title: "Components/Card/Card-Solution",
+  title: "Components/Card-Solution",
   component: CardSolution,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
@@ -34,7 +34,7 @@ type Story = StoryObj<typeof meta>;
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const CardSolutions: Story = {
   args: {
-    logo: <svg
+    icon: <svg
     width="40"
     height="40"
     viewBox="0 0 40 40"
diff --git a/src/stories/Card-solutions/CardSolution.style.ts b/src/stories/Card-solutions/CardSolution.style.ts
index 54c7b09..6ab6f1c 100644
--- a/src/stories/Card-solutions/CardSolution.style.ts
+++ b/src/stories/Card-solutions/CardSolution.style.ts
@@ -36,4 +36,4 @@ export const Description = styled.p`
   color: #516371;
   font-weight: 400;
   font-size: 18px;
-`;
+`;
\ No newline at end of file
diff --git a/src/stories/Card-solutions/CardSolution.tsx b/src/stories/Card-solutions/CardSolution.tsx
index a333c22..00af907 100644
--- a/src/stories/Card-solutions/CardSolution.tsx
+++ b/src/stories/Card-solutions/CardSolution.tsx
@@ -13,15 +13,15 @@ export interface CardProps {
   /**
    * Insert Logo svg from figma
    */
-  logo?: JSX.Element;
+  icon: JSX.Element;
   /**
    * For the title card
    */
-  tittle?: string;
+  tittle: string;
   /**
    * For card description
    */
-  description?: string;
+  description: string;
   /**
    * Enter additional styles
    */
@@ -29,7 +29,7 @@ export interface CardProps {
 }
 
 export default function CardSolution({
-  logo,
+  icon,
   tittle,
   description,
   style,
@@ -39,7 +39,7 @@ export default function CardSolution({
     <Font />
     <Card style={style}>
       <Padding>
-        <Logo>{logo}</Logo>
+        <Logo>{icon}</Logo>
         <Tittle>{tittle}</Tittle>
         <Description>{description}</Description>
       </Padding>
diff --git a/src/stories/Card/Card.stories.tsx b/src/stories/Card/Card.stories.tsx
index a4ebd0b..f4b35c0 100644
--- a/src/stories/Card/Card.stories.tsx
+++ b/src/stories/Card/Card.stories.tsx
@@ -6,7 +6,7 @@ import Button from "../Button/Button";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
-  title: "Components/Card/Card",
+  title: "Components/Card",
   component: Card,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
@@ -44,8 +44,8 @@ export const CardGeneral: Story = {
         Earum rerum vero, nostrum, cupiditate repellat quod distinctio facilis repellendus iste ratione reprehenderit architecto est itaque, sequi molestias.
       </p>
       <Button
-        Text="Button"
-        Type="secondary"
+        content="Button"
+        type="secondary"
         onClick={function noRefCheck(){}}
       />
       </>
@@ -68,8 +68,8 @@ export const CardBlog: Story = {
           Earum rerum vero, nostrum, cupiditate repellat quod distinctio facilis repellendus iste ratione reprehenderit architecto est itaque, sequi molestias.
         </p>
         <Button
-          Text="Button"
-          Type="secondary"
+          content="Button"
+          type="secondary"
           onClick={function noRefCheck(){}}
         />
       </>
diff --git a/src/stories/Card/Card.style.ts b/src/stories/Card/Card.style.ts
index fd6f808..356693c 100644
--- a/src/stories/Card/Card.style.ts
+++ b/src/stories/Card/Card.style.ts
@@ -30,7 +30,7 @@ export const ArticleImage = styled.img`
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: ease-in-out 0.2s; /* Animation */
+  transition: ease-in-out 0.4s; /* Animation */
   animation: ${scaleAnimation} ease-in-out 0.2s;
 `;
 
diff --git a/src/stories/Card/Card.tsx b/src/stories/Card/Card.tsx
index d2e8990..ada2c1f 100644
--- a/src/stories/Card/Card.tsx
+++ b/src/stories/Card/Card.tsx
@@ -1,5 +1,5 @@
 'use client';
-
+import React from 'react';
 import { ArticleCard, ArticleImage, ContentCard } from './Card.style';
 
 export interface CardProps {
@@ -11,15 +11,15 @@ export interface CardProps {
    * Insert padding according to the existing design
    * `"top right bottom left"`
    */
-  padding?: string;
+  padding: string;
   /**
    * Image in card
    */
-  background?: string;
+  background: string;
   /**
    * Enter the card type linear-gradient, "general" or "blog"
    */
-  linearGradient?: 'general' | 'blog';
+  linearGradient: 'general' | 'blog';
   /**
    * Enter additional styles
    */
@@ -30,14 +30,14 @@ export default function Card({
   children,
   background,
   style,
-  linearGradient= "general",
+  linearGradient = 'general',
   padding,
   ...props
 }: CardProps) {
   return (
     <>
       <ArticleCard style={style}>
-        <ContentCard linearGradient={linearGradient} padding={padding}>
+        <ContentCard background={background} linearGradient={linearGradient} padding={padding}>
           {children}
         </ContentCard>
         <ArticleImage src={background} alt="img" />
diff --git a/src/stories/Navbar/link.tsx b/src/stories/Navbar/link.tsx
new file mode 100644
index 0000000..e1702d3
--- /dev/null
+++ b/src/stories/Navbar/link.tsx
@@ -0,0 +1,73 @@
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import {
+  MenuContainer,
+  TitleContainer,
+  ListLink,
+  ListItem,
+  Contact,
+} from './navbar.style';
+import Text from '../Text/text';
+import React from 'react';
+
+interface HamburgerProps {
+  isVisible: boolean;
+}
+
+export default function LinkComponent({ isVisible }: HamburgerProps) {
+  const pathName = usePathname();
+
+  return (
+    <>
+      <TitleContainer>
+        <Link href={'/'}>
+          <Text
+            tag={'h1'}
+            family="Lato"
+            weight="900"
+            color="#383838"
+            type={'subtitle2'}
+          >
+            Digi Dreams
+          </Text>
+        </Link>
+      </TitleContainer>
+
+      <MenuContainer $isShow={isVisible}>
+        <ListLink>
+          <ListItem $isSelect={pathName === '/'}>
+            <Link href={'/'}>Home</Link>
+          </ListItem>
+
+          <ListItem $isSelect={pathName === '/about'}>
+            <Link href={'/about'}>About Us</Link>
+          </ListItem>
+
+          <ListItem $isSelect={pathName === '/solutions'}>
+            <Link href={'/solutions'}>Solutions</Link>
+          </ListItem>
+
+          <ListItem $isSelect={pathName === '/blog'}>
+            <Link href={'/blog'}>Blog</Link>
+          </ListItem>
+
+          <ListItem $isSelect={pathName === '/internship'}>
+            <Link href={'/internship'}>Internship</Link>
+          </ListItem>
+        </ListLink>
+
+        <Contact $isMobile={true}>
+          <Link data-testid="mobile-contact" href={'contact'}>
+            Lets Talk
+          </Link>
+        </Contact>
+      </MenuContainer>
+
+      <Contact $isMobile={false}>
+        <Link data-testid="dekstop-contact" href={'contact'}>
+          Lets Talk
+        </Link>
+      </Contact>
+    </>
+  );
+}
diff --git a/src/stories/Navbar/navbar.stories.tsx b/src/stories/Navbar/navbar.stories.tsx
new file mode 100644
index 0000000..79b4492
--- /dev/null
+++ b/src/stories/Navbar/navbar.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Title, Description, Subtitle, Stories, Primary as PrimaryDocBlock, Controls} from "@storybook/blocks"
+import Navbar from "./navbar";
+
+const meta = {
+  title: "Components/Navbar",
+  component: Navbar,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ["autodocs"],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen",
+    componentSubtitle: "'Component Navbar",
+    docs: {
+      page: () => <>
+        <Title />
+        <Description />
+        <Subtitle />
+
+        <PrimaryDocBlock />
+        <Controls />
+
+        <Stories />
+      </>,
+    },
+  },
+} satisfies Meta<typeof Navbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const NavbarDefault: Story = {
+};
\ No newline at end of file
diff --git a/src/stories/Navbar/navbar.style.ts b/src/stories/Navbar/navbar.style.ts
new file mode 100644
index 0000000..b1372be
--- /dev/null
+++ b/src/stories/Navbar/navbar.style.ts
@@ -0,0 +1,175 @@
+import styled from 'styled-components';
+
+export const Paper = styled.div`
+  max-width: 1440px;
+  background-color: blue;
+  height: 99px;
+`;
+
+export const Nav = styled.nav`
+  width: 100%;
+  position: fixed;
+  background-color: white;
+  z-index: 10;
+  top: 0;
+`;
+
+export const NavWrapper = styled.div`
+  display: flex;
+  padding: 19px 0;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  position: relative;
+  @media (width >= 1444px) {
+    width: 1120px;
+    margin: auto;
+  }
+`;
+
+export const TitleContainer = styled.div`
+  display: flex;
+  a {
+    text-decoration: none;
+    color: #383838;
+  }
+`;
+
+export const MenuContainer = styled.div<{ $isShow: boolean }>`
+  display: flex;
+  justify-content: space-between;
+  @media (width <= 954px) {
+    display: block;
+    padding: 16px 0 24px 0;
+    overflow: hidden;
+    position: absolute;
+    background-color: #2d2d2d;
+    height: auto;
+    width: 320px;
+    top: 70px;
+    border-radius: 12px;
+    transition: all 0.3s ease-in-out;
+    right: ${(props) => (props.$isShow ? '0' : '-800px')};
+    z-index: 10;
+  }
+`;
+
+export const ListLink = styled.ul`
+  display: flex;
+  list-style: none;
+  align-items: center;
+  @media (width <= 954px) {
+    flex-direction: column;
+    align-items: baseline;
+    margin: 0 0 16px 0;
+    width: 100%;
+  }
+`;
+
+export const ListItem = styled.li<{ $isSelect: boolean }>`
+  margin: 0 16px;
+  @media (width <= 954px) {
+    margin: 0px;
+    width: 100%;
+  }
+  a {
+    font-size: 16px;
+    font-family: Inter, sans-serif;
+    color: ${(param) => (param.$isSelect == true ? '#383838' : '#8FA0AD')};
+    text-decoration: none;
+    font-weight: ${(param) => (param.$isSelect == true ? '700' : '400')};
+    &:hover {
+      color: ${(param) => (param.$isSelect == true ? '#383838' : '#383838')};
+      text-decoration: none;
+      font-weight: ${(param) => (param.$isSelect == true ? '700' : '400')};
+    }
+    @media (width <= 954px) {
+      display: block;
+      width: 100%;
+      padding: 8px 0 8px 16px;
+      color: white;
+      background-color: ${(props) => (props.$isSelect ? '#525252' : '')};
+      &:hover {
+        background-color: ${(param) =>
+          param.$isSelect == true ? '' : '#3d3d3d'};
+        text-decoration: none;
+        color: white;
+        font-weight: ${(param) => (param.$isSelect == true ? '700' : '400')};
+      }
+    }
+  }
+`;
+
+export const Contact = styled.div<{ $isMobile: boolean }>`
+  a {
+    font-family: Inter, sans-serif;
+    font-size: 16px;
+    border-radius: 32px;
+    color: #383838;
+    background-color: white;
+    text-decoration: none;
+    border: 1px solid #383838;
+    padding: 9px 22px;
+    display: ${(props) => (props.$isMobile ? 'none' : 'inline')};
+    margin: 0 0 0 16px;
+    &:hover {
+      background-color: #383838;
+      color: white;
+      transition: 0.3s;
+    }
+    @media (width <= 954px) {
+      display: ${(props) => (props.$isMobile ? 'inline' : 'none')};
+    }
+  }
+`;
+
+export const HamburgerContainer = styled.div`
+  display: none;
+  position: relative;
+  @media (width <= 954px) {
+    display: flex;
+  }
+`;
+
+export const HamburgerIcon = styled.button`
+  display: none;
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  border: none;
+  height: auto;
+  cursor: pointer;
+  width: auto;
+  flex-direction: column;
+  @media (width <= 954px) {
+    display: flex;
+  }
+`;
+
+export const FirstSpan = styled.span<{ $isShow: boolean }>`
+  height: 3px;
+  width: 32px;
+  margin: 0 0 8px 0;
+  background-color: #000000;
+  transition: all 0.3s ease-in-out;
+  transform: ${(props) =>
+    props.$isShow ? 'translateY(12px) rotate(45deg)' : ''};
+`;
+
+export const SecondSpan = styled.span<{ $isShow: boolean }>`
+  height: 3px;
+  width: 32px;
+  margin: 0 0 8px 0;
+  background-color: #000000;
+  opacity: ${(props) => (props.$isShow ? '0' : '1')};
+  transition: all 0.3s ease-in-out;
+`;
+
+export const ThirdSpan = styled.span<{ $isShow: boolean }>`
+  height: 3px;
+  width: 32px;
+  transform: ${(props) =>
+    props.$isShow ? ' translateY(-11px) rotate(-45deg)' : ''};
+  background-color: #000000;
+  transition: all 0.3s ease-in-out;
+`;
diff --git a/src/stories/Navbar/navbar.tsx b/src/stories/Navbar/navbar.tsx
new file mode 100644
index 0000000..e0da299
--- /dev/null
+++ b/src/stories/Navbar/navbar.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { useState } from 'react';
+import PaddingContainer from '../PaddingContainer/paddingContainer';
+import {
+  Nav,
+  NavWrapper,
+  HamburgerContainer,
+  HamburgerIcon,
+  FirstSpan,
+  SecondSpan,
+  ThirdSpan,
+  Paper,
+} from './navbar.style';
+import LinkComponent from './link';
+
+export default function Navbar() {
+  const [isShow, setIsShow] = useState(false);
+
+  const handleShow = () => {
+    setIsShow(!isShow);
+  };
+
+  return (
+    <Paper>
+    <Nav>
+      <PaddingContainer>
+        <NavWrapper>
+          <LinkComponent isVisible={isShow} />
+          <HamburgerContainer>
+            <HamburgerIcon onClick={handleShow} data-testid="hamburger-icon">
+              <FirstSpan $isShow={isShow}></FirstSpan>
+              <SecondSpan $isShow={isShow}></SecondSpan>
+              <ThirdSpan $isShow={isShow}></ThirdSpan>
+            </HamburgerIcon>
+          </HamburgerContainer>
+        </NavWrapper>
+      </PaddingContainer>
+    </Nav></Paper>
+  );
+}
diff --git a/src/stories/PaddingContainer/paddingContainer.stories.tsx b/src/stories/PaddingContainer/paddingContainer.stories.tsx
new file mode 100644
index 0000000..210f336
--- /dev/null
+++ b/src/stories/PaddingContainer/paddingContainer.stories.tsx
@@ -0,0 +1,39 @@
+// src/stories/GridStory.stories.tsx
+import type { Meta, StoryObj } from "@storybook/react";
+import { Title, Description, Subtitle, Stories, Primary as PrimaryDocBlock, Controls} from "@storybook/blocks"
+import PaddingContainer from "./paddingContainer";
+import { ContentContainer } from "./paddingContainer.style";
+
+
+const meta = {
+  title: "Components/PaddingContainer",
+  component: PaddingContainer,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    componentSubtitle: "'Component Container",
+    docs: {
+      page: () => <>
+        <Title />
+        <Description />
+        <Subtitle />
+
+        <PrimaryDocBlock />
+        <Controls />
+
+        <Stories />
+      </>,
+    },
+  },
+} satisfies Meta<typeof PaddingContainer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  args: {
+    children: [
+        <ContentContainer>Content</ContentContainer>
+    ],
+  },
+};
\ No newline at end of file
diff --git a/src/stories/PaddingContainer/paddingContainer.style.ts b/src/stories/PaddingContainer/paddingContainer.style.ts
new file mode 100644
index 0000000..f2cac55
--- /dev/null
+++ b/src/stories/PaddingContainer/paddingContainer.style.ts
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const Padding = styled.div`
+  width: 100%;
+  padding: 0 16px;
+  @media (width >= 768px) {
+    padding: 0 100px;
+  }
+`;
+
+export const ContentContainer = styled.div`
+  font-size: 40px;
+  font-family: 'Inter', sans-serif;
+  align-items: center;
+  color: #000000b6;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  background-color: #4287f5;
+  height: 50vh;
+`;
\ No newline at end of file
diff --git a/src/stories/PaddingContainer/paddingContainer.tsx b/src/stories/PaddingContainer/paddingContainer.tsx
new file mode 100644
index 0000000..05fb556
--- /dev/null
+++ b/src/stories/PaddingContainer/paddingContainer.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Padding } from './paddingContainer.style';
+
+interface PaddingProps {
+  children: React.ReactNode;
+}
+
+export default function PaddingContainer({ children }: PaddingProps) {
+  return <Padding>{children}</Padding>;
+}
diff --git a/src/stories/Text/Text.stories.tsx b/src/stories/Text/Text.stories.tsx
new file mode 100644
index 0000000..4c9cd58
--- /dev/null
+++ b/src/stories/Text/Text.stories.tsx
@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Title, Description, Subtitle, Stories, Primary as PrimaryDocBlock, Controls } from "@storybook/blocks";
+
+import Text from "./text";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: "Components/Text",
+  component: Text,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered",
+    componentSubtitle: "'Component Text",
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Subtitle />
+
+          <PrimaryDocBlock />
+          <Controls />
+
+          <Stories />
+        </>
+      ),
+    },
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ["autodocs"],
+} satisfies Meta<typeof Text>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+// Heading
+
+export const Example: Story = {
+  args: {
+    tag: 'h1',
+    family: "Lato",
+    weight: "900",
+    color: "#383838",
+    type: 'subtitle2',
+    children: <>Text as an example</>,
+  }
+};
diff --git a/src/stories/Text/text.style.ts b/src/stories/Text/text.style.ts
new file mode 100644
index 0000000..98ec331
--- /dev/null
+++ b/src/stories/Text/text.style.ts
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const TextComponent = styled.p<{
+  size: string;
+  color: string;
+  family: string;
+  weight: string;
+}>`
+  font-family: ${(props) => props.family};
+  font-size: ${(props) => props.size};
+  color: ${(props) => props.color};
+  font-weight: ${(props) => props.weight};
+`;
\ No newline at end of file
diff --git a/src/stories/Text/text.tsx b/src/stories/Text/text.tsx
new file mode 100644
index 0000000..a595d9a
--- /dev/null
+++ b/src/stories/Text/text.tsx
@@ -0,0 +1,74 @@
+import React, { ElementType } from 'react';
+import { TextComponent } from './text.style';
+
+enum FontSize {
+  tiny = '12px',
+  small = '14px',
+  regular2 = '16px',
+  regular1 = '18px',
+  subtitle4 = '20px',
+  subtitle3 = '22px',
+  subtitle2 = '24px',
+  subtitle1 = '26px',
+  title3 = '32px',
+  title2 = '37px',
+  title1 = '40px',
+  headline2 = '64px',
+  headline1 = '72px',
+}
+
+type FontFamily = 'Poppins' | 'Inter' | 'Lato' | 'Asap' | 'Satoshi';
+
+export interface TextProps {
+  /**
+   * text want to display
+   */
+  children: React.ReactNode;
+  /**
+   * font size for text
+   */
+  type: keyof typeof FontSize;
+  /**
+   * wrapping tag for text
+   */
+  tag: ElementType;
+  /**
+   * font family for text
+   */
+  family: FontFamily;
+  /**
+   * font color for text
+   */
+  color: string;
+  /**
+   * font weight for text
+   */
+  weight: string;
+  /**
+   * additional styles if needed
+   */
+  styles?: React.CSSProperties;
+}
+
+export default function Text({
+  children,
+  type,
+  tag,
+  color,
+  weight,
+  family,
+  styles,
+}: TextProps) {
+  return (
+    <TextComponent
+      as={tag}
+      size={FontSize[type]}
+      color={color}
+      weight={weight}
+      family={family}
+      style={styles}
+    >
+      {children}
+    </TextComponent>
+  );
+}
\ No newline at end of file
diff --git a/src/stories/assets/Font/Font.tsx b/src/stories/assets/Font/Font.tsx
index 1d26d7c..1584ef5 100644
--- a/src/stories/assets/Font/Font.tsx
+++ b/src/stories/assets/Font/Font.tsx
@@ -1,9 +1,26 @@
 export default function Font() {
     return (
     <>
-        <link href="https://api.fontshare.com/v2/css?f[]=satoshi@900,700,500,300,400&display=swap" rel="stylesheet"></link>
+        {/* satoshi */}
+        <link
+        href="https://api.fontshare.com/v2/css?f[]=satoshi@900,700,500,300,400&display=swap"
+        rel="stylesheet"
+        ></link>
+        {/* inter */}
         <style>
-            @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap');
+        </style>
+        {/* asap */}
+        <style>
+        @import url('https://fonts.googleapis.com/css2?family=Asap:wght@100;200;300;400;500;600;700;800&display=swap');
+        </style>
+        {/* lato */}
+        <style>
+        @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
+        </style>
+        {/* poppins */}
+        <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');
         </style>
     </>
     );
diff --git a/styles/globals.css b/styles/globals.css
index c578697..06727a2 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,5 +1,10 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500&display=swap');
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Asap:wght@100;200;300;400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');
+@import url('https://api.fontshare.com/v2/css?f[]=satoshi@900,700,500,300,400&display=swap');
 
 * {
-    font-family: 'Inter', sans-serif;
+    font-family: 'satoshi', sans-serif;
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index f2230cb..2d7ab4b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1324,18 +1324,6 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz#e5211452df060fa8522b55c7b3c0c4d1981cb044"
   integrity sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==
 
-"@isaacs/cliui@^8.0.2":
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
-  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
-  dependencies:
-    string-width "^5.1.2"
-    string-width-cjs "npm:string-width@^4.2.0"
-    strip-ansi "^7.0.1"
-    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
-    wrap-ansi "^8.1.0"
-    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
-
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -3476,11 +3464,6 @@ ansi-regex@^5.0.1:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
-ansi-regex@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
-  integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
-
 ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -3500,11 +3483,6 @@ ansi-styles@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
   integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
 
-ansi-styles@^6.1.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
-  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
-
 anymatch@^3.0.3, anymatch@~3.1.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
@@ -4196,6 +4174,15 @@ client-only@0.0.1:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
+cliui@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
+  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.1"
+    wrap-ansi "^7.0.0"
+
 clone-deep@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
@@ -4847,11 +4834,6 @@ duplexify@^3.5.0, duplexify@^3.6.0:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
-eastasianwidth@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
-  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
-
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -6565,12 +6547,12 @@ iterator.prototype@^1.1.2:
     reflect.getprototypeof "^1.0.4"
     set-function-name "^2.0.1"
 
-jackspeak@^2.3.5:
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.3.6.tgz#647ecc472238aee4b06ac0e461acc21a8c505ca8"
-  integrity sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==
+jackspeak@2.1.1, jackspeak@^2.3.5:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.1.1.tgz#2a42db4cfbb7e55433c28b6f75d8b796af9669cd"
+  integrity sha512-juf9stUEwUaILepraGOWIJTLwg48bUnBmRqd2ln2Os1sW987zeoj/hzhbvRB95oMuS2ZTpjULmdwHNX4rzZIZw==
   dependencies:
-    "@isaacs/cliui" "^8.0.2"
+    cliui "^8.0.1"
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
@@ -8897,7 +8879,7 @@ streamx@^2.15.0:
     fast-fifo "^1.1.0"
     queue-tick "^1.0.1"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
+string-width@^4, string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -8906,15 +8888,6 @@ streamx@^2.15.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
-string-width@^5.0.1, string-width@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
-  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
-  dependencies:
-    eastasianwidth "^0.2.0"
-    emoji-regex "^9.2.2"
-    strip-ansi "^7.0.1"
-
 string.prototype.matchall@^4.0.8:
   version "4.0.10"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz#a1553eb532221d4180c51581d6072cd65d1ee100"
@@ -8971,20 +8944,13 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+strip-ansi@^6, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
   dependencies:
     ansi-regex "^5.0.1"
 
-strip-ansi@^7.0.1:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
-  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
-  dependencies:
-    ansi-regex "^6.0.1"
-
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@@ -9804,7 +9770,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -9813,15 +9779,6 @@ wordwrap@^1.0.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
-  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
-  dependencies:
-    ansi-styles "^6.1.0"
-    string-width "^5.0.1"
-    strip-ansi "^7.0.1"
-
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"