@reykjavik/hanna-react 0.10.55 → 0.10.56

package/esm/RadioButtonsGroup.d.ts

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

package/esm/RadioButtonsGroup.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import TogglerGroupField from './_abstract/TogglerGroupField';
+import TogglerInput from './_abstract/TogglerInput';
+const RadioButton = (props) => (<TogglerInput {...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 {...props} bem="RadioButtonsGroup" Toggler={RadioButton}/>;
+};
+export default RadioButtonsGroup;

package/esm/RadioGroup.d.ts

@@ -0,0 +1,13 @@
+import { TogglerGroupFieldOption, TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/TogglerGroupField';
+import { TogglerInputProps } from './_abstract/TogglerInput';
+export declare type RadioGroupProps = TogglerGroupFieldProps & {
+    layout?: 'inline';
+    value?: string;
+};
+export declare type RadioGroupOption = TogglerGroupFieldOption;
+export declare type RadioGroupOptions = TogglerGroupFieldOptions;
+declare const RadioGroup: {
+    (props: RadioGroupProps): JSX.Element;
+    __Radio: (props: TogglerInputProps) => JSX.Element;
+};
+export default RadioGroup;

package/esm/RadioGroup.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import TogglerGroupField from './_abstract/TogglerGroupField';
+import TogglerInput from './_abstract/TogglerInput';
+const Radio = (props) => (<TogglerInput {...props} bem="Radio" type="radio"/>);
+const RadioGroup = (props) => (<TogglerGroupField {...props} bem="RadioGroup" modifier={props.layout} Toggler={Radio}/>);
+RadioGroup.__Radio = Radio;
+export default RadioGroup;

package/esm/RelatedLinks.d.ts

@@ -0,0 +1,20 @@
+declare const types: {
+    readonly external: 1;
+    readonly document: 1;
+    readonly pdf: 1;
+    readonly link: 0;
+};
+export declare type RelatedLinkType = keyof typeof types;
+export declare type RelatedLinkItem = {
+    href: string;
+    label: string;
+    target?: string;
+    type?: RelatedLinkType;
+};
+export declare type RelatedLinksProps = {
+    title?: string;
+    titleTag?: 'h2' | 'h3' | 'h4' | 'h5';
+    links: Array<RelatedLinkItem>;
+};
+declare const RelatedLinks: (props: RelatedLinksProps) => JSX.Element | null;
+export default RelatedLinks;

package/esm/RelatedLinks.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Link } from './_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 className="RelatedLinks__link" href={href} data-type={type} target={target}>
+                {' '}
+                {label}{' '}
+              </Link>
+            </li>);
+        })}
+      </ul>
+    </div>);
+};
+export default RelatedLinks;

package/esm/RowBlock.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { BemPropsModifier } from '@hugsmidjan/react/types';
+import { SeenProp } from './utils/seenEffect';
+export declare type RowBlockProps = {
+    /** Float the first RowBlockColumn to the right on larger screens. */
+    right?: boolean;
+    /** Custom **additional** class-name */
+    className?: string;
+    children: ReactNode;
+} & BemPropsModifier & SeenProp;
+declare const RowBlock: (props: RowBlockProps) => JSX.Element;
+export default RowBlock;

package/esm/RowBlock.jsx

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

package/esm/RowBlockColumn.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export declare type RowBlockColumnProps = {
+    background?: boolean | 'primary';
+    narrow?: boolean;
+    children: ReactNode;
+};
+declare const RowBlockColumn: (props: RowBlockColumnProps) => JSX.Element;
+export default RowBlockColumn;

package/esm/RowBlockColumn.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const RowBlockColumn = (props) => {
+    const { background, narrow, children } = props;
+    return (<div className={getBemClass('RowBlockColumn', [
+            narrow && 'narrow',
+            background && 'background',
+            background === 'primary' && 'background--primary',
+        ])}>
+      {children}
+    </div>);
+};
+export default RowBlockColumn;

package/esm/SearchInput.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+import { FormFieldWrappingProps } from './FormField';
+declare type InputElmProps = JSX.IntrinsicElements['input'];
+declare type BaseProps<Type extends {
+    type?: string;
+}, InputProps extends object> = {
+    small?: boolean;
+    children?: undefined;
+    onButtonClick?: () => void;
+    buttonText?: string;
+    inputRef?: RefObject<HTMLInputElement>;
+    buttonRef?: RefObject<HTMLButtonElement>;
+} & Type & FormFieldWrappingProps & InputProps;
+export declare type SearchInputProps = BaseProps<{
+    type?: 'text';
+}, InputElmProps>;
+declare const SearchInput: (props: SearchInputProps) => JSX.Element;
+export default SearchInput;

package/esm/SearchInput.jsx

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

package/esm/SearchResults/_SearchResultsItem.d.ts

@@ -0,0 +1,18 @@
+declare type MetaValue = string | (() => JSX.Element | string | number);
+export declare type SearchResultsItemProps = {
+    /** Plain text title */
+    title: string;
+    /** Simple HTML-encoded summary (excluding any layout)  */
+    summary: string;
+    href: string;
+    meta?: MetaValue | ReadonlyArray<MetaValue>;
+    /**
+     * URL to the image to display with the result item.
+     * Should ideally be approximately 600-700px wide
+     */
+    image?: string;
+    /** Should this search-result item be displayed as a "major"/"main" result at the top */
+    highlight?: boolean;
+};
+declare const SearchResultsItem: (props: SearchResultsItemProps) => JSX.Element;
+export default SearchResultsItem;

package/esm/SearchResults/_SearchResultsItem.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Image from '../_abstract/Image';
+import { Link } from '../_abstract/Link';
+const SearchResultsItem = (props) => {
+    const { highlight, title, summary, href, meta, image } = props;
+    const bem = highlight ? 'SearchResultsHighlightItem' : 'SearchResultsItem';
+    const metaArr = (Array.isArray(meta) ? meta : [meta]);
+    return (<li className={bem}>
+      <Link className={bem + '__link'} href={href}>
+        <h3 className={bem + '__title'}>{title}</h3>
+        {metaArr.length > 0 && (<span className={bem + '__meta'}>
+            {metaArr.map((item, i) => typeof item === 'function' ? item() : item && <span key={i}>{item}</span>)}
+          </span>)}
+        {highlight && image && <Image className={bem + '__image'} src={image}/>}
+        <div className={bem + '__summary'} dangerouslySetInnerHTML={{ __html: summary }}/>
+      </Link>
+    </li>);
+};
+export default SearchResultsItem;

package/esm/SearchResults.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { SearchResultsItemProps } from './SearchResults/_SearchResultsItem';
+export declare type SearchReesultI18n = {
+    lang: string;
+    loadQueryTitle: string;
+    resultsTitle: string;
+    noResultsTitle: string;
+    loadMore: string;
+};
+export declare type SearchStatus = 'loadingquery' | 'loadingfilter' | 'error' | 'results' | 'loadingmore';
+export declare type SearchResultsFilter = {
+    label: string;
+    count?: number;
+};
+export type { SearchResultsItemProps } from './SearchResults/_SearchResultsItem';
+export declare type SearchResultsProps = {
+    totalHits?: number;
+    hits?: number;
+    query?: string;
+    items?: Array<SearchResultsItemProps>;
+    filters?: Array<SearchResultsFilter>;
+    activeFilterIdx?: number;
+    setFilter?: (activeTab: number) => void;
+    status: SearchStatus;
+    errorText?: string | ReactNode;
+    pageSize: number;
+    pages?: number;
+    loadMore?: () => void;
+    texts?: SearchReesultI18n;
+    lang?: string;
+};
+declare const SearchResults: (props: SearchResultsProps) => JSX.Element;
+export default SearchResults;

package/esm/SearchResults.jsx

@@ -0,0 +1,118 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { prettyNum } from '@hugsmidjan/qj/prettyNum';
+import range from '@hugsmidjan/qj/range';
+import { useDomid } from '@hugsmidjan/react/hooks';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { DEFAULT_LANG, getTexts } from '@reykjavik/hanna-utils/i18n';
+import SearchResultsItem from './SearchResults/_SearchResultsItem';
+import Alert from './Alert';
+import Tabs from './Tabs';
+const renderDefaultErrorText = () => (<>
+    Úps, það hefur komið upp villa. Má bjóða þér að prófa aftur að leita?
+    <br />
+    Ef ekkert lát er á villunni þá kunnum við að meta að þú látir okkur vita.
+  </>);
+const defaultTexts = {
+    en: {
+        lang: 'en',
+        loadQueryTitle: 'Loading results...',
+        resultsTitle: 'results found for',
+        noResultsTitle: 'No results were found for',
+        loadMore: 'Load more',
+        // loadingMore: 'Loading...',
+    },
+    is: {
+        lang: 'is',
+        loadQueryTitle: 'Sæki niðurstöður...',
+        resultsTitle: 'leitarniðurstöður fyrir',
+        noResultsTitle: 'Engar leitarniðurstöður fundust fyrir',
+        loadMore: 'Sækja fleiri',
+        // loadingMore: 'Sæki fleiri...',
+    },
+};
+const SearchResults_Tabs = (props) => {
+    const { domid, filters, activeIdx, setFilter, lang } = props;
+    const tabs = useMemo(() => (filters || []).map(({ label, count }) => ({
+        label,
+        badge: prettyNum(count, { lang }),
+    })), [filters, lang]);
+    return tabs.length ? (<Tabs role="tablist" aria-controls={domid} tabs={tabs} activeIdx={activeIdx || 0} onSetActive={(i) => setFilter && setFilter(i)}/>) : null;
+};
+const LoadingScaffold = (props) => props.count ? (<ol className="SearchResults__list SearchResults__list--loading">
+      {range(1, props.count).map((item, i) => (<SearchResultsItem key={i} title="..." summary="" href=""/>))}
+    </ol>) : null;
+// ===========================================================================
+const NUM_AUTOLOADS = 2;
+const SearchResults__loadmore = (props) => {
+    const { status, hits, numItems, loadMore, pageSize, texts } = props;
+    const { lang } = texts;
+    const moreCount = (hits || 0) - (numItems || 0);
+    const autoLoadCount = useRef(0);
+    const skip = !loadMore || autoLoadCount.current >= NUM_AUTOLOADS;
+    const [refFn, theEndIsNigh] = useInView({
+        rootMargin: '150px 0px 0px 0px',
+        skip, // disable after two clicks
+    });
+    useEffect(() => {
+        if (theEndIsNigh && loadMore) {
+            autoLoadCount.current = autoLoadCount.current + 1;
+            loadMore();
+        }
+    }, [theEndIsNigh, loadMore]);
+    const moreAvailable = status === 'results' && moreCount && loadMore;
+    return status === 'loadingmore' ? (<LoadingScaffold count={Math.min(pageSize, moreCount)}/>) : moreAvailable ? (<button ref={refFn} className="SearchResults__loadmore" type="button" onClick={loadMore}>
+      {texts.loadMore}{' '}
+      <span className="SearchResults__loadmore__count">
+        ({prettyNum(moreCount, { lang })})
+      </span>
+    </button>) : null;
+};
+// ===========================================================================
+const renderTitle = (props, texts) => {
+    const { status, totalHits, query } = props;
+    const lang = texts.lang || props.lang || DEFAULT_LANG;
+    return (<h2 className="SearchResults__title">
+      {status === 'loadingquery'
+            ? texts.loadQueryTitle
+            : totalHits
+                ? prettyNum(totalHits, { lang: lang }) +
+                    ' ' +
+                    texts.resultsTitle
+                : texts.noResultsTitle}
+      <span className="SearchResults__query">{query}</span>
+    </h2>);
+};
+// ---------------------------------------------------------------------------
+const renderResults = (props) => {
+    const { status, pageSize, items, hits } = props;
+    if (status === 'loadingquery' || status === 'loadingfilter') {
+        return <LoadingScaffold count={Math.min(pageSize, hits || 999)}/>;
+    }
+    return items && items.length ? (<ol className="SearchResults__list">
+      {items.map((item, i) => (<SearchResultsItem key={i} {...item}/>))}
+    </ol>) : null;
+};
+// ---------------------------------------------------------------------------
+const renderLoadMore = (props, texts) => {
+    const { hits, items, status, pageSize, loadMore } = props;
+    return (<SearchResults__loadmore hits={hits} numItems={items && items.length} status={status} pageSize={pageSize} loadMore={loadMore} texts={texts}/>);
+};
+// TODO: add plural translation thingy for result string
+const SearchResults = (props) => {
+    const { filters, activeFilterIdx, setFilter, status, errorText } = props;
+    const texts = getTexts(props, defaultTexts);
+    const domid = useDomid();
+    return (<div className={getBemClass('SearchResults', status !== 'results' && status)}>
+      {renderTitle(props, texts)}
+
+      <SearchResults_Tabs domid={domid} filters={filters} activeIdx={activeFilterIdx} setFilter={setFilter} lang={texts.lang}/>
+
+      <div className="SearchResults__results" id={domid}>
+        {renderResults(props)}
+        {status === 'error' && (<Alert type="error">{errorText || renderDefaultErrorText()}</Alert>)}
+        {renderLoadMore(props, texts)}
+      </div>
+    </div>);
+};
+export default SearchResults;

package/esm/SeenEffect.d.ts

@@ -0,0 +1,4 @@
+import { EffectProp, SeenProp } from './utils/seenEffect';
+export declare type SeenEffectProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & SeenProp & EffectProp;
+declare const SeenEffect: (props: SeenEffectProps) => JSX.Element;
+export default SeenEffect;

package/esm/SeenEffect.jsx

@@ -0,0 +1,19 @@
+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 { getEffectAttr, useSeenEffect } from './utils/seenEffect';
+const SeenEffect = (props) => {
+    const { effectType, startSeen } = props, divProps = __rest(props, ["effectType", "startSeen"]);
+    const [ref] = useSeenEffect(startSeen);
+    return <div {...divProps} ref={ref} {...getEffectAttr(effectType)}/>;
+};
+export default SeenEffect;

package/esm/Selectbox.d.ts

@@ -0,0 +1,8 @@
+import { SelectboxProps as _SelectboxProps } from '@hugsmidjan/react/Selectbox';
+import { FormFieldWrappingProps } from './FormField';
+export declare type SelectboxProps = FormFieldWrappingProps & Omit<_SelectboxProps, 'bem'> & {
+    small?: boolean;
+};
+export type { SelectboxOptions } from '@hugsmidjan/react/Selectbox';
+declare const Selectbox: (props: SelectboxProps) => JSX.Element;
+export default Selectbox;

package/esm/Selectbox.jsx

@@ -0,0 +1,46 @@
+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, { useEffect, useRef, useState } from 'react';
+import _Selectbox from '@hugsmidjan/react/Selectbox';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import FormField from './FormField';
+const getValue = (opt) => {
+    const val = typeof opt === 'object' ? opt.value : opt;
+    return typeof val === 'number' ? String(val) : val;
+};
+const Selectbox = (props) => {
+    var _a;
+    const { className, label, assistText, hideLabel, disabled, readOnly, reqText, invalid, errorMessage, required, id, ssr, onChange, small } = props, selectProps = __rest(props, ["className", "label", "assistText", "hideLabel", "disabled", "readOnly", "reqText", "invalid", "errorMessage", "required", "id", "ssr", "onChange", "small"]);
+    const { value, defaultValue, placeholder, options } = selectProps;
+    const _selectRef = useRef(null);
+    const selectRef = selectProps.selectRef || _selectRef;
+    const getInitialValue = () => { var _a; return (_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : getValue(options[0]); };
+    const [isFilled, setIsFilled] = useState(() => !!getInitialValue());
+    const [isEmpty, setIsEmpty] = useState(() => !getInitialValue() && !placeholder);
+    useEffect(() => {
+        var _a;
+        const selectElm = selectRef.current;
+        if (selectElm) {
+            setIsFilled(!!selectElm.value);
+            setIsEmpty(!((_a = selectElm.selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.text));
+        }
+    }, [(_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.value]);
+    const _onChange = (e) => {
+        var _a;
+        const selectElm = e.currentTarget;
+        setIsFilled(!!selectElm.value);
+        setIsEmpty(!((_a = selectElm.selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.text));
+        onChange && onChange(e);
+    };
+    return (<FormField className={getBemClass('Selectbox', null, className)} ssr={ssr} small={small} label={label} empty={isEmpty} filled={isFilled} assistText={assistText} hideLabel={hideLabel} disabled={disabled} readOnly={readOnly} invalid={invalid} errorMessage={errorMessage} required={required} reqText={reqText} id={id} renderInput={(className, inputProps, addFocusProps) => (<_Selectbox bem={className.input} ssr={ssr} onChange={_onChange} {...inputProps} {...addFocusProps(selectProps)} selectRef={selectRef}/>)}/>);
+};
+export default Selectbox;

package/esm/ShareButtons.d.ts

@@ -0,0 +1,9 @@
+import { SSRSupport } from '@hugsmidjan/react/hooks';
+import { ShareButtonI18n, ShareButtonPlatforms } from '@reykjavik/hanna-utils/shareButtonsUtils';
+export declare type ShareButtonsProps = {
+    ssr?: SSRSupport;
+    children?: undefined;
+    texts?: Readonly<ShareButtonI18n>;
+} & Partial<Record<ShareButtonPlatforms, boolean>>;
+declare const ShareButtons: (props: ShareButtonsProps) => JSX.Element | null;
+export default ShareButtons;

package/esm/ShareButtons.jsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from 'react';
+import { getDocMeta, getShareButtonLabel, i18n, openInPopup, shareButtonTypes, } from '@reykjavik/hanna-utils/shareButtonsUtils';
+import { Link } from './_abstract/Link';
+const generateTypeList = (facebook, twitter, linkedin, email) => {
+    const listStr = ((facebook ? 'facebook,' : '') +
+        (twitter ? 'twitter,' : '') +
+        (linkedin ? 'linkedin,' : '') +
+        (email ? 'email,' : '')).slice(0, -1);
+    return (listStr !== 'facebook,twitter' && listStr) || undefined;
+};
+// FIXME: see other FIXME below for details
+// TODO: Also figure out if/why the truthyness of document.location would be in doubt here
+const docLoc = typeof document !== 'undefined' ? document.location : { href: undefined };
+const ShareButtons__item = (props) => {
+    const { label, type, href } = props;
+    const buttonText = getShareButtonLabel(type, label);
+    const popup = type !== 'email';
+    return (<li className="ShareButtons__item">
+      <Link className={'ShareButtons__link ShareButtons__link--' + type} href={href} title={buttonText} rel="noopener noreferrer" target={popup ? '_blank' : undefined} onClick={popup ? openInPopup : undefined}>
+        {buttonText}
+      </Link>
+    </li>);
+};
+const ShareButtons = (props) => {
+    const { texts, ssr, facebook = true, twitter = true, linkedin, email, } = props;
+    const [docMeta, setDocMeta] = useState();
+    const href = docLoc.href; // assign to local variable to silence `react-hooks/exhaustive-deps`
+    useEffect(() => {
+        // FIXME: Drop dependency on _loc.href and set up proper
+        // location/route monitoring event handler, with unsubscribe on unmount
+        const { emailSubject } = texts || {};
+        setDocMeta(getDocMeta({ emailSubject }));
+    }, [texts, href]);
+    if (!facebook && !twitter && !linkedin && !email) {
+        // no place to share
+        return null;
+    }
+    const txt = texts || (docMeta && i18n[docMeta.lang]) || {};
+    const { label, buttonLabel } = txt;
+    if (!docMeta || ssr === 'ssr-only') {
+        // Generate SSR markup for hanna-sprinkles to pick up on.
+        return (<div className="ShareButtons" data-button-types={generateTypeList(facebook, twitter, linkedin, email)} data-label={label} data-buttonlabel={buttonLabel} data-emailsubject={txt.emailSubject || undefined}/>);
+    }
+    const showTypes = {
+        facebook,
+        twitter,
+        linkedin,
+        email,
+    };
+    return (<div className="ShareButtons" aria-label={label} data-sprinkled="true">
+      {label && <strong className="ShareButtons__label">{label}</strong>}
+      <ul className="ShareButtons__list">
+        {shareButtonTypes.map((type) => showTypes[type] && (<ShareButtons__item key={type} type={type} label={buttonLabel || ''} href={docMeta.hrefs[type]}/>))}
+      </ul>
+    </div>);
+};
+export default ShareButtons;

package/esm/Sharpie.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+declare const colors: {
+    green: number;
+    red: number;
+};
+declare type SharpieColor = keyof typeof colors;
+declare const tags: {
+    span: number;
+    strong: number;
+    em: number;
+    b: number;
+    i: number;
+    u: number;
+    s: number;
+};
+declare type SharpieTag = keyof typeof tags;
+export declare type SharpieProps = {
+    color: SharpieColor;
+    tag?: SharpieTag;
+    children: ReactNode;
+};
+declare const Sharpie: (props: SharpieProps) => JSX.Element;
+export default Sharpie;

package/esm/Sharpie.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const colors = {
+    green: 1,
+    red: 1,
+};
+const tags = {
+    span: 1,
+    strong: 1,
+    em: 1,
+    b: 1,
+    i: 1,
+    u: 1,
+    s: 1,
+};
+const Sharpie = (props) => {
+    const { color, tag, children } = props;
+    const colorModifier = colors[color] ? color : 'green';
+    const Tag = tag && tags[tag] ? tag : 'span';
+    return <Tag className={getBemClass('Sharpie', colorModifier)}>{children}</Tag>;
+};
+export default Sharpie;

package/esm/SiteSearchAutocomplete.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import Autosuggest, { RenderSuggestion } from 'react-autosuggest';
+import { BemProps } from '@hugsmidjan/react/types';
+import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+export declare type SiteSearchACI18n = {
+    lang?: string;
+    /** Label for the autocomplete's combobox container div */
+    label: string;
+    /** Label for the text input */
+    inputLabel: string;
+    /** Placeholder text for the text input */
+    placeholder?: string;
+    /** Label for the suggestions item list container */
+    suggestionsLabel: string;
+};
+export declare const defaultSiteSearchACTexts: DefaultTexts<SiteSearchACI18n>;
+export declare type SiteSearchAutocompleteProps<T> = {
+    suggestions: Array<T>;
+    renderSuggestion: RenderSuggestion<T>;
+    setSuggestions: (suggestions: Array<T>) => void;
+    getSuggestionValue: (suggestion: T) => string;
+    onSuggestionsFetchRequested: (request: Autosuggest.SuggestionsFetchRequestedParams) => void;
+    onSuggestionSelected?: (event: React.FormEvent<HTMLElement>, data: Autosuggest.SuggestionSelectedEventData<T>) => void;
+    onSuggestionHighlighted?: (params: {
+        suggestion: T;
+    }) => void;
+    /** Triggered when user hits ENTER key with the focus inside the input field */
+    onSubmit?: (value: string) => void;
+    /** Custom action to perform when the user clicks the search button
+     *
+     * Defaults to `onSubmit`
+     */
+    onButtonClick?: (value: string) => void;
+    lang?: string;
+    texts?: SiteSearchACI18n;
+    /** @deprecated  Use `text` prop instead  (will be removed in v0.11) */
+    label?: string;
+} & BemProps;
+declare const SiteSearchAutocomplete: <T>(props: SiteSearchAutocompleteProps<T>) => JSX.Element;
+export default SiteSearchAutocomplete;