@reykjavik/hanna-react 0.10.55 → 0.10.56

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;

package/esm/LabeledTextBlock.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useSeenEffect } from './utils/seenEffect';
+import ButtonTertiary from './ButtonTertiary';
+const LabeledTextBlock = (props) => {
+    const { label, summary, wide, buttons = [], startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    return (<div className={getBemClass('LabeledTextBlock', wide && 'wide')} ref={ref}>
+      <h2 className="LabeledTextBlock__label">{label}</h2>
+      <div className="LabeledTextBlock__summary">
+        {summary}
+        {buttons.map((button, i) => (<ButtonTertiary key={i} {...button}/>))}
+      </div>
+    </div>);
+};
+export default LabeledTextBlock;

package/esm/Layout.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { SSRSupport } from '@hugsmidjan/react/hooks';
+import { BemPropsModifier } from '@hugsmidjan/react/types';
+import { HannaColorTheme } from '@reykjavik/hanna-css';
+import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+export declare type LayoutI18n = {
+    lang?: string;
+    skipLinkLabel: string;
+    closeMenuLabel: string;
+    closeMenuLabelLong?: string;
+};
+export declare const defaultLayoutTexts: DefaultTexts<LayoutI18n>;
+declare type LayoutProps = {
+    globalAlerts?: ReactNode;
+    mainChildren?: ReactNode;
+    navChildren?: ReactNode;
+    footerChildren?: ReactNode;
+    colorTheme?: HannaColorTheme;
+    logoLink?: string;
+    siteName?: string;
+    modifier?: BemPropsModifier['modifier'];
+    ssr?: SSRSupport;
+    texts?: LayoutI18n;
+    lang?: string;
+} & ({
+    mainChildren: ReactNode;
+    children?: never;
+} | {
+    mainChildren?: never;
+    children: ReactNode;
+});
+declare const Layout: (props: LayoutProps) => JSX.Element;
+export default Layout;

package/esm/Layout.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useIsBrowserSide } from '@hugsmidjan/react/hooks';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { getAssetUrl } from '@reykjavik/hanna-utils/assets';
+import { getTexts } from '@reykjavik/hanna-utils/i18n';
+import Image from './_abstract/Image';
+import { Link } from './_abstract/Link';
+import { useMenuToggling } from './utils/useMenuToggling';
+import { useScrollbarWidthCSSVar } from './utils/useScrollbarWidthCSSVar';
+export const defaultLayoutTexts = {
+    is: {
+        lang: 'is',
+        skipLinkLabel: 'Valmynd',
+        closeMenuLabel: 'Loka',
+        closeMenuLabelLong: 'Loka valmynd',
+    },
+    en: {
+        lang: 'en',
+        skipLinkLabel: 'Skip to navigation',
+        closeMenuLabel: 'Close',
+        closeMenuLabelLong: 'Close menu',
+    },
+};
+const Layout = (props) => {
+    useScrollbarWidthCSSVar();
+    const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName = 'Reykjavík', logoLink = '/', } = props;
+    const { isMenuActive, closeMenu, toggleMenu } = useMenuToggling(ssr !== 'ssr-only');
+    const isBrowser = useIsBrowserSide( /* ssr */);
+    const txt = getTexts(props, defaultLayoutTexts);
+    return (<div className={getBemClass('Layout', props.modifier)} data-sprinkled={isBrowser} data-color-theme={colorTheme}>
+      {globalAlerts && (<div className="Layout__alerts" role="alert">
+          {globalAlerts}
+        </div>)}
+      <div className="Layout__content">
+        <div className="Layout__header" role="banner">
+          <Link className="Layout__header__logo" href={logoLink}>
+            {' '}
+            <Image inline={true} src={getAssetUrl('reykjavik-logo.svg')}/> {siteName}{' '}
+          </Link>{' '}
+          {navChildren && (<Link className="Layout__header__skiplink" href="#pagenav" onClick={isMenuActive &&
+                ((e) => {
+                    e.preventDefault();
+                    toggleMenu();
+                })} aria-label={txt.skipLinkLabel}>
+              {txt.skipLinkLabel}
+            </Link>)}
+        </div>
+        <div className="Layout__main" role="main">
+          {mainChildren || children}
+        </div>
+        {navChildren && (<div className="Layout__nav" id="pagenav" role="navigation">
+            {navChildren}
+            {isMenuActive && (<button className="Layout__nav__closebutton" onClick={closeMenu} aria-label={txt.closeMenuLabelLong} type="button">
+                {txt.closeMenuLabel}
+              </button>)}
+          </div>)}
+        <div className="Layout__footer" role="complementary">
+          {footerChildren}
+        </div>
+      </div>
+    </div>);
+};
+export default Layout;

package/esm/MainMenu/_Auxiliary.d.ts

@@ -0,0 +1,6 @@
+import type { MegaMenuPanel } from '../MainMenu';
+export declare type AuxilaryPanelIllustration = 'hanna-veitiggi' | 'hanna-vandro' | 'hanna-hugsi' | 'hanna-hissa' | 'hanna-hahaha' | 'hanna-hae' | 'hanna-god_spurning' | 'hanna-gjuggiborg' | 'hanna-benda';
+export declare type AuxiliaryPanelProps = MegaMenuPanel & {
+    image?: AuxilaryPanelIllustration;
+};
+export declare const AuxiliaryPanel: (props: AuxiliaryPanelProps) => JSX.Element;

package/esm/MainMenu/_Auxiliary.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
+import { Link } from '../_abstract/Link';
+export const AuxiliaryPanel = (props) => {
+    const { title, id, items, image } = props;
+    const imageUrl = image ? getIllustrationUrl(image) : image;
+    return (<li className="AuxiliaryPanel" id={id} style={imageUrl
+            ? { '--menu-auxiliary-image': `url(${imageUrl})` }
+            : undefined}>
+      <h3 className="AuxiliaryPanel__title">{title}</h3>
+      <ul className="AuxiliaryPanel__items">
+        {items.map((item, i) => (<li key={i} className="AuxiliaryPanel__item" aria-current={item.current || undefined}>
+            <Link className="AuxiliaryPanel__link" href={item.href} target={item.target} lang={item.lang}>
+              {item.label}
+            </Link>
+          </li>))}
+      </ul>
+    </li>);
+};

package/esm/MainMenu/_PrimaryPanel.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+import { MainMenuI18n, MegaMenuPanel } from '../MainMenu';
+declare type PrimaryPanelProps = {
+    setActivePanel: (panel: MegaMenuPanel | undefined, setFocus?: boolean) => void;
+    isParent?: boolean;
+    isActive?: boolean;
+    panel: MegaMenuPanel;
+    texts: MainMenuI18n;
+    activeRef: RefObject<HTMLLIElement>;
+    isBrowser: true | undefined;
+};
+export declare const PrimaryPanel: (props: PrimaryPanelProps) => JSX.Element;
+export {};