From 329e152739befb6bb8a1e8a3bbb0c5677cb44e28 Mon Sep 17 00:00:00 2001
From: Marcus Blais <31868036+blai0264@users.noreply.github.com>
Date: Fri, 5 Jul 2024 11:11:09 -0400
Subject: [PATCH] Remove defaultProps from components and use Javascript
 default parameters instead (#1063)

* removed default paramaters from CheckBox.js

* removed default paramaters from DateModified.js

* removed default paramaters from DSButton.js

* removed defaultProps from Link.js

* removed defaultProps from MultiTextField.js

* removed defaultProps from RadioButton.js

* removed defaultProps from RadioField.js

* removed defaultProps from SelectField.js

* removed defaultProps from TextField.js

* removed defaultProps from Collapse.js

* removed defaultProps from CopyToClipboard.js

* removed defaultProps from ErrorBox.js

* removed defaultProps from OptionalListField.js

* removed defaultProps from OptionalTextField.js

* removed defaultProps from Footer.js

* removed defaultProps from Button.jsx

* removed defaultProps from Header.jsx
---
 components/atoms/CheckBox.js              | 23 ++++++------
 components/atoms/DSButton.js              | 43 +++++++++++------------
 components/atoms/DateModified.js          | 14 +++-----
 components/atoms/Link.js                  | 17 ++++-----
 components/atoms/MultiTextField.js        | 11 ++----
 components/atoms/RadioButton.js           | 10 ++----
 components/atoms/RadioField.js            | 17 ++++-----
 components/atoms/SelectField.js           |  8 ++---
 components/atoms/TextField.js             | 12 ++-----
 components/molecules/Collapse.js          |  8 ++---
 components/molecules/CopyToClipboard.js   | 13 +++----
 components/molecules/ErrorBox.js          |  8 ++---
 components/molecules/OptionalListField.js |  8 ++---
 components/molecules/OptionalTextField.js | 10 ++----
 components/organisms/Footer.js            |  5 ---
 stories/Button.jsx                        | 32 +++++++++--------
 stories/Header.jsx                        | 28 +++++++++------
 17 files changed, 108 insertions(+), 159 deletions(-)

diff --git a/components/atoms/CheckBox.js b/components/atoms/CheckBox.js
index 93d7ec1183..1fd4908d9e 100644
--- a/components/atoms/CheckBox.js
+++ b/components/atoms/CheckBox.js
@@ -3,10 +3,15 @@ import PropTypes from "prop-types";
 /**
  * check box component for forms
  */
-export function CheckBox(props) {
+export function CheckBox({
+  checked = false,
+  value = "true",
+  showRequiredLabel = false,
+  ...props
+}) {
   const ifControlledProps = !props.uncontrolled
     ? {
-        checked: props.checked,
+        checked: checked,
       }
     : {};
   return (
@@ -19,13 +24,13 @@ export function CheckBox(props) {
         className="control-input cursor-pointer appearance-none w-40px h-40px absolute left-0 m-0 z-1 opacity-0"
         id={props.id}
         name={props.name}
-        value={props.value}
+        value={value}
         type="checkbox"
         onChange={(e) =>
           props.onChange(
-            props.uncontrolled ? !e.currentTarget.checked : props.checked,
+            props.uncontrolled ? !e.currentTarget.checked : checked,
             props.name,
-            props.value
+            value
           )
         }
         aria-required={props.required}
@@ -40,7 +45,7 @@ export function CheckBox(props) {
         } font-body${props.error ? " text-error-border-red" : undefined}`}
         htmlFor={props.id}
       >
-        {props.showRequiredLabel ? (
+        {showRequiredLabel ? (
           <b className="text-error-border-red" aria-hidden="true">
             *
           </b>
@@ -51,12 +56,6 @@ export function CheckBox(props) {
   );
 }
 
-CheckBox.defaultProps = {
-  checked: false,
-  value: "true",
-  showRequiredLabel: false,
-};
-
 CheckBox.propTypes = {
   /**
    * additional css for the component
diff --git a/components/atoms/DSButton.js b/components/atoms/DSButton.js
index e5cf722d72..42c13b433e 100644
--- a/components/atoms/DSButton.js
+++ b/components/atoms/DSButton.js
@@ -3,7 +3,13 @@ import { Image } from "./Image";
 
 // Button used in HelpIcon.js and CTA.js
 // Use ActionButton.js for all other buttons in the app
-export function DSButton(props) {
+export function DSButton({
+  id = "btn1",
+  styling = "supertask",
+  text = "default",
+  href = "no ref",
+  ...props
+}) {
   //Styling for buttons and links
   const PRIMARY =
     "text-multi-neutrals-white bg-multi-blue-blue70 hover:bg-multi-blue-blue60g focus:bg-multi-blue-blue60g";
@@ -16,25 +22,25 @@ export function DSButton(props) {
   const LINK =
     "text-multi-blue-blue60c hover:text-multi-blue-blue50b focus:text-multi-blue-blue60f";
 
-  const styling =
-    props.styling === "primary"
+  styling =
+    styling === "primary"
       ? PRIMARY
-      : props.styling === "secondary"
+      : styling === "secondary"
       ? SECONDARY
-      : props.styling === "supertask"
+      : styling === "supertask"
       ? SUPERTASK
-      : props.styling === "danger"
+      : styling === "danger"
       ? DANGER
-      : props.styling === "link"
+      : styling === "link"
       ? LINK
       : "";
 
-  return props.href === "no ref" ? (
+  return href === "no ref" ? (
     <button
       className={`flex flex-row px-[16px] py-[8px] ${styling} rounded-sm focus:ring focus:ring-offset-4 ${props.className} `}
       onClick={props.onClick}
       type={props.type}
-      id={props.id}
+      id={id}
       disabled={props.disabled}
       {...props.attributes}
       alt={props.iconAltText}
@@ -46,10 +52,10 @@ export function DSButton(props) {
       ) : undefined}
       <span
         className={`grid place-items-center ${
-          props.styling === "supertask" ? "h-8" : ""
+          styling === "supertask" ? "h-8" : ""
         }`}
       >
-        {props.text}
+        {text}
       </span>
       {props.children}
       {props.icon && props.iconEnd ? (
@@ -60,12 +66,12 @@ export function DSButton(props) {
     </button>
   ) : (
     <a
-      href={props.href}
+      href={href}
       className={`flex flex-row ${
-        props.styling !== "none" ? "btn-link" : ""
+        styling !== "none" ? "btn-link" : ""
       } focus:ring focus:ring-offset-4 ${props.className}`}
       onClick={props.onClick}
-      id={props.id}
+      id={id}
       disabled={props.disabled}
       role="button"
     >
@@ -76,7 +82,7 @@ export function DSButton(props) {
           alt={props.iconAltText}
         />
       ) : undefined}
-      {props.text}
+      {text}
       {props.children}
       {props.icon && props.iconEnd ? (
         <div className="grid place-items-center h-8 w-8">
@@ -91,13 +97,6 @@ export function DSButton(props) {
   );
 }
 
-DSButton.defaultProps = {
-  id: "btn1",
-  styling: "supertask",
-  text: "default",
-  href: "no ref",
-};
-
 DSButton.propTypes = {
   /**
    * Identify which button being clicked
diff --git a/components/atoms/DateModified.js b/components/atoms/DateModified.js
index ce9a0a4580..8940ae9222 100644
--- a/components/atoms/DateModified.js
+++ b/components/atoms/DateModified.js
@@ -1,14 +1,14 @@
 import PropTypes from "prop-types";
 import { useTranslation } from "next-i18next";
 
-export function DateModified(props) {
+export function DateModified({ date = process.env.NEXT_PUBLIC_BUILD_DATE }) {
   const { t } = useTranslation("common");
   // TeamCity build dates are received in the format yyyyMMdd
   let dateFormatted = "NA";
-  if (props.date) {
-    if (!props.date.match(/(?=\S*['-])([a-zA-Z'-]+)/gm)) {
-      dateFormatted = props.date.replace(/^(.{4})(.{2})/gm, "$1-$2-");
-    } else dateFormatted = props.date;
+  if (date) {
+    if (!date.match(/(?=\S*['-])([a-zA-Z'-]+)/gm)) {
+      dateFormatted = date.replace(/^(.{4})(.{2})/gm, "$1-$2-");
+    } else dateFormatted = date;
   }
 
   return (
@@ -25,10 +25,6 @@ export function DateModified(props) {
   );
 }
 
-DateModified.defaultProps = {
-  date: process.env.NEXT_PUBLIC_BUILD_DATE,
-};
-
 DateModified.propTypes = {
   // Date string in format yyyyMMdd
   date: PropTypes.string,
diff --git a/components/atoms/Link.js b/components/atoms/Link.js
index 62fa643450..c04c1e1c34 100644
--- a/components/atoms/Link.js
+++ b/components/atoms/Link.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 // Use this component for Footer link and use Next.js <Link>
 // for all links within the site
-export function Link(props) {
+export function Link({ target = "_self", href = "#", ...props }) {
   //Styling for links based on Figma Design
   let basicStyle = "";
   switch (props.linkStyle) {
@@ -45,15 +45,15 @@ export function Link(props) {
 
   return Component !== "a" ? (
     <Component
-      href={props.href}
+      href={href}
       disabled={props.disabled}
       lang={props.lang}
-      target={props.target}
+      target={target}
       aria-label={props.ariaLabel || props.text}
       role="link"
     >
       <a
-        href={props.href}
+        href={href}
         locale={props.locale}
         onClick={props.onClick ? props.onClick : undefined}
         id={props.id}
@@ -73,12 +73,12 @@ export function Link(props) {
     </Component>
   ) : (
     <a
-      href={props.href}
+      href={href}
       className={`${basicStyle}`}
       id={props.id}
       disabled={props.disabled}
       lang={props.lang}
-      target={props.target}
+      target={target}
       aria-label={props.ariaLabel || props.text}
       locale={props.locale}
       onClick={props.onClick ? props.onClick : undefined}
@@ -96,11 +96,6 @@ export function Link(props) {
   );
 }
 
-Link.defaultProps = {
-  target: "_self",
-  href: "#",
-};
-
 Link.propTypes = {
   /**
    * The text that Text Link will display
diff --git a/components/atoms/MultiTextField.js b/components/atoms/MultiTextField.js
index 833f447294..64c75d3cc2 100644
--- a/components/atoms/MultiTextField.js
+++ b/components/atoms/MultiTextField.js
@@ -5,7 +5,7 @@ import { useTranslation } from "next-i18next";
 /**
  * multi line text field
  */
-export function MultiTextField(props) {
+export function MultiTextField({ spellCheck = true, wrap = "soft", ...props }) {
   const { t } = useTranslation("common");
 
   return (
@@ -41,8 +41,8 @@ export function MultiTextField(props) {
         onChange={(e) => props.onChange(e.currentTarget.value)}
         cols={props.cols}
         rows={props.rows}
-        spellCheck={props.spellCheck}
-        wrap={props.wrap}
+        spellCheck={spellCheck}
+        wrap={wrap}
         required={props.required}
         data-testid={props.dataTestId}
         data-cy={props.dataCy}
@@ -54,11 +54,6 @@ export function MultiTextField(props) {
   );
 }
 
-MultiTextField.defaultProps = {
-  spellCheck: true,
-  wrap: "soft",
-};
-
 MultiTextField.propTypes = {
   /**
    * additional css for the component
diff --git a/components/atoms/RadioButton.js b/components/atoms/RadioButton.js
index 4a89bd83ed..7e68b9f44d 100644
--- a/components/atoms/RadioButton.js
+++ b/components/atoms/RadioButton.js
@@ -3,13 +3,13 @@ import PropTypes from "prop-types";
 /**
  * Radio input styled as a button
  **/
-export function RadioButton(props) {
+export function RadioButton({ checked = false, ...props }) {
   const ifControlledProps = !props.uncontrolled
     ? {
-        checked: props.checked,
+        checked: checked,
       }
     : {
-        defaultChecked: props.checked || false,
+        defaultChecked: checked || false,
       };
   return (
     <div className="flex relative">
@@ -48,10 +48,6 @@ export function RadioButton(props) {
   );
 }
 
-RadioButton.defaultProps = {
-  checked: false,
-};
-
 RadioButton.propTypes = {
   /**
    * the id for the input
diff --git a/components/atoms/RadioField.js b/components/atoms/RadioField.js
index 55bf87992b..90a432e24a 100644
--- a/components/atoms/RadioField.js
+++ b/components/atoms/RadioField.js
@@ -3,10 +3,10 @@ import PropTypes from "prop-types";
 /**
  * radio field
  */
-export function RadioField(props) {
+export function RadioField({ checked = false, value = "true", ...props }) {
   const ifControlledProps = !props.uncontrolled
     ? {
-        checked: props.checked,
+        checked: checked,
       }
     : {};
   return (
@@ -19,13 +19,13 @@ export function RadioField(props) {
         className="control-input cursor-pointer appearance-none w-40px h-40px absolute left-0 m-0 z-1 opacity-0"
         id={props.id}
         name={props.name}
-        value={props.value}
+        value={value}
         type="radio"
         onChange={(e) =>
           props.onChange(
-            props.uncontrolled ? !e.currentTarget.checked : props.checked,
+            props.uncontrolled ? !e.currentTarget.checked : checked,
             props.name,
-            props.value
+            value
           )
         }
         aria-required={props.required}
@@ -39,7 +39,7 @@ export function RadioField(props) {
           props.error ? " text-error-border-red" : undefined
         }`}
         htmlFor={props.id}
-        onClick={() => props.onChange(props.checked, props.name, props.value)}
+        onClick={() => props.onChange(checked, props.name, value)}
       >
         {props.label}
       </label>
@@ -47,11 +47,6 @@ export function RadioField(props) {
   );
 }
 
-RadioField.defaultProps = {
-  checked: false,
-  value: "true",
-};
-
 RadioField.propTypes = {
   /**
    * additional css for the component
diff --git a/components/atoms/SelectField.js b/components/atoms/SelectField.js
index fbac4ca4f0..c0b740c410 100644
--- a/components/atoms/SelectField.js
+++ b/components/atoms/SelectField.js
@@ -2,12 +2,12 @@ import PropTypes from "prop-types";
 import { ErrorLabel } from "./ErrorLabel";
 import { useTranslation } from "next-i18next";
 
-export function SelectField(props) {
+export function SelectField({ value = "", ...props }) {
   const { t } = useTranslation("common");
 
   const ifControlledProps = !props.uncontrolled
     ? {
-        value: props.value,
+        value: value,
       }
     : {};
 
@@ -81,10 +81,6 @@ export function SelectField(props) {
   );
 }
 
-SelectField.defaultProps = {
-  value: "",
-};
-
 SelectField.propTypes = {
   /**
    * additional css for the component
diff --git a/components/atoms/TextField.js b/components/atoms/TextField.js
index 1942ee1d01..b3df59fa34 100644
--- a/components/atoms/TextField.js
+++ b/components/atoms/TextField.js
@@ -5,12 +5,12 @@ import { useTranslation } from "next-i18next";
 /**
  * text field component
  */
-export function TextField(props) {
+export function TextField({ value = "", type = "text", ...props }) {
   const { t } = useTranslation("common");
 
   const ifControlledProps = !props.uncontrolled
     ? {
-        value: props.value,
+        value: value,
       }
     : {};
   return (
@@ -52,7 +52,7 @@ export function TextField(props) {
         aria-describedby={props.describedby}
         name={props.name}
         placeholder={props.placeholder}
-        type={props.type}
+        type={type}
         min={props.min}
         max={props.max}
         step={props.step}
@@ -67,12 +67,6 @@ export function TextField(props) {
     </div>
   );
 }
-
-TextField.defaultProps = {
-  value: "",
-  type: "text",
-};
-
 TextField.propTypes = {
   /**
    * additional css for the component
diff --git a/components/molecules/Collapse.js b/components/molecules/Collapse.js
index 63b9d60386..3fd0ae901e 100644
--- a/components/molecules/Collapse.js
+++ b/components/molecules/Collapse.js
@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 
-export function Collapse(props) {
-  const { id, title, children } = props;
+export function Collapse({ id = "defaultAccordion", ...props }) {
+  const { title, children } = props;
   return (
     <details
       key={id}
@@ -23,10 +23,6 @@ export function Collapse(props) {
   );
 }
 
-Collapse.defaultProps = {
-  id: "defaultAccordion",
-};
-
 Collapse.propTypes = {
   /**
    * component id
diff --git a/components/molecules/CopyToClipboard.js b/components/molecules/CopyToClipboard.js
index 0bb05629f7..5eee7f95ea 100644
--- a/components/molecules/CopyToClipboard.js
+++ b/components/molecules/CopyToClipboard.js
@@ -2,10 +2,10 @@ import PropTypes from "prop-types";
 import Clipboard from "react-copy-to-clipboard";
 import { ActionButton } from "../atoms/ActionButton";
 
-export function CopyToClipboard(props) {
+export function CopyToClipboard({ value = "", type = "text", ...props }) {
   const ifControlledProps = !props.uncontrolled
     ? {
-        value: props.value,
+        value: value,
       }
     : {};
   return (
@@ -16,14 +16,14 @@ export function CopyToClipboard(props) {
         aria-describedby={props.describedby}
         name={props.name}
         placeholder={props.placeholder}
-        type={props.type}
+        type={type}
         onChange={(e) => props.onChange(e.currentTarget.value)}
         {...ifControlledProps}
         data-testid={props.dataTestId}
         data-cy={props.dataCy}
         aria-label={props.aria_label}
       />
-      <Clipboard text={props.value}>
+      <Clipboard text={value}>
         <ActionButton
           id={props.buttonId}
           className={`w-full ${props.buttonStyle}`}
@@ -36,11 +36,6 @@ export function CopyToClipboard(props) {
   );
 }
 
-CopyToClipboard.defaultProps = {
-  value: "",
-  type: "text",
-};
-
 CopyToClipboard.propTypes = {
   /**
    * additional css for the component
diff --git a/components/molecules/ErrorBox.js b/components/molecules/ErrorBox.js
index 1acb755353..6d8935c387 100644
--- a/components/molecules/ErrorBox.js
+++ b/components/molecules/ErrorBox.js
@@ -4,7 +4,7 @@ import { ActionButton } from "../atoms/ActionButton";
 /**
  * error box to be used to summarise error in forms
  */
-export function ErrorBox(props) {
+export function ErrorBox({ errors = [], ...props }) {
   return (
     <div
       id="error-box"
@@ -20,7 +20,7 @@ export function ErrorBox(props) {
         data-cy="error-box-items"
         id="error-box-items"
       >
-        {props.errors.map(({ id, text }) => {
+        {errors.map(({ id, text }) => {
           return (
             <li key={`${id}-${text}`} className="mb-2">
               <ActionButton
@@ -40,10 +40,6 @@ export function ErrorBox(props) {
   );
 }
 
-ErrorBox.defaultProps = {
-  errors: [],
-};
-
 ErrorBox.propTypes = {
   /**
    * An array of error messages to display. Each object contains the id of the element which
diff --git a/components/molecules/OptionalListField.js b/components/molecules/OptionalListField.js
index d85f6cbe47..20b850179e 100644
--- a/components/molecules/OptionalListField.js
+++ b/components/molecules/OptionalListField.js
@@ -6,7 +6,7 @@ import PropTypes from "prop-types";
 /**
  * An optional list field (radio, checkbox) that is enabled by a checkbox
  */
-export function OptionalListField(props) {
+export function OptionalListField({ controlType = "checkbox", ...props }) {
   let [showListField, setShowListField] = useState(props.checked || false);
   let handleCheckChange = (wasChecked, name, value) => {
     if (wasChecked) {
@@ -30,7 +30,7 @@ export function OptionalListField(props) {
   });
   return (
     <>
-      {props.controlType === "checkbox" ? (
+      {controlType === "checkbox" ? (
         <CheckBox
           label={props.controlLabel}
           id={props.controlId}
@@ -76,10 +76,6 @@ export function OptionalListField(props) {
   );
 }
 
-OptionalListField.defaultProps = {
-  controlType: "checkbox",
-};
-
 OptionalListField.propTypes = {
   /**
    * the type of field that should be used
diff --git a/components/molecules/OptionalTextField.js b/components/molecules/OptionalTextField.js
index a54ef7683c..80d08c4bde 100644
--- a/components/molecules/OptionalTextField.js
+++ b/components/molecules/OptionalTextField.js
@@ -9,7 +9,7 @@ import PropTypes from "prop-types";
 /**
  * An optional text box that is enabled by a checkbox
  */
-export function OptionalTextField(props) {
+export function OptionalTextField({ controlType = "checkbox", ...props }) {
   let [showTextField, setShowTextField] = useState(props.checked || false);
   const [expandState, setExpandState] = useState("collapsed");
   const { t } = useTranslation("common");
@@ -28,7 +28,7 @@ export function OptionalTextField(props) {
   };
   return (
     <>
-      {props.controlType === "checkbox" && (
+      {controlType === "checkbox" && (
         <CheckBox
           label={props.controlLabel}
           id={props.controlId}
@@ -44,7 +44,7 @@ export function OptionalTextField(props) {
           expandState={expandState}
         />
       )}
-      {props.controlType === "radiofield" && (
+      {controlType === "radiofield" && (
         <RadioField
           label={props.controlLabel}
           id={props.controlId}
@@ -103,10 +103,6 @@ export function OptionalTextField(props) {
   );
 }
 
-OptionalTextField.defaultProps = {
-  controlType: "checkbox",
-};
-
 OptionalTextField.propTypes = {
   /**
    * the type of field that should be used
diff --git a/components/organisms/Footer.js b/components/organisms/Footer.js
index c5367ba6ac..581c98008b 100644
--- a/components/organisms/Footer.js
+++ b/components/organisms/Footer.js
@@ -83,11 +83,6 @@ export const Footer = ({
   );
 };
 
-Footer.defaultProps = {
-  contactLink: "https://www.canada.ca/en/contact.html",
-  withMainBand: true,
-};
-
 Footer.propTypes = {
   /**
    * id of this component
diff --git a/stories/Button.jsx b/stories/Button.jsx
index 7c613bbf25..3beeea788a 100644
--- a/stories/Button.jsx
+++ b/stories/Button.jsx
@@ -1,16 +1,27 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './button.css';
+import React from "react";
+import PropTypes from "prop-types";
+import "./button.css";
 
 /**
  * Primary UI component for user interaction
  */
-export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+export const Button = ({
+  primary = false,
+  backgroundColor = null,
+  size = "medium",
+  onClick = undefined,
+  label,
+  ...props
+}) => {
+  const mode = primary
+    ? "storybook-button--primary"
+    : "storybook-button--secondary";
   return (
     <button
       type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      className={["storybook-button", `storybook-button--${size}`, mode].join(
+        " "
+      )}
       {...props}
     >
       {label}
@@ -35,7 +46,7 @@ Button.propTypes = {
   /**
    * How large should the button be?
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size: PropTypes.oneOf(["small", "medium", "large"]),
   /**
    * Button contents
    */
@@ -45,10 +56,3 @@ Button.propTypes = {
    */
   onClick: PropTypes.func,
 };
-
-Button.defaultProps = {
-  backgroundColor: null,
-  primary: false,
-  size: 'medium',
-  onClick: undefined,
-};
diff --git a/stories/Header.jsx b/stories/Header.jsx
index 39e5226cff..4b7809a714 100644
--- a/stories/Header.jsx
+++ b/stories/Header.jsx
@@ -1,14 +1,19 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
-import { Button } from './Button';
-import './header.css';
+import { Button } from "./Button";
+import "./header.css";
 
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
+export const Header = ({ user = null, onLogin, onLogout, onCreateAccount }) => (
   <header>
     <div className="storybook-header">
       <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <g fill="none" fillRule="evenodd">
             <path
               d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
@@ -37,7 +42,12 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
         ) : (
           <>
             <Button size="small" onClick={onLogin} label="Log in" />
-            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+            <Button
+              primary
+              size="small"
+              onClick={onCreateAccount}
+              label="Sign up"
+            />
           </>
         )}
       </div>
@@ -53,7 +63,3 @@ Header.propTypes = {
   onLogout: PropTypes.func.isRequired,
   onCreateAccount: PropTypes.func.isRequired,
 };
-
-Header.defaultProps = {
-  user: null,
-};