🪟 🎨 🧹 Migrate Card component to SCSS and refactor (#16407)

* Converts worspace item into a button and adds some styling.

* Adds workspace button width and padding.

* Removes border for correct box shadow styling.

* Converts chevron icon from styled components to scss.

* Brakes card, contentcard, stateblock to rebuild styling and props.

* Uses Card in ConnectorCard instead of ContentCard.

* Adds conditional styling to Card.

* Cleans up unused code.

* Adds className override through props.

* Updates existing destination card component.

* Removes styled components from ConnectionBlock.

* Replaces some ContenCards with Cards.

* Replaces all ContentCard components with Card.

* Adds missing padding in StateBlock.

* Fixes linting errors.

* Corrects stylelint errors.

* Reguested changes.

Co-authored-by: Tim Roes <tim@airbyte.io>

airbyte-webapp/src/components/CenteredPageComponents/PaddedCard.tsx

@@ -1,8 +1,8 @@
 import styled from "styled-components";
 
-import ContentCard from "components/ContentCard";
+import { Card } from "components/base/Card";
 
-const PaddedCard = styled(ContentCard)`
+const PaddedCard = styled(Card)`
   width: 100%;
   max-width: 600px;
   margin-bottom: 8px;

airbyte-webapp/src/components/ConnectionBlock/ConnectionBlock.module.scss

@@ -0,0 +1,20 @@
+@use "../../scss/colors";
+
+.lightContentCard {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  padding: 20px 21px 19px;
+  margin-bottom: 12px;
+}
+
+.arrow {
+  font-size: 29px;
+  line-height: 29px;
+  color: colors.$blue-500;
+}
+
+.extraBlock {
+  background: none;
+}

airbyte-webapp/src/components/ConnectionBlock/ConnectionBlock.tsx

@@ -1,42 +1,23 @@
 import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import classNames from "classnames";
 import React from "react";
-import styled from "styled-components";
 
-import ContentCard from "../ContentCard";
+import { Card } from "../base/Card";
 import { ConnectionBlockItem, Content } from "./components/ConnectionBlockItem";
+import styles from "./ConnectionBlock.module.scss";
 
 interface IProps {
-  className?: string;
   itemFrom?: { name: string; icon?: string };
   itemTo?: { name: string; icon?: string };
 }
 
-const LightContentCard = styled(ContentCard)`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-direction: row;
-  padding: 20px 21px 19px;
-  margin-bottom: 12px;
-`;
-
-const Arrow = styled(FontAwesomeIcon)`
-  font-size: 29px;
-  line-height: 29px;
-  color: ${({ theme }) => theme.primaryColor};
-`;
-
-const ExtraBlock = styled(Content)`
-  background: none;
-`;
-
 const ConnectionBlock: React.FC<IProps> = (props) => (
-  <LightContentCard className={props.className}>
-    {props.itemFrom ? <ConnectionBlockItem {...props.itemFrom} /> : <ExtraBlock />}
-    <Arrow icon={faChevronRight} />
-    {props.itemTo ? <ConnectionBlockItem {...props.itemTo} /> : <ExtraBlock />}
-  </LightContentCard>
+  <Card className={classNames(styles.lightContentCard)}>
+    {props.itemFrom ? <ConnectionBlockItem {...props.itemFrom} /> : <Content className={styles.extraBlock} />}
+    <FontAwesomeIcon className={styles.arrow} icon={faChevronRight} />
+    {props.itemTo ? <ConnectionBlockItem {...props.itemTo} /> : <Content className={styles.extraBlock} />}
+  </Card>
 );
 
 export default ConnectionBlock;

airbyte-webapp/src/components/CreateConnectionContent/CreateConnectionContent.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { Suspense, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 
-import { Button, ContentCard } from "components";
+import { Button, Card } from "components";
 import { IDataItem } from "components/base/DropDown/components/Option";
 import { JobItem } from "components/JobItem/JobItem";
 import LoadingSchema from "components/LoadingSchema";
@@ -90,10 +90,10 @@ const CreateConnectionContent: React.FC<CreateConnectionContentProps> = ({
   if (schemaErrorStatus) {
     const job = LogsRequestError.extractJobInfo(schemaErrorStatus);
     return (
-      <ContentCard>
+      <Card>
         <TryAfterErrorBlock onClick={onDiscoverSchema} />
         {job && <JobItem job={job} />}
-      </ContentCard>
+      </Card>
     );
   }
 

airbyte-webapp/src/components/DeleteBlock/DeleteBlock.tsx

@@ -3,17 +3,18 @@ import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
 import { Button, H5 } from "components";
-import ContentCard from "components/ContentCard";
 
 import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
 import useRouter from "hooks/useRouter";
 
+import { Card } from "../base/Card";
+
 interface IProps {
   type: "source" | "destination" | "connection";
   onDelete: () => Promise<unknown>;
 }
 
-const DeleteBlockComponent = styled(ContentCard)`
+const DeleteBlockComponent = styled(Card)`
   margin-top: 12px;
   padding: 19px 20px 20px;
   display: flex;

airbyte-webapp/src/components/Modal/Modal.tsx

@@ -2,8 +2,7 @@ import { Dialog } from "@headlessui/react";
 import classNames from "classnames";
 import React, { useState } from "react";
 
-import ContentCard from "components/ContentCard";
-
+import { Card } from "../base/Card";
 import styles from "./Modal.module.scss";
 
 export interface ModalProps {
@@ -37,9 +36,9 @@ const Modal: React.FC<ModalProps> = ({ children, title, size, onClose, cardless,
           {cardless ? (
             children
           ) : (
-            <ContentCard title={title} className={classNames(styles.card, size ? cardStyleBySize[size] : undefined)}>
+            <Card title={title} className={classNames(styles.card, size ? cardStyleBySize[size] : undefined)}>
               {children}
-            </ContentCard>
+            </Card>
           )}
         </Dialog.Panel>
       </div>

airbyte-webapp/src/components/base/Card/Card.module.scss

@@ -0,0 +1,34 @@
+@use "../../../scss/colors";
+
+.container {
+  width: auto;
+  background: colors.$white;
+  border-radius: 10px;
+  box-shadow: 0 2px 4px colors.$cardShadowColor;
+
+  &.fullWidth {
+    width: 100%;
+  }
+
+  &.withPadding {
+    padding: 20px;
+  }
+}
+
+.title {
+  padding: 25px 25px 22px;
+  color: colors.$dark-blue;
+  border-bottom: #e8e8ed 1px solid;
+  font-weight: 600;
+  letter-spacing: 0.008em;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+
+  &.lightPadding {
+    padding: 19px 20px 20px;
+  }
+
+  &.roundedBottom {
+    border-radius: 10px;
+  }
+}

airbyte-webapp/src/components/base/Card/Card.tsx

@@ -1,10 +1,45 @@
-import styled from "styled-components";
+import classNames from "classnames";
+import React from "react";
 
-export const Card = styled.div<{ full?: boolean; $withPadding?: boolean }>`
-  width: ${({ full }) => (full ? "100%" : "auto")};
-  background: ${({ theme }) => theme.whiteColor};
-  border-radius: 10px;
-  box-shadow: 0 2px 4px ${({ theme }) => theme.cardShadowColor};
-  padding: ${({ $withPadding }) => ($withPadding ? "20px" : undefined)};
-  //border: 1px solid ${({ theme }) => theme.greyColor20};
-`;
+import { H5 } from "../Titles";
+import styles from "./Card.module.scss";
+
+export interface CardProps {
+  title?: React.ReactNode;
+  className?: string;
+  fullWidth?: boolean;
+  lightPadding?: boolean;
+  withPadding?: boolean;
+  roundedBottom?: boolean;
+}
+
+export const Card: React.FC<CardProps> = ({
+  children,
+  title,
+  className,
+  fullWidth,
+  lightPadding,
+  withPadding,
+  roundedBottom,
+}) => {
+  return (
+    <div
+      className={classNames(className, styles.container, {
+        [styles.fullWidth]: fullWidth,
+        [styles.withPadding]: withPadding,
+      })}
+    >
+      {title ? (
+        <H5
+          className={classNames(styles.title, {
+            [styles.lightPadding]: lightPadding || !children,
+            [styles.roundedBottom]: roundedBottom,
+          })}
+        >
+          {title}
+        </H5>
+      ) : null}
+      {children}
+    </div>
+  );
+};

airbyte-webapp/src/components/index.tsx

@@ -1,7 +1,6 @@
 export * from "./base";
 
 export * from "./ArrayOfObjectsEditor";
-export * from "./ContentCard";
 export * from "./CodeEditor";
 export * from "./DefaultLogoCatalog";
 export * from "./ImageBlock";

airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx

@@ -3,7 +3,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import styled from "styled-components";
 
 import BarChart from "components/BarChart";
-import ContentCard from "components/ContentCard";
+import { Card } from "components/base/Card";
 
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import { useGetUsage } from "packages/cloud/services/workspaces/WorkspacesService";
@@ -16,7 +16,7 @@ export const ChartWrapper = styled.div`
   padding: 0 50px 24px 0;
 `;
 
-const CardBlock = styled(ContentCard)`
+const CardBlock = styled(Card)`
   margin: 10px 0 20px;
 `;
 
@@ -51,7 +51,7 @@ const CreditsUsage: React.FC = () => {
 
   return (
     <>
-      <ContentCard title={<FormattedMessage id="credits.totalUsage" />} light>
+      <Card title={<FormattedMessage id="credits.totalUsage" />} lightPadding>
         <ChartWrapper>
           {data?.creditConsumptionByDay?.length ? (
             <BarChart
@@ -70,9 +70,9 @@ const CreditsUsage: React.FC = () => {
             </Empty>
           )}
         </ChartWrapper>
-      </ContentCard>
+      </Card>
 
-      <CardBlock title={<FormattedMessage id="credits.usagePerConnection" />} light>
+      <CardBlock title={<FormattedMessage id="credits.usagePerConnection" />} lightPadding>
         {data?.creditConsumptionByConnector?.length ? (
           <UsagePerConnectionTable creditConsumption={data.creditConsumptionByConnector} />
         ) : (

airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspaceItem.module.scss

@@ -0,0 +1,19 @@
+@use "../../../../../../scss/colors";
+
+.button {
+  padding: 20px 28px 20px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  cursor: pointer;
+  width: 100%;
+  background: colors.$white;
+  border-radius: 10px;
+  box-shadow: 0 2px 4px colors.$shadowColor;
+  border: none;
+}
+
+.iconColor {
+  color: colors.$blue-400;
+}

airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspaceItem.tsx

@@ -1,28 +1,16 @@
 import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
-import styled from "styled-components";
 
-import { H5, ContentCard } from "components";
+import { H5 } from "components";
 
-const Item = styled(ContentCard)`
-  padding: 20px 28px 20px 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-  cursor: pointer;
-`;
-
-const Arrow = styled(FontAwesomeIcon)`
-  color: ${({ theme }) => theme.primaryColor};
-`;
+import styles from "./WorkspaceItem.module.scss";
 
 const WorkspaceItem: React.FC<{ onClick: (id: string) => void; id: string }> = (props) => (
-  <Item onClick={() => props.onClick(props.id)}>
+  <button className={styles.button} onClick={() => props.onClick(props.id)}>
     <H5 bold>{props.children}</H5>
-    <Arrow icon={faChevronRight} />
-  </Item>
+    <FontAwesomeIcon className={styles.iconColor} icon={faChevronRight} />
+  </button>
 );
 
 export default WorkspaceItem;