govuk-design-system-rails 0.10.1

data/spec/helpers/govuk_design_system/hint_helper_spec.rb

@@ -0,0 +1,20 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::HintHelper, type: :helper do
+  describe "#govukHint" do
+    it "returns the correct HTML for the default example" do
+      html = helper.govukHint({
+        id: "test-hint",
+        classes: %w[test-class],
+        attributes: { "data-test" => "test-attr" },
+        text: "test"
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-hint test-class" data-test="test-attr" id="test-hint">
+          test
+        </div>
+      HTML
+    end
+  end
+end

data/spec/helpers/govuk_design_system/hmcts_badge_helper_spec.rb

@@ -0,0 +1,16 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::HmctsBadgeHelper, type: :helper do
+  describe "#hmctsBadge" do
+    it "returns the correct HTML for success" do
+      html = helper.hmctsBadge({
+        text: "Information",
+        classes: "hmcts-govuk-badge--green"
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <span class="hmcts-badge hmcts-govuk-badge--green">Information</span>
+      HTML
+    end
+  end
+end

data/spec/helpers/govuk_design_system/hmcts_banner_helper_spec.rb

@@ -0,0 +1,59 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::HmctsBannerHelper, type: :helper do
+  describe "#govukInput" do
+    it "returns the correct HTML for success" do
+      html = helper.hmctsBanner({
+        text: "The image was added",
+        type: "success"
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="hmcts-banner hmcts-banner--success">
+          <div class="hmcts-banner__message">
+            The image was added
+            <svg class="hmcts-banner__icon" focusable="false" height="25" role="presentation" viewBox="0 0 25 25" width="25" xmlns="http://www.w3.org/2000/svg">
+              <path d="M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z"></path>
+            </svg>
+          </div>
+        </div>
+      HTML
+    end
+
+    it "returns the correct HTML for information" do
+      html = helper.hmctsBanner({
+        text: "The image did not finish uploading - you must refresh the image",
+        type: "information"
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="hmcts-banner">
+          <div class="hmcts-banner__message">
+            The image did not finish uploading - you must refresh the image
+            <svg class="hmcts-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25">
+              <path d="M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8 C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z"></path>
+            </svg>
+          </div>
+        </div>
+      HTML
+    end
+
+    it "returns the correct HTML when a symbol type is passed" do
+      html = helper.hmctsBanner({
+        text: "The image did not finish uploading - you must refresh the image",
+        type: :information
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="hmcts-banner">
+          <div class="hmcts-banner__message">
+            The image did not finish uploading - you must refresh the image
+            <svg class="hmcts-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25">
+              <path d="M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8 C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z"></path>
+            </svg>
+          </div>
+        </div>
+      HTML
+    end
+  end
+end

data/spec/helpers/govuk_design_system/input_helper_spec.rb

@@ -0,0 +1,157 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::InputHelper, type: :helper do
+  describe "#govukInput" do
+    it "returns the correct HTML for the default example" do
+      html = helper.govukInput({
+        label: {
+          text: "What is the name of the event?",
+          classes: "govuk-label--l",
+          isPageHeading: true
+        },
+        id: "event-name",
+        name: "event-name"
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-form-group">
+          <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="event-name">
+              What is the name of the event?
+            </label>
+          </h1>
+          <input class="govuk-input" id="event-name" name="event-name" type="text">
+        </div>
+      HTML
+    end
+
+    it "allows a prefix" do
+      html = helper.govukInput({
+        id: "cost",
+        name: "cost",
+        label: {
+          text: "What is the cost in pounds?",
+          classes: "govuk-label--l",
+          isPageHeading: true
+        },
+        prefix: {
+          text: "£"
+        },
+        classes: "govuk-input--width-5",
+        spellcheck: false
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-form-group">
+          <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="cost">
+              What is the cost in pounds?
+            </label>
+          </h1>
+          <div class="govuk-input__wrapper">
+            <div class="govuk-input__prefix" aria-hidden="true">£</div>
+            <input class="govuk-input govuk-input--width-5" id="cost" name="cost" type="text" spellcheck="false">
+          </div>
+        </div>
+      HTML
+    end
+
+    it "allows hint text" do
+      html = helper.govukInput({
+        label: {
+          text: "What is the name of the event?",
+          classes: "govuk-label--l",
+          isPageHeading: true
+        },
+        hint: {
+          text: "The name you’ll use on promotional material"
+        },
+        id: "event-name",
+        name: "event-name"
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-form-group">
+          <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="event-name">
+              What is the name of the event?
+            </label>
+          </h1>
+          <div id="event-name-hint" class="govuk-hint">
+            The name you’ll use on promotional material
+          </div>
+          <input class="govuk-input" id="event-name" name="event-name" type="text" aria-describedby="event-name-hint">
+        </div>
+      HTML
+    end
+
+    it "allows a pattern to be specified" do
+      html = helper.govukInput({
+        label: {
+          text: "What is your account number?",
+          classes: "govuk-label--l",
+          isPageHeading: true
+        },
+        classes: "govuk-input--width-10",
+        hint: {
+          text: "Must be between 6 and 8 digits long"
+        },
+        id: "account-number",
+        name: "account-number",
+        inputmode: "numeric",
+        pattern: "[0-9]*",
+        spellcheck: false
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-form-group">
+          <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="account-number">
+              What is your account number?
+            </label>
+          </h1>
+          <div id="account-number-hint" class="govuk-hint">
+            Must be between 6 and 8 digits long
+          </div>
+          <input class="govuk-input govuk-input--width-10" id="account-number" name="account-number" type="text" spellcheck="false" aria-describedby="account-number-hint" pattern="[0-9]*" inputmode="numeric">
+        </div>
+      HTML
+    end
+
+    it "handles error messages correctly" do
+      html = helper.govukInput({
+        id: "cost-per-item-error",
+        name: "cost-per-item-error",
+        label: {
+          text: "What is the cost per item, in pounds?",
+          classes: "govuk-label--l",
+          isPageHeading: true
+        },
+        prefix: {
+          text: "£"
+        },
+        suffix: {
+          text: "per item"
+        },
+        errorMessage: {
+          text: "Enter a cost per item, in pounds"
+        },
+        classes: "govuk-input--width-5",
+        spellcheck: false
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-form-group govuk-form-group--error">
+          <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="cost-per-item-error">
+              What is the cost per item, in pounds?
+            </label>
+          </h1>
+          <p id="cost-per-item-error-error" class="govuk-error-message">
+            <span class="govuk-visually-hidden">Error:</span> Enter a cost per item, in pounds
+          </p>
+          <div class="govuk-input__wrapper">
+            <div class="govuk-input__prefix" aria-hidden="true">£</div>
+            <input class="govuk-input govuk-input--width-5 govuk-input--error" id="cost-per-item-error" name="cost-per-item-error" type="text" spellcheck="false" aria-describedby="cost-per-item-error-error">
+            <div class="govuk-input__suffix" aria-hidden="true">per item</div>
+          </div>
+        </div>
+      HTML
+    end
+  end
+end

data/spec/helpers/govuk_design_system/inset_text_helper_spec.rb

@@ -0,0 +1,58 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::InsetTextHelper, type: :helper do
+  describe "#govukInsetText" do
+    it "returns the correct HTML for the default example" do
+      html = helper.govukInsetText({
+        text: "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-inset-text">
+          It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
+        </div>
+      HTML
+    end
+
+    it "returns the correct HTML for an example using html" do
+      inset_html = <<~HTML.html_safe
+        <p class="govuk-body-l govuk-!-margin-bottom-4">
+          Creating a case starts from a product record page.
+        </p>
+        <p class="govuk-body">
+          Find a product and create the case from there.
+        </p>
+        <details class="govuk-details" data-module="govuk-details">
+          <summary class="govuk-details__summary">
+            <span class="govuk-details__summary-text">
+              How to create a case
+            </span>
+          </summary>
+        </details>
+      HTML
+
+      html = helper.govukInsetText({
+        classes: "govuk-!-margin-bottom-7",
+        html: inset_html
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-inset-text govuk-!-margin-bottom-7">
+          <p class="govuk-body-l govuk-!-margin-bottom-4">
+            Creating a case starts from a product record page.
+          </p>
+          <p class="govuk-body">
+            Find a product and create the case from there.
+          </p>
+          <details class="govuk-details" data-module="govuk-details">
+            <summary class="govuk-details__summary">
+              <span class="govuk-details__summary-text">
+                How to create a case
+              </span>
+            </summary>
+          </details>
+        </div>
+      HTML
+    end
+  end
+end

data/spec/helpers/govuk_design_system/label_helper_spec.rb

@@ -0,0 +1,21 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::LabelHelper, type: :helper do
+  describe "#govukLabel" do
+    it "returns the correct HTML for the default example" do
+      html = helper.govukLabel({
+        html: "<strong>test</strong>".html_safe,
+        isPageHeading: true,
+        for: "test"
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <h1 class="govuk-label-wrapper">
+          <label class="govuk-label" for="test">
+            <strong>test</strong>
+          </label>
+        </h1>
+      HTML
+    end
+  end
+end

data/spec/helpers/govuk_design_system/notification_banner_helper_spec.rb

@@ -0,0 +1,98 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::NotificationBannerHelper, type: :helper do
+  describe "#govukNotificationBanner" do
+    context "when passing html to the component" do
+      it "returns the correct HTML" do
+        html = '<p class="govuk-notification-banner__heading">You have 7 days left to send your application.<a class="govuk-notification-banner__link" href="#">View application</a>.</p>'.html_safe
+        output = helper.govukNotificationBanner({
+          html: html,
+        })
+
+        expect(output).to match_html(<<~HTML)
+            <div class="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
+            <div class="govuk-notification-banner__header">
+              <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
+                Important
+              </h2>
+            </div>
+            <div class="govuk-notification-banner__content">
+              <p class="govuk-notification-banner__heading">
+                You have 7 days left to send your application.
+                <a class="govuk-notification-banner__link" href="#">View application</a>.
+              </p>
+            </div>
+          </div>
+        HTML
+      end
+    end
+
+    context "when passing text to the component" do
+      it "returns the correct HTML" do
+        output = helper.govukNotificationBanner({
+          text: "There may be a delay in processing your application because of the coronavirus outbreak."
+        })
+
+        expect(output).to match_html(<<~HTML)
+          <div class="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
+            <div class="govuk-notification-banner__header">
+              <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
+                Important
+              </h2>
+            </div>
+            <div class="govuk-notification-banner__content">
+              <p class="govuk-notification-banner__heading">There may be a delay in processing your application because of the coronavirus outbreak.</p>
+            </div>
+          </div>
+        HTML
+      end
+    end
+
+    context "when passing a block to the component" do
+      it "returns the correct HTML" do
+        output = helper.govukNotificationBanner { "Testing block passing" }
+
+        expect(output).to match_html(<<~HTML)
+          <div class="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
+            <div class="govuk-notification-banner__header">
+              <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
+                Important
+              </h2>
+            </div>
+            <div class="govuk-notification-banner__content">
+              Testing block passing
+            </div>
+          </div>
+        HTML
+      end
+    end
+
+    context "when rendering a success banner" do
+      context "when passing html to the component" do
+        it "returns the correct HTML for success" do
+          html = "<h3 class='govuk-notification-banner__heading'>Training outcome recorded and trainee withdrawn</h3><p class='govuk-body'>Contact <a class='govuk-notification-banner__link' href='#'>example@department.gov.uk</a> if you think there's a problem.</p>".html_safe
+          output = helper.govukNotificationBanner({
+            html: html,
+            type: "success"
+          })
+
+          expect(output).to match_html(<<~HTML)
+            <div class="govuk-notification-banner govuk-notification-banner--success" role="alert" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
+              <div class="govuk-notification-banner__header">
+                <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
+                  Success
+                </h2>
+              </div>
+              <div class="govuk-notification-banner__content">
+                <h3 class="govuk-notification-banner__heading">
+                  Training outcome recorded and trainee withdrawn
+                </h3>
+                <p class="govuk-body">Contact <a class="govuk-notification-banner__link" href="#">example@department.gov.uk</a> if you think there's a problem.</p>
+              </div>
+            </div>
+          HTML
+        end
+      end
+    end
+  end
+end