Add link to personal statement tool on job page

Author: KyleMacPherson

app/assets/stylesheets/application.scss

@@ -70,6 +70,7 @@ $govuk-assets-path: "/";
 @import 'components/supportal_table';
 @import 'components/supporting_document';
 @import 'components/tabs';
+@import 'components/sidebar-info-box';
 @import 'components/timeline';
 @import 'components/error';
 @import 'components/status_tag';

app/assets/stylesheets/components/sidebar-info-box.scss

@@ -0,0 +1,15 @@
+@import 'base';
+
+@mixin sidebar-info-box-styles {
+  background-color: govuk-colour('light-grey');
+  margin-bottom: govuk-spacing(5);
+  padding: govuk-spacing(6);
+
+  @include govuk-media-query($until: tablet) {
+    margin-top: govuk-spacing(5);
+  }
+}
+
+.sidebar-info-box {
+  @include sidebar-info-box-styles;
+}

app/assets/stylesheets/components/timeline.scss

@@ -1,13 +1,8 @@
 @import 'base';
+@import 'sidebar-info-box';
 
 .timeline-component {
-  background-color: govuk-colour('light-grey');
-  margin-bottom: govuk-spacing(5);
-  padding: govuk-spacing(6);
-
-  @include govuk-media-query($until: tablet) {
-    margin-top: govuk-spacing(5);
-  }
+  @include sidebar-info-box-styles;
 
   ul.timeline-component__items {
     list-style-type: none;

app/views/vacancies/_show.html.slim

@@ -28,6 +28,7 @@
 .govuk-grid-row class="govuk-!-margin-top-6"
   .govuk-grid-column-one-third
     = render "vacancies/listing/key_dates_sidebar", vacancy: @vacancy, similar_jobs: @similar_jobs
+    = render "vacancies/listing/personal_statement_help", vacancy: @vacancy
 
   .govuk-grid-column-two-thirds
     = render "vacancies/listing/multi_school_banner", vacancy: @vacancy

app/views/vacancies/listing/_personal_statement_help.html.slim

@@ -0,0 +1,3 @@
+.sidebar-info-box
+  h2.govuk-heading-s = t("jobs.personal_statement_help.heading")
+  p.govuk-body = t("jobs.personal_statement_help.body_html", tool_link: govuk_link_to(t("jobs.personal_statement_help.tool_link_text"), "https://teaching-vacancies.preflight.site/?job=#{vacancy.slug}"))

config/locales/jobs.yml

@@ -155,6 +155,10 @@ en:
     similar_jobs:
       anchor_link_text: see similar jobs
       heading: Similar jobs nearby
+    personal_statement_help:
+      heading: Need help writing your personal statement for this role?
+      body_html: Use the %{tool_link} to get AI-powered support in highlighting your skills and experience.
+      tool_link_text: personal statement tool
     school_type: School type
     trust_type: Trust type
     expired_listing: