adds option to make the heading a link using nunjucks and yaml (#1264)

components/vf-hero/CHANGELOG.md

@@ -1,3 +1,8 @@
+### 2.0.1
+
+* adds the option to add an url to `vf-hero__heading` with nunjucks/yaml.
+  * gives the element a classname.
+
 ### 2.0.0
 
 * introduces new naming convention for design variants.

components/vf-hero/README.md

@@ -8,6 +8,8 @@ The `vf-hero` component is to be used as a visual queue and page header. The `vf
 
 ## Usage
 
+This component should not be used inside of `vf-content`.
+
 Currently there are now two use cases for the `vf-hero` component:
 
 

components/vf-hero/vf-hero.config.yml

@@ -50,7 +50,8 @@ variants:
   - name: default block
     hidden: false
     context:
-      vf_hero_heading: <a href="JavaScript:Void(0);">Strategy & Communications</a>
+      vf_hero_heading: Strategy & Communications
+      vf_hero_heading_href: JavaScript:Void(0);
       vf_hero_subheading: Chromosome structure and dynamics
       vf_hero_heading_additional: <a href="JavaScript:Void(0);">VF Hamburg</a> | Structural Biology
       vf_hero_image_size: auto 28.5rem

components/vf-hero/vf-hero.njk

@@ -42,7 +42,9 @@
   <div class="vf-hero__content | vf-stack vf-stack--400 ">
     {% if vf_hero_heading %}
     <h2 class="vf-hero__heading">
+      {% if vf_hero_heading_href %}<a class="vf-hero__heading_link" href="{{vf_hero_heading_href}}">{% endif %}
       {{ vf_hero_heading }}
+      {% if vf_hero_heading_href %}</a>{% endif %}
       {%- if vf_hero_heading_additional -%}
         <span class="vf-hero__heading--additional">{{ vf_hero_heading_additional }}</span>
       {%- endif -%}