Refactor Button and Header components to use not use React's defaultProps

code/renderers/react/template/cli/js/Button.jsx

@@ -5,7 +5,13 @@ import PropTypes from 'prop-types';
 import './button.css';
 
 /** Primary UI component for user interaction */
-export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
+export const Button = ({
+  primary = false,
+  backgroundColor = null,
+  size = 'medium',
+  label,
+  ...props
+}) => {
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
   return (
     <button
@@ -31,10 +37,3 @@ Button.propTypes = {
   /** Optional click handler */
   onClick: PropTypes.func,
 };
-
-Button.defaultProps = {
-  backgroundColor: null,
-  primary: false,
-  size: 'medium',
-  onClick: undefined,
-};

code/renderers/react/template/cli/js/Header.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 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>
@@ -54,7 +54,3 @@ Header.propTypes = {
   onLogout: PropTypes.func.isRequired,
   onCreateAccount: PropTypes.func.isRequired,
 };
-
-Header.defaultProps = {
-  user: null,
-};