Merge branch...

Merge branch '336279-f-u-f-65890-try-slightly-larger-logo-images-in-the-trial-registration-reassurance-sidebar' into 'master'

Use larger logo images in the trial registration reassurance sidebar

See merge request gitlab-org/gitlab!78921

ee/app/helpers/trial_registrations/reassurances_helper.rb

@@ -2,38 +2,37 @@
 
 module TrialRegistrations
   module ReassurancesHelper
-    LOGO_IMAGE_PATH = "marketing/logos/logo_%<filename>s.svg"
-    DEFAULT_OPACITY_CSS_CLASS_LEVEL = 5
-
-    class ReassuranceOrg
-      attr_reader :name
+    def reassurance_logo_data
+      # Create the basic data structure for the logos we want to showcase
+      data = [
+        { name: 'Siemens', css_classes: reassurance_logo_css_classes(opacity: 6, size: 9) },
+        { name: 'Chorus', css_classes: reassurance_logo_css_classes(opacity: 5, size: 9) },
+        { name: 'KnowBe4', css_classes: reassurance_logo_css_classes(opacity: 7, size: 9) },
+        { name: 'Wish', css_classes: reassurance_logo_css_classes(opacity: 5, size: 8) },
+        { name: 'Hotjar', css_classes: reassurance_logo_css_classes(opacity: 5, size: 8) }
+      ]
 
-      def initialize(name:, opacity_level: DEFAULT_OPACITY_CSS_CLASS_LEVEL)
-        @name = name
-        @opacity_level = opacity_level
+      # Update each entry with a logo image path and alt text derived from the org's name
+      data.each do |hash|
+        hash[:image_path] = reassurance_logo_image_path(hash[:name])
+        hash[:image_alt_text] = reassurance_logo_image_alt_text(hash[:name])
       end
 
-      def image_alt_text
-        s_('InProductMarketing|%{organization_name} logo') % { organization_name: name }
-      end
+      data
+    end
 
-      def logo_image_path
-        LOGO_IMAGE_PATH % { filename: name.parameterize }
-      end
+    private
 
-      def opacity_css_class
-        "gl-opacity-#{@opacity_level}"
-      end
+    def reassurance_logo_css_classes(size:, opacity:)
+      "gl-w-#{size} gl-h-#{size} gl-mr-#{15 - size} gl-opacity-#{opacity}"
     end
 
-    def reassurance_orgs
-      [
-        ReassuranceOrg.new(name: 'Siemens', opacity_level: 6),
-        ReassuranceOrg.new(name: 'Chorus'),
-        ReassuranceOrg.new(name: 'KnowBe4', opacity_level: 7),
-        ReassuranceOrg.new(name: 'Wish'),
-        ReassuranceOrg.new(name: 'Hotjar')
-      ]
+    def reassurance_logo_image_path(org_name)
+      'marketing/logos/logo_%s.svg' % org_name.parameterize
+    end
+
+    def reassurance_logo_image_alt_text(org_name)
+      s_('InProductMarketing|%{organization_name} logo') % { organization_name: org_name }
     end
   end
 end

ee/app/views/trial_registrations/_reassurances.html.haml

@@ -13,6 +13,6 @@
 %p.gl-mb-3.gl-text-gray-400.gl-font-sm.gl-line-height-24= s_('InProductMarketing|Used by more than 100,000 organizations from around the globe:')
 
 %ul.gl-display-flex.gl-flex-wrap.gl-pl-0.gl-font-sm.gl-font-weight-bold
-  - reassurance_orgs.each do |org|
-    %li.gl-display-flex.gl-align-items-center.gl-min-w-8.gl-h-8.gl-mr-7{ class: org.opacity_css_class }
-      = image_tag org.logo_image_path, alt: org.image_alt_text, title: org.name, class: 'gl-max-w-full'
+  - reassurance_logo_data.each do |logo_data|
+    %li.gl-display-flex.gl-align-items-center{ class: logo_data[:css_classes] }
+      = image_tag logo_data[:image_path], alt: logo_data[:image_alt_text], title: logo_data[:name], class: 'gl-max-w-full'

ee/spec/helpers/trial_registrations/reassurances_helper_spec.rb

@@ -3,62 +3,16 @@
 require 'spec_helper'
 
 RSpec.describe TrialRegistrations::ReassurancesHelper do
-  describe '#reassurance_orgs' do
-    subject(:reassurance_orgs) { helper.reassurance_orgs }
-
-    it 'returns an array of ReassuranceOrg objects' do
-      expect(reassurance_orgs).to be_an(Array)
-      expect(reassurance_orgs).to all(be_an_instance_of(described_class::ReassuranceOrg))
-    end
-  end
-
-  describe 'ReassuranceOrg' do
-    using RSpec::Parameterized::TableSyntax
-
-    let(:org_name) { 'Foo Bar Baz' }
-
-    subject(:org) { described_class::ReassuranceOrg.new(name: org_name) }
-
-    describe '#name' do
-      it "returns the organization's name" do
-        expect(org.name).to eq(org_name)
-      end
-    end
-
-    describe '#opacity_css_class' do
-      context 'when no opacity_level is given' do
-        it 'returns a gitlab-ui utility CSS class for the default opacity level' do
-          expect(org.opacity_css_class).to eq('gl-opacity-5')
-        end
-      end
-
-      context 'when an opacity_level is given' do
-        subject(:org) { described_class::ReassuranceOrg.new(name: org_name, opacity_level: given_opacity_level) }
-
-        where(:given_opacity_level, :expected_opacity_css_class) do
-          5   | 'gl-opacity-5'
-          6   | 'gl-opacity-6'
-          7   | 'gl-opacity-7'
-        end
-
-        with_them do
-          it 'returns a gitlab-ui utility CSS class for the opacity_level' do
-            expect(org.opacity_css_class).to eq(expected_opacity_css_class)
-          end
-        end
-      end
-    end
-
-    describe '#image_alt_text' do
-      it "returns alt text for the organization's logo image" do
-        expect(org.image_alt_text).to eq('Foo Bar Baz logo')
-      end
-    end
-
-    describe '#logo_image_path' do
-      it "returns the path to the organization's logo image" do
-        expect(org.logo_image_path).to eq('marketing/logos/logo_foo-bar-baz.svg')
-      end
+  using RSpec::Parameterized::TableSyntax
+
+  describe '#reassurance_logo_data' do
+    it 'returns a collection of data in the expected format' do
+      expect(reassurance_logo_data).to all(match({
+        name: an_instance_of(String),
+        css_classes: a_string_matching(/\Agl-w-\d+ gl-h-\d+ gl-mr-\d+ gl-opacity-\d+\z/),
+        image_path: a_string_matching(%r{\Amarketing/logos/logo_[a-z0-9-]+\.svg\z}),
+        image_alt_text: a_string_ending_with(' logo')
+      }))
     end
   end
 end