govuk-design-system-rails 0.10.1

data/spec/helpers/govuk_design_system/radios_helper_spec.rb

@@ -0,0 +1,270 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::RadiosHelper, type: :helper do
+  describe "#govukRadios" do
+    it "returns the correct HTML when there is a hint" do
+      html = helper.govukRadios({
+        classes: "govuk-radios--inline",
+        idPrefix: "changed-name",
+        name: "changed-name",
+        fieldset: {
+          legend: {
+            text: "Have you changed your name?",
+            isPageHeading: true,
+            classes: "govuk-fieldset__legend--l"
+          }
+        },
+        hint: {
+          text: "This includes changing your last name or spelling your name differently."
+        },
+        items: [
+          {
+            value: "yes",
+            text: "Yes"
+          },
+          {
+            value: "no",
+            text: "No"
+          }
+        ]
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-form-group">
+          <fieldset class="govuk-fieldset" aria-describedby="changed-name-hint">
+            <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+              <h1 class="govuk-fieldset__heading">
+                Have you changed your name?
+              </h1>
+            </legend>
+            <div id="changed-name-hint" class="govuk-hint">
+              This includes changing your last name or spelling your name differently.
+            </div>
+            <div class="govuk-radios govuk-radios--inline" data-module="govuk-radios">
+              <div class="govuk-radios__item">
+                <input class="govuk-radios__input" id="changed-name-1" name="changed-name" type="radio" value="yes">
+                <label class="govuk-label govuk-radios__label" for="changed-name-1">
+                  Yes
+                </label>
+              </div>
+              <div class="govuk-radios__item">
+                <input class="govuk-radios__input" id="changed-name-2" name="changed-name" type="radio" value="no">
+                <label class="govuk-label govuk-radios__label" for="changed-name-2">
+                  No
+                </label>
+              </div>
+            </div>
+          </fieldset>
+        </div>
+      HTML
+    end
+
+    it "returns the correct HTML when there is an error message" do
+      html = helper.govukRadios({
+        idPrefix: "where-do-you-live",
+        name: "where-do-you-live",
+        fieldset: {
+          legend: {
+            text: "Where do you live?",
+            isPageHeading: true,
+            classes: "govuk-fieldset__legend--l"
+          }
+        },
+        items: [
+          {
+            value: "england",
+            text: "England"
+          },
+          {
+            value: "scotland",
+            text: "Scotland"
+          },
+          {
+            value: "wales",
+            text: "Wales"
+          },
+          {
+            value: "northern-ireland",
+            text: "Northern Ireland"
+          }
+        ],
+        errorMessage: {
+          text: "Select the country where you live"
+        }
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-form-group govuk-form-group--error">
+          <fieldset class="govuk-fieldset" aria-describedby="where-do-you-live-error">
+            <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+              <h1 class="govuk-fieldset__heading">
+                Where do you live?
+              </h1>
+            </legend>
+            <p id="where-do-you-live-error" class="govuk-error-message">
+              <span class="govuk-visually-hidden">Error:</span> Select the country where you live
+            </p>
+            <div class="govuk-radios" data-module="govuk-radios">
+              <div class="govuk-radios__item">
+                <input class="govuk-radios__input" id="where-do-you-live-1" name="where-do-you-live" type="radio" value="england">
+                <label class="govuk-label govuk-radios__label" for="where-do-you-live-1">
+                  England
+                </label>
+              </div>
+              <div class="govuk-radios__item">
+                <input class="govuk-radios__input" id="where-do-you-live-2" name="where-do-you-live" type="radio" value="scotland">
+                <label class="govuk-label govuk-radios__label" for="where-do-you-live-2">
+                  Scotland
+                </label>
+              </div>
+              <div class="govuk-radios__item">
+                <input class="govuk-radios__input" id="where-do-you-live-3" name="where-do-you-live" type="radio" value="wales">
+                <label class="govuk-label govuk-radios__label" for="where-do-you-live-3">
+                  Wales
+                </label>
+              </div>
+              <div class="govuk-radios__item">
+                <input class="govuk-radios__input" id="where-do-you-live-4" name="where-do-you-live" type="radio" value="northern-ireland">
+                <label class="govuk-label govuk-radios__label" for="where-do-you-live-4">
+                  Northern Ireland
+                </label>
+              </div>
+            </div>
+          </fieldset>
+        </div>
+      HTML
+    end
+
+    it "returns the correct HTML when there is a conditional" do
+      email_htmltml = helper.govukInput({
+        id: "contact-by-email",
+        name: "contact-by-email",
+        type: "email",
+        autocomplete: "email",
+        spellcheck: false,
+        classes: "govuk-!-width-one-third",
+        label: {
+          text: "Email address"
+        }
+      })
+
+      phone_html = helper.govukInput({
+        id: "contact-by-phone",
+        name: "contact-by-phone",
+        type: "tel",
+        autocomplete: "tel",
+        classes: "govuk-!-width-one-third",
+        label: {
+          text: "Phone number"
+        }
+      })
+
+      text_html = helper.govukInput({
+        id: "contact-by-text",
+        name: "contact-by-text",
+        type: "tel",
+        autocomplete: "tel",
+        classes: "govuk-!-width-one-third",
+        label: {
+          text: "Mobile phone number"
+        }
+      })
+
+      helper.govukRadios({
+        idPrefix: "contact",
+        name: "contact",
+        fieldset: {
+          legend: {
+            text: "How would you prefer to be contacted?",
+            isPageHeading: true,
+            classes: "govuk-fieldset__legend--l"
+          }
+        },
+        hint: {
+          text: "Select one option."
+        },
+        items: [
+          {
+            value: "email",
+            text: "Email",
+            conditional: {
+              html: email_htmltml
+            }
+          },
+          {
+            value: "phone",
+            text: "Phone",
+            conditional: {
+              html: phone_html
+            }
+          },
+          {
+            value: "text",
+            text: "Text message",
+            conditional: {
+              html: text_html
+            }
+          }
+        ]
+      })
+    end
+
+    it "returns the correct HTML when there is a fieldset css class" do
+      html = helper.govukRadios({
+        classes: "govuk-radios--inline",
+        idPrefix: "changed-name",
+        name: "changed-name",
+        fieldset: {
+          classes: "app-grouping",
+          legend: {
+            text: "Have you changed your name?",
+            isPageHeading: true,
+            classes: "govuk-fieldset__legend--l"
+          }
+        },
+        hint: {
+          text: "This includes changing your last name or spelling your name differently."
+        },
+        items: [
+          {
+            value: "yes",
+            text: "Yes"
+          },
+          {
+            value: "no",
+            text: "No"
+          }
+        ]
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-form-group">
+          <fieldset class="govuk-fieldset app-grouping" aria-describedby="changed-name-hint">
+            <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+              <h1 class="govuk-fieldset__heading">
+                Have you changed your name?
+              </h1>
+            </legend>
+            <div id="changed-name-hint" class="govuk-hint">
+              This includes changing your last name or spelling your name differently.
+            </div>
+            <div class="govuk-radios govuk-radios--inline" data-module="govuk-radios">
+              <div class="govuk-radios__item">
+                <input class="govuk-radios__input" id="changed-name-1" name="changed-name" type="radio" value="yes">
+                <label class="govuk-label govuk-radios__label" for="changed-name-1">
+                  Yes
+                </label>
+              </div>
+              <div class="govuk-radios__item">
+                <input class="govuk-radios__input" id="changed-name-2" name="changed-name" type="radio" value="no">
+                <label class="govuk-label govuk-radios__label" for="changed-name-2">
+                  No
+                </label>
+              </div>
+            </div>
+          </fieldset>
+        </div>
+      HTML
+    end
+  end
+end

data/spec/helpers/govuk_design_system/select_helper_spec.rb

@@ -0,0 +1,85 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::SelectHelper, type: :helper do
+  describe "#govukSelect" do
+    it "returns the correct HTML for the default example" do
+      html = helper.govukSelect({
+        id: "sort",
+        name: "sort",
+        label: {
+          text: "Sort by"
+        },
+        items: [
+          {
+            value: "published",
+            text: "Recently published"
+          },
+          {
+            value: "updated",
+            text: "Recently updated",
+            selected: true
+          },
+          {
+            value: "views",
+            text: "Most views"
+          },
+          {
+            value: "comments",
+            text: "Most comments"
+          }
+        ]
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-form-group">
+          <label class="govuk-label" for="sort">
+            Sort by
+          </label>
+          <select class="govuk-select" id="sort" name="sort">
+            <option value="published">Recently published</option>
+            <option value="updated" selected="selected">Recently updated</option>
+            <option value="views">Most views</option>
+            <option value="comments">Most comments</option>
+          </select>
+        </div>
+      HTML
+    end
+
+    it "allows attributes to be passed" do
+      html = helper.govukSelect({
+        id: "sort",
+        name: "sort",
+        label: {
+          text: "Sort by"
+        },
+        items: [
+          {
+            value: "published",
+            text: "Recently published"
+          },
+          {
+            value: "updated",
+            text: "Recently updated",
+            selected: true
+          }
+        ],
+        attributes: {
+          disabled: true,
+          data: { test: "testing" }
+        }
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-form-group">
+          <label class="govuk-label" for="sort">
+            Sort by
+          </label>
+          <select class="govuk-select" id="sort" name="sort" disabled="disabled" data-test="testing">
+            <option value="published">Recently published</option>
+            <option value="updated" selected="selected">Recently updated</option>
+          </select>
+        </div>
+      HTML
+    end
+  end
+end

data/spec/helpers/govuk_design_system/summary_list_helper_spec.rb

@@ -0,0 +1,138 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::SummaryListHelper, type: :helper do
+  describe "#govukSummaryList" do
+    it "returns the correct HTML for the default example" do
+      html = helper.govukSummaryList({
+        rows: [
+          {
+            key: {
+              text: "Name"
+            },
+            value: {
+              text: "Sarah Philips"
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "name"
+                }
+              ]
+            }
+          },
+          {
+            key: {
+              text: "Date of birth"
+            },
+            value: {
+              text: "5 January 1978"
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "date of birth"
+                }
+              ]
+            }
+          },
+          {
+            key: {
+              text: "Address"
+            },
+            value: {
+              html: "72 Guild Street<br>London<br>SE23 6FH".html_safe
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "address"
+                }
+              ]
+            }
+          },
+          {
+            key: {
+              text: "Contact details"
+            },
+            value: {
+              html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'.html_safe
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "contact details"
+                }
+              ]
+            }
+          }
+        ]
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <dl class="govuk-summary-list">
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">
+              Name
+            </dt>
+            <dd class="govuk-summary-list__value">
+              Sarah Philips
+            </dd>
+            <dd class="govuk-summary-list__actions">
+              <a class="govuk-link" href="#">
+                Change<span class="govuk-visually-hidden"> name</span>
+              </a>
+            </dd>
+          </div>
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">
+              Date of birth
+            </dt>
+            <dd class="govuk-summary-list__value">
+              5 January 1978
+            </dd>
+            <dd class="govuk-summary-list__actions">
+              <a class="govuk-link" href="#">
+                Change<span class="govuk-visually-hidden"> date of birth</span>
+              </a>
+            </dd>
+          </div>
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">
+              Address
+            </dt>
+            <dd class="govuk-summary-list__value">
+              72 Guild Street<br>London<br>SE23 6FH
+            </dd>
+            <dd class="govuk-summary-list__actions">
+              <a class="govuk-link" href="#">
+                Change<span class="govuk-visually-hidden"> address</span>
+              </a>
+            </dd>
+          </div>
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">
+              Contact details
+            </dt>
+            <dd class="govuk-summary-list__value">
+              <p class="govuk-body">07700 900457</p>
+              <p class="govuk-body">sarah.phillips@example.com</p>
+            </dd>
+            <dd class="govuk-summary-list__actions">
+              <a class="govuk-link" href="#">
+                Change<span class="govuk-visually-hidden"> contact details</span>
+              </a>
+            </dd>
+          </div>
+        </dl>
+      HTML
+    end
+  end
+end

data/spec/helpers/govuk_design_system/tabs_helper_spec.rb

@@ -0,0 +1,129 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::TabsHelper, type: :helper do
+  describe "#govukTabs" do
+    it "returns the correct HTML for the default example" do
+      html = helper.govukTabs({
+        items: [
+          {
+            label: "Past day",
+            id: "past-day",
+            panel: {
+              html: "<strong>Past day</strong>".html_safe
+            }
+          },
+          {
+            label: "Past week",
+            id: "past-week",
+            panel: {
+              html: "<strong>Past week</strong>".html_safe
+            }
+          },
+          {
+            label: "Past month",
+            id: "past-month",
+            panel: {
+              html: "<strong>Past month</strong>".html_safe
+            }
+          },
+          {
+            label: "Past year",
+            id: "past-year",
+            panel: {
+              html: "<strong>Past year</strong>".html_safe
+            }
+          }
+        ]
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-tabs" data-module="govuk-tabs">
+          <h2 class="govuk-tabs__title">
+            Contents
+          </h2>
+          <ul class="govuk-tabs__list">
+            <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
+              <a class="govuk-tabs__tab" href="#past-day">
+                Past day
+              </a>
+            </li>
+            <li class="govuk-tabs__list-item">
+              <a class="govuk-tabs__tab" href="#past-week">
+                Past week
+              </a>
+            </li>
+            <li class="govuk-tabs__list-item">
+              <a class="govuk-tabs__tab" href="#past-month">
+                Past month
+              </a>
+            </li>
+            <li class="govuk-tabs__list-item">
+              <a class="govuk-tabs__tab" href="#past-year">
+                Past year
+              </a>
+            </li>
+          </ul>
+          <div class="govuk-tabs__panel" id="past-day">
+            <strong>Past day</strong>
+          </div>
+          <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-week">
+            <strong>Past week</strong>
+          </div>
+          <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-month">
+            <strong>Past month</strong>
+          </div>
+          <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-year">
+            <strong>Past year</strong>
+          </div>
+        </div>
+      HTML
+    end
+
+    it "returns the correct HTML for a text panel item" do
+      html = helper.govukTabs({
+        items: [
+          {
+            label: "Past day",
+            id: "past-day",
+            panel: {
+              text: "Past day"
+            }
+          },
+          {
+            label: "Past week",
+            id: "past-week",
+            panel: {
+              html: "<strong>Past week</strong>".html_safe
+            }
+          }
+        ]
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-tabs" data-module="govuk-tabs">
+          <h2 class="govuk-tabs__title">
+            Contents
+          </h2>
+          <ul class="govuk-tabs__list">
+            <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
+              <a class="govuk-tabs__tab" href="#past-day">
+                Past day
+              </a>
+            </li>
+            <li class="govuk-tabs__list-item">
+              <a class="govuk-tabs__tab" href="#past-week">
+                Past week
+              </a>
+            </li>
+          </ul>
+          <div class="govuk-tabs__panel" id="past-day">
+            <p class="govuk-body">Past day</p>
+          </div>
+          <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-week">
+            <strong>Past week</strong>
+          </div>
+        </div>
+      HTML
+    end
+  end
+end

data/spec/helpers/govuk_design_system/tag_helper_spec.rb

@@ -0,0 +1,17 @@
+require "rails_helper"
+
+RSpec.describe GovukDesignSystem::TagHelper, type: :helper do
+  describe "#govukTag" do
+    it "returns the correct HTML for the default example" do
+      html = helper.govukTag({
+        text: "completed"
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <strong class="govuk-tag">
+          completed
+        </strong>
+      HTML
+    end
+  end
+end