solutions

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",

src/exercise1/Exercise1.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import CoffeeCard from './CoffeeCard';
 
 export default function Exercise1() {
   return (
@@ -11,6 +12,10 @@ export default function Exercise1() {
         <li>Render this component four times in <code>Exercise1.jsx</code> (one for each coffee drink).</li>
         <li>Pass in the correct props.</li>
       </ol>
+      <CoffeeCard price={5} drinkName="americano" />
+      <CoffeeCard price={5} drinkName="espresso" />
+      <CoffeeCard price={5} drinkName="latte" />
+      <CoffeeCard price={5} drinkName="mocha" />
     </div>
   );
 }

src/exercise1/Exercise1.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import Exercise1 from './Exercise1';
+import CoffeeCard from './CoffeeCard';
 
 describe('Exercise1', () => {
   it('should render four CoffeeCard components', async () => {
@@ -23,4 +24,11 @@ describe('Exercise1', () => {
     const mocha = await screen.findByText('Mocha');
     expect(mocha).toBeDefined();
   });
+
+  it('should display a price to 2 decimal places', async () => {
+    render(<CoffeeCard price={52.238} drinkName="americano" />);
+
+    const price = await screen.findByText('Cost: $52.24');
+    expect(price).toBeDefined();
+  });
 });

src/exercise2/Exercise2.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Orchid from './Orchid';
 
 export default function Exercise2() {
   return (
@@ -12,6 +13,7 @@ export default function Exercise2() {
         <li>Add the prop <code>borderColor</code> to the <code>Orchid</code> component and give the image a border with the color provided.</li>
         <li>Import and render the <code>Orchid</code> component in <code>Exercise2.jsx</code> and provide it a <code>borderColor</code></li>
       </ol>
+      <Orchid borderColor="red" />
     </div>
   );
 }

src/exercise2/Orchid.jsx

@@ -1,2 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
 // Here's a URL to get you started
 const orchidImageUrl = 'https://upload.wikimedia.org/wikipedia/commons/d/df/Orchid_high_resolution.jpg';
+
+export default function Orchid({ borderColor }) {
+    return (
+        <img
+            src={orchidImageUrl}
+            alt="orchid"
+            style={{ borderColor, borderWidth: '5px', borderStyle: 'solid', width: '200px' }}
+        />
+    );
+}
+
+Orchid.propTypes = {
+    borderColor: PropTypes.string.isRequired
+};

src/exercise3/Exercise3.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import InfoCard from './InfoCard';
 
 export default function Exercise3() {
   return (
@@ -24,6 +25,9 @@ export default function Exercise3() {
         <li>When passing <code>children</code> into the component, the component should display the info icon next to the children.</li>
         <li>Import and render the <code>InfoCard</code> in <code>Exercise3.jsx</code></li>
       </ol>
+      <InfoCard>
+        <span>Some custom content</span>
+      </InfoCard>
     </div>
   );
 }

src/exercise3/InfoCard.jsx

@@ -1 +1,16 @@
 // You're on your own
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
+
+const InfoIcon = () => <FontAwesomeIcon icon={faInfoCircle} />;
+
+export default function InfoCard({ children }) {
+    return (
+        <div>
+            <InfoIcon />
+            {' '}
+            {children}
+        </div>
+    )
+}

src/exercise5/Dropdown.jsx

@@ -1,16 +1,18 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import './Dropdown.css';
 
 export default function Dropdown({ header, children }) {
+  const [isOpen, toggleDropdown] = useState(false);
+
   return (
     <div className="Dropdown">
-      <div className="Dropdown__header">{header}</div>
-      <div className="Dropdown__content">{children}</div>
+      <div className="Dropdown__header" onClick={() => toggleDropdown(!isOpen)}>{header}</div>
+      {isOpen && <div className="Dropdown__content">{children}</div>}
     </div>
   );
 }
 
 Dropdown.propTypes = {
-    header: PropTypes.any.isRequired
+  header: PropTypes.any.isRequired
 };

src/exercise5/Dropdown.test.jsx

@@ -0,0 +1,22 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import Dropdown from "./Dropdown";
+
+describe('Dropdown', () => {
+    const Header = () => <div>Test Header</div>;
+
+    it('should toggle the content back and forth', () => {
+        render(<Dropdown header={<Header />}>Content</Dropdown>);
+
+        const headerText = screen.getByText('Test Header');
+        expect(headerText).toBeDefined();
+
+        // This allows us to query for text, but not throw an error
+        const content = screen.queryByText('Content');
+        expect(content).toBeNull();
+
+        fireEvent.click(screen.getByText('Test Header'));
+
+        const newContent = screen.queryByText('Content');
+        expect(newContent).toBeDefined();
+    });
+});

src/exercise5/Exercise5.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Dropdown from './Dropdown';
 
 export default function Exercise5() {
   return (
@@ -13,6 +14,9 @@ export default function Exercise5() {
         <li>Add a click handler called <code>toggleDropdown</code> that makes the content hide/show on click.</li>
         <li>If you have time, try writing a test to verify that the dropdown works as expected.</li>
       </ol>
+      <Dropdown header={<div>Test Header</div>}>
+        Test Content
+      </Dropdown>
     </div>
   );
 }