Merge pull request #14 from LuizGMiranda/7

feature/header-dashboard

Author: marcobrunodev

cypress/integration/pages/Dashboard/index.test.js

@@ -0,0 +1,32 @@
+describe("Page Dashboard", function() {
+  it("Open page on Desktop", function() {
+    cy.visit("/dashboard");
+  });
+
+  it("Open page on Mobile", function() {
+    cy.visit("/dashboard");
+    cy.viewport("iphone-5");
+  });
+
+  it("Open page on TV 4K", function() {
+    cy.visit("/dashboard");
+    cy.viewport(3840, 2160);
+  });
+
+  it("Verify if exist header on Web", function() {
+    cy.visit("/dashboard");
+
+    cy.get("header");
+    cy.get("header > img");
+    cy.get("header > div");
+  });
+
+  it("Verify if exist header on Mobile", function() {
+    cy.visit("/dashboard");
+    cy.viewport("iphone-5");
+
+    cy.get("header");
+    cy.get("header > img");
+    cy.get("header > div").should("be.not.visible");
+  });
+});

src/components/PhotoUserCollab/index.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+import { Container, PhotoUser } from "./styles";
+import ImageUserDefault from "../../img/userdefault.jpg";
+
+const PhotoUserCollab = ({ img }) => (
+  <Container>
+    <PhotoUser src={img ? img : ImageUserDefault} />
+  </Container>
+);
+
+export default PhotoUserCollab;

src/components/PhotoUserCollab/styles.js

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  height: 40px;
+  width: 40px;
+  border-radius: 50%;
+  vertical-align: top;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  text-decoration: none;
+  border: 0;
+  margin: 10px;
+  position: relative;
+
+  @media (max-width: 767.98px) {
+    display: none;
+  }
+`;
+
+export const PhotoUser = styled.img`
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%)
+`;

src/containers/HeaderDashboard/index.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+import LogoCollab from "../../components/LogoCollab";
+import PhotoUserCollab from "../../components/PhotoUserCollab";
+
+import { Header } from "./styles";
+
+export default function HeaderDashboard() {
+  return (
+    <Header>
+      <LogoCollab />
+      <PhotoUserCollab img={'https://cdn.vox-cdn.com/thumbor/Oi6jzvQzWetJGlkpwLqlP1L9p28=/0x0:5568x3712/1200x800/filters:focal(2858x720:3748x1610)/cdn.vox-cdn.com/uploads/chorus_image/image/62207705/922984782.jpg.0.jpg'} />
+    </Header>
+  );
+}
+

src/containers/HeaderDashboard/styles.js

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+export const Header = styled.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  padding: 10px 20px;
+
+  img {
+    height: 40px;
+  }
+
+  @media (max-width: 767.98px) {
+    justify-content: center;
+  }
+`;

src/img/userdefault.jpg

@@ -1,7 +1,9 @@
 import React from "react";
 
+import HeaderDashboard from "../../containers/HeaderDashboard";
+
 function Dashboard() {
-  return <h1>Dashboard</h1>;
+  return <HeaderDashboard />;
 }
 
 export default Dashboard;