govuk-design-system-rails 0.10.1

data/spec/helpers/govuk_design_system/breadcrumbs_helper_spec.rb

@@ -0,0 +1,90 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::BreadcrumbsHelper, type: :helper do
+  describe "#govukBreadcrumbs" do
+    it "returns the correct HTML for the default example" do
+      html = helper.govukBreadcrumbs({
+        items: [
+          {
+            text: "Home",
+            href: "#"
+          },
+          {
+            text: "Passports, travel and living abroad",
+            href: "#"
+          },
+          {
+            text: "Travel abroad",
+            href: "#"
+          }
+        ]
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-breadcrumbs">
+          <ol class="govuk-breadcrumbs__list">
+            <li class="govuk-breadcrumbs__list-item">
+              <a class="govuk-breadcrumbs__link" href="#">Home</a>
+            </li>
+            <li class="govuk-breadcrumbs__list-item">
+              <a class="govuk-breadcrumbs__link" href="#">Passports, travel and living abroad</a>
+            </li>
+            <li class="govuk-breadcrumbs__list-item">
+              <a class="govuk-breadcrumbs__link" href="#">Travel abroad</a>
+            </li>
+          </ol>
+        </div>
+      HTML
+    end
+
+    it "allows a collapsing on mobile" do
+      html = helper.govukBreadcrumbs({
+        collapseOnMobile: true,
+        items: [
+          {
+            text: "Home",
+            href: "#"
+          },
+          {
+            text: "Environment",
+            href: "#"
+          },
+          {
+            text: "Rural and countryside",
+            href: "#"
+          },
+          {
+            text: "Rural development and land management",
+            href: "#"
+          },
+          {
+            text: "Economic growth in rural areas",
+            href: "#"
+          }
+        ]
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile">
+          <ol class="govuk-breadcrumbs__list">
+            <li class="govuk-breadcrumbs__list-item">
+              <a class="govuk-breadcrumbs__link" href="#">Home</a>
+            </li>
+            <li class="govuk-breadcrumbs__list-item">
+              <a class="govuk-breadcrumbs__link" href="#">Environment</a>
+            </li>
+            <li class="govuk-breadcrumbs__list-item">
+              <a class="govuk-breadcrumbs__link" href="#">Rural and countryside</a>
+            </li>
+            <li class="govuk-breadcrumbs__list-item">
+              <a class="govuk-breadcrumbs__link" href="#">Rural development and land management</a>
+            </li>
+            <li class="govuk-breadcrumbs__list-item">
+              <a class="govuk-breadcrumbs__link" href="#">Economic growth in rural areas</a>
+            </li>
+          </ol>
+        </div>
+      HTML
+    end
+  end
+end

data/spec/helpers/govuk_design_system/button_helper_spec.rb

@@ -0,0 +1,34 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::ButtonHelper, type: :helper do
+  describe "#govukButton" do
+    it "returns the correct HTML for the default example" do
+      html = helper.govukButton({
+        text: "Save and continue"
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <button class="govuk-button" data-module="govuk-button">
+          Save and continue
+        </button>
+      HTML
+    end
+
+    it "produces start buttons with an href as link" do
+      html = helper.govukButton({
+        text: "Start now",
+        href: "#",
+        isStartButton: true
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <a href="#" role="button" draggable="false" class="govuk-button govuk-button--start" data-module="govuk-button">
+          Start now
+          <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
+            <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
+          </svg>
+        </a>
+      HTML
+    end
+  end
+end

data/spec/helpers/govuk_design_system/checkboxes_helper_spec.rb

@@ -0,0 +1,146 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::CheckboxesHelper, type: :helper do
+  describe "#govukCheckboxes" do
+    it "returns the correct HTML for the default example" do
+      html = helper.govukCheckboxes({
+        idPrefix: "waste",
+        name: "waste",
+        fieldset: {
+          legend: {
+            text: "Which types of waste do you transport?",
+            isPageHeading: true,
+            classes: "govuk-fieldset__legend--l"
+          }
+        },
+        hint: {
+          text: "Select all that apply."
+        },
+        items: [
+          {
+            value: "carcasses",
+            text: "Waste from animal carcasses",
+            disable_ghost: true
+          },
+          {
+            value: "mines",
+            text: "Waste from mines or quarries",
+            disable_ghost: true
+          },
+          {
+            value: "farm",
+            text: "Farm or agricultural waste",
+            disable_ghost: true
+          }
+        ]
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-form-group">
+          <fieldset class="govuk-fieldset" aria-describedby="waste-hint">
+            <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+              <h1 class="govuk-fieldset__heading">
+                Which types of waste do you transport?
+              </h1>
+            </legend>
+            <div id="waste-hint" class="govuk-hint">
+              Select all that apply.
+            </div>
+            <div class="govuk-checkboxes" data-module="govuk-checkboxes">
+              <div class="govuk-checkboxes__item">
+                <input class="govuk-checkboxes__input" id="waste" name="waste" type="checkbox" value="carcasses">
+                <label class="govuk-label govuk-checkboxes__label" for="waste">
+                  Waste from animal carcasses
+                </label>
+              </div>
+              <div class="govuk-checkboxes__item">
+                <input class="govuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines">
+                <label class="govuk-label govuk-checkboxes__label" for="waste-2">
+                  Waste from mines or quarries
+                </label>
+              </div>
+              <div class="govuk-checkboxes__item">
+                <input class="govuk-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm">
+                <label class="govuk-label govuk-checkboxes__label" for="waste-3">
+                  Farm or agricultural waste
+                </label>
+              </div>
+            </div>
+
+          </fieldset>
+        </div>
+      HTML
+    end
+
+    it "adds ghost inputs by default as required by Rails" do
+      # NOTE: https://github.com/govuk-ruby/govuk-design-system-rails/blob/master/README.md#component-implementations
+      html = helper.govukCheckboxes({
+        idPrefix: "waste",
+        name: "waste",
+        fieldset: {
+          legend: {
+            text: "Which types of waste do you transport?",
+            isPageHeading: true,
+            classes: "govuk-fieldset__legend--l"
+          }
+        },
+        hint: {
+          text: "Select all that apply."
+        },
+        items: [
+          {
+            value: "carcasses",
+            text: "Waste from animal carcasses",
+          },
+          {
+            value: "mines",
+            text: "Waste from mines or quarries",
+          },
+          {
+            value: "farm",
+            text: "Farm or agricultural waste",
+          }
+        ]
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-form-group">
+          <fieldset class="govuk-fieldset" aria-describedby="waste-hint">
+            <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+              <h1 class="govuk-fieldset__heading">
+                Which types of waste do you transport?
+              </h1>
+            </legend>
+            <div id="waste-hint" class="govuk-hint">
+              Select all that apply.
+            </div>
+            <div class="govuk-checkboxes" data-module="govuk-checkboxes">
+              <input type="hidden" value="0" name="waste">
+              <div class="govuk-checkboxes__item">
+                <input class="govuk-checkboxes__input" id="waste" name="waste" type="checkbox" value="carcasses">
+                <label class="govuk-label govuk-checkboxes__label" for="waste">
+                  Waste from animal carcasses
+                </label>
+              </div>
+              <input type="hidden" value="0" name="waste">
+              <div class="govuk-checkboxes__item">
+                <input class="govuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines">
+                <label class="govuk-label govuk-checkboxes__label" for="waste-2">
+                  Waste from mines or quarries
+                </label>
+              </div>
+              <input type="hidden" value="0" name="waste">
+              <div class="govuk-checkboxes__item">
+                <input class="govuk-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm">
+                <label class="govuk-label govuk-checkboxes__label" for="waste-3">
+                  Farm or agricultural waste
+                </label>
+              </div>
+            </div>
+
+          </fieldset>
+        </div>
+      HTML
+    end
+  end
+end

data/spec/helpers/govuk_design_system/cookie_banner_helper_spec.rb

@@ -0,0 +1,65 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::CookieBannerHelper, type: :helper do
+  describe "#govukCookieBanner" do
+    it "returns the correct HTML for the default example" do
+      html = helper.govukCookieBanner({
+        ariaLabel: "Cookies on [name of service]",
+        messages: [
+          {
+            headingText: "Cookies on [name of service]",
+            html: <<~HTML.html_safe,
+              <p class="govuk-body">We use some essential cookies to make this service work.</p>
+              <p class="govuk-body">We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
+            HTML
+            actions: [
+              {
+                text: "Accept analytics cookies",
+                type: "button",
+                name: "cookies",
+                value: "accept"
+              },
+              {
+                text: "Reject analytics cookies",
+                type: "button",
+                name: "cookies",
+                value: "reject"
+              },
+              {
+                text: "View cookies",
+                href: "#"
+              }
+            ]
+          }
+        ]
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-cookie-banner" data-nosnippet="true" role="region" aria-label="Cookies on [name of service]">
+          <div class="govuk-cookie-banner__message govuk-width-container">
+
+            <div class="govuk-grid-row">
+              <div class="govuk-grid-column-two-thirds">
+                <h2 class="govuk-cookie-banner__heading govuk-heading-m">Cookies on [name of service]</h2>
+
+                <div class="govuk-cookie-banner__content">
+                  <p class="govuk-body">We use some essential cookies to make this service work.</p>
+                  <p class="govuk-body">We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
+                </div>
+              </div>
+            </div>
+            <div class="govuk-button-group">
+              <button value="accept" type="button" name="cookies" class="govuk-button" data-module="govuk-button">
+                Accept analytics cookies
+              </button>
+              <button value="reject" type="button" name="cookies" class="govuk-button" data-module="govuk-button">
+                Reject analytics cookies
+              </button>
+              <a class="govuk-link" href="#">View cookies</a>
+            </div>
+          </div>
+        </div>
+      HTML
+    end
+  end
+end

data/spec/helpers/govuk_design_system/date_input_helper_spec.rb

@@ -0,0 +1,63 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::DateInputHelper, type: :helper do
+  describe "#govukDateInput" do
+    it "returns the correct HTML for the default example" do
+      html = helper.govukDateInput({
+        id: "passport-issued",
+        namePrefix: "passport-issued",
+        fieldset: {
+          legend: {
+            text: "When was your passport issued?",
+            isPageHeading: true,
+            classes: "govuk-fieldset__legend--l"
+          }
+        },
+        hint: {
+          text: "For example, 27 3 2007"
+        }
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-form-group">
+          <fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-hint">
+            <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+              <h1 class="govuk-fieldset__heading">
+                When was your passport issued?
+              </h1>
+            </legend>
+            <div id="passport-issued-hint" class="govuk-hint">
+              For example, 27 3 2007
+            </div>
+            <div class="govuk-date-input" id="passport-issued">
+              <div class="govuk-date-input__item">
+                <div class="govuk-form-group">
+                  <label class="govuk-label govuk-date-input__label" for="passport-issued-day">
+                    Day
+                  </label>
+                  <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="passport-issued-day" name="passport-issued-day" type="text" inputmode="numeric" pattern="[0-9]*">
+                </div>
+              </div>
+              <div class="govuk-date-input__item">
+                <div class="govuk-form-group">
+                  <label class="govuk-label govuk-date-input__label" for="passport-issued-month">
+                    Month
+                  </label>
+                  <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="passport-issued-month" name="passport-issued-month" type="text" inputmode="numeric" pattern="[0-9]*">
+                </div>
+              </div>
+              <div class="govuk-date-input__item">
+                <div class="govuk-form-group">
+                  <label class="govuk-label govuk-date-input__label" for="passport-issued-year">
+                    Year
+                  </label>
+                  <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="passport-issued-year" name="passport-issued-year" type="text" inputmode="numeric" pattern="[0-9]*">
+                </div>
+              </div>
+            </div>
+          </fieldset>
+        </div>
+      HTML
+    end
+  end
+end

data/spec/helpers/govuk_design_system/details_helper_spec.rb

@@ -0,0 +1,42 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::DetailsHelper, type: :helper do
+  describe "#govukDetails" do
+    it "returns the correct HTML for the default example" do
+      html = helper.govukDetails({
+        summaryText: "Help with nationality",
+        text: "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post."
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <details class="govuk-details" data-module="govuk-details">
+          <summary class="govuk-details__summary">
+            <span class="govuk-details__summary-text">
+              Help with nationality
+            </span>
+          </summary>
+          <div class="govuk-details__text">
+            We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
+          </div>
+        </details>
+      HTML
+    end
+
+    it "accepts a block to generate the HTML" do
+      html = helper.govukDetails({ summaryText: "Testing block generation" }) { "Inner HTML" }
+
+      expect(html).to match_html(<<~HTML)
+        <details class="govuk-details" data-module="govuk-details">
+          <summary class="govuk-details__summary">
+            <span class="govuk-details__summary-text">
+              Testing block generation
+            </span>
+          </summary>
+          <div class="govuk-details__text">
+            Inner HTML
+          </div>
+        </details>
+      HTML
+    end
+  end
+end

data/spec/helpers/govuk_design_system/error_message_helper_spec.rb

@@ -0,0 +1,18 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::ErrorMessageHelper, type: :helper do
+  describe "#govukErrorMessage" do
+    it "returns the correct HTML for the default example" do
+      html = helper.govukErrorMessage({
+        text: "Rhowch eich enw llawn",
+        visuallyHiddenText: "Gwall"
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <p class="govuk-error-message">
+          <span class="govuk-visually-hidden">Gwall:</span> Rhowch eich enw llawn
+        </p>
+      HTML
+    end
+  end
+end

data/spec/helpers/govuk_design_system/error_summary_helper_spec.rb

@@ -0,0 +1,39 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::ErrorSummaryHelper, type: :helper do
+  describe "#govukErrorSummary" do
+    it "returns the correct HTML for the default example" do
+      html = helper.govukErrorSummary({
+        titleText: "There is a problem",
+        errorList: [
+          {
+            text: "The date your passport was issued must be in the past",
+            href: "#passport-issued-day"
+          },
+          {
+            text: "Enter a postcode, like AA1 1AA",
+            href: "#postcode-input"
+          }
+        ]
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-error-summary" aria-labelledby="error-summary-title" role="alert" data-module="govuk-error-summary">
+          <h2 class="govuk-error-summary__title" id="error-summary-title">
+            There is a problem
+          </h2>
+          <div class="govuk-error-summary__body">
+            <ul class="govuk-list govuk-error-summary__list">
+              <li>
+                <a href="#passport-issued-day">The date your passport was issued must be in the past</a>
+              </li>
+              <li>
+                <a href="#postcode-input">Enter a postcode, like AA1 1AA</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      HTML
+    end
+  end
+end

data/spec/helpers/govuk_design_system/header_helper_spec.rb

@@ -0,0 +1,138 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::HeaderHelper, type: :helper do
+  describe "#govukHeader" do
+    it "with only homepageUrl defined" do
+      html = helper.govukHeader({
+        homepageUrl: "/home"
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <header class="govuk-header" role="banner" data-module="govuk-header">
+          <div class="govuk-header__container govuk-width-container">
+            <div class="govuk-header__logo">
+              <a href="/home" class="govuk-header__link govuk-header__link--homepage">
+                <span class="govuk-header__logotype">
+                  <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+                    <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
+                  </svg>
+                  <span class="govuk-header__logotype-text">
+                    GOV.UK
+                  </span>
+                </span>
+              </a>
+            </div>
+          </div>
+        </header>
+      HTML
+    end
+
+    it "with homepageUrl, serviceName and serviceUrl defined" do
+      html = helper.govukHeader({
+        homepageUrl: "/home",
+        serviceName: "Name of the Service",
+        serviceUrl: "https://serviceurl.gov.uk"
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <header class="govuk-header" role="banner" data-module="govuk-header">
+          <div class="govuk-header__container govuk-width-container">
+            <div class="govuk-header__logo">
+              <a href="/home" class="govuk-header__link govuk-header__link--homepage">
+                <span class="govuk-header__logotype">
+                  <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+                    <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
+                  </svg>
+                  <span class="govuk-header__logotype-text">
+                    GOV.UK
+                  </span>
+                </span>
+              </a>
+            </div>
+            <div class="govuk-header__content">
+              <a href="https://serviceurl.gov.uk" class="govuk-header__link govuk-header__link--service-name">
+                Name of the Service
+              </a>
+            </div>
+          </div>
+        </header>
+      HTML
+    end
+
+    it "with homepageUrl, serviceName, serviceUrl and navigation items defined" do
+      html = helper.govukHeader({
+        homepageUrl: "/home",
+        serviceName: "Service name",
+        serviceUrl: "https://serviceurl.gov.uk",
+        navigation: [
+          {
+            href: "#1",
+            text: "Navigation item 1",
+            active: true
+          },
+          {
+            href: "#2",
+            text: "Navigation item 2"
+          },
+          {
+            href: "#3",
+            text: "Navigation item 3"
+          },
+          {
+            href: "#4",
+            text: "Navigation item 4"
+          }
+        ]
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <header class="govuk-header" role="banner" data-module="govuk-header">
+          <div class="govuk-header__container govuk-width-container">
+            <div class="govuk-header__logo">
+              <a href="/home" class="govuk-header__link govuk-header__link--homepage">
+                <span class="govuk-header__logotype">
+                  <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+                    <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
+                  </svg>
+                  <span class="govuk-header__logotype-text">
+                    GOV.UK
+                  </span>
+                </span>
+              </a>
+            </div>
+            <div class="govuk-header__content">
+              <a href="https://serviceurl.gov.uk" class="govuk-header__link govuk-header__link--service-name">
+                Service name
+              </a>
+              <nav aria-label="Menu" class="govuk-header__navigation">
+                <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide menu" hidden>Menu</button>
+                <ul id="navigation" class="govuk-header__navigation-list">
+                  <li class="govuk-header__navigation-item govuk-header__navigation-item--active">
+                    <a class="govuk-header__link" href="#1">
+                      Navigation item 1
+                    </a>
+                  </li>
+                  <li class="govuk-header__navigation-item">
+                    <a class="govuk-header__link" href="#2">
+                      Navigation item 2
+                    </a>
+                  </li>
+                  <li class="govuk-header__navigation-item">
+                    <a class="govuk-header__link" href="#3">
+                      Navigation item 3
+                    </a>
+                  </li>
+                  <li class="govuk-header__navigation-item">
+                    <a class="govuk-header__link" href="#4">
+                      Navigation item 4
+                    </a>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div>
+        </header>
+      HTML
+    end
+  end
+end