enhancement: vf-intro badge

* Remove `vf-badge--phases` after upstream removal in vf-badge@2.0.0
  * #1546
* Improve placement of `.vf-intro__heading--has-tag .vf-badge` to facilitate assorted widths and multiline headings

components/vf-intro/CHANGELOG.md

@@ -1,3 +1,9 @@
+### 1.5.0
+
+* Remove `vf-badge--phases` after upstream removal in vf-badge@2.0.0
+  * https://github.com/visual-framework/vf-core/pull/1546
+* Improve placement of `.vf-intro__heading--has-tag .vf-badge` to facilitate assorted widths and multiline headings
+
 ### 1.4.7
 
 * Fixes CSS to match stylelint rules.

components/vf-intro/vf-intro.njk

@@ -24,7 +24,6 @@
   <div class="vf-stack">
 
   <h1 class="vf-intro__heading {% if (vf_intro_phase) or (vf_intro_badge) %}vf-intro__heading--has-tag{% endif %}">
-
   {{- vf_intro_heading -}}
 
   {%- if (vf_intro_phase) and (vf_intro_badge) -%}
@@ -33,16 +32,15 @@
 
   {%- if (vf_intro_phase) %}
     {%- if (vf_intro_heading_href) %}
-      <a href="{{- intro_heading_href -}}" class="vf-badge vf-badge--primary vf-badge--phases">{{- vf_intro_phase -}}</a>
+      <a href="{{- intro_heading_href -}}" class="vf-badge vf-badge--primary">{{- vf_intro_phase -}}</a>
     {%- else -%}
-      <span class="vf-badge vf-badge--primary vf-badge--phases">{{- vf_intro_phase -}};</span>
+      <span class="vf-badge vf-badge--primary">{{- vf_intro_phase -}};</span>
     {%- endif -%}
   {%- endif -%}
   {%- if vf_intro_badge -%}
     {% set badge = '@vf-badge' %}
     {% render badge, { 'context': vf_intro_badge } %}
   {%- endif -%}
-
   </h1>
 
 

components/vf-intro/vf-intro.scss

@@ -61,20 +61,19 @@
 }
 
 .vf-intro__heading--has-tag {
-  align-items: center;
   display: flex;
 
   .vf-badge {
-    margin-left: .5rem;
+    margin-top: map-get($vf-spacing-map, vf-spacing--200); // compensate for the ascender height
   }
 
   @media (min-width: $vf-breakpoint--lg) {
-    left: -83px;
     position: relative;
 
     .vf-badge {
-      margin-left: 0;
-      order: -1;
+      margin-right: map-get($vf-spacing-map, vf-spacing--400);
+      position: absolute;
+      right: 100%;
     }
   }
 }