From 78a44b253a5d6726f2533bf493bf0461a2127957 Mon Sep 17 00:00:00 2001
From: Nikil Kuruvilla <nikilok@gmail.com>
Date: Wed, 27 Nov 2019 15:35:34 +0100
Subject: [PATCH] feat(components): expose sidebar context (#512)

expose sidebar context that allows it to be used with the useContext hook.
This allows the side bar
context to be used in a simpler pattern that does not require the render props method of usage.
---
 src/components/Sidebar/SidebarContext.js      |  7 ++--
 src/components/Sidebar/SidebarContext.spec.js | 33 ++++++++++++++++++-
 src/components/Sidebar/index.js               |  3 +-
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/components/Sidebar/SidebarContext.js b/src/components/Sidebar/SidebarContext.js
index 435d7bb02f..ef7ffa1bff 100644
--- a/src/components/Sidebar/SidebarContext.js
+++ b/src/components/Sidebar/SidebarContext.js
@@ -16,7 +16,10 @@
 import React, { createContext } from 'react';
 import PropTypes from 'prop-types';
 
-const SidebarContext = createContext();
+const SidebarContext = createContext({
+  isSidebarOpen: false,
+  toggleSidebar: () => {}
+});
 
 const SidebarContextConsumer = SidebarContext.Consumer;
 
@@ -48,4 +51,4 @@ SidebarContextProvider.propTypes = {
   children: PropTypes.node
 };
 
-export { SidebarContextProvider, SidebarContextConsumer };
+export { SidebarContext, SidebarContextProvider, SidebarContextConsumer };
diff --git a/src/components/Sidebar/SidebarContext.spec.js b/src/components/Sidebar/SidebarContext.spec.js
index 84850f1602..9064be6675 100644
--- a/src/components/Sidebar/SidebarContext.spec.js
+++ b/src/components/Sidebar/SidebarContext.spec.js
@@ -13,12 +13,25 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { useContext } from 'react';
 import {
+  SidebarContext,
   SidebarContextProvider,
   SidebarContextConsumer
 } from './SidebarContext';
 
+const ToggleSidebarButton = () => {
+  const { toggleSidebar, isSidebarOpen } = useContext(SidebarContext);
+
+  return (
+    <button
+      data-testid="button"
+      onClick={toggleSidebar}
+      data-open={isSidebarOpen}
+    />
+  );
+};
+
 describe('SidebarContext', () => {
   it('should change Provider open state when using toggleSidebar', () => {
     const { getByTestId } = render(
@@ -45,4 +58,22 @@ describe('SidebarContext', () => {
 
     expect(buttonEl).toHaveAttribute('data-open', 'true');
   });
+
+  it('should be able to consume context, along with useContext hook', () => {
+    const { getByTestId } = render(
+      <SidebarContextProvider>
+        <ToggleSidebarButton />
+      </SidebarContextProvider>
+    );
+
+    const buttonElement = getByTestId('button');
+
+    expect(buttonElement).toHaveAttribute('data-open', 'false');
+
+    act(() => {
+      fireEvent.click(buttonElement);
+    });
+
+    expect(buttonElement).toHaveAttribute('data-open', 'true');
+  });
 });
diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js
index ab6345b96f..54521c7873 100644
--- a/src/components/Sidebar/index.js
+++ b/src/components/Sidebar/index.js
@@ -15,9 +15,10 @@
 
 import Sidebar from './Sidebar';
 import {
+  SidebarContext,
   SidebarContextProvider,
   SidebarContextConsumer
 } from './SidebarContext';
 
 export default Sidebar;
-export { SidebarContextProvider, SidebarContextConsumer };
+export { SidebarContext, SidebarContextProvider, SidebarContextConsumer };