refactor: Destructure default props

API_PATTERN_GUIDELINES.md

@@ -235,12 +235,35 @@ foo();
 
 #### Default Props
 
-- Use `defaultProps` whenever you find yourself checking for the existence of something before
-  executing branching logic. It significantly reduces conditionals, facilitating easier testing and
-  less bugs.
-- Any prop included in `defaultProps` should be typed as required in the component interface.
-  However, it can still be documented as optional in the README. You can find more details
-  [here](https://stackoverflow.com/questions/37282159/default-property-value-in-react-component-using-typescript)
+- We prefer to colocate our default props. If you're consuming our components, `defaultProps` does
+  not work if you're renaming our component on import.
+- Note: If you assign a default value to a prop, make sure to make the prop as optional in the
+  interface.
+
+```jsx
+const someInterface {
+  /**
+   * If true, sets the Checkbox checked to true
+   * @default false
+   */
+  checked?: boolean;
+   /**
+   * If true, set the Checkbox to the disabled state.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The value of the Checkbox.
+   */
+  value?: string;
+}
+.
+.
+.
+.
+
+const {checked = false, disabled = false, value} = this.props;
+```
 
 #### Class Function Binding
 
@@ -325,7 +348,9 @@ The base pattern for prop descriptions is: `The <property> of the <component>.`
 value?: string;
 ```
 
-Be as specific as possible. For example, suppose there is a `label` prop for `Checkbox` which specifies the text of the label. Rather than describe `label` as `The label of the Checkbox`, the following is preferable:
+Be as specific as possible. For example, suppose there is a `label` prop for `Checkbox` which
+specifies the text of the label. Rather than describe `label` as `The label of the Checkbox`, the
+following is preferable:
 
 ```
 /**
@@ -343,7 +368,8 @@ Feel free to provide additional detail in the description:
 value: number;
 ```
 
-Be sure to specify a proper `@default` for enum props. Listing the named values which are accepted by the enum prop is encouraged:
+Be sure to specify a proper `@default` for enum props. Listing the named values which are accepted
+by the enum prop is encouraged:
 
 ```
 /**
@@ -353,7 +379,8 @@ Be sure to specify a proper `@default` for enum props. Listing the named values
 openDirection?: SidePanelOpenDirection;
 ```
 
-Use a modified pattern for function props: `The function called when <something happens>.` For example:
+Use a modified pattern for function props: `The function called when <something happens>.` For
+example:
 
 ```
 /**
@@ -362,7 +389,8 @@ Use a modified pattern for function props: `The function called when <something
 onChange?: (e: React.SyntheticEvent) => void;
 ```
 
-The pattern for booleans is also different: `If true, <do something>.` For standard 2-state booleans, set `@default false` in the description. For example:
+The pattern for booleans is also different: `If true, <do something>.` For standard 2-state
+booleans, set `@default false` in the description. For example:
 
 ```
 /**
@@ -382,7 +410,8 @@ Provide additional detail for 2-state booleans where the `false` outcome cannot
 centeredNav?: boolean;
 ```
 
-For 3-state booleans, you will need to describe all 3 cases: `If true <do something>. If false <do something else>. If undefined <do yet another thing>.`
+For 3-state booleans, you will need to describe all 3 cases:
+`If true <do something>. If false <do something else>. If undefined <do yet another thing>.`
 
 We also recommend the following pattern for errors:
 
@@ -393,7 +422,10 @@ We also recommend the following pattern for errors:
 error?: ErrorType;
 ```
 
-Occasionally, you may encounter props which don't play nicely with the suggested guidelines. Rather than following the patterns to the letter, adjust them to provide a better description if necessary. For example, rather than ambiguously describing `id` as `The id of the Checkbox`, provide a more explicit description:
+Occasionally, you may encounter props which don't play nicely with the suggested guidelines. Rather
+than following the patterns to the letter, adjust them to provide a better description if necessary.
+For example, rather than ambiguously describing `id` as `The id of the Checkbox`, provide a more
+explicit description:
 
 ```
 /**

modules/_labs/drawer/react/lib/Drawer.tsx

@@ -89,21 +89,15 @@ const ChildrenContainer = styled('div')<Pick<DrawerProps, 'padding'>>(
 
 export default class Drawer extends React.Component<DrawerProps, {}> {
   static OpenDirection = DrawerDirection;
-  static defaultProps = {
-    openDirection: DrawerDirection.Right,
-    padding: spacing.s,
-    width: 360,
-    showDropShadow: false,
-  };
 
   public render() {
     const {
       children,
-      padding,
-      width,
-      openDirection,
+      padding = spacing.s,
+      width = 360,
+      openDirection = DrawerDirection.Right,
       header,
-      showDropShadow,
+      showDropShadow = false,
       role,
       ...elemProps
     } = this.props;

modules/_labs/drawer/react/lib/DrawerHeader.tsx

@@ -21,11 +21,11 @@ export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement>
   /**
    * The background color of the DrawerHeader.
    */
-  headerColor: CanvasColor | string;
+  headerColor?: CanvasColor | string;
   /**
    * The border color of the DrawerHeader. This should match something close to `headerColor`.
    */
-  borderColor: CanvasColor | string;
+  borderColor?: CanvasColor | string;
   /**
    * If true, render the icon and header in white. Useful for preserving contrast with a dark `headerColor`.
    * @default false
@@ -72,22 +72,14 @@ const CloseButton = styled(IconButton)({
 });
 
 export default class DrawerHeader extends React.Component<DrawerHeaderProps, {}> {
-  static defaultProps = {
-    closeIconLabel: 'Close',
-    headerColor: colors.soap100,
-    borderColor: colors.soap500,
-    showInverseButton: false,
-    inverse: false,
-  };
-
   public render() {
     const {
       onClose,
       title,
-      closeIconLabel,
-      headerColor,
-      borderColor,
-      inverse,
+      closeIconLabel = 'Close',
+      headerColor = colors.soap100,
+      borderColor = colors.soap500,
+      inverse = false,
       id,
       ...elemProps
     } = this.props;

modules/_labs/header/react/lib/GlobalHeader.tsx

@@ -8,7 +8,7 @@ export interface GlobalHeaderProps {
    * The custom brand node of the GlobalHeader. This React node replaces the dub logo and title.
    * @default DubLogoTitle
    */
-  brand: React.ReactNode;
+  brand?: React.ReactNode;
   /**
    * The custom menu toggle node of the GlobalHeader. This React node replaces the default menu toggle.
    */
@@ -29,12 +29,9 @@ export interface GlobalHeaderProps {
 }
 
 export default class GlobalHeader extends React.Component<GlobalHeaderProps> {
-  static defaultProps = {
-    brand: <DubLogoTitle />,
-  };
   public render() {
     const {
-      brand,
+      brand = <DubLogoTitle />,
       menuToggle,
       onMenuClick,
       isCollapsed,

modules/_labs/header/react/lib/Header.tsx

@@ -18,12 +18,12 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
    * The theme of the Header. Accepts `White`, `Blue`, or `Transparent`.
    * @default HeaderTheme.White
    */
-  themeColor: HeaderTheme;
+  themeColor?: HeaderTheme;
   /**
    * The variant of the Header. Accepts `Dub` (small) or `Full` (large).
    * @default HeaderVariant.Dub
    */
-  variant: HeaderVariant;
+  variant?: HeaderVariant;
   /**
    * The text of the Header title. Not used if `brand` is provided.
    */
@@ -68,7 +68,7 @@ const HeaderShell = styled('div')<Pick<HeaderProps, 'variant' | 'themeColor'>>(
     MozOsxFontSmoothing: 'grayscale',
     position: 'relative',
   },
-  ({variant, themeColor}) => ({
+  ({variant, themeColor = HeaderTheme.White}) => ({
     // Only the variant Full has a large header, all the other one (Dub, Global) have a small header height
     height: variant === HeaderVariant.Full ? HeaderHeight.Large : HeaderHeight.Small,
     background: themes[themeColor].background,
@@ -98,7 +98,7 @@ const BrandLink = styled('a')({
   },
 });
 
-const navStyle = ({themeColor}: Pick<HeaderProps, 'themeColor'>) => {
+const navStyle = ({themeColor = HeaderTheme.White}: Pick<HeaderProps, 'themeColor'>) => {
   const theme = themes[themeColor];
 
   return css({
@@ -210,7 +210,7 @@ class Brand extends React.Component<
   Pick<HeaderProps, 'variant' | 'brand' | 'title' | 'themeColor'>
 > {
   render() {
-    const {variant, brand, themeColor, title} = this.props;
+    const {variant, brand, themeColor = HeaderTheme.White, title} = this.props;
 
     switch (variant) {
       case HeaderVariant.Global: {
@@ -239,7 +239,7 @@ class MenuIconButton extends React.Component<
   Pick<HeaderProps, 'themeColor' | 'menuToggle' | 'onMenuClick'>
 > {
   render() {
-    const {themeColor, menuToggle, onMenuClick} = this.props;
+    const {themeColor = HeaderTheme.White, menuToggle, onMenuClick} = this.props;
     if (menuToggle) {
       const menuToggleElement = menuToggle as React.ReactElement<any>;
       const onClick = menuToggleElement.props.onClick
@@ -269,10 +269,6 @@ class MenuIconButton extends React.Component<
 export default class Header extends React.Component<HeaderProps, {}> {
   static Theme = HeaderTheme;
   static Variant = HeaderVariant;
-  static defaultProps = {
-    themeColor: HeaderTheme.White,
-    variant: HeaderVariant.Dub,
-  };
 
   /**
    * Helper that recursively maps ReactNodes to their theme-based equivalent.
@@ -350,8 +346,8 @@ export default class Header extends React.Component<HeaderProps, {}> {
   render() {
     const {
       menuToggle,
-      themeColor,
-      variant,
+      themeColor = HeaderTheme.White,
+      variant = HeaderVariant.Dub,
       centeredNav,
       title,
       brand,

modules/_labs/header/react/lib/parts/DubLogoTitle.tsx

@@ -10,7 +10,7 @@ export type DubTitleProps = {
    * The theme of the DubLogoTitle. Accepts `White`, `Blue`, or `Transparent`.
    * @default HeaderTheme.White
    */
-  themeColor: HeaderTheme;
+  themeColor?: HeaderTheme;
   /**
    * The text of the DubLogoTitle. Not used if `brand` is provided.
    */
@@ -63,21 +63,18 @@ const DubLogo = styled('div')<DubTitleProps>({
 });
 
 export class DubLogoTitle extends React.Component<DubTitleProps> {
-  static defaultProps = {
-    themeColor: HeaderTheme.White,
-  };
-
   render() {
+    const {themeColor = HeaderTheme.White, title} = this.props;
     return (
       <LockupContainer>
         <Lockup {...this.props}>
           <DubLogo
             {...this.props}
             dangerouslySetInnerHTML={{
-              __html: this.props.themeColor === HeaderTheme.White ? dubLogoBlue : dubLogoWhite,
+              __html: themeColor === HeaderTheme.White ? dubLogoBlue : dubLogoWhite,
             }}
           />
-          {this.props.title && <Title {...this.props}>{this.props.title}</Title>}
+          {title && <Title {...this.props}>{title}</Title>}
         </Lockup>
       </LockupContainer>
     );

modules/_labs/header/react/lib/parts/SearchBar.tsx

@@ -69,12 +69,12 @@ export interface SearchBarProps extends GrowthBehavior, React.FormHTMLAttributes
    * The screenreader label text for the button to open the collapsed SearchBar.
    * @default Open Search
    */
-  openButtonLabel: string;
+  openButtonLabel?: string;
   /**
    * The screenreader label text for the button to close the open SearchBar.
    * @default Cancel
    */
-  closeButtonLabel: string;
+  closeButtonLabel?: string;
   /**
    * If true, render the SearchBar with a button to clear the text input.
    * @default true
@@ -385,14 +385,14 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
       autocompleteItems,
       initialValue,
       searchTheme,
-      placeholder,
       rightAlign,
-      inputLabel,
-      submitLabel,
-      showClearButton,
-      clearButtonAriaLabel,
-      closeButtonLabel,
-      openButtonLabel,
+      clearButtonAriaLabel = 'Reset Search Form',
+      placeholder = 'Search',
+      inputLabel = 'Search',
+      submitLabel = 'Search',
+      openButtonLabel = 'Open Search',
+      closeButtonLabel = 'Cancel',
+      showClearButton = true,
       ...elemProps
     } = this.props;
 
@@ -445,7 +445,7 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
               onFocus={this.handleFocus}
               onBlur={this.handleBlur}
               showClearButton={!isCollapsed && showClearButton}
-              clearButtonAriaLabel={clearButtonAriaLabel || 'Reset Search Form'}
+              clearButtonAriaLabel={clearButtonAriaLabel}
               labelId={this.labelId}
             >
               <SearchInput

modules/_labs/header/react/lib/parts/WorkdayLogoTitle.tsx

@@ -10,7 +10,7 @@ export type WorkdayLogoTitleProps = {
    * The theme of the WorkdayLogoTitle. Accepts `White`, `Blue`, or `Transparent`.
    * @default HeaderTheme.White
    */
-  themeColor: HeaderTheme;
+  themeColor?: HeaderTheme;
   /**
    * The text of the WorkdayLogoTitle. Not used if `brand` is provided.
    * @default ''
@@ -66,13 +66,8 @@ const WorkdayLogo = styled('span')<WorkdayLogoTitleProps>({
 });
 
 export class WorkdayLogoTitle extends React.Component<WorkdayLogoTitleProps> {
-  static defaultProps = {
-    themeColor: HeaderTheme.White,
-    title: '',
-  };
-
   public render() {
-    const {themeColor, title, variant, ...elemProps} = this.props;
+    const {themeColor = HeaderTheme.White, title = '', variant, ...elemProps} = this.props;
 
     return (
       <LockupContainer>

modules/_labs/header/react/spec/GlobalHeader.spec.tsx

@@ -83,10 +83,12 @@ describe('GlobalHeader', () => {
         onMenuClick: jest.fn(),
         leftSlot: <SearchBar onSubmit={jest.fn()} />,
         isCollapsed: true,
+        themeColor: HeaderTheme.White,
       };
       const propsHeader2 = {
         menuToggle: 'abcde',
         isCollapsed: false,
+        themeColor: HeaderTheme.White,
       };
       const defaultProps = {
         brand: <DubLogoTitle />,