Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
nhsuk-frontend
Advanced tools
nhsuk-frontend - npm Package Compare versions
Comparing version 0.1.6 to 0.2.0
| { | ||
| "name": "nhsuk-frontend", | ||
| "version": "0.1.6", | ||
| "version": "0.2.0", | ||
| "description": "The NHS website frontend styles, for creating NHS websites and services.", | ||
@@ -28,2 +28,3 @@ "sasslintConfig": "config/sass-lint.yml", | ||
| "backstopjs": "^3.8.4", | ||
| "event-stream": "^3.3.4", | ||
| "gulp": "^4.0.0", | ||
@@ -30,0 +31,0 @@ "gulp-clean": "^0.4.0", |
@@ -45,7 +45,8 @@ # Action link | ||
| | Name | Type | Required | Description | | ||
| | -------------|----------|-----------|-------------| | ||
| | text | string | Yes | Text to be displayed within the action link component. | | ||
| | href | string | Yes | The value of the link href attribute | | ||
| | 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 anchor tag. | | ||
| | Name | Type | Required | Description | | ||
| | -----------------|----------|-----------|-------------| | ||
| | text | string | Yes | Text to be displayed within the action link component. | | ||
| | href | string | Yes | The value of the link href attribute | | ||
| | openInNewWindow | boolean | No | If set to true, then the link will open in a new window | | ||
| | 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 anchor tag. | |
@@ -19,22 +19,6 @@ # Breadcrumb | ||
| <ol class="nhsuk-breadcrumb__list"> | ||
| <li class="nhsuk-breadcrumb__item"> | ||
| <a href="https://www.nhs.uk/" class="nhsuk-breadcrumb__link" >Home</a> | ||
| <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"> | ||
| <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"/> | ||
| </svg> | ||
| </li> | ||
| <li class="nhsuk-breadcrumb__item"> | ||
| <a href="https://www.nhs.uk/conditions" class="nhsuk-breadcrumb__link" >Health A-Z</a> | ||
| <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"> | ||
| <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"/> | ||
| </svg> | ||
| </li> | ||
| <li class="nhsuk-breadcrumb__item"><a href="https://www.nhs.uk/conditions/abscess/" class="nhsuk-breadcrumb__link">Abscess</a></li> | ||
| <li class="nhsuk-breadcrumb__item"><a href="https://www.nhs.uk/" class="nhsuk-breadcrumb__link">Home</a></li> | ||
| <li class="nhsuk-breadcrumb__item"><a href="https://www.nhs.uk/conditions" class="nhsuk-breadcrumb__link">Health A-Z</a></li> | ||
| </ol> | ||
| <p class="nhsuk-breadcrumb__back"> | ||
| <svg class="nhsuk-icon nhsuk-icon__chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"> | ||
| <path d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z"/> | ||
| </svg> | ||
| <a href="https://www.nhs.uk/conditions/abscess/" class="nhsuk-breadcrumb__backlink">Back to Abscess</a> | ||
| </p> | ||
| <p class="nhsuk-breadcrumb__back"><a href="https://www.nhs.uk/conditions/abscess/" class="nhsuk-breadcrumb__backlink">Back to Abscess</a></p> | ||
| </div> | ||
@@ -48,3 +32,3 @@ </nav> | ||
| ``` | ||
| ``` | ||
| {% from 'components/breadcrumb/macro.njk' import breadcrumb %} | ||
@@ -70,3 +54,3 @@ | ||
| If you are using Nunjucks, then macros take the following arguments: | ||
| If you are using Nunjucks, then macros take the following arguments: | ||
@@ -81,3 +65,3 @@ | Name | Type | Required | Description | | ||
| | text | string | Yes | Text for the current page | | ||
| | classes | string | No | Optional additional classes to add to the anchor tag. Separate each class with a space. | | ||
| | classes | string | No | Optional additional classes to add to the breadcrumbs container. Separate each class with a space. | | ||
| | attributes | object | No | Any extra HTML attributes (for example data attributes) to add to the breadcrumbs container. | |
@@ -18,3 +18,3 @@ # Care cards | ||
| <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> | ||
@@ -41,3 +41,3 @@ <div class="nhsuk-care-card__content"> | ||
| {{ careCard({ | ||
| "type": "primary", | ||
| "type": "non-urgent", | ||
| "heading": "Speak to a GP if:", | ||
@@ -58,11 +58,12 @@ "HTML": " | ||
| 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. | | ||
@@ -78,3 +79,3 @@ ### Care card urgent (red) | ||
| <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> | ||
@@ -116,22 +117,24 @@ <div class="nhsuk-care-card__content"> | ||
| 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> | ||
@@ -157,3 +160,3 @@ <div class="nhsuk-care-card__content"> | ||
| {{ careCard({ | ||
| "type": "emergency", | ||
| "type": "immediate", | ||
| "heading": "Call 999 if you have sudden chest pain that:", | ||
@@ -172,10 +175,11 @@ "HTML": " | ||
| 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. | |
@@ -19,4 +19,4 @@ # Contents list | ||
| <ol class="nhsuk-contents-list__list"> | ||
| <li class="nhsuk-contents-list__item"> | ||
| <span class="nhsuk-contents-list__current" aria-current="page">What is AMD?</span> | ||
| <li class="nhsuk-contents-list__item" aria-current="page"> | ||
| <span class="nhsuk-contents-list__current">What is AMD?</span> | ||
| </li> | ||
@@ -77,10 +77,11 @@ <li class="nhsuk-contents-list__item"> | ||
| If you are using Nunjucks, then macros take the following arguments: | ||
| The contents list Nunjucks macro takes the following arguments: | ||
| | Name | Type | Required | Description | | ||
| | --------------------|----------|-----------|--------------| | ||
| | text | string | Yes | text value of the items in the contents list. | | ||
| | href | string | Yes | href value of the items in contents list. | | ||
| | current | boolean | No | Current active page in the contents list. | | ||
| | classes | string | No | Optional additional classes content list container. Separate each class with a space. | | ||
| | attributes | object | No | Any extra HTML attributes (for example data attributes) to items in the list. | | ||
| | Name | Type | Required | Description | | ||
| | ------------------------|----------|-----------|--------------| | ||
| | **items** | array | Yes | Array of items in the contents list. | | ||
| | **items.[].href** | string | Yes | Href value of an item in the contents list. | | ||
| | **items.[].text** | string | Yes | Text value of an item in the contents llst. | | ||
| | **current** | boolean | No | Current active page in the contents list. | | ||
| | **classes** | string | No | Optional additional classes content list container. Separate each class with a space. | | ||
| | **attributes** | object | No | Any extra HTML attributes (for example data attributes) to items in the list. | |
@@ -18,3 +18,3 @@ # Do and don't list | ||
| <h3 class="nhsuk-do-dont-list__tab-heading">Do</h3> | ||
| <ul class="nhsuk-list nhsuk-list--check"> | ||
| <ul class="nhsuk-list nhsuk-list--tick"> | ||
| <li> | ||
@@ -123,8 +123,9 @@ <svg class="nhsuk-icon nhsuk-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"> | ||
| | Name | Type | Required | Description | | ||
| | -------------|----------|-----------|-------------| | ||
| | title | string | Yes | Title to be displayed on the do and don't list component. | | ||
| | type | string | Yes | Type of do and don't list component, "cross", "tick" | | ||
| | items | array | Yes | Items to be displayed within the do and don't list component | | ||
| | classes | string | No | Optional additional classes to add to the do and dont list container. Separate each class with a space. | | ||
| | attributes | object | No | Any extra HTML attributes (for example data attributes) to add to the do and don't list container. | | ||
| | Name | Type | Required | Description | | ||
| | ------------------|----------|-----------|-------------| | ||
| | **title** | string | Yes | Title to be displayed on the do and don't list component. | | ||
| | **type** | string | Yes | Type of do and don't list component, "cross", "tick" | | ||
| | **items** | array | Yes | Items to be displayed within the do and don't list component | | ||
| | **headingLevel** | integer | No | Optional heading level for the title heading. Default: 3 | | ||
| | **classes** | string | No | Optional additional classes to add to the do and don't list container. Separate each class with a space. | | ||
| | **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the do and don't list container. | |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.97%
764960
- Lines of code
- increased by0.32%
5064
Worsened metrics
- Dev dependency count
- increased by4.76%
22
No dependency changes