vanilla-framework 4.31.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.31.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/_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';
@@ -109,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;

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 %}