Add code to goal title

The same way it's done in UN official SDG pages.

app/assets/stylesheets/sdg/goals/show.scss

@@ -31,6 +31,11 @@
       font-weight: 500;
       letter-spacing: -1px;
       text-transform: uppercase;
+
+      .goal-code {
+        letter-spacing: -0.1em;
+        margin-right: rem-calc(10);
+      }
     }
 
     @each $code, $color in $sdg-colors {

app/components/sdg/goals/show_component.html.erb

@@ -5,7 +5,7 @@
 
   <article class="sdg-goal sdg-goal-<%= goal.code %>">
     <header>
-      <h1><%= goal.title %></h1>
+      <h1><%= heading %></h1>
     </header>
   </article>
 

app/components/sdg/goals/show_component.rb

@@ -15,4 +15,8 @@ class SDG::Goals::ShowComponent < ApplicationComponent
     def processes_feed
       feeds.find { |feed| feed.kind == "processes" }
     end
+
+    def heading
+      safe_join([tag.span(goal.code, class: "goal-code"), tag.span(goal.title, class: "goal-title")], " ")
+    end
 end

spec/system/sdg/goals_spec.rb

@@ -47,7 +47,7 @@ describe "SDG Goals", :js do
     scenario "shows the SDG and its related content" do
       visit sdg_goal_path(15)
 
-      within(".sdg-goal header") { expect(page).to have_content "LIFE ON LAND" }
+      within(".sdg-goal header") { expect(page).to have_content "15 LIFE ON LAND" }
 
       within ".feed-proposals" do
         expect(page).to have_content "Animal farm"