🪟 🧹 Splits the imageBlock component in two. (#17479)

* Splits the imageBlock component. * Adds and corrects some styles. * Finishes cleaning up styles and properties. * Cleanup. * Requested changes 1/2. * Requestion changes 2/x, margin not working in className. * Corrects assing className as prop. * Requested changes.
airbytehq · Oct 21, 2022 · 2e0fae4 · 2e0fae4
1 parent 39c5512
commit 2e0fae4
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 82 deletions.
diff --git a/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx b/airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import { ImageBlock } from "components/ui/ImageBlock";
+import { NumberBadge } from "components/ui/NumberBadge";
 
 interface IProps {
   values: Array<{
@@ -13,16 +13,16 @@ interface IProps {
   entity: "source" | "destination";
 }
 
+const Number = styled(NumberBadge)`
+  margin-right: 6px;
+`;
+
 const Content = styled.div<{ enabled?: boolean }>`
   display: flex;
   align-items: center;
   color: ${({ theme, enabled }) => (!enabled ? theme.greyColor40 : "inheret")};
 `;
 
-const Image = styled(ImageBlock)`
-  margin-right: 6px;
-`;
-
 const Connector = styled.div`
   font-weight: normal;
   font-size: 12px;
@@ -34,7 +34,7 @@ const ConnectEntitiesCell: React.FC<IProps> = ({ values, enabled, entity }) => {
   if (values.length === 1) {
     return (
       <Content enabled={enabled}>
-        <Image num={1} />
+        <Number value={1} />
         <div>
           {values[0].name}
           <Connector>{values[0].connector}</Connector>
@@ -44,12 +44,16 @@ const ConnectEntitiesCell: React.FC<IProps> = ({ values, enabled, entity }) => {
   }
 
   if (!values.length) {
-    return null;
+    return (
+      <Content enabled={enabled}>
+        <Number value={0} />
+      </Content>
+    );
   }
 
   return (
     <Content enabled={enabled}>
-      <Image num={values.length} />
+      <Number value={values.length} />
       <div>
         <FormattedMessage id={`tables.${entity}ConnectWithNum`} values={{ num: values.length }} />
         <Connector>{`${values[0].connector}, ${values[1].connector}${values.length > 2 ? ",..." : ""}`}</Connector>

diff --git a/airbyte-webapp/src/components/ui/ImageBlock/ImageBlock.module.scss b/airbyte-webapp/src/components/ui/ImageBlock/ImageBlock.module.scss
@@ -9,35 +9,6 @@
   margin-right: 6px;
 }
 
-.circle {
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  border-radius: 50%;
-  text-align: center;
-  margin-right: 6px;
-  overflow: hidden;
-
-  &.darkBlue {
-    background: colors.$dark-blue-100;
-  }
-
-  &.green {
-    background: colors.$green;
-    color: colors.$white;
-  }
-
-  &.red {
-    background: colors.$red;
-    color: colors.$white;
-  }
-
-  &.blue {
-    background: colors.$blue;
-    color: colors.$white;
-  }
-}
-
 .small {
   border-radius: 0%;
 }
@@ -46,16 +17,3 @@
   max-height: 100%;
   max-width: 100%;
 }
-
-.number {
-  font-family: fonts.$primary;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 10px;
-  color: colors.$white;
-  padding: 3px 0;
-
-  &.light {
-    font-weight: 500;
-  }
-}
diff --git a/airbyte-webapp/src/components/ui/ImageBlock/ImageBlock.stories.tsx b/airbyte-webapp/src/components/ui/ImageBlock/ImageBlock.stories.tsx
@@ -13,6 +13,5 @@ const Template: ComponentStory<typeof ImageBlock> = (args) => <ImageBlock {...ar
 export const Primary = Template.bind({});
 Primary.args = {
   img: undefined,
-  num: undefined,
   small: undefined,
 };
diff --git a/airbyte-webapp/src/components/ui/ImageBlock/ImageBlock.tsx b/airbyte-webapp/src/components/ui/ImageBlock/ImageBlock.tsx
@@ -6,31 +6,19 @@ import { getIcon } from "utils/imageUtils";
 import styles from "./ImageBlock.module.scss";
 
 interface ImageBlockProps {
-  img?: string;
-  num?: number;
+  img: string;
   small?: boolean;
-  color?: string;
-  light?: boolean;
-  ariaLabel?: string;
+  "aria-label"?: string;
 }
 
-export const ImageBlock: React.FC<ImageBlockProps> = ({ img, num, small, color, light, ariaLabel }) => {
-  const imageCircleClassnames = classnames({
-    [styles.circle]: num,
-    [styles.iconContainer]: !num || num === undefined,
-    [styles.small]: small && !num,
-    [styles.darkBlue]: !small && num && !color,
-    [styles.green]: color === "green",
-    [styles.red]: color === "red",
-    [styles.blue]: color === "blue",
-    [styles.light]: light,
+export const ImageBlock: React.FC<ImageBlockProps> = ({ img, small, "aria-label": ariaLabel }) => {
+  const imageCircleClassnames = classnames(styles.iconContainer, {
+    [styles.small]: small,
   });
 
-  const numberStyles = classnames(styles.number, { [styles.light]: light });
-
   return (
     <div className={imageCircleClassnames} aria-label={ariaLabel}>
-      {num ? <div className={numberStyles}>{num}</div> : <div className={styles.icon}>{getIcon(img)}</div>}
+      <div className={styles.icon}>{getIcon(img)}</div>
     </div>
   );
 };
diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss
@@ -0,0 +1,39 @@
+@use "../../../scss/colors";
+@use "../../../scss/fonts";
+
+.circle {
+  height: 20px;
+  width: fit-content;
+  min-width: 20px;
+  border-radius: 10px;
+  padding: 0 4px;
+  text-align: center;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: normal;
+  font-family: fonts.$primary;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 10px;
+
+  &.default {
+    background: colors.$dark-blue-100;
+  }
+
+  &.green {
+    background: colors.$green;
+    color: colors.$black;
+  }
+
+  &.red {
+    background: colors.$red;
+    color: colors.$black;
+  }
+
+  &.blue {
+    background: colors.$blue;
+    color: colors.$white;
+  }
+}
diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.stories.tsx b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.stories.tsx
@@ -0,0 +1,16 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { NumberBadge } from "./NumberBadge";
+
+export default {
+  title: "UI/NumberBadge",
+  component: NumberBadge,
+  argTypes: {},
+} as ComponentMeta<typeof NumberBadge>;
+
+const Template: ComponentStory<typeof NumberBadge> = (args) => <NumberBadge {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  value: 10,
+};
diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
@@ -0,0 +1,26 @@
+import classnames from "classnames";
+import React from "react";
+
+import styles from "./NumberBadge.module.scss";
+
+interface NumberBadgeProps {
+  value: number;
+  color?: "green" | "red" | "blue" | "default";
+  className?: string;
+  "aria-label"?: string;
+}
+
+export const NumberBadge: React.FC<NumberBadgeProps> = ({ value, color, className, "aria-label": ariaLabel }) => {
+  const numberBadgeClassnames = classnames(styles.circle, className, {
+    [styles.default]: !color || color === "default",
+    [styles.green]: color === "green",
+    [styles.red]: color === "red",
+    [styles.blue]: color === "blue",
+  });
+
+  return (
+    <div className={numberBadgeClassnames} aria-label={ariaLabel}>
+      <div>{value}</div>
+    </div>
+  );
+};
diff --git a/airbyte-webapp/src/components/ui/NumberBadge/index.tsx b/airbyte-webapp/src/components/ui/NumberBadge/index.tsx
@@ -0,0 +1 @@
+export * from "./NumberBadge";
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.tsx
@@ -1,6 +1,6 @@
 import { useIntl } from "react-intl";
 
-import { ImageBlock } from "components/ui/ImageBlock";
+import { NumberBadge } from "components/ui/NumberBadge";
 
 import styles from "./DiffIconBlock.module.scss";
 
@@ -15,11 +15,10 @@ export const DiffIconBlock: React.FC<DiffIconBlockProps> = ({ newCount, removedC
   return (
     <div className={styles.iconBlock}>
       {removedCount > 0 && (
-        <ImageBlock
-          num={removedCount}
+        <NumberBadge
+          value={removedCount}
           color="red"
-          light
-          ariaLabel={`${formatMessage(
+          aria-label={`${formatMessage(
             {
               id: "connection.updateSchema.removed",
             },
@@ -31,11 +30,10 @@ export const DiffIconBlock: React.FC<DiffIconBlockProps> = ({ newCount, removedC
         />
       )}
       {newCount > 0 && (
-        <ImageBlock
-          num={newCount}
+        <NumberBadge
+          value={newCount}
           color="green"
-          light
-          ariaLabel={`${formatMessage(
+          aria-label={`${formatMessage(
             {
               id: "connection.updateSchema.new",
             },
@@ -47,11 +45,10 @@ export const DiffIconBlock: React.FC<DiffIconBlockProps> = ({ newCount, removedC
         />
       )}
       {changedCount > 0 && (
-        <ImageBlock
-          num={changedCount}
+        <NumberBadge
+          value={changedCount}
           color="blue"
-          light
-          ariaLabel={`${formatMessage(
+          aria-label={`${formatMessage(
             {
               id: "connection.updateSchema.changed",
             },