feat: add wrapper for react router dom

Platzi-Master-C8 · Dec 13, 2021 · 545714e · 545714e
1 parent d8eeae9
commit 545714e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git 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,30 +15,35 @@ 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 }) => (
     <div style={getStyles(parameters)}>
       <Story />
     </div>
   ),
-];
+];
diff --git 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
@@ -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;