Wildcard: <Card /> migration

client/branded/src/global-styles/GlobalStylesStory/GlobalStyles.story.tsx

@@ -18,7 +18,6 @@ import { CodeSnippet } from '../../components/CodeSnippet'
 import { Form } from '../../components/Form'
 
 import { AlertsStory } from './AlertsStory'
-import { CardsStory } from './CardsStory'
 import { ColorVariants } from './ColorVariants'
 import { FormFieldVariants } from './FormFieldVariants'
 import { TextStory } from './TextStory'
@@ -513,17 +512,6 @@ Forms.parameters = {
     },
 }
 
-export const Cards = CardsStory
-
-Cards.parameters = {
-    design: {
-        name: 'Figma',
-        type: 'figma',
-        url:
-            'https://www.figma.com/file/NIsN34NH7lPu04olBzddTw/Design-Refresh-Systemization-source-of-truth?node-id=1172%3A285',
-    },
-}
-
 export const ListGroups: Story = () => (
     <>
         <h1>List groups</h1>

client/branded/src/global-styles/index.scss

@@ -118,7 +118,6 @@ $spacer: 1rem;
 @import 'wildcard/src/global-styles/breakpoints';
 @import 'shared/src/global-styles/icons';
 @import './background';
-@import './card';
 @import './dropdown';
 @import './meter';
 @import './popover';

client/shared/src/extensions/devtools/ActiveExtensionsPanel.tsx

@@ -3,7 +3,7 @@ import { from } from 'rxjs'
 import { catchError, switchMap } from 'rxjs/operators'
 
 import { asError, isErrorLike } from '@sourcegraph/common'
-import { Button, LoadingSpinner, useObservable, Link } from '@sourcegraph/wildcard'
+import { Button, LoadingSpinner, useObservable, Link, CardHeader, CardBody } from '@sourcegraph/wildcard'
 
 import { wrapRemoteObservable } from '../../api/client/api/common'
 
@@ -36,7 +36,7 @@ export const ActiveExtensionsPanel: React.FunctionComponent<ExtensionsDevelopmen
 
     return (
         <>
-            <div className="card-header">Active extensions (DEBUG)</div>
+            <CardHeader>Active extensions (DEBUG)</CardHeader>
             {extensionsOrError ? (
                 isErrorLike(extensionsOrError) ? (
                     <div className="alert alert-danger mb-0 rounded-0">{extensionsOrError.message}</div>
@@ -52,14 +52,14 @@ export const ActiveExtensionsPanel: React.FunctionComponent<ExtensionsDevelopmen
                         ))}
                     </div>
                 ) : (
-                    <span className="card-body">No active extensions.</span>
+                    <CardBody>No active extensions.</CardBody>
                 )
             ) : (
-                <span className="card-body">
+                <CardBody>
                     <LoadingSpinner /> Loading extensions...
-                </span>
+                </CardBody>
             )}
-            <div className="card-body border-top">
+            <CardBody className="border-top">
                 <h4>Sideload extension</h4>
                 {sideloadedExtensionURL ? (
                     <div>
@@ -88,7 +88,7 @@ export const ActiveExtensionsPanel: React.FunctionComponent<ExtensionsDevelopmen
                         </div>
                     </div>
                 )}
-            </div>
+            </CardBody>
         </>
     )
 }

client/shared/src/extensions/devtools/index.tsx

@@ -4,7 +4,7 @@ import MenuUpIcon from 'mdi-react/MenuUpIcon'
 import React, { useCallback } from 'react'
 import { UncontrolledPopover } from 'reactstrap'
 
-import { Button, useLocalStorage } from '@sourcegraph/wildcard'
+import { Button, Card, useLocalStorage } from '@sourcegraph/wildcard'
 
 import { PlatformContextProps } from '../../platform/context'
 import { ExtensionsControllerProps } from '../controller'
@@ -38,8 +38,9 @@ const ExtensionDevelopmentTools: React.FunctionComponent<ExtensionsDevelopmentTo
 
     return (
         <Tabs
+            as={Card}
             defaultIndex={tabIndex}
-            className={classNames('card border-0 rounded-0', styles.extensionStatus)}
+            className={classNames('border-0 rounded-0', styles.extensionStatus)}
             onChange={handleTabsChange}
         >
             <div className="tablist-wrapper w-100 align-items-center">

client/shared/src/hover/HoverOverlay.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames'
 import React, { CSSProperties } from 'react'
 
 import { isErrorLike } from '@sourcegraph/common'
+import { Card } from '@sourcegraph/wildcard'
 
 import { ActionItem, ActionItemComponentProps } from '../actions/ActionItem'
 import { NotificationType } from '../api/extension/extensionHostApi'
@@ -96,7 +97,7 @@ export const HoverOverlay: React.FunctionComponent<HoverOverlayProps> = props =>
     }
 
     return (
-        <div
+        <Card
             // needed for dynamic styling
             data-testid="hover-overlay"
             // eslint-disable-next-line react/forbid-dom-props
@@ -164,6 +165,6 @@ export const HoverOverlay: React.FunctionComponent<HoverOverlayProps> = props =>
                         {useBrandedLogo && <HoverOverlayLogo className={hoverOverlayStyle.overlayLogo} />}
                     </div>
                 )}
-        </div>
+        </Card>
     )
 }

client/web/src/auth/OrDivider.story.tsx

@@ -1,6 +1,8 @@
 import { storiesOf } from '@storybook/react'
 import React from 'react'
 
+import { Card } from '@sourcegraph/wildcard'
+
 import { WebStory } from '../components/WebStory'
 
 import { OrDivider } from './OrDivider'
@@ -10,9 +12,9 @@ const { add } = storiesOf('web/OrDivider', module).addDecorator(story => <div cl
 add('Alone', () => (
     <WebStory>
         {() => (
-            <div className="card border-0">
+            <Card className="border-0">
                 <OrDivider />
-            </div>
+            </Card>
         )}
     </WebStory>
 ))

client/web/src/communitySearchContexts/CommunitySearchContextPage.tsx

@@ -17,7 +17,7 @@ import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryServi
 import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { PageTitle } from '@sourcegraph/web/src/components/PageTitle'
 import { SyntaxHighlightedSearchQuery } from '@sourcegraph/web/src/components/SyntaxHighlightedSearchQuery'
-import { Button, useObservable, Link } from '@sourcegraph/wildcard'
+import { Button, useObservable, Link, Card } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../auth'
 import { SearchPatternType } from '../graphql-operations'
@@ -158,7 +158,7 @@ export const CommunitySearchContextPage: React.FunctionComponent<CommunitySearch
                     </div>
                     <div className={classNames('col-xs-12 col-lg-5', styles.column)}>
                         <div className="order-2-lg order-1-xs">
-                            <div className={classNames('card', styles.repoCard)}>
+                            <Card className={styles.repoCard}>
                                 <h2>
                                     <SourceRepositoryMultipleIcon className="icon-inline mr-2" />
                                     Repositories
@@ -197,7 +197,7 @@ export const CommunitySearchContextPage: React.FunctionComponent<CommunitySearch
                                             </div>
                                         </div>
                                     )}
-                            </div>
+                            </Card>
                         </div>
                     </div>
                 </div>

client/web/src/components/CtaBanner.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import * as React from 'react'
 
-import { Button } from '@sourcegraph/wildcard'
+import { Button, Card } from '@sourcegraph/wildcard'
 
 import styles from './CtaBanner.module.scss'
 
@@ -30,7 +30,7 @@ export const CtaBanner: React.FunctionComponent<Props> = ({
     googleAnalytics,
     onClick,
 }) => (
-    <div className={classNames('shadow d-flex flex-row card py-4 pr-4 pl-3', styles.ctaBanner, className)}>
+    <Card className={classNames('shadow d-flex flex-row py-4 pr-4 pl-3', styles.ctaBanner, className)}>
         <div className="mr-4 d-flex flex-column align-items-center">{icon}</div>
         <div>
             <HeadingX>{title}</HeadingX>
@@ -48,5 +48,5 @@ export const CtaBanner: React.FunctionComponent<Props> = ({
                 {linkText}
             </Button>
         </div>
-    </div>
+    </Card>
 )

client/web/src/components/ExecutionLogEntry.tsx

@@ -3,7 +3,7 @@ import CheckCircleIcon from 'mdi-react/CheckCircleIcon'
 import React from 'react'
 
 import { pluralize } from '@sourcegraph/shared/src/util/strings'
-import { LoadingSpinner } from '@sourcegraph/wildcard'
+import { LoadingSpinner, CardBody, Card } from '@sourcegraph/wildcard'
 
 import { Collapsible } from './Collapsible'
 import { LogOutput } from './LogOutput'
@@ -22,8 +22,8 @@ interface ExecutionLogEntryProps extends React.PropsWithChildren<{}> {
 }
 
 export const ExecutionLogEntry: React.FunctionComponent<ExecutionLogEntryProps> = ({ logEntry, children, now }) => (
-    <div className="card mb-3">
-        <div className="card-body">
+    <Card className="mb-3">
+        <CardBody>
             {logEntry.command.length > 0 ? (
                 <LogOutput text={logEntry.command.join(' ')} className="mb-3" />
             ) : (
@@ -53,7 +53,7 @@ export const ExecutionLogEntry: React.FunctionComponent<ExecutionLogEntryProps>
                 )}
             </div>
             {children}
-        </div>
+        </CardBody>
 
         <div className="p-2">
             {logEntry.out ? (
@@ -66,7 +66,7 @@ export const ExecutionLogEntry: React.FunctionComponent<ExecutionLogEntryProps>
                 </div>
             )}
         </div>
-    </div>
+    </Card>
 )
 
 const timeOrders: [number, string][] = [

client/web/src/components/ModalPage.module.scss

@@ -16,7 +16,3 @@
     display: flex;
     justify-content: center;
 }
-
-.card-body {
-    padding: calc(2 * var(--card-spacer-y)) calc(2 * var(--card-spacer-x));
-}

client/web/src/components/ModalPage.tsx

@@ -1,6 +1,8 @@
 import classNames from 'classnames'
 import React from 'react'
 
+import { CardBody, Card } from '@sourcegraph/wildcard'
+
 import styles from './ModalPage.module.scss'
 
 interface Props {
@@ -15,11 +17,11 @@ interface Props {
  */
 export const ModalPage: React.FunctionComponent<Props> = ({ icon, className = '', children }) => (
     <div className={classNames(styles.modalPage, className)}>
-        <div className="card">
-            <div className={classNames('card-body', styles.cardBody)}>
+        <Card>
+            <CardBody>
                 {icon && <div className={styles.icon}>{icon}</div>}
                 {children}
-            </div>
-        </div>
+            </CardBody>
+        </Card>
     </div>
 )

client/web/src/components/SingleValueCard.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames'
 import * as React from 'react'
 
 import { LinkOrSpan } from '@sourcegraph/shared/src/components/LinkOrSpan'
+import { CardText, CardTitle, CardBody, Card } from '@sourcegraph/wildcard'
 
 import styles from './SingleValueCard.module.scss'
 
@@ -18,20 +19,19 @@ export const SingleValueCard: React.FunctionComponent<{
     valueTooltip?: string
     subText?: string
 }> = ({ title, value, subTitle, link, className, valueClassName, valueTooltip, subText }) => (
-    <div className={classNames('card', styles.singleValueCard, className)}>
-        <div className="card-body text-center">
-            <h4 className="card-title mb-0">{title}</h4>
-            <small className="card-text">{subTitle || ''}</small>
-            <p
+    <Card className={classNames(styles.singleValueCard, className)}>
+        <CardBody className="text-center">
+            <CardTitle as="h4" className="mb-0">
+                {title}
+            </CardTitle>
+            <CardText as="small">{subTitle || ''}</CardText>
+            <CardText
                 data-tooltip={valueTooltip}
-                className={classNames(
-                    classNames('card-text font-weight-bold text-nowrap', styles.value),
-                    valueClassName
-                )}
+                className={classNames(classNames('font-weight-bold text-nowrap', styles.value), valueClassName)}
             >
                 <LinkOrSpan to={link}>{value}</LinkOrSpan>
-            </p>
+            </CardText>
             {subText && <small>{subText}</small>}
-        </div>
-    </div>
+        </CardBody>
+    </Card>
 )

client/web/src/components/WebHoverOverlay/WebHoverOverlay.tsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames'
 import React, { useCallback, useEffect } from 'react'
 import { fromEvent } from 'rxjs'
 import { finalize, tap } from 'rxjs/operators'
@@ -103,7 +102,7 @@ export const WebHoverOverlay: React.FunctionComponent<
     return (
         <HoverOverlay
             {...propsToUse}
-            className={classNames('card', styles.webHoverOverlay)}
+            className={styles.webHoverOverlay}
             actionItemClassName="btn btn-sm btn-secondary border-0"
             onAlertDismissed={onAlertDismissed}
             getAlertClassName={getAlertClassName}