feat: docs navbar, paddingcontainer, and text

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",
   },
 };
 

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>
     </>

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"

src/stories/Card-solutions/CardSolution.style.ts

@@ -36,4 +36,4 @@ export const Description = styled.p`
   color: #516371;
   font-weight: 400;
   font-size: 18px;
-`;
+`;

src/stories/Card-solutions/CardSolution.tsx

@@ -13,23 +13,23 @@ 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
    */
   style?: React.CSSProperties;
 }
 
 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>

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(){}}
         />
       </>

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;
 `;
 

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" />

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>
+    </>
+  );
+}

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 = {
+};