@reykjavik/hanna-react 0.10.53 → 0.10.56

package/esm/LabeledTextBlock.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useSeenEffect } from './utils/seenEffect';
+import ButtonTertiary from './ButtonTertiary';
+const LabeledTextBlock = (props) => {
+    const { label, summary, wide, buttons = [], startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    return (<div className={getBemClass('LabeledTextBlock', wide && 'wide')} ref={ref}>
+      <h2 className="LabeledTextBlock__label">{label}</h2>
+      <div className="LabeledTextBlock__summary">
+        {summary}
+        {buttons.map((button, i) => (<ButtonTertiary key={i} {...button}/>))}
+      </div>
+    </div>);
+};
+export default LabeledTextBlock;

package/esm/Layout.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { SSRSupport } from '@hugsmidjan/react/hooks';
+import { BemPropsModifier } from '@hugsmidjan/react/types';
+import { HannaColorTheme } from '@reykjavik/hanna-css';
+import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+export declare type LayoutI18n = {
+    lang?: string;
+    skipLinkLabel: string;
+    closeMenuLabel: string;
+    closeMenuLabelLong?: string;
+};
+export declare const defaultLayoutTexts: DefaultTexts<LayoutI18n>;
+declare type LayoutProps = {
+    globalAlerts?: ReactNode;
+    mainChildren?: ReactNode;
+    navChildren?: ReactNode;
+    footerChildren?: ReactNode;
+    colorTheme?: HannaColorTheme;
+    logoLink?: string;
+    siteName?: string;
+    modifier?: BemPropsModifier['modifier'];
+    ssr?: SSRSupport;
+    texts?: LayoutI18n;
+    lang?: string;
+} & ({
+    mainChildren: ReactNode;
+    children?: never;
+} | {
+    mainChildren?: never;
+    children: ReactNode;
+});
+declare const Layout: (props: LayoutProps) => JSX.Element;
+export default Layout;

package/esm/Layout.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useIsBrowserSide } from '@hugsmidjan/react/hooks';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { getAssetUrl } from '@reykjavik/hanna-utils/assets';
+import { getTexts } from '@reykjavik/hanna-utils/i18n';
+import Image from './_abstract/Image';
+import { Link } from './_abstract/Link';
+import { useMenuToggling } from './utils/useMenuToggling';
+import { useScrollbarWidthCSSVar } from './utils/useScrollbarWidthCSSVar';
+export const defaultLayoutTexts = {
+    is: {
+        lang: 'is',
+        skipLinkLabel: 'Valmynd',
+        closeMenuLabel: 'Loka',
+        closeMenuLabelLong: 'Loka valmynd',
+    },
+    en: {
+        lang: 'en',
+        skipLinkLabel: 'Skip to navigation',
+        closeMenuLabel: 'Close',
+        closeMenuLabelLong: 'Close menu',
+    },
+};
+const Layout = (props) => {
+    useScrollbarWidthCSSVar();
+    const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName = 'Reykjavík', logoLink = '/', } = props;
+    const { isMenuActive, closeMenu, toggleMenu } = useMenuToggling(ssr !== 'ssr-only');
+    const isBrowser = useIsBrowserSide( /* ssr */);
+    const txt = getTexts(props, defaultLayoutTexts);
+    return (<div className={getBemClass('Layout', props.modifier)} data-sprinkled={isBrowser} data-color-theme={colorTheme}>
+      {globalAlerts && (<div className="Layout__alerts" role="alert">
+          {globalAlerts}
+        </div>)}
+      <div className="Layout__content">
+        <div className="Layout__header" role="banner">
+          <Link className="Layout__header__logo" href={logoLink}>
+            {' '}
+            <Image inline={true} src={getAssetUrl('reykjavik-logo.svg')}/> {siteName}{' '}
+          </Link>{' '}
+          {navChildren && (<Link className="Layout__header__skiplink" href="#pagenav" onClick={isMenuActive &&
+                ((e) => {
+                    e.preventDefault();
+                    toggleMenu();
+                })} aria-label={txt.skipLinkLabel}>
+              {txt.skipLinkLabel}
+            </Link>)}
+        </div>
+        <div className="Layout__main" role="main">
+          {mainChildren || children}
+        </div>
+        {navChildren && (<div className="Layout__nav" id="pagenav" role="navigation">
+            {navChildren}
+            {isMenuActive && (<button className="Layout__nav__closebutton" onClick={closeMenu} aria-label={txt.closeMenuLabelLong} type="button">
+                {txt.closeMenuLabel}
+              </button>)}
+          </div>)}
+        <div className="Layout__footer" role="complementary">
+          {footerChildren}
+        </div>
+      </div>
+    </div>);
+};
+export default Layout;

package/esm/MainMenu/_Auxiliary.d.ts

@@ -0,0 +1,6 @@
+import type { MegaMenuPanel } from '../MainMenu';
+export declare type AuxilaryPanelIllustration = 'hanna-veitiggi' | 'hanna-vandro' | 'hanna-hugsi' | 'hanna-hissa' | 'hanna-hahaha' | 'hanna-hae' | 'hanna-god_spurning' | 'hanna-gjuggiborg' | 'hanna-benda';
+export declare type AuxiliaryPanelProps = MegaMenuPanel & {
+    image?: AuxilaryPanelIllustration;
+};
+export declare const AuxiliaryPanel: (props: AuxiliaryPanelProps) => JSX.Element;

package/esm/MainMenu/_Auxiliary.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
+import { Link } from '../_abstract/Link';
+export const AuxiliaryPanel = (props) => {
+    const { title, id, items, image } = props;
+    const imageUrl = image ? getIllustrationUrl(image) : image;
+    return (<li className="AuxiliaryPanel" id={id} style={imageUrl
+            ? { '--menu-auxiliary-image': `url(${imageUrl})` }
+            : undefined}>
+      <h3 className="AuxiliaryPanel__title">{title}</h3>
+      <ul className="AuxiliaryPanel__items">
+        {items.map((item, i) => (<li key={i} className="AuxiliaryPanel__item" aria-current={item.current || undefined}>
+            <Link className="AuxiliaryPanel__link" href={item.href} target={item.target} lang={item.lang}>
+              {item.label}
+            </Link>
+          </li>))}
+      </ul>
+    </li>);
+};

package/esm/MainMenu/_PrimaryPanel.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+import { MainMenuI18n, MegaMenuPanel } from '../MainMenu';
+declare type PrimaryPanelProps = {
+    setActivePanel: (panel: MegaMenuPanel | undefined, setFocus?: boolean) => void;
+    isParent?: boolean;
+    isActive?: boolean;
+    panel: MegaMenuPanel;
+    texts: MainMenuI18n;
+    activeRef: RefObject<HTMLLIElement>;
+    isBrowser: true | undefined;
+};
+export declare const PrimaryPanel: (props: PrimaryPanelProps) => JSX.Element;
+export {};

package/esm/MainMenu/_PrimaryPanel.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { Link } from '../_abstract/Link';
+export const PrimaryPanel = (props) => {
+    const { setActivePanel, panel, isParent, isActive, isBrowser, texts } = props;
+    const { items } = panel;
+    return (<li ref={isActive ? props.activeRef : undefined} className={getBemClass('PrimaryPanel', [
+            isParent && 'parent',
+            isActive && 'active',
+            items.length > 5 && 'twocol', // TODO: allow setting twocol manually?
+        ])} id={panel.id}>
+      <h3 className="PrimaryPanel__title">
+        {' '}
+        {isBrowser && !isActive ? (<button className="MainMenu__mega__title-toggler" aria-controls={panel.id} onClick={() => setActivePanel(panel, false)} aria-pressed={isActive} type="button">
+            {panel.title}
+          </button>) : (panel.title)}
+      </h3>
+      <ul className="PrimaryPanel__items">
+        {items.map((item, i) => (<li key={i} className="PrimaryPanel__item" aria-current={item.current || undefined}>
+            <Link className="PrimaryPanel__link" href={item.href} target={item.target} lang={item.lang}>
+              <span className="PrimaryPanel__linkTitle">{item.label}</span>{' '}
+              <small className="PrimaryPanel__summary">{item.summary}</small>{' '}
+            </Link>
+          </li>))}
+      </ul>
+      {isBrowser && isActive && (<button className="MainMenu__megapanel__backtomenu" aria-controls={panel.id} aria-label={texts.backToMenuLong} onClick={() => setActivePanel(undefined)} type="button">
+          {texts.backToMenu}
+        </button>)}
+    </li>);
+};

package/esm/MainMenu.d.ts

@@ -0,0 +1,48 @@
+import { SSRSupport } from '@hugsmidjan/react/hooks';
+import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { AuxilaryPanelIllustration, AuxiliaryPanelProps } from './MainMenu/_Auxiliary';
+export declare type MainMenuI18n = {
+    lang?: string;
+    backToMenu: string;
+    backToMenuLong?: string;
+};
+export declare const defaultMainMenuTexts: DefaultTexts<MainMenuI18n>;
+export type { AuxilaryPanelIllustration, AuxiliaryPanelProps };
+export declare type MainMenuItem = {
+    label: string;
+    labelLong?: string;
+    lang?: string;
+    modifier?: string;
+    current?: boolean;
+    href?: string;
+    onClick?: (index: number, item: MainMenuItem) => void;
+    controlsId?: string;
+};
+export declare type MainMenuSeparator = '---';
+export declare type MainMenuItemList = Array<MainMenuItem | MainMenuSeparator>;
+export declare type MegaMenuItem = {
+    label: string;
+    summary?: string;
+    href: string;
+    lang?: string;
+    current?: boolean;
+    target?: string;
+};
+export declare type MegaMenuPanel = {
+    title: string;
+    items: Array<MegaMenuItem>;
+    id: string;
+};
+export declare type MainMenuProps = {
+    title: string;
+    items: MainMenuItemList;
+    megaPanels?: Array<MegaMenuPanel>;
+    auxiliaryPanel?: AuxiliaryPanelProps;
+    onItemClick?: (index: number, item: MainMenuItem) => void;
+    activePanelId?: string;
+    texts?: MainMenuI18n;
+    lang?: string;
+    ssr?: SSRSupport;
+};
+declare const MainMenu: (props: MainMenuProps) => JSX.Element | null;
+export default MainMenu;

package/esm/MainMenu.jsx

@@ -0,0 +1,149 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import focusElm from '@hugsmidjan/qj/focusElm';
+import { useIsBrowserSide } from '@hugsmidjan/react/hooks';
+import useShortState from '@hugsmidjan/react/hooks/useShortState';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { getPageScrollElm } from '@reykjavik/hanna-utils';
+import { getTexts } from '@reykjavik/hanna-utils/i18n';
+import { Link } from './_abstract/Link';
+import { AuxiliaryPanel, } from './MainMenu/_Auxiliary';
+import { PrimaryPanel } from './MainMenu/_PrimaryPanel';
+import { useFormatMonitor } from './utils/useFormatMonitor';
+const findActivePanel = (megaPanels, activeId) => activeId ? megaPanels.find((panel) => activeId === panel.id) : undefined;
+export const defaultMainMenuTexts = {
+    is: { lang: 'is', backToMenu: 'Loka', backToMenuLong: 'Til baka í valmynd' },
+    en: { lang: 'en', backToMenu: 'Close', backToMenuLong: 'Close and return to menu' },
+};
+const MainMenu = (props) => {
+    const { title, megaPanels = [], onItemClick, ssr, auxiliaryPanel } = props;
+    const isBrowser = useIsBrowserSide(ssr);
+    const menuElmRef = useRef(null);
+    const pressedLinkRef = useRef(null);
+    const activePanelRef = useRef(null);
+    const [activePanel, _setActivePanel] = useState(() => isBrowser && findActivePanel(megaPanels, props.activePanelId));
+    const [laggyActivePanel, setLaggyActivePanel] = useShortState();
+    const setActivePanel = useCallback((newActive, setFocus = true) => {
+        const htmlElmDataset = document.documentElement.dataset;
+        // const menuElm = menuElmRef.current as HTMLElement;
+        _setActivePanel((activePanel) => {
+            const scrollElm = getPageScrollElm();
+            if (!newActive) {
+                activePanel && setLaggyActivePanel(activePanel, 1000);
+                scrollElm.scrollTop = parseInt(htmlElmDataset.scrollTop || '') || 0;
+                delete htmlElmDataset.scrollTop;
+                delete htmlElmDataset.megaPanelActive;
+            }
+            else {
+                setLaggyActivePanel(undefined, 0);
+                htmlElmDataset.scrollTop = String(scrollElm.scrollTop);
+                scrollElm.scrollTop = 0;
+                htmlElmDataset.megaPanelActive = '';
+            }
+            if (setFocus) {
+                const pressedLinkElm = pressedLinkRef.current; // pressedLinkElm will be undefined when setTimeout fires
+                setTimeout(() => {
+                    if (!newActive) {
+                        // const buttonElm = menuElm.querySelector<HTMLButtonElement>(
+                        // 	'button.MainMenu__link[aria-pressed="true"]'
+                        // );
+                        focusElm(pressedLinkElm);
+                    }
+                    else if (newActive !== activePanel) {
+                        // const panelElm = menuElm.querySelector<HTMLButtonElement>(
+                        // 	'.PrimaryPanel--active'
+                        // );
+                        focusElm(activePanelRef.current);
+                    }
+                }, 100);
+            }
+            return newActive;
+        });
+    }, [setLaggyActivePanel]);
+    useFormatMonitor((media) => {
+        if (media.leftTopmenu) {
+            setActivePanel(undefined);
+        }
+    });
+    const hasActivePanel = !!activePanel;
+    const menuItems = useMemo(() => props.items.map((item) => {
+        if (item === '---') {
+            return item;
+        }
+        const href = item.href;
+        const controlsId = item.controlsId || (href && /^#/.test(href) && href.slice(1)) || undefined;
+        return Object.assign(Object.assign({}, item), { controlsId, megaPanel: controlsId && megaPanels.find((panel) => panel.id === controlsId) });
+    }), [props.items, megaPanels]);
+    useEffect(() => {
+        setActivePanel(findActivePanel(megaPanels, props.activePanelId));
+    }, [props.activePanelId, megaPanels, setActivePanel]);
+    useEffect(() => {
+        const menuElm = menuElmRef.current;
+        if (!hasActivePanel || !menuElm) {
+            return;
+        }
+        const escHandler = (e) => {
+            if (e.key === 'Escape') {
+                setActivePanel(undefined);
+            }
+        };
+        const clickHandler = (e) => {
+            if (!menuElm.contains(e.target)) {
+                setActivePanel(undefined);
+            }
+        };
+        document.addEventListener('keydown', escHandler);
+        document.addEventListener('click', clickHandler, true);
+        return () => {
+            document.removeEventListener('keydown', escHandler);
+            document.removeEventListener('click', clickHandler, true);
+        };
+    }, [hasActivePanel, setActivePanel]);
+    if (menuItems.length === 0) {
+        return null;
+    }
+    return (<nav className="MainMenu" aria-label={title} data-sprinkled={isBrowser} ref={menuElmRef}>
+      <h2 className="MainMenu__title">{title}</h2>
+      <ul className="MainMenu__items">
+        {menuItems.map((item, i) => {
+            if (item === '---') {
+                return <li key={i} className="MainMenu__separator" aria-hidden="true"/>;
+            }
+            const { label, labelLong, lang, controlsId, onClick } = item;
+            const pressed = (activePanel && controlsId === activePanel.id) || undefined;
+            return (<li key={i} className={getBemClass('MainMenu__item', item.modifier)} aria-current={item.current || undefined}>
+              {onClick || (!!item.megaPanel && (isBrowser || item.href != null)) ? (
+                // only print script-driven buttons in the browser
+                <button className="MainMenu__link" onClick={() => {
+                        item.megaPanel && setActivePanel(item.megaPanel);
+                        onClick && onClick(i, item);
+                        onItemClick && onItemClick(i, item);
+                    }} ref={pressed && pressedLinkRef} aria-pressed={pressed} aria-controls={controlsId} aria-label={labelLong} title={labelLong} // For auto-tooltips on desktop
+                 lang={lang} type="button">
+                    {label}
+                  </button>) : item.href != null ? (
+                // always render links server-side
+                <Link className="MainMenu__link" href={item.href} aria-label={labelLong} title={labelLong} // For auto-tooltips on desktop
+                 onClick={onItemClick && (() => onItemClick(i, item))} lang={lang}>
+                    {label}
+                  </Link>) : undefined // skip rendering non-link menu items server side
+                }
+            </li>);
+        })}
+      </ul>
+      {'\n\n'}
+      {megaPanels.length > 0 && (<div className={getBemClass('MainMenu__panelsWrap', [activePanel && 'active'])}>
+          <ul className="MainMenu__panels">
+            {megaPanels.map((panel, i) => {
+                if (!panel.items.length) {
+                    return;
+                }
+                const isActive = activePanel === panel || laggyActivePanel === panel || undefined;
+                const isParent = !!panel.items.find((item) => item.current);
+                return (<PrimaryPanel key={i} isParent={isParent} isActive={isActive} panel={panel} isBrowser={isBrowser} setActivePanel={setActivePanel} texts={getTexts(props, defaultMainMenuTexts)} activeRef={activePanelRef}/>);
+            })}
+            {auxiliaryPanel && <AuxiliaryPanel {...auxiliaryPanel}/>}
+          </ul>
+        </div>)}
+    </nav>);
+};
+export default MainMenu;

package/esm/MiniMetrics.d.ts

@@ -0,0 +1,8 @@
+import { ButtonProps } from './_abstract/Button';
+import { SeenProp } from './utils/seenEffect';
+export declare type MiniMetricsProps = {
+    text: string;
+    moreButton: ButtonProps;
+} & SeenProp;
+declare const MiniMetrics: (props: MiniMetricsProps) => JSX.Element;
+export default MiniMetrics;

package/esm/MiniMetrics.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import Button from './_abstract/Button';
+import SeenEffect from './SeenEffect';
+const MiniMetrics = (props) => {
+    const { text, moreButton, startSeen } = props;
+    return (<SeenEffect className="MiniMetrics" startSeen={startSeen}>
+      <strong className="MiniMetrics__text">{text}</strong> {'\n'}
+      <Button bem="MiniMetrics__more" {...moreButton}/>
+    </SeenEffect>);
+};
+export default MiniMetrics;

package/esm/Modal.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { ModalProps as _ModalProps } from '@hugsmidjan/react/Modal';
+export declare type ModalProps = _ModalProps & {
+    bem?: never;
+    bodyWrap?: never;
+    modifier?: 'w6' | 'w8' | 'w10';
+    bling?: ReactElement;
+};
+declare const Modal: (props: ModalProps) => JSX.Element;
+export default Modal;

package/esm/Modal.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import _Modal from '@hugsmidjan/react/Modal';
+const Modal = (props) => {
+    const { closeDelay = 500, texts = {
+        closeButton: 'Loka ',
+    }, bling, children, render = () => children, } = props;
+    return (<_Modal {...props} bodyWrap={false} bem="Modal" closeDelay={closeDelay} texts={texts} render={(args) => bling ? (<>
+            {render(args)}
+            <div className="Modal__blings">
+              <div className="Modal__blings__inner">{bling}</div>
+            </div>
+          </>) : (render(args))} 
+    // eslint-disable-next-line react/no-children-prop
+    children={undefined}/>);
+};
+export default Modal;

package/esm/NameCard.d.ts

@@ -0,0 +1,64 @@
+export declare type NameCardI18n = {
+    updatedLabel: string;
+    availableLabel: string;
+    unavailableLabel: string;
+    /** @deprecated Use availableLabel instead  (will be removed in v0.11) */
+    vacancyLabel?: string;
+    /** @deprecated Use unavailableLabel instead  (will be removed in v0.11) */
+    noVacancyLabel?: string;
+    /** @deprecated Not used anymore  (will be rmoved in v0.11) */
+    telLabel?: string;
+};
+declare type ContactInfo = {
+    href: string;
+    label: string;
+    longLabel?: string;
+};
+/** @deprecated use label and longLabel props instead  (Will be removed in v0.11) */
+declare type DeprecatedContactInfo = {
+    href: string;
+    value: string;
+    label?: string;
+};
+export declare type NameCardProps = {
+    name: string;
+    /** Phone numbers, e-mail addresses, etc. */
+    contactInfo?: Array<string | ContactInfo | DeprecatedContactInfo>;
+    /** Address/location info
+     *
+     * Special handling of string:
+     * Inserts `<br/>`s on `\n`. Collapses multiple `\n`s.
+     *
+     * Only simple, inline element HTML allowed
+     */
+    location?: string | JSX.Element;
+    /** Misc info such as opening-hours, etc.
+     *
+     * Special handling of string:
+     * Inserts `<br/>`s on `\n`. Collapses multiple `\n`s.
+     *
+     * Only simple, inline element HTML allowed
+     */
+    aboutText?: string | JSX.Element;
+    /**
+     * Designated for info about working/opening hours
+     *
+     * Special handling of string:
+     * Inserts `<br/>`s on `\n`. Collapses multiple `\n`s.
+     *
+     * Only simple, inline element HTML allowed
+     */
+    hours?: string | JSX.Element;
+    /** Displays "active" indicator. Use for vacancies, inline-status, etc. */
+    available?: boolean;
+    /** Meta data about freshness status, etc. */
+    updated?: string | Date;
+    lang?: string;
+    texts?: NameCardI18n;
+    /** @deprecated Use `available` instead  (will be removed in v0.11) */
+    vacancy?: boolean;
+    /** @deprecated Use `contactInfo` instead  (will be removed in v0.11) */
+    tel?: string | Array<string>;
+};
+declare const NameCard: (props: NameCardProps) => JSX.Element;
+export default NameCard;

package/esm/NameCard.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { getTexts } from '@reykjavik/hanna-utils/i18n';
+import breakOnNL from './_abstract/breakOnNL';
+import Button from './_abstract/Button';
+const formatDate = (date) => {
+    return typeof date === 'string'
+        ? date
+        : date.toISOString().slice(0, 10).replace(/-/g, '.');
+};
+const _telToContactInfo = (tel) => {
+    if (!tel) {
+        return;
+    }
+    tel = typeof tel === 'string' ? [tel] : tel;
+    return tel.map((tel) => ({
+        href: 'tel:' + tel,
+        value: tel,
+    }));
+};
+const renderContent = (content) => typeof content === 'string' ? breakOnNL(content) : content;
+const defaultTexts = {
+    en: {
+        updatedLabel: 'Updated on',
+        availableLabel: '',
+        unavailableLabel: '',
+        vacancyLabel: 'Vacancy',
+        noVacancyLabel: 'No vacancy',
+    },
+    is: {
+        updatedLabel: 'Uppfært síðast',
+        availableLabel: '',
+        unavailableLabel: '',
+        vacancyLabel: 'Laus pláss',
+        noVacancyLabel: 'Ekki laus pláss',
+    },
+};
+const NameCard = (props) => {
+    const { name, location, hours, aboutText, available = props.vacancy, updated } = props;
+    const renderMeta = () => {
+        if (available == null && !updated) {
+            return;
+        }
+        const texts = getTexts(props, defaultTexts);
+        const { updatedLabel, availableLabel, unavailableLabel } = texts;
+        return (<div className="NameCard__meta">
+        {available != null && (<span className={getBemClass('NameCard__availability', available && 'available')}>
+            {available
+                    ? availableLabel || texts.vacancyLabel
+                    : unavailableLabel || texts.noVacancyLabel}{' '}
+          </span>)}
+        {updated != null && (<span className="NameCard__updated">
+            {updatedLabel} {formatDate(updated)}
+          </span>)}
+      </div>);
+    };
+    let contactInfo = props.contactInfo;
+    if (!contactInfo) {
+        contactInfo = _telToContactInfo(props.tel) || [];
+    }
+    // Remove/map @deprecated contactinfo items
+    const cleanContactInfo = contactInfo.map((item) => {
+        if (typeof item !== 'string' && 'value' in item) {
+            return {
+                href: item.href,
+                label: item.value,
+                longLabel: item.label,
+            };
+        }
+        return item;
+    });
+    return (<div className="NameCard">
+      <div className="NameCard__name">{name}</div>
+      {contactInfo.length > 0 && (<p className="NameCard__contactinfo">
+          {cleanContactInfo.map((item, i) => (<>
+              {typeof item === 'string' ? (<span className="NameCard__contactinfo__item">{item}</span>) : (<Button key={i} bem="NameCard__contactinfo__item" href={item.href} aria-label={item.longLabel} title={item.longLabel}>
+                  {item.label}
+                </Button>)}{' '}
+            </>))}
+        </p>)}
+      {location && <p className="NameCard__location">{renderContent(location)}</p>}
+      {hours && <p className="NameCard__hours">{renderContent(hours)}</p>}
+      {aboutText && <p className="NameCard__abouttext">{renderContent(aboutText)}</p>}
+      {renderMeta()}
+    </div>);
+};
+export default NameCard;

package/esm/NameCards.d.ts

@@ -0,0 +1,6 @@
+import { NameCardProps } from './NameCard';
+declare type NameCardsProps = {
+    items: Array<NameCardProps>;
+};
+declare const NameCards: (props: NameCardsProps) => JSX.Element;
+export default NameCards;

package/esm/NameCards.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import NameCard from './NameCard';
+const NameCards = (props) => {
+    const { items } = props;
+    return (<div className="NameCards">
+      {items.map((item, i) => (<NameCard key={i} {...item}/>))}
+    </div>);
+};
+export default NameCards;

package/esm/NewsHero.d.ts

@@ -0,0 +1,14 @@
+import { ImageProps } from './_abstract/Image';
+import { SeenProp } from './utils/seenEffect';
+declare type BlingOptions = 'interesting' | 'snake' | 'pentagon' | 'dome' | 'balls-small' | 'balls-large';
+export declare type NewsHeroProps = {
+    title: string;
+    meta?: string;
+    summary?: string | JSX.Element;
+    /** For custom sharing component  */
+    sharing?: boolean | (() => JSX.Element);
+    image?: ImageProps;
+    blingType?: BlingOptions;
+} & SeenProp;
+declare const NewsHero: (props: NewsHeroProps) => JSX.Element;
+export default NewsHero;