Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Rich vertical list pattern #5306

Merged
merged 5 commits into from
Oct 24, 2024
Merged

Feat: Rich vertical list pattern #5306

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
584db99
Implement rich vertical list
jmuzina Oct 16, 2024
923e0b9
Update rich vertical list per docn standards
jmuzina Oct 16, 2024
70d16ae
update release notes
jmuzina Oct 23, 2024
f5218cf
Add patterns wip notice to rich vertical list
jmuzina Oct 23, 2024
2ae2557
remove `_logo-section` partial, as it is not rendered properly in jin…
jmuzina Oct 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions releases.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@
url: /docs/base/forms#dense-form-elements
status: Updated
notes: We've added support for <code>.is-dense</code> to form validation messages and help text.
- component: Rich vertical list
url: /docs/patterns/rich-list-vertical
status: New
notes: We've introduced a new rich vertical list pattern.
- version: 4.17.0
features:
- component: Tiered list
Expand Down
2 changes: 2 additions & 0 deletions side-navigation.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,8 @@
subheadings:
- title: Hero
url: /docs/patterns/hero
- title: Rich list (vertical)
url: /docs/patterns/rich-list-vertical
- title: Tiered list
url: /docs/patterns/tiered-list
- title: Quote Wrapper
Expand Down
127 changes: 127 additions & 0 deletions templates/_macros/vf_rich-vertical-list.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
# Params
# title_text (string) (required): Title of the rich vertical list
# list_item_tick_style (string) (optional): Type of list item tick styling. Options are "bullet", "tick", "number".
# is_flipped (boolean) (optional): Whether the list items are flipped so image is on the left and the text is on the right. Defaults to false.
# Slots
# description: Paragraph-style description content
# logo_section Logo section block
# list_item_[1-7]: List item content, assumed to be li.p-list__item
# image (required)
{% macro vf_rich_vertical_list(
title_text,
list_item_tick_style="",
is_flipped=false
) -%}
{% set description_content = caller('description') %}
{% set has_description = description_content|trim|length > 0 %}
{% set logo_section_content = caller('logo_section') %}
{% set has_logo_section = logo_section_content|trim|length > 0 %}
{% set cta_content = caller('cta') %}
{% 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 = 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'] %}
{% set list_item_tick_style = '' %}
{% endif %}

{% if list_item_tick_style == "bullet" %}
{% set list_item_tick_class = "has-bullet" %}
{% elif list_item_tick_style == "tick" %}
{% set list_item_tick_class = "is-ticked" %}
{% endif %}

{% set list_element_type = "ul" %}
{% if list_item_tick_style == "number" %}
{% set list_element_type = "ol" %}
{% endif %}

{#-
Construct list of list items using caller in the top-level macro
The _text_column_contents macro will not have access to the caller block, so we need to extract the list items here.
-#}
{% set list_items = [] %}
{% if has_list %}
{% for list_item_index in range(1, max_list_items + 1) %}
{% set list_item_content = caller('list_item_' + list_item_index|string) %}
{% set has_list_item_content = list_item_content|trim|length > 0 %}
{% if has_list_item_content %}
{{ list_items.append(list_item_content) or ""}}
{% endif %}
{% endfor %}
{% endif %}

{%- macro _text_column_contents(list_items) %}
{#- Mandatory title -#}
<div class="p-section--shallow">
<h2>{{ title_text }}</h2>
</div>

{%- if has_logo_section %}
{#- Optional logo section -#}
<div class="p-section--shallow">
<div class="u-fixed-width">
{{- logo_section_content -}}
</div>
</div>
{%- endif -%}

{%- if has_description %}
{#- Optional description -#}
<div class="p-section--shallow">
{{- description_content -}}
</div>
{%- endif -%}

{%- if list_items|length > 0 %}
{#- Optional list -#}
<{{ list_element_type }} class="p-list--divided">
{% for list_item in list_items %}
<li class="p-list__item {{ list_item_tick_class }}">
{{- list_item -}}
</li>
{% endfor %}
</{{ list_element_type }}>
{%- endif -%}

{%- if has_cta %}
{#- Optional CTA block -#}
<div class="p-cta-block">
{{- cta_content -}}
</div>
{%- endif -%}

{%- endmacro -%}

{%- macro _image_column_contents() %}
{#- Mandatory image -#}
<div class="p-section--shallow">
{{- image_content -}}
</div>
{%- endmacro -%}

<div class="p-section">
<div class="row--50-50-on-large">
<hr>
{% if not is_flipped -%}
<div class="col">
{{- _text_column_contents(list_items) -}}
</div>
<div class="col">
{{- _image_column_contents() -}}
</div>
{%- else -%}
{#- 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>
<div class="col">
{{- _text_column_contents(list_items) -}}
</div>
{%- endif -%}
</div>
</div>

{%- endmacro %}
86 changes: 86 additions & 0 deletions templates/docs/examples/patterns/rich-list-vertical/bulleted-flipped.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
{% extends "_layouts/examples.html" %}
{% from "_macros/vf_rich-vertical-list.jinja" import vf_rich_vertical_list %}

{% block title %}Rich list / Vertical / Bulleted / 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.',
list_item_tick_style="bullet",
is_flipped=true
) -%}
{%- if slot == 'description' -%}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.
</p>
{%- endif -%}
{%- if slot == 'logo_section' -%}
<div class="p-logo-section">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e44aa9b2-nvidia-logo.png" alt="NVIDIA logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e4bbd168-amd-logo.png" alt="AMD logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/b0404df4-hp-logo.png" alt="HP logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/90161e97-dell-logo.png" alt="Dell logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/35549e17-lenovo-logo.png" alt="Lenovo logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
</div>
</div>
{%- endif -%}
{%- if slot == 'list_item_1' -%}
No mandatory subscriptions for Ubuntu
{%- endif -%}
{%- if slot == 'list_item_2' -%}
<a href="https://ubuntu.com/security">Security</a>, <a href="https://ubuntu.com/support">Support</a>, and fully managed
<a href="https://ubuntu.com/openstack/managed">Infra</a> and
<a href="https://ubuntu.com/managed/apps">Apps</a>
{%- endif -%}
{%- if slot == 'list_item_3' -%}
<a href="https://ubuntu.com/cloud/public-cloud">Public cloud</a>,
<a href="https://ubuntu.com/download/server">Data centre</a>,
<a href="https://microk8s.io/">Edge cluster</a> and
<a href="https://ubuntu.com/appliance">Appliances</a>
{%- endif -%}
{%- if slot == 'list_item_4' -%}
<a href="https://ubuntu.com/about/release-cycle">Long term maintenance commitment</a>
{%- endif -%}
{%- if slot == 'list_item_5' -%}
Transparent pricing for enterprise and ISV
{%- endif -%}
{%- if slot == 'list_item_6' -%}
<a href="https://ubuntu.com/engage/from-vmware-to-open-source">Switch from VMware to OpenStack</a>
{%- endif -%}
{%- if slot == 'list_item_7' -%}
<a href="https://ubuntu.com/openstack/pricing-calculator">TCO analysis of Open Infra</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 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 -%}
{% endblock %}
85 changes: 85 additions & 0 deletions templates/docs/examples/patterns/rich-list-vertical/bulleted.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
{% extends "_layouts/examples.html" %}
{% from "_macros/vf_rich-vertical-list.jinja" import vf_rich_vertical_list %}

{% block title %}Rich list / Vertical / Bulleted{% 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.',
list_item_tick_style="bullet"
) -%}
{%- if slot == 'description' -%}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.
</p>
{%- endif -%}
{%- if slot == 'logo_section' -%}
<div class="p-logo-section">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e44aa9b2-nvidia-logo.png" alt="NVIDIA logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e4bbd168-amd-logo.png" alt="AMD logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/b0404df4-hp-logo.png" alt="HP logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/90161e97-dell-logo.png" alt="Dell logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/35549e17-lenovo-logo.png" alt="Lenovo logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
</div>
</div>
{%- endif -%}
{%- if slot == 'list_item_1' -%}
No mandatory subscriptions for Ubuntu
{%- endif -%}
{%- if slot == 'list_item_2' -%}
<a href="https://ubuntu.com/security">Security</a>, <a href="https://ubuntu.com/support">Support</a>, and fully managed
<a href="https://ubuntu.com/openstack/managed">Infra</a> and
<a href="https://ubuntu.com/managed/apps">Apps</a>
{%- endif -%}
{%- if slot == 'list_item_3' -%}
<a href="https://ubuntu.com/cloud/public-cloud">Public cloud</a>,
<a href="https://ubuntu.com/download/server">Data centre</a>,
<a href="https://microk8s.io/">Edge cluster</a> and
<a href="https://ubuntu.com/appliance">Appliances</a>
{%- endif -%}
{%- if slot == 'list_item_4' -%}
<a href="https://ubuntu.com/about/release-cycle">Long term maintenance commitment</a>
{%- endif -%}
{%- if slot == 'list_item_5' -%}
Transparent pricing for enterprise and ISV
{%- endif -%}
{%- if slot == 'list_item_6' -%}
<a href="https://ubuntu.com/engage/from-vmware-to-open-source">Switch from VMware to OpenStack</a>
{%- endif -%}
{%- if slot == 'list_item_7' -%}
<a href="https://ubuntu.com/openstack/pricing-calculator">TCO analysis of Open Infra</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 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 -%}
{% endblock %}
Loading
Loading