Merge pull request #1086 from Yayo-Arellano/feature/ep-5383

feat: Add support for loading state on switch component #1085

Author: Yayo-Arellano

src/@next/Switch/Switch.stories.tsx

@@ -17,6 +17,7 @@ export default {
 const DefaultTemplate: Story = args => {
   const [checked, setChecked] = useState(args.checked);
   const [isDisabled, setIsDisabled] = useState(args.disabled);
+  const [loading, setLoading] = useState(args.loading);
 
   return (
     <>
@@ -25,10 +26,16 @@ const DefaultTemplate: Story = args => {
         label="Set disable"
         onChange={() => setIsDisabled(!isDisabled)}
       />
+      <Checkbox
+        checked={loading}
+        label="Set loading"
+        onChange={() => setLoading(!loading)}
+      />
       <div>
         <Switch
           {...args}
           disabled={isDisabled}
+          loading={loading}
           value={'switch'}
           onChange={() => setChecked(!checked)}
         />
@@ -44,16 +51,24 @@ Default.args = {};
 const SwitchWithIconTemplate: Story = args => {
   const [checked, setChecked] = useState(args.checked);
   const [isDisabled, setIsDisabled] = useState(args.disabled);
+  const [loading, setLoading] = useState(args.loading);
+
   return (
     <>
       <div>The checkbox checked is {checked ? 'true' : 'false'}</div>
       <Checkbox
         label="Set disable"
         onChange={() => setIsDisabled(!isDisabled)}
       />
+      <Checkbox
+        checked={loading}
+        label="Set loading"
+        onChange={() => setLoading(!loading)}
+      />
       <div>
         <Switch
           {...args}
+          loading={loading}
           disabled={isDisabled}
           value={'switch'}
           onChange={() => setChecked(!checked)}
@@ -71,18 +86,26 @@ WithIcon.args = {};
 const SwitchWithTextTemplate: Story = args => {
   const [checked, setChecked] = useState(args.checked);
   const [isDisabled, setIsDisabled] = useState(args.disabled);
+  const [loading, setLoading] = useState(args.loading);
+
   return (
     <>
       <div>The checkbox checked is {checked ? 'true' : 'false'}</div>
       <Checkbox
         label="Set disable"
         onChange={() => setIsDisabled(!isDisabled)}
       />
+      <Checkbox
+        checked={loading}
+        label="Set loading"
+        onChange={() => setLoading(!loading)}
+      />
       <div>
         <Switch
           {...args}
           disabled={isDisabled}
           value={'switch'}
+          loading={loading}
           onChange={() => setChecked(!checked)}
           checkedText="Active"
           uncheckedText="Inactive"
@@ -99,19 +122,26 @@ WithText.args = {};
 const SwitchWithTextAndCustomBackgroundColorTemplate: Story = args => {
   const [checked, setChecked] = useState(args.checked);
   const [isDisabled, setIsDisabled] = useState(args.disabled);
+  const [loading, setLoading] = useState(args.loading);
   return (
     <>
       <div>The checkbox checked is {checked ? 'true' : 'false'}</div>
       <Checkbox
         label="Set disable"
         onChange={() => setIsDisabled(!isDisabled)}
       />
+      <Checkbox
+        checked={loading}
+        label="Set loading"
+        onChange={() => setLoading(!loading)}
+      />
       <div>
         <Switch
           {...args}
           disabled={isDisabled}
           value={'switch'}
           onChange={() => setChecked(!checked)}
+          loading={loading}
           checkedText="Active"
           uncheckedText="Inactive"
           checkedBackgroundColor={Green.B61}

src/@next/Switch/Switch.tsx

@@ -12,6 +12,7 @@ export interface SwitchProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
   checked?: boolean;
   disabled?: boolean;
+  loading?: boolean;
   onChange: () => void;
   value: string;
   withIcon?: boolean;
@@ -27,6 +28,7 @@ export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
       disabled,
       onChange,
       value,
+      loading,
       withIcon,
       checkedText,
       uncheckedText,
@@ -74,7 +76,7 @@ export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
         <InputStyle
           value={value}
           {...otherProps}
-          disabled={disabled}
+          disabled={disabled || loading}
           checked={checked}
           type="checkbox"
           onChange={onChange}
@@ -85,6 +87,7 @@ export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
         />
         <SwitchStyle
           data-disabled={disabled}
+          data-loading={loading}
           data-with-icon={!withText && withIcon}
           data-with-text={withText}
         >

src/@next/Switch/SwitchStyle.tsx

@@ -2,6 +2,13 @@ import styled from 'styled-components';
 import { Breakpoints, Spacing, Typography } from '..';
 
 import { Blue, Neutral } from '../utilities/colors';
+import { keyframes } from 'styled-components';
+
+const spin = keyframes`
+  to {
+    transform: rotate(360deg);
+  }
+`;
 
 export const SwitchTextStyle = styled(Typography)``;
 
@@ -67,13 +74,25 @@ export const SwitchStyle = styled.div`
     right: 0;
     border-radius: 16px;
     background: ${Neutral.B100};
-    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     transform: scale(1);
     @media (max-width: ${Breakpoints.large}) {
       width: 14px;
       height: 14px;
     }
   }
+
+  &[data-loading='true']::before {
+    border: 2px solid ${Neutral.B100};
+    border-top-color: transparent;
+    background: transparent;
+    animation: ${spin} 0.6s linear infinite;
+    transform: rotate(0deg);
+  }
+
+  &[data-loading='true'] {
+    pointer-events: none;
+  }
 `;
 
 export const InputStyle = styled.input<{

test/e2e/switch/switch-with-icon.spec.ts

@@ -32,6 +32,22 @@ test('disabled and checked', async ({ page }) => {
   );
 });
 
+test('loading and unchecked', async ({ page }) => {
+  const switchPage = getPage(page);
+  await switchPage.goto('args=loading:true;checked:false');
+  await expect(switchPage.container).toHaveScreenshot(
+    'switch-loading-unchecked.png'
+  );
+});
+
+test('loading and checked', async ({ page }) => {
+  const switchPage = getPage(page);
+  await switchPage.goto('args=loading:true;checked:true');
+  await expect(switchPage.container).toHaveScreenshot(
+    'switch-loading-checked.png'
+  );
+});
+
 test('mobile - default', async ({ page }) => {
   page.setViewportSize({ width: 768, height: 600 });
   const switchPage = getPage(page);
@@ -65,3 +81,21 @@ test('mobile - disabled and checked', async ({ page }) => {
     'switch-mobile-disabled-checked.png'
   );
 });
+
+test('mobile - loading and unchecked', async ({ page }) => {
+  page.setViewportSize({ width: 768, height: 600 });
+  const switchPage = getPage(page);
+  await switchPage.goto('args=loading:true;checked:false');
+  await expect(switchPage.container).toHaveScreenshot(
+    'switch-mobile-loading-unchecked.png'
+  );
+});
+
+test('mobile - loading and checked', async ({ page }) => {
+  page.setViewportSize({ width: 768, height: 600 });
+  const switchPage = getPage(page);
+  await switchPage.goto('args=loading:true;checked:true');
+  await expect(switchPage.container).toHaveScreenshot(
+    'switch-mobile-loading-checked.png'
+  );
+});