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 @@
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 }
data
end
def logo_image_path
LOGO_IMAGE_PATH % { filename: name.parameterize }
end
private
def opacity_css_class
"gl-opacity-#{@opacity_level}"
def reassurance_logo_css_classes(size:, opacity:)
"gl-w-#{size} gl-h-#{size} gl-mr-#{15 - size} gl-opacity-#{opacity}"
end
def reassurance_logo_image_path(org_name)
'marketing/logos/logo_%s.svg' % org_name.parameterize
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_alt_text(org_name)
s_('InProductMarketing|%{organization_name} logo') % { organization_name: org_name }
end
end
end
......@@ -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'
......@@ -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
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
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