Update rich vertical list per docn standards

canonical · Oct 16, 2024 · 070c4e5 · 070c4e5
1 parent e6f4724
commit 070c4e5
Show file tree

Hide file tree

Showing 19 changed files with 322 additions and 146 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.17.1",
+  "version": "4.18.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

diff --git a/releases.yml b/releases.yml
@@ -1,3 +1,9 @@
+- version: 4.18.0
+  features:
+    - component: Rich vertical list
+      url: /docs/patterns/rich-list-vertical
+      status: New
+      notes: We've introduced a new rich list pattern.
 - version: 4.17.0
   features:
     - component: Tiered list
@@ -50,10 +56,6 @@
       url: /docs/patterns/list-tree
       status: Updated
       notes: We've updated the list tree to be more accessible and modern. We recommend you update your list tree markup and scripts to match the new structure. However, the legacy structure is still supported.
-    - component: Rich list / Vertical
-      url: /docs/patterns/rich-list#vertical
-      status: New
-      notes: We've introduced a new rich list pattern.
 - version: 4.15.0
   features:
     - component: CTA Block

diff --git a/side-navigation.yaml b/side-navigation.yaml
@@ -113,8 +113,8 @@
   subheadings:
     - title: Hero
       url: /docs/patterns/hero
-    - title: Rich list
-      url: /docs/patterns/rich-list
+    - title: Rich list (vertical)
+      url: /docs/patterns/rich-list-vertical
     - title: Tiered list
       url: /docs/patterns/tiered-list
 - heading: Utilities

diff --git a/templates/_macros/vf_rich-vertical-list.jinja b/templates/_macros/vf_rich-vertical-list.jinja
@@ -5,7 +5,7 @@
 # Slots
 # description: Paragraph-style description content
 # logo_section Logo section block
-# list_item_[1-15]: List item content, assumed to be li.p-list__item
+# list_item_[1-7]: List item content, assumed to be li.p-list__item
 # image (required)
 {% macro vf_rich_vertical_list(
   title_text,
@@ -20,7 +20,7 @@
   {% set has_cta = cta_content|trim|length > 0 %}
   {% set has_list = caller('list_item_1')|trim|length > 0 %}
   {% set image_content = caller('image') %}
-  {% set max_list_items = 15 %}
+  {% set max_list_items = 7 %}
 
   {% set list_item_tick_style=list_item_tick_style|trim|lower %}
   {% if list_item_tick_style|length > 0 and list_item_tick_style not in ['bullet', 'tick', 'number'] %}
@@ -54,13 +54,13 @@
   {% endif %}
 
   {%- macro _text_column_contents(list_items) %}
-    <!--Mandatory title-->
+    {#- Mandatory title -#}
     <div class="p-section--shallow">
       <h2>{{ title_text }}</h2>
     </div>
 
     {%- if has_logo_section %}
-      <!--Optional logo section-->
+      {#- Optional logo section -#}
       <div class="p-section--shallow">
         <div class="u-fixed-width">
         {{- logo_section_content -}}
@@ -69,14 +69,14 @@
     {%- endif -%}
 
     {%- if has_description %}
-      <!--Optional description-->
+      {#- Optional description -#}
       <div class="p-section--shallow">
         {{- description_content -}}
       </div>
     {%- endif -%}
 
     {%- if list_items|length > 0 %}
-      <!--Optional list-->
+      {#- Optional list -#}
       <{{ list_element_type }} class="p-list--divided">
        {% for list_item in list_items %}
          <li class="p-list__item {{ list_item_tick_class }}">
@@ -87,7 +87,7 @@
     {%- endif -%}
 
     {%- if has_cta %}
-      <!--Optional CTA block-->
+      {#- Optional CTA block -#}
       <div class="p-cta-block">
         {{- cta_content -}}
       </div>
@@ -96,7 +96,7 @@
   {%- endmacro -%}
 
   {%- macro _image_column_contents() %}
-    <!--Mandatory image-->
+    {#- Mandatory image -#}
     <div class="p-section--shallow">
       {{- image_content -}}
     </div>
@@ -113,7 +113,7 @@
           {{- _image_column_contents() -}}
         </div>
       {%- else -%}
-        <!--For flipped layout, place the image contents in the first column and the text in the second column-->
+        {#- For flipped layout, place the image contents in the first column and the text in the second column -#}
         <div class="col">
           {{- _image_column_contents() -}}
         </div>

diff --git a/templates/docs/examples/patterns/code-snippet/combined.html b/templates/docs/examples/patterns/code-snippet/combined.html
@@ -11,7 +11,7 @@
 <section>{% include 'docs/examples/patterns/code-snippet/dropdown-multiple.html' %}</section>
 <section>{% include 'docs/examples/patterns/code-snippet/icon.html' %}</section>
 <section>{% include 'docs/examples/patterns/code-snippet/is-bordered.html' %}</section>
-<section>{% include 'docs/examples/patterns/code-snippet/ordered.html' %}</section>
+<section>{% include 'docs/examples/patterns/code-snippet/numbered.html' %}</section>
 <section>{% include 'docs/examples/patterns/code-snippet/prism.html' %}</section>
 <section>{% include 'docs/examples/patterns/code-snippet/wrapping.html' %}</section>
 {% endwith %}

diff --git a/...rns/rich-list/vertical/_logo-section.html → ...rns/rich-list-vertical/_logo-section.html b/...rns/rich-list/vertical/_logo-section.html → ...rns/rich-list-vertical/_logo-section.html
@@ -1,4 +1,4 @@
-{# Common logo section block used by vertical rich list examples #}
+{#- Common logo section block used by vertical rich list examples -#}
 <div class="p-logo-section">
   <div class="p-logo-section__items">
     <div class="p-logo-section__item">

diff --git a/.../rich-list/vertical/bulleted-flipped.html → .../rich-list-vertical/bulleted-flipped.html b/.../rich-list/vertical/bulleted-flipped.html → .../rich-list-vertical/bulleted-flipped.html
@@ -16,7 +16,7 @@
       </p>
     {%- endif -%}
     {%- if slot == 'logo_section' -%}
-      {% include 'docs/examples/patterns/rich-list/vertical/_logo-section.html' %}
+      {% include 'docs/examples/patterns/rich-list-vertical/_logo-section.html' %}
     {%- endif -%}
     {%- if slot == 'list_item_1' -%}
       No mandatory subscriptions for Ubuntu
@@ -44,17 +44,18 @@
     {%- if slot == 'list_item_7' -%}
       <a href="https://ubuntu.com/openstack/pricing-calculator">TCO analysis of Open Infra</a>
     {%- endif -%}
-    {%- if slot == 'list_item_8' -%}
-      <a href="https://ubuntu.com/engage/cloud-economics">451 study on private/public cloud cost</a>
-    {%- endif -%}
     {%- if slot == 'cta' -%}
       <a href="#" class="p-button">Learn more</a>
       <a href="#">Contact us &rsaquo;</a>
     {%- endif -%}
     {%- if slot == 'image' -%}
-      <div class="p-image-container--2-3 is-cover">
+      <div class="p-image-container--2-3 is-cover u-hide--small u-hide--medium">
         <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/e0ddbf8d-factory_floor_tall.jpeg"
-             alt="Factory floor"/>
+            alt="Factory floor"/>
+      </div>
+      <div class="p-image-container--3-2-on-medium p-image-container--16-9-on-small is-cover u-hide--large">
+        <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/0dd5ddc8-factory_floor.jpeg"
+            alt="Factory floor"/>
       </div>
     {%- endif -%}
   {% endcall -%}

diff --git a/...patterns/rich-list/vertical/bulleted.html → ...patterns/rich-list-vertical/bulleted.html b/...patterns/rich-list/vertical/bulleted.html → ...patterns/rich-list-vertical/bulleted.html
@@ -1,7 +1,7 @@
 {% extends "_layouts/examples.html" %}
 {% from "_macros/vf_rich-vertical-list.jinja" import vf_rich_vertical_list %}
 
-{% block title %}Rich list / Vertical / Bulleted / Default{% endblock %}
+{% block title %}Rich list / Vertical / Bulleted{% endblock %}
 {% block standalone_css %}patterns_all{% endblock %}
 {% block content %}
   {% call(slot) vf_rich_vertical_list(
@@ -15,7 +15,7 @@
       </p>
     {%- endif -%}
     {%- if slot == 'logo_section' -%}
-      {% include 'docs/examples/patterns/rich-list/vertical/_logo-section.html' %}
+      {% include 'docs/examples/patterns/rich-list-vertical/_logo-section.html' %}
     {%- endif -%}
     {%- if slot == 'list_item_1' -%}
       No mandatory subscriptions for Ubuntu
@@ -43,17 +43,18 @@
     {%- if slot == 'list_item_7' -%}
       <a href="https://ubuntu.com/openstack/pricing-calculator">TCO analysis of Open Infra</a>
     {%- endif -%}
-    {%- if slot == 'list_item_8' -%}
-      <a href="https://ubuntu.com/engage/cloud-economics">451 study on private/public cloud cost</a>
-    {%- endif -%}
     {%- if slot == 'cta' -%}
       <a href="#" class="p-button">Learn more</a>
       <a href="#">Contact us &rsaquo;</a>
     {%- endif -%}
     {%- if slot == 'image' -%}
-      <div class="p-image-container--2-3 is-cover">
+      <div class="p-image-container--2-3 is-cover u-hide--small u-hide--medium">
         <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/e0ddbf8d-factory_floor_tall.jpeg"
-             alt="Factory floor"/>
+            alt="Factory floor"/>
+      </div>
+      <div class="p-image-container--3-2-on-medium p-image-container--16-9-on-small is-cover u-hide--large">
+        <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/0dd5ddc8-factory_floor.jpeg"
+            alt="Factory floor"/>
       </div>
     {%- endif -%}
   {% endcall -%}

diff --git a/.../patterns/rich-list/vertical/default.html → ...ich-list-vertical/bulletless-flipped.html b/.../patterns/rich-list/vertical/default.html → ...ich-list-vertical/bulletless-flipped.html
@@ -1,11 +1,12 @@
 {% extends "_layouts/examples.html" %}
 {% from "_macros/vf_rich-vertical-list.jinja" import vf_rich_vertical_list %}
 
-{% block title %}Rich list / Vertical / Bulleted / Default{% endblock %}
+{% block title %}Rich list / Vertical / Flipped{% endblock %}
 {% block standalone_css %}patterns_all{% endblock %}
 {% block content %}
   {% call(slot) vf_rich_vertical_list(
-    title_text='H2 - this can take up to two lines, but best to stick to one line.'
+    title_text='H2 - this can take up to two lines, but best to stick to one line.',
+    is_flipped=true
   ) -%}
     {%- if slot == 'description' -%}
       <p>
@@ -14,7 +15,7 @@
       </p>
     {%- endif -%}
     {%- if slot == 'logo_section' -%}
-      {% include 'docs/examples/patterns/rich-list/vertical/_logo-section.html' %}
+      {% include 'docs/examples/patterns/rich-list-vertical/_logo-section.html' %}
     {%- endif -%}
     {%- if slot == 'list_item_1' -%}
       No mandatory subscriptions for Ubuntu
@@ -42,17 +43,18 @@
     {%- if slot == 'list_item_7' -%}
       <a href="https://ubuntu.com/openstack/pricing-calculator">TCO analysis of Open Infra</a>
     {%- endif -%}
-    {%- if slot == 'list_item_8' -%}
-      <a href="https://ubuntu.com/engage/cloud-economics">451 study on private/public cloud cost</a>
-    {%- endif -%}
     {%- if slot == 'cta' -%}
       <a href="#" class="p-button">Learn more</a>
       <a href="#">Contact us &rsaquo;</a>
     {%- endif -%}
     {%- if slot == 'image' -%}
-      <div class="p-image-container--2-3 is-cover">
+      <div class="p-image-container--2-3 is-cover u-hide--small u-hide--medium">
         <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/e0ddbf8d-factory_floor_tall.jpeg"
-             alt="Factory floor"/>
+            alt="Factory floor"/>
+      </div>
+      <div class="p-image-container--3-2-on-medium p-image-container--16-9-on-small is-cover u-hide--large">
+        <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/0dd5ddc8-factory_floor.jpeg"
+            alt="Factory floor"/>
       </div>
     {%- endif -%}
   {% endcall -%}

diff --git a/.../patterns/rich-list/vertical/flipped.html → ...tterns/rich-list-vertical/bulletless.html b/.../patterns/rich-list/vertical/flipped.html → ...tterns/rich-list-vertical/bulletless.html
@@ -1,12 +1,11 @@
 {% extends "_layouts/examples.html" %}
 {% from "_macros/vf_rich-vertical-list.jinja" import vf_rich_vertical_list %}
 
-{% block title %}Rich list / Vertical / Default{% endblock %}
+{% block title %}Rich list / Vertical{% endblock %}
 {% block standalone_css %}patterns_all{% endblock %}
 {% block content %}
   {% call(slot) vf_rich_vertical_list(
     title_text='H2 - this can take up to two lines, but best to stick to one line.',
-    is_flipped=true
   ) -%}
     {%- if slot == 'description' -%}
       <p>
@@ -15,7 +14,7 @@
       </p>
     {%- endif -%}
     {%- if slot == 'logo_section' -%}
-      {% include 'docs/examples/patterns/rich-list/vertical/_logo-section.html' %}
+      {% include 'docs/examples/patterns/rich-list-vertical/_logo-section.html' %}
     {%- endif -%}
     {%- if slot == 'list_item_1' -%}
       No mandatory subscriptions for Ubuntu
@@ -43,17 +42,18 @@
     {%- if slot == 'list_item_7' -%}
       <a href="https://ubuntu.com/openstack/pricing-calculator">TCO analysis of Open Infra</a>
     {%- endif -%}
-    {%- if slot == 'list_item_8' -%}
-      <a href="https://ubuntu.com/engage/cloud-economics">451 study on private/public cloud cost</a>
-    {%- endif -%}
     {%- if slot == 'cta' -%}
       <a href="#" class="p-button">Learn more</a>
       <a href="#">Contact us &rsaquo;</a>
     {%- endif -%}
     {%- if slot == 'image' -%}
-      <div class="p-image-container--2-3 is-cover">
+      <div class="p-image-container--2-3 is-cover u-hide--small u-hide--medium">
         <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/e0ddbf8d-factory_floor_tall.jpeg"
-             alt="Factory floor"/>
+            alt="Factory floor"/>
+      </div>
+      <div class="p-image-container--3-2-on-medium p-image-container--16-9-on-small is-cover u-hide--large">
+        <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/0dd5ddc8-factory_floor.jpeg"
+            alt="Factory floor"/>
       </div>
     {%- endif -%}
   {% endcall -%}

diff --git a/templates/docs/examples/patterns/rich-list-vertical/combined.html b/templates/docs/examples/patterns/rich-list-vertical/combined.html
@@ -0,0 +1,18 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Rich list / Combined{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+  {% with is_combined = true %}
+    <section>{% include 'docs/examples/patterns/rich-list-vertical/bulletless.html' %}</section>
+    <section>{% include 'docs/examples/patterns/rich-list-vertical/bulletless-flipped.html' %}</section>
+    <section>{% include 'docs/examples/patterns/rich-list-vertical/ticked.html' %}</section>
+    <section>{% include 'docs/examples/patterns/rich-list-vertical/ticked-flipped.html' %}</section>
+    <section>{% include 'docs/examples/patterns/rich-list-vertical/bulleted.html' %}</section>
+    <section>{% include 'docs/examples/patterns/rich-list-vertical/bulleted-flipped.html' %}</section>
+    <section>{% include 'docs/examples/patterns/rich-list-vertical/ordered.html' %}</section>
+    <section>{% include 'docs/examples/patterns/rich-list-vertical/ordered-flipped.html' %}</section>
+    <section>{% include 'docs/examples/patterns/rich-list-vertical/minimal.html' %}</section>
+  {% endwith %}
+{% endblock %}
diff --git a/.../patterns/rich-list/vertical/minimal.html → .../patterns/rich-list-vertical/minimal.html b/.../patterns/rich-list/vertical/minimal.html → .../patterns/rich-list-vertical/minimal.html
@@ -14,8 +14,13 @@
       </p>
     {%- endif -%}
     {%- if slot == 'image' -%}
-      <div class="p-image-container--2-3 is-cover">
-        <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/e0ddbf8d-factory_floor_tall.jpeg" alt="Factory floor" />
+      <div class="p-image-container--2-3 is-cover u-hide--small u-hide--medium">
+        <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/e0ddbf8d-factory_floor_tall.jpeg"
+            alt="Factory floor"/>
+      </div>
+      <div class="p-image-container--3-2-on-medium p-image-container--16-9-on-small is-cover u-hide--large">
+        <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/0dd5ddc8-factory_floor.jpeg"
+            alt="Factory floor"/>
       </div>
     {%- endif -%}
   {% endcall -%}

diff --git a/...s/rich-list/vertical/ordered-flipped.html → ...s/rich-list-vertical/ordered-flipped.html b/...s/rich-list/vertical/ordered-flipped.html → ...s/rich-list-vertical/ordered-flipped.html
@@ -16,7 +16,7 @@
       </p>
     {%- endif -%}
     {%- if slot == 'logo_section' -%}
-      {% include 'docs/examples/patterns/rich-list/vertical/_logo-section.html' %}
+      {% include 'docs/examples/patterns/rich-list-vertical/_logo-section.html' %}
     {%- endif -%}
     {%- if slot == 'list_item_1' -%}
       No mandatory subscriptions for Ubuntu
@@ -44,17 +44,18 @@
     {%- if slot == 'list_item_7' -%}
       <a href="https://ubuntu.com/openstack/pricing-calculator">TCO analysis of Open Infra</a>
     {%- endif -%}
-    {%- if slot == 'list_item_8' -%}
-      <a href="https://ubuntu.com/engage/cloud-economics">451 study on private/public cloud cost</a>
-    {%- endif -%}
     {%- if slot == 'cta' -%}
       <a href="#" class="p-button">Learn more</a>
       <a href="#">Contact us &rsaquo;</a>
     {%- endif -%}
     {%- if slot == 'image' -%}
-      <div class="p-image-container--2-3 is-cover">
+      <div class="p-image-container--2-3 is-cover u-hide--small u-hide--medium">
         <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/e0ddbf8d-factory_floor_tall.jpeg"
-             alt="Factory floor"/>
+            alt="Factory floor"/>
+      </div>
+      <div class="p-image-container--3-2-on-medium p-image-container--16-9-on-small is-cover u-hide--large">
+        <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/0dd5ddc8-factory_floor.jpeg"
+            alt="Factory floor"/>
       </div>
     {%- endif -%}
   {% endcall -%}