From e5cebc49b9fa53ac8c7f20843307471e07bd032b Mon Sep 17 00:00:00 2001 From: Peter Yates Date: Tue, 18 Oct 2022 18:01:09 +0100 Subject: [PATCH 1/4] =?UTF-8?q?Remove=20the=20emoji=20from=20the=20readme?= =?UTF-8?q?=20=F0=9F=98=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 24b36e65..678a46b6 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ This library provides an easy-to-use form builder for the [GOV.UK Design System] It is intended to make creating forms **quick**, **easy** and **familiar** for Ruby on Rails developers. -## Documentation πŸ“š +## Documentation The gem comes with [a full guide](https://govuk-form-builder.netlify.app/) that covers most aspects of day-to-day use, along with code and output examples. The @@ -23,7 +23,7 @@ be up to date. [![Netlify Status](https://api.netlify.com/api/v1/badges/d4c50b8d-6ca3-4797-9ab3-6e0731c72b44/deploy-status)](https://app.netlify.com/sites/govuk-form-builder/deploys) -## What's included 🧳 +## What's included * 100% compatibility with the GOV.UK Design System * Full control of labels, legends, hints, captions and fieldsets @@ -38,7 +38,7 @@ be up to date. * An exhaustive test suite * [Extensive technical documentation](https://www.rubydoc.info/gems/govuk_design_system_formbuilder/GOVUKDesignSystemFormBuilder/Builder) -## Installation πŸ— +## Installation You can install the form builder gem by running the `gem install govuk_design_system_formbuilder` or by adding the following line @@ -58,7 +58,7 @@ pre-configured template: * [DfE Rails Template](https://github.com/DFE-Digital/rails-template) * [DEFRA Ruby Template](https://github.com/DEFRA/defra-ruby-template) -## Setup πŸ”§ +## Setup To use the form builder in an ad hoc basis you can specify it as an argument to `form_for` or `form_with`. These examples are written in [Slim](https://github.com/slim-template/slim) but @@ -97,7 +97,7 @@ Now we can get started! = f.govuk_submit 'Away we go!' ``` -## Developing and running the tests πŸ‘¨πŸ»β€πŸ­ +## Developing and running the tests The form builder is tested with RSpec. To run all the tests first ensure that the development and testing prerequisite gems are installed. At the root of a @@ -113,7 +113,7 @@ Now, if everything was successful, run RSpec: bundle exec rspec ``` -## Contributing πŸ“¦ +## Contributing Bug reports and feature requests are most welcome, please raise an issue or submit a pull request. @@ -143,7 +143,7 @@ here are a few from the DfE, Date: Tue, 18 Oct 2022 18:02:04 +0100 Subject: [PATCH 2/4] Add links in README to builders that use this lib --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 678a46b6..b0dcb935 100644 --- a/README.md +++ b/README.md @@ -143,6 +143,11 @@ here are a few from the DfE, Date: Tue, 18 Oct 2022 18:02:40 +0100 Subject: [PATCH 3/4] Add an inset paragraph to the guide on other tools Some people inevitably come to the guide from Google thinking it's a "form builder" in the non-developer sense (a tool people can use to build forms). The library uses the term in the Rails sense (as it wraps Rails' FormBuilder). Linking to consumers of this library is probably a good idea. --- guide/layouts/partials/links.slim | 7 ++++++- guide/lib/helpers/formatters.rb | 6 ++++++ guide/lib/helpers/link_helpers.rb | 8 ++++++++ 3 files changed, 20 insertions(+), 1 deletion(-) diff --git a/guide/layouts/partials/links.slim b/guide/layouts/partials/links.slim index d67c3f68..28657965 100644 --- a/guide/layouts/partials/links.slim +++ b/guide/layouts/partials/links.slim @@ -8,6 +8,12 @@ | Every component of the form builder is designed to produce accessible HTML that meet all of the design system’s requirements without having to spend time reinventing the wheel. + p.govuk-inset-text + | This tool is aimed at developers. If you need a service that + lets you build forms without writing any code, you can + use one of the platforms that wrap this library like + #{link_to_in_new_tab("GOV.UK Forms", govuk_forms_link).html_safe} or + #{link_to_in_new_tab("MoJ Forms", moj_forms_link).html_safe}. nav class="govuk-grid-row govuk-!-margin-bottom-4" .govuk-grid-column-one-third @@ -27,7 +33,6 @@ li== link_to 'Injecting content', '/building-blocks/injecting-content' li== link_to 'Fieldsets', '/building-blocks/fieldsets' li== link_to 'Localisation', '/building-blocks/localisation' - / li== link_to 'Other design systems', '/building-blocks/other-design-systems' .govuk-grid-column-one-third h2.govuk-heading-m Form elements diff --git a/guide/lib/helpers/formatters.rb b/guide/lib/helpers/formatters.rb index 8f93fe77..e3a2187e 100644 --- a/guide/lib/helpers/formatters.rb +++ b/guide/lib/helpers/formatters.rb @@ -4,6 +4,12 @@ def block_has_content?(block) block.call end + def link_to_in_new_tab(*args, **kwargs, &block) + new_tab_args = { rel: "noreferrer noopener", target: "_blank" } + + link_to(*args, **new_tab_args.merge(kwargs), &block) + end + def format_slim(raw, **args) # FIXME: not sure why when we're several # blocks deep we need to unescape more diff --git a/guide/lib/helpers/link_helpers.rb b/guide/lib/helpers/link_helpers.rb index b3145eb7..f186edfb 100644 --- a/guide/lib/helpers/link_helpers.rb +++ b/guide/lib/helpers/link_helpers.rb @@ -105,5 +105,13 @@ def rails_option_groups_from_collection_for_select_link def rails_options_from_collection_for_select_link 'https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-options_from_collection_for_select' end + + def govuk_forms_link + "https://www.forms.service.gov.uk/" + end + + def moj_forms_link + "https://moj-forms.service.justice.gov.uk/" + end end end From 4638a24b996c858fd77c5bbbcb7e7b8be77f7588 Mon Sep 17 00:00:00 2001 From: Peter Yates Date: Wed, 19 Oct 2022 14:56:58 +0100 Subject: [PATCH 4/4] Improve the contrast for inline elements --- guide/content/stylesheets/components/_prose.scss | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/guide/content/stylesheets/components/_prose.scss b/guide/content/stylesheets/components/_prose.scss index 1fd91112..28a2f104 100644 --- a/guide/content/stylesheets/components/_prose.scss +++ b/guide/content/stylesheets/components/_prose.scss @@ -1,3 +1,6 @@ +$app-code-bg: govuk-tint(govuk-colour("light-grey"), 30%); +$app-code-fg: govuk-shade(govuk-colour("pink"), 10%); + .app-prose { h2 { max-width: 20em; @@ -36,8 +39,8 @@ } code { - background-color: govuk-colour("light-grey"); - color: govuk-shade(govuk-colour("red"), 10%); + background-color: $app-code-bg; + color: $app-code-fg; font-family: ui-monospace, monospace; font-size: 1rem; padding: 2px govuk-spacing(1); @@ -46,7 +49,7 @@ pre { @include govuk-responsive-margin(4, "bottom"); @include govuk-font($size: 16); - background-color: govuk-colour("light-grey"); + background-color: $app-code-bg; line-height: 1.4; overflow: auto; padding: govuk-spacing(4); @@ -60,11 +63,6 @@ + .govuk-heading-s { padding-top: govuk-spacing(2) } - - code { - background: none; - padding: 0; - } } .header-anchor {