Non-UK inset text component (#4058)

* Create .merge-test (#3995)

* add purple style to inset text

* Update inset text to support header+title

* update docs

* removed margin between title and text

* removing margin - linting fix

---------

Co-authored-by: Martyn Whitwell <martyn.whitwell@gmail.com>

app/components/content/inset_text_component.html.erb

@@ -1,4 +1,9 @@
 <%= tag.section(class: classes) do %>
-  <%= tag.h2(title) if title.present? %>
+  <% if header.present? || title.present? %>
+    <%= tag.h2 role: "text" do %>
+      <%= tag.span(header, class: "header") if header.present? %>
+      <%= tag.span(title, class: "title") if title.present? %>
+    <% end %>
+  <% end %>
   <%= tag.p(helpers.safe_html_format(text)) %>
 <% end %>

app/components/content/inset_text_component.rb

@@ -1,12 +1,13 @@
 module Content
   class InsetTextComponent < ViewComponent::Base
-    attr_reader :title, :text, :color
+    attr_reader :header, :title, :text, :color
 
-    def initialize(text:, title: nil, color: "yellow")
+    def initialize(text:, title: nil, header: nil, color: "yellow")
       super
 
       @text = text
       @title = title
+      @header = header.present? && title.present? ? "#{header}:" : header
       @color = color
     end
 

app/views/content/steps-to-become-a-teacher.md

@@ -104,8 +104,10 @@
     - get an adviser
   inset_text:
     international-content:
+      header: Non-UK citizens
+      title: additional steps
       text: There are more steps to consider if you're <a href="/non-uk-teachers">a non-UK citizen</a>.
-      color: grey
+      color: purple
 ---
 
 <strong>Discover if a career teaching in a primary or secondary school in England is right for you.</strong>

app/webpacker/styles/components/inset-text.scss

@@ -21,6 +21,14 @@ section.inset-text {
 
   h2 {
     margin-top: 0;
+
+    span.header {
+      font-weight: bold;
+    }
+
+    span.title {
+      font-weight: normal;
+    }
   }
 
   p:first-child {
@@ -34,5 +42,11 @@ section.inset-text {
   h2,
   p {
     @include font-size("small");
+    margin: 0;
+  }
+
+  &.purple {
+    background: rgba($purple, .1);
+    border-left-color: $purple;
   }
 }

docs/content.md

@@ -244,8 +244,10 @@ If you need to call-out something important in an article and differentiate it f
 ---
 inset_text:
   important-content:
+    header: Optional title header
     title: Optional title
     text: Text that can contain <a href="#">links</a>
+    color: yellow|grey|purple
 ---
 
 # My page

spec/components/content/inset_text_component_spec.rb

@@ -1,10 +1,11 @@
 require "rails_helper"
 
 describe Content::InsetTextComponent, type: :component do
+  let(:header) { "Header" }
   let(:title) { "Title" }
   let(:text) { "Text" }
   let(:color) { "yellow" }
-  let(:component) { described_class.new(text: text, title: title, color: color) }
+  let(:component) { described_class.new(text: text, header: header, title: title, color: color) }
 
   subject do
     render_inline(component)
@@ -13,14 +14,30 @@
 
   it { is_expected.to have_css("section.inset-text.yellow") }
   it { is_expected.to have_css(".inset-text p", text: text) }
-  it { is_expected.to have_css(".inset-text h2", text: title) }
+  it { is_expected.to have_css(".inset-text h2 span.header", text: "#{header}:") }
+  it { is_expected.to have_css(".inset-text h2 span.title", text: title) }
 
-  context "when there is no title" do
+  context "when there is no title nor header" do
     let(:title) { nil }
+    let(:header) { nil }
 
     it { is_expected.not_to have_css(".inset-text h2") }
   end
 
+  context "when there is only a title but no header" do
+    let(:header) { nil }
+
+    it { is_expected.not_to have_css(".inset-text h2 span.header") }
+    it { is_expected.to have_css(".inset-text h2 span.title", text: title) }
+  end
+
+  context "when there is only a header but no title" do
+    let(:title) { nil }
+
+    it { is_expected.to have_css(".inset-text h2 span.header", text: header) }
+    it { is_expected.not_to have_css(".inset-text h2 span.title") }
+  end
+
   context "when the text contains HTML" do
     let(:text) { %(text with a <a href="#">link</a>) }
 
@@ -36,6 +53,12 @@
   context "when the color is grey" do
     let(:color) { "grey" }
 
-    it { is_expected.not_to have_css("section.insett-text.grey") }
+    it { is_expected.to have_css("section.inset-text.grey") }
+  end
+
+  context "when the color is purple" do
+    let(:color) { "purple" }
+
+    it { is_expected.to have_css("section.inset-text.purple") }
   end
 end