This gem provides a suite of reusable components for the GOV.UK Design System. It is intended to provide a lightweight alternative to the GOV.UK Publishing Components library and is built with Github's ViewComponent framework.
It aims to implement the functionality from the original Nunjucks macros in a way that will feel more familiar to Rails developers. Blocks are preferred over strings of HTML, beneath the surface each component is just a Ruby object, everything is inheritable and overrideable.
All of the non-form components from the GOV.UK Design System are implmented by this library as ViewComponents. Form components are implemented by the form builder.
The provided components are:
- Accordion
- Back link
- Back to top link
- Breadcrumbs
- Cookie banner
- Details
- Footer
- Header
- Inset text
- Notification banner
- Panel
- Phase banner
- Skip link
- Start button
- Summary list
- Tabs
- Tables
- Tags
- Warning text
This library also provides several link helpers that are commonly used in services, including #govuk_link_to
and #govuk_button_to
.
All of the components can be rendered in two ways:
-
directly using Rails'
#render
method:<%= render GovukComponent::WarningTextComponent.new do %> A serious warning <% end %>
-
via the helper wrapper:
<%= govuk_warning_text do %> A serious warning <% end %>
The naming convention for helpers is
govuk_
followed by the component's name in snake case. You can see the full list in GovukComponentsHelper.
This library allows components to be rendered with Rails' render
method or via the provided helpers. Here we'll use the govuk_tabs
to render three tabbed sections:
<%= govuk_tabs(title: 'Days of the week') do |component| %>
<% component.tab(label: 'Monday') do %>
<p>Monday's child is fair of face</p>
<% end %>
<% component.tab(label: 'Tuesday') do %>
<p>Tuesday's child is full of grace</p>
<% end %>
<% component.tab(label: 'Wednesday') do %>
<p>Wednesday's child is full of woe</p>
<% end %>
<% end %>
Here are the rendered tabs:
For examples on usage see the guide page.
Add this line to your config/application.rb
:
require "govuk/components"
- Apply for teacher training
- Find postgraduate teacher training
- Get help with technology
- Publish teacher training courses
- Register trainee teachers
- Teaching Vacancies
Add this line to your application's Gemfile:
gem 'govuk-components'
And then execute:
$ bundle
Or install it yourself as:
$ gem install govuk-components
To setup the dummy app:
cd spec/dummy
yarn install
bundle install
bin/rails db:create
bin/rails db:migrate
bin/rails s
After changing a component or adding a new one:
-
add or update the corresponding specs, and check they pass by running
bundle exec rspec
. -
update the examples page by cd-ing into the dummy app
cd spec/dummy
and running the rake taskbin/rake generate_examples_page
.
The gem is available as open source under the terms of the MIT License.