diff --git a/docs/_includes/layouts/component.njk b/docs/_includes/layouts/component.njk index a2a05f7db..13143fb39 100644 --- a/docs/_includes/layouts/component.njk +++ b/docs/_includes/layouts/component.njk @@ -23,10 +23,6 @@ text: 'Add another', href: ('/components/add-another' | url) }, - { - text: 'Form validator', - href: ('/components/form-validator' | url) - }, { text: 'Multi file upload', href: ('/components/multi-file-upload' | url) @@ -34,10 +30,6 @@ { text: 'Password reveal', href: ('/components/password-reveal' | url) - }, - { - text: 'Rich text editor', - href: ('/components/rich-text-editor' | url) } ] }, diff --git a/docs/components/archived-components.md b/docs/components/archived-components.md index dd279953a..aa69836b1 100644 --- a/docs/components/archived-components.md +++ b/docs/components/archived-components.md @@ -3,19 +3,38 @@ layout: layouts/component.njk title: Archived components --- -MOJ components are archived when similar components are published in the GOV.UK Design System. You should use the GOV.UK Design System component instead. +MOJ components are archived when similar components are published in the GOV.UK Design System, or when it is no longer practical to support them. ### Contents - [Currency input](#currency-input) +- [Form validator](#form-validator) +- [Rich text editor](#rich-text-editor) - [Tag](#tag) - + ## Currency input -[Currency input](../currency-input) was archived on 23 June 2021. +[Currency input](../currency-input) was archived on 23 June 2021. You should use [prefixes and suffixes](https://design-system.service.gov.uk/components/text-input/#prefixes-and-suffixes) in the GOV.UK Design System to help users enter things like currencies. +## Form validator + +[Form validator](../form-validator) was archived on 20 April 2022. + +This component was deemed not sufficiently accessible to be used in live services and too complex to maintain. + +You must validate forms on the server-side. If you require client-side validation, start with [native browser form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation). +For more complex validation, use an accessible validation library. + +## Rich text editor + +[Rich text editor](../rich-text-editor) was archived on 20 April 2022. + +This component was deemed not sufficiently accessible to be used in live services and too complex to maintain. + +You should use an accessible rich text editor like [TinyMCE](https://www.tiny.cloud/tinymce/). + ## Tag Additional colours of [Tag](../tag) was archived on 23 June 2021. diff --git a/docs/components/form-validator.md b/docs/components/form-validator.md index 803533929..ecc5a8bdb 100644 --- a/docs/components/form-validator.md +++ b/docs/components/form-validator.md @@ -3,6 +3,14 @@ layout: layouts/component.njk title: Form validator --- +{% banner "This component is archived" %} + +This component is not sufficiently accessible to be used in live services. + +You must validate forms on the server-side. If you require client-side validation, start with [native browser form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation). +For more complex validation, use an accessible validation library. +{% endbanner %} + {% lastUpdated "form-validator" %} {% example "/examples/form-validator", 1000 %} diff --git a/docs/components/rich-text-editor.md b/docs/components/rich-text-editor.md index dd301bd44..95bea6ed3 100644 --- a/docs/components/rich-text-editor.md +++ b/docs/components/rich-text-editor.md @@ -3,6 +3,13 @@ layout: layouts/component.njk title: Rich text editor --- +{% banner "This component is archived" %} + +This component is not sufficiently accessible to be used in live services. + +You should use an accessible rich text editor like [TinyMCE](https://www.tiny.cloud/tinymce/). +{% endbanner %} + {% lastUpdated "rich-text-editor" %} {% example "/examples/rich-text-editor", 300 %} @@ -29,6 +36,3 @@ You can also add bold, underline and italic buttons but these styles should be u You can customise the formatting options shown in the toolbar with the `data-moj-rich-text-editor-toolbar` attribute. {% example "/examples/rich-text-editor-formatting", 300 %} - - -