From db66828e626adfc8d5693de1129a11815ad068fb Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Thu, 11 Jun 2020 14:37:17 -0500
Subject: [PATCH 1/2] fix(content-switcher): call onChange with correct data
 with keyboard

---
 .../ContentSwitcher/ContentSwitcher-story.js  |  6 +-
 .../ContentSwitcher/ContentSwitcher-test.js   | 70 +++++++++++++++++++
 .../ContentSwitcher/ContentSwitcher.js        | 11 ++-
 3 files changed, 84 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
index 3fd2a44d1250..63ba3409d266 100644
--- a/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
+++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
@@ -39,7 +39,11 @@ storiesOf('ContentSwitcher', module)
     () => {
       const switchProps = props.switch();
       return (
-        <ContentSwitcher {...props.contentSwitcher()}>
+        <ContentSwitcher
+          {...props.contentSwitcher()}
+          onChange={(data) => {
+            console.log(data);
+          }}>
           <Switch name="one" text="First section" {...switchProps} />
           <Switch name="two" text="Second section" {...switchProps} />
           <Switch name="three" text="Third section" {...switchProps} />
diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher-test.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher-test.js
index d0d652cd9218..100492781c9a 100644
--- a/packages/react/src/components/ContentSwitcher/ContentSwitcher-test.js
+++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher-test.js
@@ -156,4 +156,74 @@ describe('ContentSwitcher', () => {
       expect(secondChild.props().selected).toEqual(true);
     });
   });
+
+  describe('onChange', () => {
+    it('should call `onChange` with the newly selected switch data when using a keyboard', () => {
+      const onChange = jest.fn();
+      const wrapper = mount(
+        <ContentSwitcher onChange={onChange}>
+          <Switch name="first" text="first" />
+          <Switch name="second" text="second" />
+          <Switch name="third" text="third" />
+        </ContentSwitcher>
+      );
+
+      wrapper.find({ name: 'first' }).simulate('keydown', {
+        key: 'ArrowRight',
+      });
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenLastCalledWith({
+        index: 1,
+        name: 'second',
+        text: 'second',
+        key: 'ArrowRight',
+      });
+
+      wrapper.find({ name: 'second' }).simulate('keydown', {
+        key: 'ArrowRight',
+      });
+      expect(onChange).toHaveBeenLastCalledWith({
+        index: 2,
+        name: 'third',
+        text: 'third',
+        key: 'ArrowRight',
+      });
+
+      wrapper.find({ name: 'third' }).simulate('keydown', {
+        key: 'ArrowRight',
+      });
+      expect(onChange).toHaveBeenLastCalledWith({
+        index: 0,
+        name: 'first',
+        text: 'first',
+        key: 'ArrowRight',
+      });
+    });
+
+    it('should call `onChange` with the newly selected switch data when using a mouse', () => {
+      const onChange = jest.fn();
+      const wrapper = mount(
+        <ContentSwitcher onChange={onChange}>
+          <Switch name="first" text="first" />
+          <Switch name="second" text="second" />
+          <Switch name="third" text="third" />
+        </ContentSwitcher>
+      );
+
+      wrapper.find({ name: 'second' }).simulate('click');
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenLastCalledWith({
+        index: 1,
+        name: 'second',
+        text: 'second',
+      });
+
+      wrapper.find({ name: 'third' }).simulate('click');
+      expect(onChange).toHaveBeenLastCalledWith({
+        index: 2,
+        name: 'third',
+        text: 'third',
+      });
+    });
+  });
 });
diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher.js
index 38749a3f4e1a..2d2ec9b842f7 100644
--- a/packages/react/src/components/ContentSwitcher/ContentSwitcher.js
+++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher.js
@@ -81,6 +81,7 @@ export default class ContentSwitcher extends React.Component {
 
     if (matches(data, [keys.ArrowRight, keys.ArrowLeft])) {
       const nextIndex = getNextIndex(key, index, this.props.children.length);
+      const children = React.Children.toArray(this.props.children);
       if (selectionMode === 'manual') {
         const switchRef = this._switchRefs[nextIndex];
         switchRef && switchRef.focus();
@@ -90,9 +91,15 @@ export default class ContentSwitcher extends React.Component {
             selectedIndex: nextIndex,
           },
           () => {
-            const switchRef = this._switchRefs[nextIndex];
+            const child = children[this.state.selectedIndex];
+            const switchRef = this._switchRefs[this.state.selectedIndex];
             switchRef && switchRef.focus();
-            this.props.onChange(data);
+            this.props.onChange({
+              ...data,
+              index: this.state.selectedIndex,
+              name: child.props.name,
+              text: child.props.text,
+            });
           }
         );
       }

From 03c470e11db58fe7a4930c2d5be21abdebbfe1bc Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Thu, 11 Jun 2020 14:38:45 -0500
Subject: [PATCH 2/2] chore(content-switcher): revert changes to storybook

---
 .../src/components/ContentSwitcher/ContentSwitcher-story.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
index 63ba3409d266..3fd2a44d1250 100644
--- a/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
+++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
@@ -39,11 +39,7 @@ storiesOf('ContentSwitcher', module)
     () => {
       const switchProps = props.switch();
       return (
-        <ContentSwitcher
-          {...props.contentSwitcher()}
-          onChange={(data) => {
-            console.log(data);
-          }}>
+        <ContentSwitcher {...props.contentSwitcher()}>
           <Switch name="one" text="First section" {...switchProps} />
           <Switch name="two" text="Second section" {...switchProps} />
           <Switch name="three" text="Third section" {...switchProps} />