Add Header Menu to Strapi

.env.defaults

@@ -78,5 +78,6 @@ STRAPI_WRITE_API_KEY="api_key_with_write_access"
 STRAPI_IMAGE_URL="http://strapi.teachcomputing.rpfdev.com"
 STRAPI_GRAPHQL_URL="http://strapi.teachcomputing.rpfdev.com/graphql"
 STRAPI_CONNECTION_TYPE="graphql"
+STRAPI_TEST_SCHEMA_PATH="spec/support/cms/providers/strapi/schema.json"
 
 NODE_OPTIONS=--openssl-legacy-provider

app/components/cms/header_menu_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Cms::HeaderMenuComponent < ViewComponent::Base
+  def initialize(menu_items:)
+    @menu_items = menu_items
+  end
+end

app/components/cms/header_menu_component/header_menu_component.html.erb

@@ -0,0 +1,15 @@
+<ul class='cms-header-menu'>
+  <% @menu_items.each do |nav_item| %>
+    <li class="govuk-body  cms-header-menu__item dropdown__expander" aria-expanded="false" tabindex="0">
+      <div class="cms-header-menu__wrap">
+        <span class="cms-header-menu__item-text"><%= nav_item[:label] %></span>
+        <span class="cms-header-menu__item-icon"></span>
+      </div>
+      <ul class="govuk-list govuk-body-s dropdown__expander-content">
+      <% nav_item[:menu_items].each do | item |%>
+        <li class="dropdown__expander-content-item"><%= link_to item[:label], item[:url], class: 'ncce-link--on-dark' %></li>
+      <% end %>
+      </ul>
+    </li>
+  <% end %>
+</ul>

app/components/cms/header_menu_component/header_menu_component.scss

@@ -0,0 +1,170 @@
+.cms-header-menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    @include govuk-media-query($from: desktop) {
+      position: relative;
+    }
+  }
+
+  ul li ul li {
+    clear: both;
+    width: 100%;
+  }
+
+  @include govuk-media-query($from: desktop) {
+    display: flex;
+    flex-direction: row;
+    margin: 0;
+    padding-top: 25px 0 0 0;
+  }
+
+  .govuk-body {
+    margin-bottom: 0 !important;
+
+    @include govuk-media-query($from: desktop) {
+      margin-bottom: unset;
+    }
+  }
+
+  @media (any-hover: hover) {
+    .cms-header-menu__item:hover .dropdown__expander-content, .cms-header-menu__item.dropdown__expander {
+      display: block;
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  &__wrap {
+    display: flex;
+    padding: 5px 0;
+
+    @include govuk-media-query($from: tablet) {
+      padding: 7px 0;
+    }
+
+    @include govuk-media-query($from: desktop) {
+      padding: 0;
+    }
+  }
+
+  &__item {
+    border-bottom: 1px solid #ced0d2;
+    clear: both;
+    flex-grow: 1;
+    font-weight: 700;
+    margin-bottom: 0;
+    padding-top: 0.5rem;
+    position: static;
+    z-index: 2;
+
+    &:first-child {
+      background-image: none;
+      border-top: 1px solid #ced0d2;
+    }
+
+    &:hover {
+      background-image: none;
+    }
+
+    @include govuk-media-query($until: desktop) {
+      outline: none;
+    }
+
+    @include govuk-media-query($from: desktop) {
+      background-image: url('../images/icons/line.svg');
+      background-position: left center;
+      background-repeat: no-repeat;
+      background-size: 2px 20px;
+      border: none;
+      min-width: 7rem;
+      padding: 1rem 0 1rem 0.9rem;
+
+      &:first-child {
+        border-top: none;
+      }
+    }
+
+    .govuk-header__link {
+      @include govuk-media-query($from: desktop) {
+        font-size: 19px;
+        font-weight: bold !important;
+      }
+    }
+
+    &[aria-expanded='true'] .cms-header-menu__item-icon {
+      background-image: url('../images/icons/arrow-down-purple.svg');
+      @include govuk-media-query($from: desktop) {
+        background-position: center 9px;
+      }
+    }
+
+    &-text,
+    &-text:hover, &-text:focus {
+      color: $white;
+      display: inline-block;
+      font-size: 1.125rem;
+      width: 100%;
+      padding-bottom: 0.5rem;
+      padding-left: 2px;
+
+      @include govuk-media-query($from: desktop) {
+        font-size: 1.1875rem;
+        width: auto;
+        padding-bottom: 0;
+        padding-left: unset;
+      }
+    }
+
+
+    &-icon {
+      background-image: url('../images/icons/tick-white-no-border.svg');
+      background-position: 0 10px;
+      background-repeat: no-repeat;
+      background-size: 0.7rem;
+      display: block;
+      width: 24px;
+
+      @include govuk-media-query($from: desktop) {
+        background-position: center 10px;
+        padding-left: 10px;
+      }
+    }
+  }
+
+  @media (any-hover: hover) {
+    .cms-header-menu__item:hover {
+      background-color: $white;
+      color: $purple-dark;
+      border: none;
+      margin: 0;
+
+      @include govuk-media-query($from: desktop) {
+        filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.3));
+        background-image: none;
+      }
+    }
+
+    .cms-header-menu__item:hover .cms-header-menu__item-text {
+      color: $purple-dark;
+      padding-bottom: 0.5rem;
+      padding-left: 2px;
+
+      @include govuk-media-query($from: desktop) {
+        padding-bottom: 0;
+        padding-left: unset;
+      }
+    }
+  }
+
+  @media (any-hover: hover) {
+    .cms-header-menu__item:hover .cms-header-menu__item-icon {
+      background-image: url('../images/icons/arrow-down-purple.svg');
+      @include govuk-media-query($from: desktop) {
+        background-position: center 9px;
+      }
+    }
+  }
+}

app/controllers/application_controller.rb

@@ -4,6 +4,7 @@ class ApplicationController < ActionController::Base
   include Pagy::Backend
 
   before_action :authenticate
+  before_action :access_cms_header
 
   def authenticate
     return unless ENV["BASIC_AUTH_PASSWORD"]
@@ -13,6 +14,12 @@ def authenticate
     end
   end
 
+  def access_cms_header
+    @cms_header = Cms::Singles::Header.get
+  rescue ActiveRecord::RecordNotFound
+    @cms_header = nil
+  end
+
   def authenticate_user!
     redirect_to(helpers.create_account_url) unless current_user
   end

app/services/cms/collections/programme.rb

@@ -1,10 +1,6 @@
 module Cms
   module Collections
     class Programme < Resource
-      def to_search_record(index_time)
-        raise NotImplementedError
-      end
-
       def self.is_collection = true
 
       def self.collection_attribute_mappings

app/services/cms/models/header_menu.rb

@@ -0,0 +1,13 @@
+module Cms
+  module Models
+    class HeaderMenu
+      def initialize(menus)
+        @menus = menus
+      end
+
+      def render
+        Cms::HeaderMenuComponent.new(menu_items: @menus)
+      end
+    end
+  end
+end

app/services/cms/providers/strapi/factories/model_factory.rb

@@ -57,9 +57,22 @@ def self.process_model(mapping, all_data)
               model_class.new(cms_models: strapi_data.map { ComponentFactory.process_component(_1) }.compact)
             elsif model_class == Models::EnrichmentList
               to_enrichment_list(all_data, strapi_data)
+            elsif model_class == Models::HeaderMenu
+              to_menu(strapi_data)
             end
           end
 
+          def self.to_menu(strapi_data)
+            Models::HeaderMenu.new(
+              strapi_data.map do |menu_item|
+                {
+                  label: menu_item[:label],
+                  menu_items: menu_item[:menuItems].map { {label: _1[:label], url: _1[:url]} }
+                }
+              end
+            )
+          end
+
           def self.to_seo(strapi_data)
             Models::Seo.new(
               title: strapi_data[:title],

app/services/cms/providers/strapi/graphql_client.rb

@@ -34,10 +34,15 @@ def one(resource_class, resource_id = nil, preview: false, preview_key: nil)
           data = clean_aliases(response.original_hash)
 
           results = data[:data][resource_class.graphql_key.to_sym][:data]
-
           raise ActiveRecord::RecordNotFound if results.empty?
 
-          map_resource(resource_class, results.first, preview, preview_key)
+          record = if resource_class.is_collection
+            results.first
+          else
+            results
+          end
+
+          map_resource(resource_class, record, preview, preview_key)
         end
 
         # This has been created to allow for alias to be alias_name__field_name

app/services/cms/providers/strapi/graphql_connection.rb

@@ -17,7 +17,8 @@ def api(schema_path: nil)
             )
           end
 
-          def dump_schema
+          def dump_schema(schema_path: nil)
+            api(schema_path:) # initialize client
             GraphQL::Client.dump_schema(@client.schema)&.to_json
           end
         end

app/services/cms/providers/strapi/mocks/header.rb

@@ -0,0 +1,23 @@
+module Cms
+  module Providers
+    module Strapi
+      module Mocks
+        class Header < StrapiMock
+          attribute(:dropDowns) { Array.new(3) { DropDownMenu.generate_raw_data } }
+        end
+
+        class DropDownMenu < StrapiMock
+          strapi_component "content-blocks.drop-down-menu"
+          attribute(:label) { Faker::Lorem.word }
+          attribute(:menuItems) { Array.new(5) { MenuItem.generate_raw_data } }
+        end
+
+        class MenuItem < StrapiMock
+          strapi_component "content-blocks.menu-item"
+          attribute(:label) { Faker::Lorem.word }
+          attribute(:url) { "/primary-certificate" }
+        end
+      end
+    end
+  end
+end