Merge pull request #19 from Platzi-Master-C8/develop

Merge from develop to main

.eslintrc.js

@@ -6,7 +6,7 @@ module.exports = {
     browser: true,
     es2021: true,
     node: true,
-    'jest/globals': true
+    'jest/globals': true,
   },
   extends: [
     'plugin:react/recommended',
@@ -19,12 +19,7 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 7,
   },
-  plugins: [
-    'react',
-    '@typescript-eslint',
-    'jest',
-    'testing-library'
-  ],
+  plugins: ['react', '@typescript-eslint', 'jest', 'testing-library'],
   rules: {
     '@typescript-eslint/dot-notation': 'off',
     '@typescript-eslint/no-implied-eval': 'off',
@@ -34,10 +29,10 @@ module.exports = {
     'max-len': ['error', { code: 200, ignoreTemplateLiterals: true, ignoreStrings: true }],
     'import/no-extraneous-dependencies': 'off',
     'react/jsx-filename-extension': 'off',
-    'semi': 'error',
+    semi: 'error',
     'object-curly-spacing': 'error',
-    'indent': ['error', 2],
-    'quotes': ['error', 'single', { 'allowTemplateLiterals': true, 'avoidEscape': true }],
+    indent: ['error', 2],
+    quotes: ['error', 'single', { allowTemplateLiterals: true, avoidEscape: true }],
     'space-before-blocks': 'error',
     'no-param-reassign': 'off',
     'consistent-this': ['error', 'self'],
@@ -98,18 +93,18 @@ module.exports = {
       },
     },
     {
-      'files': ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
-      'extends': ['plugin:testing-library/react'],
+      files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+      extends: ['plugin:testing-library/react'],
       rules: {
         'testing-library/prefer-screen-queries': 'off',
-        'testing-library/no-node-access': 'off'
-      }
+        'testing-library/no-node-access': 'off',
+      },
     },
     {
       files: ['./packages/**/src/**/index.js', './packages/**/src/**/index.d.ts'],
-      'rules': {
-        'no-restricted-exports': 'off'
-      }
-    }
-  ]
+      rules: {
+        'no-restricted-exports': 'off',
+      },
+    },
+  ],
 };

.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>
   ),
-];
+];

package.json

@@ -54,6 +54,7 @@
     "prettier": "2.4.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-router-dom": "^6.0.2",
     "styled-components": "^5.3.3",
     "tsconfig-paths-webpack-plugin": "3.5.1",
     "typescript": "4.4.4",

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@master-c8/commons",
-  "version": "0.0.6",
+  "version": "0.1.8",
   "private": false,
   "description": "Platzi Master C8 commons",
   "main": "./dist/index",
@@ -45,8 +45,8 @@
     }
   },
   "dependencies": {
-    "@master-c8/theme": "0.1.3",
-    "@master-c8/icons": "0.1.0",
+    "@master-c8/theme": "0.1.9",
+    "@master-c8/icons": "0.1.3",
     "prop-types": "15.7.2"
   },
   "publishConfig": {

packages/components/src/Header/Header.js

@@ -1,16 +1,20 @@
 import PropTypes from 'prop-types';
 
+import { Link } from 'react-router-dom';
+
 import { Button, Container } from '@mui/material';
 
 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>
-        <Logotype width={140} />
+        <Link to={route}>
+          <Logotype width={140} />
+        </Link>
         {!isLogged && (
           <BtnGroup>
             <Button variant="outlined" size="large" onClick={onClickLogin} type="button">
@@ -30,13 +34,15 @@ const Header = ({ onClickLogin, onClickSignup, isLogged, children }) => {
 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,
 };
 
 Header.defaultProps = {
   isLogged: false,
   children: null,
+  route: '',
 };
 
 export default Header;

packages/components/src/Header/Header.stories.js

@@ -1,4 +1,5 @@
 import Header from './Header';
+import HeaderJob from './HeaderJob';
 
 export default {
   title: 'Design System/Commons/Header',
@@ -25,3 +26,5 @@ export const HeaderLogged = () => (
     <div>Children</div>
   </Header>
 );
+
+export const HeaderJobs = () => <HeaderJob />;

packages/components/src/Header/Header.styles.js

@@ -9,7 +9,10 @@ export const HeaderContent = styled('header')(
     height: 80px;
     width: 100%;
     img {
-      width: 110px;
+      width: 160px;
+      @media (max-width: 560px) {
+        width: 110px;
+      }
     }
     .MuiContainer-root {
       align-items: center;
@@ -26,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;
+  }
+`;

packages/components/src/Header/HeaderJob.js

@@ -0,0 +1,100 @@
+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, 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>
+      <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>
+          <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>
+          <MenuItem sx={{ display: { xs: 'none', md: 'initial' } }}>
+            <Avatar sx={{ bgcolor: COLORS.secondary }}>J</Avatar>
+          </MenuItem>
+        </MenuList>
+      </WrapperMenu>
+    </Header>
+  );
+};
+
+export default HeaderJob;

packages/components/src/Header/index.js

@@ -1 +1,2 @@
-export { default } from './Header';
+export { default } from './Header';
+export { default as HeaderJob } from './HeaderJob';

packages/components/src/index.js

@@ -1,2 +1,3 @@
 export { default as Logotype } from './Logotype';
 export { default as Header } from './Header';
+export { default as HeaderJob } from './Header/HeaderJob';

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",

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;

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;

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();
+  });
+});

packages/icons/src/Close/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Close';
+export * from './Close';

packages/icons/src/Close/index.js

@@ -0,0 +1 @@
+export { default } from './Close';

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';

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';