@reykjavik/hanna-react 0.10.55 → 0.10.56

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;

package/esm/NewsHero.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { getStableRandomItem } from '@reykjavik/hanna-utils';
+import Blings from './_abstract/_Blings';
+import Image from './_abstract/Image';
+import { useSeenEffect } from './utils/seenEffect';
+import ShareButtons from './ShareButtons';
+const blingOptions = {
+    interesting: [
+        {
+            type: 'circle-xlarge',
+            parent: 'center',
+        },
+        {
+            type: 'loops-small',
+            color: 'secondary',
+            align: 'left-ish',
+            vertical: 'down-ish',
+            parent: 'center',
+        },
+    ],
+    snake: [
+        {
+            type: 'snake-large',
+            align: 'left',
+            parent: 'top',
+            vertical: 'down',
+        },
+    ],
+    pentagon: [
+        {
+            type: 'pentagon-large',
+            align: 'left',
+            parent: 'center',
+        },
+    ],
+    dome: [
+        {
+            type: 'dome-large',
+            align: 'left-ish',
+            parent: 'top',
+            vertical: 'down',
+        },
+    ],
+    'balls-small': [
+        {
+            type: 'circle-large',
+            align: 'left',
+            parent: 'center',
+        },
+        {
+            type: 'circle-small',
+            color: 'secondary',
+            align: 'right',
+            parent: 'bottom',
+            vertical: 'down',
+        },
+    ],
+    'balls-large': [
+        {
+            type: 'halfcircle-down-large',
+            align: 'left',
+            parent: 'bottom',
+            vertical: 'up',
+        },
+        {
+            type: 'circle-medium',
+            color: 'secondary',
+            align: 'left-center',
+            parent: 'bottom',
+        },
+    ],
+};
+const NewsHero = (props) => {
+    const { title, sharing = true, meta, summary, image, blingType, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    const blings = (blingType && blingOptions[blingType]) || getStableRandomItem(blingOptions, title);
+    return (<div className={getBemClass('NewsHero', [!image && 'align--right'])} ref={ref}>
+      <div className="NewsHero__content">
+        <h1 className="NewsHero__title">{title}</h1>
+        {meta && <span className="NewsHero__meta">{meta}</span>}
+        <div className="NewsHero__summary">{summary}</div>
+        {sharing === true ? <ShareButtons /> : sharing && sharing()}
+      </div>
+      {image ? (<Image className="NewsHero__image" {...image}/>) : (<Blings blings={blings}/>)}
+    </div>);
+};
+export default NewsHero;

package/esm/PageFilter.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SeenProp } from './utils/seenEffect';
+export declare type PageFilterProps = {
+    title: string;
+    summary?: React.ReactNode;
+    footnote?: React.ReactNode;
+    buttonRow?: React.ReactNode;
+    underlap?: boolean;
+} & ({
+    filters: React.ReactNode;
+    children?: never;
+} | {
+    filters?: never;
+    children: React.ReactNode;
+}) & SeenProp;
+declare const PageFilter: (props: PageFilterProps) => JSX.Element;
+export default PageFilter;

package/esm/PageFilter.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useSeenEffect } from './utils/seenEffect';
+import Footnote from './Footnote';
+const PageFilter = (props) => {
+    const { title, summary, footnote, filters, children, buttonRow, underlap, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    return (<div className={getBemClass('PageFilter', underlap && 'underlap')} ref={ref}>
+      <h2 className="PageFilter__title">{title}</h2>
+      {summary && <div className="PageFilter__summary">{summary}</div>}
+      <div className="PageFilter__filters">{filters || children}</div>
+      <div className="PageFilter__buttons">{buttonRow}</div>
+      {footnote && <Footnote>{footnote}</Footnote>}
+    </div>);
+};
+export default PageFilter;

package/esm/PageHeading.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { SeenProp } from './utils/seenEffect';
+export declare type PageHeadingProps = {
+    Tag?: 'h1' | 'h2';
+    align?: 'right';
+    small?: boolean;
+    children: ReactNode;
+} & SeenProp;
+declare const PageHeading: (props: PageHeadingProps) => JSX.Element;
+export default PageHeading;

package/esm/PageHeading.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useSeenEffect } from './utils/seenEffect';
+const PageHeading = (props) => {
+    const { Tag = 'h1', align, small, children, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    return (<Tag className={getBemClass('PageHeading', [
+            small && 'small',
+            align === 'right' && 'align--' + align,
+        ])} ref={ref}>
+      {children}
+    </Tag>);
+};
+export default PageHeading;

package/esm/ProcessOverview.d.ts

@@ -0,0 +1,13 @@
+export declare type ProcessOverviewItemProps = {
+    title: string;
+    content: string | JSX.Element;
+};
+export declare type ProcessOverviewProps = {
+    title: string;
+    items: Array<ProcessOverviewItemProps>;
+    attention?: string | JSX.Element;
+    transparent?: boolean;
+    narrow?: boolean;
+};
+declare const ProcessOverview: (props: ProcessOverviewProps) => JSX.Element;
+export default ProcessOverview;

package/esm/ProcessOverview.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const ProcessOverview = (props) => {
+    const { title, items, attention, transparent, narrow } = props;
+    return (<div className={getBemClass('ProcessOverview', [
+            transparent && 'transparent',
+            narrow && 'narrow',
+        ])}>
+      <h2 className="ProcessOverview__title">{title}</h2>
+      {items.map(({ title, content }, i) => {
+            return (<div key={i} className="ProcessOverview__item">
+            <h3 className="ProcessOverview__item__title">{title}</h3>
+            <div className="ProcessOverview__item__content">{content}</div>
+          </div>);
+        })}
+
+      {attention && <div className="ProcessOverview__attention">{attention}</div>}
+    </div>);
+};
+export default ProcessOverview;

package/esm/PullQuote.d.ts

@@ -0,0 +1,4 @@
+import { QuoteProps } from './_abstract/_Quote';
+export declare type PullQuoteProps = QuoteProps;
+declare const PullQuote: (props: PullQuoteProps) => JSX.Element;
+export default PullQuote;

package/esm/PullQuote.jsx

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