@reykjavik/hanna-react 0.10.56 → 0.10.59

package/{AccordionList.jsx → AccordionList.js}

@@ -37,25 +37,16 @@ const AccordionListItem = (props) => {
     const domid = (0, hooks_1.useDomid)();
     const isBrowser = (0, hooks_1.useIsBrowserSide)(ssr);
     const itemDisabled = (isBrowser && disabled) || !content;
-    return (<div className={(0, getBemClass_1.default)('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={() => {
+    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('AccordionList__item', [itemDisabled && 'disabled']), id: id, "data-start-open": defaultOpen || undefined, "data-sprinkled": isBrowser },
+        react_1.default.createElement("h3", { className: "AccordionList__title" }, isBrowser ? (react_1.default.createElement("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>);
+            }, disabled: itemDisabled }, title)) : (title)),
+        react_1.default.createElement("div", { id: isBrowser && domid, className: "AccordionList__content", hidden: isBrowser && (!open || itemDisabled) }, content)));
 };
 // ---------------------------------------------------------------------------
 const AccordionList = (props) => {
     const { items, ssr, wide, defaultOpen, startSeen } = props;
     const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
-    return (<div className={(0, getBemClass_1.default)('AccordionList', [wide && 'wide'])} ref={ref}>
-      {items.map((item, i) => (<AccordionListItem key={i} {...item} ssr={ssr} defaultOpen={defaultOpen && defaultOpen.includes(i)}/>))}
-    </div>);
+    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('AccordionList', [wide && 'wide']), ref: ref }, items.map((item, i) => (react_1.default.createElement(AccordionListItem, Object.assign({ key: i }, item, { ssr: ssr, defaultOpen: defaultOpen && defaultOpen.includes(i) }))))));
 };
 exports.default = AccordionList;

package/ActionCards.d.ts

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

package/{ActionCards.jsx → ActionCards.js}

@@ -4,12 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const CardList_1 = require("./_abstract/CardList");
+const _CardList_1 = require("./_abstract/_CardList");
 const seenEffect_1 = require("./utils/seenEffect");
 const ActionCards = (props) => {
     const [ref] = (0, seenEffect_1.useSeenEffect)(props.startSeen);
-    return (<div className="ActionCards" ref={ref}>
-      <CardList_1.CardList {...props} bemPrefix="ActionCards"/>
-    </div>);
+    return (react_1.default.createElement("div", { className: "ActionCards", ref: ref },
+        react_1.default.createElement(_CardList_1.CardList, Object.assign({}, props, { bemPrefix: "ActionCards" }))));
 };
 exports.default = ActionCards;

package/{Alert.jsx → Alert.js}

@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
 const hooks_1 = require("@hugsmidjan/react/hooks");
 const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
-const Button_1 = __importDefault(require("./_abstract/Button"));
+const _Button_1 = __importDefault(require("./_abstract/_Button"));
 const env_1 = require("./utils/env");
 // FIXME: Eventually import from @reykjavik/hanna-styles/constants
 const AlertCloseTransitionDuration = 400;
@@ -108,16 +108,14 @@ const Alert = (props) => {
             };
         }
     }, [closeAlert, autoClosing, autoClose]);
-    return (<div className={(0, getBemClass_1.default)('Alert', [
+    return (react_1.default.createElement("div", Object.assign({ className: (0, getBemClass_1.default)('Alert', [
             !!exports.alertTypes[type] && type,
             closable && 'closable',
-        ])} role="alert" hidden={!open || undefined} {...autoClosingProps}>
-      {childrenHTML ? (<div dangerouslySetInnerHTML={{ __html: childrenHTML }}/>) : (children)}{' '}
-      {showCloseButton && (<Button_1.default bem="Alert__close" {...(closeUrl != null ? { href: closeUrl } : { type: 'button' })} onClick={(e) => {
+        ]), role: "alert", hidden: !open || undefined }, autoClosingProps),
+        childrenHTML ? (react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: childrenHTML } })) : (children),
+        ' ',
+        showCloseButton && (react_1.default.createElement(_Button_1.default, Object.assign({ bem: "Alert__close" }, (closeUrl != null ? { href: closeUrl } : { type: 'button' }), { onClick: (e) => {
                 closeAlert(e);
-            }} aria-label={closeLabelLong} title={closeLabelLong || closeLabel}>
-          {closeLabel}
-        </Button_1.default>)}
-    </div>);
+            }, "aria-label": closeLabelLong, title: closeLabelLong || closeLabel }), closeLabel))));
 };
 exports.default = Alert;

package/ArticleCards.d.ts

@@ -0,0 +1,6 @@
+import type { Resolve } from '@reykjavik/hanna-utils';
+import { ImageCardListProps, ImageCardProps } from './_abstract/_CardList';
+export declare type ArticleCardProps = ImageCardProps;
+export declare type ArticleCardsProps = Resolve<Pick<ImageCardListProps, 'cards' | 'imgPlaceholder'>>;
+declare const ArticleCards: (props: ArticleCardsProps) => JSX.Element;
+export default ArticleCards;

package/ArticleCards.js

@@ -0,0 +1,9 @@
+"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 _CardList_1 = require("./_abstract/_CardList");
+const ArticleCards = (props) => (react_1.default.createElement(_CardList_1.CardList, { bemPrefix: "ArticleCards", standalone: true, cards: props.cards, imgPlaceholder: props.imgPlaceholder || true }));
+exports.default = ArticleCards;

package/ArticleCarousel/_ArticleCarouselCard.d.ts

@@ -1,6 +1,6 @@
 import { HannaColorTheme } from '@reykjavik/hanna-css';
 import { Illustration } from '@reykjavik/hanna-utils/assets';
-import { ImageProps } from '../_abstract/Image';
+import { ImageProps } from '../_abstract/_Image';
 import { ColorFamily } from '../constants';
 export declare type ArticleCarouselImageProps = ImageProps & {
     photo?: boolean;

package/ArticleCarousel/_ArticleCarouselCard.js

@@ -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 });
+exports.ArticleCarouselCard = void 0;
+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 constants_1 = require("../constants");
+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: (0, assets_1.getIllustrationUrl)(illustration) } : image;
+    return (react_1.default.createElement("div", { className: "ArticleCarouselCard", "data-color": color && constants_1.colorFamilies[color], "data-color-theme": !color ? theme && constants_1.themeOptions[theme] : undefined },
+        react_1.default.createElement(_Link_1.Link, { className: "ArticleCarouselCard__link", href: href },
+            ' ',
+            react_1.default.createElement(_Image_1.default, Object.assign({ placeholder: true, className: (0, getBemClass_1.default)('ArticleCarouselCard__illustration', photo && 'photo') }, imageProps)),
+            react_1.default.createElement("h3", { className: "ArticleCarouselCard__title" }, title),
+            ' '),
+        ' ',
+        date && react_1.default.createElement("span", { className: "ArticleCarouselCard__date" }, date),
+        react_1.default.createElement("div", { className: "ArticleCarouselCard__summary" }, summary),
+        moreLabel && (react_1.default.createElement(_Link_1.Link, { className: "ArticleCarouselCard__morelink", href: href, "aria-label": title },
+            ' ',
+            moreLabel,
+            ' '))));
+};
+exports.ArticleCarouselCard = ArticleCarouselCard;

package/{ArticleCarousel.jsx → ArticleCarousel.js}

@@ -8,6 +8,6 @@ const _AbstractCarousel_1 = __importDefault(require("./_abstract/_AbstractCarous
 const _ArticleCarouselCard_1 = require("./ArticleCarousel/_ArticleCarouselCard");
 const ArticleCarousel = (props) => {
     const { title, items, moreLabel, ssr, startSeen } = props;
-    return (<_AbstractCarousel_1.default bem="ArticleCarousel" title={title} items={items} Component={_ArticleCarouselCard_1.ArticleCarouselCard} ComponentProps={{ moreLabel }} ssr={ssr} startSeen={startSeen}/>);
+    return (react_1.default.createElement(_AbstractCarousel_1.default, { bem: "ArticleCarousel", title: title, items: items, Component: _ArticleCarouselCard_1.ArticleCarouselCard, ComponentProps: { moreLabel }, ssr: ssr, startSeen: startSeen }));
 };
 exports.default = ArticleCarousel;

package/ArticleMeta.d.ts

@@ -4,6 +4,7 @@ export declare type ArticleMetaItem = {
 };
 export declare type ArticleMetaProps = {
     items: Array<ArticleMetaItem>;
+    small?: boolean;
 };
 declare const ArticleMeta: (props: ArticleMetaProps) => JSX.Element | null;
 export default ArticleMeta;

package/{ArticleMeta.jsx → ArticleMeta.js}

@@ -22,21 +22,26 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const Link_1 = require("./_abstract/Link");
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const _Link_1 = require("./_abstract/_Link");
 const ArticleMeta = (props) => {
-    const { items } = props;
+    const { items, small } = props;
     if (items.length === 0) {
         return null;
     }
-    return (<div className="ArticleMeta">
-      {items.map(({ label, href }, i) => (<react_1.Fragment key={i}>
-          {href == null ? (<span className="ArticleMeta__item"> {label} </span>) : (<Link_1.Link className="ArticleMeta__item" href={href}>
-              {' '}
-              {label}{' '}
-            </Link_1.Link>)}{' '}
-        </react_1.Fragment>))}
-    </div>);
+    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('ArticleMeta', small && 'small') }, items.map(({ label, href }, i) => (react_1.default.createElement(react_1.Fragment, { key: i },
+        href == null ? (react_1.default.createElement("span", { className: "ArticleMeta__item" },
+            " ",
+            label,
+            " ")) : (react_1.default.createElement(_Link_1.Link, { className: "ArticleMeta__item", href: href },
+            ' ',
+            label,
+            ' ')),
+        ' ')))));
 };
 exports.default = ArticleMeta;

package/{Attention.jsx → Attention.js}

@@ -5,5 +5,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const Attention = (props) => (<div className={(0, getBemClass_1.default)('Attention', props.small && 'small')}>{props.children}</div>);
+const Attention = (props) => (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('Attention', props.small && 'small') }, props.children));
 exports.default = Attention;

package/{BasicTable.jsx → BasicTable.js}

@@ -15,21 +15,20 @@ const BasicTable = (props) => {
         : { tbody: props.tbody || [] };
     const modifier = props.modifier;
     const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
-    return (<TableWrapper_1.default modifier={[
+    return (react_1.default.createElement(TableWrapper_1.default, { modifier: [
             'BasicTable',
             modifier && 'BasicTable--' + modifier,
             fullWidth && 'BasicTable--fullwidth',
             align === 'right' && !fullWidth && 'BasicTable--align--' + align,
-        ]} wrapperRef={ref}>
-      <Table_1.default className={(0, getBemClass_1.default)('BasicTable', [
-            props.compact && 'compact',
-            modifier && modifier,
-        ])} {...{
-        cols,
-        caption,
-        thead,
-        tfoot,
-    }} {...tbodyProps}/>
-    </TableWrapper_1.default>);
+        ], wrapperRef: ref },
+        react_1.default.createElement(Table_1.default, Object.assign({ className: (0, getBemClass_1.default)('BasicTable', [
+                props.compact && 'compact',
+                modifier && modifier,
+            ]) }, {
+            cols,
+            caption,
+            thead,
+            tfoot,
+        }, tbodyProps))));
 };
 exports.default = BasicTable;

package/BgBox.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { EffectProp, SeenProp } from './utils/seenEffect';
+export declare type BgBoxProps = {
+    className?: string;
+    children: ReactNode;
+} & SeenProp & EffectProp;
+declare const BgBox: (props: BgBoxProps) => JSX.Element;
+export default BgBox;

package/BgBox.js

@@ -0,0 +1,14 @@
+"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 BgBox = (props) => {
+    const { className, children, effectType, startSeen } = props;
+    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    return (react_1.default.createElement("div", Object.assign({ className: (0, getBemClass_1.default)('BgBox', undefined, className), ref: ref }, (0, seenEffect_1.getEffectAttr)(effectType)), children));
+};
+exports.default = BgBox;

package/{Bling.jsx → Bling.js}

@@ -38,12 +38,12 @@ const Bling = (props) => {
     const { align, vertical, color, overlay, type, blingUrl, parent, className } = props;
     const imageUrl = type ? (0, assets_1.getBlingUrl)(type) : blingUrl;
     const inlineSvg = (0, useGetSVGtext_1.useGetSVGtext)(imageUrl);
-    return (<div className={(0, getBemClass_1.default)('Bling', [
+    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('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 }}/>);
+        ], className), "data-bling-type": type, "data-bling-image": !type ? blingUrl : undefined, dangerouslySetInnerHTML: inlineSvg && { __html: inlineSvg.code } }));
 };
 exports.default = Bling;

package/{BlockBreak.jsx → BlockBreak.js}

@@ -7,5 +7,5 @@ const react_1 = __importDefault(require("react"));
 /*
   TODO: Add story
 */
-const BlockBreak = () => <div className="BlockBreak"/>;
+const BlockBreak = () => react_1.default.createElement("div", { className: "BlockBreak" });
 exports.default = BlockBreak;

package/{BlockQuote.jsx → BlockQuote.js}

@@ -5,5 +5,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const _Quote_1 = require("./_abstract/_Quote");
-const BlockQuote = (props) => <_Quote_1._Quote bem="BlockQuote" {...props}/>;
+const BlockQuote = (props) => react_1.default.createElement(_Quote_1._Quote, Object.assign({ bem: "BlockQuote" }, props));
 exports.default = BlockQuote;

package/BreadCrumbs.js

@@ -0,0 +1,33 @@
+"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 _Link_1 = require("./_abstract/_Link");
+const BreadCrumbs__item = (props) => {
+    const { link, current } = props;
+    return link.href != null ? (react_1.default.createElement(_Link_1.Link, { className: "BreadCrumbs__item", href: link.href, "aria-current": current || undefined }, link.label)) : (react_1.default.createElement("span", { className: "BreadCrumbs__item", "aria-current": current || undefined }, link.label));
+};
+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 (react_1.default.createElement("nav", { className: "BreadCrumbs", "aria-label": title },
+        react_1.default.createElement("span", { className: "BreadCrumbs__title" },
+            title,
+            ":"),
+        ' ',
+        ancestors.map((link, i) => {
+            return (react_1.default.createElement(react_1.default.Fragment, { key: i },
+                react_1.default.createElement(BreadCrumbs__item, { link: link }),
+                ' ',
+                react_1.default.createElement("span", { className: "BreadCrumbs__separator", "aria-label": "" }, ">"),
+                ' '));
+        }),
+        react_1.default.createElement(BreadCrumbs__item, { link: current, current: true })));
+};
+exports.default = BreadCrumbs;

package/ButtonBack.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ButtonProps } from './_abstract/Button';
+import { ButtonProps } from './_abstract/_Button';
 export declare type ButtonBackProps = ButtonProps;
 declare const ButtonBack: (props: ButtonBackProps & {
     children?: ReactNode;

package/{ButtonBack.jsx → ButtonBack.js}

@@ -4,6 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const Button_1 = __importDefault(require("./_abstract/Button"));
-const ButtonBack = (props) => (<Button_1.default bem="ButtonBack" {...props}/>);
+const _Button_1 = __importDefault(require("./_abstract/_Button"));
+const ButtonBack = (props) => (react_1.default.createElement(_Button_1.default, Object.assign({ bem: "ButtonBack" }, props)));
 exports.default = ButtonBack;

package/{ButtonBar.jsx → ButtonBar.js}

@@ -8,12 +8,10 @@ const react_1 = __importDefault(require("react"));
 const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const ButtonBar = (props) => {
     const { align, children } = props;
-    return (<div className={(0, getBemClass_1.default)('ButtonBar', align === 'right' && 'align--right')}>
-      {children}
-    </div>);
+    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('ButtonBar', align === 'right' && 'align--right') }, children));
 };
 exports.ButtonBar = ButtonBar;
-exports.ButtonBar.Split = () => <span className="ButtonBar__split"/>;
+exports.ButtonBar.Split = () => react_1.default.createElement("span", { className: "ButtonBar__split" });
 /**
  * @deprecated Prefer using `ButtonBar.Split` instead.
  *

package/ButtonPrimary.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ButtonProps, ButtonVariantProps } from './_abstract/Button';
+import { ButtonProps, ButtonVariantProps } from './_abstract/_Button';
 export declare type ButtonPrimaryProps = ButtonProps & ButtonVariantProps;
 declare const ButtonPrimary: (props: ButtonPrimaryProps & {
     children?: ReactNode;

package/{ButtonPrimary.jsx → ButtonPrimary.js}

@@ -4,6 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const Button_1 = __importDefault(require("./_abstract/Button"));
-const ButtonPrimary = (props) => (<Button_1.default bem="ButtonPrimary" {...props}/>);
+const _Button_1 = __importDefault(require("./_abstract/_Button"));
+const ButtonPrimary = (props) => (react_1.default.createElement(_Button_1.default, Object.assign({ bem: "ButtonPrimary" }, props)));
 exports.default = ButtonPrimary;

package/ButtonSecondary.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ButtonProps, ButtonVariantProps } from './_abstract/Button';
+import { ButtonProps, ButtonVariantProps } from './_abstract/_Button';
 export declare type ButtonSecondaryProps = ButtonProps & ButtonVariantProps;
 declare const ButtonSecondary: (props: ButtonSecondaryProps & {
     children?: ReactNode;

package/{ButtonSecondary.jsx → ButtonSecondary.js}

@@ -4,6 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const Button_1 = __importDefault(require("./_abstract/Button"));
-const ButtonSecondary = (props) => (<Button_1.default bem="ButtonSecondary" {...props}/>);
+const _Button_1 = __importDefault(require("./_abstract/_Button"));
+const ButtonSecondary = (props) => (react_1.default.createElement(_Button_1.default, Object.assign({ bem: "ButtonSecondary" }, props)));
 exports.default = ButtonSecondary;

package/ButtonTertiary.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ButtonProps, ButtonVariantProps } from './_abstract/Button';
+import { ButtonProps, ButtonVariantProps } from './_abstract/_Button';
 declare type TertiarySize = Extract<ButtonVariantProps['size'], 'normal' | 'small'>;
 declare type TertiaryIcon = Extract<ButtonVariantProps['icon'], 'none' | 'go-back'>;
 export declare type ButtonTertiaryProps = ButtonProps & Omit<ButtonVariantProps, 'icon' | 'size'> & {

package/{ButtonTertiary.jsx → ButtonTertiary.js}

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const Button_1 = __importDefault(require("./_abstract/Button"));
+const _Button_1 = __importDefault(require("./_abstract/_Button"));
 const sizes = {
     normal: 'normal',
     small: 'small',
@@ -15,6 +15,6 @@ const icons = {
 };
 const ButtonTertiary = (props) => {
     const { size = 'normal', icon = 'none' } = props;
-    return <Button_1.default bem="ButtonTertiary" {...props} size={sizes[size]} icon={icons[icon]}/>;
+    return react_1.default.createElement(_Button_1.default, Object.assign({ bem: "ButtonTertiary" }, props, { size: sizes[size], icon: icons[icon] }));
 };
 exports.default = ButtonTertiary;

package/CHANGELOG.md

@@ -4,7 +4,18 @@
 
 - ... <!-- Add new lines here. -->
 
-## 0.10.56
+## 0.10.59
+
+_2022-06-20_
+
+- feat: Add component `ArticleCards`
+- feat: Add component `Picture`
+- feat: Add component `BgBox` for gray background wrapping
+- feat: Add prop `small` to `ArticleMeta`
+- fix: Suppress redundant className `.Heading--normal`
+- feat: Add prop `focalPoint` to all `ImageProps`
+
+## 0.10.56 – 0.10.58
 
 _2022-06-13_
 

package/{Carousel.jsx → Carousel.js}

@@ -5,5 +5,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const _AbstractCarousel_1 = __importDefault(require("./_abstract/_AbstractCarousel"));
-const Carousel = (props) => (<_AbstractCarousel_1.default {...props} bem={undefined} modifier={undefined} title={undefined}/>);
+const Carousel = (props) => (react_1.default.createElement(_AbstractCarousel_1.default, Object.assign({}, props, { bem: undefined, modifier: undefined, title: undefined })));
 exports.default = Carousel;

package/{CarouselStepper.jsx → CarouselStepper.js}

@@ -5,5 +5,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const CarouselStepper_1 = __importDefault(require("@hugsmidjan/react/CarouselStepper"));
-const CarouselStepper = (props) => (<CarouselStepper_1.default {...props} bem={undefined} modifier={undefined}/>);
+const CarouselStepper = (props) => (react_1.default.createElement(CarouselStepper_1.default, Object.assign({}, props, { bem: undefined, modifier: undefined })));
 exports.default = CarouselStepper;

package/{CenterColumn.jsx → CenterColumn.js}

@@ -7,8 +7,6 @@ const react_1 = __importDefault(require("react"));
 const SeenEffect_1 = __importDefault(require("./SeenEffect"));
 const CenterColumn = (props) => {
     const { children, startSeen, effectType } = props;
-    return startSeen == null ? (<div className="CenterColumn">{children}</div>) : (<SeenEffect_1.default className="CenterColumn" startSeen={startSeen} effectType={effectType}>
-      {children}
-    </SeenEffect_1.default>);
+    return startSeen == null ? (react_1.default.createElement("div", { className: "CenterColumn" }, children)) : (react_1.default.createElement(SeenEffect_1.default, { className: "CenterColumn", startSeen: startSeen, effectType: effectType }, children));
 };
 exports.default = CenterColumn;

package/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import { TogglerInputProps } from './_abstract/TogglerInput';
+import { TogglerInputProps } from './_abstract/_TogglerInput';
 export declare type CheckboxProps = TogglerInputProps;
 declare const Checkbox: (props: CheckboxProps) => JSX.Element;
 export default Checkbox;

package/{Checkbox.jsx → Checkbox.js}

@@ -4,6 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const TogglerInput_1 = __importDefault(require("./_abstract/TogglerInput"));
-const Checkbox = (props) => (<TogglerInput_1.default bem="Checkbox" {...props} type="checkbox"/>);
+const _TogglerInput_1 = __importDefault(require("./_abstract/_TogglerInput"));
+const Checkbox = (props) => (react_1.default.createElement(_TogglerInput_1.default, Object.assign({ bem: "Checkbox" }, props, { type: "checkbox" })));
 exports.default = Checkbox;

package/CheckboxButtonsGroup.d.ts

@@ -1,4 +1,4 @@
-import { TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/TogglerGroupField';
+import { TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/_TogglerGroupField';
 export declare type CheckboxButtonsGroupProps = TogglerGroupFieldProps & {
     value?: Array<string>;
     /** @deprecated (Will be removed in v0.9) */

package/{CheckboxButtonsGroup.jsx → CheckboxButtonsGroup.js}

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const TogglerGroupField_1 = __importDefault(require("./_abstract/TogglerGroupField"));
-const TogglerInput_1 = __importDefault(require("./_abstract/TogglerInput"));
-const CheckboxButton = (props) => (<TogglerInput_1.default bem="CheckboxButton" {...props} type="checkbox"/>);
+const _TogglerGroupField_1 = __importDefault(require("./_abstract/_TogglerGroupField"));
+const _TogglerInput_1 = __importDefault(require("./_abstract/_TogglerInput"));
+const CheckboxButton = (props) => (react_1.default.createElement(_TogglerInput_1.default, Object.assign({ bem: "CheckboxButton" }, props, { type: "checkbox" })));
 const CheckboxButtonsGroup = (props) => {
     if (props.layout) {
         console.warn('`CheckboxButtonsGroupProps.layout` is deprecated.');
@@ -14,6 +14,6 @@ const CheckboxButtonsGroup = (props) => {
     if (props.columns) {
         console.warn('`CheckboxButtonsGroupProps.columns` is deprecated.');
     }
-    return (<TogglerGroupField_1.default {...props} bem="CheckboxButtonsGroup" Toggler={CheckboxButton}/>);
+    return (react_1.default.createElement(_TogglerGroupField_1.default, Object.assign({}, props, { bem: "CheckboxButtonsGroup", Toggler: CheckboxButton })));
 };
 exports.default = CheckboxButtonsGroup;

package/CheckboxGroup.d.ts

@@ -1,4 +1,4 @@
-import { TogglerGroupFieldOption, TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/TogglerGroupField';
+import { TogglerGroupFieldOption, TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/_TogglerGroupField';
 export declare type CheckboxGroupProps = TogglerGroupFieldProps & {
     layout?: 'inline';
     value?: Array<string>;

package/{CheckboxGroup.jsx → CheckboxGroup.js}

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const TogglerGroupField_1 = __importDefault(require("./_abstract/TogglerGroupField"));
+const _TogglerGroupField_1 = __importDefault(require("./_abstract/_TogglerGroupField"));
 const Checkbox_1 = __importDefault(require("./Checkbox"));
 const CheckboxGroup = (props) => {
-    return (<TogglerGroupField_1.default {...props} bem="CheckboxGroup" modifier={props.layout} Toggler={Checkbox_1.default}/>);
+    return (react_1.default.createElement(_TogglerGroupField_1.default, Object.assign({}, props, { bem: "CheckboxGroup", modifier: props.layout, Toggler: Checkbox_1.default })));
 };
 exports.default = CheckboxGroup;

package/CityBlock.d.ts

@@ -1,6 +1,6 @@
 import { Illustration } from '@reykjavik/hanna-utils/assets';
 import { BlockItem } from './_abstract/_Block';
-import { ImageProps } from './_abstract/Image';
+import { ImageProps } from './_abstract/_Image';
 import { SeenProp } from './utils/seenEffect';
 import { Alignment } from './constants';
 declare const types: {

package/{CityBlock.jsx → CityBlock.js}

@@ -18,6 +18,6 @@ const CityBlock = (props) => {
     const imageProps = props.illustration != null
         ? { src: (0, assets_1.getIllustrationUrl)(props.illustration) }
         : props.image;
-    return (<_Block_1.default bem="CityBlock" modifier={modifier} content={props.content} image={imageProps} startSeen={props.startSeen}/>);
+    return (react_1.default.createElement(_Block_1.default, { bem: "CityBlock", modifier: modifier, content: props.content, image: imageProps, startSeen: props.startSeen }));
 };
 exports.default = CityBlock;