@reykjavik/hanna-react 0.10.56 → 0.10.57

package/FeatureList.js

@@ -0,0 +1,21 @@
+"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 Bling_1 = __importDefault(require("./Bling"));
+const FeatureList = (props) => {
+    const { title, features, startSeen } = props;
+    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    const _features = features.length ? features : [{ name: '...' }];
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Bling_1.default, { type: "snake-large", align: "left", vertical: "down-ish" }),
+        react_1.default.createElement("div", { className: "FeatureList", ref: ref },
+            react_1.default.createElement("h2", { className: "FeatureList__title" }, title),
+            react_1.default.createElement("ul", { className: "FeatureList__list" }, _features.map(({ name, icon, iconUrl }, i) => (react_1.default.createElement("li", { key: i, className: "FeatureList__feature", style: iconUrl
+                    ? { '--efnistakn': `url("${iconUrl}")` }
+                    : undefined, "data-efnistakn": !iconUrl ? icon : undefined }, name)))))));
+};
+exports.default = FeatureList;

package/{FieldGroup.jsx → FieldGroup.js}

@@ -7,9 +7,8 @@ const react_1 = __importDefault(require("react"));
 const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const FieldGroup = (props) => {
     const { legend, children, className, disabled } = props;
-    return (<fieldset className={(0, getBemClass_1.default)('FieldGroup', null, className)} role="group" disabled={disabled}>
-      <legend className="FieldGroup__legend">{legend}</legend>
-      {children}
-    </fieldset>);
+    return (react_1.default.createElement("fieldset", { className: (0, getBemClass_1.default)('FieldGroup', null, className), role: "group", disabled: disabled },
+        react_1.default.createElement("legend", { className: "FieldGroup__legend" }, legend),
+        children));
 };
 exports.default = FieldGroup;

package/{FileInput.jsx → FileInput.js}

@@ -156,30 +156,27 @@ const FileInput = (props) => {
             inputRef.current.files = arrayToFileList([]);
         }
     };
-    const filesList = files.map((file) => (<li key={file.name} className="FileInput__file">
-      <button className="FileInput__file-remove" type="button" onClick={() => removeFile(file.name)} aria-label={removeFileText}>
-        {removeFileText}
-      </button>
-      <span className="FileInput__fileinfo">
-        {showImagePreviews && file.preview && (<>
-            <span className="FileInput__preview">
-              <img src={file.preview}/>
-            </span>{' '}
-          </>)}
-        <span className="FileInput__filename">{file.name}</span>
-        {showFileSize && (<small className="FileInput__filesize"> - ({formatBytes(file.size)})</small>)}
-      </span>
-    </li>));
-    return (<FormField_1.default className={(0, getBemClass_1.default)('FileInput', [dropzoneProps.multiple && 'multi'], className)} label={label} id={domid + '-fake'} LabelTag="h4" assistText={assistText} hideLabel={hideLabel} disabled={disabled} invalid={invalid} errorMessage={errorMessage} required={required} reqText={reqText} renderInput={(className, inputProps /* , addFocusProps */) => {
-            return (<div className={className.control} ref={fileInputWrapper}>
-            <input className="FileInput__input" name={inputElementProps.name} id={domid} ref={fileInput} type="file" style={{ display: 'none' }} multiple={dropzoneProps.multiple || undefined} required={inputProps.required} // ??? Bad idea ?? Scream test!!
-            />{' '}
-            <input className="FileInput__input--fake" {...getInputProps()} tabIndex={undefined} style={undefined} multiple={dropzoneProps.multiple || undefined} {...inputProps} required={undefined}/>{' '}
-            <div className={(0, getBemClass_1.default)('FileInput__dropzone', [isHover && 'highlight'])} {...getRootProps({ isDragReject })} tabIndex={undefined}>
-              <p className="FileInput__droptext">{dropzoneText}</p>
-            </div>
-            {filesList.length ? <ul className="FileInput__filelist">{filesList}</ul> : ''}
-          </div>);
-        }}/>);
+    const filesList = files.map((file) => (react_1.default.createElement("li", { key: file.name, className: "FileInput__file" },
+        react_1.default.createElement("button", { className: "FileInput__file-remove", type: "button", onClick: () => removeFile(file.name), "aria-label": removeFileText }, removeFileText),
+        react_1.default.createElement("span", { className: "FileInput__fileinfo" },
+            showImagePreviews && file.preview && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("span", { className: "FileInput__preview" },
+                    react_1.default.createElement("img", { src: file.preview })),
+                ' ')),
+            react_1.default.createElement("span", { className: "FileInput__filename" }, file.name),
+            showFileSize && (react_1.default.createElement("small", { className: "FileInput__filesize" },
+                " - (",
+                formatBytes(file.size),
+                ")"))))));
+    return (react_1.default.createElement(FormField_1.default, { className: (0, getBemClass_1.default)('FileInput', [dropzoneProps.multiple && 'multi'], className), label: label, id: domid + '-fake', LabelTag: "h4", assistText: assistText, hideLabel: hideLabel, disabled: disabled, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, renderInput: (className, inputProps /* , addFocusProps */) => {
+            return (react_1.default.createElement("div", { className: className.control, ref: fileInputWrapper },
+                react_1.default.createElement("input", { className: "FileInput__input", name: inputElementProps.name, id: domid, ref: fileInput, type: "file", style: { display: 'none' }, multiple: dropzoneProps.multiple || undefined, required: inputProps.required }),
+                ' ',
+                react_1.default.createElement("input", Object.assign({ className: "FileInput__input--fake" }, getInputProps(), { tabIndex: undefined, style: undefined, multiple: dropzoneProps.multiple || undefined }, inputProps, { required: undefined })),
+                ' ',
+                react_1.default.createElement("div", Object.assign({ className: (0, getBemClass_1.default)('FileInput__dropzone', [isHover && 'highlight']) }, getRootProps({ isDragReject }), { tabIndex: undefined }),
+                    react_1.default.createElement("p", { className: "FileInput__droptext" }, dropzoneText)),
+                filesList.length ? react_1.default.createElement("ul", { className: "FileInput__filelist" }, filesList) : ''));
+        } }));
 };
 exports.default = FileInput;

package/FooterBadges.js

@@ -0,0 +1,17 @@
+"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 Link_1 = require("./_abstract/Link");
+const FooterBadges = (props) => {
+    if (!props.badges.length) {
+        return null;
+    }
+    return (react_1.default.createElement("ul", { className: "FooterBadges" }, props.badges.map(({ altText, src, href }, i) => (react_1.default.createElement("li", { key: i, className: "FooterBadges__badge" }, href ? (react_1.default.createElement(Link_1.Link, { href: href },
+        ' ',
+        react_1.default.createElement("img", { src: src, alt: altText }),
+        ' ')) : (react_1.default.createElement("img", { src: src, alt: altText })))))));
+};
+exports.default = FooterBadges;

package/FooterInfo.js

@@ -0,0 +1,14 @@
+"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 FooterInfo = (props) => {
+    const { boxes } = props;
+    return (react_1.default.createElement("div", { className: "FooterInfo" }, boxes.map((group, i) => (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('FooterInfo__group', group.modifier), role: group.role, key: i },
+        react_1.default.createElement("h3", { className: "FooterInfo__grouptitle" }, group.title),
+        group.content ? (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('FooterInfo__groupcontent', group.modifier) }, group.content)) : (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('FooterInfo__groupcontent', group.modifier), dangerouslySetInnerHTML: { __html: group.html } })))))));
+};
+exports.default = FooterInfo;

package/{Footnote.jsx → Footnote.js}

@@ -4,5 +4,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const Footnote = (props) => (<div className="Footnote">{props.children}</div>);
+const Footnote = (props) => (react_1.default.createElement("div", { className: "Footnote" }, props.children));
 exports.default = Footnote;

package/{Form.jsx → Form.js}

@@ -7,11 +7,9 @@ const react_1 = __importDefault(require("react"));
 const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const Form = (props) => {
     const { children, align, wide } = props;
-    return (<form {...props} className={(0, getBemClass_1.default)('Form', [
+    return (react_1.default.createElement("form", Object.assign({}, props, { className: (0, getBemClass_1.default)('Form', [
             align === 'right' && 'align--' + align,
             !align && wide && 'wide',
-        ])}>
-      {children}
-    </form>);
+        ]) }), children));
 };
 exports.default = Form;

package/{FormField.jsx → FormField.js}

@@ -78,11 +78,9 @@ const FormField = (props) => {
     const errorId = errorMessage ? 'error:' + domid : undefined;
     const assistTextId = assistText ? 'assist:' + domid : undefined;
     const labelId = LabelTag ? 'label:' + domid : undefined;
-    const reqStar = required && reqText !== false && (<abbr className={'FormField__label__reqstar'} 
-    // TODO: add mo-better i18n thinking
-    title={(reqText || 'Þarf að fylla út') + ': '}>
-      *
-    </abbr>);
+    const reqStar = required && reqText !== false && (react_1.default.createElement("abbr", { className: 'FormField__label__reqstar', 
+        // TODO: add mo-better i18n thinking
+        title: (reqText || 'Þarf að fylla út') + ': ' }, "*"));
     const inputProps = {
         id: domid,
         disabled: disabled,
@@ -92,7 +90,7 @@ const FormField = (props) => {
         'aria-describedby': assistTextId && errorId ? assistTextId + ' ' + errorId : assistTextId || errorId,
         'aria-labelledby': labelId, // undefined if normalLabel
     };
-    return (<div className={(0, getBemClass_1.default)('FormField', [
+    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('FormField', [
             small && 'small',
             hideLabel && 'nolabel',
             isInvalid && 'invalid',
@@ -101,21 +99,21 @@ const FormField = (props) => {
             isBrowser && empty && 'empty',
             isBrowser && filled && 'filled',
             isBrowser && focused && 'focused',
-        ], className)} role={group ? 'group' : undefined} ref={props.wrapperRef}>
-      {LabelTag ? (<LabelTag className={'FormField__label'} id={labelId}>
-          {' '}
-          {reqStar} {label}{' '}
-        </LabelTag>) : (<label className={'FormField__label'} htmlFor={domid}>
-          {' '}
-          {reqStar} {label}{' '}
-        </label>)}{' '}
-      {renderInput(inputClassNames, inputProps, addFocusProps, isBrowser)}
-      {assistText && (<div id={assistTextId} className={'FormField__assist'}>
-          {assistText}
-        </div>)}
-      {errorMessage && (<div id={errorId} className={'FormField__error'}>
-          {errorMessage}
-        </div>)}
-    </div>);
+        ], className), role: group ? 'group' : undefined, ref: props.wrapperRef },
+        LabelTag ? (react_1.default.createElement(LabelTag, { className: 'FormField__label', id: labelId },
+            ' ',
+            reqStar,
+            " ",
+            label,
+            ' ')) : (react_1.default.createElement("label", { className: 'FormField__label', htmlFor: domid },
+            ' ',
+            reqStar,
+            " ",
+            label,
+            ' ')),
+        ' ',
+        renderInput(inputClassNames, inputProps, addFocusProps, isBrowser),
+        assistText && (react_1.default.createElement("div", { id: assistTextId, className: 'FormField__assist' }, assistText)),
+        errorMessage && (react_1.default.createElement("div", { id: errorId, className: 'FormField__error' }, errorMessage))));
 };
 exports.default = FormField;

package/Gallery/{_GalleryItem.jsx → _GalleryItem.js}

@@ -44,16 +44,15 @@ const _GalleryModalContext_1 = __importDefault(require("./_GalleryModalContext")
 const GalleryItem = (props) => {
     const { caption, description, largeImageSrc } = props, image = __rest(props, ["caption", "description", "largeImageSrc"]);
     const { setCurrentImage } = (0, react_1.useContext)(_GalleryModalContext_1.default);
-    return (<figure className="GalleryItem">
-      <figcaption className="GalleryItem__caption">{caption}</figcaption>
-      {largeImageSrc ? (<Button_1.default bem="GalleryItem__button" href={largeImageSrc} onClick={(e) => {
+    return (react_1.default.createElement("figure", { className: "GalleryItem" },
+        react_1.default.createElement("figcaption", { className: "GalleryItem__caption" }, caption),
+        largeImageSrc ? (react_1.default.createElement(Button_1.default, { bem: "GalleryItem__button", href: largeImageSrc, onClick: (e) => {
                 e.preventDefault();
                 setCurrentImage(Object.assign(Object.assign({}, image), { caption, description, largeImageSrc }));
-            }}>
-          {' '}
-          <Image_1.default className="GalleryItem__image" {...image}/>{' '}
-        </Button_1.default>) : (<Image_1.default className="GalleryItem__image" {...image}/>)}
-      {description && <div className="GalleryItem__description">{description}</div>}
-    </figure>);
+            } },
+            ' ',
+            react_1.default.createElement(Image_1.default, Object.assign({ className: "GalleryItem__image" }, image)),
+            ' ')) : (react_1.default.createElement(Image_1.default, Object.assign({ className: "GalleryItem__image" }, image))),
+        description && react_1.default.createElement("div", { className: "GalleryItem__description" }, description)));
 };
 exports.default = GalleryItem;

package/Gallery/{_GalleryModal.jsx → _GalleryModal.js}

@@ -66,21 +66,17 @@ const GalleryModal = (props) => {
     // FIXME: This if weirdly inefficient. Either memoize,
     // or do a simpler single-property comparison.
     (0, object_1.objectIsSame)((0, object_1.objectClean)(image), (0, object_1.objectClean)(item)));
-    return (<Modal_1.default open={true} onClosed={() => {
+    return (react_1.default.createElement(Modal_1.default, { open: true, onClosed: () => {
             setCurrentImage(undefined);
-        }} startOpen={false} bem="GalleryModal" texts={{ closeButton: texts.modalCloseLabel }}>
-      <>
-        <react_transition_group_1.CSSTransition in={animated} timeout={200} onEntered={() => {
-            setAnimated(!animated);
-        }} classNames="GalleryModalItem--">
-          <_GalleryModalItem_1.default {...image}/>
-        </react_transition_group_1.CSSTransition>
-
-        <CarouselPaging_1.default bem="GalleryModalPager" itemCount={items.length} current={imageIndex} setCurrent={updateImage} texts={{
-            next: texts.modalNextLabel,
-            prev: texts.modalPrevLabel,
-        }}/>
-      </>
-    </Modal_1.default>);
+        }, startOpen: false, bem: "GalleryModal", texts: { closeButton: texts.modalCloseLabel } },
+        react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_transition_group_1.CSSTransition, { in: animated, timeout: 200, onEntered: () => {
+                    setAnimated(!animated);
+                }, classNames: "GalleryModalItem--" },
+                react_1.default.createElement(_GalleryModalItem_1.default, Object.assign({}, image))),
+            react_1.default.createElement(CarouselPaging_1.default, { bem: "GalleryModalPager", itemCount: items.length, current: imageIndex, setCurrent: updateImage, texts: {
+                    next: texts.modalNextLabel,
+                    prev: texts.modalPrevLabel,
+                } }))));
 };
 exports.default = GalleryModal;

package/Gallery/{_GalleryModalItem.jsx → _GalleryModalItem.js}

@@ -18,12 +18,10 @@ const react_1 = __importDefault(require("react"));
 const Image_1 = __importDefault(require("../_abstract/Image"));
 const GalleryModalItem = (props) => {
     const { caption, description } = props, image = __rest(props, ["caption", "description"]);
-    return (<div className="GalleryModalItem">
-      {(caption || description) && (<div className="GalleryModalItem__text">
-          <div className="GalleryModalItem__caption">{caption}</div>
-          <div className="GalleryModalItem__description">{description}</div>
-        </div>)}
-      <Image_1.default className="GalleryModalItem__image" src={image.largeImageSrc || image.src}/>
-    </div>);
+    return (react_1.default.createElement("div", { className: "GalleryModalItem" },
+        (caption || description) && (react_1.default.createElement("div", { className: "GalleryModalItem__text" },
+            react_1.default.createElement("div", { className: "GalleryModalItem__caption" }, caption),
+            react_1.default.createElement("div", { className: "GalleryModalItem__description" }, description))),
+        react_1.default.createElement(Image_1.default, { className: "GalleryModalItem__image", src: image.largeImageSrc || image.src })));
 };
 exports.default = GalleryModalItem;

package/{Gallery.jsx → Gallery.js}

@@ -48,9 +48,8 @@ const Gallery = (props) => {
     const { items, ssr, startSeen } = props;
     const texts = (0, i18n_1.getTexts)(props, defaultTexts);
     const [modalImage, setModalImage] = (0, react_1.useState)(undefined);
-    return (<_GalleryModalContext_1.default.Provider value={{ items, setCurrentImage: setModalImage, currentImage: modalImage }}>
-      <_AbstractCarousel_1.default bem="Gallery" items={items} Component={_GalleryItem_1.default} ssr={ssr} startSeen={startSeen}/>
-      <_GalleryModal_1.default {...modalImage} texts={texts}/>
-    </_GalleryModalContext_1.default.Provider>);
+    return (react_1.default.createElement(_GalleryModalContext_1.default.Provider, { value: { items, setCurrentImage: setModalImage, currentImage: modalImage } },
+        react_1.default.createElement(_AbstractCarousel_1.default, { bem: "Gallery", items: items, Component: _GalleryItem_1.default, ssr: ssr, startSeen: startSeen }),
+        react_1.default.createElement(_GalleryModal_1.default, Object.assign({}, modalImage, { texts: texts }))));
 };
 exports.default = Gallery;

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.jsx → Heading.js}

@@ -13,12 +13,10 @@ const sizes = {
 };
 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.jsx → HeroBlock.js}

@@ -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.jsx → Illustration.js}

@@ -8,6 +8,6 @@ const assets_1 = require("@reykjavik/hanna-utils/assets");
 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.jsx → ImageCards.js}

@@ -21,8 +21,7 @@ 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.jsx → InfoHero.js}

@@ -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.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.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.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, { 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;