feat: button story Components and Component reusability

components/About/about.tsx

@@ -4,6 +4,7 @@ import Heading from '../Typography/heading';
 import Paragraph from '../Typography/paragraph';
 import Button from '../Buttons/button';
 import Image from 'next/image';
+import Download from '../illustration/download';
 
 function About(): JSX.Element {
   return (
@@ -51,27 +52,21 @@ function About(): JSX.Element {
               target="_blank"
               rel="noreferrer"
             >
-              <Button type="button" className="w-[200px]">
-                Become a sponsor now
-              </Button>
+              <Button type="button" className="w-[200px]" text="Become a sponsor now"/>
             </a>
             <a
               className="flex justify-center "
               href="/pdf/conf-2025.pdf"
               download={`conf ${new Date().getFullYear()}.pdf`}
             >
-              <Button type="button" overlay={true} className="w-[240px] border">
-                <div className="flex gap-2 justify-center items-center">
-                  <Image
-                    src="/img/Download_icon.png"
-                    height={20}
-                    width={20}
-                    alt="Download-icon"
-                    objectFit="contain"
-                  />
-                  <div>Sponsorship prospectus</div>
-                </div>
-              </Button>
+              <Button 
+                type="button" 
+                outline={true} 
+                className="w-[240px] border"
+                text="Sponsorship prospectus"
+                icon={<Download />}
+                iconPosition="left"
+              />
             </a>
           </div>
         </div>

components/Buttons/button.stories.tsx

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Button from './button';
+import Download from '../illustration/download';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Buttons',
+  component: Button,
+  argTypes: {
+    children: {
+      control: { type: 'text' },
+      description: 'Button content (alternative to text prop)',
+      defaultValue: 'Button',
+    },
+    text: {
+      control: { type: 'text' },
+      description: 'Button text (alternative to children)',
+    },
+    type: {
+      options: ['button', 'submit', 'reset'],
+      control: { type: 'select' },
+      defaultValue: 'button',
+    },
+    className: {
+      control: { type: 'text' },
+      description: 'Custom CSS classes',
+    },
+    outline: {
+      control: { type: 'boolean' },
+      description: 'Remove gradient background if true',
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Disable the button',
+    },
+    test: {
+      control: { type: 'text' },
+      description: 'Test attribute',
+    },
+    icon: {
+      control: { type: 'object' },
+      description: 'Icon component to display',
+    },
+    iconPosition: {
+      options: ['left', 'right', 'center'],
+      control: { type: 'select' },
+      description: 'Position of the icon relative to text',
+      defaultValue: 'right',
+    },
+    onClick: { action: 'clicked' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    text: 'Default Button',
+    type: 'button',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    text: 'Outline Button',
+    outline: true,
+    className: 'border',
+    type: 'button',
+  },
+};
+
+export const Submit: Story = {
+  args: {
+    text: 'Submit Button',
+    type: 'submit',
+  },
+};
+
+export const Reset: Story = {
+  args: {
+    text: 'Reset Button',
+    type: 'reset',
+  },
+};
+
+export const WithIconRight: Story = {
+  args: {
+    text: 'Download File',
+    icon: <Download />,
+    iconPosition: 'right',
+    type: 'button',
+  },
+};
+
+export const WithIconLeft: Story = {
+  args: {
+    text: 'Download File',
+    icon: <Download />,
+    iconPosition: 'left',
+    type: 'button',
+  },
+};
+
+export const IconWithOutline: Story = {
+  args: {
+    text: 'Sponsorship Prospectus',
+    icon: <Download />,
+    iconPosition: 'left',
+    outline: true,
+    className: 'w-[240px] border',
+    type: 'button',
+  },
+};

components/Buttons/button.tsx

@@ -1,35 +1,54 @@
 import React from 'react';
 
 type ButtonType = 'button' | 'submit' | 'reset' | undefined;
+type IconPosition = 'left' | 'right';
 
 interface IButton {
   className?: string;
-  children: React.ReactNode;
-  overlay?: boolean;
+  children?: React.ReactNode;
+  text?: string | React.ReactNode;
+  outline?: boolean;
   onClick?: React.MouseEventHandler;
   type: ButtonType;
   disabled?: boolean;
   test?: string;
+  icon?: React.ReactNode;
+  iconPosition?: IconPosition;
 }
 
 function Button({
   className,
   children,
-  overlay,
+  text,
+  outline,
   onClick,
   type,
   disabled,
   test,
+  icon,
+  iconPosition = 'right',
 }: IButton): React.JSX.Element {
+  const content = text || children;
+
   return (
     <button
       disabled={disabled}
-      data-test={test || ''}
+      {...(test && { 'data-test': test })}
       type={type}
       onClick={onClick}
-      className={`${overlay ? '' : 'gradient-bg'} ${disabled && 'cursor-not-allowed'} flex items-center justify-center text-white h-[54px] rounded-md p-[8px] ${className}`}
+      className={`${!outline && 'gradient-bg'} ${disabled && 'cursor-not-allowed'} flex items-center justify-center text-white  h-14 rounded-md p-2 ${iconPosition === 'left' ? 'justify-start' : 'justify-end'} ${className}`}
     >
-      {children}
+      {icon && iconPosition === 'left' && (
+        <span className="inline-block">
+          {icon}
+        </span>
+      )}
+      <span className="inline-block">{content}</span>
+      {icon && iconPosition === 'right' && (
+        <span className="inline-block">
+          {icon}
+        </span>
+      )}
     </button>
   );
 }

components/Dropdown/dropdown.tsx

@@ -1,4 +1,6 @@
 import React, { useState, useRef, useEffect, SetStateAction, JSX } from 'react';
+import { City } from '../../types/types';
+import Arrows from '../illustration/arrows';
 
 interface IDropdown<T> {
   selectedItem: T | null;
@@ -55,19 +57,7 @@ function Dropdown<T>({
           onClick={() => setShow(!show)}
         >
           <div>{displayValue}</div>
-          <svg
-            className={`-mr-1 h-5 w-5 text-gray-400 transition-transform ${show ? 'rotate-180' : ''
-              }`}
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            aria-hidden="true"
-          >
-            <path
-              fillRule="evenodd"
-              d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
-              clipRule="evenodd"
-            />
-          </svg>
+          <Arrows direction='down' className='w-5 h-5' />
         </button>
       </div>
 

components/Form/Cfp/stepFour.tsx

@@ -2,9 +2,9 @@
 import React, { FormEvent, useState } from 'react';
 import { toast } from 'react-hot-toast';
 import axios from 'axios';
-import ActivityLoader from '../../illustration/activityLoader';
 import Button from '../../Buttons/button';
 import { CfpStepProps } from '../../../types/types';
+import ActivityLoader from '../../illustration/activityLoader';
 
 function StepFour({ setStep, setForm, data }: CfpStepProps) {
   const [submitting, setSubmitting] = useState<boolean>(false);
@@ -71,9 +71,8 @@ function StepFour({ setStep, setForm, data }: CfpStepProps) {
             disabled={submitting || disabled}
             className="bg-tetiary-pink p-3 rounded-md text-white mt-3 w-36 lg:w-full lg:mt-5"
             test="step-four-next"
-          >
-            {submitting ? <ActivityLoader /> : 'Submit'}
-          </Button>
+            text={submitting ? <ActivityLoader /> : 'Submit'}
+          />
         </div>
       </div>
     </form>

components/Form/Cfp/stepOne.tsx

@@ -51,9 +51,8 @@ function StepOne({ setStep, setForm, data }: CfpStepProps): JSX.Element {
           className="bg-tetiary-pink p-3 rounded-md text-white mt-6 float-right w-36 lg:w-full lg:mt-8"
           disabled={!data.Fullname && true}
           test="step-one-next"
-        >
-          Next
-        </Button>
+          text="Next"
+        />
       </div>
     </form>
   );

components/Form/Cfp/stepThree.tsx

@@ -76,9 +76,8 @@ function StepThree({ setStep, setForm, data }: CfpStepProps): JSX.Element {
             disabled={!data.Description || (!data.Title && true)}
             className="bg-tetiary-pink p-3 rounded-md text-white mt-3 w-36 lg:w-full lg:mt-5"
             test="step-three-next"
-          >
-            Next
-          </Button>
+            text="Next"
+          />
         </div>
       </div>
     </form>

components/Form/Cfp/stepTwo.tsx

@@ -40,9 +40,8 @@ function StepTwo({ setStep, setForm, data }: CfpStepProps): JSX.Element {
             disabled={!data.Description || (!data.Title && true)}
             className="bg-tetiary-pink p-3 rounded-md text-white mt-3 w-36 lg:w-full lg:mt-3"
             test="step-two-next"
-          >
-            Next
-          </Button>
+            text="Next"
+          />
         </div>
       </div>
     </form>

components/Form/subscription.tsx

@@ -15,9 +15,7 @@ function Subscription(): JSX.Element {
           className="sm:w-full"
           data-test="subscribe-button"
         >
-          <Button type="submit" className="w-full md:w-[200px] mt-8 px-10">
-            Subscribe
-          </Button>
+          <Button type="submit" className="w-full md:w-[200px] mt-8 px-10" text="Subscribe" />
         </a>
       </div>
     </div>

components/Header/header.tsx

@@ -38,9 +38,7 @@ function Header(): JSX.Element {
               </div>
               <div className="mt-[54px] relative flex items-center justify-center">
                 <Link href="#tickets">
-                  <Button type="button" className="w-[250px]">
-                    Register Now
-                  </Button>
+                  <Button type="button" className="w-[250px]" text="Register Now" />
                 </Link>
               </div>
             </div>

components/Popup/popup.tsx

@@ -11,6 +11,7 @@ import { createPortal } from 'react-dom';
 import Paragraph from '../Typography/paragraph';
 import Button from '../Buttons/button';
 import Link from 'next/link';
+import Cancel from '../illustration/cancel';
 
 function Popup() {
   const [isVisible, setIsVisible] = useState<boolean>(false);
@@ -64,32 +65,15 @@ function Popup() {
                       className="w-[150px]"
                     />
                   </div>
-                  <button
-                    data-test="close-button"
-                    className="p-2 hover:bg-gray-400 cursor-pointer w-10 h-10 flex items-center justify-center rounded-full transition-colors duration-200 flex-shrink-0"
+                  <Button
+                    type="button"
+                    outline={true}
+                    test="close-button"
+                    className="p-2 cursor-pointer w-10 h-10 flex items-center justify-center rounded-full flex-shrink-0"
                     onClick={handleClose}
-                  >
-                    <svg
-                      width="18"
-                      height="18"
-                      viewBox="0 0 18 18"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M1 1L17 17"
-                        stroke="#E9EAEA"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                      />
-                      <path
-                        d="M17 1L0.999999 17"
-                        stroke="#E9EAEA"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                      />
-                    </svg>
-                  </button>
+                    icon={<Cancel />}
+                    iconPosition="left"
+                  />
                 </div>
 
                 <div className="my-10 flex justify-center">
@@ -125,9 +109,7 @@ function Popup() {
                     event-driven APIs!
                   </Paragraph>
                   <Link href="/venue/California">
-                    <Button type="button" className="w-[200px]">
-                      See What&apos;s Next
-                    </Button>
+                    <Button type="button" className="w-[200px]" text="See What&apos;s Next" />
                   </Link>
                 </div>
               </div>