From f22a01bc66e614417dd04c3c4252b461d997630b Mon Sep 17 00:00:00 2001
From: Hristian Garnev <hristian.garnev@sumup.com>
Date: Thu, 16 Apr 2020 16:14:23 +0300
Subject: [PATCH 1/9] Toggle component - ability to be right aligned

---
 src/components/Toggle/Toggle.js       | 25 ++++++++++++++++++++-----
 src/components/Toggle/Toggle.story.js |  2 ++
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/Toggle/Toggle.js b/src/components/Toggle/Toggle.js
index ab1884c334..7475b828a3 100644
--- a/src/components/Toggle/Toggle.js
+++ b/src/components/Toggle/Toggle.js
@@ -69,18 +69,28 @@ const toggleWrapperNoMarginStyles = ({ noMargin }) =>
     margin-bottom: 0;
   `;
 
+const toggleWrapperRTL = ({ theme, rtl }) =>
+  rtl &&
+  css`
+    flex-direction: row-reverse;
+    label {
+      margin-left: 0;
+      margin-right: ${theme.spacings.kilo};
+    }
+  `;
+
 const ToggleWrapper = styled('div')`
-  ${toggleWrapperStyles} ${toggleWrapperNoMarginStyles};
+  ${toggleWrapperStyles} ${toggleWrapperNoMarginStyles} ${toggleWrapperRTL};
 `;
 
 /**
  * A toggle component with support for labels and additional explanations.
  */
-const Toggle = ({ label, explanation, noMargin, ...props }) => {
+const Toggle = ({ label, explanation, noMargin, rtl, ...props }) => {
   const switchId = uniqueId('toggle-switch_');
   const labelId = uniqueId('toggle-label_');
   return (
-    <ToggleWrapper {...{ noMargin }}>
+    <ToggleWrapper {...{ noMargin, rtl }}>
       <Switch {...props} aria-labelledby={labelId} id={switchId} />
       {(label || explanation) && (
         <ToggleTextWrapper id={labelId} htmlFor={switchId}>
@@ -112,13 +122,18 @@ Toggle.propTypes = {
   /**
    * Removes the default bottom margin from the input.
    */
-  noMargin: PropTypes.bool
+  noMargin: PropTypes.bool,
+  /**
+   * Adds the ability of the component to be right-aligned.
+   */
+  rtl: PropTypes.bool
 };
 
 Toggle.defaultProps = {
   label: null,
   explanation: null,
-  noMargin: false
+  noMargin: false,
+  rtl: false
 };
 
 /**
diff --git a/src/components/Toggle/Toggle.story.js b/src/components/Toggle/Toggle.story.js
index b036dbb709..4767d5cd6d 100644
--- a/src/components/Toggle/Toggle.story.js
+++ b/src/components/Toggle/Toggle.story.js
@@ -46,3 +46,5 @@ export const withExplanation = () => (
     explanation="Some more detailed text of what this means"
   />
 );
+
+export const RTL = () => <ToggleWithState label="Short label" rtl />;

From 5379b54b89355ad3c8a86271e8f7184f1d97fa67 Mon Sep 17 00:00:00 2001
From: Hristian Garnev <hristian.garnev@sumup.com>
Date: Thu, 16 Apr 2020 16:42:25 +0300
Subject: [PATCH 2/9] Fixed typo

---
 src/components/Toggle/Toggle.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Toggle/Toggle.js b/src/components/Toggle/Toggle.js
index 7475b828a3..1aa31edf99 100644
--- a/src/components/Toggle/Toggle.js
+++ b/src/components/Toggle/Toggle.js
@@ -69,7 +69,7 @@ const toggleWrapperNoMarginStyles = ({ noMargin }) =>
     margin-bottom: 0;
   `;
 
-const toggleWrapperRTL = ({ theme, rtl }) =>
+const toggleWrapperRTLStyles = ({ theme, rtl }) =>
   rtl &&
   css`
     flex-direction: row-reverse;
@@ -80,7 +80,7 @@ const toggleWrapperRTL = ({ theme, rtl }) =>
   `;
 
 const ToggleWrapper = styled('div')`
-  ${toggleWrapperStyles} ${toggleWrapperNoMarginStyles} ${toggleWrapperRTL};
+  ${toggleWrapperStyles} ${toggleWrapperNoMarginStyles} ${toggleWrapperRTLStyles};
 `;
 
 /**

From 1472f4a7e86e98bece7a9b9619034c2105d35115 Mon Sep 17 00:00:00 2001
From: Hristian Garnev <hristian.garnev@sumup.com>
Date: Thu, 16 Apr 2020 16:52:54 +0300
Subject: [PATCH 3/9] ESLint fix - max-len

---
 src/components/Toggle/Toggle.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Toggle/Toggle.js b/src/components/Toggle/Toggle.js
index 1aa31edf99..3f7bad6991 100644
--- a/src/components/Toggle/Toggle.js
+++ b/src/components/Toggle/Toggle.js
@@ -80,7 +80,9 @@ const toggleWrapperRTLStyles = ({ theme, rtl }) =>
   `;
 
 const ToggleWrapper = styled('div')`
-  ${toggleWrapperStyles} ${toggleWrapperNoMarginStyles} ${toggleWrapperRTLStyles};
+  ${toggleWrapperStyles}
+  ${toggleWrapperNoMarginStyles}
+  ${toggleWrapperRTLStyles};
 `;
 
 /**

From 9211b8c7c670c668e27df8ffbc0a791618f88176 Mon Sep 17 00:00:00 2001
From: Hristian Garnev <hristian.garnev@sumup.com>
Date: Thu, 16 Apr 2020 17:19:13 +0300
Subject: [PATCH 4/9] Storyshots snapshot updated

---
 src/__snapshots__/storyshots.spec.js.snap | 132 ++++++++++++++++++++++
 1 file changed, 132 insertions(+)

diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
index a0e7c024d4..82c8b40559 100644
--- a/src/__snapshots__/storyshots.spec.js.snap
+++ b/src/__snapshots__/storyshots.spec.js.snap
@@ -19666,6 +19666,138 @@ exports[`Storyshots Forms/Toggle Base 1`] = `
 </div>
 `;
 
+exports[`Storyshots Forms/Toggle RTL 1`] = `
+.circuit-4 {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-flex: 0 0 40px;
+  -ms-flex: 0 0 40px;
+  flex: 0 0 40px;
+  background-color: #D8DDE1;
+  border-radius: 24px;
+  position: relative;
+  -webkit-transition: background-color 200ms ease-in-out;
+  transition: background-color 200ms ease-in-out;
+  height: 24px;
+  width: 40px;
+  overflow: visible;
+}
+
+.circuit-4::-moz-focus-inner {
+  border-radius: 24px;
+}
+
+.circuit-0 {
+  display: block;
+  background-color: #FAFBFC;
+  box-shadow: 0 2px 0 0 #9DA7B1;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translate3d(4px,-50%,0);
+  -ms-transform: translate3d(4px,-50%,0);
+  transform: translate3d(4px,-50%,0);
+  -webkit-transition: box-shadow 200ms ease-in-out,-webkit-transform 200ms ease-in-out;
+  -webkit-transition: box-shadow 200ms ease-in-out,transform 200ms ease-in-out;
+  transition: box-shadow 200ms ease-in-out,transform 200ms ease-in-out;
+  height: 16px;
+  width: 16px;
+  border-radius: 16px;
+}
+
+.circuit-2 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.circuit-9 {
+  display: block;
+  margin-left: 12px;
+}
+
+.circuit-7 {
+  font-weight: 400;
+  margin-bottom: 16px;
+  font-size: 13px;
+  line-height: 20px;
+  margin-bottom: 0;
+  padding-top: 2px;
+}
+
+@media (min-width:480px) {
+  .circuit-7 {
+    font-size: 13px;
+    line-height: 20px;
+  }
+}
+
+.circuit-11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-align: flex-start;
+  -ms-flex-align: flex-start;
+  flex-align: flex-start;
+  margin-bottom: 16px;
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.circuit-11 label {
+  margin-left: 0;
+  margin-right: 12px;
+}
+
+<div
+  class="circuit-11 circuit-12"
+>
+  <button
+    aria-checked="false"
+    aria-labelledby="toggle-label_52"
+    class="circuit-4 circuit-5"
+    id="toggle-switch_51"
+    role="switch"
+    type="button"
+  >
+    <span
+      class="circuit-0 circuit-1"
+    />
+    <span
+      class="circuit-2 circuit-3"
+    >
+      off
+    </span>
+  </button>
+  <label
+    class="circuit-9 circuit-10"
+    for="toggle-switch_51"
+    id="toggle-label_52"
+  >
+    <p
+      class=" circuit-6 circuit-7 circuit-8"
+    >
+      Short label
+    </p>
+  </label>
+</div>
+`;
+
 exports[`Storyshots Forms/Toggle With Explanation 1`] = `
 .circuit-14 {
   display: -webkit-box;

From 39dc11405f407bfa28e83b2dea0bf4bfd0d7d447 Mon Sep 17 00:00:00 2001
From: Hristian Garnev <hristian.garnev@sumup.com>
Date: Tue, 21 Apr 2020 09:17:24 +0300
Subject: [PATCH 5/9] PR comments changes

---
 src/components/Toggle/Toggle.js       | 14 +++++++-------
 src/components/Toggle/Toggle.story.js |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Toggle/Toggle.js b/src/components/Toggle/Toggle.js
index 3f7bad6991..8a4310f9e8 100644
--- a/src/components/Toggle/Toggle.js
+++ b/src/components/Toggle/Toggle.js
@@ -69,8 +69,8 @@ const toggleWrapperNoMarginStyles = ({ noMargin }) =>
     margin-bottom: 0;
   `;
 
-const toggleWrapperRTLStyles = ({ theme, rtl }) =>
-  rtl &&
+const toggleWrapperReversedStyles = ({ theme, reversed }) =>
+  reversed &&
   css`
     flex-direction: row-reverse;
     label {
@@ -82,17 +82,17 @@ const toggleWrapperRTLStyles = ({ theme, rtl }) =>
 const ToggleWrapper = styled('div')`
   ${toggleWrapperStyles}
   ${toggleWrapperNoMarginStyles}
-  ${toggleWrapperRTLStyles};
+  ${toggleWrapperReversedStyles};
 `;
 
 /**
  * A toggle component with support for labels and additional explanations.
  */
-const Toggle = ({ label, explanation, noMargin, rtl, ...props }) => {
+const Toggle = ({ label, explanation, noMargin, reversed, ...props }) => {
   const switchId = uniqueId('toggle-switch_');
   const labelId = uniqueId('toggle-label_');
   return (
-    <ToggleWrapper {...{ noMargin, rtl }}>
+    <ToggleWrapper {...{ noMargin, reversed }}>
       <Switch {...props} aria-labelledby={labelId} id={switchId} />
       {(label || explanation) && (
         <ToggleTextWrapper id={labelId} htmlFor={switchId}>
@@ -128,14 +128,14 @@ Toggle.propTypes = {
   /**
    * Adds the ability of the component to be right-aligned.
    */
-  rtl: PropTypes.bool
+  reversed: PropTypes.bool
 };
 
 Toggle.defaultProps = {
   label: null,
   explanation: null,
   noMargin: false,
-  rtl: false
+  reversed: false
 };
 
 /**
diff --git a/src/components/Toggle/Toggle.story.js b/src/components/Toggle/Toggle.story.js
index 4767d5cd6d..2851d8fb48 100644
--- a/src/components/Toggle/Toggle.story.js
+++ b/src/components/Toggle/Toggle.story.js
@@ -47,4 +47,4 @@ export const withExplanation = () => (
   />
 );
 
-export const RTL = () => <ToggleWithState label="Short label" rtl />;
+export const Reversed = () => <ToggleWithState label="Short label" reversed />;

From 2d356807438989c00874f13fd0e4c2ba6cad65fb Mon Sep 17 00:00:00 2001
From: Hristian Garnev <hristian.garnev@sumup.com>
Date: Tue, 21 Apr 2020 09:22:07 +0300
Subject: [PATCH 6/9] Snapshot update

---
 src/__snapshots__/storyshots.spec.js.snap | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
index 82c8b40559..ff046742c0 100644
--- a/src/__snapshots__/storyshots.spec.js.snap
+++ b/src/__snapshots__/storyshots.spec.js.snap
@@ -19666,7 +19666,7 @@ exports[`Storyshots Forms/Toggle Base 1`] = `
 </div>
 `;
 
-exports[`Storyshots Forms/Toggle RTL 1`] = `
+exports[`Storyshots Forms/Toggle Reversed 1`] = `
 .circuit-4 {
   margin: 0;
   padding: 0;
@@ -19766,6 +19766,7 @@ exports[`Storyshots Forms/Toggle RTL 1`] = `
 
 <div
   class="circuit-11 circuit-12"
+  reversed=""
 >
   <button
     aria-checked="false"

From 3c967f10149c0c456a548c7679fd1d64293519a3 Mon Sep 17 00:00:00 2001
From: Hristian Garnev <hristian.garnev@sumup.com>
Date: Tue, 21 Apr 2020 10:09:49 +0300
Subject: [PATCH 7/9] Space added between text and Switch

---
 src/components/Toggle/Toggle.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Toggle/Toggle.js b/src/components/Toggle/Toggle.js
index 8a4310f9e8..0455327868 100644
--- a/src/components/Toggle/Toggle.js
+++ b/src/components/Toggle/Toggle.js
@@ -73,6 +73,7 @@ const toggleWrapperReversedStyles = ({ theme, reversed }) =>
   reversed &&
   css`
     flex-direction: row-reverse;
+    justify-content: space-between;
     label {
       margin-left: 0;
       margin-right: ${theme.spacings.kilo};

From 9ed4c2e1c258fe016932f1d74cd538e4d8e06843 Mon Sep 17 00:00:00 2001
From: Hristian Garnev <hristian.garnev@sumup.com>
Date: Tue, 21 Apr 2020 10:26:50 +0300
Subject: [PATCH 8/9] Snapshot update

---
 src/__snapshots__/storyshots.spec.js.snap | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
index ff046742c0..fda53f43b4 100644
--- a/src/__snapshots__/storyshots.spec.js.snap
+++ b/src/__snapshots__/storyshots.spec.js.snap
@@ -19757,6 +19757,10 @@ exports[`Storyshots Forms/Toggle Reversed 1`] = `
   -webkit-flex-direction: row-reverse;
   -ms-flex-direction: row-reverse;
   flex-direction: row-reverse;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
 .circuit-11 label {

From e1a406a1f915236eb7f5d4447d1a1085c7490d84 Mon Sep 17 00:00:00 2001
From: Hristian Garnev <hristian.garnev@sumup.com>
Date: Wed, 22 Apr 2020 10:23:08 +0300
Subject: [PATCH 9/9] Reversed Toggle only shown on mobile

---
 src/__snapshots__/storyshots.spec.js.snap | 25 ++++++++++++++---------
 src/components/Toggle/Toggle.js           | 12 ++++++-----
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
index fda53f43b4..34d73c79b8 100644
--- a/src/__snapshots__/storyshots.spec.js.snap
+++ b/src/__snapshots__/storyshots.spec.js.snap
@@ -19754,18 +19754,23 @@ exports[`Storyshots Forms/Toggle Reversed 1`] = `
   -ms-flex-align: flex-start;
   flex-align: flex-start;
   margin-bottom: 16px;
-  -webkit-flex-direction: row-reverse;
-  -ms-flex-direction: row-reverse;
-  flex-direction: row-reverse;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
 }
 
-.circuit-11 label {
-  margin-left: 0;
-  margin-right: 12px;
+@media (max-width:479px) {
+  .circuit-11 {
+    -webkit-flex-direction: row-reverse;
+    -ms-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+
+  .circuit-11 label {
+    margin-left: 0;
+    margin-right: 12px;
+  }
 }
 
 <div
diff --git a/src/components/Toggle/Toggle.js b/src/components/Toggle/Toggle.js
index 0455327868..8fa34d29d7 100644
--- a/src/components/Toggle/Toggle.js
+++ b/src/components/Toggle/Toggle.js
@@ -72,11 +72,13 @@ const toggleWrapperNoMarginStyles = ({ noMargin }) =>
 const toggleWrapperReversedStyles = ({ theme, reversed }) =>
   reversed &&
   css`
-    flex-direction: row-reverse;
-    justify-content: space-between;
-    label {
-      margin-left: 0;
-      margin-right: ${theme.spacings.kilo};
+    ${theme.mq.untilKilo} {
+      flex-direction: row-reverse;
+      justify-content: space-between;
+      label {
+        margin-left: 0;
+        margin-right: ${theme.spacings.kilo};
+      }
     }
   `;