Merge branch 'v1.x' into 355-confirm-structure-of-content-display

config/default/field.field.paragraph.para_h_band.field_h_title.yml

@@ -10,7 +10,7 @@ field_name: field_h_title
 entity_type: paragraph
 bundle: para_h_band
 label: 'Band heading'
-description: ''
+description: 'Add a heading to this band if grouping the featured cards by a common element will help our users - for example,  <i>Video training for aged care providers</i>'
 required: false
 translatable: true
 default_value: {  }

dev_modules/custom/health_sample_content/migrations/health_sample_content.paragraph.content_text.yml

@@ -50,15 +50,15 @@ source:
     -
       id: para_h_content_text_7
       body_text: |
-        <h2>The Force Awakens</h2>
+        <h3>The Force Awakens</h3>
     -
       id: para_h_content_text_8
       body_text: |
-        <h2>Last Jedi</h2>
+        <h3>Last Jedi</h3>
     -
       id: para_h_content_text_9
       body_text: |
-        <h2>The Rise of Skywalker</h2>
+        <h3>The Rise of Skywalker</h3>
     -
       id: para_h_content_text_10
       body_text: |

themes/health/source/sass/components/@health/_band.scss

@@ -0,0 +1,6 @@
+.health-band {
+
+  h2 + .health-layout {
+    @include AU-space(margin-top, 2.5unit);
+  }
+}

themes/health/source/sass/components/_components.scss

@@ -10,6 +10,7 @@
 @import './@gov.au/side-nav';
 
 // Health Design System overrides.
+@import './@health/band';
 @import './@health/card';
 @import './@health/content';
 @import './@health/hero';

themes/health/source/sass/components/health/_page-modifications.scss

@@ -1,3 +1,3 @@
 p.document-accessibility-form {
-  margin-top: 3.5rem;
+  @include AU-space(margin-top, 3.5unit);
 }

themes/health/templates/field/field--paragraph--field-h-title.html.twig

@@ -37,5 +37,5 @@
  */
 #}
 {% for item in items %}
-  <h2 {{ item.attributes }}>{{ item.content }}</h2>
+  <h2 {{ item.attributes.addClass('paragraph-title') }}>{{ item.content }}</h2>
 {% endfor %}

themes/health/templates/paragraph/paragraph--para-h-layout-grid.html.twig

@@ -1,7 +1,14 @@
 {% extends "@paragraphs/paragraph.html.twig" %}
 
 {% block paragraph %}
+
+  {% set classes = [
+    'health-layout',
+    'health-layout--grid'
+  ] %}
+
   <div{{ attributes }}>
     {{ content }}
   </div>
+
 {% endblock %}

themes/health/templates/paragraph/paragraph--para-h-layout-three-column.html.twig

@@ -1,15 +1,24 @@
 {% extends "@paragraphs/paragraph.html.twig" %}
 
 {% block paragraph %}
-  <div class="row">
-    <div class="col-xs-12 col-sm-4">
-      {{ content.field_h_content_components_col_1 }}
-    </div>
-    <div class="col-xs-12 col-sm-4 standard-gap--mobile-only">
-      {{ content.field_h_content_components }}
-    </div>
-    <div class="col-xs-12 col-sm-4 standard-gap--mobile-only">
-      {{ content.field_h_content_components_col_2 }}
+
+  {% set classes = [
+    'health-layout',
+    'health-layout--3col'
+  ] %}
+
+  <div{{ attributes.addClass(classes) }}>
+    <div class="row">
+      <div class="col-xs-12 col-sm-4">
+        {{ content.field_h_content_components_col_1 }}
+      </div>
+      <div class="col-xs-12 col-sm-4 standard-gap--mobile-only">
+        {{ content.field_h_content_components }}
+      </div>
+      <div class="col-xs-12 col-sm-4 standard-gap--mobile-only">
+        {{ content.field_h_content_components_col_2 }}
+      </div>
     </div>
   </div>
+
 {% endblock %}

themes/health/templates/paragraph/paragraph--para-h-layout-two-column.html.twig

@@ -2,7 +2,13 @@
 {% extends "@paragraphs/paragraph.html.twig" %}
 
 {% block paragraph %}
-  <div{{ attributes }}>
+
+  {% set classes = [
+    'health-layout',
+    'health-layout--2col'
+  ] %}
+
+  <div{{ attributes.addClass(classes) }}>
     <div class="row">
       <div class="{{ column_left_width_classes }}">
         {{ content.field_h_content_components_col_1 }}
@@ -12,4 +18,5 @@
       </div>
     </div>
   </div>
+
 {% endblock %}