@reykjavik/hanna-react 0.10.151 → 0.10.153

package/CHANGELOG.md

@@ -4,6 +4,21 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.153
+
+_2025-06-19_
+
+- `Layout`:
+  - feat: Add prop `customLogo`
+  - fix: Change `__header__navlink`'s redundant `aria-label=` to `title=`
+
+## 0.10.152
+
+_2025-05-23_
+
+- `Datepicker`:
+  - fix: set `autoComplete="off"` on the input element
+
 ## 0.10.151
 
 _2025-05-22_

package/Datepicker.js

@@ -173,7 +173,7 @@ const Datepicker = (props) => {
                     }, placeholderText: placeholder, 
                     // TODO: Implement this
                     // selectsRange
-                    minDate: minDateNormalized, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps))));
+                    minDate: minDateNormalized, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps, { autoComplete: "off" }))));
         } })));
 };
 exports.Datepicker = Datepicker;

package/Layout.d.ts

@@ -21,6 +21,10 @@ export type LayoutProps = {
     colorTheme?: HannaColorTheme;
     logoLink?: string;
     siteName?: string;
+    customLogo?: {
+        src: string;
+        altText: string;
+    };
     texts?: LayoutI18n;
     lang?: HannaLang;
     /** @deprecated Not used (Will be removed in v0.11) */

package/Layout.js

@@ -15,16 +15,16 @@ exports.defaultLayoutTexts = {
 };
 const Layout = (props) => {
     (0, utils_js_1.useScrollbarWidthCSSVar)();
-    const { globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName, logoLink = '/', wrapperProps, } = props;
+    const { globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName, logoLink = '/', customLogo, wrapperProps, } = props;
     (0, _Layouts_js_1.issueSiteNameWarningInDev)(props);
     const txt = (0, i18n_1.getTexts)(props, exports.defaultLayoutTexts);
     return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_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" },
-                (0, _Layouts_js_1.renderLayoutHomeLink)('Layout', logoLink, siteName),
+                (0, _Layouts_js_1.renderLayoutHomeLink)('Layout', logoLink, siteName, customLogo),
                 ' ',
-                navChildren && (react_1.default.createElement("a", { className: "Layout__header__navlink", href: "#pagenav", onClick: (e) => (0, a11yHelpers_js_1.handleAnchorLinkClick)(e, true), "aria-label": txt.skipLinkLabel }, txt.skipLinkLabel))),
+                navChildren && (react_1.default.createElement("a", { className: "Layout__header__navlink", href: "#pagenav", onClick: (e) => (0, a11yHelpers_js_1.handleAnchorLinkClick)(e, true), title: txt.skipLinkLabel }, txt.skipLinkLabel))),
             react_1.default.createElement("div", { className: "Layout__main", role: "main" }, mainChildren || children),
             navChildren && (react_1.default.createElement("div", { className: "Layout__nav", id: "pagenav", tabIndex: -1, role: "navigation" }, navChildren)),
             footerChildren && (react_1.default.createElement("div", { className: "Layout__footer", role: "complementary" }, footerChildren)))));

package/_abstract/_Layouts.d.ts

@@ -1,5 +1,7 @@
-export declare const renderLayoutHomeLink: (bem: string, logoLink: string, siteName?: string) => JSX.Element;
-export declare const renderLegacyLayoutHomeLink: (bem: string, logoLink: string, siteName?: string) => JSX.Element;
+export declare const renderLayoutHomeLink: (bem: string, logoLink: string, siteName?: string, customLogo?: {
+    src: string;
+    altText: string;
+}) => JSX.Element;
 export declare const issueSiteNameWarningInDev: (props: {
     siteName?: string;
 }) => void;

package/_abstract/_Layouts.js

@@ -1,28 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.issueSiteNameWarningInDev = exports.renderLegacyLayoutHomeLink = exports.renderLayoutHomeLink = void 0;
+exports.issueSiteNameWarningInDev = exports.renderLayoutHomeLink = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 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),
-    ' '));
+const renderLayoutHomeLink = (bem, logoLink, siteName, customLogo) => {
+    if (!siteName) {
+        customLogo = undefined;
+    }
+    return (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: (0, hanna_utils_1.modifiedClass)(`${bem}__header__logo`, customLogo && 'custom'), src: (customLogo === null || customLogo === void 0 ? void 0 : customLogo.src) ||
+                (0, assets_1.getRvkLogoUrl)(siteName ? 'reykjavik-logo-notext.svg' : 'reykjavik-logo.svg'), altText: (customLogo === null || customLogo === void 0 ? void 0 : customLogo.altText) || 'Reykjavík', inline: true }),
+        ' ',
+        siteName && react_1.default.createElement("span", { className: `${bem}__header__sitename` }, siteName),
+        ' '));
+};
 exports.renderLayoutHomeLink = renderLayoutHomeLink;
 // ---------------------------------------------------------------------------
-const renderLegacyLayoutHomeLink = (bem, logoLink, siteName) => (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.getRvkLogoUrl)('reykjavik-logo.svg'), altText: "Reykjav\u00EDk" }),
-    ' ',
-    siteName,
-    ' '));
-exports.renderLegacyLayoutHomeLink = renderLegacyLayoutHomeLink;
-// ---------------------------------------------------------------------------
 const issueSiteNameWarningInDev = (props) => {
     if (process.env.NODE_ENV !== 'production') {
         if (!('siteName' in props)) {

package/esm/Datepicker.js

@@ -168,7 +168,7 @@ export const Datepicker = (props) => {
                     }, placeholderText: placeholder, 
                     // TODO: Implement this
                     // selectsRange
-                    minDate: minDateNormalized, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps))));
+                    minDate: minDateNormalized, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps, { autoComplete: "off" }))));
         } })));
 };
 export default Datepicker;

package/esm/Layout.d.ts

@@ -21,6 +21,10 @@ export type LayoutProps = {
     colorTheme?: HannaColorTheme;
     logoLink?: string;
     siteName?: string;
+    customLogo?: {
+        src: string;
+        altText: string;
+    };
     texts?: LayoutI18n;
     lang?: HannaLang;
     /** @deprecated Not used (Will be removed in v0.11) */

package/esm/Layout.js

@@ -11,16 +11,16 @@ export const defaultLayoutTexts = {
 };
 export const Layout = (props) => {
     useScrollbarWidthCSSVar();
-    const { globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName, logoLink = '/', wrapperProps, } = props;
+    const { globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName, logoLink = '/', customLogo, wrapperProps, } = props;
     issueSiteNameWarningInDev(props);
     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" },
-                renderLayoutHomeLink('Layout', logoLink, siteName),
+                renderLayoutHomeLink('Layout', logoLink, siteName, customLogo),
                 ' ',
-                navChildren && (React.createElement("a", { className: "Layout__header__navlink", href: "#pagenav", onClick: (e) => handleAnchorLinkClick(e, true), "aria-label": txt.skipLinkLabel }, txt.skipLinkLabel))),
+                navChildren && (React.createElement("a", { className: "Layout__header__navlink", href: "#pagenav", onClick: (e) => handleAnchorLinkClick(e, true), title: txt.skipLinkLabel }, txt.skipLinkLabel))),
             React.createElement("div", { className: "Layout__main", role: "main" }, mainChildren || children),
             navChildren && (React.createElement("div", { className: "Layout__nav", id: "pagenav", tabIndex: -1, role: "navigation" }, navChildren)),
             footerChildren && (React.createElement("div", { className: "Layout__footer", role: "complementary" }, footerChildren)))));

package/esm/_abstract/_Layouts.d.ts

@@ -1,5 +1,7 @@
-export declare const renderLayoutHomeLink: (bem: string, logoLink: string, siteName?: string) => JSX.Element;
-export declare const renderLegacyLayoutHomeLink: (bem: string, logoLink: string, siteName?: string) => JSX.Element;
+export declare const renderLayoutHomeLink: (bem: string, logoLink: string, siteName?: string, customLogo?: {
+    src: string;
+    altText: string;
+}) => JSX.Element;
 export declare const issueSiteNameWarningInDev: (props: {
     siteName?: string;
 }) => void;

package/esm/_abstract/_Layouts.js

@@ -1,21 +1,21 @@
 import React from 'react';
+import { modifiedClass } from '@reykjavik/hanna-utils';
 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 renderLegacyLayoutHomeLink = (bem, logoLink, siteName) => (React.createElement(Link, { className: "Layout__header__logo", href: logoLink },
-    ' ',
-    React.createElement(Image, { bem: undefined, inline: true, src: getRvkLogoUrl('reykjavik-logo.svg'), altText: "Reykjav\u00EDk" }),
-    ' ',
-    siteName,
-    ' '));
+export const renderLayoutHomeLink = (bem, logoLink, siteName, customLogo) => {
+    if (!siteName) {
+        customLogo = undefined;
+    }
+    return (React.createElement(Link, { className: `${bem}__header__homelink`, href: logoLink },
+        ' ',
+        React.createElement(Image, { bem: undefined, className: modifiedClass(`${bem}__header__logo`, customLogo && 'custom'), src: (customLogo === null || customLogo === void 0 ? void 0 : customLogo.src) ||
+                getRvkLogoUrl(siteName ? 'reykjavik-logo-notext.svg' : 'reykjavik-logo.svg'), altText: (customLogo === null || customLogo === void 0 ? void 0 : customLogo.altText) || 'Reykjavík', inline: true }),
+        ' ',
+        siteName && React.createElement("span", { className: `${bem}__header__sitename` }, siteName),
+        ' '));
+};
 // ---------------------------------------------------------------------------
 export const issueSiteNameWarningInDev = (props) => {
     if (process.env.NODE_ENV !== 'production') {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.151",
+	"version": "0.10.153",
 	"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.18",
-		"@reykjavik/hanna-utils": "^0.2.20",
+		"@reykjavik/hanna-utils": "^0.2.21",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^4.8.0",
 		"@types/react-transition-group": "^4.4.0",