merging in main

OperationCode · Mar 5, 2024 · b39d3d3 · b39d3d3
2 parents a4298b8 + 5ea7f3e
commit b39d3d3
Show file tree

Hide file tree

Showing 14 changed files with 151 additions and 105 deletions.
diff --git a/components/Drawer/Drawer.js b/components/Drawer/Drawer.js
diff --git a/components/Drawer/Drawer.tsx b/components/Drawer/Drawer.tsx
@@ -0,0 +1,36 @@
+import classNames from 'classnames';
+
+export type DrawerPropsType = {
+  /**
+   * Content to be rendered in the Drawer.
+   */
+  children: React.ReactNode;
+  /**
+   * Applies class names to the container element.
+   */
+  className?: string;
+  /**
+   * Sets if the content is visible.
+   * @default false
+   */
+  isVisible?: boolean;
+};
+
+function Drawer({ children, className, isVisible = false }: DrawerPropsType) {
+  return (
+    <div
+      className={classNames(
+        className,
+        'hidden lg:block transition-all ease-in-out duration-1000 fixed top-0 bottom-0  overflow-hidden width-full z-[2]',
+        {
+          '-left-0': isVisible,
+          '-left-full': !isVisible,
+        },
+      )}
+    >
+      <div className="w-full h-full">{children}</div>
+    </div>
+  );
+}
+
+export default Drawer;
diff --git a/components/Drawer/__stories__/Drawer.stories.js b/components/Drawer/__stories__/Drawer.stories.js
diff --git a/components/Drawer/__stories__/Drawer.stories.tsx b/components/Drawer/__stories__/Drawer.stories.tsx
@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Drawer from '../Drawer';
+
+type DrawerStorytype = StoryObj<typeof Drawer>;
+
+const meta: Meta<typeof Drawer> = {
+  title: 'Drawer',
+  component: Drawer,
+  parameters: {
+    viewport: {
+      defaultViewport: 'tablet',
+    },
+  },
+};
+
+export default meta;
+
+/**
+ * Default Drawer supplied with only required args.
+ */
+export const Default: DrawerStorytype = {
+  render: args => <Drawer {...args} />,
+  args: {
+    children: 'Drawer content will only display on display size of Tablet or smaller',
+    isVisible: true,
+  },
+};
diff --git a/components/Drawer/__tests__/Drawer.test.js → components/Drawer/__tests__/Drawer.test.tsx b/components/Drawer/__tests__/Drawer.test.js → components/Drawer/__tests__/Drawer.test.tsx
diff --git a/...tests__/__snapshots__/Drawer.test.js.snap → ...ests__/__snapshots__/Drawer.test.tsx.snap b/...tests__/__snapshots__/Drawer.test.js.snap → ...ests__/__snapshots__/Drawer.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Drawer > should render with many props assigned 1`] = `
   className="test-class hidden lg:block transition-all ease-in-out duration-1000 fixed top-0 bottom-0  overflow-hidden width-full z-[2] -left-0"
 >
   <div
-    className="h-full w-full"
+    className="w-full h-full"
   >
     Test
   </div>
@@ -14,10 +14,10 @@ exports[`Drawer > should render with many props assigned 1`] = `
 
 exports[`Drawer > should render with required props 1`] = `
 <div
-  className="hidden lg:block transition-all ease-in-out duration-1000 fixed top-0 bottom-0  overflow-hidden width-full z-[2] -left-[100%]"
+  className="hidden lg:block transition-all ease-in-out duration-1000 fixed top-0 bottom-0  overflow-hidden width-full z-[2] -left-full"
 >
   <div
-    className="h-full w-full"
+    className="w-full h-full"
   >
     Test
   </div>

diff --git a/components/ErrorDisplay/ErrorDisplay.js → components/ErrorDisplay/ErrorDisplay.tsx b/components/ErrorDisplay/ErrorDisplay.js → components/ErrorDisplay/ErrorDisplay.tsx
@@ -1,11 +1,13 @@
-import { number } from 'prop-types';
 import Head from 'components/head';
 
-ErrorDisplay.propTypes = { statusCode: number };
+export type ErrorDisplayPropsType = {
+  /**
+   * Displasy a status code instead of 'Error'.
+   */
+  statusCode?: number;
+};
 
-ErrorDisplay.defaultProps = { statusCode: undefined };
-
-function ErrorDisplay({ statusCode }) {
+function ErrorDisplay({ statusCode }: ErrorDisplayPropsType) {
   return (
     <>
       <Head title={statusCode ? `${statusCode}` : 'Error'}>
@@ -17,7 +19,7 @@ function ErrorDisplay({ statusCode }) {
           'h-screen text-white bg-[url("/static/images/TankFlip.gif")] flex flex-col justify-center w-full  bg-cover items-center'
         }
       >
-        <div className="text-center my-4 mx-auto">
+        <div className="mx-auto my-4 text-center">
           <h1 className="text-6xl text-white">{statusCode || 'Oh no'}!</h1>
           <p className="text-2xl text-white">
             We&apos;re so ashamed. You definitely weren&apos;t supposed to see this...

diff --git a/...rorDisplay/__tests__/ErrorDisplay.test.js → ...orDisplay/__tests__/ErrorDisplay.test.tsx b/...rorDisplay/__tests__/ErrorDisplay.test.js → ...orDisplay/__tests__/ErrorDisplay.test.tsx
@@ -9,6 +9,6 @@ describe('ErrorDisplay', () => {
 
   it('should render h1, even when no statusCode is passed', () => {
     const { container } = render(<ErrorDisplay />);
-    expect(container.querySelector('h1').textContent).toStrictEqual('Oh no!');
+    expect(container.querySelector('h1')!.textContent).toStrictEqual('Oh no!');
   });
 });
diff --git a/..._/__snapshots__/ErrorDisplay.test.js.snap → .../__snapshots__/ErrorDisplay.test.tsx.snap b/..._/__snapshots__/ErrorDisplay.test.js.snap → .../__snapshots__/ErrorDisplay.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`ErrorDisplay > should render with just required props 1`] = `
   className="h-screen text-white bg-[url("/static/images/TankFlip.gif")] flex flex-col justify-center w-full  bg-cover items-center"
 >
   <div
-    className="text-center my-4 mx-auto"
+    className="mx-auto my-4 text-center"
   >
     <h1
       className="text-6xl text-white"

diff --git a/...onents/FeaturedJobItem/FeaturedJobItem.js → ...nents/FeaturedJobItem/FeaturedJobItem.tsx b/...onents/FeaturedJobItem/FeaturedJobItem.js → ...nents/FeaturedJobItem/FeaturedJobItem.tsx
@@ -1,35 +1,61 @@
-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 }) {
+function FeaturedJobItem({
+  title,
+  source,
+  sourceUrl,
+  city,
+  state,
+  country,
+  description,
+  remote = false,
+}: FeaturedJobItemPropsType) {
   return (
-    <article className="py-4 px-0">
+    <article className="px-0 py-4">
       <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 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>

diff --git a/components/FeaturedJobItem/__stories__/FeaturedJobItem.stories.js b/components/FeaturedJobItem/__stories__/FeaturedJobItem.stories.js
diff --git a/components/FeaturedJobItem/__stories__/FeaturedJobItem.stories.tsx b/components/FeaturedJobItem/__stories__/FeaturedJobItem.stories.tsx
@@ -0,0 +1,25 @@
+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,
+  },
+};
diff --git a/...JobItem/__tests__/FeaturedJobItem.test.js → ...obItem/__tests__/FeaturedJobItem.test.tsx b/...JobItem/__tests__/FeaturedJobItem.test.js → ...obItem/__tests__/FeaturedJobItem.test.tsx
diff --git a/..._snapshots__/FeaturedJobItem.test.js.snap → ...snapshots__/FeaturedJobItem.test.tsx.snap b/..._snapshots__/FeaturedJobItem.test.js.snap → ...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"