@reykjavik/hanna-react 0.10.104 → 0.10.105

package/AutosuggestSearch.js

@@ -39,7 +39,7 @@ const AutosuggestSearch = (props) => {
         ? opt.label.toString()
         : getOptionValue(opt), InputComponent = SearchInput_js_1.default, renderInputField, wrapperProps, } = props;
     const [value, setValue] = (0, react_1.useState)('');
-    const inputRef = (0, react_1.createRef)();
+    const inputRef = (0, react_1.useRef)(null);
     const txt = (0, i18n_1.getTexts)(props, exports.defaultAutosuggestSearchTexts);
     return (react_1.default.createElement(react_autosuggest_1.default, { theme: {
             container: 'AutosuggestSearch',
@@ -63,8 +63,8 @@ const AutosuggestSearch = (props) => {
             ? (inputProps) => renderInputField(inputProps, txt)
             : (inputProps) => {
                 /* prettier-ignore */
-                const { className, type, disabled, readOnly, required, children } = inputProps, siteSearchProps = tslib_1.__rest(inputProps, ["className", "type", "disabled", "readOnly", "required", "children"]);
-                return (react_1.default.createElement(InputComponent, Object.assign({ lang: props.lang }, siteSearchProps, { button: button, label: txt.inputLabel, placeholder: txt.placeholder, buttonText: txt.buttonText, onSubmit: onSubmit && (() => onSubmit(value)), onButtonClick: onButtonClick && (() => onButtonClick(value)) })));
+                const { className, type, disabled, readOnly, required, children, ref } = inputProps, siteSearchProps = tslib_1.__rest(inputProps, ["className", "type", "disabled", "readOnly", "required", "children", "ref"]);
+                return (react_1.default.createElement(InputComponent, Object.assign({ lang: props.lang }, siteSearchProps, { inputRef: ref, button: button, label: txt.inputLabel, placeholder: txt.placeholder, buttonText: txt.buttonText, onSubmit: onSubmit && (() => onSubmit(value)), onButtonClick: onButtonClick && (() => onButtonClick(value)) })));
             } }));
 };
 exports.AutosuggestSearch = AutosuggestSearch;

package/CHANGELOG.md

@@ -4,6 +4,16 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.105
+
+_2023-10-04_
+
+- `Layout` and `WizardLayout`:
+  - feat: Implement `__header__homelink` and `__header__sitename` markup
+  - feat: Warn about missing/redundant `siteName` prop
+- fix: Focus error on `SiteSearchAutocomplete` and `AutosuggestSearch`
+  suggestion click
+
 ## 0.10.104
 
 _2023-09-13_

package/Layout.js

@@ -4,9 +4,8 @@ exports.Layout = exports.defaultLayoutTexts = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
-const assets_1 = require("@reykjavik/hanna-utils/assets");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
-const _Image_js_1 = require("./_abstract/_Image.js");
+const _Layouts_js_1 = require("./_abstract/_Layouts.js");
 const _Link_js_1 = require("./_abstract/_Link.js");
 const utils_js_1 = require("./utils.js");
 exports.defaultLayoutTexts = {
@@ -28,19 +27,15 @@ exports.defaultLayoutTexts = {
 };
 const Layout = (props) => {
     (0, utils_js_1.useScrollbarWidthCSSVar)();
-    const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName = '', logoLink = '/', wrapperProps, } = props;
+    const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName, logoLink = '/', wrapperProps, } = props;
+    (0, _Layouts_js_1.issueSiteNameWarningInDev)(props);
     const { isMenuActive, uiState, closeMenu, toggleMenu } = (0, utils_js_1.useMenuToggling)(ssr !== 'ssr-only');
     const txt = (0, i18n_1.getTexts)(props, exports.defaultLayoutTexts);
     return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('Layout', props.modifier, (wrapperProps || {}).className), "data-color-theme": colorTheme }),
         globalAlerts && (react_1.default.createElement("div", { className: "Layout__alerts", role: "alert" }, globalAlerts)),
         react_1.default.createElement("div", { className: "Layout__content" },
             react_1.default.createElement("div", { className: "Layout__header", role: "banner" },
-                react_1.default.createElement(_Link_js_1.Link, { className: "Layout__header__logo", href: logoLink },
-                    ' ',
-                    react_1.default.createElement(_Image_js_1.Image, { bem: undefined, inline: true, src: (0, assets_1.getAssetUrl)('reykjavik-logo.svg'), altText: "Reykjav\u00EDk" }),
-                    ' ',
-                    siteName,
-                    ' '),
+                (0, _Layouts_js_1.renderLayoutHomeLink)('Layout', logoLink, siteName),
                 ' ',
                 navChildren && (react_1.default.createElement(_Link_js_1.Link, { className: "Layout__header__skiplink", href: "#pagenav", onClick: isMenuActive &&
                         ((e) => {

package/SiteSearchAutocomplete.js

@@ -35,7 +35,7 @@ exports.defaultSiteSearchACTexts = {
 const SiteSearchAutocomplete = (props) => {
     const { suggestions, setSuggestions, renderSuggestion, getSuggestionValue, onSuggestionsFetchRequested, onSuggestionSelected, onSuggestionHighlighted, onSubmit, onButtonClick, bem = 'SiteSearchAutocomplete', wrapperProps, } = props;
     const [value, setValue] = (0, react_1.useState)('');
-    const inputRef = (0, react_1.createRef)();
+    const inputRef = (0, react_1.useRef)(null);
     const txt = (0, i18n_1.getTexts)(props, exports.defaultSiteSearchACTexts);
     if (process.env.NODE_ENV !== 'production' && !txt.buttonText) {
         console.warn('SiteSearchAutocomplete: Missing translation: `buttonText`');
@@ -56,8 +56,8 @@ const SiteSearchAutocomplete = (props) => {
             },
         }, renderInputComponent: (inputProps) => {
             /* prettier-ignore */
-            const { className, type, disabled, readOnly, required, children } = inputProps, siteSearchProps = tslib_1.__rest(inputProps, ["className", "type", "disabled", "readOnly", "required", "children"]);
-            return (react_1.default.createElement(SiteSearchInput_js_1.SiteSearchInput, Object.assign({}, siteSearchProps, { label: props.label || // eslint-disable-line deprecation/deprecation
+            const { className, type, disabled, readOnly, required, children, ref } = inputProps, siteSearchProps = tslib_1.__rest(inputProps, ["className", "type", "disabled", "readOnly", "required", "children", "ref"]);
+            return (react_1.default.createElement(SiteSearchInput_js_1.SiteSearchInput, Object.assign({}, siteSearchProps, { inputRef: ref, label: props.label || // eslint-disable-line deprecation/deprecation
                     txt.inputLabel, placeholder: txt.placeholder, buttonText: txt.buttonText, onSubmit: onSubmit && (() => onSubmit(value)), onButtonClick: onButtonClick && (() => onButtonClick(value)) })));
         } }));
 };

package/SiteSearchInput.d.ts

@@ -1,8 +1,10 @@
+import { RefObject } from 'react';
 import { FormFieldWrappingProps } from './FormField.js';
 type InputElmProps = Omit<JSX.IntrinsicElements['input'], 'className' | 'type' | 'disabled' | 'readOnly' | 'required' | 'onSubmit' | 'ref' | 'value'> & {
     value?: string;
 };
 export type SiteSearchInputProps = Pick<FormFieldWrappingProps, 'id' | 'label' | 'ssr' | 'wrapperProps'> & {
+    inputRef?: RefObject<HTMLInputElement>;
     /**
      * Triggered when user hits ENTER key with the focus inside the input field.
      *

package/SiteSearchInput.js

@@ -7,7 +7,7 @@ const FormField_js_1 = tslib_1.__importStar(require("./FormField.js"));
 // ---------------------------------------------------------------------------
 const SiteSearchInput = (props) => {
     var _a;
-    const _b = (0, FormField_js_1.groupFormFieldWrapperProps)(props), { onChange, buttonText = 'Leita', onSubmit, onButtonClick = props.onSubmit, button, onKeyDown, placeholder = typeof props.label === 'string' ? props.label : undefined, fieldWrapperProps } = _b, inputElementProps = tslib_1.__rest(_b, ["onChange", "buttonText", "onSubmit", "onButtonClick", "button", "onKeyDown", "placeholder", "fieldWrapperProps"]);
+    const _b = (0, FormField_js_1.groupFormFieldWrapperProps)(props), { onChange, inputRef, buttonText = 'Leita', onSubmit, onButtonClick = props.onSubmit, button, onKeyDown, placeholder = typeof props.label === 'string' ? props.label : undefined, fieldWrapperProps } = _b, inputElementProps = tslib_1.__rest(_b, ["onChange", "inputRef", "buttonText", "onSubmit", "onButtonClick", "button", "onKeyDown", "placeholder", "fieldWrapperProps"]);
     const { value, defaultValue } = inputElementProps;
     const [hasValue, setHasValue] = (0, react_1.useState)(undefined);
     const filled = !!((_a = value !== null && value !== void 0 ? value : hasValue) !== null && _a !== void 0 ? _a : !!defaultValue);
@@ -27,7 +27,7 @@ const SiteSearchInput = (props) => {
                         }
                         onKeyDown && onKeyDown(e);
                     }
-                    : onKeyDown }, inputElementProps)),
+                    : onKeyDown }, inputElementProps, { ref: inputRef })),
             ' ',
             showButton && (react_1.default.createElement("button", { className: "SiteSearchInput__button", type: "submit", onClick: onButtonClick &&
                     ((e) => onButtonClick(e.currentTarget.value) !== true && e.preventDefault()), title: buttonText }, buttonText)))) })));

package/WizardLayout.js

@@ -4,27 +4,20 @@ exports.WizardLayout = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
-const assets_1 = require("@reykjavik/hanna-utils/assets");
-const _Image_js_1 = require("./_abstract/_Image.js");
-const _Link_js_1 = require("./_abstract/_Link.js");
+const _Layouts_js_1 = require("./_abstract/_Layouts.js");
 const useScrollbarWidthCSSVar_js_1 = require("./utils/useScrollbarWidthCSSVar.js");
 const utils_js_1 = require("./utils.js");
 const WizardLayout = (props) => {
     (0, useScrollbarWidthCSSVar_js_1.useScrollbarWidthCSSVar)();
     const { 
     // ssr,
-    wizardStepper, wizardFooter, children, colorTheme, logoLink = '/', siteName = '', globalAlerts, wrapperProps, } = props;
+    wizardStepper, wizardFooter, children, colorTheme, logoLink = '/', siteName, globalAlerts, wrapperProps, } = props;
     const isBrowser = (0, utils_js_1.useIsBrowserSide)( /* ssr */);
     return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('WizardLayout', null, (wrapperProps || {}).className), "data-sprinkled": isBrowser, "data-color-theme": colorTheme }),
         globalAlerts && (react_1.default.createElement("div", { className: "WizardLayout__alerts", role: "alert" }, globalAlerts)),
         react_1.default.createElement("div", { className: "WizardLayout__content" },
             react_1.default.createElement("div", { className: "WizardLayout__header", role: "banner" },
-                react_1.default.createElement(_Link_js_1.Link, { className: "WizardLayout__header__logo", href: logoLink },
-                    ' ',
-                    react_1.default.createElement(_Image_js_1.Image, { bem: undefined, inline: true, src: (0, assets_1.getAssetUrl)('reykjavik-logo.svg'), altText: "Reykjav\u00EDk" }),
-                    ' ',
-                    siteName,
-                    ' '),
+                (0, _Layouts_js_1.renderLayoutHomeLink)('WizardLayout', logoLink, siteName),
                 ' '),
             react_1.default.createElement("div", { className: "WizardLayout__wrap" },
                 wizardStepper && (react_1.default.createElement("div", { className: "WizardLayout__stepper", role: "navigation" }, wizardStepper)),

package/_abstract/_Layouts.d.ts

@@ -0,0 +1,4 @@
+export declare const renderLayoutHomeLink: (bem: string, logoLink: string, siteName?: string) => JSX.Element;
+export declare const issueSiteNameWarningInDev: (props: {
+    siteName?: string;
+}) => void;

package/_abstract/_Layouts.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.issueSiteNameWarningInDev = exports.renderLayoutHomeLink = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const assets_1 = require("@reykjavik/hanna-utils/assets");
+const _Image_js_1 = require("./_Image.js");
+const _Link_js_1 = require("./_Link.js");
+// ---------------------------------------------------------------------------
+const renderLayoutHomeLink = (bem, logoLink, siteName) => (react_1.default.createElement(_Link_js_1.Link, { className: `${bem}__header__homelink`, href: logoLink },
+    ' ',
+    react_1.default.createElement(_Image_js_1.Image, { bem: undefined, className: `${bem}__header__logo`, src: (0, assets_1.getRvkLogoUrl)(siteName ? 'reykjavik-logo-notext.svg' : 'reykjavik-logo.svg'), altText: "Reykjav\u00EDk", inline: true }),
+    ' ',
+    siteName && react_1.default.createElement("span", { className: `${bem}__header__sitename` }, siteName),
+    ' '));
+exports.renderLayoutHomeLink = renderLayoutHomeLink;
+// ---------------------------------------------------------------------------
+const issueSiteNameWarningInDev = (props) => {
+    if (process.env.NODE_ENV !== 'production') {
+        if (!('siteName' in props)) {
+            console.warn('Layout: Prop `siteName` is missing.\n', 'If this is intentional, please pass `undefined` or the empty string.');
+        }
+        else if (props.siteName &&
+            ['Reykjavík', 'Reykjavik', 'Reykjavíkurborg', 'Reykjavík City'].includes(props.siteName.trim())) {
+            console.warn('Layout: `siteName` should not be set to "Reykjavík" (or something equally generic).\n', 'If you are making a website for Reykjavíkurborg, then you should leave `siteName` empty, ', 'as the SVG logo already says "Reykjavík".\n');
+        }
+    }
+};
+exports.issueSiteNameWarningInDev = issueSiteNameWarningInDev;

package/esm/AutosuggestSearch.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React, { createRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import Autosuggest from 'react-autosuggest';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
@@ -36,7 +36,7 @@ export const AutosuggestSearch = (props) => {
         ? opt.label.toString()
         : getOptionValue(opt), InputComponent = SearchInput, renderInputField, wrapperProps, } = props;
     const [value, setValue] = useState('');
-    const inputRef = createRef();
+    const inputRef = useRef(null);
     const txt = getTexts(props, defaultAutosuggestSearchTexts);
     return (React.createElement(Autosuggest, { theme: {
             container: 'AutosuggestSearch',
@@ -60,7 +60,7 @@ export const AutosuggestSearch = (props) => {
             ? (inputProps) => renderInputField(inputProps, txt)
             : (inputProps) => {
                 /* prettier-ignore */
-                const { className, type, disabled, readOnly, required, children } = inputProps, siteSearchProps = __rest(inputProps, ["className", "type", "disabled", "readOnly", "required", "children"]);
-                return (React.createElement(InputComponent, Object.assign({ lang: props.lang }, siteSearchProps, { button: button, label: txt.inputLabel, placeholder: txt.placeholder, buttonText: txt.buttonText, onSubmit: onSubmit && (() => onSubmit(value)), onButtonClick: onButtonClick && (() => onButtonClick(value)) })));
+                const { className, type, disabled, readOnly, required, children, ref } = inputProps, siteSearchProps = __rest(inputProps, ["className", "type", "disabled", "readOnly", "required", "children", "ref"]);
+                return (React.createElement(InputComponent, Object.assign({ lang: props.lang }, siteSearchProps, { inputRef: ref, button: button, label: txt.inputLabel, placeholder: txt.placeholder, buttonText: txt.buttonText, onSubmit: onSubmit && (() => onSubmit(value)), onButtonClick: onButtonClick && (() => onButtonClick(value)) })));
             } }));
 };

package/esm/Layout.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
-import { getAssetUrl } from '@reykjavik/hanna-utils/assets';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
-import { Image } from './_abstract/_Image.js';
+import { issueSiteNameWarningInDev, renderLayoutHomeLink } from './_abstract/_Layouts.js';
 import { Link } from './_abstract/_Link.js';
 import { HannaUIState, useMenuToggling, useScrollbarWidthCSSVar, } from './utils.js';
 export const defaultLayoutTexts = {
@@ -24,19 +23,15 @@ export const defaultLayoutTexts = {
 };
 export const Layout = (props) => {
     useScrollbarWidthCSSVar();
-    const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName = '', logoLink = '/', wrapperProps, } = props;
+    const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName, logoLink = '/', wrapperProps, } = props;
+    issueSiteNameWarningInDev(props);
     const { isMenuActive, uiState, closeMenu, toggleMenu } = useMenuToggling(ssr !== 'ssr-only');
     const txt = getTexts(props, defaultLayoutTexts);
     return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('Layout', props.modifier, (wrapperProps || {}).className), "data-color-theme": colorTheme }),
         globalAlerts && (React.createElement("div", { className: "Layout__alerts", role: "alert" }, globalAlerts)),
         React.createElement("div", { className: "Layout__content" },
             React.createElement("div", { className: "Layout__header", role: "banner" },
-                React.createElement(Link, { className: "Layout__header__logo", href: logoLink },
-                    ' ',
-                    React.createElement(Image, { bem: undefined, inline: true, src: getAssetUrl('reykjavik-logo.svg'), altText: "Reykjav\u00EDk" }),
-                    ' ',
-                    siteName,
-                    ' '),
+                renderLayoutHomeLink('Layout', logoLink, siteName),
                 ' ',
                 navChildren && (React.createElement(Link, { className: "Layout__header__skiplink", href: "#pagenav", onClick: isMenuActive &&
                         ((e) => {

package/esm/SiteSearchAutocomplete.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React, { createRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import Autosuggest from 'react-autosuggest';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import { SiteSearchInput } from './SiteSearchInput.js';
@@ -32,7 +32,7 @@ export const defaultSiteSearchACTexts = {
 export const SiteSearchAutocomplete = (props) => {
     const { suggestions, setSuggestions, renderSuggestion, getSuggestionValue, onSuggestionsFetchRequested, onSuggestionSelected, onSuggestionHighlighted, onSubmit, onButtonClick, bem = 'SiteSearchAutocomplete', wrapperProps, } = props;
     const [value, setValue] = useState('');
-    const inputRef = createRef();
+    const inputRef = useRef(null);
     const txt = getTexts(props, defaultSiteSearchACTexts);
     if (process.env.NODE_ENV !== 'production' && !txt.buttonText) {
         console.warn('SiteSearchAutocomplete: Missing translation: `buttonText`');
@@ -53,8 +53,8 @@ export const SiteSearchAutocomplete = (props) => {
             },
         }, renderInputComponent: (inputProps) => {
             /* prettier-ignore */
-            const { className, type, disabled, readOnly, required, children } = inputProps, siteSearchProps = __rest(inputProps, ["className", "type", "disabled", "readOnly", "required", "children"]);
-            return (React.createElement(SiteSearchInput, Object.assign({}, siteSearchProps, { label: props.label || // eslint-disable-line deprecation/deprecation
+            const { className, type, disabled, readOnly, required, children, ref } = inputProps, siteSearchProps = __rest(inputProps, ["className", "type", "disabled", "readOnly", "required", "children", "ref"]);
+            return (React.createElement(SiteSearchInput, Object.assign({}, siteSearchProps, { inputRef: ref, label: props.label || // eslint-disable-line deprecation/deprecation
                     txt.inputLabel, placeholder: txt.placeholder, buttonText: txt.buttonText, onSubmit: onSubmit && (() => onSubmit(value)), onButtonClick: onButtonClick && (() => onButtonClick(value)) })));
         } }));
 };

package/esm/SiteSearchInput.d.ts

@@ -1,8 +1,10 @@
+import { RefObject } from 'react';
 import { FormFieldWrappingProps } from './FormField.js';
 type InputElmProps = Omit<JSX.IntrinsicElements['input'], 'className' | 'type' | 'disabled' | 'readOnly' | 'required' | 'onSubmit' | 'ref' | 'value'> & {
     value?: string;
 };
 export type SiteSearchInputProps = Pick<FormFieldWrappingProps, 'id' | 'label' | 'ssr' | 'wrapperProps'> & {
+    inputRef?: RefObject<HTMLInputElement>;
     /**
      * Triggered when user hits ENTER key with the focus inside the input field.
      *

package/esm/SiteSearchInput.js

@@ -4,7 +4,7 @@ import FormField, { groupFormFieldWrapperProps, } from './FormField.js';
 // ---------------------------------------------------------------------------
 export const SiteSearchInput = (props) => {
     var _a;
-    const _b = groupFormFieldWrapperProps(props), { onChange, buttonText = 'Leita', onSubmit, onButtonClick = props.onSubmit, button, onKeyDown, placeholder = typeof props.label === 'string' ? props.label : undefined, fieldWrapperProps } = _b, inputElementProps = __rest(_b, ["onChange", "buttonText", "onSubmit", "onButtonClick", "button", "onKeyDown", "placeholder", "fieldWrapperProps"]);
+    const _b = groupFormFieldWrapperProps(props), { onChange, inputRef, buttonText = 'Leita', onSubmit, onButtonClick = props.onSubmit, button, onKeyDown, placeholder = typeof props.label === 'string' ? props.label : undefined, fieldWrapperProps } = _b, inputElementProps = __rest(_b, ["onChange", "inputRef", "buttonText", "onSubmit", "onButtonClick", "button", "onKeyDown", "placeholder", "fieldWrapperProps"]);
     const { value, defaultValue } = inputElementProps;
     const [hasValue, setHasValue] = useState(undefined);
     const filled = !!((_a = value !== null && value !== void 0 ? value : hasValue) !== null && _a !== void 0 ? _a : !!defaultValue);
@@ -24,7 +24,7 @@ export const SiteSearchInput = (props) => {
                         }
                         onKeyDown && onKeyDown(e);
                     }
-                    : onKeyDown }, inputElementProps)),
+                    : onKeyDown }, inputElementProps, { ref: inputRef })),
             ' ',
             showButton && (React.createElement("button", { className: "SiteSearchInput__button", type: "submit", onClick: onButtonClick &&
                     ((e) => onButtonClick(e.currentTarget.value) !== true && e.preventDefault()), title: buttonText }, buttonText)))) })));

package/esm/WizardLayout.js

@@ -1,26 +1,19 @@
 import React from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
-import { getAssetUrl } from '@reykjavik/hanna-utils/assets';
-import { Image } from './_abstract/_Image.js';
-import { Link } from './_abstract/_Link.js';
+import { renderLayoutHomeLink } from './_abstract/_Layouts.js';
 import { useScrollbarWidthCSSVar } from './utils/useScrollbarWidthCSSVar.js';
 import { useIsBrowserSide } from './utils.js';
 export const WizardLayout = (props) => {
     useScrollbarWidthCSSVar();
     const { 
     // ssr,
-    wizardStepper, wizardFooter, children, colorTheme, logoLink = '/', siteName = '', globalAlerts, wrapperProps, } = props;
+    wizardStepper, wizardFooter, children, colorTheme, logoLink = '/', siteName, globalAlerts, wrapperProps, } = props;
     const isBrowser = useIsBrowserSide( /* ssr */);
     return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('WizardLayout', null, (wrapperProps || {}).className), "data-sprinkled": isBrowser, "data-color-theme": colorTheme }),
         globalAlerts && (React.createElement("div", { className: "WizardLayout__alerts", role: "alert" }, globalAlerts)),
         React.createElement("div", { className: "WizardLayout__content" },
             React.createElement("div", { className: "WizardLayout__header", role: "banner" },
-                React.createElement(Link, { className: "WizardLayout__header__logo", href: logoLink },
-                    ' ',
-                    React.createElement(Image, { bem: undefined, inline: true, src: getAssetUrl('reykjavik-logo.svg'), altText: "Reykjav\u00EDk" }),
-                    ' ',
-                    siteName,
-                    ' '),
+                renderLayoutHomeLink('WizardLayout', logoLink, siteName),
                 ' '),
             React.createElement("div", { className: "WizardLayout__wrap" },
                 wizardStepper && (React.createElement("div", { className: "WizardLayout__stepper", role: "navigation" }, wizardStepper)),

package/esm/_abstract/_Layouts.d.ts

@@ -0,0 +1,4 @@
+export declare const renderLayoutHomeLink: (bem: string, logoLink: string, siteName?: string) => JSX.Element;
+export declare const issueSiteNameWarningInDev: (props: {
+    siteName?: string;
+}) => void;

package/esm/_abstract/_Layouts.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { getRvkLogoUrl } from '@reykjavik/hanna-utils/assets';
+import { Image } from './_Image.js';
+import { Link } from './_Link.js';
+// ---------------------------------------------------------------------------
+export const renderLayoutHomeLink = (bem, logoLink, siteName) => (React.createElement(Link, { className: `${bem}__header__homelink`, href: logoLink },
+    ' ',
+    React.createElement(Image, { bem: undefined, className: `${bem}__header__logo`, src: getRvkLogoUrl(siteName ? 'reykjavik-logo-notext.svg' : 'reykjavik-logo.svg'), altText: "Reykjav\u00EDk", inline: true }),
+    ' ',
+    siteName && React.createElement("span", { className: `${bem}__header__sitename` }, siteName),
+    ' '));
+// ---------------------------------------------------------------------------
+export const issueSiteNameWarningInDev = (props) => {
+    if (process.env.NODE_ENV !== 'production') {
+        if (!('siteName' in props)) {
+            console.warn('Layout: Prop `siteName` is missing.\n', 'If this is intentional, please pass `undefined` or the empty string.');
+        }
+        else if (props.siteName &&
+            ['Reykjavík', 'Reykjavik', 'Reykjavíkurborg', 'Reykjavík City'].includes(props.siteName.trim())) {
+            console.warn('Layout: `siteName` should not be set to "Reykjavík" (or something equally generic).\n', 'If you are making a website for Reykjavíkurborg, then you should leave `siteName` empty, ', 'as the SVG logo already says "Reykjavík".\n');
+        }
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.104",
+	"version": "0.10.105",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -18,7 +18,7 @@
 		"@hugsmidjan/qj": "^4.22.1",
 		"@hugsmidjan/react": "^0.4.32",
 		"@reykjavik/hanna-css": "^0.4.7",
-		"@reykjavik/hanna-utils": "^0.2.10",
+		"@reykjavik/hanna-utils": "^0.2.11",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^4.8.0",
 		"@types/react-transition-group": "^4.4.0",