vanilla-framework 4.15.0 → 4.17.0

package/scss/_utilities_content-align.scss

@@ -6,6 +6,7 @@
   @include vf-u-align--left;
   @include vf-u-align--right;
   @include vf-u-align--bottom;
+  @include vf-u-vertical-align--middle;
   @include vf-u-align--text;
 }
 
@@ -33,12 +34,20 @@
   }
 }
 
+// Bottom align flex elements
 @mixin vf-u-align--bottom {
   .u-align--bottom {
     margin-top: auto !important;
   }
 }
 
+// Vertically align inline elements
+@mixin vf-u-vertical-align--middle {
+  .u-vertical-align--middle {
+    vertical-align: middle !important;
+  }
+}
+
 // Separate utility for aligning text
 @mixin vf-u-align--text {
   .u-align-text {

package/scss/_utilities_floats.scss

@@ -6,19 +6,19 @@
     float: right !important;
 
     &--small {
-      @media (max-width: $breakpoint-small - 1) {
+      @media (width < $breakpoint-small) {
         float: right !important;
       }
     }
 
     &--medium {
-      @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
+      @media ($breakpoint-small <= width < $breakpoint-large) {
         float: right !important;
       }
     }
 
     &--large {
-      @media (min-width: $breakpoint-large) {
+      @media ($breakpoint-large <= width) {
         float: right !important;
       }
     }
@@ -28,19 +28,19 @@
     float: left !important;
 
     &--small {
-      @media (max-width: $breakpoint-small - 1) {
+      @media (width < $breakpoint-small) {
         float: left !important;
       }
     }
 
     &--medium {
-      @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
+      @media ($breakpoint-small <= width < $breakpoint-large) {
         float: left !important;
       }
     }
 
     &--large {
-      @media (min-width: $breakpoint-large) {
+      @media ($breakpoint-large <= width) {
         float: left !important;
       }
     }

package/scss/_utilities_font-metrics.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'settings_font';
 
 @mixin vf-u-visualise-baseline($horizontal-bleed: 2rem) {
@@ -5,9 +6,9 @@
     position: relative;
 
     &::before {
-      border-bottom-color: transparentize($color-information, 0.5);
+      border-bottom-color: color.scale($color-information, $alpha: -50%);
       border-bottom-style: solid;
-      border-top-color: transparentize($color-positive, 0.5);
+      border-top-color: color.scale($color-positive, $alpha: -50%);
       border-top-style: solid;
       border-width: 1px;
       content: '';
@@ -19,7 +20,7 @@
     }
 
     &::after {
-      background-color: transparentize($color-negative, 0.5);
+      background-color: color.scale($color-negative, $alpha: -50%);
       content: '';
       height: 1px;
       left: -#{$horizontal-bleed};

package/scss/_utilities_hide.scss

@@ -21,19 +21,19 @@
     display: none !important;
 
     &--small {
-      @media (max-width: $breakpoint-small - 1) {
+      @media (width < $breakpoint-small) {
         display: none !important;
       }
     }
 
     &--medium {
-      @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
+      @media ($breakpoint-small <= width < $breakpoint-large) {
         display: none !important;
       }
     }
 
     &--large {
-      @media (min-width: $breakpoint-large) {
+      @media ($breakpoint-large <= width) {
         display: none !important;
       }
     }
@@ -45,19 +45,19 @@
     @include vf-hide-table-column;
 
     &--small {
-      @media (max-width: $breakpoint-small - 1) {
+      @media (width < $breakpoint-small) {
         @include vf-hide-table-column;
       }
     }
 
     &--medium {
-      @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
+      @media ($breakpoint-small <= width < $breakpoint-large) {
         @include vf-hide-table-column;
       }
     }
 
     &--large {
-      @media (min-width: $breakpoint-large) {
+      @media ($breakpoint-large <= width) {
         @include vf-hide-table-column;
       }
     }
@@ -69,19 +69,19 @@
     display: none !important;
 
     &--small {
-      @media (max-width: $breakpoint-small - 1) {
+      @media (width < $breakpoint-small) {
         display: none !important;
       }
     }
 
     &--medium {
-      @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
+      @media ($breakpoint-small <= width < $breakpoint-large) {
         display: none !important;
       }
     }
 
     &--large {
-      @media (min-width: $breakpoint-large) {
+      @media ($breakpoint-large <= width) {
         display: none !important;
       }
     }

package/scss/_utilities_show.scss

@@ -6,21 +6,21 @@
     display: initial !important;
 
     &--small {
-      @media (max-width: $breakpoint-small - 1) {
+      @media (width < $breakpoint-small) {
         display: inherit !important;
         display: initial !important;
       }
     }
 
     &--medium {
-      @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
+      @media ($breakpoint-small <= width < $breakpoint-large) {
         display: inherit !important;
         display: initial !important;
       }
     }
 
     &--large {
-      @media (min-width: $breakpoint-large) {
+      @media ($breakpoint-large <= width) {
         display: inherit !important;
         display: initial !important;
       }

package/templates/_macros/vf_hero.jinja

@@ -0,0 +1,186 @@
+# Params
+# title_text: Hero title text (required)
+# subtitle_text: Hero subtitle text
+# layout: layout of hero section. Options are '50/50', '50/50-full-width-image', '75/25', '25/75', 'fallback'
+# is_split_on_medium: whether the layout is split on tablet in 50/50, 25/75, and 75/25 layouts.
+#   If false, the layout is stacked on tablet.
+#   If true, the layout is split on tablet.
+# Slots
+# description: paragraph-style content below the title and subtitle
+# cta: call-to-action block below the description
+# image: slot for image content
+# signpost_image: slot for signpost (left column) image content in 25/75 layout. Required for 25/75 layout.
+{% macro vf_hero(
+  title_text,
+  subtitle_text='',
+  layout="fallback",
+  is_split_on_medium=false
+) -%}
+  {% set has_subtitle = subtitle_text|trim|length > 0 %}
+  {% set description_content = caller('description') %}
+  {% set has_description = description_content|trim|length > 0 %}
+  {% set cta_content = caller('cta') %}
+  {% set has_cta = cta_content|trim|length > 0 %}
+  {% set image_content = caller('image') %}
+  {% set has_image = image_content|trim|length > 0 %}
+  {% set signpost_image_content = caller('signpost_image') %}
+  {% set has_signpost_image = signpost_image_content|trim|length > 0 %}
+
+  {#- User can pass layout as "X-Y" or "X/Y" -#}
+  {% set layout = layout | trim | replace('/', '-') %}
+  {% if layout not in ['50-50', '50-50-full-width-image', '75-25', '25-75', 'fallback'] %}
+    {% set layout = 'fallback' %}
+  {% endif %}
+
+  {% if layout == '50-50-full-width-image' and has_image %}
+    {% set layout = '50-50' %}
+    {% set has_full_width_image = true %}
+  {% endif %}
+
+  {% if layout == '25-75' %}
+    {% if has_signpost_image %}
+      {% if has_image %}
+        {#- Signpost layouts with images are always full-width -#}
+        {% set has_full_width_image = true %}
+      {% endif %}
+    {% else %}
+      {#- 25-75 signpost must include a signpost image. -#}
+      {% set layout = 'fallback' %}
+    {% endif %}
+  {% endif %}
+
+  {% if layout == 'fallback' %}
+    {#- Fallback partially uses 50-50 layout, so set a fallback flag and set layout to 50-50 -#}
+    {% set is_fallback = true %}
+    {% set layout = '50-50' %}
+
+    {#- Restrict layout choices to make sure fallback looks consistent -#}
+    {% set has_full_width_image = false %}
+    {% set is_split_on_medium = false %}
+  {% endif %}
+
+  {#- Construct grid classes from params input -#}
+  {% set row_classes = [] %}
+  {% set col_classes = ['col', 'col'] %}
+  {% if layout in ['50-50', '25-75', '75-25'] %}
+    {#- Responsive breakpoint classes were requested -#}
+    {% if not is_split_on_medium %}
+      {{ row_classes.append('row--' + layout + '-on-large') or "" }}
+    {% else %}
+      {{ row_classes.append('row--' + layout) or "" }}
+    {% endif %}
+  {% endif %}
+
+  {%- macro _hero_title_block() -%}
+    {%- if has_full_width_image -%}
+      {#- On full-width-image, the h1 and h2 are in separate columns, so there must be no margin-bottom to keep h1 close to h2 on smaller screens  -#}
+      {% set title_class = "u-no-margin--bottom" %}
+    {%- endif -%}
+
+    {#- Only add a class attribute if needed -#}
+    <h1{% if title_class|trim|length > 0 %} class="{{ title_class }}"{% endif %}>
+      {{ title_text }}
+    </h1>
+  {%- endmacro %}
+
+  {%- macro _hero_subtitle_block() -%}
+    {% if has_subtitle %}
+      <h2>
+        {{ subtitle_text }}
+      </h2>
+    {% endif %}
+  {%- endmacro %}
+
+  {%- macro _hero_cta_block() -%}
+    {% if has_cta -%}
+      <div class="p-cta-block">
+        {{ cta_content }}
+      </div>
+    {% endif %}
+  {%- endmacro %}
+
+  {%- macro _hero_description_block() -%}
+    {% if has_description %}
+      <div class="p-section--shallow">
+        {{ description_content }}
+      </div>
+    {% endif %}
+  {%- endmacro %}
+
+  {%- macro _hero_signpost_image_block() -%}
+    {% if layout == '25-75' and has_signpost_image -%}
+      <div class="p-section--shallow">
+        {{ signpost_image_content }}
+      </div>
+    {% endif %}
+  {%- endmacro %}
+
+  <section class="p-section--hero">
+    {% if is_fallback -%}
+      <div class="row">
+        <div class="col">
+          <div class="p-section--shallow">
+            {{ _hero_title_block() -}}
+            {{ _hero_subtitle_block() -}}
+          </div>
+        </div>
+      </div>
+    {% endif -%}
+    <div class="{{ row_classes | join(' ') }}">
+      {%- if is_fallback -%}
+        <div class="{{ col_classes[0] }}">
+          {{- _hero_description_block() -}}
+          {{ _hero_cta_block() -}}
+        </div>
+        {% if has_image -%}
+          <div class="{{ col_classes[1] }}">
+            {{ image_content }}
+          </div>
+        {% endif -%}
+      {% elif has_full_width_image and not has_signpost_image %}
+        <div class="{{ col_classes[0] }}">
+          {{ _hero_title_block() }}
+        </div>
+        <div class="{{ col_classes[1] }}">
+          <div class="p-section--shallow">
+            {{- _hero_subtitle_block() -}}
+          </div>
+          {{- _hero_description_block() -}}
+          {{- _hero_cta_block() -}}
+        </div>
+        {{ image_content -}}
+      {% elif has_signpost_image %}
+        {#- 25/75 Signpost layout -#}
+        <div class="{{ col_classes[0] }}">
+          {{ _hero_signpost_image_block() -}}
+        </div>
+        <div class="{{ col_classes[1] }}">
+          <div class="p-section--shallow">
+            {{ _hero_title_block() -}}
+            {{ _hero_subtitle_block() -}}
+          </div>
+          {{- _hero_description_block() -}}
+          {{- _hero_cta_block() -}}
+        </div>
+        {% if has_image %}
+          {#- Signpost with image is always full-width, so set it after the columns -#}
+          {{- image_content }}
+        {% endif -%}
+      {% else %}
+        <div class="{{ col_classes[0] }}">
+          <div class="p-section--shallow">
+            {{ _hero_title_block() -}}
+            {{ _hero_subtitle_block() -}}
+          </div>
+          {{- _hero_description_block() -}}
+          {{- _hero_cta_block() -}}
+        </div>
+        {% if has_image -%}
+          <div class="{{ col_classes[1] }}">
+            {{ image_content }}
+          </div>
+        {% endif -%}
+      {% endif -%}
+    </div>
+  </section>
+{%- endmacro %}

package/templates/_macros/vf_tiered-list.jinja

@@ -0,0 +1,115 @@
+# Params
+# is_description_full_width_on_desktop: whether description has its own row on
+#   desktop vs. 50/50 split between title/description
+# is_list_full_width_on_tablet: whether list title/description each have their
+#   own row on tablet vs. 50/50 split between title/description
+# Slots
+# title: top-level title element
+# description: top-level description element
+# list_item_title_[1-25]: title element of each child list item
+# list_item_description_[1-25]: description element of each child list item
+# cta: CTA block element
+{% macro vf_tiered_list(
+  is_description_full_width_on_desktop=true,
+  is_list_full_width_on_tablet=true) -%}
+  {%- set title_content = caller('title') -%}
+  {%- set description_content = caller('description') -%}
+  {%- set has_description = description_content|trim|length > 0 -%}
+  {%- set cta_content = caller('cta') -%}
+  {%- set has_cta = cta_content|trim|length > 0 -%}
+
+  <div class="u-fixed-width">
+    <hr class="u-hide--small">
+
+    {% if has_description == true -%}
+      {%- if is_description_full_width_on_desktop == true -%}
+        <div class="u-fixed-width">
+          <div class="p-section--shallow">
+            {{ title_content }}
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-6 col-start-large-7">
+            {{ description_content }}
+          </div>
+        </div>
+      {%- else -%}
+        <div class="row">
+          <div class="col-6">
+            <div class="p-section--shallow">
+              {{ title_content }}
+            </div>
+          </div>
+
+          <div class="col-6">
+            {{ description_content }}
+          </div>
+        </div>
+      {%- endif -%}
+    {%- else -%}
+      <div class="u-fixed-width">
+        <div class="p-section--shallow">
+          {{ title_content }}
+        </div>
+      </div>
+    {%- endif %}
+
+    <div class="p-section--shallow">
+      {%- for number in range(1, 25) -%}
+        {%- set list_item_title_content = caller('list_item_title_' + number|string) -%}
+        {%- set has_title_content = list_item_title_content|trim|length > 0 -%}
+        {%- set list_item_description_content = caller('list_item_description_' + number|string) -%}
+        {%- set has_description_content = list_item_description_content|trim|length > 0 -%}
+
+        {#- Check to see if title/description content exist, since we're
+            iterating through 25 potential list items -#}
+        {%- if has_title_content and has_description_content -%}
+          {%- if is_list_full_width_on_tablet == true %}
+            <div class="row">
+              <div class="col-9 col-start-large-4">
+                <hr class="is-muted">
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-3 col-start-large-4">
+                {{ list_item_title_content }}
+              </div>
+
+              <div class="col-6">
+                {{ list_item_description_content }}
+              </div>
+            </div>
+          {%- else %}
+            <div class="row">
+              <div class="col-9 col-start-large-4">
+                <hr class="is-muted">
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-medium-3 col-3 col-start-large-4">
+                {{ list_item_title_content }}
+              </div>
+
+              <div class="col-medium-3 col-6">
+                {{ list_item_description_content }}
+              </div>
+            </div>
+          {%- endif -%}
+        {%- endif -%}
+      {% endfor %}
+    </div>
+
+    {% if has_cta == true -%}
+      <div class="p-cta-block">
+        <div class="row">
+          <div class="col-6 col-start-large-7">
+            {{ cta_content }}
+          </div>
+        </div>
+      </div>
+    {%- endif %}
+  </div>
+{%- endmacro %}