Converts Card to typescript (#1160)

src/Card/Card.tsx

@@ -0,0 +1,98 @@
+import React, {
+  createElement,
+  type DetailedHTMLProps,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react';
+import classNames from 'classnames';
+
+import { LoadingSkeleton } from 'src/LoadingSkeleton';
+
+import './Card.scss';
+
+export const CardSizes = {
+  EXTRA_SMALL: 'xs',
+  SMALL: 'sm',
+  MEDIUM: 'md',
+  LARGE: 'lg',
+} as const;
+
+type ElementProps = DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+
+type CardProps = {
+  children?: ReactNode;
+  className?: string;
+  divided?: boolean;
+  elementType?: string;
+  helperText?: ReactNode;
+  isLoading?: boolean;
+  loadingSkeleton?: ReactNode;
+  loadingSkeletonParagraphCount?: number;
+  noPadding?: boolean;
+  size: 'xs' | 'sm' | 'md' | 'lg';
+  subTitle?: ReactNode;
+  title?: ReactNode;
+} & ElementProps;
+
+const Card = ({
+  children,
+  className,
+  divided = false,
+  elementType = 'section',
+  helperText,
+  isLoading = false,
+  loadingSkeleton,
+  loadingSkeletonParagraphCount = 1,
+  noPadding = false,
+  size,
+  subTitle,
+  title,
+  ...props
+}: CardProps) => {
+  const defaultLoadingSkeleton = (
+    <>
+      <LoadingSkeleton height={24} width="33%" />
+      <br />
+      {Array(loadingSkeletonParagraphCount).fill(0).map((_, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <div className="Card__loading-skeleton-paragraphs" key={`skeleton-paragraph-${i}`}>
+          <LoadingSkeleton count={3} />
+        </div>
+      ))}
+    </>
+  );
+
+  return createElement(
+    elementType,
+    {
+      ...props,
+      className: classNames(
+        'Card',
+        { [`Card--${size}`]: size },
+        className,
+        {
+          'Card--divided': divided,
+          'Card--no-padding': noPadding,
+        },
+      ),
+    },
+    <>
+      {isLoading ? (loadingSkeleton || defaultLoadingSkeleton) : (
+        <>
+          {title && (
+            <div className="Card__header">
+              <h2 className="Card__title">{title}</h2>
+              {helperText && <span className="Card__helper-text">{helperText}</span>}
+            </div>
+          )}
+
+          {divided && <hr className="Card__divider" /> }
+          {subTitle && <h3 className="Card__subtitle">{subTitle}</h3> }
+          {children}
+        </>
+      )}
+    </>,
+  );
+};
+
+export default Card;