Skip to content

Commit 41e8389

Browse files
colinrotherhamcolinrotherham
committed
Code review feedback
1 parent 85d9c9f commit 41e8389

File tree

4 files changed

+22
-26
lines changed

4 files changed

+22
-26
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ This was added in [pull request #1172: Add table cell `classes` and `attributes`
6363

6464
#### Add html content and heading attributes to hero
6565

66-
You can now use `html`, `headingHtml`, `headingClasses` and `headingLevel` in the hero component.
66+
You can now use `caller`, `html`, `headingClasses` and `headingLevel` in the hero component.
6767

6868
This was added in [pull request #1201: Add missing params to hero component](https://github.com/nhsuk/nhsuk-frontend/pull/1201).
6969

‎app/components/hero/hero-with-html.njk

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,15 @@
55
{% extends 'example.njk' %}
66

77
{% block main %}
8-
{% set heroHtml %}
9-
<h1 class="nhsuk-heading-l nhsuk-u-margin-top-5">This is a header for the product or service</h1>
8+
{% call hero({
9+
heading: "This is a header for the product or service",
10+
headingClasses: "nhsuk-heading-l nhsuk-u-margin-top-5"
11+
}) %}
1012
<p class="nhsuk-body-l">This is some more content which explains a bit more about the product or service.</p>
1113

1214
{{ button({
1315
text: "Sign up",
1416
classes: "nhsuk-button--reverse"
1517
}) }}
16-
{% endset %}
17-
18-
{{ hero({
19-
html: heroHtml
20-
}) }}
18+
{% endcall %}
2119
{% endblock %}

‎packages/components/hero/README.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -103,16 +103,16 @@
103103

104104
The hero macro takes the following arguments:
105105

106-
| Name | Type | Required | Description |
107-
| ------------------ | ------- | -------- | --------------------------------------------------------------------------------------------------------- |
108-
| **heading** | string | No | Text heading of the hero component. If `headingHtml` is provided, the `heading` argument will be ignored. |
109-
| **headingHtml** | string | No | HTML heading of the hero component. If `headingHtml` is provided, the `heading` argument will be ignored. |
110-
| **headingClasses** | string | No | Optional additional classes to add to heading. Separate each class with a space. |
111-
| **headingLevel** | integer | No | Optional heading level for the heading. Default: `1` |
112-
| **text** | string | No | Text content of the hero component. If `html` is provided, the `text` argument will be ignored. |
113-
| **html** | string | No | HTML content of the hero component. If `html` is provided, the `text` argument will be ignored. |
114-
| **imageURL** | string | No | URL of the image of the hero component. |
115-
| **classes** | string | No | Optional additional classes to add to the hero container. Separate each class with a space. |
116-
| **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the hero container. |
106+
| Name | Type | Required | Description |
107+
| ------------------ | -------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
108+
| **heading** | string | No | Text heading of the hero component |
109+
| **headingClasses** | string | No | Optional additional classes to add to heading. Separate each class with a space. |
110+
| **headingLevel** | integer | No | Optional heading level for the heading. Default: `1` |
111+
| **text** | string | No | Text content of the hero component. If `html` is provided, the `text` argument will be ignored. |
112+
| **html** | string | No | HTML content of the hero component. If `html` is provided, the `text` argument will be ignored. |
113+
| **caller** | nunjucks-block | No | Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire hero component in a `call` block. |
114+
| **imageURL** | string | No | URL of the image of the hero component. |
115+
| **classes** | string | No | Optional additional classes to add to the hero container. Separate each class with a space. |
116+
| **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the hero container. |
117117

118118
If you are using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting). Read more about this in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).

‎packages/components/hero/template.njk

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,20 @@
99
{%- if params.imageURL %} style="background-image: url('{{ params.imageURL }}');"{% endif %}
1010
{{- nhsukAttributes(params.attributes) }}>
1111
{% if params.imageURL %}<div class="nhsuk-hero__overlay">{% endif %}
12-
{%- if params.heading or params.text or params.html %}
12+
{%- if caller or params.heading or params.text or params.html %}
1313
<div class="nhsuk-width-container{% if not params.imageURL %} nhsuk-hero--border{% endif %}">
1414
<div class="nhsuk-grid-row">
1515
<div class="nhsuk-grid-column-two-thirds">
1616
<div class="{% if params.imageURL %}nhsuk-hero-content{% else %}nhsuk-hero__wrapper{% endif %}">
17-
{% if params.headingHtml -%}
18-
{{ params.headingHtml | safe }}
19-
{%- elif params.heading -%}
17+
{%- if params.heading -%}
2018
<h{{ headingLevel }} class="nhsuk-hero__heading
2119
{%- if params.headingClasses %} {{ params.headingClasses }}{% endif %}
22-
{%- if not (params.text or params.html) %} nhsuk-u-margin-bottom-0{% endif %}">
20+
{%- if not (caller or params.text or params.html) %} nhsuk-u-margin-bottom-0{% endif %}">
2321
{{- params.heading -}}
2422
</h{{ headingLevel }}>
2523
{%- endif %}
26-
{% if params.html -%}
27-
{{ params.html | safe }}
24+
{% if caller or params.html -%}
25+
{{ caller() if caller else params.html | safe }}
2826
{%- elif params.text -%}
2927
<p class="nhsuk-body-l nhsuk-u-margin-bottom-0">{{ params.text }}</p>
3028
{%- endif %}

0 commit comments

Comments
 (0)