From 5887befbb317e76e1437481420027f9dae310648 Mon Sep 17 00:00:00 2001
From: Daniel Beck <daniel@beck.win>
Date: Thu, 20 Oct 2022 14:04:10 +0200
Subject: [PATCH] refactor(switch): new theme

---
 .../src/components/data-grid/readme.md        |   1 +
 .../switch/__snapshots__/switch.spec.ts.snap  |   2 +-
 .../src/components/switch/readme.md           |   1 +
 .../src/components/switch/switch.css          | 109 ++++++++++++++++--
 .../src/components/switch/switch.tsx          |   3 +
 packages/components/src/html/index.html       |  13 +--
 .../stories/components/switch/ScaleSwitch.vue |   2 +
 .../components/switch/switch.stories.mdx      |  99 ++++++++++++++--
 .../visual-tests/src/switch.visual.spec.js    |  71 ++++++------
 9 files changed, 233 insertions(+), 68 deletions(-)

diff --git a/packages/components/src/components/data-grid/readme.md b/packages/components/src/components/data-grid/readme.md
index d9c3aa9b75..45c878db27 100644
--- a/packages/components/src/components/data-grid/readme.md
+++ b/packages/components/src/components/data-grid/readme.md
@@ -85,6 +85,7 @@ graph TD;
   scale-checkbox --> scale-icon-action-success
   scale-checkbox --> scale-icon-alert-information
   scale-checkbox --> scale-icon-alert-error
+  scale-switch --> scale-icon-action-success
   scale-progress-bar --> scale-icon-alert-error
   scale-progress-bar --> scale-icon-alert-success
   scale-text-field --> scale-helper-text
diff --git a/packages/components/src/components/switch/__snapshots__/switch.spec.ts.snap b/packages/components/src/components/switch/__snapshots__/switch.spec.ts.snap
index 2611cb75c0..49277dcaf3 100644
--- a/packages/components/src/components/switch/__snapshots__/switch.spec.ts.snap
+++ b/packages/components/src/components/switch/__snapshots__/switch.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`Switch should match snapshot 1`] = `
 <scale-switch>
-  <div class="switch switch--focus-visible-not-supported">
+  <div class="switch switch--focus-visible-not-supported switch--size-large">
     <label class="switch__wrapper" id="switch-0-label">
       <input aria-labelledby="switch-0-label" class="switch__control" id="switch-0" type="checkbox">
       <div aria-hidden="true" class="switch__toggle">
diff --git a/packages/components/src/components/switch/readme.md b/packages/components/src/components/switch/readme.md
index 5cd6a1b1e4..b4285f7499 100644
--- a/packages/components/src/components/switch/readme.md
+++ b/packages/components/src/components/switch/readme.md
@@ -14,6 +14,7 @@
 | `inputId`  | `input-id` | (optional) Input id            | `string`  | `undefined` |
 | `label`    | `label`    | (optional) switch label        | `string`  | `undefined` |
 | `name`     | `name`     | (optional) Input name          | `string`  | `undefined` |
+| `size`     | `size`     |                                | `string`  | `'large'`   |
 | `styles`   | `styles`   | (optional) Injected CSS styles | `string`  | `undefined` |
 
 
diff --git a/packages/components/src/components/switch/switch.css b/packages/components/src/components/switch/switch.css
index 5b1bab4e2b..399456a974 100644
--- a/packages/components/src/components/switch/switch.css
+++ b/packages/components/src/components/switch/switch.css
@@ -16,7 +16,8 @@ scale-switch {
   --radius: 1em;
   --transition-duration: var(--telekom-motion-duration-immediate);
   --transition-easing: var(--telekom-motion-easing-standard);
-  --shadow-thumb: var(--telekom-shadow-raised-standard);
+  --shadow-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.24), 0 2px 4px 0 rgba(0, 0, 0, 0.24),
+    0 4px 12px 0 rgba(0, 0, 0, 0.26);
   --spacing-x-label: var(--telekom-spacing-unit-x2);
   --font-label: var(--telekom-text-style-ui);
   --font-io-text: var(--telekom-text-style-small-bold);
@@ -61,6 +62,7 @@ scale-switch {
 .switch:hover {
   --_background: var(--telekom-color-ui-regular);
 }
+
 .switch:active {
   --_background: var(--telekom-color-ui-strong);
 }
@@ -68,23 +70,77 @@ scale-switch {
 .switch--checked {
   --_background: var(--telekom-color-primary-standard);
 }
+
+[data-platform='android'] .switch .switch--checked {
+  --_background: var(--telekom-color-primary-standard);
+}
+
+[data-platform='android'] .switch {
+  --_color-thumb: var(--telekom-color-ui-strong);
+}
+
+[data-platform='android'] .switch:hover {
+  --_background: var(--telekom-color-ui-faint);
+}
+
+[data-platform='android'] .switch:active {
+  --_background: var(--telekom-color-ui-faint);
+}
+
+[data-platform='android'] .switch:hover {
+  --_color-thumb: var(--telekom-color-ui-extra-strong);
+}
+[data-platform='android'] .switch:active {
+  --_color-thumb: var(--telekom-color-ui-extra-strong);
+}
+[data-platform='android'] .switch--checked:hover {
+  --_color-thumb: var(--telekom-color-ui-white);
+}
+
+[data-platform='android'] .switch--checked:hover,
 .switch--checked:hover {
   --_background: var(--telekom-color-primary-hovered);
 }
-.switch--checked.switch__control {
+
+[data-platform='android'] .switch--checked:active,
+.switch--checked:active {
   --_background: var(--telekom-color-primary-pressed);
 }
 
+[data-platform='android'] .switch--disabled {
+  --_background: var(--telekom-color-ui-faint);
+}
+[data-platform='android'] .switch--disabled:hover {
+  --_color-thumb: var(--telekom-color-ui-strong);
+  --_background: var(--telekom-color-ui-faint);
+}
+
 .switch--disabled,
 .switch--disabled:hover,
 .switch--disabled:active {
   --_background: var(--telekom-color-ui-disabled);
-  --_color: var(--telekom-color-ui-faint);
+  --_color-thumb: var(--telekom-color-ui-faint);
+}
+
+.switch--checked .switch--disabled,
+.switch--checked .switch--disabled:hover,
+.switch--checked .switch--disabled:active {
+  --_background: var(--telekom-color-ui-faint);
+  --_color-thumb: var(--telekom-color-ui-disabled);
+  box-shadow: var(--telekom-shadow-raised-standard);
 }
 
 .switch--disabled .switch__wrapper {
   cursor: not-allowed;
 }
+.switch--disabled .switch__thumb {
+  box-shadow: var(--telekom-shadow-raised-standard);
+}
+
+.switch--size-large {
+  --width: 56px;
+  --height: 32px;
+}
 
 /*
   I think there's a selector combination that could
@@ -111,7 +167,7 @@ scale-switch {
   border-radius: 50%;
   box-shadow: var(--shadow-thumb);
   margin: var(--offset);
-  transition-property: margin;
+  transition-property: margin, width, height, background, color;
   transition-duration: var(--transition-duration);
   transition-timing-function: var(--transition-easing);
   color: transparent;
@@ -151,29 +207,50 @@ scale-switch {
   margin-inline-start: var(--spacing-x-label);
 }
 
-/* PLATFORM iOS */
+/* PLATFORM Android */
 
-[data-platform='ios'] scale-switch {
+[data-platform='android'] scale-switch {
   --width: 56px;
   --height: 32px;
+  --offset: 7px;
 }
 
-/* PLATFORM Android */
+[data-platform='android'] .switch__thumb {
+  width: 18px;
+  height: 18px;
+}
 
-[data-platform='android'] scale-switch {
-  --width: 56px;
-  --height: 32px;
+[data-platform='android'] scale-switch:not([disabled]):active .switch__thumb {
+  width: 28px;
+  height: 28px;
+  --offset: 2px;
+}
+[data-platform='android'] .switch--checked .switch__thumb {
+  width: 24px;
+  height: 24px;
   --offset: 4px;
 }
 
 [data-platform='android'] .switch__thumb {
-  /* FIXME no color token for this :( */
-  box-shadow: 0 0 0 var(--telekom-spacing-unit-x025) rgba(0, 0, 0, 0.05);
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
+[data-platform='android'] .switch--checked .switch__thumb {
+  background: var(--telekom-color-ui-white);
+}
+
+scale-switch scale-icon-action-success {
+  display: none !important;
+}
+
+[data-platform='android'] scale-icon-action-success {
+  position: absolute;
+  display: inline-block !important;
+  margin-top: 2px;
+}
+
 [data-platform='android'] .switch--checked .switch__thumb {
   color: var(--_background);
 }
@@ -181,3 +258,11 @@ scale-switch {
 [data-platform='android'] .switch__io-text {
   display: none;
 }
+
+[data-platform='android'] .switch--checked .switch__thumb {
+  color: var(--telekom-color-primary-standard);
+}
+
+[data-platform='android'] .switch--disabled .switch__thumb {
+  color: var(--telekom-color-ui-strong);
+}
diff --git a/packages/components/src/components/switch/switch.tsx b/packages/components/src/components/switch/switch.tsx
index e1376f48eb..b1a20eb595 100644
--- a/packages/components/src/components/switch/switch.tsx
+++ b/packages/components/src/components/switch/switch.tsx
@@ -38,6 +38,8 @@ export class Switch {
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
 
+  @Prop() size?: string = 'large';
+
   /** Emitted when the switch was clicked */
   @Event({ eventName: 'scale-change' }) scaleChange!: EventEmitter;
   /** @deprecated in v3 in favor of kebab-case event names */
@@ -88,6 +90,7 @@ export class Switch {
       'switch',
       this.checked && 'switch--checked',
       this.disabled && 'switch--disabled',
+      this.size && `switch--size-${this.size}`,
       isFocusVisibleSupported && 'switch--focus-visible-supported',
       !isFocusVisibleSupported && 'switch--focus-visible-not-supported'
     );
diff --git a/packages/components/src/html/index.html b/packages/components/src/html/index.html
index adc003569f..b57891bb13 100644
--- a/packages/components/src/html/index.html
+++ b/packages/components/src/html/index.html
@@ -26,12 +26,11 @@
   <body>
     <h1 class="scl-font-variant-body">index.html</h1>
 
-    <p class="scl-font-variant-heading-1">
-      Please keep this file empty. If you need to develop or prototype
-      something, duplicate this file.
-    </p>
-    <p class="scl-font-variant-body-short">
-      <mark>Avoid commiting your new file if you think it's not worth it.</mark>
-    </p>
+    <scale-switch label="hello"></scale-switch>
+    <scale-switch size="large" label="hello"></scale-switch>
+    <div data-platform="android">
+      <scale-switch label="hello"></scale-switch>
+      <scale-switch size="large" label="hello"></scale-switch>
+    </div>
   </body>
 </html>
diff --git a/packages/storybook-vue/stories/components/switch/ScaleSwitch.vue b/packages/storybook-vue/stories/components/switch/ScaleSwitch.vue
index 1afac6dca4..1a0661a71f 100644
--- a/packages/storybook-vue/stories/components/switch/ScaleSwitch.vue
+++ b/packages/storybook-vue/stories/components/switch/ScaleSwitch.vue
@@ -5,6 +5,7 @@
     :disabled="disabled"
     :input-id="inputId"
     :checked="checked"
+    :size="size"
     @scaleChange="scaleChange"
     style="--color-on: blue"
   >
@@ -20,6 +21,7 @@ export default {
     inputId: { type: String },
     checked: { type: Boolean, default: false },
     label: String,
+    size: String,
     name: String,
   },
   methods: {
diff --git a/packages/storybook-vue/stories/components/switch/switch.stories.mdx b/packages/storybook-vue/stories/components/switch/switch.stories.mdx
index b6bed26696..f0bd0a992b 100644
--- a/packages/storybook-vue/stories/components/switch/switch.stories.mdx
+++ b/packages/storybook-vue/stories/components/switch/switch.stories.mdx
@@ -19,6 +19,7 @@ export const Template = (args, { argTypes }) => ({
       :input-id="inputId"
       :checked="checked"
       :label="label"
+      :size="size"
       :name="name"
       @scaleChange="scaleChange"
     >
@@ -56,6 +57,24 @@ export const Template = (args, { argTypes }) => ({
 
 <ArgsTable story="Standard" />
 
+## Small
+
+<Canvas withSource="none">
+  <Story
+    name="Small"
+    args={{
+      label: 'Small',
+      size: 'small',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+```html
+<scale-switch size="small" label="Standard disabled"></scale-switch>
+```
+
 ## Standard disabled
 
 <Canvas withSource="none">
@@ -111,16 +130,16 @@ export const Template = (args, { argTypes }) => ({
 <scale-switch disabled checked label="Selected disabled"></scale-switch>
 ```
 
-## iOS
+## Android
 
 <Canvas withSource="none">
-  <Story name="iOS">
+  <Story name="Android">
     {{
       template: `
-        <div data-platform="ios">
+        <div data-platform="android">
           <scale-switch
-            label="Platform iOS"
-            name="ios"
+            label="Platform Android"
+            name="android"
             @scale-change="emitChange"
           >
           </scale-switch>
@@ -134,21 +153,22 @@ export const Template = (args, { argTypes }) => ({
 </Canvas>
 
 ```html
-<div data-platform="ios">
-  <scale-switch label="Platform iOS"></scale-switch>
+<div data-platform="android">
+  <scale-switch label="Platform Android"></scale-switch>
 </div>
 ```
 
-## Android
+## Android Disabled
 
 <Canvas withSource="none">
-  <Story name="Android">
+  <Story name="Android Disabled">
     {{
       template: `
         <div data-platform="android">
           <scale-switch
             label="Platform Android"
             name="android"
+            disabled
             @scale-change="emitChange"
           >
           </scale-switch>
@@ -163,6 +183,65 @@ export const Template = (args, { argTypes }) => ({
 
 ```html
 <div data-platform="android">
-  <scale-switch label="Platform Android"></scale-switch>
+  <scale-switch disabled label="Platform Android"></scale-switch>
+</div>
+```
+
+## Android Selected
+
+<Canvas withSource="none">
+  <Story name="Android Selected">
+    {{
+      template: `
+        <div data-platform="android">
+          <scale-switch
+            label="Platform Android"
+            name="android"
+            checked
+            @scale-change="emitChange"
+          >
+          </scale-switch>
+        </div>
+      `,
+      methods: {
+        emitChange: action('scale-change'),
+      },
+    }}
+  </Story>
+</Canvas>
+
+```html
+<div data-platform="android">
+  <scale-switch checked label="Platform Android"></scale-switch>
+</div>
+```
+
+## Android Selected Disabled
+
+<Canvas withSource="none">
+  <Story name="Android Selected Disabled">
+    {{
+      template: `
+        <div data-platform="android">
+          <scale-switch
+            label="Platform Android"
+            name="android"
+            disabled
+            checked
+            @scale-change="emitChange"
+          >
+          </scale-switch>
+        </div>
+      `,
+      methods: {
+        emitChange: action('scale-change'),
+      },
+    }}
+  </Story>
+</Canvas>
+
+```html
+<div data-platform="android">
+  <scale-switch disabled checked label="Platform Android"></scale-switch>
 </div>
 ```
diff --git a/packages/visual-tests/src/switch.visual.spec.js b/packages/visual-tests/src/switch.visual.spec.js
index e713fd36c8..eeedea2054 100644
--- a/packages/visual-tests/src/switch.visual.spec.js
+++ b/packages/visual-tests/src/switch.visual.spec.js
@@ -1,4 +1,3 @@
-// FIXME
 describe('Switch', () => {
   describe.each(['light', 'dark'])('%p', (mode) => {
     beforeAll(async () => {
@@ -6,49 +5,45 @@ describe('Switch', () => {
     });
     test.each([
       ['standard'],
+      ['small'],
       ['standard-disabled'],
       ['selected'],
       ['selected-disabled'],
+      ['android'],
+      ['android-disabled'],
+      ['android-selected'],
+      ['android-selected-disabled'],
     ])('story %p', async (variant) => {
       await global.runSetup(`components-switch--${variant}`);
       await global.visualCheck();
     });
-    // hover, active
-    test.each([['standard'], ['selected']])('hover %p', async (variant) => {
-      await global.runSetup(`components-switch--${variant}`);
-      const firstButton = await global.page.evaluateHandle(
-        'document.querySelector("#root > scale-switch > div")'
-      );
-      await firstButton.hover();
-      await global.visualCheck();
-    });
-    test.each([['standard'], ['selected']])('active %p', async (variant) => {
-      await global.runSetup(`components-switch--${variant}`);
-      const firstButton = await global.page.evaluateHandle(
-        'document.querySelector("#root > scale-switch > div")'
-      );
-      await global.page.mouse.move(25, 25);
-      await global.page.mouse.down();
-      await global.visualCheck();
-    });
-    // focus
-    test.each([['standard'], ['selected']])('focus %p', async (variant) => {
-      await global.runSetup(`components-switch--${variant}`);
-      await global.page.keyboard.press('Tab');
-      await global.visualCheck();
-    });
-    // click
-    test.each([['standard'], ['selected']])('click %p', async (variant) => {
-      await global.runSetup(`components-switch--${variant}`);
-      const firstButton = await global.page.evaluateHandle(
-        'document.querySelector("#root > scale-switch > div .switch__wrapper")'
-      );
-      const base = await global.page.evaluateHandle(
-        `document.querySelector("#root")`
-      );
-      await firstButton.click();
-      await base.click();
-      await global.visualCheck();
-    });
+    test.each([['standard'], ['selected'], ['android'], ['android-selected']])(
+      'hover %p',
+      async (variant) => {
+        await global.runSetup(`components-switch--${variant}`);
+        const firstButton = await global.page.evaluateHandle(
+          'document.querySelector("#root scale-switch")'
+        );
+        await firstButton.hover();
+        await global.visualCheck();
+      }
+    );
+    test.each([['standard'], ['selected'], ['android'], ['android-selected']])(
+      'active %p',
+      async (variant) => {
+        await global.runSetup(`components-switch--${variant}`);
+        await global.page.mouse.move(25, 25);
+        await global.page.mouse.down();
+        await global.visualCheck();
+      }
+    );
+    test.each([['standard'], ['selected'], ['android'], ['android-selected']])(
+      'focus %p',
+      async (variant) => {
+        await global.runSetup(`components-switch--${variant}`);
+        await global.page.keyboard.press('Tab');
+        await global.visualCheck();
+      }
+    );
   });
 });