Display featured jobs on Jobs page, above search results

src/scenes/home/jobs/featuredJob/featuredJob.css

@@ -0,0 +1,43 @@
+/* Note: these styles are copied to match the ziprecruiter styles that are being dynamically inserted on our page (see jobs.js) */
+
+.job {
+  padding: 15px 0px;
+}
+
+.link {
+  text-decoration: none;
+  color: #1a0dab;
+  font-size: 17px;
+  float: left;
+  margin-right: 3px;
+  margin-bottom: 1px;
+}
+
+.details {
+  font-size: 13px;
+  color: #999999;
+  margin: 3px 0;
+  clear: both;
+}
+
+.detailsContainer {
+  float: left;
+  margin-right: 15px;
+}
+
+.detail {
+  margin-left: 4px;
+}
+
+.remote {
+  composes: detail;
+  font-style: italic;
+}
+
+.description {
+  clear: both;
+  font-size: 14px;
+  color: #545454;
+  line-height: 1.4;
+  word-wrap: break-word;
+}

src/scenes/home/jobs/featuredJob/featuredJob.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { faMapMarkerAlt, faBuilding, faCloudUploadAlt } from '@fortawesome/fontawesome-free-solid';
+import OutboundLink from 'shared/components/outboundLink/outboundLink';
+import styles from './featuredJob.css';
+
+const FeaturedJob = ({
+  title,
+  source,
+  sourceUrl,
+  city,
+  state,
+  country,
+  description,
+  remote
+}) => (
+  <div>
+    <div className={styles.job}>
+      <div>
+        <OutboundLink href={sourceUrl} analyticsEventLabel={`[FeaturedJob] ${sourceUrl}`}>
+          <span className={styles.link}>{title}</span>
+        </OutboundLink>
+      </div>
+      <div className={styles.details}>
+        <div className={styles.detailsContainer}>
+          <FontAwesomeIcon icon={faBuilding} size="sm" style={{ color: '#afafaf' }} />
+          <span className={styles.detail}>{source}</span>
+        </div>
+        <div className={styles.detailsContainer}>
+          <FontAwesomeIcon icon={faMapMarkerAlt} size="sm" style={{ color: '#afafaf' }} />
+          <span className={styles.detail}>{city},</span>
+          <span className={styles.detail}>{state},</span>
+          <span className={styles.detail}>{country}</span>
+        </div>
+        {remote &&
+          <div className={styles.detailsContainer}>
+            <FontAwesomeIcon icon={faCloudUploadAlt} size="sm" style={{ color: '#afafaf' }} />
+            <span className={styles.remote}>Remote</span>
+          </div>
+        }
+      </div>
+      <div className={styles.description}>
+        {description}
+      </div>
+    </div>
+  </div >
+);
+
+FeaturedJob.propTypes = {
+  title: PropTypes.string.isRequired,
+  source: PropTypes.string.isRequired,
+  sourceUrl: PropTypes.string.isRequired,
+  city: PropTypes.string.isRequired,
+  state: PropTypes.string.isRequired,
+  country: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  remote: PropTypes.bool
+};
+
+FeaturedJob.defaultProps = {
+  remote: false
+};
+
+export default FeaturedJob;

src/scenes/home/jobs/featuredJobs.json

@@ -0,0 +1,50 @@
+[
+  {
+    "title": "Software Engineer (Mock Data)",
+    "source": "Microsoft",
+    "sourceUrl": "https://www.microsoft.com",
+    "city": "Redmond",
+    "state": "Washington",
+    "country": "United States",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+    "status": "inactive",
+    "remote": false,
+    "tags": [
+      "C#",
+      "ASP.Net",
+      "DevOps"
+    ]
+  },
+  {
+    "title": "QA Engineer (Mock Data)",
+    "source": "Apple",
+    "sourceUrl": "https://www.apple.com",
+    "city": "San Francisco",
+    "state": "California",
+    "country": "United States",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ",
+    "status": "inactive",
+    "remote": true,
+    "tags": [
+      "C#",
+      "ASP.Net",
+      "DevOps"
+    ]
+  },
+  {
+    "title": "DevOps Engineeer (Mock Data)",
+    "source": "GitHub",
+    "sourceUrl": "https://www.github.com",
+    "city": "Austin",
+    "state": "Texas",
+    "country": "United States",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+    "status": "inactive",
+    "remote": false,
+    "tags": [
+      "C#",
+      "ASP.Net",
+      "DevOps"
+    ]
+  }
+]

src/scenes/home/jobs/jobs.css

@@ -0,0 +1,20 @@
+/* Note: these styles are copied to match the ziprecruiter styles that are inserted on our page */
+
+.featuredJobsContainer {
+  width: 100%;
+  float: left;
+  clear: both;
+}
+
+.featuredJobs {
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 30px 0px 10px;
+  width: 100%;
+  max-width: 768px;
+}
+
+.contact {
+    margin: 30px 0 0 0;
+    align-self: flex-start;
+    font-size: 1rem;
+}

src/scenes/home/jobs/jobs.js

@@ -1,5 +1,8 @@
 import React, { Component } from 'react';
 import Section from 'shared/components/section/section';
+import FeaturedJob from './featuredJob/featuredJob';
+import FeaturedJobsData from './featuredJobs.json';
+import styles from './jobs.css';
 
 const zipRecruiterScript = document.createElement('script');
 
@@ -29,11 +32,42 @@ class Jobs extends Component {
     };
     tryRunInit();
   }
+
   render() {
+    const featuredJobs = FeaturedJobsData
+      .filter(x => x.status === 'active')
+      .map(job => (
+        <FeaturedJob
+          key={`${Math.random()} + ${job.name} + ${job.sourceUrl}`}
+          title={job.title}
+          source={job.source}
+          sourceUrl={job.sourceUrl}
+          city={job.city}
+          state={job.state}
+          country={job.country}
+          description={job.description}
+          status={job.status}
+          remote={job.remote}
+        />
+      ));
+
     return (
-      <Section title="Open Positions" theme="white">
-        <div id="zipsearch_container" />
-      </Section>
+      <div>
+        <Section title="Featured Jobs" theme="whiteCondensed">
+          <div className={styles.featuredJobsContainer}>
+            <div className={styles.featuredJobs}>
+              {featuredJobs}
+            </div>
+          </div>
+          <p className={styles.contact}>
+            Are you hiring? <a href="mailto:[email protected]">Contact</a> us to post your job opening with Operation Code!
+          </p>
+        </Section>
+        <Section title="Search All Jobs" theme="white">
+          <div id="zipsearch_container" />
+        </Section>
+      </div>
+
     );
   }
 }

src/shared/components/section/section.css

@@ -15,6 +15,15 @@
   background-color: #FFF;
 }
 
+.condensed {
+  min-height: 0;
+}
+
+.whiteCondensed {
+  composes: white;
+  composes: condensed;
+}
+
 .content {
   display: flex;
   flex-flow: column;