diff --git a/releases.yml b/releases.yml index ecf20eace..1abd9d2c8 100644 --- a/releases.yml +++ b/releases.yml @@ -8,6 +8,10 @@ url: /docs/patterns/hero status: Updated notes: The hero pattern macro has been published. + - component: Quote wrapper + url: /docs/patterns/quote-wrapper + status: New + notes: We've introduced a new quote wrapper pattern. - version: 4.16.0 features: - component: CTA Block / Borderless diff --git a/side-navigation.yaml b/side-navigation.yaml index 8ee3492b8..5f39802fd 100644 --- a/side-navigation.yaml +++ b/side-navigation.yaml @@ -115,6 +115,8 @@ url: /docs/patterns/hero - title: Tiered list url: /docs/patterns/tiered-list + - title: Quote Wrapper + url: /docs/patterns/quote-wrapper - heading: Utilities ordering: alphabetical subheadings: diff --git a/templates/_macros/quote-wrapper.jinja b/templates/_macros/quote-wrapper.jinja new file mode 100644 index 000000000..27ad675ef --- /dev/null +++ b/templates/_macros/quote-wrapper.jinja @@ -0,0 +1,167 @@ +{# + Params + - title_text (string) (optional): The text to be displayed as the heading + - quote_size (string) (required): The size of the quote. Possible values are 'small', 'medium', 'large'. Default is 'medium'. + - quote_text (string) (required): The text of the quote. The macro will surround it with quotes, so there is no need to quote it yourself. + - citation_source_name_text (string) (optional): The name of the source being quoted + - citation_source_title_text (string) (optional): The title of the source being quoted + - citation_source_organisation_text (string) (optional): The organisation associated with the source being quoted. + - is_shallow (boolean) (optional): Whether the quote wrapper pattern should be displayed in a shallow section. Defaults to false. + Slots + - signpost_image (optional): The signpost_image of the source being quoted + - heading_link (optional): Link to be displayed beside the heading text + - cta (optional): Contents of the call to action block to be displayed below the quote + - image (optional): An image to be displayed below the quote +#} +{%- macro quote_wrapper( + title_text="", + quote_size="medium", + quote_text="", + citation_source_name_text="", + citation_source_title_text="", + citation_source_organisation_text="", + is_shallow=False +) -%} + {% set heading_link_content = caller('heading_link') %} + {% set has_heading_link = heading_link_content|trim|length > 0 %} + {% set has_title = title_text|length > 0 %} + {% set has_heading_row = has_title or has_heading_link %} + {% set signpost_image_content = caller('signpost_image') %} + {% set has_signpost_image = signpost_image_content|trim|length > 0 %} + {% set has_citation_source_name = citation_source_name_text|trim|length > 0 %} + {% set has_citation_source_title = citation_source_title_text|trim|length > 0 %} + {% set has_citation_source_organisation = citation_source_organisation_text|trim|length > 0 %} + {% set has_citation = has_citation_source_name or has_citation_source_title or has_citation_source_organisation %} + {% 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 quote_size = quote_size|trim|lower %} + + {# Translate quote size param to quote heading level #} + {% if quote_size == 'large' %} + {% set quote_heading_level = 2 %} + {% elif quote_size == 'small' %} + {% set quote_heading_level = 6 %} + {% else %} + {% set quote_heading_level = 4 %} + {% endif %} + + {%- macro _quote_body() -%} + {#- Only use shallow section spacing if a another block follows -#} +
+

+ + “{{ quote_text }}” + +

+
+ {%- endmacro %} + + {%- macro _citation_block() -%} + {%- if has_citation -%} + {#- Optional citation block -#} +

+ {% if has_citation_source_name -%} + {#- Optional citation source name -#} + {{ citation_source_name_text }} + {% if has_citation_source_title or has_citation_source_organisation -%} + {#- If the citation name is followed by title and/or organisation, add a line break -#} +
+ {% endif -%} + {% endif -%} + {% if has_citation_source_title or has_citation_source_organisation -%} + {#- Optional citation source title and/or organisation -#} + + {% if has_citation_source_title -%} + {#- Optional citation source title -#} + {{ citation_source_title_text }} + {%- if has_citation_source_organisation %} + {#- Add a line break between the title and org if both are present -#} +
+ {%- endif %} + {% endif %} + {%- if has_citation_source_organisation -%} + {#- Optional citation source organisation -#} + {{ citation_source_organisation_text }} + {%- endif %} + + {%- endif %} +

+ {% endif %} + {%- endmacro -%} + + {%- macro _heading_block() %} + {% if has_heading_row -%} + {#- Optional heading -#} +
+
+
+ {%- if has_title %} + {#- Optional heading text -#} +
+

{{ title_text }}

+
+ {%- endif -%} + + {%- if has_heading_link %} + {#- Optional heading link -#} +
+

+ {{ heading_link_content }} +

+
+ {% endif -%} +
+
+ {% endif -%} + {%- endmacro %} + +
+ {{- _heading_block() -}} +
+ {% if has_signpost_image -%} + {#- Optional signpost image -#} +
+
+ {{ signpost_image_content }} +
+
+ {% endif -%} + {#- Skip to fourth column if the signpost_image (which takes up first three columns) is missing -#} +
+
+ {% if has_citation -%} + {#- When a citation is present, wrap the quote and citation in a nested grid to space them properly -#} +
+
+ {{ _quote_body() }} +
+
+
+ {{ _citation_block() }} +
+
+ {% else -%} + {#- When no citation is present, display quote body without a nested grid -#} + {{ _quote_body() }} + {% endif -%} + + {%- if has_cta or has_image -%} + {#- Optional CTA and/or image block -#} + {%- if has_cta %} + {#- Optional CTA block -#} +
+ {{ cta_content }} +
+ {% endif -%} + + {% if has_image -%} + {#- Optional image block -#} + {{ image_content }} + {% endif -%} + {% endif -%} +
+
+
+{% endmacro -%} \ No newline at end of file diff --git a/templates/docs/examples/patterns/quote-wrapper/combined.html b/templates/docs/examples/patterns/quote-wrapper/combined.html new file mode 100644 index 000000000..9cea961a2 --- /dev/null +++ b/templates/docs/examples/patterns/quote-wrapper/combined.html @@ -0,0 +1,25 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Quote Wrapper / Combined{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{% with is_combined = true %} +
{% include 'docs/examples/patterns/quote-wrapper/large.html' %}
+
{% include 'docs/examples/patterns/quote-wrapper/large-no-cta-image-or-citation.html' %}
+
{% include 'docs/examples/patterns/quote-wrapper/large-no-signpost.html' %}
+
{% include 'docs/examples/patterns/quote-wrapper/large-no-citation.html' %}
+
{% include 'docs/examples/patterns/quote-wrapper/large-no-header.html' %}
+
{% include 'docs/examples/patterns/quote-wrapper/large-no-header-no-signpost.html' %}
+
{% include 'docs/examples/patterns/quote-wrapper/large-shallow.html' %}
+
{% include 'docs/examples/patterns/quote-wrapper/large-minimal.html' %}
+
{% include 'docs/examples/patterns/quote-wrapper/medium.html' %}
+
{% include 'docs/examples/patterns/quote-wrapper/medium-no-signpost.html' %}
+
{% include 'docs/examples/patterns/quote-wrapper/medium-no-citation.html' %}
+
{% include 'docs/examples/patterns/quote-wrapper/medium-no-header.html' %}
+
{% include 'docs/examples/patterns/quote-wrapper/small.html' %}
+
{% include 'docs/examples/patterns/quote-wrapper/small-no-signpost.html' %}
+
{% include 'docs/examples/patterns/quote-wrapper/small-no-citation.html' %}
+
{% include 'docs/examples/patterns/quote-wrapper/small-no-header.html' %}
+{% endwith %} +{% endblock %} diff --git a/templates/docs/examples/patterns/quote-wrapper/large-minimal.html b/templates/docs/examples/patterns/quote-wrapper/large-minimal.html new file mode 100644 index 000000000..81547b3b1 --- /dev/null +++ b/templates/docs/examples/patterns/quote-wrapper/large-minimal.html @@ -0,0 +1,16 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/quote-wrapper.jinja" import quote_wrapper %} + +{% block title %}Quote Wrapper / Large quote / Minimal{% endblock %} +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} + +{% call(slot) quote_wrapper( + quote_size="large", + quote_text="This is a company where intelligence and learning are highly valued." +) -%} + +{% endcall -%} + +{% endblock %} diff --git a/templates/docs/examples/patterns/quote-wrapper/large-no-citation.html b/templates/docs/examples/patterns/quote-wrapper/large-no-citation.html new file mode 100644 index 000000000..50945c7a1 --- /dev/null +++ b/templates/docs/examples/patterns/quote-wrapper/large-no-citation.html @@ -0,0 +1,35 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/quote-wrapper.jinja" import quote_wrapper %} + +{% block title %}Quote Wrapper / Large quote / No citation{% endblock %} +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} + +{% call(slot) quote_wrapper( + title_text="Our hiring process", + quote_size="large", + quote_text="This is a company where intelligence and learning are highly valued." +) -%} + +{%- if slot == 'heading_link' -%} + All the success stories › +{%- endif -%} + +{%- if slot == 'signpost_image' -%} + Canonical logo +{%- endif -%} + +{%- if slot == 'cta' -%} + Explore careers › +{%- endif -%} + +{%- if slot == 'image' -%} +
+ Ubuntu Summit crowd +
+{%- endif -%} + +{% endcall -%} + +{% endblock %} diff --git a/templates/docs/examples/patterns/quote-wrapper/large-no-cta-image-or-citation.html b/templates/docs/examples/patterns/quote-wrapper/large-no-cta-image-or-citation.html new file mode 100644 index 000000000..2d81a5c0c --- /dev/null +++ b/templates/docs/examples/patterns/quote-wrapper/large-no-cta-image-or-citation.html @@ -0,0 +1,28 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/quote-wrapper.jinja" import quote_wrapper %} + +{% block title %}Quote Wrapper / Large quote / No CTA, image, or citation{% endblock %} +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} + +{% call(slot) quote_wrapper( + title_text="Our hiring process", + quote_size="large", + quote_text="This is a company where intelligence and learning are highly valued.", + citation_source_name_text="Alyson Richens", + citation_source_title_text="Customer Success Manager", + citation_source_organisation_text="Canonical" +) -%} + +{%- if slot == 'heading_link' -%} + All the success stories › +{%- endif -%} + +{%- if slot == 'signpost_image' -%} + Canonical logo +{%- endif -%} + +{% endcall -%} + +{% endblock %} diff --git a/templates/docs/examples/patterns/quote-wrapper/large-no-header-no-signpost.html b/templates/docs/examples/patterns/quote-wrapper/large-no-header-no-signpost.html new file mode 100644 index 000000000..24f8061ea --- /dev/null +++ b/templates/docs/examples/patterns/quote-wrapper/large-no-header-no-signpost.html @@ -0,0 +1,29 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/quote-wrapper.jinja" import quote_wrapper %} + +{% block title %}Quote Wrapper / Large quote / No header or signpost{% endblock %} +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} + +{% call(slot) quote_wrapper( + quote_size="large", + quote_text="This is a company where intelligence and learning are highly valued.", + citation_source_name_text="Alyson Richens", + citation_source_title_text="Customer Success Manager", + citation_source_organisation_text="Canonical" +) -%} + +{%- if slot == 'cta' -%} + Explore careers › +{%- endif -%} + +{%- if slot == 'image' -%} +
+ Ubuntu Summit crowd +
+{%- endif -%} + +{% endcall -%} + +{% endblock %} diff --git a/templates/docs/examples/patterns/quote-wrapper/large-no-header.html b/templates/docs/examples/patterns/quote-wrapper/large-no-header.html new file mode 100644 index 000000000..9fc73b82e --- /dev/null +++ b/templates/docs/examples/patterns/quote-wrapper/large-no-header.html @@ -0,0 +1,33 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/quote-wrapper.jinja" import quote_wrapper %} + +{% block title %}Quote Wrapper / Large quote / No header{% endblock %} +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} + +{% call(slot) quote_wrapper( + quote_size="large", + quote_text="This is a company where intelligence and learning are highly valued.", + citation_source_name_text="Alyson Richens", + citation_source_title_text="Customer Success Manager", + citation_source_organisation_text="Canonical" +) -%} + +{%- if slot == 'signpost_image' -%} + Canonical logo +{%- endif -%} + +{%- if slot == 'cta' -%} + Explore careers › +{%- endif -%} + +{%- if slot == 'image' -%} +
+ Ubuntu Summit crowd +
+{%- endif -%} + +{% endcall -%} + +{% endblock %} diff --git a/templates/docs/examples/patterns/quote-wrapper/large-no-signpost.html b/templates/docs/examples/patterns/quote-wrapper/large-no-signpost.html new file mode 100644 index 000000000..8a18a0046 --- /dev/null +++ b/templates/docs/examples/patterns/quote-wrapper/large-no-signpost.html @@ -0,0 +1,34 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/quote-wrapper.jinja" import quote_wrapper %} + +{% block title %}Quote Wrapper / Large quote / No signpost{% endblock %} +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} + +{% call(slot) quote_wrapper( + title_text="Our hiring process", + quote_size="large", + quote_text="This is a company where intelligence and learning are highly valued.", + citation_source_name_text="Alyson Richens", + citation_source_title_text="Customer Success Manager", + citation_source_organisation_text="Canonical" +) -%} + +{%- if slot == 'heading_link' -%} + All the success stories › +{%- endif -%} + +{%- if slot == 'cta' -%} + Explore careers › +{%- endif -%} + +{%- if slot == 'image' -%} +
+ Ubuntu Summit crowd +
+{%- endif -%} + +{% endcall -%} + +{% endblock %} diff --git a/templates/docs/examples/patterns/quote-wrapper/large-shallow.html b/templates/docs/examples/patterns/quote-wrapper/large-shallow.html new file mode 100644 index 000000000..7f129989a --- /dev/null +++ b/templates/docs/examples/patterns/quote-wrapper/large-shallow.html @@ -0,0 +1,39 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/quote-wrapper.jinja" import quote_wrapper %} + +{% block title %}Quote Wrapper / Large quote / Shallow spacing{% endblock %} +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} + +{% call(slot) quote_wrapper( + title_text="Our hiring process", + quote_size="large", + quote_text="This is a company where intelligence and learning are highly valued.", + citation_source_name_text="Alyson Richens", + citation_source_title_text="Customer Success Manager", + citation_source_organisation_text="Canonical", + is_shallow=True +) -%} + +{%- if slot == 'heading_link' -%} + All the success stories › +{%- endif -%} + +{%- if slot == 'signpost_image' -%} + Canonical logo +{%- endif -%} + +{%- if slot == 'cta' -%} + Explore careers › +{%- endif -%} + +{%- if slot == 'image' -%} +
+ Ubuntu Summit crowd +
+{%- endif -%} + +{% endcall -%} + +{% endblock %} diff --git a/templates/docs/examples/patterns/quote-wrapper/large.html b/templates/docs/examples/patterns/quote-wrapper/large.html new file mode 100644 index 000000000..65c462266 --- /dev/null +++ b/templates/docs/examples/patterns/quote-wrapper/large.html @@ -0,0 +1,38 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/quote-wrapper.jinja" import quote_wrapper %} + +{% block title %}Quote Wrapper / Large quote{% endblock %} +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} + +{% call(slot) quote_wrapper( + title_text="Our hiring process", + quote_size="large", + quote_text="This is a company where intelligence and learning are highly valued.", + citation_source_name_text="Alyson Richens", + citation_source_title_text="Customer Success Manager", + citation_source_organisation_text="Canonical" +) -%} + +{%- if slot == 'heading_link' -%} + All the success stories › +{%- endif -%} + +{%- if slot == 'signpost_image' -%} + Canonical logo +{%- endif -%} + +{%- if slot == 'cta' -%} + Explore careers › +{%- endif -%} + +{%- if slot == 'image' -%} +
+ Ubuntu Summit crowd +
+{%- endif -%} + +{% endcall -%} + +{% endblock %} diff --git a/templates/docs/examples/patterns/quote-wrapper/medium-no-citation.html b/templates/docs/examples/patterns/quote-wrapper/medium-no-citation.html new file mode 100644 index 000000000..bc27eb0f9 --- /dev/null +++ b/templates/docs/examples/patterns/quote-wrapper/medium-no-citation.html @@ -0,0 +1,35 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/quote-wrapper.jinja" import quote_wrapper %} + +{% block title %}Quote Wrapper / Medium quote / No citation{% endblock %} +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} + +{% call(slot) quote_wrapper( + title_text="Our hiring process", + quote_size="medium", + quote_text="We're a remote-first international company. I get to work every day with people from all over the world, which is just amazing.", +) -%} + +{%- if slot == 'heading_link' -%} + All the success stories › +{%- endif -%} + +{%- if slot == 'signpost_image' -%} + Canonical logo +{%- endif -%} + +{%- if slot == 'cta' -%} + Explore careers › +{%- endif -%} + +{%- if slot == 'image' %} +
+ Ubuntu Summit crowd +
+{%- endif -%} + +{% endcall -%} + +{% endblock %} diff --git a/templates/docs/examples/patterns/quote-wrapper/medium-no-header.html b/templates/docs/examples/patterns/quote-wrapper/medium-no-header.html new file mode 100644 index 000000000..f10288cec --- /dev/null +++ b/templates/docs/examples/patterns/quote-wrapper/medium-no-header.html @@ -0,0 +1,33 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/quote-wrapper.jinja" import quote_wrapper %} + +{% block title %}Quote Wrapper / Medium quote / No header{% endblock %} +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} + +{% call(slot) quote_wrapper( + quote_size="medium", + quote_text="We're a remote-first international company. I get to work every day with people from all over the world, which is just amazing.", + citation_source_name_text="Ken VanDine", + citation_source_title_text="Engineering Manager", + citation_source_organisation_text="Canonical Ubuntu Desktop" +) -%} + +{%- if slot == 'signpost_image' -%} + Canonical logo +{%- endif -%} + +{%- if slot == 'cta' -%} + Explore careers › +{%- endif -%} + +{%- if slot == 'image' %} +
+ Ubuntu Summit crowd +
+{%- endif -%} + +{% endcall -%} + +{% endblock %} diff --git a/templates/docs/examples/patterns/quote-wrapper/medium-no-signpost.html b/templates/docs/examples/patterns/quote-wrapper/medium-no-signpost.html new file mode 100644 index 000000000..49f04272c --- /dev/null +++ b/templates/docs/examples/patterns/quote-wrapper/medium-no-signpost.html @@ -0,0 +1,34 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/quote-wrapper.jinja" import quote_wrapper %} + +{% block title %}Quote Wrapper / Medium quote / No signpost{% endblock %} +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} + +{% call(slot) quote_wrapper( + title_text="Our hiring process", + quote_size="medium", + quote_text="We're a remote-first international company. I get to work every day with people from all over the world, which is just amazing.", + citation_source_name_text="Ken VanDine", + citation_source_title_text="Engineering Manager", + citation_source_organisation_text="Canonical Ubuntu Desktop" +) -%} + +{%- if slot == 'heading_link' -%} + All the success stories › +{%- endif -%} + +{%- if slot == 'cta' -%} + Explore careers › +{%- endif -%} + +{%- if slot == 'image' %} +
+ Ubuntu Summit crowd +
+{%- endif -%} + +{% endcall -%} + +{% endblock %} diff --git a/templates/docs/examples/patterns/quote-wrapper/medium.html b/templates/docs/examples/patterns/quote-wrapper/medium.html new file mode 100644 index 000000000..c2e00dabd --- /dev/null +++ b/templates/docs/examples/patterns/quote-wrapper/medium.html @@ -0,0 +1,38 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/quote-wrapper.jinja" import quote_wrapper %} + +{% block title %}Quote Wrapper / Medium quote{% endblock %} +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} + +{% call(slot) quote_wrapper( + title_text="Our hiring process", + quote_size="medium", + quote_text="We're a remote-first international company. I get to work every day with people from all over the world, which is just amazing.", + citation_source_name_text="Ken VanDine", + citation_source_title_text="Engineering Manager", + citation_source_organisation_text="Canonical Ubuntu Desktop" +) -%} + +{%- if slot == 'heading_link' -%} + All the success stories › +{%- endif -%} + +{%- if slot == 'signpost_image' -%} + Canonical logo +{%- endif -%} + +{%- if slot == 'cta' -%} + Explore careers › +{%- endif -%} + +{%- if slot == 'image' %} +
+ Ubuntu Summit crowd +
+{%- endif -%} + +{% endcall -%} + +{% endblock %} diff --git a/templates/docs/examples/patterns/quote-wrapper/small-no-citation.html b/templates/docs/examples/patterns/quote-wrapper/small-no-citation.html new file mode 100644 index 000000000..b7dc11af9 --- /dev/null +++ b/templates/docs/examples/patterns/quote-wrapper/small-no-citation.html @@ -0,0 +1,35 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/quote-wrapper.jinja" import quote_wrapper %} + +{% block title %}Quote Wrapper / Small quote / No citation{% endblock %} +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} + +{% call(slot) quote_wrapper( + title_text="Our hiring process", + quote_size="small", + quote_text="I am particularly proud to work for an organisation that holds diversity and equal opportunity at the heart of its business. Our global reach allows us to consider people from all over the world for each open role we have. This presents an immense opportunity for talent in the open source community.", +) -%} + +{%- if slot == 'heading_link' -%} + All the success stories › +{%- endif -%} + +{%- if slot == 'signpost_image' -%} + Canonical logo +{%- endif -%} + +{%- if slot == 'cta' -%} + Explore careers › +{%- endif -%} + +{%- if slot == 'image' -%} +
+ Ubuntu Summit crowd +
+{%- endif -%} + +{% endcall -%} + +{% endblock %} diff --git a/templates/docs/examples/patterns/quote-wrapper/small-no-header.html b/templates/docs/examples/patterns/quote-wrapper/small-no-header.html new file mode 100644 index 000000000..1b2ffaac4 --- /dev/null +++ b/templates/docs/examples/patterns/quote-wrapper/small-no-header.html @@ -0,0 +1,33 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/quote-wrapper.jinja" import quote_wrapper %} + +{% block title %}Quote Wrapper / Small quote / No header{% endblock %} +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} + +{% call(slot) quote_wrapper( + quote_size="small", + quote_text="I am particularly proud to work for an organisation that holds diversity and equal opportunity at the heart of its business. Our global reach allows us to consider people from all over the world for each open role we have. This presents an immense opportunity for talent in the open source community.", + citation_source_name_text="Hanna Neuborn", + citation_source_title_text="Global Head of Talent Science", + citation_source_organisation_text="Canonical" +) -%} + +{%- if slot == 'signpost_image' -%} + Canonical logo +{%- endif -%} + +{%- if slot == 'cta' -%} + Explore careers › +{%- endif -%} + +{%- if slot == 'image' -%} +
+ Ubuntu Summit crowd +
+{%- endif -%} + +{% endcall -%} + +{% endblock %} diff --git a/templates/docs/examples/patterns/quote-wrapper/small-no-signpost.html b/templates/docs/examples/patterns/quote-wrapper/small-no-signpost.html new file mode 100644 index 000000000..5350b7d4e --- /dev/null +++ b/templates/docs/examples/patterns/quote-wrapper/small-no-signpost.html @@ -0,0 +1,34 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/quote-wrapper.jinja" import quote_wrapper %} + +{% block title %}Quote Wrapper / Small quote / No signpost{% endblock %} +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} + +{% call(slot) quote_wrapper( + title_text="Our hiring process", + quote_size="small", + quote_text="I am particularly proud to work for an organisation that holds diversity and equal opportunity at the heart of its business. Our global reach allows us to consider people from all over the world for each open role we have. This presents an immense opportunity for talent in the open source community.", + citation_source_name_text="Hanna Neuborn", + citation_source_title_text="Global Head of Talent Science", + citation_source_organisation_text="Canonical" +) -%} + +{%- if slot == 'heading_link' -%} + All the success stories › +{%- endif -%} + +{%- if slot == 'cta' -%} + Explore careers › +{%- endif -%} + +{%- if slot == 'image' -%} +
+ Ubuntu Summit crowd +
+{%- endif -%} + +{% endcall -%} + +{% endblock %} diff --git a/templates/docs/examples/patterns/quote-wrapper/small.html b/templates/docs/examples/patterns/quote-wrapper/small.html new file mode 100644 index 000000000..689535844 --- /dev/null +++ b/templates/docs/examples/patterns/quote-wrapper/small.html @@ -0,0 +1,38 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/quote-wrapper.jinja" import quote_wrapper %} + +{% block title %}Quote Wrapper / Small quote{% endblock %} +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} + +{% call(slot) quote_wrapper( + title_text="Our hiring process", + quote_size="small", + quote_text="I am particularly proud to work for an organisation that holds diversity and equal opportunity at the heart of its business. Our global reach allows us to consider people from all over the world for each open role we have. This presents an immense opportunity for talent in the open source community.", + citation_source_name_text="Hanna Neuborn", + citation_source_title_text="Global Head of Talent Science", + citation_source_organisation_text="Canonical" +) -%} + +{%- if slot == 'heading_link' -%} + All the success stories › +{%- endif -%} + +{%- if slot == 'signpost_image' -%} + Canonical logo +{%- endif -%} + +{%- if slot == 'cta' -%} + Explore careers › +{%- endif -%} + +{%- if slot == 'image' -%} +
+ Ubuntu Summit crowd +
+{%- endif -%} + +{% endcall -%} + +{% endblock %} diff --git a/templates/docs/macros/notice.jinja b/templates/docs/macros/notice.jinja new file mode 100644 index 000000000..c6bd8a457 --- /dev/null +++ b/templates/docs/macros/notice.jinja @@ -0,0 +1,15 @@ +{# + Macro to generate documentation notices, such as component deprecations. + Params + icon_class: The icon class to use for the notice. + title_text: The title text for the notice. + message_text: The message text for the notice. +#} +{%- macro documentation_notice(icon_class, title_text, message_text) -%} +
+
+

{{ title_text }}

+

{{ message_text }}

+
+
+{%- endmacro -%} \ No newline at end of file diff --git a/templates/docs/macros/patterns/wip-notice.jinja b/templates/docs/macros/patterns/wip-notice.jinja new file mode 100644 index 000000000..48f0a8c86 --- /dev/null +++ b/templates/docs/macros/patterns/wip-notice.jinja @@ -0,0 +1,12 @@ +{% from "docs/macros/notice.jinja" import documentation_notice %} + +{#- Macro unifying presentation of all new pattern/HOC WIP notices -#} +{%- macro pattern_wip_notice() -%} + +{{- documentation_notice( + icon_class="p-notification--information", + title_text="Work in progress", + message_text="Vanilla's patterns are newly released and still evolving as we receive feedback." +) -}} + +{%- endmacro -%} \ No newline at end of file diff --git a/templates/docs/patterns/hero/index.md b/templates/docs/patterns/hero/index.md index 0748d75c0..8281c7d71 100644 --- a/templates/docs/patterns/hero/index.md +++ b/templates/docs/patterns/hero/index.md @@ -4,6 +4,10 @@ context: title: Hero | Patterns --- +{% from "docs/macros/patterns/wip-notice.jinja" import pattern_wip_notice %} + +{{- pattern_wip_notice() }} + A hero is a prominent banner section typically used to quickly capture the user's attention after they land on the page. Depending on the size and composition of your content, you can choose from a variety of hero layouts: diff --git a/templates/docs/patterns/quote-wrapper/index.md b/templates/docs/patterns/quote-wrapper/index.md new file mode 100644 index 000000000..c4653a18b --- /dev/null +++ b/templates/docs/patterns/quote-wrapper/index.md @@ -0,0 +1,68 @@ +--- +wrapper_template: '_layouts/docs.html' +context: + title: Quote Wrapper | Patterns +--- + +{% from "docs/macros/patterns/wip-notice.jinja" import pattern_wip_notice %} + +{{- pattern_wip_notice() }} + +A quote wrapper is a pattern used to prominently display a quotation alongside an optional citation, logo, and image. + +The quote wrapper pattern is composed of the following elements: + +| Element | Description | +| -------------------- | ------------------------------------------------------------------------------------------- | +| Quote (**required**) | Quote text | +| Header | Header text & CTA. Useful for adding a title/link that describes all of a series of quotes. | +| Signpost image | Small image to display at the left/top of the quote, such as a logo or a portrait. | +| Call to action | A [CTA block](/docs/patterns/cta-block) | +| Image | Image to associate with the quote | +| Source | Name, title, and organisation of the quote's source | + +All examples shown here use `

`-sized quote text. However, this should be changed according to text length. +For short quotes, use `.p-heading--2`. +For medium-sized quotes, use `.p-heading--4`. +For long quotes, use `.p-heading--6`. + +## All elements + +The following example includes all required and optional elements. + +
+View example of the quote wrapper pattern with large quote text +
+ +## Without signpost image + +If the quote is not associated with a specific brand or entity, or no logo is available, the logo can be omitted. +Set the second grid column in the quote row to start in the fourth column with .col-start-large-4 to make +up for +the space that would normally be taken up by the signpost image. + +
+View example of the quote wrapper pattern with large quote text, without a signpost image. +
+ +## Without citation + +When no citation is available or needed, the citation row can be omitted, and the quote body does not need to be wrapped +in a nested grid. + +
+View example of the quote wrapper pattern with large quote text, without a citation. +
+ +## Minimal + +The minimal quote wrapper pattern includes only the quote text. + +
+View example of the quote wrapper pattern with all optional content removed. +
+ +## Import + +Since Patterns leverage many other parts of Vanilla in their composition and content, we +recommend [importing the entirety of Vanilla](/docs#install) for full support. diff --git a/templates/docs/patterns/tiered-list/index.md b/templates/docs/patterns/tiered-list/index.md index 916711b67..f103d15ec 100644 --- a/templates/docs/patterns/tiered-list/index.md +++ b/templates/docs/patterns/tiered-list/index.md @@ -4,6 +4,10 @@ context: title: Tiered list | Patterns --- +{% from "docs/macros/patterns/wip-notice.jinja" import pattern_wip_notice %} + +{{- pattern_wip_notice() }} + The tiered list pattern is used to easily implement a list of paired titles and descriptions underneath a top-level title and description. Optional [CTA blocks](/docs/patterns/cta-block) can be placed at various points in the content