test(drawer): Add stories and snapshots for drawer

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

@@ -8,7 +8,7 @@ export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement>
   /**
    * The text of the DrawerHeader. This text will also be applied as the `title` attribute of the header element.
    */
-  headerText?: string;
+  title?: string;
   /**
    * The function called when the DrawerHeader close button is clicked.
    */
@@ -39,7 +39,9 @@ export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement>
 
 const headerHeight = 56;
 
-const HeaderContainer = styled('div')<Pick<DrawerHeaderProps, 'headerColor' | 'borderColor'>>(
+const HeaderContainer = styled('div')<
+  Pick<DrawerHeaderProps, 'headerColor' | 'borderColor' | 'inverse'>
+>(
   {
     height: headerHeight,
     display: 'flex',
@@ -67,7 +69,7 @@ const HeaderTitle = styled(H4)<Pick<DrawerHeaderProps, 'inverse'>>(
   })
 );
 
-const CloseButton = styled(IconButton)({
+const CloseButton = styled(IconButton)<Pick<DrawerHeaderProps, 'inverse'>>({
   margin: '-8px', // for inverse and plain button, we always want this margin
 });
 
@@ -76,7 +78,6 @@ export default class DrawerHeader extends React.Component<DrawerHeaderProps, {}>
     closeIconLabel: 'Close',
     headerColor: colors.soap100,
     borderColor: colors.soap500,
-    showInverseButton: false,
     inverse: false,
   };
 

modules/_labs/drawer/react/stories/stories_visualTesting.tsx

@@ -0,0 +1,86 @@
+/// <reference path="../../../../../typings.d.ts" />
+import * as React from 'react';
+import {StaticStates} from '@workday/canvas-kit-labs-react-core';
+import {
+  ComponentStatesTable,
+  permutateProps,
+  withSnapshotsEnabled,
+} from '../../../../../utils/storybook';
+import {spacing} from '@workday/canvas-kit-react-core';
+
+import {Drawer, DrawerHeader, DrawerDirection} from '../index';
+import {action} from '@storybook/addon-actions';
+
+export default withSnapshotsEnabled({
+  title: 'Testing|React/Labs/Drawer',
+  component: Drawer,
+});
+
+export const DrawerStates = () => (
+  <div>
+    <h3>Drawer</h3>
+    <StaticStates>
+      <ComponentStatesTable
+        rowProps={[
+          {label: 'Default', props: {}},
+          {label: 'With Drop Shadow', props: {showDropShadow: true}},
+          {label: 'With Custom Padding', props: {padding: spacing.l, showDropShadow: true}},
+          {label: 'With Zero Padding', props: {padding: spacing.zero, showDropShadow: true}},
+          {label: 'With Custom Width', props: {width: 150, showDropShadow: true}},
+          {
+            label: 'With Open Direction Left',
+            props: {openDirection: DrawerDirection.Left, showDropShadow: true, width: 150},
+          },
+        ]}
+        columnProps={[{label: 'Default', props: {}}]}
+      >
+        {props => (
+          <div style={{height: 200, position: 'relative'}}>
+            <Drawer {...props}>Drawer Content</Drawer>
+          </div>
+        )}
+      </ComponentStatesTable>
+    </StaticStates>
+    <h3>Drawer With Header</h3>
+    <StaticStates>
+      <ComponentStatesTable
+        rowProps={[
+          {label: 'Default Header', props: {}},
+          {label: 'With Header Text', props: {title: 'Drawer Header'}},
+          {
+            label: 'With Close Button',
+            props: {onClose: action('on close clicked'), title: 'Drawer Header'},
+          },
+          {
+            label: 'With Custom Background Color',
+            props: {headerColor: 'orange', title: 'Drawer Header'},
+          },
+          {
+            label: 'With Inverse True',
+            props: {
+              headerColor: 'black',
+              title: 'Drawer Header',
+              inverse: true,
+              onClose: action('on close clicked'),
+            },
+          },
+          {
+            label: 'With Custom Border Color',
+            props: {
+              onClose: action('on close clicked'),
+              title: 'Drawer Header',
+              borderColor: 'blue',
+            },
+          },
+        ]}
+        columnProps={[{label: 'Default', props: {}}]}
+      >
+        {props => (
+          <div style={{height: 200, position: 'relative'}}>
+            <Drawer header={<DrawerHeader {...props} />}>Drawer Content</Drawer>
+          </div>
+        )}
+      </ComponentStatesTable>
+    </StaticStates>
+  </div>
+);

modules/side-panel/react/lib/SidePanel.tsx

@@ -53,12 +53,12 @@ export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
    * The `aria-label` that describes closing the navigation.
    * @default 'close navigation'
    */
-  closeNavigationLabel: string;
+  closeNavigationAriaLabel?: string;
   /**
    * The `aria-label` that describes opening the navigation.
    * @default 'open navigation'
    */
-  openNavigationLabel: string;
+  openNavigationAriaLabel?: string;
 }
 
 export interface SidePanelState {
@@ -169,15 +169,6 @@ export default class SidePanel extends React.Component<SidePanelProps, SidePanel
   static OpenDirection = SidePanelOpenDirection;
   static BackgroundColor = SidePanelBackgroundColor;
 
-  static defaultProps = {
-    breakpoint: 768,
-    openWidth: 300,
-    openDirection: SidePanelOpenDirection.Left,
-    backgroundColor: SidePanelBackgroundColor.White,
-    closeNavigationLabel: 'close navigation',
-    openNavigationLabel: 'open navigation',
-  };
-
   constructor(props: SidePanelProps) {
     super(props);
     this.handleResize = throttle(this.handleResize.bind(this), 150);
@@ -196,16 +187,17 @@ export default class SidePanel extends React.Component<SidePanelProps, SidePanel
 
   public render() {
     const {
+      backgroundColor = SidePanelBackgroundColor.White,
+      openNavigationAriaLabel = 'open navigation',
+      closeNavigationAriaLabel = 'close navigation',
+      openDirection = SidePanelOpenDirection.Left,
+      breakpoint = 768,
+      openWidth = 300,
       header,
       onToggleClick,
       open,
-      openDirection,
       padding,
       onBreakpointChange,
-      openWidth,
-      backgroundColor,
-      openNavigationLabel,
-      closeNavigationLabel,
       ...elemProps
     } = this.props;
 
@@ -227,7 +219,7 @@ export default class SidePanel extends React.Component<SidePanelProps, SidePanel
           {onToggleClick && (
             <ToggleButton
               openDirection={openDirection}
-              aria-label={open ? closeNavigationLabel : openNavigationLabel}
+              aria-label={open ? closeNavigationAriaLabel : openNavigationAriaLabel}
               toggled={false}
               size={IconButton.Size.Small}
               onClick={this.onToggleClick}