@reykjavik/hanna-react 0.10.83 → 0.10.85

package/esm/Tooltip.js

@@ -0,0 +1,58 @@
+import React, { useRef } from 'react';
+import { arrow as arrowPlugin, autoUpdate, flip, offset, shift, useFloating, } from '@floating-ui/react';
+import { useCallbackOnEsc, useLaggedState } from '@hugsmidjan/react/hooks';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const getSide = (placement) => placement.split('-')[0];
+const ToolTip = (props) => {
+    const { text, label, iconOnly } = props;
+    const arrowRef = useRef(null);
+    const [isOpen, setIsOpen] = useLaggedState(false, 300);
+    const { x, y, reference, floating, middlewareData, placement } = useFloating({
+        placement: 'top',
+        middleware: [offset(10), flip(), shift(), arrowPlugin({ element: arrowRef })],
+        whileElementsMounted: autoUpdate,
+    });
+    const { arrow } = middlewareData;
+    const arrowX = arrow === null || arrow === void 0 ? void 0 : arrow.x;
+    const arrowY = arrow === null || arrow === void 0 ? void 0 : arrow.y;
+    useCallbackOnEsc(() => {
+        setIsOpen(false);
+    });
+    return (React.createElement("details", { className: `Tooltip Tooltip--${getSide(placement)}`, open: isOpen, onMouseEnter: () => setIsOpen(true, 100), onFocus: () => {
+            if (isOpen) {
+                setIsOpen(true, 0);
+            }
+        }, onBlur: () => setIsOpen(false), onClick: (e) => {
+            e.preventDefault();
+            setIsOpen(!isOpen, 0);
+        }, onMouseDown: () => {
+            if (isOpen) {
+                setTimeout(() => {
+                    setIsOpen(true, 0);
+                }, 100);
+            }
+        }, onMouseLeave: (e) => {
+            if (e.currentTarget.$contextClicked_firefox_fix) {
+                return;
+            }
+            setIsOpen(false);
+        }, onContextMenu: (e) => {
+            const elm = e.currentTarget;
+            clearTimeout(elm.$contextClicked_firefox_fix);
+            elm.$contextClicked_firefox_fix = setTimeout(() => {
+                delete elm.$contextClicked_firefox_fix;
+            }, 300);
+        }, style: x == null
+            ? undefined
+            : {
+                '--tooltip-content-pos-y': `${y}px`,
+                '--tooltip-content-pos-x': `${x}px`,
+                '--tooltip-arrow-pos-x': `${arrowX}px`,
+                '--tooltip-arrow-pos-y': `${arrowY}px`,
+            } },
+        React.createElement("summary", { className: getBemClass('Tooltip__trigger', iconOnly && 'icononly'), ref: reference }, label),
+        React.createElement("div", { className: "Tooltip__content", onClick: (e) => e.stopPropagation(), ref: floating },
+            x !== null && (React.createElement("div", { "data-floating-ui-hack-plz-ignore": "", style: { position: 'absolute', display: 'none' }, ref: arrowRef })),
+            text)));
+};
+export default ToolTip;

package/esm/VSpacer.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { EitherObj } from '@reykjavik/hanna-utils';
+declare const sizes: {
+    readonly none: "none";
+    readonly small: "small";
+    readonly default: "";
+    readonly medium: "";
+    readonly large: "large";
+    readonly xlarge: "xlarge";
+};
+type VSpacerSize = keyof typeof sizes;
+type VSpacerSizePos = Exclude<VSpacerSize, 'none'>;
+export type VSpacerProps = EitherObj<{
+    size?: VSpacerSizePos;
+}, {
+    children: ReactNode;
+    size?: VSpacerSizePos;
+    top?: VSpacerSize;
+    bottom?: VSpacerSize;
+}>;
+export declare const VSpacer: (props: VSpacerProps) => JSX.Element;
+export default VSpacer;

package/esm/VSpacer.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const sizes = {
+    none: 'none',
+    small: 'small',
+    default: '',
+    medium: '',
+    large: 'large',
+    xlarge: 'xlarge',
+};
+const hasChildren = (children) => (children && !(Array.isArray(children) && !children.length)) || undefined;
+const normalizeProp = (value, exclude) => value && value !== exclude ? sizes[value] : undefined;
+export const VSpacer = (props) => {
+    const { size, top, bottom, children } = props;
+    const isWrapper = hasChildren(children);
+    let topVal = normalizeProp(isWrapper && top);
+    let bottomVal = normalizeProp(isWrapper && bottom);
+    let sizeVal = !(topVal && bottomVal) && normalizeProp(size, 'none');
+    // collapse effectively-duplicate class modifiers
+    if (!sizeVal && topVal === bottomVal && topVal !== 'none') {
+        sizeVal = topVal;
+        topVal = bottomVal = undefined;
+    }
+    else if (sizeVal) {
+        if (sizeVal === topVal) {
+            sizeVal = topVal;
+            topVal = undefined;
+        }
+        if (sizeVal === bottomVal) {
+            sizeVal = bottomVal;
+            bottomVal = undefined;
+        }
+    }
+    const className = getBemClass('VSpacer', [
+        sizeVal,
+        topVal && 'top--' + topVal,
+        bottomVal && 'bottom--' + bottomVal,
+    ]);
+    return isWrapper ? (React.createElement("div", { className: className }, children)) : (React.createElement("hr", { className: className }));
+};
+export default VSpacer;

package/esm/VerticalTabsTOC.d.ts

@@ -0,0 +1,14 @@
+import { TabItemProps, TabsProps } from './Tabs.js';
+export type VerticalTabsTOCItem = TabItemProps & {
+    items?: Array<VerticalTabsTOCSubItem>;
+};
+export type VerticalTabsTOCSubItem = TabItemProps & {
+    type?: never;
+    href: string;
+};
+export type VerticalTabsTOCProps = {
+    items: Array<VerticalTabsTOCItem>;
+    onItemSelect: (itemId: string) => void;
+} & Pick<TabsProps, 'aria-label' | 'ssr' | 'activateOnFocus' | 'id' | 'startSeen'>;
+export declare const VerticalTabsTOC: (props: VerticalTabsTOCProps) => JSX.Element;
+export default VerticalTabsTOC;

package/esm/VerticalTabsTOC.js

@@ -0,0 +1,68 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { setFrag } from '@hugsmidjan/qj/frag';
+import { useDomid } from '@hugsmidjan/react/hooks';
+import Tabs from './Tabs.js';
+const getId = (url) => (url && decodeURIComponent(url.split('#')[1] || '')) || '';
+const getItemId = (item) => getId(item && item.href);
+const mapToItemsById = (items, domid) => {
+    const updatedItems = items.map((item) => {
+        return Object.assign(Object.assign({}, item), { 'aria-controls': item['aria-controls'] || domid });
+    });
+    const itemsById = {};
+    updatedItems.forEach((topItem, activeIdx) => {
+        const subItems = topItem.items;
+        if (!subItems) {
+            const itemId = getItemId(topItem);
+            itemsById[itemId] = { activeIdx };
+            return;
+        }
+        subItems.forEach((subItem, idx) => {
+            itemsById[getItemId(subItem)] = {
+                activeIdx,
+                subTabs: {
+                    activeIdx: idx,
+                    'aria-label': topItem.longLabel || topItem.label,
+                    id: topItem['aria-controls'],
+                    tabs: subItems,
+                    onSetActive: (_, item) => {
+                        const newId = getItemId(item);
+                        setFrag(newId);
+                    },
+                },
+            };
+            if (idx === 0) {
+                topItem.href = topItem.href || '#' + getItemId(subItem);
+            }
+        });
+    });
+    return { itemsById, updatedItems };
+};
+export const VerticalTabsTOC = (props) => {
+    const { onItemSelect, items } = props;
+    const _domid = useDomid();
+    const domid = props.id || _domid;
+    const { itemsById, updatedItems } = useMemo(() => mapToItemsById(items, domid), [items, domid]);
+    const [state, setState] = useState(() => {
+        const initialId = typeof location !== 'undefined' ? getId(location.hash) : '';
+        return itemsById[initialId] || itemsById[getItemId(updatedItems[0])] || {};
+    });
+    useEffect(() => {
+        const handleHash = () => {
+            const newId = getId(location.href);
+            const newState = itemsById[newId];
+            if (newState) {
+                setState(newState);
+                onItemSelect(newId);
+            }
+        };
+        window.addEventListener('hashchange', handleHash);
+        return () => window.removeEventListener('hashchange', handleHash);
+    }, [itemsById, onItemSelect]);
+    return (React.createElement(Tabs, { id: domid, vertical: true, "aria-label": props['aria-label'], onSetActive: (_, item) => {
+            var _a;
+            const itemId = getItemId(item);
+            const newId = itemId || getItemId((_a = itemsById[itemId].subTabs) === null || _a === void 0 ? void 0 : _a.tabs[0]);
+            setFrag(newId);
+        }, tabs: updatedItems, role: "tablist", activeIdx: state.activeIdx, subTabs: state.subTabs }));
+};
+export default VerticalTabsTOC;

package/esm/WizardLayout.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import type { HannaColorTheme } from '@reykjavik/hanna-css';
+import { SSRSupport } from './utils.js';
+type WizardLayoutProps = {
+    wizardStepper?: ReactNode | false;
+    wizardFooter?: ReactNode | false;
+    colorTheme?: HannaColorTheme;
+    siteName?: string;
+    logoLink?: string;
+    globalAlerts?: ReactNode;
+    ssr?: SSRSupport;
+    children?: ReactNode;
+};
+export declare const WizardLayout: (props: WizardLayoutProps) => JSX.Element;
+export default WizardLayout;

package/esm/WizardLayout.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { getAssetUrl } from '@reykjavik/hanna-utils/assets';
+import { Image } from './_abstract/_Image.js';
+import { Link } from './_abstract/_Link.js';
+import { useScrollbarWidthCSSVar } from './utils/useScrollbarWidthCSSVar.js';
+import { useIsBrowserSide } from './utils.js';
+export const WizardLayout = (props) => {
+    useScrollbarWidthCSSVar();
+    const { 
+    // ssr,
+    wizardStepper, wizardFooter, children, colorTheme, logoLink = '/', siteName = 'Reykjavík', globalAlerts, } = props;
+    const isBrowser = useIsBrowserSide( /* ssr */);
+    return (React.createElement("div", { className: "WizardLayout", "data-sprinkled": isBrowser, "data-color-theme": colorTheme },
+        globalAlerts && (React.createElement("div", { className: "WizardLayout__alerts", role: "alert" }, globalAlerts)),
+        React.createElement("div", { className: "WizardLayout__content" },
+            React.createElement("div", { className: "WizardLayout__header", role: "banner" },
+                React.createElement(Link, { className: "WizardLayout__header__logo", href: logoLink },
+                    ' ',
+                    React.createElement(Image, { className: undefined, inline: true, src: getAssetUrl('reykjavik-logo.svg') }),
+                    ' ',
+                    siteName,
+                    ' '),
+                ' '),
+            React.createElement("div", { className: "WizardLayout__wrap" },
+                wizardStepper && (React.createElement("div", { className: "WizardLayout__stepper", role: "navigation" }, wizardStepper)),
+                React.createElement("div", { className: "WizardLayout__main", role: "main" }, children),
+                React.createElement("div", { className: "WizardLayout__deco WizardLayout__deco--geometry" })),
+            React.createElement("div", { className: "WizardLayout__footer", role: "complementary" }, wizardFooter))));
+};
+export default WizardLayout;

package/esm/WizardLayoutClose.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from './_abstract/_Button.js';
+export declare const WizardLayoutClose: (props: ButtonProps) => JSX.Element;
+export default WizardLayoutClose;

package/esm/WizardLayoutClose.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Button } from './_abstract/_Button.js';
+export const WizardLayoutClose = (props) => (React.createElement(Button, Object.assign({ bem: "WizardLayoutClose" }, props)));
+export default WizardLayoutClose;

package/esm/WizardStepper.d.ts

@@ -0,0 +1,36 @@
+export type WizardStepperStep = {
+    label: string;
+    /**
+     * Should the step be clickable?
+     *
+     * * `true` = The items becomes clickable as allowed by the `activeStep`,
+     *    `disableBacktrack` and `allowForwardSkip` props.
+     * * `false | undefined` =  Never clickable, regardless of `activeStep`.
+     * * `"always"` = Always clickable regardless of `activeStep` or other props.
+     */
+    clickable?: boolean | 'always';
+    /**
+     * Flags the item as having a non-default done state
+     *
+     * * `undefined` = automatically set "done" on items before `activeStep`
+     * * `true` = Always flag as "done", regardless of `activeStep`
+     * * `false` = Never flag as "done", regardless of `activeStep`
+     */
+    done?: boolean;
+    /**
+     * Flags the step as not part of the numbering scheme
+     */
+    neutral?: boolean;
+};
+export type WizardStepperProps = {
+    steps: ReadonlyArray<WizardStepperStep>;
+    /** Zero-based index of the active (current) step */
+    activeStep?: number;
+    /** By default, clickable steps remain clickable once "done" */
+    disableBacktrack?: boolean;
+    /** By default, clickable steps after the active step are not immediately clickable */
+    allowForwardSkip?: boolean;
+    onClick: (clickedIndex: number) => void;
+};
+export declare const WizardStepper: (props: WizardStepperProps) => JSX.Element;
+export default WizardStepper;

package/esm/WizardStepper.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+export const WizardStepper = (props) => {
+    const { steps, activeStep = -1, allowForwardSkip, disableBacktrack, onClick } = props;
+    return (React.createElement("div", { className: getBemClass('WizardStepper', activeStep === -1 && 'preview') }, steps.map((step, i) => {
+        const { clickable, done, neutral } = step;
+        const label = step.label || '…';
+        const stepClass = getBemClass('WizardStepper__step', [
+            (done || (done == null && i < activeStep)) && 'done',
+            neutral && 'neutral',
+        ]);
+        const isClickable = clickable === 'always' ||
+            (clickable &&
+                (activeStep === i ||
+                    (i > activeStep && allowForwardSkip) ||
+                    (i < activeStep && !disableBacktrack)));
+        const ariaCurrent = activeStep === i ? 'step' : undefined;
+        return (React.createElement(React.Fragment, { key: i },
+            isClickable ? (React.createElement("button", { type: "button", className: stepClass, onClick: () => onClick(i), "aria-current": ariaCurrent }, label)) : (React.createElement("span", { className: stepClass, "aria-current": ariaCurrent },
+                ' ',
+                label,
+                ' ')),
+            ' '));
+    })));
+};
+export default WizardStepper;

package/esm/_abstract/_AbstractCarousel.d.ts

@@ -0,0 +1,29 @@
+import { ReactElement, ReactNode } from 'react';
+import { BemProps } from '@hugsmidjan/react/types';
+import { EitherObj } from '@reykjavik/hanna-utils';
+import { SSRSupport } from '../utils.js';
+import { SeenProp } from '../utils/seenEffect.js';
+export type CarouselProps<I extends Record<string, unknown> = {}, P extends Record<string, unknown> | undefined = {}> = {
+    className?: string;
+    ssr?: SSRSupport;
+    /** @deprecated Ingored because never used (Will be removed in v0.11) */
+    scrollRight?: boolean;
+} & EitherObj<{
+    items: Array<I>;
+    Component: (props: P extends undefined ? I : I & P) => ReactElement | null;
+    ComponentProps?: P;
+}, {
+    children: ReactNode;
+    /**
+     * Explicit number of items contained by the `children` prop
+     *
+     * Use this when your returned child elements are wrapped in a
+     * `<Fragment />` or some such.
+     */
+    itemCount?: number;
+}> & SeenProp;
+type AbstractCarouselProps<I extends Record<string, unknown> = Record<string, unknown>, P extends Record<string, unknown> | undefined = Record<string, unknown>> = CarouselProps<I, P> & BemProps & {
+    title?: string;
+};
+export declare const AbstractCarousel: <I extends Record<string, unknown> = Record<string, unknown>, P extends Record<string, unknown> | undefined = Record<string, unknown>>(props: AbstractCarouselProps<I, P>) => JSX.Element | null;
+export {};

package/esm/_abstract/_AbstractCarousel.js

@@ -0,0 +1,108 @@
+import React, { useEffect, useMemo, useRef, useState, } from 'react';
+import A from '@hugsmidjan/qj/A';
+import debounce from '@hugsmidjan/qj/debounce';
+import focusElm from '@hugsmidjan/qj/focusElm';
+import throttle from '@hugsmidjan/qj/throttle';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { notNully } from '@reykjavik/hanna-utils';
+import CarouselStepper from '../CarouselStepper.js';
+import { useIsBrowserSide } from '../utils.js';
+import { useSeenEffect } from '../utils/seenEffect.js';
+// ---------------------------------------------------------------------------
+const scrollXBy = (elm, deltaX) => {
+    const left = elm.scrollLeft + deltaX;
+    elm.scrollTo(left, elm.scrollTop);
+    // NOTE 1: using elm.scrollTo({ left, behavior: 'smooth' }); seems to be too much
+    // as `behavior: 'smooth'` starts some weird interactions with the browser's
+    // `scroll-snap-type` behavior.
+    //
+    // NOTE 2: Both Chrome and Safari tend to snap hard to the nearest list item
+    // while Firefox is more smooth. Haven't found a way around that.
+};
+export const AbstractCarousel = (props) => {
+    const { title, items = [], Component, ComponentProps, bem = 'Carousel', modifier, ssr, startSeen, } = props;
+    const children = !props.children
+        ? undefined
+        : Array.isArray(props.children)
+            ? props.children.filter(notNully)
+            : [props.children];
+    const [leftOffset, setLeftOffset] = useState();
+    const itemCount = props.itemCount || (children || items).length;
+    const listRef = useRef(null);
+    const [activeItem, setActiveItem] = useState(0);
+    const isBrowser = useIsBrowserSide(ssr);
+    // Since listElm gets unmounted and remounted based on isBrowser, we
+    // wait for isBrowser is true before setting scroll and resize events.
+    const listElm = isBrowser && listRef.current;
+    useEffect(() => {
+        if (!listElm) {
+            return;
+        }
+        const calcLeftOffset = () => {
+            var _a;
+            setLeftOffset((_a = listElm.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left);
+            scrollXBy(listElm, 0);
+        };
+        const calcActiveItem = throttle(() => {
+            const { scrollLeft, children } = listElm;
+            // using Array#find as forEachUntil
+            A(children).find((item, i) => {
+                if (scrollLeft <= item.offsetLeft + item.offsetWidth / 2) {
+                    setActiveItem(i);
+                    return true;
+                }
+            });
+        }, 300, true);
+        calcLeftOffset();
+        listElm.addEventListener('scroll', calcActiveItem, { passive: true });
+        window.addEventListener('resize', calcLeftOffset, { passive: true });
+        return () => {
+            listElm.removeEventListener('scroll', calcActiveItem);
+            window.removeEventListener('resize', calcLeftOffset);
+        };
+    }, [listElm]);
+    const scrollToItem = (newActive) => {
+        const listElm = listRef.current;
+        const newItem = listElm.children[newActive];
+        if (!newItem) {
+            return;
+        }
+        setActiveItem(newActive);
+        listElm.scrollLeft = newItem.offsetLeft || 1;
+        setTimeout(() => focusElm(newItem), 500);
+    };
+    const { delayedScrollLeft, delayedScrollRight } = useMemo(() => {
+        const delayedScrollLeft = debounce((currentActive) => {
+            scrollToItem(currentActive - 1);
+            setTimeout(() => delayedScrollLeft(currentActive - 1), 0);
+        }, 1000);
+        const delayedScrollRight = debounce((currentActive) => {
+            scrollToItem(currentActive + 1);
+            setTimeout(() => delayedScrollRight(currentActive + 1), 0);
+        }, 1000);
+        return { delayedScrollLeft, delayedScrollRight };
+    }, []);
+    const [outerRef] = useSeenEffect(startSeen);
+    if (!itemCount) {
+        return null;
+    }
+    const itemList = (React.createElement("div", { className: bem + '__itemlist', style: leftOffset
+            ? { '--Carousel--leftOffset': `${leftOffset}px` }
+            : undefined, "data-scroll-snapping": leftOffset ? 'true' : undefined, ref: listRef }, children ||
+        items.map((item, i) => (
+        // @ts-expect-error  (Can't be arsed...)
+        React.createElement(Component, Object.assign({ key: i }, ComponentProps, item))))));
+    return (React.createElement("div", { className: getBemClass(bem, modifier, props.className), ref: outerRef, "data-sprinkled": isBrowser },
+        title && React.createElement("h2", { className: bem + '__title' }, title),
+        isBrowser ? (React.createElement("div", { className: bem + '__itemlist-wrapper' },
+            itemList,
+            activeItem > 0 && (React.createElement("div", { className: bem + '__itemlist-goLeft', onClick: () => {
+                    delayedScrollLeft.cancel();
+                    scrollToItem(activeItem - 1);
+                }, onMouseOver: () => delayedScrollLeft(activeItem), onMouseOut: () => delayedScrollLeft.cancel() })),
+            activeItem < itemCount - 1 && (React.createElement("div", { className: bem + '__itemlist-goRight', onClick: () => {
+                    delayedScrollRight.cancel();
+                    scrollToItem(activeItem + 1);
+                }, onMouseOver: () => delayedScrollRight(activeItem), onMouseOut: () => delayedScrollRight.cancel() })))) : (itemList),
+        isBrowser && (React.createElement(CarouselStepper, { itemCount: itemCount, setCurrent: scrollToItem, current: activeItem }))));
+};

package/esm/_abstract/_Blings.d.ts

@@ -0,0 +1,11 @@
+import { BlingType } from '@reykjavik/hanna-utils/assets';
+import { BlingProps } from '../Bling.js';
+export type BlingComboProps = Array<Omit<BlingProps, 'type' | 'blingUrl'> & {
+    type: BlingType;
+}>;
+type BlingsProps = {
+    blings: BlingComboProps;
+    mirror?: boolean;
+};
+export declare const Blings: (props: BlingsProps) => JSX.Element;
+export {};

package/esm/_abstract/_Blings.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import Bling from '../Bling.js';
+const inverseAlignments = {
+    left: 'right',
+    'left-ish': 'right-ish',
+    'left-center': 'right-center',
+    'right-center': 'left-center',
+    'right-ish': 'left-ish',
+    right: 'left',
+};
+export const Blings = (props) => (React.createElement(React.Fragment, null, props.blings.map(({ type, align, vertical, color, overlay, parent }, i) => (React.createElement(Bling, { key: type + '-' + i, type: type, align: props.mirror ? inverseAlignments[align || 'left'] : align, vertical: vertical, color: color, overlay: overlay, parent: parent })))));

package/esm/_abstract/_Block.d.ts

@@ -0,0 +1,21 @@
+import { BemPropsModifier } from '@hugsmidjan/react/types';
+import { SeenProp } from '../utils/seenEffect.js';
+import { ButtonProps } from './_Button.js';
+import { ImageProps } from './_Image.js';
+export type BlockItem = {
+    title: string;
+    summary?: string | JSX.Element;
+    buttons?: Array<ButtonProps>;
+};
+export type ContentImageBlock = {
+    content: BlockItem;
+    image: ImageProps;
+} & SeenProp;
+export type ContentBlock = {
+    content: Array<BlockItem>;
+    image?: undefined;
+} & SeenProp;
+export type BlockProps = BemPropsModifier & (ContentBlock | ContentImageBlock);
+export declare const Block: (props: BlockProps & {
+    bem: string;
+}) => JSX.Element;

package/esm/_abstract/_Block.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useSeenEffect } from '../utils/seenEffect.js';
+import { Button } from './_Button.js';
+import { Image } from './_Image.js';
+export const Block = (props) => {
+    const { image, modifier, bem, content, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    const contentItems = Array.isArray(content) ? content : [content];
+    return (React.createElement("div", { className: getBemClass(bem, modifier), ref: ref },
+        contentItems.map(({ title, summary, buttons = [] }, i) => {
+            const hasSummary = summary && (typeof summary !== 'string' || !!summary.trim());
+            return (React.createElement("div", { key: i, className: `${bem}__content` },
+                React.createElement("h2", { className: `${bem}__title` }, title),
+                hasSummary && React.createElement("div", { className: `${bem}__summary` }, summary),
+                buttons.length > 0 && (React.createElement("div", { className: `${bem}__buttons` },
+                    ' ',
+                    buttons.map((buttonProps, i) => (React.createElement(React.Fragment, null,
+                        React.createElement(Button, Object.assign({ bem: `${bem}__button`, key: i }, buttonProps)),
+                        ' ')))))));
+        }),
+        image && React.createElement(Image, Object.assign({ className: `${bem}__image` }, image))));
+};

package/esm/_abstract/_Button.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { BemProps, BemPropsModifier } from '@hugsmidjan/react/types';
+type ButtonElmProps = {
+    href?: never;
+} & BemPropsModifier & Omit<JSX.IntrinsicElements['button'], 'className' | 'style'>;
+type AnchorElmProps = {
+    href: string;
+    type?: never;
+    name?: never;
+    value?: never;
+} & BemPropsModifier & Omit<JSX.IntrinsicElements['a'], 'className' | 'style'>;
+export type ButtonProps = {
+    /** Label takes preference over `children` */
+    label?: string | JSX.Element;
+} & (ButtonElmProps | AnchorElmProps);
+declare const sizes: {
+    readonly normal: "";
+    readonly small: "small";
+    readonly wide: "wide";
+};
+type ButtonSize = keyof typeof sizes;
+declare const variants: {
+    readonly normal: "";
+    readonly destructive: "destructive";
+};
+type ButtonVariant = keyof typeof variants;
+type NavigationFlag = 'none' | 'go-back' | 'go-forward';
+type ButtonIcon = 'edit';
+export type ButtonVariantProps = {
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    icon?: ButtonIcon | NavigationFlag;
+    /** @deprecated (Will be removed in v0.11) */
+    small?: boolean;
+};
+type _ButtonProps = ButtonProps & ButtonVariantProps & BemProps & {
+    children?: ReactNode;
+};
+export declare const Button: (props: _ButtonProps) => JSX.Element;
+export {};

package/esm/_abstract/_Button.js

@@ -0,0 +1,36 @@
+import { __rest } from "tslib";
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { Link } from './_Link.js';
+// ---------------------------------------------------------------------------
+const sizes = {
+    normal: '',
+    small: 'small',
+    wide: 'wide',
+};
+// ---------------------------------------------------------------------------
+const variants = {
+    normal: '',
+    destructive: 'destructive',
+};
+const navigationFlags = {
+    none: '',
+    'go-back': 'go--back',
+    'go-forward': 'go--forward',
+};
+const icons = {
+    // TODO: insert icons
+    edit: 'edit',
+};
+export const Button = (props) => {
+    const { bem, small, size = 'normal', modifier, children, variant = 'normal', icon = 'none', label = children } = props, buttonProps = __rest(props, ["bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
+    const className = bem &&
+        getBemClass(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]]);
+    const iconProp = icons[icon] && { 'data-icon': icons[icon] };
+    if (buttonProps.href != null) {
+        return (React.createElement(Link, Object.assign({ className: className }, buttonProps, { style: undefined }, iconProp), label));
+    }
+    else {
+        return (React.createElement("button", Object.assign({ className: className, type: "button" }, buttonProps, { style: undefined }, iconProp), label));
+    }
+};

package/esm/_abstract/_CardList.d.ts

@@ -0,0 +1,34 @@
+import { ReactElement, ReactNode } from 'react';
+import { EitherObj } from '@reykjavik/hanna-utils';
+import { ImageProps } from './_Image.js';
+type BaseCardProps = {
+    title: string;
+    href: string;
+};
+export type ImageCardProps = BaseCardProps & {
+    meta?: string;
+    image?: ImageProps;
+    imgPlaceholder?: boolean;
+};
+export type TextCardProps = BaseCardProps & {
+    summary?: string;
+};
+export type CardListProps<T> = {
+    cards: Array<T>;
+    title?: string | undefined;
+    titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'p';
+};
+export type CardListSummaryProps = {
+    summaryElement?: ReactElement;
+};
+export type ImageCardListProps = CardListProps<ImageCardProps> & {
+    imgPlaceholder?: boolean | string;
+};
+export type TextCardListProps = CardListProps<TextCardProps>;
+type _CardListProps = EitherObj<ImageCardListProps, TextCardListProps> & CardListSummaryProps & {
+    bemPrefix: string;
+    children?: ReactNode;
+    standalone?: boolean;
+};
+export declare const CardList: (props: _CardListProps) => JSX.Element;
+export {};