Merge pull request #561 from alphagov/add-fieldset-components

Add fieldset component

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;
+}

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;
+  }
+}

app/views/components/_fieldset.html.erb

@@ -0,0 +1,7 @@
+<% text = text || yield %>
+<fieldset class="app-c-fieldset">
+  <legend class="app-c-fieldset__legend">
+    <%= legend_text %>
+  </legend>
+  <%= text %>
+</fieldset>

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: |
+        <!-- Use the radio component, this is hardcoded only for this example -->
+        <input type="radio" id="default-yes" name="default"t>
+        <label for="default-yes">Yes</label>
+
+        <input type="radio" id="default-no" name="default"t>
+        <label for="default-no">No</label>
+  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: |
+        <!-- Use the title component, this is hardcoded only for this example -->
+        <h1 style="font-size: 48px; line-height: 1.0416666667; font-weight: bold; margin-bottom: 30px;">
+          Do you have a passport?
+        </h1>
+      text: |
+        <!-- Use the radio component, this is hardcoded only for this example -->
+        <input type="radio" id="html-legend-yes" name="html-legend">
+        <label for="html-legend-yes">Yes</label>
+
+        <input type="radio" id="html-legend-no" name="html-legend">
+        <label for="html-legend-no">No</label>