@reykjavik/hanna-react 0.10.98 → 0.10.100

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 (12) hide show
  1. package/ArticleCards.d.ts +3 -1
  2. package/ArticleCards.js +1 -1
  3. package/CHANGELOG.md +5 -2
  4. package/ExtraLinks.d.ts +3 -3
  5. package/_abstract/_CardList.d.ts +3 -2
  6. package/_abstract/_CardList.js +4 -3
  7. package/esm/ArticleCards.d.ts +3 -1
  8. package/esm/ArticleCards.js +1 -1
  9. package/esm/ExtraLinks.d.ts +3 -3
  10. package/esm/_abstract/_CardList.d.ts +3 -2
  11. package/esm/_abstract/_CardList.js +4 -3
  12. package/package.json +1 -1
package/ArticleCards.d.ts CHANGED
@@ -2,6 +2,8 @@ import { ImageCardListProps, ImageCardProps } from './_abstract/_CardList.js';
2
2
  export type ArticleCardsItemProps = ImageCardProps;
3
3
  /** @deprecated Use `ArticleCardsItemProps` instead (Remove in v0.11) */
4
4
  export type ArticleCardProps = ArticleCardsItemProps;
5
- export type ArticleCardsProps = Pick<ImageCardListProps, 'cards' | 'imgPlaceholder'>;
5
+ export type ArticleCardsProps = Pick<ImageCardListProps, 'cards' | 'imgPlaceholder'> & {
6
+ size?: 'large' | 'normal';
7
+ };
6
8
  export declare const ArticleCards: (props: ArticleCardsProps) => JSX.Element;
7
9
  export default ArticleCards;
package/ArticleCards.js CHANGED
@@ -4,6 +4,6 @@ exports.ArticleCards = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const react_1 = tslib_1.__importDefault(require("react"));
6
6
  const _CardList_js_1 = require("./_abstract/_CardList.js");
7
- const ArticleCards = (props) => (react_1.default.createElement(_CardList_js_1.CardList, { bemPrefix: "ArticleCards", standalone: true, cards: props.cards, imgPlaceholder: props.imgPlaceholder || true }));
7
+ const ArticleCards = (props) => (react_1.default.createElement(_CardList_js_1.CardList, { bemPrefix: "ArticleCards", modifier: props.size === 'large' ? 'large' : undefined, standalone: true, cards: props.cards, imgPlaceholder: props.imgPlaceholder || true }));
8
8
  exports.ArticleCards = ArticleCards;
9
9
  exports.default = exports.ArticleCards;
package/CHANGELOG.md CHANGED
@@ -4,12 +4,15 @@
4
4
 
5
5
  - ... <!-- Add new lines here. -->
6
6
 
7
- ## 0.10.98
7
+ ## 0.10.97 – 0.10.100
8
8
 
9
9
  _2023-08-22_
10
10
 
11
- - feat: Allow `JSX.Element` as item `summary` for all `*Cards` components
11
+ - feat: Add prop `meta` to items of `ActionCards`
12
12
  - feat: Add prop `summary` to items of `ArticleCards` and `ImageCards`
13
+ - feat: Add prop `size="large"` to `ArticleCards`
14
+ - feat: Allow `JSX.Element` as item `meta` for accepting `*Cards` components
15
+ - feat: Allow `JSX.Element` as item `summary` for all `*Cards` components
13
16
  - feat: Expand `MainMenuItemList` to allow components as custom
14
17
  `MainMenu__item` children
15
18
  - feat: Add default Polish translation for `Layout`
package/ExtraLinks.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { TextCardListProps } from './_abstract/_CardList.js';
1
+ import { CardListProps, TextCardProps } from './_abstract/_CardList.js';
2
2
  import { SeenProp } from './utils/seenEffect.js';
3
3
  export type RelatedLink = {
4
4
  href: string;
@@ -10,8 +10,8 @@ type RelatedProps = {
10
10
  relatedTitle?: string;
11
11
  relatedLinks?: Array<RelatedLink>;
12
12
  };
13
- export type ExtraLinksCardProps = TextCardListProps['cards'][number];
14
- export type ExtraLinksProps = TextCardListProps & RelatedProps & {
13
+ export type ExtraLinksCardProps = Omit<TextCardProps, 'meta'>;
14
+ export type ExtraLinksProps = CardListProps<ExtraLinksCardProps> & RelatedProps & {
15
15
  className?: string;
16
16
  } & SeenProp;
17
17
  export declare const ExtraLinks: (props: ExtraLinksProps) => JSX.Element;
package/_abstract/_CardList.d.ts CHANGED
@@ -1,14 +1,15 @@
1
1
  import React, { ReactElement, ReactNode } from 'react';
2
2
  import { EitherObj } from '@reykjavik/hanna-utils';
3
+ import { BemModifierProps } from '../utils/types.js';
3
4
  import { ImageProps } from './_Image.js';
4
5
  export type TextCardProps = {
5
6
  title: string;
6
7
  href: string;
8
+ meta?: string | JSX.Element;
7
9
  summary?: string | JSX.Element;
8
10
  target?: React.HTMLAttributeAnchorTarget;
9
11
  };
10
12
  export type ImageCardProps = TextCardProps & {
11
- meta?: string;
12
13
  image?: ImageProps;
13
14
  imgPlaceholder?: boolean;
14
15
  };
@@ -28,6 +29,6 @@ type _CardListProps = EitherObj<ImageCardListProps, TextCardListProps> & CardLis
28
29
  bemPrefix: string;
29
30
  children?: ReactNode;
30
31
  standalone?: boolean;
31
- };
32
+ } & BemModifierProps;
32
33
  export declare const CardList: (props: _CardListProps) => JSX.Element;
33
34
  export {};
package/_abstract/_CardList.js CHANGED
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.CardList = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const react_1 = tslib_1.__importDefault(require("react"));
6
+ const classUtils_1 = require("@hugsmidjan/qj/classUtils");
6
7
  const _Button_js_1 = require("./_Button.js");
7
8
  const _Image_js_1 = require("./_Image.js");
8
9
  const Card = (props) => {
@@ -11,7 +12,7 @@ const Card = (props) => {
11
12
  return (react_1.default.createElement(react_1.default.Fragment, null,
12
13
  react_1.default.createElement(_Button_js_1.Button, { bem: cardClass, href: href, target: target },
13
14
  ' ',
14
- react_1.default.createElement(_Image_js_1.Image, Object.assign({ className: `${bem}__image` }, image, { placeholder: imgPlaceholder })),
15
+ !!(image || imgPlaceholder) && (react_1.default.createElement(_Image_js_1.Image, Object.assign({ className: `${bem}__image` }, image, { placeholder: imgPlaceholder }))),
15
16
  react_1.default.createElement("span", { className: `${cardClass}__title` }, title),
16
17
  ' ',
17
18
  meta && react_1.default.createElement("span", { className: `${cardClass}__meta` }, meta),
@@ -21,7 +22,7 @@ const Card = (props) => {
21
22
  ' '));
22
23
  };
23
24
  const CardList = (props) => {
24
- const { bemPrefix, title, summaryElement, cards, titleTag = 'h2', children, imgPlaceholder, } = props;
25
+ const { bemPrefix, modifier, title, summaryElement, cards, titleTag = 'h2', children, imgPlaceholder, } = props;
25
26
  const TitleTag = titleTag;
26
27
  const fallbackImageUrl = (imgPlaceholder !== true && imgPlaceholder) || undefined;
27
28
  const fallbackImageStyle = fallbackImageUrl
@@ -33,7 +34,7 @@ const CardList = (props) => {
33
34
  summaryElement ? (react_1.default.createElement("div", { className: bemPrefix + '__summary' },
34
35
  title && react_1.default.createElement(TitleTag, { className: bemPrefix + '__title' }, title),
35
36
  summaryElement)) : (title && react_1.default.createElement(TitleTag, { className: bemPrefix + '__title' }, title)),
36
- react_1.default.createElement("ul", { className: bemPrefix + (props.standalone ? '' : '__list'), style: fallbackImageStyle }, cards.map((card, i) => (react_1.default.createElement("li", { key: i, className: bemPrefix + '__item' },
37
+ react_1.default.createElement("ul", { className: props.standalone ? (0, classUtils_1.modifiedClass)(bemPrefix, modifier) : bemPrefix + '__list', style: fallbackImageStyle }, cards.map((card, i) => (react_1.default.createElement("li", { key: i, className: bemPrefix + '__item' },
37
38
  react_1.default.createElement(Card
38
39
  /* Assert as `ImageCardProps` to silence the imgPlaceholder false-positive */
39
40
  , Object.assign({}, card, { bem: bemPrefix, imgPlaceholder: !!imgPlaceholder })))))),
package/esm/ArticleCards.d.ts CHANGED
@@ -2,6 +2,8 @@ import { ImageCardListProps, ImageCardProps } from './_abstract/_CardList.js';
2
2
  export type ArticleCardsItemProps = ImageCardProps;
3
3
  /** @deprecated Use `ArticleCardsItemProps` instead (Remove in v0.11) */
4
4
  export type ArticleCardProps = ArticleCardsItemProps;
5
- export type ArticleCardsProps = Pick<ImageCardListProps, 'cards' | 'imgPlaceholder'>;
5
+ export type ArticleCardsProps = Pick<ImageCardListProps, 'cards' | 'imgPlaceholder'> & {
6
+ size?: 'large' | 'normal';
7
+ };
6
8
  export declare const ArticleCards: (props: ArticleCardsProps) => JSX.Element;
7
9
  export default ArticleCards;
package/esm/ArticleCards.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { CardList } from './_abstract/_CardList.js';
3
- export const ArticleCards = (props) => (React.createElement(CardList, { bemPrefix: "ArticleCards", standalone: true, cards: props.cards, imgPlaceholder: props.imgPlaceholder || true }));
3
+ export const ArticleCards = (props) => (React.createElement(CardList, { bemPrefix: "ArticleCards", modifier: props.size === 'large' ? 'large' : undefined, standalone: true, cards: props.cards, imgPlaceholder: props.imgPlaceholder || true }));
4
4
  export default ArticleCards;
package/esm/ExtraLinks.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { TextCardListProps } from './_abstract/_CardList.js';
1
+ import { CardListProps, TextCardProps } from './_abstract/_CardList.js';
2
2
  import { SeenProp } from './utils/seenEffect.js';
3
3
  export type RelatedLink = {
4
4
  href: string;
@@ -10,8 +10,8 @@ type RelatedProps = {
10
10
  relatedTitle?: string;
11
11
  relatedLinks?: Array<RelatedLink>;
12
12
  };
13
- export type ExtraLinksCardProps = TextCardListProps['cards'][number];
14
- export type ExtraLinksProps = TextCardListProps & RelatedProps & {
13
+ export type ExtraLinksCardProps = Omit<TextCardProps, 'meta'>;
14
+ export type ExtraLinksProps = CardListProps<ExtraLinksCardProps> & RelatedProps & {
15
15
  className?: string;
16
16
  } & SeenProp;
17
17
  export declare const ExtraLinks: (props: ExtraLinksProps) => JSX.Element;
package/esm/_abstract/_CardList.d.ts CHANGED
@@ -1,14 +1,15 @@
1
1
  import React, { ReactElement, ReactNode } from 'react';
2
2
  import { EitherObj } from '@reykjavik/hanna-utils';
3
+ import { BemModifierProps } from '../utils/types.js';
3
4
  import { ImageProps } from './_Image.js';
4
5
  export type TextCardProps = {
5
6
  title: string;
6
7
  href: string;
8
+ meta?: string | JSX.Element;
7
9
  summary?: string | JSX.Element;
8
10
  target?: React.HTMLAttributeAnchorTarget;
9
11
  };
10
12
  export type ImageCardProps = TextCardProps & {
11
- meta?: string;
12
13
  image?: ImageProps;
13
14
  imgPlaceholder?: boolean;
14
15
  };
@@ -28,6 +29,6 @@ type _CardListProps = EitherObj<ImageCardListProps, TextCardListProps> & CardLis
28
29
  bemPrefix: string;
29
30
  children?: ReactNode;
30
31
  standalone?: boolean;
31
- };
32
+ } & BemModifierProps;
32
33
  export declare const CardList: (props: _CardListProps) => JSX.Element;
33
34
  export {};
package/esm/_abstract/_CardList.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { modifiedClass } from '@hugsmidjan/qj/classUtils';
2
3
  import { Button } from './_Button.js';
3
4
  import { Image } from './_Image.js';
4
5
  const Card = (props) => {
@@ -7,7 +8,7 @@ const Card = (props) => {
7
8
  return (React.createElement(React.Fragment, null,
8
9
  React.createElement(Button, { bem: cardClass, href: href, target: target },
9
10
  ' ',
10
- React.createElement(Image, Object.assign({ className: `${bem}__image` }, image, { placeholder: imgPlaceholder })),
11
+ !!(image || imgPlaceholder) && (React.createElement(Image, Object.assign({ className: `${bem}__image` }, image, { placeholder: imgPlaceholder }))),
11
12
  React.createElement("span", { className: `${cardClass}__title` }, title),
12
13
  ' ',
13
14
  meta && React.createElement("span", { className: `${cardClass}__meta` }, meta),
@@ -17,7 +18,7 @@ const Card = (props) => {
17
18
  ' '));
18
19
  };
19
20
  export const CardList = (props) => {
20
- const { bemPrefix, title, summaryElement, cards, titleTag = 'h2', children, imgPlaceholder, } = props;
21
+ const { bemPrefix, modifier, title, summaryElement, cards, titleTag = 'h2', children, imgPlaceholder, } = props;
21
22
  const TitleTag = titleTag;
22
23
  const fallbackImageUrl = (imgPlaceholder !== true && imgPlaceholder) || undefined;
23
24
  const fallbackImageStyle = fallbackImageUrl
@@ -29,7 +30,7 @@ export const CardList = (props) => {
29
30
  summaryElement ? (React.createElement("div", { className: bemPrefix + '__summary' },
30
31
  title && React.createElement(TitleTag, { className: bemPrefix + '__title' }, title),
31
32
  summaryElement)) : (title && React.createElement(TitleTag, { className: bemPrefix + '__title' }, title)),
32
- React.createElement("ul", { className: bemPrefix + (props.standalone ? '' : '__list'), style: fallbackImageStyle }, cards.map((card, i) => (React.createElement("li", { key: i, className: bemPrefix + '__item' },
33
+ React.createElement("ul", { className: props.standalone ? modifiedClass(bemPrefix, modifier) : bemPrefix + '__list', style: fallbackImageStyle }, cards.map((card, i) => (React.createElement("li", { key: i, className: bemPrefix + '__item' },
33
34
  React.createElement(Card
34
35
  /* Assert as `ImageCardProps` to silence the imgPlaceholder false-positive */
35
36
  , Object.assign({}, card, { bem: bemPrefix, imgPlaceholder: !!imgPlaceholder })))))),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reykjavik/hanna-react",
3
- "version": "0.10.98",
3
+ "version": "0.10.100",
4
4
  "author": "Reykjavík (http://www.reykjavik.is)",
5
5
  "contributors": [
6
6
  "Hugsmiðjan ehf (http://www.hugsmidjan.is)",