@reykjavik/hanna-react 0.10.96 → 0.10.97

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/ArticleCards.d.ts +1 -2
  2. package/CHANGELOG.md +11 -0
  3. package/Layout.js +7 -2
  4. package/MainMenu.d.ts +7 -2
  5. package/MainMenu.js +11 -2
  6. package/_abstract/_Button.d.ts +1 -1
  7. package/_abstract/_CardList.d.ts +4 -6
  8. package/esm/ArticleCards.d.ts +1 -2
  9. package/esm/Layout.js +8 -3
  10. package/esm/MainMenu.d.ts +7 -2
  11. package/esm/MainMenu.js +11 -2
  12. package/esm/_abstract/_Button.d.ts +1 -1
  13. package/esm/_abstract/_CardList.d.ts +4 -6
  14. package/package.json +2 -2
package/ArticleCards.d.ts CHANGED
@@ -1,8 +1,7 @@
1
- import type { Cleanup } from '@reykjavik/hanna-utils';
2
1
  import { ImageCardListProps, ImageCardProps } from './_abstract/_CardList.js';
3
2
  export type ArticleCardsItemProps = ImageCardProps;
4
3
  /** @deprecated Use `ArticleCardsItemProps` instead (Remove in v0.11) */
5
4
  export type ArticleCardProps = ArticleCardsItemProps;
6
- export type ArticleCardsProps = Cleanup<Pick<ImageCardListProps, 'cards' | 'imgPlaceholder'>>;
5
+ export type ArticleCardsProps = Pick<ImageCardListProps, 'cards' | 'imgPlaceholder'>;
7
6
  export declare const ArticleCards: (props: ArticleCardsProps) => JSX.Element;
8
7
  export default ArticleCards;
package/CHANGELOG.md CHANGED
@@ -4,6 +4,17 @@
4
4
 
5
5
  - ... <!-- Add new lines here. -->
6
6
 
7
+ ## 0.10.97
8
+
9
+ _2023-08-22_
10
+
11
+ - feat: Allow `JSX.Element` as item `summary` for all `*Cards` components
12
+ - feat: Add prop `summary` to items of `ArticleCards` and `ImageCards`
13
+ - feat: Expand `MainMenuItemList` to allow components as custom
14
+ `MainMenu__item` children
15
+ - feat: Add default Polish translation for `Layout`
16
+ - feat: Make prop `title` optional for `MainMenu`
17
+
7
18
  ## 0.10.96
8
19
 
9
20
  _2023-07-26_
package/Layout.js CHANGED
@@ -22,14 +22,19 @@ exports.defaultLayoutTexts = {
22
22
  closeMenuLabel: 'Close',
23
23
  closeMenuLabelLong: 'Close menu',
24
24
  },
25
+ pl: {
26
+ lang: 'pl',
27
+ skipLinkLabel: 'Przejdź do nawigacji',
28
+ closeMenuLabel: 'Zamknij',
29
+ closeMenuLabelLong: 'Zamknij menu',
30
+ },
25
31
  };
26
32
  const Layout = (props) => {
27
33
  (0, utils_js_1.useScrollbarWidthCSSVar)();
28
34
  const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName = '', logoLink = '/', } = props;
29
35
  const { isMenuActive, uiState, closeMenu, toggleMenu } = (0, utils_js_1.useMenuToggling)(ssr !== 'ssr-only');
30
- const isBrowser = (0, utils_js_1.useIsBrowserSide)( /* ssr */);
31
36
  const txt = (0, i18n_1.getTexts)(props, exports.defaultLayoutTexts);
32
- return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('Layout', props.modifier), "data-sprinkled": isBrowser, "data-color-theme": colorTheme },
37
+ return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('Layout', props.modifier), "data-color-theme": colorTheme },
33
38
  globalAlerts && (react_1.default.createElement("div", { className: "Layout__alerts", role: "alert" }, globalAlerts)),
34
39
  react_1.default.createElement("div", { className: "Layout__content" },
35
40
  react_1.default.createElement("div", { className: "Layout__header", role: "banner" },
package/MainMenu.d.ts CHANGED
@@ -7,6 +7,7 @@ import { SSRSupportProps } from './utils.js';
7
7
  export type MainMenuI18n = Cleanup<{
8
8
  lang?: string;
9
9
  homeLabel?: string;
10
+ title: string;
10
11
  } & PrimaryPanelI18n>;
11
12
  export declare const defaultMainMenuTexts: DefaultTexts<Required<MainMenuI18n>>;
12
13
  export type { AuxilaryPanelIllustration, AuxiliaryPanelProps, MegaMenuItem, MegaMenuPanel, };
@@ -38,9 +39,13 @@ export type MainMenuItem = {
38
39
  target?: React.HTMLAttributeAnchorTarget;
39
40
  };
40
41
  export type MainMenuSeparator = '---';
41
- export type MainMenuItemList = Array<MainMenuItem | MainMenuSeparator>;
42
+ export type MainMenuItemList = Array<MainMenuItem | MainMenuSeparator | (() => JSX.Element)>;
42
43
  export type MainMenuProps = {
43
- title: string;
44
+ /**
45
+ * Top-level screen-reader headline/label for the whole menu.
46
+ * Defaults to a translation of "Main Menu"
47
+ */
48
+ title?: string;
44
49
  items: MainMenuItemList;
45
50
  /**
46
51
  * Link for the homepage - defaults to `"/"` adding a
package/MainMenu.js CHANGED
@@ -17,18 +17,21 @@ const findActivePanel = (megaPanels, activeId) => activeId ? megaPanels.find((pa
17
17
  exports.defaultMainMenuTexts = {
18
18
  is: {
19
19
  lang: 'is',
20
+ title: 'Aðalvalmynd',
20
21
  homeLabel: 'Forsíða',
21
22
  backToMenu: 'Loka',
22
23
  backToMenuLong: 'Til baka í valmynd',
23
24
  },
24
25
  en: {
25
26
  lang: 'en',
27
+ title: 'Main Menu',
26
28
  homeLabel: 'Home page',
27
29
  backToMenu: 'Close',
28
30
  backToMenuLong: 'Close and return to menu',
29
31
  },
30
32
  pl: {
31
33
  lang: 'pl',
34
+ title: 'Menu główne',
32
35
  homeLabel: 'Strona główna',
33
36
  backToMenu: 'Zamknij',
34
37
  backToMenuLong: 'Zamknij i wróć do menu',
@@ -48,7 +51,7 @@ const _issueHomeLinkWarnings = (hasHomeItem, hasHomeLinkProp) => {
48
51
  };
49
52
  const normalizeMenuItems = (itemsProp, megaPanels, homeLink, texts) => {
50
53
  const items = itemsProp.map((item) => {
51
- if (item === '---') {
54
+ if (item === '---' || !('label' in item)) {
52
55
  return item;
53
56
  }
54
57
  const href = item.href;
@@ -86,8 +89,9 @@ const normalizeMenuItems = (itemsProp, megaPanels, homeLink, texts) => {
86
89
  // ---------------------------------------------------------------------------
87
90
  const emptyPanelList = [];
88
91
  const MainMenu = (props) => {
89
- const { title, megaPanels = emptyPanelList, onItemClick, ssr, auxiliaryPanel } = props;
92
+ const { megaPanels = emptyPanelList, onItemClick, ssr, auxiliaryPanel } = props;
90
93
  const texts = (0, i18n_1.getTexts)(props, exports.defaultMainMenuTexts);
94
+ const title = props.title || texts.title;
91
95
  const { closeHamburgerMenu } = (0, HannaUIState_js_1.useHannaUIState)();
92
96
  const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
93
97
  const menuElmRef = (0, react_1.useRef)(null);
@@ -186,6 +190,11 @@ const MainMenu = (props) => {
186
190
  if (item === '---') {
187
191
  return react_1.default.createElement("li", { key: i, className: "MainMenu__separator", "aria-hidden": "true" });
188
192
  }
193
+ if (!('label' in item)) {
194
+ const Item = item;
195
+ return (react_1.default.createElement("li", { key: i, className: "MainMenu__item" },
196
+ react_1.default.createElement(Item, null)));
197
+ }
189
198
  const { label, labelLong, lang, controlsId, onClick } = item;
190
199
  const pressed = (activePanel && controlsId === activePanel.id) || undefined;
191
200
  return (react_1.default.createElement("li", { key: i, className: (0, classUtils_1.modifiedClass)('MainMenu__item', item.modifier), "aria-current": item.current || undefined }, onClick || (!!item.megaPanel && (isBrowser || !item.href)) ? (
package/_abstract/_Button.d.ts CHANGED
@@ -30,7 +30,7 @@ export type ButtonVariantProps = {
30
30
  size?: ButtonSize;
31
31
  variant?: ButtonVariant;
32
32
  icon?: ButtonIcon | NavigationFlag;
33
- /** @deprecated (Will be removed in v0.11) */
33
+ /** @deprecated Use `size="small"` instead (Will be removed in v0.11) */
34
34
  small?: boolean;
35
35
  };
36
36
  type _ButtonProps = ButtonProps & ButtonVariantProps & BemProps & {
package/_abstract/_CardList.d.ts CHANGED
@@ -1,19 +1,17 @@
1
1
  import React, { ReactElement, ReactNode } from 'react';
2
2
  import { EitherObj } from '@reykjavik/hanna-utils';
3
3
  import { ImageProps } from './_Image.js';
4
- type BaseCardProps = {
4
+ export type TextCardProps = {
5
5
  title: string;
6
6
  href: string;
7
+ summary?: string | JSX.Element;
8
+ target?: React.HTMLAttributeAnchorTarget;
7
9
  };
8
- export type ImageCardProps = BaseCardProps & {
10
+ export type ImageCardProps = TextCardProps & {
9
11
  meta?: string;
10
12
  image?: ImageProps;
11
13
  imgPlaceholder?: boolean;
12
14
  };
13
- export type TextCardProps = BaseCardProps & {
14
- summary?: string;
15
- target?: React.HTMLAttributeAnchorTarget;
16
- };
17
15
  export type CardListProps<T> = {
18
16
  cards: Array<T>;
19
17
  title?: string | undefined;
package/esm/ArticleCards.d.ts CHANGED
@@ -1,8 +1,7 @@
1
- import type { Cleanup } from '@reykjavik/hanna-utils';
2
1
  import { ImageCardListProps, ImageCardProps } from './_abstract/_CardList.js';
3
2
  export type ArticleCardsItemProps = ImageCardProps;
4
3
  /** @deprecated Use `ArticleCardsItemProps` instead (Remove in v0.11) */
5
4
  export type ArticleCardProps = ArticleCardsItemProps;
6
- export type ArticleCardsProps = Cleanup<Pick<ImageCardListProps, 'cards' | 'imgPlaceholder'>>;
5
+ export type ArticleCardsProps = Pick<ImageCardListProps, 'cards' | 'imgPlaceholder'>;
7
6
  export declare const ArticleCards: (props: ArticleCardsProps) => JSX.Element;
8
7
  export default ArticleCards;
package/esm/Layout.js CHANGED
@@ -4,7 +4,7 @@ import { getAssetUrl } from '@reykjavik/hanna-utils/assets';
4
4
  import { getTexts } from '@reykjavik/hanna-utils/i18n';
5
5
  import { Image } from './_abstract/_Image.js';
6
6
  import { Link } from './_abstract/_Link.js';
7
- import { HannaUIState, useIsBrowserSide, useMenuToggling, useScrollbarWidthCSSVar, } from './utils.js';
7
+ import { HannaUIState, useMenuToggling, useScrollbarWidthCSSVar, } from './utils.js';
8
8
  export const defaultLayoutTexts = {
9
9
  is: {
10
10
  lang: 'is',
@@ -18,14 +18,19 @@ export const defaultLayoutTexts = {
18
18
  closeMenuLabel: 'Close',
19
19
  closeMenuLabelLong: 'Close menu',
20
20
  },
21
+ pl: {
22
+ lang: 'pl',
23
+ skipLinkLabel: 'Przejdź do nawigacji',
24
+ closeMenuLabel: 'Zamknij',
25
+ closeMenuLabelLong: 'Zamknij menu',
26
+ },
21
27
  };
22
28
  export const Layout = (props) => {
23
29
  useScrollbarWidthCSSVar();
24
30
  const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName = '', logoLink = '/', } = props;
25
31
  const { isMenuActive, uiState, closeMenu, toggleMenu } = useMenuToggling(ssr !== 'ssr-only');
26
- const isBrowser = useIsBrowserSide( /* ssr */);
27
32
  const txt = getTexts(props, defaultLayoutTexts);
28
- return (React.createElement("div", { className: modifiedClass('Layout', props.modifier), "data-sprinkled": isBrowser, "data-color-theme": colorTheme },
33
+ return (React.createElement("div", { className: modifiedClass('Layout', props.modifier), "data-color-theme": colorTheme },
29
34
  globalAlerts && (React.createElement("div", { className: "Layout__alerts", role: "alert" }, globalAlerts)),
30
35
  React.createElement("div", { className: "Layout__content" },
31
36
  React.createElement("div", { className: "Layout__header", role: "banner" },
package/esm/MainMenu.d.ts CHANGED
@@ -7,6 +7,7 @@ import { SSRSupportProps } from './utils.js';
7
7
  export type MainMenuI18n = Cleanup<{
8
8
  lang?: string;
9
9
  homeLabel?: string;
10
+ title: string;
10
11
  } & PrimaryPanelI18n>;
11
12
  export declare const defaultMainMenuTexts: DefaultTexts<Required<MainMenuI18n>>;
12
13
  export type { AuxilaryPanelIllustration, AuxiliaryPanelProps, MegaMenuItem, MegaMenuPanel, };
@@ -38,9 +39,13 @@ export type MainMenuItem = {
38
39
  target?: React.HTMLAttributeAnchorTarget;
39
40
  };
40
41
  export type MainMenuSeparator = '---';
41
- export type MainMenuItemList = Array<MainMenuItem | MainMenuSeparator>;
42
+ export type MainMenuItemList = Array<MainMenuItem | MainMenuSeparator | (() => JSX.Element)>;
42
43
  export type MainMenuProps = {
43
- title: string;
44
+ /**
45
+ * Top-level screen-reader headline/label for the whole menu.
46
+ * Defaults to a translation of "Main Menu"
47
+ */
48
+ title?: string;
44
49
  items: MainMenuItemList;
45
50
  /**
46
51
  * Link for the homepage - defaults to `"/"` adding a
package/esm/MainMenu.js CHANGED
@@ -13,18 +13,21 @@ const findActivePanel = (megaPanels, activeId) => activeId ? megaPanels.find((pa
13
13
  export const defaultMainMenuTexts = {
14
14
  is: {
15
15
  lang: 'is',
16
+ title: 'Aðalvalmynd',
16
17
  homeLabel: 'Forsíða',
17
18
  backToMenu: 'Loka',
18
19
  backToMenuLong: 'Til baka í valmynd',
19
20
  },
20
21
  en: {
21
22
  lang: 'en',
23
+ title: 'Main Menu',
22
24
  homeLabel: 'Home page',
23
25
  backToMenu: 'Close',
24
26
  backToMenuLong: 'Close and return to menu',
25
27
  },
26
28
  pl: {
27
29
  lang: 'pl',
30
+ title: 'Menu główne',
28
31
  homeLabel: 'Strona główna',
29
32
  backToMenu: 'Zamknij',
30
33
  backToMenuLong: 'Zamknij i wróć do menu',
@@ -44,7 +47,7 @@ const _issueHomeLinkWarnings = (hasHomeItem, hasHomeLinkProp) => {
44
47
  };
45
48
  const normalizeMenuItems = (itemsProp, megaPanels, homeLink, texts) => {
46
49
  const items = itemsProp.map((item) => {
47
- if (item === '---') {
50
+ if (item === '---' || !('label' in item)) {
48
51
  return item;
49
52
  }
50
53
  const href = item.href;
@@ -82,8 +85,9 @@ const normalizeMenuItems = (itemsProp, megaPanels, homeLink, texts) => {
82
85
  // ---------------------------------------------------------------------------
83
86
  const emptyPanelList = [];
84
87
  export const MainMenu = (props) => {
85
- const { title, megaPanels = emptyPanelList, onItemClick, ssr, auxiliaryPanel } = props;
88
+ const { megaPanels = emptyPanelList, onItemClick, ssr, auxiliaryPanel } = props;
86
89
  const texts = getTexts(props, defaultMainMenuTexts);
90
+ const title = props.title || texts.title;
87
91
  const { closeHamburgerMenu } = useHannaUIState();
88
92
  const isBrowser = useIsBrowserSide(ssr);
89
93
  const menuElmRef = useRef(null);
@@ -182,6 +186,11 @@ export const MainMenu = (props) => {
182
186
  if (item === '---') {
183
187
  return React.createElement("li", { key: i, className: "MainMenu__separator", "aria-hidden": "true" });
184
188
  }
189
+ if (!('label' in item)) {
190
+ const Item = item;
191
+ return (React.createElement("li", { key: i, className: "MainMenu__item" },
192
+ React.createElement(Item, null)));
193
+ }
185
194
  const { label, labelLong, lang, controlsId, onClick } = item;
186
195
  const pressed = (activePanel && controlsId === activePanel.id) || undefined;
187
196
  return (React.createElement("li", { key: i, className: modifiedClass('MainMenu__item', item.modifier), "aria-current": item.current || undefined }, onClick || (!!item.megaPanel && (isBrowser || !item.href)) ? (
package/esm/_abstract/_Button.d.ts CHANGED
@@ -30,7 +30,7 @@ export type ButtonVariantProps = {
30
30
  size?: ButtonSize;
31
31
  variant?: ButtonVariant;
32
32
  icon?: ButtonIcon | NavigationFlag;
33
- /** @deprecated (Will be removed in v0.11) */
33
+ /** @deprecated Use `size="small"` instead (Will be removed in v0.11) */
34
34
  small?: boolean;
35
35
  };
36
36
  type _ButtonProps = ButtonProps & ButtonVariantProps & BemProps & {
package/esm/_abstract/_CardList.d.ts CHANGED
@@ -1,19 +1,17 @@
1
1
  import React, { ReactElement, ReactNode } from 'react';
2
2
  import { EitherObj } from '@reykjavik/hanna-utils';
3
3
  import { ImageProps } from './_Image.js';
4
- type BaseCardProps = {
4
+ export type TextCardProps = {
5
5
  title: string;
6
6
  href: string;
7
+ summary?: string | JSX.Element;
8
+ target?: React.HTMLAttributeAnchorTarget;
7
9
  };
8
- export type ImageCardProps = BaseCardProps & {
10
+ export type ImageCardProps = TextCardProps & {
9
11
  meta?: string;
10
12
  image?: ImageProps;
11
13
  imgPlaceholder?: boolean;
12
14
  };
13
- export type TextCardProps = BaseCardProps & {
14
- summary?: string;
15
- target?: React.HTMLAttributeAnchorTarget;
16
- };
17
15
  export type CardListProps<T> = {
18
16
  cards: Array<T>;
19
17
  title?: string | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reykjavik/hanna-react",
3
- "version": "0.10.96",
3
+ "version": "0.10.97",
4
4
  "author": "Reykjavík (http://www.reykjavik.is)",
5
5
  "contributors": [
6
6
  "Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -16,7 +16,7 @@
16
16
  "@floating-ui/react": "^0.19.2",
17
17
  "@hugsmidjan/qj": "^4.21.0",
18
18
  "@hugsmidjan/react": "^0.4.32",
19
- "@reykjavik/hanna-css": "^0.4.3",
19
+ "@reykjavik/hanna-css": "^0.4.5",
20
20
  "@reykjavik/hanna-utils": "^0.2.8",
21
21
  "@types/react-autosuggest": "^10.1.0",
22
22
  "@types/react-datepicker": "^4.8.0",