From c8ff13cf04216d7fa3bdd53b26753fb5bcbe2d51 Mon Sep 17 00:00:00 2001
From: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com>
Date: Tue, 27 Sep 2022 14:50:25 +0800
Subject: [PATCH] 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>
---
 .../components/src/components/card/card.jsx   | 37 -------------
 .../components/src/components/card/card.tsx   | 52 +++++++++++++++++++
 .../components/card/{index.js => index.ts}    |  2 +-
 3 files changed, 53 insertions(+), 38 deletions(-)
 delete mode 100644 packages/components/src/components/card/card.jsx
 create mode 100644 packages/components/src/components/card/card.tsx
 rename packages/components/src/components/card/{index.js => index.ts} (58%)

diff --git a/packages/components/src/components/card/card.jsx b/packages/components/src/components/card/card.jsx
deleted file mode 100644
index 77a5a34ff657..000000000000
--- a/packages/components/src/components/card/card.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const CardRoot = ({ children, className, ...props }) => (
-    <div className={classNames('dc-card__wrapper', className)} {...props}>
-        {children}
-    </div>
-);
-
-const CardHeader = ({ children }) => <div className='dc-card__header-wrapper'>{children}</div>;
-
-const CardContent = ({ children }) => <div className='dc-card__content-wrapper'>{children}</div>;
-
-const CardFooter = ({ children }) => <div className='dc-card__footer-wrapper'>{children}</div>;
-
-const Card = ({ className, header, content, footer, renderHeader, renderContent, renderFooter, ...props }) => {
-    return (
-        <CardRoot className={classNames('dc-card', className)} {...props}>
-            {renderHeader ? renderHeader() : header !== null && <CardHeader>{header}</CardHeader>}
-            {renderContent ? renderContent() : content !== null && <CardContent>{content}</CardContent>}
-            {renderFooter ? renderFooter() : footer !== null && <CardFooter>{footer}</CardFooter>}
-        </CardRoot>
-    );
-};
-
-Card.propTypes = {
-    className: PropTypes.string,
-    header: PropTypes.node,
-    renderHeader: PropTypes.func,
-    content: PropTypes.node,
-    renderContent: PropTypes.func,
-    footer: PropTypes.node,
-    renderFooter: PropTypes.func,
-};
-
-export default Card;
diff --git a/packages/components/src/components/card/card.tsx b/packages/components/src/components/card/card.tsx
new file mode 100644
index 000000000000..fbe934884150
--- /dev/null
+++ b/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;
diff --git a/packages/components/src/components/card/index.js b/packages/components/src/components/card/index.ts
similarity index 58%
rename from packages/components/src/components/card/index.js
rename to packages/components/src/components/card/index.ts
index 5f447ef3b34c..f3e0a4ea4eb8 100644
--- a/packages/components/src/components/card/index.js
+++ b/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;