Skip to content

Commit

Permalink
Migrate Card, FlatCard, ImageCard, ResourceCard, and ValueCard compon…
Browse files Browse the repository at this point in the history
…ents to typescript (#1802)
  • Loading branch information
recondesigns authored Mar 4, 2024
1 parent 98b3928 commit 86554f1
Show file tree
Hide file tree
Showing 23 changed files with 285 additions and 200 deletions.
18 changes: 6 additions & 12 deletions components/Cards/Card/Card.js → components/Cards/Card/Card.tsx
Original file line number Diff line number Diff line change
@@ -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,
)}
Expand Down
15 changes: 0 additions & 15 deletions components/Cards/Card/__stories__/Card.stories.js

This file was deleted.

19 changes: 19 additions & 0 deletions components/Cards/Card/__stories__/Card.stories.tsx
Original file line number Diff line number Diff line change
@@ -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} />,
};
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import createSnapshotTest from 'test-utils/createSnapshotTest';

import Card from '../Card';

describe('Card', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -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 (
Expand Down
18 changes: 0 additions & 18 deletions components/Cards/ImageCard/__stories__/ImageCard.stories.js

This file was deleted.

22 changes: 22 additions & 0 deletions components/Cards/ImageCard/__stories__/ImageCard.stories.tsx
Original file line number Diff line number Diff line change
@@ -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} />
};
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import createShallowSnapshotTest from 'test-utils/createShallowSnapshotTest';

import ImageCard from '../ImageCard';

describe('ImageCard', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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!
Expand All @@ -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
Expand All @@ -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!
Expand Down
Loading

0 comments on commit 86554f1

Please sign in to comment.