@reykjavik/hanna-react 0.10.55 → 0.10.56

package/GridBlocks.jsx

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const assets_1 = require("@reykjavik/hanna-utils/assets");
+const Image_1 = __importDefault(require("./_abstract/Image"));
+const Link_1 = require("./_abstract/Link");
+const seenEffect_1 = require("./utils/seenEffect");
+const ButtonTertiary_1 = __importDefault(require("./ButtonTertiary"));
+const GridBlocks = (props) => {
+    const { blocks, twocol, startSeen } = props;
+    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    return (<div className={(0, getBemClass_1.default)('GridBlocks', [twocol && 'twocol'])} ref={ref}>
+      {blocks.map(({ title, summary, href, links = [], icon, image }, i) => {
+            const imageProps = icon ? { src: (0, assets_1.getEfnistaknUrl)(icon) } : image;
+            return (<div key={i} className="GridBlocks__item">
+            {imageProps && <Image_1.default className="GridBlocks__illustration" {...imageProps}/>}
+            <div className="GridBlocks__textwrap">
+              <h3 className="GridBlocks__item__title">
+                {href != null ? (<Link_1.Link className="GridBlocks__item__titlelink" href={href}>
+                    {title}
+                  </Link_1.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_1.default {...link}/>
+                    </li>);
+                })}
+              </ul>
+            </div>
+          </div>);
+        })}
+    </div>);
+};
+exports.default = GridBlocks;

package/Heading.jsx

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@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={(0, getBemClass_1.default)('Heading', [
+            sizes[size],
+            align === 'right' && 'align--' + align,
+            !align && wide && 'wide',
+        ])}>
+      {children}
+    </Tag>);
+};
+exports.default = Heading;

package/HeroBlock.jsx

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const assets_1 = require("@reykjavik/hanna-utils/assets");
+const Image_1 = __importDefault(require("./_abstract/Image"));
+const seenEffect_1 = require("./utils/seenEffect");
+const ButtonPrimary_1 = __importDefault(require("./ButtonPrimary"));
+const ButtonTertiary_1 = __importDefault(require("./ButtonTertiary"));
+const HeroBlock = (props) => {
+    const { title, summary, illustration, image, primaryButton, secondaryButton, startSeen, } = props;
+    const hasButtons = Boolean(primaryButton || secondaryButton);
+    const imgProps = illustration ? { src: (0, assets_1.getIllustrationUrl)(illustration) } : image;
+    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    return (<div className="HeroBlock" ref={ref}>
+      <h1 className="HeroBlock__title">{title}</h1>
+      <Image_1.default className="HeroBlock__image" {...imgProps}/>
+      <div className="HeroBlock__summary">{summary}</div>
+      {hasButtons && (<div className="HeroBlock__buttons">
+          {primaryButton && <ButtonPrimary_1.default {...primaryButton}/>}{' '}
+          {secondaryButton && <ButtonTertiary_1.default {...secondaryButton}/>}
+        </div>)}
+    </div>);
+};
+exports.default = HeroBlock;

package/IframeBlock.jsx

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const iframe_resizer_react_1 = __importDefault(require("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 = (0, getBemClass_1.default)('IframeBlock', [
+        framed && 'framed',
+        compact && 'compact',
+        align === 'right' && 'align--' + align,
+    ]);
+    return height === 'auto' ? (<iframe_resizer_react_1.default 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}/>);
+};
+exports.default = IframeBlock;

package/Illustration.jsx

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const assets_1 = require("@reykjavik/hanna-utils/assets");
+const Image_1 = __importDefault(require("./_abstract/Image"));
+const Illustration = (props) => {
+    const imgProps = props.type ? { src: (0, assets_1.getIllustrationUrl)(props.type) } : props.image;
+    return <Image_1.default className="Illustration" {...imgProps}/>;
+};
+exports.default = Illustration;

package/ImageCards.jsx

@@ -0,0 +1,28 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const CardList_1 = require("./_abstract/CardList");
+const seenEffect_1 = require("./utils/seenEffect");
+const ImageCards = (props) => {
+    const { background, startSeen } = props, cardListProps = __rest(props, ["background", "startSeen"]);
+    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    return (<div className={(0, getBemClass_1.default)('ImageCards', background && 'background')} ref={ref}>
+      <CardList_1.CardList {...cardListProps} bemPrefix="ImageCards" imgPlaceholder={props.imgPlaceholder || true}/>
+    </div>);
+};
+exports.default = ImageCards;

package/InfoBlock.jsx

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const seenEffect_1 = require("./utils/seenEffect");
+const InfoBlock = (props) => {
+    const { title, subtitle, items, startSeen } = props;
+    const [ref] = (0, seenEffect_1.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>);
+};
+exports.default = InfoBlock;

package/InfoHero.jsx

@@ -0,0 +1,93 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const _Blings_1 = __importDefault(require("./_abstract/_Blings"));
+const breakOnNL_1 = __importDefault(require("./_abstract/breakOnNL"));
+const Image_1 = __importDefault(require("./_abstract/Image"));
+const ButtonTertiary_1 = __importDefault(require("./ButtonTertiary"));
+const constants_1 = require("./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 && constants_1.aligns[align] ? align : 'right';
+    const blings = (blingType && blingOptions[blingType]) ||
+        blingOptions.waves; // default to `waves`
+    return (<div className={(0, getBemClass_1.default)('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">{(0, breakOnNL_1.default)(subTitle)}</div>}
+        {blurb && <div className="InfoHero__blurb">{blurb}</div>}
+
+        {showButtons && (<div className="InfoHero__buttons">
+            {buttons.map((buttonProps, i) => (<ButtonTertiary_1.default key={i} {...buttonProps}/>))}
+          </div>)}
+      </div>
+      <Image_1.default className="InfoHero__image" altText={title} {...image} placeholder/>
+      <_Blings_1.default blings={blings} mirror={alignment === 'right'}/>
+    </div>);
+};
+exports.default = InfoHero;

package/IslandBlock.jsx

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const assets_1 = require("@reykjavik/hanna-utils/assets");
+const _Block_1 = __importDefault(require("./_abstract/_Block"));
+const constants_1 = require("./constants");
+const IslandBlock = (props) => {
+    const { align, content, shapes, image, startSeen } = props;
+    const alignment = align && constants_1.aligns[align] ? align : 'right';
+    const blockProps = Array.isArray(content)
+        ? { content }
+        : {
+            content,
+            image: shapes ? { src: (0, assets_1.getFormheimurUrl)(shapes), inline: true } : image || {},
+        };
+    return (<_Block_1.default bem="IslandBlock" modifier={'align--' + alignment} {...blockProps} startSeen={startSeen}/>);
+};
+exports.default = IslandBlock;

package/IslandPageBlock.jsx

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const assets_1 = require("@reykjavik/hanna-utils/assets");
+const _Block_1 = __importDefault(require("./_abstract/_Block"));
+const constants_1 = require("./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 && constants_1.aligns[align] ? align : 'right';
+    const bg = backgrounds[background || 'none'];
+    return (<_Block_1.default bem="IslandPageBlock" modifier={['align--' + alignment, bg && 'background--' + bg]} content={{ title, summary, buttons }} image={illustration ? { src: (0, assets_1.getIllustrationUrl)(illustration) } : image || {}} startSeen={startSeen}/>);
+};
+exports.default = IslandPageBlock;

package/LabeledTextBlock.jsx

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const seenEffect_1 = require("./utils/seenEffect");
+const ButtonTertiary_1 = __importDefault(require("./ButtonTertiary"));
+const LabeledTextBlock = (props) => {
+    const { label, summary, wide, buttons = [], startSeen } = props;
+    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    return (<div className={(0, getBemClass_1.default)('LabeledTextBlock', wide && 'wide')} ref={ref}>
+      <h2 className="LabeledTextBlock__label">{label}</h2>
+      <div className="LabeledTextBlock__summary">
+        {summary}
+        {buttons.map((button, i) => (<ButtonTertiary_1.default key={i} {...button}/>))}
+      </div>
+    </div>);
+};
+exports.default = LabeledTextBlock;

package/Layout.jsx

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultLayoutTexts = void 0;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("@hugsmidjan/react/hooks");
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const assets_1 = require("@reykjavik/hanna-utils/assets");
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
+const Image_1 = __importDefault(require("./_abstract/Image"));
+const Link_1 = require("./_abstract/Link");
+const useMenuToggling_1 = require("./utils/useMenuToggling");
+const useScrollbarWidthCSSVar_1 = require("./utils/useScrollbarWidthCSSVar");
+exports.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) => {
+    (0, useScrollbarWidthCSSVar_1.useScrollbarWidthCSSVar)();
+    const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName = 'Reykjavík', logoLink = '/', } = props;
+    const { isMenuActive, closeMenu, toggleMenu } = (0, useMenuToggling_1.useMenuToggling)(ssr !== 'ssr-only');
+    const isBrowser = (0, hooks_1.useIsBrowserSide)( /* ssr */);
+    const txt = (0, i18n_1.getTexts)(props, exports.defaultLayoutTexts);
+    return (<div className={(0, getBemClass_1.default)('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_1.Link className="Layout__header__logo" href={logoLink}>
+            {' '}
+            <Image_1.default inline={true} src={(0, assets_1.getAssetUrl)('reykjavik-logo.svg')}/> {siteName}{' '}
+          </Link_1.Link>{' '}
+          {navChildren && (<Link_1.Link className="Layout__header__skiplink" href="#pagenav" onClick={isMenuActive &&
+                ((e) => {
+                    e.preventDefault();
+                    toggleMenu();
+                })} aria-label={txt.skipLinkLabel}>
+              {txt.skipLinkLabel}
+            </Link_1.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>);
+};
+exports.default = Layout;

package/MainMenu/_Auxiliary.jsx

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuxiliaryPanel = void 0;
+const react_1 = __importDefault(require("react"));
+const assets_1 = require("@reykjavik/hanna-utils/assets");
+const Link_1 = require("../_abstract/Link");
+const AuxiliaryPanel = (props) => {
+    const { title, id, items, image } = props;
+    const imageUrl = image ? (0, assets_1.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_1.Link className="AuxiliaryPanel__link" href={item.href} target={item.target} lang={item.lang}>
+              {item.label}
+            </Link_1.Link>
+          </li>))}
+      </ul>
+    </li>);
+};
+exports.AuxiliaryPanel = AuxiliaryPanel;

package/MainMenu/_PrimaryPanel.jsx

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrimaryPanel = void 0;
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const Link_1 = require("../_abstract/Link");
+const PrimaryPanel = (props) => {
+    const { setActivePanel, panel, isParent, isActive, isBrowser, texts } = props;
+    const { items } = panel;
+    return (<li ref={isActive ? props.activeRef : undefined} className={(0, getBemClass_1.default)('PrimaryPanel', [
+            isParent && 'parent',
+            isActive && 'active',
+            items.length > 5 && 'twocol', // TODO: allow setting twocol manually?
+        ])} id={panel.id}>
+      <h3 className="PrimaryPanel__title">
+        {' '}
+        {isBrowser && !isActive ? (<button className="MainMenu__mega__title-toggler" aria-controls={panel.id} onClick={() => setActivePanel(panel, false)} aria-pressed={isActive} type="button">
+            {panel.title}
+          </button>) : (panel.title)}
+      </h3>
+      <ul className="PrimaryPanel__items">
+        {items.map((item, i) => (<li key={i} className="PrimaryPanel__item" aria-current={item.current || undefined}>
+            <Link_1.Link className="PrimaryPanel__link" href={item.href} target={item.target} lang={item.lang}>
+              <span className="PrimaryPanel__linkTitle">{item.label}</span>{' '}
+              <small className="PrimaryPanel__summary">{item.summary}</small>{' '}
+            </Link_1.Link>
+          </li>))}
+      </ul>
+      {isBrowser && isActive && (<button className="MainMenu__megapanel__backtomenu" aria-controls={panel.id} aria-label={texts.backToMenuLong} onClick={() => setActivePanel(undefined)} type="button">
+          {texts.backToMenu}
+        </button>)}
+    </li>);
+};
+exports.PrimaryPanel = PrimaryPanel;

package/MainMenu.d.ts

@@ -44,5 +44,5 @@ export declare type MainMenuProps = {
     lang?: string;
     ssr?: SSRSupport;
 };
-declare const MainMenu: (props: MainMenuProps) => JSX.Element;
+declare const MainMenu: (props: MainMenuProps) => JSX.Element | null;
 export default MainMenu;