Refactor testing env create log and BU file links (#3049)

* Add testing tools section with links in testing environments

* Refactor testing tools links to use button links for improved UI

* Update button icon sizes for bulk upload links in log actions component

* Fix typo in testing tools visibility message in log actions component

* Change text

* Lint

* Rename app-testing-tools class to app-testing-tools__inset for consistency in styling

* Rename app-testing-tools-link class to app-testing-tools__link for consistency

app/components/create_log_actions_component.html.erb

@@ -9,10 +9,38 @@
     <% end %>
 
     <% if FeatureToggle.create_test_logs_enabled? %>
-      <%= govuk_link_to "New test log", create_test_log_href %>
-      <%= govuk_link_to "New test log (setup only)", create_setup_test_log_href %>
-      <%= govuk_link_to "24 BU test file", create_test_bulk_upload_href(2024) %>
-      <%= govuk_link_to "25 BU test file", create_test_bulk_upload_href(2025) %>
+      <div class="govuk-inset-text app-testing-tools__inset">
+        <span class="govuk-tag app-testing-tools__tag">Testing tools</span>
+        <span class="govuk-body govuk-body-s">These options can only be seen and used in testing environments.</span>
+        <div>
+          <%= govuk_button_link_to create_test_log_href, class: "govuk-button" do %>
+            New test log
+            <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
+              <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
+            </svg>
+          <% end %>
+          <%= govuk_button_link_to create_setup_test_log_href, class: "govuk-button" do %>
+            New test log (setup only)
+            <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
+              <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
+            </svg>
+          <% end %>
+          <%= govuk_button_link_to create_test_bulk_upload_href(2024), class: "govuk-button govuk-button--secondary" do %>
+            24/25 BU test file
+            <svg class="govuk-button__start-icon bi bi-download" xmlns="http://www.w3.org/2000/svg" width="18" height="19" fill="currentColor" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.4">
+              <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />
+              <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z" />
+            </svg>
+          <% end %>
+          <%= govuk_button_link_to create_test_bulk_upload_href(2025), class: "govuk-button govuk-button--secondary" do %>
+            25/26 BU test file
+            <svg class="govuk-button__start-icon bi bi-download" xmlns="http://www.w3.org/2000/svg" width="18" height="19" fill="currentColor" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.4">
+              <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />
+              <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z" />
+            </svg>
+          <% end %>
+        </div>
+      </div>
     <% end %>
   <% end %>
 </div>

app/frontend/styles/_testing-tools.scss

@@ -0,0 +1,20 @@
+.app-testing-tools__inset {
+  border-left-color: #f47738;
+  margin-bottom: 0;
+  margin-top: 0;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.app-testing-tools__link {
+  @include govuk-link-common;
+  @include govuk-link-style-no-visited-state;
+}
+
+.app-testing-tools__tag {
+  @include govuk-font(14);
+  background-color: #fcd6c3;
+  margin-top: 0;
+  margin-bottom: 10px;
+  margin-right: 15px;
+}

app/frontend/styles/application.scss

@@ -49,6 +49,7 @@ $govuk-breakpoints: (
 @import "sub-navigation";
 @import "unread-notification";
 @import "red-link";
+@import "testing-tools";
 @import "custom-rails-admin";
 @import "node_modules/@ministryofjustice/frontend/moj/components/date-picker/date-picker";