Issue1840-1842 : Changes to hide section header and add white backgro… (

#1851)

* Issue1840-1842 : Changes to hide section header and add white background to container

- Added  the class vf-u-sr-only to section header in case hidden
- Components.njk updated with code to show example for type=container
- Added example and put white background in container config

* Updated Changelog.md for the vf-card-container component changes

* Fixed the section header template to hide only the <h2> tag

components/vf-card-container/CHANGELOG.md

@@ -1,3 +1,10 @@
+### 3.2.2
+
+* Added: Attribute ‘hidden’ to container_section__header in config and accordingly it adds ‘vf-u-sr-only’ css class to hide section header, this to fix component accessibility
+* Added: Added condition to components.njk to show example section for type=container
+* Changed: vf-u-background-color--grey--lightest to vf-u-background-color-ui--white to apply white background
+* https://github.com/visual-framework/vf-core/pull/1851
+
 ### 3.2.1
 
 * Uses vf-stack for spacing to apply to elements immediately before or after vf-card-container.

components/vf-card-container/vf-card-container.config.yml

@@ -17,7 +17,7 @@ context:
 variants:
   - name: default
     context:
-      modifier: vf-u-background-color--grey--lightest vf-u-fullbleed
+      modifier: vf-u-background-color-ui--white vf-u-fullbleed
       cards_aspect_ratio: 16 / 9
       cards_per_row: 3
       container_section__header:
@@ -48,3 +48,40 @@ variants:
           card_href: "JavaScript:Void(0);"
           card_image: ../../assets/vf-card/assets/vf-card-example.png
           card_text: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?
+  - name: section header hidden
+    context:
+      isExample: true
+      variant: default
+      theme: primary
+      modifier: vf-u-background-color-ui--white vf-u-fullbleed
+      cards_aspect_ratio: 16 / 9
+      cards_per_row: 3
+      container_section__header:
+        hidden: true
+        section_title: Missions
+        href: "JavaScript:Void(0);"
+        vf_section__content:
+          - To promote molecular biology across Europe
+          - To create a centre of excellence for Europe's leading young molecular biologists
+      vf_cards:
+        -
+          variant: striped
+          newTheme: primary
+          card_title: One card
+          card_href: "JavaScript:Void(0);"
+          card_image: ../../assets/vf-card/assets/vf-card-example.png
+          card_text: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos? Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?
+        -
+          variant: striped
+          newTheme: primary
+          card_title: A card here
+          card_href: "JavaScript:Void(0);"
+          card_image: ../../assets/vf-card/assets/vf-card-example.png
+          card_text: Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        -
+          variant: striped
+          newTheme: primary
+          card_title: Another card
+          card_href: "JavaScript:Void(0);"
+          card_image: ../../assets/vf-card/assets/vf-card-example.png
+          card_text: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?

components/vf-section-header/vf-section-header.njk

@@ -4,6 +4,7 @@
 {% set section_title = context.section_title %}
 {% set section__subheading = context.section__subheading %}
 {% set vf_section__content = context.vf_section__content %}
+{% set hidden = context.hidden %}
 {% endif -%}
 
 {% spaceless %}
@@ -15,7 +16,7 @@
 
 <div class="vf-section-header">
   <{{tags}}
-    class="vf-section-header__heading{% if href %} vf-section-header__heading--is-link{% endif %}"
+    class="vf-section-header__heading{% if href %} vf-section-header__heading--is-link{% endif %}{%- if hidden %} vf-u-sr-only{% endif -%}"
     {%- if id %} id="{{id}}"{% endif -%}
   >
     {% if href %}<a href="{{href}}">{% endif %}

tools/vf-component-library/src/site/_includes/layouts/components.njk

@@ -320,19 +320,31 @@ import { {{ component.baseHandle | camelize(true) | replace("-", "") }} } from "
       {%- for variant in variants %}
         {% if variant.isHidden == false and variant.context['isExample'] == true %}
           {# {% if component.baseHandle == 'vf-u-fullbleed' %} #}
-          {% if variants[0].context['component-type'] == "block" or variants[0].context['component-type'] == "element" %}
+          {% if variants[0].context['component-type'] == "block" or variants[0].context['component-type'] == "element"  or variants[0].context['component-type'] == "container" %}
             <section>
               {% render '@vf-section-header', {
                 "section_title": variant.label,
                 "id": variant.handle,
                 "href": "#" + variant.handle
               } %}
+              {% if variants[0].context['component-type'] == "container" %}
+                <article class="vf-stack vf-stack--lg vf-u-margin__bottom--1200"
+                   style="clear: both; /* insurance against strange components */"
+          >
+                  <div class="vf-u-padding--400"
+                      style="overflow: auto; background-image: linear-gradient(45deg, rgba(59, 111, 182, .1) 25%, transparent 25%), linear-gradient(135deg, rgba(59, 111, 182, .1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(59, 111, 182, .1) 75%), linear-gradient(135deg, transparent 75%, rgba(59, 111, 182, .1) 75%);background-size: 20px 20px; background-position-x: 0px, 10px, 10px, 0px;background-position-y: 0px, 0px, -10px, 10px;"
+                  >
+                  {% render '@'+variant.handle, variant.context %}
+                  </div>
+                </article>
+              {% else %}
               <article class="vf-u-padding--400"
                   style="background-image: linear-gradient(45deg, rgba(59, 111, 182, .1) 25%, transparent 25%), linear-gradient(135deg, rgba(59, 111, 182, .1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(59, 111, 182, .1) 75%), linear-gradient(135deg, transparent 75%, rgba(59, 111, 182, .1) 75%);background-size: 20px 20px; background-position-x: 0px, 10px, 10px, 0px;background-position-y: 0px, 0px, -10px, 10px;"
               >
                 {# When you want a box with a slight shadow #}
                 {% render '@'+variant.handle, variant.context %}
               </article>
+              {% endif %}
             </section>
           {% else %}
             <article class="vf-u-padding--400" style="