@reykjavik/hanna-react 0.10.81 → 0.10.83

package/CHANGELOG.md

@@ -4,6 +4,26 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.83
+
+_2023-03-20_
+
+- feat: Add prop `small` to `FieldGroup`
+- feat: Add prop `footer` to `InfoHero`
+- fix: Error in `DatePicker` caused by
+  [upstream regression](https://github.com/Hacker0x01/react-datepicker/issues/3918)
+
+## 0.10.82
+
+_2023-03-03_
+
+- `MainMenu`:
+  - feat: Add prop `homeLink` to `MainMenuProps` for convenience
+  - feat: Add built-in support for Polish language to `MainMenu`
+  - feat: Add optional `homeLink` prop to `MainMenuI18n`
+- feat: Convert newlines in `ContactBubbleItem.extraLabel` into `<br/>`s
+- fix: Remove `role="group"` off all Checkbox and Radio Group containers
+
 ## 0.10.81
 
 _2023-02-16_

package/ContactBubble.js

@@ -9,6 +9,7 @@ const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/g
 const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Link_1 = require("./_abstract/_Link");
+const breakOnNL_1 = require("./_abstract/breakOnNL");
 const utils_1 = require("./utils");
 exports.defaultTexts = {
     is: {
@@ -141,7 +142,7 @@ const ContactBubble = (props) => {
                 ' ',
                 label,
                 '\n',
-                extraLabel && react_1.default.createElement("small", { key: "\uD83E\uDD21" }, extraLabel),
+                extraLabel && react_1.default.createElement("small", { key: "\uD83E\uDD21" }, (0, breakOnNL_1.breakOnNL)(extraLabel)),
                 '\n',
             ];
             return (react_1.default.createElement("li", { key: i, className: itemClass }, href && href !== '#' ? (react_1.default.createElement(_Link_1.Link, { className: "ContactBubble__link", href: href, onClick: onClickHandler, target: target }, content)) : (react_1.default.createElement("button", { className: "ContactBubble__link", onClick: onClickHandler, type: "button" }, content))));

package/FieldGroup.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 export type FieldGroupProps = {
     legend: string;
     disabled?: boolean;
+    small?: boolean;
     className?: string;
     children: ReactNode;
 };

package/FieldGroup.js

@@ -5,8 +5,8 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const FieldGroup = (props) => {
-    const { legend, children, className, disabled } = props;
-    return (react_1.default.createElement("fieldset", { className: (0, getBemClass_1.default)('FieldGroup', null, className), role: "group", disabled: disabled },
+    const { legend, children, className, disabled, small } = props;
+    return (react_1.default.createElement("fieldset", { className: (0, getBemClass_1.default)('FieldGroup', small && 'small', className), disabled: disabled },
         react_1.default.createElement("legend", { className: "FieldGroup__legend" }, legend),
         children));
 };

package/FormField.js

@@ -76,7 +76,7 @@ const FormField = (props) => {
             isBrowser && empty && 'empty',
             isBrowser && filled && 'filled',
             isBrowser && focused && 'focused',
-        ], className), role: group ? 'group' : undefined, ref: props.wrapperRef },
+        ], className), ref: props.wrapperRef },
         LabelTag ? (react_1.default.createElement(LabelTag, { className: "FormField__label", id: labelId },
             ' ',
             reqStar,

package/InfoHero.d.ts

@@ -9,6 +9,7 @@ export type InfoHeroProps = {
     subTitle?: string;
     blurb?: string | JSX.Element;
     buttons?: Array<ButtonProps>;
+    footer?: string | JSX.Element;
     align?: Alignment;
     image?: ImageProps;
     blingType?: BlingOptions;

package/InfoHero.js

@@ -68,7 +68,7 @@ const blingOptions = {
     ],
 };
 const InfoHero = (props) => {
-    const { title, titleBlurb, subTitle, blurb, image, buttons = [], align, blingType, } = props;
+    const { title, titleBlurb, subTitle, blurb, image, buttons = [], footer, align, blingType, } = props;
     const showButtons = Boolean(buttons.length);
     const alignment = align && constants_1.aligns[align] ? align : 'right';
     const blings = (blingType && blingOptions[blingType]) ||
@@ -79,7 +79,8 @@ const InfoHero = (props) => {
             titleBlurb && react_1.default.createElement("div", { className: "InfoHero__titleblurb" }, titleBlurb),
             subTitle && react_1.default.createElement("div", { className: "InfoHero__subtitle" }, (0, breakOnNL_1.breakOnNL)(subTitle)),
             blurb && react_1.default.createElement("div", { className: "InfoHero__blurb" }, blurb),
-            showButtons && (react_1.default.createElement("div", { className: "InfoHero__buttons" }, buttons.map((buttonProps, i) => (react_1.default.createElement(ButtonTertiary_1.default, Object.assign({ key: i }, buttonProps))))))),
+            showButtons && (react_1.default.createElement("div", { className: "InfoHero__buttons" }, buttons.map((buttonProps, i) => (react_1.default.createElement(ButtonTertiary_1.default, Object.assign({ key: i }, buttonProps)))))),
+            footer && react_1.default.createElement("div", { className: "InfoHero__footer" }, footer)),
         react_1.default.createElement(_Image_1.Image, Object.assign({ className: "InfoHero__image", altText: title }, image, { placeholder: true })),
         react_1.default.createElement(_Blings_1.Blings, { blings: blings, mirror: alignment === 'right' })));
 };

package/MainMenu/_Auxiliary.d.ts

@@ -1,4 +1,4 @@
-import type { MegaMenuPanel } from '../MainMenu';
+import { MegaMenuPanel } from './_PrimaryPanel';
 export type AuxilaryPanelIllustration = 'hanna-veitiggi' | 'hanna-vandro' | 'hanna-hugsi' | 'hanna-hissa' | 'hanna-hahaha' | 'hanna-hae' | 'hanna-god_spurning' | 'hanna-gjuggiborg' | 'hanna-benda';
 export type AuxiliaryPanelProps = MegaMenuPanel & {
     image?: AuxilaryPanelIllustration;

package/MainMenu/_PrimaryPanel.d.ts

@@ -1,11 +1,27 @@
 import { RefObject } from 'react';
-import { MainMenuI18n, MegaMenuPanel } from '../MainMenu';
+export type PrimaryPanelI18n = {
+    backToMenu: string;
+    backToMenuLong?: string;
+};
+export type MegaMenuItem = {
+    label: string;
+    summary?: string;
+    href: string;
+    lang?: string;
+    current?: boolean;
+    target?: string;
+};
+export type MegaMenuPanel = {
+    title: string;
+    items: Array<MegaMenuItem>;
+    id: string;
+};
 type PrimaryPanelProps = {
     setActivePanel: (panel: MegaMenuPanel | undefined, setFocus?: boolean) => void;
     isParent?: boolean;
     isActive?: boolean;
     panel: MegaMenuPanel;
-    texts: MainMenuI18n;
+    texts: PrimaryPanelI18n;
     activeRef: RefObject<HTMLLIElement>;
     isBrowser: true | undefined;
 };

package/MainMenu.d.ts

@@ -1,17 +1,27 @@
+import { Cleanup } from '@reykjavik/hanna-utils';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
 import { AuxilaryPanelIllustration, AuxiliaryPanelProps } from './MainMenu/_Auxiliary';
+import { MegaMenuItem, MegaMenuPanel, PrimaryPanelI18n } from './MainMenu/_PrimaryPanel';
 import { SSRSupport } from './utils';
-export type MainMenuI18n = {
+export type MainMenuI18n = Cleanup<{
     lang?: string;
-    backToMenu: string;
-    backToMenuLong?: string;
-};
-export declare const defaultMainMenuTexts: DefaultTexts<MainMenuI18n>;
-export type { AuxilaryPanelIllustration, AuxiliaryPanelProps };
+    homeLabel?: string;
+} & PrimaryPanelI18n>;
+export declare const defaultMainMenuTexts: DefaultTexts<Required<MainMenuI18n>>;
+export type { AuxilaryPanelIllustration, AuxiliaryPanelProps, MegaMenuItem, MegaMenuPanel, };
 export type MainMenuItem = {
     label: string;
     labelLong?: string;
     lang?: string;
+    /**
+     * Puts a modifier className on the menu item element.
+     *
+     * Example:
+     *
+     * ```html
+     * <li class="MainMenu__item MainMenu__item--${modifier}">
+     * ```
+     * */
     modifier?: string;
     current?: boolean;
     href?: string;
@@ -27,22 +37,14 @@ export type MainMenuItem = {
 };
 export type MainMenuSeparator = '---';
 export type MainMenuItemList = Array<MainMenuItem | MainMenuSeparator>;
-export type MegaMenuItem = {
-    label: string;
-    summary?: string;
-    href: string;
-    lang?: string;
-    current?: boolean;
-    target?: string;
-};
-export type MegaMenuPanel = {
-    title: string;
-    items: Array<MegaMenuItem>;
-    id: string;
-};
 export type MainMenuProps = {
     title: string;
     items: MainMenuItemList;
+    /**
+     * Link for the homepage - defaults to `"/"` adding a
+     * generic sounding "Home"/"Forsíða" label
+     */
+    homeLink?: string | Omit<MainMenuItem, 'modifier'>;
     megaPanels?: Array<MegaMenuPanel>;
     auxiliaryPanel?: AuxiliaryPanelProps;
     /**

package/MainMenu.js

@@ -16,11 +16,77 @@ const useFormatMonitor_1 = require("./utils/useFormatMonitor");
 const utils_1 = require("./utils");
 const findActivePanel = (megaPanels, activeId) => activeId ? megaPanels.find((panel) => activeId === panel.id) : undefined;
 exports.defaultMainMenuTexts = {
-    is: { lang: 'is', backToMenu: 'Loka', backToMenuLong: 'Til baka í valmynd' },
-    en: { lang: 'en', backToMenu: 'Close', backToMenuLong: 'Close and return to menu' },
+    is: {
+        lang: 'is',
+        homeLabel: 'Forsíða',
+        backToMenu: 'Loka',
+        backToMenuLong: 'Til baka í valmynd',
+    },
+    en: {
+        lang: 'en',
+        homeLabel: 'Home page',
+        backToMenu: 'Close',
+        backToMenuLong: 'Close and return to menu',
+    },
+    pl: {
+        lang: 'pl',
+        homeLabel: 'Strona główna',
+        backToMenu: 'Zamknij',
+        backToMenuLong: 'Zamknij i wróć do menu',
+    },
+};
+// ---------------------------------------------------------------------------
+const _issueHomeLinkWarnings = (hasHomeItem, hasHomeLinkProp) => {
+    const bothDefined = hasHomeItem && hasHomeLinkProp;
+    const neitherDefined = !hasHomeItem && !hasHomeLinkProp;
+    if (bothDefined) {
+        console.warn('Ignoring a redundant `MainMenuProps.homeLink` value. ' +
+            '(As `MainMenuProps.items` already starts with a "Home" item.)');
+    }
+    else if (neitherDefined) {
+        console.warn('`MainMenuProps.homeLink` is missing. Auto-inserting a generic "home link" with `href="/"`.');
+    }
+};
+const normalizeMenuItems = (itemsProp, megaPanels, homeLink, texts) => {
+    const items = itemsProp.map((item) => {
+        if (item === '---') {
+            return item;
+        }
+        const href = item.href;
+        const controlsId = item.controlsId || (href && /^#/.test(href) && href.slice(1)) || undefined;
+        const megaPanel = controlsId
+            ? megaPanels.find((panel) => panel.id === controlsId)
+            : undefined;
+        return Object.assign(Object.assign({}, item), { controlsId, megaPanel });
+    });
+    const firstItem = items[0];
+    if (firstItem) {
+        // Prepend menu item list with a "home link", unless it's already there
+        const hasHomeItem = typeof firstItem === 'object' && firstItem.modifier === 'home';
+        if (process.env.NODE_ENV !== 'production') {
+            _issueHomeLinkWarnings(hasHomeItem, !!homeLink);
+        }
+        if (!hasHomeItem) {
+            if (!homeLink || typeof homeLink === 'string') {
+                let label = texts.homeLabel;
+                let lang;
+                if (label == null) {
+                    const def = exports.defaultMainMenuTexts[texts.lang || 'en'] ||
+                        exports.defaultMainMenuTexts.en ||
+                        exports.defaultMainMenuTexts.is;
+                    label = def.homeLabel;
+                    lang = def.lang;
+                }
+                homeLink = { href: homeLink || '/', label, lang };
+            }
+            items.unshift(Object.assign(Object.assign({}, homeLink), { modifier: 'home' }));
+        }
+    }
+    return items;
 };
 const MainMenu = (props) => {
     const { title, megaPanels = [], onItemClick, ssr, auxiliaryPanel } = props;
+    const texts = (0, i18n_1.getTexts)(props, exports.defaultMainMenuTexts);
     const { closeHamburgerMenu } = (0, HannaUIState_1.useHannaUIState)();
     const isBrowser = (0, utils_1.useIsBrowserSide)(ssr);
     const menuElmRef = (0, react_1.useRef)(null);
@@ -73,14 +139,7 @@ const MainMenu = (props) => {
         }
     });
     const hasActivePanel = !!activePanel;
-    const menuItems = (0, react_1.useMemo)(() => props.items.map((item) => {
-        if (item === '---') {
-            return item;
-        }
-        const href = item.href;
-        const controlsId = item.controlsId || (href && /^#/.test(href) && href.slice(1)) || undefined;
-        return Object.assign(Object.assign({}, item), { controlsId, megaPanel: controlsId && megaPanels.find((panel) => panel.id === controlsId) });
-    }), [props.items, megaPanels]);
+    const menuItems = (0, react_1.useMemo)(() => normalizeMenuItems(props.items, megaPanels, props.homeLink, texts), [props.items, props.homeLink, megaPanels, texts]);
     (0, react_1.useEffect)(() => {
         setActivePanel(findActivePanel(megaPanels, props.activePanelId));
     }, [props.activePanelId, megaPanels, setActivePanel]);
@@ -157,7 +216,7 @@ const MainMenu = (props) => {
                     }
                     const isActive = activePanel === panel || laggyActivePanel === panel || undefined;
                     const isParent = !!panel.items.find((item) => item.current);
-                    return (react_1.default.createElement(_PrimaryPanel_1.PrimaryPanel, { key: i, isParent: isParent, isActive: isActive, panel: panel, isBrowser: isBrowser, setActivePanel: setActivePanel, texts: (0, i18n_1.getTexts)(props, exports.defaultMainMenuTexts), activeRef: activePanelRef }));
+                    return (react_1.default.createElement(_PrimaryPanel_1.PrimaryPanel, { key: i, isParent: isParent, isActive: isActive, panel: panel, isBrowser: isBrowser, setActivePanel: setActivePanel, texts: texts, activeRef: activePanelRef }));
                 }),
                 auxiliaryPanel && react_1.default.createElement(_Auxiliary_1.AuxiliaryPanel, Object.assign({}, auxiliaryPanel)))))));
 };

package/_abstract/breakOnNL.js

@@ -8,5 +8,5 @@ const breakOnNL = (text) => text &&
         .trim()
         .replace(/(?:\n\s*)+/g, '\n\n')
         .split(/\n/)
-        .map((bit) => bit || react_1.default.createElement("br", null));
+        .map((bit, i) => bit || react_1.default.createElement("br", { key: i }));
 exports.breakOnNL = breakOnNL;

package/assets.js

@@ -14,7 +14,9 @@ Object.defineProperty(exports, "illustrations", { enumerable: true, get: functio
 /** @deprecated Use `getCssBundleUrl` from '@reykjavik/hanna-css' instead  (Will be reomved in v0.11) */
 const getCssBundleUrl = (cssTokens, 
 /** If you want to pin your CSS files to a specific version */
-version) => (0, hanna_css_1.getCssBundleUrl)(cssTokens, { version: version });
+version) => (0, hanna_css_1.getCssBundleUrl)(cssTokens, {
+    version: version,
+});
 exports.getCssBundleUrl = getCssBundleUrl;
 // ---------------------------------------------------------------------------
 // Based on "https://styles.reykjavik.is/assets/efnistakn/menu/files.json"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.81",
+	"version": "0.10.83",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -16,7 +16,7 @@
 		"@floating-ui/react": "^0.19.2",
 		"@hugsmidjan/qj": "^4.10.2",
 		"@hugsmidjan/react": "^0.4.23",
-		"@reykjavik/hanna-css": "^0.3.13",
+		"@reykjavik/hanna-css": "^0.3.15",
 		"@reykjavik/hanna-utils": "^0.2.3",
 		"@types/react": "^17.0.24",
 		"@types/react-autosuggest": "^10.1.0",
@@ -25,7 +25,7 @@
 		"@types/react-transition-group": "^4.4.0",
 		"iframe-resizer-react": "^1.1.0",
 		"react-autosuggest": "^10.1.0",
-		"react-datepicker": "^4.9.0",
+		"react-datepicker": "~4.8.0",
 		"react-dropzone": "^10.2.2",
 		"react-intersection-observer": "^8.30.1",
 		"react-transition-group": "^4.4.1"