From 4ad47129740193774be4b7f6bb2f8698c5b42b84 Mon Sep 17 00:00:00 2001
From: Natallia Harshunova <nattallius@gmail.com>
Date: Mon, 17 Jun 2024 14:37:00 +0200
Subject: [PATCH 1/5] feat(18794): add left label feature to toggler

---
 packages/ui-kit/src/Toggler/Toggler.fixture.tsx |  2 ++
 packages/ui-kit/src/Toggler/index.tsx           | 13 +++++++++----
 packages/ui-kit/src/Toggler/style.module.css    | 17 +++++++++++++++++
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/ui-kit/src/Toggler/Toggler.fixture.tsx b/packages/ui-kit/src/Toggler/Toggler.fixture.tsx
index 2d756b70..75b96bd8 100644
--- a/packages/ui-kit/src/Toggler/Toggler.fixture.tsx
+++ b/packages/ui-kit/src/Toggler/Toggler.fixture.tsx
@@ -16,6 +16,7 @@ export default {
       foo: false,
       bar: true,
       baz: false,
+      payment: false,
     });
 
     const onChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
@@ -27,6 +28,7 @@ export default {
         <Toggler id="foo" label="Foo" on={state['foo']} onChange={onChange} />
         <Toggler id="bar" label="Bar" on={state['bar']} onChange={onChange} />
         <Toggler id="baz" label="Baz" on={state['baz']} onChange={onChange} />
+        <Toggler id="payment" label="Annualy" leftLabel="Monthly" on={state['payment']} onChange={onChange} />
         <code style={{ whiteSpace: 'pre', marginTop: '1em' }}>{JSON.stringify(state, null, 2)}</code>
       </div>
     );
diff --git a/packages/ui-kit/src/Toggler/index.tsx b/packages/ui-kit/src/Toggler/index.tsx
index 6a93d219..6b2d8ea4 100644
--- a/packages/ui-kit/src/Toggler/index.tsx
+++ b/packages/ui-kit/src/Toggler/index.tsx
@@ -5,7 +5,8 @@ import type { ChangeEvent } from 'react';
 interface Toggler {
   id: string;
   name?: string;
-  label?: React.ReactChild | React.ReactChild[];
+  label?: React.ReactNode;
+  leftLabel?: React.ReactNode;
   className?: string;
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
   on?: boolean;
@@ -14,6 +15,7 @@ interface Toggler {
 export function Toggler({
   name,
   label,
+  leftLabel,
   className = '',
   id,
   on = false,
@@ -21,10 +23,13 @@ export function Toggler({
 }: Toggler &
   React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): React.ReactElement {
   return (
-    <label className={cn(s.root, { [s.checked]: on, [s.disabled]: native.disabled }, className)}>
+    <label
+      className={cn(s.root, { [s.checked]: on, [s.disabled]: native.disabled, [s.twoLabels]: leftLabel }, className)}
+    >
       <input id={id} className={s.hidden} type="checkbox" {...native} checked={on} />
-      <div className={s.toggle}></div>
-      <div className={s.label}>{label}</div>
+      {leftLabel && <div className={cn(s.label, s.leftLabel, { [s.active]: !on })}>{leftLabel}</div>}
+      <div className={cn(s.toggle)}></div>
+      <div className={cn(s.label, { [s.active]: on })}>{label}</div>
     </label>
   );
 }
diff --git a/packages/ui-kit/src/Toggler/style.module.css b/packages/ui-kit/src/Toggler/style.module.css
index d8bc76f0..e2c89df9 100644
--- a/packages/ui-kit/src/Toggler/style.module.css
+++ b/packages/ui-kit/src/Toggler/style.module.css
@@ -57,6 +57,23 @@
   }
 }
 
+.twoLabels {
+  .toggle {
+    background-color: var(--base-strong);
+    margin: 0 0.5em 0 0.5em;
+  }
+  .label {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 20px;
+    color: var(--faint-strong-up);
+
+    &.active {
+      color: var(--base-strong);
+    }
+  }
+}
+
 /* I am not use hidden true since it's broke auto focus in firefox */
 .hidden {
   position: absolute;

From 4749d41fd6a0e7714b60cc520693fedba14af722 Mon Sep 17 00:00:00 2001
From: Natallia Harshunova <nattallius@gmail.com>
Date: Mon, 17 Jun 2024 15:26:19 +0200
Subject: [PATCH 2/5] feat(18794): add fav icon

---
 .../default-icons/src/figma-icons/FavAdded16.tsx | 16 ++++++++++++++++
 packages/default-icons/src/figma-icons/index.ts  |  1 +
 2 files changed, 17 insertions(+)
 create mode 100644 packages/default-icons/src/figma-icons/FavAdded16.tsx

diff --git a/packages/default-icons/src/figma-icons/FavAdded16.tsx b/packages/default-icons/src/figma-icons/FavAdded16.tsx
new file mode 100644
index 00000000..25304d26
--- /dev/null
+++ b/packages/default-icons/src/figma-icons/FavAdded16.tsx
@@ -0,0 +1,16 @@
+import { SVGProps, memo } from 'react';
+
+const FavAdded16 = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14.5044 5.8292C14.9445 5.86715 15.1228 6.41542 14.7892 6.70497L11.5859 9.48502C11.53 9.53357 11.5055 9.60907 11.5222 9.68124L12.4799 13.8117C12.5797 14.2423 12.1128 14.5811 11.7345 14.3527L8.00001 12.0988L4.26747 14.3516C3.88881 14.5801 3.42169 14.2406 3.52217 13.8099L4.5127 9.56394L1.21441 6.70663C0.880106 6.41702 1.05881 5.86789 1.49952 5.8305L5.54113 5.48761C5.72592 5.47194 5.88685 5.35527 5.95922 5.18452L7.54 1.45479C7.71224 1.04839 8.28815 1.04824 8.46061 1.45454L10.0409 5.1775C10.1132 5.3479 10.2738 5.46439 10.4582 5.48029L14.5044 5.8292Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+FavAdded16.displayName = 'FavAdded16';
+const Memo = memo(FavAdded16);
+export default Memo;
diff --git a/packages/default-icons/src/figma-icons/index.ts b/packages/default-icons/src/figma-icons/index.ts
index ee24c799..664623fb 100644
--- a/packages/default-icons/src/figma-icons/index.ts
+++ b/packages/default-icons/src/figma-icons/index.ts
@@ -180,3 +180,4 @@ export { default as Reference16 } from './Reference16';
 export { default as Rubber16 } from './Rubber16';
 export { default as Rubber24 } from './Rubber24';
 export { default as Diamond24 } from './Diamond24';
+export { default as FavAdded16 } from './FavAdded16';

From 0eed8808767e57dd34633aef4db8aec7d3bc8829 Mon Sep 17 00:00:00 2001
From: Natallia Harshunova <nattallius@gmail.com>
Date: Mon, 17 Jun 2024 15:49:11 +0200
Subject: [PATCH 3/5] feat(18794): remove unused class

---
 packages/ui-kit/src/Toggler/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui-kit/src/Toggler/index.tsx b/packages/ui-kit/src/Toggler/index.tsx
index 6b2d8ea4..084d43d5 100644
--- a/packages/ui-kit/src/Toggler/index.tsx
+++ b/packages/ui-kit/src/Toggler/index.tsx
@@ -27,8 +27,8 @@ export function Toggler({
       className={cn(s.root, { [s.checked]: on, [s.disabled]: native.disabled, [s.twoLabels]: leftLabel }, className)}
     >
       <input id={id} className={s.hidden} type="checkbox" {...native} checked={on} />
-      {leftLabel && <div className={cn(s.label, s.leftLabel, { [s.active]: !on })}>{leftLabel}</div>}
-      <div className={cn(s.toggle)}></div>
+      {leftLabel && <div className={cn(s.label, { [s.active]: !on })}>{leftLabel}</div>}
+      <div className={s.toggle}></div>
       <div className={cn(s.label, { [s.active]: on })}>{label}</div>
     </label>
   );

From 4ffb015fab73e0b0bf7e2a9d997070be732e556b Mon Sep 17 00:00:00 2001
From: Natallia Harshunova <nattallius@gmail.com>
Date: Mon, 17 Jun 2024 17:25:04 +0200
Subject: [PATCH 4/5] feat(18794): add ability to specify labels classes

---
 .../Toggler/Toggler.fixture.style.module.css    | 10 ++++++++++
 packages/ui-kit/src/Toggler/Toggler.fixture.tsx | 15 ++++++++++++++-
 packages/ui-kit/src/Toggler/index.tsx           | 17 ++++++++++++++---
 packages/ui-kit/src/Toggler/style.module.css    | 14 ++------------
 4 files changed, 40 insertions(+), 16 deletions(-)
 create mode 100644 packages/ui-kit/src/Toggler/Toggler.fixture.style.module.css

diff --git a/packages/ui-kit/src/Toggler/Toggler.fixture.style.module.css b/packages/ui-kit/src/Toggler/Toggler.fixture.style.module.css
new file mode 100644
index 00000000..e2651546
--- /dev/null
+++ b/packages/ui-kit/src/Toggler/Toggler.fixture.style.module.css
@@ -0,0 +1,10 @@
+.label {
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--faint-strong-up);
+
+  &.active {
+    color: var(--base-strong);
+  }
+}
diff --git a/packages/ui-kit/src/Toggler/Toggler.fixture.tsx b/packages/ui-kit/src/Toggler/Toggler.fixture.tsx
index 75b96bd8..2ebea81b 100644
--- a/packages/ui-kit/src/Toggler/Toggler.fixture.tsx
+++ b/packages/ui-kit/src/Toggler/Toggler.fixture.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useState } from 'react';
+import s from './Toggler.fixture.style.module.css';
 import { Toggler } from '.';
 
 export default {
@@ -19,6 +20,11 @@ export default {
       payment: false,
     });
 
+    const classes = {
+      label: s.label,
+      activeLabel: s.active,
+    };
+
     const onChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
       setState((state) => ((state[e.target.id] = e.target.checked), { ...state }));
     }, []);
@@ -28,7 +34,14 @@ export default {
         <Toggler id="foo" label="Foo" on={state['foo']} onChange={onChange} />
         <Toggler id="bar" label="Bar" on={state['bar']} onChange={onChange} />
         <Toggler id="baz" label="Baz" on={state['baz']} onChange={onChange} />
-        <Toggler id="payment" label="Annualy" leftLabel="Monthly" on={state['payment']} onChange={onChange} />
+        <Toggler
+          id="payment"
+          label="Annually"
+          leftLabel="Monthly"
+          on={state['payment']}
+          onChange={onChange}
+          classes={classes}
+        />
         <code style={{ whiteSpace: 'pre', marginTop: '1em' }}>{JSON.stringify(state, null, 2)}</code>
       </div>
     );
diff --git a/packages/ui-kit/src/Toggler/index.tsx b/packages/ui-kit/src/Toggler/index.tsx
index 084d43d5..e0b766bb 100644
--- a/packages/ui-kit/src/Toggler/index.tsx
+++ b/packages/ui-kit/src/Toggler/index.tsx
@@ -7,6 +7,10 @@ interface Toggler {
   name?: string;
   label?: React.ReactNode;
   leftLabel?: React.ReactNode;
+  classes?: {
+    label?: string;
+    activeLabel?: string;
+  };
   className?: string;
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
   on?: boolean;
@@ -17,6 +21,7 @@ export function Toggler({
   label,
   leftLabel,
   className = '',
+  classes,
   id,
   on = false,
   ...native
@@ -24,12 +29,18 @@ export function Toggler({
   React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): React.ReactElement {
   return (
     <label
-      className={cn(s.root, { [s.checked]: on, [s.disabled]: native.disabled, [s.twoLabels]: leftLabel }, className)}
+      className={cn(
+        s.root,
+        { [s.checked]: on, [s.disabled]: native.disabled, [s.twoDirectional]: leftLabel },
+        className,
+      )}
     >
       <input id={id} className={s.hidden} type="checkbox" {...native} checked={on} />
-      {leftLabel && <div className={cn(s.label, { [s.active]: !on })}>{leftLabel}</div>}
+      {leftLabel && (
+        <div className={cn(s.label, classes?.label, { [classes?.activeLabel || '']: !on })}>{leftLabel}</div>
+      )}
       <div className={s.toggle}></div>
-      <div className={cn(s.label, { [s.active]: on })}>{label}</div>
+      <div className={cn(s.label, classes?.label, { [classes?.activeLabel || '']: on })}>{label}</div>
     </label>
   );
 }
diff --git a/packages/ui-kit/src/Toggler/style.module.css b/packages/ui-kit/src/Toggler/style.module.css
index e2c89df9..4456afda 100644
--- a/packages/ui-kit/src/Toggler/style.module.css
+++ b/packages/ui-kit/src/Toggler/style.module.css
@@ -57,20 +57,10 @@
   }
 }
 
-.twoLabels {
+.twoDirectional {
   .toggle {
     background-color: var(--base-strong);
-    margin: 0 0.5em 0 0.5em;
-  }
-  .label {
-    font-weight: 600;
-    font-size: 16px;
-    line-height: 20px;
-    color: var(--faint-strong-up);
-
-    &.active {
-      color: var(--base-strong);
-    }
+    margin-left: 0.5em;
   }
 }
 

From 559c05fb9327d07f4708839568d93fe88664613f Mon Sep 17 00:00:00 2001
From: Natallia Harshunova <nattallius@gmail.com>
Date: Mon, 17 Jun 2024 19:37:41 +0200
Subject: [PATCH 5/5] feat(18794): rename leftLabel -> offValueLabel

---
 .../ui-kit/src/Toggler/Toggler.fixture.tsx    | 24 ++++++++++---------
 packages/ui-kit/src/Toggler/index.tsx         | 10 ++++----
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/ui-kit/src/Toggler/Toggler.fixture.tsx b/packages/ui-kit/src/Toggler/Toggler.fixture.tsx
index 2ebea81b..a931703c 100644
--- a/packages/ui-kit/src/Toggler/Toggler.fixture.tsx
+++ b/packages/ui-kit/src/Toggler/Toggler.fixture.tsx
@@ -17,16 +17,15 @@ export default {
       foo: false,
       bar: true,
       baz: false,
-      payment: false,
+      isAnnualPayment: false,
     });
 
-    const classes = {
-      label: s.label,
-      activeLabel: s.active,
-    };
-
     const onChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-      setState((state) => ((state[e.target.id] = e.target.checked), { ...state }));
+      const { id, checked } = e.target;
+      setState((prevState) => ({
+        ...prevState,
+        [id]: checked,
+      }));
     }, []);
 
     return (
@@ -35,12 +34,15 @@ export default {
         <Toggler id="bar" label="Bar" on={state['bar']} onChange={onChange} />
         <Toggler id="baz" label="Baz" on={state['baz']} onChange={onChange} />
         <Toggler
-          id="payment"
+          id="isAnnualPayment"
           label="Annually"
-          leftLabel="Monthly"
-          on={state['payment']}
+          offValueLabel="Monthly"
+          on={state['isAnnualPayment']}
           onChange={onChange}
-          classes={classes}
+          classes={{
+            label: s.label,
+            activeLabel: s.active,
+          }}
         />
         <code style={{ whiteSpace: 'pre', marginTop: '1em' }}>{JSON.stringify(state, null, 2)}</code>
       </div>
diff --git a/packages/ui-kit/src/Toggler/index.tsx b/packages/ui-kit/src/Toggler/index.tsx
index e0b766bb..9c75bd2a 100644
--- a/packages/ui-kit/src/Toggler/index.tsx
+++ b/packages/ui-kit/src/Toggler/index.tsx
@@ -6,7 +6,7 @@ interface Toggler {
   id: string;
   name?: string;
   label?: React.ReactNode;
-  leftLabel?: React.ReactNode;
+  offValueLabel?: React.ReactNode;
   classes?: {
     label?: string;
     activeLabel?: string;
@@ -19,7 +19,7 @@ interface Toggler {
 export function Toggler({
   name,
   label,
-  leftLabel,
+  offValueLabel,
   className = '',
   classes,
   id,
@@ -31,13 +31,13 @@ export function Toggler({
     <label
       className={cn(
         s.root,
-        { [s.checked]: on, [s.disabled]: native.disabled, [s.twoDirectional]: leftLabel },
+        { [s.checked]: on, [s.disabled]: native.disabled, [s.twoDirectional]: offValueLabel },
         className,
       )}
     >
       <input id={id} className={s.hidden} type="checkbox" {...native} checked={on} />
-      {leftLabel && (
-        <div className={cn(s.label, classes?.label, { [classes?.activeLabel || '']: !on })}>{leftLabel}</div>
+      {offValueLabel && (
+        <div className={cn(s.label, classes?.label, { [classes?.activeLabel || '']: !on })}>{offValueLabel}</div>
       )}
       <div className={s.toggle}></div>
       <div className={cn(s.label, classes?.label, { [classes?.activeLabel || '']: on })}>{label}</div>