vanilla-framework 4.30.0 → 4.32.0

package/README.md

@@ -78,8 +78,8 @@ If you're looking to contribute to the Vanilla project itself, [start here](/CON
 
 Keep up to date with all new developments and upcoming changes with Vanilla.
 
-- Follow us on Twitter [@vanillaframewrk](https://twitter.com/vanillaframewrk)
 - Read our latest blog posts at [Ubuntu Blog](https://blog.ubuntu.com/topics/design)
+- Stay in touch with us on [Matrix](https://matrix.to/#/#vanilla:ubuntu.com)
 
 Code licensed [LGPLv3](https://opensource.org/license/lgpl-3-0/) by [Canonical Ltd](http://www.canonical.com/)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.30.0",
+  "version": "4.32.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

package/scss/_patterns_divided-section.scss

@@ -0,0 +1,8 @@
+@import 'settings';
+
+@mixin vf-p-divided-section {
+  .p-divided__heading::before,
+  .p-divided__block .p-stepped-list__title:before {
+    font-weight: $font-weight-bold;
+  }
+}

package/scss/_patterns_newsletter-signup.scss

@@ -0,0 +1,39 @@
+/*
+  @classreference
+  newsletter-signup:
+    Newsletter signup:
+      .p-newsletter-signup:
+        Main element of the newsletter signup component.
+      .p-newsletter-signup--25-75:
+        Modifier class for a 25-75 split layout.
+      .p-newsletter-signup--50-50:
+        Modifier class for a 50-50 split layout.
+      .p-newsletter-signup--2-col:
+        Modifier class for a 2 column layout.
+        Takes at most 2 columns on large and medium dimensions.
+        Takes full width  on small dimensions.
+      .p-newsletter-signup--4-col:
+        Modifier class for a 4 column layout.
+        Takes at most 4 columns on large and medium dimensions.
+        Takes full width  on small dimensions.
+*/
+
+@import 'settings';
+
+@mixin vf-p-newsletter-signup {
+  .p-newsletter-signup--2-col {
+    padding-bottom: 0;
+
+    @media (width < $breakpoint-small) {
+      padding-bottom: $spv--strip-regular * 0.5;
+    }
+  }
+
+  .p-newsletter-signup--4-col {
+    padding-bottom: 0;
+
+    @media (width < $breakpoint-large) {
+      padding-bottom: $spv--strip-regular * 0.5;
+    }
+  }
+}

package/scss/_vanilla.scss

@@ -12,6 +12,7 @@
 @import 'patterns_code-snippet';
 @import 'patterns_contextual-menu';
 @import 'patterns_cta';
+@import 'patterns_divided-section';
 @import 'patterns_divider';
 @import 'patterns_equal-height-row';
 @import 'patterns_form-help-text';
@@ -39,6 +40,7 @@
 @import 'patterns_notifications';
 @import 'patterns_pagination';
 @import 'patterns_pricing-block';
+@import 'patterns_newsletter-signup';
 @import 'patterns_pull-quotes';
 @import 'patterns_rule';
 @import 'patterns_search-and-filter';
@@ -108,6 +110,7 @@
   @include vf-p-code-snippet;
   @include vf-p-contextual-menu;
   @include vf-p-cta-block;
+  @include vf-p-divided-section;
   @include vf-p-divider;
   @include vf-p-equal-height-row;
   @include vf-p-form-help-text;
@@ -133,6 +136,7 @@
   @include vf-p-muted-heading;
   @include vf-p-navigation;
   @include vf-p-navigation-reduced;
+  @include vf-p-newsletter-signup;
   @include vf-p-notification;
   @include vf-p-pagination;
   @include vf-p-pricing-block;

package/templates/_macros/vf_basic-section.jinja

@@ -64,6 +64,23 @@
   </div>
 {% endmacro %}
 
+# notification_config
+# - type: "information" | "caution" | "negative" | "positive" (default is "information")
+# - title: The title of notification. Plain text.
+# - content: The content of the notification. Plain text.
+{% macro _basic_section_notification(notification_config={}) %}
+  {%- set type = (notification_config.get("type", "information")) | trim | lower -%}
+  {%- if type not in ["information", "caution", "negative", "positive"] -%}
+    {%- set type = "information" -%}
+  {%- endif -%}
+  <div class="p-notification--{{ type }}">
+    <div class="p-notification__content">
+      <h5 class="p-notification__title">{{ notification_config.get("title", "") }}</h5>
+      <p class="p-notification__message">{{ notification_config.get("content", "") }}</p>
+    </div>
+  </div>
+{% endmacro %}
+
 # list_config
 # - list_item_type: "bullet" | "tick" | "cross" | "number" | "" (default is "")
 # - list_items: A list of items to be displayed in the section.
@@ -234,9 +251,9 @@
 {% endmacro %}
 
 # item_config
-# - type: "description" | "image" | "video" | "list" | "code-block" | "logo-block" | "liked-logo-block" | "cta-block"
+# - type: "description" | "image" | "video" | "list" | "code-block" | "logo-block" | "liked-logo-block" | "cta-block" | "notification"
 # - item: The configuration for the item, which varies based on the type.
-{% macro _basic_section_item(item_config={}) %}
+{% macro basic_section_item(item_config={}) %}
   {%- set type = (item_config.get("type", "")) | trim -%}
 
   {%- if type == "description" -%}
@@ -255,9 +272,52 @@
     {{- _basic_section_linked_logo_block(item_config.get("item", {})) -}}
   {%- elif type == "cta-block" -%}
     {{- _basic_section_cta_block(item_config.get("item", {})) -}}
+  {%- elif type == "notification" -%}
+    {{- _basic_section_notification(item_config.get("item", {})) -}}
   {%- endif -%}
 {% endmacro %}
 
+{% macro basic_section_title(title={}) %}
+  <h2>
+    {%- if "link_attrs" in title and "href" in title.get("link_attrs", {}) -%}
+      <a
+        {% for attr, value in title.get("link_attrs", {}).items() -%}
+          {{ attr }}="{{ value }}"
+        {%- endfor -%}
+      >{{- title.get("text", "") -}}</a>
+    {%- else -%}
+      {{- title.get("text", "") -}}
+    {%- endif -%}
+  </h2>
+{%- endmacro -%}
+
+{%- macro basic_section_top_rule(top_rule_variant="default") -%}
+  {%- set top_rule_variant = top_rule_variant | trim | lower -%}
+  {%- if top_rule_variant not in ["default", "muted", "highlighted", "none"] -%}
+    {%- set top_rule_variant = "default" -%}
+  {%- endif -%}
+
+  {%- if top_rule_variant != "none" -%}
+    {%- set top_rule_classes = "p-rule" -%}
+    {%- if top_rule_variant != "default" -%}
+      {#-
+        p-rule--highlighted doesn't exist (use p-rule--highlight instead), but p-rule--muted does.
+        We keep the external API here consistent ("-ed" suffix) for simplicity but need to handle this internally.
+      -#}
+      {%- if top_rule_variant == "highlighted" -%}
+        {%- set top_rule_classes = "p-rule--highlight" -%}
+      {%- else -%}
+        {#- Other cases: just append the top_rule_variant to the p-rule class. -#}
+        {%- set top_rule_classes = top_rule_classes + "--" + top_rule_variant -%}
+      {%- endif -%}
+    {%- endif -%}
+  {%- endif -%}
+
+  {%- if top_rule_variant != "none" -%}
+    <hr class="{{- top_rule_classes -}}"/>
+  {%- endif -%}
+{%- endmacro -%}
+
 # Params
 # title: A dictionary with "text" and optional "link_attrs" (a dictionary of link attributes for the title).
 # subtitle: A dictionary with "text" (required) and optional "heading_level" (default is 4).
@@ -281,27 +341,6 @@
     {%- set padding = "default" -%}
   {%- endif -%}
 
-  {%- set top_rule_variant = top_rule_variant | trim -%}
-  {%- if top_rule_variant not in ["default", "muted", "highlighted", "none"] -%}
-    {%- set top_rule_variant = "default" -%}
-  {%- endif -%}
-
-  {%- if top_rule_variant != "none" -%}
-    {%- set top_rule_classes = "p-rule" -%}
-    {%- if top_rule_variant != "default" -%}
-      {#-
-        p-rule--highlighted doesn't exist (use p-rule--highlight instead), but p-rule--muted does.
-        We keep the external API here consistent ("-ed" suffix) for simplicity but need to handle this internally.
-      -#}
-      {%- if top_rule_variant == "highlighted" -%}
-        {%- set top_rule_classes = "p-rule--highlight" -%}
-      {%- else -%}
-        {#- Other cases: just append the top_rule_variant to the p-rule class. -#}
-        {%- set top_rule_classes = top_rule_classes + "--" + top_rule_variant -%}
-      {%- endif -%}
-    {%- endif -%}
-  {%- endif -%}
-
   {%- set padding_classes = "p-section--" + padding -%}
   {%- if padding == "default" -%}
   {%- set padding_classes = "p-section" -%}
@@ -319,24 +358,12 @@
 
 <section class="{{ padding_classes }}">
   <div class="grid-row--50-50{%- if not is_split_on_medium -%}-on-large{%- endif -%}">
-    {%- if top_rule_variant != "none" %}
-    <hr class="{{- top_rule_classes -}}"/>
-    {%- endif -%}
+    {{ basic_section_top_rule(top_rule_variant) }}
     <div class="grid-col">
       {%- if has_label -%}
         <h3 class="p-muted-heading u-no-padding--top u-no-margin--bottom">{{- label_text -}}</h3>
       {%- endif -%}
-      <h2>
-        {%- if "link_attrs" in title and "href" in title.get("link_attrs", {}) -%}
-          <a
-            {% for attr, value in title.get("link_attrs", {}).items() -%}
-              {{ attr }}="{{ value }}"
-            {%- endfor -%}
-          >{{- title.get("text", "") -}}</a>
-        {%- else -%}
-          {{- title.get("text", "") -}}
-        {%- endif -%}
-      </h2>
+      {{ basic_section_title(title) }}
     </div>
     <div class="grid-col">
       {%- if has_subtitle -%}
@@ -358,7 +385,7 @@
          {%- set item_classes = "" -%}
         {%- endif -%}
         <div{%- if item_classes | length > 0 %} class="{{ item_classes }}"{%- endif -%}>
-        {{- _basic_section_item(item) -}}
+        {{- basic_section_item(item) -}}
         </div>
       {%- endfor -%}
     </div>

package/templates/_macros/vf_divided-section.jinja

@@ -0,0 +1,77 @@
+# Params
+# - title: A dictionary with "text" and optional "link_attrs" (a dictionary of link attributes for the title).
+# - padding: Type of padding to apply to the pattern - "deep", "shallow", "default" (default is "default").
+# - is_split_on_medium: Boolean to indicate if the section should be split on medium screens (default is false).
+# - top_rule_variant: Type of HR to render at the top of the pattern. "default" | "muted" (default is "default").
+{% from "_macros/vf_basic-section.jinja" import basic_section_item, basic_section_title, basic_section_top_rule %}
+{% macro _get_item_padding_classes(item_config={}, isLastLoopItr=False, isLastBlockItr=False) %}
+  {%- set item_padding = (item_config.get("padding", "")) | trim -%}
+  {%- if item_padding not in ["shallow"] -%}
+    {%- set item_padding = "" -%}
+  {%- endif -%}
+  {%- set item_classes = "" -%}
+  {%- if item_padding | length > 0 -%}
+    {%- set item_classes = "p-section--" + item_padding -%}
+  {%- endif -%}
+  {#- Last item of the last block should not have any bottom padding, as per desgin requirement -#}
+  {%- if isLastLoopItr and isLastBlockItr -%}
+    {%- set item_classes = "" -%}
+  {%- endif -%}
+  {{ item_classes | trim }}
+{% endmacro %}
+{% macro vf_divided_section(title, blocks=[], padding="default", is_split_on_medium=False, top_rule_variant="default", caller=None) %}
+  {%- set padding = padding | trim -%}
+  {%- if padding not in ["deep", "shallow", "default"] -%}
+    {%- set padding = "default" -%}
+  {%- endif -%}
+  {%- set padding_classes = "p-section--" + padding -%}
+  {%- if padding == "default" -%}
+    {%- set padding_classes = "p-section" -%}
+  {%- endif -%}
+  <section class="{{ padding_classes }}">
+    <div class="grid-row--50-50{%- if not is_split_on_medium -%}-on-large{%- endif -%}">
+      {%- set description_block = blocks | selectattr("type", "equalto", "description-block") | first -%}
+      {%- set divided_blocks = blocks | selectattr("type", "equalto", "divided-block") | list -%}
+      {{ basic_section_top_rule(top_rule_variant) }}
+      <div class="grid-col">{{- basic_section_title(title) -}}</div>
+      <div class="grid-col">
+        {%- if description_block -%}
+          {%- for item in description_block.get("items",[]) -%}
+            {% set item_classes = _get_item_padding_classes(item, loop.last) %}
+            <div {%- if item_classes | trim | length > 0 %}
+                 class="{{ item_classes }}"
+                 {%- endif -%}>{{- basic_section_item(item) -}}</div>
+          {%- endfor -%}
+          {%- if divided_blocks | length > 0 -%}<hr class="p-rule--muted" />{%- endif %}
+        {%- endif -%}
+        {%- for block in divided_blocks -%}
+          {%- set outer_last = loop.last -%}
+          {%- set ns = namespace(list_element="ul", list_class="p-list") -%}
+          {%- if block.get("bullet_type") == "number" -%}
+            {%- set ns.list_element = "ol" -%}
+            {%- set ns.list_class = "p-stepped-list" -%}
+          {%- endif -%}
+          <{{ ns.list_element }} class="p-divided__block {{ ns.list_class }} u-no-padding">
+          {%- for item in block.get("items",[]) -%}
+            {%- set list_bullet_type = "has-bullet" if block.bullet_type == "bullet" else "is-ticked" if block.bullet_type == "status" -%}
+            <li class="p-divided__heading u-no-padding--bottom {{ list_bullet_type }}{% if ns.list_class == 'p-stepped-list' %} p-stepped-list__item{% else %} p-list__item{% endif %}">
+              <div class="{% if not loop.last %}p-section--shallow{% endif %}{% if ns.list_class == 'p-stepped-list' %} p-stepped-list__title{% endif %}">
+                {%- if item.title_text -%}
+                  <h3 class="p-heading--5 u-no-padding">{{ item.title_text }}</h3>
+                {%- endif -%}
+                {%- for content in item.contents -%}
+                  {%- set item_classes = _get_item_padding_classes(content, loop.last, outer_last) -%}
+                  <div {%- if item_classes | trim | length > 0 %}
+                       class="{{ item_classes }}"
+                       {%- endif -%}>{{- basic_section_item(content) -}}</div>
+                {%- endfor -%}
+              </div>
+            </li>
+            {% if not loop.last %}<hr class="p-rule--muted" />{% endif %}
+          {%- endfor -%}
+          </ {{ ns.list_element }}>
+        {%- endfor -%}
+      </div>
+    </div>
+  </section>
+{% endmacro %}

package/templates/_macros/vf_newsletter-signup.jinja

@@ -0,0 +1,160 @@
+{#
+    All Params:
+      @param title_text: H2 title text
+      @param input_label: Label for the input field
+      @param checkbox_id: Name for the checkbox field, used for agreeing to something before submitting the form. This may vary based on the backend used to collect form responses.
+      @param checkbox_label: Label for the checkbox
+      @param layout: Layout variant for the section. Options are "50-50", "25-75", "2-col", and "4-col". Default is "25-75".
+      @param form_id: Form ID
+      @param form_action: Action URL for the form submission, typically the form endpoint.
+      @param return_url: URL to return to after form submission
+      @param top_rule_variant (string) (optional): Variant of the top rule, default is "default". Options are "muted", "highlighted", "default", "none".
+
+    All Slots:
+      @slot description: Description text, one or more paragraphs
+      @slot addendum: Additional content to include in the form, such as a disclaimer or additional information
+      @slot hidden_fields: Additional hidden fields to include in the form
+#}
+{%- macro vf_newsletter_signup(form_id, return_url, title_text, form_action="https://ubuntu.com/marketo/submit", input_label="Work email", checkbox_id="canonicalUpdatesOptIn", checkbox_label="I agree to receive information about Canonical's products and services.", layout="25-75", top_rule_variant="default", caller=None) -%}
+  {% set layout = layout | trim %}
+  {% if layout not in ['50-50', '25-75', '2-col', '4-col'] %}
+    {% set layout = "25-75" %}
+  {% endif %}
+  {% set top_rule_variant = top_rule_variant | trim %}
+  {% if top_rule_variant not in ['muted', 'highlighted', 'default', 'none'] %}
+    {% set top_rule_variant = "default" %}
+  {% endif %}
+  {% set description = caller('description') %}
+  {% set addendum = caller('addendum') %}
+  {% set hidden_fields = caller('hidden_fields') %}
+  {% set is_section_level = layout in ['50-50', '25-75'] %}
+  {% set is_grid_level = layout in ['2-col', '4-col'] %}
+  {% set heading_level = 'h2' if is_section_level else 'h3' %}
+  {%- macro _top_rule() -%}
+    {% if top_rule_variant != 'none' %}
+      {% set rule_class = 'muted' if top_rule_variant == 'muted' else 'highlight' if top_rule_variant == 'highlighted' %}
+      <hr class="p-rule{% if top_rule_variant != 'default' %}--{{ rule_class }}{% endif %} is-fixed-width" />
+    {% endif %}
+  {%- endmacro -%}
+  {%- if is_section_level -%}
+    <section class="p-section">
+    {%- endif -%}
+    {{ _top_rule() | safe }}
+    <div class="grid-row--{% if is_section_level %}{{ layout }}-on-large{% else %}25-25-25-25{% endif %}">
+      {% if is_grid_level %}
+        {%- set upper_limit = 4 if layout == '2-col' else 3 -%}
+        {%- for number in range(1, upper_limit) -%}
+          {%- set col_content = caller('col_' + number|string) -%}
+          <div class="grid-col">{{ col_content | safe }}</div>
+        {%- endfor -%}
+      {% endif %}
+      <div class="grid-col{% if layout == '4-col' %}-4{% endif %} {% if is_grid_level %}p-newsletter-signup--{{ layout }}{% endif %}">
+        {%- if is_grid_level -%}
+          <hr class="p-rule--muted u-hide--large {% if layout == '2-col' %}u-hide--medium{% endif %}" />
+        {%- endif -%}
+        <{{ heading_level }}>{{ title_text }}</{{ heading_level }}>
+        {% if is_section_level %}</div>{% endif %}
+      {% if is_section_level %}<div class="grid-col">{% endif %}
+        {{ description | safe }}
+        <form action="{{ form_action }}" method="post" id="{{ form_id }}">
+          <label class="is-required" for="email">{{ input_label }}:</label>
+          <input required
+                 id="email"
+                 name="email"
+                 maxlength="255"
+                 type="email"
+                 pattern="^[^ ]+@[^ ]+\.[a-z]{2,26}$"
+                 required="required" />
+          <label class="p-checkbox is-required">
+            <input required
+                   class="p-checkbox__input"
+                   value="yes"
+                   aria-labelledby="{{ checkbox_id }}"
+                   name="{{ checkbox_id }}"
+                   type="checkbox" />
+            <span class="p-checkbox__label" id="{{ checkbox_id }}">{{ checkbox_label }}</span>
+          </label>
+          {% if addendum %}
+            {{ addendum | safe }}
+          {% else %}
+            <p>
+              By submitting this form, I confirm that I have read and agree to <a href="https://ubuntu.com/legal/terms-and-policies/privacy-policy">Canonical's Privacy Policy</a>.
+            </p>
+          {% endif %}
+          <button type="submit" class="u-no-margin--bottom">Sign up</button>
+          {% if hidden_fields %}
+            {{ hidden_fields | safe }}
+          {% else %}
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   name="returnURL"
+                   value="{{ return_url }}" />
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   name="formid"
+                   value="{{ form_id }}" />
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   name="productContext"
+                   id="product-context"
+                   value="" />
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   name="utm_campaign"
+                   id="utm_campaign"
+                   value="" />
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   name="utm_medium"
+                   id="utm_medium"
+                   value="" />
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   name="utm_source"
+                   id="utm_source"
+                   value="" />
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   name="utm_content"
+                   id="utm_content"
+                   value="" />
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   name="utm_term"
+                   id="utm_term"
+                   value="" />
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   name="GCLID__c"
+                   id="GCLID__c"
+                   value="" />
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   name="Facebook_Click_ID__c"
+                   id="Facebook_Click_ID__c"
+                   value="" />
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   id="preferredLanguage"
+                   name="preferredLanguage"
+                   maxlength="255"
+                   value="" />
+          {% endif %}
+        </form>
+      </div>
+    </div>
+    {%- if is_section_level -%}
+    </section>
+  {%- endif -%}
+{%- endmacro -%}

package/templates/_macros/vf_text-spotlight.jinja

@@ -3,9 +3,14 @@
       @param title_text: H2 title text
       @param list_items (Array<string>)
       An array of HTML strings to be rendered
+      @param item_heading_level: Level of the heading to use, defaults to 2. Can be 2, or 4.
 #}
-{%- macro vf_text_spotlight(title_text, list_items=[], caller=None) -%}
+{%- macro vf_text_spotlight(title_text, item_heading_level=2, list_items=[], caller=None) -%}
   {% set has_list = list_items | length >= 2 and list_items | length <= 7 %}
+  {% set item_heading_level = item_heading_level | trim %}
+  {%- if item_heading_level not in [2, 4] -%}
+    {%- set item_heading_level = 2 -%}
+  {%- endif -%}
   <section class="p-section">
     <hr class="p-rule is-fixed-width" />
     <div class="grid-row--25-75-on-large">
@@ -15,7 +20,7 @@
       <div class="grid-col">
         {%- if has_list -%}
           {%- for list_item in list_items -%}
-            <p class="p-heading--2">{{- list_item -}}</p>
+            <p class="p-heading--{{ item_heading_level }}">{{- list_item -}}</p>
             {%- if not loop.last %}<hr class="p-rule--muted" />{%- endif %}
           {%- endfor -%}
         {%- else -%}