Jim/74989/card component ts migration (#6455)

* refactor: migrate card component to ts

* chore: add new line between type declarations

* chore: render only if truthy

Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>

packages/components/src/components/card/card.tsx

@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import React, { HTMLProps } from 'react';
+
+type TGeneralCardComponentsProps = HTMLProps<HTMLDivElement>;
+
+type TCardProps = HTMLProps<HTMLDivElement> & {
+    header: React.ReactNode;
+    renderHeader: () => React.ReactNode;
+    content: React.ReactNode;
+    renderContent: () => React.ReactNode;
+    footer: React.ReactNode;
+    renderFooter: () => React.ReactNode;
+};
+
+const CardRoot = ({ children, className, ...props }: TGeneralCardComponentsProps) => (
+    <div className={classNames('dc-card__wrapper', className)} {...props}>
+        {children}
+    </div>
+);
+
+const CardHeader = ({ children }: TGeneralCardComponentsProps) => (
+    <div className='dc-card__header-wrapper'>{children}</div>
+);
+
+const CardContent = ({ children }: TGeneralCardComponentsProps) => (
+    <div className='dc-card__content-wrapper'>{children}</div>
+);
+
+const CardFooter = ({ children }: TGeneralCardComponentsProps) => (
+    <div className='dc-card__footer-wrapper'>{children}</div>
+);
+
+const Card = ({
+    className,
+    header,
+    content,
+    footer,
+    renderHeader,
+    renderContent,
+    renderFooter,
+    ...props
+}: TCardProps) => {
+    return (
+        <CardRoot className={classNames('dc-card', className)} {...props}>
+            {renderHeader ? renderHeader() : !!header && <CardHeader>{header}</CardHeader>}
+            {renderContent ? renderContent() : !!content && <CardContent>{content}</CardContent>}
+            {renderFooter ? renderFooter() : !!footer && <CardFooter>{footer}</CardFooter>}
+        </CardRoot>
+    );
+};
+
+export default Card;

packages/components/src/components/card/index.js → packages/components/src/components/card/index.ts

@@ -1,4 +1,4 @@
-import Card from './card.jsx';
+import Card from './card';
 import './card.scss';
 
 export default Card;