govuk-components

A collection of components intended to ease the building of GOV.UK Design System web applications


License
MIT
Install
gem install govuk-components -v 0.5.0

Documentation

This gem is under heavy development and the API is likely to change.

GOV.UK Components

Build Status

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. ViewComponent will be supported natively in Rails 6.1.

What's included

Component name Helper
Accordion govuk_accordion
Back link govuk_back_link
Breadcrumbs govuk_breadcrumbs
Details govuk_details
Footer govuk_footer
Header govuk_header
Inset text govuk_inset_text
Panel govuk_panel
Phase banner govuk_phase_banner
Start now button govuk_start_now_button
Summary list govuk_summary_list
Tabs govuk_tabs
Tag govuk_tag
Warning text govuk_warning

Helpers

  • #govuk_link_to
  • #govuk_mail_to
  • #govuk_button_to
  • #govuk_back_to_top_link
  • #govuk_skip_link

Example use

This library allows components to be rendered with Rails' render method or via the provided helpers. Here we'll use the govuk_accordion to render an accordion.

<%= govuk_accordion(id: 'def234') do |accordion| %>
  <%= accordion.section(title: 'Section 1') do %>
    <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <% end %>
  <%= accordion.section(title: 'Section 2') do %>
    <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <% end %>
  <%= accordion.section(title: 'Section 3') do %>
    <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <% end %>
<% end %>

Here is the rendered accordion.

Accordion preview

For examples on usage see the guide page.

Setup

Add this line to your config/application.rb:

require "govuk/components"

Installation

Add this line to your application's Gemfile:

gem 'govuk-components'

And then execute:

$ bundle

Or install it yourself as:

$ gem install govuk-components

Contributing

To setup the dummy app:

cd spec/dummy yarn install bundle install bin/rails db:create bin/rails db:migrate bin/rails s

After adding a new component update the examples page by cd-ing into the dummy app cd spec/dummy and running the rake task bin/rake generate_examples_page.

License

The gem is available as open source under the terms of the MIT License.