@reykjavik/hanna-react 0.10.84 → 0.10.85

package/esm/FileInput.d.ts

@@ -0,0 +1,48 @@
+import { FileListProps } from './FileInput/_FileInputFileList.js';
+import { FormFieldWrappingProps } from './FormField.js';
+export type FileInputProps = {
+    /**
+     * Flags if the input should accept multiple, or just a single file at a time.
+     *
+     * Default: `true`
+     */
+    multiple?: boolean;
+    /**
+     * Accepted file mime type(s).
+     *
+     * Default: no restrictions.
+     */
+    accept?: string | Array<string>;
+    dropzoneText: string | JSX.Element;
+    removeFileText?: string;
+    lang?: string;
+    showFileSize?: boolean;
+    showImagePreviews?: boolean;
+    FileList?: false | ((props: FileListProps) => JSX.Element | null);
+    onFilesUpdated?: (
+    /** Updated, full list of Files. */
+    files: Array<File>, 
+    /** Information about which Files were added or removed during with this update.
+     *
+     * NOTE: When a diff contains both added and deleted files, this indicates a
+     * name-conflict occurred — i.e. one of the added files has a name that
+     * existed in the old file list.
+     * In such cases the deletion is more implicit than explicit, and depending
+     * on the circumstances, you MIGHT wish to either warn the user, rename
+     * one of the files, instead of overwriting/deleting the older file, etc.
+     */
+    diff: {
+        deleted?: Array<File>;
+        added?: Array<File>;
+    }) => void;
+    onFilesRejected?: (rejectedFiles: Array<File>) => void;
+    name?: string;
+    value?: ReadonlyArray<File>;
+    /** @deprecated Use props `multiple`, `accept` instead  (Will be removed in v0.11) */
+    dropzoneProps?: {
+        accept?: string;
+        multiple?: boolean;
+    };
+} & FormFieldWrappingProps;
+export declare const FileInput: (props: FileInputProps) => JSX.Element;
+export default FileInput;

package/esm/FileInput.js

@@ -0,0 +1,130 @@
+import { __rest } from "tslib";
+import React, { useEffect, useRef, useState } from 'react';
+import { useDropzone } from 'react-dropzone'; // https://react-dropzone.js.org/#!/Dropzone
+import { useDomid } from '@hugsmidjan/react/hooks';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { DEFAULT_LANG } from '@reykjavik/hanna-utils/i18n';
+import { addPreview, formatBytes, getFileListUpdate, releasePreview, } from './FileInput/_FileInput.utils';
+import { DefaultFileList } from './FileInput/_FileInputFileList.js';
+import FormField from './FormField.js';
+const defaultRemoveFileText = {
+    is: 'Fjarlægja',
+    en: 'Remove',
+    pl: 'Usuń',
+};
+const defaultOnFilesRejected = (rejectedFiles) => {
+    window.alert('Error:\n' +
+        rejectedFiles
+            .map((elm) => {
+            return elm.name;
+        })
+            .join(', '));
+};
+const arrayToFileList = (arr) => {
+    const fileList = new DataTransfer();
+    arr.forEach((item) => {
+        fileList.items.add(item);
+    });
+    return fileList.files;
+};
+export const FileInput = (props) => {
+    const { className, id, label, hideLabel, dropzoneProps = { multiple: true }, multiple = dropzoneProps.multiple, accept, dropzoneText, lang = DEFAULT_LANG, removeFileText = defaultRemoveFileText[lang] || defaultRemoveFileText[DEFAULT_LANG], assistText, disabled, invalid, errorMessage, required, reqText, FileList = DefaultFileList, onFilesUpdated = () => undefined, onFilesRejected, showFileSize, showImagePreviews, value = [] } = props, inputElementProps = __rest(props, ["className", "id", "label", "hideLabel", "dropzoneProps", "multiple", "accept", "dropzoneText", "lang", "removeFileText", "assistText", "disabled", "invalid", "errorMessage", "required", "reqText", "FileList", "onFilesUpdated", "onFilesRejected", "showFileSize", "showImagePreviews", "value"]);
+    const domid = useDomid(id);
+    const fileInputWrapper = useRef(null);
+    const fileInput = useRef(null);
+    const files = value;
+    const [isHover, setIsHover] = useState(false);
+    const { getRootProps, getInputProps, isDragReject, inputRef } = useDropzone({
+        onDrop: (acceptedFiles) => {
+            acceptedFiles = acceptedFiles.map((file) => {
+                addPreview(file);
+                return file;
+            });
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            addFiles(acceptedFiles);
+            setIsHover(false);
+        },
+        onDropRejected: onFilesRejected || defaultOnFilesRejected,
+        onDragEnter: () => {
+            // 'dragLeave' always fires right after 'dragEnter', use 'dragOver' instead
+            // console.log('enter');
+            // setIsHover(true);
+        },
+        onDragLeave: () => {
+            // console.log('leave');
+            setIsHover(false);
+        },
+        onDragOver: () => {
+            // TODO: add error icon? 'isDragReject' gives unstable results
+            // console.log(isDragReject);
+            setIsHover(true);
+        },
+        multiple,
+        accept,
+    });
+    // Synchronoyusly add previews on incoming files
+    // (NOTE: `addPreview` ignores files that already have preview.)
+    files.forEach(addPreview);
+    useEffect(() => {
+        if (fileInput.current) {
+            fileInput.current.files = arrayToFileList(files);
+        }
+        return () => {
+            // Make sure to revoke the data uris on unmount to avoid memory leaks
+            files.forEach(releasePreview);
+        };
+    }, [files]);
+    const removeFile = (removeTarget) => {
+        const deleted = [];
+        const targetName = typeof removeTarget !== 'string' ? removeTarget.name : removeTarget;
+        const fileList = files.filter((file) => {
+            if (file.name !== targetName) {
+                return true;
+            }
+            deleted.push(file);
+            releasePreview(file);
+            return false;
+        });
+        if (fileInput.current) {
+            fileInput.current.files = arrayToFileList(fileList);
+        }
+        onFilesUpdated(fileList, { deleted });
+    };
+    const addFiles = (added) => {
+        const { fileList, diff } = getFileListUpdate(files, added, !multiple);
+        if (fileInput.current) {
+            fileInput.current.files = arrayToFileList(fileList);
+        }
+        if (inputRef.current) {
+            // Empty on every add
+            inputRef.current.files = arrayToFileList([]);
+        }
+        onFilesUpdated(fileList, diff);
+    };
+    return (React.createElement(FormField, { className: getBemClass('FileInput', [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.createElement("div", { className: className.control, ref: fileInputWrapper },
+                // Explicitly skip rendering of input element if no
+                // name prop is provided. This is implicitly what the
+                // browser does on form submit.
+                // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
+                // In such cases we assume the application controls the upload/submit
+                // behavior separately outside of this component.
+                inputElementProps.name ? (React.createElement("input", { className: "FileInput__input", name: inputElementProps.name, id: domid, ref: fileInput, type: "file", style: { display: 'none' }, multiple: multiple || undefined, required: inputProps.required })) : null,
+                React.createElement("input", Object.assign({ 
+                    // fake input exclusively used to capture clicks and file drops.
+                    // it's contents are wiped on every "add" action.
+                    className: "FileInput__input--fake" }, getInputProps(), { tabIndex: undefined, style: undefined, multiple: multiple || undefined }, inputProps, { required: undefined })),
+                ' ',
+                React.createElement("div", Object.assign({ className: getBemClass('FileInput__dropzone', [isHover && 'highlight']) }, getRootProps({ isDragReject }), { tabIndex: undefined }),
+                    React.createElement("p", { className: "FileInput__droptext" }, dropzoneText)),
+                FileList && (React.createElement(FileList, Object.assign({}, {
+                    files,
+                    showFileSize,
+                    showImagePreviews,
+                    removeFileText,
+                    removeFile,
+                    formatBytes,
+                })))));
+        } }));
+};
+export default FileInput;

package/esm/Foonote.d.ts

@@ -0,0 +1,12 @@
+import { FootnoteProps as _FootnoteProps } from './Footnote.js';
+/** @deprecated  (Will be removed in v0.11)
+ *
+ * This module file is a typo. import from `Footnote` instead
+ */
+export type FootnoteProps = _FootnoteProps;
+/** @deprecated  (Will be removed in v0.11)
+ *
+ * This module file is a typo. import from `Footnote` instead
+ */
+export declare const Footnote: (props: _FootnoteProps) => JSX.Element;
+export default Footnote;

package/esm/Foonote.js

@@ -0,0 +1,7 @@
+import _Footnote from './Footnote.js';
+/** @deprecated  (Will be removed in v0.11)
+ *
+ * This module file is a typo. import from `Footnote` instead
+ */
+export const Footnote = _Footnote;
+export default Footnote;

package/esm/FooterBadges.d.ts

@@ -0,0 +1,9 @@
+export type FooterBadgesProps = {
+    badges: Array<{
+        altText: string;
+        src: string;
+        href?: string;
+    }>;
+};
+export declare const FooterBadges: (props: FooterBadgesProps) => JSX.Element | null;
+export default FooterBadges;

package/esm/FooterBadges.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link } from './_abstract/_Link.js';
+export const FooterBadges = (props) => {
+    if (!props.badges.length) {
+        return null;
+    }
+    return (React.createElement("ul", { className: "FooterBadges" }, props.badges.map(({ altText, src, href }, i) => (React.createElement("li", { key: i, className: "FooterBadges__badge" }, href ? (React.createElement(Link, { href: href },
+        ' ',
+        React.createElement("img", { src: src, alt: altText }),
+        ' ')) : (React.createElement("img", { src: src, alt: altText })))))));
+};
+export default FooterBadges;

package/esm/FooterInfo.d.ts

@@ -0,0 +1,20 @@
+import { BemPropsModifier } from '@hugsmidjan/react/types';
+export type FooterInfoGroup = {
+    title: string;
+    modifier?: string;
+    main?: boolean;
+    /** @deprecated (Will be removed in v0.11) */
+    role?: JSX.IntrinsicElements['div']['role'];
+} & BemPropsModifier & ({
+    content: JSX.Element;
+    html?: undefined;
+} | {
+    html: string;
+    content?: undefined;
+});
+export type FooterInfoBoxes = Array<FooterInfoGroup>;
+export type FooterInfoProps = {
+    boxes: FooterInfoBoxes;
+};
+export declare const FooterInfo: (props: FooterInfoProps) => JSX.Element;
+export default FooterInfo;

package/esm/FooterInfo.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+export const FooterInfo = (props) => {
+    const { boxes } = props;
+    return (React.createElement("div", { className: "FooterInfo" }, boxes.map((group, i) => (React.createElement("div", { className: getBemClass('FooterInfo__group', [
+            group.main && 'main',
+            group.modifier,
+        ]), key: i },
+        React.createElement("h3", { className: "FooterInfo__grouptitle" }, group.title),
+        group.content ? (React.createElement("div", { className: getBemClass('FooterInfo__groupcontent', group.modifier) }, group.content)) : (React.createElement("div", { className: getBemClass('FooterInfo__groupcontent', group.modifier), dangerouslySetInnerHTML: { __html: group.html } })))))));
+};
+export default FooterInfo;

package/esm/Footnote.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type FootnoteProps = {
+    children: ReactNode;
+};
+export declare const Footnote: (props: FootnoteProps) => JSX.Element;
+export default Footnote;

package/esm/Footnote.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export const Footnote = (props) => (React.createElement("div", { className: "Footnote" }, props.children));
+export default Footnote;

package/esm/Form.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react';
+import { ComponentLayoutProps } from './constants.js';
+export type FormProps = ComponentLayoutProps & React.FormHTMLAttributes<HTMLFormElement> & {
+    children: ReactNode;
+};
+export declare const Form: (props: FormProps) => JSX.Element;
+export default Form;

package/esm/Form.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+export const Form = (props) => {
+    const { children, align, wide } = props;
+    return (React.createElement("form", Object.assign({}, props, { className: getBemClass('Form', [
+            align === 'right' && 'align--' + align,
+            !align && wide && 'wide',
+        ]) }), children));
+};
+export default Form;

package/esm/FormField.d.ts

@@ -0,0 +1,65 @@
+import { RefObject } from 'react';
+import { SSRSupport } from './utils.js';
+type InputClassNames = {
+    /** Basic/raw FormField BEM name */
+    bem: string;
+    /** Standard name for "<input/>"-styled controls */
+    input: string;
+    /** Standard name for radio/checkbox group conotrols */
+    options: string;
+    /** Generic name for unstyled/free-form controls. */
+    control: string;
+};
+export type FormFieldInputProps = {
+    id?: string;
+    required?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+};
+type FocusEvents = {
+    onFocus?: (e: any) => void;
+    onBlur?: (e: any) => void;
+};
+type FocusPropMaker = <P extends FocusEvents>(ownProps?: P) => P & Required<FocusEvents>;
+export type FormFieldWrappingProps = {
+    /** Container className - alongside "FormField" */
+    className?: string;
+    label: string | JSX.Element;
+    assistText?: string | JSX.Element;
+    hideLabel?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    errorMessage?: string | JSX.Element;
+    required?: boolean;
+    /** Hidden label prefix text to indicate that the field is required.
+     *
+     * If your field is required but should not say so in its label
+     * then set this prop to `false`
+     *
+     * Default: `"Þarf að fylla út"`
+     * */
+    reqText?: string | false;
+    /** Optional pre-determinted id="" for the __input */
+    id?: string;
+    /** Ref object pointing to the outermost `.FormField` element */
+    wrapperRef?: RefObject<HTMLElement>;
+    ssr?: SSRSupport;
+};
+export type FormFieldGroupWrappingProps = FormFieldWrappingProps & {
+    LabelTag?: 'h3' | 'h4' | 'h5';
+};
+export type FormFieldProps = FormFieldGroupWrappingProps & {
+    /** Container className - alongside "FormField" */
+    className: string;
+    small?: boolean;
+    group?: boolean;
+    empty?: boolean;
+    filled?: boolean;
+    renderInput(className: InputClassNames, inputProps: FormFieldInputProps, addFocusProps: FocusPropMaker, isBrowser?: boolean): JSX.Element;
+};
+export declare const FormField: (props: FormFieldProps) => JSX.Element;
+export default FormField;

package/esm/FormField.js

@@ -0,0 +1,92 @@
+import React, { useCallback, useState } from 'react';
+import { useDomid } from '@hugsmidjan/react/hooks';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { isPreact } from './utils/env.js';
+import { useIsBrowserSide } from './utils.js';
+const inputClassNames = {
+    bem: 'FormField',
+    input: 'FormField__input',
+    options: 'FormField__options',
+    control: 'FormField__control',
+};
+// ---------------------------------------------------------------------------
+// eslint-disable-next-line complexity
+export const FormField = (props) => {
+    const { className, small, group, LabelTag = group ? 'h4' : undefined, label, assistText, hideLabel, empty, filled, readOnly, disabled, invalid, errorMessage, required, reqText, // i18n
+    renderInput, id, ssr, } = props;
+    const isBrowser = useIsBrowserSide(ssr);
+    const isInvalid = invalid || !!errorMessage || undefined;
+    const domid = useDomid(id);
+    const [focused, setFocused] = useState(false);
+    // @ts-expect-error  (Duck knows why this errors?!)
+    const addFocusProps = useCallback((ownProps) => {
+        const { onFocus, onBlur } = ownProps || {};
+        const focusHandler = (e) => {
+            if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
+                setFocused(true);
+            }
+            onFocus && onFocus(e);
+        };
+        const blurHandler = (e) => {
+            if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
+                setFocused(false);
+            }
+            onBlur && onBlur(e);
+        };
+        const focusProps = Object.assign(Object.assign({}, ownProps), { onFocus: focusHandler, onBlur: blurHandler });
+        if (isPreact) {
+            const focusinHandler = (e) => {
+                e.currentTarget !== e.target && focusHandler(e);
+            };
+            const focusoutHandler = (e) => {
+                e.currentTarget !== e.target && blurHandler(e);
+            };
+            // @ts-expect-error  (Sneak this in as Preact does not bubble `FocusEvent`s)
+            focusProps.onfocusin = focusinHandler;
+            // @ts-expect-error  (Sneak this in as Preact does not bubble `FocusEvent`s)
+            focusProps.onfocusout = focusoutHandler;
+        }
+        return focusProps;
+    }, []);
+    const errorId = errorMessage ? 'error:' + domid : undefined;
+    const assistTextId = assistText ? 'assist:' + domid : undefined;
+    const labelId = LabelTag ? 'label:' + domid : undefined;
+    const reqStar = required && reqText !== false && (React.createElement("abbr", { className: "FormField__label__reqstar", 
+        // TODO: add mo-better i18n thinking
+        title: (reqText || 'Þarf að fylla út') + ': ' }, "*"));
+    const inputProps = {
+        id: domid,
+        disabled: disabled,
+        required: required,
+        readOnly: readOnly,
+        'aria-invalid': isInvalid,
+        'aria-describedby': assistTextId && errorId ? assistTextId + ' ' + errorId : assistTextId || errorId,
+        'aria-labelledby': labelId, // undefined if normalLabel
+    };
+    return (React.createElement("div", { className: getBemClass('FormField', [
+            small && 'small',
+            hideLabel && 'nolabel',
+            isInvalid && 'invalid',
+            disabled && 'disabled',
+            readOnly && 'readonly',
+            isBrowser && empty && 'empty',
+            isBrowser && filled && 'filled',
+            isBrowser && focused && 'focused',
+        ], className), ref: props.wrapperRef },
+        LabelTag ? (React.createElement(LabelTag, { className: "FormField__label", id: labelId },
+            ' ',
+            reqStar,
+            " ",
+            label,
+            ' ')) : (React.createElement("label", { className: "FormField__label", htmlFor: domid },
+            ' ',
+            reqStar,
+            " ",
+            label,
+            ' ')),
+        ' ',
+        renderInput(inputClassNames, inputProps, addFocusProps, isBrowser),
+        assistText && (React.createElement("div", { id: assistTextId, className: "FormField__assist" }, assistText)),
+        errorMessage && (React.createElement("div", { id: errorId, className: "FormField__error" }, errorMessage))));
+};
+export default FormField;

package/esm/Gallery/_GalleryItem.d.ts

@@ -0,0 +1,7 @@
+import { ImageProps } from '../_abstract/_Image.js';
+export type GalleryItemProps = {
+    caption?: string;
+    description?: string;
+    largeImageSrc?: string;
+} & ImageProps;
+export declare const GalleryItem: (props: GalleryItemProps) => JSX.Element;

package/esm/Gallery/_GalleryItem.js

@@ -0,0 +1,19 @@
+import { __rest } from "tslib";
+import React, { useContext } from 'react';
+import { Button } from '../_abstract/_Button.js';
+import { Image } from '../_abstract/_Image.js';
+import { GalleryModalContext } from './_GalleryModalContext.js';
+export const GalleryItem = (props) => {
+    const { caption, description, largeImageSrc } = props, image = __rest(props, ["caption", "description", "largeImageSrc"]);
+    const { setCurrentImage } = useContext(GalleryModalContext);
+    return (React.createElement("figure", { className: "GalleryItem" },
+        React.createElement("figcaption", { className: "GalleryItem__caption" }, caption),
+        largeImageSrc ? (React.createElement(Button, { bem: "GalleryItem__button", href: largeImageSrc, onClick: (e) => {
+                e.preventDefault();
+                setCurrentImage(Object.assign(Object.assign({}, image), { caption, description, largeImageSrc }));
+            } },
+            ' ',
+            React.createElement(Image, Object.assign({ className: "GalleryItem__image" }, image)),
+            ' ')) : (React.createElement(Image, Object.assign({ className: "GalleryItem__image" }, image))),
+        description && React.createElement("div", { className: "GalleryItem__description" }, description)));
+};

package/esm/Gallery/_GalleryModal.d.ts

@@ -0,0 +1,6 @@
+import { GalleryI18n } from '../Gallery.js';
+type GalleryModalProps = {
+    texts: Readonly<GalleryI18n>;
+};
+export declare const GalleryModal: (props: GalleryModalProps) => JSX.Element | null;
+export {};

package/esm/Gallery/_GalleryModal.js

@@ -0,0 +1,53 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { objectClean, objectIsSame } from '@hugsmidjan/qj/object';
+import CarouselPaging from '@hugsmidjan/react/CarouselPaging';
+import Modal from '@hugsmidjan/react/Modal';
+import { GalleryModalContext } from './_GalleryModalContext.js';
+import { GalleryModalItem } from './_GalleryModalItem.js';
+export const GalleryModal = (props) => {
+    const { texts } = props;
+    const { currentImage, items, setCurrentImage } = useContext(GalleryModalContext);
+    const [image, setImage] = useState(currentImage);
+    const [animated, setAnimated] = useState(false);
+    const updateImage = (index) => {
+        setAnimated(!animated);
+        setTimeout(() => {
+            setCurrentImage(items[index]);
+        }, 200);
+    };
+    useEffect(() => {
+        if (image !== currentImage) {
+            const imgSource = (currentImage === null || currentImage === void 0 ? void 0 : currentImage.largeImageSrc) || (currentImage === null || currentImage === void 0 ? void 0 : currentImage.src);
+            if (imgSource) {
+                const imageToLoad = new window.Image();
+                imageToLoad.src = imgSource;
+                imageToLoad.onload = () => {
+                    setImage(currentImage);
+                };
+            }
+            else {
+                setImage(undefined);
+            }
+        }
+    }, [image, currentImage]);
+    if (!image) {
+        return null;
+    }
+    const imageIndex = items.findIndex((item) => 
+    // FIXME: This if weirdly inefficient. Either memoize,
+    // or do a simpler single-property comparison.
+    objectIsSame(objectClean(image), objectClean(item)));
+    return (React.createElement(Modal, { open: true, onClosed: () => {
+            setCurrentImage(undefined);
+        }, startOpen: false, bem: "GalleryModal", texts: { closeButton: texts.modalCloseLabel } },
+        React.createElement(React.Fragment, null,
+            React.createElement(CSSTransition, { in: animated, timeout: 200, onEntered: () => {
+                    setAnimated(!animated);
+                }, classNames: "GalleryModalItem--" },
+                React.createElement(GalleryModalItem, Object.assign({}, image))),
+            React.createElement(CarouselPaging, { bem: "GalleryModalPager", itemCount: items.length, current: imageIndex, setCurrent: updateImage, texts: {
+                    next: texts.modalNextLabel,
+                    prev: texts.modalPrevLabel,
+                } }))));
+};

package/esm/Gallery/_GalleryModalContext.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { GalleryProps } from '../Gallery.js';
+import { GalleryItemProps } from './_GalleryItem.js';
+type ModalContextProps = {
+    setCurrentImage: (item: GalleryItemProps | undefined) => void;
+    currentImage: GalleryItemProps | undefined;
+} & GalleryProps;
+export declare const GalleryModalContext: import("react").Context<ModalContextProps>;
+export {};

package/esm/Gallery/_GalleryModalContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const GalleryModalContext = createContext({});

package/esm/Gallery/_GalleryModalItem.d.ts

@@ -0,0 +1,2 @@
+import { GalleryItemProps } from './_GalleryItem.js';
+export declare const GalleryModalItem: (props: GalleryItemProps) => JSX.Element;

package/esm/Gallery/_GalleryModalItem.js

@@ -0,0 +1,11 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { Image } from '../_abstract/_Image.js';
+export const GalleryModalItem = (props) => {
+    const { caption, description } = props, image = __rest(props, ["caption", "description"]);
+    return (React.createElement("div", { className: "GalleryModalItem" },
+        (caption || description) && (React.createElement("div", { className: "GalleryModalItem__text" },
+            React.createElement("div", { className: "GalleryModalItem__caption" }, caption),
+            React.createElement("div", { className: "GalleryModalItem__description" }, description))),
+        React.createElement(Image, { className: "GalleryModalItem__image", src: image.largeImageSrc || image.src })));
+};

package/esm/Gallery.d.ts

@@ -0,0 +1,17 @@
+import { GalleryItemProps } from './Gallery/_GalleryItem.js';
+import { SeenProp } from './utils/seenEffect.js';
+import { SSRSupport } from './utils.js';
+export type { GalleryItemProps } from './Gallery/_GalleryItem.js';
+export type GalleryI18n = {
+    modalNextLabel: string;
+    modalPrevLabel: string;
+    modalCloseLabel: string;
+};
+export type GalleryProps = {
+    items: Array<GalleryItemProps>;
+    texts?: GalleryI18n;
+    lang?: string;
+    ssr?: SSRSupport;
+} & SeenProp;
+export declare const Gallery: (props: GalleryProps) => JSX.Element;
+export default Gallery;

package/esm/Gallery.js

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { getTexts } from '@reykjavik/hanna-utils/i18n';
+import { AbstractCarousel } from './_abstract/_AbstractCarousel.js';
+import { GalleryItem } from './Gallery/_GalleryItem.js';
+import { GalleryModal } from './Gallery/_GalleryModal.js';
+import { GalleryModalContext } from './Gallery/_GalleryModalContext.js';
+const defaultTexts = {
+    en: {
+        modalNextLabel: 'Next image',
+        modalPrevLabel: 'Previous image',
+        modalCloseLabel: 'Back to article',
+    },
+    is: {
+        modalNextLabel: 'Næsta mynd',
+        modalPrevLabel: 'Fyrri mynd',
+        modalCloseLabel: 'Til baka í grein',
+    },
+};
+export const Gallery = (props) => {
+    const { items, ssr, startSeen } = props;
+    const texts = getTexts(props, defaultTexts);
+    const [modalImage, setModalImage] = useState(undefined);
+    return (React.createElement(GalleryModalContext.Provider, { value: { items, setCurrentImage: setModalImage, currentImage: modalImage } },
+        React.createElement(AbstractCarousel, { bem: "Gallery", items: items, Component: GalleryItem, ssr: ssr, startSeen: startSeen }),
+        React.createElement(GalleryModal, Object.assign({}, modalImage, { texts: texts }))));
+};
+export default Gallery;

package/esm/GridBlocks.d.ts

@@ -0,0 +1,26 @@
+import { Efnistakn } from '@reykjavik/hanna-utils/assets';
+import { ButtonProps } from './_abstract/_Button.js';
+import { ImageProps } from './_abstract/_Image.js';
+import { SeenProp } from './utils/seenEffect.js';
+export type GridBlockItem = {
+    title: string;
+    summary: string | JSX.Element;
+    icon?: Efnistakn;
+    image?: ImageProps;
+} & ({
+    href?: string;
+    links: Array<ButtonProps>;
+} | {
+    href: string;
+    links?: Array<ButtonProps>;
+});
+export type GridBlocksProps = {
+    blocks: Array<GridBlockItem>;
+    twocol?: boolean;
+} & SeenProp;
+export type GridBlocksProp1s = {
+    blocks: Array<GridBlockItem>;
+    twocol?: boolean;
+};
+export declare const GridBlocks: (props: GridBlocksProps) => JSX.Element;
+export default GridBlocks;