@reykjavik/hanna-react 0.10.56 → 0.10.59

package/GridBlocks.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const assets_1 = require("@reykjavik/hanna-utils/assets");
+const _Image_1 = __importDefault(require("./_abstract/_Image"));
+const _Link_1 = require("./_abstract/_Link");
+const seenEffect_1 = require("./utils/seenEffect");
+const ButtonTertiary_1 = __importDefault(require("./ButtonTertiary"));
+const GridBlocks = (props) => {
+    const { blocks, twocol, startSeen } = props;
+    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('GridBlocks', [twocol && 'twocol']), ref: ref }, blocks.map(({ title, summary, href, links = [], icon, image }, i) => {
+        const imageProps = icon ? { src: (0, assets_1.getEfnistaknUrl)(icon) } : image;
+        return (react_1.default.createElement("div", { key: i, className: "GridBlocks__item" },
+            imageProps && react_1.default.createElement(_Image_1.default, Object.assign({ className: "GridBlocks__illustration" }, imageProps)),
+            react_1.default.createElement("div", { className: "GridBlocks__textwrap" },
+                react_1.default.createElement("h3", { className: "GridBlocks__item__title" }, href != null ? (react_1.default.createElement(_Link_1.Link, { className: "GridBlocks__item__titlelink", href: href }, title)) : (title)),
+                react_1.default.createElement("div", { className: "GridBlocks__item__summary" }, summary),
+                react_1.default.createElement("ul", { className: "GridBlocks__links" }, links.map((link, i) => {
+                    return (react_1.default.createElement("li", { key: i, className: "GridBlocks__link" },
+                        react_1.default.createElement(ButtonTertiary_1.default, Object.assign({}, link))));
+                })))));
+    })));
+};
+exports.default = GridBlocks;

package/Heading.d.ts

@@ -3,7 +3,7 @@ import { ComponentLayoutProps } from './constants';
 declare const sizes: {
     readonly small: "small";
     /** Default value */
-    readonly normal: "normal";
+    readonly normal: "";
     readonly large: "large";
 };
 declare type HeadingSize = keyof typeof sizes;

package/{Heading.jsx → Heading.js}

@@ -8,17 +8,15 @@ const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemCla
 const sizes = {
     small: 'small',
     /** Default value */
-    normal: 'normal',
+    normal: '',
     large: 'large',
 };
 const Heading = (props) => {
     const { size = 'normal', Tag = 'h2', align, wide, children } = props;
-    return (<Tag className={(0, getBemClass_1.default)('Heading', [
+    return (react_1.default.createElement(Tag, { className: (0, getBemClass_1.default)('Heading', [
             sizes[size],
             align === 'right' && 'align--' + align,
             !align && wide && 'wide',
-        ])}>
-      {children}
-    </Tag>);
+        ]) }, children));
 };
 exports.default = Heading;

package/HeroBlock.d.ts

@@ -1,6 +1,6 @@
 import { Illustration } from '@reykjavik/hanna-utils/assets';
-import { ButtonProps } from './_abstract/Button';
-import { ImageProps } from './_abstract/Image';
+import { ButtonProps } from './_abstract/_Button';
+import { ImageProps } from './_abstract/_Image';
 import { SeenProp } from './utils/seenEffect';
 declare type HeroBlockImageProps = {
     illustration: Illustration;

package/{HeroBlock.jsx → HeroBlock.js}

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const assets_1 = require("@reykjavik/hanna-utils/assets");
-const Image_1 = __importDefault(require("./_abstract/Image"));
+const _Image_1 = __importDefault(require("./_abstract/_Image"));
 const seenEffect_1 = require("./utils/seenEffect");
 const ButtonPrimary_1 = __importDefault(require("./ButtonPrimary"));
 const ButtonTertiary_1 = __importDefault(require("./ButtonTertiary"));
@@ -14,14 +14,13 @@ const HeroBlock = (props) => {
     const hasButtons = Boolean(primaryButton || secondaryButton);
     const imgProps = illustration ? { src: (0, assets_1.getIllustrationUrl)(illustration) } : image;
     const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
-    return (<div className="HeroBlock" ref={ref}>
-      <h1 className="HeroBlock__title">{title}</h1>
-      <Image_1.default className="HeroBlock__image" {...imgProps}/>
-      <div className="HeroBlock__summary">{summary}</div>
-      {hasButtons && (<div className="HeroBlock__buttons">
-          {primaryButton && <ButtonPrimary_1.default {...primaryButton}/>}{' '}
-          {secondaryButton && <ButtonTertiary_1.default {...secondaryButton}/>}
-        </div>)}
-    </div>);
+    return (react_1.default.createElement("div", { className: "HeroBlock", ref: ref },
+        react_1.default.createElement("h1", { className: "HeroBlock__title" }, title),
+        react_1.default.createElement(_Image_1.default, Object.assign({ className: "HeroBlock__image" }, imgProps)),
+        react_1.default.createElement("div", { className: "HeroBlock__summary" }, summary),
+        hasButtons && (react_1.default.createElement("div", { className: "HeroBlock__buttons" },
+            primaryButton && react_1.default.createElement(ButtonPrimary_1.default, Object.assign({}, primaryButton)),
+            ' ',
+            secondaryButton && react_1.default.createElement(ButtonTertiary_1.default, Object.assign({}, secondaryButton))))));
 };
 exports.default = HeroBlock;

package/{IframeBlock.jsx → IframeBlock.js}

@@ -21,11 +21,11 @@ const IframeBlock = (props) => {
         compact && 'compact',
         align === 'right' && 'align--' + align,
     ]);
-    return height === 'auto' ? (<iframe_resizer_react_1.default className={className} src={src}/>) : (<iframe className={className} src={src} 
-    // hidden tiger: pass negative height to disable iframe-resizer but not set height explicitly
-    // (Silly hack, don't rely on this)
-    height={height < 0 ? undefined : height} 
-    // allow undefined to suppress scrolling attribute
-    scrolling={scrolling === true ? 'yes' : scrolling === false ? 'no' : scrolling}/>);
+    return height === 'auto' ? (react_1.default.createElement(iframe_resizer_react_1.default, { className: className, src: src })) : (react_1.default.createElement("iframe", { className: className, src: src, 
+        // hidden tiger: pass negative height to disable iframe-resizer but not set height explicitly
+        // (Silly hack, don't rely on this)
+        height: height < 0 ? undefined : height, 
+        // allow undefined to suppress scrolling attribute
+        scrolling: scrolling === true ? 'yes' : scrolling === false ? 'no' : scrolling }));
 };
 exports.default = IframeBlock;

package/Illustration.d.ts

@@ -1,5 +1,5 @@
 import { Illustration as IllustrationName } from '@reykjavik/hanna-utils/assets';
-import { ImageProps } from './_abstract/Image';
+import { ImageProps } from './_abstract/_Image';
 declare type IllustrationProps = {
     children?: undefined;
 } & ({

package/{Illustration.jsx → Illustration.js}

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const assets_1 = require("@reykjavik/hanna-utils/assets");
-const Image_1 = __importDefault(require("./_abstract/Image"));
+const _Image_1 = __importDefault(require("./_abstract/_Image"));
 const Illustration = (props) => {
     const imgProps = props.type ? { src: (0, assets_1.getIllustrationUrl)(props.type) } : props.image;
-    return <Image_1.default className="Illustration" {...imgProps}/>;
+    return react_1.default.createElement(_Image_1.default, Object.assign({ className: "Illustration" }, imgProps));
 };
 exports.default = Illustration;

package/ImageCards.d.ts

@@ -1,4 +1,4 @@
-import { ImageCardListProps, ImageCardProps as ICP } from './_abstract/CardList';
+import { ImageCardListProps, ImageCardProps as ICP } from './_abstract/_CardList';
 import { SeenProp } from './utils/seenEffect';
 export declare type ImageCardProps = ICP;
 declare type _ImageCardProps = ImageCardListProps & {

package/{ImageCards.jsx → ImageCards.js}

@@ -16,13 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const CardList_1 = require("./_abstract/CardList");
+const _CardList_1 = require("./_abstract/_CardList");
 const seenEffect_1 = require("./utils/seenEffect");
 const ImageCards = (props) => {
     const { background, startSeen } = props, cardListProps = __rest(props, ["background", "startSeen"]);
     const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
-    return (<div className={(0, getBemClass_1.default)('ImageCards', background && 'background')} ref={ref}>
-      <CardList_1.CardList {...cardListProps} bemPrefix="ImageCards" imgPlaceholder={props.imgPlaceholder || true}/>
-    </div>);
+    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('ImageCards', background && 'background'), ref: ref },
+        react_1.default.createElement(_CardList_1.CardList, Object.assign({}, cardListProps, { bemPrefix: "ImageCards", imgPlaceholder: props.imgPlaceholder || true }))));
 };
 exports.default = ImageCards;

package/InfoBlock.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const seenEffect_1 = require("./utils/seenEffect");
+const InfoBlock = (props) => {
+    const { title, subtitle, items, startSeen } = props;
+    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    return (react_1.default.createElement("div", { className: "InfoBlock", ref: ref },
+        react_1.default.createElement("h2", { className: "InfoBlock__title" }, title),
+        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)))),
+        'extraInfo' in props && (react_1.default.createElement("div", { className: "InfoBlock__extrainfo" }, props.extraInfo)),
+        'attention' in props && (react_1.default.createElement("div", { className: "InfoBlock__attention" }, props.attention))));
+};
+exports.default = InfoBlock;

package/InfoHero.d.ts

@@ -1,5 +1,5 @@
-import { ButtonProps } from './_abstract/Button';
-import { ImageProps } from './_abstract/Image';
+import { ButtonProps } from './_abstract/_Button';
+import { ImageProps } from './_abstract/_Image';
 import { Alignment } from './constants';
 declare type BlingOptions = 'waves' | 'sunny-waves' | 'triangles' | 'circles';
 export declare type InfoHeroProps = {

package/{InfoHero.jsx → InfoHero.js}

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const _Blings_1 = __importDefault(require("./_abstract/_Blings"));
+const _Image_1 = __importDefault(require("./_abstract/_Image"));
 const breakOnNL_1 = __importDefault(require("./_abstract/breakOnNL"));
-const Image_1 = __importDefault(require("./_abstract/Image"));
 const ButtonTertiary_1 = __importDefault(require("./ButtonTertiary"));
 const constants_1 = require("./constants");
 const blingOptions = {
@@ -74,20 +74,14 @@ const InfoHero = (props) => {
     const alignment = align && constants_1.aligns[align] ? align : 'right';
     const blings = (blingType && blingOptions[blingType]) ||
         blingOptions.waves; // default to `waves`
-    return (<div className={(0, getBemClass_1.default)('InfoHero', 'align--' + alignment)}>
-      <div className="InfoHero__content">
-        <h1 className="InfoHero__title">{title}</h1>
-        {titleBlurb && <div className="InfoHero__titleblurb">{titleBlurb}</div>}
-
-        {subTitle && <div className="InfoHero__subtitle">{(0, breakOnNL_1.default)(subTitle)}</div>}
-        {blurb && <div className="InfoHero__blurb">{blurb}</div>}
-
-        {showButtons && (<div className="InfoHero__buttons">
-            {buttons.map((buttonProps, i) => (<ButtonTertiary_1.default key={i} {...buttonProps}/>))}
-          </div>)}
-      </div>
-      <Image_1.default className="InfoHero__image" altText={title} {...image} placeholder/>
-      <_Blings_1.default blings={blings} mirror={alignment === 'right'}/>
-    </div>);
+    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('InfoHero', 'align--' + alignment) },
+        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),
+            subTitle && react_1.default.createElement("div", { className: "InfoHero__subtitle" }, (0, breakOnNL_1.default)(subTitle)),
+            blurb && react_1.default.createElement("div", { className: "InfoHero__blurb" }, blurb),
+            showButtons && (react_1.default.createElement("div", { className: "InfoHero__buttons" }, buttons.map((buttonProps, i) => (react_1.default.createElement(ButtonTertiary_1.default, Object.assign({ key: i }, buttonProps))))))),
+        react_1.default.createElement(_Image_1.default, Object.assign({ className: "InfoHero__image", altText: title }, image, { placeholder: true })),
+        react_1.default.createElement(_Blings_1.default, { blings: blings, mirror: alignment === 'right' })));
 };
 exports.default = InfoHero;

package/IslandBlock.d.ts

@@ -1,6 +1,6 @@
 import { Formheimur } from '@reykjavik/hanna-utils/assets';
 import { BlockItem } from './_abstract/_Block';
-import { ImageProps } from './_abstract/Image';
+import { ImageProps } from './_abstract/_Image';
 import { SeenProp } from './utils/seenEffect';
 import { Alignment } from './constants';
 declare type IslandBaseBlockProps = {

package/{IslandBlock.jsx → IslandBlock.js}

@@ -16,6 +16,6 @@ const IslandBlock = (props) => {
             content,
             image: shapes ? { src: (0, assets_1.getFormheimurUrl)(shapes), inline: true } : image || {},
         };
-    return (<_Block_1.default bem="IslandBlock" modifier={'align--' + alignment} {...blockProps} startSeen={startSeen}/>);
+    return (react_1.default.createElement(_Block_1.default, Object.assign({ bem: "IslandBlock", modifier: 'align--' + alignment }, blockProps, { startSeen: startSeen })));
 };
 exports.default = IslandBlock;

package/IslandPageBlock.d.ts

@@ -1,6 +1,6 @@
 import { Illustration } from '@reykjavik/hanna-utils/assets';
 import { BlockItem } from './_abstract/_Block';
-import { ImageProps } from './_abstract/Image';
+import { ImageProps } from './_abstract/_Image';
 import { SeenProp } from './utils/seenEffect';
 import { Alignment } from './constants';
 declare const backgrounds: {

package/{IslandPageBlock.jsx → IslandPageBlock.js}

@@ -16,6 +16,6 @@ const IslandPageBlock = (props) => {
     const { title, summary, buttons, illustration, image, align, background, startSeen } = props;
     const alignment = align && constants_1.aligns[align] ? align : 'right';
     const bg = backgrounds[background || 'none'];
-    return (<_Block_1.default bem="IslandPageBlock" modifier={['align--' + alignment, bg && 'background--' + bg]} content={{ title, summary, buttons }} image={illustration ? { src: (0, assets_1.getIllustrationUrl)(illustration) } : image || {}} startSeen={startSeen}/>);
+    return (react_1.default.createElement(_Block_1.default, { bem: "IslandPageBlock", modifier: ['align--' + alignment, bg && 'background--' + bg], content: { title, summary, buttons }, image: illustration ? { src: (0, assets_1.getIllustrationUrl)(illustration) } : image || {}, startSeen: startSeen }));
 };
 exports.default = IslandPageBlock;

package/LabeledTextBlock.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { ButtonProps } from './_abstract/Button';
+import { ButtonProps } from './_abstract/_Button';
 import { SeenProp } from './utils/seenEffect';
 export declare type LabeledTextBlockProps = {
     label: string;

package/{LabeledTextBlock.jsx → LabeledTextBlock.js}

@@ -10,12 +10,10 @@ const ButtonTertiary_1 = __importDefault(require("./ButtonTertiary"));
 const LabeledTextBlock = (props) => {
     const { label, summary, wide, buttons = [], startSeen } = props;
     const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
-    return (<div className={(0, getBemClass_1.default)('LabeledTextBlock', wide && 'wide')} ref={ref}>
-      <h2 className="LabeledTextBlock__label">{label}</h2>
-      <div className="LabeledTextBlock__summary">
-        {summary}
-        {buttons.map((button, i) => (<ButtonTertiary_1.default key={i} {...button}/>))}
-      </div>
-    </div>);
+    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('LabeledTextBlock', wide && 'wide'), ref: ref },
+        react_1.default.createElement("h2", { className: "LabeledTextBlock__label" }, label),
+        react_1.default.createElement("div", { className: "LabeledTextBlock__summary" },
+            summary,
+            buttons.map((button, i) => (react_1.default.createElement(ButtonTertiary_1.default, Object.assign({ key: i }, button)))))));
 };
 exports.default = LabeledTextBlock;

package/Layout.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultLayoutTexts = void 0;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("@hugsmidjan/react/hooks");
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const assets_1 = require("@reykjavik/hanna-utils/assets");
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
+const _Image_1 = __importDefault(require("./_abstract/_Image"));
+const _Link_1 = require("./_abstract/_Link");
+const useMenuToggling_1 = require("./utils/useMenuToggling");
+const useScrollbarWidthCSSVar_1 = require("./utils/useScrollbarWidthCSSVar");
+exports.defaultLayoutTexts = {
+    is: {
+        lang: 'is',
+        skipLinkLabel: 'Valmynd',
+        closeMenuLabel: 'Loka',
+        closeMenuLabelLong: 'Loka valmynd',
+    },
+    en: {
+        lang: 'en',
+        skipLinkLabel: 'Skip to navigation',
+        closeMenuLabel: 'Close',
+        closeMenuLabelLong: 'Close menu',
+    },
+};
+const Layout = (props) => {
+    (0, useScrollbarWidthCSSVar_1.useScrollbarWidthCSSVar)();
+    const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName = 'Reykjavík', logoLink = '/', } = props;
+    const { isMenuActive, closeMenu, toggleMenu } = (0, useMenuToggling_1.useMenuToggling)(ssr !== 'ssr-only');
+    const isBrowser = (0, hooks_1.useIsBrowserSide)( /* ssr */);
+    const txt = (0, i18n_1.getTexts)(props, exports.defaultLayoutTexts);
+    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('Layout', props.modifier), "data-sprinkled": isBrowser, "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_1.Link, { className: "Layout__header__logo", href: logoLink },
+                    ' ',
+                    react_1.default.createElement(_Image_1.default, { className: undefined, inline: true, src: (0, assets_1.getAssetUrl)('reykjavik-logo.svg') }),
+                    ' ',
+                    siteName,
+                    ' '),
+                ' ',
+                navChildren && (react_1.default.createElement(_Link_1.Link, { className: "Layout__header__skiplink", href: "#pagenav", onClick: isMenuActive &&
+                        ((e) => {
+                            e.preventDefault();
+                            toggleMenu();
+                        }), "aria-label": 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", role: "navigation" },
+                navChildren,
+                isMenuActive && (react_1.default.createElement("button", { className: "Layout__nav__closebutton", onClick: closeMenu, "aria-label": txt.closeMenuLabelLong, type: "button" }, txt.closeMenuLabel)))),
+            react_1.default.createElement("div", { className: "Layout__footer", role: "complementary" }, footerChildren))));
+};
+exports.default = Layout;

package/MainMenu/_Auxiliary.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuxiliaryPanel = void 0;
+const react_1 = __importDefault(require("react"));
+const assets_1 = require("@reykjavik/hanna-utils/assets");
+const _Link_1 = require("../_abstract/_Link");
+const AuxiliaryPanel = (props) => {
+    const { title, id, items, image } = props;
+    const imageUrl = image ? (0, assets_1.getIllustrationUrl)(image) : image;
+    return (react_1.default.createElement("li", { className: "AuxiliaryPanel", id: id, style: imageUrl
+            ? { '--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: "AuxiliaryPanel__item", "aria-current": item.current || undefined },
+            react_1.default.createElement(_Link_1.Link, { className: "AuxiliaryPanel__link", href: item.href, target: item.target, lang: item.lang }, item.label)))))));
+};
+exports.AuxiliaryPanel = AuxiliaryPanel;

package/MainMenu/_PrimaryPanel.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrimaryPanel = void 0;
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const _Link_1 = require("../_abstract/_Link");
+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, getBemClass_1.default)('PrimaryPanel', [
+            isParent && 'parent',
+            isActive && 'active',
+            items.length > 5 && 'twocol', // TODO: allow setting twocol manually?
+        ]), id: panel.id },
+        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: "PrimaryPanel__item", "aria-current": item.current || undefined },
+            react_1.default.createElement(_Link_1.Link, { className: "PrimaryPanel__link", href: item.href, target: item.target, lang: item.lang },
+                react_1.default.createElement("span", { className: "PrimaryPanel__linkTitle" }, item.label),
+                ' ',
+                react_1.default.createElement("small", { className: "PrimaryPanel__summary" }, item.summary),
+                ' '))))),
+        isBrowser && isActive && (react_1.default.createElement("button", { className: "MainMenu__megapanel__backtomenu", "aria-controls": panel.id, "aria-label": texts.backToMenuLong, onClick: () => setActivePanel(undefined), type: "button" }, texts.backToMenu))));
+};
+exports.PrimaryPanel = PrimaryPanel;

package/{MainMenu.jsx → MainMenu.js}

@@ -34,7 +34,7 @@ const useShortState_1 = __importDefault(require("@hugsmidjan/react/hooks/useShor
 const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
-const Link_1 = require("./_abstract/Link");
+const _Link_1 = require("./_abstract/_Link");
 const _Auxiliary_1 = require("./MainMenu/_Auxiliary");
 const _PrimaryPanel_1 = require("./MainMenu/_PrimaryPanel");
 const useFormatMonitor_1 = require("./utils/useFormatMonitor");
@@ -130,49 +130,36 @@ const MainMenu = (props) => {
     if (menuItems.length === 0) {
         return null;
     }
-    return (<nav className="MainMenu" aria-label={title} data-sprinkled={isBrowser} ref={menuElmRef}>
-      <h2 className="MainMenu__title">{title}</h2>
-      <ul className="MainMenu__items">
-        {menuItems.map((item, i) => {
+    return (react_1.default.createElement("nav", { className: "MainMenu", "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 === '---') {
-                return <li key={i} className="MainMenu__separator" aria-hidden="true"/>;
+                return react_1.default.createElement("li", { key: i, className: "MainMenu__separator", "aria-hidden": "true" });
             }
             const { label, labelLong, lang, controlsId, onClick } = item;
             const pressed = (activePanel && controlsId === activePanel.id) || undefined;
-            return (<li key={i} className={(0, getBemClass_1.default)('MainMenu__item', item.modifier)} aria-current={item.current || undefined}>
-              {onClick || (!!item.megaPanel && (isBrowser || item.href != null)) ? (
-                // only print script-driven buttons in the browser
-                <button className="MainMenu__link" onClick={() => {
-                        item.megaPanel && setActivePanel(item.megaPanel);
-                        onClick && onClick(i, item);
-                        onItemClick && onItemClick(i, item);
-                    }} ref={pressed && pressedLinkRef} aria-pressed={pressed} aria-controls={controlsId} aria-label={labelLong} title={labelLong} // For auto-tooltips on desktop
-                 lang={lang} type="button">
-                    {label}
-                  </button>) : item.href != null ? (
-                // always render links server-side
-                <Link_1.Link className="MainMenu__link" href={item.href} aria-label={labelLong} title={labelLong} // For auto-tooltips on desktop
-                 onClick={onItemClick && (() => onItemClick(i, item))} lang={lang}>
-                    {label}
-                  </Link_1.Link>) : undefined // skip rendering non-link menu items server side
-                }
-            </li>);
-        })}
-      </ul>
-      {'\n\n'}
-      {megaPanels.length > 0 && (<div className={(0, getBemClass_1.default)('MainMenu__panelsWrap', [activePanel && 'active'])}>
-          <ul className="MainMenu__panels">
-            {megaPanels.map((panel, i) => {
-                if (!panel.items.length) {
-                    return;
-                }
-                const isActive = activePanel === panel || laggyActivePanel === panel || undefined;
-                const isParent = !!panel.items.find((item) => item.current);
-                return (<_PrimaryPanel_1.PrimaryPanel key={i} isParent={isParent} isActive={isActive} panel={panel} isBrowser={isBrowser} setActivePanel={setActivePanel} texts={(0, i18n_1.getTexts)(props, exports.defaultMainMenuTexts)} activeRef={activePanelRef}/>);
-            })}
-            {auxiliaryPanel && <_Auxiliary_1.AuxiliaryPanel {...auxiliaryPanel}/>}
-          </ul>
-        </div>)}
-    </nav>);
+            return (react_1.default.createElement("li", { key: i, className: (0, getBemClass_1.default)('MainMenu__item', item.modifier), "aria-current": item.current || undefined }, onClick || (!!item.megaPanel && (isBrowser || item.href != null)) ? (
+            // only print script-driven buttons in the browser
+            react_1.default.createElement("button", { className: "MainMenu__link", onClick: () => {
+                    item.megaPanel && setActivePanel(item.megaPanel);
+                    onClick && onClick(i, item);
+                    onItemClick && onItemClick(i, item);
+                }, ref: pressed && pressedLinkRef, "aria-pressed": pressed, "aria-controls": controlsId, "aria-label": labelLong, title: labelLong, lang: lang, type: "button" }, label)) : item.href != null ? (
+            // always render links server-side
+            react_1.default.createElement(_Link_1.Link, { className: "MainMenu__link", href: item.href, "aria-label": labelLong, title: labelLong, onClick: onItemClick && (() => onItemClick(i, item)), lang: lang }, label)) : undefined // skip rendering non-link menu items server side
+            ));
+        })),
+        '\n\n',
+        megaPanels.length > 0 && (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('MainMenu__panelsWrap', [activePanel && 'active']) },
+            react_1.default.createElement("ul", { className: "MainMenu__panels" },
+                megaPanels.map((panel, i) => {
+                    if (!panel.items.length) {
+                        return;
+                    }
+                    const isActive = activePanel === panel || laggyActivePanel === panel || undefined;
+                    const isParent = !!panel.items.find((item) => item.current);
+                    return (react_1.default.createElement(_PrimaryPanel_1.PrimaryPanel, { key: i, isParent: isParent, isActive: isActive, panel: panel, isBrowser: isBrowser, setActivePanel: setActivePanel, texts: (0, i18n_1.getTexts)(props, exports.defaultMainMenuTexts), activeRef: activePanelRef }));
+                }),
+                auxiliaryPanel && react_1.default.createElement(_Auxiliary_1.AuxiliaryPanel, Object.assign({}, auxiliaryPanel)))))));
 };
 exports.default = MainMenu;

package/MiniMetrics.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from './_abstract/Button';
+import { ButtonProps } from './_abstract/_Button';
 import { SeenProp } from './utils/seenEffect';
 export declare type MiniMetricsProps = {
     text: string;

package/{MiniMetrics.jsx → MiniMetrics.js}

@@ -4,13 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const Button_1 = __importDefault(require("./_abstract/Button"));
+const _Button_1 = __importDefault(require("./_abstract/_Button"));
 const SeenEffect_1 = __importDefault(require("./SeenEffect"));
 const MiniMetrics = (props) => {
     const { text, moreButton, startSeen } = props;
-    return (<SeenEffect_1.default className="MiniMetrics" startSeen={startSeen}>
-      <strong className="MiniMetrics__text">{text}</strong> {'\n'}
-      <Button_1.default bem="MiniMetrics__more" {...moreButton}/>
-    </SeenEffect_1.default>);
+    return (react_1.default.createElement(SeenEffect_1.default, { className: "MiniMetrics", startSeen: startSeen },
+        react_1.default.createElement("strong", { className: "MiniMetrics__text" }, text),
+        " ",
+        '\n',
+        react_1.default.createElement(_Button_1.default, Object.assign({ bem: "MiniMetrics__more" }, moreButton))));
 };
 exports.default = MiniMetrics;

package/Modal.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Modal_1 = __importDefault(require("@hugsmidjan/react/Modal"));
+const Modal = (props) => {
+    const { closeDelay = 500, texts = {
+        closeButton: 'Loka ',
+    }, bling, children, render = () => children, } = props;
+    return (react_1.default.createElement(Modal_1.default, Object.assign({}, props, { bodyWrap: false, bem: "Modal", closeDelay: closeDelay, texts: texts, render: (args) => bling ? (react_1.default.createElement(react_1.default.Fragment, null,
+            render(args),
+            react_1.default.createElement("div", { className: "Modal__blings" },
+                react_1.default.createElement("div", { className: "Modal__blings__inner" }, bling)))) : (render(args)), 
+        // eslint-disable-next-line react/no-children-prop
+        children: undefined })));
+};
+exports.default = Modal;