@reykjavik/hanna-react 0.10.99 → 0.10.101

package/esm/Foonote.js

@@ -1,7 +1,7 @@
-import _Footnote from './Footnote.js';
+import { Footnote as _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;
+export default Footnote; // eslint-disable-line deprecation/deprecation

package/esm/Footnote.d.ts

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

package/esm/Footnote.js

@@ -1,3 +1,4 @@
 import React from 'react';
-export const Footnote = (props) => (React.createElement("div", { className: "Footnote" }, props.children));
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+export const Footnote = (props) => (React.createElement("div", Object.assign({}, props.wrapperProps, { className: modifiedClass('Footnote', null, (props.wrapperProps || {}).className) }), props.children));
 export default Footnote;

package/esm/Form.js

@@ -1,10 +1,10 @@
+import { __rest } from "tslib";
 import React from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+// NOTE: As this component already accepts all `<form/>` props directly,
+// it makes little sense to add support for `wrapperProps` on top.
 export const Form = (props) => {
-    const { children, align, wide } = props;
-    return (React.createElement("form", Object.assign({}, props, { className: modifiedClass('Form', [
-            align === 'right' && 'align--' + align,
-            !align && wide && 'wide',
-        ]) }), children));
+    const { children, align, wide, className } = props, formProps = __rest(props, ["children", "align", "wide", "className"]);
+    return (React.createElement("form", Object.assign({}, formProps, { className: modifiedClass('Form', [align === 'right' && 'align--' + align, !align && wide && 'wide'], className) }), children));
 };
 export default Form;

package/esm/FormField.d.ts

@@ -1,5 +1,7 @@
 import { RefObject } from 'react';
-import { SSRSupportProps } from './utils.js';
+import { RequireExplicitUndefined } from '@reykjavik/hanna-utils';
+import { TogglerGroupFieldProps } from './_abstract/_TogglerGroupField.js';
+import { SSRSupportProps, WrapperElmProps } from './utils.js';
 type InputClassNames = {
     /** Basic/raw FormField BEM name */
     bem: string;
@@ -49,9 +51,13 @@ export type FormFieldWrappingProps = {
     reqText?: string | false;
     /** Optional pre-determinted id="" for the __input */
     id?: string;
-    /** Ref object pointing to the outermost `.FormField` element */
+    /**
+     * @deprecated Use `*Props.wrapperProps.ref` instead (Will be removed in v0.11)
+     *
+     * Ref object pointing to the outermost `.FormField` element
+     */
     wrapperRef?: RefObject<HTMLElement>;
-} & SSRSupportProps;
+} & WrapperElmProps & SSRSupportProps;
 /**
  * Mixin base props type for components using `FormField` to contain
  * more complex multi-element, grouped choices, that require a Heading
@@ -61,8 +67,12 @@ export type FormFieldGroupWrappingProps = FormFieldWrappingProps & {
     LabelTag?: 'h3' | 'h4' | 'h5';
 };
 type FormFieldProps = FormFieldGroupWrappingProps & {
-    /** Container className - alongside "FormField" */
-    className: string;
+    /** Container className - alongside "FormField" and `props.className`/
+     * `props.wrapperProps.className`. \
+     * Ideal to use if your wrapping compoent accepts its own `className`
+     * prop, so you don't have to merge/join them yourself.
+     */
+    extraClassName?: string;
     small?: boolean;
     group?: boolean | 'inputlike';
     empty?: boolean;
@@ -71,3 +81,13 @@ type FormFieldProps = FormFieldGroupWrappingProps & {
 };
 export declare const FormField: (props: FormFieldProps) => JSX.Element;
 export default FormField;
+export declare const getFormFieldWrapperProps: (props: (FormFieldGroupWrappingProps | Pick<TogglerGroupFieldProps, keyof FormFieldGroupWrappingProps>) & {
+    small?: boolean;
+}) => RequireExplicitUndefined<FormFieldGroupWrappingProps> & {
+    small: boolean | undefined;
+};
+export declare const groupFormFieldWrapperProps: <T extends (FormFieldGroupWrappingProps | Pick<TogglerGroupFieldProps<"default">, "label" | "className" | "id" | "wrapperProps" | "disabled" | "ssr" | "invalid" | "readOnly" | "required" | "errorMessage" | "reqText" | "assistText" | "hideLabel" | "wrapperRef" | "LabelTag">) & {
+    small?: boolean | undefined;
+}>(props: T) => Omit<T, "label" | "small" | "className" | "id" | "wrapperProps" | "disabled" | "ssr" | "invalid" | "readOnly" | "required" | "errorMessage" | "reqText" | "assistText" | "hideLabel" | "wrapperRef" | "LabelTag"> & {
+    fieldWrapperProps: ReturnType<typeof getFormFieldWrapperProps>;
+};

package/esm/FormField.js

@@ -1,6 +1,7 @@
+import { __rest } from "tslib";
 import React, { useCallback, useState } from 'react';
-import { useDomid } from '@hugsmidjan/react/hooks';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { useDomid } from '@hugsmidjan/react/hooks';
 import { isPreact } from './utils/env.js';
 import { useIsBrowserSide } from './utils.js';
 const inputClassNames = {
@@ -12,8 +13,8 @@ const inputClassNames = {
 // ---------------------------------------------------------------------------
 // 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 { extraClassName, className, small, group, LabelTag = group ? 'h4' : undefined, label, assistText, hideLabel, empty, filled, readOnly, disabled, invalid, errorMessage, required, reqText, // TODO: i18n
+    renderInput, id, ssr, wrapperProps, } = props;
     const isBrowser = useIsBrowserSide(ssr);
     const isInvalid = invalid || !!errorMessage || undefined;
     const domid = useDomid(id);
@@ -52,7 +53,7 @@ export const FormField = (props) => {
     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
+        // FIXME: add mo-better i18n thinking
         title: `${reqText || 'Þarf að fylla út'}: ` }, "*"));
     const inputProps = {
         id: domid,
@@ -63,7 +64,7 @@ export const FormField = (props) => {
         'aria-describedby': assistTextId && errorId ? assistTextId + ' ' + errorId : assistTextId || errorId,
         'aria-labelledby': labelId, // undefined if normalLabel
     };
-    return (React.createElement("div", { className: modifiedClass('FormField', [
+    return (React.createElement("div", Object.assign({ ref: props.wrapperRef }, wrapperProps, { className: modifiedClass('FormField', [
             small && 'small',
             hideLabel && 'nolabel',
             isInvalid && 'invalid',
@@ -72,7 +73,10 @@ export const FormField = (props) => {
             isBrowser && empty && 'empty',
             isBrowser && filled && 'filled',
             isBrowser && focused && 'focused',
-        ], className), ref: props.wrapperRef },
+        ], 
+        // Prefer `className` over `wrapperProps.className`
+        (className || (wrapperProps || {}).className || '') +
+            (extraClassName ? ` ${extraClassName}` : '')) }),
         LabelTag ? (React.createElement(LabelTag, { className: "FormField__label", "data-inputlabel": group === 'inputlike' || undefined, id: labelId },
             ' ',
             reqStar,
@@ -90,3 +94,23 @@ export const FormField = (props) => {
         errorMessage && (React.createElement("div", { id: errorId, className: "FormField__error" }, errorMessage))));
 };
 export default FormField;
+// ---------------------------------------------------------------------------
+export const getFormFieldWrapperProps = (props) => {
+    /* prettier-ignore */
+    const { wrapperProps, label, hideLabel, LabelTag, required, reqText, disabled, readOnly, assistText, invalid, errorMessage, id, small, ssr, className, wrapperRef, // eslint-disable-line deprecation/deprecation
+     } = props;
+    /* prettier-ignore */
+    return {
+        wrapperProps, label, LabelTag, hideLabel, required, reqText,
+        disabled: disabled === true,
+        readOnly, assistText, invalid, errorMessage, id,
+        small, ssr, className,
+        wrapperRef,
+    };
+};
+export const groupFormFieldWrapperProps = (props) => {
+    /* prettier-ignore */
+    const { wrapperProps, label, hideLabel, LabelTag, required, reqText, disabled, readOnly, assistText, invalid, errorMessage, id, small, ssr, className, wrapperRef } = props, // eslint-disable-line deprecation/deprecation
+    rest = __rest(props, ["wrapperProps", "label", "hideLabel", "LabelTag", "required", "reqText", "disabled", "readOnly", "assistText", "invalid", "errorMessage", "id", "small", "ssr", "className", "wrapperRef"]);
+    return Object.assign({ fieldWrapperProps: getFormFieldWrapperProps(props) }, rest);
+};

package/esm/Gallery/_GalleryItem.js

@@ -13,7 +13,7 @@ export const GalleryItem = (props) => {
                 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))),
+            React.createElement(Image, Object.assign({ bem: "GalleryItem__image" }, image)),
+            ' ')) : (React.createElement(Image, Object.assign({ bem: "GalleryItem__image" }, image))),
         description && React.createElement("div", { className: "GalleryItem__description" }, description)));
 };

package/esm/Gallery/_GalleryModalItem.js

@@ -7,5 +7,5 @@ export const GalleryModalItem = (props) => {
         (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 })));
+        React.createElement(Image, { bem: "GalleryModalItem__image", src: image.largeImageSrc || image.src })));
 };

package/esm/Gallery.d.ts

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

package/esm/Gallery.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import { AbstractCarousel } from './_abstract/_AbstractCarousel.js';
 import { GalleryItem } from './Gallery/_GalleryItem.js';
@@ -19,9 +19,10 @@ const defaultTexts = {
 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 }))));
+    const [currentImage, setCurrentImage] = useState(undefined);
+    const galleryState = useMemo(() => ({ items, setCurrentImage, currentImage }), [items, currentImage]);
+    return (React.createElement(GalleryModalContext.Provider, { value: galleryState },
+        React.createElement(AbstractCarousel, { bem: "Gallery", items: items, Component: GalleryItem, ssr: ssr, startSeen: startSeen, wrapperProps: props.wrapperProps }),
+        React.createElement(GalleryModal, Object.assign({}, currentImage, { texts: texts }))));
 };
 export default Gallery;

package/esm/GridBlocks.d.ts

@@ -2,6 +2,7 @@ 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';
+import { WrapperElmProps } from './utils.js';
 export type GridBlockItem = {
     title: string;
     summary: string | JSX.Element;
@@ -17,10 +18,6 @@ export type GridBlockItem = {
 export type GridBlocksProps = {
     blocks: Array<GridBlockItem>;
     twocol?: boolean;
-} & SeenProp;
-export type GridBlocksProp1s = {
-    blocks: Array<GridBlockItem>;
-    twocol?: boolean;
-};
+} & WrapperElmProps & SeenProp;
 export declare const GridBlocks: (props: GridBlocksProps) => JSX.Element;
 export default GridBlocks;

package/esm/GridBlocks.js

@@ -6,12 +6,12 @@ import { Link } from './_abstract/_Link.js';
 import { useSeenEffect } from './utils/seenEffect.js';
 import ButtonTertiary from './ButtonTertiary.js';
 export const GridBlocks = (props) => {
-    const { blocks, twocol, startSeen } = props;
+    const { blocks, twocol, startSeen, wrapperProps } = props;
     const [ref] = useSeenEffect(startSeen);
-    return (React.createElement("div", { className: modifiedClass('GridBlocks', [twocol && 'twocol']), ref: ref }, blocks.map(({ title, summary, href, links = [], icon, image }, i) => {
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('GridBlocks', [twocol && 'twocol'], (wrapperProps || {}).className), ref: ref }), blocks.map(({ title, summary, href, links = [], icon, image }, i) => {
         const imageProps = icon ? { src: getEfnistaknUrl(icon) } : image;
         return (React.createElement("div", { key: i, className: "GridBlocks__item" },
-            imageProps && React.createElement(Image, Object.assign({ className: "GridBlocks__illustration" }, imageProps)),
+            imageProps && React.createElement(Image, Object.assign({ bem: "GridBlocks__illustration" }, imageProps)),
             React.createElement("div", { className: "GridBlocks__textwrap" },
                 React.createElement("h3", { className: "GridBlocks__item__title" }, href != null ? (React.createElement(Link, { className: "GridBlocks__item__titlelink", href: href }, title)) : (title)),
                 React.createElement("div", { className: "GridBlocks__item__summary" }, summary),

package/esm/Heading.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { ComponentLayoutProps } from './constants.js';
+import { WrapperElmProps } from './utils.js';
 declare const sizes: {
     readonly small: "small";
     /** Default value */
@@ -17,6 +18,6 @@ export type HeadingProps = {
      * This prop is ignore if the `Tag` prop is defined.
      */
     forceH1?: boolean;
-} & ComponentLayoutProps;
+} & ComponentLayoutProps & WrapperElmProps;
 export declare const Heading: (props: HeadingProps) => JSX.Element;
 export default Heading;

package/esm/Heading.js

@@ -7,13 +7,13 @@ const sizes = {
     large: 'large',
 };
 export const Heading = (props) => {
-    const { size = 'normal', align, wide, children } = props;
+    const { size = 'normal', align, wide, children, wrapperProps } = props;
     const Tag = props.Tag || (props.forceH1 ? 'h1' : 'h2');
     const suppressWarning = process.env.NODE_ENV !== 'production' && Tag === 'h1' ? true : undefined;
-    return (React.createElement(Tag, { "data-dev-forcedh1": suppressWarning, className: modifiedClass('Heading', [
+    return (React.createElement(Tag, Object.assign({}, wrapperProps, { "data-dev-forcedh1": suppressWarning, className: modifiedClass('Heading', [
             sizes[size],
             align === 'right' && 'align--' + align,
             !align && wide && 'wide',
-        ]) }, children));
+        ]) }), children));
 };
 export default Heading;

package/esm/HeroBlock.d.ts

@@ -2,6 +2,7 @@ import { Illustration } from '@reykjavik/hanna-utils/assets';
 import { ButtonProps } from './_abstract/_Button.js';
 import { ImageProps } from './_abstract/_Image.js';
 import { SeenProp } from './utils/seenEffect.js';
+import { WrapperElmProps } from './utils.js';
 type HeroBlockImageProps = {
     illustration: Illustration;
     image?: undefined;
@@ -14,6 +15,6 @@ export type HeroBlockProps = {
     summary: string | JSX.Element;
     primaryButton?: ButtonProps;
     secondaryButton?: ButtonProps;
-} & HeroBlockImageProps & SeenProp;
+} & HeroBlockImageProps & WrapperElmProps & SeenProp;
 export declare const HeroBlock: (props: HeroBlockProps) => JSX.Element;
 export default HeroBlock;

package/esm/HeroBlock.js

@@ -1,17 +1,18 @@
 import React from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
 import { Image } from './_abstract/_Image.js';
 import { useSeenEffect } from './utils/seenEffect.js';
 import ButtonPrimary from './ButtonPrimary.js';
 import ButtonTertiary from './ButtonTertiary.js';
 export const HeroBlock = (props) => {
-    const { title, summary, illustration, image, primaryButton, secondaryButton, startSeen, } = props;
+    const { title, summary, illustration, image, primaryButton, secondaryButton, startSeen, wrapperProps, } = props;
     const hasButtons = Boolean(primaryButton || secondaryButton);
     const imgProps = illustration ? { src: getIllustrationUrl(illustration) } : image;
     const [ref] = useSeenEffect(startSeen);
-    return (React.createElement("div", { className: "HeroBlock", ref: ref },
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('HeroBlock', null, (wrapperProps || {}).className), ref: ref }),
         React.createElement("h1", { className: "HeroBlock__title" }, title),
-        React.createElement(Image, Object.assign({ className: "HeroBlock__image" }, imgProps)),
+        React.createElement(Image, Object.assign({ bem: "HeroBlock__image" }, imgProps)),
         React.createElement("div", { className: "HeroBlock__summary" }, summary),
         hasButtons && (React.createElement("div", { className: "HeroBlock__buttons" },
             primaryButton && React.createElement(ButtonPrimary, Object.assign({}, primaryButton)),

package/esm/IframeBlock.d.ts

@@ -1,5 +1,7 @@
 import { EitherObj } from '@reykjavik/hanna-utils';
-import { type ResizerOptions } from 'iframe-resizer-react';
+import { IframeResizerProps, ResizerOptions } from 'iframe-resizer-react';
+import { HTMLProps } from './utils.js';
+type ForbiddenWrapperProps = 'scrolling' | 'height' | 'title' | 'src';
 export type IframeBlockProps = {
     src: string;
     /** Accessible title attribute for the iframe (similar to alt="" on images) */
@@ -8,13 +10,16 @@ export type IframeBlockProps = {
     compact?: boolean;
     align?: 'right';
 } & EitherObj<{
+    /** Fixed height, no auto-resizing of the iframe  */
+    height: number;
+    scrolling?: boolean | 'no' | 'yes';
+    wrapperProps?: HTMLProps<'iframe', ForbiddenWrapperProps>;
+}, {
     /** Default: `'auto'` ... which initializes "iframe-resizer" script */
     height?: 'auto';
     /** Default: `false` ... Set to `true` for same-site only, or provide array of allowed domain-names */
     checkOrigin?: ResizerOptions['checkOrigin'];
-}, {
-    height: number;
-    scrolling?: boolean | 'no' | 'yes';
+    wrapperProps?: Omit<IframeResizerProps, ForbiddenWrapperProps>;
 }>;
 /**
  * When `height` is undefined or "auto", then Add the following code-snipped to the iframed page:

package/esm/IframeBlock.js

@@ -10,17 +10,18 @@ import IframeResizer from 'iframe-resizer-react';
  * ```
  */
 export const IframeBlock = (props) => {
-    const { title, src, framed, compact, scrolling, height = 'auto', align, checkOrigin = false, } = props;
-    const className = modifiedClass('IframeBlock', [
-        framed && 'framed',
-        compact && 'compact',
-        align === 'right' && 'align--' + align,
-    ]);
-    return height === 'auto' ? (React.createElement(IframeResizer, { className: className, title: title, src: src, checkOrigin: checkOrigin })) : (React.createElement("iframe", { className: className, title: title, 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 }));
+    const { title, src, framed, compact, align } = props;
+    const className = modifiedClass('IframeBlock', [framed && 'framed', compact && 'compact', align === 'right' && 'align--' + align], (props.wrapperProps || {}).className);
+    if (typeof props.height === 'number') {
+        const { wrapperProps, scrolling, height } = props;
+        return (React.createElement("iframe", Object.assign({}, wrapperProps, { className: className, title: title, 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 })));
+    }
+    const { wrapperProps, checkOrigin = false } = props;
+    return (React.createElement(IframeResizer, Object.assign({}, wrapperProps, { className: className, title: title, src: src, checkOrigin: checkOrigin })));
 };
 export default IframeBlock;

package/esm/Illustration.d.ts

@@ -1,10 +1,11 @@
 import { EitherObj } from '@reykjavik/hanna-utils';
 import { Illustration as IllustrationName } from '@reykjavik/hanna-utils/assets';
 import { ImageProps } from './_abstract/_Image.js';
+import { WrapperElmProps } from './utils.js';
 type IllustrationProps = EitherObj<{
     type: IllustrationName;
 }, {
     image: ImageProps;
-}>;
+}> & WrapperElmProps;
 export declare const Illustration: (props: IllustrationProps) => JSX.Element;
 export default Illustration;

package/esm/Illustration.js

@@ -3,6 +3,6 @@ import { getIllustrationUrl, } from '@reykjavik/hanna-utils/assets';
 import { Image } from './_abstract/_Image.js';
 export const Illustration = (props) => {
     const imgProps = props.type ? { src: getIllustrationUrl(props.type) } : props.image;
-    return React.createElement(Image, Object.assign({ className: "Illustration" }, imgProps));
+    return React.createElement(Image, Object.assign({ bem: "Illustration" }, imgProps, { wrapperProps: props.wrapperProps }));
 };
 export default Illustration;

package/esm/ImageCards.d.ts

@@ -1,10 +1,11 @@
 import { CardListSummaryProps, ImageCardListProps, ImageCardProps as _ImageCardProps } from './_abstract/_CardList.js';
 import { SeenProp } from './utils/seenEffect.js';
+import { WrapperElmProps } from './utils.js';
 export type ImageCardsItemProps = _ImageCardProps;
 /** @deprecated Use `ImageCardsItemProps` instead.  (Will be removed in v0.11) */
 export type ImageCardProps = ImageCardsItemProps;
 export type ImageCardsProps = ImageCardListProps & CardListSummaryProps & {
     background?: boolean;
-} & SeenProp;
+} & WrapperElmProps & SeenProp;
 export declare const ImageCards: (props: ImageCardsProps) => JSX.Element;
 export default ImageCards;

package/esm/ImageCards.js

@@ -4,9 +4,9 @@ import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { CardList, } from './_abstract/_CardList.js';
 import { useSeenEffect } from './utils/seenEffect.js';
 export const ImageCards = (props) => {
-    const { background, startSeen } = props, cardListProps = __rest(props, ["background", "startSeen"]);
+    const { background, startSeen, wrapperProps } = props, cardListProps = __rest(props, ["background", "startSeen", "wrapperProps"]);
     const [ref] = useSeenEffect(startSeen);
-    return (React.createElement("div", { className: modifiedClass('ImageCards', background && 'background'), ref: ref },
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('ImageCards', background && 'background', (wrapperProps || {}).className), ref: ref }),
         React.createElement(CardList, Object.assign({}, cardListProps, { bemPrefix: "ImageCards", imgPlaceholder: props.imgPlaceholder || true }))));
 };
 export default ImageCards;

package/esm/InfoBlock.d.ts

@@ -1,5 +1,6 @@
 import { EitherObj } from '@reykjavik/hanna-utils';
 import { SeenProp } from './utils/seenEffect.js';
+import { WrapperElmProps } from './utils.js';
 export type InfoBlockProps = {
     title: string;
     subtitle?: string | JSX.Element;
@@ -8,6 +9,6 @@ export type InfoBlockProps = {
     attention?: string | JSX.Element;
 }, {
     extraInfo?: string | JSX.Element;
-}> & SeenProp;
+}> & WrapperElmProps & SeenProp;
 export declare const InfoBlock: (props: InfoBlockProps) => JSX.Element;
 export default InfoBlock;

package/esm/InfoBlock.js

@@ -1,9 +1,10 @@
 import React from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { useSeenEffect } from './utils/seenEffect.js';
 export const InfoBlock = (props) => {
-    const { title, subtitle, items, startSeen } = props;
+    const { title, subtitle, items, startSeen, wrapperProps } = props;
     const [ref] = useSeenEffect(startSeen);
-    return (React.createElement("div", { className: "InfoBlock", ref: ref },
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('InfoBlock', null, (wrapperProps || {}).className), ref: ref }),
         React.createElement("h2", { className: "InfoBlock__title" }, title),
         subtitle && React.createElement("div", { className: "InfoBlock__subtitle" }, subtitle),
         React.createElement("ul", { className: "InfoBlock__items" }, items.map((item, i) => (React.createElement("li", { key: i, className: "InfoBlock__item" }, item)))),

package/esm/InfoHero.d.ts

@@ -1,6 +1,7 @@
 import { ButtonProps } from './_abstract/_Button.js';
 import { ImageProps } from './_abstract/_Image.js';
 import { Alignment } from './constants.js';
+import { WrapperElmProps } from './utils.js';
 type BlingOptions = 'waves' | 'sunny-waves' | 'triangles' | 'circles';
 export type InfoHeroProps = {
     title: string;
@@ -13,6 +14,6 @@ export type InfoHeroProps = {
     align?: Alignment;
     image?: ImageProps;
     blingType?: BlingOptions;
-};
+} & WrapperElmProps;
 export declare const InfoHero: (props: InfoHeroProps) => JSX.Element;
 export default InfoHero;

package/esm/InfoHero.js

@@ -64,12 +64,12 @@ const blingOptions = {
     ],
 };
 export const InfoHero = (props) => {
-    const { title, titleBlurb, subTitle, blurb, image, buttons = [], footer, align, blingType, } = props;
+    const { title, titleBlurb, subTitle, blurb, image, buttons = [], footer, align, blingType, wrapperProps, } = props;
     const showButtons = Boolean(buttons.length);
     const alignment = align && aligns[align] ? align : 'right';
     const blings = (blingType && blingOptions[blingType]) ||
         blingOptions.waves; // default to `waves`
-    return (React.createElement("div", { className: modifiedClass('InfoHero', 'align--' + alignment) },
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('InfoHero', 'align--' + alignment, (wrapperProps || {}).className) }),
         React.createElement("div", { className: "InfoHero__content" },
             React.createElement("h1", { className: "InfoHero__title" }, title),
             titleBlurb && React.createElement("div", { className: "InfoHero__titleblurb" }, titleBlurb),
@@ -77,7 +77,7 @@ export const InfoHero = (props) => {
             blurb && React.createElement("div", { className: "InfoHero__blurb" }, blurb),
             showButtons && (React.createElement("div", { className: "InfoHero__buttons" }, buttons.map((buttonProps, i) => (React.createElement(ButtonTertiary, Object.assign({ key: i }, buttonProps)))))),
             footer && React.createElement("div", { className: "InfoHero__footer" }, footer)),
-        React.createElement(Image, Object.assign({ className: "InfoHero__image", altText: title }, image, { placeholder: true })),
+        React.createElement(Image, Object.assign({ bem: "InfoHero__image", altText: title }, image, { placeholder: true })),
         React.createElement(Blings, { blings: blings, mirror: alignment === 'right' })));
 };
 export default InfoHero;

package/esm/IslandBlock.d.ts

@@ -3,6 +3,7 @@ import { BlockItem } from './_abstract/_Block.js';
 import { ImageProps } from './_abstract/_Image.js';
 import { SeenProp } from './utils/seenEffect.js';
 import { Alignment } from './constants.js';
+import { WrapperElmProps } from './utils.js';
 type IslandBaseBlockProps = {
     align?: Alignment;
 };
@@ -20,6 +21,6 @@ type IslandContentBlocks = {
     shapes?: undefined;
     image?: undefined;
 };
-export type IslandBlockProps = IslandBaseBlockProps & (IslandContentBlocks | IslandImageBlock) & SeenProp;
+export type IslandBlockProps = IslandBaseBlockProps & (IslandContentBlocks | IslandImageBlock) & WrapperElmProps & SeenProp;
 export declare const IslandBlock: (props: IslandBlockProps) => JSX.Element;
 export default IslandBlock;

package/esm/IslandBlock.js

@@ -3,7 +3,7 @@ import { getFormheimurUrl } from '@reykjavik/hanna-utils/assets';
 import { Block } from './_abstract/_Block.js';
 import { aligns } from './constants.js';
 export const IslandBlock = (props) => {
-    const { align, content, shapes, image, startSeen } = props;
+    const { align, content, shapes, image, startSeen, wrapperProps } = props;
     const alignment = align && aligns[align] ? align : 'right';
     const blockProps = Array.isArray(content)
         ? { content }
@@ -11,6 +11,6 @@ export const IslandBlock = (props) => {
             content,
             image: shapes ? { src: getFormheimurUrl(shapes), inline: true } : image || {},
         };
-    return (React.createElement(Block, Object.assign({ bem: "IslandBlock", modifier: 'align--' + alignment }, blockProps, { startSeen: startSeen })));
+    return (React.createElement(Block, Object.assign({ wrapperProps: wrapperProps, bem: "IslandBlock", modifier: 'align--' + alignment }, blockProps, { startSeen: startSeen })));
 };
 export default IslandBlock;

package/esm/IslandPageBlock.d.ts

@@ -3,6 +3,7 @@ import { BlockItem } from './_abstract/_Block.js';
 import { ImageProps } from './_abstract/_Image.js';
 import { SeenProp } from './utils/seenEffect.js';
 import { Alignment } from './constants.js';
+import { WrapperElmProps } from './utils.js';
 declare const backgrounds: {
     none: undefined;
     gray: string;
@@ -19,6 +20,6 @@ type IslandPageImageProps = {
 export type IslandPageBlockProps = BlockItem & IslandPageImageProps & {
     align?: Alignment;
     background?: Background;
-} & SeenProp;
+} & WrapperElmProps & SeenProp;
 export declare const IslandPageBlock: (props: IslandPageBlockProps) => JSX.Element;
 export default IslandPageBlock;

package/esm/IslandPageBlock.js

@@ -8,9 +8,9 @@ const backgrounds = {
     secondary: 'secondary',
 };
 export const IslandPageBlock = (props) => {
-    const { title, summary, buttons, illustration, image, align, background, startSeen } = props;
+    const { title, summary, buttons, illustration, image, align, background, startSeen, wrapperProps, } = props;
     const alignment = align && aligns[align] ? align : 'right';
     const bg = backgrounds[background || 'none'];
-    return (React.createElement(Block, { bem: "IslandPageBlock", modifier: ['align--' + alignment, bg && 'background--' + bg], content: { title, summary, buttons }, image: illustration ? { src: getIllustrationUrl(illustration) } : image || {}, startSeen: startSeen }));
+    return (React.createElement(Block, { wrapperProps: wrapperProps, bem: "IslandPageBlock", modifier: ['align--' + alignment, bg && 'background--' + bg], content: { title, summary, buttons }, image: illustration ? { src: getIllustrationUrl(illustration) } : image || {}, startSeen: startSeen }));
 };
 export default IslandPageBlock;

package/esm/LabeledTextBlock.d.ts

@@ -1,11 +1,12 @@
 import { ReactElement } from 'react';
 import { ButtonProps } from './_abstract/_Button.js';
 import { SeenProp } from './utils/seenEffect.js';
+import { WrapperElmProps } from './utils.js';
 export type LabeledTextBlockProps = {
     label: string;
     summary: string | ReactElement;
     wide?: boolean;
     buttons?: Array<ButtonProps>;
-} & SeenProp;
+} & WrapperElmProps & SeenProp;
 export declare const LabeledTextBlock: (props: LabeledTextBlockProps) => JSX.Element;
 export default LabeledTextBlock;