Merge pull request #18 from Platzi-Master-C8/feature-17

Feature 17
Platzi-Master-C8 · Jan 7, 2022 · c59829e · c59829e
2 parents cf340b1 + 1a50989
commit c59829e
Show file tree

Hide file tree

Showing 12 changed files with 135 additions and 48 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@master-c8/commons",
-  "version": "0.1.0",
+  "version": "0.1.8",
   "private": false,
   "description": "Platzi Master C8 commons",
   "main": "./dist/index",
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@master-c8/theme": "0.1.9",
-    "@master-c8/icons": "0.1.2",
+    "@master-c8/icons": "0.1.3",
     "prop-types": "15.7.2"
   },
   "publishConfig": {

diff --git a/packages/components/src/Header/Header.js b/packages/components/src/Header/Header.js
@@ -34,8 +34,8 @@ const Header = ({ onClickLogin, onClickSignup, isLogged, children, route }) => {
 Header.propTypes = {
   children: PropTypes.node,
   isLogged: PropTypes.bool,
-  onClickLogin: PropTypes.func.isRequired,
-  onClickSignup: PropTypes.func.isRequired,
+  onClickLogin: PropTypes.func,
+  onClickSignup: PropTypes.func,
   route: PropTypes.string,
 };
 

diff --git a/packages/components/src/Header/Header.styles.js b/packages/components/src/Header/Header.styles.js
@@ -29,3 +29,18 @@ export const BtnGroup = styled('div')`
     display: none;
   }
 `;
+
+export const WrapperMenu = styled('div')`
+  @media (max-width: 900px) {
+    transform: ${({ open }) => (open ? 'translateX(0%)' : 'translateX(100%)')};
+    transition: transform ease 0.3s;
+    background: white;
+    position: fixed;
+    top: 81px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 0 16px;
+    z-index: 2;
+  }
+`;
diff --git a/packages/components/src/Header/HeaderJob.js b/packages/components/src/Header/HeaderJob.js
@@ -1,63 +1,98 @@
-import React from 'react';
+import React, { useState } from 'react';
 
+import Link from '@mui/material/Link';
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import Typography from '@mui/material/Typography';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Avatar from '@mui/material/Avatar';
+import IconButton from '@mui/material/IconButton';
 
-import { Currency, BriefCase, Blog } from '@master-c8/icons';
+import { Currency, BriefCase, Blog, Menu, Close } from '@master-c8/icons';
 import { COLORS } from '@master-c8/theme';
 
 import Header from './Header';
 
+import { WrapperMenu } from './Header.styles';
+
 const HeaderJob = () => {
+  const [open, setOpen] = useState(false);
+
+  const handleOpen = () => setOpen(!open);
+
   return (
     <Header isLogged>
-      <MenuList sx={{ display: 'flex' }}>
-        <a
-          style={{ textDecoration: 'none' }}
-          href="https://platzi-master-c8.github.io/gethired-jobplacement-salaries-frontend/"
-        >
-          <MenuItem sx={{ flexDirection: 'column', gap: '5px' }}>
-            <ListItemIcon>
-              <Currency color="secondary" />
-            </ListItemIcon>
-            <Typography color="secondary" sx={{ fontSize: '13px' }}>
-              Salary Calculator
-            </Typography>
+      <IconButton
+        aria-label="menu"
+        sx={{ display: { sm: 'inherit', md: 'none' } }}
+        onClick={handleOpen}
+      >
+        {!open ? <Menu color="secondary" size="large" /> : <Close color="secondary" size="large" />}
+      </IconButton>
+      <WrapperMenu open={open}>
+        <MenuList sx={{ display: { sm: 'initial', md: 'flex' } }}>
+          <MenuItem>
+            <Link
+              sx={{
+                flexDirection: { sm: 'row', md: 'column' },
+                alignItems: 'center',
+                gap: '5px',
+                display: 'flex',
+                textDecoration: 'none',
+              }}
+              href="https://platzi-master-c8.github.io/gethired-jobplacement-salaries-frontend/"
+            >
+              <ListItemIcon>
+                <Currency color="secondary" />
+              </ListItemIcon>
+              <Typography color="secondary" sx={{ fontSize: { sm: '16px', md: '13px' } }}>
+                Salary Calculator
+              </Typography>
+            </Link>
+          </MenuItem>
+          <MenuItem>
+            <Link
+              sx={{
+                flexDirection: { sm: 'row', md: 'column' },
+                alignItems: 'center',
+                gap: '5px',
+                display: 'flex',
+                textDecoration: 'none',
+              }}
+              href="https://platzi-master-c8.github.io/gethired-jobplacement-ratings/"
+            >
+              <ListItemIcon sx={{ color: '#000' }}>
+                <Blog />
+              </ListItemIcon>
+              <Typography color="text" sx={{ fontSize: { sm: '16px', md: '13px' }, color: '#000' }}>
+                Raitings
+              </Typography>
+            </Link>
           </MenuItem>
-        </a>
-        <a
-          style={{ textDecoration: 'none' }}
-          href="https://platzi-master-c8.github.io/gethired-jobplacement-ratings/"
-        >
-          <MenuItem sx={{ flexDirection: 'column', gap: '5px' }}>
-            <ListItemIcon sx={{ color: '#000' }}>
-              <Blog />
-            </ListItemIcon>
-            <Typography color="text" sx={{ fontSize: '13px', color: '#000' }}>
-              Raitings
-            </Typography>
+          <MenuItem>
+            <Link
+              sx={{
+                flexDirection: { sm: 'row', md: 'column' },
+                alignItems: 'center',
+                gap: '5px',
+                display: 'flex',
+                textDecoration: 'none',
+              }}
+              href="https://platzi-master-c8.github.io/gethired-jobplacement-enterprise-Frontend/"
+            >
+              <ListItemIcon sx={{ color: '#000' }}>
+                <BriefCase />
+              </ListItemIcon>
+              <Typography color="text" sx={{ fontSize: { sm: '16px', md: '13px' }, color: '#000' }}>
+                Company
+              </Typography>
+            </Link>
           </MenuItem>
-        </a>
-        <a
-          style={{ textDecoration: 'none' }}
-          href="https://platzi-master-c8.github.io/gethired-jobplacement-enterprise-Frontend/"
-        >
-          <MenuItem sx={{ flexDirection: 'column', gap: '5px' }}>
-            <ListItemIcon sx={{ color: '#000' }}>
-              <BriefCase />
-            </ListItemIcon>
-            <Typography color="text" sx={{ fontSize: '13px', color: '#000' }}>
-              Company
-            </Typography>
+          <MenuItem sx={{ display: { xs: 'none', md: 'initial' } }}>
+            <Avatar sx={{ bgcolor: COLORS.secondary }}>J</Avatar>
           </MenuItem>
-        </a>
-        <MenuItem>
-          <Avatar sx={{ bgcolor: COLORS.secondary }}>J</Avatar>
-        </MenuItem>
-      </MenuList>
+        </MenuList>
+      </WrapperMenu>
     </Header>
   );
 };

diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@master-c8/icons",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": false,
   "description": "Platzi Master C8 Icons",
   "main": "./dist/index",

diff --git a/packages/icons/src/Close/Close.d.ts b/packages/icons/src/Close/Close.d.ts
@@ -0,0 +1,5 @@
+import { HTMLProps } from 'react';
+
+export interface CloseProps extends HTMLProps<SVGAElement> {}
+
+export default function Close(props: CloseProps): JSX.Element;
diff --git a/packages/icons/src/Close/Close.js b/packages/icons/src/Close/Close.js
@@ -0,0 +1,12 @@
+import { forwardRef } from 'react';
+import { SvgIcon } from '@mui/material';
+
+const Close = forwardRef(function Close(props, ref) {
+  return (
+    <SvgIcon {...props} {...ref}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+    </SvgIcon>
+  );
+});
+
+export default Close;
diff --git a/packages/icons/src/Close/Close.spec.js b/packages/icons/src/Close/Close.spec.js
@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react';
+import Close from './Close';
+
+describe('@icons/Close', () => {
+  it('Given a normal call it should render properly', () => {
+    // arrange
+    const { getByTitle } = render(<Close title="Close" />);
+    // act
+    const icon = getByTitle(/Close/i);
+    // assert
+    expect(icon).toBeInTheDocument();
+  });
+});
diff --git a/packages/icons/src/Close/index.d.ts b/packages/icons/src/Close/index.d.ts
@@ -0,0 +1,2 @@
+export { default } from './Close';
+export * from './Close';
diff --git a/packages/icons/src/Close/index.js b/packages/icons/src/Close/index.js
@@ -0,0 +1 @@
+export { default } from './Close';
diff --git a/packages/icons/src/index.d.ts b/packages/icons/src/index.d.ts
@@ -39,3 +39,6 @@ export * from './Currency';
 
 export { default as Switch } from './Switch';
 export * from './Switch';
+
+export { default as Close } from './Close';
+export * from './Close';
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
@@ -12,3 +12,4 @@ export { default as ChevronUp } from './ChevronUp';
 export { default as ChevronDown } from './ChevronDown';
 export { default as Currency } from './Currency';
 export { default as Switch } from './Switch';
+export { default as Close } from './Close';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default } from './Close';
		export * from './Close';