Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate Drawer, ErrorDisplay, and FeaturedJobItem components to typescript #1804

Merged
merged 9 commits into from
Mar 5, 2024
Merged

Migrate Drawer, ErrorDisplay, and FeaturedJobItem components to typescript #1804

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f60c8ae
migrated all Drawer component files to .tsx and updated snapshot
recondesigns Mar 4, 2024
0f97bbf
migrated ErrorDisplay component files to .tsx and updated snapshot
recondesigns Mar 4, 2024
539341d
migrated all FeaturedJobItem components to .tsx and updated snapshot
recondesigns Mar 4, 2024
ed3f460
merging in main
recondesigns Mar 4, 2024
71b4fab
removed commented code
recondesigns Mar 4, 2024
43b47c7
mergin in main
recondesigns Mar 4, 2024
60a4540
merging in main
recondesigns Mar 5, 2024
e3608db
made suggested changes and removed commented code
recondesigns Mar 5, 2024
cc8587d
updated Drawer snapshot
recondesigns Mar 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 0 additions & 32 deletions components/Drawer/Drawer.js
View file
Open in desktop

This file was deleted.

36 changes: 36 additions & 0 deletions components/Drawer/Drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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]',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
'hidden lg:block transition-all ease-in-out duration-1000 fixed top-0 bottom-0 overflow-hidden width-full z-[2]',
'hidden lg:block transition-all ease-in-out duration-1000 fixed top-0 bottom-0 overflow-hidden width-full z-[2]',

same

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There doesn't appear to be a change in the suggestion. Am I missing a tiny detail?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there are 2 spaces between bottom-0 and overflow-hidden. Perhaps you need to lower the contrast on your monitor?

Screenshot 2024-03-05 at 3 05 09 PM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahhhh... I actually did see it, but didn't know what it was. This is merged, should I make that change in one of the other branches I am working?

{
'-left-0': isVisible,
'-left-[100%]': !isVisible,
recondesigns marked this conversation as resolved.
Show resolved Hide resolved
},
)}
>
<div className="w-full h-full">{children}</div>
</div>
);
}

export default Drawer;
20 changes: 0 additions & 20 deletions components/Drawer/__stories__/Drawer.stories.js
View file
Open in desktop

This file was deleted.

46 changes: 46 additions & 0 deletions components/Drawer/__stories__/Drawer.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
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,
},
};

// export default {
// component: Drawer,
// title: 'Drawer',
// parameters: {
// viewport: {
// defaultViewport: 'tablet',
// },
// },
// };

// const Template = arguments_ => <Drawer {...arguments_} />;

// // Default Drawer supplied with only required args
// export const Default = Template.bind({});
// Default.args = {
// children: 'Drawer content will only display on display size of Tablet or smaller',
// isVisible: true,
// };
recondesigns marked this conversation as resolved.
Show resolved Hide resolved
0 components/Drawer/__tests__/Drawer.test.js → components/Drawer/__tests__/Drawer.test.tsx
View file
Open in desktop
File renamed without changes.
4 changes: 2 additions & 2 deletions ...tests__/__snapshots__/Drawer.test.js.snap → ...ests__/__snapshots__/Drawer.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -17,7 +17,7 @@ exports[`Drawer > should render with required props 1`] = `
className="hidden lg:block transition-all ease-in-out duration-1000 fixed top-0 bottom-0 overflow-hidden width-full z-[2] -left-[100%]"
>
<div
className="h-full w-full"
className="w-full h-full"
>
Test
</div>
Expand Down
14 changes: 8 additions & 6 deletions components/ErrorDisplay/ErrorDisplay.js → components/ErrorDisplay/ErrorDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'}>
Expand All @@ -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...
Expand Down
2 changes: 1 addition & 1 deletion ...rorDisplay/__tests__/ErrorDisplay.test.js → ...orDisplay/__tests__/ErrorDisplay.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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!');
});
});
2 changes: 1 addition & 1 deletion ..._/__snapshots__/ErrorDisplay.test.js.snap → .../__snapshots__/ErrorDisplay.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
66 changes: 46 additions & 20 deletions ...onents/FeaturedJobItem/FeaturedJobItem.js → ...nents/FeaturedJobItem/FeaturedJobItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
18 changes: 0 additions & 18 deletions components/FeaturedJobItem/__stories__/FeaturedJobItem.stories.js
View file
Open in desktop

This file was deleted.

25 changes: 25 additions & 0 deletions components/FeaturedJobItem/__stories__/FeaturedJobItem.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
},
};
0 ...JobItem/__tests__/FeaturedJobItem.test.js → ...obItem/__tests__/FeaturedJobItem.test.tsx
View file
Open in desktop
File renamed without changes.
8 changes: 4 additions & 4 deletions ..._snapshots__/FeaturedJobItem.test.js.snap → ...snapshots__/FeaturedJobItem.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Loading