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

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>

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,

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}