Merge pull request #6854 from alphagov/update-print-styles

Update/add component print styles
alphagov · Aug 5, 2024 · e56d5e8 · e56d5e8
2 parents 14520d1 + 49c6ad5
commit e56d5e8
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 16 deletions.
diff --git a/app/assets/stylesheets/components/_result-card.scss b/app/assets/stylesheets/components/_result-card.scss
@@ -44,3 +44,19 @@
 .app-c-result-card__link {
   @include govuk-font($size: 19, $weight: bold);
 }
+
+@include govuk-media-query($media-type: print) {
+  .app-c-result-card {
+    break-inside: avoid;
+    border: 1pt solid $govuk-print-text-colour;
+
+    &::before {
+      display: none;
+    }
+
+    .app-c-result-card__link,
+    .app-c-result-card__link:link {
+      color: $govuk-print-text-colour;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/components/_result-item.scss b/app/assets/stylesheets/components/_result-item.scss
@@ -11,3 +11,26 @@
   border-left: 5px solid govuk-colour("blue");
   padding: govuk-spacing(3);
 }
+
+// stylelint-disable declaration-no-important
+@include govuk-media-query($media-type: print) {
+  .app-c-result-item  {
+    break-inside: avoid;
+    border-color: $govuk-print-text-colour;
+
+    .govuk-link::after {
+      display: block;
+      margin-top: 1mm;
+      font-size: 12pt;
+    }
+  }
+
+  .app-c-result-item--highlighted {
+    background-color: initial;
+
+    a,a:link {
+      color: $govuk-print-text-colour !important;
+    }
+  }
+}
+// stylelint-enable declaration-no-important
diff --git a/app/assets/stylesheets/components/_result-sections.scss b/app/assets/stylesheets/components/_result-sections.scss
@@ -9,3 +9,17 @@
   @include govuk-responsive-padding(4, "top");
   border-top: 1px solid $govuk-border-colour;
 }
+
+@include govuk-media-query($media-type: print) {
+  .app-c-result-sections {
+    margin-bottom: 1.5cm;
+  }
+
+  .app-c-result-sections__section  {
+    border-top: 0;
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid $govuk-border-colour;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/smart_answers.scss b/app/assets/stylesheets/smart_answers.scss
@@ -40,5 +40,13 @@
         padding: govuk-spacing(2);
       }
     }
+
+    // stylelint-disable selector-max-id
+    & > #content > .govuk-grid-row > :only-child {
+      float: none;
+      width: auto;
+    }
+    // stylelint-enable selector-max-id
+
   }
 }
diff --git a/app/views/components/_result_item.html.erb b/app/views/components/_result_item.html.erb
@@ -14,10 +14,9 @@
 %>
 <%= tag.div class: css_classes do %>
   <h4 class="govuk-heading-s govuk-!-margin-bottom-2">
-    <%= link_to (title + " (opens in new tab)" if title.present?), url,
-      class: "govuk-link",
-      target: "_blank",
-      rel: "noreferrer noopener" %>
+    <%= link_to url, class: "govuk-link", target: "_blank", rel: "noreferrer noopener" do %>
+      <%= title || url %> <span class="govuk-!-display-none-print">(opens in new tab)</span>
+    <% end %>
   </h4>
   <p class="govuk-body govuk-!-margin-bottom-1">
     <%= description %>

diff --git a/app/views/smart_answers/custom_result.html.erb b/app/views/smart_answers/custom_result.html.erb
@@ -36,18 +36,20 @@
 
     <%= outcome.body %>
 
-    <%= render "govuk_publishing_components/components/heading", {
-      text: "Change your answers",
-      font_size: "l",
-      border_top: 2,
-      padding: true
-    } %>
-
-    <%= tag.p class: "govuk-body govuk-!-margin-bottom-8" do %>
-      <%= link_to "Answer the questions again to change the results",
-        restart_flow_path(@presenter),
-        class: "govuk-link" %>
-    <% end %>
+    <div class="govuk-!-display-none-print">
+      <%= render "govuk_publishing_components/components/heading", {
+        text: "Change your answers",
+        font_size: "l",
+        border_top: 2,
+        padding: true
+      } %>
+
+      <%= tag.p class: "govuk-body govuk-!-margin-bottom-8" do %>
+        <%= link_to "Answer the questions again to change the results",
+          restart_flow_path(@presenter),
+          class: "govuk-link" %>
+      <% end %>
+    </div>
 
     <%= render 'govuk_publishing_components/components/print_link' %>