Move styling methods into helper

app/helpers/user_table_helper.rb

@@ -0,0 +1,12 @@
+module UserTableHelper
+  include GovukLinkHelper
+
+  def user_cell(user)
+    [govuk_link_to(user.name, user), user.email].join("\n")
+  end
+
+  def org_cell(user)
+    role = "<span class='app-!-colour-muted'>#{user.role}</span>"
+    [user.organisation.name, role].join("\n")
+  end
+end

app/javascript/styles/application.scss

@@ -20,3 +20,8 @@ $govuk-global-styles: true;
 //   display: block;
 //   border: 1px solid blue
 // }
+
+//overrides
+.app-\!-colour-muted {
+  color: $govuk-secondary-text-colour !important;
+}

app/views/organisations/users.html.erb

@@ -10,10 +10,8 @@
   <% @organisation.users.each do |user| %>
     <%= table.body do |body| %>
       <%= body.row do |row|
-        user_cell = [govuk_link_to(user.name, user), user.email].join("\n")
-        org_cell = [user.organisation.name, user.role].join("\n")
-        row.cell(text: simple_format(user_cell, {}, wrapper_tag: "div"))
-        row.cell(text: simple_format(org_cell, {}, wrapper_tag: "div"))
+        row.cell(text: simple_format(user_cell(user), {}, wrapper_tag: "div"))
+        row.cell(text: simple_format(org_cell(user), {}, wrapper_tag: "div"))
         row.cell(text: user.last_sign_in_at&.strftime("%d %b %Y") )
       end %>
     <% end %>

spec/factories/user.rb

@@ -1,8 +1,10 @@
 FactoryBot.define do
   factory :user do
     sequence(:email) { |i| "test#{i}@example.com" }
+    name { "Danny Rojas" }
     password { "pAssword1" }
     organisation
+    role { "Data Provider" }
     created_at { Time.zone.now }
     updated_at { Time.zone.now }
   end

spec/helpers/user_table_helper_spec.rb

@@ -0,0 +1,19 @@
+require "rails_helper"
+
+RSpec.describe UserTableHelper do
+  let(:user) { FactoryBot.build(:user) }
+
+  describe "#user_cell" do
+    it "returns user link and email separated by a newline character" do
+      expected_html = "<a class=\"govuk-link\" href=\"/users\">Danny Rojas</a>\n#{user.email}"
+      expect(user_cell(user)).to match(expected_html)
+    end
+  end
+
+  describe "#org_cell" do
+    it "returns the users org name and role separated by a newline character" do
+      expected_html = "DLUHC\n<span class='app-!-colour-muted'>Data Provider</span>"
+      expect(org_cell(user)).to match(expected_html)
+    end
+  end
+end