Merge pull request #16 from alphagov/initial-UI-implementation

Implement UI page for fact check comparison

Author: Tetrino

app/assets/stylesheets/application.scss

@@ -43,4 +43,5 @@ $govuk-page-width: 1140px;
 @import 'govuk_publishing_components/components/tag';
 @import 'govuk_publishing_components/components/textarea';
 @import 'govuk_publishing_components/components/warning-text';
-
+@import "nokodiff";
+@import "options_sidebar";

app/assets/stylesheets/options_sidebar.scss

@@ -0,0 +1,14 @@
+.options-sidebar {
+  .govuk-button {
+    width: 100%;
+  }
+
+  @include govuk-media-query($from: "tablet") {
+    position: sticky;
+    top: govuk-spacing(3);
+
+    .sidebar-components {
+      border-top: 2px solid $govuk-brand-colour;
+    }
+  }
+}

app/controllers/fact_check_comparison_controller.rb

@@ -0,0 +1,22 @@
+class FactCheckComparisonController < ApplicationController
+  require "nokodiff"
+  require "date"
+
+  def compare
+    before = previous_content
+    after = current_content
+    @article_title = "Title"
+    @date = Date.current.to_s
+    @differ = Nokodiff.diff(before, after)
+    @draft_url = "/"
+    render "fact_check_comparison"
+  end
+
+  def previous_content
+    "<div>This is a line with no changes</div> <div>This line will change</div>"
+  end
+
+  def current_content
+    "<div>This is a line with no changes</div> <div>This line has some changes</div>"
+  end
+end

app/views/application/fact_check_comparison.html.erb

@@ -0,0 +1,44 @@
+<% content_for :title_context, @article_title %>
+<% content_for :title, t("fact_check_comparison.fact_check_heading") %>
+
+<div class="govuk-grid-row">
+<div class="govuk-grid-column-two-thirds">
+  <%= render "govuk_publishing_components/components/inset_text", {} do %>
+    <p class="govuk-body"><%= t "fact_check_comparison.respond_by" %> <span class="govuk-body govuk-!-font-weight-bold"><%= @date %></span></p>
+  <% end %>
+  <%= render "govuk_publishing_components/components/button", {
+    text: t("fact_check_comparison.respond_to_button"),
+    href: "/",
+  } %>
+</div>
+</div>
+<div class="govuk-grid-row">
+<div class="govuk-grid-column-two-thirds">
+    <div class="govuk-body compare-editions">
+        <%= @differ %>
+    </div>
+</div>
+<div class="govuk-grid-column-one-third options-sidebar">
+        <div class="sidebar-components">
+        <%= render "govuk_publishing_components/components/heading", {
+            text: t("fact_check_comparison.preview_heading"),
+            heading_level: 3,
+            font_size: "s",
+            padding: true,
+        } %>
+        <p class="govuk-body"><a href=<%= @draft_url %>class="govuk-link--no-visited-state" rel="noreferrer noopener" target="_blank"><%= t "fact_check_comparison.preview_link" %></a></p>
+        </div>
+        <hr class="govuk-section-break govuk-section-break govuk-section-break--visible govuk-!-margin-top-6 govuk-!-margin-bottom-3">
+        <%= render "govuk_publishing_components/components/heading", {
+            text: t("fact_check_comparison.guidance_heading"),
+            heading_level: 3,
+            font_size: "s",
+            padding: true,
+        } %>
+        <ul class="govuk-list govuk-list--bullet">
+            <li><%= t("fact_check_comparison.guidance_deleted") %></li>
+            <li><%= t("fact_check_comparison.guidance_added") %></li>
+        </ul>
+      <p class="govuk-body"><a href="https://www.gov.uk/government/publications/how-content-requests-from-government-get-published/fact-checking-content-on-govuk" class="govuk-link--no-visited-state" rel="noreferrer noopener" target="_blank"><%= t("fact_check_comparison.guidance_link") %></a></p>
+      </div>
+</div>

app/views/application/hello_world.html.erb

@@ -2,4 +2,10 @@
   <h2>
     Hello World!
   </h2>
-</div>
+
+  <h3>
+    List of implemented pages
+  </h3>
+
+  <a href="/compare"> Fact check comparison </a>
+</div>

config/locales/en.yml

@@ -1,2 +1,12 @@
 en:
-  hello: "Hello world"
+  hello: "Hello world"
+  fact_check_comparison:
+    fact_check_heading: "Fact check the changes"
+    respond_by: "Respond by"
+    respond_to_button: "Respond to fact check"
+    preview_heading: "Preview"
+    preview_link: "Preview the draft page (opens in new tab)"
+    guidance_heading: "Guidance"
+    guidance_deleted: "red highlights and a minus sign (–) show content that’s been deleted"
+    guidance_added: "green highlights and a plus sign (+) show content that’s been added"
+    guidance_link: "Fact checking guidance (opens in new tab)"

config/routes.rb

@@ -4,6 +4,8 @@
 
   root to: "application#hello_world"
 
+  get "compare", to: "fact_check_comparison#compare"
+
   namespace :api do
     resources :requests, only: [:create]
   end

spec/controllers/fact_check_comparison_controller_spec.rb

@@ -0,0 +1,46 @@
+require "rails_helper"
+
+RSpec.describe "FactCheckComparison", type: :request do
+  before do
+    create(:user)
+
+    allow_any_instance_of(FactCheckComparisonController).to receive(:previous_content)
+      .and_return("<div>This is the unchanged line.</div><div>This line will be changed</div>")
+
+    allow_any_instance_of(FactCheckComparisonController).to receive(:current_content)
+      .and_return("<div>This is the unchanged line.</div><div>This line has changes</div>")
+  end
+
+  describe "GET /compare" do
+    it "renders the expected unchanging assets" do
+      get compare_path
+
+      expect(response).to have_http_status(:ok)
+      expect(response.body).to include(I18n.t("fact_check_comparison.fact_check_heading"))
+      expect(response.body).to include(I18n.t("fact_check_comparison.respond_by"))
+      expect(response.body).to include(I18n.t("fact_check_comparison.respond_to_button"))
+      expect(response.body).to include(I18n.t("fact_check_comparison.preview_heading"))
+      expect(response.body).to include(I18n.t("fact_check_comparison.preview_link"))
+      expect(response.body).to include(I18n.t("fact_check_comparison.guidance_heading"))
+      expect(response.body).to include(I18n.t("fact_check_comparison.guidance_deleted"))
+      expect(response.body).to include(I18n.t("fact_check_comparison.guidance_added"))
+      expect(response.body).to include(I18n.t("fact_check_comparison.guidance_link"))
+    end
+
+    it "renders the diff with formatting" do
+      get compare_path
+
+      parsed = Nokogiri::HTML(response.body)
+
+      expect(parsed.at_css("div.compare-editions")&.text).to include("This is the unchanged line.")
+
+      expect(parsed.at_css("del")&.text).to include("This line will be changed")
+      expect(parsed.at_css("del")&.text).not_to include("This is the unchanged line.")
+      expect(parsed.at_css("del")&.text).not_to include("This line has changes")
+
+      expect(parsed.at_css("ins")&.text).to include("This line has changes")
+      expect(parsed.at_css("ins")&.text).not_to include("This is the unchanged line.")
+      expect(parsed.at_css("ins")&.text).not_to include("This line will be changed")
+    end
+  end
+end