@reykjavik/hanna-react 0.10.152 → 0.10.154

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/Layout.d.ts +4 -0
  3. package/Layout.js +3 -3
  4. package/_abstract/_Layouts.d.ts +5 -2
  5. package/_abstract/_Layouts.js +14 -15
  6. package/esm/Layout.d.ts +4 -0
  7. package/esm/Layout.js +3 -3
  8. package/esm/_abstract/_Layouts.d.ts +5 -2
  9. package/esm/_abstract/_Layouts.js +13 -13
  10. package/esm/utils/useGetSVGtext.js +3 -0
  11. package/package.json +3 -3
  12. package/utils/useGetSVGtext.js +3 -0
package/CHANGELOG.md CHANGED
@@ -4,6 +4,21 @@
4
4
 
5
5
  - ... <!-- Add new lines here. -->
6
6
 
7
+ ## 0.10.154
8
+
9
+ _2025-06-20_
10
+
11
+ - feat: Add optional `inline` prop to `LayoutProps.customLogo`
12
+ - fix: `ImageProps.inline` should not fail to replace with an empty result
13
+
14
+ ## 0.10.153
15
+
16
+ _2025-06-19_
17
+
18
+ - `Layout`:
19
+ - feat: Add prop `customLogo`
20
+ - fix: Change `__header__navlink`'s redundant `aria-label=` to `title=`
21
+
7
22
  ## 0.10.152
8
23
 
9
24
  _2025-05-23_
package/Layout.d.ts CHANGED
@@ -21,6 +21,10 @@ export type LayoutProps = {
21
21
  colorTheme?: HannaColorTheme;
22
22
  logoLink?: string;
23
23
  siteName?: string;
24
+ customLogo?: {
25
+ src: string;
26
+ altText: string;
27
+ };
24
28
  texts?: LayoutI18n;
25
29
  lang?: HannaLang;
26
30
  /** @deprecated Not used (Will be removed in v0.11) */
package/Layout.js CHANGED
@@ -15,16 +15,16 @@ exports.defaultLayoutTexts = {
15
15
  };
16
16
  const Layout = (props) => {
17
17
  (0, utils_js_1.useScrollbarWidthCSSVar)();
18
- const { globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName, logoLink = '/', wrapperProps, } = props;
18
+ const { globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName, logoLink = '/', customLogo, wrapperProps, } = props;
19
19
  (0, _Layouts_js_1.issueSiteNameWarningInDev)(props);
20
20
  const txt = (0, i18n_1.getTexts)(props, exports.defaultLayoutTexts);
21
21
  return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('Layout', props.modifier, (wrapperProps || {}).className), "data-color-theme": colorTheme }),
22
22
  globalAlerts && (react_1.default.createElement("div", { className: "Layout__alerts", role: "alert" }, globalAlerts)),
23
23
  react_1.default.createElement("div", { className: "Layout__content" },
24
24
  react_1.default.createElement("div", { className: "Layout__header", role: "banner" },
25
- (0, _Layouts_js_1.renderLayoutHomeLink)('Layout', logoLink, siteName),
25
+ (0, _Layouts_js_1.renderLayoutHomeLink)('Layout', logoLink, siteName, customLogo),
26
26
  ' ',
27
- 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))),
27
+ 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))),
28
28
  react_1.default.createElement("div", { className: "Layout__main", role: "main" }, mainChildren || children),
29
29
  navChildren && (react_1.default.createElement("div", { className: "Layout__nav", id: "pagenav", tabIndex: -1, role: "navigation" }, navChildren)),
30
30
  footerChildren && (react_1.default.createElement("div", { className: "Layout__footer", role: "complementary" }, footerChildren)))));
package/_abstract/_Layouts.d.ts CHANGED
@@ -1,5 +1,8 @@
1
- export declare const renderLayoutHomeLink: (bem: string, logoLink: string, siteName?: string) => JSX.Element;
2
- export declare const renderLegacyLayoutHomeLink: (bem: string, logoLink: string, siteName?: string) => JSX.Element;
1
+ export declare const renderLayoutHomeLink: (bem: string, logoLink: string, siteName?: string, customLogo?: {
2
+ src: string;
3
+ altText: string;
4
+ inline?: boolean;
5
+ }) => JSX.Element;
3
6
  export declare const issueSiteNameWarningInDev: (props: {
4
7
  siteName?: string;
5
8
  }) => void;
package/_abstract/_Layouts.js CHANGED
@@ -1,28 +1,27 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.issueSiteNameWarningInDev = exports.renderLegacyLayoutHomeLink = exports.renderLayoutHomeLink = void 0;
3
+ exports.issueSiteNameWarningInDev = exports.renderLayoutHomeLink = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const react_1 = tslib_1.__importDefault(require("react"));
6
+ const hanna_utils_1 = require("@reykjavik/hanna-utils");
6
7
  const assets_1 = require("@reykjavik/hanna-utils/assets");
7
8
  const _Image_js_1 = require("./_Image.js");
8
9
  const _Link_js_1 = require("./_Link.js");
9
10
  // ---------------------------------------------------------------------------
10
- const renderLayoutHomeLink = (bem, logoLink, siteName) => (react_1.default.createElement(_Link_js_1.Link, { className: `${bem}__header__homelink`, href: logoLink },
11
- ' ',
12
- 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 }),
13
- ' ',
14
- siteName && react_1.default.createElement("span", { className: `${bem}__header__sitename` }, siteName),
15
- ' '));
11
+ const renderLayoutHomeLink = (bem, logoLink, siteName, customLogo) => {
12
+ if (!siteName) {
13
+ customLogo = undefined;
14
+ }
15
+ return (react_1.default.createElement(_Link_js_1.Link, { className: `${bem}__header__homelink`, href: logoLink },
16
+ ' ',
17
+ 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) ||
18
+ (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: customLogo ? customLogo.inline : true }),
19
+ ' ',
20
+ siteName && react_1.default.createElement("span", { className: `${bem}__header__sitename` }, siteName),
21
+ ' '));
22
+ };
16
23
  exports.renderLayoutHomeLink = renderLayoutHomeLink;
17
24
  // ---------------------------------------------------------------------------
18
- const renderLegacyLayoutHomeLink = (bem, logoLink, siteName) => (react_1.default.createElement(_Link_js_1.Link, { className: "Layout__header__logo", href: logoLink },
19
- ' ',
20
- react_1.default.createElement(_Image_js_1.Image, { bem: undefined, inline: true, src: (0, assets_1.getRvkLogoUrl)('reykjavik-logo.svg'), altText: "Reykjav\u00EDk" }),
21
- ' ',
22
- siteName,
23
- ' '));
24
- exports.renderLegacyLayoutHomeLink = renderLegacyLayoutHomeLink;
25
- // ---------------------------------------------------------------------------
26
25
  const issueSiteNameWarningInDev = (props) => {
27
26
  if (process.env.NODE_ENV !== 'production') {
28
27
  if (!('siteName' in props)) {
package/esm/Layout.d.ts CHANGED
@@ -21,6 +21,10 @@ export type LayoutProps = {
21
21
  colorTheme?: HannaColorTheme;
22
22
  logoLink?: string;
23
23
  siteName?: string;
24
+ customLogo?: {
25
+ src: string;
26
+ altText: string;
27
+ };
24
28
  texts?: LayoutI18n;
25
29
  lang?: HannaLang;
26
30
  /** @deprecated Not used (Will be removed in v0.11) */
package/esm/Layout.js CHANGED
@@ -11,16 +11,16 @@ export const defaultLayoutTexts = {
11
11
  };
12
12
  export const Layout = (props) => {
13
13
  useScrollbarWidthCSSVar();
14
- const { globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName, logoLink = '/', wrapperProps, } = props;
14
+ const { globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName, logoLink = '/', customLogo, wrapperProps, } = props;
15
15
  issueSiteNameWarningInDev(props);
16
16
  const txt = getTexts(props, defaultLayoutTexts);
17
17
  return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('Layout', props.modifier, (wrapperProps || {}).className), "data-color-theme": colorTheme }),
18
18
  globalAlerts && (React.createElement("div", { className: "Layout__alerts", role: "alert" }, globalAlerts)),
19
19
  React.createElement("div", { className: "Layout__content" },
20
20
  React.createElement("div", { className: "Layout__header", role: "banner" },
21
- renderLayoutHomeLink('Layout', logoLink, siteName),
21
+ renderLayoutHomeLink('Layout', logoLink, siteName, customLogo),
22
22
  ' ',
23
- navChildren && (React.createElement("a", { className: "Layout__header__navlink", href: "#pagenav", onClick: (e) => handleAnchorLinkClick(e, true), "aria-label": txt.skipLinkLabel }, txt.skipLinkLabel))),
23
+ navChildren && (React.createElement("a", { className: "Layout__header__navlink", href: "#pagenav", onClick: (e) => handleAnchorLinkClick(e, true), title: txt.skipLinkLabel }, txt.skipLinkLabel))),
24
24
  React.createElement("div", { className: "Layout__main", role: "main" }, mainChildren || children),
25
25
  navChildren && (React.createElement("div", { className: "Layout__nav", id: "pagenav", tabIndex: -1, role: "navigation" }, navChildren)),
26
26
  footerChildren && (React.createElement("div", { className: "Layout__footer", role: "complementary" }, footerChildren)))));
package/esm/_abstract/_Layouts.d.ts CHANGED
@@ -1,5 +1,8 @@
1
- export declare const renderLayoutHomeLink: (bem: string, logoLink: string, siteName?: string) => JSX.Element;
2
- export declare const renderLegacyLayoutHomeLink: (bem: string, logoLink: string, siteName?: string) => JSX.Element;
1
+ export declare const renderLayoutHomeLink: (bem: string, logoLink: string, siteName?: string, customLogo?: {
2
+ src: string;
3
+ altText: string;
4
+ inline?: boolean;
5
+ }) => JSX.Element;
3
6
  export declare const issueSiteNameWarningInDev: (props: {
4
7
  siteName?: string;
5
8
  }) => void;
package/esm/_abstract/_Layouts.js CHANGED
@@ -1,21 +1,21 @@
1
1
  import React from 'react';
2
+ import { modifiedClass } from '@reykjavik/hanna-utils';
2
3
  import { getRvkLogoUrl } from '@reykjavik/hanna-utils/assets';
3
4
  import { Image } from './_Image.js';
4
5
  import { Link } from './_Link.js';
5
6
  // ---------------------------------------------------------------------------
6
- export const renderLayoutHomeLink = (bem, logoLink, siteName) => (React.createElement(Link, { className: `${bem}__header__homelink`, href: logoLink },
7
- ' ',
8
- React.createElement(Image, { bem: undefined, className: `${bem}__header__logo`, src: getRvkLogoUrl(siteName ? 'reykjavik-logo-notext.svg' : 'reykjavik-logo.svg'), altText: "Reykjav\u00EDk", inline: true }),
9
- ' ',
10
- siteName && React.createElement("span", { className: `${bem}__header__sitename` }, siteName),
11
- ' '));
12
- // ---------------------------------------------------------------------------
13
- export const renderLegacyLayoutHomeLink = (bem, logoLink, siteName) => (React.createElement(Link, { className: "Layout__header__logo", href: logoLink },
14
- ' ',
15
- React.createElement(Image, { bem: undefined, inline: true, src: getRvkLogoUrl('reykjavik-logo.svg'), altText: "Reykjav\u00EDk" }),
16
- ' ',
17
- siteName,
18
- ' '));
7
+ export const renderLayoutHomeLink = (bem, logoLink, siteName, customLogo) => {
8
+ if (!siteName) {
9
+ customLogo = undefined;
10
+ }
11
+ return (React.createElement(Link, { className: `${bem}__header__homelink`, href: logoLink },
12
+ ' ',
13
+ React.createElement(Image, { bem: undefined, className: modifiedClass(`${bem}__header__logo`, customLogo && 'custom'), src: (customLogo === null || customLogo === void 0 ? void 0 : customLogo.src) ||
14
+ getRvkLogoUrl(siteName ? 'reykjavik-logo-notext.svg' : 'reykjavik-logo.svg'), altText: (customLogo === null || customLogo === void 0 ? void 0 : customLogo.altText) || 'Reykjavík', inline: customLogo ? customLogo.inline : true }),
15
+ ' ',
16
+ siteName && React.createElement("span", { className: `${bem}__header__sitename` }, siteName),
17
+ ' '));
18
+ };
19
19
  // ---------------------------------------------------------------------------
20
20
  export const issueSiteNameWarningInDev = (props) => {
21
21
  if (process.env.NODE_ENV !== 'production') {
package/esm/utils/useGetSVGtext.js CHANGED
@@ -10,6 +10,9 @@ export const useGetSVGtext = (imageSrc, altText) => {
10
10
  useEffect(() => {
11
11
  if (imageSrc) {
12
12
  getSVGtext(imageSrc, altText).then((code) => {
13
+ if (!code) {
14
+ return;
15
+ }
13
16
  if (imageSrc === srcRef.current) {
14
17
  setInlineSvg({ imageSrc, code });
15
18
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reykjavik/hanna-react",
3
- "version": "0.10.152",
3
+ "version": "0.10.154",
4
4
  "author": "Reykjavík (http://www.reykjavik.is)",
5
5
  "contributors": [
6
6
  "Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -17,8 +17,8 @@
17
17
  "@floating-ui/react": "^0.19.2",
18
18
  "@hugsmidjan/qj": "^4.22.1",
19
19
  "@hugsmidjan/react": "^0.4.32",
20
- "@reykjavik/hanna-css": "^0.4.18",
21
- "@reykjavik/hanna-utils": "^0.2.20",
20
+ "@reykjavik/hanna-css": "^0.4.19",
21
+ "@reykjavik/hanna-utils": "^0.2.21",
22
22
  "@types/react-autosuggest": "^10.1.0",
23
23
  "@types/react-datepicker": "^4.8.0",
24
24
  "@types/react-transition-group": "^4.4.0",
package/utils/useGetSVGtext.js CHANGED
@@ -13,6 +13,9 @@ const useGetSVGtext = (imageSrc, altText) => {
13
13
  (0, react_1.useEffect)(() => {
14
14
  if (imageSrc) {
15
15
  (0, hanna_utils_1.getSVGtext)(imageSrc, altText).then((code) => {
16
+ if (!code) {
17
+ return;
18
+ }
16
19
  if (imageSrc === srcRef.current) {
17
20
  setInlineSvg({ imageSrc, code });
18
21
  }