-
Notifications
You must be signed in to change notification settings - Fork 107
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add panel component #1012
base: main
Are you sure you want to change the base?
Add panel component #1012
Changes from all commits
b723225
b886cbf
a3f250e
32d2104
9ef9392
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
{% set html_style = 'background-color: #f0f4f5;' %} | ||
{% set title = 'Panel' %} | ||
{% from 'components/panel/macro.njk' import panel %} | ||
{% extends 'layout.njk' %} | ||
|
||
{% block body %} | ||
|
||
<div class="nhsuk-width-container"> | ||
<main class="nhsuk-main-wrapper"> | ||
|
||
<div class="nhsuk-grid-row"> | ||
<div class="nhsuk-grid-column-two-thirds"> | ||
{{ panel({ | ||
titleText: "Application complete", | ||
html: "Your reference number<br><strong>HDJ2123F</strong>" | ||
}) }} | ||
</div> | ||
</div> | ||
|
||
</main> | ||
</div> | ||
|
||
{% endblock %} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
# Panel | ||
|
||
## Guidance | ||
|
||
Find out more about the panel component and when to use it in the [NHS digital service manual](https://service-manual.nhs.uk/design-system/components/panel). | ||
|
||
## Quick start example | ||
|
||
[Preview the panel component](https://nhsuk.github.io/nhsuk-frontend/components/panel/index.html) | ||
|
||
### HTML markup | ||
|
||
```html | ||
<div class="nhsuk-panel"> | ||
<h1 class="nhsuk-panel__title"> | ||
Application complete | ||
</h1> | ||
<div class="nhsuk-panel__body"> | ||
Your reference number<br><strong>HDJ2123F</strong> | ||
</div> | ||
</div> | ||
``` | ||
|
||
### Nunjucks macro | ||
|
||
``` | ||
{% from 'components/panel/macro.njk' import panel %} | ||
|
||
{{ panel({ | ||
titleText: "Application complete", | ||
html: "Your reference number<br><strong>HDJ2123F</strong>" | ||
}) }} | ||
``` | ||
|
||
### Nunjucks arguments | ||
|
||
The panel Nunjucks macro takes the following arguments: | ||
|
||
| Name | Type | Required | Description | | ||
| ---------------- | -------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ||
| **titleText** | string | Yes | If `titleHtml` is set, this is not required. Text to use within the panel. If `titleHtml` is provided, the `titleText` option will be ignored. | | ||
| **titleHtml** | string | Yes | If `titleText` is set, this is not required. HTML to use within the panel. If `titleHtml` is provided, the `titleText` option will be ignored. | | ||
| **headingLevel** | integer | No | Heading level, from `1` to `6`. Default is `1`. | | ||
| **text** | string | No | If `html` is set, this is not required. Text to use within the panel content. If `html` is provided, the `text` option will be ignored. | | ||
| **html** | string | No | If `text` is set, this is not required. Text to use within the panel content. If `text` is provided, the `html` option will be ignored. | | ||
| **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 panel component in a `call` block. | | ||
| **classes** | string | No | Optional additional classes to add to the hint div tag. Separate each class with a space. | | ||
| **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the input component. | | ||
|
||
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). | ||
|
||
## Thanks to the Government Digital Service (GDS) | ||
|
||
This component and documentation has been taken from [GOV.UK Frontend - Panel component](https://github.com/alphagov/govuk-frontend/tree/main/package/govuk/components/panel) with a few minor adaptations. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
// ========================================================================== | ||
// COMPONENTS / #PANEL | ||
// ========================================================================== | ||
|
||
/** | ||
* Original code taken from GDS (Government Digital Service) | ||
* https://github.com/alphagov/govuk-frontend | ||
* | ||
* 1. This is an if-all-else-fails attempt to stop long words from overflowing the container | ||
on very narrow viewports by forcing them to break and wrap instead. This | ||
overflowing is more likely to happen when user increases text size on a mobile eg. using | ||
iOS Safari text resize controls. | ||
|
||
The overflowing is a particular problem with the panel component since it uses white | ||
text: when the text overflows the container, it is invisible on the white (page) | ||
background. When the text in our other components overflow, the user might have to scroll | ||
horizontally to view it but the the text remains legible. | ||
* 2. Support IE (autoprefixer doesn't add this as it's not a prefix) | ||
*/ | ||
|
||
$nhsuk-border-width-panel: nhsuk-spacing(1); | ||
|
||
.nhsuk-panel { | ||
@include nhsuk-typography-responsive(24); | ||
@include nhsuk-responsive-margin(4, "bottom"); | ||
|
||
background: $color_nhsuk-green; | ||
border: $nhsuk-border-width-panel solid transparent; | ||
box-sizing: border-box; | ||
color: $color_nhsuk-white; | ||
padding: nhsuk-spacing(6) - $nhsuk-border-width-panel; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. add comment for why this is different? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Which bit @edwardhorsford ? |
||
|
||
@include mq($until: tablet) { | ||
padding: nhsuk-spacing(4) - $nhsuk-border-width-panel; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. add comment for why this is differenet? |
||
overflow-wrap: break-word; /* [1] */ | ||
word-wrap: break-word; /* [2] */ | ||
} | ||
|
||
@include mq($media-type: print) { | ||
border-color: currentcolor; | ||
color: $nhsuk-print-text-color; | ||
background: none; | ||
} | ||
} | ||
|
||
.nhsuk-panel__title { | ||
@include nhsuk-typography-responsive(48); | ||
@include nhsuk-responsive-margin(5, "bottom"); | ||
|
||
margin-top: 0; | ||
} | ||
|
||
.nhsuk-panel__title:last-child { | ||
margin-bottom: 0; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{% macro panel(params) %} | ||
{%- include './template.njk' -%} | ||
{% endmacro %} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
{% from "../../macros/attributes.njk" import nhsukAttributes %} | ||
|
||
{% set headingLevel = params.headingLevel if params.headingLevel else 1 -%} | ||
|
||
<div class="nhsuk-panel | ||
{%- if params.classes %} {{ params.classes }}{% endif %}" | ||
{{- nhsukAttributes(params.attributes) }}> | ||
<h{{ headingLevel }} class="nhsuk-panel__title"> | ||
{{ params.titleHtml | safe if params.titleHtml else params.titleText }} | ||
</h{{ headingLevel }}> | ||
{% if caller or params.html or params.text %} | ||
<div class="nhsuk-panel__body"> | ||
{{ caller() if caller else (params.html | safe | trim | indent(4) if params.html else params.text) }} | ||
</div> | ||
{% endif %} | ||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I presume this is similar to the GOV.UK panel - we should double check this looks ok with changed / forced colours.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah that's taken from GOV. I'll check what it looks like with changed / forced colours.