From 5a6366f369d3b6829a80da878b35803926697768 Mon Sep 17 00:00:00 2001
From: Katherine Martin <78093815+martikat@users.noreply.github.com>
Date: Thu, 25 Apr 2024 11:12:52 +0100
Subject: [PATCH] Update based on PR comments

---
 app/assets/stylesheets/application.scss       |   6 +-
 .../{links.scss => breadcrumbs.scss}          |   0
 .../{metadata.scss => citation.scss}          | 176 ------------------
 .../stylesheets/downloadable-media.scss       | 175 +++++++++++++++++
 app/assets/stylesheets/page-contents.scss     | 159 ----------------
 app/assets/stylesheets/subnav.scss            | 136 --------------
 app/components/header_component.html.slim     |  12 +-
 7 files changed, 185 insertions(+), 479 deletions(-)
 rename app/assets/stylesheets/{links.scss => breadcrumbs.scss} (100%)
 rename app/assets/stylesheets/{metadata.scss => citation.scss} (52%)
 create mode 100644 app/assets/stylesheets/downloadable-media.scss
 delete mode 100644 app/assets/stylesheets/subnav.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 35b350c0..1e5f5408 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -28,7 +28,8 @@ $light-blue: tint($department-for-education-websafe, 90%);
 
 @import 'video';
 @import 'page-contents';
-@import 'metadata';
+@import 'citation';
+@import 'downloadable-media';
 
 @import 'print';
 @import 'card';
@@ -36,8 +37,7 @@ $light-blue: tint($department-for-education-websafe, 90%);
 @import 'other-resources';
 @import 'cta';
 
-@import 'subnav';
-@import 'links';
+@import 'breadcrumbs';
 
 * {
   font-family:
diff --git a/app/assets/stylesheets/links.scss b/app/assets/stylesheets/breadcrumbs.scss
similarity index 100%
rename from app/assets/stylesheets/links.scss
rename to app/assets/stylesheets/breadcrumbs.scss
diff --git a/app/assets/stylesheets/metadata.scss b/app/assets/stylesheets/citation.scss
similarity index 52%
rename from app/assets/stylesheets/metadata.scss
rename to app/assets/stylesheets/citation.scss
index a0360737..8c6f6d47 100644
--- a/app/assets/stylesheets/metadata.scss
+++ b/app/assets/stylesheets/citation.scss
@@ -202,179 +202,3 @@ dl.gem-c-metadata__list {
   margin-top: 60px;
   border-left: 5px solid #347ca9;
 }
-
-.gem-c-attachment-link__abbr {
-  text-decoration: none;
-  cursor: help
-}
-
-.gem-c-attachment {
-  font-family: "GDS Transport", arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-weight: 400;
-  font-size: 16px;
-  font-size: 1rem;
-  line-height: 1.25;
-  position: relative
-}
-
-@media print {
-  .gem-c-attachment {
-    font-family: sans-serif
-  }
-}
-
-@media (min-width: 40.0625em) {
-  .gem-c-attachment {
-    font-size: 19px;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737
-  }
-
-  .gem-c-attachment__thumbnail {
-    position: relative;
-    width: 140px;
-    height: auto;
-    max-width: 140px;
-    margin-right: 20px;
-    margin-bottom: 15px;
-    padding: 5px;
-    float: left
-  }
-}
-
-@media print {
-  .gem-c-attachment {
-    font-size: 14pt;
-    line-height: 1.15
-  }
-}
-
-.gem-c-attachment:after {
-  content: "";
-  display: block;
-  clear: both
-}
-
-.gem-c-attachment .govuk-details {
-  margin: 15px 0
-}
-
-.gem-c-attachment__thumbnail {
-  position: relative;
-  width: auto;
-  margin-right: 25px;
-  margin-bottom: 15px;
-  padding: 5px;
-  float: left
-}
-
-.gem-c-attachment__thumbnail-image {
-  display: block;
-  max-width: 280px;
-  width: 140px;
-  height: auto;
-  border: rgba(11, 12, 12, 0.1);
-  outline: 5px solid rgba(11, 12, 12, 0.1);
-  background: #fff;
-  box-shadow: 0 2px 2px rgba(11, 12, 12, 0.4);
-  fill: #b1b4b6;
-  stroke: #b1b4b6
-}
-
-.gem-c-attachment__details {
-  padding-left: 134px
-}
-
-.gem-c-attachment__details .gem-c-detailss {
-  word-break: break-word;
-  word-wrap: break-word
-}
-
-.gem-c-attachment__title {
-  font-family: "GDS Transport", arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-weight: 400;
-  font-size: 18px;
-  font-size: 1.125rem;
-  line-height: 1.1111111111;
-  margin: 0 0 15px
-}
-
-@media print {
-  .gem-c-attachment__title {
-    font-family: sans-serif
-  }
-}
-
-@media (min-width: 40.0625em) {
-  .gem-c-attachment__title {
-    font-size: 27px;
-    font-size: 1.6875rem;
-    line-height: 1.1111111111
-  }
-}
-
-@media print {
-  .gem-c-attachment__title {
-    font-size: 18pt;
-    line-height: 1.15
-  }
-}
-
-.gem-c-attachment__link {
-  line-height: 1.29
-}
-
-.gem-c-attachment__metadata {
-  font-family: "GDS Transport", arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-weight: 400;
-  font-size: 16px;
-  font-size: 1rem;
-  line-height: 1.25;
-  margin: 0 0 15px;
-  color: #505a5f
-}
-
-@media print {
-  .gem-c-attachment__metadata {
-    font-family: sans-serif
-  }
-}
-
-@media (min-width: 40.0625em) {
-  .gem-c-attachment__metadata {
-    font-size: 19px;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737
-  }
-}
-
-@media print {
-  .gem-c-attachment__metadata {
-    font-size: 14pt;
-    line-height: 1.15
-  }
-}
-
-.gem-c-attachment__metadata:last-of-type {
-  margin-bottom: 0
-}
-
-.gem-c-attachment__metadata .gem-c-attachment__attribute {
-  word-wrap: break-word;
-  overflow-wrap: break-word
-}
-
-.gem-c-attachment__metadata--compact {
-  margin-bottom: 0
-}
-
-.gem-c-attachment__abbr {
-  text-decoration: none;
-  cursor: help
-}
diff --git a/app/assets/stylesheets/downloadable-media.scss b/app/assets/stylesheets/downloadable-media.scss
new file mode 100644
index 00000000..e7c1adfa
--- /dev/null
+++ b/app/assets/stylesheets/downloadable-media.scss
@@ -0,0 +1,175 @@
+.gem-c-attachment-link__abbr {
+  text-decoration: none;
+  cursor: help
+}
+
+.gem-c-attachment {
+  font-family: "GDS Transport", arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.25;
+  position: relative
+}
+
+@media print {
+  .gem-c-attachment {
+    font-family: sans-serif
+  }
+}
+
+@media (min-width: 40.0625em) {
+  .gem-c-attachment {
+    font-size: 19px;
+    font-size: 1.1875rem;
+    line-height: 1.3157894737
+  }
+
+  .gem-c-attachment__thumbnail {
+    position: relative;
+    width: 140px;
+    height: auto;
+    max-width: 140px;
+    margin-right: 20px;
+    margin-bottom: 15px;
+    padding: 5px;
+    float: left
+  }
+}
+
+@media print {
+  .gem-c-attachment {
+    font-size: 14pt;
+    line-height: 1.15
+  }
+}
+
+.gem-c-attachment:after {
+  content: "";
+  display: block;
+  clear: both
+}
+
+.gem-c-attachment .govuk-details {
+  margin: 15px 0
+}
+
+.gem-c-attachment__thumbnail {
+  position: relative;
+  width: auto;
+  margin-right: 25px;
+  margin-bottom: 15px;
+  padding: 5px;
+  float: left
+}
+
+.gem-c-attachment__thumbnail-image {
+  display: block;
+  max-width: 280px;
+  width: 140px;
+  height: auto;
+  border: rgba(11, 12, 12, 0.1);
+  outline: 5px solid rgba(11, 12, 12, 0.1);
+  background: #fff;
+  box-shadow: 0 2px 2px rgba(11, 12, 12, 0.4);
+  fill: #b1b4b6;
+  stroke: #b1b4b6
+}
+
+.gem-c-attachment__details {
+  padding-left: 134px
+}
+
+.gem-c-attachment__details .gem-c-detailss {
+  word-break: break-word;
+  word-wrap: break-word
+}
+
+.gem-c-attachment__title {
+  font-family: "GDS Transport", arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  font-size: 18px;
+  font-size: 1.125rem;
+  line-height: 1.1111111111;
+  margin: 0 0 15px
+}
+
+@media print {
+  .gem-c-attachment__title {
+    font-family: sans-serif
+  }
+}
+
+@media (min-width: 40.0625em) {
+  .gem-c-attachment__title {
+    font-size: 27px;
+    font-size: 1.6875rem;
+    line-height: 1.1111111111
+  }
+}
+
+@media print {
+  .gem-c-attachment__title {
+    font-size: 18pt;
+    line-height: 1.15
+  }
+}
+
+.gem-c-attachment__link {
+  line-height: 1.29
+}
+
+.gem-c-attachment__metadata {
+  font-family: "GDS Transport", arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.25;
+  margin: 0 0 15px;
+  color: #505a5f
+}
+
+@media print {
+  .gem-c-attachment__metadata {
+    font-family: sans-serif
+  }
+}
+
+@media (min-width: 40.0625em) {
+  .gem-c-attachment__metadata {
+    font-size: 19px;
+    font-size: 1.1875rem;
+    line-height: 1.3157894737
+  }
+}
+
+@media print {
+  .gem-c-attachment__metadata {
+    font-size: 14pt;
+    line-height: 1.15
+  }
+}
+
+.gem-c-attachment__metadata:last-of-type {
+  margin-bottom: 0
+}
+
+.gem-c-attachment__metadata .gem-c-attachment__attribute {
+  word-wrap: break-word;
+  overflow-wrap: break-word
+}
+
+.gem-c-attachment__metadata--compact {
+  margin-bottom: 0
+}
+
+.gem-c-attachment__abbr {
+  text-decoration: none;
+  cursor: help
+}
diff --git a/app/assets/stylesheets/page-contents.scss b/app/assets/stylesheets/page-contents.scss
index eb35f8f3..e29697ca 100644
--- a/app/assets/stylesheets/page-contents.scss
+++ b/app/assets/stylesheets/page-contents.scss
@@ -11,165 +11,6 @@
   }
 }
 
-/*
-The following was govspeak and custom kramdown for the list of page content anchors
-
-.contents-list__list-item--numbered .contents-list__link {
-  display: table
-}
-
-.contents-list__number,
-.contents-list__numbered-text {
-  display: table-cell
-}
-
-.contents-list__number {
-  min-width: 1.5em
-}
-
-.contents-list__numbered-text {
-  padding-left: .3em
-}
-
-.direction-rtl .contents-list__numbered-text {
-  padding-left: 0;
-  padding-right: .3em
-}
-
-.contents-list {
-  position: relative;
-  margin: 0;
-  z-index: 1;
-  background: #fff;
-  box-shadow: 0 20px 15px -10px #fff
-}
-
-.contents-list__title {
-  color: #0b0c0c;
-  font-family: GDS Transport, arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-weight: 400;
-  font-size: 14px;
-  font-size: .875rem;
-  line-height: 1.5;
-  margin: 0
-}
-
-@media print {
-  .contents-list__title {
-    color: #000;
-    font-family: sans-serif
-  }
-}
-
-@media(min-width: 40.0625em) {
-  .contents-list__title {
-    font-size: 16px;
-    font-size: 1rem;
-    line-height: 1.5
-  }
-}
-
-@media print {
-  .contents-list__title {
-    font-size: 14pt;
-    line-height: 1.5
-  }
-}
-
-.contents-list__list,
-.contents-list__nested-list {
-  color: #0b0c0c;
-  font-family: GDS Transport, arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-weight: 400;
-  font-size: 14px;
-  font-size: .875rem;
-  line-height: 1.1428571429;
-  margin: 0;
-  padding: 0;
-  list-style-type: none
-}
-
-.contents-list__list ol,
-.contents-list__list ul,
-.contents-list__nested-list ol,
-.contents-list__nested-list ul {
-  margin: 0
-}
-
-@media print {
-
-  .contents-list__list,
-  .contents-list__nested-list {
-    color: #000;
-    font-family: sans-serif
-  }
-}
-
-@media(min-width: 40.0625em) {
-
-  .contents-list__list,
-  .contents-list__nested-list {
-    font-size: 16px;
-    font-size: 1rem;
-    line-height: 1.25
-  }
-}
-
-@media print {
-
-  .contents-list__list,
-  .contents-list__nested-list {
-    font-size: 14pt;
-    line-height: 1.2
-  }
-}
-
-.contents-list__list-item--parent>.contents-list__link {
-  font-weight: 700
-}
-
-.contents-list__list-item {
-  padding-top: 10px;
-  line-height: 1.3;
-  list-style-type: none
-}
-
-@media(min-width: 40.0625em) {
-  .contents-list__list-item {
-    padding-top: 7.5px
-  }
-}
-
-.contents-list__list-item--dashed {
-  position: relative;
-  padding-left: 25px;
-  padding-right: 25px
-}
-
-.contents-list__list-item--dashed:before {
-  content: "—";
-  position: absolute;
-  left: 0;
-  width: 20px;
-  overflow: hidden
-}
-
-.direction-rtl .contents-list__list-item--dashed:before {
-  left: auto;
-  right: 0
-}
-
-.lte-ie8 .contents-list__list-item--dashed .contents-list__link {
-  display: inline-block;
-  vertical-align: top
-}
-
-*/
-
 .contents-on-page ul {
   margin: 0;
   padding: 0;
diff --git a/app/assets/stylesheets/subnav.scss b/app/assets/stylesheets/subnav.scss
deleted file mode 100644
index 0f23295a..00000000
--- a/app/assets/stylesheets/subnav.scss
+++ /dev/null
@@ -1,136 +0,0 @@
-.app-body-wrapper {
-  display: flex;
-}
-
-.app-pane__subnav {
-  width: 260px;
-  margin-left: -30px;
-}
-
-.app-pane__content {
-  display: flex;
-  min-width: 0;
-  flex: 1 1 100%;
-  flex-direction: column;
-}
-
-.app-subnav {
-  // Since the back to top link is outside the flow of the document we need to create a space for it.
-  // This number is magic and was determined by manually judging the visual spacing.
-  margin-bottom: 100px;
-  padding: 0 govuk-spacing(3) 0 0;
-  @include govuk-font(16);
-
-  // @include govuk-media-query($from: mobile) {
-  //   color: red;
-  // }
-  @include govuk-media-query($until: tablet) {
-    display: none;
-  }
-
-}
-
-.app-subnav--mobile {
-  display: block;
-
-  @include govuk-media-query($from: tablet) {
-    display:none;
-  }
-}
-
-.js-enabled .app-subnav--mobile {
-  display: none;
-}
-
-.js-enabled .app-mobile-nav--active.app-subnav--mobile {
-  display: block;
-
-  @include govuk-media-query($from: tablet) {
-    display:none;
-  }
-}
-
-.app-subnav--mobile .app-subnav__section {
-  display: none;
-}
-
-.app-subnav--mobile .app-subnav__link.is-active + .app-subnav__section {
-  display: block;
-}
-
-.js-app-mobile-nav-toggler.is-active::after {
-display: inline-block;
-width: 0;
-height: 0;
-border-style: solid;
-border-color: transparent;
--webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-border-width: 0 5px 8.66px 5px;
-border-bottom-color: inherit;
-border-bottom-color: currentColor;
-}
-
-.app-subnav__section {
-  margin: govuk-spacing(2) 0 govuk-spacing(4);
-  padding: 0;
-  list-style-type: none;
-}
-
-.app-subnav__link {
-  padding: 2px 0;
-  text-decoration: none;
-  display: block;
-
-  &:not(:focus):hover {
-    color: $govuk-link-colour;
-    text-decoration: underline;
-  }
-
-}
-
-.app-subnav__section-item {
-  margin-bottom: govuk-spacing(1);
-  padding-top: govuk-spacing(1);
-  padding-bottom: govuk-spacing(1);
-}
-
-.app-subnav__section-item--current {
-  $_current-indicator-width: 4px;
-  margin-left: -(govuk-spacing(2) + $_current-indicator-width);
-  padding-left: govuk-spacing(2);
-  border-left: $_current-indicator-width solid govuk-colour("blue");
-  background-color: govuk-colour("white");
-}
-
-.app-subnav__section-item--current .app-subnav__link {
-  font-weight: bold;
-}
-
-.app-subnav__section--nested {
-  margin-top: govuk-spacing(2);
-  margin-bottom: 0;
-  padding-left: govuk-spacing(4);
-}
-
-.app-subnav__section--nested .app-subnav__section-item::before {
-  content: "—";
-  margin-left: -(govuk-spacing(4));
-  color: govuk-colour("dark-grey");
-}
-
-.app-subnav__section--nested .app-subnav__link {
-  padding-left: 0;
-  font-weight: normal;
-}
-
-.app-subnav__theme {
-  margin: 0;
-  font-size: govuk-px-to-rem(19px);
-  font-weight: bold;
-  display: inline;
-
-  &:first-of-type {
-    padding-top: 0;
-  }
-}
diff --git a/app/components/header_component.html.slim b/app/components/header_component.html.slim
index 794deaac..6c4f0b7e 100644
--- a/app/components/header_component.html.slim
+++ b/app/components/header_component.html.slim
@@ -6,11 +6,7 @@
         = image_tag 'dfe-logo-alt.png', class: 'dfe-logo-hover', alt: 'DfE homepage'
     #service-name
       = link_to service_name, service_url, class: 'dfe-header__link dfe-header__link--service'
-    #content-header.dfe-header__content.dfe-header-f-dtonly.dfe-header-f-toplinks
-      .dfe-header__menu
-        button#toggle-menu.dfe-header__menu-toggle aria-controls='header-navigation' aria-expanded='false' data-action='click->reveal#toggle'
-          | Menu
-    / This logic has been commented out as it is not required currently
+    / Original header template
     / - if action_links.any?
     /   #content-header.dfe-header__content.dfe-header-f-dtonly.dfe-header-f-toplinks
     /     .dfe-header-f-top-links
@@ -20,6 +16,12 @@
     /     .dfe-header__menu
     /       button#toggle-menu.dfe-header__menu-toggle aria-controls='header-navigation' aria-expanded='false' data-action='click->reveal#toggle'
     /         | Menu
+
+    / Custom service template
+    #content-header.dfe-header__content.dfe-header-f-dtonly.dfe-header-f-toplinks
+      .dfe-header__menu
+        button#toggle-menu.dfe-header__menu-toggle aria-controls='header-navigation' aria-expanded='false' data-action='click->reveal#toggle'
+          | Menu
   - if navigation_items.any?
     = tag.nav(**navigation_html_attributes) do
       .dfe-width-container