Merge pull request #25 from cesarhenrq/4468-sub-header

feat: add SubHeader component

src/components/SubHeader/Sub.Header.test.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable testing-library/no-node-access */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { render, screen } from '@testing-library/react';
+
+import SubHeader from './Sub.header';
+
+describe('SubHeader component', () => {
+  beforeEach(() => {
+    render(<SubHeader />);
+  });
+  it('should text be defined', () => {
+    const headerTextElement = screen.getByText(
+      'MAIS DE 12.000 VAGAS DE TECNOLOGIA, REUNIDAS EM UM SÓ LUGAR',
+    );
+    const subHeaderTextElement = screen.getByText('Encontre a sua vaga de');
+    const subHeaderTextElementReact = screen.getByText('react');
+
+    (expect as any)(headerTextElement).toBeDefined();
+    (expect as any)(subHeaderTextElement).toBeDefined();
+    (expect as any)(subHeaderTextElementReact).toBeDefined();
+  });
+
+  it('should image be defined', () => {
+    const imgElement = document.querySelector('img') as HTMLImageElement;
+    (expect as any)(imgElement).toBeDefined();
+    (expect as any)(imgElement.alt).toContain(
+      'homem sorrindo, com camisa da arnia e segurando um notebook',
+    );
+  });
+});

src/components/SubHeader/Sub.header.tsx

@@ -0,0 +1,37 @@
+import Text from '@components/Text';
+import HeaderPerson from '../../assets/HeaderPerson.png';
+
+import * as S from './styles';
+
+const SubHeader = () => {
+  return (
+    <S.SubHeader>
+      <div className="text-container">
+        <Text
+          label="MAIS DE 12.000 VAGAS DE TECNOLOGIA, REUNIDAS EM UM SÓ LUGAR"
+          fontColor="white"
+          fontSize="medium"
+        />
+        <div className="text-top">
+          <Text
+            label={
+              <p>
+                Encontre a sua vaga de <b>react</b>
+              </p>
+            }
+            fontColor="yellow"
+            fontSize="xlarge"
+            fontWeight="600"
+          />
+        </div>
+      </div>
+      <img
+        src={HeaderPerson}
+        alt="homem sorrindo, com camisa da arnia e segurando um notebook"
+        className="header-person"
+      />
+    </S.SubHeader>
+  );
+};
+
+export default SubHeader;

src/components/SubHeader/index.ts

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

src/components/SubHeader/styles.ts

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+export const SubHeader = styled.header`
+  background-color: var(--purple-dark);
+  width: 100vw;
+  display: flex;
+  justify-content: space-between;
+  padding: 1.25rem 8.438rem;
+  align-items: center;
+
+  .text-container {
+    width: 25rem;
+  }
+
+  .text-top {
+    display: flex;
+    width: 25rem;
+  }
+
+  b {
+    color: var(--white);
+  }
+
+  @media (max-width: 78.75rem) {
+    flex-direction: column;
+
+    .text-container {
+      width: 45rem;
+    }
+
+    .text-top {
+      width: 45rem;
+    }
+  }
+
+  @media (max-width: 48.75rem) {
+    .header-person {
+      width: 38.75rem;
+    }
+    .text-container {
+      width: 30rem;
+      text-align: center;
+    }
+    .text-top {
+      width: 30rem;
+      text-align: center;
+    }
+  }
+`;

src/types/TextProps.d.ts

@@ -2,6 +2,6 @@ type TextProps = {
   fontSize?: FontSize;
   fontWeight?: FontWeight;
   fontColor?: FontColor;
-  label: string;
+  label: string | React.ReactElement;
   fontStyle?: FontStyle;
 };