From 9377754affb5810cd5a1d6943d13c22fe656a689 Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Fri, 18 Aug 2023 08:35:56 +0200
Subject: [PATCH 1/5] change the button kinds

---
 packages/react-components/src/components/Alert/Alert.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/components/Alert/Alert.tsx b/packages/react-components/src/components/Alert/Alert.tsx
index e73bc6e22..fc3404b52 100644
--- a/packages/react-components/src/components/Alert/Alert.tsx
+++ b/packages/react-components/src/components/Alert/Alert.tsx
@@ -129,14 +129,14 @@ export const Alert: React.FC<React.PropsWithChildren<AlertProps>> = ({
         {(primaryButton || secondaryButton) && (
           <div className={styles[`${baseClass}__content__cta`]}>
             {primaryButton && (
-              <Button kind="primary" onClick={primaryButton.handleClick}>
+              <Button kind="high-contrast" onClick={primaryButton.handleClick}>
                 {primaryButton.label}
               </Button>
             )}
             {secondaryButton && (
               <Button
                 className={styles[`${baseClass}__content__cta__link`]}
-                kind="link"
+                kind="text"
                 onClick={secondaryButton.handleClick}
               >
                 {secondaryButton.label}

From 03609c5205801003ea8b942ea868a35774096283 Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Mon, 21 Aug 2023 14:25:46 +0200
Subject: [PATCH 2/5] active state for the ActionMenu + UI refresh

---
 .../ActionMenu/ActionMenu.module.scss         |  28 +++++
 .../ActionMenu/ActionMenu.stories.tsx         | 104 ++++++++++++++++--
 .../src/components/ActionMenu/ActionMenu.tsx  |   7 ++
 3 files changed, 131 insertions(+), 8 deletions(-)

diff --git a/packages/react-components/src/components/ActionMenu/ActionMenu.module.scss b/packages/react-components/src/components/ActionMenu/ActionMenu.module.scss
index 1db6cfd6b..cb9b2bf6b 100644
--- a/packages/react-components/src/components/ActionMenu/ActionMenu.module.scss
+++ b/packages/react-components/src/components/ActionMenu/ActionMenu.module.scss
@@ -6,15 +6,19 @@ $base-class: 'action-menu';
     border-radius: var(--radius-3);
     background-color: var(--picker-list-background);
     padding: 0;
+    padding: var(--spacing-2);
     overflow: hidden;
     list-style: none;
 
     &__item {
       display: flex;
+      position: relative;
       align-items: center;
+      margin-bottom: var(--spacing-05);
       outline: 0;
       border: 0;
       border-radius: 0;
+      border-radius: var(--radius-3);
       background: none;
       padding: 7px var(--spacing-3);
       width: 100%;
@@ -27,11 +31,20 @@ $base-class: 'action-menu';
         cursor: pointer;
       }
 
+      &:focus,
+      &:active {
+        background-color: var(--picker-list-option-background-active);
+      }
+
       &:focus {
         outline: 2px solid var(--action-primary-default);
         outline-offset: -2px;
       }
 
+      > * {
+        pointer-events: none;
+      }
+
       &--with-divider {
         border-top: 1px solid var(--border-basic-secondary);
       }
@@ -44,6 +57,21 @@ $base-class: 'action-menu';
           cursor: not-allowed;
         }
       }
+
+      &--active {
+        background-color: var(--picker-list-option-background-active);
+
+        &::after {
+          position: absolute;
+          left: -8px;
+          border-top-right-radius: var(--radius-3);
+          border-bottom-right-radius: var(--radius-3);
+          background: var(--action-primary-default);
+          width: 3px;
+          height: 36px;
+          content: '';
+        }
+      }
     }
   }
 }
diff --git a/packages/react-components/src/components/ActionMenu/ActionMenu.stories.tsx b/packages/react-components/src/components/ActionMenu/ActionMenu.stories.tsx
index 4517e8c1e..56c632bd2 100644
--- a/packages/react-components/src/components/ActionMenu/ActionMenu.stories.tsx
+++ b/packages/react-components/src/components/ActionMenu/ActionMenu.stories.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { MoreHoriz } from '@livechat/design-system-icons/react/tabler';
 
+import { Checkbox } from '../Checkbox';
 import { Icon } from '../Icon';
 import { RadioButton } from '../RadioButton';
 import { Switch } from '../Switch';
@@ -31,35 +32,75 @@ export const Default = (): React.ReactElement => (
 );
 
 export const KeepOpenOnItemClick = (): React.ReactElement => {
-  const [checkboxValue, setCheckboxValue] = React.useState('one');
-  const [switchOneValue, setSwitchOneValue] = React.useState(false);
+  const [radioButtonValue, setRadioButtonValue] = React.useState('one');
+  const [switchOneValue, setSwitchOneValue] = React.useState(true);
   const [switchTwoValue, setSwitchTwoValue] = React.useState(false);
+  const [checkboxOneValue, setCheckboxOneValue] = React.useState(true);
+  const [checkboxTwoValue, setCheckboxTwoValue] = React.useState(true);
+  const [activeOptionsKeys, setActiveOptionsKeys] = React.useState([
+    'one',
+    'three',
+    'five',
+    'six',
+  ]);
+
+  const handleOptionSelect = (
+    key: string,
+    type: string,
+    optionHandler: void
+  ) => {
+    const newActiveOptions = activeOptionsKeys;
+
+    if (type === 'radio') {
+      if (!activeOptionsKeys.includes(key)) {
+        const keyToRemove = key === 'one' ? 'two' : 'one';
+        const index = activeOptionsKeys.indexOf(keyToRemove);
+        newActiveOptions.splice(index, 1);
+        setActiveOptionsKeys([...newActiveOptions, key]);
+      }
+    }
+
+    if (type === 'switch' || type === 'checkbox') {
+      if (activeOptionsKeys.includes(key)) {
+        const index = activeOptionsKeys.indexOf(key);
+        newActiveOptions.splice(index, 1);
+        setActiveOptionsKeys([...newActiveOptions]);
+      } else {
+        activeOptionsKeys.push(key);
+      }
+    }
+
+    return optionHandler;
+  };
 
   return (
     <div className="action-menu-preview">
       <ActionMenu
+        activeOptionKeys={activeOptionsKeys}
         options={[
           {
             key: 'one',
             element: (
               <ActionMenuItem>
-                <RadioButton checked={checkboxValue === 'one'}>
+                <RadioButton checked={radioButtonValue === 'one'}>
                   Radio label one
                 </RadioButton>
               </ActionMenuItem>
             ),
-            onClick: () => setCheckboxValue('one'),
+            onClick: () =>
+              handleOptionSelect('one', 'radio', setRadioButtonValue('one')),
           },
           {
             key: 'two',
             element: (
               <ActionMenuItem>
-                <RadioButton checked={checkboxValue === 'two'}>
+                <RadioButton checked={radioButtonValue === 'two'}>
                   Radio label two
                 </RadioButton>
               </ActionMenuItem>
             ),
-            onClick: () => setCheckboxValue('two'),
+            onClick: () =>
+              handleOptionSelect('two', 'radio', setRadioButtonValue('two')),
           },
           {
             key: 'three',
@@ -73,7 +114,12 @@ export const KeepOpenOnItemClick = (): React.ReactElement => {
                 Toggle label one
               </ActionMenuItem>
             ),
-            onClick: () => setSwitchOneValue((s) => !s),
+            onClick: () =>
+              handleOptionSelect(
+                'three',
+                'switch',
+                setSwitchOneValue((s) => !s)
+              ),
           },
           {
             key: 'four',
@@ -87,7 +133,49 @@ export const KeepOpenOnItemClick = (): React.ReactElement => {
                 Toggle label two
               </ActionMenuItem>
             ),
-            onClick: () => setSwitchTwoValue((s) => !s),
+            onClick: () =>
+              handleOptionSelect(
+                'four',
+                'switch',
+                setSwitchTwoValue((s) => !s)
+              ),
+          },
+          {
+            key: 'five',
+            withDivider: true,
+            element: (
+              <ActionMenuItem
+                leftNode={
+                  <Checkbox checked={checkboxOneValue}>
+                    Checkbox label one
+                  </Checkbox>
+                }
+              />
+            ),
+            onClick: () =>
+              handleOptionSelect(
+                'five',
+                'checkbox',
+                setCheckboxOneValue((s) => !s)
+              ),
+          },
+          {
+            key: 'six',
+            element: (
+              <ActionMenuItem
+                leftNode={
+                  <Checkbox checked={checkboxTwoValue}>
+                    Checkbox label two
+                  </Checkbox>
+                }
+              />
+            ),
+            onClick: () =>
+              handleOptionSelect(
+                'six',
+                'checkbox',
+                setCheckboxTwoValue((s) => !s)
+              ),
           },
         ]}
         triggerRenderer={<Icon source={MoreHoriz} kind="primary" />}
diff --git a/packages/react-components/src/components/ActionMenu/ActionMenu.tsx b/packages/react-components/src/components/ActionMenu/ActionMenu.tsx
index c8621a9ca..375283503 100644
--- a/packages/react-components/src/components/ActionMenu/ActionMenu.tsx
+++ b/packages/react-components/src/components/ActionMenu/ActionMenu.tsx
@@ -40,6 +40,10 @@ export interface ActionMenuProps {
    * Menu will stay open after option click
    */
   keepOpenOnClick?: boolean;
+  /**
+   * Set the keys array for active elements
+   */
+  activeOptionKeys?: string[];
 }
 
 const baseClass = 'action-menu';
@@ -51,6 +55,7 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
   placement = 'bottom-end',
   openedOnInit = false,
   keepOpenOnClick,
+  activeOptionKeys,
   ...props
 }) => {
   const [isVisible, setIsVisible] = React.useState(openedOnInit);
@@ -137,6 +142,8 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
                 [styles[`${baseClass}__list__item--disabled`]]: o.disabled,
                 [styles[`${baseClass}__list__item--with-divider`]]:
                   o.withDivider,
+                [styles[`${baseClass}__list__item--active`]]:
+                  activeOptionKeys?.includes(o.key),
               })}
             >
               {o.element}

From 5826f55e80efee07f0a37e0399f0d32ee30e51eb Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Tue, 22 Aug 2023 14:49:19 +0200
Subject: [PATCH 3/5] fix after review

---
 .../src/components/ActionMenu/ActionMenu.module.scss  | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/components/ActionMenu/ActionMenu.module.scss b/packages/react-components/src/components/ActionMenu/ActionMenu.module.scss
index cb9b2bf6b..66aa4d7c9 100644
--- a/packages/react-components/src/components/ActionMenu/ActionMenu.module.scss
+++ b/packages/react-components/src/components/ActionMenu/ActionMenu.module.scss
@@ -46,7 +46,16 @@ $base-class: 'action-menu';
       }
 
       &--with-divider {
-        border-top: 1px solid var(--border-basic-secondary);
+        &::after {
+          position: absolute;
+          top: 0;
+          right: 0;
+          left: 0;
+          background-color: var(--border-basic-secondary);
+          width: 100%;
+          height: 1px;
+          content: '';
+        }
       }
 
       &--disabled {

From ef0278e30ca381ceb237d6f01c5dfcc191f469b2 Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Mon, 28 Aug 2023 11:49:35 +0200
Subject: [PATCH 4/5] changes after review

---
 .../src/components/ActionMenu/ActionMenu.module.scss          | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/components/ActionMenu/ActionMenu.module.scss b/packages/react-components/src/components/ActionMenu/ActionMenu.module.scss
index 66aa4d7c9..8821d33ad 100644
--- a/packages/react-components/src/components/ActionMenu/ActionMenu.module.scss
+++ b/packages/react-components/src/components/ActionMenu/ActionMenu.module.scss
@@ -46,9 +46,11 @@ $base-class: 'action-menu';
       }
 
       &--with-divider {
+        margin-top: var(--spacing-2);
+
         &::after {
           position: absolute;
-          top: 0;
+          top: -5px;
           right: 0;
           left: 0;
           background-color: var(--border-basic-secondary);

From dfbc979bc39c94045a9f6d4ecc859a7e4ea6aa28 Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Tue, 29 Aug 2023 08:41:47 +0200
Subject: [PATCH 5/5] change for dividers

---
 .../src/components/ActionMenu/ActionMenu.module.scss     | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/react-components/src/components/ActionMenu/ActionMenu.module.scss b/packages/react-components/src/components/ActionMenu/ActionMenu.module.scss
index 8821d33ad..f5cd10319 100644
--- a/packages/react-components/src/components/ActionMenu/ActionMenu.module.scss
+++ b/packages/react-components/src/components/ActionMenu/ActionMenu.module.scss
@@ -48,13 +48,12 @@ $base-class: 'action-menu';
       &--with-divider {
         margin-top: var(--spacing-2);
 
-        &::after {
+        &::before {
           position: absolute;
-          top: -5px;
-          right: 0;
-          left: 0;
+          top: -4.5px;
+          right: -8px;
+          left: -8px;
           background-color: var(--border-basic-secondary);
-          width: 100%;
           height: 1px;
           content: '';
         }