@reykjavik/hanna-react 0.10.55 → 0.10.56

package/MainMenu.jsx

@@ -0,0 +1,178 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultMainMenuTexts = void 0;
+const react_1 = __importStar(require("react"));
+const focusElm_1 = __importDefault(require("@hugsmidjan/qj/focusElm"));
+const hooks_1 = require("@hugsmidjan/react/hooks");
+const useShortState_1 = __importDefault(require("@hugsmidjan/react/hooks/useShortState"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
+const Link_1 = require("./_abstract/Link");
+const _Auxiliary_1 = require("./MainMenu/_Auxiliary");
+const _PrimaryPanel_1 = require("./MainMenu/_PrimaryPanel");
+const useFormatMonitor_1 = require("./utils/useFormatMonitor");
+const findActivePanel = (megaPanels, activeId) => activeId ? megaPanels.find((panel) => activeId === panel.id) : undefined;
+exports.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 = (0, hooks_1.useIsBrowserSide)(ssr);
+    const menuElmRef = (0, react_1.useRef)(null);
+    const pressedLinkRef = (0, react_1.useRef)(null);
+    const activePanelRef = (0, react_1.useRef)(null);
+    const [activePanel, _setActivePanel] = (0, react_1.useState)(() => isBrowser && findActivePanel(megaPanels, props.activePanelId));
+    const [laggyActivePanel, setLaggyActivePanel] = (0, useShortState_1.default)();
+    const setActivePanel = (0, react_1.useCallback)((newActive, setFocus = true) => {
+        const htmlElmDataset = document.documentElement.dataset;
+        // const menuElm = menuElmRef.current as HTMLElement;
+        _setActivePanel((activePanel) => {
+            const scrollElm = (0, hanna_utils_1.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"]'
+                        // );
+                        (0, focusElm_1.default)(pressedLinkElm);
+                    }
+                    else if (newActive !== activePanel) {
+                        // const panelElm = menuElm.querySelector<HTMLButtonElement>(
+                        // 	'.PrimaryPanel--active'
+                        // );
+                        (0, focusElm_1.default)(activePanelRef.current);
+                    }
+                }, 100);
+            }
+            return newActive;
+        });
+    }, [setLaggyActivePanel]);
+    (0, useFormatMonitor_1.useFormatMonitor)((media) => {
+        if (media.leftTopmenu) {
+            setActivePanel(undefined);
+        }
+    });
+    const hasActivePanel = !!activePanel;
+    const menuItems = (0, react_1.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]);
+    (0, react_1.useEffect)(() => {
+        setActivePanel(findActivePanel(megaPanels, props.activePanelId));
+    }, [props.activePanelId, megaPanels, setActivePanel]);
+    (0, react_1.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={(0, getBemClass_1.default)('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_1.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_1.Link>) : undefined // skip rendering non-link menu items server side
+                }
+            </li>);
+        })}
+      </ul>
+      {'\n\n'}
+      {megaPanels.length > 0 && (<div className={(0, getBemClass_1.default)('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_1.PrimaryPanel key={i} isParent={isParent} isActive={isActive} panel={panel} isBrowser={isBrowser} setActivePanel={setActivePanel} texts={(0, i18n_1.getTexts)(props, exports.defaultMainMenuTexts)} activeRef={activePanelRef}/>);
+            })}
+            {auxiliaryPanel && <_Auxiliary_1.AuxiliaryPanel {...auxiliaryPanel}/>}
+          </ul>
+        </div>)}
+    </nav>);
+};
+exports.default = MainMenu;

package/MiniMetrics.jsx

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Button_1 = __importDefault(require("./_abstract/Button"));
+const SeenEffect_1 = __importDefault(require("./SeenEffect"));
+const MiniMetrics = (props) => {
+    const { text, moreButton, startSeen } = props;
+    return (<SeenEffect_1.default className="MiniMetrics" startSeen={startSeen}>
+      <strong className="MiniMetrics__text">{text}</strong> {'\n'}
+      <Button_1.default bem="MiniMetrics__more" {...moreButton}/>
+    </SeenEffect_1.default>);
+};
+exports.default = MiniMetrics;

package/Modal.jsx

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Modal_1 = __importDefault(require("@hugsmidjan/react/Modal"));
+const Modal = (props) => {
+    const { closeDelay = 500, texts = {
+        closeButton: 'Loka ',
+    }, bling, children, render = () => children, } = props;
+    return (<Modal_1.default {...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}/>);
+};
+exports.default = Modal;

package/NameCard.jsx

@@ -0,0 +1,92 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
+const breakOnNL_1 = __importDefault(require("./_abstract/breakOnNL"));
+const Button_1 = __importDefault(require("./_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' ? (0, breakOnNL_1.default)(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 = (0, i18n_1.getTexts)(props, defaultTexts);
+        const { updatedLabel, availableLabel, unavailableLabel } = texts;
+        return (<div className="NameCard__meta">
+        {available != null && (<span className={(0, getBemClass_1.default)('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_1.default key={i} bem="NameCard__contactinfo__item" href={item.href} aria-label={item.longLabel} title={item.longLabel}>
+                  {item.label}
+                </Button_1.default>)}{' '}
+            </>))}
+        </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>);
+};
+exports.default = NameCard;

package/NameCards.jsx

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const NameCard_1 = __importDefault(require("./NameCard"));
+const NameCards = (props) => {
+    const { items } = props;
+    return (<div className="NameCards">
+      {items.map((item, i) => (<NameCard_1.default key={i} {...item}/>))}
+    </div>);
+};
+exports.default = NameCards;

package/NewsHero.jsx

@@ -0,0 +1,93 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
+const _Blings_1 = __importDefault(require("./_abstract/_Blings"));
+const Image_1 = __importDefault(require("./_abstract/Image"));
+const seenEffect_1 = require("./utils/seenEffect");
+const ShareButtons_1 = __importDefault(require("./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] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    const blings = (blingType && blingOptions[blingType]) || (0, hanna_utils_1.getStableRandomItem)(blingOptions, title);
+    return (<div className={(0, getBemClass_1.default)('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_1.default /> : sharing && sharing()}
+      </div>
+      {image ? (<Image_1.default className="NewsHero__image" {...image}/>) : (<_Blings_1.default blings={blings}/>)}
+    </div>);
+};
+exports.default = NewsHero;

package/PageFilter.jsx

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const seenEffect_1 = require("./utils/seenEffect");
+const Footnote_1 = __importDefault(require("./Footnote"));
+const PageFilter = (props) => {
+    const { title, summary, footnote, filters, children, buttonRow, underlap, startSeen } = props;
+    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    return (<div className={(0, getBemClass_1.default)('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_1.default>{footnote}</Footnote_1.default>}
+    </div>);
+};
+exports.default = PageFilter;

package/PageHeading.jsx

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const seenEffect_1 = require("./utils/seenEffect");
+const PageHeading = (props) => {
+    const { Tag = 'h1', align, small, children, startSeen } = props;
+    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    return (<Tag className={(0, getBemClass_1.default)('PageHeading', [
+            small && 'small',
+            align === 'right' && 'align--' + align,
+        ])} ref={ref}>
+      {children}
+    </Tag>);
+};
+exports.default = PageHeading;

package/ProcessOverview.jsx

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const ProcessOverview = (props) => {
+    const { title, items, attention, transparent, narrow } = props;
+    return (<div className={(0, getBemClass_1.default)('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>);
+};
+exports.default = ProcessOverview;

package/PullQuote.jsx

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const _Quote_1 = require("./_abstract/_Quote");
+const PullQuote = (props) => <_Quote_1._Quote bem="PullQuote" {...props}/>;
+exports.default = PullQuote;

package/RadioButtonsGroup.jsx

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const TogglerGroupField_1 = __importDefault(require("./_abstract/TogglerGroupField"));
+const TogglerInput_1 = __importDefault(require("./_abstract/TogglerInput"));
+const RadioButton = (props) => (<TogglerInput_1.default {...props} bem="RadioButton" type="radio"/>);
+const RadioButtonsGroup = (props) => {
+    if (props.layout) {
+        console.warn('`RadioButtonsGroupProps.layout` is deprecated.');
+    }
+    if (props.columns) {
+        console.warn('`RadioButtonsGroupProps.columns` is deprecated.');
+    }
+    return <TogglerGroupField_1.default {...props} bem="RadioButtonsGroup" Toggler={RadioButton}/>;
+};
+exports.default = RadioButtonsGroup;

package/RadioGroup.jsx

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const TogglerGroupField_1 = __importDefault(require("./_abstract/TogglerGroupField"));
+const TogglerInput_1 = __importDefault(require("./_abstract/TogglerInput"));
+const Radio = (props) => (<TogglerInput_1.default {...props} bem="Radio" type="radio"/>);
+const RadioGroup = (props) => (<TogglerGroupField_1.default {...props} bem="RadioGroup" modifier={props.layout} Toggler={Radio}/>);
+RadioGroup.__Radio = Radio;
+exports.default = RadioGroup;

package/RelatedLinks.jsx

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Link_1 = require("./_abstract/Link");
+const types = {
+    external: 1,
+    document: 1,
+    pdf: 1,
+    link: 0,
+};
+const RelatedLinks = (props) => {
+    const { title, links } = props;
+    if (links.length === 0) {
+        return null;
+    }
+    const TitleTag = props.titleTag || 'h3';
+    return (<div className="RelatedLinks">
+      {title && <TitleTag className="RelatedLinks__title">{title}</TitleTag>}
+      <ul className="RelatedLinks__list">
+        {links.map(({ href, label, type, target }, i) => {
+            type = type && types[type] ? type : undefined;
+            return (<li key={i} className="RelatedLinks__item">
+              <Link_1.Link className="RelatedLinks__link" href={href} data-type={type} target={target}>
+                {' '}
+                {label}{' '}
+              </Link_1.Link>
+            </li>);
+        })}
+      </ul>
+    </div>);
+};
+exports.default = RelatedLinks;

package/RowBlock.jsx

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const seenEffect_1 = require("./utils/seenEffect");
+const RowBlock = (props) => {
+    const { right, modifier, className, children, startSeen } = props;
+    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    return (<div className={(0, getBemClass_1.default)('RowBlock', [modifier, right && 'align--right'], className)} ref={ref}>
+      {children}
+    </div>);
+};
+exports.default = RowBlock;

package/RowBlockColumn.jsx

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const RowBlockColumn = (props) => {
+    const { background, narrow, children } = props;
+    return (<div className={(0, getBemClass_1.default)('RowBlockColumn', [
+            narrow && 'narrow',
+            background && 'background',
+            background === 'primary' && 'background--primary',
+        ])}>
+      {children}
+    </div>);
+};
+exports.default = RowBlockColumn;