@reykjavik/hanna-react 0.10.53 → 0.10.56

package/esm/Gallery/_GalleryModal.jsx

@@ -0,0 +1,58 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { objectClean, objectIsSame } from '@hugsmidjan/qj/object';
+import CarouselPaging from '@hugsmidjan/react/CarouselPaging';
+import Modal from '@hugsmidjan/react/Modal';
+import GalleryModalContext from './_GalleryModalContext';
+import GalleryModalItem from './_GalleryModalItem';
+const GalleryModal = (props) => {
+    const { texts } = props;
+    const { currentImage, items, setCurrentImage } = useContext(GalleryModalContext);
+    const [image, setImage] = useState(currentImage);
+    const [animated, setAnimated] = useState(false);
+    const updateImage = (index) => {
+        setAnimated(!animated);
+        setTimeout(() => {
+            setCurrentImage(items[index]);
+        }, 200);
+    };
+    useEffect(() => {
+        if (image !== currentImage) {
+            const imgSource = (currentImage === null || currentImage === void 0 ? void 0 : currentImage.largeImageSrc) || (currentImage === null || currentImage === void 0 ? void 0 : currentImage.src);
+            if (imgSource) {
+                const imageToLoad = new window.Image();
+                imageToLoad.src = imgSource;
+                imageToLoad.onload = () => {
+                    setImage(currentImage);
+                };
+            }
+            else {
+                setImage(undefined);
+            }
+        }
+    }, [image, currentImage]);
+    if (!image) {
+        return null;
+    }
+    const imageIndex = items.findIndex((item) => 
+    // FIXME: This if weirdly inefficient. Either memoize,
+    // or do a simpler single-property comparison.
+    objectIsSame(objectClean(image), objectClean(item)));
+    return (<Modal open={true} onClosed={() => {
+            setCurrentImage(undefined);
+        }} startOpen={false} bem="GalleryModal" texts={{ closeButton: texts.modalCloseLabel }}>
+      <>
+        <CSSTransition in={animated} timeout={200} onEntered={() => {
+            setAnimated(!animated);
+        }} classNames="GalleryModalItem--">
+          <GalleryModalItem {...image}/>
+        </CSSTransition>
+
+        <CarouselPaging bem="GalleryModalPager" itemCount={items.length} current={imageIndex} setCurrent={updateImage} texts={{
+            next: texts.modalNextLabel,
+            prev: texts.modalPrevLabel,
+        }}/>
+      </>
+    </Modal>);
+};
+export default GalleryModal;

package/esm/Gallery/_GalleryModalContext.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { GalleryProps } from '../Gallery';
+import { GalleryItemProps } from './_GalleryItem';
+declare type ModalContextProps = {
+    setCurrentImage: (item: GalleryItemProps | undefined) => void;
+    currentImage: GalleryItemProps | undefined;
+} & GalleryProps;
+declare const GalleryModalContext: React.Context<ModalContextProps>;
+export default GalleryModalContext;

package/esm/Gallery/_GalleryModalContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+const GalleryModalContext = React.createContext({});
+export default GalleryModalContext;

package/esm/Gallery/_GalleryModalItem.d.ts

@@ -0,0 +1,3 @@
+import { GalleryItemProps } from './_GalleryItem';
+declare const GalleryModalItem: (props: GalleryItemProps) => JSX.Element;
+export default GalleryModalItem;

package/esm/Gallery/_GalleryModalItem.jsx

@@ -0,0 +1,24 @@
+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 Image from '../_abstract/Image';
+const GalleryModalItem = (props) => {
+    const { caption, description } = props, image = __rest(props, ["caption", "description"]);
+    return (<div className="GalleryModalItem">
+      {(caption || description) && (<div className="GalleryModalItem__text">
+          <div className="GalleryModalItem__caption">{caption}</div>
+          <div className="GalleryModalItem__description">{description}</div>
+        </div>)}
+      <Image className="GalleryModalItem__image" src={image.largeImageSrc || image.src}/>
+    </div>);
+};
+export default GalleryModalItem;

package/esm/Gallery.d.ts

@@ -0,0 +1,17 @@
+import { SSRSupport } from '@hugsmidjan/react/hooks';
+import { GalleryItemProps } from './Gallery/_GalleryItem';
+import { SeenProp } from './utils/seenEffect';
+export type { GalleryItemProps } from './Gallery/_GalleryItem';
+export declare type GalleryI18n = {
+    modalNextLabel: string;
+    modalPrevLabel: string;
+    modalCloseLabel: string;
+};
+export declare type GalleryProps = {
+    items: Array<GalleryItemProps>;
+    texts?: GalleryI18n;
+    lang?: string;
+    ssr?: SSRSupport;
+} & SeenProp;
+declare const Gallery: (props: GalleryProps) => JSX.Element;
+export default Gallery;

package/esm/Gallery.jsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { getTexts } from '@reykjavik/hanna-utils/i18n';
+import AbstractCarousel from './_abstract/_AbstractCarousel';
+import GalleryItem from './Gallery/_GalleryItem';
+import GalleryModal from './Gallery/_GalleryModal';
+import GalleryModalContext from './Gallery/_GalleryModalContext';
+const defaultTexts = {
+    en: {
+        modalNextLabel: 'Next image',
+        modalPrevLabel: 'Previous image',
+        modalCloseLabel: 'Back to article',
+    },
+    is: {
+        modalNextLabel: 'Næsta mynd',
+        modalPrevLabel: 'Fyrri mynd',
+        modalCloseLabel: 'Til baka í grein',
+    },
+};
+const Gallery = (props) => {
+    const { items, ssr, startSeen } = props;
+    const texts = getTexts(props, defaultTexts);
+    const [modalImage, setModalImage] = useState(undefined);
+    return (<GalleryModalContext.Provider value={{ items, setCurrentImage: setModalImage, currentImage: modalImage }}>
+      <AbstractCarousel bem="Gallery" items={items} Component={GalleryItem} ssr={ssr} startSeen={startSeen}/>
+      <GalleryModal {...modalImage} texts={texts}/>
+    </GalleryModalContext.Provider>);
+};
+export default Gallery;

package/esm/GridBlocks.d.ts

@@ -0,0 +1,26 @@
+import { Efnistakn } from '@reykjavik/hanna-utils/assets';
+import { ButtonProps } from './_abstract/Button';
+import { ImageProps } from './_abstract/Image';
+import { SeenProp } from './utils/seenEffect';
+export declare type GridBlockItem = {
+    title: string;
+    summary: string | JSX.Element;
+    icon?: Efnistakn;
+    image?: ImageProps;
+} & ({
+    href?: string;
+    links: Array<ButtonProps>;
+} | {
+    href: string;
+    links?: Array<ButtonProps>;
+});
+export declare type GridBlocksProps = {
+    blocks: Array<GridBlockItem>;
+    twocol?: boolean;
+} & SeenProp;
+export declare type GridBlocksProp1s = {
+    blocks: Array<GridBlockItem>;
+    twocol?: boolean;
+};
+declare const GridBlocks: (props: GridBlocksProps) => JSX.Element;
+export default GridBlocks;

package/esm/GridBlocks.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { getEfnistaknUrl } from '@reykjavik/hanna-utils/assets';
+import Image from './_abstract/Image';
+import { Link } from './_abstract/Link';
+import { useSeenEffect } from './utils/seenEffect';
+import ButtonTertiary from './ButtonTertiary';
+const GridBlocks = (props) => {
+    const { blocks, twocol, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    return (<div className={getBemClass('GridBlocks', [twocol && 'twocol'])} ref={ref}>
+      {blocks.map(({ title, summary, href, links = [], icon, image }, i) => {
+            const imageProps = icon ? { src: getEfnistaknUrl(icon) } : image;
+            return (<div key={i} className="GridBlocks__item">
+            {imageProps && <Image className="GridBlocks__illustration" {...imageProps}/>}
+            <div className="GridBlocks__textwrap">
+              <h3 className="GridBlocks__item__title">
+                {href != null ? (<Link className="GridBlocks__item__titlelink" href={href}>
+                    {title}
+                  </Link>) : (title)}
+              </h3>
+              <div className="GridBlocks__item__summary">{summary}</div>
+              <ul className="GridBlocks__links">
+                {links.map((link, i) => {
+                    return (<li key={i} className="GridBlocks__link">
+                      <ButtonTertiary {...link}/>
+                    </li>);
+                })}
+              </ul>
+            </div>
+          </div>);
+        })}
+    </div>);
+};
+export default GridBlocks;

package/esm/Heading.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { ComponentLayoutProps } from './constants';
+declare const sizes: {
+    readonly small: "small";
+    /** Default value */
+    readonly normal: "normal";
+    readonly large: "large";
+};
+declare type HeadingSize = keyof typeof sizes;
+export declare type HeadingProps = {
+    Tag?: 'h2' | 'h3';
+    size?: HeadingSize;
+    children: ReactNode;
+} & ComponentLayoutProps;
+declare const Heading: (props: HeadingProps) => JSX.Element;
+export default Heading;

package/esm/Heading.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const sizes = {
+    small: 'small',
+    /** Default value */
+    normal: 'normal',
+    large: 'large',
+};
+const Heading = (props) => {
+    const { size = 'normal', Tag = 'h2', align, wide, children } = props;
+    return (<Tag className={getBemClass('Heading', [
+            sizes[size],
+            align === 'right' && 'align--' + align,
+            !align && wide && 'wide',
+        ])}>
+      {children}
+    </Tag>);
+};
+export default Heading;

package/esm/HeroBlock.d.ts

@@ -0,0 +1,19 @@
+import { Illustration } from '@reykjavik/hanna-utils/assets';
+import { ButtonProps } from './_abstract/Button';
+import { ImageProps } from './_abstract/Image';
+import { SeenProp } from './utils/seenEffect';
+declare type HeroBlockImageProps = {
+    illustration: Illustration;
+    image?: undefined;
+} | {
+    image: ImageProps;
+    illustration?: undefined;
+};
+export declare type HeroBlockProps = {
+    title: string;
+    summary: string | JSX.Element;
+    primaryButton?: ButtonProps;
+    secondaryButton?: ButtonProps;
+} & HeroBlockImageProps & SeenProp;
+declare const HeroBlock: (props: HeroBlockProps) => JSX.Element;
+export default HeroBlock;

package/esm/HeroBlock.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
+import Image from './_abstract/Image';
+import { useSeenEffect } from './utils/seenEffect';
+import ButtonPrimary from './ButtonPrimary';
+import ButtonTertiary from './ButtonTertiary';
+const HeroBlock = (props) => {
+    const { title, summary, illustration, image, primaryButton, secondaryButton, startSeen, } = props;
+    const hasButtons = Boolean(primaryButton || secondaryButton);
+    const imgProps = illustration ? { src: getIllustrationUrl(illustration) } : image;
+    const [ref] = useSeenEffect(startSeen);
+    return (<div className="HeroBlock" ref={ref}>
+      <h1 className="HeroBlock__title">{title}</h1>
+      <Image className="HeroBlock__image" {...imgProps}/>
+      <div className="HeroBlock__summary">{summary}</div>
+      {hasButtons && (<div className="HeroBlock__buttons">
+          {primaryButton && <ButtonPrimary {...primaryButton}/>}{' '}
+          {secondaryButton && <ButtonTertiary {...secondaryButton}/>}
+        </div>)}
+    </div>);
+};
+export default HeroBlock;

package/esm/IframeBlock.d.ts

@@ -0,0 +1,23 @@
+export declare type IframeBlockProps = {
+    src: string;
+    framed?: boolean;
+    compact?: boolean;
+    align?: 'right';
+} & ({
+    /** Default: 'auto' ... which initializes "iframe-resizer" script */
+    height?: 'auto';
+    scrolling?: never;
+} | {
+    height: number;
+    scrolling?: boolean | 'no' | 'yes';
+});
+/**
+ * When `height` is undefined or "auto", then Add the following code-snipped to the iframed page:
+ *
+ * ```js
+ * <script> window.iFrameResizer = { targetOrigin: '*' }; </script>
+ * <script src="https://styles.reykjavik.is/assets/scripts/iframeResizer.contentWindow@4.js"></script>
+ * ```
+ */
+declare const IframeBlock: (props: IframeBlockProps) => JSX.Element;
+export default IframeBlock;

package/esm/IframeBlock.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import IframeResizer from 'iframe-resizer-react';
+/**
+ * When `height` is undefined or "auto", then Add the following code-snipped to the iframed page:
+ *
+ * ```js
+ * <script> window.iFrameResizer = { targetOrigin: '*' }; </script>
+ * <script src="https://styles.reykjavik.is/assets/scripts/iframeResizer.contentWindow@4.js"></script>
+ * ```
+ */
+const IframeBlock = (props) => {
+    const { src, framed, compact, scrolling, height = 'auto', align } = props;
+    const className = getBemClass('IframeBlock', [
+        framed && 'framed',
+        compact && 'compact',
+        align === 'right' && 'align--' + align,
+    ]);
+    return height === 'auto' ? (<IframeResizer className={className} src={src}/>) : (<iframe className={className} src={src} 
+    // hidden tiger: pass negative height to disable iframe-resizer but not set height explicitly
+    // (Silly hack, don't rely on this)
+    height={height < 0 ? undefined : height} 
+    // allow undefined to suppress scrolling attribute
+    scrolling={scrolling === true ? 'yes' : scrolling === false ? 'no' : scrolling}/>);
+};
+export default IframeBlock;

package/esm/Illustration.d.ts

@@ -0,0 +1,13 @@
+import { Illustration as IllustrationName } from '@reykjavik/hanna-utils/assets';
+import { ImageProps } from './_abstract/Image';
+declare type IllustrationProps = {
+    children?: undefined;
+} & ({
+    type: IllustrationName;
+    image?: undefined;
+} | {
+    image: ImageProps;
+    type?: undefined;
+});
+declare const Illustration: (props: IllustrationProps) => JSX.Element;
+export default Illustration;

package/esm/Illustration.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { getIllustrationUrl, } from '@reykjavik/hanna-utils/assets';
+import Image from './_abstract/Image';
+const Illustration = (props) => {
+    const imgProps = props.type ? { src: getIllustrationUrl(props.type) } : props.image;
+    return <Image className="Illustration" {...imgProps}/>;
+};
+export default Illustration;

package/esm/ImageCards.d.ts

@@ -0,0 +1,8 @@
+import { ImageCardListProps, ImageCardProps as ICP } from './_abstract/CardList';
+import { SeenProp } from './utils/seenEffect';
+export declare type ImageCardProps = ICP;
+declare type _ImageCardProps = ImageCardListProps & {
+    background?: boolean;
+} & SeenProp;
+declare const ImageCards: (props: _ImageCardProps) => JSX.Element;
+export default ImageCards;

package/esm/ImageCards.jsx

@@ -0,0 +1,23 @@
+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 { useSeenEffect } from './utils/seenEffect';
+const ImageCards = (props) => {
+    const { background, startSeen } = props, cardListProps = __rest(props, ["background", "startSeen"]);
+    const [ref] = useSeenEffect(startSeen);
+    return (<div className={getBemClass('ImageCards', background && 'background')} ref={ref}>
+      <CardList {...cardListProps} bemPrefix="ImageCards" imgPlaceholder={props.imgPlaceholder || true}/>
+    </div>);
+};
+export default ImageCards;

package/esm/InfoBlock.d.ts

@@ -0,0 +1,17 @@
+import { SeenProp } from './utils/seenEffect';
+export declare type InfoBlockProps = {
+    title: string;
+    subtitle: string | JSX.Element;
+    items: Array<string | JSX.Element>;
+} & ({
+    attention?: undefined;
+    extraInfo?: undefined;
+} | {
+    attention: string | JSX.Element;
+    extraInfo?: undefined;
+} | {
+    extraInfo: string | JSX.Element;
+    attention?: undefined;
+}) & SeenProp;
+declare const InfoBlock: (props: InfoBlockProps) => JSX.Element;
+export default InfoBlock;

package/esm/InfoBlock.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useSeenEffect } from './utils/seenEffect';
+const InfoBlock = (props) => {
+    const { title, subtitle, items, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    return (<div className="InfoBlock" ref={ref}>
+      <h2 className="InfoBlock__title">{title}</h2>
+      <div className="InfoBlock__subtitle">{subtitle}</div>
+      <ul className="InfoBlock__items">
+        {items.map((item, i) => (<li key={i} className="InfoBlock__item">
+            {item}
+          </li>))}
+      </ul>
+      {'extraInfo' in props && (<div className="InfoBlock__extrainfo">{props.extraInfo}</div>)}
+      {'attention' in props && (<div className="InfoBlock__attention">{props.attention}</div>)}
+    </div>);
+};
+export default InfoBlock;

package/esm/InfoHero.d.ts

@@ -0,0 +1,17 @@
+import { ButtonProps } from './_abstract/Button';
+import { ImageProps } from './_abstract/Image';
+import { Alignment } from './constants';
+declare type BlingOptions = 'waves' | 'sunny-waves' | 'triangles' | 'circles';
+export declare type InfoHeroProps = {
+    title: string;
+    titleBlurb?: string | JSX.Element;
+    /** Inserts `<br/>`s on `\n`. Collapses multiple `\n`s. */
+    subTitle?: string;
+    blurb?: string | JSX.Element;
+    buttons?: Array<ButtonProps>;
+    align?: Alignment;
+    image?: ImageProps;
+    blingType?: BlingOptions;
+};
+declare const InfoHero: (props: InfoHeroProps) => JSX.Element;
+export default InfoHero;

package/esm/InfoHero.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import Blings from './_abstract/_Blings';
+import breakOnNL from './_abstract/breakOnNL';
+import Image from './_abstract/Image';
+import ButtonTertiary from './ButtonTertiary';
+import { aligns } from './constants';
+const blingOptions = {
+    waves: [
+        {
+            type: 'waves-medium',
+            color: 'primary',
+            align: 'left',
+            vertical: 'up',
+            parent: 'bottom',
+        },
+    ],
+    'sunny-waves': [
+        {
+            type: 'waves-medium',
+            align: 'left',
+            parent: 'bottom',
+            vertical: 'up',
+        },
+        {
+            type: 'circle-medium',
+            color: 'secondary',
+            align: 'right-center',
+            parent: 'top',
+            vertical: 'down-ish',
+        },
+    ],
+    triangles: [
+        {
+            type: 'triangle-large',
+            align: 'left-center',
+            parent: 'bottom',
+            vertical: 'up',
+        },
+        {
+            type: 'triangle-small',
+            color: 'secondary',
+            align: 'right',
+            parent: 'top-ish',
+            vertical: 'down-ish',
+            overlay: true,
+        },
+    ],
+    circles: [
+        {
+            type: 'circle-large',
+            align: 'left',
+            parent: 'top',
+            vertical: 'down',
+        },
+        {
+            type: 'circle-small',
+            color: 'secondary',
+            align: 'right',
+            parent: 'bottom-ish',
+            vertical: 'up-ish',
+            overlay: true,
+        },
+    ],
+};
+const InfoHero = (props) => {
+    const { title, titleBlurb, subTitle, blurb, image, buttons = [], align, blingType, } = props;
+    const showButtons = Boolean(buttons.length);
+    const alignment = align && aligns[align] ? align : 'right';
+    const blings = (blingType && blingOptions[blingType]) ||
+        blingOptions.waves; // default to `waves`
+    return (<div className={getBemClass('InfoHero', 'align--' + alignment)}>
+      <div className="InfoHero__content">
+        <h1 className="InfoHero__title">{title}</h1>
+        {titleBlurb && <div className="InfoHero__titleblurb">{titleBlurb}</div>}
+
+        {subTitle && <div className="InfoHero__subtitle">{breakOnNL(subTitle)}</div>}
+        {blurb && <div className="InfoHero__blurb">{blurb}</div>}
+
+        {showButtons && (<div className="InfoHero__buttons">
+            {buttons.map((buttonProps, i) => (<ButtonTertiary key={i} {...buttonProps}/>))}
+          </div>)}
+      </div>
+      <Image className="InfoHero__image" altText={title} {...image} placeholder/>
+      <Blings blings={blings} mirror={alignment === 'right'}/>
+    </div>);
+};
+export default InfoHero;

package/esm/IslandBlock.d.ts

@@ -0,0 +1,25 @@
+import { Formheimur } 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 type IslandBaseBlockProps = {
+    align?: Alignment;
+};
+declare type IslandImageBlock = {
+    content: BlockItem;
+} & ({
+    shapes: Formheimur;
+    image?: undefined;
+} | {
+    image: ImageProps;
+    shapes?: undefined;
+});
+declare type IslandContentBlocks = {
+    content: Array<BlockItem>;
+    shapes?: undefined;
+    image?: undefined;
+};
+export declare type IslandBlockProps = IslandBaseBlockProps & (IslandContentBlocks | IslandImageBlock) & SeenProp;
+declare const IslandBlock: (props: IslandBlockProps) => JSX.Element;
+export default IslandBlock;

package/esm/IslandBlock.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { getFormheimurUrl } from '@reykjavik/hanna-utils/assets';
+import Block from './_abstract/_Block';
+import { aligns } from './constants';
+const IslandBlock = (props) => {
+    const { align, content, shapes, image, startSeen } = props;
+    const alignment = align && aligns[align] ? align : 'right';
+    const blockProps = Array.isArray(content)
+        ? { content }
+        : {
+            content,
+            image: shapes ? { src: getFormheimurUrl(shapes), inline: true } : image || {},
+        };
+    return (<Block bem="IslandBlock" modifier={'align--' + alignment} {...blockProps} startSeen={startSeen}/>);
+};
+export default IslandBlock;

package/esm/IslandPageBlock.d.ts

@@ -0,0 +1,24 @@
+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 backgrounds: {
+    none: undefined;
+    gray: string;
+    secondary: string;
+};
+declare type Background = keyof typeof backgrounds;
+declare type IslandPageImageProps = {
+    illustration: Illustration;
+    image?: undefined;
+} | {
+    illustration?: undefined;
+    image: ImageProps;
+};
+export declare type IslandPageBlockProps = BlockItem & IslandPageImageProps & {
+    align?: Alignment;
+    background?: Background;
+} & SeenProp;
+declare const IslandPageBlock: (props: IslandPageBlockProps) => JSX.Element;
+export default IslandPageBlock;

package/esm/IslandPageBlock.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
+import Block from './_abstract/_Block';
+import { aligns } from './constants';
+const backgrounds = {
+    none: undefined,
+    gray: 'gray',
+    secondary: 'secondary',
+};
+const IslandPageBlock = (props) => {
+    const { title, summary, buttons, illustration, image, align, background, startSeen } = props;
+    const alignment = align && aligns[align] ? align : 'right';
+    const bg = backgrounds[background || 'none'];
+    return (<Block bem="IslandPageBlock" modifier={['align--' + alignment, bg && 'background--' + bg]} content={{ title, summary, buttons }} image={illustration ? { src: getIllustrationUrl(illustration) } : image || {}} startSeen={startSeen}/>);
+};
+export default IslandPageBlock;

package/esm/LabeledTextBlock.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { ButtonProps } from './_abstract/Button';
+import { SeenProp } from './utils/seenEffect';
+export declare type LabeledTextBlockProps = {
+    label: string;
+    summary: string | ReactElement;
+    wide?: boolean;
+    buttons?: Array<ButtonProps>;
+} & SeenProp;
+declare const LabeledTextBlock: (props: LabeledTextBlockProps) => JSX.Element;
+export default LabeledTextBlock;