@reykjavik/hanna-react 0.10.53 → 0.10.56

package/esm/TagPill.jsx

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import Button from './_abstract/Button';
+const colors = {
+    normal: '',
+    green: 'color--green',
+    yellow: 'color--yellow',
+    orange: 'color--orange',
+    red: 'color--red',
+};
+const TagPill = (props) => {
+    const { modifier, large, removable, onRemove, children, color = 'normal', label = children, removeLabel = 'x', removeLabelLong = removeLabel } = props, buttonProps = __rest(props, ["modifier", "large", "removable", "onRemove", "children", "color", "label", "removeLabel", "removeLabelLong"]);
+    const isStatic = !('href' in props || 'type' in props || props.onClick);
+    process.env.NODE_ENV !== 'production' &&
+        removable &&
+        isStatic &&
+        !onRemove &&
+        console.warn('static (non-button) `TagPill`s must not be removable');
+    const modifiers = [modifier, large && 'large', colors[color]];
+    const removeBtn = removable && (<button className="TagPill__remove" onClick={onRemove && (() => onRemove())} aria-label={removeLabelLong} type="button">
+      {removeLabel}
+    </button>);
+    return isStatic ? (<span className={getBemClass('TagPill', modifiers)}>
+      {label} {removeBtn}
+    </span>) : onRemove ? (<span className={getBemClass('TagPill', modifiers)}>
+      <Button bem="TagPill__button" {...buttonProps}>
+        {label}
+      </Button>{' '}
+      {removeBtn}
+    </span>) : (<Button bem="TagPill" {...buttonProps} modifier={modifiers}>
+      {label}{' '}
+      {removable && (<span className="TagPill__remove" aria-label={removeLabelLong}>
+          {removeLabel}
+        </span>)}
+    </Button>);
+};
+export default TagPill;

package/esm/TextBlock.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { SeenProp } from './utils/seenEffect';
+import { ComponentLayoutProps } from './constants';
+export declare type TextBlockProps = ComponentLayoutProps & {
+    /** Make H2 headings float to the left
+     *
+     * Overrides the `align` and `wide` prop and automatically sets `align` to `right`
+     */
+    labelled?: boolean;
+    /** Sets a smaller text-size */
+    small?: boolean;
+    children: ReactNode;
+} & SeenProp;
+declare const TextBlock: (props: TextBlockProps) => JSX.Element;
+export default TextBlock;

package/esm/TextBlock.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useSeenEffect } from './utils/seenEffect';
+const TextBlock = (props) => {
+    const { children, align, labelled, wide, small, startSeen } = props;
+    const rightAligned = align === 'right' || labelled;
+    const [ref] = useSeenEffect(startSeen);
+    return (<div className={getBemClass('TextBlock', [
+            labelled && 'labelled',
+            rightAligned && 'align--right',
+            wide && !rightAligned && 'wide',
+            small && !labelled && 'small',
+        ])} ref={ref}>
+      {children}
+    </div>);
+};
+export default TextBlock;

package/esm/TextButton.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from './_abstract/Button';
+export declare type TextButtonProps = ButtonProps & {
+    disabled?: never;
+};
+declare const TextButton: (props: TextButtonProps & {
+    children?: ReactNode;
+}) => JSX.Element;
+export default TextButton;

package/esm/TextButton.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import Button from './_abstract/Button';
+const TextButton = (props) => {
+    if ('disabled' in props) {
+        props = Object.assign(Object.assign({}, props), { disabled: undefined });
+    }
+    return <Button bem="TextButton" {...props}/>;
+};
+export default TextButton;

package/esm/TextInput.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+import { FormFieldWrappingProps } from './FormField';
+declare type InputElmProps = JSX.IntrinsicElements['input'];
+declare type TextareaElmProps = JSX.IntrinsicElements['textarea'];
+export declare type TextInputProps = {
+    small?: boolean;
+    children?: undefined;
+} & FormFieldWrappingProps & (({
+    type?: 'text' | 'email' | 'tel' | 'number' | 'date' | 'url' | 'password' | 'search';
+    inputRef?: RefObject<HTMLInputElement>;
+} & InputElmProps) | ({
+    type: 'textarea';
+    inputRef?: RefObject<HTMLTextAreaElement>;
+} & TextareaElmProps));
+declare const TextInput: (props: TextInputProps) => JSX.Element;
+export default TextInput;

package/esm/TextInput.jsx

@@ -0,0 +1,35 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useState } from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import FormField from './FormField';
+const TextInput = (props) => {
+    var _a;
+    const { className, label, assistText, hideLabel, disabled, readOnly, invalid, errorMessage, required, reqText, id, onChange, small, type, ssr, inputRef } = props, inputElementProps = __rest(props, ["className", "label", "assistText", "hideLabel", "disabled", "readOnly", "invalid", "errorMessage", "required", "reqText", "id", "onChange", "small", "type", "ssr", "inputRef"]);
+    const { value, defaultValue, placeholder } = inputElementProps;
+    const [hasValue, setHasValue] = useState(undefined);
+    const filled = !!((_a = value !== null && value !== void 0 ? value : hasValue) !== null && _a !== void 0 ? _a : !!defaultValue);
+    const empty = !filled && !placeholder;
+    const multiline = type === 'textarea';
+    const modifiers = [multiline && 'multiline'];
+    const _onChange = value != null
+        ? onChange
+        : (e) => {
+            setHasValue(!!e.target.value);
+            onChange &&
+                onChange(
+                // TypeScript is silly sometimes.
+                e);
+        };
+    return (<FormField className={getBemClass('TextInput', modifiers, className)} ssr={ssr} small={small} label={label} empty={empty} filled={filled} assistText={assistText} hideLabel={hideLabel} disabled={disabled} readOnly={readOnly} invalid={invalid} errorMessage={errorMessage} required={required} reqText={reqText} id={id} renderInput={(className, inputProps, addFocusProps) => multiline ? (<textarea className={className.input} onChange={_onChange} {...inputProps} {...addFocusProps(inputElementProps)} ref={inputRef}/>) : (<input className={className.input} onChange={_onChange} type={type} {...inputProps} {...addFocusProps(inputElementProps)} ref={inputRef}/>)}/>);
+};
+export default TextInput;

package/esm/VSpacer.d.ts

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

package/esm/VSpacer.jsx

@@ -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;
+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 ? (<div className={className}>{children}</div>) : (<hr className={className}/>);
+};
+export default VSpacer;

package/esm/VerticalTabsTOC.d.ts

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

package/esm/VerticalTabsTOC.jsx

@@ -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';
+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 };
+};
+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 (<Tabs id={domid} vertical 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 { SSRSupport } from '@hugsmidjan/react/hooks';
+import { HannaColorTheme } from '@reykjavik/hanna-css';
+declare type WizardLayoutProps = {
+    wizardStepper?: ReactNode;
+    wizardFooter?: ReactNode;
+    colorTheme?: HannaColorTheme;
+    siteName?: string;
+    logoLink?: string;
+    globalAlerts?: ReactNode;
+    ssr?: SSRSupport;
+    children?: ReactNode;
+};
+declare const WizardLayout: (props: WizardLayoutProps) => JSX.Element;
+export default WizardLayout;

package/esm/WizardLayout.jsx

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

package/esm/WizardLayoutClose.d.ts

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

package/esm/WizardLayoutClose.jsx

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

package/esm/WizardStepper.d.ts

@@ -0,0 +1,36 @@
+export declare 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 declare type WizardStepperProps = {
+    steps: ReadonlyArray<WizardStepperStep>;
+    /** Zero-based index of the active (current) step */
+    activeStep?: number;
+    /** By default, clickable "done" steps remain clickable */
+    disableBacktrack?: boolean;
+    /** By default, clickable steps after the active step are not immediately clickable */
+    allowForwardSkip?: boolean;
+    onClick: (clickedIndex: number) => void;
+};
+declare const WizardStepper: (props: WizardStepperProps) => JSX.Element;
+export default WizardStepper;

package/esm/WizardStepper.jsx

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

package/esm/_abstract/Button.d.ts

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

package/esm/_abstract/Button.jsx

@@ -0,0 +1,51 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { Link } from './Link';
+// ---------------------------------------------------------------------------
+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',
+};
+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 (<Link className={className} {...buttonProps} style={undefined} {...iconProp}>
+        {label}
+      </Link>);
+    }
+    else {
+        return (<button className={className} type="button" {...buttonProps} style={undefined} {...iconProp}>
+        {label}
+      </button>);
+    }
+};
+export default Button;

package/esm/_abstract/CardList.d.ts

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

package/esm/_abstract/CardList.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Button from './Button';
+import Image from './Image';
+const Card = (props) => {
+    const { bem, href, title, imgPlaceholder } = props;
+    const cardClass = `${bem}__card`;
+    const image = 'image' in props && props.image;
+    const meta = 'meta' in props && props.meta;
+    const summary = 'summary' in props && props.summary;
+    return (<>
+      <Button bem={cardClass} href={href}>
+        {' '}
+        <Image className={`${bem}__image`} {...image} placeholder={imgPlaceholder}/>
+        <span className={`${cardClass}__title`}>{title}</span>{' '}
+        {meta && <span className={`${cardClass}__meta`}>{meta}</span>}{' '}
+        {summary && <span className={`${cardClass}__summary`}>{summary}</span>}{' '}
+      </Button>{' '}
+    </>);
+};
+export const CardList = (props) => {
+    const { bemPrefix, title, summaryElement, cards, titleTag = 'h2', children, imgPlaceholder, } = props;
+    const TitleTag = titleTag;
+    const fallbackImage = (imgPlaceholder !== true && imgPlaceholder) || undefined;
+    const fallbackImageStyle = fallbackImage
+        ? { '--ImageCards--fallback': `url("${fallbackImage}")` }
+        : undefined;
+    return (<>
+      {summaryElement ? (<div className={bemPrefix + '__summary'}>
+          {title && <TitleTag className={bemPrefix + '__title'}>{title}</TitleTag>}
+          {summaryElement}
+        </div>) : (title && <TitleTag className={bemPrefix + '__title'}>{title}</TitleTag>)}
+      <ul className={bemPrefix + '__list'} style={fallbackImageStyle}>
+        {cards.map((card, i) => (<li key={i} className={bemPrefix + '__item'}>
+            <Card {...card} bem={bemPrefix} imgPlaceholder={!!imgPlaceholder}/>
+          </li>))}
+      </ul>
+      {children}
+    </>);
+};

package/esm/_abstract/Image.d.ts

@@ -0,0 +1,32 @@
+export declare type Source = {
+    srcset: string;
+    media: string;
+};
+export declare type ImageProps = {
+    altText?: string;
+} & ({
+    sources?: Array<Source>;
+    /** The default image source to (lazy) load */
+    src?: string;
+    /** Eagerly-loaded placeholder/thunbnail to use until a `sources` item has been picked.  */
+    preloadSrc?: string;
+    inline?: false;
+} | {
+    /** Should the image be fetched and inlined as <svg/> */
+    inline: true;
+    src: string;
+    sources?: undefined;
+    preloadSrc?: undefined;
+});
+declare type _ImageProps = {
+    /** container className */
+    className?: string;
+    /** Controls if the container is rendered when image is missing/undefined.
+     * (With a `--missing` className modifier added.)
+     *
+     * Accepts a function that defines a default content for the container.
+     */
+    placeholder?: boolean | (() => JSX.Element);
+};
+declare const Image: (props: ImageProps & _ImageProps) => JSX.Element | null;
+export default Image;