From 794ac7a61a55f6f82499769f1ca331e764f4d737 Mon Sep 17 00:00:00 2001
From: yatsukbogdan <yatsukbogdan@gmail.com>
Date: Mon, 19 Dec 2022 00:42:12 +0200
Subject: [PATCH 1/2] Aligns Switch design according to the latest Figma
 updates

---
 .../LabeledSwitch/LabeledSwitch.tsx           |   2 +-
 .../connection/CatalogTree/BulkHeader.tsx     |   2 +-
 .../connection/CatalogTree/FieldRow.tsx       |   4 +-
 .../connection/CatalogTree/StreamHeader.tsx   |   2 +-
 .../CatalogTree/next/BulkEditPanel.tsx        |   7 +-
 .../CatalogTree/next/CatalogTreeTableRow.tsx  |   2 +-
 .../StreamPanelHeader/StreamPanelHeader.tsx   |   2 +-
 .../components/ui/Switch/Switch.module.scss   | 120 +++++++++++-------
 .../components/ui/Switch/Switch.stories.tsx   |   2 +-
 .../src/components/ui/Switch/Switch.tsx       |  34 ++++-
 10 files changed, 115 insertions(+), 62 deletions(-)

diff --git a/airbyte-webapp/src/components/LabeledSwitch/LabeledSwitch.tsx b/airbyte-webapp/src/components/LabeledSwitch/LabeledSwitch.tsx
index 48f2e9880af1..66cac29bd248 100644
--- a/airbyte-webapp/src/components/LabeledSwitch/LabeledSwitch.tsx
+++ b/airbyte-webapp/src/components/LabeledSwitch/LabeledSwitch.tsx
@@ -6,7 +6,7 @@ import { Switch } from "components/ui/Switch";
 
 import styles from "./LabeledSwitch.module.scss";
 
-interface LabeledSwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
+interface LabeledSwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
   message?: React.ReactNode;
   label?: React.ReactNode;
   checkbox?: boolean;
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.tsx b/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.tsx
index 4cbf1ad836d2..4bbbe17f7774 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.tsx
@@ -82,7 +82,7 @@ export const BulkHeader: React.FC = () => {
       <CheckboxCell />
       <ArrowCell />
       <HeaderCell flex={0.4}>
-        <Switch small checked={options.selected} onChange={() => onChangeOption({ selected: !options.selected })} />
+        <Switch size="sm" checked={options.selected} onChange={() => onChangeOption({ selected: !options.selected })} />
       </HeaderCell>
       <HeaderCell />
       <HeaderCell />
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/FieldRow.tsx b/airbyte-webapp/src/components/connection/CatalogTree/FieldRow.tsx
index f2ec7d64fceb..544d08d7a0bd 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/FieldRow.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/FieldRow.tsx
@@ -61,10 +61,10 @@ const FieldRowInner: React.FC<FieldRowProps> = ({
         <Cell flex={0}>
           <SyncCheckboxContainer>
             {!isNestedField && (
-              <Switch small checked={isSelected} onChange={() => onToggleFieldSelected(field.path, !isSelected)} />
+              <Switch size="sm" checked={isSelected} onChange={() => onToggleFieldSelected(field.path, !isSelected)} />
             )}
             {isNestedField && (
-              <Tooltip control={<Switch small disabled checked={isSelected} />}>
+              <Tooltip control={<Switch size="sm" disabled checked={isSelected} />}>
                 <FormattedMessage id="form.field.sync.nestedFieldTooltip" values={{ fieldName: field.path[0] }} />
               </Tooltip>
             )}
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx
index 9a1690c118b2..ea1f29071cbe 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx
@@ -118,7 +118,7 @@ export const StreamHeader: React.FC<StreamHeaderProps> = ({
       <div className={streamHeaderContentStyle}>
         <HeaderCell flex={0.4}>
           <Switch
-            small
+            size="sm"
             checked={stream.config?.selected}
             onChange={onSelectStream}
             disabled={disabled}
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/BulkEditPanel.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/BulkEditPanel.tsx
index e2de78459c7f..800291990c4e 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/next/BulkEditPanel.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/next/BulkEditPanel.tsx
@@ -112,7 +112,12 @@ export const BulkEditPanel: React.FC = () => {
           <FormattedMessage id="sources.sync" />
         </p>
         <div className={styles.syncCellContent}>
-          <Switch small checked={options.selected} onChange={() => onChangeOption({ selected: !options.selected })} />
+          <Switch
+            variant="strong-blue"
+            size="sm"
+            checked={options.selected}
+            onChange={() => onChangeOption({ selected: !options.selected })}
+          />
         </div>
       </HeaderCell>
       <HeaderCell flex={1} className={styles.headerCell}>
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx
index 7da5ec35ec24..8434c84cecc8 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx
@@ -66,7 +66,7 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
         </div>
       )}
       <Cell flex={0.5} flush>
-        <Switch small checked={stream.config?.selected} onChange={onSelectStream} disabled={disabled} />
+        <Switch size="sm" checked={stream.config?.selected} onChange={onSelectStream} disabled={disabled} />
       </Cell>
       {/* <Cell>{fieldCount}</Cell> */}
       <Cell flex={1} title={stream.stream?.namespace || ""}>
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamPanelHeader/StreamPanelHeader.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamPanelHeader/StreamPanelHeader.tsx
index 15ac2571deb1..82f67856d27c 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamPanelHeader/StreamPanelHeader.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamPanelHeader/StreamPanelHeader.tsx
@@ -51,7 +51,7 @@ export const StreamPanelHeader: React.FC<StreamPanelHeaderProps> = ({
   return (
     <div className={styles.container}>
       <div>
-        <Switch small checked={config?.selected} onChange={onSelectedChange} disabled={disabled} />
+        <Switch size="sm" checked={config?.selected} onChange={onSelectedChange} disabled={disabled} />
       </div>
       <div className={styles.properties}>
         <StreamProperty
diff --git a/airbyte-webapp/src/components/ui/Switch/Switch.module.scss b/airbyte-webapp/src/components/ui/Switch/Switch.module.scss
index e1a73ca0ecc2..64dd66fedaf8 100644
--- a/airbyte-webapp/src/components/ui/Switch/Switch.module.scss
+++ b/airbyte-webapp/src/components/ui/Switch/Switch.module.scss
@@ -2,25 +2,53 @@
 @use "scss/variables";
 @use "scss/z-indices";
 
-@mixin knob-transform($position, $small: false) {
+@mixin knob-transform($position, $size) {
   @if $position == left {
     transform: translateX(0);
-  } @else if $small {
-    transform: translateX(10px);
   } @else {
-    transform: translateX(18px);
+    @if $size == lg {
+      transform: translateX(16px);
+    }
+    @if $size == sm {
+      transform: translateX(9px);
+    }
+    @if $size == xs {
+      transform: translateX(7px);
+    }
+  }
+}
+
+@mixin all-sizes-knob-transform($position) {
+  &.sizeLg::before {
+    @include knob-transform($position, lg);
+  }
+
+  &.sizeSm::before {
+    @include knob-transform($position, sm);
+  }
+
+  &.sizeXs::before {
+    @include knob-transform($position, xs);
   }
 }
 
 .switch {
   position: relative;
   display: inline-block;
-  width: 42px;
-  height: 26px;
 
-  &.small {
-    width: 28px;
-    height: 18px;
+  &.sizeLg {
+    width: 42px;
+    height: 26px;
+  }
+
+  &.sizeSm {
+    width: 25px;
+    height: 16px;
+  }
+
+  &.sizeXs {
+    width: 17px;
+    height: 10px;
   }
 
   .slider {
@@ -33,25 +61,39 @@
     background: colors.$grey-100;
     transition: variables.$transition;
     border-radius: variables.$border-radius-pill;
-    border: 1px solid colors.$grey-200;
 
-    &.small::before {
-      height: 16px;
-      width: 16px;
+    &.sizeLg {
+      border: 1px solid colors.$grey-200;
+    }
+
+    &.sizeLg::before {
+      width: 24px;
+      height: 24px;
+      left: 0;
+      top: 0;
+    }
+
+    &.sizeSm::before {
+      height: 14px;
+      width: 14px;
+      top: 1px;
+      left: 1px;
+    }
+
+    &.sizeXs::before {
+      width: 8px;
+      height: 8px;
+      top: 1px;
+      left: 1px;
     }
 
     &::before {
       position: absolute;
       z-index: z-indices.$switchSliderBefore;
       content: "";
-      height: 24px;
-      width: 24px;
-      left: -1px;
-      top: -1px;
       background: colors.$white;
       transition: variables.$transition;
       border-radius: 50%;
-      border: 1px solid colors.$grey-200;
     }
   }
 
@@ -61,54 +103,38 @@
     height: 0;
 
     &:checked + .slider {
-      background-color: colors.$blue;
-
-      &::before {
-        @include knob-transform(right, false);
+      &.variantDefault {
+        background-color: colors.$blue;
       }
 
-      &.small::before {
-        @include knob-transform(right, true);
+      &.variantStrongBlue {
+        background-color: colors.$blue-700;
       }
 
+      @include all-sizes-knob-transform(right);
+
       &.loading {
         background-image: url("./ProgressReverse.svg");
-
-        &::before {
-          @include knob-transform(left, false);
-        }
-
-        &.small::before {
-          @include knob-transform(left, true);
-        }
+        @include all-sizes-knob-transform(left);
       }
     }
 
     &:not(:checked) + .slider {
-      &::before {
-        @include knob-transform(left, false);
-      }
-
-      &.small::before {
-        @include knob-transform(left, true);
-      }
+      @include all-sizes-knob-transform(left);
 
       &.loading {
         background-image: url("./Progress.svg");
-
-        &::before {
-          @include knob-transform(right, false);
-        }
-
-        &.small::before {
-          @include knob-transform(right, true);
-        }
+        @include all-sizes-knob-transform(right);
       }
     }
 
     &:disabled + .slider {
       opacity: 0.5;
       cursor: auto;
+
+      &.loading {
+        opacity: 1;
+      }
     }
   }
 }
diff --git a/airbyte-webapp/src/components/ui/Switch/Switch.stories.tsx b/airbyte-webapp/src/components/ui/Switch/Switch.stories.tsx
index 1780e43bb784..aaf6ead190ed 100644
--- a/airbyte-webapp/src/components/ui/Switch/Switch.stories.tsx
+++ b/airbyte-webapp/src/components/ui/Switch/Switch.stories.tsx
@@ -13,6 +13,6 @@ const Template: ComponentStory<typeof Switch> = (args) => <Switch {...args} />;
 export const SwitchControl = Template.bind({});
 SwitchControl.args = {
   checked: false,
-  small: false,
+  size: "sm",
   loading: false,
 };
diff --git a/airbyte-webapp/src/components/ui/Switch/Switch.tsx b/airbyte-webapp/src/components/ui/Switch/Switch.tsx
index 3c27f54c5db9..cf72a9d73e9a 100644
--- a/airbyte-webapp/src/components/ui/Switch/Switch.tsx
+++ b/airbyte-webapp/src/components/ui/Switch/Switch.tsx
@@ -3,18 +3,39 @@ import React from "react";
 
 import styles from "./Switch.module.scss";
 
-interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  small?: boolean;
+type SwitchSize = "lg" | "sm" | "xs";
+
+type SwitchVariant = "default" | "strong-blue";
+
+interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+  indeterminate?: boolean;
   loading?: boolean;
+  size?: SwitchSize;
+  variant?: SwitchVariant;
 }
 
-export const Switch: React.FC<SwitchProps> = ({ loading, small, checked, value, ...props }) => {
+export const Switch: React.FC<SwitchProps> = ({
+  checked,
+  disabled,
+  indeterminate,
+  loading,
+  size = "lg",
+  value,
+  variant = "default",
+  ...props
+}) => {
   const labelStyle = classnames(styles.switch, {
-    [styles.small]: small,
+    [styles.sizeLg]: size === "lg",
+    [styles.sizeSm]: size === "sm",
+    [styles.sizeXs]: size === "xs",
     [styles.loading]: loading,
   });
   const spanStyle = classnames(styles.slider, {
-    [styles.small]: small,
+    [styles.sizeLg]: size === "lg",
+    [styles.sizeSm]: size === "sm",
+    [styles.sizeXs]: size === "xs",
+    [styles.variantDefault]: variant === "default",
+    [styles.variantStrongBlue]: variant === "strong-blue",
     [styles.loading]: loading,
   });
 
@@ -22,10 +43,11 @@ export const Switch: React.FC<SwitchProps> = ({ loading, small, checked, value,
     <label className={labelStyle}>
       <input
         {...props}
+        aria-checked={indeterminate ? "mixed" : checked}
         className={styles.switchInput}
         type="checkbox"
         value={value}
-        disabled={loading || props.disabled}
+        disabled={loading || disabled}
         checked={checked || !!value}
       />
       <span className={spanStyle} />

From f348f34fda621f9b38444c76d4744cce32dbecff Mon Sep 17 00:00:00 2001
From: yatsukbogdan <yatsukbogdan@gmail.com>
Date: Tue, 20 Dec 2022 16:21:16 +0200
Subject: [PATCH 2/2] Updates snapshots tests, after adding aria-checked
 property for switch input; Adds mixed UI state for Switch component

---
 .../CreateConnectionForm.test.tsx.snap        |  1 +
 .../__snapshots__/BulkEditPanel.test.tsx.snap |  1 +
 .../components/ui/Switch/Switch.module.scss   | 27 +++++++++++++++++--
 .../src/components/ui/Switch/Switch.tsx       |  1 +
 .../ConnectionReplicationTab.test.tsx.snap    |  1 +
 5 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap b/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
index 9401275275a6..0734db46baa0 100644
--- a/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
+++ b/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
@@ -676,6 +676,7 @@ exports[`CreateConnectionForm should render 1`] = `
                               class="<removed-for-snapshot-test>"
                             >
                               <input
+                                aria-checked="true"
                                 checked=""
                                 class="<removed-for-snapshot-test>"
                                 data-testid="pokemon-stream-sync-switch"
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/__snapshots__/BulkEditPanel.test.tsx.snap b/airbyte-webapp/src/components/connection/CatalogTree/next/__snapshots__/BulkEditPanel.test.tsx.snap
index b4dc4d99b82c..3e8513e51161 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/next/__snapshots__/BulkEditPanel.test.tsx.snap
+++ b/airbyte-webapp/src/components/connection/CatalogTree/next/__snapshots__/BulkEditPanel.test.tsx.snap
@@ -35,6 +35,7 @@ exports[`<BulkEditPanel /> should render 1`] = `
             class="<removed-for-snapshot-test>"
           >
             <input
+              aria-checked="false"
               class="<removed-for-snapshot-test>"
               type="checkbox"
               value=""
diff --git a/airbyte-webapp/src/components/ui/Switch/Switch.module.scss b/airbyte-webapp/src/components/ui/Switch/Switch.module.scss
index 64dd66fedaf8..d80cde9fe103 100644
--- a/airbyte-webapp/src/components/ui/Switch/Switch.module.scss
+++ b/airbyte-webapp/src/components/ui/Switch/Switch.module.scss
@@ -5,6 +5,16 @@
 @mixin knob-transform($position, $size) {
   @if $position == left {
     transform: translateX(0);
+  } @else if $position == middle {
+    @if $size == lg {
+      transform: translateX(8px);
+    }
+    @if $size == sm {
+      transform: translateX(4.5px);
+    }
+    @if $size == xs {
+      transform: translateX(3.5px);
+    }
   } @else {
     @if $size == lg {
       transform: translateX(16px);
@@ -102,7 +112,7 @@
     width: 0;
     height: 0;
 
-    &:checked + .slider {
+    &[aria-checked="true"] + .slider {
       &.variantDefault {
         background-color: colors.$blue;
       }
@@ -119,7 +129,7 @@
       }
     }
 
-    &:not(:checked) + .slider {
+    &[aria-checked="false"] + .slider {
       @include all-sizes-knob-transform(left);
 
       &.loading {
@@ -128,6 +138,19 @@
       }
     }
 
+    &[aria-checked="mixed"] + .slider {
+      &.variantDefault {
+        background-color: colors.$blue-200;
+      }
+
+      &.loading {
+        background-color: colors.$blue-100;
+        background-image: url("./ProgressReverse.svg");
+      }
+
+      @include all-sizes-knob-transform(middle);
+    }
+
     &:disabled + .slider {
       opacity: 0.5;
       cursor: auto;
diff --git a/airbyte-webapp/src/components/ui/Switch/Switch.tsx b/airbyte-webapp/src/components/ui/Switch/Switch.tsx
index cf72a9d73e9a..77bc118e1528 100644
--- a/airbyte-webapp/src/components/ui/Switch/Switch.tsx
+++ b/airbyte-webapp/src/components/ui/Switch/Switch.tsx
@@ -36,6 +36,7 @@ export const Switch: React.FC<SwitchProps> = ({
     [styles.sizeXs]: size === "xs",
     [styles.variantDefault]: variant === "default",
     [styles.variantStrongBlue]: variant === "strong-blue",
+    [styles.indeterminate]: indeterminate,
     [styles.loading]: loading,
   });
 
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap
index ef733dd7f281..2a9d6c81c0ea 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap
@@ -623,6 +623,7 @@ exports[`ConnectionReplicationTab should render 1`] = `
                               class="<removed-for-snapshot-test>"
                             >
                               <input
+                                aria-checked="true"
                                 checked=""
                                 class="<removed-for-snapshot-test>"
                                 data-testid="pokemon-stream-sync-switch"