Commit 19a00ba4 authored by Dallas Reedy's avatar Dallas Reedy Committed by Phil Hughes

Increase the size of the logo SVGs in the trial reassurance sidebar

To do so, I've decided to reconsider how we are defining that data &
making use of it to generate each individual logo item. Thus, the
ReassurancesHelper (& its associated spec file) got a decent refactor.
parent cf9b4b60
...@@ -2,38 +2,37 @@ ...@@ -2,38 +2,37 @@
module TrialRegistrations module TrialRegistrations
module ReassurancesHelper module ReassurancesHelper
LOGO_IMAGE_PATH = "marketing/logos/logo_%<filename>s.svg" def reassurance_logo_data
DEFAULT_OPACITY_CSS_CLASS_LEVEL = 5 # Create the basic data structure for the logos we want to showcase
data = [
class ReassuranceOrg { name: 'Siemens', css_classes: reassurance_logo_css_classes(opacity: 6, size: 9) },
attr_reader :name { 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) # Update each entry with a logo image path and alt text derived from the org's name
@name = name data.each do |hash|
@opacity_level = opacity_level hash[:image_path] = reassurance_logo_image_path(hash[:name])
hash[:image_alt_text] = reassurance_logo_image_alt_text(hash[:name])
end end
def image_alt_text data
s_('InProductMarketing|%{organization_name} logo') % { organization_name: name } end
end
def logo_image_path private
LOGO_IMAGE_PATH % { filename: name.parameterize }
end
def opacity_css_class def reassurance_logo_css_classes(size:, opacity:)
"gl-opacity-#{@opacity_level}" "gl-w-#{size} gl-h-#{size} gl-mr-#{15 - size} gl-opacity-#{opacity}"
end
end end
def reassurance_orgs def reassurance_logo_image_path(org_name)
[ 'marketing/logos/logo_%s.svg' % org_name.parameterize
ReassuranceOrg.new(name: 'Siemens', opacity_level: 6), end
ReassuranceOrg.new(name: 'Chorus'),
ReassuranceOrg.new(name: 'KnowBe4', opacity_level: 7), def reassurance_logo_image_alt_text(org_name)
ReassuranceOrg.new(name: 'Wish'), s_('InProductMarketing|%{organization_name} logo') % { organization_name: org_name }
ReassuranceOrg.new(name: 'Hotjar')
]
end end
end end
end end
...@@ -13,6 +13,6 @@ ...@@ -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:') %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 %ul.gl-display-flex.gl-flex-wrap.gl-pl-0.gl-font-sm.gl-font-weight-bold
- reassurance_orgs.each do |org| - reassurance_logo_data.each do |logo_data|
%li.gl-display-flex.gl-align-items-center.gl-min-w-8.gl-h-8.gl-mr-7{ class: org.opacity_css_class } %li.gl-display-flex.gl-align-items-center{ class: logo_data[:css_classes] }
= image_tag org.logo_image_path, alt: org.image_alt_text, title: org.name, class: 'gl-max-w-full' = image_tag logo_data[:image_path], alt: logo_data[:image_alt_text], title: logo_data[:name], class: 'gl-max-w-full'
...@@ -3,62 +3,16 @@ ...@@ -3,62 +3,16 @@
require 'spec_helper' require 'spec_helper'
RSpec.describe TrialRegistrations::ReassurancesHelper do RSpec.describe TrialRegistrations::ReassurancesHelper do
describe '#reassurance_orgs' do using RSpec::Parameterized::TableSyntax
subject(:reassurance_orgs) { helper.reassurance_orgs }
describe '#reassurance_logo_data' do
it 'returns an array of ReassuranceOrg objects' do it 'returns a collection of data in the expected format' do
expect(reassurance_orgs).to be_an(Array) expect(reassurance_logo_data).to all(match({
expect(reassurance_orgs).to all(be_an_instance_of(described_class::ReassuranceOrg)) name: an_instance_of(String),
end css_classes: a_string_matching(/\Agl-w-\d+ gl-h-\d+ gl-mr-\d+ gl-opacity-\d+\z/),
end image_path: a_string_matching(%r{\Amarketing/logos/logo_[a-z0-9-]+\.svg\z}),
image_alt_text: a_string_ending_with(' logo')
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
end end
end end
end end
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment