Merge pull request #749 from DTS-STN/default-param

Switch from defaultProps to default parameters. Any string parameter …
DTS-STN · Nov 6, 2024 · 3f33b91 · 3f33b91
2 parents 283ad91 + 0385365
commit 3f33b91
Show file tree

Hide file tree

Showing 25 changed files with 245 additions and 281 deletions.
diff --git a/components/BackToButton.tsx b/components/BackToButton.tsx
@@ -12,16 +12,16 @@ const BackToButton = ({
   buttonHref,
   buttonId,
   buttonLinkText,
-  refPageAA,
-  id,
+  refPageAA = 'mscaPlaceholder',
+  id = 'mscaPlaceholder',
 }: BackToButtonProps) => {
   return (
     <>
       <div>
         <Link
           href={buttonHref}
           id={buttonId}
-          className="inline-block my-4 py-2.5 px-3.5 font-display text-xl rounded bg-gray-30a text-deep-blue-60b hover:bg-gray-50a hover:cursor-pointer focus:ring focus:ring-offset-4 ring-deep-blue-60f"
+          className="my-4 inline-block rounded bg-gray-30a px-3.5 py-2.5 font-display text-xl text-deep-blue-60b ring-deep-blue-60f hover:cursor-pointer hover:bg-gray-50a focus:ring focus:ring-offset-4"
           data-gc-analytics-customclick={`${refPageAA}:${id}`}
         >
           {buttonLinkText}

diff --git a/components/BenefitTasks.tsx b/components/BenefitTasks.tsx
@@ -29,8 +29,8 @@ const BenefitTasks = ({
   locale,
   taskList,
   dataCy,
-  refPageAA,
-  acronym,
+  refPageAA = 'mscaPlaceholder',
+  acronym = 'mscaPlaceholder',
 }: BenefitTasksProps) => {
   const newTabTaskExceptions = [
     'https://www.canada.ca/en/services/benefits/ei/employment-insurance-reporting.html',
@@ -48,7 +48,7 @@ const BenefitTasks = ({
 
   return (
     <div className="inline-block w-full" data-testid="benefitTasks-test">
-      <h3 className="text-xl font-bold " data-cy={dataCy}>
+      <h3 className="text-xl font-bold" data-cy={dataCy}>
         {taskList.title}
       </h3>
       <ul
@@ -104,16 +104,4 @@ const BenefitTasks = ({
     </div>
   )
 }
-
-BenefitTasks.defaultProps = {
-  taskList: [
-    {
-      tasks: [
-        {
-          icon: 'question-circle', // To ensure a value is used for FontAwesome icons
-        },
-      ],
-    },
-  ],
-}
 export default BenefitTasks
diff --git a/components/Breadcrumb.tsx b/components/Breadcrumb.tsx
@@ -13,7 +13,11 @@ export interface BreadcrumbProps {
   refPageAA: string
 }
 
-const Breadcrumb = ({ id, items, refPageAA }: BreadcrumbProps) => {
+const Breadcrumb = ({
+  id, // TODO: Provide a default value once this is actually mapped in
+  items,
+  refPageAA = 'mscaPlaceholder',
+}: BreadcrumbProps) => {
   return (
     <nav className="py-6" aria-label="Breadcrumb-Fil d’ariane" id={id}>
       <ul className="block font-body text-base leading-[23px] text-deep-blue-dark">

diff --git a/components/Button.tsx b/components/Button.tsx
@@ -6,7 +6,7 @@ interface ButtonProps {
   style?: 'supertask' | 'primary' | 'secondary' | 'danger' | 'link' | 'none'
   text: string
   icon?: string
-  iconAltText: string
+  iconAltText?: string
   iconEnd?: boolean
   href?: string
   type?: 'submit' | 'reset' | 'button'
@@ -19,20 +19,20 @@ interface ButtonProps {
 }
 
 const Button = ({
-  id,
-  style,
-  text,
+  id = 'mscaPlaceholder',
+  style = 'supertask',
+  text = 'mscaPlaceholder',
   icon,
-  iconAltText,
+  iconAltText = 'mscaPlaceholder',
   iconEnd,
-  href,
+  href = 'no ref',
   type,
   onClick,
   disabled,
   className,
   attributes,
   children,
-  refPageAA,
+  refPageAA = 'mscaPlaceholder',
 }: ButtonProps) => {
   const primary =
     'text-white bg-blue-primary text-xl hover:bg-deep-blue-focus active:bg-blue-pressed rounded focus:ring focus:ring-offset-4 focus:ring-deep-blue-60f focus:ring-bg-deep-blue-focus'
@@ -49,20 +49,20 @@ const Button = ({
     style === 'primary'
       ? primary
       : style === 'secondary'
-      ? secondary
-      : style === 'supertask'
-      ? supertask
-      : style === 'danger'
-      ? danger
-      : style === 'link'
-      ? link
-      : ''
+        ? secondary
+        : style === 'supertask'
+          ? supertask
+          : style === 'danger'
+            ? danger
+            : style === 'link'
+              ? link
+              : ''
 
   return href === 'no ref' ? (
     <button
       className={`flex flex-row ${buttonStyle} ${
         disabled ? 'cursor-not-allowed' : ''
-      } py-1.5 px-3.5 rounded focus:ring focus:ring-offset-4 ${className} `}
+      } rounded px-3.5 py-1.5 focus:ring focus:ring-offset-4 ${className} `}
       onClick={onClick}
       data-gc-analytics-customclick={`${refPageAA}:${text}`}
       type={type}
@@ -72,11 +72,11 @@ const Button = ({
       data-testid={id}
     >
       {icon && !iconEnd ? (
-        <span className="grid place-items-center h-8 w-8">
+        <span className="grid h-8 w-8 place-items-center">
           <Image
             width={8}
             height={8}
-            className="pr-2 rounded"
+            className="rounded pr-2"
             src={icon}
             alt={iconAltText}
           />
@@ -85,11 +85,11 @@ const Button = ({
       {text}
       {children}
       {icon && iconEnd ? (
-        <span className="grid place-items-center h-8 w-8">
+        <span className="grid h-8 w-8 place-items-center">
           <Image
             width={8}
             height={8}
-            className="pl-2 rounded"
+            className="rounded pl-2"
             src={icon}
             alt={iconAltText}
           />
@@ -102,18 +102,18 @@ const Button = ({
       href={href}
       className={`flex flex-row ${disabled ? 'cursor-not-allowed' : ''} ${
         style === 'link'
-          ? `font-body text-xl leading-[23px] text-deep-blue-dark hover:text-blue-hover rounded-sm active:text-blue-hover focus:outline-1 focus:outline-blue-hover visited:text-purple-50a`
+          ? `rounded-sm font-body text-xl leading-[23px] text-deep-blue-dark visited:text-purple-50a hover:text-blue-hover focus:outline-1 focus:outline-blue-hover active:text-blue-hover`
           : style === 'none'
-          ? ''
-          : buttonStyle
-      } py-1.5 px-3.5 ${className} `}
+            ? ''
+            : buttonStyle
+      } px-3.5 py-1.5 ${className} `}
       onClick={onClick}
       id={id}
       data-gc-analytics-customclick={`${refPageAA}:${id}`}
     >
       {icon && !iconEnd ? (
         <Image
-          className="pr-2 rounded"
+          className="rounded pr-2"
           width={8}
           height={8}
           src={icon}
@@ -125,7 +125,7 @@ const Button = ({
       {icon && iconEnd ? (
         <div className="grid place-items-center">
           <Image
-            className="rounded pl-5 pb-3"
+            className="rounded pb-3 pl-5"
             width={8}
             height={8}
             src={icon}
@@ -136,13 +136,4 @@ const Button = ({
     </a>
   )
 }
-
-Button.defaultProps = {
-  id: 'btn1',
-  style: 'supertask',
-  text: 'default',
-  href: 'no ref',
-  iconAltText: 'default',
-}
-
 export default Button
diff --git a/components/Card.tsx b/components/Card.tsx
@@ -9,6 +9,8 @@ interface AlertProps {
   type: string
   alertHeading: string
   alertBody: string
+  alert_icon_alt_text: string
+  alert_icon_id: string
 }
 interface CardProps {
   cardTitle: string
@@ -23,7 +25,16 @@ interface CardProps {
 }
 
 const Card = ({
-  cardAlert,
+  cardAlert = [
+    {
+      id: '',
+      type: '',
+      alertHeading: '',
+      alertBody: '',
+      alert_icon_alt_text: '',
+      alert_icon_id: '',
+    },
+  ],
   hasAlert,
   locale,
   cardTitle,
@@ -101,7 +112,7 @@ const Card = ({
       {!isOpen ? null : (
         <div>
           {hasAlert &&
-            cardAlert?.map((alert, index) => {
+            cardAlert.map((alert, index) => {
               const alertType = alert.type[0].split('/').pop()
               return (
                 <ul
@@ -130,18 +141,4 @@ const Card = ({
   )
 }
 
-Card.defaultProps = {
-  cardAlert: [
-    {
-      id: '',
-      type: '',
-      alertHeading: '',
-      alertBody: '',
-      alert_icon_alt_text: '',
-      alert_icon_id: '',
-    },
-  ],
-  hasAlert: true,
-}
-
 export default Card
diff --git a/components/Collapse.tsx b/components/Collapse.tsx
@@ -8,7 +8,12 @@ interface CollapseProps {
   dataTestId?: string
 }
 
-const Collapse = ({ id, title, children, dataTestId }: CollapseProps) => {
+const Collapse = ({
+  id = 'mscaPlaceholder',
+  title,
+  children,
+  dataTestId,
+}: CollapseProps) => {
   return (
     <details
       key={id}
@@ -19,9 +24,9 @@ const Collapse = ({ id, title, children, dataTestId }: CollapseProps) => {
       <summary
         data-cy="summary"
         key={`summary-${id}`}
-        className=" cursor-pointer select-none rounded border border-gray-40 px-15px py-5px text-deep-blue-60d outline-none hover:text-blue-hover hover:underline"
+        className="cursor-pointer select-none rounded border border-gray-40 px-15px py-5px text-deep-blue-60d outline-none hover:text-blue-hover hover:underline"
         data-gc-analytics-customclick={`ESDC-EDSC_MSCA-MSDC-SCH:${programs(
-          id?.split('-')[0],
+          id.split('-')[0],
         )}:${title}`}
       >
         {title}
@@ -35,8 +40,5 @@ const Collapse = ({ id, title, children, dataTestId }: CollapseProps) => {
     </details>
   )
 }
-Collapse.defaultProps = {
-  id: 'defaultAccordion',
-}
 
 export default Collapse
diff --git a/components/Date.tsx b/components/Date.tsx
@@ -4,7 +4,7 @@ interface DateProps {
   date?: string
 }
 
-const Date = ({ id, label, date }: DateProps) => {
+const Date = ({ id = 'mscaPlaceholder', label, date }: DateProps) => {
   const dateFormatted = date ? date.split('T')[0] : 'NA'
   return (
     <dl

diff --git a/components/ErrorPage.tsx b/components/ErrorPage.tsx
@@ -14,9 +14,9 @@ interface ErrorPageProps {
 const ErrorPage = ({
   isAuth,
   errType,
-  lang,
-  homePageLink,
-  accountPageLink,
+  lang = 'en',
+  homePageLink = '/',
+  accountPageLink = '/',
 }: ErrorPageProps) => {
   let biClassName = ''
   const language = lang === 'en' ? [EN] : lang === 'fr' ? [FR] : [EN, FR]
@@ -116,10 +116,4 @@ const ErrorPage = ({
   )
 }
 
-ErrorPage.defaultProps = {
-  accountPageLink: '/',
-  homePageLink: '/',
-  lang: 'en',
-}
-
 export default ErrorPage