From 35e1114fac4543f756543f716015c8eab24deb43 Mon Sep 17 00:00:00 2001
From: Conor Webb <126772285+ConorWebb96@users.noreply.github.com>
Date: Tue, 19 Mar 2024 16:13:28 +0000
Subject: [PATCH] Added a setting to allow the title's text alignment to be
 changed (#13235)

* Added setting to allow title text alignment to be set and changed

* Switched out for icons instead of a select as per feedback.

* Edited right icon to display the correct icon.

* Updated to use the paragrah alignment component icons.

* Added button list component

* Reworked template to use BarButtonList over ActionButton component

* Updated selectedArray name to alignmentOptions provides better meaning
---
 .../_components/Navigation/index.svelte       | 20 +++++++++++++++++++
 .../builder/src/stores/builder/navigation.js  |  1 +
 .../client/src/components/app/Layout.svelte   |  3 ++-
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
index 50e1ad0cf8..4db218f60b 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
@@ -24,6 +24,13 @@
     navigationStore,
   } from "stores/builder"
   import { DefaultAppTheme } from "constants"
+  import BarButtonList from "/src/components/design/settings/controls/BarButtonList.svelte"
+
+  $: alignmentOptions = [
+    { value: "Left", barIcon: "TextAlignLeft" },
+    { value: "Center", barIcon: "TextAlignCenter" },
+    { value: "Right", barIcon: "TextAlignRight" },
+  ]
 
   $: screenRouteOptions = $screenStore.screens
     .map(screen => screen.routing?.route)
@@ -46,6 +53,10 @@
       notifications.error("Error updating navigation settings")
     }
   }
+
+  const updateTextAlign = textAlignValue => {
+    navigationStore.syncAppNavigation({ textAlign: textAlignValue })
+  }
 </script>
 
 <Panel
@@ -133,6 +144,15 @@
             on:change={e => update("title", e.detail)}
             updateOnChange={false}
           />
+
+          <div class="label">
+            <Label size="M">Text align</Label>
+          </div>
+          <BarButtonList
+            options={alignmentOptions}
+            value={$navigationStore.textAlign}
+            onChange={updateTextAlign}
+          />
         {/if}
         <div class="label">
           <Label>Background</Label>
diff --git a/packages/builder/src/stores/builder/navigation.js b/packages/builder/src/stores/builder/navigation.js
index 88565de99d..0cc4923c56 100644
--- a/packages/builder/src/stores/builder/navigation.js
+++ b/packages/builder/src/stores/builder/navigation.js
@@ -11,6 +11,7 @@ export const INITIAL_NAVIGATION_STATE = {
   hideLogo: null,
   logoUrl: null,
   hideTitle: null,
+  textAlign: "Left",
   navBackground: null,
   navWidth: null,
   navTextColor: null,
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index f1dcdf6b37..1b92c0fefc 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -36,6 +36,7 @@
   export let pageWidth
   export let logoLinkUrl
   export let openLogoLinkInNewTab
+  export let textAlign
 
   export let embedded = false
 
@@ -226,7 +227,7 @@
                   {/if}
                 {/if}
                 {#if !hideTitle && title}
-                  <Heading size="S">{title}</Heading>
+                  <Heading size="S" {textAlign}>{title}</Heading>
                 {/if}
               </div>
               {#if !embedded}