Merge branch 'master' into i8nmobile

components/InputBox.stories.tsx

@@ -0,0 +1,52 @@
+import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import type { InputBoxProps } from '@/types/components/InputBoxPropsType';
+import { InputTypes } from '@/types/components/InputBoxPropsType';
+
+import InputBox from './InputBox';
+
+const meta: Meta<typeof InputBox> = {
+  title: 'Components/InputBox',
+  component: InputBox
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InputBox>;
+
+const Input: Story = {
+  args: {
+    inputValue: ''
+  },
+
+  render: (args: InputBoxProps) => {
+    const [{ inputValue }, updateArgs] = useArgs();
+
+    const setValue = (newValue: string) => {
+      updateArgs({ inputValue: newValue });
+    };
+
+    return <InputBox {...args} inputValue={inputValue} setInput={setValue} />;
+  }
+};
+
+export const TextInput: Story = {
+  ...Input,
+
+  args: {
+    inputType: InputTypes.TEXT,
+    inputName: 'Name',
+    placeholder: 'AsyncAPI Initiative'
+  }
+};
+
+export const EmailInput: Story = {
+  ...Input,
+
+  args: {
+    inputType: InputTypes.EMAIL,
+    inputName: 'Email',
+    placeholder: '[email protected]'
+  }
+};

components/InputBox.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import type { InputBoxProps } from '@/types/components/InputBoxPropsType';
+
+/**
+ * This component renders input box.
+ */
+export default function InputBox({ inputType, inputName, placeholder, inputValue, setInput }: InputBoxProps) {
+  return (
+    <input
+      type={inputType}
+      name={inputName}
+      placeholder={placeholder}
+      value={inputValue}
+      onChange={(e) => setInput(e.target.value)}
+      className='form-input mt-2 block w-full rounded-md sm:text-sm sm:leading-5 md:mt-0 md:flex-1'
+      required
+      data-testid={`NewsletterSubscribe-${inputType}-input`}
+    />
+  );
+}

components/NewsletterSubscribe.tsx

@@ -1,10 +1,12 @@
 import { useState } from 'react';
 
 import { ButtonType } from '@/types/components/buttons/ButtonPropsType';
+import { InputTypes } from '@/types/components/InputBoxPropsType';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 
 import { useTranslation } from '../utils/i18n';
 import Button from './buttons/Button';
+import InputBox from './InputBox';
 import Loader from './Loader';
 import Heading from './typography/Heading';
 import Paragraph from './typography/Paragraph';
@@ -128,25 +130,19 @@ export default function NewsletterSubscribe({
         <Loader dark={dark} />
       ) : (
         <form className='flex flex-col gap-4 md:flex-row' onSubmit={handleSubmit}>
-          <input
-            type='text'
-            name='name'
+          <InputBox
+            inputType={InputTypes.TEXT}
+            inputName='name'
             placeholder={t('newsletterCTA.nameInput')}
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            className='form-input block w-full rounded-md sm:text-sm sm:leading-5 md:mt-0 md:flex-1'
-            required
-            data-testid='NewsletterSubscribe-text-input'
+            inputValue={name}
+            setInput={setName}
           />
-          <input
-            type='email'
-            name='email'
+          <InputBox
+            inputType={InputTypes.EMAIL}
+            inputName='email'
             placeholder={t('newsletterCTA.emailInput')}
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            className='form-input mt-2 block w-full rounded-md sm:text-sm sm:leading-5 md:mt-0 md:flex-1'
-            required
-            data-testid='NewsletterSubscribe-email-input'
+            inputValue={email}
+            setInput={setEmail}
           />
           <Button
             type={ButtonType.SUBMIT}

components/sponsors/GoldSponsorsList.ts

@@ -1,13 +1,6 @@
 import type { SponsorType } from '@/types/components/sponsors/SponsorType';
 
 export const goldSponsors: SponsorType[] = [
-  {
-    name: 'Postman',
-    website: 'https://www.postman.com',
-    imageSrc: '/img/sponsors/postman.png',
-    altText: 'Postman',
-    imageClass: 'inline-block px-4 sm:h-18'
-  },
   {
     name: 'IBM',
     website: 'https://www.ibm.com',

components/sponsors/SilverSponsors.tsx

@@ -20,7 +20,7 @@ export default function SilverSponsors({ className = '' }: SilverSponsorsProps):
             key={index}
             href={sponsor.website}
             target='_blank'
-            className='relative block w-2/3 p-4 text-center sm:w-1/2 sm:p-0 md:w-1/3 lg:w-1/5'
+            className='relative block w-2/3 p-4 text-center sm:w-1/2 md:w-1/3 lg:w-1/4'
             rel='noopener noreferrer'
             data-testid='SilverSponsors-link'
           >

components/sponsors/SilverSponsorsList.ts

@@ -35,5 +35,19 @@ export const Silversponsors: SponsorType[] = [
     altText: 'SmartBear',
     imageSrc: '/img/sponsors/smartbear_logo.png',
     imageClass: 'inline-block sm:h-9'
+  },
+  {
+    name: 'HDI',
+    website: 'https://www.hdi.global/',
+    altText: 'HDI',
+    imageSrc: '/img/sponsors/hdi_logo.png',
+    imageClass: 'inline-block sm:h-9'
+  },
+  {
+    name: 'Route4Me',
+    website: 'https://route4me.com',
+    altText: 'Best Route Planning and Route Optimization Software',
+    imageSrc: '/img/sponsors/route4me_logo.png',
+    imageClass: 'inline-block sm:h-9'
   }
 ];

components/sponsors/SponsorsList.ts

@@ -14,5 +14,12 @@ export const sponsors: SponsorType[] = [
     imageSrc: '/img/sponsors/gravitee.io_logo.jpg',
     altText: 'Gravitee.io',
     imageClass: 'inline-block px-4 sm:h-14'
+  },
+  {
+    name: 'Postman',
+    website: 'https://www.postman.com',
+    imageSrc: '/img/sponsors/postman.png',
+    altText: 'Postman',
+    imageClass: 'inline-block px-4 sm:h-18'
   }
 ];