@reykjavik/hanna-react 0.10.136 → 0.10.138

package/InfoBlock.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const InfoBlock = (props) => {
     const { title, subtitle, items, wrapperProps } = props;
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('InfoBlock', null, (wrapperProps || {}).className) }),
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('InfoBlock', null, (wrapperProps || {}).className) }),
         react_1.default.createElement("h2", { className: "InfoBlock__title" }, title),
         subtitle && react_1.default.createElement("div", { className: "InfoBlock__subtitle" }, subtitle),
         react_1.default.createElement("ul", { className: "InfoBlock__items" }, items.map((item, i) => (react_1.default.createElement("li", { key: i, className: "InfoBlock__item" }, item)))),

package/InfoHero.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoHero = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const _Blings_js_1 = require("./_abstract/_Blings.js");
 const _Image_js_1 = require("./_abstract/_Image.js");
 const breakOnNL_js_1 = require("./_abstract/breakOnNL.js");
@@ -74,7 +74,7 @@ const InfoHero = (props) => {
     const blings = typeof blingType === 'object'
         ? blingType
         : (blingType && blingOptions[blingType]) || blingOptions.waves; // default to `waves`
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('InfoHero', `align--${alignment}`, (wrapperProps || {}).className) }),
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('InfoHero', `align--${alignment}`, (wrapperProps || {}).className) }),
         react_1.default.createElement("div", { className: "InfoHero__content" },
             react_1.default.createElement("h1", { className: "InfoHero__title" }, title),
             titleBlurb && react_1.default.createElement("div", { className: "InfoHero__titleblurb" }, titleBlurb),

package/LabeledTextBlock.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LabeledTextBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const ButtonTertiary_js_1 = tslib_1.__importDefault(require("./ButtonTertiary.js"));
 const LabeledTextBlock = (props) => {
     const { label, summary, wide, buttons = [], wrapperProps } = props;
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('LabeledTextBlock', wide && 'wide', (wrapperProps || {}).className) }),
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('LabeledTextBlock', wide && 'wide', (wrapperProps || {}).className) }),
         react_1.default.createElement("h2", { className: "LabeledTextBlock__label" }, label),
         react_1.default.createElement("div", { className: "LabeledTextBlock__summary" },
             summary,

package/Layout.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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 hanna_utils_1 = require("@reykjavik/hanna-utils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Layouts_js_1 = require("./_abstract/_Layouts.js");
 const a11yHelpers_js_1 = require("./utils/a11yHelpers.js");
@@ -18,7 +18,7 @@ const Layout = (props) => {
     const { globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName, logoLink = '/', 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, classUtils_1.modifiedClass)('Layout', props.modifier, (wrapperProps || {}).className), "data-color-theme": colorTheme }),
+    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" },

package/MainMenu/_Auxiliary.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AuxiliaryPanel = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const assets_1 = require("@reykjavik/hanna-utils/assets");
 const _Link_js_1 = require("../_abstract/_Link.js");
 const AuxiliaryPanel = (props) => {
@@ -13,6 +13,6 @@ const AuxiliaryPanel = (props) => {
             ? { '--menu-auxiliary-image': `url(${imageUrl})` }
             : undefined },
         react_1.default.createElement("h3", { className: "AuxiliaryPanel__title" }, title),
-        react_1.default.createElement("ul", { className: "AuxiliaryPanel__items" }, items.map((item, i) => (react_1.default.createElement("li", { key: i, className: (0, classUtils_1.modifiedClass)('AuxiliaryPanel__item', item.modifier), "aria-current": item.current || undefined }, item.Content ? (react_1.default.createElement(item.Content, null)) : (react_1.default.createElement(_Link_js_1.Link, { className: "AuxiliaryPanel__link", href: item.href, target: item.target, lang: item.lang }, item.label))))))));
+        react_1.default.createElement("ul", { className: "AuxiliaryPanel__items" }, items.map((item, i) => (react_1.default.createElement("li", { key: i, className: (0, hanna_utils_1.modifiedClass)('AuxiliaryPanel__item', item.modifier), "aria-current": item.current || undefined }, item.Content ? (react_1.default.createElement(item.Content, null)) : (react_1.default.createElement(_Link_js_1.Link, { className: "AuxiliaryPanel__link", href: item.href, target: item.target, lang: item.lang }, item.label))))))));
 };
 exports.AuxiliaryPanel = AuxiliaryPanel;

package/MainMenu/_PrimaryPanel.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PrimaryPanel = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const _Link_js_1 = require("../_abstract/_Link.js");
 const PrimaryPanel = (props) => {
     const { setActivePanel, panel, isParent, isActive, isBrowser, texts } = props;
     const { items } = panel;
-    return (react_1.default.createElement("li", { ref: isActive ? props.activeRef : undefined, className: (0, classUtils_1.modifiedClass)('PrimaryPanel', [
+    return (react_1.default.createElement("li", { ref: isActive ? props.activeRef : undefined, className: (0, hanna_utils_1.modifiedClass)('PrimaryPanel', [
             isParent && 'parent',
             isActive && 'active',
             items.length > 5 && 'twocol', // TODO: allow setting twocol manually?
@@ -16,7 +16,7 @@ const PrimaryPanel = (props) => {
         react_1.default.createElement("h3", { className: "PrimaryPanel__title" },
             ' ',
             isBrowser && !isActive ? (react_1.default.createElement("button", { className: "MainMenu__mega__title-toggler", "aria-controls": panel.id, onClick: () => setActivePanel(panel, false), "aria-pressed": isActive, type: "button" }, panel.title)) : (panel.title)),
-        react_1.default.createElement("ul", { className: "PrimaryPanel__items" }, items.map((item, i) => (react_1.default.createElement("li", { key: i, className: (0, classUtils_1.modifiedClass)('PrimaryPanel__item', item.modifier), "aria-current": item.current || undefined }, item.Content ? (react_1.default.createElement(item.Content, null)) : (react_1.default.createElement(_Link_js_1.Link, { className: "PrimaryPanel__link", href: item.href, target: item.target, lang: item.lang, hrefLang: item.hrefLang },
+        react_1.default.createElement("ul", { className: "PrimaryPanel__items" }, items.map((item, i) => (react_1.default.createElement("li", { key: i, className: (0, hanna_utils_1.modifiedClass)('PrimaryPanel__item', item.modifier), "aria-current": item.current || undefined }, item.Content ? (react_1.default.createElement(item.Content, null)) : (react_1.default.createElement(_Link_js_1.Link, { className: "PrimaryPanel__link", href: item.href, target: item.target, lang: item.lang, hrefLang: item.hrefLang },
             react_1.default.createElement("span", { className: "PrimaryPanel__linkTitle" }, item.label),
             ' ',
             react_1.default.createElement("small", { className: "PrimaryPanel__summary" }, item.summary),

package/MainMenu.d.ts

@@ -1,6 +1,5 @@
 import React, { ReactElement } from 'react';
-import { Modifiers } from '@hugsmidjan/qj/classUtils';
-import { Cleanup, EitherObj } from '@reykjavik/hanna-utils';
+import { ClassNameModifiers, Cleanup, EitherObj } from '@reykjavik/hanna-utils';
 import { AuxilaryPanelIllustration, AuxiliaryPanelProps } from './MainMenu/_Auxiliary.js';
 import { MegaMenuItem, MegaMenuItemList, MegaMenuPanel, PrimaryPanelI18n } from './MainMenu/_PrimaryPanel.js';
 import { I18NProps } from './utils/types.js';
@@ -45,7 +44,7 @@ export type MainMenuItem = {
     /**
      * Puts a modifier className for the menu __item <li/> element.
      * */
-    modifier?: Modifiers;
+    modifier?: ClassNameModifiers;
     /** Signifies if the menu item is part of the page's breadcrumb trail */
     current?: boolean;
     /**

package/MainMenu.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MainMenu = exports._MainMenu = exports.defaultMainMenuTexts = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const focusElm_1 = require("@hugsmidjan/qj/focusElm");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Link_js_1 = require("./_abstract/_Link.js");
 const _Auxiliary_js_1 = require("./MainMenu/_Auxiliary.js");
@@ -193,7 +193,7 @@ const _MainMenu = (props) => {
             closeHamburgerMenu();
         }
     };
-    return (react_1.default.createElement("nav", Object.assign({}, props.wrapperProps, { className: (0, classUtils_1.modifiedClass)('MainMenu', null, wrapperProps.className), "aria-label": title, "data-sprinkled": isBrowser, ref: menuElmRef }),
+    return (react_1.default.createElement("nav", Object.assign({}, props.wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('MainMenu', null, wrapperProps.className), "aria-label": title, "data-sprinkled": isBrowser, ref: menuElmRef }),
         react_1.default.createElement("h2", { className: "MainMenu__title" }, title),
         react_1.default.createElement("ul", { className: "MainMenu__items" }, menuItems.map((item, i) => {
             if (item === '---') {
@@ -206,7 +206,7 @@ const _MainMenu = (props) => {
             }
             const { label, labelLong, lang, controlsId, onClick } = item;
             const pressed = (activePanel && controlsId === activePanel.id) || undefined;
-            return (react_1.default.createElement("li", { key: i, className: (0, classUtils_1.modifiedClass)('MainMenu__item', item.modifier), "aria-current": item.current || undefined }, isBrowser && !!(item.megaPanel || onClick) ? (
+            return (react_1.default.createElement("li", { key: i, className: (0, hanna_utils_1.modifiedClass)('MainMenu__item', item.modifier), "aria-current": item.current || undefined }, isBrowser && !!(item.megaPanel || onClick) ? (
             // only print script-driven buttons in the browser
             react_1.default.createElement("button", { className: "MainMenu__link", onClick: () => {
                     const keepOpen1 = onClick && onClick(i, item) === false;
@@ -227,7 +227,7 @@ const _MainMenu = (props) => {
             ));
         })),
         '\n\n',
-        megaPanels.length > 0 && (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('MainMenu__panelsWrap', [activePanel && 'active']) },
+        megaPanels.length > 0 && (react_1.default.createElement("div", { className: (0, hanna_utils_1.modifiedClass)('MainMenu__panelsWrap', [activePanel && 'active']) },
             react_1.default.createElement("ul", { className: "MainMenu__panels", onClick: handleMegaPanelClicks },
                 megaPanels.map((panel, i) => {
                     if (!panel.items.length) {

package/MainMenu2.d.ts

@@ -1,6 +1,5 @@
 import React, { ReactElement } from 'react';
-import { Modifiers } from '@hugsmidjan/qj/classUtils';
-import { Cleanup, EitherObj } from '@reykjavik/hanna-utils';
+import { ClassNameModifiers, Cleanup, EitherObj } from '@reykjavik/hanna-utils';
 import { Illustration } from '@reykjavik/hanna-utils/assets';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
 import { I18NProps } from './utils/types.js';
@@ -26,7 +25,7 @@ export type MainMenu2Item = {
     /**
      * Puts a modifier className for the menu __item <li/> element.
      * */
-    modifier?: Modifiers;
+    modifier?: ClassNameModifiers;
     /** Signifies if the menu item is part of the page's breadcrumb trail */
     current?: boolean;
     /**

package/MainMenu2.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MainMenu2 = exports.defaultMainMenu2Texts = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const assets_1 = require("@reykjavik/hanna-utils/assets");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Link_js_1 = require("./_abstract/_Link.js");
@@ -89,7 +89,7 @@ const getRenderers = (props) => {
                 size: 'small',
             }
             : undefined;
-        return (react_1.default.createElement(Tag, { key: key, className: (0, classUtils_1.modifiedClass)(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, isBrowser && (onClick || href == null) ? (react_1.default.createElement(ButtonTag, Object.assign({}, commonProps, { type: "button", "aria-controls": controlsId, onClick: () => {
+        return (react_1.default.createElement(Tag, { key: key, className: (0, hanna_utils_1.modifiedClass)(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, isBrowser && (onClick || href == null) ? (react_1.default.createElement(ButtonTag, Object.assign({}, commonProps, { type: "button", "aria-controls": controlsId, onClick: () => {
                 const keepOpen1 = onClick && onClick(item) === false;
                 const keepOpen2 = onItemClick && onItemClick(item) === false;
                 !(keepOpen1 || keepOpen2) && closeMenu();
@@ -195,7 +195,7 @@ const MainMenu2 = (props) => {
         : homeLink)), { modifier: 'home' });
     const menuImageUrl = imageUrl || (illustration && (0, assets_1.getIllustrationUrl)(illustration));
     const menuId = `${domid}-menu`;
-    return (react_1.default.createElement("nav", Object.assign({}, props.wrapperProps, { className: (0, classUtils_1.modifiedClass)('MainMenu2', [
+    return (react_1.default.createElement("nav", Object.assign({}, props.wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('MainMenu2', [
             isBrowser && (isMenuOpen ? 'open' : 'closed'),
             variant && variant !== 'default' ? `variant--${variant}` : undefined,
         ], wrapperProps.className), style: menuImageUrl
@@ -217,7 +217,7 @@ const MainMenu2 = (props) => {
                     title: txt.openMenuLong,
                     children: txt.openMenu,
                 })))) : (react_1.default.createElement(ButtonPrimary_js_1.default, { className: "MainMenu2__toggler", size: "small", href: `#${menuId}`, onClick: a11yHelpers_js_1.handleAnchorLinkClick, "aria-hidden": "true" }, txt.title)),
-            mainItems && (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('MainMenu2__main', activeSubmenu < 0 && 'noneActive') },
+            mainItems && (react_1.default.createElement("div", { className: (0, hanna_utils_1.modifiedClass)('MainMenu2__main', activeSubmenu < 0 && 'noneActive') },
                 renderItem('MainMenu2__main__', homeLinkItem, { Tag: 'div' }),
                 mainItems.map((mainItem, i) => {
                     if ('title' in mainItem) {

package/MiniMetrics.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MiniMetrics = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const _Button_js_1 = require("./_abstract/_Button.js");
 const MiniMetrics = (props) => {
     const { text, moreButton, wrapperProps } = props;
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('MiniMetrics', null, (wrapperProps || {}).className) }),
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('MiniMetrics', null, (wrapperProps || {}).className) }),
         react_1.default.createElement("strong", { className: "MiniMetrics__text" }, text),
         " ",
         '\n',

package/Multiselect.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Multiselect = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const domid_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/domid"));
 const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
@@ -200,9 +199,9 @@ const Multiselect = (props) => {
             block: 'nearest',
         });
     }, [activeItemIndex]);
-    return (react_1.default.createElement(FormField_js_1.default, Object.assign({ extraClassName: (0, classUtils_1.modifiedClass)('Multiselect', props.nowrap && 'nowrap'), group: "inputlike", filled: filled, empty: empty }, (0, FormField_js_1.getFormFieldWrapperProps)(props), { renderInput: (className, inputProps, addFocusProps, isBrowser) => {
+    return (react_1.default.createElement(FormField_js_1.default, Object.assign({ extraClassName: (0, hanna_utils_1.modifiedClass)('Multiselect', props.nowrap && 'nowrap'), group: "inputlike", filled: filled, empty: empty }, (0, FormField_js_1.getFormFieldWrapperProps)(props), { renderInput: (className, inputProps, addFocusProps, isBrowser) => {
             const { id } = inputProps;
-            return (react_1.default.createElement("div", Object.assign({ className: (0, classUtils_1.modifiedClass)('Multiselect__input', [isOpen && 'open'], className.input) }, addFocusProps(), { "data-sprinkled": isBrowser, ref: inputWrapperRef }),
+            return (react_1.default.createElement("div", Object.assign({ className: (0, hanna_utils_1.modifiedClass)('Multiselect__input', [isOpen && 'open'], className.input) }, addFocusProps(), { "data-sprinkled": isBrowser, ref: inputWrapperRef }),
                 !isBrowser ? null : isSearchable ? (react_1.default.createElement("input", { className: "Multiselect__search", id: `toggler:${id}`, "aria-label": texts.search, "aria-controls": (0, domid_1.default)(), "data-expanded": isOpen || undefined, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onClick: () => toggleOpen(), value: searchQuery, 
                     // onFocus={handleInputFocus}
                     placeholder: placeholderText, disabled: disabled, ref: inputRef })) : (react_1.default.createElement("button", { className: "Multiselect__toggler", id: `toggler:${id}`, type: "button", "aria-label": texts.buttonShow, "aria-controls": (0, domid_1.default)(), "aria-expanded": isOpen, onClick: () => toggleOpen(), disabled: disabled, 
@@ -239,11 +238,11 @@ const Multiselect = (props) => {
                             const insertGroupSeparator = !isFiltered &&
                                 item.group !== (filteredOptions[idx - 1] || {}).group &&
                                 (idx > 0 || !!item.group);
-                            const checkbox = (react_1.default.createElement(Checkbox_js_1.default, Object.assign({ key: idx, className: (0, classUtils_1.modifiedClass)('Multiselect__option', activeItemIndex === idx && 'focused'), reqText: false, disabled: isDisabled, readOnly: readOnly, required: props.required, Wrapper: "li", name: name }, item, { checked: isChecked, "aria-invalid": props.invalid, label: item.label || item.value, onChange: () => handleCheckboxSelection(item), onFocus: () => setActiveItemIndex(idx), wrapperProps: {
+                            const checkbox = (react_1.default.createElement(Checkbox_js_1.default, Object.assign({ key: idx, className: (0, hanna_utils_1.modifiedClass)('Multiselect__option', activeItemIndex === idx && 'focused'), reqText: false, disabled: isDisabled, readOnly: readOnly, required: props.required, Wrapper: "li", name: name }, item, { checked: isChecked, "aria-invalid": props.invalid, label: item.label || item.value, onChange: () => handleCheckboxSelection(item), onFocus: () => setActiveItemIndex(idx), wrapperProps: {
                                     onMouseEnter: () => setActiveItemIndex(idx),
                                 } })));
                             return insertGroupSeparator ? (react_1.default.createElement(react_1.Fragment, { key: idx },
-                                react_1.default.createElement("li", { className: (0, classUtils_1.modifiedClass)('Multiselect__optionSeparator', !item.group && 'empty'), "aria-label": item.group ? undefined : '—' }, item.group || false),
+                                react_1.default.createElement("li", { className: (0, hanna_utils_1.modifiedClass)('Multiselect__optionSeparator', !item.group && 'empty'), "aria-label": item.group ? undefined : '—' }, item.group || false),
                                 checkbox)) : (checkbox);
                         })) : searchQuery ? (react_1.default.createElement("li", { className: "Multiselect__noresults" }, texts.noneFoundMsg)) : undefined,
                         isBrowser && react_1.default.createElement(FocusTrap_js_1.FocusTrap, { Tag: "li" })))));

package/NameCard.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NameCard = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Button_js_1 = require("./_abstract/_Button.js");
 const breakOnNL_js_1 = require("./_abstract/breakOnNL.js");
@@ -56,7 +56,7 @@ const NameCard = (props) => {
         const texts = (0, i18n_1.getTexts)(props, defaultTexts);
         const { updatedLabel, availableLabel, unavailableLabel } = texts;
         return (react_1.default.createElement("div", { className: "NameCard__meta" },
-            available != null && (react_1.default.createElement("span", { className: (0, classUtils_1.modifiedClass)('NameCard__availability', available && 'available') },
+            available != null && (react_1.default.createElement("span", { className: (0, hanna_utils_1.modifiedClass)('NameCard__availability', available && 'available') },
                 available
                     ? availableLabel || texts.vacancyLabel // eslint-disable-line deprecation/deprecation
                     : unavailableLabel || texts.noVacancyLabel // eslint-disable-line deprecation/deprecation
@@ -84,7 +84,7 @@ const NameCard = (props) => {
         }
         return item;
     });
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('NameCard', null, (wrapperProps || {}).className) }),
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('NameCard', null, (wrapperProps || {}).className) }),
         react_1.default.createElement("div", { className: "NameCard__name" }, name),
         contactInfo.length > 0 && (react_1.default.createElement("p", { className: "NameCard__contactinfo" }, cleanContactInfo.map((item, i) => (react_1.default.createElement(react_1.default.Fragment, null,
             typeof item === 'string' ? (react_1.default.createElement("span", { className: "NameCard__contactinfo__item" }, item)) : (react_1.default.createElement(_Button_js_1.Button, { key: i, bem: "NameCard__contactinfo__item", href: item.href, "aria-label": item.longLabel, title: item.longLabel }, item.label)),

package/NameCards.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NameCards = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const NameCard_js_1 = tslib_1.__importDefault(require("./NameCard.js"));
 const NameCards = (props) => {
     const { items, wrapperProps } = props;
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('NameCards', null, (wrapperProps || {}).className) }), items.map((item, i) => (react_1.default.createElement(NameCard_js_1.default, Object.assign({ key: i }, item))))));
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('NameCards', null, (wrapperProps || {}).className) }), items.map((item, i) => (react_1.default.createElement(NameCard_js_1.default, Object.assign({ key: i }, item))))));
 };
 exports.NameCards = NameCards;
 exports.default = exports.NameCards;

package/NewsHero.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NewsHero = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const _Blings_js_1 = require("./_abstract/_Blings.js");
 const _Image_js_1 = require("./_abstract/_Image.js");
@@ -80,7 +79,7 @@ const NewsHero = (props) => {
         ? blingType
         : (blingType && blingOptions[blingType]) ||
             (0, hanna_utils_1.getStableRandomItem)(blingOptions, title);
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('NewsHero', [!image && 'align--right'], (wrapperProps || {}).className) }),
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('NewsHero', [!image && 'align--right'], (wrapperProps || {}).className) }),
         react_1.default.createElement("div", { className: "NewsHero__content" },
             react_1.default.createElement("h1", { className: "NewsHero__title" }, title),
             meta && react_1.default.createElement("span", { className: "NewsHero__meta" }, meta),

package/PageFilter.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageFilter = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const Footnote_js_1 = tslib_1.__importDefault(require("./Footnote.js"));
 const PageFilter = (props) => {
     const { title, summary, footnote, filters, children, buttonRow, underlap, wrapperProps, } = props;
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('PageFilter', underlap && 'underlap', (wrapperProps || {}).className) }),
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('PageFilter', underlap && 'underlap', (wrapperProps || {}).className) }),
         react_1.default.createElement("h2", { className: "PageFilter__title" }, title),
         summary && react_1.default.createElement("div", { className: "PageFilter__summary" }, summary),
         react_1.default.createElement("div", { className: "PageFilter__filters" }, filters || children),

package/PageHeading.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageHeading = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const PageHeading = (props) => {
     const { Tag = 'h1', align, small, children, wrapperProps } = props;
-    return (react_1.default.createElement(Tag, Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('PageHeading', [small && 'small', align === 'right' && `align--${align}`], (wrapperProps || {}).className) }), children));
+    return (react_1.default.createElement(Tag, Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('PageHeading', [small && 'small', align === 'right' && `align--${align}`], (wrapperProps || {}).className) }), children));
 };
 exports.PageHeading = PageHeading;
 exports.default = exports.PageHeading;

package/Pagination.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pagination = exports.defaultPaginationTexts = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Link_js_1 = require("./_abstract/_Link.js");
 const Pagination_privates_js_1 = require("./utils/Pagination.privates.js");
@@ -14,7 +14,7 @@ const PaginationButton = (props) => {
     const labelShort = label ? label.replace(/\$\{page\}/, `${page}`) : `${page}`;
     const btnProps = {
         key: props.key,
-        className: (0, classUtils_1.modifiedClass)('Pagination__button', modifier),
+        className: (0, hanna_utils_1.modifiedClass)('Pagination__button', modifier),
         title: labelLong,
         'aria-label': labelLong !== labelShort ? labelLong : undefined,
         children: labelShort,
@@ -74,7 +74,7 @@ exports.Pagination = (0, react_1.memo)((props) => {
     const pageList = (0, Pagination_privates_js_1.generatePageList)(current, pageCount);
     const texts = (0, i18n_1.getTexts)(props, exports.defaultPaginationTexts);
     const btn = getBtnRenderer(props);
-    return (react_1.default.createElement("nav", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('Pagination', null, (wrapperProps || {}).className), "aria-label": props.title || texts.defaultTitle.replace(/\$\{pageCount\}/, `${pageCount}`) }),
+    return (react_1.default.createElement("nav", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('Pagination', null, (wrapperProps || {}).className), "aria-label": props.title || texts.defaultTitle.replace(/\$\{pageCount\}/, `${pageCount}`) }),
         btn({
             page: current + 1,
             modifier: 'next',
@@ -93,7 +93,7 @@ exports.Pagination = (0, react_1.memo)((props) => {
         ' ',
         pageList
             .map((page, i) => {
-            return page === '…' ? (react_1.default.createElement("span", { className: "Pagination__ellipsis" }, "\u2026")) : (btn({
+            return page === '…' ? (react_1.default.createElement("span", { className: "Pagination__ellipsis", key: i }, "\u2026")) : (btn({
                 key: i,
                 page,
                 labelLong: texts.pageLabelLong,

package/ProcessOverview.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProcessOverview = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const ProcessOverview = (props) => {
     const { title, items, attention, transparent, narrow, wrapperProps } = props;
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('ProcessOverview', [transparent && 'transparent', narrow && 'narrow'], (wrapperProps || {}).className) }),
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('ProcessOverview', [transparent && 'transparent', narrow && 'narrow'], (wrapperProps || {}).className) }),
         react_1.default.createElement("h2", { className: "ProcessOverview__title" }, title),
         items.map(({ title, content }, i) => {
             return (react_1.default.createElement("div", { key: i, className: "ProcessOverview__item" },

package/README.md

@@ -1,4 +1,4 @@
-# @reykjavik/hanna-react
+# @reykjavik/hanna-react <!-- omit from toc -->
 
 The official React components for Hanna – Reykjavík's design-system
 

package/ReadSpeakerPlayer.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.stopReading = exports.ReadSpeakerPlayer = exports.defaultReadSpeakerPlayerTexts = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const scriptTagId = 'rs_req_Init';
 const scriptTagSelector = `script#${scriptTagId}`;
@@ -62,7 +62,7 @@ const ReadSpeakerPlayer = (props) => {
     // or multiple different `customerId`s on the same page.
     // If you try that, things will be weird and wonky.
     ]);
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('ReadSpeakerPlayer', [align === 'right' && `align-${align}`, float && 'float'], (wrapperProps || {}).className) }),
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('ReadSpeakerPlayer', [align === 'right' && `align-${align}`, float && 'float'], (wrapperProps || {}).className) }),
         react_1.default.createElement("div", { id: "readspeaker_button1", className: "rs_skip rsbtn rs_preserve" },
             react_1.default.createElement("a", { rel: "nofollow", className: "rsbtn_play", accessKey: "L", title: linkLabel || linkText, href: `https://app-eu.readspeaker.com/cgi-bin/rsent?${new URLSearchParams({
                     customerid: customerId,

package/RelatedLinks.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RelatedLinks = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const _Link_js_1 = require("./_abstract/_Link.js");
 const types = {
     external: 1,
@@ -17,7 +17,7 @@ const RelatedLinks = (props) => {
         return null;
     }
     const TitleTag = props.titleTag || 'h3';
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('RelatedLinks', null, (wrapperProps || {}).className) }),
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('RelatedLinks', null, (wrapperProps || {}).className) }),
         title && react_1.default.createElement(TitleTag, { className: "RelatedLinks__title" }, title),
         react_1.default.createElement("ul", { className: "RelatedLinks__list" }, links.map(({ href, label, type, target }, i) => {
             type = type && types[type] ? type : undefined;

package/RowBlock.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RowBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const RowBlock = (props) => {
     const { right, modifier, className, children, wrapperProps } = props;
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('RowBlock', [modifier, right && 'align--right'], className || (wrapperProps || {}).className) }), children));
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('RowBlock', [modifier, right && 'align--right'], className || (wrapperProps || {}).className) }), children));
 };
 exports.RowBlock = RowBlock;
 exports.default = exports.RowBlock;

package/RowBlockColumn.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RowBlockColumn = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const RowBlockColumn = (props) => {
     const { background, narrow, children, wrapperProps } = props;
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('RowBlockColumn', [
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('RowBlockColumn', [
             narrow && 'narrow',
             background && 'background',
             background === 'primary' && 'background--primary',

package/SearchResults.js

@@ -4,9 +4,9 @@ exports.SearchResults = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_intersection_observer_1 = require("react-intersection-observer");
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const prettyNum_1 = require("@hugsmidjan/qj/prettyNum");
 const range_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/range"));
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _SearchResultsItem_js_1 = require("./SearchResults/_SearchResultsItem.js");
 const useDomid_js_1 = require("./utils/useDomid.js");
@@ -107,7 +107,7 @@ const SearchResults = (props) => {
     const { filters, activeFilterIdx, setFilter, status, errorText, wrapperProps } = props;
     const texts = (0, i18n_1.getTexts)(props, defaultTexts);
     const domid = (0, useDomid_js_1.useDomid)();
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('SearchResults', status !== 'results' && status, (wrapperProps || {}).className) }),
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('SearchResults', status !== 'results' && status, (wrapperProps || {}).className) }),
         renderTitle(props, texts),
         react_1.default.createElement(SearchResults_Tabs, { domid: domid, filters: filters, activeIdx: activeFilterIdx, setFilter: setFilter, lang: texts.lang }),
         react_1.default.createElement("div", { className: "SearchResults__results", id: domid },

package/ShareButtons.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShareButtons = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const shareButtonsUtils_1 = require("@reykjavik/hanna-utils/shareButtonsUtils");
 const _Link_js_1 = require("./_abstract/_Link.js");
@@ -44,7 +44,7 @@ const ShareButtons = (props) => {
         (docMeta && shareButtonsUtils_1.shareButtonTexts[docMeta.lang]) ||
         shareButtonsUtils_1.shareButtonTexts[i18n_1.DEFAULT_LANG];
     const { label, buttonLabel, emailSubject } = txt;
-    const className = (0, classUtils_1.modifiedClass)('ShareButtons', null, (wrapperProps || {}).className);
+    const className = (0, hanna_utils_1.modifiedClass)('ShareButtons', null, (wrapperProps || {}).className);
     if (!docMeta || ssr === 'ssr-only') {
         // Generate SSR markup for hanna-sprinkles to pick up on.
         return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: className, "data-button-types": generateTypeList(facebook, twitter, linkedin, email), "data-label": label, "data-buttonlabel": buttonLabel, "data-emailsubject": emailSubject || undefined })));

package/Sharpie.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sharpie = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const colors = {
     green: 1,
     red: 1,
@@ -21,7 +21,7 @@ const Sharpie = (props) => {
     const { color, tag, children, wrapperProps } = props;
     const colorModifier = colors[color] ? color : 'green';
     const Tag = tag && tags[tag] ? tag : 'span';
-    return (react_1.default.createElement(Tag, Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('Sharpie', colorModifier, (wrapperProps || {}).className) }), children));
+    return (react_1.default.createElement(Tag, Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('Sharpie', colorModifier, (wrapperProps || {}).className) }), children));
 };
 exports.Sharpie = Sharpie;
 exports.default = exports.Sharpie;

package/SiteSearchCurtain.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SiteSearchCurtain = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const env_js_1 = require("./utils/env.js");
 const useLaggedState_js_1 = require("./utils/useLaggedState.js");
 // NOTE: This component is too low-level (and too esoteric and rarely used)
@@ -29,7 +29,7 @@ const SiteSearchCurtain = (props) => {
             setFocused(false, 100);
         }
     };
-    return (react_1.default.createElement("div", Object.assign({ className: (0, classUtils_1.modifiedClass)('SiteSearchCurtain', [focused && 'focused']), onFocus: focusHandler, onBlur: blurHandler }, (env_js_1.isPreact && { onfocusin: focusHandler, onfocusout: blurHandler })), props.children));
+    return (react_1.default.createElement("div", Object.assign({ className: (0, hanna_utils_1.modifiedClass)('SiteSearchCurtain', [focused && 'focused']), onFocus: focusHandler, onBlur: blurHandler }, (env_js_1.isPreact && { onfocusin: focusHandler, onfocusout: blurHandler })), props.children));
 };
 exports.SiteSearchCurtain = SiteSearchCurtain;
 exports.default = exports.SiteSearchCurtain;

package/Skeleton.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Skeleton = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const range_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/range"));
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 /**
   Rounds the input number, caps it at max. If it's below min, returns undefined
 */
@@ -24,7 +24,7 @@ const Skeleton = (props) => {
     const gap = minmax(props.gap, 5, 1);
     const items = minmax(props.items, 20, 2) || 1;
     const { wrapperProps } = props;
-    const className = (0, classUtils_1.modifiedClass)('Skeleton', [props.text && 'text', height && `height--${height}`, gap && `gap--${gap}`], (wrapperProps || {}).className);
+    const className = (0, hanna_utils_1.modifiedClass)('Skeleton', [props.text && 'text', height && `height--${height}`, gap && `gap--${gap}`], (wrapperProps || {}).className);
     if (items) {
         return (react_1.default.createElement(react_1.default.Fragment, null, (0, range_1.default)(1, items).map((key) => (react_1.default.createElement("span", { key: key, className: className })))));
     }