Merge pull request #6 from Mildred14/ms-create-technology-stack-and-card

Technology stack and Content cards

.github/workflows/testing_pull_request.yml

@@ -0,0 +1,14 @@
+name: 'Testing Pull Request'
+on: ['pull_request']
+jobs:
+  testing_pull_request:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Node
+        uses: actions/[email protected]
+      - name: Install packages
+        run: npm install
+      - name: Run tests
+        run: npm test

src/components/Card/Card.js

@@ -12,7 +12,7 @@ export const Card = ({name, imgIcon, id, selected, status}) => {
   }
 
   return (
-      <a className={`more-info card card-${id}`} onClick={handleClick} title="more-info" key={id}>
+    <a className={`more-info card card-${id}`} onClick={handleClick} title="more-info" key={id}>
       <div className="img-wrapper">
         <img src={plusIcon} width="30"/>
       </div>
@@ -24,6 +24,6 @@ export const Card = ({name, imgIcon, id, selected, status}) => {
           {name}
         </p>
       </div>
-      </a>
+    </a>
   )
 }

src/components/Card/Card.scss

@@ -9,6 +9,7 @@
   text-align: center;
   cursor: pointer;
   transition: transform .2s;
+  display: block;
 
   & > .more-info {
     width: 100%;

src/components/Contact/Contact.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import twitter from '../../assets/images/twitter.png'
+import instagram from '../../assets/images/instagram.svg'
+import emailIcon from '../../assets/images/email-icon.svg'
+import './Contact.scss'
+
+export const Contact = () => {
+  return (
+    <div className='contact'>
+      <div className='contact-info'>
+        <img src={emailIcon}/>
+        <div>
+          <p className='email'>Email</p>
+          <a href="mailto:[email protected]">[email protected]</a>
+        </div>
+      </div>
+      <div className='social-media'>
+        <a href='https://www.instagram.com/soymildredsilva' target="_blank" rel="noopener" className='instagram'>
+          <img src={instagram} />
+        </a>
+        <a href='https://x.com/soymildredsilva' target="_blank" rel="noopener">
+          <img src={twitter} />
+        </a>
+      </div>
+    </div>
+  )
+}

src/components/Contact/Contact.scss

@@ -0,0 +1,22 @@
+.contact {
+  & > .contact-info {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    & > img {
+      margin-right: 10px;
+    }
+    & > div > .email {
+      margin: 0 0 5px 0;
+    }
+  }
+  & > .social-media {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+
+    & > .instagram {
+      margin-right: 10px;
+    }
+  }
+}

src/components/Contact/__test__/Contanct.test.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { Contact } from '../Contact'
+
+test('display Contact', () => {
+  render(<Contact />)
+
+  expect(screen.getByText('Email'))
+  expect(screen.getByText('[email protected]'))
+  expect(screen.getAllByRole('link')[1]).toHaveAttribute('href', 'https://www.instagram.com/soymildredsilva')
+})

src/components/Modal/Modal.js

@@ -1,6 +1,8 @@
 import React from "react"
 import plusIcon from '../../assets/images/plus.svg'
 import { WorkExperience } from "../WorkExperience/WorkExperience"
+import { TechnologyStack } from "../TechnologyStack/TechnologyStack"
+import { Contact } from "../Contact/Contact"
 import "./Modal.scss"
 
 export const Modal = ({name, id, selected, status}) => {
@@ -13,8 +15,8 @@ export const Modal = ({name, id, selected, status}) => {
   const modalContent = () => {
     switch(id) {
       case 0: return(<WorkExperience />);
-      case 1: return(<h1>1</h1>);
-      case 2: return(<h1>2</h1>);
+      case 1: return(<TechnologyStack />);
+      case 2: return(<Contact />);
       case 3: return(<h1>3</h1>);
       case 4: return(<h1>4</h1>);
       case 5: return(<h1>5</h1>);

src/components/Modal/Modal.scss

@@ -9,22 +9,23 @@
   width: calc(100% - 50px);
   max-width: 950px;
   height: 80%;
+  max-height: min-content;
   position: fixed;
   margin: auto;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 9;
-  padding: 30px 40px;
+  padding: 30px 30px;
   box-sizing: border-box;
   border-radius: 30px;
   display: block;
   overflow-y: scroll;
   animation: open-modal 500ms linear;
   animation-fill-mode: forwards;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
-  
+
   & > .modal-header {
     display: flex;
     justify-content: space-between;