4096-feat--footer

src/assets/db.icons.tsx

@@ -1,11 +1,3 @@
-type IconProps = {
-  fill: 'yellow' | 'gray' | 'purple-dark' | 'white' | 'purple';
-  width: number;
-  height?: number;
-  onClick?: () => void;
-  active?: boolean;
-};
-
 function Magnifier({ fill, width, height, onClick }: IconProps) {
   return (
     <svg
@@ -146,6 +138,7 @@ function Telephone({ fill, width, height }: IconProps) {
       height={height}
       fill="none"
       viewBox="0 0 17 16"
+      data-cy="phone-icon"
     >
       <g clipPath="url(#clip0_3050_1118)">
         <path
@@ -174,6 +167,7 @@ function Message({ fill, width, height }: IconProps) {
       height={height}
       fill="none"
       viewBox="0 0 17 16"
+      data-cy="email-icon"
     >
       <g clipPath="url(#clip0_3050_1102)">
         <path

src/components/Footer/Footer.cy.tsx

@@ -0,0 +1,79 @@
+import Footer from './Footer';
+import GlobalStyle from '@styles/global';
+
+const Sut = () => (
+  <>
+    <GlobalStyle />
+    <Footer />
+  </>
+);
+
+describe('<Footer />', () => {
+  beforeEach(() => {
+    cy.mount(<Sut />);
+  });
+
+  it('should footer has background-color: var(--purple-dark)', () => {
+    cy.getByCy('footer').should(
+      'have.css',
+      'background-color',
+      'rgb(26, 16, 51)',
+    );
+  });
+
+  it('should footer has padding: padding: 4.375rem 8.4375rem 6.875rem 8.4375rem', () => {
+    cy.getByCy('footer').should('have.css', 'padding', '70px 135px 110px');
+  });
+
+  it('should footer has display: flex', () => {
+    cy.getByCy('footer').should('have.css', 'display', 'flex');
+  });
+
+  it('should footer has justify-content: space-between', () => {
+    cy.getByCy('footer').should('have.css', 'justify-content', 'space-between');
+  });
+
+  it('should footer has align-items: flex-start', () => {
+    cy.getByCy('footer').should('have.css', 'align-items', 'flex-start');
+  });
+
+  it('should footer has width: 100vw', () => {
+    cy.getByCy('footer').should('have.css', 'width', '500px');
+  });
+
+  it('should contact info has display: flex', () => {
+    cy.getByCy('contact-info').should('have.css', 'display', 'flex');
+  });
+
+  it('should contact info has flex-direction: column', () => {
+    cy.getByCy('contact-info').should('have.css', 'flex-direction', 'column');
+  });
+
+  it('should contact info has gap: 1rem', () => {
+    cy.getByCy('contact-info').should('have.css', 'gap', '16px');
+  });
+
+  it('should contact info item has display: flex', () => {
+    cy.getByClassLike('contact-info-item').should(
+      'have.css',
+      'display',
+      'flex',
+    );
+  });
+
+  it('should contact info item has gap: 0.5rem', () => {
+    cy.getByClassLike('contact-info-item').should('have.css', 'gap', '8px');
+  });
+
+  it('should line has border: 1px solid var(--yellow)', () => {
+    cy.getByCy('line').should(
+      'have.css',
+      'border',
+      '1px solid rgb(251, 176, 77)',
+    );
+  });
+
+  it('should line has margin: 0 8.4375rem', () => {
+    cy.getByCy('line').should('have.css', 'margin', '0px 135px');
+  });
+});

src/components/Footer/Footer.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/react';
+
+import Footer from './Footer';
+
+describe('<Footer />', () => {
+  beforeEach(() => {
+    render(<Footer />);
+  });
+
+  it('should render the footer', () => {
+    screen.getByTestId('footer');
+  });
+
+  it('should render the line', () => {
+    screen.getByTestId('line');
+  });
+
+  it('should render the logo', () => {
+    screen.getByTestId('logo');
+  });
+
+  it('should render contact info', () => {
+    screen.getByTestId('contact-info');
+  });
+
+  it('should render text "Contato e Endereço"', () => {
+    screen.getByText('Contato e Endereço');
+  });
+
+  it('should render text "4003-5442"', () => {
+    screen.getByText('4003-5442');
+  });
+
+  it('should render adress info', () => {
+    screen.getByTestId('contact-info-adress');
+  });
+
+  it('should render the phone icon', () => {
+    screen.getByTestId('phone-icon');
+  });
+
+  it('should render the email icon', () => {
+    screen.getByTestId('email-icon');
+  });
+
+  it('should render the location icon', () => {
+    screen.getByTestId('location-icon');
+  });
+
+  it('should render auth button', () => {
+    screen.getByTestId('auth-buttons');
+  });
+});

src/components/Footer/Footer.tsx

@@ -0,0 +1,82 @@
+import Text from '@components/Text';
+import Button from '@components/Button';
+import { Telephone, Location, Message } from '@assets/db.icons';
+
+import * as S from './styles';
+
+const iconProps: IconProps = {
+  width: 16,
+  height: 16,
+  fill: 'purple-dark',
+};
+
+const adressText = (
+  <span>
+    Av. do Contorno, 2905 Santa Efigênia, <br />
+    Belo Horizonte - MG, 30110-080
+  </span>
+);
+
+const Footer = () => {
+  const dummy = () => {
+    console.log('first');
+  };
+
+  return (
+    <>
+      <S.Line data-cy="line" />
+      <S.Footer data-cy="footer">
+        <div className="text-container" data-cy="logo">
+          <Text label="meta" fontColor="white" fontSize="large" />
+          <Text
+            label="vagas"
+            fontColor="yellow"
+            fontStyle="italic"
+            fontSize="large"
+            fontWeight="600"
+          />
+        </div>
+        <S.ContactInfo data-cy="contact-info">
+          <Text label="Contato e Endereço" fontColor="yellow" />
+          <S.ContactInfoItem
+            data-cy="contact-info-phone"
+            className="contact-info-item"
+          >
+            <S.Circle>
+              <Telephone {...iconProps} />
+            </S.Circle>
+            <Text label="4003-5442" fontColor="white" />
+          </S.ContactInfoItem>
+          <S.ContactInfoItem data-cy="contact-info-email">
+            <S.Circle>
+              <Message {...iconProps} />
+            </S.Circle>
+            <Text label="[email protected]" fontColor="white" />
+          </S.ContactInfoItem>
+          <S.ContactInfoItem data-cy="contact-info-adress">
+            <S.Circle>
+              <Location {...iconProps} />
+            </S.Circle>
+            <Text label={adressText} fontColor="white" data-cy="text-adress" />
+          </S.ContactInfoItem>
+        </S.ContactInfo>
+        <div className="button-container" data-cy="auth-buttons">
+          <Button
+            label="Entrar"
+            onClick={dummy}
+            backgroundColor="purple-dark"
+            fontColor="white"
+            borderColor="white"
+          />
+          <Button
+            label="Cadastrar-se gratuitamente"
+            onClick={dummy}
+            borderColor="yellow"
+          />
+        </div>
+      </S.Footer>
+    </>
+  );
+};
+
+export default Footer;

src/components/Footer/index.ts

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

src/components/Footer/styles.ts

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+
+export const Footer = styled.footer`
+  background-color: var(--purple-dark);
+  padding: 4.375rem 8.4375rem 6.875rem 8.4375rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100vw;
+
+  .text {
+    justify-content: flex-start;
+  }
+
+  .text-container {
+    display: flex;
+  }
+
+  .button-container {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+  }
+`;
+
+export const ContactInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+export const ContactInfoItem = styled.div`
+  display: flex;
+  gap: 0.5rem;
+`;
+
+export const Circle = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  background-color: var(--yellow);
+`;
+
+export const Line = styled.hr`
+  border: 1px solid var(--yellow);
+  margin: 0 8.4375rem;
+`;

src/types/IconProps.d.ts

@@ -0,0 +1,7 @@
+type IconProps = {
+  fill: 'yellow' | 'gray' | 'purple-dark' | 'white' | 'purple';
+  width: number;
+  height?: number;
+  onClick?: () => void;
+  active?: boolean;
+};