From 545714eb9fb001fafe8897e467fb2374228919b9 Mon Sep 17 00:00:00 2001
From: Yadurani Lopez <yadu-lopez@hotmail.com>
Date: Mon, 13 Dec 2021 17:35:14 -0500
Subject: [PATCH] feat: add wrapper for react router dom

---
 .storybook/preview.js                    | 24 +++++++++++++++---------
 packages/components/package.json         |  2 +-
 packages/components/src/Header/Header.js |  6 ++++--
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 08fee47..7d193eb 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,7 +1,8 @@
 import { ThemeProvider } from 'emotion-theming';
-import { createTheme } from "@mui/material/styles";
+import { createTheme } from '@mui/material/styles';
 
 import { THEME } from '@master-c8/theme';
+import { BrowserRouter } from 'react-router-dom';
 
 const getHiredTheme = createTheme(THEME);
 
@@ -14,25 +15,30 @@ const getStyles = ({ __sb } = {}) => ({
   flexWrap: 'wrap',
   height: '100%',
   gap: '10px 30px',
-  alignItems: 'center'
-})
+  alignItems: 'center',
+});
 
 export const parameters = {
-  actions: { 
-    argTypesRegex: "^on[A-Z].*" 
+  actions: {
+    argTypesRegex: '^on[A-Z].*',
   },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
-  }
-}
+  },
+};
 
 export const decorators = [
+  (Story) => (
+    <BrowserRouter>
+      <Story />
+    </BrowserRouter>
+  ),
   (Story) => (
     <ThemeProvider theme={getHiredTheme}>
-      <Story/>
+      <Story />
     </ThemeProvider>
   ),
   (Story, { parameters }) => (
@@ -40,4 +46,4 @@ export const decorators = [
       <Story />
     </div>
   ),
-];
\ No newline at end of file
+];
diff --git a/packages/components/package.json b/packages/components/package.json
index 0f93a91..87a0008 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@master-c8/commons",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "private": false,
   "description": "Platzi Master C8 commons",
   "main": "./dist/index",
diff --git a/packages/components/src/Header/Header.js b/packages/components/src/Header/Header.js
index 7f778bb..85a9b46 100644
--- a/packages/components/src/Header/Header.js
+++ b/packages/components/src/Header/Header.js
@@ -8,11 +8,11 @@ import { Logotype } from '@master-c8/commons';
 
 import { HeaderContent, BtnGroup } from './Header.styles';
 
-const Header = ({ onClickLogin, onClickSignup, isLogged, children }) => {
+const Header = ({ onClickLogin, onClickSignup, isLogged, children, route }) => {
   return (
     <HeaderContent>
       <Container>
-        <Link>
+        <Link to={route}>
           <Logotype width={140} />
         </Link>
         {!isLogged && (
@@ -36,11 +36,13 @@ Header.propTypes = {
   isLogged: PropTypes.bool,
   onClickLogin: PropTypes.func.isRequired,
   onClickSignup: PropTypes.func.isRequired,
+  route: PropTypes.string,
 };
 
 Header.defaultProps = {
   isLogged: false,
   children: null,
+  route: '',
 };
 
 export default Header;