feat(react,styles): remove Card component and styles (#1248)

dequelabs · Dec 15, 2023 · 9b55195 · 9b55195
1 parent 7b5349d
commit 9b55195
Show file tree

Hide file tree

Showing 12 changed files with 15 additions and 288 deletions.
diff --git a/docs/pages/components/Card.mdx b/docs/pages/components/Card.mdx
diff --git a/packages/react/__tests__/src/components/Card/index.js b/packages/react/__tests__/src/components/Card/index.js
diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx
diff --git a/packages/react/src/components/Card/CardContent.tsx b/packages/react/src/components/Card/CardContent.tsx
diff --git a/packages/react/src/components/Card/CardFooter.tsx b/packages/react/src/components/Card/CardFooter.tsx
diff --git a/packages/react/src/components/Card/CardHeader.tsx b/packages/react/src/components/Card/CardHeader.tsx
diff --git a/packages/react/src/components/Card/index.ts b/packages/react/src/components/Card/index.ts
diff --git a/packages/react/src/components/RadioCardGroup/index.tsx b/packages/react/src/components/RadioCardGroup/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import Icon, { IconType } from '../Icon';
-import Card, { CardContent } from '../Card';
+import Panel, { PanelContent } from '../Panel';
 
 export interface RadioItem extends React.InputHTMLAttributes<HTMLInputElement> {
   label: React.ReactNode;
@@ -72,8 +72,7 @@ const RadioCardGroup = ({
 
     return (
       <div className={classNames('RadioCard')} key={index}>
-        <Card
-          variant="simple"
+        <Panel
           className={classNames('RadioCardGroup__Card RadioCard__overlay', {
             'RadioCard__overlay--focused': isFocused,
             'RadioCard__overlay--checked': isChecked,
@@ -103,7 +102,7 @@ const RadioCardGroup = ({
             checked={isChecked}
             {...other}
           />
-          <CardContent>
+          <PanelContent>
             <div className={classNames('RadioCardGroup__Checked')}>
               {isChecked && (
                 <Icon
@@ -124,8 +123,8 @@ const RadioCardGroup = ({
                 {label}
               </label>
             </div>
-          </CardContent>
-        </Card>
+          </PanelContent>
+        </Panel>
       </div>
     );
   });

diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -57,12 +57,6 @@ export {
   TooltipContent
 } from './components/Tooltip';
 export { default as TooltipTabstop } from './components/TooltipTabstop';
-export {
-  default as Card,
-  CardHeader,
-  CardContent,
-  CardFooter
-} from './components/Card';
 export { default as TextField } from './components/TextField';
 export { default as ClickOutsideListener } from './components/ClickOutsideListener';
 export {

diff --git a/packages/styles/card.css b/packages/styles/card.css
diff --git a/packages/styles/index.css b/packages/styles/index.css
@@ -14,7 +14,6 @@
 @import './select.css';
 @import './side-bar.css';
 @import './radio-card.css';
-@import './card.css';
 @import './toast.css';
 @import './tooltip.css';
 @import './tooltip-tabstop.css';

diff --git a/packages/styles/radio-card.css b/packages/styles/radio-card.css
@@ -53,12 +53,17 @@
   width: 44px;
 }
 
-.RadioCardGroup__Card.Card--simple {
+.RadioCardGroup__Card {
   width: var(--radio-card-width);
   height: var(--radio-card-height);
   align-content: center;
 }
 
+.RadioCardGroup__Card .Panel__Content {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 .RadioCardGroup__Card:hover {
   background-color: var(--gray-20);
 }
@@ -92,3 +97,7 @@
 .cauldron--theme-dark .RadioCardGroup__Icon.Icon svg {
   color: var(--accent-success);
 }
+
+.cauldron--theme-dark .RadioCardGroup__Card {
+  background-color: var(--dark-workspace-color);
+}