@ministryofjustice/frontend 1.5.0 → 1.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/govuk-prototype-kit.config.json +85 -4
- package/moj/components/action-bar/README.md +2 -3
- package/moj/components/add-another/README.md +2 -3
- package/moj/components/badge/README.md +30 -31
- package/moj/components/button-menu/README.md +20 -20
- package/moj/components/cookie-banner/README.md +1 -2
- package/moj/components/currency-input/README.md +53 -46
- package/moj/components/filter-toggle-button/README.md +2 -3
- package/moj/components/form-validator/README.md +2 -3
- package/moj/components/header/README.md +25 -27
- package/moj/components/messages/README.md +15 -15
- package/moj/components/multi-select/README.md +1 -3
- package/moj/components/notification-badge/README.md +3 -4
- package/moj/components/organisation-switcher/README.md +3 -4
- package/moj/components/page-header-actions/README.md +2 -3
- package/moj/components/pagination/README.md +2 -3
- package/moj/components/password-reveal/README.md +1 -2
- package/moj/components/primary-navigation/README.md +17 -19
- package/moj/components/progress-bar/README.md +3 -4
- package/moj/components/rich-text-editor/README.md +1 -3
- package/moj/components/search/README.md +2 -3
- package/moj/components/side-navigation/README.md +27 -29
- package/moj/components/sortable-table/README.md +2 -3
- package/moj/components/sub-navigation/README.md +16 -18
- package/moj/components/tag/README.md +23 -24
- package/moj/components/task-list/README.md +26 -28
- package/moj/components/ticket-panel/README.md +20 -20
- package/moj/components/timeline/README.md +28 -28
- package/moj/filters/prototype-kit-13-filters.js +8 -0
- package/moj/objects/_scrollable-pane.scss +37 -40
- package/package.json +1 -1
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
# Pagination
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/pagination)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/pagination)
|
|
5
4
|
|
|
6
|
-
## Arguments
|
|
5
|
+
## Arguments
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
# Primary navigation
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/primary-navigation)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/primary-navigation)
|
|
5
4
|
|
|
6
5
|
## Example
|
|
7
6
|
|
|
@@ -28,24 +27,23 @@ This component accepts the following arguments.
|
|
|
28
27
|
|
|
29
28
|
### Container
|
|
30
29
|
|
|
31
|
-
|Name|Type|Required|Description|
|
|
32
|
-
|
|
33
|
-
|label|string|No|The `aria-label` to add to the navigation container
|
|
34
|
-
|items|array|Yes|An array of navigation item objects. See [items](#items)
|
|
35
|
-
|searchHtml|sting|No
|
|
36
|
-
|containerClasses|string|No|Classes to add to the parent `div` container
|
|
37
|
-
|classes|string|No|Classes to add to the `nav` container
|
|
38
|
-
|attributes|object|No|HTML attributes (for example data attributes) to add to the `nav` container
|
|
30
|
+
| Name | Type | Required | Description |
|
|
31
|
+
| ---------------- | ------ | -------- | ---------------------------------------------------------------------------- |
|
|
32
|
+
| label | string | No | The `aria-label` to add to the navigation container. |
|
|
33
|
+
| items | array | Yes | An array of navigation item objects. See [items](#items). |
|
|
34
|
+
| searchHtml | sting | No | |
|
|
35
|
+
| containerClasses | string | No | Classes to add to the parent `div` container. |
|
|
36
|
+
| classes | string | No | Classes to add to the `nav` container. |
|
|
37
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the `nav` container. |
|
|
39
38
|
|
|
40
39
|
### Items
|
|
41
40
|
|
|
42
|
-
|Name|Type|Required|Description|
|
|
43
|
-
|
|
44
|
-
|href|string|Yes|URL of the navigation item anchor. Both href and text attributes for navigation items need to be provided to create an item
|
|
45
|
-
|text|string|Yes|If `html` is set, this is not required. Text to use within the anchor. If `html` is provided, the `text` argument will be ignored
|
|
46
|
-
|html|string|Yes|If `text` is set, this is not required. HTML to use within the anchor. If `html` is provided, the `text` argument will be ignored
|
|
47
|
-
|active|boolean|No|Flag to mark the navigation item as active or not. Defaults to `false
|
|
48
|
-
|attributes|object|No|HTML attributes (for example data attributes) to add to the navigation item anchor
|
|
41
|
+
| Name | Type | Required | Description |
|
|
42
|
+
| ---------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|
|
43
|
+
| href | string | Yes | URL of the navigation item anchor. Both href and text attributes for navigation items need to be provided to create an item. |
|
|
44
|
+
| text | string | Yes | If `html` is set, this is not required. Text to use within the anchor. If `html` is provided, the `text` argument will be ignored. |
|
|
45
|
+
| html | string | Yes | If `text` is set, this is not required. HTML to use within the anchor. If `html` is provided, the `text` argument will be ignored. |
|
|
46
|
+
| active | boolean | No | Flag to mark the navigation item as active or not. Defaults to `false`. |
|
|
47
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the navigation item anchor. |
|
|
49
48
|
|
|
50
|
-
|
|
51
|
-
*Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with `.html` can be at risk from [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks. More information about security vulnerabilities can be found in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).*
|
|
49
|
+
_Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with `.html` can be at risk from [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks. More information about security vulnerabilities can be found in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning)._
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
# Progress bar
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/progress-bar)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/progress-bar)
|
|
5
4
|
|
|
6
5
|
## Arguments
|
|
7
6
|
|
|
8
|
-
|Name|Type|Required|Description|
|
|
9
|
-
|
|
7
|
+
| Name | Type | Required | Description |
|
|
8
|
+
| ---- | ---- | -------- | ----------- |
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
# Rich text editor
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/rich-text-editor)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/rich-text-editor)
|
|
5
4
|
|
|
6
5
|
## Example
|
|
7
6
|
|
|
@@ -15,4 +14,3 @@
|
|
|
15
14
|
```
|
|
16
15
|
|
|
17
16
|
## Options
|
|
18
|
-
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
# Side navigation
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/side-navigation)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/side-navigation)
|
|
5
4
|
|
|
6
5
|
## Example
|
|
7
6
|
|
|
@@ -28,40 +27,39 @@ This component accepts the following arguments.
|
|
|
28
27
|
|
|
29
28
|
### Container
|
|
30
29
|
|
|
31
|
-
|Name|Type|Required|Description|
|
|
32
|
-
|
|
33
|
-
|label|string|No|The `aria-label` to add to the navigation container
|
|
34
|
-
|items|array|Yes|An array of navigation item objects. See [items](#items)
|
|
35
|
-
|sections|array|No|An array of navigation section objects. See [sections](#sections)
|
|
36
|
-
|classes|string|No|Classes to add to the `nav` container
|
|
37
|
-
|attributes|object|No|HTML attributes (for example data attributes) to add to the `nav` container
|
|
30
|
+
| Name | Type | Required | Description |
|
|
31
|
+
| ---------- | ------ | -------- | ---------------------------------------------------------------------------- |
|
|
32
|
+
| label | string | No | The `aria-label` to add to the navigation container. |
|
|
33
|
+
| items | array | Yes | An array of navigation item objects. See [items](#items). |
|
|
34
|
+
| sections | array | No | An array of navigation section objects. See [sections](#sections). |
|
|
35
|
+
| classes | string | No | Classes to add to the `nav` container. |
|
|
36
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the `nav` container. |
|
|
38
37
|
|
|
39
38
|
### Sections
|
|
40
39
|
|
|
41
|
-
|Name|Type|Required|Description|
|
|
42
|
-
|
|
43
|
-
|items|array|Yes|An array of navigation item objects. See [items](#items)
|
|
44
|
-
|heading|object|Yes|See [heading](#headings)|
|
|
40
|
+
| Name | Type | Required | Description |
|
|
41
|
+
| ------- | ------ | -------- | --------------------------------------------------------- |
|
|
42
|
+
| items | array | Yes | An array of navigation item objects. See [items](#items). |
|
|
43
|
+
| heading | object | Yes | See [heading](#headings) |
|
|
45
44
|
|
|
46
45
|
#### Headings
|
|
47
46
|
|
|
48
|
-
|Name|Type|Required|Description|
|
|
49
|
-
|
|
50
|
-
|headingLevel|numeric|No|A number for the heading level. Defaults to 4 (`<h4>`)|
|
|
51
|
-
|text|string|Yes|If `html` is set, this is not required. Text to use within the heading. If `html` is provided, the `text` argument will be ignored
|
|
52
|
-
|html|string|Yes|If `text` is set, this is not required. HTML to use within the heading. If `html` is provided, the `text` argument will be ignored
|
|
53
|
-
|classes|string|No|Classes to add to the heading
|
|
54
|
-
|attributes|object|No|HTML attributes (for example data attributes) to add to the navigation item anchor
|
|
47
|
+
| Name | Type | Required | Description |
|
|
48
|
+
| ------------ | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------- |
|
|
49
|
+
| headingLevel | numeric | No | A number for the heading level. Defaults to 4 (`<h4>`) |
|
|
50
|
+
| text | string | Yes | If `html` is set, this is not required. Text to use within the heading. If `html` is provided, the `text` argument will be ignored. |
|
|
51
|
+
| html | string | Yes | If `text` is set, this is not required. HTML to use within the heading. If `html` is provided, the `text` argument will be ignored. |
|
|
52
|
+
| classes | string | No | Classes to add to the heading. |
|
|
53
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the navigation item anchor. |
|
|
55
54
|
|
|
56
55
|
### Items
|
|
57
56
|
|
|
58
|
-
|Name|Type|Required|Description|
|
|
59
|
-
|
|
60
|
-
|href|string|Yes|URL of the navigation item anchor. Both href and text attributes for navigation items need to be provided to create an item
|
|
61
|
-
|text|string|Yes|If `html` is set, this is not required. Text to use within the anchor. If `html` is provided, the `text` argument will be ignored
|
|
62
|
-
|html|string|Yes|If `text` is set, this is not required. HTML to use within the anchor. If `html` is provided, the `text` argument will be ignored
|
|
63
|
-
|active|boolean|No|Flag to mark the navigation item as active or not. Defaults to `false
|
|
64
|
-
|attributes|object|No|HTML attributes (for example data attributes) to add to the navigation item anchor
|
|
57
|
+
| Name | Type | Required | Description |
|
|
58
|
+
| ---------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|
|
59
|
+
| href | string | Yes | URL of the navigation item anchor. Both href and text attributes for navigation items need to be provided to create an item. |
|
|
60
|
+
| text | string | Yes | If `html` is set, this is not required. Text to use within the anchor. If `html` is provided, the `text` argument will be ignored. |
|
|
61
|
+
| html | string | Yes | If `text` is set, this is not required. HTML to use within the anchor. If `html` is provided, the `text` argument will be ignored. |
|
|
62
|
+
| active | boolean | No | Flag to mark the navigation item as active or not. Defaults to `false`. |
|
|
63
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the navigation item anchor. |
|
|
65
64
|
|
|
66
|
-
|
|
67
|
-
*Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with `.html` can be at risk from [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks. More information about security vulnerabilities can be found in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).*
|
|
65
|
+
_Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with `.html` can be at risk from [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks. More information about security vulnerabilities can be found in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning)._
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
# Sortable table
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/sortable-table)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/sortable-table)
|
|
5
4
|
|
|
6
|
-
## Arguments
|
|
5
|
+
## Arguments
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
# Sub navigation
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/sub-navigation)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/sub-navigation)
|
|
5
4
|
|
|
6
5
|
## Example
|
|
7
6
|
|
|
@@ -28,23 +27,22 @@ This component accepts the following arguments.
|
|
|
28
27
|
|
|
29
28
|
### Container
|
|
30
29
|
|
|
31
|
-
|Name|Type|Required|Description|
|
|
32
|
-
|
|
33
|
-
|label|string|No|The `aria-label` to add to the `nav` container
|
|
34
|
-
|items|array|Yes|An array of navigation item objects. See [items](#items)
|
|
35
|
-
|classes|string|No|Classes to add to the `nav` container
|
|
36
|
-
|attributes|object|No|HTML attributes (for example data attributes) to add to the `nav` container
|
|
37
|
-
|
|
30
|
+
| Name | Type | Required | Description |
|
|
31
|
+
| ---------- | ------ | -------- | ---------------------------------------------------------------------------- |
|
|
32
|
+
| label | string | No | The `aria-label` to add to the `nav` container. |
|
|
33
|
+
| items | array | Yes | An array of navigation item objects. See [items](#items). |
|
|
34
|
+
| classes | string | No | Classes to add to the `nav` container. |
|
|
35
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the `nav` container. |
|
|
38
36
|
|
|
39
37
|
### Items
|
|
40
38
|
|
|
41
|
-
|Name|Type|Required|Description|
|
|
42
|
-
|
|
43
|
-
|href|string|Yes|URL of the navigation item anchor. Both href and text attributes for navigation items need to be provided to create an item
|
|
44
|
-
|text|string|Yes|If `html` is set, this is not required. Text to use within the anchor. If `html` is provided, the `text` argument will be ignored
|
|
45
|
-
|html|string|Yes|If `text` is set, this is not required. HTML to use within the anchor. If `html` is provided, the `text` argument will be ignored
|
|
46
|
-
|active|boolean|No|Flag to mark the navigation item as active or not. Defaults to `false
|
|
47
|
-
|classes|string|No|Classes to add to the list `li` item
|
|
48
|
-
|attributes|object|No|HTML attributes (for example data attributes) to add to the navigation item anchor
|
|
39
|
+
| Name | Type | Required | Description |
|
|
40
|
+
| ---------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|
|
41
|
+
| href | string | Yes | URL of the navigation item anchor. Both href and text attributes for navigation items need to be provided to create an item. |
|
|
42
|
+
| text | string | Yes | If `html` is set, this is not required. Text to use within the anchor. If `html` is provided, the `text` argument will be ignored. |
|
|
43
|
+
| html | string | Yes | If `text` is set, this is not required. HTML to use within the anchor. If `html` is provided, the `text` argument will be ignored. |
|
|
44
|
+
| active | boolean | No | Flag to mark the navigation item as active or not. Defaults to `false`. |
|
|
45
|
+
| classes | string | No | Classes to add to the list `li` item. |
|
|
46
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the navigation item anchor. |
|
|
49
47
|
|
|
50
|
-
|
|
48
|
+
_Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with `.html` can be at risk from [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks. More information about security vulnerabilities can be found in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning)._
|
|
@@ -1,29 +1,28 @@
|
|
|
1
1
|
# Badge
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/tag)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/tag)
|
|
5
4
|
|
|
6
5
|
## Classes
|
|
7
6
|
|
|
8
|
-
|Name|Colour code|Colour contrast|
|
|
9
|
-
|
|
10
|
-
|moj-tag--purple
|
|
11
|
-
|moj-tag--light-purple
|
|
12
|
-
|moj-tag--bright-purple
|
|
13
|
-
|moj-tag--pink
|
|
14
|
-
|moj-tag--light-pink
|
|
15
|
-
|moj-tag--red
|
|
16
|
-
|moj-tag--orange
|
|
17
|
-
|moj-tag--brown
|
|
18
|
-
|moj-tag--yellow
|
|
19
|
-
|moj-tag--light-green
|
|
20
|
-
|moj-tag--green
|
|
21
|
-
|moj-tag--turquoise
|
|
22
|
-
|moj-tag--light-blue
|
|
23
|
-
|moj-tag--blue
|
|
24
|
-
|moj-tag--black
|
|
25
|
-
|moj-tag--dark-grey
|
|
26
|
-
|moj-tag--mid-grey
|
|
27
|
-
|moj-tag--light-grey
|
|
28
|
-
|moj-tag--light-grey
|
|
29
|
-
|moj-tag--white
|
|
7
|
+
| Name | Colour code | Colour contrast |
|
|
8
|
+
| ---------------------- | ----------- | --------------- |
|
|
9
|
+
| moj-tag--purple | #2e358b | |
|
|
10
|
+
| moj-tag--light-purple | #6f72af | |
|
|
11
|
+
| moj-tag--bright-purple | #912b88 | |
|
|
12
|
+
| moj-tag--pink | #d53880 | |
|
|
13
|
+
| moj-tag--light-pink | #f499be | |
|
|
14
|
+
| moj-tag--red | #b10e1e | |
|
|
15
|
+
| moj-tag--orange | #f47738 | |
|
|
16
|
+
| moj-tag--brown | #b58840 | |
|
|
17
|
+
| moj-tag--yellow | #ffbf47 | |
|
|
18
|
+
| moj-tag--light-green | #85994b | |
|
|
19
|
+
| moj-tag--green | #006435 | |
|
|
20
|
+
| moj-tag--turquoise | #28a197 | |
|
|
21
|
+
| moj-tag--light-blue | #2b8cc4 | |
|
|
22
|
+
| moj-tag--blue | #005ea5 | |
|
|
23
|
+
| moj-tag--black | #0b0c0c | |
|
|
24
|
+
| moj-tag--dark-grey | #6f777b | |
|
|
25
|
+
| moj-tag--mid-grey | #bfc1c3 | |
|
|
26
|
+
| moj-tag--light-grey | #dee0e2 | |
|
|
27
|
+
| moj-tag--light-grey | #f8f8f8 | |
|
|
28
|
+
| moj-tag--white | #ffffff | |
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
# Task list
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/task-list)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/patterns/task-list)
|
|
5
4
|
|
|
6
5
|
## Example
|
|
7
6
|
|
|
@@ -49,39 +48,38 @@ This component accepts the following arguments.
|
|
|
49
48
|
|
|
50
49
|
### Container
|
|
51
50
|
|
|
52
|
-
|Name|Type|Required|Description|
|
|
53
|
-
|
|
54
|
-
|sections|array|No|An array of section objects containing task list items. See [sections](#sections)
|
|
55
|
-
|classes|string|No|Classes to add to the `nav` container
|
|
56
|
-
|attributes|object|No|HTML attributes (for example data attributes) to add to the `ol` container
|
|
51
|
+
| Name | Type | Required | Description |
|
|
52
|
+
| ---------- | ------ | -------- | ---------------------------------------------------------------------------------- |
|
|
53
|
+
| sections | array | No | An array of section objects containing task list items. See [sections](#sections). |
|
|
54
|
+
| classes | string | No | Classes to add to the `nav` container. |
|
|
55
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the `ol` container. |
|
|
57
56
|
|
|
58
57
|
### Sections
|
|
59
58
|
|
|
60
|
-
|Name|Type|Required|Description|
|
|
61
|
-
|
|
62
|
-
|items|array|Yes|An array of task list item objects. See [items](#items)
|
|
63
|
-
|heading|object|Yes|See [heading](#headings)|
|
|
64
|
-
|attributes|object|No|HTML attributes (for example data attributes) to add to the section `li
|
|
59
|
+
| Name | Type | Required | Description |
|
|
60
|
+
| ---------- | ------ | -------- | ------------------------------------------------------------------------- |
|
|
61
|
+
| items | array | Yes | An array of task list item objects. See [items](#items). |
|
|
62
|
+
| heading | object | Yes | See [heading](#headings) |
|
|
63
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the section `li`. |
|
|
65
64
|
|
|
66
65
|
#### Headings
|
|
67
66
|
|
|
68
|
-
|Name|Type|Required|Description|
|
|
69
|
-
|
|
70
|
-
|headingLevel|numeric|No|A number for the heading level. Defaults to 2 (`<h2>`)|
|
|
71
|
-
|text|string|Yes|If `html` is set, this is not required. Text to use within the heading. If `html` is provided, the `text` argument will be ignored
|
|
72
|
-
|html|string|Yes|If `text` is set, this is not required. HTML to use within the heading. If `html` is provided, the `text` argument will be ignored
|
|
73
|
-
|classes|string|No|Classes to add to the heading
|
|
74
|
-
|attributes|object|No|HTML attributes (for example data attributes) to add to the item anchor
|
|
67
|
+
| Name | Type | Required | Description |
|
|
68
|
+
| ------------ | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------- |
|
|
69
|
+
| headingLevel | numeric | No | A number for the heading level. Defaults to 2 (`<h2>`) |
|
|
70
|
+
| text | string | Yes | If `html` is set, this is not required. Text to use within the heading. If `html` is provided, the `text` argument will be ignored. |
|
|
71
|
+
| html | string | Yes | If `text` is set, this is not required. HTML to use within the heading. If `html` is provided, the `text` argument will be ignored. |
|
|
72
|
+
| classes | string | No | Classes to add to the heading. |
|
|
73
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the item anchor. |
|
|
75
74
|
|
|
76
75
|
#### Items
|
|
77
76
|
|
|
78
|
-
|Name|Type|Required|Description|
|
|
79
|
-
|
|
80
|
-
|href|string|Yes|URL of the item anchor. Both href and text attributes for items need to be provided to create an item
|
|
81
|
-
|text|string|Yes|If `html` is set, this is not required. Text to use within the anchor. If `html` is provided, the `text` argument will be ignored
|
|
82
|
-
|html|string|Yes|If `text` is set, this is not required. HTML to use within the anchor. If `html` is provided, the `text` argument will be ignored
|
|
83
|
-
|complete|boolean|No|Flag to mark the item as complete or not. Defaults to `false
|
|
84
|
-
|attributes|object|No|HTML attributes (for example data attributes) to add to the item anchor
|
|
77
|
+
| Name | Type | Required | Description |
|
|
78
|
+
| ---------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|
|
79
|
+
| href | string | Yes | URL of the item anchor. Both href and text attributes for items need to be provided to create an item. |
|
|
80
|
+
| text | string | Yes | If `html` is set, this is not required. Text to use within the anchor. If `html` is provided, the `text` argument will be ignored. |
|
|
81
|
+
| html | string | Yes | If `text` is set, this is not required. HTML to use within the anchor. If `html` is provided, the `text` argument will be ignored. |
|
|
82
|
+
| complete | boolean | No | Flag to mark the item as complete or not. Defaults to `false`. |
|
|
83
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the item anchor. |
|
|
85
84
|
|
|
86
|
-
|
|
87
|
-
*Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with `.html` can be at risk from [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks. More information about security vulnerabilities can be found in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).*
|
|
85
|
+
_Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with `.html` can be at risk from [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks. More information about security vulnerabilities can be found in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning)._
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
# Ticket Panel
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/ticket-panel)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/ticket-panel)
|
|
5
4
|
|
|
6
5
|
## Example
|
|
6
|
+
|
|
7
7
|
Below is a typical example of the timeline component in use.
|
|
8
8
|
|
|
9
9
|
```
|
|
@@ -30,27 +30,27 @@ This component accepts the following arguments.
|
|
|
30
30
|
|
|
31
31
|
### Container
|
|
32
32
|
|
|
33
|
-
|Name|Type|Required|Description|
|
|
34
|
-
|
|
35
|
-
|classes|string|No|Classes to add to the ticket panel's container
|
|
36
|
-
|attributes|object|No|HTML attributes (for example data attributes) to add to the ticket panel's container
|
|
33
|
+
| Name | Type | Required | Description |
|
|
34
|
+
| ---------- | ------ | -------- | ------------------------------------------------------------------------------------- |
|
|
35
|
+
| classes | string | No | Classes to add to the ticket panel's container. |
|
|
36
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the ticket panel's container. |
|
|
37
37
|
|
|
38
38
|
### Items
|
|
39
39
|
|
|
40
|
-
|Name|Type|Required|Description|
|
|
41
|
-
|
|
42
|
-
|text|string|Yes|If `html` is set, this is not required. Text to use within the item. If `html` is provided, the `text` argument will be ignored
|
|
43
|
-
|html|string|Yes|If `text` is set, this is not required. HTML to use within the item. If `html` is provided, the `text` argument will be ignored
|
|
44
|
-
|classes|string|No|Classes to add to the ticket panel's container
|
|
45
|
-
|attributes|object|No|HTML attributes (for example data attributes) to add to the ticket panel's container
|
|
40
|
+
| Name | Type | Required | Description |
|
|
41
|
+
| ---------- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
|
42
|
+
| text | string | Yes | If `html` is set, this is not required. Text to use within the item. If `html` is provided, the `text` argument will be ignored. |
|
|
43
|
+
| html | string | Yes | If `text` is set, this is not required. HTML to use within the item. If `html` is provided, the `text` argument will be ignored. |
|
|
44
|
+
| classes | string | No | Classes to add to the ticket panel's container. |
|
|
45
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the ticket panel's container. |
|
|
46
46
|
|
|
47
47
|
### Classes
|
|
48
48
|
|
|
49
|
-
|Name|
|
|
50
|
-
|
|
51
|
-
|moj-ticket-
|
|
52
|
-
|moj-ticket-
|
|
53
|
-
|moj-ticket-
|
|
54
|
-
|moj-ticket-
|
|
55
|
-
|moj-ticket-
|
|
56
|
-
|moj-ticket-
|
|
49
|
+
| Name |
|
|
50
|
+
| ----------------------------------- |
|
|
51
|
+
| moj-ticket-panel\_\_content--blue |
|
|
52
|
+
| moj-ticket-panel\_\_content--red |
|
|
53
|
+
| moj-ticket-panel\_\_content--yellow |
|
|
54
|
+
| moj-ticket-panel\_\_content--green |
|
|
55
|
+
| moj-ticket-panel\_\_content--purple |
|
|
56
|
+
| moj-ticket-panel\_\_content--orange |
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
# Timeline
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/timeline)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/timeline)
|
|
5
4
|
|
|
6
5
|
### Installation
|
|
7
6
|
|
|
@@ -17,6 +16,7 @@ Object.keys(mojFilters).forEach(function (filterName) {
|
|
|
17
16
|
```
|
|
18
17
|
|
|
19
18
|
## Example
|
|
19
|
+
|
|
20
20
|
Below is a typical example of the timeline component in use.
|
|
21
21
|
|
|
22
22
|
```
|
|
@@ -110,41 +110,41 @@ This component accepts the following arguments.
|
|
|
110
110
|
|
|
111
111
|
### Container
|
|
112
112
|
|
|
113
|
-
|Name|Type|Required|Description|
|
|
114
|
-
|
|
115
|
-
|classes|string|No|Classes to add to the timeline's container
|
|
116
|
-
|attributes|object|No|HTML attributes (for example data attributes) to add to the timeline's container
|
|
113
|
+
| Name | Type | Required | Description |
|
|
114
|
+
| ---------- | ------ | -------- | --------------------------------------------------------------------------------- |
|
|
115
|
+
| classes | string | No | Classes to add to the timeline's container. |
|
|
116
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the timeline's container. |
|
|
117
117
|
|
|
118
118
|
### Items
|
|
119
119
|
|
|
120
|
-
|Name|Type|Required|Description|
|
|
121
|
-
|
|
122
|
-
|label|object|Yes|See [item label](#itemlabel)
|
|
123
|
-
|text|string|Yes|If `html` is set, this is not required. Text to use within the item. If `html` is provided, the `text` argument will be ignored
|
|
124
|
-
|html|string|Yes|If `text` is set, this is not required. HTML to use within the item. If `html` is provided, the `text` argument will be ignored
|
|
125
|
-
|datetime|object|No|See [item date and time](#itemdatetime)
|
|
126
|
-
|byline|object|No|See [item byline](#itembyline)
|
|
127
|
-
|classes|string|No|Classes to add to the timeline's items container
|
|
128
|
-
|attributes|object|No|HTML attributes (for example data attributes) to add to the timeline's items container
|
|
120
|
+
| Name | Type | Required | Description |
|
|
121
|
+
| ---------- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
|
122
|
+
| label | object | Yes | See [item label](#itemlabel). |
|
|
123
|
+
| text | string | Yes | If `html` is set, this is not required. Text to use within the item. If `html` is provided, the `text` argument will be ignored. |
|
|
124
|
+
| html | string | Yes | If `text` is set, this is not required. HTML to use within the item. If `html` is provided, the `text` argument will be ignored. |
|
|
125
|
+
| datetime | object | No | See [item date and time](#itemdatetime). |
|
|
126
|
+
| byline | object | No | See [item byline](#itembyline). |
|
|
127
|
+
| classes | string | No | Classes to add to the timeline's items container. |
|
|
128
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the timeline's items container. |
|
|
129
129
|
|
|
130
130
|
#### Item label
|
|
131
131
|
|
|
132
|
-
|Name|Type|Required|Description|
|
|
133
|
-
|
|
134
|
-
|text|string|Yes|If `html` is set, this is not required. Text to use within the item label. If `html` is provided, the `text` argument will be ignored
|
|
135
|
-
|html|string|Yes|If `text` is set, this is not required. HTML to use within the item label. If `html` is provided, the `text` argument will be ignored
|
|
132
|
+
| Name | Type | Required | Description |
|
|
133
|
+
| ---- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------- |
|
|
134
|
+
| text | string | Yes | If `html` is set, this is not required. Text to use within the item label. If `html` is provided, the `text` argument will be ignored. |
|
|
135
|
+
| html | string | Yes | If `text` is set, this is not required. HTML to use within the item label. If `html` is provided, the `text` argument will be ignored. |
|
|
136
136
|
|
|
137
137
|
#### Item datetime
|
|
138
138
|
|
|
139
|
-
|Name|Type|Required|Description|
|
|
140
|
-
|
|
141
|
-
|timestamp|string|Yes|A valid datetime string to be formatted. For example: `1970-01-01T11:59:59.000Z
|
|
142
|
-
|type|string|Yes|If `format` is set, this is not required. The standard date format to use within the item. If `type` is provided, the `format` argument will be ignored. Values include: `datetime`, `shortdatetime`, `date`, `shortdate` and `time
|
|
143
|
-
|format|string|Yes|If `type` is set, this is not required. The user-defined date format to use within the item. If `type` is provided, the `format` argument will be ignored. See the [Moment.js document on display formats](https://momentjs.com/docs/)
|
|
139
|
+
| Name | Type | Required | Description |
|
|
140
|
+
| --------- | ------ | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
141
|
+
| timestamp | string | Yes | A valid datetime string to be formatted. For example: `1970-01-01T11:59:59.000Z` |
|
|
142
|
+
| type | string | Yes | If `format` is set, this is not required. The standard date format to use within the item. If `type` is provided, the `format` argument will be ignored. Values include: `datetime`, `shortdatetime`, `date`, `shortdate` and `time` |
|
|
143
|
+
| format | string | Yes | If `type` is set, this is not required. The user-defined date format to use within the item. If `type` is provided, the `format` argument will be ignored. See the [Moment.js document on display formats](https://momentjs.com/docs/). |
|
|
144
144
|
|
|
145
145
|
#### Item byline
|
|
146
146
|
|
|
147
|
-
|Name|Type|Required|Description|
|
|
148
|
-
|
|
149
|
-
|text|string|Yes|If `html` is set, this is not required. Text to use within the item byline. If `html` is provided, the `text` argument will be ignored
|
|
150
|
-
|html|string|Yes|If `text` is set, this is not required. HTML to use within the item byline. If `html` is provided, the `text` argument will be ignored
|
|
147
|
+
| Name | Type | Required | Description |
|
|
148
|
+
| ---- | ------ | -------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
|
149
|
+
| text | string | Yes | If `html` is set, this is not required. Text to use within the item byline. If `html` is provided, the `text` argument will be ignored. |
|
|
150
|
+
| html | string | Yes | If `text` is set, this is not required. HTML to use within the item byline. If `html` is provided, the `text` argument will be ignored. |
|