Routes wizard results box (#4472)

* recreated results box component and associated styling

* added spec test for results box component

* added results box to completed page of routes wizard

* adjusted media query to improve responsiveness on mobile/tablet

* Fixed spacing

* removed results box from completed page of routes wizard

* fixed indenting on results box css file

---------

Co-authored-by: Spencer Dixon <spencerlloyddixon@gmail.com>

app/components/content/results_box_component.html.erb

@@ -0,0 +1,33 @@
+<div class="results-box-component">
+  <% if title %>
+    <div class="results-box__title">
+      <%= title %>
+    </div>
+  <% end %>
+  <section class="results-box results-box--<%= border_color %>">
+    <h2 class="results-box__heading">
+      <%= heading %>
+    </h2>
+    <div class="results-box__course-info-container results-box__text">
+      <div class="results-box__info-row">
+        <div class="results-box__label">Course fee</div>
+        <div class="results-box__value"><%= fee %></div>
+      </div>
+      <hr>
+      <div class="results-box__info-row">
+        <div class="results-box__label">Course length </div>
+        <div class="results-box__value"><%= course_length %></div>
+      </div>
+      <hr>
+      <div class="results-box__info-row">
+        <div class="results-box__label">Funding </div>
+        <div class="results-box__value"><%= funding %></div>
+      </div>
+      <hr>
+    </div>
+    <div class="results-box__text results-box__full-width-text"><%= text %></div>
+    <div class="results-box__cta">
+      <%= render Content::LinkAsButtonComponent.new(link_text: @link_text, href: @link_target) %>
+    </div>
+  </section>
+</div>

app/components/content/results_box_component.rb

@@ -0,0 +1,21 @@
+module Content
+  class ResultsBoxComponent < ViewComponent::Base
+    attr_reader :title, :heading, :fee, :course_length, :funding, :text, :link_text, :link_target, :border_color
+
+    include ContentHelper
+
+    def initialize(heading:, fee:, course_length:, funding:, text:, link_text:, link_target:, title: nil, border_color: :grey)
+      super
+
+      @title = substitute_values(title)
+      @heading = substitute_values(heading)
+      @fee = substitute_values(fee)
+      @course_length = substitute_values(course_length)
+      @funding = substitute_values(funding)
+      @text = substitute_values(text)
+      @link_text = link_text
+      @link_target = link_target
+      @border_color = border_color
+    end
+  end
+end

app/webpacker/styles/components/results-box.scss

@@ -0,0 +1,100 @@
+.results-box {
+  background: $white;
+  color: $white;
+
+  &--yellow {
+    border: 2px solid $yellow;
+  }
+
+  &--grey {
+    border: 2px solid $grey
+  }
+
+  &__background {
+    display: none;
+    padding: 1em;
+  }
+
+  &__title {
+      background: $yellow;
+      color: $black; 
+      font-weight: bolder;
+      display: inline-block; 
+      padding: 0.25em 0.5em;
+    }
+
+  &__heading {
+    @include font-size("small");
+    color: $black;
+    background-color: $white;
+    line-height: 1.25em;
+    max-width: 80%;
+  }
+
+  &__text {
+    @include font-size("small");
+    color: $black;
+    background-color: $white;
+  }
+
+  &__course-info-container {
+    margin-top: 2.5rem;
+  }
+
+  &__info-row {
+    display: flex;
+    justify-content: flex-start; 
+    align-items: flex-start; 
+  }
+
+  &__label {
+  flex: 1; 
+  text-align: left;
+  font-weight: bold;
+  }
+
+  &__value {
+  flex: 2; 
+  text-align: left;
+  }
+
+  hr {
+    margin-top: 0.7em;
+    margin-bottom: 0.5em;
+  }
+
+  &__full-width-text {
+    padding: 1rem 0;
+    text-align: left;
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+
+  &__cta {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  &__heading,
+  &__text,
+  &__cta {
+    margin-inline: 2rem;
+  }
+
+  @include mq($until: tablet) {
+    .results-box__info-row {
+      flex-direction: column;
+      align-items: flex-start; 
+    }
+
+    .results-box__label,
+    .results-box__value {
+      flex: none; 
+      width: 100%; 
+    }
+
+    .results-box__label {
+      margin-bottom: 0.25rem; 
+    }
+  }
+}

app/webpacker/styles/git.scss

@@ -66,6 +66,7 @@
 @import "./components/mailing-list";
 @import "./components/purple-box";
 @import "./components/feedback";
+@import "./components/results-box";
 
 @import "./campaigns/numbered-headings";
 

spec/components/content/results_box_component_spec.rb

@@ -0,0 +1,52 @@
+require "rails_helper"
+
+describe Content::ResultsBoxComponent, type: :component do
+  subject(:render) do
+    render_inline(component)
+    page
+  end
+
+  let(:heading) { "Postgraduate Initial Teacher Training with fees" }
+  let(:fee) { "Yes" }
+  let(:course_length) { "9 months (full-time) or up to 2 years (part-time)" }
+  let(:funding) { "Scholarships or bursaries, as well as student loans, are available if you're eligible" }
+  let(:text) { "Find out which qualifications you need, what funding you can get and how to train to teach." }
+  let(:title) { nil }
+  let(:border_color) { :grey }
+  let(:link_text) { "Find out more about postgraduate initial teacher training" }
+  let(:link_target) { "/train-to-be-a-teacher" }
+
+  let(:component) do
+    described_class.new(
+      heading: heading,
+      fee: fee,
+      course_length: course_length,
+      funding: funding,
+      text: text,
+      title: title,
+      border_color: border_color,
+      link_text: link_text,
+      link_target: link_target,
+    )
+  end
+
+  it { is_expected.to have_css(".results-box .results-box__heading") }
+  it { is_expected.to have_css(".results-box__full-width-text", text: text) }
+  it { is_expected.to have_css(".results-box__value", text: fee) }
+  it { is_expected.to have_css(".results-box__value", text: course_length) }
+  it { is_expected.to have_css(".results-box__value", text: funding) }
+  it { is_expected.to have_css(".results-box--grey") }
+  it { is_expected.to have_no_css(".results-box__title", text: title) }
+
+  context "when a title is provided" do
+    let(:title) { "Most popular route" }
+
+    it { is_expected.to have_css(".results-box__title", text: title) }
+  end
+
+  context "when the border color is yellow" do
+    let(:border_color) { :yellow }
+
+    it { is_expected.to have_css(".results-box--yellow") }
+  end
+end