Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@ministryofjustice/frontend
Advanced tools
@ministryofjustice/frontend - npm Package Compare versions
Comparing version 1.6.0 to 1.6.1
| # Action bar | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/action-bar) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/action-bar) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/patterns/filter-a-list) | ||
| ## Arguments | ||
| ## Arguments |
| # Add another | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/add-another) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/add-another) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/add-another) | ||
| ## Arguments | ||
| ## Arguments |
| # Badge | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/badge) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/badge) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/badge) | ||
@@ -19,33 +18,33 @@ ## Example | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |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.| | ||
| |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.| | ||
| |classes|string|Yes|Classes to add to the `span` container. See available [classes](#classes).| | ||
| |label|string|No|The `aria-label` to add to the `span` container.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the `span` container.| | ||
| | Name | Type | Required | Description | | ||
| | ---------- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------- | | ||
| | 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. | | ||
| | 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. | | ||
| | classes | string | Yes | Classes to add to the `span` container. See available [classes](#classes). | | ||
| | label | string | No | The `aria-label` to add to the `span` container. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the `span` container. | | ||
| ### Classes | ||
| |Name|Colour code|Colour contrast| | ||
| |---|---|---| | ||
| |moj-badge--purple|#2e358b|Pass| | ||
| |moj-badge--light-purple|#6f72af|Fail| | ||
| |moj-badge--bright-purple|#912b88|Pass| | ||
| |moj-badge--pink|#d53880|Fail| | ||
| |moj-badge--light-pink|#f499be|Fail| | ||
| |moj-badge--red|#b10e1e|Pass| | ||
| |moj-badge--orange|#f47738|Fail| | ||
| |moj-badge--brown|#b58840|Fail| | ||
| |moj-badge--yellow|#ffbf47|Fail| | ||
| |moj-badge--light-green|#85994b|Fail| | ||
| |moj-badge--green|#006435|Pass| | ||
| |moj-badge--turquoise|#28a197|Fail| | ||
| |moj-badge--light-blue|#2b8cc4|Fail| | ||
| |moj-badge--blue|#005ea5|Pass| | ||
| |moj-badge--black|#0b0c0c|Pass| | ||
| |moj-badge--dark-grey|#6f777b|Pass| | ||
| |moj-badge--mid-grey|#bfc1c3|Fail| | ||
| |moj-badge--light-grey|#dee0e2|Fail| | ||
| |moj-badge--light-grey|#f8f8f8|Fail| | ||
| |moj-badge--white|#ffffff|Fail| | ||
| | Name | Colour code | Colour contrast | | ||
| | ------------------------ | ----------- | --------------- | | ||
| | moj-badge--purple | #2e358b | Pass | | ||
| | moj-badge--light-purple | #6f72af | Fail | | ||
| | moj-badge--bright-purple | #912b88 | Pass | | ||
| | moj-badge--pink | #d53880 | Fail | | ||
| | moj-badge--light-pink | #f499be | Fail | | ||
| | moj-badge--red | #b10e1e | Pass | | ||
| | moj-badge--orange | #f47738 | Fail | | ||
| | moj-badge--brown | #b58840 | Fail | | ||
| | moj-badge--yellow | #ffbf47 | Fail | | ||
| | moj-badge--light-green | #85994b | Fail | | ||
| | moj-badge--green | #006435 | Pass | | ||
| | moj-badge--turquoise | #28a197 | Fail | | ||
| | moj-badge--light-blue | #2b8cc4 | Fail | | ||
| | moj-badge--blue | #005ea5 | Pass | | ||
| | moj-badge--black | #0b0c0c | Pass | | ||
| | moj-badge--dark-grey | #6f777b | Pass | | ||
| | moj-badge--mid-grey | #bfc1c3 | Fail | | ||
| | moj-badge--light-grey | #dee0e2 | Fail | | ||
| | moj-badge--light-grey | #f8f8f8 | Fail | | ||
| | moj-badge--white | #ffffff | Fail | |
| # Button menu | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/button-menu) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/button-menu) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/button-menu) | ||
@@ -43,8 +42,9 @@ ## Examples | ||
| ### Container | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |items|array|Yes|An array of button item objects. See [items](#items).| | ||
| |buttonClasses|String|No|Classes to add to the button items.| | ||
| |attributes|Object|No|HTML attributes (for example data attributes) to add to the button group.| | ||
| | Name | Type | Required | Description | | ||
| | ------------- | ------ | -------- | ------------------------------------------------------------------------- | | ||
| | items | array | Yes | An array of button item objects. See [items](#items). | | ||
| | buttonClasses | String | No | Classes to add to the button items. | | ||
| | attributes | Object | No | HTML attributes (for example data attributes) to add to the button group. | | ||
| ### Items | ||
@@ -54,14 +54,14 @@ | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |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`.| | ||
| |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`.| | ||
| |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`.| | ||
| |name|String|Yes|Name for the `input` or `button`. This has no effect on `a` elements.| | ||
| |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.| | ||
| |value|String|Yes|Value for the `button` tag. This has no effect on `a` or `input` elements.| | ||
| |disabled|Boolean|No|Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically.| | ||
| |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.| | ||
| |classes|String|No|Classes to add to the button component.| | ||
| |attributes|Object|No|HTML attributes (for example data attributes) to add to the button component.| | ||
| |preventDoubleClick|Boolean|No|Prevent accidental double clicks on submit buttons from submitting forms multiple times.| | ||
| | Name | Type | Required | Description | | ||
| | ------------------ | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | 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`. | | ||
| | 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`. | | ||
| | 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`. | | ||
| | name | String | Yes | Name for the `input` or `button`. This has no effect on `a` elements. | | ||
| | 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. | | ||
| | value | String | Yes | Value for the `button` tag. This has no effect on `a` or `input` elements. | | ||
| | disabled | Boolean | No | Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically. | | ||
| | 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. | | ||
| | classes | String | No | Classes to add to the button component. | | ||
| | attributes | Object | No | HTML attributes (for example data attributes) to add to the button component. | | ||
| | preventDoubleClick | Boolean | No | Prevent accidental double clicks on submit buttons from submitting forms multiple times. | |
| # Cookie banner | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/cookie-banner) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/cookie-banner) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/cookie-banner) | ||
| ## Arguments |
| # Currency input | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/currency-input) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/currency-input) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/currency-input) | ||
@@ -30,3 +29,5 @@ ## Dependencies | ||
| ``` | ||
| ### With currency specified | ||
| ``` | ||
@@ -53,56 +54,62 @@ {{ mojCurrencyInput({ | ||
| ### Container | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |id|string|Yes|Optional `id` attribute to add to the text input.| | ||
| |name|string|Yes|Name attribute for the text input.| | ||
| |value|string|No|Optional value of the text input.| | ||
| |type|string|No|Type of input control to render. Defaults to text.| | ||
| |formGroup|object|No|Options for the form-group wrapper. See [formGroup](#formgroup).| | ||
| |label|object|No|Options for the label component (e.g. text). See [label](#label).| | ||
| |hint|object|No|Options for the hint component (e.g. text). See [hint](#hint).| | ||
| |errorMessage|object|No|Options for the errorMessage component (e.g. text). See [errorMessage](#errormessage).| | ||
| |currencyLabel|object|No|Options for the currency label (e.g. text). See [currencyLabel](#currencylabel).| | ||
| |classes|string|No|Classes to add to the text input.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the text input.| | ||
| | Name | Type | Required | Description | | ||
| | ------------- | ------ | -------- | -------------------------------------------------------------------------------------- | | ||
| | id | string | Yes | Optional `id` attribute to add to the text input. | | ||
| | name | string | Yes | Name attribute for the text input. | | ||
| | value | string | No | Optional value of the text input. | | ||
| | type | string | No | Type of input control to render. Defaults to text. | | ||
| | formGroup | object | No | Options for the form-group wrapper. See [formGroup](#formgroup). | | ||
| | label | object | No | Options for the label component (e.g. text). See [label](#label). | | ||
| | hint | object | No | Options for the hint component (e.g. text). See [hint](#hint). | | ||
| | errorMessage | object | No | Options for the errorMessage component (e.g. text). See [errorMessage](#errormessage). | | ||
| | currencyLabel | object | No | Options for the currency label (e.g. text). See [currencyLabel](#currencylabel). | | ||
| | classes | string | No | Classes to add to the text input. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the text input. | | ||
| ### formGroup | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |classes|string|No|Classes to add to the form group wrapper.| | ||
| | Name | Type | Required | Description | | ||
| | ------- | ------ | -------- | ----------------------------------------- | | ||
| | classes | string | No | Classes to add to the form group wrapper. | | ||
| ### Label | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |for|string|Yes|The value of the `for` attribute, the `id` of the `input` the label is associated with.| | ||
| |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.| | ||
| |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.| | ||
| |isPageHeading|boolean|No|Whether the label also acts as the heading for the page.| | ||
| |classes|string|No|Classes to add to the label tag.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the label tag.| | ||
| | Name | Type | Required | Description | | ||
| | ------------- | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------- | | ||
| | for | string | Yes | The value of the `for` attribute, the `id` of the `input` the label is associated with. | | ||
| | 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. | | ||
| | 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. | | ||
| | isPageHeading | boolean | No | Whether the label also acts as the heading for the page. | | ||
| | classes | string | No | Classes to add to the label tag. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the label tag. | | ||
| ### Hint | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |id|string|No|Optional `id` attribute to add to the hint span tag.| | ||
| |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.| | ||
| |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.| | ||
| |classes|string|No|Classes to add to the hint span tag.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the hint span tag.| | ||
| | Name | Type | Required | Description | | ||
| | ---------- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------- | | ||
| | id | string | No | Optional `id` attribute to add to the hint span tag. | | ||
| | 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. | | ||
| | 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. | | ||
| | classes | string | No | Classes to add to the hint span tag. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the hint span tag. | | ||
| ### errorMessage | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |id|string|No|Optional `id` attribute to add to the error span tag.| | ||
| |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.| | ||
| |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.| | ||
| |classes|string|No|Classes to add to the error span tag.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the error span tag.| | ||
| | Name | Type | Required | Description | | ||
| | ---------- | ------ | -------- | --------------------------------------------------------------------------------------------------------------------------------- | | ||
| | id | string | No | Optional `id` attribute to add to the error span tag. | | ||
| | 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. | | ||
| | 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. | | ||
| | classes | string | No | Classes to add to the error span tag. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the error span tag. | | ||
| ### currencyLabel | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |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.| | ||
| |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.| | ||
| |classes|string|No|Classes to add to the currency span tag.| | ||
| *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).* | ||
| | Name | Type | Required | Description | | ||
| | ------- | ------ | -------- | --------------------------------------------------------------------------------------------------------------------------------- | | ||
| | 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. | | ||
| | 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. | | ||
| | classes | string | No | Classes to add to the currency span tag. | | ||
| _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)._ |
| # Filter toggle button | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/filter-toggle-button) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/filter-toggle-button) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/patterns/filter-a-list) | ||
| ## Arguments | ||
| ## Arguments |
| # Form validator | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/form-validator) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/form-validator) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/form-validator) | ||
| ## Arguments | ||
| ## Arguments |
| # Header | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/header) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/header) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/header) | ||
@@ -38,36 +37,35 @@ ## Examples | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |organisationLabel|object|Yes|An object containing the organisation's details. See [organisationLabel](#organisationlabel).| | ||
| |serviceLabel|object|Yes|An object containing the service's details. See [serviceLabel](#servicelabel).| | ||
| |navigation|array|No|An array of navigation item objects. See [navigation](#navigation).| | ||
| |containerClasses|string|No|Classes for the container, useful if you want to make the header fixed width.| | ||
| |classes|string|No|Classes to add to the `header` container.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the header container.| | ||
| | Name | Type | Required | Description | | ||
| | ----------------- | ------ | -------- | --------------------------------------------------------------------------------------------- | | ||
| | organisationLabel | object | Yes | An object containing the organisation's details. See [organisationLabel](#organisationlabel). | | ||
| | serviceLabel | object | Yes | An object containing the service's details. See [serviceLabel](#servicelabel). | | ||
| | navigation | array | No | An array of navigation item objects. See [navigation](#navigation). | | ||
| | containerClasses | string | No | Classes for the container, useful if you want to make the header fixed width. | | ||
| | classes | string | No | Classes to add to the `header` container. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the header container. | | ||
| ### organisationLabel | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |text|string|Yes|Header title that is placed next to the crest. Used for organisation names (e.g., CICA, HMCTS, HMPPS, LAA and OPG).| | ||
| |href|string|Yes|URL for the organisation name anchor.| | ||
| | Name | Type | Required | Description | | ||
| | ---- | ------ | -------- | ------------------------------------------------------------------------------------------------------------------- | | ||
| | text | string | Yes | Header title that is placed next to the crest. Used for organisation names (e.g., CICA, HMCTS, HMPPS, LAA and OPG). | | ||
| | href | string | Yes | URL for the organisation name anchor. | | ||
| ### serviceLabel | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |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).| | ||
| |href|string|Yes|URL for the service name anchor.| | ||
| | Name | Type | Required | Description | | ||
| | ---- | ------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | ||
| | 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). | | ||
| | href | string | Yes | URL for the service name anchor. | | ||
| ### Navigation | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |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.| | ||
| |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.| | ||
| |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.| | ||
| |active|boolean|No|Flag to mark the navigation item as active or not. Defaults to `false`.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the navigation item anchor.| | ||
| | Name | Type | Required | Description | | ||
| | ---------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- | | ||
| | 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. | | ||
| | 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. | | ||
| | 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. | | ||
| | active | boolean | No | Flag to mark the navigation item as active or not. Defaults to `false`. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the navigation item anchor. | | ||
| *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).* | ||
| _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)._ |
| # Messages | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/messages) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/messages) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/messages) | ||
@@ -20,2 +19,3 @@ ### Installation | ||
| ## Example | ||
| Below is a typical example of the timeline component in use. | ||
@@ -71,17 +71,17 @@ | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |items|array|Yes|An array of message item objects. See [items](#items).| | ||
| |classes|string|No|Classes to add to the messages's container.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the message's container.| | ||
| | Name | Type | Required | Description | | ||
| | ---------- | ------ | -------- | -------------------------------------------------------------------------------- | | ||
| | items | array | Yes | An array of message item objects. See [items](#items). | | ||
| | classes | string | No | Classes to add to the messages's container. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the message's container. | | ||
| ### Items | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |id|string|No|The unique ID of the item| | ||
| |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.| | ||
| |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.| | ||
| |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`.| | ||
| |sender|string|Yes|The thing that created the message.| | ||
| |timestamp|string|Yes|A valid datetime string to be formatted. For example: `1970-01-01T11:59:59.000Z`| | ||
| | Name | Type | Required | Description | | ||
| | --------- | ------ | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | id | string | No | The unique ID of the item | | ||
| | 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. | | ||
| | 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. | | ||
| | 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`. | | ||
| | sender | string | Yes | The thing that created the message. | | ||
| | timestamp | string | Yes | A valid datetime string to be formatted. For example: `1970-01-01T11:59:59.000Z` | |
| # Table multi-select | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/table-multi-select) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/table-multi-select) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/table-multi-select) |
| # Notification badge | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/notification-badge) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/notification-badge) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/notification-badge) | ||
| ## Arguments | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| | Name | Type | Required | Description | | ||
| | ---- | ---- | -------- | ----------- | |
| # Organisation switcher | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/organisation-switcher) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/organisation-switcher) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/organisation-switcher) | ||
| ## Arguments | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| | Name | Type | Required | Description | | ||
| | ---- | ---- | -------- | ----------- | |
| # Page header actions | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/page-header-actions) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/page-header-actions) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/page-header-actions) | ||
| ## Arguments | ||
| ## Arguments |
| # Pagination | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/pagination) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/pagination) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/pagination) | ||
| ## Arguments | ||
| ## Arguments |
| # Password reveal | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/password-reveal) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/password-reveal) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/password-reveal) |
| # Primary navigation | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/primary-navigation) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/primary-navigation) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/primary-navigation) | ||
@@ -31,22 +30,21 @@ ## Example | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |label|string|No|The `aria-label` to add to the navigation container.| | ||
| |items|array|Yes|An array of navigation item objects. See [items](#items).| | ||
| |searchHtml|sting|No|| | ||
| |containerClasses|string|No|Classes to add to the parent `div` container.| | ||
| |classes|string|No|Classes to add to the `nav` container.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the `nav` container.| | ||
| | Name | Type | Required | Description | | ||
| | ---------------- | ------ | -------- | ---------------------------------------------------------------------------- | | ||
| | label | string | No | The `aria-label` to add to the navigation container. | | ||
| | items | array | Yes | An array of navigation item objects. See [items](#items). | | ||
| | searchHtml | sting | No | | | ||
| | containerClasses | string | No | Classes to add to the parent `div` container. | | ||
| | classes | string | No | Classes to add to the `nav` container. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the `nav` container. | | ||
| ### Items | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |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.| | ||
| |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.| | ||
| |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.| | ||
| |active|boolean|No|Flag to mark the navigation item as active or not. Defaults to `false`.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the navigation item anchor.| | ||
| | Name | Type | Required | Description | | ||
| | ---------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- | | ||
| | 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. | | ||
| | 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. | | ||
| | 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. | | ||
| | active | boolean | No | Flag to mark the navigation item as active or not. Defaults to `false`. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the navigation item anchor. | | ||
| *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).* | ||
| _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)._ |
| # Progress bar | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/progress-bar) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/progress-bar) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/progress-bar) | ||
| ## Arguments | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| | Name | Type | Required | Description | | ||
| | ---- | ---- | -------- | ----------- | |
| # Rich text editor | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/rich-text-editor) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/rich-text-editor) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/rich-text-editor) | ||
@@ -18,2 +17,1 @@ ## Example | ||
| ## Options | ||
| # Search | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/search) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/search) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/search) | ||
| ## Arguments | ||
| ## Arguments |
| # Side navigation | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/side-navigation) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/side-navigation) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/side-navigation) | ||
@@ -31,38 +30,37 @@ ## Example | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |label|string|No|The `aria-label` to add to the navigation container.| | ||
| |items|array|Yes|An array of navigation item objects. See [items](#items).| | ||
| |sections|array|No|An array of navigation section objects. See [sections](#sections).| | ||
| |classes|string|No|Classes to add to the `nav` container.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the `nav` container.| | ||
| | Name | Type | Required | Description | | ||
| | ---------- | ------ | -------- | ---------------------------------------------------------------------------- | | ||
| | label | string | No | The `aria-label` to add to the navigation container. | | ||
| | items | array | Yes | An array of navigation item objects. See [items](#items). | | ||
| | sections | array | No | An array of navigation section objects. See [sections](#sections). | | ||
| | classes | string | No | Classes to add to the `nav` container. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the `nav` container. | | ||
| ### Sections | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |items|array|Yes|An array of navigation item objects. See [items](#items).| | ||
| |heading|object|Yes|See [heading](#headings)| | ||
| | Name | Type | Required | Description | | ||
| | ------- | ------ | -------- | --------------------------------------------------------- | | ||
| | items | array | Yes | An array of navigation item objects. See [items](#items). | | ||
| | heading | object | Yes | See [heading](#headings) | | ||
| #### Headings | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |headingLevel|numeric|No|A number for the heading level. Defaults to 4 (`<h4>`)| | ||
| |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.| | ||
| |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.| | ||
| |classes|string|No|Classes to add to the heading.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the navigation item anchor.| | ||
| | Name | Type | Required | Description | | ||
| | ------------ | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------- | | ||
| | headingLevel | numeric | No | A number for the heading level. Defaults to 4 (`<h4>`) | | ||
| | 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. | | ||
| | 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. | | ||
| | classes | string | No | Classes to add to the heading. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the navigation item anchor. | | ||
| ### Items | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |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.| | ||
| |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.| | ||
| |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.| | ||
| |active|boolean|No|Flag to mark the navigation item as active or not. Defaults to `false`.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the navigation item anchor.| | ||
| | Name | Type | Required | Description | | ||
| | ---------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- | | ||
| | 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. | | ||
| | 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. | | ||
| | 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. | | ||
| | active | boolean | No | Flag to mark the navigation item as active or not. Defaults to `false`. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the navigation item anchor. | | ||
| *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).* | ||
| _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)._ |
| # Sortable table | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/sortable-table) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/sortable-table) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/sortable-table) | ||
| ## Arguments | ||
| ## Arguments |
| # Sub navigation | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/sub-navigation) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/sub-navigation) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/sub-navigation) | ||
@@ -31,21 +30,20 @@ ## Example | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |label|string|No|The `aria-label` to add to the `nav` container.| | ||
| |items|array|Yes|An array of navigation item objects. See [items](#items).| | ||
| |classes|string|No|Classes to add to the `nav` container.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the `nav` container.| | ||
| | Name | Type | Required | Description | | ||
| | ---------- | ------ | -------- | ---------------------------------------------------------------------------- | | ||
| | label | string | No | The `aria-label` to add to the `nav` container. | | ||
| | items | array | Yes | An array of navigation item objects. See [items](#items). | | ||
| | classes | string | No | Classes to add to the `nav` container. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the `nav` container. | | ||
| ### Items | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |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.| | ||
| |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.| | ||
| |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.| | ||
| |active|boolean|No|Flag to mark the navigation item as active or not. Defaults to `false`.| | ||
| |classes|string|No|Classes to add to the list `li` item.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the navigation item anchor.| | ||
| | Name | Type | Required | Description | | ||
| | ---------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- | | ||
| | 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. | | ||
| | 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. | | ||
| | 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. | | ||
| | active | boolean | No | Flag to mark the navigation item as active or not. Defaults to `false`. | | ||
| | classes | string | No | Classes to add to the list `li` item. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the navigation item anchor. | | ||
| *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).* | ||
| _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)._ |
| # Badge | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/tag) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/tag) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/tag) | ||
| ## Classes | ||
| |Name|Colour code|Colour contrast| | ||
| |---|---|---| | ||
| |moj-tag--purple|#2e358b|| | ||
| |moj-tag--light-purple|#6f72af|| | ||
| |moj-tag--bright-purple|#912b88|| | ||
| |moj-tag--pink|#d53880|| | ||
| |moj-tag--light-pink|#f499be|| | ||
| |moj-tag--red|#b10e1e|| | ||
| |moj-tag--orange|#f47738|| | ||
| |moj-tag--brown|#b58840|| | ||
| |moj-tag--yellow|#ffbf47|| | ||
| |moj-tag--light-green|#85994b|| | ||
| |moj-tag--green|#006435|| | ||
| |moj-tag--turquoise|#28a197|| | ||
| |moj-tag--light-blue|#2b8cc4|| | ||
| |moj-tag--blue|#005ea5|| | ||
| |moj-tag--black|#0b0c0c|| | ||
| |moj-tag--dark-grey|#6f777b|| | ||
| |moj-tag--mid-grey|#bfc1c3|| | ||
| |moj-tag--light-grey|#dee0e2|| | ||
| |moj-tag--light-grey|#f8f8f8|| | ||
| |moj-tag--white|#ffffff|| | ||
| | Name | Colour code | Colour contrast | | ||
| | ---------------------- | ----------- | --------------- | | ||
| | moj-tag--purple | #2e358b | | | ||
| | moj-tag--light-purple | #6f72af | | | ||
| | moj-tag--bright-purple | #912b88 | | | ||
| | moj-tag--pink | #d53880 | | | ||
| | moj-tag--light-pink | #f499be | | | ||
| | moj-tag--red | #b10e1e | | | ||
| | moj-tag--orange | #f47738 | | | ||
| | moj-tag--brown | #b58840 | | | ||
| | moj-tag--yellow | #ffbf47 | | | ||
| | moj-tag--light-green | #85994b | | | ||
| | moj-tag--green | #006435 | | | ||
| | moj-tag--turquoise | #28a197 | | | ||
| | moj-tag--light-blue | #2b8cc4 | | | ||
| | moj-tag--blue | #005ea5 | | | ||
| | moj-tag--black | #0b0c0c | | | ||
| | moj-tag--dark-grey | #6f777b | | | ||
| | moj-tag--mid-grey | #bfc1c3 | | | ||
| | moj-tag--light-grey | #dee0e2 | | | ||
| | moj-tag--light-grey | #f8f8f8 | | | ||
| | moj-tag--white | #ffffff | | |
| # Task list | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/task-list) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/task-list) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/patterns/task-list) | ||
@@ -52,37 +51,36 @@ ## Example | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |sections|array|No|An array of section objects containing task list items. See [sections](#sections).| | ||
| |classes|string|No|Classes to add to the `nav` container.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the `ol` container.| | ||
| | Name | Type | Required | Description | | ||
| | ---------- | ------ | -------- | ---------------------------------------------------------------------------------- | | ||
| | sections | array | No | An array of section objects containing task list items. See [sections](#sections). | | ||
| | classes | string | No | Classes to add to the `nav` container. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the `ol` container. | | ||
| ### Sections | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |items|array|Yes|An array of task list item objects. See [items](#items).| | ||
| |heading|object|Yes|See [heading](#headings)| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the section `li`.| | ||
| | Name | Type | Required | Description | | ||
| | ---------- | ------ | -------- | ------------------------------------------------------------------------- | | ||
| | items | array | Yes | An array of task list item objects. See [items](#items). | | ||
| | heading | object | Yes | See [heading](#headings) | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the section `li`. | | ||
| #### Headings | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |headingLevel|numeric|No|A number for the heading level. Defaults to 2 (`<h2>`)| | ||
| |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.| | ||
| |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.| | ||
| |classes|string|No|Classes to add to the heading.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the item anchor.| | ||
| | Name | Type | Required | Description | | ||
| | ------------ | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------- | | ||
| | headingLevel | numeric | No | A number for the heading level. Defaults to 2 (`<h2>`) | | ||
| | 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. | | ||
| | 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. | | ||
| | classes | string | No | Classes to add to the heading. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the item anchor. | | ||
| #### Items | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |href|string|Yes|URL of the item anchor. Both href and text attributes for items need to be provided to create an item.| | ||
| |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.| | ||
| |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.| | ||
| |complete|boolean|No|Flag to mark the item as complete or not. Defaults to `false`.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the item anchor.| | ||
| | Name | Type | Required | Description | | ||
| | ---------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- | | ||
| | href | string | Yes | URL of the item anchor. Both href and text attributes for items need to be provided to create an item. | | ||
| | 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. | | ||
| | 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. | | ||
| | complete | boolean | No | Flag to mark the item as complete or not. Defaults to `false`. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the item anchor. | | ||
| *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).* | ||
| _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)._ |
| # Ticket Panel | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/ticket-panel) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/ticket-panel) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/ticket-panel) | ||
| ## Example | ||
| Below is a typical example of the timeline component in use. | ||
@@ -33,25 +33,25 @@ | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |classes|string|No|Classes to add to the ticket panel's container.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the ticket panel's container.| | ||
| | Name | Type | Required | Description | | ||
| | ---------- | ------ | -------- | ------------------------------------------------------------------------------------- | | ||
| | classes | string | No | Classes to add to the ticket panel's container. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the ticket panel's container. | | ||
| ### Items | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |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.| | ||
| |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.| | ||
| |classes|string|No|Classes to add to the ticket panel's container.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the ticket panel's container.| | ||
| | Name | Type | Required | Description | | ||
| | ---------- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------- | | ||
| | 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. | | ||
| | 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. | | ||
| | classes | string | No | Classes to add to the ticket panel's container. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the ticket panel's container. | | ||
| ### Classes | ||
| |Name| | ||
| |---| | ||
| |moj-ticket-panel__content--blue| | ||
| |moj-ticket-panel__content--red| | ||
| |moj-ticket-panel__content--yellow| | ||
| |moj-ticket-panel__content--green| | ||
| |moj-ticket-panel__content--purple| | ||
| |moj-ticket-panel__content--orange| | ||
| | Name | | ||
| | ----------------------------------- | | ||
| | moj-ticket-panel\_\_content--blue | | ||
| | moj-ticket-panel\_\_content--red | | ||
| | moj-ticket-panel\_\_content--yellow | | ||
| | moj-ticket-panel\_\_content--green | | ||
| | moj-ticket-panel\_\_content--purple | | ||
| | moj-ticket-panel\_\_content--orange | |
| # Timeline | ||
| - [Guidance](https://moj-design-system.herokuapp.com/components/timeline) | ||
| - [Preview](https://moj-frontend.herokuapp.com/components/timeline) | ||
| - [Guidance](https://design-patterns.service.justice.gov.uk/components/timeline) | ||
@@ -20,2 +19,3 @@ ### Installation | ||
| ## Example | ||
| Below is a typical example of the timeline component in use. | ||
@@ -114,39 +114,39 @@ | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |classes|string|No|Classes to add to the timeline's container.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the timeline's container.| | ||
| | Name | Type | Required | Description | | ||
| | ---------- | ------ | -------- | --------------------------------------------------------------------------------- | | ||
| | classes | string | No | Classes to add to the timeline's container. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the timeline's container. | | ||
| ### Items | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |label|object|Yes|See [item label](#itemlabel).| | ||
| |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.| | ||
| |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.| | ||
| |datetime|object|No|See [item date and time](#itemdatetime).| | ||
| |byline|object|No|See [item byline](#itembyline).| | ||
| |classes|string|No|Classes to add to the timeline's items container.| | ||
| |attributes|object|No|HTML attributes (for example data attributes) to add to the timeline's items container.| | ||
| | Name | Type | Required | Description | | ||
| | ---------- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------- | | ||
| | label | object | Yes | See [item label](#itemlabel). | | ||
| | 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. | | ||
| | 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. | | ||
| | datetime | object | No | See [item date and time](#itemdatetime). | | ||
| | byline | object | No | See [item byline](#itembyline). | | ||
| | classes | string | No | Classes to add to the timeline's items container. | | ||
| | attributes | object | No | HTML attributes (for example data attributes) to add to the timeline's items container. | | ||
| #### Item label | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |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.| | ||
| |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.| | ||
| | Name | Type | Required | Description | | ||
| | ---- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | 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. | | ||
| | 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. | | ||
| #### Item datetime | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |timestamp|string|Yes|A valid datetime string to be formatted. For example: `1970-01-01T11:59:59.000Z`| | ||
| |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`| | ||
| |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/).| | ||
| | Name | Type | Required | Description | | ||
| | --------- | ------ | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | timestamp | string | Yes | A valid datetime string to be formatted. For example: `1970-01-01T11:59:59.000Z` | | ||
| | 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` | | ||
| | 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/). | | ||
| #### Item byline | ||
| |Name|Type|Required|Description| | ||
| |---|---|---|---| | ||
| |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.| | ||
| |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.| | ||
| | Name | Type | Required | Description | | ||
| | ---- | ------ | -------- | --------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | 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. | | ||
| | 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. | |
| { | ||
| "name": "@ministryofjustice/frontend", | ||
| "description": "The MOJ Frontend contains the code you need to start building user interfaces for UK Ministry of Justice government services.", | ||
| "version": "1.6.0", | ||
| "version": "1.6.1", | ||
| "main": "moj/all.js", | ||
@@ -6,0 +6,0 @@ "sass": "moj/all.scss", |
@@ -18,4 +18,4 @@ [](https://github.com/semantic-release/semantic-release) | ||
| 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: | ||
| - [#moj-pattern-library-support](https://mojdt.slack.com/archives/CH5RUSB27) on MOJ Digital & Technology | ||
| - [#moj-design-system channel](https://ukgovernmentdigital.slack.com/archives/CJ6QDRDGC) on UK Government Digital | ||
| - [#moj-pattern-library-support](https://mojdt.slack.com/archives/CH5RUSB27) on Justice Digital Slack | ||
| - [#moj-design-system channel](https://ukgovernmentdigital.slack.com/archives/CJ6QDRDGC) on UK Government Digital Slack | ||
@@ -22,0 +22,0 @@ ## Quick start |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.87%
638753
No dependency changes