Resolve class ordering issue

Author: NickColley

packages/govuk-frontend/src/govuk/components/panel/template.njk

@@ -2,17 +2,14 @@
 
 {% set headingLevel = params.headingLevel if params.headingLevel else 1 -%}
 
-{%- set classNames = "govuk-panel" -%}
+{%- set isInterruption = params.classes and ("govuk-panel--interruption" in params.classes) -%}
 
-{%- if params.classes %}
-  {% set classNames = classNames + " " + params.classes %}
-{% endif %}
+{#- The Panel component defaults to the Confirmation variant -#}
+{%- set defaultModifierClassName = "govuk-panel--confirmation" if not isInterruption -%}
 
-{%- if (not params.classes) or (not "govuk-panel--interruption" in params.classes) %}
-  {% set classNames = classNames + " govuk-panel--confirmation" -%}
-{% endif %}
-
-<div class="{{ classNames }}"
+<div class="govuk-panel
+  {%- if defaultModifierClassName %} {{ defaultModifierClassName }}{% endif %}
+  {%- if params.classes %} {{ params.classes }}{% endif -%}"
   {{- govukAttributes(params.attributes) }}>
   <h{{ headingLevel }} class="govuk-panel__title">
     {{ params.titleHtml | safe if params.titleHtml else params.titleText }}

packages/govuk-frontend/src/govuk/components/panel/template.test.js

@@ -120,7 +120,7 @@ describe('Panel', () => {
 
       const $component = $('.govuk-panel')
       expect($component.attr('class')).toBe(
-        'govuk-panel extra-class one-more-class govuk-panel--confirmation'
+        'govuk-panel govuk-panel--confirmation extra-class one-more-class'
       )
     })
     it('has no confirmation modifier class if interruption modifier class is used', () => {