Remove ui/Card to make room for new Card (#2800)

src/old_ui/Card/Card.jsx

@@ -1,9 +1,48 @@
 import cs from 'classnames'
+import PropTypes from 'prop-types'
 
-const cardClassName = 'border border-ds-gray-secondary bg-white rounded-md '
+const baseStyles = {
+  header: 'text-2xl bold mb-4',
+  footer: 'border-t border-ds-gray-secondary p-4',
+}
+
+// TODO: Make a card variant that creates a divisor bw entries, see Card from PullRequestPage
+const variantClasses = {
+  default: 'border border-ds-gray-secondary rounded p-6',
+  large: 'border border-ds-gray-secondary rounded p-12',
+  upgradeForm: 'border border-ds-gray-secondary rounded p-12',
+  cancel: 'border border-codecov-red px-12 py-10',
+  old: 'border border-ds-gray-secondary bg-white rounded-md',
+}
+
+// TODO: enhance as per https://github.com/codecov/gazebo/pull/1433#discussion_r918864691
+function Card({
+  children,
+  header,
+  footer,
+  variant = 'default',
+  className = '',
+}) {
+  return (
+    <article className={cs(variantClasses[variant], className)}>
+      {header && <div className={baseStyles.header}>{header}</div>}
+      {children}
+      {footer && <div className={baseStyles.footer}>{footer}</div>}
+    </article>
+  )
+}
 
-function Card({ children, className = '' }) {
-  return <div className={cs(cardClassName, className)}>{children}</div>
+Card.propTypes = {
+  header: PropTypes.node,
+  footer: PropTypes.node,
+  variant: PropTypes.oneOf([
+    'default',
+    'large',
+    'cancel',
+    'upgradeForm',
+    'old',
+  ]),
+  className: PropTypes.string,
 }
 
 export default Card

src/old_ui/Card/Card.spec.jsx

@@ -17,4 +17,26 @@ describe('Card', () => {
       expect(tab).toBeInTheDocument()
     })
   })
+
+  describe('when rendered with header', () => {
+    beforeEach(() => {
+      setup({ children: 'hello', header: <h1>hola</h1> })
+    })
+
+    it('renders the header', () => {
+      const tab = screen.getByText(/hola/)
+      expect(tab).toBeInTheDocument()
+    })
+  })
+
+  describe('when rendered with footer', () => {
+    beforeEach(() => {
+      setup({ children: 'hello', footer: <h1>bonjour</h1> })
+    })
+
+    it('renders the header', () => {
+      const tab = screen.getByText(/bonjour/)
+      expect(tab).toBeInTheDocument()
+    })
+  })
 })

src/old_ui/Modal/Modal.jsx

@@ -15,7 +15,7 @@ function Modal({ isOpen, onClose, children, title, ...rest }) {
       overlayClassName="fixed inset-0 bg-gray-900 bg-opacity-75"
       {...rest}
     >
-      <Card className="w-1/2 p-8">
+      <Card variant="old" className="w-1/2 p-8">
         <header className="mb-4 flex items-center justify-between">
           <h2 className="text-2xl">{title}</h2>
           <Button variant="text" onClick={onClose} aria-label="Close">

src/pages/AccountSettings/tabs/Admin/DeletionCard/DeletionCard.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 
+import Card from 'old_ui/Card'
 import A from 'ui/A'
-import Card from 'ui/Card'
 
 import ErasePersonalAccountButton from './ErasePersonalAccountButton'
 

src/pages/AccountSettings/tabs/Profile/DeletionCard/DeletionCard.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 
-import Card from 'ui/Card'
+import Card from 'old_ui/Card'
 
 import ErasePersonalAccountButton from './ErasePersonalAccountButton'
 

src/pages/AccountSettings/tabs/Profile/NameEmailCard/NameEmailCard.jsx

@@ -55,7 +55,7 @@ function NameEmailCard({ currentUser, provider }) {
   }
 
   return (
-    <Card className="p-10">
+    <Card variant="old" className="p-10">
       {/* Define the field first and the submit/title after so the TAB order makes sense for accessibility but we reverse the two so it looks like the correct UI */}
       <form onSubmit={handleSubmit(submit)} className="flex flex-col gap-8">
         <div className="flex items-center justify-between">

src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/DowngradePlan.jsx

@@ -1,8 +1,8 @@
 import { useLayoutEffect } from 'react'
 import { useParams } from 'react-router-dom'
 
+import Card from 'old_ui/Card'
 import { useAccountDetails } from 'services/account'
-import Card from 'ui/Card'
 import Icon from 'ui/Icon'
 
 import CancelButton from './CancelButton'

src/pages/PlanPage/subRoutes/InvoicesPage/InvoiceCard.jsx

@@ -20,7 +20,10 @@ function InvoiceCard({ invoice }) {
   const { invoiceDetailsPage } = useNavLinks()
 
   return (
-    <Card className="mt-4 flex items-center justify-between px-4 py-6 text-sm">
+    <Card
+      variant="old"
+      className="mt-4 flex items-center justify-between px-4 py-6 text-sm"
+    >
       <div>
         Invoice on {format(fromUnixTime(invoice.created), 'MMMM do yyyy')}
       </div>