From adff27d9456ef3aaebbeabeb687c7619a3325be2 Mon Sep 17 00:00:00 2001
From: JohannesDoberer <johannes.doberer@sap.com>
Date: Wed, 25 Nov 2020 11:51:03 +0100
Subject: [PATCH 01/13] Profile setting dialog (#1710)

---
 core/package.json                             |  4 +-
 core/src/Authorization.html                   | 56 +++++++++++++++++--
 core/src/utilities/luigi-config-defaults.js   |  4 ++
 .../tests/0-fiddle/fiddle-navigation.spec.js  | 37 ++++++++++++
 .../src/luigi-config/extended/settings.js     | 46 +++++++++++++++
 5 files changed, 140 insertions(+), 7 deletions(-)

diff --git a/core/package.json b/core/package.json
index b642967a08..a5427b17ef 100644
--- a/core/package.json
+++ b/core/package.json
@@ -80,7 +80,7 @@
     },
     {
       "path": "./public-ie11/luigi-ie11.js",
-      "maxSize": "580 kB",
+      "maxSize": "590 kB",
       "compression": "none"
     },
     {
@@ -134,4 +134,4 @@
     "type": "git",
     "url": "ssh://github.com/SAP/luigi.git"
   }
-}
+}
\ No newline at end of file
diff --git a/core/src/Authorization.html b/core/src/Authorization.html
index 14475eb2c2..61438267cd 100644
--- a/core/src/Authorization.html
+++ b/core/src/Authorization.html
@@ -1,4 +1,3 @@
-
 {#if !isHidden}
 <nav class="fd-menu">
   <ul class="fd-menu__list fd-menu__list--no-shadow">
@@ -43,6 +42,28 @@
       </a>
     </li>
     {/each}
+    {#if hasUserSettings}
+    <li class="fd-menu__item" on:click="{onUserSettingsClick}" data-testid="{getTestId(profileNav.settings)}">
+      <a aria-label="User Settings" class="fd-menu__link" data-testid="settings-link">
+        {#if profileNav.settings.icon}
+        {#if hasOpenUIicon(profileNav.settings)}
+        <span
+          class="fd-top-nav__icon sap-icon--{profileNav.settings.icon}"
+        ></span>
+        {:else}
+        <img
+          class="fd-top-nav__icon nav-icon"
+          src="{profileNav.settings.icon}"
+          alt="{profileNav.settings.altText ? profileNav.settings.altText : ''}"
+        >
+        {/if}
+        {/if}
+        <span
+          class="fd-menu__title"
+        >{$getTranslation(profileNav.settings.label)}</span>
+      </a>
+    </li>
+    {/if}
     {#if isAuthorizationEnabled || isProfileLogoutItem}
     {#if isLoggedIn || !isAuthorizationEnabled && isProfileLogoutItem}
     <li
@@ -84,7 +105,7 @@
 <script>
   import { AuthLayerSvc } from './services';
   import { createEventDispatcher, onMount, getContext } from 'svelte';
-  import { LuigiAuth, LuigiConfig } from './core-api';
+  import { LuigiAuth, LuigiConfig, LuigiNavigation } from './core-api';
   import {
     AuthHelpers,
     GenericHelpers,
@@ -102,9 +123,10 @@
   let idpProviderInstance;
   let userInfo;
   let isLoggedIn;
-  let profileNav = { logout: {}, items: [] };
+  let profileNav = { logout: {}, items: [], settings: {} };
   let isAuthorizationEnabled;
   let isProfileLogoutItem;
+  let hasUserSettings;
   let navProfileListenerInstalled;
   let profileLogoutFnDefined;
   let store = getContext('store');
@@ -159,17 +181,32 @@
           const logoutItem = await LuigiConfig.getConfigValueAsync(
             'navigation.profile.logout'
           );
+          //check if the User Settings schema exist
+          const userSettings = await LuigiConfig.getConfigValueAsync(
+            'settings.userSettings'
+          );
+          hasUserSettings = Boolean(userSettings);
+          //check if Settings dropdown is enabled for navigation in Shellbar
+          const userSettingsProfileMenuEntry = await LuigiConfig.getConfigValueAsync(
+            'settings.userSettings.userSettingsProfileMenuEntry'
+          );
+
           const profileNavData = {
             items:
               (await LuigiConfig.getConfigValueAsync(
                 'navigation.profile.items'
               )) || []
           };
+          if (hasUserSettings) {
+            profileNavData['settings'] = {
+              ...TOP_NAV_DEFAULTS.userSettingsProfileMenuEntry,
+              ...userSettingsProfileMenuEntry
+            };
+          }
           profileNavData['logout'] = {
             ...TOP_NAV_DEFAULTS.logout,
             ...logoutItem
           };
-
           isProfileLogoutItem = Boolean(logoutItem);
           profileLogoutFnDefined = false;
           AuthLayerSvc.setProfileLogoutFn(null);
@@ -230,6 +267,15 @@
     });
   }
 
+  export function onUserSettingsClick() {
+    getUnsavedChangesModalPromise().then(() => {
+      LuigiNavigation.openAsModal('projects/pr1/users', {
+        title: 'Users',
+        size: 'm'
+      });
+    });
+  }
+
   export function logout() {
     AuthLayerSvc.logout();
   }
@@ -251,4 +297,4 @@
     display: block;
     padding: 0.75rem 1rem 0.75rem 0.75rem;
   }
-</style>
+</style>
\ No newline at end of file
diff --git a/core/src/utilities/luigi-config-defaults.js b/core/src/utilities/luigi-config-defaults.js
index 72ebe09cb8..79340bfd8a 100644
--- a/core/src/utilities/luigi-config-defaults.js
+++ b/core/src/utilities/luigi-config-defaults.js
@@ -2,6 +2,10 @@ export const TOP_NAV_DEFAULTS = {
   logout: {
     label: 'Sign Out',
     icon: 'log'
+  },
+  userSettingsProfileMenuEntry: {
+    label: 'Settings',
+    icon: 'settings'
   }
 };
 
diff --git a/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js b/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js
index 54846ad75c..9620331df5 100644
--- a/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js
+++ b/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js
@@ -366,6 +366,43 @@ describe('Fiddle', () => {
 
         cy.contains('Login again');
       });
+      it('User settings in profile menu with custom label', () => {
+        newConfig.settings = {
+          userSettings: {
+            userSettingsProfileMenuEntry: {
+              label: 'My UserSettings',
+              icon: 'settings'
+            }
+          }
+        }
+        visitLoggedInWithAuthConfig('/', newConfig);
+        cy.get('[data-testid="luigi-topnav-profile"] button').click();
+        cy.get('[data-testid="settings-link"]').should('exist');
+        cy.get('[data-testid="settings-link"]').contains('My UserSettings')
+      });
+      it('User settings in profile menu with default label', () => {
+        newConfig.settings = {
+          userSettings: {}
+        }
+        visitLoggedInWithAuthConfig('/', newConfig);
+        cy.get('[data-testid="luigi-topnav-profile"] button').click();
+        cy.get('[data-testid="settings-link"]').should('exist');
+        cy.get('[data-testid="settings-link"]').contains('Settings')
+      });
+      it('User settings not in the profile menu, if not configured', () => {
+        newConfig.navigation.profile = {
+          logout: {
+            label: 'Bye bye',
+            icon: 'sys-cancel'
+          }
+        };
+        newConfig.auth.disableAutoLogin = false;
+        visitLoggedInWithAuthConfig('/', newConfig);
+
+        cy.get('[data-testid="luigi-topnav-profile"] button').click();
+        logoutLink().should('exist');
+        cy.get('[data-testid="settings-link"]').should('not.exist');
+      });
     });
   });
 
diff --git a/test/e2e-test-application/src/luigi-config/extended/settings.js b/test/e2e-test-application/src/luigi-config/extended/settings.js
index c829d511c4..cd12357a36 100644
--- a/test/e2e-test-application/src/luigi-config/extended/settings.js
+++ b/test/e2e-test-application/src/luigi-config/extended/settings.js
@@ -55,6 +55,52 @@ class Settings {
       }
     };
   }; */
+  userSettings = {
+    userSettingsProfileMenuEntry: {
+      label: 'My Settings',
+      icon: 'settings'
+    },
+    userSettingGroups: {
+      userAccount: {
+        label: 'User Account',
+        sublabel: 'username',
+        icon: 'icon.jpg',
+        title: 'title',
+        settings: {
+          name: { type: 'string', label: 'Name', isEditable: true },
+          email: { type: 'string', label: 'E-Mail', isEditable: false },
+          server: { type: 'string', label: 'Server', isEditable: false }
+        }
+      },
+      language: {
+        label: 'Language & Region',
+        sublabel: 'EN | Time Format: 12h',
+        icon: false,
+        title: 'Language & Region',
+        settings: {
+          language: {
+            type: 'enum',
+            label: 'Language and Region',
+            options: ['German', 'English', 'Spanish', 'French'],
+            description:
+              'After you save your settings, the browser will refresh for the new language to take effect.'
+          },
+          date: { type: 'string', label: 'Date Format' },
+          time: { type: 'enum', label: 'Time Format', options: ['12 h', '24 h'] }
+        }
+      },
+      privacy: {
+        label: 'Privacy',
+        title: 'Privacy',
+        settings: {
+          policy: {
+            type: 'string',
+            label: 'Privacy policy has not been defined.'
+          }
+        }
+      }
+    }
+  }
 }
 
 export const settings = new Settings();

From f13522ffd9891ba76d1447fc0c9afb1f66e5592c Mon Sep 17 00:00:00 2001
From: JohannesDoberer <johannes.doberer@sap.com>
Date: Thu, 26 Nov 2020 14:38:07 +0100
Subject: [PATCH 02/13] Read/write settings using core api (#1709)

---
 core/src/core-api/config.js                   | 41 ++++++++++++-
 core/test/services/config.spec.js             | 57 ++++++++++++++++++-
 docs/luigi-core-api.md                        | 32 +++++++++++
 .../src/luigi-config/extended/settings.js     | 16 ++++--
 4 files changed, 137 insertions(+), 9 deletions(-)

diff --git a/core/src/core-api/config.js b/core/src/core-api/config.js
index 5bbc8ebc00..b7f9685741 100644
--- a/core/src/core-api/config.js
+++ b/core/src/core-api/config.js
@@ -15,8 +15,9 @@ class LuigiConfig {
    * @memberof Configuration
    */
   constructor() {
-    this.configReadyCallback = function() {};
+    this.configReadyCallback = function () { };
     this.initialized = false;
+    this.USER_SETTINGS_KEY = 'luigi.preferences.userSettings';
   }
 
   /**
@@ -232,6 +233,44 @@ class LuigiConfig {
       container.removeChild(container.lastChild);
     }
   }
+
+  /**
+   * Reads the user settings object.
+   * You can choose a custom storage to read the user settings by implementing the `userSetting.readUserSettings` function in the settings section of the Luigi configuration.
+   * By default, the user settings will be read from the **localStorage**
+   * @memberof Configuration
+   * @example
+   * Luigi.readUserSettings();
+   * @since NEXTRELEASE
+   */
+  async readUserSettings() {
+    const userSettings = await this.getConfigValueAsync('settings.userSettings');
+    if (userSettings && GenericHelpers.isFunction(userSettings.readUserSettings)) {
+      return userSettings.readUserSettings();
+    }
+    return JSON.parse(localStorage.getItem(this.USER_SETTINGS_KEY));
+  }
+
+  /**
+   * Reads the user settings object.
+   * You can choose a custom storage to write the user settings by implementing the `userSetting.storeUserSettings` function in the settings section of the Luigi configuration
+   * By default, the user settings will be written from the **localStorage**
+   * @memberof Configuration
+   * @param {Object} userSettingsObj to store in the storage.
+   * @example
+   * Luigi.storeUserSettings(userSettingsobject);
+   * @since NEXTRELEASE
+   */
+  async storeUserSettings(userSettingsObj) {
+    const userSettings = await this.getConfigValueAsync('settings.userSettings');
+    if (userSettings && GenericHelpers.isFunction(userSettings.storeUserSettings)) {
+      userSettings.storeUserSettings(userSettingsObj);
+    }
+    else {
+      localStorage.setItem(this.USER_SETTINGS_KEY, JSON.stringify(userSettingsObj));
+    }
+  }
 }
 
+
 export const config = new LuigiConfig();
diff --git a/core/test/services/config.spec.js b/core/test/services/config.spec.js
index c07f0fcdc9..f9b19dfc8c 100644
--- a/core/test/services/config.spec.js
+++ b/core/test/services/config.spec.js
@@ -1,9 +1,11 @@
 const chai = require('chai');
 const assert = chai.assert;
 const sinon = require('sinon');
+const expect = chai.expect;
+const spy = sinon.spy;
 
 import { LuigiConfig } from '../../src/core-api';
-import { AsyncHelpers } from './../../src/utilities/helpers';
+import { AsyncHelpers, GenericHelpers } from './../../src/utilities/helpers';
 
 describe('Config', () => {
   describe('getConfigBooleanValue', () => {
@@ -110,7 +112,7 @@ describe('Config', () => {
         .returns(Promise.reject(new Error('rejected')));
       //given
       LuigiConfig.config = {
-        rejectFnAsync: (param1, param2) => {}
+        rejectFnAsync: (param1, param2) => { }
       };
 
       // second parameter throws an error and we want it to throw an error on failure
@@ -124,4 +126,55 @@ describe('Config', () => {
       assert.equal(res.message, 'rejected', 'return error does not equal');
     });
   });
+
+  describe('User settings', () => {
+    before(() => {
+      global['localStorage'] = {
+        getItem: sinon.stub(),
+        setItem: sinon.stub()
+      };
+    });
+    afterEach(() => {
+      sinon.restore();
+      sinon.reset();
+    });
+    const key = 'myStorageKey';
+    const userSettingsObj = {
+      userSettings: {
+        userSettingGroups: {}
+      }
+    };
+    const myConfig = {
+      storeUserSettings: () => {
+        console.log('write');
+      },
+      readUserSettings: () => {
+        console.log('read');
+      }
+    };
+
+    it('write user settings to local storage', async () => {
+      await LuigiConfig.storeUserSettings(userSettingsObj);
+      sinon.assert.called(global.localStorage.setItem);
+    });
+    it('write user settings to custom storage', async () => {
+      console.log = sinon.spy();
+      sinon.stub(LuigiConfig, 'getConfigValueAsync').returns(myConfig);
+      sinon.stub(GenericHelpers, 'isFunction').returns(true);
+      await LuigiConfig.storeUserSettings(userSettingsObj);
+      sinon.assert.calledOnce(console.log);
+    });
+    it('read user settings from local storage', async () => {
+      sinon.stub(JSON, 'parse').returns(JSON.stringify(userSettingsObj));
+      await LuigiConfig.readUserSettings();
+      sinon.assert.called(global.localStorage.getItem);
+    });
+    it('read user settings from custom storage', async () => {
+      console.log = sinon.spy();
+      sinon.stub(LuigiConfig, 'getConfigValueAsync').returns(myConfig);
+      sinon.stub(GenericHelpers, 'isFunction').returns(true);
+      await LuigiConfig.readUserSettings();
+      sinon.assert.calledOnce(console.log);
+    });
+  });
 });
diff --git a/docs/luigi-core-api.md b/docs/luigi-core-api.md
index 76857738fe..249a0aa4f0 100644
--- a/docs/luigi-core-api.md
+++ b/docs/luigi-core-api.md
@@ -172,6 +172,38 @@ Luigi.unload()
 
 -   **since**: 1.2.2
 
+#### readUserSettings
+
+Reads the user settings object from the **localStorage**. It is possible to choose a custom storage type by implementing the `settings.userSetting.readUserSettings` function.
+
+##### Examples
+
+```javascript
+Luigi.readUserSettings();
+```
+
+**Meta**
+
+-   **since**: NEXTRELEASE
+
+#### storeUserSettings
+
+Writes the user settings object to the **localStorage**. It is possible to choose a custom storage type by implementing the `settings.userSetting.storeUserSettings` function.
+
+##### Parameters
+
+-   `userSettingsObj` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** to store in the storage.
+
+##### Examples
+
+```javascript
+Luigi.storeUserSettings(userSettingsobject);
+```
+
+**Meta**
+
+-   **since**: NEXTRELEASE
+
 ## Luigi.elements()
 
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
diff --git a/test/e2e-test-application/src/luigi-config/extended/settings.js b/test/e2e-test-application/src/luigi-config/extended/settings.js
index cd12357a36..ff388a7d6d 100644
--- a/test/e2e-test-application/src/luigi-config/extended/settings.js
+++ b/test/e2e-test-application/src/luigi-config/extended/settings.js
@@ -55,11 +55,19 @@ class Settings {
       }
     };
   }; */
+
   userSettings = {
     userSettingsProfileMenuEntry: {
       label: 'My Settings',
       icon: 'settings'
     },
+    // functions to use a custom storage like sessionStorage
+    // storeUserSettings: (obj) => {
+    //   sessionStorage.setItem('test', JSON.stringify(obj));
+    // },
+    // readUserSettings: () => {
+    //   return JSON.parse(sessionStorage.getItem('test'));
+    // },
     userSettingGroups: {
       userAccount: {
         label: 'User Account',
@@ -82,8 +90,7 @@ class Settings {
             type: 'enum',
             label: 'Language and Region',
             options: ['German', 'English', 'Spanish', 'French'],
-            description:
-              'After you save your settings, the browser will refresh for the new language to take effect.'
+            description: 'After you save your settings, the browser will refresh for the new language to take effect.'
           },
           date: { type: 'string', label: 'Date Format' },
           time: { type: 'enum', label: 'Time Format', options: ['12 h', '24 h'] }
@@ -93,10 +100,7 @@ class Settings {
         label: 'Privacy',
         title: 'Privacy',
         settings: {
-          policy: {
-            type: 'string',
-            label: 'Privacy policy has not been defined.'
-          }
+          policy: { type: 'string', label: 'Privacy policy has not been defined.' }
         }
       }
     }

From f653bb0715511d06c37131b2a54de744e6bb26b7 Mon Sep 17 00:00:00 2001
From: JohannesDoberer <johannes.doberer@sap.com>
Date: Mon, 14 Dec 2020 09:18:56 +0100
Subject: [PATCH 03/13] Dialog box for user settings (#1750)

known issue.. grid is not displayed correctly in ie11
---
 core/dev-tools/simpledev.js                   |  46 +--
 core/fundamentalStyleClasses.js               |  10 +-
 core/package.json                             |   2 +-
 core/src/App.html                             |  37 +-
 core/src/Authorization.html                   |  10 +-
 core/src/UserSettingsDialog.html              | 332 ++++++++++++++++++
 core/src/UserSettingsEditor.html              | 183 ++++++++++
 core/src/core-api/config.js                   |   8 +-
 core/src/core-api/ux.js                       |  18 +
 core/src/main.js                              |   8 +
 core/src/navigation/LeftNav.html              |  18 +-
 core/src/utilities/constants.js               |   2 +-
 core/src/utilities/helpers/index.js           |   3 +-
 .../helpers/usersetting-dialog-helpers.js     |  20 ++
 core/src/utilities/luigi-config-defaults.js   |   5 +
 core/test/services/config.spec.js             |   6 +-
 .../usersetting-dialog-helpers.spec.js        |  79 +++++
 docs/general-settings.md                      |  18 +
 docs/luigi-core-api.md                        |  27 +-
 .../tests/0-fiddle/fiddle-navigation.spec.js  |  59 +++-
 .../src/luigi-config/extended/settings.js     |  52 ++-
 21 files changed, 867 insertions(+), 76 deletions(-)
 create mode 100644 core/src/UserSettingsDialog.html
 create mode 100644 core/src/UserSettingsEditor.html
 create mode 100644 core/src/utilities/helpers/usersetting-dialog-helpers.js
 create mode 100644 core/test/utilities/helpers/usersetting-dialog-helpers.spec.js

diff --git a/core/dev-tools/simpledev.js b/core/dev-tools/simpledev.js
index bf343a9b60..f447c76cfe 100644
--- a/core/dev-tools/simpledev.js
+++ b/core/dev-tools/simpledev.js
@@ -42,27 +42,27 @@ let logo_ascii = `
                                       //////
 
 `;
-console.log('\x1b[32m', logo_ascii,'\x1b[0m');
+console.log('\x1b[32m', logo_ascii, '\x1b[0m');
 
 const rootPath = './dev-tools/simple-app';
 const indexPath = rootPath + '/index.html';
 try {
   if (fs.existsSync(indexPath)) {
-    console.log('\x1b[32mFound ' + indexPath,'\x1b[0m');
+    console.log('\x1b[32mFound ' + indexPath, '\x1b[0m');
   } else {
-    console.log('\x1b[33mCould not find ' + indexPath, '\nInitializing new minimalistic Luigi app from template...','\x1b[0m');
+    console.log('\x1b[33mCould not find ' + indexPath, '\nInitializing new minimalistic Luigi app from template...', '\x1b[0m');
     if (!fs.existsSync(rootPath)) {
       fs.mkdirSync(rootPath);
     }
     fs.copy('./dev-tools/templates/simple', rootPath);
-    console.log('\x1b[32mNew Luigi app created under ' + rootPath,'\x1b[0m');
+    console.log('\x1b[32mNew Luigi app created under ' + rootPath, '\x1b[0m');
   }
-} catch(err) {
+} catch (err) {
   console.error(err)
 }
 
 webpack_compiler.hooks.watchRun.tap('CLI output', () => {
-  console.log('\x1b[33mWebpack [' + new Date().toLocaleTimeString() +']: ', ' Rebuild in progress...','\x1b[0m');
+  console.log('\x1b[33mWebpack [' + new Date().toLocaleTimeString() + ']: ', ' Rebuild in progress...', '\x1b[0m');
 });
 
 const watching = webpack_compiler.watch({
@@ -78,31 +78,31 @@ const watching = webpack_compiler.watch({
     return;
   }
 
-  if(stats.hasErrors()) {
-    console.log('\x1b[33mWebpack [' + new Date().toLocaleTimeString() +']: ','\x1b[31m', "Rebuild of Luigi core failed! \n",
+  if (stats.hasErrors()) {
+    console.log('\x1b[33mWebpack [' + new Date().toLocaleTimeString() + ']: ', '\x1b[31m', "Rebuild of Luigi core failed! \n",
       stats.toString({
-      all: false,
-      errors: true,
-      colors: true,
+        all: false,
+        errors: true,
+        colors: true,
 
-    }));
+      }));
   } else {
-    console.log('\x1b[33mWebpack [' + new Date().toLocaleTimeString() +']: ','\x1b[32m', 'Luigi core rebuilt without errors.\n','\x1b[0m');
+    console.log('\x1b[33mWebpack [' + new Date().toLocaleTimeString() + ']: ', '\x1b[32m', 'Luigi core rebuilt without errors.\n', '\x1b[0m');
   }
 });
 
 var params = {
-	port: 4100,
-	host: "0.0.0.0",
-	root: rootPath,
-	open: false,
-	watch: ['./dev-tools'],
-	file: "index.html",
-	wait: 1000,
-	mount: [['/public', './public']],
-	logLevel: 0
+  port: 4100,
+  host: "0.0.0.0",
+  root: rootPath,
+  open: false,
+  watch: ['./dev-tools'],
+  file: "index.html",
+  wait: 1000,
+  mount: [['/public', './public'], ['/public-ie11', './public-ie11']],
+  logLevel: 0
 };
 
 
 liveServer.start(params);
-console.log('\x1b[32mStarting live-server at','\x1b[36m','http://localhost:' + params.port,'\x1b[0m');
+console.log('\x1b[32mStarting live-server at', '\x1b[36m', 'http://localhost:' + params.port, '\x1b[0m');
diff --git a/core/fundamentalStyleClasses.js b/core/fundamentalStyleClasses.js
index 2e11cbc8cc..681ebca092 100644
--- a/core/fundamentalStyleClasses.js
+++ b/core/fundamentalStyleClasses.js
@@ -17,9 +17,9 @@ module.exports = [
   './node_modules/fundamental-styles/dist/counter.css',
   './node_modules/fundamental-styles/dist/dialog.css',
   //'./node_modules/fundamental-styles/dist/fieldset.css',
-  //'./node_modules/fundamental-styles/dist/form-group.css',
-  //'./node_modules/fundamental-styles/dist/form-item.css',
-  //'./node_modules/fundamental-styles/dist/form-label.css',
+  './node_modules/fundamental-styles/dist/form-group.css',
+  './node_modules/fundamental-styles/dist/form-item.css',
+  './node_modules/fundamental-styles/dist/form-label.css',
   //'./node_modules/fundamental-styles/dist/form-message.css',
   //'./node_modules/fundamental-styles/dist/form-select.css',
   //'./node_modules/fundamental-styles/dist/inline-help.css',
@@ -29,7 +29,7 @@ module.exports = [
   //'./node_modules/fundamental-styles/dist/layout-grid.css',
   //'./node_modules/fundamental-styles/dist/layout-panel.css',
   './node_modules/fundamental-styles/dist/link.css',
-  //'./node_modules/fundamental-styles/dist/list.css',
+  './node_modules/fundamental-styles/dist/list.css',
   //'./node_modules/fundamental-styles/dist/localization-editor.css',
   './node_modules/fundamental-styles/dist/menu.css',
   //'./node_modules/fundamental-styles/dist/message-box.css',
@@ -46,7 +46,7 @@ module.exports = [
   // './node_modules/fundamental-styles/dist/radio.css',
   //'./node_modules/fundamental-styles/dist/section.css',
   //'./node_modules/fundamental-styles/dist/segmented-button.css',
-  // './node_modules/fundamental-styles/dist/select.css',
+  './node_modules/fundamental-styles/dist/select.css',
   './node_modules/fundamental-styles/dist/shellbar.css',
   './node_modules/fundamental-styles/dist/side-nav.css',
   // './node_modules/fundamental-styles/dist/switch.css',
diff --git a/core/package.json b/core/package.json
index 88c68b0cc3..7b45ede3f9 100644
--- a/core/package.json
+++ b/core/package.json
@@ -82,7 +82,7 @@
     },
     {
       "path": "./public-ie11/luigi-ie11.js",
-      "maxSize": "600 kB",
+      "maxSize": "620 kB",
       "compression": "none"
     },
     {
diff --git a/core/src/App.html b/core/src/App.html
index 151ee8c14b..1ffd5f755d 100644
--- a/core/src/App.html
+++ b/core/src/App.html
@@ -1,4 +1,4 @@
-<svelte:window on:resize="{onResize}"/>
+<svelte:window on:resize="{onResize}" />
 <div id="app" class="{hideNav? 'no-nav' : ''} {hideSideNav? 'no-side-nav':''}">
   {#if alerts && alerts.length}
   <Alerts alertQueue="{alerts}" on:alertDismiss="{handleAlertDismissExternal}"></Alerts>
@@ -30,6 +30,12 @@
     on:modalDismiss="{() => handleModalResult(false)}"
   ></ConfirmationModal>
   {/if}
+  {#if userSettingsInternalObj.displayed}
+  <UserSettingsDialog
+    on:close="{closeUserSettings}"
+    userSettingsData={userSettingsInternalObj.preparedSchema}>
+  </UserSettingsDialog>
+  {/if}
   <Backdrop disable="{disableBackdrop}">
     <div
       class="fd-page iframeContainer {mfSplitView.displayed?'lui-split-view':''} {mfSplitView.collapsed?'lui-collapsed':''}"
@@ -108,6 +114,7 @@
   import Alerts from './Alerts.html';
   import ConfirmationModal from './ConfirmationModal.html';
   import Modal from './Modal.html';
+  import UserSettingsDialog from './UserSettingsDialog.html'
   import Backdrop from './Backdrop.html';
   import SplitView from './SplitView.html';
   import LeftNav from './navigation/LeftNav.html';
@@ -128,7 +135,8 @@
     RoutingHelpers,
     IframeHelpers,
     AuthHelpers,
-    StorageHelper
+    StorageHelper,
+    UserSettingsHelper
   } from './utilities/helpers';
   import {
     LuigiI18N,
@@ -201,6 +209,7 @@
   let resizeTabNavToggle = false;
   let thirdPartyCookiesCheck;
   let searchProvider;
+  let userSettingsInternalObj;
   export let isSearchFieldVisible;
   export let inputElem;
   export let luigiCustomSearchRenderer__slot;
@@ -324,7 +333,7 @@
             }
             resolve();
           },
-          () => {}
+          () => { }
         );
       } else {
         resolve();
@@ -988,6 +997,22 @@
     }
   };
 
+  //Dialog Box
+  userSettingsInternalObj = {};
+  export const openUserSettings = () => {
+
+    //check if empty array
+    const preparedSchema = UserSettingsHelper.prepareUserSettingsSchema();
+    if (Array.isArray(preparedSchema) && preparedSchema.length) {
+      userSettingsInternalObj.preparedSchema = [...preparedSchema];
+      userSettingsInternalObj.displayed = true;
+    }
+  }
+
+  export const closeUserSettings = () => {
+    userSettingsInternalObj.displayed = false;
+  }
+
   function init(node) {
     const isolateAllViews = LuigiConfig.getConfigValue(
       'navigation.defaults.isolateView'
@@ -1405,7 +1430,7 @@
         thirdPartyCookieCheckIframe.src =
           thirdPartyCookiesCheck.thirdPartyCookieScriptLocation;
         document.body.appendChild(thirdPartyCookieCheckIframe);
-        thirdPartyCookieCheckIframe.onload = function() {
+        thirdPartyCookieCheckIframe.onload = function () {
           setTimeout(() => {
             if (thirdPartyCookiesStatus() === 'disabled') {
               tpcErrorHandling(thirdPartyCookiesCheck);
@@ -1417,7 +1442,7 @@
     }
   });
 
-  afterUpdate(() => {});
+  afterUpdate(() => { });
 </script>
 
 <style type="text/scss">
@@ -1798,4 +1823,4 @@
       display: none;
     }
   }
-</style>
+</style>
\ No newline at end of file
diff --git a/core/src/Authorization.html b/core/src/Authorization.html
index 61438267cd..e345fa1156 100644
--- a/core/src/Authorization.html
+++ b/core/src/Authorization.html
@@ -105,7 +105,7 @@
 <script>
   import { AuthLayerSvc } from './services';
   import { createEventDispatcher, onMount, getContext } from 'svelte';
-  import { LuigiAuth, LuigiConfig, LuigiNavigation } from './core-api';
+  import { LuigiAuth, LuigiConfig, LuigiUX } from './core-api';
   import {
     AuthHelpers,
     GenericHelpers,
@@ -268,12 +268,8 @@
   }
 
   export function onUserSettingsClick() {
-    getUnsavedChangesModalPromise().then(() => {
-      LuigiNavigation.openAsModal('projects/pr1/users', {
-        title: 'Users',
-        size: 'm'
-      });
-    });
+    LuigiUX.openUserSettings();
+    dispatch('toggleDropdownState');
   }
 
   export function logout() {
diff --git a/core/src/UserSettingsDialog.html b/core/src/UserSettingsDialog.html
new file mode 100644
index 0000000000..12293f11a5
--- /dev/null
+++ b/core/src/UserSettingsDialog.html
@@ -0,0 +1,332 @@
+<script>
+    import {
+        createEventDispatcher,
+        onMount,
+        onDestroy,
+        beforeUpdate,
+        getContext
+    } from 'svelte';
+    import { NavigationHelpers, GenericHelpers } from './utilities/helpers';
+    import UserSettingsEditor from './UserSettingsEditor.html';
+    import { CSS_BREAKPOINTS } from './utilities/constants';
+    import { LuigiConfig } from './core-api';
+    import { TOP_NAV_DEFAULTS } from './utilities/luigi-config-defaults';
+    import { KEYCODE_ESC } from './utilities/keycode.js';
+    export let schemaObj;
+    export let userSettingsData;
+    const dispatch = createEventDispatcher();
+    let userSettingGroup;
+    let storedUserSettings = {};
+    let userSettingsGroupKey;
+    let userSettingsSchema;
+    let displayEditor = false;
+    let previousUserSettings = {};
+    let getTranslation = getContext('getTranslation');
+    let dialogHeader = TOP_NAV_DEFAULTS.userSettingsDialog.dialogHeader;
+    let saveBtn = TOP_NAV_DEFAULTS.userSettingsDialog.saveBtn;
+    let dismissBtn = TOP_NAV_DEFAULTS.userSettingsDialog.dismissBtn;
+
+    onMount(() => {
+        const usLocalization = LuigiConfig.getConfigValue('settings.userSettings.userSettingsDialog');
+        if (usLocalization) {
+            dialogHeader = usLocalization.dialogHeader ? usLocalization.dialogHeader : dialogHeader;
+            saveBtn = usLocalization.saveBtn ? usLocalization.saveBtn : saveBtn;
+            dismissBtn = usLocalization.dismissBtn ? usLocalization.dismissBtn : dismissBtn;
+        }
+        let key;
+        for (let k in userSettingsData[0]) {
+            key = k;
+            break;
+        }
+        LuigiConfig.readUserSettings().then(userSettingsFromStorage => {
+            previousUserSettings = JSON.parse(JSON.stringify(userSettingsFromStorage));
+            if (userSettingsFromStorage === null) {
+                storedUserSettings;
+            } else {
+                storedUserSettings = userSettingsFromStorage;
+            }
+            openEditor([key, userSettingsData[0][key]]);
+        }).catch(error => {
+            if (error && error.message) {
+                console.error(error.message)
+            }
+            if (error && error.closeDialog) {
+                dispatch('close');
+            }
+        });
+    });
+
+    function openEditor(category, event) {
+        if (event) {
+            document.querySelectorAll('.lui-us-list .fd-nested-list__link').forEach(elem => {
+                elem.classList.remove('is-selected');
+            });
+            const link = closest(event.target, '.fd-nested-list__link', 20);
+            link.classList.add("is-selected");
+            if (window.innerWidth < CSS_BREAKPOINTS.desktopMinWidth) {
+                closeNavOnCategoryClickMobile();
+            }
+        } else {
+            document.querySelectorAll('.lui-us-list .fd-nested-list__link')[0].classList.add("is-selected");
+        }
+        userSettingsSchema = category;
+        displayEditor = true;
+    }
+
+    const updateSettingsObject = (event) => {
+        storedUserSettings = event.detail.userSettings;
+    }
+
+    function storeUserSettings() {
+        LuigiConfig.storeUserSettings(storedUserSettings, previousUserSettings).then(() => {
+            dispatch('close');
+        }).catch(error => {
+            if (error && error.message) {
+                console.error(error.message)
+            }
+            if (error && error.closeDialog) {
+                dispatch('close');
+            }
+        });
+    }
+
+    function closest(element, selector, max) {
+        if (element && max > 0) {
+            if (GenericHelpers.isIE()) {
+                return element.msMatchesSelector(selector) ? element : closest(element.parentNode, selector, max - 1);
+            } else {
+                return element.matches(selector) ? element : closest(element.parentNode, selector, max - 1);
+            }
+        } else {
+            return undefined;
+        }
+    }
+
+    function closeNavOnCategoryClickMobile() {
+        toggleNavMobile();
+    }
+
+    function toggleNavMobile() {
+        document.querySelector('.lui-usersettings-dialog').classList.toggle('usersettings-leftNavVisible');
+    }
+    function hasOpenUIicon(node) {
+        return NavigationHelpers.isOpenUIiconName(node.icon);
+    }
+
+    export function handleKeydown(event) {
+        if (event.keyCode === KEYCODE_ESC) {
+            dispatch('close');
+        }
+    }
+</script>
+
+<style>
+    .lui-usersettings-dialog {
+        z-index: 999;
+    }
+
+    .dialog-size {
+        width: 58rem;
+        height: 42rem;
+        max-height: calc(100% - 2.5rem - 6%);
+        position: relative;
+    }
+
+    .lui-usersettings-body {
+        position: relative;
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    .lui-usersettings-left-nav {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 20rem;
+        height: 100%;
+        z-index: 2;
+    }
+
+    .fd-side-nav {
+        height: 100%;
+        width: 100%;
+        overflow-y: scroll;
+    }
+
+    .lui-usersettings-content {
+        position: absolute;
+        left: 20rem;
+        top: 0;
+        height: 100%;
+        right: 0;
+        overflow-wrap: break-word;
+        padding: 20px;
+        overflow: auto;
+        height: 100%;
+    }
+
+    .lui-usersettings-burger {
+        margin-right: 16px;
+        cursor: pointer;
+        display: none;
+    }
+
+    .fd-nested-list__item {
+        display: flex;
+        -webkit-box-align: center;
+        align-items: center;
+        position: relative;
+        -webkit-box-flex: 1;
+        flex: 1 1 auto;
+        max-width: 100%;
+    }
+
+    .fd-nested-list__link {
+        height: 5rem;
+    }
+
+    .fd-nested-list__icon img {
+        max-width: 18px;
+        max-height: 18px;
+    }
+
+    .lui-usersettings-list-item__info-container {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: flex;
+        align-items: center;
+    }
+
+    .lui-usersettings-list-item__title-container {
+        display: flex;
+        flex-direction: column;
+        flex: auto;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .lui-usersettings-list-item__title {
+        font-size: .875rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1 1 auto;
+    }
+
+    .lui-usersettings-list-item__subtitle {
+        font-size: .875rem;
+        color: #6a6d70;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1 1 auto;
+        padding-top: 0.875rem;
+    }
+
+    @media (max-width: 600px) {
+        .dialog-size {
+            height: 80vh;
+        }
+
+        .lui-usersettings-burger {
+            display: block;
+            margin-left: 0px;
+        }
+
+        :global(.usersettings-leftNavVisible) .lui-usersettings-left-nav {
+            width: 200px;
+        }
+
+        .lui-usersettings-content {
+            left: 0;
+        }
+
+        .lui-usersettings-left-nav {
+            width: 0;
+            transition: 0.5s;
+        }
+
+        .fd-nested-list__title {
+            padding-right: 0;
+        }
+    }
+</style>
+<svelte:window on:keydown="{handleKeydown}" />
+<div class="fd-dialog fd-dialog--active lui-usersettings-dialog">
+    <div class="fd-dialog__content dialog-size">
+        <div class="fd-dialog__header fd-bar fd-bar--header">
+            <div class="fd-bar__left">
+                <div class="fd-bar__element">
+                    <button class="fd-shellbar__button fd-button sap-icon--menu2 lui-usersettings-burger"
+                        on:click="{toggleNavMobile}" tabindex="0"></button>
+                </div>
+                <div class="fd-bar__element">
+                    <h3 class="fd-dialog__title" data-testid="lui-us-header">{$getTranslation(dialogHeader)}</h3>
+                </div>
+            </div>
+            <div class="fd-bar__right">
+                <div class="fd-bar__element">
+                    <button
+                        class="fd-button fd-button--transparent fd-button--compact fd-dialog__close sap-icon--decline"
+                        on:click="{() => dispatch('close')}" aria-label="close"></button>
+                </div>
+            </div>
+        </div>
+        <div class="fd-dialog__body lui-usersettings-body">
+            <div class="lui-usersettings-left-nav">
+                <div class="fd-side-nav">
+                    <div class="fd-side-nav__main-navigation">
+                        <div class="lui-fd-side__nav-wrapper">
+                            <ul class="fd-nested-list lui-us-list">
+                                {#each Object.entries(userSettingsData) as [key, userSettingsGroup], index}
+                                    {#each Object.entries(userSettingsGroup) as userSettingsGroupProperty}
+                                        <li class="fd-nested-list__item">
+                                            <a class="fd-nested-list__link"  on:click|preventDefault="{() => openEditor(userSettingsGroupProperty, event)}">
+                                                <div class="lui-usersettings-list-item__info-container">
+                                                    {#if userSettingsGroupProperty[1].icon}
+                                                        {#if hasOpenUIicon(userSettingsGroupProperty[1])}
+                                                            <span class="fd-nested-list__icon sap-icon--{userSettingsGroupProperty[1].icon}"></span>
+                                                        {:else}
+                                                        <span class="fd-nested-list__icon">
+                                                            <img src="{userSettingsGroupProperty[1].icon}" alt="{userSettingsGroupProperty[1].altText ? userSettingsGroupProperty[1].altText : ''}">
+                                                        </span>
+                                                        {/if}
+                                                    {:else}
+                                                    <span class="fd-nested-list__icon"></span>
+                                                    {/if}
+                                                    <div class="lui-usersettings-list-item__title-container">
+                                                        <span class="lui-usersettings-list-item__title">{$getTranslation(userSettingsGroupProperty[1].label?userSettingsGroupProperty[1].label:'')}</span>
+                                                        <span class="lui-usersettings-list-item__subtitle">{$getTranslation(userSettingsGroupProperty[1].sublabel?userSettingsGroupProperty[1].sublabel:'')}</span>
+                                                    </div>
+                                                </div>
+                                            </a>
+                                        </li>
+                                    {/each}
+                                {/each}
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="lui-usersettings-content">
+                {#if displayEditor}
+                    <UserSettingsEditor userSettings={storedUserSettings} userSettingsGroupSchema={userSettingsSchema} on:updateSettingsObject="{updateSettingsObject}"></UserSettingsEditor>
+                {/if}
+            </div>
+        </div>
+        <footer class="fd-dialog__footer fd-bar fd-bar--footer">
+            <div class="fd-bar__right">
+                <div class="fd-bar__element">
+                    <button on:click="{() => storeUserSettings()}" data-testid="lui-us-saveBtn"
+                        class="fd-dialog__decisive-button fd-button fd-button--emphasized fd-button--compact confirm-button">{$getTranslation(saveBtn)}</button>
+                </div>
+                <div class="fd-bar__element">
+                    <button on:click="{() => dispatch('close')}" data-testid="lui-us-dismissBtn"
+                        class="fd-dialog__decisive-button fd-button fd-button--transparent fd-button--compact">{$getTranslation(dismissBtn)}</button>
+                </div>
+            </div>
+        </footer>
+    </div>
+</div>
\ No newline at end of file
diff --git a/core/src/UserSettingsEditor.html b/core/src/UserSettingsEditor.html
new file mode 100644
index 0000000000..a5d5f7b89a
--- /dev/null
+++ b/core/src/UserSettingsEditor.html
@@ -0,0 +1,183 @@
+<svelte:window on:click="{closeAllCombos}" on:blur="{closeAllCombos}"></svelte:window>
+<script>
+    import { onMount, afterUpdate, beforeUpdate, createEventDispatcher, getContext } from 'svelte';
+    import { GenericHelpers } from './utilities/helpers';
+    export let userSettingsGroupSchema;
+    export let userSettingsGroupKey;
+    export let userSettings;
+    const dispatch = createEventDispatcher();
+    let settingsSchema;
+    let displayOptions;
+    let getTranslation = getContext('getTranslation');
+    beforeUpdate(() => {
+        if (!userSettings.hasOwnProperty(userSettingsGroupSchema[0])) {
+            userSettings[userSettingsGroupSchema[0]] = {};
+        }
+    });
+
+    export function updateSettingsObject() {
+        dispatch('updateSettingsObject', { userSettings })
+    }
+
+    function closeAllCombos(self) {
+        document.querySelectorAll('.lui-usersettings-content .fd-popover__control').forEach(elem => {
+            setExpandedState(elem, false);
+        });
+    }
+
+    function closest(element, selector, max) {
+        if (element && max > 0) {
+            if (GenericHelpers.isIE()) {
+                return element.msMatchesSelector(selector) ? element : closest(element.parentNode, selector, max - 1);
+            } else {
+                return element.matches(selector) ? element : closest(element.parentNode, selector, max - 1);
+            }
+        } else {
+            return undefined;
+        }
+    }
+
+    function toggleOptions(event, editable) {
+        if (editable || editable === undefined) {
+            console.log('test');
+            const self = closest(event.target, '.fd-popover__control', 20);
+            closeAllCombos(self);
+            const currentState = self.getAttribute('aria-expanded') === 'true';
+            setExpandedState(self, !currentState);
+        }
+    }
+
+    function setExpandedState(self, value) {
+        const indicatorBtn = self.querySelector('.fd-input-group__button');
+        const optionsPopOver = self.parentNode.querySelector('.fd-popover__body');
+        self.setAttribute('aria-expanded', value);
+        optionsPopOver.setAttribute('aria-hidden', !value);
+        indicatorBtn.setAttribute('aria-expanded', value);
+    }
+
+    function updateComboBox(key, option) {
+        userSettings[userSettingsGroupSchema[0]][key] = option;
+    }
+
+</script>
+
+<style>
+    .lui-form-grid {
+        display: grid;
+        display: -ms-grid;
+        grid-template-columns: minmax(0, 1fr) 2fr;
+        -ms-grid-columns: minmax(0, 1fr) 2fr;
+    }
+
+    .lui-value-container {
+        grid-column: 2;
+        -ms-grid-column: 2;
+    }
+
+    .lui-value-container>input[type="checkbox"] {
+        margin-top: 13px;
+    }
+
+    .lui-form-label {
+        grid-column: 1;
+        -ms-grid-column: 1;
+        text-align: right;
+        padding-top: 10px;
+        overflow: hidden;
+        min-width: 0;
+        word-break: break-word;
+        padding: 10px;
+    }
+
+    .fd-form-label {
+        white-space: pre-line;
+    }
+
+    .lui-us-content-header-container {
+        width: 100%;
+        padding: 1.5rem 2rem;
+
+    }
+
+    .lui-title--h2 {
+        font-size: var(--sapFontHeader2Size, 1.5rem);
+    }
+
+    .lui-title {
+        line-height: var(--sapContent_LineHeight, 1.4);
+        font-family: var(--sapFontFamily, "72", "72full", Arial, Helvetica, sans-serif);
+        font-weight: 400;
+        -webkit-font-smoothing: antialiased;
+        box-sizing: border-box;
+        padding: 0;
+        margin: 0;
+        border: 0;
+        color: var(--sapTextColor, #32363a);
+    }
+</style>
+<div class="lui-usersettings-content">
+    <div class="lui-us-content-header-container">
+        <h1 class="lui-title lui-title--h2">
+            {userSettingsGroupSchema[1].title?$getTranslation(userSettingsGroupSchema[1].title):''}
+        </h1>
+    </div>
+    <div class="fd-page__content">
+        <div class="fd-container lui-form-grid">
+            {#each Object.entries(userSettingsGroupSchema[1].settings) as [key, schemaItem], i}
+                <div class="lui-form-label">
+                    <label class="fd-form-label" >{$getTranslation(schemaItem.label)}:</label>
+                </div>
+                <div class="lui-value-container">
+                    {#if schemaItem.type==='string'}
+                            <input class="fd-input" type="text" placeholder="Field placeholder text" aria-label="Image label" data-testid="lui-us-input{i}"
+                            bind:value="{userSettings[userSettingsGroupSchema[0]][key]}" disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}">
+                    {/if}
+                    {#if schemaItem.type==='enum'}
+                        <div>
+                            <div class="fd-form-item">
+                                <div class="fd-popover">
+                                    <div class="fd-popover__control" aria-expanded="false" aria-haspopup="true"
+                                        on:click|stopPropagation="{()=>toggleOptions(event,schemaItem.isEditable)}">
+                                        <div class="fd-input-group fd-input-group--control">
+                                            <input type="text" class="fd-input fd-input-group__input" placeholder="{$getTranslation(userSettings[userSettingsGroupSchema[0]][key])}" data-testid="lui-us-input{i}"
+                                            disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}">
+                                            <span class="fd-input-group__addon fd-input-group__addon--button">
+                                                <button
+                                                    aria-label="show/hide fruit options"
+                                                    aria-expanded="false"
+                                                    aria-haspopup="true"
+                                                    class="fd-input-group__button fd-button fd-button--transparent"
+                                                    disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}">
+                                                    <i class="sap-icon--navigation-down-arrow"></i>
+                                                </button>
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown fd-popover__body--dropdown-fill" aria-hidden="true">
+                                        <div class="fd-popover__wrapper docs-max-height">
+                                            <ul class="fd-list fd-list--dropdown" role="listbox">
+                                                {#each schemaItem.options as option, optionIndex}
+                                                    <li role="option" tabindex="0" class="fd-list__item" data-testid="lui-us-option{i}_{optionIndex}" on:click="{() => updateComboBox(key,option)}">
+                                                        <span class="fd-list__title">
+                                                            <span class="fd-list__bold">{$getTranslation(option)}</span>
+                                                        </span>
+                                                    </li>
+                                                {/each}
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    {/if}
+                    {#if schemaItem.type==='boolean'}
+                        <input type="checkbox"
+                            class="fd-checkbox"
+                            disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
+                            bind:checked="{userSettings[userSettingsGroupSchema[0]][key]}"/>
+                    {/if}
+                </div>
+            {/each}
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/core/src/core-api/config.js b/core/src/core-api/config.js
index b7f9685741..94b221a662 100644
--- a/core/src/core-api/config.js
+++ b/core/src/core-api/config.js
@@ -257,18 +257,20 @@ class LuigiConfig {
    * By default, the user settings will be written from the **localStorage**
    * @memberof Configuration
    * @param {Object} userSettingsObj to store in the storage.
+   * @param {Object} previousUserSettingsObj the previous object from storage.
    * @example
-   * Luigi.storeUserSettings(userSettingsobject);
+   * Luigi.storeUserSettings(userSettingsobject, previousUserSettingsObj);
    * @since NEXTRELEASE
    */
-  async storeUserSettings(userSettingsObj) {
+  async storeUserSettings(userSettingsObj, previousUserSettingsObj) {
     const userSettings = await this.getConfigValueAsync('settings.userSettings');
     if (userSettings && GenericHelpers.isFunction(userSettings.storeUserSettings)) {
-      userSettings.storeUserSettings(userSettingsObj);
+      return userSettings.storeUserSettings(userSettingsObj, previousUserSettingsObj);
     }
     else {
       localStorage.setItem(this.USER_SETTINGS_KEY, JSON.stringify(userSettingsObj));
     }
+    this.configChanged();
   }
 }
 
diff --git a/core/src/core-api/ux.js b/core/src/core-api/ux.js
index 696562dceb..6902ca9e4a 100644
--- a/core/src/core-api/ux.js
+++ b/core/src/core-api/ux.js
@@ -137,6 +137,24 @@ class LuigiUX {
   collapseLeftSideNav(state) {
     SemiCollapsibleNavigation.setCollapsed(state);
   }
+
+  /**
+   * Open user settings dialog
+   * @memberof UX
+   * @since NEXTRELEASE
+   */
+  openUserSettings() {
+    Luigi.openUserSettings();
+  }
+
+  /**
+   * Close user settings dialog
+   * @memberof UX
+   * @since NEXTRELEASE
+   */
+  closeUserSettings() {
+    Luigi.closeUserSettings();
+  }
 }
 
 export const ux = new LuigiUX();
diff --git a/core/src/main.js b/core/src/main.js
index 0d8b6f21c9..7125435b88 100644
--- a/core/src/main.js
+++ b/core/src/main.js
@@ -114,6 +114,14 @@ const configReadyCallback = () => {
           return app.$$.ctx.hasBack();
         };
 
+        Luigi.openUserSettings = () => {
+          app.$$.ctx.openUserSettings();
+        };
+
+        Luigi.closeUserSettings = () => {
+          app.$$.ctx.closeUserSettings();
+        }
+
         resolve();
       });
     });
diff --git a/core/src/navigation/LeftNav.html b/core/src/navigation/LeftNav.html
index a4fa5027bb..a4e07ffc9f 100644
--- a/core/src/navigation/LeftNav.html
+++ b/core/src/navigation/LeftNav.html
@@ -1,16 +1,8 @@
-<svelte:window
-  on:resize="{onResize}"
-  on:click="{closePopupMenu}"
-  on:blur="{closePopupMenu}"
-/>
+<svelte:window on:resize="{onResize}" on:click="{closePopupMenu}" on:blur="{closePopupMenu}" />
 <div
-  class="fd-app__sidebar {hideNavComponent ? 'hideNavComponent' : ''} {footerText || semiCollapsibleButton ? 'hasFooter' : ''} {footerText && !semiCollapsibleButton ? 'hasOnlyFooterText' : ''}"
->
-  <nav
-    class="fd-side-nav {isSemiCollapsed ? 'fd-side-nav--condensed' : ''}"
-    on:keyup="{handleKey}"
-    data-testid="semiCollapsibleLeftNav"
-  >
+  class="fd-app__sidebar {hideNavComponent ? 'hideNavComponent' : ''} {footerText || semiCollapsibleButton ? 'hasFooter' : ''} {footerText && !semiCollapsibleButton ? 'hasOnlyFooterText' : ''}">
+  <nav class="fd-side-nav {isSemiCollapsed ? 'fd-side-nav--condensed' : ''}" on:keyup="{handleKey}"
+    data-testid="semiCollapsibleLeftNav">
     {#if children && pathData.length > 1}
     <div class="fd-side-nav__main-navigation">
       <div class="lui-fd-side-nav-wrapper">
@@ -882,4 +874,4 @@
       }
     }
   }
-</style>
+</style>
\ No newline at end of file
diff --git a/core/src/utilities/constants.js b/core/src/utilities/constants.js
index a7180284a8..732331f188 100644
--- a/core/src/utilities/constants.js
+++ b/core/src/utilities/constants.js
@@ -6,7 +6,7 @@ export const MICROFRONTEND_TYPES = [
   { type: 'main', selector: '.iframeContainer iframe' },
   { type: 'split-view', selector: '.iframeSplitViewCnt iframe' },
   { type: 'modal', selector: '.iframeModalCtn._modal iframe' },
-  { type: 'drawer', selector: '.iframeModalCtn._drawer iframe' },
+  { type: 'drawer', selector: '.iframeModalCtn._drawer iframe' }
 ];
 
 export const CUSTOM_LUIGI_CONTAINER = {
diff --git a/core/src/utilities/helpers/index.js b/core/src/utilities/helpers/index.js
index 11c599fb3a..ff0eb77668 100644
--- a/core/src/utilities/helpers/index.js
+++ b/core/src/utilities/helpers/index.js
@@ -7,4 +7,5 @@ export * from './navigation-helpers';
 export * from './routing-helpers';
 export * from './state-helpers';
 export * from './event-listener-helpers';
-export * from './storage-helper';
+export * from './storage-helper'
+export * from './usersetting-dialog-helpers'
diff --git a/core/src/utilities/helpers/usersetting-dialog-helpers.js b/core/src/utilities/helpers/usersetting-dialog-helpers.js
new file mode 100644
index 0000000000..3b85bbba12
--- /dev/null
+++ b/core/src/utilities/helpers/usersetting-dialog-helpers.js
@@ -0,0 +1,20 @@
+import { GenericHelpers } from './generic-helpers';
+import { LuigiConfig } from '../../core-api';
+class UserSettingsHelperClass {
+    constructor() { }
+
+    prepareUserSettingsSchema() {
+        const preparedSchema = [];
+        const userSettingsSchema = LuigiConfig.getConfigValue('settings.userSettings.userSettingGroups');
+        if (GenericHelpers.isObject(userSettingsSchema)) {
+            for (const item in userSettingsSchema) {
+                let innerObj = {};
+                innerObj[item] = userSettingsSchema[item];
+                preparedSchema.push(innerObj);
+            };
+            return preparedSchema;
+        }
+        return preparedSchema;
+    }
+}
+export const UserSettingsHelper = new UserSettingsHelperClass();
\ No newline at end of file
diff --git a/core/src/utilities/luigi-config-defaults.js b/core/src/utilities/luigi-config-defaults.js
index 79340bfd8a..6f061a80be 100644
--- a/core/src/utilities/luigi-config-defaults.js
+++ b/core/src/utilities/luigi-config-defaults.js
@@ -6,6 +6,11 @@ export const TOP_NAV_DEFAULTS = {
   userSettingsProfileMenuEntry: {
     label: 'Settings',
     icon: 'settings'
+  },
+  userSettingsDialog: {
+    dialogHeader: 'User Settings',
+    saveBtn: 'Save',
+    dismissBtn: 'Cancel'
   }
 };
 
diff --git a/core/test/services/config.spec.js b/core/test/services/config.spec.js
index f9b19dfc8c..ef3eab6e88 100644
--- a/core/test/services/config.spec.js
+++ b/core/test/services/config.spec.js
@@ -154,14 +154,16 @@ describe('Config', () => {
     };
 
     it('write user settings to local storage', async () => {
-      await LuigiConfig.storeUserSettings(userSettingsObj);
+      sinon.stub(LuigiConfig, 'configChanged');
+      await LuigiConfig.storeUserSettings(userSettingsObj, userSettingsObj);
       sinon.assert.called(global.localStorage.setItem);
     });
     it('write user settings to custom storage', async () => {
+      sinon.stub(LuigiConfig, 'configChanged');
       console.log = sinon.spy();
       sinon.stub(LuigiConfig, 'getConfigValueAsync').returns(myConfig);
       sinon.stub(GenericHelpers, 'isFunction').returns(true);
-      await LuigiConfig.storeUserSettings(userSettingsObj);
+      await LuigiConfig.storeUserSettings(userSettingsObj, userSettingsObj);
       sinon.assert.calledOnce(console.log);
     });
     it('read user settings from local storage', async () => {
diff --git a/core/test/utilities/helpers/usersetting-dialog-helpers.spec.js b/core/test/utilities/helpers/usersetting-dialog-helpers.spec.js
new file mode 100644
index 0000000000..0a08aee29c
--- /dev/null
+++ b/core/test/utilities/helpers/usersetting-dialog-helpers.spec.js
@@ -0,0 +1,79 @@
+const chai = require('chai');
+const assert = chai.assert;
+const sinon = require('sinon');
+import { UserSettingsHelper } from '../../../src/utilities/helpers';
+import { LuigiConfig } from '../../../src/core-api';
+
+describe('UserSettings-helpers', () => {
+    const userSettingsSchema = {
+        userSettingGroups: {
+            userAccount: {
+                label: 'User Account',
+                sublabel: 'username',
+                icon: 'account',
+                title: 'User Account',
+                settings: {
+                    name: { type: 'string', label: 'Name', isEditable: true },
+                    email: { type: 'string', label: 'E-Mail', isEditable: false },
+                    server: { type: 'string', label: 'Server', isEditable: false }
+                }
+            },
+            language: {
+                label: 'Language & Region',
+                sublabel: 'EN | Time Format: 12h',
+                icon: '/assets/github-logo.png',
+                title: 'Language & Region',
+                settings: {
+                    language: {
+                        type: 'enum',
+                        label: 'Language and Region',
+                        options: ['German', 'English', 'Spanish', 'French'],
+                        description: 'After you save your settings, the browser will refresh for the new language to take effect.'
+                    },
+                    date: { type: 'string', label: 'Date Format' },
+                    time: { type: 'enum', label: 'Time Format', options: ['12 h', '24 h'] }
+                }
+            },
+            privacy: {
+                label: 'Privacy',
+                title: 'Privacy',
+                icon: 'private',
+                settings: {
+                    policy: {
+                        type: 'string', label: 'Privacy policy has not been defined.'
+                    },
+                    time: { type: 'enum', label: 'Time Format', options: ['12 h', '24 h'] }
+                }
+            }
+        }
+    }
+    beforeEach(() => {
+        sinon.stub(LuigiConfig, 'getConfigValue');
+    });
+    afterEach(() => {
+        sinon.restore();
+    });
+    it('prepare user settings data from schema', () => {
+        LuigiConfig.getConfigValue.returns(userSettingsSchema.userSettingGroups);
+        let preparedUserSettingsSchema = UserSettingsHelper.prepareUserSettingsSchema();
+        assert.equal(preparedUserSettingsSchema.length, 3);
+        assert.deepEqual(preparedUserSettingsSchema[0], {
+            userAccount: {
+                label: 'User Account',
+                sublabel: 'username',
+                icon: 'account',
+                title: 'User Account',
+                settings: {
+                    name: { type: 'string', label: 'Name', isEditable: true },
+                    email: { type: 'string', label: 'E-Mail', isEditable: false },
+                    server: { type: 'string', label: 'Server', isEditable: false }
+                }
+            }
+        });
+    });
+    it('return empty array if no schema defined', () => {
+        LuigiConfig.getConfigValue.returns({});
+        let preparedUserSettingsSchema = UserSettingsHelper.prepareUserSettingsSchema();
+        assert.equal(preparedUserSettingsSchema.length, 0);
+    });
+});
\ No newline at end of file
diff --git a/docs/general-settings.md b/docs/general-settings.md
index 182cd05eb1..f602dc8730 100644
--- a/docs/general-settings.md
+++ b/docs/general-settings.md
@@ -113,3 +113,21 @@ There are two ways to check whether the user's browser supports third-party cook
   * `thirdPartyCookieErrorHandling` is a function where you could call an alert like `Luigi.ux().showAlert({})`.
   * **thirdPartyCookieScriptLocation** is the URL to the page containing third-party cookies support check.
 To detect whether the user's browser supports the mechanism, use the script in the [`third-party-cookies`](https://github.com/SAP/luigi/tree/master/core/third-party-cookies) catalog. Deploy this file on a domain different from your main application's and set `thirdPartyCookieScriptLocation` to the `init.html` file. During initialization, Luigi detects cookies support and produces an alert if cookies are disabled in the user's browser.
+
+### User settings
+
+These parameters can be used to configure the user settings menu in Luigi. You may also want to take a look at the [Luigi Core API](luigi-core-api.md) for additional options.
+
+* **userSettingsProfileMenuEntry.label** defines the profile navigation entry. By default it is `Settings`.
+* **userSettingsProfileMenuEntry.icon** defines the profile navigation entry icon. By default it is SAP icon `settings`.
+
+* **userSettingsDialog.dialogHeader** defines user settings dialog header. By default it is `User Settings`.
+* **userSettingsDialog.saveBtn** defines user settings dialog save button. By default it is `Save`.
+* **userSettingsDialog.dismissBtn** defines user settings dialog dismiss button. By default it is `Dismiss`.
+
+* **storeUserSettings** if this function is implemented, the default mechanism will be overridden and you can choose a custom storage to write the user settings object. The function takes two parameters. The first one is the user settings which will be stored. The second one is the previous stored user settings.
+If an error appears, you have the possibility to close the user settings dialog by adding a `closeDialog` boolean flag to the error object to close it. In addition, you can implement a `message` to display the error on the browser console log.
+
+* **readUserSettings** if this function is implemented, the default mechanism will be overridden and you can choose a custom storage to read the user settings object.
+If an error appears, you have the possibility to close the user settings dialog by adding a `closeDialog` boolean flag to the error object to close it. In addition, you can implement a `message` to display the error on the browser console log.
+<!-- document the schema-->
diff --git a/docs/luigi-core-api.md b/docs/luigi-core-api.md
index 249a0aa4f0..6bc18f852a 100644
--- a/docs/luigi-core-api.md
+++ b/docs/luigi-core-api.md
@@ -174,7 +174,9 @@ Luigi.unload()
 
 #### readUserSettings
 
-Reads the user settings object from the **localStorage**. It is possible to choose a custom storage type by implementing the `settings.userSetting.readUserSettings` function.
+Reads the user settings object.
+You can choose a custom storage to read the user settings by implementing the `userSetting.readUserSettings` function in the settings section of the Luigi configuration.
+By default, the user settings will be read from the **localStorage**
 
 ##### Examples
 
@@ -188,16 +190,19 @@ Luigi.readUserSettings();
 
 #### storeUserSettings
 
-Writes the user settings object to the **localStorage**. It is possible to choose a custom storage type by implementing the `settings.userSetting.storeUserSettings` function.
+Writes the user settings object.
+You can choose a custom storage to write the user settings by implementing the `userSetting.storeUserSettings` function in the settings section of the Luigi configuration
+By default, the user settings will be written from the **localStorage**
 
 ##### Parameters
 
 -   `userSettingsObj` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** to store in the storage.
+-   `previousUserSettingsObj` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** the previous object from storage.
 
 ##### Examples
 
 ```javascript
-Luigi.storeUserSettings(userSettingsobject);
+Luigi.storeUserSettings(userSettingsobject, previousUserSettingsObj);
 ```
 
 **Meta**
@@ -940,6 +945,22 @@ Set the collapsed state of the left side navigation
 
 -   **since**: 1.5.0
 
+#### openUserSettings
+
+Open user settings dialog
+
+**Meta**
+
+-   **since**: NEXTRELEASE
+
+#### closeUserSettings
+
+Close user settings dialog
+
+**Meta**
+
+-   **since**: NEXTRELEASE
+
 ## Luigi.globalSearch()
 
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
diff --git a/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js b/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js
index 9620331df5..a98fb5224b 100644
--- a/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js
+++ b/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js
@@ -378,7 +378,7 @@ describe('Fiddle', () => {
         visitLoggedInWithAuthConfig('/', newConfig);
         cy.get('[data-testid="luigi-topnav-profile"] button').click();
         cy.get('[data-testid="settings-link"]').should('exist');
-        cy.get('[data-testid="settings-link"]').contains('My UserSettings')
+        cy.get('[data-testid="settings-link"]').contains('My UserSettings');
       });
       it('User settings in profile menu with default label', () => {
         newConfig.settings = {
@@ -564,4 +564,61 @@ describe('Fiddle', () => {
       );
     });
   });
+  describe('User settings dialog', () => {
+    let newConfig;
+    beforeEach(() => {
+      newConfig = cloneDeep(fiddleConfig);
+      newConfig.settings.userSettings = {
+        userSettingGroups: {
+          userAccount: {
+            label: 'User Account',
+            sublabel: 'username',
+            icon: 'settings',
+            title: 'User Account',
+            settings: {
+              name: { type: 'string', label: 'Name', isEditable: true },
+              email: { type: 'string', label: 'E-Mail', isEditable: false },
+              server: { type: 'string', label: 'Server', isEditable: false }
+            }
+          },
+          language: {
+            label: 'Language & Region',
+            sublabel: 'EN | Time Format: 12h',
+            icon: '/assets/github-logo.png',
+            title: 'Language & Region',
+            settings: {
+              language: {
+                type: 'enum',
+                label: 'Language and Region',
+                options: ['German', 'English', 'Spanish', 'French'],
+                description: 'After you save your settings, the browser will refresh for the new language to take effect.'
+              },
+              date: { type: 'string', label: 'Date Format' },
+              time: { type: 'enum', label: 'Time Format', options: ['12 h', '24 h'] }
+            }
+          }
+        },
+      };
+    });
+    it('User settings dialog', () => {
+      cy.visitWithFiddleConfig('/', newConfig);
+      cy.wait(1000);
+      cy.window().then(win => {
+        win.Luigi.ux().openUserSettings();
+      });
+      cy.get('[data-testid="lui-us-header"]').should('be.visible');
+      cy.get('[data-testid="lui-us-header"]').contains('User Settings');
+
+      cy.get('.lui-usersettings-left-nav')
+        .contains('Language & Region')
+        .click();
+
+      cy.get('[data-testid="lui-us-input0"]').click();
+      cy.get('[data-testid="lui-us-option0_0"]').click();
+      cy.get('[data-testid="lui-us-input0"]').invoke('attr', 'placeholder').should('contain', 'German');
+
+      cy.get('[data-testid="lui-us-dismissBtn"]').click();
+      cy.get('[data-testid="lui-us-header"]').should('not.be.visible');
+    });
+  });
 });
diff --git a/test/e2e-test-application/src/luigi-config/extended/settings.js b/test/e2e-test-application/src/luigi-config/extended/settings.js
index ff388a7d6d..7bc8dbd79d 100644
--- a/test/e2e-test-application/src/luigi-config/extended/settings.js
+++ b/test/e2e-test-application/src/luigi-config/extended/settings.js
@@ -61,29 +61,57 @@ class Settings {
       label: 'My Settings',
       icon: 'settings'
     },
-    // functions to use a custom storage like sessionStorage
-    // storeUserSettings: (obj) => {
-    //   sessionStorage.setItem('test', JSON.stringify(obj));
+    userSettingsDialog: {
+      dialogHeader: 'My UserSettings',
+      saveBtn: 'SaveKaese',
+      dismissBtn: 'Abbreche'
+    },
+    //functions to use a custom storage like sessionStorage
+    // storeUserSettings: (obj, previous) => {
+    //   return new Promise((resolve, reject) => {
+    //     if (JSON.stringify(obj) !== JSON.stringify(previous)) {
+    //       const settings = {
+    //         header: "Confirmation",
+    //         body: "Are you sure you want to do this?",
+    //         buttonConfirm: "Yes",
+    //         buttonDismiss: "No"
+    //       }
+    //       Luigi
+    //         .ux()
+    //         .showConfirmationModal(settings).then(() => {
+    //           sessionStorage.setItem('test', JSON.stringify(obj));
+    //           resolve();
+    //         }).catch(() => {
+    //           reject({ closeDialog: true, message: 'error' });
+    //         });
+    //     }
+    //   });
     // },
     // readUserSettings: () => {
-    //   return JSON.parse(sessionStorage.getItem('test'));
+    //   return new Promise((resolve, reject) => {
+    //     resolve(JSON.parse(sessionStorage.getItem('test')));
+    //     //reject({ closeDialog: true, message: 'error' });
+    //   })
     // },
     userSettingGroups: {
       userAccount: {
         label: 'User Account',
         sublabel: 'username',
-        icon: 'icon.jpg',
-        title: 'title',
+        icon: 'account',
+        title: 'User Account',
         settings: {
-          name: { type: 'string', label: 'Name', isEditable: true },
+          name: { type: 'string', label: 'Name' },
           email: { type: 'string', label: 'E-Mail', isEditable: false },
-          server: { type: 'string', label: 'Server', isEditable: false }
+          server: { type: 'string', label: 'Server', isEditable: false },
+          checkbox: { type: 'boolean', label: 'Checkbox', isEditable: true },
+          checkbox2: { type: 'boolean', label: 'Checkbox2' },
+          checkbox3: { type: 'boolean', label: 'Checkbox23', isEditable: false }
         }
       },
       language: {
         label: 'Language & Region',
         sublabel: 'EN | Time Format: 12h',
-        icon: false,
+        icon: '/assets/github-logo.png',
         title: 'Language & Region',
         settings: {
           language: {
@@ -99,8 +127,12 @@ class Settings {
       privacy: {
         label: 'Privacy',
         title: 'Privacy',
+        icon: 'private',
         settings: {
-          policy: { type: 'string', label: 'Privacy policy has not been defined.' }
+          policy: {
+            type: 'string', label: 'Privacy policy has not been defined.'
+          },
+          time: { type: 'enum', label: 'Time Format', options: ['12 h', '24 h'] }
         }
       }
     }

From 768971b429a583434e16c01053cb2060f2032f31 Mon Sep 17 00:00:00 2001
From: "Leggieri, Davide Teodoro" <davide.teodoro.leggieri@sap.com>
Date: Wed, 16 Dec 2020 14:42:48 +0100
Subject: [PATCH 04/13] Adding new configuration for enum displayed as buttons

---
 core/src/UserSettingsEditor.html              |  36 +++-
 .../1-angular/user_settings_dialog.spec.js    | 179 ++++++++++++++++++
 test/e2e-test-application/package-lock.json   |  26 ++-
 .../src/luigi-config/extended/settings.js     |   7 +-
 4 files changed, 243 insertions(+), 5 deletions(-)
 create mode 100644 test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js

diff --git a/core/src/UserSettingsEditor.html b/core/src/UserSettingsEditor.html
index a5d5f7b89a..c391e4d4ba 100644
--- a/core/src/UserSettingsEditor.html
+++ b/core/src/UserSettingsEditor.html
@@ -59,6 +59,19 @@
         userSettings[userSettingsGroupSchema[0]][key] = option;
     }
 
+    function updateEnumButton(key, option) {
+      document.querySelectorAll('.enum-buttons-container-'+ key  +' button').forEach(button => {
+        let buttonTestid = button.getAttribute('data-testid');
+        let optionTestid = 'lui-us-enum_button_'+key+'_'+option;
+        buttonTestid === optionTestid ?
+          button.classList.add('fd-button--emphasized') :
+          button.classList.remove('fd-button--emphasized');
+      });
+
+      userSettings[userSettingsGroupSchema[0]][key] = option;
+    }
+
+
 </script>
 
 <style>
@@ -114,6 +127,11 @@
         border: 0;
         color: var(--sapTextColor, #32363a);
     }
+
+    .lui-fd-enum-button{
+       margin-right: 3px;
+    }
+
 </style>
 <div class="lui-usersettings-content">
     <div class="lui-us-content-header-container">
@@ -170,6 +188,22 @@ <h1 class="lui-title lui-title--h2">
                             </div>
                         </div>
                     {/if}
+                    {#if schemaItem.type==='enum_button'}
+                      <div>
+                        <div class="fd-form-item">
+                          <div class="fd-popover enum-buttons-container-{key}">
+                              {#each schemaItem.options as option, optionIndex}
+                               <button class="fd-button lui-fd-enum-button {userSettings[userSettingsGroupSchema[0]][key] === option ? 'fd-button--emphasized':'' }"
+                                 on:click="{() => updateEnumButton(key,option)}"
+                                 data-testid="lui-us-enum_button_{key}_{option}"
+                                 disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}">
+                                   {$getTranslation(option)}
+                               </button>
+                              {/each}
+                          </div>
+                        </div>
+                      </div>
+                    {/if}
                     {#if schemaItem.type==='boolean'}
                         <input type="checkbox"
                             class="fd-checkbox"
@@ -180,4 +214,4 @@ <h1 class="lui-title lui-title--h2">
             {/each}
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js b/test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js
new file mode 100644
index 0000000000..ccd822ae91
--- /dev/null
+++ b/test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js
@@ -0,0 +1,179 @@
+describe('Navigation', () => {
+  const clearStorage = () => cy.clearLocalStorage('luigi.preferences.userSettings');
+
+  const openSettingsDialogBox = () =>{
+    //Click on User Icon (top menu right)
+    cy.get('.fd-user-menu button').should('exist').click();
+
+    //Click on Setting link and open Dialog Box
+    cy.get('[data-testid="settings-link"]').should('exist').click();
+
+    //Check Dialog is open
+    cy.get('[data-testid="lui-us-header"]').should('exist');
+
+    //Check we have 3 left bar items
+    cy.get('.lui-usersettings-body .fd-nested-list__link').children().should('have.length', 3);
+  }
+
+  const saveSettings = () => {
+    //Check save button and click
+    cy.get('.lui-usersettings-dialog [data-testid="lui-us-saveBtn"]').should('exist').click();
+
+    //Check settings dialog box is closed...
+    cy.get('[data-testid="lui-us-header"]').should('not.exist');
+  }
+
+  const closeSettings = () => {
+    //Check cancel button and click
+    cy.get('.lui-usersettings-dialog [data-testid="lui-us-dismissBtn"]').should('exist').click();
+
+    //Check settings dialog box is closed...
+    cy.get('[data-testid="lui-us-header"]').should('not.exist');
+  }
+
+  beforeEach(() => {
+    cy.visitLoggedIn('/');
+    openSettingsDialogBox();
+  });
+
+  describe('User Account Configuration', () => {
+    const setting_name  =  'name_'+new Date().getTime();
+    const setting_date_format  =  'df_'+new Date().getTime();
+    const setting_privacy_policy  =  'privacy_policy_'+new Date().getTime();
+
+    it('Fill Account and save; reopen and check saved value', () => {
+      //Clear storage before to save it
+      clearStorage();
+
+      //Click on User Account
+      cy.get('.lui-usersettings-body .fd-nested-list__link').eq(0).click();
+
+      //Check User Account is selected
+      cy.get('.lui-usersettings-body .fd-nested-list__link').eq(0).should('have.class','is-selected')
+
+      //Check Name Input field and type a new name
+      cy.get('[data-testid="lui-us-input0"]').should('exist').type(setting_name);
+
+      //Email Input field should be disabled
+      cy.get('[data-testid="lui-us-input1"]').should('exist').should('be.disabled');
+
+      //Click on Checkbox
+      cy.get('.lui-usersettings-content .fd-container .lui-value-container')
+        .eq(3).find('.fd-checkbox').check();
+
+      //Check Checkbox is checked
+      cy.get('.lui-usersettings-content .fd-container .lui-value-container')
+        .eq(3).find('.fd-checkbox').should('be.checked');
+
+      //Save Settings
+      saveSettings();
+
+      //Re-open Setting Dialog Box
+      openSettingsDialogBox();
+
+      //Check Name Input field and type a new name
+      cy.get('[data-testid="lui-us-input0"]').should('have.value', setting_name);
+
+      //Check Checkbox is checked
+      cy.get('.lui-usersettings-content .fd-container .lui-value-container')
+        .eq(3).find('.fd-checkbox').should('be.checked');
+
+      //Close settings
+      closeSettings();
+    });
+
+    it('Fill Language and Reason and save; reopen and check saved values', () => {
+      //Clear storage before to save it
+      clearStorage();
+
+      //Click on Language & Region
+      cy.get('.lui-usersettings-body .fd-nested-list__link').eq(1).click();
+
+      //Check Language & Region is selected
+      cy.get('.lui-usersettings-body .fd-nested-list__link').eq(1).should('have.class','is-selected');
+
+      //Check Language & Region Input field exist
+      cy.get('[data-testid="lui-us-input0"]').should('exist');
+
+      //Open button to show enumeration list options
+      cy.get('.lui-usersettings-content .fd-page__content .fd-form-item').eq(0).find('.fd-input-group__button').click();
+
+      //Check we should have 4 options
+      cy.get('.lui-usersettings-content .fd-page__content .fd-form-item').eq(0)
+        .find(' .fd-list--dropdown .fd-list__item').children().should('have.length', 4);
+
+      //Click on Spanish list item
+      cy.get('[data-testid="lui-us-option0_2"]').should('exist').click();
+
+      //Check Placeholder of input field is Spanish
+      cy.get('[data-testid="lui-us-input0"]').should('exist').should('have.attr', 'placeholder', 'Spanish');
+
+      //Check Date Formant Input field and type a new format
+      cy.get('[data-testid="lui-us-input1"]').should('exist').type(setting_date_format);
+
+      //Save Settings
+      saveSettings();
+
+      //Re-open Setting Dialog Box
+      openSettingsDialogBox();
+
+      //Click on Language & Region (left menu)
+      cy.get('.lui-usersettings-body .fd-nested-list__link').eq(1).click();
+
+      //Check Placeholder of input field is Spanish
+      cy.get('[data-testid="lui-us-input0"]').should('exist').should('have.attr', 'placeholder', 'Spanish');
+
+      //Check Name Input field and type a new name
+      cy.get('[data-testid="lui-us-input1"]').should('have.value', setting_date_format);
+
+      //Close settings
+      closeSettings();
+    });
+
+    it('Fill Privacy and save; reopen and check saved value', () => {
+      //Clear storage before to save it
+      clearStorage();
+
+      //Click on Privacy
+      cy.get('.lui-usersettings-body .fd-nested-list__link').eq(2).click();
+
+      //Check Private Policy Input field exist and placeholder is
+      cy.get('[data-testid="lui-us-input0"]').should('exist').should('have.attr', 'placeholder', 'Field placeholder text');
+
+      //Check Private Policy Input field exist and placeholder is
+      cy.get('[data-testid="lui-us-input0"]').type(setting_privacy_policy);
+
+      //Check Time Format has two buttons
+      cy.get('.enum-buttons-container-time').children().should('have.length', 2);
+
+      //Check Time Format has two buttons with no selected class
+      cy.get('.lui-usersettings-content .enum-buttons-container-time .lui-fd-enum-button').eq(0).should('not.have.class', 'fd-button--emphasized');
+      cy.get('.lui-usersettings-content .enum-buttons-container-time .lui-fd-enum-button').eq(1).should('not.have.class', 'fd-button--emphasized');
+
+      //Click Time Format 12h
+      cy.get('.lui-usersettings-content .enum-buttons-container-time .lui-fd-enum-button').eq(0).click();
+
+      //Check Time Format 12h is selected
+      cy.get('.lui-usersettings-content .enum-buttons-container-time .lui-fd-enum-button').eq(0).should('have.class', 'fd-button--emphasized');
+
+      //Save Settings
+      saveSettings();
+
+      //Re-open Setting Dialog Box
+      openSettingsDialogBox();
+
+      //Click on Privacy
+      cy.get('.lui-usersettings-body .fd-nested-list__link').eq(2).click();
+
+      //Check Private Policy Input field has saved value
+      cy.get('[data-testid="lui-us-input0"]').should('have.value', setting_privacy_policy);
+
+
+      //Check Time Format 12h is selected
+      cy.get('.lui-usersettings-content .enum-buttons-container-time button').eq(0).should('have.class', 'fd-button--emphasized');
+
+      //Close settings
+      closeSettings();
+    });
+  });
+});
diff --git a/test/e2e-test-application/package-lock.json b/test/e2e-test-application/package-lock.json
index 45cf55de9f..35f57d1c21 100644
--- a/test/e2e-test-application/package-lock.json
+++ b/test/e2e-test-application/package-lock.json
@@ -2427,6 +2427,26 @@
         }
       }
     },
+    "@luigi-project/client": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@luigi-project/client/-/client-1.0.0.tgz",
+      "integrity": "sha512-/5QCgd26h/zON+Cj6Ga2rzCD2X6f1lU/NZaaya5E28k1vvwch2mwKarpZLqHaWSsxbkp/5kRWAPKJ56iQMHnSg=="
+    },
+    "@luigi-project/core": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@luigi-project/core/-/core-1.2.1.tgz",
+      "integrity": "sha512-XeLvRmcphxP15KTAyt/E/jdoOLIZlFd4Ij5BUCKDi3LdpUdwLNL4mEA+1TdGpnO554JJvnK4fA+00G0E0xuBgQ=="
+    },
+    "@luigi-project/plugin-auth-oauth2": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@luigi-project/plugin-auth-oauth2/-/plugin-auth-oauth2-1.0.0.tgz",
+      "integrity": "sha512-ntEnWxSDAy906mym+LOIC6ZCtvGMbdaRyg0t2X/C5ANwpOunhlIJqFkDpfLH9QgZu8HVasTOfQCKCcfPzTYRZQ=="
+    },
+    "@luigi-project/plugin-auth-oidc": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@luigi-project/plugin-auth-oidc/-/plugin-auth-oidc-1.0.0.tgz",
+      "integrity": "sha512-4uPHU6YqfMMnePHAsA3wvyCrjJjQH4IS6gQqKGE1pxLaj57mBu6H2QX23ErpR/8aeaTiZqUXZPIHH+RT43RpuA=="
+    },
     "@ngtools/webpack": {
       "version": "7.3.9",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-7.3.9.tgz",
@@ -7103,9 +7123,9 @@
       "dev": true
     },
     "fundamental-styles": {
-      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/fundamental-styles/-/fundamental-styles-0.11.2.tgz",
-      "integrity": "sha512-b2PVIJpHs3ss3inz3epg2Ma/3ANtLbEe91lvG/O/WcoXrQetWWWxCXncce3XRpC2vqcCP9oOe7cRFRL2KXKwRw=="
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/fundamental-styles/-/fundamental-styles-0.13.1.tgz",
+      "integrity": "sha512-HC/DEFqgwTlWRShMVj5hyCD/5RHtZMSFV3t8yIgAnFTPfp59H/N/gay1tDP3HwiZV3CHdRtbuwPr17zUXmxhNg=="
     },
     "gauge": {
       "version": "2.7.4",
diff --git a/test/e2e-test-application/src/luigi-config/extended/settings.js b/test/e2e-test-application/src/luigi-config/extended/settings.js
index 7bc8dbd79d..c7f551edb1 100644
--- a/test/e2e-test-application/src/luigi-config/extended/settings.js
+++ b/test/e2e-test-application/src/luigi-config/extended/settings.js
@@ -115,6 +115,7 @@ class Settings {
         title: 'Language & Region',
         settings: {
           language: {
+            //type: 'enum_button',
             type: 'enum',
             label: 'Language and Region',
             options: ['German', 'English', 'Spanish', 'French'],
@@ -132,7 +133,11 @@ class Settings {
           policy: {
             type: 'string', label: 'Privacy policy has not been defined.'
           },
-          time: { type: 'enum', label: 'Time Format', options: ['12 h', '24 h'] }
+          time: {
+            // type: 'enum',
+            type: 'enum_button',
+            label: 'Time Format',
+            options: ['12 h', '24 h'] }
         }
       }
     }

From d2ee9a1359c8afd63132e7c47a2a42723e4d0f4b Mon Sep 17 00:00:00 2001
From: legteodav <davide.teodoro.leggieri@sap.com>
Date: Fri, 18 Dec 2020 17:18:32 +0100
Subject: [PATCH 05/13] Update core/src/UserSettingsEditor.html

Co-authored-by: Stanley Hsu <stanleyhsu1984@gmail.com>
---
 core/src/UserSettingsEditor.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/UserSettingsEditor.html b/core/src/UserSettingsEditor.html
index 2216b4394a..51512cf9be 100644
--- a/core/src/UserSettingsEditor.html
+++ b/core/src/UserSettingsEditor.html
@@ -62,7 +62,7 @@
     function updateEnumButton(key, option) {
       document.querySelectorAll('.enum-buttons-container-'+ key  +' button').forEach(button => {
         let buttonTestid = button.getAttribute('data-testid');
-        let optionTestid = 'lui-us-enum_button_'+key+'_'+option;
+        const optionTestid = `lui-us-enum_button_${key}_option`;
         buttonTestid === optionTestid ?
           button.classList.add('fd-button--emphasized') :
           button.classList.remove('fd-button--emphasized');

From 879b6a3e2addf8f22b8755d608dd79f87112c369 Mon Sep 17 00:00:00 2001
From: "Leggieri, Davide Teodoro" <davide.teodoro.leggieri@sap.com>
Date: Thu, 7 Jan 2021 16:34:58 +0100
Subject: [PATCH 06/13] Changing testdataid with id in html attribute

---
 core/src/UserSettingsEditor.html | 416 +++++++++++++++++--------------
 1 file changed, 232 insertions(+), 184 deletions(-)

diff --git a/core/src/UserSettingsEditor.html b/core/src/UserSettingsEditor.html
index 51512cf9be..9abfb6a926 100644
--- a/core/src/UserSettingsEditor.html
+++ b/core/src/UserSettingsEditor.html
@@ -1,216 +1,264 @@
 <svelte:window on:click="{closeAllCombos}" on:blur="{closeAllCombos}"></svelte:window>
 <script>
-    import { onMount, afterUpdate, beforeUpdate, createEventDispatcher, getContext } from 'svelte';
-    import { GenericHelpers } from './utilities/helpers';
-    export let userSettingsGroupSchema;
-    export let userSettingsGroupKey;
-    export let userSettings;
-    const dispatch = createEventDispatcher();
-    let settingsSchema;
-    let displayOptions;
-    let getTranslation = getContext('getTranslation');
-    beforeUpdate(() => {
-        if (!userSettings.hasOwnProperty(userSettingsGroupSchema[0])) {
-            userSettings[userSettingsGroupSchema[0]] = {};
-        }
-    });
-
-    export function updateSettingsObject() {
-        dispatch('updateSettingsObject', { userSettings })
+  import {
+    onMount,
+    afterUpdate,
+    beforeUpdate,
+    createEventDispatcher,
+    getContext
+  } from 'svelte';
+  import { GenericHelpers } from './utilities/helpers';
+  export let userSettingsGroupSchema;
+  export let userSettingsGroupKey;
+  export let userSettings;
+  const dispatch = createEventDispatcher();
+  let settingsSchema;
+  let displayOptions;
+  let getTranslation = getContext('getTranslation');
+  beforeUpdate(() => {
+    if (!userSettings.hasOwnProperty(userSettingsGroupSchema[0])) {
+      userSettings[userSettingsGroupSchema[0]] = {};
     }
+  });
 
-    function closeAllCombos(self) {
-        document.querySelectorAll('.lui-usersettings-content .fd-popover__control').forEach(elem => {
-            setExpandedState(elem, false);
-        });
-    }
+  export function updateSettingsObject() {
+    dispatch('updateSettingsObject', { userSettings });
+  }
 
-    function closest(element, selector, max) {
-        if (element && max > 0) {
-            if (GenericHelpers.isIE()) {
-                return element.msMatchesSelector(selector) ? element : closest(element.parentNode, selector, max - 1);
-            } else {
-                return element.matches(selector) ? element : closest(element.parentNode, selector, max - 1);
-            }
-        } else {
-            return undefined;
-        }
-    }
+  function closeAllCombos(self) {
+    document
+      .querySelectorAll('.lui-usersettings-content .fd-popover__control')
+      .forEach(elem => {
+        setExpandedState(elem, false);
+      });
+  }
 
-    function toggleOptions(event, editable) {
-        if (editable || editable === undefined) {
-            console.log('test');
-            const self = closest(event.target, '.fd-popover__control', 20);
-            closeAllCombos(self);
-            const currentState = self.getAttribute('aria-expanded') === 'true';
-            setExpandedState(self, !currentState);
-        }
+  function closest(element, selector, max) {
+    if (element && max > 0) {
+      if (GenericHelpers.isIE()) {
+        return element.msMatchesSelector(selector)
+          ? element
+          : closest(element.parentNode, selector, max - 1);
+      } else {
+        return element.matches(selector)
+          ? element
+          : closest(element.parentNode, selector, max - 1);
+      }
+    } else {
+      return undefined;
     }
+  }
 
-    function setExpandedState(self, value) {
-        const indicatorBtn = self.querySelector('.fd-input-group__button');
-        const optionsPopOver = self.parentNode.querySelector('.fd-popover__body');
-        self.setAttribute('aria-expanded', value);
-        optionsPopOver.setAttribute('aria-hidden', !value);
-        indicatorBtn.setAttribute('aria-expanded', value);
+  function toggleOptions(event, editable) {
+    if (editable || editable === undefined) {
+      console.log('test');
+      const self = closest(event.target, '.fd-popover__control', 20);
+      closeAllCombos(self);
+      const currentState = self.getAttribute('aria-expanded') === 'true';
+      setExpandedState(self, !currentState);
     }
+  }
 
-    function updateComboBox(key, option) {
-        userSettings[userSettingsGroupSchema[0]][key] = option;
-    }
+  function setExpandedState(self, value) {
+    const indicatorBtn = self.querySelector('.fd-input-group__button');
+    const optionsPopOver = self.parentNode.querySelector('.fd-popover__body');
+    self.setAttribute('aria-expanded', value);
+    optionsPopOver.setAttribute('aria-hidden', !value);
+    indicatorBtn.setAttribute('aria-expanded', value);
+  }
+
+  function updateComboBox(key, option) {
+    userSettings[userSettingsGroupSchema[0]][key] = option;
+  }
 
-    function updateEnumButton(key, option) {
-      document.querySelectorAll('.enum-buttons-container-'+ key  +' button').forEach(button => {
-        let buttonTestid = button.getAttribute('data-testid');
+  function updateEnumButton(key, option) {
+    document
+      .querySelectorAll('.enum-buttons-container-' + key + ' button')
+      .forEach(button => {
+        let buttonTestid = button.getAttribute('id');
         const optionTestid = `lui-us-enum_button_${key}_option`;
-        buttonTestid === optionTestid ?
-          button.classList.add('fd-button--emphasized') :
-          button.classList.remove('fd-button--emphasized');
+        buttonTestid === optionTestid
+          ? button.classList.add('fd-button--emphasized')
+          : button.classList.remove('fd-button--emphasized');
       });
 
-      userSettings[userSettingsGroupSchema[0]][key] = option;
-    }
-
+    userSettings[userSettingsGroupSchema[0]][key] = option;
+  }
 </script>
 
 <style>
-    .lui-form-grid {
-        display: grid;
-        display: -ms-grid;
-        grid-template-columns: minmax(0, 1fr) 2fr;
-        -ms-grid-columns: minmax(0, 1fr) 2fr;
-    }
-
-    .lui-value-container {
-        grid-column: 2;
-        -ms-grid-column: 2;
-    }
+  .lui-form-grid {
+    display: grid;
+    display: -ms-grid;
+    grid-template-columns: minmax(0, 1fr) 2fr;
+    -ms-grid-columns: minmax(0, 1fr) 2fr;
+  }
 
-    .lui-value-container>input[type="checkbox"] {
-        margin-top: 13px;
-    }
+  .lui-value-container {
+    grid-column: 2;
+    -ms-grid-column: 2;
+  }
 
-    .lui-form-label {
-        grid-column: 1;
-        -ms-grid-column: 1;
-        text-align: right;
-        padding-top: 10px;
-        overflow: hidden;
-        min-width: 0;
-        word-break: break-word;
-        padding: 10px;
-    }
+  .lui-value-container > input[type='checkbox'] {
+    margin-top: 13px;
+  }
 
-    .fd-form-label {
-        white-space: pre-line;
-    }
+  .lui-form-label {
+    grid-column: 1;
+    -ms-grid-column: 1;
+    text-align: right;
+    padding-top: 10px;
+    overflow: hidden;
+    min-width: 0;
+    word-break: break-word;
+    padding: 10px;
+  }
 
-    .lui-us-content-header-container {
-        width: 100%;
-        padding: 1.5rem 2rem;
-
-    }
+  .fd-form-label {
+    white-space: pre-line;
+  }
 
-    .lui-title--h2 {
-        font-size: var(--sapFontHeader2Size, 1.5rem);
-    }
+  .lui-us-content-header-container {
+    width: 100%;
+    padding: 1.5rem 2rem;
+  }
 
-    .lui-title {
-        line-height: var(--sapContent_LineHeight, 1.4);
-        font-family: var(--sapFontFamily, "72", "72full", Arial, Helvetica, sans-serif);
-        font-weight: 400;
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        padding: 0;
-        margin: 0;
-        border: 0;
-        color: var(--sapTextColor, #32363a);
-    }
+  .lui-title--h2 {
+    font-size: var(--sapFontHeader2Size, 1.5rem);
+  }
 
-    .lui-fd-enum-button{
-      margin-right: 3px;
-    }
+  .lui-title {
+    line-height: var(--sapContent_LineHeight, 1.4);
+    font-family: var(
+      --sapFontFamily,
+      '72',
+      '72full',
+      Arial,
+      Helvetica,
+      sans-serif
+    );
+    font-weight: 400;
+    -webkit-font-smoothing: antialiased;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    color: var(--sapTextColor, #32363a);
+  }
 
+  .lui-fd-enum-button {
+    margin-right: 3px;
+  }
 </style>
 <div class="lui-usersettings-content">
-    <div class="lui-us-content-header-container">
-        <h1 class="lui-title lui-title--h2">
-            {userSettingsGroupSchema[1].title?$getTranslation(userSettingsGroupSchema[1].title):''}
-        </h1>
-    </div>
-    <div class="fd-page__content">
-        <div class="fd-container lui-form-grid">
-            {#each Object.entries(userSettingsGroupSchema[1].settings) as [key, schemaItem], i}
-                <div class="lui-form-label">
-                    <label class="fd-form-label" >{$getTranslation(schemaItem.label)}:</label>
+  <div class="lui-us-content-header-container">
+    <h1
+      class="lui-title lui-title--h2"
+    >{userSettingsGroupSchema[1].title?$getTranslation(userSettingsGroupSchema[1].title):''}</h1>
+  </div>
+  <div class="fd-page__content">
+    <div class="fd-container lui-form-grid">
+      {#each Object.entries(userSettingsGroupSchema[1].settings) as [key, schemaItem], i}
+      <div class="lui-form-label">
+        <label class="fd-form-label">{$getTranslation(schemaItem.label)}:</label>
+      </div>
+      <div class="lui-value-container">
+        {#if schemaItem.type==='string'}
+        <input
+          class="fd-input"
+          type="text"
+          placeholder="Field placeholder text"
+          aria-label="Image label"
+          data-testid="lui-us-input{i}"
+          bind:value="{userSettings[userSettingsGroupSchema[0]][key]}"
+          disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
+        >
+        {/if}
+        {#if schemaItem.type==='enum'}
+        <div>
+          <div class="fd-form-item">
+            <div class="fd-popover">
+              <div
+                class="fd-popover__control"
+                aria-expanded="false"
+                aria-haspopup="true"
+                on:click|stopPropagation="{()=>toggleOptions(event,schemaItem.isEditable)}"
+              >
+                <div class="fd-input-group fd-input-group--control">
+                  <input
+                    type="text"
+                    class="fd-input fd-input-group__input"
+                    placeholder="{$getTranslation(userSettings[userSettingsGroupSchema[0]][key])}"
+                    data-testid="lui-us-input{i}"
+                    disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
+                  >
+                  <span
+                    class="fd-input-group__addon fd-input-group__addon--button"
+                  >
+                    <button
+                      aria-label="show/hide fruit options"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      class="fd-input-group__button fd-button fd-button--transparent"
+                      disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
+                    >
+                      <i class="sap-icon--navigation-down-arrow"></i>
+                    </button>
+                  </span>
                 </div>
-                <div class="lui-value-container">
-                    {#if schemaItem.type==='string'}
-                            <input class="fd-input" type="text" placeholder="Field placeholder text" aria-label="Image label" data-testid="lui-us-input{i}"
-                            bind:value="{userSettings[userSettingsGroupSchema[0]][key]}" disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}">
-                    {/if}
-                    {#if schemaItem.type==='enum'}
-                        <div>
-                            <div class="fd-form-item">
-                                <div class="fd-popover">
-                                    <div class="fd-popover__control" aria-expanded="false" aria-haspopup="true"
-                                        on:click|stopPropagation="{()=>toggleOptions(event,schemaItem.isEditable)}">
-                                        <div class="fd-input-group fd-input-group--control">
-                                            <input type="text" class="fd-input fd-input-group__input" placeholder="{$getTranslation(userSettings[userSettingsGroupSchema[0]][key])}" data-testid="lui-us-input{i}"
-                                            disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}">
-                                            <span class="fd-input-group__addon fd-input-group__addon--button">
-                                                <button
-                                                    aria-label="show/hide fruit options"
-                                                    aria-expanded="false"
-                                                    aria-haspopup="true"
-                                                    class="fd-input-group__button fd-button fd-button--transparent"
-                                                    disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}">
-                                                    <i class="sap-icon--navigation-down-arrow"></i>
-                                                </button>
-                                            </span>
-                                        </div>
-                                    </div>
-                                    <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown fd-popover__body--dropdown-fill" aria-hidden="true">
-                                        <div class="fd-popover__wrapper docs-max-height">
-                                            <ul class="fd-list fd-list--dropdown" role="listbox">
-                                                {#each schemaItem.options as option, optionIndex}
-                                                    <li role="option" tabindex="0" class="fd-list__item" data-testid="lui-us-option{i}_{optionIndex}" on:click="{() => updateComboBox(key,option)}">
-                                                        <span class="fd-list__title">
-                                                            <span class="fd-list__bold">{$getTranslation(option)}</span>
-                                                        </span>
-                                                    </li>
-                                                {/each}
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    {/if}
-                    {#if schemaItem.type==='enum_button'}
-                      <div>
-                        <div class="fd-form-item">
-                          <div class="fd-popover enum-buttons-container-{key}">
-                            {#each schemaItem.options as option, optionIndex}
-                            <button class="fd-button lui-fd-enum-button {userSettings[userSettingsGroupSchema[0]][key] === option ? 'fd-button--emphasized':'' }"
-                                    on:click="{() => updateEnumButton(key,option)}"
-                                    data-testid="lui-us-enum_button_{key}_{option}"
-                                    disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}">
-                              {$getTranslation(option)}
-                            </button>
-                            {/each}
-                          </div>
-                        </div>
-                      </div>
-                    {/if}
-                    {#if schemaItem.type==='boolean'}
-                        <input type="checkbox"
-                            class="fd-checkbox"
-                            disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
-                            bind:checked="{userSettings[userSettingsGroupSchema[0]][key]}"/>
-                    {/if}
+              </div>
+              <div
+                class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown fd-popover__body--dropdown-fill"
+                aria-hidden="true"
+              >
+                <div class="fd-popover__wrapper docs-max-height">
+                  <ul class="fd-list fd-list--dropdown" role="listbox">
+                    {#each schemaItem.options as option, optionIndex}
+                    <li
+                      role="option"
+                      tabindex="0"
+                      class="fd-list__item"
+                      data-testid="lui-us-option{i}_{optionIndex}"
+                      on:click="{() => updateComboBox(key,option)}"
+                    >
+                      <span class="fd-list__title">
+                        <span class="fd-list__bold">{$getTranslation(option)}</span>
+                      </span>
+                    </li>
+                    {/each}
+                  </ul>
                 </div>
-            {/each}
+              </div>
+            </div>
+          </div>
+        </div>
+        {/if}
+        {#if schemaItem.type==='enum_button'}
+        <div>
+          <div class="fd-form-item">
+            <div class="fd-popover enum-buttons-container-{key}">
+              {#each schemaItem.options as option, optionIndex}
+              <button
+                class="fd-button lui-fd-enum-button {userSettings[userSettingsGroupSchema[0]][key] === option ? 'fd-button--emphasized':'' }"
+                on:click="{() => updateEnumButton(key,option)}"
+                id="lui-us-enum_button_{key}_{option}"
+                disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
+              >{$getTranslation(option)}</button>
+              {/each}
+            </div>
+          </div>
         </div>
+        {/if}
+        {#if schemaItem.type==='boolean'}
+        <input
+          type="checkbox"
+          class="fd-checkbox"
+          disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
+          bind:checked="{userSettings[userSettingsGroupSchema[0]][key]}"
+        >
+        {/if}
+      </div>
+      {/each}
     </div>
+  </div>
 </div>

From ee9903d3ca5785a6fcfc4a01a30eeac22505645f Mon Sep 17 00:00:00 2001
From: "Leggieri, Davide Teodoro" <davide.teodoro.leggieri@sap.com>
Date: Thu, 7 Jan 2021 16:37:04 +0100
Subject: [PATCH 07/13] Adding again testid

---
 core/src/UserSettingsEditor.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/core/src/UserSettingsEditor.html b/core/src/UserSettingsEditor.html
index 9abfb6a926..5a49bd6119 100644
--- a/core/src/UserSettingsEditor.html
+++ b/core/src/UserSettingsEditor.html
@@ -242,6 +242,7 @@
                 class="fd-button lui-fd-enum-button {userSettings[userSettingsGroupSchema[0]][key] === option ? 'fd-button--emphasized':'' }"
                 on:click="{() => updateEnumButton(key,option)}"
                 id="lui-us-enum_button_{key}_{option}"
+                data-testid="lui-us-enum_button_{key}_{option}"
                 disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
               >{$getTranslation(option)}</button>
               {/each}

From a223e0d07a06bbd913ef00c12b1ada536cb60ebc Mon Sep 17 00:00:00 2001
From: legteodav <davide.teodoro.leggieri@sap.com>
Date: Mon, 11 Jan 2021 16:36:06 +0100
Subject: [PATCH 08/13] Update core/src/UserSettingsEditor.html

Co-authored-by: Stanley Hsu <stanleyhsu1984@gmail.com>
---
 core/src/UserSettingsEditor.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/core/src/UserSettingsEditor.html b/core/src/UserSettingsEditor.html
index 5a49bd6119..644a6eb4e2 100644
--- a/core/src/UserSettingsEditor.html
+++ b/core/src/UserSettingsEditor.html
@@ -51,7 +51,6 @@
 
   function toggleOptions(event, editable) {
     if (editable || editable === undefined) {
-      console.log('test');
       const self = closest(event.target, '.fd-popover__control', 20);
       closeAllCombos(self);
       const currentState = self.getAttribute('aria-expanded') === 'true';

From 2a0f923c18c2488fa5f94b2aeb77ee76c1f46101 Mon Sep 17 00:00:00 2001
From: legteodav <davide.teodoro.leggieri@sap.com>
Date: Mon, 11 Jan 2021 16:36:21 +0100
Subject: [PATCH 09/13] Update core/src/UserSettingsEditor.html

Co-authored-by: Stanley Hsu <stanleyhsu1984@gmail.com>
---
 core/src/UserSettingsEditor.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/UserSettingsEditor.html b/core/src/UserSettingsEditor.html
index 644a6eb4e2..fc875df6d3 100644
--- a/core/src/UserSettingsEditor.html
+++ b/core/src/UserSettingsEditor.html
@@ -74,7 +74,7 @@
     document
       .querySelectorAll('.enum-buttons-container-' + key + ' button')
       .forEach(button => {
-        let buttonTestid = button.getAttribute('id');
+        const buttonId = button.getAttribute('id');
         const optionTestid = `lui-us-enum_button_${key}_option`;
         buttonTestid === optionTestid
           ? button.classList.add('fd-button--emphasized')

From 3a5c1398f04dc7692c6a68814820c93d5cb9e0b1 Mon Sep 17 00:00:00 2001
From: legteodav <davide.teodoro.leggieri@sap.com>
Date: Mon, 11 Jan 2021 16:36:29 +0100
Subject: [PATCH 10/13] Update core/src/UserSettingsEditor.html

Co-authored-by: Stanley Hsu <stanleyhsu1984@gmail.com>
---
 core/src/UserSettingsEditor.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/UserSettingsEditor.html b/core/src/UserSettingsEditor.html
index fc875df6d3..e74fc7e2a7 100644
--- a/core/src/UserSettingsEditor.html
+++ b/core/src/UserSettingsEditor.html
@@ -75,7 +75,7 @@
       .querySelectorAll('.enum-buttons-container-' + key + ' button')
       .forEach(button => {
         const buttonId = button.getAttribute('id');
-        const optionTestid = `lui-us-enum_button_${key}_option`;
+        const optionId = `lui-us-enum_button_${key}_option`;
         buttonTestid === optionTestid
           ? button.classList.add('fd-button--emphasized')
           : button.classList.remove('fd-button--emphasized');

From ed29577bba4fd577457fd245774344a1eb9e10f0 Mon Sep 17 00:00:00 2001
From: legteodav <davide.teodoro.leggieri@sap.com>
Date: Mon, 11 Jan 2021 16:36:37 +0100
Subject: [PATCH 11/13] Update core/src/UserSettingsEditor.html

Co-authored-by: Stanley Hsu <stanleyhsu1984@gmail.com>
---
 core/src/UserSettingsEditor.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/UserSettingsEditor.html b/core/src/UserSettingsEditor.html
index e74fc7e2a7..f8168e696b 100644
--- a/core/src/UserSettingsEditor.html
+++ b/core/src/UserSettingsEditor.html
@@ -76,7 +76,7 @@
       .forEach(button => {
         const buttonId = button.getAttribute('id');
         const optionId = `lui-us-enum_button_${key}_option`;
-        buttonTestid === optionTestid
+        buttonId === optionId
           ? button.classList.add('fd-button--emphasized')
           : button.classList.remove('fd-button--emphasized');
       });

From b55f0e6be0101f695c818d532450ace472a4cdce Mon Sep 17 00:00:00 2001
From: "Leggieri, Davide Teodoro" <davide.teodoro.leggieri@sap.com>
Date: Wed, 13 Jan 2021 14:23:12 +0100
Subject: [PATCH 12/13] changing button to segment and group....

---
 core/fundamentalStyleClasses.js               |  2 +-
 core/src/UserSettingsEditor.html              | 14 +++++++-----
 .../src/luigi-config/extended/settings.js     | 22 ++++++++++++++-----
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/core/fundamentalStyleClasses.js b/core/fundamentalStyleClasses.js
index 681ebca092..2862b50aea 100644
--- a/core/fundamentalStyleClasses.js
+++ b/core/fundamentalStyleClasses.js
@@ -45,7 +45,7 @@ module.exports = [
   './node_modules/fundamental-styles/dist/product-switch.css',
   // './node_modules/fundamental-styles/dist/radio.css',
   //'./node_modules/fundamental-styles/dist/section.css',
-  //'./node_modules/fundamental-styles/dist/segmented-button.css',
+  './node_modules/fundamental-styles/dist/segmented-button.css',
   './node_modules/fundamental-styles/dist/select.css',
   './node_modules/fundamental-styles/dist/shellbar.css',
   './node_modules/fundamental-styles/dist/side-nav.css',
diff --git a/core/src/UserSettingsEditor.html b/core/src/UserSettingsEditor.html
index f8168e696b..7626554bc6 100644
--- a/core/src/UserSettingsEditor.html
+++ b/core/src/UserSettingsEditor.html
@@ -146,7 +146,7 @@
   }
 
   .lui-fd-enum-button {
-    margin-right: 3px;
+    margin-top: 6px;
   }
 </style>
 <div class="lui-usersettings-content">
@@ -173,7 +173,7 @@
           disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
         >
         {/if}
-        {#if schemaItem.type==='enum'}
+        {#if schemaItem.type==='enum' && (schemaItem.style === undefined || schemaItem.style === 'list')}
         <div>
           <div class="fd-form-item">
             <div class="fd-popover">
@@ -232,13 +232,17 @@
           </div>
         </div>
         {/if}
-        {#if schemaItem.type==='enum_button'}
+        {#if schemaItem.type==='enum' && schemaItem.style === 'button'}
         <div>
           <div class="fd-form-item">
-            <div class="fd-popover enum-buttons-container-{key}">
+            <div
+              class="fd-segmented-button enum-buttons-container-{key}"
+              role="group"
+              aria-label="Group label"
+            >
               {#each schemaItem.options as option, optionIndex}
               <button
-                class="fd-button lui-fd-enum-button {userSettings[userSettingsGroupSchema[0]][key] === option ? 'fd-button--emphasized':'' }"
+                class="lui-fd-enum-button fd-button fd-button--compact {userSettings[userSettingsGroupSchema[0]][key] === option ? 'is-selected':'' }"
                 on:click="{() => updateEnumButton(key,option)}"
                 id="lui-us-enum_button_{key}_{option}"
                 data-testid="lui-us-enum_button_{key}_{option}"
diff --git a/test/e2e-test-application/src/luigi-config/extended/settings.js b/test/e2e-test-application/src/luigi-config/extended/settings.js
index a73bb8c74a..50fa62a406 100644
--- a/test/e2e-test-application/src/luigi-config/extended/settings.js
+++ b/test/e2e-test-application/src/luigi-config/extended/settings.js
@@ -118,10 +118,16 @@ class Settings {
             type: 'enum',
             label: 'Language and Region',
             options: ['German', 'English', 'Spanish', 'French'],
-            description: 'After you save your settings, the browser will refresh for the new language to take effect.'
+            description:
+              'After you save your settings, the browser will refresh for the new language to take effect.'
           },
           date: { type: 'string', label: 'Date Format' },
-          time: { type: 'enum', label: 'Time Format', options: ['12 h', '24 h'] }
+          time: {
+            type: 'enum',
+            style: 'button',
+            label: 'Time Format',
+            options: ['12 h', '24 h']
+          }
         }
       },
       privacy: {
@@ -130,13 +136,19 @@ class Settings {
         icon: 'private',
         settings: {
           policy: {
-            type: 'string', label: 'Privacy policy has not been defined.'
+            type: 'string',
+            label: 'Privacy policy has not been defined.'
           },
-          time: { type: 'enum_button', label: 'Time Format', options: ['12 h', '24 h'] }
+          time: {
+            type: 'enum',
+            style: 'button',
+            label: 'Time Format',
+            options: ['12 h', '24 h']
+          }
         }
       }
     }
-  }
+  };
 }
 
 export const settings = new Settings();

From e1b51599ddfc80f49acfb9d8aa0dbc063cb0bd65 Mon Sep 17 00:00:00 2001
From: "Leggieri, Davide Teodoro" <davide.teodoro.leggieri@sap.com>
Date: Tue, 19 Jan 2021 14:03:18 +0100
Subject: [PATCH 13/13] Fixing integration tests

---
 .../1-angular/user_settings_dialog.spec.js    | 164 +++++++++++++-----
 1 file changed, 119 insertions(+), 45 deletions(-)

diff --git a/test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js b/test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js
index ccd822ae91..18d8753202 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js
@@ -1,35 +1,46 @@
 describe('Navigation', () => {
-  const clearStorage = () => cy.clearLocalStorage('luigi.preferences.userSettings');
+  const clearStorage = () =>
+    cy.clearLocalStorage('luigi.preferences.userSettings');
 
-  const openSettingsDialogBox = () =>{
+  const openSettingsDialogBox = () => {
     //Click on User Icon (top menu right)
-    cy.get('.fd-user-menu button').should('exist').click();
+    cy.get('.fd-user-menu button')
+      .should('exist')
+      .click();
 
     //Click on Setting link and open Dialog Box
-    cy.get('[data-testid="settings-link"]').should('exist').click();
+    cy.get('[data-testid="settings-link"]')
+      .should('exist')
+      .click();
 
     //Check Dialog is open
     cy.get('[data-testid="lui-us-header"]').should('exist');
 
     //Check we have 3 left bar items
-    cy.get('.lui-usersettings-body .fd-nested-list__link').children().should('have.length', 3);
-  }
+    cy.get('.lui-usersettings-body .fd-nested-list__link')
+      .children()
+      .should('have.length', 3);
+  };
 
   const saveSettings = () => {
     //Check save button and click
-    cy.get('.lui-usersettings-dialog [data-testid="lui-us-saveBtn"]').should('exist').click();
+    cy.get('.lui-usersettings-dialog [data-testid="lui-us-saveBtn"]')
+      .should('exist')
+      .click();
 
     //Check settings dialog box is closed...
     cy.get('[data-testid="lui-us-header"]').should('not.exist');
-  }
+  };
 
   const closeSettings = () => {
     //Check cancel button and click
-    cy.get('.lui-usersettings-dialog [data-testid="lui-us-dismissBtn"]').should('exist').click();
+    cy.get('.lui-usersettings-dialog [data-testid="lui-us-dismissBtn"]')
+      .should('exist')
+      .click();
 
     //Check settings dialog box is closed...
     cy.get('[data-testid="lui-us-header"]').should('not.exist');
-  }
+  };
 
   beforeEach(() => {
     cy.visitLoggedIn('/');
@@ -37,33 +48,45 @@ describe('Navigation', () => {
   });
 
   describe('User Account Configuration', () => {
-    const setting_name  =  'name_'+new Date().getTime();
-    const setting_date_format  =  'df_'+new Date().getTime();
-    const setting_privacy_policy  =  'privacy_policy_'+new Date().getTime();
+    const setting_name = 'name_' + new Date().getTime();
+    const setting_date_format = 'df_' + new Date().getTime();
+    const setting_privacy_policy = 'privacy_policy_' + new Date().getTime();
 
     it('Fill Account and save; reopen and check saved value', () => {
       //Clear storage before to save it
       clearStorage();
 
       //Click on User Account
-      cy.get('.lui-usersettings-body .fd-nested-list__link').eq(0).click();
+      cy.get('.lui-usersettings-body .fd-nested-list__link')
+        .eq(0)
+        .click();
 
       //Check User Account is selected
-      cy.get('.lui-usersettings-body .fd-nested-list__link').eq(0).should('have.class','is-selected')
+      cy.get('.lui-usersettings-body .fd-nested-list__link')
+        .eq(0)
+        .should('have.class', 'is-selected');
 
       //Check Name Input field and type a new name
-      cy.get('[data-testid="lui-us-input0"]').should('exist').type(setting_name);
+      cy.get('[data-testid="lui-us-input0"]')
+        .should('exist')
+        .type(setting_name);
 
       //Email Input field should be disabled
-      cy.get('[data-testid="lui-us-input1"]').should('exist').should('be.disabled');
+      cy.get('[data-testid="lui-us-input1"]')
+        .should('exist')
+        .should('be.disabled');
 
       //Click on Checkbox
       cy.get('.lui-usersettings-content .fd-container .lui-value-container')
-        .eq(3).find('.fd-checkbox').check();
+        .eq(3)
+        .find('.fd-checkbox')
+        .check();
 
       //Check Checkbox is checked
       cy.get('.lui-usersettings-content .fd-container .lui-value-container')
-        .eq(3).find('.fd-checkbox').should('be.checked');
+        .eq(3)
+        .find('.fd-checkbox')
+        .should('be.checked');
 
       //Save Settings
       saveSettings();
@@ -72,11 +95,16 @@ describe('Navigation', () => {
       openSettingsDialogBox();
 
       //Check Name Input field and type a new name
-      cy.get('[data-testid="lui-us-input0"]').should('have.value', setting_name);
+      cy.get('[data-testid="lui-us-input0"]').should(
+        'have.value',
+        setting_name
+      );
 
       //Check Checkbox is checked
       cy.get('.lui-usersettings-content .fd-container .lui-value-container')
-        .eq(3).find('.fd-checkbox').should('be.checked');
+        .eq(3)
+        .find('.fd-checkbox')
+        .should('be.checked');
 
       //Close settings
       closeSettings();
@@ -87,29 +115,45 @@ describe('Navigation', () => {
       clearStorage();
 
       //Click on Language & Region
-      cy.get('.lui-usersettings-body .fd-nested-list__link').eq(1).click();
+      cy.get('.lui-usersettings-body .fd-nested-list__link')
+        .eq(1)
+        .click();
 
       //Check Language & Region is selected
-      cy.get('.lui-usersettings-body .fd-nested-list__link').eq(1).should('have.class','is-selected');
+      cy.get('.lui-usersettings-body .fd-nested-list__link')
+        .eq(1)
+        .should('have.class', 'is-selected');
 
       //Check Language & Region Input field exist
       cy.get('[data-testid="lui-us-input0"]').should('exist');
 
       //Open button to show enumeration list options
-      cy.get('.lui-usersettings-content .fd-page__content .fd-form-item').eq(0).find('.fd-input-group__button').click();
+      cy.get('.lui-usersettings-content .fd-page__content .fd-form-item')
+        .eq(0)
+        .find('.fd-input-group__button')
+        .click();
 
       //Check we should have 4 options
-      cy.get('.lui-usersettings-content .fd-page__content .fd-form-item').eq(0)
-        .find(' .fd-list--dropdown .fd-list__item').children().should('have.length', 4);
+      cy.get('.lui-usersettings-content .fd-page__content .fd-form-item')
+        .eq(0)
+        .find(' .fd-list--dropdown .fd-list__item')
+        .children()
+        .should('have.length', 4);
 
       //Click on Spanish list item
-      cy.get('[data-testid="lui-us-option0_2"]').should('exist').click();
+      cy.get('[data-testid="lui-us-option0_2"]')
+        .should('exist')
+        .click();
 
       //Check Placeholder of input field is Spanish
-      cy.get('[data-testid="lui-us-input0"]').should('exist').should('have.attr', 'placeholder', 'Spanish');
+      cy.get('[data-testid="lui-us-input0"]')
+        .should('exist')
+        .should('have.attr', 'placeholder', 'Spanish');
 
       //Check Date Formant Input field and type a new format
-      cy.get('[data-testid="lui-us-input1"]').should('exist').type(setting_date_format);
+      cy.get('[data-testid="lui-us-input1"]')
+        .should('exist')
+        .type(setting_date_format);
 
       //Save Settings
       saveSettings();
@@ -118,13 +162,20 @@ describe('Navigation', () => {
       openSettingsDialogBox();
 
       //Click on Language & Region (left menu)
-      cy.get('.lui-usersettings-body .fd-nested-list__link').eq(1).click();
+      cy.get('.lui-usersettings-body .fd-nested-list__link')
+        .eq(1)
+        .click();
 
       //Check Placeholder of input field is Spanish
-      cy.get('[data-testid="lui-us-input0"]').should('exist').should('have.attr', 'placeholder', 'Spanish');
+      cy.get('[data-testid="lui-us-input0"]')
+        .should('exist')
+        .should('have.attr', 'placeholder', 'Spanish');
 
       //Check Name Input field and type a new name
-      cy.get('[data-testid="lui-us-input1"]').should('have.value', setting_date_format);
+      cy.get('[data-testid="lui-us-input1"]').should(
+        'have.value',
+        setting_date_format
+      );
 
       //Close settings
       closeSettings();
@@ -135,26 +186,43 @@ describe('Navigation', () => {
       clearStorage();
 
       //Click on Privacy
-      cy.get('.lui-usersettings-body .fd-nested-list__link').eq(2).click();
+      cy.get('.lui-usersettings-body .fd-nested-list__link')
+        .eq(2)
+        .click();
 
       //Check Private Policy Input field exist and placeholder is
-      cy.get('[data-testid="lui-us-input0"]').should('exist').should('have.attr', 'placeholder', 'Field placeholder text');
+      cy.get('[data-testid="lui-us-input0"]')
+        .should('exist')
+        .should('have.attr', 'placeholder', 'Field placeholder text');
 
       //Check Private Policy Input field exist and placeholder is
       cy.get('[data-testid="lui-us-input0"]').type(setting_privacy_policy);
 
-      //Check Time Format has two buttons
-      cy.get('.enum-buttons-container-time').children().should('have.length', 2);
-
       //Check Time Format has two buttons with no selected class
-      cy.get('.lui-usersettings-content .enum-buttons-container-time .lui-fd-enum-button').eq(0).should('not.have.class', 'fd-button--emphasized');
-      cy.get('.lui-usersettings-content .enum-buttons-container-time .lui-fd-enum-button').eq(1).should('not.have.class', 'fd-button--emphasized');
+      cy.get(
+        '.lui-usersettings-content .enum-buttons-container-time .lui-fd-enum-button'
+      )
+        .eq(0)
+        .should('not.have.class', 'fd-button--emphasized');
+      cy.get(
+        '.lui-usersettings-content .enum-buttons-container-time .lui-fd-enum-button'
+      )
+        .eq(1)
+        .should('not.have.class', 'fd-button--emphasized');
 
       //Click Time Format 12h
-      cy.get('.lui-usersettings-content .enum-buttons-container-time .lui-fd-enum-button').eq(0).click();
+      cy.get(
+        '.lui-usersettings-content .enum-buttons-container-time .lui-fd-enum-button'
+      )
+        .eq(0)
+        .click();
 
       //Check Time Format 12h is selected
-      cy.get('.lui-usersettings-content .enum-buttons-container-time .lui-fd-enum-button').eq(0).should('have.class', 'fd-button--emphasized');
+      cy.get(
+        '.lui-usersettings-content .enum-buttons-container-time .lui-fd-enum-button'
+      )
+        .eq(0)
+        .should('have.class', 'is-selected');
 
       //Save Settings
       saveSettings();
@@ -163,14 +231,20 @@ describe('Navigation', () => {
       openSettingsDialogBox();
 
       //Click on Privacy
-      cy.get('.lui-usersettings-body .fd-nested-list__link').eq(2).click();
+      cy.get('.lui-usersettings-body .fd-nested-list__link')
+        .eq(2)
+        .click();
 
       //Check Private Policy Input field has saved value
-      cy.get('[data-testid="lui-us-input0"]').should('have.value', setting_privacy_policy);
-
+      cy.get('[data-testid="lui-us-input0"]').should(
+        'have.value',
+        setting_privacy_policy
+      );
 
       //Check Time Format 12h is selected
-      cy.get('.lui-usersettings-content .enum-buttons-container-time button').eq(0).should('have.class', 'fd-button--emphasized');
+      cy.get('.lui-usersettings-content .enum-buttons-container-time button')
+        .eq(0)
+        .should('have.class', 'is-selected');
 
       //Close settings
       closeSettings();