Migrate Card, FlatCard, ImageCard, ResourceCard, and ValueCard components to typescript

components/Cards/Card/Card.js → components/Cards/Card/Card.tsx

@@ -1,26 +1,20 @@
-import { bool, node, string } from 'prop-types';
 import { twMerge } from 'tailwind-merge';
 import { getDataAttributes } from 'common/utils/prop-utils';
 
-Card.propTypes = {
-  children: node.isRequired,
-  className: string,
-  hasAnimationOnHover: bool,
+export type CardPropsType = {
+  children: React.ReactNode;
+  className?: string;
+  hasAnimationOnHover?: boolean;
 };
 
-Card.defaultProps = {
-  className: undefined,
-  hasAnimationOnHover: false,
-};
-
-function Card({ children, className, ...props }) {
+function Card({ children, className, hasAnimationOnHover, ...props }: CardPropsType) {
   const customDataAttributes = getDataAttributes(props);
 
   return (
     <article
       className={twMerge(
         'items-center bg-white [&_svg]:fill-themeSecondary text-themeSecondary flex flex-col flex-nowrap justify-around m-4 min-h-[100px] min-w-[100px] p-6 shadow-md focus-visible:outline-none',
-        props.hasAnimationOnHover &&
+        hasAnimationOnHover &&
           'shadow-sm transition-shadow duration-200 ease-linear hover:shadow-lg focus-visible:shadow-lg',
         className,
       )}

components/Cards/Card/__stories__/Card.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { descriptions } from 'common/constants/descriptions';
+import Card from '../Card';
+
+type CardStoryType = StoryObj<typeof Card>;
+
+const meta: Meta<typeof Card> = {
+  title: 'Cards/Card',
+  component: Card,
+  args: {
+    children: descriptions.medium,
+  },
+};
+
+export default meta;
+
+export const Default: CardStoryType = {
+  render: args => <Card {...args} />,
+};

components/Cards/Card/__tests__/Card.test.js → components/Cards/Card/__tests__/Card.test.tsx

@@ -1,5 +1,4 @@
 import createSnapshotTest from 'test-utils/createSnapshotTest';
-
 import Card from '../Card';
 
 describe('Card', () => {

components/Cards/ImageCard/ImageCard.js → components/Cards/ImageCard/ImageCard.tsx

@@ -1,26 +1,34 @@
-import { bool, node, string } from 'prop-types';
 import { twMerge } from 'tailwind-merge';
 import Image from 'next/image';
-import Card from 'components/Cards/Card/Card';
+import Card, { CardPropsType } from 'components/Cards/Card/Card';
 
-ImageCard.propTypes = {
-  alt: string.isRequired,
-  children: node.isRequired,
-  className: string,
-  imageSource: string.isRequired,
-  isImageFirst: bool,
-};
+export type ImageCardPropsType = {
+  /**
+   * Includes alt text for the image.
+   */
+  alt: string;
+  /**
+   * Url for the image.
+   */
+  imageSource: string;
+  /**
+   * Sets whether the image is displayed inline before the content, or after.
+   * @default - true
+   */
+  isImageFirst?: boolean;
+} & Omit<CardPropsType, 'hasAnimationOnHover'>;
 
-ImageCard.defaultProps = {
-  className: undefined,
-  isImageFirst: true,
-};
-
-function ImageCard({ alt, children, className, imageSource, isImageFirst }) {
+function ImageCard({
+  alt,
+  children,
+  className,
+  imageSource,
+  isImageFirst = true,
+}: ImageCardPropsType) {
   const ImageComponent = <Image src={imageSource} alt={alt} layout="fill" objectFit="cover" />;
 
   const ContentComponent = (
-    <div className="flex items-center flex-col justify-start overflow-y-auto m-4">{children}</div>
+    <div className="flex flex-col items-center justify-start m-4 overflow-y-auto">{children}</div>
   );
 
   return (

components/Cards/ImageCard/__stories__/ImageCard.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { descriptions } from 'common/constants/descriptions';
+import { s3 } from 'common/constants/urls';
+import ImageCard from '../ImageCard';
+
+type ImageCardPropsType = StoryObj<typeof ImageCard>;
+
+const meta: Meta<typeof ImageCard> = {
+  title: 'Cards/ImageCard',
+  component: ImageCard,
+  args: {
+    alt: 'Image Card',
+    children: descriptions.long,
+    imageSource: `${s3}redesign/heroBanners/about.jpg`,
+  },
+};
+
+export default meta;
+
+export const Default: ImageCardPropsType = {
+  render: args => <ImageCard {...args} />
+};

components/Cards/ImageCard/__tests__/ImageCard.test.js → components/Cards/ImageCard/__tests__/ImageCard.test.tsx

@@ -1,5 +1,4 @@
 import createShallowSnapshotTest from 'test-utils/createShallowSnapshotTest';
-
 import ImageCard from '../ImageCard';
 
 describe('ImageCard', () => {

components/Cards/ImageCard/__tests__/__snapshots__/ImageCard.test.js.snap → components/Cards/ImageCard/__tests__/__snapshots__/ImageCard.test.tsx.snap

@@ -3,11 +3,10 @@
 exports[`ImageCard > should render with many props assigned 1`] = `
 <Card
   className="md:flex-row flex-col md:h-56 md:w-[650px] md:max-w-none p-0 h-auto max-w-xs w-auto [&>*]:flex-[1_1_50%] test"
-  hasAnimationOnHover={false}
 >
   <React.Fragment>
     <div
-      className="flex items-center flex-col justify-start overflow-y-auto m-4"
+      className="flex flex-col items-center justify-start m-4 overflow-y-auto"
     >
       <p>
         Testing!
@@ -30,7 +29,6 @@ exports[`ImageCard > should render with many props assigned 1`] = `
 exports[`ImageCard > should render with required props 1`] = `
 <Card
   className="md:flex-row flex-col md:h-56 md:w-[650px] md:max-w-none p-0 h-auto max-w-xs w-auto [&>*]:flex-[1_1_50%]"
-  hasAnimationOnHover={false}
 >
   <React.Fragment>
     <div
@@ -44,7 +42,7 @@ exports[`ImageCard > should render with required props 1`] = `
       />
     </div>
     <div
-      className="flex items-center flex-col justify-start overflow-y-auto m-4"
+      className="flex flex-col items-center justify-start m-4 overflow-y-auto"
     >
       <p>
         Testing!