ET GDS Design System
This gem integrates the govuk-frontend npm modules into a rails
application that is using webpacker.
Usage
The example application in test/dummy provides many examples
on how to use this gem. It is named the 'Kitchen Sink' as it has everything
but the kitchen sink !
Please view the source code in there for more examples, but here
is one for a form component
<%= form_for @kitchen_sink, builder: EtGdsDesignSystem.form_builder_class do |f| %>
<h2>Text Field</h2>
<div>
<%= f.govuk_text_field :text_field_value, label: { text: 'Text field value label' }, hint_text: 'Hint text' %>
</div>
<% end %>
Installation
Add this line to your application's Gemfile:
gem 'et_gds_design_system', git: 'git@github.com:hmcts/et_gds_design_system.git', tag: 'v0.1.0'
And then execute:
$ bundle exec rails g et_gds_design_system:install
You might want to review what it has done - which will work if you
have an application pack in app/javascript/packs/application.js
Also, you may want to consider changing 'extract_css' to true in
your config/webpacker.yml so that your css works when
using browsers without javascript.
Contributing
Whilst this gem is wrapping the work done by others in the gov-uk-frontend npm
module, it is important to always think that it may not always
use that, so wrap things accordingly.
Also, the gem may choose to extend functionality provided by govuk-frontend or event
modify functionality, so do not expect the user of this gem to know
anything about govuk-frontend.
When documenting, you can refer to govuk-frontend for various items but
because this gem can override things, be careful not to send the
user on a wild goose chase when linking to this documentation if the gem
has extended or modified functionality.
For detailed documentation, see docs/development.md
License
The gem is available as open source under the terms of the MIT License.