Report components Heading
Contents
<div class="dpr-report-header">
<div class="dpr-report-heading">
<div class="dpr-report-heading__title">
<span class="govuk-caption-l">Product Name</span>
<h1 class="govuk-heading-l">
Variant Name
</h1>
</div>
</div>
<details class="govuk-details dpr-meta-data-details" open>
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Report details
</span>
</summary>
<div class="govuk-details__text">
<div class="dpr-request-details">
<table class="dpr-request-details__table">
<tbody>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
</td>
<td>
<h1 class="govuk-heading-s govuk-!-margin-bottom-1">Variant Name</h1>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Product:</p>
</td>
<td>
<h1 class="govuk-heading-s govuk-!-margin-bottom-1">Product Name</h1>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Description:</p>
</td>
<td>
<p class="govuk-body-m govuk-!-margin-bottom-1">Report Description</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</details>
<div class="dpr-report-details-print">
<div class="dpr-request-details">
<table class="dpr-request-details__table">
<tbody>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
</td>
<td>
<h1 class="govuk-heading-s govuk-!-margin-bottom-1">Variant Name</h1>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Product:</p>
</td>
<td>
<h1 class="govuk-heading-s govuk-!-margin-bottom-1">Product Name</h1>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Description:</p>
</td>
<td>
<p class="govuk-body-m govuk-!-margin-bottom-1">Report Description</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| name | string |
Yes | The product/report name |
| reportName | string |
Yes | The report variant name |
| description | string |
no | The report description |
| actions | object |
No | The report actions list. See Actions |
| detailsOpen | boolean |
No | Set the report details default state |
{% from "dpr/components/_reports/report-heading/view.njk" import dprReportHeading %}
{{ dprReportHeading({
name: 'Variant Name',
reportName: 'Product Name',
description: 'Report Description',
detailsOpen: true
}) }}
Overview
The report heading component displays the important information of a report, and enables all available report actions for the report.
When to use
Use the Heading component when you need to help users:
- display the report name and report variant name.
- display the report details, inlcuding description and request parameters
- include report actions along side the report.
How to use
This component is designed to be used as the heading for a report. It should be included at the top of the report page to allow users to see the report imformaton clearly and immediatley, and highlight what report actions are available.
Basic usage
Display the report name, variant name and description
Contents
<div class="dpr-report-header">
<div class="dpr-report-heading">
<div class="dpr-report-heading__title">
<span class="govuk-caption-l">Product Name</span>
<h1 class="govuk-heading-l">
Variant Name
</h1>
</div>
</div>
<details class="govuk-details dpr-meta-data-details" open>
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Report details
</span>
</summary>
<div class="govuk-details__text">
<div class="dpr-request-details">
<table class="dpr-request-details__table">
<tbody>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
</td>
<td>
<h1 class="govuk-heading-s govuk-!-margin-bottom-1">Variant Name</h1>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Product:</p>
</td>
<td>
<h1 class="govuk-heading-s govuk-!-margin-bottom-1">Product Name</h1>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Description:</p>
</td>
<td>
<p class="govuk-body-m govuk-!-margin-bottom-1">Report Description</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</details>
<div class="dpr-report-details-print">
<div class="dpr-request-details">
<table class="dpr-request-details__table">
<tbody>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
</td>
<td>
<h1 class="govuk-heading-s govuk-!-margin-bottom-1">Variant Name</h1>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Product:</p>
</td>
<td>
<h1 class="govuk-heading-s govuk-!-margin-bottom-1">Product Name</h1>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Description:</p>
</td>
<td>
<p class="govuk-body-m govuk-!-margin-bottom-1">Report Description</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| name | string |
Yes | The product/report name |
| reportName | string |
Yes | The report variant name |
| description | string |
no | The report description |
| actions | object |
No | The report actions list. See Actions |
| detailsOpen | boolean |
No | Set the report details default state |
{% from "dpr/components/_reports/report-heading/view.njk" import dprReportHeading %}
{{ dprReportHeading({
name: 'Variant Name',
reportName: 'Product Name',
description: 'Report Description',
detailsOpen: true
}) }}
Heading with actions
Display the report information along side the report actions. See the Actions component
Contents
<div class="dpr-report-header">
<div class="dpr-report-heading">
<div class="dpr-report-heading__title">
<span class="govuk-caption-l">Product Name</span>
<h1 class="govuk-heading-l">
Variant Name
</h1>
</div>
<div class="dpr-report-heading__actions">
<div class="report-actions" data-dpr-module='report-actions'>
<div class="moj-button-menu">
<button type="submit" class="govuk-button moj-button-menu__item govuk-button--secondary {{ button.id }}" data-module="govuk-button" id="dpr-button-printable" data-href="#" aria-label="print report">
Print
</button>
<button type="submit" class="govuk-button moj-button-menu__item govuk-button--secondary {{ button.id }}" data-module="govuk-button" id="dpr-button-sharable" data-href="mailto:?subject=Product Name - Variant Name&body=link/to/report" aria-label="share report request via email">
Share
</button>
<button type="submit" class="govuk-button moj-button-menu__item govuk-button--secondary {{ button.id }}" data-module="govuk-button" id="dpr-button-copy" data-href="url/of/report" aria-label="report request">
Copy
</button>
</div>
<div class="dpr-display-none">
</div>
</div>
</div>
</div>
<details class="govuk-details dpr-meta-data-details" open>
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Report details
</span>
</summary>
<div class="govuk-details__text">
<div class="dpr-request-details">
<table class="dpr-request-details__table">
<tbody>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
</td>
<td>
<h1 class="govuk-heading-s govuk-!-margin-bottom-1">Variant Name</h1>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Product:</p>
</td>
<td>
<h1 class="govuk-heading-s govuk-!-margin-bottom-1">Product Name</h1>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Description:</p>
</td>
<td>
<p class="govuk-body-m govuk-!-margin-bottom-1">Report Description</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</details>
<div class="dpr-report-details-print">
<div class="dpr-request-details">
<table class="dpr-request-details__table">
<tbody>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
</td>
<td>
<h1 class="govuk-heading-s govuk-!-margin-bottom-1">Variant Name</h1>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Product:</p>
</td>
<td>
<h1 class="govuk-heading-s govuk-!-margin-bottom-1">Product Name</h1>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Description:</p>
</td>
<td>
<p class="govuk-body-m govuk-!-margin-bottom-1">Report Description</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
{% from "dpr/components/_reports/report-heading/view.njk" import dprReportHeading %}
{% set actions = [
{
id: "dpr-button-printable",
disabled: false,
tooltipText: "Print",
ariaLabelText: "print report",
href: "#"
},
{
id: "dpr-button-sharable",
disabled: false,
tooltipText: "Share",
ariaLabelText: "share report request via email",
href: "mailto:?subject=Product Name - Variant Name&body=link/to/report"
},
{
id: "dpr-button-copy",
disabled: false,
tooltipText: "Copy",
ariaLabelText: "report request",
href: "url/of/report"
}
] %}
{{ dprReportHeading({
name: 'Variant Name',
reportName: 'Product Name',
description: 'Report Description',
actions: actions,
detailsOpen: true
}) }}