Solutions

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/react-fontawesome": "^0.1.9",
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",

src/exercise1/Exercise1.js

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

src/exercise1/Exercise1.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 import Exercise1 from './Exercise1';
+import CoffeeCard from './CoffeeCard';
 
 describe('Exercise1', () => {
     const wrapper = shallow(<Exercise1 />);
@@ -17,4 +18,11 @@ describe('Exercise1', () => {
 
         expect(drinkNames).toEqual(['americano', 'espresso', 'latte', 'mocha'])
     });
+});
+
+describe('CoffeeCard', () => {
+    it('should render', () => {
+        const element = shallow(<CoffeeCard drinkName="mocha" price={3.00} />);
+        expect(element).toMatchSnapshot();
+    });
 });

src/exercise1/__snapshots__/Exercise1.test.js.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CoffeeCard should render 1`] = `
+<div
+  className="CoffeeCard"
+>
+  <img
+    alt="mocha"
+    className="CoffeeCard__image"
+    src="https://upload.wikimedia.org/wikipedia/commons/7/79/Mocha.jpg"
+  />
+  <h3
+    className="CoffeeCard__title"
+  >
+    Mocha
+  </h3>
+  <p
+    className="CoffeeCard__description"
+  >
+    Cost: $
+    3.00
+  </p>
+</div>
+`;

src/exercise2/Exercise2.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Orchid from './Orchid';
 
 export default class Exercise2 extends React.Component {
     render() {
@@ -13,6 +14,7 @@ export default class Exercise2 extends React.Component {
                     <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.js</code> and provide it a <code>borderColor</code></li>
                 </ol>
+                <Orchid borderColor="red" />
             </div>
         )
     }

src/exercise2/Orchid.css

@@ -0,0 +1,3 @@
+.Orchid {
+    width: 100%;
+}

src/exercise2/Orchid.js

@@ -1,3 +1,41 @@
-// Here's a URL to get you started
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Orchid.css';
 
+// Here's a URL to get you started
 const orchidImageUrl = 'https://upload.wikimedia.org/wikipedia/commons/d/df/Orchid_high_resolution.jpg';
+
+// Class component
+export default class Orchid extends React.Component {
+    static propTypes = {
+        borderColor: PropTypes.string
+    }
+
+    render() {
+        const { borderColor } = this.props;
+        return (
+            <img
+                className="Orchid"
+                src={orchidImageUrl}
+                style={{border: `3px solid ${borderColor}`}}
+                alt="Orchid" 
+            />
+        );
+    }
+}
+
+// // Functional component
+// export default function Orchid({ borderColor }) {
+//     return (
+//         <img
+//             className="Orchid"
+//             src={orchidImageUrl}
+//             style={{border: `3px solid ${borderColor}`}}
+//             alt="Orchid" 
+//         />
+//     );
+// }
+
+// Orchid.propTypes = {
+//     borderColor: PropTypes.string
+// };

src/exercise3/Exercise3.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import InfoCard from './InfoCard';
 
 export default class Exercise3 extends React.Component {
     render() {
@@ -26,6 +27,9 @@ export default class Exercise3 extends React.Component {
                     <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.js</code></li>
                 </ol>
+                <InfoCard>
+                    Did you know that React has hooks?
+                </InfoCard>
             </div>
         )
     }

src/exercise3/InfoCard.css

@@ -0,0 +1,9 @@
+.InfoCard {
+    border: 1px solid lightgray;
+    padding: 10px;
+}
+
+.InfoCard__icon {
+    color: rgb(17, 17, 184);
+    margin-right: 5px;
+}

src/exercise3/InfoCard.js

@@ -1 +1,27 @@
 // You're on your own
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
+import './InfoCard.css';
+
+// Class component
+export default class InfoCard extends React.Component {
+    render() {
+        return (
+            <div className="InfoCard">
+                <FontAwesomeIcon className="InfoCard__icon" icon={faInfoCircle} />
+                <span>{this.props.children}</span>
+            </div>
+        )
+    }
+}
+
+// // Functional component
+// export default function InfoCard({ children }) {
+//     return (
+//         <div className="InfoCard">
+//             <FontAwesomeIcon className="InfoCard__icon" icon={faInfoCircle} />
+//             <span>{children}</span>
+//         </div>
+//     )
+// }

src/exercise5/Dropdown.js

@@ -1,20 +1,42 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import './Dropdown.css';
 
+// Class component
 export default class Dropdown extends React.Component {
     static propTypes = {
         header: PropTypes.any.isRequired
     }
 
+    state = { isOpen: false };
+
+    toggleDropdown = () => this.setState(prevState => ({ isOpen: !prevState.isOpen }));
+
     render() {
         const { header, children } = this.props;
 
         return (
             <div className="Dropdown">
-                <div className="Dropdown__header">{header}</div>
-                <div className="Dropdown__content">{children}</div>
+                <div className="Dropdown__header" onClick={this.toggleDropdown}>{header}</div>
+                {this.state.isOpen && <div className="Dropdown__content">{children}</div>}
             </div>
         )
     }
-}
+}
+
+// Functional component w/hooks
+// export default function Dropdown({ header, children }) {
+//     const [isOpen, toggleDropdown] = useState(false);
+//     const onClick = () => toggleDropdown(!isOpen);
+
+//     return (
+//         <div className="Dropdown">
+//             <div className="Dropdown__header" onClick={onClick}>{header}</div>
+//             {isOpen && <div className="Dropdown__content">{children}</div>}
+//         </div>
+//     );
+// }
+
+// Dropdown.propTypes = {
+//     header: PropTypes.any.isRequired
+// };

src/exercise5/Exercise5.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Dropdown from './Dropdown';
 
 export default class Exercise5 extends React.Component {
     render() {
@@ -14,6 +15,9 @@ export default class Exercise5 extends React.Component {
                     <li>Add a click handler called <code>toggleDropdown</code> that makes the content hide/show on click.</li>
                     <li>Ensure that the corresponding tests pass.</li>
                 </ol>
+                <Dropdown header="Title">
+                    Description
+                </Dropdown>
             </div>
         )
     }