@reykjavik/hanna-react 0.10.53 → 0.10.56

package/CarouselStepper.jsx

@@ -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 CarouselStepper_1 = __importDefault(require("@hugsmidjan/react/CarouselStepper"));
+const CarouselStepper = (props) => (<CarouselStepper_1.default {...props} bem={undefined} modifier={undefined}/>);
+exports.default = CarouselStepper;

package/CenterColumn.jsx

@@ -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 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>);
+};
+exports.default = CenterColumn;

package/Checkbox.jsx

@@ -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 TogglerInput_1 = __importDefault(require("./_abstract/TogglerInput"));
+const Checkbox = (props) => (<TogglerInput_1.default bem="Checkbox" {...props} type="checkbox"/>);
+exports.default = Checkbox;

package/CheckboxButtonsGroup.jsx

@@ -0,0 +1,19 @@
+"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 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 CheckboxButtonsGroup = (props) => {
+    if (props.layout) {
+        console.warn('`CheckboxButtonsGroupProps.layout` is deprecated.');
+    }
+    if (props.columns) {
+        console.warn('`CheckboxButtonsGroupProps.columns` is deprecated.');
+    }
+    return (<TogglerGroupField_1.default {...props} bem="CheckboxButtonsGroup" Toggler={CheckboxButton}/>);
+};
+exports.default = CheckboxButtonsGroup;

package/CheckboxGroup.jsx

@@ -0,0 +1,12 @@
+"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 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}/>);
+};
+exports.default = CheckboxGroup;

package/CityBlock.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 assets_1 = require("@reykjavik/hanna-utils/assets");
+const _Block_1 = __importDefault(require("./_abstract/_Block"));
+const constants_1 = require("./constants");
+const types = {
+    largebox: true,
+    largeimage: true,
+};
+const CityBlock = (props) => {
+    const align = props.align || 'right';
+    const type = !props.illustration && props.type; // The presence of illustration prop suppresses type
+    const modifier = [constants_1.aligns[align] && 'align--' + align, type && types[type] && type];
+    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}/>);
+};
+exports.default = CityBlock;

package/ContactBubble.jsx

@@ -0,0 +1,192 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 });
+exports.ensureIcon = exports.defaultTexts = void 0;
+const react_1 = __importStar(require("react"));
+const focusElm_1 = __importDefault(require("@hugsmidjan/qj/focusElm"));
+const hooks_1 = require("@hugsmidjan/react/hooks");
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
+const Link_1 = require("./_abstract/Link");
+exports.defaultTexts = {
+    is: {
+        lang: 'is',
+        openBtn: 'Hafa samband',
+        closeBtn: 'Loka',
+        closeBtnLong: 'Loka valmynd',
+    },
+    en: {
+        lang: 'en',
+        openBtn: 'Contact us',
+        closeBtn: 'Close',
+        closeBtnLong: 'Close bubble',
+    },
+};
+// ---------------------------------------------------------------------------
+const icons = {
+    suggestions: 1,
+    phone: 1,
+    faq: 1,
+    livechat: 1,
+    other: 0,
+};
+const ensureIcon = (maybeIcon) => maybeIcon && icons[maybeIcon]
+    ? maybeIcon
+    : undefined;
+exports.ensureIcon = ensureIcon;
+const ContactBubble = (props) => {
+    const { title, links, onToggle, alwaysShow } = props;
+    const txt = (0, i18n_1.getTexts)(props, exports.defaultTexts);
+    const useLocalState = props.open == null;
+    const [localOpen, setLocalOpen] = (0, react_1.useState)(false);
+    const open = useLocalState ? localOpen : props.open;
+    const isBrowser = (0, hooks_1.useIsBrowserSide)(props.ssr);
+    const domid = (0, hooks_1.useDomid)();
+    const wrapperRef = (0, react_1.useRef)(null);
+    const { openBubble, closeBubble } = (0, react_1.useMemo)(() => ({
+        openBubble: () => {
+            useLocalState && setLocalOpen(true);
+            onToggle && onToggle(true);
+        },
+        closeBubble: (setFocus) => {
+            useLocalState && setLocalOpen(false);
+            onToggle && onToggle(false);
+            setFocus !== false && (0, focusElm_1.default)(wrapperRef.current);
+        },
+    }), [useLocalState, onToggle]);
+    (0, react_1.useEffect)(() => {
+        const wrapperElm = wrapperRef.current;
+        if (!wrapperElm) {
+            return;
+        }
+        if (alwaysShow) {
+            wrapperElm.dataset.show = 'true';
+            return;
+        }
+        const scrollElm = (0, hanna_utils_1.getPageScrollElm)();
+        let pending = 0;
+        const checkScroll = () => {
+            if (!pending) {
+                pending = requestAnimationFrame(() => {
+                    const { scrollTop, scrollHeight, clientHeight } = scrollElm;
+                    const scrollLength = scrollHeight - clientHeight;
+                    // const f = scrollLength > 600 ? 1 : (scrollLength - 200) / 600;
+                    const f = 1;
+                    const show = scrollTop > f * 150 && scrollLength - scrollTop > f * 250;
+                    wrapperElm.dataset.show = String(show);
+                    !show && closeBubble(false);
+                    pending = 0;
+                });
+            }
+        };
+        checkScroll();
+        // Set scroll-listeners on both the ´document` and the `scrollElm`
+        // because mobile browsers seem to handle CSS height and overflow
+        // rules on <html> and <body> differently from desktop browsers.
+        // Only one of these two handlers seems to trigger though,
+        // (as Element scroll events don't bubble)
+        // and even if they did, the rAF throttling prevents that from
+        // becoming a problem.
+        document.addEventListener('scroll', checkScroll);
+        scrollElm.addEventListener('scroll', checkScroll);
+        return () => {
+            document.removeEventListener('scroll', checkScroll);
+            scrollElm.removeEventListener('scroll', checkScroll);
+        };
+    }, [isBrowser, alwaysShow, closeBubble]);
+    (0, react_1.useEffect)(() => {
+        const escHandler = (e) => e.key === 'Escape' && closeBubble();
+        const outsideClickHandler = (e) => {
+            var _a;
+            if (open && !((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                closeBubble(false);
+            }
+        };
+        document.addEventListener('keydown', escHandler);
+        document.addEventListener('click', outsideClickHandler, true);
+        const htmlDataset = document.documentElement.dataset;
+        if (open) {
+            htmlDataset.contactBubble = 'true';
+        }
+        else {
+            delete htmlDataset.contactBubble;
+        }
+        return () => {
+            delete htmlDataset.contactBubble;
+            document.removeEventListener('keydown', escHandler);
+            document.removeEventListener('click', outsideClickHandler, true);
+        };
+    }, [open, closeBubble]);
+    if (links.length === 0) {
+        return null;
+    }
+    const menu = (<div className="ContactBubble" id={isBrowser && domid} hidden={isBrowser && !open} data-always-show={alwaysShow || undefined} data-sprinkled={isBrowser}>
+      <h2 className="ContactBubble__title">{title || txt.openBtn}</h2>
+      <ul className="ContactBubble__list">
+        {links.map((linkInfo, i) => {
+            const { href, label, extraLabel, target, onClick } = linkInfo;
+            const icon = (0, exports.ensureIcon)(linkInfo.icon);
+            const itemClass = (0, getBemClass_1.default)('ContactBubble__item', icon && 'type--' + icon);
+            const onClickHandler = onClick &&
+                ((e) => {
+                    if (!onClick()) {
+                        e.preventDefault();
+                        closeBubble(false);
+                    }
+                });
+            const content = [
+                ' ',
+                label,
+                '\n',
+                extraLabel && <small key="🤡">{extraLabel}</small>,
+                '\n',
+            ];
+            return (<li key={i} className={itemClass}>
+              {href && href !== '#' ? (<Link_1.Link className="ContactBubble__link" href={href} onClick={onClickHandler} target={target}>
+                  {content}
+                </Link_1.Link>) : (<button className="ContactBubble__link" onClick={onClickHandler} type="button">
+                  {content}
+                </button>)}
+            </li>);
+        })}
+      </ul>
+      {'\n\n'}
+      {isBrowser && (<button className="ContactBubble__closebtn" aria-controls={domid} aria-label={txt.closeBtnLong} onClick={() => closeBubble()} type="button">
+          {txt.closeBtn}
+        </button>)}
+    </div>);
+    return isBrowser ? (<div className="ContactBubble__wrapper" ref={wrapperRef}>
+      <button className="ContactBubble__openbtn" aria-controls={domid} aria-expanded={open} aria-label={txt.openBtnLong} onClick={open ? () => closeBubble() : openBubble} type="button">
+        {txt.openBtn}
+      </button>
+      {'\n\n'}
+      {menu}
+    </div>) : (menu);
+};
+exports.default = ContactBubble;

package/ContentArticle.jsx

@@ -0,0 +1,29 @@
+"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 ArticleMeta_1 = __importDefault(require("./ArticleMeta"));
+const ContentImage_1 = __importDefault(require("./ContentImage"));
+const Heading_1 = __importDefault(require("./Heading"));
+const RelatedLinks_1 = __importDefault(require("./RelatedLinks"));
+const TextBlock_1 = __importDefault(require("./TextBlock"));
+const VSpacer_1 = __importDefault(require("./VSpacer"));
+const ContentArticle = (props) => {
+    const [ref] = (0, seenEffect_1.useSeenEffect)(props.startSeen);
+    return (<div className="ContentArticle" ref={ref}>
+      <ArticleMeta_1.default items={props.meta}/>
+      <Heading_1.default>{props.headline}</Heading_1.default>
+      <TextBlock_1.default startSeen>
+        {props.topImage && <ContentImage_1.default {...props.topImage}/>}
+        {props.body}
+      </TextBlock_1.default>
+      <VSpacer_1.default size="small">
+        <hr />
+      </VSpacer_1.default>
+      {props.relatedLinks && <RelatedLinks_1.default {...props.relatedLinks}/>}
+    </div>);
+};
+exports.default = ContentArticle;

package/ContentImage.jsx

@@ -0,0 +1,18 @@
+"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 Image_1 = __importDefault(require("./_abstract/Image"));
+const ContentImage = (props) => {
+    const { image, caption, credit } = props;
+    return (<figure className="ContentImage">
+      {(caption || credit) && (<figcaption className="ContentImage__caption">
+          {caption && <span className="ContentImage__text"> {caption} </span>}{' '}
+          {credit && <small className="ContentImage__credit"> {credit} </small>}
+        </figcaption>)}
+      <Image_1.default className="ContentImage__image" {...image}/>
+    </figure>);
+};
+exports.default = ContentImage;

package/Datepicker.jsx

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 });
+exports.getDateDiff = void 0;
+const react_1 = __importDefault(require("react"));
+// Documentation: https://reactdatepicker.com/
+const react_datepicker_1 = __importStar(require("react-datepicker"));
+const hooks_1 = require("@hugsmidjan/react/hooks");
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+// For more info on localization see: https://stackoverflow.com/questions/54399084/change-locale-in-react-datepicker/58306958#58306958
+const is_1 = __importDefault(require("date-fns/locale/is"));
+const FormField_1 = __importDefault(require("./FormField"));
+(0, react_datepicker_1.registerLocale)('is', is_1.default);
+const getDateDiff = (date, diff) => {
+    const newDate = new Date(date);
+    newDate.setDate(newDate.getDate() + diff);
+    return newDate;
+};
+exports.getDateDiff = getDateDiff;
+const i18n = {
+    is: {
+        nextMonthAriaLabel: 'Næsti mánuður',
+        nextMonthButtonLabel: 'Næsti mánuður',
+        nextYearAriaLabel: 'Næsta ár',
+        nextYearButtonLabel: 'Næsta ár',
+        previousMonthAriaLabel: 'Fyrri mánuður',
+        previousMonthButtonLabel: 'Fyrri mánuður',
+        previousYearAriaLabel: 'Fyrra ár',
+        previousYearButtonLabel: 'Fyrra ár',
+        timeInputLabel: 'Tími: ',
+        weekAriaLabelPrefix: 'Vika: ',
+        weekLabel: 'Vika',
+        ariaLabelPrefix: 'Mánuður:',
+        chooseDayAriaLabelPrefix: 'Veldu:',
+        disabledDayAriaLabelPrefix: 'Dagsetning ekki í boði',
+    },
+};
+const Datepicker = (props) => {
+    const { className, id, label, hideLabel, assistText, disabled, readOnly, invalid, errorMessage, required, reqText, placeholder, small, localeCode, dateFormat = 'd.M.yyy', initialDate, value = initialDate, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, ssr, inputRef, } = props;
+    const domid = (0, hooks_1.useDomid)(id);
+    const txts = (localeCode && i18n[localeCode]) || {};
+    const filled = !!value;
+    const empty = !filled && !placeholder;
+    return (<FormField_1.default className={(0, getBemClass_1.default)('Datepicker', [], className)} ssr={ssr} label={label} small={small} assistText={assistText} hideLabel={hideLabel} invalid={invalid} required={required} reqText={reqText} disabled={disabled} readOnly={readOnly} filled={filled} empty={empty} errorMessage={errorMessage} renderInput={(className, inputProps, addFocusProps) => {
+            return (<div className={className.input} ref={inputRef &&
+                    ((elm) => {
+                        inputRef.current =
+                            (elm === null || elm === void 0 ? void 0 : elm.querySelector('input')) || undefined;
+                        return elm;
+                    })}>
+            <react_datepicker_1.default id={domid} required={inputProps.required} disabled={inputProps.disabled} readOnly={inputProps.readOnly} selected={value} locale={localeCode} dateFormat={dateFormat} onChange={(date) => {
+                    onChange(date || undefined);
+                    const inputElm = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
+                    if (inputElm) {
+                        inputElm.dispatchEvent(new Event('change', { bubbles: true }));
+                    }
+                }} placeholderText={placeholder} 
+            // TODO: Implement this
+            // selectsRange
+            minDate={minDate} maxDate={maxDate} startDate={startDate} endDate={endDate} selectsStart={isStartDate} selectsEnd={isEndDate} formatWeekDay={(weekday) => {
+                    // TODO: if we use costom locale we don't need this
+                    return weekday.charAt(0).toUpperCase();
+                }} showYearDropdown scrollableYearDropdown yearDropdownItemNumber={15} showMonthDropdown {...inputProps} {...txts} {...addFocusProps(datepickerExtraProps)}/>
+          </div>);
+        }}/>);
+};
+exports.default = Datepicker;

package/ExtraLinks.jsx

@@ -0,0 +1,47 @@
+"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 Link_1 = require("./_abstract/Link");
+const seenEffect_1 = require("./utils/seenEffect");
+const ExtraLinks__related = (props) => {
+    const { relatedTitle, relatedLinks } = props;
+    return (<div className="ExtraLinks__related">
+      {relatedTitle && <h3 className="ExtraLinks__related__title">{relatedTitle}</h3>}
+      <ul className="ExtraLinks__related__list">
+        {relatedLinks &&
+            relatedLinks.map(({ href, label, blank = false, type }, i) => (<li className="ExtraLinks__related__item" key={i}>
+              <Link_1.Link className={(0, getBemClass_1.default)('ExtraLinks__related__link', type)} href={href} target={blank ? '_blank' : ''} rel={blank ? 'noreferrer noopener' : ''}>
+                {label}
+              </Link_1.Link>
+            </li>))}
+      </ul>
+    </div>);
+};
+const ExtraLinks = (props) => {
+    const { relatedTitle, relatedLinks, className, startSeen } = props, cardListProps = __rest(props, ["relatedTitle", "relatedLinks", "className", "startSeen"]);
+    const hasRelated = !!(relatedLinks && relatedLinks.length);
+    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    return (<div className={(0, getBemClass_1.default)('ExtraLinks', hasRelated && 'related', className)} ref={ref}>
+      <div className="ExtraLinks__main">
+        <CardList_1.CardList {...cardListProps} bemPrefix="ExtraLinks"/>
+      </div>
+      {hasRelated && (<ExtraLinks__related relatedTitle={relatedTitle} relatedLinks={relatedLinks}/>)}
+    </div>);
+};
+exports.default = ExtraLinks;

package/FeatureList.jsx

@@ -0,0 +1,28 @@
+"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 Bling_1 = __importDefault(require("./Bling"));
+const FeatureList = (props) => {
+    const { title, features, startSeen } = props;
+    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    const _features = features.length ? features : [{ name: '...' }];
+    return (<>
+      <Bling_1.default type="snake-large" align="left" vertical="down-ish"/>
+
+      <div className="FeatureList" ref={ref}>
+        <h2 className="FeatureList__title">{title}</h2>
+        <ul className="FeatureList__list">
+          {_features.map(({ name, icon, iconUrl }, i) => (<li key={i} className="FeatureList__feature" style={iconUrl
+                ? { '--efnistakn': `url("${iconUrl}")` }
+                : undefined} data-efnistakn={!iconUrl ? icon : undefined}>
+              {name}
+            </li>))}
+        </ul>
+      </div>
+    </>);
+};
+exports.default = FeatureList;

package/FieldGroup.jsx

@@ -0,0 +1,15 @@
+"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 FieldGroup = (props) => {
+    const { legend, children, className, disabled } = props;
+    return (<fieldset className={(0, getBemClass_1.default)('FieldGroup', null, className)} role="group" disabled={disabled}>
+      <legend className="FieldGroup__legend">{legend}</legend>
+      {children}
+    </fieldset>);
+};
+exports.default = FieldGroup;