fix: make quote wrapper quote separator always use .p-rule--muted (#…

…5424)

* Quote wrapper quote HR is always muted

* Tweak PR template to also mention jinja macros

.github/PULL_REQUEST_TEMPLATE.md

@@ -13,15 +13,15 @@ Fixes [list issues/bugs if needed]
 
 ### Check if PR is ready for release
 
-If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:
+If this PR contains Vanilla SCSS or macro code changes, it should contain the following changes to make sure it's ready for the release:
 
 - [ ] PR should have one of the following labels to automatically categorise it in release notes:
   - `Feature 🎁`, `Breaking Change 💣`, `Bug 🐛`, `Documentation 📝`, `Maintenance 🔨`.
-- [ ] Vanilla version in `package.json` should be updated relative to the [most recent release](https://github.com/canonical/vanilla-framework/releases/latest), following semver convention:
-  - if CSS class names are not changed it can be bugfix release (x.x.**X**)
-  - if CSS class names are changed/added/removed it should be minor version (x.**X**.0)
+- [ ] Vanilla version in `package.json` should be updated relative to the [most recent release](https://github.com/canonical/vanilla-framework/releases/latest), following semver convention
+  - if existing APIs (CSS classes & macro APIs) are not changed it can be a bugfix release (x.x.**X**)
+  - if existing APIs (CSS classes & macro APIs) are changed/added/removed it should be a minor version (x.**X**.0)
   - see the [wiki for more details](https://github.com/canonical/vanilla-framework/wiki/Release-process#pre-release-tasks)
-- [ ] Any changes to component class names (new patterns, variants, removed or added features) should be listed on the [what's new page](https://github.com/canonical/vanilla-framework/blob/main/releases.yml).
+- [ ] Any changes to component class names (new patterns, variants, removed or added features) or macros should be listed on the [what's new page](https://github.com/canonical/vanilla-framework/blob/main/releases.yml).
 
 
 ## Screenshots

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.18.2",
+  "version": "4.18.3",
   "author": {
     "email": "[email protected]",
     "name": "Canonical Webteam"

templates/_macros/vf_quote-wrapper.jinja

@@ -136,20 +136,7 @@
       {% endif -%}
 
       <div class="col-9 col-start-large-4 col-medium-4 col-start-medium-3">
-        {% if has_heading_row %}
-          {#- If a heading is present, a muted rule separates the heading from the quote, and can be used on all breakpoints. -#}
-          <hr class="p-rule--muted">
-        {% elif has_signpost_image %}
-          {#- 
-            If a heading is not present, we use a standard rule to separate the pattern from preceding content on large and medium.
-            On small, the signpost is stacked above the quote, so we use a muted rule to separate the signpost from the quote.
-          -#}
-          <hr class="p-rule u-hide--small">
-          <hr class="p-rule--muted u-hide--large u-hide--medium">
-        {% else %}
-          {#- If neither heading nor signpost image is present, use a standard rule on all screen sizes to separate from preceding section -#}
-          <hr class="p-rule">
-        {% endif %}
+        <hr class="p-rule--muted">
         {% if has_citation -%}
           {#-  When a citation is present, wrap the quote and citation in a nested grid to space them properly  -#}
           <div class="row">

templates/docs/patterns/quote-wrapper/index.md

@@ -52,6 +52,10 @@ View example of the quote wrapper pattern with large quote text, without a citat
 
 If no heading is desired, the quote can be displayed without a heading, omitting the title and title link.
 
+The heading should be omitted if the quote is not the first element in its page section.
+If the quote is the first element in its section, a heading should be used to introduce the quote and distinguish it from
+previous content.
+
 <div class="embedded-example"><a href="/docs/examples/patterns/quote-wrapper/large-no-header" class="js-example" data-lang="jinja">
 View example of the quote wrapper pattern with large quote text, without a heading.
 </a></div>