Add right-aligned option to end slot and language switcher example

Author: domoscargin

packages/govuk-frontend/src/govuk/components/language-switcher/_mixin.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @use "../../base";
 
 /// @access private
@@ -32,4 +34,31 @@
     @include base.govuk-link-common;
     @include base.govuk-link-style-default;
   }
+
+  // When used inside service navigation, align the language switcher
+  .govuk-service-navigation .govuk-language-switcher {
+    margin-top: base.govuk-spacing(2);
+    margin-bottom: base.govuk-spacing(2);
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      display: inline;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  .govuk-service-navigation .govuk-language-switcher__list {
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      padding: base.govuk-spacing(3) 0;
+
+      // Match the service navigation row height at the switcher's 16px size.
+      line-height: math.div(29, 16);
+    }
+  }
+
+  .govuk-service-navigation .govuk-language-switcher__list-item {
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      margin-bottom: 0;
+    }
+  }
 }

packages/govuk-frontend/src/govuk/components/service-navigation/_mixin.scss

@@ -116,6 +116,16 @@
     flex-grow: 1;
   }
 
+  .govuk-service-navigation__end {
+    width: 100%;
+  }
+
+  @media #{base.govuk-from-breakpoint(tablet)} {
+    .govuk-service-navigation__end {
+      width: auto;
+    }
+  }
+
   //
   // Navigation list specific code
   //

packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.yaml

@@ -85,6 +85,10 @@ params:
         type: string
         required: false
         description: HTML injected at the end of the service header container.
+      - name: endRightAligned
+        type: boolean
+        required: false
+        description: If `true`, renders the `end` slot inline in the service navigation row and right aligns it at tablet and above. Defaults to `false`.
       - name: navigationStart
         type: string
         required: false
@@ -402,6 +406,31 @@ examples:
               </li>
             </ul>
           </nav>
+  - name: with right-aligned language switcher
+    description: HTML rendered by the language switcher component can be injected into the `end` slot of the service header.
+    options:
+      serviceName: Service name
+      navigation:
+        - href: '#/1'
+          text: Navigation item 1
+          active: true
+        - href: '#/2'
+          text: Navigation item 2
+        - href: '#/3'
+          text: Navigation item 3
+      slots:
+        end: |-
+          <nav class="govuk-language-switcher" aria-label="Language switcher">
+            <ul class="govuk-language-switcher__list">
+              <li class="govuk-language-switcher__list-item">
+                <span class="govuk-language-switcher__text" lang="en" aria-current="true">English</span>
+              </li>
+              <li class="govuk-language-switcher__list-item">
+                <a class="govuk-language-switcher__link" href="#/cy" lang="cy" hreflang="cy" rel="alternate">Cymraeg</a>
+              </li>
+            </ul>
+          </nav>
+        endRightAligned: true
   - name: with slotted content
     hidden: true
     options:
@@ -410,3 +439,12 @@ examples:
         end: '<div>[end]</div>'
         navigationStart: '<li>[navigation start]</li>'
         navigationEnd: '<li>[navigation end]</li>'
+  - name: with right-aligned end slot
+    options:
+      serviceName: Service name
+      navigation:
+        - href: '#/1'
+          text: Navigation item 1
+      slots:
+        end: '<div>[end]</div>'
+        endRightAligned: true

packages/govuk-frontend/src/govuk/components/service-navigation/template.njk

@@ -2,6 +2,7 @@
 
 {%- set menuButtonText = params.menuButtonText | default("Menu", true) -%}
 {%- set navigationId = params.navigationId | default("navigation", true) %}
+{%- set endSlotRightAligned = params.slots.endRightAligned | default(false) %}
 
 {%- set commonAttributes %}
 class="govuk-service-navigation {%- if params.classes %} {{ params.classes }}{% endif %}"
@@ -84,10 +85,17 @@ data-module="govuk-service-navigation"
           </ul>
         </nav>
       {% endif %}
+
+      {# Slot: end (right aligned) #}
+      {% if params.slots.end and endSlotRightAligned %}
+        <div class="govuk-service-navigation__end">
+          {{ params.slots.end | safe }}
+        </div>
+      {% endif %}
     </div>
 
     {# Slot: end #}
-    {%- if params.slots.end %}{{ params.slots.end | safe }}{% endif -%}
+    {%- if params.slots.end and not endSlotRightAligned %}{{ params.slots.end | safe }}{% endif -%}
 
   </div>
 {% endset -%}

packages/govuk-frontend/src/govuk/components/service-navigation/template.test.js

@@ -488,6 +488,23 @@ describe('Service Navigation', () => {
       expect($slottedElement.prop('outerHTML')).toBe('<div>[end]</div>')
     })
 
+    it('inserts HTML from the `end` slot inline when `endRightAligned` is enabled', () => {
+      const $ = render(
+        'service-navigation',
+        examples['with right-aligned end slot']
+      )
+
+      const $endSlotInContainer = $('.govuk-service-navigation__end')
+      const $endSlotContent = $endSlotInContainer.find('> :first-child')
+      const $slottedElementAtRoot = $('.govuk-width-container > :last-child')
+
+      expect($endSlotInContainer).toHaveLength(1)
+      expect($endSlotContent.prop('outerHTML')).toBe('<div>[end]</div>')
+      expect(
+        $slottedElementAtRoot.hasClass('govuk-service-navigation__container')
+      ).toBeTruthy()
+    })
+
     it('renders the component as a <section> if `start` or `end` slots are used', () => {
       const $ = render('service-navigation', examples['with slotted content'])
       const tagName = $('.govuk-service-navigation').get(0).tagName