diff --git a/README.md b/README.md index f16de38..147eb94 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,22 @@ registerHeaderContentHelper({ - {{ render name }} -- used by a layout to render script and style blocks in appropriate places - {{ withVersion url }} -- appends `'?v=' + version` to the passed string +## Conditional Logotype Src Helper + +A helper that dynamically renders the logotype's source path, avoiding the use of multiple image tags by setting the correct source path through server-side logic. + +```javascript +// Import the helper +const { registerConditionalLogotypeSrc } = require('@kth/kth-node-web-common/lib/handlebars/helpers/conditionalLogotypeSrc') + +// Register the helper +registerConditionalLogotypeSrc() + +// Use the helper in a template +{{conditionalLogotypeSrc theme proxyPrefix}} + +``` + ## Breadcrumb Helper Helper to generate breadcrumb markup. diff --git a/lib/handlebars/helpers/__snapshots__/conditionalLogotypeSrc.test.js.snap b/lib/handlebars/helpers/__snapshots__/conditionalLogotypeSrc.test.js.snap new file mode 100644 index 0000000..d5f9e77 --- /dev/null +++ b/lib/handlebars/helpers/__snapshots__/conditionalLogotypeSrc.test.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`conditionalLogotypeSrc should return logotype-blue.svg for intranet theme 1`] = `"/prefix/assets/logotype/logotype-blue.svg"`; + +exports[`conditionalLogotypeSrc should return logotype-blue.svg for student-web theme 1`] = `"/prefix/assets/logotype/logotype-blue.svg"`; + +exports[`conditionalLogotypeSrc should return logotype-white.svg for external theme 1`] = `"/prefix/assets/logotype/logotype-white.svg"`; diff --git a/lib/handlebars/helpers/conditionalLogotypeSrc.js b/lib/handlebars/helpers/conditionalLogotypeSrc.js new file mode 100644 index 0000000..d4f8985 --- /dev/null +++ b/lib/handlebars/helpers/conditionalLogotypeSrc.js @@ -0,0 +1,31 @@ +'use strict' + +const Handlebars = require('handlebars') + +/** Dynamically generates the source URL for the logotype based on the provided theme and proxy prefix. + * + * @param {string} theme - The theme on the header: 'external', 'intranet', or 'student-web'. + * @param {string} proxyPrefix - The proxy prefix to prepend to the logotype URL. + * + * @returns {Handlebars.SafeString} A Handlebars.SafeString containing the dynamically generated logotype URL. + * + * @example + * {{conditionalLogotypeSrc 'external' '/prefix'}} + */ + +function conditionalLogotypeSrc(theme, proxyPrefix) { + if (typeof proxyPrefix !== 'string') { + throw new Error('Invalid proxyPrefix: must be a string') + } + const logotype = theme === 'external' ? 'logotype-white.svg' : 'logotype-blue.svg' + return new Handlebars.SafeString(`${proxyPrefix}/assets/logotype/${logotype}`) +} + +function registerConditionalLogotypeSrcHelper() { + Handlebars.registerHelper('conditionalLogotypeSrc', conditionalLogotypeSrc) +} + +module.exports = { + conditionalLogotypeSrc, + registerConditionalLogotypeSrcHelper, +} diff --git a/lib/handlebars/helpers/conditionalLogotypeSrc.test.js b/lib/handlebars/helpers/conditionalLogotypeSrc.test.js new file mode 100644 index 0000000..2dda28a --- /dev/null +++ b/lib/handlebars/helpers/conditionalLogotypeSrc.test.js @@ -0,0 +1,48 @@ +const Handlebars = require('handlebars') +const { conditionalLogotypeSrc, registerConditionalLogotypeSrcHelper } = require('./conditionalLogotypeSrc') + +jest.mock('handlebars') + +Handlebars.SafeString = jest.fn().mockImplementation(str => ({ string: str })) + +describe('registerConditionalLogotypeSrcHelper', () => { + it('Registers conditionalLogotypeSrc helper', () => { + registerConditionalLogotypeSrcHelper() + expect(Handlebars.registerHelper).toHaveBeenCalledWith('conditionalLogotypeSrc', conditionalLogotypeSrc) + }) +}) + +describe('conditionalLogotypeSrc', () => { + it('should throw an error if proxyPrefix is not a string', () => { + const theme = 'external' + const invalidProxyPrefix = 123 + + expect(() => { + conditionalLogotypeSrc(theme, invalidProxyPrefix) + }).toThrow(new Error('Invalid proxyPrefix: must be a string')) + }) + + it('should return logotype-white.svg for external theme', () => { + const theme = 'external' + const proxyPrefix = '/prefix' + + const result = conditionalLogotypeSrc(theme, proxyPrefix) + expect(result.string).toMatchSnapshot() + }) + + it('should return logotype-blue.svg for intranet theme', () => { + const theme = 'intranet' + const proxyPrefix = '/prefix' + + const result = conditionalLogotypeSrc(theme, proxyPrefix) + expect(result.string).toMatchSnapshot() + }) + + it('should return logotype-blue.svg for student-web theme', () => { + const theme = 'student-web' + const proxyPrefix = '/prefix' + + const result = conditionalLogotypeSrc(theme, proxyPrefix) + expect(result.string).toMatchSnapshot() + }) +})