Feat/conditionally render logo src

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.

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"`;

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,
+}

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()
+  })
+})