From 539341d5e5d410820d4ec65a8f120d1ebd1b9c84 Mon Sep 17 00:00:00 2001
From: Michael Stedman <46408716+recondesigns@users.noreply.github.com>
Date: Sun, 3 Mar 2024 20:23:53 -0600
Subject: [PATCH] migrated all FeaturedJobItem components to .tsx and updated
 snapshot

---
 components/FeaturedJobItem/FeaturedJobItem.js |  59 ----------
 .../FeaturedJobItem/FeaturedJobItem.tsx       | 104 ++++++++++++++++++
 .../__stories__/FeaturedJobItem.stories.js    |  18 ---
 .../__stories__/FeaturedJobItem.stories.tsx   |  41 +++++++
 ...bItem.test.js => FeaturedJobItem.test.tsx} |   0
 ....js.snap => FeaturedJobItem.test.tsx.snap} |   8 +-
 6 files changed, 149 insertions(+), 81 deletions(-)
 delete mode 100644 components/FeaturedJobItem/FeaturedJobItem.js
 create mode 100644 components/FeaturedJobItem/FeaturedJobItem.tsx
 delete mode 100644 components/FeaturedJobItem/__stories__/FeaturedJobItem.stories.js
 create mode 100644 components/FeaturedJobItem/__stories__/FeaturedJobItem.stories.tsx
 rename components/FeaturedJobItem/__tests__/{FeaturedJobItem.test.js => FeaturedJobItem.test.tsx} (100%)
 rename components/FeaturedJobItem/__tests__/__snapshots__/{FeaturedJobItem.test.js.snap => FeaturedJobItem.test.tsx.snap} (96%)

diff --git a/components/FeaturedJobItem/FeaturedJobItem.js b/components/FeaturedJobItem/FeaturedJobItem.js
deleted file mode 100644
index 1689bac0d..000000000
--- a/components/FeaturedJobItem/FeaturedJobItem.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { string, bool } from 'prop-types';
-import OutboundLink from 'components/OutboundLink/OutboundLink';
-import BuildingIcon from 'static/images/icons/FontAwesome/building_icon.svg';
-import CloudUploadIcon from 'static/images/icons/FontAwesome/cloud_upload_icon.svg';
-import MapMarkerIcon from 'static/images/icons/FontAwesome/map_marker_icon.svg';
-
-FeaturedJobItem.propTypes = {
-  title: string.isRequired,
-  source: string.isRequired,
-  sourceUrl: string.isRequired,
-  city: string,
-  state: string,
-  country: string,
-  description: string.isRequired,
-  remote: bool,
-};
-
-FeaturedJobItem.defaultProps = {
-  remote: false,
-  city: '',
-  state: '',
-  country: '',
-};
-
-function FeaturedJobItem({ title, source, sourceUrl, city, state, country, description, remote }) {
-  return (
-    <article className="py-4 px-0">
-      <OutboundLink href={sourceUrl} analyticsEventLabel={`Featured Job ${source}`}>
-        <h6>{title}</h6>
-      </OutboundLink>
-
-      <div className="flex flex-wrap text-lg text-themeSecondary opacity-80 mt-1 ">
-        <div className="flex items-center gap-1.5">
-          <BuildingIcon className="fill-themeSecondary opacity-80 h-3.5" />
-          <span className="ml-1">{source}</span>
-        </div>
-
-        <div className="flex items-center gap-1.5">
-          {(city || state || country) && (
-            <MapMarkerIcon className="fill-themeSecondary opacity-80 h-3.5" />
-          )}
-          {city && <span className="ml-1">{city},</span>}
-          {state && <span className="ml-1">{state},</span>}
-          {country && <span className="ml-1">{country}</span>}
-        </div>
-
-        {remote && (
-          <div className="flex items-center gap-1.5">
-            <CloudUploadIcon className="fill-themeSecondary opacity-80 h-3.5" />
-            <span className="ml-1">Remote</span>
-          </div>
-        )}
-      </div>
-      <p className="m-0">{description}</p>
-    </article>
-  );
-}
-
-export default FeaturedJobItem;
diff --git a/components/FeaturedJobItem/FeaturedJobItem.tsx b/components/FeaturedJobItem/FeaturedJobItem.tsx
new file mode 100644
index 000000000..ef91ada11
--- /dev/null
+++ b/components/FeaturedJobItem/FeaturedJobItem.tsx
@@ -0,0 +1,104 @@
+// import { string, bool } from 'prop-types';
+import OutboundLink from 'components/OutboundLink/OutboundLink';
+import BuildingIcon from 'static/images/icons/FontAwesome/building_icon.svg';
+import CloudUploadIcon from 'static/images/icons/FontAwesome/cloud_upload_icon.svg';
+import MapMarkerIcon from 'static/images/icons/FontAwesome/map_marker_icon.svg';
+
+// FeaturedJobItem.propTypes = {
+//   title: string.isRequired,
+//   source: string.isRequired,
+//   sourceUrl: string.isRequired,
+//   city: string,
+//   state: string,
+//   country: string,
+//   description: string.isRequired,
+//   remote: bool,
+// };
+
+export type FeaturedJobItemPropsType = {
+  /**
+   * Title of the feautured job item.
+   */
+  title: string;
+  /**
+   * Description of the featured job item.
+   */
+  description: string;
+  /**
+   * Source of the featured job item.
+   */
+  source: string;
+  /**
+   * Url for the source of the featured job item.
+   */
+  sourceUrl: string;
+  /**
+   * Applies an optional state for the featured job.
+   */
+  city?: string;
+  /**
+   * Applies an optional state for the featured job.
+   */
+  state?: string;
+    /**
+   * Applies an optional country for the featured job.
+   */
+  country?: string;
+  /**
+   * Applies an indicator that the featured job is remote.
+   * @default false
+   */
+  remote?: boolean;
+};
+
+// FeaturedJobItem.defaultProps = {
+//   remote: false,
+//   city: '',
+//   state: '',
+//   country: '',
+// };
+
+function FeaturedJobItem({
+  title,
+  source,
+  sourceUrl,
+  city,
+  state,
+  country,
+  description,
+  remote = false,
+}: FeaturedJobItemPropsType) {
+  return (
+    <article className="px-0 py-4">
+      <OutboundLink href={sourceUrl} analyticsEventLabel={`Featured Job ${source}`}>
+        <h6>{title}</h6>
+      </OutboundLink>
+
+      <div className="flex flex-wrap mt-1 text-lg text-themeSecondary opacity-80 ">
+        <div className="flex items-center gap-1.5">
+          <BuildingIcon className="fill-themeSecondary opacity-80 h-3.5" />
+          <span className="ml-1">{source}</span>
+        </div>
+
+        <div className="flex items-center gap-1.5">
+          {(city || state || country) && (
+            <MapMarkerIcon className="fill-themeSecondary opacity-80 h-3.5" />
+          )}
+          {city && <span className="ml-1">{city},</span>}
+          {state && <span className="ml-1">{state},</span>}
+          {country && <span className="ml-1">{country}</span>}
+        </div>
+
+        {remote && (
+          <div className="flex items-center gap-1.5">
+            <CloudUploadIcon className="fill-themeSecondary opacity-80 h-3.5" />
+            <span className="ml-1">Remote</span>
+          </div>
+        )}
+      </div>
+      <p className="m-0">{description}</p>
+    </article>
+  );
+}
+
+export default FeaturedJobItem;
diff --git a/components/FeaturedJobItem/__stories__/FeaturedJobItem.stories.js b/components/FeaturedJobItem/__stories__/FeaturedJobItem.stories.js
deleted file mode 100644
index e6c75fd41..000000000
--- a/components/FeaturedJobItem/__stories__/FeaturedJobItem.stories.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { descriptions } from 'common/constants/descriptions';
-import FeaturedJobItem from '../FeaturedJobItem';
-
-export default {
-  component: FeaturedJobItem,
-  title: 'FeaturedJobItem',
-};
-
-const Template = arguments_ => <FeaturedJobItem {...arguments_} />;
-
-// Default FeaturedJobItem supplied with only required args
-export const Default = Template.bind({});
-Default.args = {
-  title: 'Job Title',
-  source: 'Company Name',
-  sourceUrl: '#',
-  description: descriptions.long,
-};
diff --git a/components/FeaturedJobItem/__stories__/FeaturedJobItem.stories.tsx b/components/FeaturedJobItem/__stories__/FeaturedJobItem.stories.tsx
new file mode 100644
index 000000000..2fbf47f84
--- /dev/null
+++ b/components/FeaturedJobItem/__stories__/FeaturedJobItem.stories.tsx
@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { descriptions } from 'common/constants/descriptions';
+import FeaturedJobItem from '../FeaturedJobItem';
+
+type FeaturedJobItemStoryType = StoryObj<typeof FeaturedJobItem>
+
+const meta: Meta<typeof FeaturedJobItem> = {
+  title: 'FeaturedJobItem',
+  component: FeaturedJobItem
+}
+
+export default meta
+
+/**
+ * Default FeaturedJobItem supplied with only required args.
+ */
+export const Default: FeaturedJobItemStoryType = {
+  render: args => <FeaturedJobItem {...args} />,
+  args: {
+    title: 'Job Title',
+    source: 'Company Name',
+    sourceUrl: '#',
+    description: descriptions.long,
+  }
+}
+
+// export default {
+//   component: FeaturedJobItem,
+//   title: 'FeaturedJobItem',
+// };
+
+// const Template = arguments_ => <FeaturedJobItem {...arguments_} />;
+
+// // Default FeaturedJobItem supplied with only required args
+// export const Default = Template.bind({});
+// Default.args = {
+  // title: 'Job Title',
+  // source: 'Company Name',
+  // sourceUrl: '#',
+  // description: descriptions.long,
+// };
diff --git a/components/FeaturedJobItem/__tests__/FeaturedJobItem.test.js b/components/FeaturedJobItem/__tests__/FeaturedJobItem.test.tsx
similarity index 100%
rename from components/FeaturedJobItem/__tests__/FeaturedJobItem.test.js
rename to components/FeaturedJobItem/__tests__/FeaturedJobItem.test.tsx
diff --git a/components/FeaturedJobItem/__tests__/__snapshots__/FeaturedJobItem.test.js.snap b/components/FeaturedJobItem/__tests__/__snapshots__/FeaturedJobItem.test.tsx.snap
similarity index 96%
rename from components/FeaturedJobItem/__tests__/__snapshots__/FeaturedJobItem.test.js.snap
rename to components/FeaturedJobItem/__tests__/__snapshots__/FeaturedJobItem.test.tsx.snap
index 547cb27e6..478aa5643 100644
--- a/components/FeaturedJobItem/__tests__/__snapshots__/FeaturedJobItem.test.js.snap
+++ b/components/FeaturedJobItem/__tests__/__snapshots__/FeaturedJobItem.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`FeaturedJobItem > should render with many props assigned 1`] = `
 <article
-  className="py-4 px-0"
+  className="px-0 py-4"
 >
   <a
     className="inline-flex items-start"
@@ -31,7 +31,7 @@ exports[`FeaturedJobItem > should render with many props assigned 1`] = `
     />
   </a>
   <div
-    className="flex flex-wrap text-lg text-themeSecondary opacity-80 mt-1 "
+    className="flex flex-wrap mt-1 text-lg text-themeSecondary opacity-80 "
   >
     <div
       className="flex items-center gap-1.5"
@@ -110,7 +110,7 @@ exports[`FeaturedJobItem > should render with many props assigned 1`] = `
 
 exports[`FeaturedJobItem > should render with required props 1`] = `
 <article
-  className="py-4 px-0"
+  className="px-0 py-4"
 >
   <a
     className="inline-flex items-start"
@@ -139,7 +139,7 @@ exports[`FeaturedJobItem > should render with required props 1`] = `
     />
   </a>
   <div
-    className="flex flex-wrap text-lg text-themeSecondary opacity-80 mt-1 "
+    className="flex flex-wrap mt-1 text-lg text-themeSecondary opacity-80 "
   >
     <div
       className="flex items-center gap-1.5"