thread-ui 0.8.0 → 0.8.1
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.
- package/dist/components/media/info-card/info-card.d.ts +3 -3
- package/dist/components/media/info-card/info-card.js +5 -5
- package/dist/components/media/info-card/info-card.js.map +1 -1
- package/dist/components/media/info-card/info-card.types.d.ts +3 -2
- package/dist/internal-components/image/is-html-image-props.js +1 -2
- package/dist/internal-components/image/is-html-image-props.js.map +1 -1
- package/dist/types/image/image.types.d.ts +1 -1
- package/package.json +1 -1
|
@@ -4,10 +4,10 @@ import { InfoCardProps } from './info-card.types';
|
|
|
4
4
|
*
|
|
5
5
|
* @example
|
|
6
6
|
* // Named icon
|
|
7
|
-
* <InfoCard title="Getting Started" url="/docs" icon="BookOpen"
|
|
7
|
+
* <InfoCard title="Getting Started" url="/docs" icon="BookOpen" image={{ src: '/cover.jpg' }} />
|
|
8
8
|
*
|
|
9
9
|
* @example
|
|
10
10
|
* // Emoji
|
|
11
|
-
* <InfoCard title="Recipes" url="/recipes" icon={{ type: 'emoji', emoji: '🍋' }}
|
|
11
|
+
* <InfoCard title="Recipes" url="/recipes" icon={{ type: 'emoji', emoji: '🍋' }} image={{ src: '/cover.jpg' }} />
|
|
12
12
|
*/
|
|
13
|
-
export declare const InfoCard: ({ title, url, icon,
|
|
13
|
+
export declare const InfoCard: ({ title, url, icon, image }: InfoCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { css, cx } from '../../../styled-system/css';
|
|
4
4
|
import { Text } from '../../../components/typography';
|
|
5
|
-
import { DynamicIcon } from '../../../internal-components';
|
|
5
|
+
import { DynamicIcon, renderImage } from '../../../internal-components';
|
|
6
6
|
const styles = {
|
|
7
7
|
card: css({
|
|
8
8
|
margin: 'auto',
|
|
@@ -52,13 +52,13 @@ const styles = {
|
|
|
52
52
|
*
|
|
53
53
|
* @example
|
|
54
54
|
* // Named icon
|
|
55
|
-
* <InfoCard title="Getting Started" url="/docs" icon="BookOpen"
|
|
55
|
+
* <InfoCard title="Getting Started" url="/docs" icon="BookOpen" image={{ src: '/cover.jpg' }} />
|
|
56
56
|
*
|
|
57
57
|
* @example
|
|
58
58
|
* // Emoji
|
|
59
|
-
* <InfoCard title="Recipes" url="/recipes" icon={{ type: 'emoji', emoji: '🍋' }}
|
|
59
|
+
* <InfoCard title="Recipes" url="/recipes" icon={{ type: 'emoji', emoji: '🍋' }} image={{ src: '/cover.jpg' }} />
|
|
60
60
|
*/
|
|
61
|
-
export const InfoCard = ({ title, url, icon,
|
|
62
|
-
return (_jsxs("a", { href: url, className: cx(styles.cardContent, styles.link, styles.card), children: [_jsx("div", { className: styles.imageWrapper, children:
|
|
61
|
+
export const InfoCard = ({ title, url, icon, image }) => {
|
|
62
|
+
return (_jsxs("a", { href: url, className: cx(styles.cardContent, styles.link, styles.card), children: [_jsx("div", { className: styles.imageWrapper, children: renderImage(image, undefined, styles.image) }), _jsxs("div", { className: styles.caption, children: [_jsx(DynamicIcon, { icon: icon, size: 24 }), _jsx(Text, { size: "sm", truncate: true, inline: true, children: title })] })] }));
|
|
63
63
|
};
|
|
64
64
|
//# sourceMappingURL=info-card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"info-card.js","sourceRoot":"","sources":["../../../../src/components/media/info-card/info-card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;
|
|
1
|
+
{"version":3,"file":"info-card.js","sourceRoot":"","sources":["../../../../src/components/media/info-card/info-card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAIjE,MAAM,MAAM,GAAG;IACd,IAAI,EAAE,GAAG,CAAC;QACT,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,OAAO;QACf,YAAY,EAAE,IAAI;QAClB,WAAW,EAAE,IAAI;QACjB,WAAW,EAAE,WAAW;QACxB,WAAW,EAAE,OAAO;QACpB,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE,OAAO;QACjB,WAAW,EAAE,OAAO;QACpB,KAAK,EAAE,MAAM;QACb,eAAe,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE;KAC1D,CAAC;IACF,WAAW,EAAE,GAAG,CAAC;QAChB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;KACvB,CAAC;IACF,IAAI,EAAE,GAAG,CAAC;QACT,MAAM,EAAE,SAAS;KACjB,CAAC;IACF,YAAY,EAAE,GAAG,CAAC;QACjB,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,GAAG;QACT,SAAS,EAAE,GAAG;KACd,CAAC;IACF,KAAK,EAAE,GAAG,CAAC;QACV,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,OAAO;KAClB,CAAC;IACF,OAAO,EAAE,GAAG,CAAC;QACZ,OAAO,EAAE,KAAK;QACd,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,GAAG;QACR,cAAc,EAAE,YAAY;QAC5B,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,UAAU,EAAE,CAAC;KACb,CAAC;CACF,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAiB,EAAE,EAAE;IACtE,OAAO,CACN,aAAG,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,aACxE,cAAK,SAAS,EAAE,MAAM,CAAC,YAAY,YAAG,WAAW,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,GAAO,EACxF,eAAK,SAAS,EAAE,MAAM,CAAC,OAAO,aAC7B,KAAC,WAAW,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,GAAI,EACrC,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,QAAC,MAAM,kBAC7B,KAAK,GACA,IACF,IACH,CACJ,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { DynamicIconProps } from '../../../internal-components';
|
|
2
|
+
import { ImageProps } from '../../../types';
|
|
2
3
|
export type InfoCardProps = {
|
|
3
4
|
/** Card title displayed in the caption bar */
|
|
4
5
|
title: string;
|
|
@@ -12,6 +13,6 @@ export type InfoCardProps = {
|
|
|
12
13
|
* icon={{ type: 'svg', content: '/icons/article.svg' }}
|
|
13
14
|
*/
|
|
14
15
|
icon?: DynamicIconProps['icon'];
|
|
15
|
-
/** Cover image
|
|
16
|
-
|
|
16
|
+
/** Cover image displayed in the card */
|
|
17
|
+
image: ImageProps;
|
|
17
18
|
};
|
|
@@ -2,8 +2,7 @@ export const isHtmlImageProps = (value) => {
|
|
|
2
2
|
return (typeof value === 'object' &&
|
|
3
3
|
value !== null &&
|
|
4
4
|
'src' in value &&
|
|
5
|
-
'alt' in value &&
|
|
6
5
|
typeof value.src === 'string' &&
|
|
7
|
-
typeof value.alt === 'string');
|
|
6
|
+
(!('alt' in value) || typeof value.alt === 'string'));
|
|
8
7
|
};
|
|
9
8
|
//# sourceMappingURL=is-html-image-props.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"is-html-image-props.js","sourceRoot":"","sources":["../../../src/internal-components/image/is-html-image-props.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAU,EAA2B,EAAE;IACvE,OAAO,CACN,OAAO,KAAK,KAAK,QAAQ;QACzB,KAAK,KAAK,IAAI;QACd,KAAK,IAAI,KAAK;QACd,
|
|
1
|
+
{"version":3,"file":"is-html-image-props.js","sourceRoot":"","sources":["../../../src/internal-components/image/is-html-image-props.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAU,EAA2B,EAAE;IACvE,OAAO,CACN,OAAO,KAAK,KAAK,QAAQ;QACzB,KAAK,KAAK,IAAI;QACd,KAAK,IAAI,KAAK;QACd,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ;QAC7B,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ,CAAC,CACpD,CAAC;AACH,CAAC,CAAC"}
|