feat: dynamic job list (#224)

Author: jawinn

blocks/job-list/job-list.css

@@ -43,6 +43,14 @@
 
 .job-list__listings {
   display: block;
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+
+  & > li {
+    margin: 0;
+    padding: 0;
+  }
 
   & .job-listing {
     border-top: 1px solid var(--color-border);

blocks/job-list/job-list.js

@@ -1,61 +1,127 @@
-export default function decorate(block) {
-  const jobList = document.createElement('div');
-  jobList.classList.add('job-list', 'grid-container');
+import { dataStore } from "../../scripts/helpers/index.js";
 
-  const [headingRow, ...jobRows] = [...block.children];
+const DEFAULT_CONTENT = {
+  noJobs: "There are no jobs currently available."
+};
 
-  const heading = headingRow.children?.[0]?.children?.[0];
-  if (heading) {
-    heading.classList.add('job-list__heading', 'util-heading-s', 'grid-item', 'grid-item--33');
-    heading.textContent = headingRow.textContent;
-    jobList.append(heading);
-  }
+const HEADING_LEVEL = "h3";
 
-  const jobListings = document.createElement('div');
-  jobListings.className = 'job-list__listings grid-item grid-item--66';
+/**
+ * Display a list of jobs, under heading(s) for each discipline.
+ * 
+ * Jobs are dynamically listed using query-index data pulled from the careers directory.
+ * The list of disciplines is entered in the content to allow for manual ordering.
+ *
+ * @param {Element} block
+ */
+export default function decorate(block) {
+  /**
+   * Discipline headings from each row of content.
+   * @type {string[]}
+   */
+  const headings = [...block.children].map((el) => el.textContent.trim()).filter(Boolean);
 
-  jobRows.forEach(row => {
-    const [title, subheading, detail, jobId] = row.children;
+  // Create container.
+  const blockContainer = document.createElement('div');
+  blockContainer.classList.add('job-list-block');
+  blockContainer.textContent = "";
 
-    const jobListing = document.createElement('a');
-    jobListing.className = 'job-listing';
+  // Replace wrapper div parent with new block.
+  block?.parentElement?.classList?.length === 0 ? block.parentElement.replaceWith(blockContainer) : block.replaceWith(blockContainer);
 
-    const contentWrapper = document.createElement('span');
-    contentWrapper.className = 'job-listing__content';
+  // Fetch the dynamic job data async, create markup, and append to the container.
+  (async () => {
+    // Get jobs data from endpoint.
+    const jobsData = await dataStore.getData(dataStore.commonEndpoints.careers);
 
-    if (title) {
-      const titleEl = document.createElement('span');
-      titleEl.className = 'job-listing__title';
-      titleEl.textContent = title.textContent;
-      contentWrapper.append(titleEl);
-    }
+    // Filter only the ones with disciplines that are displayed.
+    const allJobsForDisplay = jobsData?.data?.length
+      ? jobsData.data.filter(job => job?.jobDiscipline && headings.includes(job.jobDiscipline))
+      : [];
 
-    if (subheading) {
-      const subheadingEl = document.createElement('span');
-      subheadingEl.className = 'job-listing__subheading';
-      subheadingEl.textContent = subheading.textContent;
-      contentWrapper.append(subheadingEl);
+    // If no jobs, display null state message.
+    if (!allJobsForDisplay.length) {
+      blockContainer.classList.remove('grid-container');
+      const message = document.createElement('p');
+      message.textContent = DEFAULT_CONTENT.noJobs;
+      blockContainer.append(message);
+      return;
     }
 
-    if (detail) {
-      const detailEl = document.createElement('span');
-      detailEl.className = 'job-listing__detail';
-      detailEl.textContent = detail.textContent;
-      contentWrapper.append(detailEl);
-    }
+    // Newly created elements that will be appended to blockContainer when finished.
+    const allJobMarkup = document.createDocumentFragment();
 
-    jobListing.append(contentWrapper);
+    // Loop through each discipline.
+    headings.forEach(heading => {
+      /**
+       * Jobs with this discipline in metadata
+       * @type {object[]}
+       */
+      const jobs = jobsData?.data?.filter(job => job?.jobDiscipline == heading) ?? [];
+      if (!jobs.length) { return; }
 
-    if (jobId) {
-      jobListing.href = `https://adobe.design/jobs/job-posts/${jobId.textContent.trim()}`;
-    }
+      // Container with heading and job list.
+      const jobGrouping = document.createElement('div');
+      jobGrouping.classList.add('job-list','grid-container');
 
-    jobListings.append(jobListing);
-  });
+      // Heading element.
+      const headingElement = document.createElement(HEADING_LEVEL);
+      headingElement.classList.add('job-list__heading', 'util-heading-s', 'grid-item', 'grid-item--33');
+      headingElement.textContent = heading;
 
-  jobList.append(jobListings);
-  block.textContent = '';
+      // Job list under this heading.
+      const jobsListingsWrap = document.createElement('ul');
+      jobsListingsWrap.classList.add('job-list__listings', 'grid-item', 'grid-item--66');
 
-  // Replace wrapper div parent with new block.
-  block?.parentElement?.classList?.length === 0 ? block.parentElement.replaceWith(jobList) : block.replaceWith(jobList);;
+      // Display each job (using "job-listing" component styles).
+      jobs.forEach(row => {
+        const {jobTitle, department, location, path} = row;
+
+        const jobListItem = document.createElement('li');
+        const jobItem = document.createElement('a');
+        jobItem.classList.add('job-listing');
+        jobListItem.append(jobItem);
+
+        // Link to job page.
+        if (path) {
+          jobItem.href = path.trim();
+        }
+
+        const contentWrapper = document.createElement('span');
+        contentWrapper.classList.add('job-listing__content');
+        jobItem.append(contentWrapper);
+
+        if (jobTitle) {
+          const titleEl = document.createElement('span');
+          titleEl.classList.add('job-listing__title');
+          titleEl.textContent = jobTitle.trim();
+          contentWrapper.append(titleEl);
+        }
+
+        if (department) {
+          const subheadingEl = document.createElement('span');
+          subheadingEl.classList.add('job-listing__subheading');
+          subheadingEl.textContent = department.trim();
+          contentWrapper.append(subheadingEl);
+        }
+
+        if (location) {
+          const detailEl = document.createElement('span');
+          detailEl.classList.add('job-listing__detail');
+          detailEl.textContent = location.trim();
+          contentWrapper.append(detailEl);
+        }
+
+        // Append job.
+        jobsListingsWrap.append(jobListItem);
+      });
+
+      // Append grouping with heading and its jobs.
+      jobGrouping.append(headingElement, jobsListingsWrap);
+      allJobMarkup.append(jobGrouping);
+    });
+
+    // Append all new elements to the main block container.
+    blockContainer.append(allJobMarkup);
+  })();
 }

blocks/job-listing/job-listing.js

@@ -1,19 +1,30 @@
+/**
+ * Display a single job listing item.
+ * @param {Element} block 
+ */
 export default function decorate(block) {
   const jobListing = document.createElement('a');
   jobListing.className = 'job-listing';
 
   const row = block.firstElementChild;
   if (row) {
-    const [title, subheading, detail, jobId] = row.children;
+    // Content settings, from each column.
+    const [title, subheading, detail] = row.children;
 
     const contentWrapper = document.createElement('span');
     contentWrapper.className = 'job-listing__content';
-    
+
     if (title) {
       const titleEl = document.createElement('span');
       titleEl.className = 'job-listing__title';
       titleEl.textContent = title.textContent;
       contentWrapper.append(titleEl);
+
+      // Job link from linked title text.
+      const href = title.querySelector('a')?.href;
+      if (href) {
+        jobListing.href = href;
+      }
     }
 
     if (subheading) {
@@ -31,10 +42,6 @@ export default function decorate(block) {
     }
 
     jobListing.append(contentWrapper);
-
-    if (jobId) {
-      jobListing.href = `https://adobe.design/jobs/job-posts/${jobId.textContent.trim()}`;
-    }
   }
 
   block.textContent = '';

blocks/job-listing/job-listing.test.js

@@ -28,8 +28,9 @@ describe('Job-Listing Block', () => {
       expect(hasDetail).toExist();
     });
 
-    it('should link to the correct job posting URL', async () => {
-      const jobListing = await page.$('.job-list .job-listing[href^="https://adobe.design/jobs/job-posts/"]');
+    it('should be linked.', async () => {
+      // Ensures the HREF attribute exists and isn't set to an empty string.
+      const jobListing = await page.$('.job-list .job-listing[href]:not([href=""])');
       expect(jobListing).toExist();
     });
   });