diff --git a/packages/components/package.json b/packages/components/package.json index 94b152b..4f2b29b 100644 --- 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 index 85a9b46..b9816fd 100644 --- 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 index 0d4f91e..7576d06 100644 --- 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 index 7c32e90..75f7dac 100644 --- 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 (
- - - - - - - - Salary Calculator - + + {!open ? : } + + + + + + + + + + Salary Calculator + + + + + + + + + + Raitings + + - - - - - - - - Raitings - + + + + + + + Company + + - - - - - - - - Company - + + J - - - J - - + +
); }; diff --git a/packages/icons/package.json b/packages/icons/package.json index a93b187..2469226 100644 --- 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 new file mode 100644 index 0000000..0859827 --- /dev/null +++ b/packages/icons/src/Close/Close.d.ts @@ -0,0 +1,5 @@ +import { HTMLProps } from 'react'; + +export interface CloseProps extends HTMLProps {} + +export default function Close(props: CloseProps): JSX.Element; diff --git a/packages/icons/src/Close/Close.js b/packages/icons/src/Close/Close.js new file mode 100644 index 0000000..45f34a1 --- /dev/null +++ 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 ( + + + + ); +}); + +export default Close; diff --git a/packages/icons/src/Close/Close.spec.js b/packages/icons/src/Close/Close.spec.js new file mode 100644 index 0000000..30d60b1 --- /dev/null +++ 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(); + // 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 new file mode 100644 index 0000000..0e2e4ac --- /dev/null +++ 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 new file mode 100644 index 0000000..d94eb84 --- /dev/null +++ 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 index d580112..dd817de 100644 --- 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 index a62c663..252e54c 100644 --- 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';