@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
package/README.md
CHANGED
|
@@ -15,8 +15,8 @@ If you want to help us build MOJ Frontend, view our [contribution guidelines](CO
|
|
|
15
15
|
## Contact the team
|
|
16
16
|
|
|
17
17
|
MOJ Frontend is maintained by staff in the Ministry of Justice. If you need support, you can use [GitHub discussions](https://github.com/ministryofjustice/moj-frontend/discussions) or one of our Slack channels:
|
|
18
|
-
- [#moj-pattern-library-support](https://mojdt.slack.com/archives/CH5RUSB27) on
|
|
19
|
-
- [#moj-design-system channel](https://ukgovernmentdigital.slack.com/archives/CJ6QDRDGC) on UK Government Digital
|
|
18
|
+
- [#moj-pattern-library-support](https://mojdt.slack.com/archives/CH5RUSB27) on Justice Digital Slack
|
|
19
|
+
- [#moj-design-system channel](https://ukgovernmentdigital.slack.com/archives/CJ6QDRDGC) on UK Government Digital Slack
|
|
20
20
|
|
|
21
21
|
## Quick start
|
|
22
22
|
|
|
@@ -1,6 +1,87 @@
|
|
|
1
1
|
{
|
|
2
|
-
"
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
"
|
|
2
|
+
"nunjucksFilters": [
|
|
3
|
+
"/moj/filters/prototype-kit-13-filters.js"
|
|
4
|
+
],
|
|
5
|
+
"scripts": [
|
|
6
|
+
"/moj/all.js"
|
|
7
|
+
],
|
|
8
|
+
"assets": [
|
|
9
|
+
"/moj/assets"
|
|
10
|
+
],
|
|
11
|
+
"sass": [
|
|
12
|
+
"/moj/all.scss"
|
|
13
|
+
],
|
|
14
|
+
"nunjucksPaths": [
|
|
15
|
+
"/"
|
|
16
|
+
],
|
|
17
|
+
"nunjucksMacros": [
|
|
18
|
+
{
|
|
19
|
+
"importFrom": "moj/components/side-navigation/macro.njk",
|
|
20
|
+
"macroName": "mojSideNavigation"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"importFrom": "moj/components/organisation-switcher/macro.njk",
|
|
24
|
+
"macroName": "mojOrganisationSwitcher"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"importFrom": "moj/components/primary-navigation/macro.njk",
|
|
28
|
+
"macroName": "mojPrimaryNavigation"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"importFrom": "moj/components/identity-bar/macro.njk",
|
|
32
|
+
"macroName": "mojIdentityBar"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"importFrom": "moj/components/sub-navigation/macro.njk",
|
|
36
|
+
"macroName": "mojSubNavigation"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"importFrom": "moj/components/notification-badge/macro.njk",
|
|
40
|
+
"macroName": "mojNotificationBadge"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"importFrom": "moj/components/ticket-panel/macro.njk",
|
|
44
|
+
"macroName": "mojTicketPanel"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"importFrom": "moj/components/timeline/macro.njk",
|
|
48
|
+
"macroName": "mojTimeline"
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"importFrom": "moj/components/badge/macro.njk",
|
|
52
|
+
"macroName": "mojBadge"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"importFrom": "moj/components/messages/macro.njk",
|
|
56
|
+
"macroName": "mojMessages"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"importFrom": "moj/components/banner/macro.njk",
|
|
60
|
+
"macroName": "mojBanner"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"importFrom": "moj/components/pagination/macro.njk",
|
|
64
|
+
"macroName": "mojPagination"
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"importFrom": "moj/components/filter/macro.njk",
|
|
68
|
+
"macroName": "mojFilter"
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"importFrom": "moj/components/button-menu/macro.njk",
|
|
72
|
+
"macroName": "mojButtonMenu"
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"importFrom": "moj/components/page-header-actions/macro.njk",
|
|
76
|
+
"macroName": "mojPageHeaderActions"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"importFrom": "moj/components/search/macro.njk",
|
|
80
|
+
"macroName": "mojSearch"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"importFrom": "moj/components/header/macro.njk",
|
|
84
|
+
"macroName": "mojHeader"
|
|
85
|
+
}
|
|
86
|
+
]
|
|
6
87
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
# Action bar
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/action-bar)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/patterns/filter-a-list)
|
|
5
4
|
|
|
6
|
-
## Arguments
|
|
5
|
+
## Arguments
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
# Add another
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/add-another)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/add-another)
|
|
5
4
|
|
|
6
|
-
## Arguments
|
|
5
|
+
## Arguments
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
# Badge
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/badge)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/badge)
|
|
5
4
|
|
|
6
5
|
## Example
|
|
7
6
|
|
|
@@ -16,35 +15,35 @@
|
|
|
16
15
|
|
|
17
16
|
This component accepts the following arguments.
|
|
18
17
|
|
|
19
|
-
|Name|Type|Required|Description|
|
|
20
|
-
|
|
21
|
-
|text|string|Yes|If `html` is set, this is not required. Text to use within the span. If `html` is provided, the `text` argument will be ignored
|
|
22
|
-
|html|string|Yes|If `text` is set, this is not required. HTML to use within the span. If `html` is provided, the `text` argument will be ignored
|
|
23
|
-
|classes|string|Yes|Classes to add to the `span` container. See available [classes](#classes)
|
|
24
|
-
|label|string|No|The `aria-label` to add to the `span` container
|
|
25
|
-
|attributes|object|No|HTML attributes (for example data attributes) to add to the `span` container
|
|
18
|
+
| Name | Type | Required | Description |
|
|
19
|
+
| ---------- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
|
20
|
+
| text | string | Yes | If `html` is set, this is not required. Text to use within the span. If `html` is provided, the `text` argument will be ignored. |
|
|
21
|
+
| html | string | Yes | If `text` is set, this is not required. HTML to use within the span. If `html` is provided, the `text` argument will be ignored. |
|
|
22
|
+
| classes | string | Yes | Classes to add to the `span` container. See available [classes](#classes). |
|
|
23
|
+
| label | string | No | The `aria-label` to add to the `span` container. |
|
|
24
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the `span` container. |
|
|
26
25
|
|
|
27
26
|
### Classes
|
|
28
27
|
|
|
29
|
-
|Name|Colour code|Colour contrast|
|
|
30
|
-
|
|
31
|
-
|moj-badge--purple
|
|
32
|
-
|moj-badge--light-purple
|
|
33
|
-
|moj-badge--bright-purple
|
|
34
|
-
|moj-badge--pink
|
|
35
|
-
|moj-badge--light-pink
|
|
36
|
-
|moj-badge--red
|
|
37
|
-
|moj-badge--orange
|
|
38
|
-
|moj-badge--brown
|
|
39
|
-
|moj-badge--yellow
|
|
40
|
-
|moj-badge--light-green
|
|
41
|
-
|moj-badge--green
|
|
42
|
-
|moj-badge--turquoise
|
|
43
|
-
|moj-badge--light-blue
|
|
44
|
-
|moj-badge--blue
|
|
45
|
-
|moj-badge--black
|
|
46
|
-
|moj-badge--dark-grey
|
|
47
|
-
|moj-badge--mid-grey
|
|
48
|
-
|moj-badge--light-grey
|
|
49
|
-
|moj-badge--light-grey
|
|
50
|
-
|moj-badge--white
|
|
28
|
+
| Name | Colour code | Colour contrast |
|
|
29
|
+
| ------------------------ | ----------- | --------------- |
|
|
30
|
+
| moj-badge--purple | #2e358b | Pass |
|
|
31
|
+
| moj-badge--light-purple | #6f72af | Fail |
|
|
32
|
+
| moj-badge--bright-purple | #912b88 | Pass |
|
|
33
|
+
| moj-badge--pink | #d53880 | Fail |
|
|
34
|
+
| moj-badge--light-pink | #f499be | Fail |
|
|
35
|
+
| moj-badge--red | #b10e1e | Pass |
|
|
36
|
+
| moj-badge--orange | #f47738 | Fail |
|
|
37
|
+
| moj-badge--brown | #b58840 | Fail |
|
|
38
|
+
| moj-badge--yellow | #ffbf47 | Fail |
|
|
39
|
+
| moj-badge--light-green | #85994b | Fail |
|
|
40
|
+
| moj-badge--green | #006435 | Pass |
|
|
41
|
+
| moj-badge--turquoise | #28a197 | Fail |
|
|
42
|
+
| moj-badge--light-blue | #2b8cc4 | Fail |
|
|
43
|
+
| moj-badge--blue | #005ea5 | Pass |
|
|
44
|
+
| moj-badge--black | #0b0c0c | Pass |
|
|
45
|
+
| moj-badge--dark-grey | #6f777b | Pass |
|
|
46
|
+
| moj-badge--mid-grey | #bfc1c3 | Fail |
|
|
47
|
+
| moj-badge--light-grey | #dee0e2 | Fail |
|
|
48
|
+
| moj-badge--light-grey | #f8f8f8 | Fail |
|
|
49
|
+
| moj-badge--white | #ffffff | Fail |
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
# Button menu
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/button-menu)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/button-menu)
|
|
5
4
|
|
|
6
5
|
## Examples
|
|
7
6
|
|
|
@@ -40,26 +39,27 @@ new MOJFrontend.ButtonGroup({
|
|
|
40
39
|
## Arguments
|
|
41
40
|
|
|
42
41
|
### Container
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
|
46
|
-
|
|
|
47
|
-
|
|
|
42
|
+
|
|
43
|
+
| Name | Type | Required | Description |
|
|
44
|
+
| ------------- | ------ | -------- | ------------------------------------------------------------------------- |
|
|
45
|
+
| items | array | Yes | An array of button item objects. See [items](#items). |
|
|
46
|
+
| buttonClasses | String | No | Classes to add to the button items. |
|
|
47
|
+
| attributes | Object | No | HTML attributes (for example data attributes) to add to the button group. |
|
|
48
48
|
|
|
49
49
|
### Items
|
|
50
50
|
|
|
51
51
|
See the [button component](https://design-system.service.gov.uk/components/button/) in the GOV.UK Design System for more details.
|
|
52
52
|
|
|
53
|
-
|Name|Type|Required|Description|
|
|
54
|
-
|
|
55
|
-
|element|String|No|Whether to use an `input`, `button` or `a` element to create the button. In most cases you will not need to set this as it will be configured automatically if you use `href` or `html
|
|
56
|
-
|text|String|Yes|If `html` is set, this is not required. Text for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input
|
|
57
|
-
|html|String|Yes|If `text` is set, this is not required. HTML for the button or link. If `html` is provided, the `text` argument will be ignored and element will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input
|
|
58
|
-
|name|String|Yes|Name for the `input` or `button`. This has no effect on `a` elements
|
|
59
|
-
|type|String|Yes|Type of `input` or `button`. The options are `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements
|
|
60
|
-
|value|String|Yes|Value for the `button` tag. This has no effect on `a` or `input` elements
|
|
61
|
-
|disabled|Boolean|No|Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically
|
|
62
|
-
|href|String|No|The URL that the button should link to. If this is set, `element` will be automatically set to `a` if it has not already been defined
|
|
63
|
-
|classes|String|No|Classes to add to the button component
|
|
64
|
-
|attributes|Object|No|HTML attributes (for example data attributes) to add to the button component
|
|
65
|
-
|preventDoubleClick|Boolean|No|Prevent accidental double clicks on submit buttons from submitting forms multiple times
|
|
53
|
+
| Name | Type | Required | Description |
|
|
54
|
+
| ------------------ | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
55
|
+
| element | String | No | Whether to use an `input`, `button` or `a` element to create the button. In most cases you will not need to set this as it will be configured automatically if you use `href` or `html`. |
|
|
56
|
+
| text | String | Yes | If `html` is set, this is not required. Text for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`. |
|
|
57
|
+
| html | String | Yes | If `text` is set, this is not required. HTML for the button or link. If `html` is provided, the `text` argument will be ignored and element will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`. |
|
|
58
|
+
| name | String | Yes | Name for the `input` or `button`. This has no effect on `a` elements. |
|
|
59
|
+
| type | String | Yes | Type of `input` or `button`. The options are `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements. |
|
|
60
|
+
| value | String | Yes | Value for the `button` tag. This has no effect on `a` or `input` elements. |
|
|
61
|
+
| disabled | Boolean | No | Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically. |
|
|
62
|
+
| href | String | No | The URL that the button should link to. If this is set, `element` will be automatically set to `a` if it has not already been defined. |
|
|
63
|
+
| classes | String | No | Classes to add to the button component. |
|
|
64
|
+
| attributes | Object | No | HTML attributes (for example data attributes) to add to the button component. |
|
|
65
|
+
| preventDoubleClick | Boolean | No | Prevent accidental double clicks on submit buttons from submitting forms multiple times. |
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
# Cookie banner
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/cookie-banner)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/cookie-banner)
|
|
5
4
|
|
|
6
5
|
## Arguments
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
# Currency input
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/currency-input)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/currency-input)
|
|
5
4
|
|
|
6
5
|
## Dependencies
|
|
7
6
|
|
|
@@ -27,7 +26,9 @@ The currency input component is dependent on the following components from the [
|
|
|
27
26
|
}
|
|
28
27
|
}) }}
|
|
29
28
|
```
|
|
29
|
+
|
|
30
30
|
### With currency specified
|
|
31
|
+
|
|
31
32
|
```
|
|
32
33
|
{{ mojCurrencyInput({
|
|
33
34
|
id: "amount",
|
|
@@ -49,58 +50,64 @@ The currency input component is dependent on the following components from the [
|
|
|
49
50
|
## Arguments
|
|
50
51
|
|
|
51
52
|
### Container
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
|
55
|
-
|
|
|
56
|
-
|
|
|
57
|
-
|
|
|
58
|
-
|
|
|
59
|
-
|
|
|
60
|
-
|
|
|
61
|
-
|
|
|
62
|
-
|
|
|
63
|
-
|
|
|
64
|
-
|
|
|
53
|
+
|
|
54
|
+
| Name | Type | Required | Description |
|
|
55
|
+
| ------------- | ------ | -------- | -------------------------------------------------------------------------------------- |
|
|
56
|
+
| id | string | Yes | Optional `id` attribute to add to the text input. |
|
|
57
|
+
| name | string | Yes | Name attribute for the text input. |
|
|
58
|
+
| value | string | No | Optional value of the text input. |
|
|
59
|
+
| type | string | No | Type of input control to render. Defaults to text. |
|
|
60
|
+
| formGroup | object | No | Options for the form-group wrapper. See [formGroup](#formgroup). |
|
|
61
|
+
| label | object | No | Options for the label component (e.g. text). See [label](#label). |
|
|
62
|
+
| hint | object | No | Options for the hint component (e.g. text). See [hint](#hint). |
|
|
63
|
+
| errorMessage | object | No | Options for the errorMessage component (e.g. text). See [errorMessage](#errormessage). |
|
|
64
|
+
| currencyLabel | object | No | Options for the currency label (e.g. text). See [currencyLabel](#currencylabel). |
|
|
65
|
+
| classes | string | No | Classes to add to the text input. |
|
|
66
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the text input. |
|
|
65
67
|
|
|
66
68
|
### formGroup
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
|
69
|
+
|
|
70
|
+
| Name | Type | Required | Description |
|
|
71
|
+
| ------- | ------ | -------- | ----------------------------------------- |
|
|
72
|
+
| classes | string | No | Classes to add to the form group wrapper. |
|
|
70
73
|
|
|
71
74
|
### Label
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
|
75
|
-
|
|
|
76
|
-
|
|
|
77
|
-
|
|
|
78
|
-
|
|
|
79
|
-
|
|
|
75
|
+
|
|
76
|
+
| Name | Type | Required | Description |
|
|
77
|
+
| ------------- | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------- |
|
|
78
|
+
| for | string | Yes | The value of the `for` attribute, the `id` of the `input` the label is associated with. |
|
|
79
|
+
| text | string | Yes | If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
|
|
80
|
+
| html | string | Yes | If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
|
|
81
|
+
| isPageHeading | boolean | No | Whether the label also acts as the heading for the page. |
|
|
82
|
+
| classes | string | No | Classes to add to the label tag. |
|
|
83
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the label tag. |
|
|
80
84
|
|
|
81
85
|
### Hint
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
|
85
|
-
|
|
|
86
|
-
|
|
|
87
|
-
|
|
|
88
|
-
|
|
|
86
|
+
|
|
87
|
+
| Name | Type | Required | Description |
|
|
88
|
+
| ---------- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
|
89
|
+
| id | string | No | Optional `id` attribute to add to the hint span tag. |
|
|
90
|
+
| text | string | Yes | If `html` is set, this is not required. Text to use within the hint. If `html` is provided, the `text` argument will be ignored. |
|
|
91
|
+
| html | string | Yes | If `text` is set, this is not required. HTML to use within the hint. If `html` is provided, the `text` argument will be ignored. |
|
|
92
|
+
| classes | string | No | Classes to add to the hint span tag. |
|
|
93
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the hint span tag. |
|
|
89
94
|
|
|
90
95
|
### errorMessage
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
|
94
|
-
|
|
|
95
|
-
|
|
|
96
|
-
|
|
|
97
|
-
|
|
|
96
|
+
|
|
97
|
+
| Name | Type | Required | Description |
|
|
98
|
+
| ---------- | ------ | -------- | --------------------------------------------------------------------------------------------------------------------------------- |
|
|
99
|
+
| id | string | No | Optional `id` attribute to add to the error span tag. |
|
|
100
|
+
| text | string | Yes | If `html` is set, this is not required. Text to use within the error. If `html` is provided, the `text` argument will be ignored. |
|
|
101
|
+
| html | string | Yes | If `text` is set, this is not required. HTML to use within the error. If `html` is provided, the `text` argument will be ignored. |
|
|
102
|
+
| classes | string | No | Classes to add to the error span tag. |
|
|
103
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the error span tag. |
|
|
98
104
|
|
|
99
105
|
### currencyLabel
|
|
100
|
-
|Name|Type|Required|Description|
|
|
101
|
-
|---|---|---|---|
|
|
102
|
-
|text|string|Yes|If `html` is set, this is not required. Text to use within the error. If `html` is provided, the `text` argument will be ignored.|
|
|
103
|
-
|html|string|Yes|If `text` is set, this is not required. HTML to use within the error. If `html` is provided, the `text` argument will be ignored.|
|
|
104
|
-
|classes|string|No|Classes to add to the currency span tag.|
|
|
105
106
|
|
|
106
|
-
|
|
107
|
+
| Name | Type | Required | Description |
|
|
108
|
+
| ------- | ------ | -------- | --------------------------------------------------------------------------------------------------------------------------------- |
|
|
109
|
+
| text | string | Yes | If `html` is set, this is not required. Text to use within the error. If `html` is provided, the `text` argument will be ignored. |
|
|
110
|
+
| html | string | Yes | If `text` is set, this is not required. HTML to use within the error. If `html` is provided, the `text` argument will be ignored. |
|
|
111
|
+
| classes | string | No | Classes to add to the currency span tag. |
|
|
112
|
+
|
|
113
|
+
_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
|
# Filter toggle button
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/filter-toggle-button)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/patterns/filter-a-list)
|
|
5
4
|
|
|
6
|
-
## Arguments
|
|
5
|
+
## Arguments
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
# Form validator
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/form-validator)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/form-validator)
|
|
5
4
|
|
|
6
|
-
## Arguments
|
|
5
|
+
## Arguments
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
# Header
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/header)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/header)
|
|
5
4
|
|
|
6
5
|
## Examples
|
|
7
6
|
|
|
@@ -35,38 +34,37 @@ This component accepts the following arguments.
|
|
|
35
34
|
|
|
36
35
|
### Container
|
|
37
36
|
|
|
38
|
-
|Name|Type|Required|Description|
|
|
39
|
-
|
|
40
|
-
|organisationLabel|object|Yes|An object containing the organisation's details. See [organisationLabel](#organisationlabel)
|
|
41
|
-
|serviceLabel|object|Yes|An object containing the service's details. See [serviceLabel](#servicelabel)
|
|
42
|
-
|navigation|array|No|An array of navigation item objects. See [navigation](#navigation)
|
|
43
|
-
|containerClasses|string|No|Classes for the container, useful if you want to make the header fixed width
|
|
44
|
-
|classes|string|No|Classes to add to the `header` container
|
|
45
|
-
|attributes|object|No|HTML attributes (for example data attributes) to add to the header container
|
|
37
|
+
| Name | Type | Required | Description |
|
|
38
|
+
| ----------------- | ------ | -------- | --------------------------------------------------------------------------------------------- |
|
|
39
|
+
| organisationLabel | object | Yes | An object containing the organisation's details. See [organisationLabel](#organisationlabel). |
|
|
40
|
+
| serviceLabel | object | Yes | An object containing the service's details. See [serviceLabel](#servicelabel). |
|
|
41
|
+
| navigation | array | No | An array of navigation item objects. See [navigation](#navigation). |
|
|
42
|
+
| containerClasses | string | No | Classes for the container, useful if you want to make the header fixed width. |
|
|
43
|
+
| classes | string | No | Classes to add to the `header` container. |
|
|
44
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the header container. |
|
|
46
45
|
|
|
47
46
|
### organisationLabel
|
|
48
47
|
|
|
49
|
-
|Name|Type|Required|Description|
|
|
50
|
-
|
|
51
|
-
|text|string|Yes|Header title that is placed next to the crest. Used for organisation names (e.g., CICA, HMCTS, HMPPS, LAA and OPG)
|
|
52
|
-
|href|string|Yes|URL for the organisation name anchor
|
|
48
|
+
| Name | Type | Required | Description |
|
|
49
|
+
| ---- | ------ | -------- | ------------------------------------------------------------------------------------------------------------------- |
|
|
50
|
+
| text | string | Yes | Header title that is placed next to the crest. Used for organisation names (e.g., CICA, HMCTS, HMPPS, LAA and OPG). |
|
|
51
|
+
| href | string | Yes | URL for the organisation name anchor. |
|
|
53
52
|
|
|
54
53
|
### serviceLabel
|
|
55
54
|
|
|
56
|
-
|Name|Type|Required|Description|
|
|
57
|
-
|
|
58
|
-
|text|string|Yes|Header title that is placed next to the organisation name. Used for service names (e.g., Claim fees for Crown court defence; Send money to prisoners)
|
|
59
|
-
|href|string|Yes|URL for the service name anchor
|
|
55
|
+
| Name | Type | Required | Description |
|
|
56
|
+
| ---- | ------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
57
|
+
| text | string | Yes | Header title that is placed next to the organisation name. Used for service names (e.g., Claim fees for Crown court defence; Send money to prisoners). |
|
|
58
|
+
| href | string | Yes | URL for the service name anchor. |
|
|
60
59
|
|
|
61
60
|
### Navigation
|
|
62
61
|
|
|
63
|
-
|Name|Type|Required|Description|
|
|
64
|
-
|
|
65
|
-
|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
|
|
66
|
-
|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
|
|
67
|
-
|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
|
|
68
|
-
|active|boolean|No|Flag to mark the navigation item as active or not. Defaults to `false
|
|
69
|
-
|attributes|object|No|HTML attributes (for example data attributes) to add to the navigation item anchor
|
|
62
|
+
| Name | Type | Required | Description |
|
|
63
|
+
| ---------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|
|
64
|
+
| 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. |
|
|
65
|
+
| 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. |
|
|
66
|
+
| 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. |
|
|
67
|
+
| active | boolean | No | Flag to mark the navigation item as active or not. Defaults to `false`. |
|
|
68
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the navigation item anchor. |
|
|
70
69
|
|
|
71
|
-
|
|
72
|
-
*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).*
|
|
70
|
+
_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,7 +1,6 @@
|
|
|
1
1
|
# Messages
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/messages)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/messages)
|
|
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
|
```
|
|
@@ -67,19 +67,19 @@ This component accepts the following arguments.
|
|
|
67
67
|
|
|
68
68
|
### Container
|
|
69
69
|
|
|
70
|
-
|Name|Type|Required|Description|
|
|
71
|
-
|
|
72
|
-
|items|array|Yes|An array of message item objects. See [items](#items)
|
|
73
|
-
|classes|string|No|Classes to add to the messages's container
|
|
74
|
-
|attributes|object|No|HTML attributes (for example data attributes) to add to the message's container
|
|
70
|
+
| Name | Type | Required | Description |
|
|
71
|
+
| ---------- | ------ | -------- | -------------------------------------------------------------------------------- |
|
|
72
|
+
| items | array | Yes | An array of message item objects. See [items](#items). |
|
|
73
|
+
| classes | string | No | Classes to add to the messages's container. |
|
|
74
|
+
| attributes | object | No | HTML attributes (for example data attributes) to add to the message's container. |
|
|
75
75
|
|
|
76
76
|
### Items
|
|
77
77
|
|
|
78
|
-
|Name|Type|Required|Description|
|
|
79
|
-
|
|
80
|
-
|id|string|No|The unique ID of the item|
|
|
81
|
-
|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
|
|
82
|
-
|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
|
|
83
|
-
|type|string|Yes|Used to show sent or received messages. Sent messages are blue and aligned to the right, received messages are grey and aligned to the left. Options: `sent` or `received
|
|
84
|
-
|sender|string|Yes|The thing that created the message
|
|
85
|
-
|timestamp|string|Yes|A valid datetime string to be formatted. For example: `1970-01-01T11:59:59.000Z
|
|
78
|
+
| Name | Type | Required | Description |
|
|
79
|
+
| --------- | ------ | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
80
|
+
| id | string | No | The unique ID of the item |
|
|
81
|
+
| 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. |
|
|
82
|
+
| 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. |
|
|
83
|
+
| type | string | Yes | Used to show sent or received messages. Sent messages are blue and aligned to the right, received messages are grey and aligned to the left. Options: `sent` or `received`. |
|
|
84
|
+
| sender | string | Yes | The thing that created the message. |
|
|
85
|
+
| timestamp | string | Yes | A valid datetime string to be formatted. For example: `1970-01-01T11:59:59.000Z` |
|
|
@@ -1,5 +1,3 @@
|
|
|
1
1
|
# Table multi-select
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/table-multi-select)
|
|
5
|
-
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/table-multi-select)
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
# Notification badge
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/notification-badge)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/notification-badge)
|
|
5
4
|
|
|
6
5
|
## Arguments
|
|
7
6
|
|
|
8
|
-
|Name|Type|Required|Description|
|
|
9
|
-
|
|
7
|
+
| Name | Type | Required | Description |
|
|
8
|
+
| ---- | ---- | -------- | ----------- |
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
# Organisation switcher
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/organisation-switcher)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/organisation-switcher)
|
|
5
4
|
|
|
6
5
|
## Arguments
|
|
7
6
|
|
|
8
|
-
|Name|Type|Required|Description|
|
|
9
|
-
|
|
7
|
+
| Name | Type | Required | Description |
|
|
8
|
+
| ---- | ---- | -------- | ----------- |
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
# Page header actions
|
|
2
2
|
|
|
3
|
-
- [Guidance](https://
|
|
4
|
-
- [Preview](https://moj-frontend.herokuapp.com/components/page-header-actions)
|
|
3
|
+
- [Guidance](https://design-patterns.service.justice.gov.uk/components/page-header-actions)
|
|
5
4
|
|
|
6
|
-
## Arguments
|
|
5
|
+
## Arguments
|