@reykjavik/hanna-react 0.10.53 → 0.10.56

package/assets.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.auxiliary_menu_images = exports.efnistakn_menu = exports.getCssBundleUrl = exports.illustrations = exports.getIllustrationUrl = exports.getFormheimurUrl = exports.getEfnistaknUrl = exports.getBlingUrl = exports.getAssetUrl = exports.efnistakn = exports.blingTypes = void 0;
+const hanna_css_1 = require("@reykjavik/hanna-css");
+const assets_1 = require("@reykjavik/hanna-utils/assets");
+Object.defineProperty(exports, "blingTypes", { enumerable: true, get: function () { return assets_1.blingTypes; } });
+Object.defineProperty(exports, "efnistakn", { enumerable: true, get: function () { return assets_1.efnistakn; } });
+Object.defineProperty(exports, "getAssetUrl", { enumerable: true, get: function () { return assets_1.getAssetUrl; } });
+Object.defineProperty(exports, "getBlingUrl", { enumerable: true, get: function () { return assets_1.getBlingUrl; } });
+Object.defineProperty(exports, "getEfnistaknUrl", { enumerable: true, get: function () { return assets_1.getEfnistaknUrl; } });
+Object.defineProperty(exports, "getFormheimurUrl", { enumerable: true, get: function () { return assets_1.getFormheimurUrl; } });
+Object.defineProperty(exports, "getIllustrationUrl", { enumerable: true, get: function () { return assets_1.getIllustrationUrl; } });
+Object.defineProperty(exports, "illustrations", { enumerable: true, get: function () { return assets_1.illustrations; } });
+/** @deprecated Use `getCssBundleUrl` from '@reykjavik/hanna-css' instead  (Will be reomved in v0.11) */
+const getCssBundleUrl = (cssTokens, 
+/** If you want to pin your CSS files to a specific version */
+version) => (0, hanna_css_1.getCssBundleUrl)(cssTokens, { version });
+exports.getCssBundleUrl = getCssBundleUrl;
+// ---------------------------------------------------------------------------
+// Based on "https://styles.reykjavik.is/assets/efnistakn/menu/files.json"
+/** @deprecated  (Will be removed in v0.11) */
+exports.efnistakn_menu = [
+    'menu/borgarstjori',
+    'menu/borgarstjorn',
+    'menu/bygg_framkv',
+    'menu/fjarmal',
+    'menu/fundargerdir',
+    'menu/itrottir_aftreying',
+    'menu/log_reglugerdir',
+    'menu/mannaudur',
+    'menu/menning',
+    'menu/rad_nefndir',
+    'menu/skipulag',
+    'menu/skolar_fristund',
+    'menu/svid_deildir',
+    'menu/umhverfi_samgongur',
+    'menu/velferd_fjolskylda',
+];
+// ---------------------------------------------------------------------------
+/** @deprecated  (Will be removed in v0.11) */
+exports.auxiliary_menu_images = [
+    'hanna-veitiggi',
+    'hanna-vandro',
+    'hanna-hugsi',
+    'hanna-hissa',
+    'hanna-hahaha',
+    'hanna-hae',
+    'hanna-god_spurning',
+    'hanna-gjuggiborg',
+    'hanna-benda',
+];

package/constants.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.aligns = exports.themeOptions = exports.colorFamilies = void 0;
+const hanna_css_1 = require("@reykjavik/hanna-css");
+/** @depcrecated import `colorFamilies` from  `@reykjavik/hanna-css` instead  (Will be removed in v0.11) */
+exports.colorFamilies = Object.assign([
+    'esja',
+    'faxafloi',
+    'nautholsvik',
+    'heidmork',
+    'ellidaardalur',
+    'blafjoll',
+    'sund',
+    'rokkur',
+    'suld',
+], hanna_css_1.colorFamilies, {
+    /** @deprecated  This is a typo  (Will be removed in v0.11) */
+    ellidarardalur: 'ellidaardalur',
+});
+/** @depcrecated import `colorThemes` from  `@reykjavik/hanna-css` instead  (Will be removed in v0.11) */
+exports.themeOptions = Object.assign(['trustworthy', 'dependable', 'friendly', 'lively', 'colorful'], hanna_css_1.colorThemes);
+exports.aligns = {
+    right: true,
+    left: true,
+};

package/esm/AccordionList.d.ts

@@ -0,0 +1,17 @@
+import { SSRSupport } from '@hugsmidjan/react/hooks';
+import { SeenProp } from './utils/seenEffect';
+declare type AccordionListItemProps = {
+    title: string | JSX.Element;
+    content: string | JSX.Element | undefined;
+    id?: string;
+    disabled?: boolean;
+};
+export declare type AccordionListProps = {
+    items: Array<AccordionListItemProps>;
+    ssr?: SSRSupport;
+    wide?: boolean;
+    /** Index of those items that should start open */
+    defaultOpen?: Array<number>;
+} & SeenProp;
+declare const AccordionList: (props: AccordionListProps) => JSX.Element;
+export default AccordionList;

package/esm/AccordionList.jsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react';
+import { useDomid, useIsBrowserSide } from '@hugsmidjan/react/hooks';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useSeenEffect } from './utils/seenEffect';
+const AccordionListItem = (props) => {
+    const { title, content, id, disabled = false, defaultOpen, ssr } = props;
+    const [open, setOpen] = useState(defaultOpen);
+    useEffect(() => setOpen(defaultOpen), [defaultOpen]);
+    const domid = useDomid();
+    const isBrowser = useIsBrowserSide(ssr);
+    const itemDisabled = (isBrowser && disabled) || !content;
+    return (<div className={getBemClass('AccordionList__item', [itemDisabled && 'disabled'])} id={id} data-start-open={defaultOpen || undefined} data-sprinkled={isBrowser}>
+      <h3 className="AccordionList__title">
+        {isBrowser ? (<button type="button" className="AccordionList__button" aria-controls={domid} aria-expanded={open || undefined} onClick={() => {
+                setOpen(!open);
+            }} disabled={itemDisabled}>
+            {title}
+          </button>) : (title)}
+      </h3>
+      <div id={isBrowser && domid} className="AccordionList__content" hidden={isBrowser && (!open || itemDisabled)}>
+        {content}
+      </div>
+    </div>);
+};
+// ---------------------------------------------------------------------------
+const AccordionList = (props) => {
+    const { items, ssr, wide, defaultOpen, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    return (<div className={getBemClass('AccordionList', [wide && 'wide'])} ref={ref}>
+      {items.map((item, i) => (<AccordionListItem key={i} {...item} ssr={ssr} defaultOpen={defaultOpen && defaultOpen.includes(i)}/>))}
+    </div>);
+};
+export default AccordionList;

package/esm/ActionCards.d.ts

@@ -0,0 +1,5 @@
+import { TextCardListProps } from './_abstract/CardList';
+import { SeenProp } from './utils/seenEffect';
+export declare type ActionCardsProps = TextCardListProps & SeenProp;
+declare const ActionCards: (props: ActionCardsProps) => JSX.Element;
+export default ActionCards;

package/esm/ActionCards.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CardList } from './_abstract/CardList';
+import { useSeenEffect } from './utils/seenEffect';
+const ActionCards = (props) => {
+    const [ref] = useSeenEffect(props.startSeen);
+    return (<div className="ActionCards" ref={ref}>
+      <CardList {...props} bemPrefix="ActionCards"/>
+    </div>);
+};
+export default ActionCards;

package/esm/Alert.d.ts

@@ -0,0 +1,49 @@
+import { MouseEvent, ReactNode } from 'react';
+import { SSRSupport } from '@hugsmidjan/react/hooks';
+import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+export declare type AlertI18n = {
+    closeLabel: string;
+    closeLabelLong?: string;
+};
+export declare const defaultAlertTexts: DefaultTexts<AlertI18n>;
+export declare const alertTypes: {
+    info: number;
+    success: number;
+    warning: number;
+    error: number;
+    critical: number;
+};
+declare type AlertType = keyof typeof alertTypes;
+export declare type AlertProps = {
+    type: AlertType;
+    closable?: boolean;
+    children?: ReactNode;
+    childrenHTML?: string;
+    /** server-side anchor href */
+    closeUrl?: string;
+    texts?: AlertI18n;
+    lang?: string;
+    ssr?: SSRSupport;
+} & ({
+    /** Seconds until the Alert auto-closes.
+     *
+     * Mosueover and keyboard focus resets the timer.
+     */
+    autoClose: number;
+    /** Return `false` to prevent the alert from closing. */
+    onClose?: () => void | boolean;
+    /** Callback that fires when the alert has closed/transitoned out */
+    onClosed: () => void;
+} | {
+    autoClose?: never;
+    /**
+     * @deprecated This signature with the `event` argument will be removed in hanna-react v0.9
+     *
+     * Return `false` to prevent the alert from closing
+     */
+    onClose?(event: MouseEvent): void | boolean;
+    /** Callback that fires after the alert has closed/transitoned out */
+    onClosed?(): void;
+});
+declare const Alert: (props: AlertProps) => JSX.Element;
+export default Alert;

package/esm/Alert.jsx

@@ -0,0 +1,94 @@
+import React, { useCallback, useEffect, useRef, useState, } from 'react';
+import { useIsBrowserSide, useOnMount } from '@hugsmidjan/react/hooks';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { getTexts } from '@reykjavik/hanna-utils/i18n';
+import Button from './_abstract/Button';
+import { isPreact } from './utils/env';
+// FIXME: Eventually import from @reykjavik/hanna-styles/constants
+const AlertCloseTransitionDuration = 400;
+const useAutoClosing = (autoClose) => {
+    const [temp, setTemp] = useState(0);
+    if (!autoClose) {
+        return { autoClosing: false };
+    }
+    const thaw = () => setTemp((temp) => temp + 1);
+    const freeze = () => setTemp((temp) => temp - 1);
+    return {
+        autoClosing: temp === 0,
+        autoClosingProps: Object.assign({ onMouseEnter: freeze, onMouseLeave: thaw, onFocus: freeze, onBlur: thaw }, (isPreact
+            ? {
+                onfocusin: (e) => e.currentTarget !== e.target && freeze(),
+                onfocusout: (e) => e.currentTarget !== e.target && thaw(),
+            }
+            : undefined)),
+    };
+};
+export const defaultAlertTexts = {
+    en: { closeLabel: 'Hide' },
+    is: { closeLabel: 'Fela' },
+};
+export const alertTypes = {
+    info: 1,
+    success: 1,
+    warning: 1,
+    error: 1,
+    critical: 1,
+};
+const Alert = (props) => {
+    const { type, childrenHTML, children, onClose, closeUrl, closable = !!(onClose || closeUrl != null), ssr, onClosed, } = props;
+    const autoClose = props.autoClose && props.autoClose > 0 ? props.autoClose : 0;
+    const closing = useRef();
+    const [open, setOpen] = useState(!!ssr);
+    const isBrowser = useIsBrowserSide(ssr);
+    const showCloseButton = closable && (isBrowser || closeUrl != null);
+    const { closeLabel, closeLabelLong } = getTexts(props, defaultAlertTexts);
+    useOnMount(() => {
+        setOpen(true);
+    });
+    const closeAlert = useCallback((event) => {
+        const ret = onClose &&
+            // @ts-expect-error  (@deprecated `event` parameter will be removed in v0.9)
+            onClose(event);
+        if (ret !== false) {
+            setOpen(false);
+            if (closing.current) {
+                clearTimeout(closing.current);
+                closing.current = undefined;
+            }
+            closing.current = setTimeout(() => {
+                onClosed && onClosed();
+            }, AlertCloseTransitionDuration);
+        }
+    }, [onClose, onClosed]);
+    const { autoClosing, autoClosingProps } = useAutoClosing(autoClose);
+    useEffect(() => {
+        if (autoClosing) {
+            let autoCloseTimeout;
+            autoCloseTimeout = setTimeout(() => {
+                closeAlert();
+            }, autoClose * 1000);
+            return () => {
+                if (autoCloseTimeout) {
+                    clearTimeout(autoCloseTimeout);
+                    autoCloseTimeout = undefined;
+                }
+                if (closing.current) {
+                    clearTimeout(closing.current);
+                    closing.current = undefined;
+                }
+            };
+        }
+    }, [closeAlert, autoClosing, autoClose]);
+    return (<div className={getBemClass('Alert', [
+            !!alertTypes[type] && type,
+            closable && 'closable',
+        ])} role="alert" hidden={!open || undefined} {...autoClosingProps}>
+      {childrenHTML ? (<div dangerouslySetInnerHTML={{ __html: childrenHTML }}/>) : (children)}{' '}
+      {showCloseButton && (<Button bem="Alert__close" {...(closeUrl != null ? { href: closeUrl } : { type: 'button' })} onClick={(e) => {
+                closeAlert(e);
+            }} aria-label={closeLabelLong} title={closeLabelLong || closeLabel}>
+          {closeLabel}
+        </Button>)}
+    </div>);
+};
+export default Alert;

package/esm/ArticleCarousel/_ArticleCarouselCard.d.ts

@@ -0,0 +1,27 @@
+import { HannaColorTheme } from '@reykjavik/hanna-css';
+import { Illustration } from '@reykjavik/hanna-utils/assets';
+import { ImageProps } from '../_abstract/Image';
+import { ColorFamily } from '../constants';
+export declare type ArticleCarouselImageProps = ImageProps & {
+    photo?: boolean;
+};
+export declare type ArticleCarouselCardProps = {
+    date?: string;
+    title: string;
+    summary: string;
+    href: string;
+    color?: ColorFamily;
+    /** NOTE: if both `color` and `theme` are specified
+     * then `color` takes precedence.
+     */
+    theme?: HannaColorTheme;
+} & ({
+    illustration: Illustration;
+    image?: undefined;
+} | {
+    illustration?: undefined;
+    image: ArticleCarouselImageProps | undefined;
+});
+export declare const ArticleCarouselCard: (props: ArticleCarouselCardProps & {
+    moreLabel?: string;
+}) => JSX.Element;

package/esm/ArticleCarousel/_ArticleCarouselCard.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
+import Image from '../_abstract/Image';
+import { Link } from '../_abstract/Link';
+import { colorFamilies, themeOptions } from '../constants';
+export const ArticleCarouselCard = (props) => {
+    const { date, title, summary, href, moreLabel, color, theme, illustration, image } = props;
+    const photo = image === null || image === void 0 ? void 0 : image.photo;
+    const imageProps = illustration ? { src: getIllustrationUrl(illustration) } : image;
+    return (<div className="ArticleCarouselCard" data-color={color && colorFamilies[color]} data-color-theme={!color ? theme && themeOptions[theme] : undefined} // color takes precedence over "theme"
+    >
+      <Link className="ArticleCarouselCard__link" href={href}>
+        {' '}
+        <Image placeholder className={getBemClass('ArticleCarouselCard__illustration', photo && 'photo')} {...imageProps}/>
+        <h3 className="ArticleCarouselCard__title">{title}</h3>{' '}
+      </Link>{' '}
+      {date && <span className="ArticleCarouselCard__date">{date}</span>}
+      <div className="ArticleCarouselCard__summary">{summary}</div>
+      {moreLabel && (<Link className="ArticleCarouselCard__morelink" href={href} aria-label={title}>
+          {' '}
+          {moreLabel}{' '}
+        </Link>)}
+    </div>);
+};

package/esm/ArticleCarousel.d.ts

@@ -0,0 +1,12 @@
+import { SSRSupport } from '@hugsmidjan/react/hooks';
+import { ArticleCarouselCardProps, ArticleCarouselImageProps } from './ArticleCarousel/_ArticleCarouselCard';
+import { SeenProp } from './utils/seenEffect';
+export declare type ArticleCarouselProps = {
+    items: Array<ArticleCarouselCardProps>;
+    title?: string;
+    moreLabel?: string;
+    ssr?: SSRSupport;
+} & SeenProp;
+export type { ArticleCarouselCardProps, ArticleCarouselImageProps };
+declare const ArticleCarousel: (props: ArticleCarouselProps) => JSX.Element;
+export default ArticleCarousel;

package/esm/ArticleCarousel.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import AbstractCarousel from './_abstract/_AbstractCarousel';
+import { ArticleCarouselCard, } from './ArticleCarousel/_ArticleCarouselCard';
+const ArticleCarousel = (props) => {
+    const { title, items, moreLabel, ssr, startSeen } = props;
+    return (<AbstractCarousel bem="ArticleCarousel" title={title} items={items} Component={ArticleCarouselCard} ComponentProps={{ moreLabel }} ssr={ssr} startSeen={startSeen}/>);
+};
+export default ArticleCarousel;

package/esm/ArticleMeta.d.ts

@@ -0,0 +1,9 @@
+export declare type ArticleMetaItem = {
+    label: string;
+    href?: string;
+};
+export declare type ArticleMetaProps = {
+    items: Array<ArticleMetaItem>;
+};
+declare const ArticleMeta: (props: ArticleMetaProps) => JSX.Element | null;
+export default ArticleMeta;

package/esm/ArticleMeta.jsx

@@ -0,0 +1,17 @@
+import React, { Fragment } from 'react';
+import { Link } from './_abstract/Link';
+const ArticleMeta = (props) => {
+    const { items } = props;
+    if (items.length === 0) {
+        return null;
+    }
+    return (<div className="ArticleMeta">
+      {items.map(({ label, href }, i) => (<Fragment key={i}>
+          {href == null ? (<span className="ArticleMeta__item"> {label} </span>) : (<Link className="ArticleMeta__item" href={href}>
+              {' '}
+              {label}{' '}
+            </Link>)}{' '}
+        </Fragment>))}
+    </div>);
+};
+export default ArticleMeta;

package/esm/Attention.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export declare type AttentionProps = {
+    small?: boolean;
+    children: ReactNode;
+};
+declare const Attention: (props: AttentionProps) => JSX.Element;
+export default Attention;

package/esm/Attention.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const Attention = (props) => (<div className={getBemClass('Attention', props.small && 'small')}>{props.children}</div>);
+export default Attention;

package/esm/BasicTable.d.ts

@@ -0,0 +1,12 @@
+import { TableProps } from '@hugsmidjan/react/Table';
+import { SeenProp } from './utils/seenEffect';
+declare type BasicTableProps = {
+    compact?: boolean;
+    type?: 'text' | 'number';
+    children?: undefined;
+    modifier?: string;
+    fullWidth?: boolean;
+    align?: 'right';
+} & SeenProp & Omit<TableProps, 'className' | 'children'>;
+declare const BasicTable: (props: BasicTableProps) => JSX.Element;
+export default BasicTable;

package/esm/BasicTable.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Table from '@hugsmidjan/react/Table';
+import TableWrapper from '@hugsmidjan/react/TableWrapper';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useSeenEffect } from './utils/seenEffect';
+const BasicTable = (props) => {
+    const { cols, caption, thead, tfoot, align, fullWidth, startSeen } = props;
+    const tbodyProps = props.tbodies
+        ? { tbodies: props.tbodies }
+        : { tbody: props.tbody || [] };
+    const modifier = props.modifier;
+    const [ref] = useSeenEffect(startSeen);
+    return (<TableWrapper modifier={[
+            'BasicTable',
+            modifier && 'BasicTable--' + modifier,
+            fullWidth && 'BasicTable--fullwidth',
+            align === 'right' && !fullWidth && 'BasicTable--align--' + align,
+        ]} wrapperRef={ref}>
+      <Table className={getBemClass('BasicTable', [
+            props.compact && 'compact',
+            modifier && modifier,
+        ])} {...{
+        cols,
+        caption,
+        thead,
+        tfoot,
+    }} {...tbodyProps}/>
+    </TableWrapper>);
+};
+export default BasicTable;

package/esm/Bling.d.ts

@@ -0,0 +1,81 @@
+import { BlingType } from '@reykjavik/hanna-utils/assets';
+declare const colors: {
+    tertiary: boolean;
+    secondary: boolean;
+    primary: boolean;
+};
+export declare type BlingColor = keyof typeof colors;
+declare const aligns: {
+    left: boolean;
+    'left-ish': boolean;
+    'left-center': boolean;
+    'right-center': boolean;
+    'right-ish': boolean;
+    right: boolean;
+};
+export declare type BlingAlignment = keyof typeof aligns;
+declare const valigns: {
+    up: boolean;
+    'up-ish': boolean;
+    center: boolean;
+    'down-ish': boolean;
+    down: boolean;
+};
+export declare type BlingVAlignment = keyof typeof valigns;
+declare const parentOffset: {
+    top: boolean;
+    'top-ish': boolean;
+    center: boolean;
+    'bottom-ish': boolean;
+    bottom: boolean;
+};
+export declare type BlingParentOffset = keyof typeof parentOffset;
+export declare type BlingProps = {
+    /**
+     * Horizontal alignment relative to the bling container's
+     * full width
+     *
+     * NOTE: Blings should always be placed in a layout context
+     * where they can stretch to a full (12 columns) width
+     */
+    align?: BlingAlignment;
+    /**
+     * Vertical shift along the vertical insertion point
+     *
+     * Defult: `center`
+     */
+    vertical?: BlingVAlignment;
+    /**
+     * Vertical positioning of the insertion point within
+     * the Bling's offset parent element.
+     *
+     * Default is the natural layout flow position of the
+     * Bling element (no vertical re-positioning)
+     */
+    parent?: BlingParentOffset;
+    /**
+     * Theme color (combo) for the elelment
+     *
+     * Default: `tertiary`
+     */
+    color?: BlingColor;
+    /**
+     * Gives the Bling a positive `z-index` value.
+     *
+     * By default Blings layer themselves *underneath* other page content.
+     */
+    overlay?: boolean;
+    /** Additional className (use sparingly) */
+    className?: string;
+} & ({
+    /** The name of the Bling shape to display */
+    type: BlingType;
+    /** Not allowed when `type` is set */
+    blingUrl?: undefined;
+} | {
+    type?: undefined;
+    /** Custom SVG URL to load (use sparingly) */
+    blingUrl: string;
+});
+declare const Bling: (props: BlingProps) => JSX.Element;
+export default Bling;

package/esm/Bling.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { getBlingUrl } from '@reykjavik/hanna-utils/assets';
+import { useGetSVGtext } from './utils/useGetSVGtext';
+const colors = {
+    tertiary: true,
+    secondary: true,
+    primary: true,
+};
+const aligns = {
+    left: true,
+    'left-ish': true,
+    'left-center': true,
+    'right-center': true,
+    'right-ish': true,
+    right: true,
+};
+const valigns = {
+    up: true,
+    'up-ish': true,
+    center: true,
+    'down-ish': true,
+    down: true,
+};
+const parentOffset = {
+    top: true,
+    'top-ish': true,
+    center: true,
+    'bottom-ish': true,
+    bottom: true,
+};
+const Bling = (props) => {
+    const { align, vertical, color, overlay, type, blingUrl, parent, className } = props;
+    const imageUrl = type ? getBlingUrl(type) : blingUrl;
+    const inlineSvg = useGetSVGtext(imageUrl);
+    return (<div className={getBemClass('Bling', [
+            'align--' + (align && align in aligns ? align : 'left'),
+            vertical && vertical in valigns && 'vertical--' + vertical,
+            color && color in colors && 'color--' + color,
+            parent && parent in parentOffset && 'parent--' + parent,
+            overlay && 'overlay',
+        ], className)} data-bling-type={type} data-bling-image={!type ? blingUrl : undefined} dangerouslySetInnerHTML={inlineSvg && { __html: inlineSvg.code }}/>);
+};
+export default Bling;

package/esm/BlockBreak.d.ts

@@ -0,0 +1,2 @@
+declare const BlockBreak: () => JSX.Element;
+export default BlockBreak;

package/esm/BlockBreak.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+/*
+  TODO: Add story
+*/
+const BlockBreak = () => <div className="BlockBreak"/>;
+export default BlockBreak;

package/esm/BlockQuote.d.ts

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

package/esm/BlockQuote.jsx

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

package/esm/BreadCrumbs.d.ts

@@ -0,0 +1,11 @@
+export declare type BreadCrumb = {
+    href?: string;
+    label: string;
+};
+export declare type BreadCrumbTrail = Array<BreadCrumb>;
+export declare type BreadCrumbsProps = {
+    title: string;
+    trail: BreadCrumbTrail;
+};
+declare const BreadCrumbs: (props: BreadCrumbsProps) => JSX.Element | null;
+export default BreadCrumbs;

package/esm/BreadCrumbs.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Link } from './_abstract/Link';
+const BreadCrumbs__item = (props) => {
+    const { link, current } = props;
+    return link.href != null ? (<Link className="BreadCrumbs__item" href={link.href} aria-current={current || undefined}>
+      {link.label}
+    </Link>) : (<span className="BreadCrumbs__item" aria-current={current || undefined}>
+      {link.label}
+    </span>);
+};
+const BreadCrumbs = (props) => {
+    const { title, trail } = props;
+    if (trail.length === 0) {
+        return null;
+    }
+    const ancestors = trail.slice(0, -1);
+    const current = trail[trail.length - 1];
+    return (<nav className="BreadCrumbs" aria-label={title}>
+      <span className="BreadCrumbs__title">{title}:</span>{' '}
+      {ancestors.map((link, i) => {
+            return (<React.Fragment key={i}>
+            <BreadCrumbs__item link={link}/>{' '}
+            <span className="BreadCrumbs__separator" aria-label="">
+              &gt;
+            </span>{' '}
+          </React.Fragment>);
+        })}
+      <BreadCrumbs__item link={current} current/>
+    </nav>);
+};
+export default BreadCrumbs;