fix: changed the button props type to enum (#2760)

components/buttons/Button.tsx

@@ -1,15 +1,17 @@
 import Link from 'next/link';
 import { twMerge } from 'tailwind-merge';
 
+import { ButtonIconPosition, ButtonSize, ButtonType } from '@/types/components/buttons/ButtonPropsType';
+
 type IButtonProps = {
   text: string;
   icon?: React.ReactNode;
-  iconPosition?: 'left' | 'right';
+  iconPosition?: ButtonIconPosition;
   target?: string;
   bgClassName?: string;
   textClassName?: string;
-  buttonSize?: 'small' | 'default';
-  type?: 'submit' | 'reset' | 'button';
+  buttonSize?: ButtonSize;
+  type?: ButtonType;
 } & (
   | ({
       href: string;
@@ -22,14 +24,14 @@ type IButtonProps = {
 /**
  * @name Button
  * @param {string} props.text - The text to be displayed on the button.
- * @param {string} props.type - The type of the button. Defaults to 'button'.
+ * @param {ButtonType} props.type - The type of the button. Defaults to 'button'.
  * @param {string} props.target - The target attribute for the anchor tag. Defaults to '_self'.
  * @param {React.ReactNode} props.icon - The icon to be displayed on the button.
- * @param {string} props.iconPosition - The position of the icon. Defaults to 'right'.
+ * @param {ButtonIconPosition} props.iconPosition - The position of the icon. Defaults to 'right'.
  * @param {string} props.className - The class name to be applied to the button.
  * @param {string} props.bgClassName - The class name to be applied to the button's background.
  * @param {string} props.textClassName - The class name to be applied to the button's text.
- * @param {string} props.buttonSize - The size of the button. Defaults to 'default'.
+ * @param {ButtonSize} props.buttonSize - The size of the button. Defaults to 'default'.
  * @param {string} props.href - The href attribute for the anchor tag.
  * @description The Button component is a reusable button component that can be used to render a button or an anchor tag
  * @description The component accepts button or anchor tag props based on the presence of the href prop.
@@ -38,36 +40,36 @@ type IButtonProps = {
  */
 export default function Button({
   text,
-  type = 'button',
+  type = ButtonType.BUTTON,
   target = '_self',
   icon,
-  iconPosition = 'right',
+  iconPosition = ButtonIconPosition.RIGHT,
   className,
   bgClassName = twMerge('bg-primary-500 hover:bg-primary-400'),
   textClassName = twMerge('text-white'),
   buttonSize,
   ...props
 }: IButtonProps): React.ReactElement {
-  const smallButtonClasses = twMerge(`${bgClassName} ${textClassName} transition-all duration-500 
+  const smallButtonClasses = twMerge(`${bgClassName} ${textClassName} transition-all duration-500
                             ease-in-out rounded-md px-3 py-2 text-sm font-medium tracking-heading ${className || ''}`);
-  const classNames = twMerge(`${bgClassName} ${textClassName} transition-all duration-500 ease-in-out 
+  const classNames = twMerge(`${bgClassName} ${textClassName} transition-all duration-500 ease-in-out
                           rounded-md px-4 py-3 text-md font-semibold tracking-heading ${className || ''}`);
 
   if (!props.href) {
     return (
       <button
         {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
         type={type}
-        className={buttonSize === 'small' ? smallButtonClasses : classNames}
+        className={buttonSize === ButtonSize.SMALL ? smallButtonClasses : classNames}
         data-testid='Button-main'
       >
-        {icon && iconPosition === 'left' && (
+        {icon && iconPosition === ButtonIconPosition.LEFT && (
           <span className='mr-2 inline-block' data-testid='Button-icon-left'>
             {icon}
           </span>
         )}
         <span className='inline-block'>{text}</span>
-        {icon && iconPosition === 'right' && (
+        {icon && iconPosition === ButtonIconPosition.RIGHT && (
           <span className='ml-2 inline-block' data-testid='Button-icon-right'>
             {icon}
           </span>
@@ -82,12 +84,12 @@ export default function Button({
       {...props}
       target={target}
       rel='noopener noreferrer'
-      className={buttonSize === 'small' ? smallButtonClasses : classNames}
+      className={buttonSize === ButtonSize.SMALL ? smallButtonClasses : classNames}
       data-testid='Button-link'
     >
-      {icon && iconPosition === 'left' && <span className='mr-2 inline-block'>{icon}</span>}
+      {icon && iconPosition === ButtonIconPosition.LEFT && <span className='mr-2 inline-block'>{icon}</span>}
       <span className='inline-block'>{text}</span>
-      {icon && iconPosition === 'right' && <span className='ml-2 inline-block'>{icon}</span>}
+      {icon && iconPosition === ButtonIconPosition.RIGHT && <span className='ml-2 inline-block'>{icon}</span>}
     </Link>
   );
 }

components/buttons/GithubButton.tsx

@@ -1,3 +1,5 @@
+import { ButtonIconPosition, ButtonSize } from '@/types/components/buttons/ButtonPropsType';
+
 import IconGithub from '../icons/Github';
 import Button from './Button';
 import type { IButtonDefaultProps } from './types';
@@ -13,14 +15,14 @@ interface IGithubButtonProps extends IButtonDefaultProps {
  * @param {string} props.text - The text to display on the button.
  * @param {string} props.href - The href attribute for the anchor tag.
  * @param {string} props.target - The target attribute for the anchor tag.
- * @param {string} props.iconPosition - The position of the icon in the button.
+ * @param {ButtonIconPosition} props.iconPosition - The position of the icon in the button.
  * @param {string} props.className - The class name to be applied to the button.
  */
 export default function GithubButton({
   text = 'githubButton',
   href = 'https://github.com/asyncapi',
   target = '_blank',
-  iconPosition = 'left',
+  iconPosition = ButtonIconPosition.LEFT,
   className,
   inNav
 }: IGithubButtonProps) {
@@ -39,7 +41,7 @@ export default function GithubButton({
       className={className}
       data-testid='Github-button'
       bgClassName='bg-gray-800 hover:bg-gray-700'
-      buttonSize={inNav ? 'small' : 'default'}
+      buttonSize={inNav ? ButtonSize.SMALL : ButtonSize.DEFAULT}
     />
   );
 }

components/buttons/GoogleCalendarButton.tsx

@@ -1,3 +1,5 @@
+import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
+
 import IconGoogleCalendar from '../icons/GoogleCalendar';
 import Button from './Button';
 import type { IButtonDefaultProps } from './types';
@@ -11,14 +13,14 @@ interface IGoogleCalendarButtonProps extends IButtonDefaultProps {}
  * @param {string} props.text - The text to display on the button.
  * @param {string} props.href - The href attribute for the anchor tag.
  * @param {string} props.target - The target attribute for the anchor tag.
- * @param {string} props.iconPosition - The position of the icon in the button.
+ * @param {ButtonIconPosition} props.iconPosition - The position of the icon in the button.
  * @param {string} props.className - The class name to be applied to the button.
  */
 export default function GoogleCalendarButton({
   text = 'googleCalendarBtn',
   href,
   target = '_blank',
-  iconPosition = 'left',
+  iconPosition = ButtonIconPosition.LEFT,
   className
 }: IGoogleCalendarButtonProps) {
   // TODO: add this again when we have i18n

components/buttons/ICSFileButton.tsx

@@ -1,3 +1,5 @@
+import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
+
 import IconCalendar from '../icons/Calendar';
 import Button from './Button';
 // TODO: add this again when we have i18n
@@ -11,14 +13,14 @@ interface IICSFButtonProps extends IButtonDefaultProps {}
  * @param {string} props.text - The text to display on the button.
  * @param {string} props.href - The href attribute for the anchor tag.
  * @param {string} props.target - The target attribute for the anchor tag.
- * @param {string} props.iconPosition - The position of the icon in the button.
+ * @param {ButtonIconPosition} props.iconPosition - The position of the icon in the button.
  * @param {string} props.className - The class name to be applied to the button.
  */
 export default function ICSFButton({
   text = 'icsFileBtn',
   href,
   target = '_blank',
-  iconPosition = 'left',
+  iconPosition = ButtonIconPosition.LEFT,
   className
 }: IICSFButtonProps) {
   // TODO: add this again when we have i18n

components/buttons/SlackButton.tsx

@@ -1,3 +1,5 @@
+import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
+
 import IconSlack from '../icons/Slack';
 import Button from './Button';
 import type { IButtonDefaultProps } from './types';
@@ -9,14 +11,14 @@ interface ISlackButtonProps extends IButtonDefaultProps {}
  * @param {string} props.text - The text to display on the button.
  * @param {string} props.href - The href attribute for the anchor tag.
  * @param {string} props.target - The target attribute for the anchor tag.
- * @param {string} props.iconPosition - The position of the icon in the button.
+ * @param {ButtonIconPosition} props.iconPosition - The position of the icon in the button.
  * @param {string} props.className - The class name to be applied to the button.
  */
 export default function SlackButton({
   text = 'Join on Slack',
   href = '/slack-invite',
   target = '_blank',
-  iconPosition = 'left',
+  iconPosition = ButtonIconPosition.LEFT,
   className
 }: ISlackButtonProps) {
   return (

components/buttons/SubscribeButton.tsx

@@ -1,3 +1,5 @@
+import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
+
 import IconSubscribe from '../icons/Subscribe';
 import Button from './Button';
 // import { useTranslation } from '../../lib/i18n';
@@ -10,14 +12,14 @@ interface IGoogleCalendarButtonProps extends IButtonDefaultProps {}
  * @param {string} props.text - The text to display on the button.
  * @param {string} props.href - The href attribute for the anchor tag.
  * @param {string} props.target - The target attribute for the anchor tag.
- * @param {string} props.iconPosition - The position of the icon in the button.
+ * @param {ButtonIconPosition} props.iconPosition - The position of the icon in the button.
  * @param {string} props.className - The class name to be applied to the button.
  */
 export default function GoogleCalendarButton({
   text = 'subscribeBtn',
   href,
   target = '_blank',
-  iconPosition = 'left',
+  iconPosition = ButtonIconPosition.LEFT,
   className
 }: IGoogleCalendarButtonProps) {
   // const { t } = useTranslation('common');

components/buttons/YoutubeButton.tsx

@@ -1,3 +1,5 @@
+import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
+
 import IconYoutube from '../icons/YouTube';
 import Button from './Button';
 import type { IButtonDefaultProps } from './types';
@@ -9,14 +11,14 @@ interface IYoutubeButtonProps extends IButtonDefaultProps {}
  * @param {string} props.text - The text to display on the button.
  * @param {string} props.href - The href attribute for the anchor tag.
  * @param {string} props.target - The target attribute for the anchor tag.
- * @param {string} props.iconPosition - The position of the icon in the button.
+ * @param {ButtonIconPosition} props.iconPosition - The position of the icon in the button.
  * @param {string} props.className - The class name to be applied to the button.
  */
 export default function YoutubeButton({
   text = 'Watch on YouTube',
   href,
   target = '_blank',
-  iconPosition = 'left',
+  iconPosition = ButtonIconPosition.LEFT,
   className
 }: IYoutubeButtonProps) {
   return (

components/buttons/types.ts

@@ -1,9 +1,11 @@
 import type { HTMLAttributeAnchorTarget } from 'react';
 
+import type { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
+
 export interface IButtonDefaultProps {
   text?: string;
   href?: string;
   target?: HTMLAttributeAnchorTarget;
-  iconPosition?: 'left' | 'right';
+  iconPosition?: ButtonIconPosition;
   className?: string;
 }

types/components/buttons/ButtonPropsType.ts

@@ -0,0 +1,15 @@
+export enum ButtonSize {
+  SMALL = 'small',
+  DEFAULT = 'default',
+}
+
+export enum ButtonType {
+  SUBMIT = 'submit',
+  RESET = 'reset',
+  BUTTON = 'button',
+}
+
+export enum ButtonIconPosition {
+  LEFT = 'left',
+  RIGHT = 'right',
+}