@reykjavik/hanna-react 0.10.55 → 0.10.56

package/esm/CarouselStepper.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import _CarouselStepper from '@hugsmidjan/react/CarouselStepper';
+const CarouselStepper = (props) => (<_CarouselStepper {...props} bem={undefined} modifier={undefined}/>);
+export default CarouselStepper;

package/esm/CenterColumn.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { EffectProp, SeenProp } from './utils/seenEffect';
+export declare type CenterColumnProps = {
+    children: ReactNode;
+} & SeenProp & EffectProp;
+declare const CenterColumn: (props: CenterColumnProps) => JSX.Element;
+export default CenterColumn;

package/esm/CenterColumn.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import SeenEffect from './SeenEffect';
+const CenterColumn = (props) => {
+    const { children, startSeen, effectType } = props;
+    return startSeen == null ? (<div className="CenterColumn">{children}</div>) : (<SeenEffect className="CenterColumn" startSeen={startSeen} effectType={effectType}>
+      {children}
+    </SeenEffect>);
+};
+export default CenterColumn;

package/esm/Checkbox.d.ts

@@ -0,0 +1,4 @@
+import { TogglerInputProps } from './_abstract/TogglerInput';
+export declare type CheckboxProps = TogglerInputProps;
+declare const Checkbox: (props: CheckboxProps) => JSX.Element;
+export default Checkbox;

package/esm/Checkbox.jsx

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

package/esm/CheckboxButtonsGroup.d.ts

@@ -0,0 +1,11 @@
+import { TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/TogglerGroupField';
+export declare type CheckboxButtonsGroupProps = TogglerGroupFieldProps & {
+    value?: Array<string>;
+    /** @deprecated (Will be removed in v0.9) */
+    columns?: '2col' | '3col';
+    /** @deprecated (Will be removed in v0.9) */
+    layout?: 'slim';
+};
+export declare type CheckboxButtonsGroupOptions = TogglerGroupFieldOptions;
+declare const CheckboxButtonsGroup: (props: CheckboxButtonsGroupProps) => JSX.Element;
+export default CheckboxButtonsGroup;

package/esm/CheckboxButtonsGroup.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import TogglerGroupField from './_abstract/TogglerGroupField';
+import TogglerInput from './_abstract/TogglerInput';
+const CheckboxButton = (props) => (<TogglerInput bem="CheckboxButton" {...props} type="checkbox"/>);
+const CheckboxButtonsGroup = (props) => {
+    if (props.layout) {
+        console.warn('`CheckboxButtonsGroupProps.layout` is deprecated.');
+    }
+    if (props.columns) {
+        console.warn('`CheckboxButtonsGroupProps.columns` is deprecated.');
+    }
+    return (<TogglerGroupField {...props} bem="CheckboxButtonsGroup" Toggler={CheckboxButton}/>);
+};
+export default CheckboxButtonsGroup;

package/esm/CheckboxGroup.d.ts

@@ -0,0 +1,9 @@
+import { TogglerGroupFieldOption, TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/TogglerGroupField';
+export declare type CheckboxGroupProps = TogglerGroupFieldProps & {
+    layout?: 'inline';
+    value?: Array<string>;
+};
+export declare type CheckboxGroupOption = TogglerGroupFieldOption;
+export declare type CheckboxGroupOptions = TogglerGroupFieldOptions;
+declare const CheckboxGroup: (props: CheckboxGroupProps) => JSX.Element;
+export default CheckboxGroup;

package/esm/CheckboxGroup.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import TogglerGroupField from './_abstract/TogglerGroupField';
+import Checkbox from './Checkbox';
+const CheckboxGroup = (props) => {
+    return (<TogglerGroupField {...props} bem="CheckboxGroup" modifier={props.layout} Toggler={Checkbox}/>);
+};
+export default CheckboxGroup;

package/esm/CityBlock.d.ts

@@ -0,0 +1,23 @@
+import { Illustration } from '@reykjavik/hanna-utils/assets';
+import { BlockItem } from './_abstract/_Block';
+import { ImageProps } from './_abstract/Image';
+import { SeenProp } from './utils/seenEffect';
+import { Alignment } from './constants';
+declare const types: {
+    largebox: boolean;
+    largeimage: boolean;
+};
+declare type CityBlockImageProps = {
+    illustration: Illustration;
+    image?: never;
+} | {
+    image: ImageProps;
+    illustration?: never;
+};
+export declare type CityBlockProps = {
+    align?: Alignment;
+    type?: keyof typeof types;
+    content: BlockItem;
+} & CityBlockImageProps & SeenProp;
+declare const CityBlock: (props: CityBlockProps) => JSX.Element;
+export default CityBlock;

package/esm/CityBlock.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
+import Block from './_abstract/_Block';
+import { aligns } from './constants';
+const types = {
+    largebox: true,
+    largeimage: true,
+};
+const CityBlock = (props) => {
+    const align = props.align || 'right';
+    const type = !props.illustration && props.type; // The presence of illustration prop suppresses type
+    const modifier = [aligns[align] && 'align--' + align, type && types[type] && type];
+    const imageProps = props.illustration != null
+        ? { src: getIllustrationUrl(props.illustration) }
+        : props.image;
+    return (<Block bem="CityBlock" modifier={modifier} content={props.content} image={imageProps} startSeen={props.startSeen}/>);
+};
+export default CityBlock;

package/esm/ContactBubble.d.ts

@@ -0,0 +1,58 @@
+import { SSRSupport } from '@hugsmidjan/react/hooks';
+import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+export declare type ContactBubbleI18n = {
+    lang?: string;
+    openBtn: string;
+    openBtnLong?: string;
+    closeBtn: string;
+    closeBtnLong?: string;
+};
+export declare const defaultTexts: DefaultTexts<ContactBubbleI18n>;
+declare const icons: {
+    readonly suggestions: 1;
+    readonly phone: 1;
+    readonly faq: 1;
+    readonly livechat: 1;
+    readonly other: 0;
+};
+export declare type ContactBubbleIcon = keyof typeof icons;
+export declare const ensureIcon: (maybeIcon: string | undefined) => ContactBubbleIcon | undefined;
+export declare type ContactBubbleItem = {
+    label: string;
+    extraLabel?: string;
+    icon?: ContactBubbleIcon;
+} & ({
+    href: string;
+    /** Prevents default link behavior unless the handler function returns `true` */
+    onClick?: () => void | boolean;
+    target?: string;
+} | {
+    onClick: () => void | boolean;
+    href?: undefined;
+    target?: undefined;
+});
+export declare type ContactBubbleProps = {
+    title?: string;
+    links: Array<ContactBubbleItem>;
+    /** By default the ContactBubble's toggler is hidden if the page
+     * is scrolled to near the top or the bottom.
+     *
+     * This means that on short pages (with hardly any scrolling)
+     * the ContactBubble **always** hidden.
+     *
+     * Set this prop to `true` if you want to disable this
+     * magic and always show the bubble toggler
+     */
+    alwaysShow?: boolean;
+    texts?: ContactBubbleI18n;
+    lang?: string;
+    ssr?: SSRSupport;
+} & ({
+    open?: boolean;
+    onToggle: (isOpen: boolean) => void;
+} | {
+    open?: undefined;
+    onToggle?: (isOpen: boolean) => void;
+});
+declare const ContactBubble: (props: ContactBubbleProps) => JSX.Element | null;
+export default ContactBubble;

package/esm/ContactBubble.jsx

@@ -0,0 +1,162 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import focusElm from '@hugsmidjan/qj/focusElm';
+import { useDomid, useIsBrowserSide } from '@hugsmidjan/react/hooks';
+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';
+export const defaultTexts = {
+    is: {
+        lang: 'is',
+        openBtn: 'Hafa samband',
+        closeBtn: 'Loka',
+        closeBtnLong: 'Loka valmynd',
+    },
+    en: {
+        lang: 'en',
+        openBtn: 'Contact us',
+        closeBtn: 'Close',
+        closeBtnLong: 'Close bubble',
+    },
+};
+// ---------------------------------------------------------------------------
+const icons = {
+    suggestions: 1,
+    phone: 1,
+    faq: 1,
+    livechat: 1,
+    other: 0,
+};
+export const ensureIcon = (maybeIcon) => maybeIcon && icons[maybeIcon]
+    ? maybeIcon
+    : undefined;
+const ContactBubble = (props) => {
+    const { title, links, onToggle, alwaysShow } = props;
+    const txt = getTexts(props, defaultTexts);
+    const useLocalState = props.open == null;
+    const [localOpen, setLocalOpen] = useState(false);
+    const open = useLocalState ? localOpen : props.open;
+    const isBrowser = useIsBrowserSide(props.ssr);
+    const domid = useDomid();
+    const wrapperRef = useRef(null);
+    const { openBubble, closeBubble } = useMemo(() => ({
+        openBubble: () => {
+            useLocalState && setLocalOpen(true);
+            onToggle && onToggle(true);
+        },
+        closeBubble: (setFocus) => {
+            useLocalState && setLocalOpen(false);
+            onToggle && onToggle(false);
+            setFocus !== false && focusElm(wrapperRef.current);
+        },
+    }), [useLocalState, onToggle]);
+    useEffect(() => {
+        const wrapperElm = wrapperRef.current;
+        if (!wrapperElm) {
+            return;
+        }
+        if (alwaysShow) {
+            wrapperElm.dataset.show = 'true';
+            return;
+        }
+        const scrollElm = getPageScrollElm();
+        let pending = 0;
+        const checkScroll = () => {
+            if (!pending) {
+                pending = requestAnimationFrame(() => {
+                    const { scrollTop, scrollHeight, clientHeight } = scrollElm;
+                    const scrollLength = scrollHeight - clientHeight;
+                    // const f = scrollLength > 600 ? 1 : (scrollLength - 200) / 600;
+                    const f = 1;
+                    const show = scrollTop > f * 150 && scrollLength - scrollTop > f * 250;
+                    wrapperElm.dataset.show = String(show);
+                    !show && closeBubble(false);
+                    pending = 0;
+                });
+            }
+        };
+        checkScroll();
+        // Set scroll-listeners on both the ´document` and the `scrollElm`
+        // because mobile browsers seem to handle CSS height and overflow
+        // rules on <html> and <body> differently from desktop browsers.
+        // Only one of these two handlers seems to trigger though,
+        // (as Element scroll events don't bubble)
+        // and even if they did, the rAF throttling prevents that from
+        // becoming a problem.
+        document.addEventListener('scroll', checkScroll);
+        scrollElm.addEventListener('scroll', checkScroll);
+        return () => {
+            document.removeEventListener('scroll', checkScroll);
+            scrollElm.removeEventListener('scroll', checkScroll);
+        };
+    }, [isBrowser, alwaysShow, closeBubble]);
+    useEffect(() => {
+        const escHandler = (e) => e.key === 'Escape' && closeBubble();
+        const outsideClickHandler = (e) => {
+            var _a;
+            if (open && !((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                closeBubble(false);
+            }
+        };
+        document.addEventListener('keydown', escHandler);
+        document.addEventListener('click', outsideClickHandler, true);
+        const htmlDataset = document.documentElement.dataset;
+        if (open) {
+            htmlDataset.contactBubble = 'true';
+        }
+        else {
+            delete htmlDataset.contactBubble;
+        }
+        return () => {
+            delete htmlDataset.contactBubble;
+            document.removeEventListener('keydown', escHandler);
+            document.removeEventListener('click', outsideClickHandler, true);
+        };
+    }, [open, closeBubble]);
+    if (links.length === 0) {
+        return null;
+    }
+    const menu = (<div className="ContactBubble" id={isBrowser && domid} hidden={isBrowser && !open} data-always-show={alwaysShow || undefined} data-sprinkled={isBrowser}>
+      <h2 className="ContactBubble__title">{title || txt.openBtn}</h2>
+      <ul className="ContactBubble__list">
+        {links.map((linkInfo, i) => {
+            const { href, label, extraLabel, target, onClick } = linkInfo;
+            const icon = ensureIcon(linkInfo.icon);
+            const itemClass = getBemClass('ContactBubble__item', icon && 'type--' + icon);
+            const onClickHandler = onClick &&
+                ((e) => {
+                    if (!onClick()) {
+                        e.preventDefault();
+                        closeBubble(false);
+                    }
+                });
+            const content = [
+                ' ',
+                label,
+                '\n',
+                extraLabel && <small key="🤡">{extraLabel}</small>,
+                '\n',
+            ];
+            return (<li key={i} className={itemClass}>
+              {href && href !== '#' ? (<Link className="ContactBubble__link" href={href} onClick={onClickHandler} target={target}>
+                  {content}
+                </Link>) : (<button className="ContactBubble__link" onClick={onClickHandler} type="button">
+                  {content}
+                </button>)}
+            </li>);
+        })}
+      </ul>
+      {'\n\n'}
+      {isBrowser && (<button className="ContactBubble__closebtn" aria-controls={domid} aria-label={txt.closeBtnLong} onClick={() => closeBubble()} type="button">
+          {txt.closeBtn}
+        </button>)}
+    </div>);
+    return isBrowser ? (<div className="ContactBubble__wrapper" ref={wrapperRef}>
+      <button className="ContactBubble__openbtn" aria-controls={domid} aria-expanded={open} aria-label={txt.openBtnLong} onClick={open ? () => closeBubble() : openBubble} type="button">
+        {txt.openBtn}
+      </button>
+      {'\n\n'}
+      {menu}
+    </div>) : (menu);
+};
+export default ContactBubble;

package/esm/ContentArticle.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { SeenProp } from './utils/seenEffect';
+import { ArticleMetaProps } from './ArticleMeta';
+import { ContentImageProps } from './ContentImage';
+import { RelatedLinksProps } from './RelatedLinks';
+export declare type ContentArticleProps = {
+    /** Date, author, etc. */
+    meta: ArticleMetaProps['items'];
+    headline: string;
+    topImage?: ContentImageProps;
+    body: ReactNode;
+    relatedLinks?: RelatedLinksProps;
+} & SeenProp;
+declare const ContentArticle: (props: ContentArticleProps) => JSX.Element;
+export default ContentArticle;

package/esm/ContentArticle.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useSeenEffect } from './utils/seenEffect';
+import ArticleMeta from './ArticleMeta';
+import ContentImage from './ContentImage';
+import Heading from './Heading';
+import RelatedLinks from './RelatedLinks';
+import TextBlock from './TextBlock';
+import VSpacer from './VSpacer';
+const ContentArticle = (props) => {
+    const [ref] = useSeenEffect(props.startSeen);
+    return (<div className="ContentArticle" ref={ref}>
+      <ArticleMeta items={props.meta}/>
+      <Heading>{props.headline}</Heading>
+      <TextBlock startSeen>
+        {props.topImage && <ContentImage {...props.topImage}/>}
+        {props.body}
+      </TextBlock>
+      <VSpacer size="small">
+        <hr />
+      </VSpacer>
+      {props.relatedLinks && <RelatedLinks {...props.relatedLinks}/>}
+    </div>);
+};
+export default ContentArticle;

package/esm/ContentImage.d.ts

@@ -0,0 +1,8 @@
+import { ImageProps } from './_abstract/Image';
+export declare type ContentImageProps = {
+    image?: ImageProps;
+    caption?: string | JSX.Element;
+    credit?: string | JSX.Element;
+};
+declare const ContentImage: (props: ContentImageProps) => JSX.Element;
+export default ContentImage;

package/esm/ContentImage.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Image from './_abstract/Image';
+const ContentImage = (props) => {
+    const { image, caption, credit } = props;
+    return (<figure className="ContentImage">
+      {(caption || credit) && (<figcaption className="ContentImage__caption">
+          {caption && <span className="ContentImage__text"> {caption} </span>}{' '}
+          {credit && <small className="ContentImage__credit"> {credit} </small>}
+        </figcaption>)}
+      <Image className="ContentImage__image" {...image}/>
+    </figure>);
+};
+export default ContentImage;

package/esm/Datepicker.d.ts

@@ -0,0 +1,39 @@
+import { RefObject } from 'react';
+import { FormFieldWrappingProps } from './FormField';
+export declare type DatepickerProps = {
+    small?: boolean;
+    placeholder?: string;
+    value?: Date;
+    startDate?: Date;
+    endDate?: Date;
+    minDate?: Date;
+    maxDate?: Date;
+    localeCode?: 'is' | 'en';
+    dateFormat?: string;
+    isStartDate?: boolean;
+    isEndDate?: boolean;
+    inputRef?: RefObject<HTMLInputElement>;
+    onChange: (date?: Date) => void;
+    datepickerExtraProps?: Record<string, unknown>;
+    /** @deprecated  use value instead.  (Will be removed in v0.11) */
+    initialDate?: Date;
+} & FormFieldWrappingProps;
+export declare const getDateDiff: (date: Date, diff: number) => Date;
+export declare type DatepickerLocaleProps = {
+    nextMonthAriaLabel: string;
+    nextMonthButtonLabel: string;
+    nextYearAriaLabel: string;
+    nextYearButtonLabel: string;
+    previousMonthAriaLabel: string;
+    previousMonthButtonLabel: string;
+    previousYearAriaLabel: string;
+    previousYearButtonLabel: string;
+    timeInputLabel: string;
+    weekAriaLabelPrefix: string;
+    weekLabel: string;
+    ariaLabelPrefix: string;
+    chooseDayAriaLabelPrefix: string;
+    disabledDayAriaLabelPrefix: string;
+};
+declare const Datepicker: (props: DatepickerProps) => JSX.Element;
+export default Datepicker;

package/esm/Datepicker.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+// Documentation: https://reactdatepicker.com/
+import ReactDatePicker, { registerLocale,
+// setDefaultLocale,
+ } from 'react-datepicker';
+import { useDomid } from '@hugsmidjan/react/hooks';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+// For more info on localization see: https://stackoverflow.com/questions/54399084/change-locale-in-react-datepicker/58306958#58306958
+import is from 'date-fns/locale/is';
+import FormField from './FormField';
+registerLocale('is', is);
+export const getDateDiff = (date, diff) => {
+    const newDate = new Date(date);
+    newDate.setDate(newDate.getDate() + diff);
+    return newDate;
+};
+const i18n = {
+    is: {
+        nextMonthAriaLabel: 'Næsti mánuður',
+        nextMonthButtonLabel: 'Næsti mánuður',
+        nextYearAriaLabel: 'Næsta ár',
+        nextYearButtonLabel: 'Næsta ár',
+        previousMonthAriaLabel: 'Fyrri mánuður',
+        previousMonthButtonLabel: 'Fyrri mánuður',
+        previousYearAriaLabel: 'Fyrra ár',
+        previousYearButtonLabel: 'Fyrra ár',
+        timeInputLabel: 'Tími: ',
+        weekAriaLabelPrefix: 'Vika: ',
+        weekLabel: 'Vika',
+        ariaLabelPrefix: 'Mánuður:',
+        chooseDayAriaLabelPrefix: 'Veldu:',
+        disabledDayAriaLabelPrefix: 'Dagsetning ekki í boði',
+    },
+};
+const Datepicker = (props) => {
+    const { className, id, label, hideLabel, assistText, disabled, readOnly, invalid, errorMessage, required, reqText, placeholder, small, localeCode, dateFormat = 'd.M.yyy', initialDate, value = initialDate, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, ssr, inputRef, } = props;
+    const domid = useDomid(id);
+    const txts = (localeCode && i18n[localeCode]) || {};
+    const filled = !!value;
+    const empty = !filled && !placeholder;
+    return (<FormField className={getBemClass('Datepicker', [], className)} ssr={ssr} label={label} small={small} assistText={assistText} hideLabel={hideLabel} invalid={invalid} required={required} reqText={reqText} disabled={disabled} readOnly={readOnly} filled={filled} empty={empty} errorMessage={errorMessage} renderInput={(className, inputProps, addFocusProps) => {
+            return (<div className={className.input} ref={inputRef &&
+                    ((elm) => {
+                        inputRef.current =
+                            (elm === null || elm === void 0 ? void 0 : elm.querySelector('input')) || undefined;
+                        return elm;
+                    })}>
+            <ReactDatePicker id={domid} required={inputProps.required} disabled={inputProps.disabled} readOnly={inputProps.readOnly} selected={value} locale={localeCode} dateFormat={dateFormat} onChange={(date) => {
+                    onChange(date || undefined);
+                    const inputElm = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
+                    if (inputElm) {
+                        inputElm.dispatchEvent(new Event('change', { bubbles: true }));
+                    }
+                }} placeholderText={placeholder} 
+            // TODO: Implement this
+            // selectsRange
+            minDate={minDate} maxDate={maxDate} startDate={startDate} endDate={endDate} selectsStart={isStartDate} selectsEnd={isEndDate} formatWeekDay={(weekday) => {
+                    // TODO: if we use costom locale we don't need this
+                    return weekday.charAt(0).toUpperCase();
+                }} showYearDropdown scrollableYearDropdown yearDropdownItemNumber={15} showMonthDropdown {...inputProps} {...txts} {...addFocusProps(datepickerExtraProps)}/>
+          </div>);
+        }}/>);
+};
+export default Datepicker;

package/esm/ExtraLinks.d.ts

@@ -0,0 +1,18 @@
+import { TextCardListProps } from './_abstract/CardList';
+import { SeenProp } from './utils/seenEffect';
+export declare type RelatedLink = {
+    href: string;
+    label: string;
+    blank?: boolean;
+    type?: 'link' | 'pdf' | 'text';
+};
+declare type RelatedProps = {
+    relatedTitle?: string;
+    relatedLinks?: Array<RelatedLink>;
+};
+export declare type ExtraLinksCardProps = TextCardListProps['cards'][number];
+export declare type ExtraLinksProps = TextCardListProps & RelatedProps & {
+    className?: string;
+} & SeenProp;
+declare const ExtraLinks: (props: ExtraLinksProps) => JSX.Element;
+export default ExtraLinks;

package/esm/ExtraLinks.jsx

@@ -0,0 +1,42 @@
+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 { CardList } from './_abstract/CardList';
+import { Link } from './_abstract/Link';
+import { useSeenEffect } from './utils/seenEffect';
+const ExtraLinks__related = (props) => {
+    const { relatedTitle, relatedLinks } = props;
+    return (<div className="ExtraLinks__related">
+      {relatedTitle && <h3 className="ExtraLinks__related__title">{relatedTitle}</h3>}
+      <ul className="ExtraLinks__related__list">
+        {relatedLinks &&
+            relatedLinks.map(({ href, label, blank = false, type }, i) => (<li className="ExtraLinks__related__item" key={i}>
+              <Link className={getBemClass('ExtraLinks__related__link', type)} href={href} target={blank ? '_blank' : ''} rel={blank ? 'noreferrer noopener' : ''}>
+                {label}
+              </Link>
+            </li>))}
+      </ul>
+    </div>);
+};
+const ExtraLinks = (props) => {
+    const { relatedTitle, relatedLinks, className, startSeen } = props, cardListProps = __rest(props, ["relatedTitle", "relatedLinks", "className", "startSeen"]);
+    const hasRelated = !!(relatedLinks && relatedLinks.length);
+    const [ref] = useSeenEffect(startSeen);
+    return (<div className={getBemClass('ExtraLinks', hasRelated && 'related', className)} ref={ref}>
+      <div className="ExtraLinks__main">
+        <CardList {...cardListProps} bemPrefix="ExtraLinks"/>
+      </div>
+      {hasRelated && (<ExtraLinks__related relatedTitle={relatedTitle} relatedLinks={relatedLinks}/>)}
+    </div>);
+};
+export default ExtraLinks;

package/esm/FeatureList.d.ts

@@ -0,0 +1,12 @@
+import { Efnistakn } from '@reykjavik/hanna-utils/assets';
+import { SeenProp } from './utils/seenEffect';
+export declare type FeatureListProps = {
+    title: string;
+    features: Array<{
+        icon?: Efnistakn;
+        iconUrl?: string;
+        name: string;
+    }>;
+} & SeenProp;
+declare const FeatureList: (props: FeatureListProps) => JSX.Element;
+export default FeatureList;

package/esm/FeatureList.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useSeenEffect } from './utils/seenEffect';
+import Bling from './Bling';
+const FeatureList = (props) => {
+    const { title, features, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    const _features = features.length ? features : [{ name: '...' }];
+    return (<>
+      <Bling type="snake-large" align="left" vertical="down-ish"/>
+
+      <div className="FeatureList" ref={ref}>
+        <h2 className="FeatureList__title">{title}</h2>
+        <ul className="FeatureList__list">
+          {_features.map(({ name, icon, iconUrl }, i) => (<li key={i} className="FeatureList__feature" style={iconUrl
+                ? { '--efnistakn': `url("${iconUrl}")` }
+                : undefined} data-efnistakn={!iconUrl ? icon : undefined}>
+              {name}
+            </li>))}
+        </ul>
+      </div>
+    </>);
+};
+export default FeatureList;

package/esm/FieldGroup.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export declare type FieldGroupProps = {
+    legend: string;
+    disabled?: boolean;
+    className?: string;
+    children: ReactNode;
+};
+declare const FieldGroup: (props: FieldGroupProps) => JSX.Element;
+export default FieldGroup;

package/esm/FieldGroup.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const FieldGroup = (props) => {
+    const { legend, children, className, disabled } = props;
+    return (<fieldset className={getBemClass('FieldGroup', null, className)} role="group" disabled={disabled}>
+      <legend className="FieldGroup__legend">{legend}</legend>
+      {children}
+    </fieldset>);
+};
+export default FieldGroup;