migrated all FeaturedJobItem components to .tsx and updated snapshot

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;

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,
+// };

components/FeaturedJobItem/__tests__/__snapshots__/FeaturedJobItem.test.js.snap → 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"