Use callout for brand notes

Author: domoscargin

src/components/cookie-banner/index.md

@@ -14,14 +14,15 @@ Allow users to accept or reject cookies which are not essential to making your s
 
 {{ example({ group: "components", item: "cookie-banner", example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }}
 
-<strong class="govuk-tag brand-tag-green">
-  Brand
-</strong>
+{% call callout({ tagText: "Brand", colour: "green" }) %}
+
 <p class="govuk-body"><a href="#">See an example of the Cookie banner showing the refreshed GOV.UK branding</a>.</p>
 
+{% endcall %}
+
 If you use the page template, you'll also get the Cookie banner without having to add it, as it's included by default. However, if you want to customise the default Cookie banner, read the [page template guidance about customising components](/styles/page-template/#changing-template-content).
 
-{% call callout({ tagText: "Brand", colour: "green" }) %}
+{% call callout({ tagText: "Brand", colour: "green", isInset: "true" }) %}
 
 <h2 class="app-callout__heading">Brand changes to the {{title}} component</h2>
 <p class="govuk-body">From June 2025, the {{title}} component will change to support a wider refresh of the GOV.UK brand. </p>

src/components/footer/index.md

@@ -15,14 +15,15 @@ The GOV.UK footer provides copyright, licensing and other information about your
 
 {{ example({ group: "components", item: "footer", example: "default", id: "default-1", html: true, nunjucks: true, open: false, size: "m", loading: "eager" }) }}
 
-<strong class="govuk-tag brand-tag-green">
-  Brand
-</strong>
+{% call callout({ tagText: "Brand", colour: "green" }) %}
+
 <p class="govuk-body"><a href="#">See an example of the GOV.UK footer showing the refreshed GOV.UK branding</a>.</p>
 
+{% endcall %}
+
 If you use the page template, you'll also get the footer without having to add it, as it's included by default. However, if you want to customise the default footer, read the [page template guidance about customising components](/styles/page-template/#changing-template-content).
 
-{% call callout({ tagText: "Brand", colour: "green" }) %}
+{% call callout({ tagText: "Brand", colour: "green", isInset: "true" }) %}
 
 <h2 class="app-callout__heading">Brand changes to the {{title}} component</h2><p class="govuk-body">From June 2025, the {{title}} component will change to support a wider refresh of the GOV.UK brand.</p>
 

src/components/header/index.md

@@ -14,14 +14,14 @@ The GOV.UK header component tells users they’re using a service on GOV.UK and
 
 {{ example({ group: "components", item: "header", example: "default", id: "default-1", html: true, nunjucks: true, open: false, loading: "eager" }) }}
 
-<strong class="govuk-tag brand-tag-green">
-  Brand
-</strong>
+{% call callout({ tagText: "Brand", colour: "green" }) %}
+
 <p class="govuk-body"><a href="#">See an example of the GOV.UK header showing the refreshed GOV.UK branding</a>.</p>
+{% endcall %}
 
 If you use the page template, you'll also get the GOV.UK header without having to add it, as it's included by default. However, if you want to customise the default GOV.UK header, read the [page template guidance about customising components](/styles/page-template/#changing-template-content).
 
-{% call callout({ tagText: "Brand", colour: "green" }) %}
+{% call callout({ tagText: "Brand", colour: "green", isInset: "true" }) %}
 
 <h2 class="app-callout__heading">Brand changes to the {{title}} component</h2>
 <p class="govuk-body">From June 2025, the {{title}} component will change to support a wider refresh of the GOV.UK brand. </p>

src/components/service-navigation/index.md

@@ -13,7 +13,7 @@ layout: layout-pane.njk
 
 Service navigation helps users understand that they’re using your service and lets them navigate around your service.
 
-{% call callout({ tagText: "Brand", colour: "green" }) %}
+{% call callout({ tagText: "Brand", colour: "green", isInset: "true" }) %}
 
 <h2 class="app-callout__heading">Brand changes to the {{title}} component</h2><p class="govuk-body">From June 2025, the {{title}} component will change to support a wider refresh of the GOV.UK brand.</p>
 
@@ -23,15 +23,17 @@ Service navigation helps users understand that they’re using your service and
 <li>reduces overall padding by [x]px</li>
 </ul>
 <p class="govuk-body">To help service teams in government get ready to use the new branding by June 2025, <a href="#update-to-refresh-the-govuk-brand">we’ve provided several options to update their services</a>.</p>
+
 {% endcall %}
 
 {{ example({ group: "components", item: "service-navigation", example: "default", html: true, nunjucks: true, open: false, loading: "eager" }) }}
 
-<strong class="govuk-tag brand-tag-green">
-  Brand
-</strong>
+{% call callout({ tagText: "Brand", colour: "green" }) %}
+
 <p class="govuk-body"><a href="#">See an example of the Service navigation showing the refreshed GOV.UK branding</a>.</p>
 
+{% endcall %}
+
 If you use the page template, you'll also get the Service navigation without having to add it, as it's included by default. However, if you want to customise the default Service navigation, read the [page template guidance about customising components](/styles/page-template/#changing-template-content).
 
 ## When to use this component

views/partials/_brand-callout.njk

@@ -7,19 +7,19 @@
       text: params.tagText,
       classes: "app-callout__tag app-callout__tag--" + params.colour
     }) }}
-    {% if params.heading %}
+    {% if params.heading -%}
       <h2 class="app-callout__heading">{{ params.heading }}</h2>
     {% endif -%}
-    {% if caller %}
-      {{ caller() }}
-    {% elif params.content %}
-      {{ params.content | safe }}
-    {% endif %}
+    {{ caller() if caller else params.content | safe }}
   {% endset -%}
 
-  {{ govukInsetText({
-    html: calloutContent,
-    classes: "app-callout app-callout--" + params.colour
-  }) }}
+  {% if params.isInset === "true" -%}
+    {{ govukInsetText({
+      html: calloutContent,
+      classes: "app-callout app-callout--" + params.colour
+    }) }}
+  {% else -%}
+    <div {% if params.id %}{{ params.id }} {% endif %}role="note">{{ calloutContent | trim | safe }}</div>
+  {% endif -%}
 
 {% endmacro %}