From 2d09da0e3e0e536e9044762e95acc2ee6ce6c338 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Fri, 1 Dec 2017 15:59:53 +0000 Subject: [PATCH] Add fieldset styles, templating and tests Generate boilerplate for component using bundle exec rails generate govuk_publishing_components:component fieldset Forked from GOV.UK Frontend --- .../stylesheets/components/_fieldset.scss | 42 +++++++++++++++++++ .../components/helpers/_clearfix.scss | 12 ++++++ app/views/components/_fieldset.html.erb | 7 ++++ app/views/components/docs/fieldset.yml | 34 +++++++++++++++ 4 files changed, 95 insertions(+) create mode 100644 app/assets/stylesheets/components/_fieldset.scss create mode 100644 app/assets/stylesheets/components/helpers/_clearfix.scss create mode 100644 app/views/components/_fieldset.html.erb create mode 100644 app/views/components/docs/fieldset.yml diff --git a/app/assets/stylesheets/components/_fieldset.scss b/app/assets/stylesheets/components/_fieldset.scss new file mode 100644 index 000000000..64b270288 --- /dev/null +++ b/app/assets/stylesheets/components/_fieldset.scss @@ -0,0 +1,42 @@ +@import "helpers/clearfix"; + +$govuk-spacing-scale-0: 0; +$govuk-spacing-scale-1: 5px; +$govuk-spacing-scale-2: 10px; +$govuk-spacing-scale-3: 15px; +$govuk-spacing-scale-4: 20px; +$govuk-spacing-scale-5: 30px; +$govuk-spacing-scale-6: 40px; +$govuk-spacing-scale-7: 50px; +$govuk-spacing-scale-8: 60px; + +$govuk-text-colour: $text-colour; +$govuk-secondary-text-colour: $grey-1; + +.app-c-fieldset { + margin: 0 0 $govuk-spacing-scale-4; + + @include media(tablet) { + margin-bottom: $govuk-spacing-scale-5; + } + + padding: 0; + border: 0; + @include govuk-h-clearfix; +} + +.app-c-fieldset__legend { + // Fix legend text wrapping in Edge and IE + // 1. IE9-11 & Edge 12-13 + // 2. IE8-11 + box-sizing: border-box; // 1 + display: table; // 2 + max-width: 100%; // 1 + padding: 0; + // Hack to let legends or elements within legends have margins in webkit browsers + overflow: hidden; + + color: $govuk-text-colour; + white-space: normal; // 1 + @include core-19; +} diff --git a/app/assets/stylesheets/components/helpers/_clearfix.scss b/app/assets/stylesheets/components/helpers/_clearfix.scss new file mode 100644 index 000000000..ed1caa29c --- /dev/null +++ b/app/assets/stylesheets/components/helpers/_clearfix.scss @@ -0,0 +1,12 @@ +// Mixin to clear floats +@mixin govuk-h-clearfix { + &:after { + content: ""; + display: block; + clear: both; + } + + @include ie-lte(7) { + zoom: 1; + } +} diff --git a/app/views/components/_fieldset.html.erb b/app/views/components/_fieldset.html.erb new file mode 100644 index 000000000..9f3671795 --- /dev/null +++ b/app/views/components/_fieldset.html.erb @@ -0,0 +1,7 @@ +<% text = text || yield %> +
+ + <%= legend_text %> + + <%= text %> +
diff --git a/app/views/components/docs/fieldset.yml b/app/views/components/docs/fieldset.yml new file mode 100644 index 000000000..296b85357 --- /dev/null +++ b/app/views/components/docs/fieldset.yml @@ -0,0 +1,34 @@ +name: Form fieldset +description: The fieldset element is used to group several controls within a web form. The legend element represents a caption for the content of its parent fieldset. +body: | + [Using the fieldset and legend elements](https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/) + + You can use the 'text' property or pass 'text' as a block. +accessibility_criteria: | + - must give inputs within the fieldset context with legend text +examples: + default: + data: + legend_text: 'Do you have a passport?' + text: | + + + + + + + with_html_legend: + description: 'If you only have one fieldset on the page you might want to include the title of the page as the legend text. Used with a [captured](http://api.rubyonrails.org/classes/ActionView/Helpers/CaptureHelper.html#method-i-capture) [title](http://govuk-static.herokuapp.com/component-guide/title)' + data: + legend_text: | + +

+ Do you have a passport? +

+ text: | + + + + + +