From 5983cf075646ecafa6a9a528c10e73aa0db77470 Mon Sep 17 00:00:00 2001
From: Manuel Carrera <manuel.carrera.91@gmail.com>
Date: Wed, 10 Jun 2020 16:11:28 -0600
Subject: [PATCH 1/4] test(drawer): Add stories and snapshots for drawer

---
 .../_labs/drawer/react/lib/DrawerHeader.tsx   |  9 +-
 .../react/stories/stories_visualTesting.tsx   | 86 +++++++++++++++++++
 modules/side-panel/react/lib/SidePanel.tsx    | 26 ++----
 3 files changed, 100 insertions(+), 21 deletions(-)
 create mode 100644 modules/_labs/drawer/react/stories/stories_visualTesting.tsx

diff --git a/modules/_labs/drawer/react/lib/DrawerHeader.tsx b/modules/_labs/drawer/react/lib/DrawerHeader.tsx
index 65a922b3c0..f54eb94845 100644
--- a/modules/_labs/drawer/react/lib/DrawerHeader.tsx
+++ b/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,
   };
 
diff --git a/modules/_labs/drawer/react/stories/stories_visualTesting.tsx b/modules/_labs/drawer/react/stories/stories_visualTesting.tsx
new file mode 100644
index 0000000000..2c50f70476
--- /dev/null
+++ b/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>
+);
diff --git a/modules/side-panel/react/lib/SidePanel.tsx b/modules/side-panel/react/lib/SidePanel.tsx
index 90a761b147..9baddba34a 100644
--- a/modules/side-panel/react/lib/SidePanel.tsx
+++ b/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}

From 414688b9ab89c528e496f464fea1b9f9cfff66d2 Mon Sep 17 00:00:00 2001
From: Manuel Carrera <manuel.carrera.91@gmail.com>
Date: Wed, 10 Jun 2020 16:18:57 -0600
Subject: [PATCH 2/4] fix: Remove inverse prop from styled

---
 modules/_labs/drawer/react/lib/DrawerHeader.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/modules/_labs/drawer/react/lib/DrawerHeader.tsx b/modules/_labs/drawer/react/lib/DrawerHeader.tsx
index f54eb94845..e2c5f98e37 100644
--- a/modules/_labs/drawer/react/lib/DrawerHeader.tsx
+++ b/modules/_labs/drawer/react/lib/DrawerHeader.tsx
@@ -39,9 +39,7 @@ export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement>
 
 const headerHeight = 56;
 
-const HeaderContainer = styled('div')<
-  Pick<DrawerHeaderProps, 'headerColor' | 'borderColor' | 'inverse'>
->(
+const HeaderContainer = styled('div')<Pick<DrawerHeaderProps, 'headerColor' | 'borderColor'>>(
   {
     height: headerHeight,
     display: 'flex',
@@ -69,7 +67,7 @@ const HeaderTitle = styled(H4)<Pick<DrawerHeaderProps, 'inverse'>>(
   })
 );
 
-const CloseButton = styled(IconButton)<Pick<DrawerHeaderProps, 'inverse'>>({
+const CloseButton = styled(IconButton)({
   margin: '-8px', // for inverse and plain button, we always want this margin
 });
 

From 910b8c1cdfe4e15b6e311c6dd45c45aed60e588b Mon Sep 17 00:00:00 2001
From: Manuel Carrera <manuel.carrera.91@gmail.com>
Date: Wed, 10 Jun 2020 16:22:10 -0600
Subject: [PATCH 3/4] fix: Add dep to package

---
 modules/_labs/drawer/react/package.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/modules/_labs/drawer/react/package.json b/modules/_labs/drawer/react/package.json
index 7913bf38ce..acb8eda099 100644
--- a/modules/_labs/drawer/react/package.json
+++ b/modules/_labs/drawer/react/package.json
@@ -43,5 +43,8 @@
   },
   "peerDependencies": {
     "react": ">= 16.8 < 17"
+  },
+  "devDependencies": {
+    "@workday/canvas-kit-labs-react-core": "^3.8.0"
   }
 }

From a540d8c5949867a73a9522cb09828e7e9f076931 Mon Sep 17 00:00:00 2001
From: Manuel Carrera <manuel.carrera.91@gmail.com>
Date: Wed, 10 Jun 2020 16:38:17 -0600
Subject: [PATCH 4/4] fix: Remove unused import

---
 .../_labs/drawer/react/stories/stories_visualTesting.tsx    | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/modules/_labs/drawer/react/stories/stories_visualTesting.tsx b/modules/_labs/drawer/react/stories/stories_visualTesting.tsx
index 2c50f70476..80294a3514 100644
--- a/modules/_labs/drawer/react/stories/stories_visualTesting.tsx
+++ b/modules/_labs/drawer/react/stories/stories_visualTesting.tsx
@@ -1,11 +1,7 @@
 /// <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 {ComponentStatesTable, withSnapshotsEnabled} from '../../../../../utils/storybook';
 import {spacing} from '@workday/canvas-kit-react-core';
 
 import {Drawer, DrawerHeader, DrawerDirection} from '../index';