Skip to content
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.

Sign up for GitHub

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

[refs #160] Rename and updates to care cards #252

Merged
merged 2 commits into from
Nov 27, 2018
Merged

[refs #160] Rename and updates to care cards #252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
85e110d
[refs #160] Rename and updates to care cards
mcheung-nhs Nov 26, 2018
fdfb029
[refs #160] Fix CSS linting error
mcheung-nhs Nov 27, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/components/care-card-emergency.njk → docs/components/care-card-immediate.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% set html_style = 'background-color: #f0f4f5;' %}
{% set title = 'Care card emergency (red and black)' %}
{% set title = 'Care card immediate (red and black)' %}
{% from 'components/care-card/macro.njk' import careCard %}
{% extends 'layout.njk' %}

Expand All @@ -11,7 +11,7 @@
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
{{ careCard({
"type": "emergency",
"type": "immediate",
"heading": "Call 999 if you have sudden chest pain that:",
"HTML": "
<ul>
Expand Down
2 changes: 1 addition & 1 deletion docs/components/care-card-non-urgent.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
{{ careCard({
"type": "primary",
"type": "non-urgent",
"heading": "Speak to a GP if:",
"HTML": "
<ul>
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/examples.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
<li><a href="../components/breadcrumb.html">Breadcrumb</a></li>
<li><a href="../components/care-card-non-urgent.html">Care card non-urgent (blue)</a></li>
<li><a href="../components/care-card-urgent.html">Care card urgent (red)</a></li>
<li><a href="../components/care-card-emergency.html">Care card emergency (red and black)</a></li>
<li><a href="../components/care-card-immediate.html">Care card immediate (red and black)</a></li>
<li><a href="../components/contents-list.html">Contents list</a></li>
<li><a href="../components/details.html">Details</a></li>
<li><a href="../components/do-dont-list.html">Do and Don't list</a></li>
Expand Down
68 changes: 36 additions & 32 deletions packages/components/care-card/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ To discuss or contribute to this component, visit the [GitHub issue for this com
```html
<div class="nhsuk-care-card">
<div class="nhsuk-care-card__heading-container">
<h3 class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">Non-urgent care: </span>Speak to a GP if:</h3>
<h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Non-urgent advice: </span>Speak to a GP if:</span></h3>
</div>
<div class="nhsuk-care-card__content">
<ul>
Expand All @@ -37,7 +37,7 @@ If you’re using Nunjucks macros in production be aware that using `html` argum
{% from 'components/care-card/macro.njk' import careCard %}

{{ careCard({
"type": "primary",
"type": "non-urgent",
"heading": "Speak to a GP if:",
"HTML": "
<ul>
Expand All @@ -53,15 +53,16 @@ If you’re using Nunjucks macros in production be aware that using `html` argum

#### Nunjucks arguments

If you are using Nunjucks, then macros take the following arguments:
The non-urgent care card Nunjucks macro takes the following arguments:

| Name | Type | Required | Description |
| --------------------|----------|-----------|--------------|
| type | string | Yes | Care card component variant types: "primary", "emergency", "urgent" |
| heading | string | Yes | Heading to be used within the care card component |
| HTML | string | Yes | Content to be used within the care card component |
| classes | string | No | Optional additional classes to add to the anchor tag. Separate each class with a space. |
| attributes | object | No | Any extra HTML attributes (for example data attributes) to add to the care card. |
| Name | Type | Required | Description |
| ------------------------|----------|-----------|--------------|
| **type** | string | Yes | Care card component variant type - "non-urgent" |
| **heading** | string | Yes | Heading to be used within the care card component |
| **HTML** | string | Yes | Content to be used within the care card component |
| **headingLevel** | integer | No | Optional heading level for the heading. Default: 3 |
| **classes** | string | No | Optional additional classes to add to the care card. Separate each class with a space. |
| **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the care card. |

### Care card urgent (red)

Expand All @@ -72,7 +73,7 @@ If you are using Nunjucks, then macros take the following arguments:
```html
<div class="nhsuk-care-card nhsuk-care-card--urgent">
<div class="nhsuk-care-card__heading-container">
<h3 class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">Urgent care low: </span>Ask for an urgent GP appointment if:</h3>
<h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Urgent advice: </span>Ask for an urgent GP appointment if:</span></h3>
</div>
<div class="nhsuk-care-card__content">
<ul>
Expand Down Expand Up @@ -109,26 +110,28 @@ If you’re using Nunjucks macros in production be aware that using `html` argum

#### Nunjucks arguments

If you are using Nunjucks, then macros take the following arguments:
The urgent care card Nunjucks macro takes the following arguments:

| Name | Type | Required | Description |
| --------------------|----------|-----------|--------------|
| type | string | Yes | Care card component variant types: "primary", "emergency", "urgent" |
| heading | string | Yes | Heading to be used within the care card component |
| HTML | string | Yes | Content to be used within the care card component |
| classes | string | No | Optional additional classes to add to the anchor tag. Separate each class with a space. |
| attributes | object | No | Any extra HTML attributes (for example data attributes) to add to the care card. |
| Name | Type | Required | Description |
| ------------------------|----------|-----------|--------------|
| **type** | string | Yes | Care card component variant type - "urgent" |
| **heading** | string | Yes | Heading to be used within the care card component |
| **HTML** | string | Yes | Content to be used within the care card component |
| **headingLevel** | integer | No | Optional heading level for the heading. Default: 3 |
| **classes** | string | No | Optional additional classes to add to the care card. Separate each class with a space. |
| **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the care card. |

### Care card emergency (red and black)

[Preview care card emergency (red and black) component](https://nhsuk.github.io/nhsuk-frontend/components/care-card-urgent.html)
### Care card immediate (red and black)

[Preview care card immediate (red and black) component](https://nhsuk.github.io/nhsuk-frontend/components/care-card-immediate.html)

### HTML markup

```html
<div class="nhsuk-care-card nhsuk-care-card--emergency">
<div class="nhsuk-care-card nhsuk-care-card--immediate">
<div class="nhsuk-care-card__heading-container">
<h3 class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">Urgent care high: </span>Call 999 if you have sudden chest pain that:</h3>
<h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Immediate action required: </span>Call 999 if you have sudden chest pain that:</span></h3>
</div>
<div class="nhsuk-care-card__content">
<ul>
Expand All @@ -149,7 +152,7 @@ If you’re using Nunjucks macros in production be aware that using `html` argum
{% from 'components/care-card/macro.njk' import careCard %}

{{ careCard({
"type": "emergency",
"type": "immediate",
"heading": "Call 999 if you have sudden chest pain that:",
"HTML": "
<ul>
Expand All @@ -163,12 +166,13 @@ If you’re using Nunjucks macros in production be aware that using `html` argum
```
#### Nunjucks arguments

If you are using Nunjucks, then macros take the following arguments:
The immediate care card Nunjucks macro takes the following arguments:

| Name | Type | Required | Description |
| --------------------|----------|-----------|--------------|
| type | string | Yes | Care card component variant types: "primary", "emergency", "urgent" |
| heading | string | Yes | Heading to be used within the care card component |
| HTML | string | Yes | Content to be used within the care card component |
| classes | string | No | Optional additional classes to add to the anchor tag. Separate each class with a space. |
| attributes | object | No | Any extra HTML attributes (for example data attributes) to add to the care card. |
| Name | Type | Required | Description |
| ------------------------|----------|-----------|--------------|
| **type** | string | Yes | Care card component variant type - "immediate" |
| **heading** | string | Yes | Heading to be used within the care card component |
| **HTML** | string | Yes | Content to be used within the care card component |
| **headingLevel** | integer | No | Optional heading level for the heading. Default: 3 |
| **classes** | string | No | Optional additional classes to add to the care card. Separate each class with a space. |
| **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the care card. |
2 changes: 1 addition & 1 deletion packages/components/care-card/_care-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
@include care-card($color_nhsuk-red, $color_nhsuk-white, 6px);
}

.nhsuk-care-card--emergency {
.nhsuk-care-card--immediate {
@include care-card($color_nhsuk-red, $color_nhsuk-white, 8px);

.nhsuk-care-card__content {
Expand Down
10 changes: 5 additions & 5 deletions packages/components/care-card/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
<div class="nhsuk-care-card">
<div class="nhsuk-care-card__heading-container">
<h3 class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">Non-urgent care: </span>Speak to a GP if:</h3>
<h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Non-urgent advice: </span>Speak to a GP if:</span></h3>
</div>
<div class="nhsuk-care-card__content">
<p>Test content with <a href="#">link</a>.</p>
</div>
</div>

<div class="nhsuk-care-card nhsuk-care-card--emergency">
<div class="nhsuk-care-card nhsuk-care-card--urgent">
<div class="nhsuk-care-card__heading-container">
<h3 class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">Urgent care low: </span>Ask for an urgent GP appointment if:</h3>
<h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Urgent advice: </span>Ask for an urgent GP appointment if:</span></h3>
</div>
<div class="nhsuk-care-card__content">
<p>Test content with <a href="#">link</a>.</p>
</div>
</div>

<div class="nhsuk-care-card nhsuk-care-card--urgent">
<div class="nhsuk-care-card nhsuk-care-card--immediate">
<div class="nhsuk-care-card__heading-container">
<h3 class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">Urgent care high: </span>Call 999 if you have sudden chest pain that:</h3>
<h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Immediate action required: </span>Call 999 if you have sudden chest pain that:</span></h3>
</div>
<div class="nhsuk-care-card__content">
<p>Test content with <a href="#">link</a>.</p>
Expand Down
4 changes: 2 additions & 2 deletions packages/components/care-card/template.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% set headingLevel = params.headingLevel if params.headingLevel else 3 %}
<div class="nhsuk-care-card {% if params.type %}nhsuk-care-card--{{ params.type }}{% endif %}" {% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
<div class="nhsuk-care-card {% if params.type %}nhsuk-care-card--{{ params.type }}{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}" {% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
<div class="nhsuk-care-card__heading-container">
<h{{ headingLevel }} class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">{% if type == 'grey' %}Non-urgent advice: {% elseif type == 'red' %}Urgent care low: {% elseif type == 'black' %}Urgent care high: {% else %}Non-urgent advice: {% endif %}</span>{{ params.heading }}</h{{ headingLevel }}>
<h{{ headingLevel }} class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">{% if params.type === 'non-urgent' %}Non-urgent advice: {% elseif params.type === 'urgent' %}Urgent advice: {% elseif params.type === 'immediate' %}Immediate action required: {% else %}Non-urgent advice: {% endif %}</span>{{ params.heading }}</span></h{{ headingLevel }}>
</div>
<div class="nhsuk-care-card__content">
{{ params.HTML | safe }}
Expand Down
1 change: 1 addition & 0 deletions packages/core/tools/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}

Expand Down