Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/x-govuk/govuk-decorated-components
Form components for the GOV.UK Design System that require less parameters to collect data.
https://github.com/x-govuk/govuk-decorated-components
components design-system govuk prototyping
Last synced: 7 days ago
JSON representation
Form components for the GOV.UK Design System that require less parameters to collect data.
- Host: GitHub
- URL: https://github.com/x-govuk/govuk-decorated-components
- Owner: x-govuk
- License: mit
- Created: 2022-08-16T12:15:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-25T18:18:47.000Z (over 1 year ago)
- Last Synced: 2024-10-12T00:38:21.329Z (about 1 month ago)
- Topics: components, design-system, govuk, prototyping
- Language: JavaScript
- Homepage: https://x-govuk.github.io/govuk-prototype-rig/using-data/form-components/
- Size: 697 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# GOV.UK Decorated Components · [](https://github.com/x-govuk/govuk-decorated-components/actions/workflows/test.yml)
Form components for the GOV.UK Design System that require less parameters to collect data. [Replace the multiple parameters needed for saving data with a single `decorate` parameter](https://x-govuk.github.io/govuk-prototype-rig/using-data/form-components/).
## Requirements
Node.js v16 or later.
## Installation
> **Note** These components are included by default with the [GOV.UK Prototype Rig](https://x-govuk.github.io/govuk-prototype-rig/).
```shell
npm install govuk-decorated-components --save
```
## Usage
To add them to the GOV.UK Prototype Kit, follow these steps:
1. Add `/node_modules/govuk-decorated-components` to your application’s views (`appViews`) in `server.js`:
```diff
// Set up App
var appViews = extensions.getAppViews([
+ path.join(projectDir, '/node_modules/govuk-decorated-components'),
path.join(projectDir, '/app/views/'),
path.join(projectDir, '/lib/')
])
```
2. Add the `decorate` global function to your Nunjucks environment (`nunjucksAppEnv`) in `server.js`:
```diff
var nunjucksAppEnv = nunjucks.configure(appViews, nunjucksConfig)
// Add Nunjucks Globals
+ const { decorate } = require('govuk-decorated-components')
+ nunjucksAppEnv.addGlobal('decorate', decorate)
// Add Nunjucks filters
utils.addNunjucksFilters(nunjucksAppEnv)
```
3. Replace imported GOV.UK Frontend macros with those provided by this package:
```diff
- {% from "govuk/components/button/macro.njk" import govukButton %}
+ {% from "x-govuk/decorated/button/macro.njk" import govukButton with context %}
- {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
+ {% from "x-govuk/decorated/character-count/macro.njk" import govukCharacterCount with context %}
- {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
+ {% from "x-govuk/decorated/checkboxes/macro.njk" import govukCheckboxes with context %}
- {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
+ {% from "x-govuk/decorated/date-input/macro.njk" import govukDateInput with context %}
- {% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
+ {% from "x-govuk/decorated/file-upload/macro.njk" import govukFileUpload with context %}
- {% from "govuk/components/input/macro.njk" import govukInput %}
+ {% from "x-govuk/decorated/input/macro.njk" import govukInput with context %}
- {% from "govuk/components/radios/macro.njk" import govukRadios %}
+ {% from "x-govuk/decorated/radios/macro.njk" import govukRadios with context %}
- {% from "govuk/components/select/macro.njk" import govukSelect %}
+ {% from "x-govuk/decorated/select/macro.njk" import govukSelect with context %}
- {% from "govuk/components/textarea/macro.njk" import govukTextarea %}
+ {% from "x-govuk/decorated/textarea/macro.njk" import govukTextarea with context %}
```