From 6a0c3ca2d2af7383440e285985558f5e52c8cbc8 Mon Sep 17 00:00:00 2001
From: Szymon Graczyk <s.graczyk@livechat.com>
Date: Tue, 26 Jul 2022 12:35:39 +0200
Subject: [PATCH] #344 Handle Switch disabled state visually (#353)

* Lock icon added for the disabled state,
* Applied proper color tokens for `hover`, `enabled`, and `disabled` cases,
* Changed naming convention as `enabled/disabled` was easy to be confused with `checked (on)/unchecked (off)`,
* Added multiple stories representing the changes,
* Used `--color-action-default-rgb` for `box-shadow`
* Added `StoryDescriptor` component for wrapping components that require additional description
---
 .../.storybook/preview-head.html              | 16 ++++--
 .../src/components/Button/Button.stories.tsx  | 10 ++--
 .../FileUploadProgress.stories.tsx            |  2 +-
 .../src/components/Loader/Loader.stories.tsx  |  2 +-
 .../src/components/Search/Search.stories.tsx  | 48 ++++++++----------
 .../src/components/Switch/Switch.module.scss  | 44 +++++++++++------
 .../src/components/Switch/Switch.spec.tsx     |  7 ++-
 .../src/components/Switch/Switch.stories.tsx  | 49 +++++++++++++------
 .../src/components/Switch/Switch.tsx          | 32 ++++++++----
 .../src/components/Tag/Tag.stories.tsx        |  8 +--
 .../UploadBar/UploadBar.stories.tsx           |  4 +-
 .../stories/components/StoryDescriptor.tsx    | 15 ++++++
 12 files changed, 149 insertions(+), 88 deletions(-)
 create mode 100644 packages/react-components/src/stories/components/StoryDescriptor.tsx

diff --git a/packages/react-components/.storybook/preview-head.html b/packages/react-components/.storybook/preview-head.html
index 219ad10b2..bf950f523 100644
--- a/packages/react-components/.storybook/preview-head.html
+++ b/packages/react-components/.storybook/preview-head.html
@@ -8,10 +8,20 @@
     color: var(--content-default);
   }
 
-  .spacer {
+  .story-container {
+    margin-bottom: 10px;
+  }
+
+  .story-title {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 5px;
+  }
+
+  .story-spacer {
     margin-bottom: 5px;
   }
-  .spacer > * + * {
+  .story-spacer > * + * {
     margin-left: 5px;
   }
 
@@ -24,7 +34,7 @@
 
   * {
     box-sizing: border-box;
-    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI,
+    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, Segoe UI,
       Helvetica Neue, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
   }
diff --git a/packages/react-components/src/components/Button/Button.stories.tsx b/packages/react-components/src/components/Button/Button.stories.tsx
index 485909cf7..54f4a8191 100644
--- a/packages/react-components/src/components/Button/Button.stories.tsx
+++ b/packages/react-components/src/components/Button/Button.stories.tsx
@@ -51,7 +51,7 @@ button.args = {
 
 export const kinds = (): React.ReactElement => (
   <div>
-    <div className="spacer">
+    <div className="story-spacer">
       <Button>Basic</Button>
       <Button kind="primary">Primary</Button>
       <Button kind="secondary">Secondary</Button>
@@ -65,7 +65,7 @@ export const kinds = (): React.ReactElement => (
 
 export const states = (): React.ReactElement => (
   <div>
-    <div className="spacer">
+    <div className="story-spacer">
       <Button disabled>Disabled</Button>
       <Button disabled kind="primary">
         Disabled
@@ -86,7 +86,7 @@ export const states = (): React.ReactElement => (
         Disabled
       </Button>
     </div>
-    <div className="spacer">
+    <div className="story-spacer">
       <Button loading>Loading</Button>
       <Button loading kind="primary">
         Loading
@@ -112,7 +112,7 @@ export const states = (): React.ReactElement => (
 
 export const sizes = (): React.ReactElement => (
   <>
-    <div className="spacer">
+    <div className="story-spacer">
       <Button size="compact" kind="primary">
         Compact
       </Button>
@@ -123,7 +123,7 @@ export const sizes = (): React.ReactElement => (
         Large
       </Button>
     </div>
-    <div className="spacer">
+    <div className="story-spacer">
       <Button
         icon={<Icon source={MaterialIcons.AddCircle} />}
         size="compact"
diff --git a/packages/react-components/src/components/FileUploadProgress/FileUploadProgress.stories.tsx b/packages/react-components/src/components/FileUploadProgress/FileUploadProgress.stories.tsx
index 74d578ba7..4e8c68067 100644
--- a/packages/react-components/src/components/FileUploadProgress/FileUploadProgress.stories.tsx
+++ b/packages/react-components/src/components/FileUploadProgress/FileUploadProgress.stories.tsx
@@ -53,7 +53,7 @@ export const FileUploadProgressStates: React.FC = () => {
 
   return (
     <div>
-      <div className="spacer" style={{ marginBottom: 30 }}>
+      <div className="story-spacer" style={{ marginBottom: 30 }}>
         <Button onClick={() => setStatus('normal')}>Default</Button>
         <Button kind="primary" onClick={() => setStatus('success')}>
           Success
diff --git a/packages/react-components/src/components/Loader/Loader.stories.tsx b/packages/react-components/src/components/Loader/Loader.stories.tsx
index 67a4a4c21..a711c43c7 100644
--- a/packages/react-components/src/components/Loader/Loader.stories.tsx
+++ b/packages/react-components/src/components/Loader/Loader.stories.tsx
@@ -9,7 +9,7 @@ export default {
 } as ComponentMeta<typeof Loader>;
 
 export const sizes = (): React.ReactElement => (
-  <div className="spacer">
+  <div className="story-spacer">
     <Loader size="small" />
     <Loader size="medium" />
     <Loader size="large"></Loader>
diff --git a/packages/react-components/src/components/Search/Search.stories.tsx b/packages/react-components/src/components/Search/Search.stories.tsx
index 0b5df928f..f87577c98 100644
--- a/packages/react-components/src/components/Search/Search.stories.tsx
+++ b/packages/react-components/src/components/Search/Search.stories.tsx
@@ -1,23 +1,24 @@
 import * as React from 'react';
 import { ComponentMeta, Story } from '@storybook/react';
 
+import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
+
 import {
   SearchInput as SearchComponent,
   ISearchInputProps,
   SearchSize,
 } from './Search';
 
+const commonWidth: React.CSSProperties = { width: 300 };
+
 export default {
   title: 'Components/Search',
   component: SearchComponent,
   argTypes: { onChange: { action: 'changed' } },
 } as ComponentMeta<typeof SearchComponent>;
 
-const containerStyles = { width: 300, marginBottom: 15 };
-const textStyles = { marginBottom: 5, fontSize: 15 };
-
 const StoryTemplate: Story<ISearchInputProps> = (args: ISearchInputProps) => (
-  <div style={{ width: 300 }}>
+  <div style={commonWidth}>
     <SearchComponent {...args} />
   </div>
 );
@@ -26,42 +27,35 @@ export const Search = StoryTemplate.bind({});
 Search.args = {};
 
 export const States = (args: ISearchInputProps): React.ReactElement => (
-  <div>
-    <div style={containerStyles}>
-      <div style={textStyles}>Basic</div>
+  <div style={commonWidth}>
+    <StoryDescriptor title="Basic">
       <SearchComponent {...args} />
-    </div>
-    <div style={containerStyles}>
-      <div style={textStyles}>Disabled</div>
+    </StoryDescriptor>
+    <StoryDescriptor title="Disabled">
       <SearchComponent {...args} isDisabled />
-    </div>
-    <div style={containerStyles}>
-      <div style={textStyles}>Loading</div>
+    </StoryDescriptor>
+    <StoryDescriptor title="Loading">
       <SearchComponent {...args} isLoading />
-    </div>
-    <div style={containerStyles}>
-      <div style={textStyles}>Collapsable</div>
+    </StoryDescriptor>
+    <StoryDescriptor title="Collapsible">
       <SearchComponent {...args} isCollapsable />
-    </div>
+    </StoryDescriptor>
   </div>
 );
 
 States.args = {};
 
 export const Sizes = (args: ISearchInputProps): React.ReactElement => (
-  <div>
-    <div style={containerStyles}>
-      <div style={textStyles}>Compact</div>
+  <div style={commonWidth}>
+    <StoryDescriptor title="Compact">
       <SearchComponent {...args} size={SearchSize.Compact} />
-    </div>
-    <div style={containerStyles}>
-      <div style={textStyles}>Medium</div>
+    </StoryDescriptor>
+    <StoryDescriptor title="Medium">
       <SearchComponent {...args} size={SearchSize.Medium} />
-    </div>
-    <div style={containerStyles}>
-      <div style={textStyles}>Large</div>
+    </StoryDescriptor>
+    <StoryDescriptor title="Large">
       <SearchComponent {...args} size={SearchSize.Large} />
-    </div>
+    </StoryDescriptor>
   </div>
 );
 
diff --git a/packages/react-components/src/components/Switch/Switch.module.scss b/packages/react-components/src/components/Switch/Switch.module.scss
index 15634b897..c4f411299 100644
--- a/packages/react-components/src/components/Switch/Switch.module.scss
+++ b/packages/react-components/src/components/Switch/Switch.module.scss
@@ -19,14 +19,14 @@ $compact-move: $compact-width - $compact-size;
   position: relative;
 
   &:hover {
-    .#{$base-class}__track {
-      &--enabled {
-        background-color: var(--color-positive-default);
-      }
+    $hovered-track: #{$base-class}__track;
 
-      &--disabled {
-        background-color: var(--surface-secondary-default);
-      }
+    .#{$hovered-track}--enabled.#{$hovered-track}--on {
+      background-color: var(--color-positive-hover);
+    }
+
+    .#{$hovered-track}--enabled.#{$hovered-track}--off {
+      background-color: var(--surface-secondary-hover);
     }
   }
 
@@ -46,12 +46,15 @@ $compact-move: $compact-width - $compact-size;
     margin: 0;
     opacity: 0;
     width: 100%;
+
+    &--disabled {
+      cursor: not-allowed;
+    }
   }
 
   &__input:focus + .#{$base-class}__container {
     .#{$base-class}__track {
-      //TODO use shadow token instead of hex color
-      box-shadow: 0 0 1px 2px rgba(#4379d6, 0.7);
+      box-shadow: 0 0 1px 2px rgba(var(--color-action-default-rgb), 0.7);
     }
   }
 
@@ -74,18 +77,29 @@ $compact-move: $compact-width - $compact-size;
     transition-property: background-color;
     transition-timing-function: $switch-transition-timing-function;
 
-    &--enabled {
+    &--on#{&}--enabled {
       background-color: var(--color-positive-default);
     }
 
-    &--disabled {
+    &--on#{&}--disabled {
+      background-color: var(--color-positive-disabled);
+    }
+
+    &--off#{&}--enabled {
       background-color: var(--surface-secondary-default);
     }
+
+    &--off#{&}--disabled {
+      background-color: var(--surface-secondary-disabled);
+    }
   }
 
   &__slider {
+    align-items: center;
     background: var(--content-white-locked);
     border-radius: 50%;
+    display: flex;
+    justify-content: center;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -97,12 +111,12 @@ $compact-move: $compact-width - $compact-size;
       height: calc(#{$basic-size});
       width: calc(#{$basic-size});
 
-      &--enabled {
+      &--on {
         left: calc(#{$basic-move} - 2px);
         right: 2px;
       }
 
-      &--disabled {
+      &--off {
         left: 2px;
         right: calc(#{$basic-move} - 2px);
       }
@@ -112,12 +126,12 @@ $compact-move: $compact-width - $compact-size;
       height: calc(#{$compact-size});
       width: calc(#{$compact-size});
 
-      &--enabled {
+      &--on {
         left: calc(#{$compact-move} - 2px);
         right: 2px;
       }
 
-      &--disabled {
+      &--off {
         left: 2px;
         right: calc(#{$compact-move} - 2px);
       }
diff --git a/packages/react-components/src/components/Switch/Switch.spec.tsx b/packages/react-components/src/components/Switch/Switch.spec.tsx
index a0674badd..b7ed29f6b 100644
--- a/packages/react-components/src/components/Switch/Switch.spec.tsx
+++ b/packages/react-components/src/components/Switch/Switch.spec.tsx
@@ -13,7 +13,7 @@ describe('Switch', () => {
     expect(checkbox.checked).toEqual(false);
   });
 
-  it('should change state to enabled when user clicks on disabled switch', () => {
+  it('should change state to checked (on) when user clicks on unchecked (off) switch', () => {
     const { getByRole } = render(<Switch />);
     const checkbox = getByRole('checkbox') as HTMLInputElement;
     expect(checkbox.checked).toEqual(false);
@@ -21,7 +21,7 @@ describe('Switch', () => {
     expect(checkbox.checked).toEqual(true);
   });
 
-  it('should change state to disabled when user clicks on enabled switch', () => {
+  it('should change state to unchecked (off) when user clicks on checked (on) switch', () => {
     const { getByRole } = render(<Switch on={true} />);
     const checkbox = getByRole('checkbox') as HTMLInputElement;
     expect(checkbox.checked).toEqual(true);
@@ -29,7 +29,7 @@ describe('Switch', () => {
     expect(checkbox.checked).toEqual(false);
   });
 
-  it('should be enabled if defaultOn is set to true', () => {
+  it('should be checked (on) if defaultOn is set to true', () => {
     const { getByRole } = render(<Switch defaultOn={true} />);
     const checkbox = getByRole('checkbox') as HTMLInputElement;
     expect(checkbox.checked).toEqual(true);
@@ -37,4 +37,3 @@ describe('Switch', () => {
     expect(checkbox.checked).toEqual(false);
   });
 });
-1;
diff --git a/packages/react-components/src/components/Switch/Switch.stories.tsx b/packages/react-components/src/components/Switch/Switch.stories.tsx
index 16f06a466..a9161a5ca 100644
--- a/packages/react-components/src/components/Switch/Switch.stories.tsx
+++ b/packages/react-components/src/components/Switch/Switch.stories.tsx
@@ -1,23 +1,40 @@
 import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { ComponentMeta, Story } from '@storybook/react';
 
-import { Switch as SwitchComponent, SwitchProps } from './Switch';
-import noop from '../../utils/noop';
+import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
+
+import { Switch, SwitchProps } from './Switch';
 
 export default {
   title: 'Components/Switch',
-  component: SwitchComponent,
-} as ComponentMeta<typeof SwitchComponent>;
+  component: Switch,
+} as ComponentMeta<typeof Switch>;
+
+export const Default: Story<SwitchProps> = (args: SwitchProps) => (
+  <Switch {...args} onChange={undefined} />
+);
+Default.storyName = 'Switch';
 
-export const Switch = (args: SwitchProps): React.ReactElement => {
-  return (
-    <div>
-      <SwitchComponent {...args} />
-    </div>
-  );
-};
+export const States = (): JSX.Element => (
+  <>
+    <StoryDescriptor title="Enabled">
+      <Switch on={true} />
+      <Switch on={false} />
+    </StoryDescriptor>
+    <StoryDescriptor title="Disabled">
+      <Switch on={true} disabled={true} />
+      <Switch on={false} disabled={true} />
+    </StoryDescriptor>
+  </>
+);
 
-Switch.args = {
-  size: 'basic',
-  onChange: noop,
-};
+export const Sizes = (): JSX.Element => (
+  <>
+    <StoryDescriptor title="Compact">
+      <Switch size="compact" />
+    </StoryDescriptor>
+    <StoryDescriptor title="Basic">
+      <Switch size="basic" />
+    </StoryDescriptor>
+  </>
+);
diff --git a/packages/react-components/src/components/Switch/Switch.tsx b/packages/react-components/src/components/Switch/Switch.tsx
index 248b56e27..d9ba8d8a1 100644
--- a/packages/react-components/src/components/Switch/Switch.tsx
+++ b/packages/react-components/src/components/Switch/Switch.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import cx from 'clsx';
+import { LockBlack as LockIcon } from '@livechat/design-system-icons/react/material';
 
+import { Icon, IconSize } from '../../components/Icon';
 import noop from '../../utils/noop';
 
 import styles from './Switch.module.scss';
@@ -30,17 +32,19 @@ export const Switch: React.FC<SwitchProps> = ({
   innerRef,
   ...props
 }) => {
-  const [enabled, setEnabled] = React.useState(() =>
+  const [checked, setChecked] = React.useState(() =>
     on !== undefined ? on : defaultOn
   );
 
   React.useEffect(() => {
     if (on !== undefined) {
-      setEnabled(on);
+      setChecked(on);
     }
   }, [on]);
 
-  const valueStyles = enabled ? 'enabled' : 'disabled';
+  const iconSize: IconSize = size === 'basic' ? 'small' : 'xsmall';
+  const toggleStyles = checked ? 'on' : 'off';
+  const availabilityStyles = disabled ? 'disabled' : 'enabled';
   const mergedClassNames = cx(
     styles[baseClass],
     styles[`${baseClass}--${size}`],
@@ -50,20 +54,23 @@ export const Switch: React.FC<SwitchProps> = ({
   const handleChange = (e: React.FormEvent) => {
     const hasOnChangePassed = onChange !== noop;
     if (hasOnChangePassed) {
-      onChange(e, enabled);
+      onChange(e, checked);
       return;
     }
     e.stopPropagation();
-    setEnabled((prevEnabled) => !prevEnabled);
+    setChecked((prevEnabled) => !prevEnabled);
   };
 
   return (
     <span className={mergedClassNames}>
       <input
         type="checkbox"
-        className={styles[`${baseClass}__input`]}
+        className={cx(
+          styles[`${baseClass}__input`],
+          styles[`${baseClass}__input--${availabilityStyles}`]
+        )}
         onChange={handleChange}
-        checked={enabled}
+        checked={checked}
         name={name}
         ref={innerRef}
         disabled={disabled}
@@ -74,16 +81,21 @@ export const Switch: React.FC<SwitchProps> = ({
         <span
           className={cx(
             styles[`${baseClass}__track`],
-            styles[`${baseClass}__track--${valueStyles}`]
+            styles[`${baseClass}__track--${toggleStyles}`],
+            styles[`${baseClass}__track--${availabilityStyles}`]
           )}
         />
         <span
           className={cx(
             styles[`${baseClass}__slider`],
             styles[`${baseClass}__slider--${size}`],
-            styles[`${baseClass}__slider--${size}--${valueStyles}`]
+            styles[`${baseClass}__slider--${size}--${toggleStyles}`]
           )}
-        />
+        >
+          {disabled && (
+            <Icon size={iconSize} source={LockIcon} kind={'primary'} />
+          )}
+        </span>
       </span>
     </span>
   );
diff --git a/packages/react-components/src/components/Tag/Tag.stories.tsx b/packages/react-components/src/components/Tag/Tag.stories.tsx
index d72e78a9b..90c0165ec 100644
--- a/packages/react-components/src/components/Tag/Tag.stories.tsx
+++ b/packages/react-components/src/components/Tag/Tag.stories.tsx
@@ -38,7 +38,7 @@ const avatar =
 
 export const kinds = ({ children, ...args }: TagProps): React.ReactElement => {
   return (
-    <div className="spacer" style={{ display: 'flex' }}>
+    <div className="story-spacer" style={{ display: 'flex' }}>
       <TagComponent {...args} kind="default">
         {children}
       </TagComponent>
@@ -67,7 +67,7 @@ export const kindsWithOutline = ({
   ...args
 }: TagProps): React.ReactElement => {
   return (
-    <div className="spacer" style={{ display: 'flex' }}>
+    <div className="story-spacer" style={{ display: 'flex' }}>
       <TagComponent {...args} kind="default" outline>
         {children}
       </TagComponent>
@@ -96,7 +96,7 @@ export const kindsWithIcon = ({
   ...args
 }: TagProps): React.ReactElement => {
   return (
-    <div className="spacer" style={{ display: 'flex' }}>
+    <div className="story-spacer" style={{ display: 'flex' }}>
       <TagComponent {...args} kind="default">
         {children}
       </TagComponent>
@@ -126,7 +126,7 @@ export const kindsWithAvatar = ({
   ...args
 }: TagProps): React.ReactElement => {
   return (
-    <div className="spacer" style={{ display: 'flex' }}>
+    <div className="story-spacer" style={{ display: 'flex' }}>
       <TagComponent {...args} kind="default" avatar={avatar}>
         {children}
       </TagComponent>
diff --git a/packages/react-components/src/components/UploadBar/UploadBar.stories.tsx b/packages/react-components/src/components/UploadBar/UploadBar.stories.tsx
index 2159d6c04..a87a9a458 100644
--- a/packages/react-components/src/components/UploadBar/UploadBar.stories.tsx
+++ b/packages/react-components/src/components/UploadBar/UploadBar.stories.tsx
@@ -68,7 +68,7 @@ export const UploadBarWithSingleElement: React.FC = () => {
 
   return (
     <div>
-      <div className="spacer" style={{ marginBottom: 30 }}>
+      <div className="story-spacer" style={{ marginBottom: 30 }}>
         <Button onClick={() => setStatus('normal')}>Default</Button>
         <Button kind="primary" onClick={() => setStatus('success')}>
           Success
@@ -100,7 +100,7 @@ export const UploadBarWithMultipleElements: React.FC = () => {
 
   return (
     <div>
-      <div className="spacer" style={{ marginBottom: 30 }}>
+      <div className="story-spacer" style={{ marginBottom: 30 }}>
         <Button onClick={() => setStatus('normal')}>Default</Button>
         <Button kind="primary" onClick={() => setStatus('success')}>
           Success
diff --git a/packages/react-components/src/stories/components/StoryDescriptor.tsx b/packages/react-components/src/stories/components/StoryDescriptor.tsx
new file mode 100644
index 000000000..dd2c31858
--- /dev/null
+++ b/packages/react-components/src/stories/components/StoryDescriptor.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+type StoryDescriptorProps = {
+  title: string;
+};
+
+export const StoryDescriptor: React.FC<StoryDescriptorProps> = ({
+  title,
+  children,
+}) => (
+  <div className="story-container">
+    <div className="story-title">{title}</div>
+    <div className="story-spacer">{children}</div>
+  </div>
+);