@ministryofjustice/frontend 1.6.0 → 1.6.2
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/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/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,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
|
|
@@ -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. |
|
|
@@ -1,46 +1,43 @@
|
|
|
1
1
|
.moj-scrollable-pane {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
2
|
+
$scrollableBgColor: white;
|
|
3
|
+
$scrollableTransparentColor: rgba(255, 255, 255, 0);
|
|
4
|
+
$scrollableShadowColor: rgba(0, 0, 0, 0.2);
|
|
5
|
+
$scrollableShadowSize: 0.75em;
|
|
6
|
+
|
|
7
|
+
overflow-x: scroll;
|
|
8
|
+
background: linear-gradient(
|
|
9
|
+
to right,
|
|
10
|
+
$scrollableBgColor,
|
|
11
|
+
$scrollableBgColor,
|
|
12
|
+
$scrollableTransparentColor calc($scrollableShadowSize * 2)
|
|
13
|
+
),
|
|
14
|
+
radial-gradient(
|
|
15
|
+
farthest-side at 0 50%,
|
|
16
|
+
$scrollableShadowColor,
|
|
17
|
+
$scrollableTransparentColor
|
|
18
|
+
),
|
|
19
|
+
linear-gradient(
|
|
20
|
+
to left,
|
|
21
|
+
$scrollableBgColor,
|
|
22
|
+
$scrollableBgColor,
|
|
23
|
+
$scrollableTransparentColor calc($scrollableShadowSize * 2)
|
|
24
|
+
),
|
|
25
|
+
radial-gradient(
|
|
26
|
+
farthest-side at 100% 50%,
|
|
27
|
+
$scrollableShadowColor,
|
|
28
|
+
$scrollableTransparentColor
|
|
29
|
+
)
|
|
30
|
+
100%;
|
|
31
|
+
background-color: $scrollableBgColor;
|
|
32
|
+
background-repeat: no-repeat;
|
|
33
|
+
background-attachment: local, scroll, local, scroll;
|
|
34
|
+
background-size: 100% 100%, $scrollableShadowSize 100%, 100% 100%,
|
|
35
|
+
$scrollableShadowSize 100%;
|
|
21
36
|
}
|
|
22
37
|
|
|
23
38
|
@include govuk-media-query($until: 1020px) {
|
|
24
|
-
.moj-scrollable-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.moj-scrollable-pane__wrapper .govuk-table__header,
|
|
29
|
-
.moj-scrollable-pane__wrapper .govuk-table__cell {
|
|
39
|
+
.moj-scrollable-pane .govuk-table__header,
|
|
40
|
+
.moj-scrollable-pane .govuk-table__cell {
|
|
30
41
|
white-space: nowrap;
|
|
31
42
|
}
|
|
32
|
-
|
|
33
|
-
.moj-scrollable-pane > div::-webkit-scrollbar {
|
|
34
|
-
height: 10px; // Match GOVUK spacing units
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.moj-scrollable-pane > div::-webkit-scrollbar-track {
|
|
38
|
-
background: govuk-colour("light-grey");
|
|
39
|
-
box-shadow: 0 0 2px rgba(0,0,0,.15) inset; // Simulate scrollbar look and feel
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.moj-scrollable-pane > div::-webkit-scrollbar-thumb {
|
|
43
|
-
background: govuk-colour("dark-grey");
|
|
44
|
-
border-radius: govuk-spacing(1);
|
|
45
|
-
}
|
|
46
|
-
}
|
|
43
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ministryofjustice/frontend",
|
|
3
3
|
"description": "The MOJ Frontend contains the code you need to start building user interfaces for UK Ministry of Justice government services.",
|
|
4
|
-
"version": "1.6.
|
|
4
|
+
"version": "1.6.2",
|
|
5
5
|
"main": "moj/all.js",
|
|
6
6
|
"sass": "moj/all.scss",
|
|
7
7
|
"engines": {
|