@lumx/react 2.1.9-alpha-thumbnail7 → 2.1.9-alpha-thumbnail11
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/esm/_internal/Avatar2.js +2 -1
- package/esm/_internal/Avatar2.js.map +1 -1
- package/esm/_internal/ImageBlock.js +1 -0
- package/esm/_internal/ImageBlock.js.map +1 -1
- package/package.json +4 -4
- package/src/components/avatar/Avatar.tsx +1 -0
- package/src/components/image-block/ImageBlock.tsx +1 -0
- package/src/components/thumbnail/__snapshots__/Thumbnail.test.tsx.snap +0 -5
package/esm/_internal/Avatar2.js
CHANGED
|
@@ -62,7 +62,8 @@ var Avatar = forwardRef(function (props, ref) {
|
|
|
62
62
|
aspectRatio: AspectRatio.square,
|
|
63
63
|
size: size,
|
|
64
64
|
image: image,
|
|
65
|
-
alt: alt
|
|
65
|
+
alt: alt,
|
|
66
|
+
theme: theme
|
|
66
67
|
})), actions && React.createElement("div", {
|
|
67
68
|
className: "".concat(CLASSNAME, "__actions")
|
|
68
69
|
}, actions), badge && React.createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar2.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Avatar sizes.\n */\nexport type AvatarSize = Extract<Size, 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface AvatarProps extends GenericProps {\n /** Action toolbar content. */\n actions?: ReactNode;\n /** Image alternative text. */\n alt: string;\n /** Badge. */\n badge?: ReactElement;\n /** Image URL. */\n image: string;\n /** On click callback. */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /** On key press callback. */\n onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n /** Size variant. */\n size?: AvatarSize;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Props to pass to the thumbnail (minus those already set by the Avatar props). */\n thumbnailProps?: Omit<\n ThumbnailProps,\n 'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'\n >;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Avatar';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<AvatarProps> = {\n size: Size.m,\n theme: Theme.light,\n};\n\n/**\n * Avatar component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n actions,\n alt,\n badge,\n className,\n image,\n onClick,\n onKeyPress,\n size,\n theme,\n thumbnailProps,\n ...forwardedProps\n } = props;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}\n >\n <Thumbnail\n className={`${CLASSNAME}__thumbnail`}\n onClick={onClick}\n onKeyPress={onKeyPress}\n {...thumbnailProps}\n aspectRatio={AspectRatio.square}\n size={size}\n image={image}\n alt={alt}\n />\n {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}\n </div>\n );\n});\nAvatar.displayName = COMPONENT_NAME;\nAvatar.className = CLASSNAME;\nAvatar.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","m","theme","Theme","light","Avatar","forwardRef","props","ref","actions","alt","badge","className","image","onClick","onKeyPress","thumbnailProps","forwardedProps","classNames","handleBasicClasses","prefix","AspectRatio","square","displayName","defaultProps"],"mappings":";;;;;;AAQA;;;;AAgCA;;;AAGA,IAAMA,cAAc,GAAG,QAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAmC,GAAG;AACxCC,EAAAA,IAAI,EAAEC,IAAI,CAACC,CAD6B;AAExCC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AAF2B,CAA5C;AAKA;;;;;;;;IAOaC,MAAyC,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE5EC,OAF4E,GAa5EF,KAb4E,CAE5EE,OAF4E;AAAA,MAG5EC,GAH4E,GAa5EH,KAb4E,CAG5EG,GAH4E;AAAA,MAI5EC,KAJ4E,GAa5EJ,KAb4E,CAI5EI,KAJ4E;AAAA,MAK5EC,SAL4E,GAa5EL,KAb4E,CAK5EK,SAL4E;AAAA,MAM5EC,KAN4E,GAa5EN,KAb4E,CAM5EM,KAN4E;AAAA,MAO5EC,OAP4E,GAa5EP,KAb4E,CAO5EO,OAP4E;AAAA,MAQ5EC,UAR4E,GAa5ER,KAb4E,CAQ5EQ,UAR4E;AAAA,MAS5EhB,IAT4E,GAa5EQ,KAb4E,CAS5ER,IAT4E;AAAA,MAU5EG,KAV4E,GAa5EK,KAb4E,CAU5EL,KAV4E;AAAA,MAW5Ec,cAX4E,GAa5ET,KAb4E,CAW5ES,cAX4E;AAAA,MAYzEC,cAZyE,4BAa5EV,KAb4E;;AAehF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQS,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACN,SAAD,EAAYO,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAExB,SAAV;AAAqBG,MAAAA,IAAI,EAAJA,IAArB;AAA2BG,MAAAA,KAAK,EAALA;AAA3B,KAAD,CAA9B;AAHzB,MAKI,oBAAC,SAAD;AACI,IAAA,SAAS,YAAKN,SAAL,gBADb;AAEI,IAAA,OAAO,EAAEkB,OAFb;AAGI,IAAA,UAAU,EAAEC;AAHhB,KAIQC,cAJR;AAKI,IAAA,WAAW,EAAEK,WAAW,CAACC,MAL7B;AAMI,IAAA,IAAI,EAAEvB,IANV;AAOI,IAAA,KAAK,EAAEc,KAPX;AAQI,IAAA,GAAG,EAAEH;
|
|
1
|
+
{"version":3,"file":"Avatar2.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Avatar sizes.\n */\nexport type AvatarSize = Extract<Size, 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface AvatarProps extends GenericProps {\n /** Action toolbar content. */\n actions?: ReactNode;\n /** Image alternative text. */\n alt: string;\n /** Badge. */\n badge?: ReactElement;\n /** Image URL. */\n image: string;\n /** On click callback. */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /** On key press callback. */\n onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n /** Size variant. */\n size?: AvatarSize;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Props to pass to the thumbnail (minus those already set by the Avatar props). */\n thumbnailProps?: Omit<\n ThumbnailProps,\n 'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'\n >;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Avatar';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<AvatarProps> = {\n size: Size.m,\n theme: Theme.light,\n};\n\n/**\n * Avatar component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n actions,\n alt,\n badge,\n className,\n image,\n onClick,\n onKeyPress,\n size,\n theme,\n thumbnailProps,\n ...forwardedProps\n } = props;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}\n >\n <Thumbnail\n className={`${CLASSNAME}__thumbnail`}\n onClick={onClick}\n onKeyPress={onKeyPress}\n {...thumbnailProps}\n aspectRatio={AspectRatio.square}\n size={size}\n image={image}\n alt={alt}\n theme={theme}\n />\n {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}\n </div>\n );\n});\nAvatar.displayName = COMPONENT_NAME;\nAvatar.className = CLASSNAME;\nAvatar.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","m","theme","Theme","light","Avatar","forwardRef","props","ref","actions","alt","badge","className","image","onClick","onKeyPress","thumbnailProps","forwardedProps","classNames","handleBasicClasses","prefix","AspectRatio","square","displayName","defaultProps"],"mappings":";;;;;;AAQA;;;;AAgCA;;;AAGA,IAAMA,cAAc,GAAG,QAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAmC,GAAG;AACxCC,EAAAA,IAAI,EAAEC,IAAI,CAACC,CAD6B;AAExCC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AAF2B,CAA5C;AAKA;;;;;;;;IAOaC,MAAyC,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE5EC,OAF4E,GAa5EF,KAb4E,CAE5EE,OAF4E;AAAA,MAG5EC,GAH4E,GAa5EH,KAb4E,CAG5EG,GAH4E;AAAA,MAI5EC,KAJ4E,GAa5EJ,KAb4E,CAI5EI,KAJ4E;AAAA,MAK5EC,SAL4E,GAa5EL,KAb4E,CAK5EK,SAL4E;AAAA,MAM5EC,KAN4E,GAa5EN,KAb4E,CAM5EM,KAN4E;AAAA,MAO5EC,OAP4E,GAa5EP,KAb4E,CAO5EO,OAP4E;AAAA,MAQ5EC,UAR4E,GAa5ER,KAb4E,CAQ5EQ,UAR4E;AAAA,MAS5EhB,IAT4E,GAa5EQ,KAb4E,CAS5ER,IAT4E;AAAA,MAU5EG,KAV4E,GAa5EK,KAb4E,CAU5EL,KAV4E;AAAA,MAW5Ec,cAX4E,GAa5ET,KAb4E,CAW5ES,cAX4E;AAAA,MAYzEC,cAZyE,4BAa5EV,KAb4E;;AAehF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQS,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACN,SAAD,EAAYO,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAExB,SAAV;AAAqBG,MAAAA,IAAI,EAAJA,IAArB;AAA2BG,MAAAA,KAAK,EAALA;AAA3B,KAAD,CAA9B;AAHzB,MAKI,oBAAC,SAAD;AACI,IAAA,SAAS,YAAKN,SAAL,gBADb;AAEI,IAAA,OAAO,EAAEkB,OAFb;AAGI,IAAA,UAAU,EAAEC;AAHhB,KAIQC,cAJR;AAKI,IAAA,WAAW,EAAEK,WAAW,CAACC,MAL7B;AAMI,IAAA,IAAI,EAAEvB,IANV;AAOI,IAAA,KAAK,EAAEc,KAPX;AAQI,IAAA,GAAG,EAAEH,GART;AASI,IAAA,KAAK,EAAER;AATX,KALJ,EAgBKO,OAAO,IAAI;AAAK,IAAA,SAAS,YAAKb,SAAL;AAAd,KAA0Ca,OAA1C,CAhBhB,EAiBKE,KAAK,IAAI;AAAK,IAAA,SAAS,YAAKf,SAAL;AAAd,KAAwCe,KAAxC,CAjBd,CADJ;AAqBH,CApCkE;AAqCnEN,MAAM,CAACkB,WAAP,GAAqB5B,cAArB;AACAU,MAAM,CAACO,SAAP,GAAmBhB,SAAnB;AACAS,MAAM,CAACmB,YAAP,GAAsB1B,aAAtB;;;;"}
|
|
@@ -68,6 +68,7 @@ var ImageBlock = forwardRef(function (props, ref) {
|
|
|
68
68
|
}), fillHeight && "".concat(CLASSNAME, "--fill-height"))
|
|
69
69
|
}), React.createElement(Thumbnail, _extends({}, thumbnailProps, {
|
|
70
70
|
className: classnames("".concat(CLASSNAME, "__image"), thumbnailProps === null || thumbnailProps === void 0 ? void 0 : thumbnailProps.className),
|
|
71
|
+
fillHeight: fillHeight,
|
|
71
72
|
align: align,
|
|
72
73
|
image: image,
|
|
73
74
|
size: size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageBlock.js","sources":["../../../src/components/image-block/ImageBlock.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport isObject from 'lodash/isObject';\n\nimport { Alignment, HorizontalAlignment, Size, Theme, Thumbnail } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, ValueOf } from '@lumx/react/utils';\nimport { ThumbnailProps } from '../thumbnail/Thumbnail';\n\n/**\n * Image block variants.\n */\nexport const ImageBlockCaptionPosition = {\n below: 'below',\n over: 'over',\n} as const;\nexport type ImageBlockCaptionPosition = ValueOf<typeof ImageBlockCaptionPosition>;\n\n/**\n * Image block sizes.\n */\nexport type ImageBlockSize = Extract<Size, 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface ImageBlockProps extends GenericProps {\n /** Action toolbar content. */\n actions?: ReactNode;\n /** Alignment. */\n align?: HorizontalAlignment;\n /** Image alternative text. */\n alt: string;\n /** Caption position. */\n captionPosition?: ImageBlockCaptionPosition;\n /** Caption custom CSS style. */\n captionStyle?: CSSProperties;\n /** Image description. Can be either a string, or sanitized html. */\n description?: string | { __html: string };\n /** Whether the image has to fill its container height or not. */\n fillHeight?: boolean;\n /** Image URL. */\n image: string;\n /** Size variant. */\n size?: ImageBlockSize;\n /** Tag content. */\n tags?: ReactNode;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Props to pass to the thumbnail (minus those already set by the ImageBlock props). */\n thumbnailProps?: Omit<ThumbnailProps, 'image' | 'size' | 'theme' | 'align' | 'fillHeight'>;\n /** Image title to display in the caption. */\n title?: string;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ImageBlock';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<ImageBlockProps> = {\n captionPosition: ImageBlockCaptionPosition.below,\n theme: Theme.light,\n align: Alignment.left,\n};\n\n/**\n * ImageBlock component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const ImageBlock: Comp<ImageBlockProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n actions,\n align,\n alt,\n captionPosition,\n captionStyle,\n className,\n description,\n fillHeight,\n image,\n size,\n tags,\n theme,\n thumbnailProps,\n title,\n ...forwardedProps\n } = props;\n return (\n <figure\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n captionPosition,\n align,\n size,\n theme,\n }),\n fillHeight && `${CLASSNAME}--fill-height`,\n )}\n >\n <Thumbnail\n {...thumbnailProps}\n className={classNames(`${CLASSNAME}__image`, thumbnailProps?.className)}\n align={align}\n image={image}\n size={size}\n theme={theme}\n alt={(alt || title) as string}\n />\n {(title || description || tags) && (\n <figcaption className={`${CLASSNAME}__wrapper`} style={captionStyle}>\n {(title || description) && (\n <div className={`${CLASSNAME}__caption`}>\n {title && <span className={`${CLASSNAME}__title`}>{title}</span>}\n {/* Add an ` ` when there is description and title. */}\n {title && description && '\\u00A0'}\n {isObject(description) && description.__html ? (\n // eslint-disable-next-line react/no-danger\n <span dangerouslySetInnerHTML={description} className={`${CLASSNAME}__description`} />\n ) : (\n <span className={`${CLASSNAME}__description`}>{description}</span>\n )}\n </div>\n )}\n {tags && <div className={`${CLASSNAME}__tags`}>{tags}</div>}\n </figcaption>\n )}\n {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n </figure>\n );\n});\nImageBlock.displayName = COMPONENT_NAME;\nImageBlock.className = CLASSNAME;\nImageBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["ImageBlockCaptionPosition","below","over","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","captionPosition","theme","Theme","light","align","Alignment","left","ImageBlock","forwardRef","props","ref","actions","alt","captionStyle","className","description","fillHeight","image","size","tags","thumbnailProps","title","forwardedProps","classNames","handleBasicClasses","prefix","isObject","__html","displayName","defaultProps"],"mappings":";;;;;;;AAWA;;;IAGaA,yBAAyB,GAAG;AACrCC,EAAAA,KAAK,EAAE,OAD8B;AAErCC,EAAAA,IAAI,EAAE;AAF+B;;AA2CzC;;;AAGA,IAAMC,cAAc,GAAG,YAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAuC,GAAG;AAC5CC,EAAAA,eAAe,EAAEP,yBAAyB,CAACC,KADC;AAE5CO,EAAAA,KAAK,EAAEC,KAAK,CAACC,KAF+B;AAG5CC,EAAAA,KAAK,EAAEC,SAAS,CAACC;AAH2B,CAAhD;AAMA;;;;;;;;IAOaC,UAAiD,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAEpFC,OAFoF,GAiBpFF,KAjBoF,CAEpFE,OAFoF;AAAA,MAGpFP,KAHoF,GAiBpFK,KAjBoF,CAGpFL,KAHoF;AAAA,MAIpFQ,GAJoF,GAiBpFH,KAjBoF,CAIpFG,GAJoF;AAAA,MAKpFZ,eALoF,GAiBpFS,KAjBoF,CAKpFT,eALoF;AAAA,MAMpFa,YANoF,GAiBpFJ,KAjBoF,CAMpFI,YANoF;AAAA,MAOpFC,SAPoF,GAiBpFL,KAjBoF,CAOpFK,SAPoF;AAAA,MAQpFC,WARoF,GAiBpFN,KAjBoF,CAQpFM,WARoF;AAAA,MASpFC,UAToF,GAiBpFP,KAjBoF,CASpFO,UAToF;AAAA,MAUpFC,KAVoF,GAiBpFR,KAjBoF,CAUpFQ,KAVoF;AAAA,MAWpFC,IAXoF,GAiBpFT,KAjBoF,CAWpFS,IAXoF;AAAA,MAYpFC,IAZoF,GAiBpFV,KAjBoF,CAYpFU,IAZoF;AAAA,MAapFlB,KAboF,GAiBpFQ,KAjBoF,CAapFR,KAboF;AAAA,MAcpFmB,cAdoF,GAiBpFX,KAjBoF,CAcpFW,cAdoF;AAAA,MAepFC,KAfoF,GAiBpFZ,KAjBoF,CAepFY,KAfoF;AAAA,MAgBjFC,cAhBiF,4BAiBpFb,KAjBoF;;AAkBxF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQY,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CACjBT,SADiB,EAEjBU,kBAAkB,CAAC;AACfC,MAAAA,MAAM,EAAE5B,SADO;AAEfG,MAAAA,eAAe,EAAfA,eAFe;AAGfI,MAAAA,KAAK,EAALA,KAHe;AAIfc,MAAAA,IAAI,EAAJA,IAJe;AAKfjB,MAAAA,KAAK,EAALA;AALe,KAAD,CAFD,EASjBe,UAAU,cAAOnB,SAAP,kBATO;AAHzB,MAeI,oBAAC,SAAD,eACQuB,cADR;AAEI,IAAA,SAAS,EAAEG,UAAU,WAAI1B,SAAJ,cAAwBuB,cAAxB,aAAwBA,cAAxB,uBAAwBA,cAAc,CAAEN,SAAxC,CAFzB;AAGI,IAAA,
|
|
1
|
+
{"version":3,"file":"ImageBlock.js","sources":["../../../src/components/image-block/ImageBlock.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport isObject from 'lodash/isObject';\n\nimport { Alignment, HorizontalAlignment, Size, Theme, Thumbnail } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, ValueOf } from '@lumx/react/utils';\nimport { ThumbnailProps } from '../thumbnail/Thumbnail';\n\n/**\n * Image block variants.\n */\nexport const ImageBlockCaptionPosition = {\n below: 'below',\n over: 'over',\n} as const;\nexport type ImageBlockCaptionPosition = ValueOf<typeof ImageBlockCaptionPosition>;\n\n/**\n * Image block sizes.\n */\nexport type ImageBlockSize = Extract<Size, 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface ImageBlockProps extends GenericProps {\n /** Action toolbar content. */\n actions?: ReactNode;\n /** Alignment. */\n align?: HorizontalAlignment;\n /** Image alternative text. */\n alt: string;\n /** Caption position. */\n captionPosition?: ImageBlockCaptionPosition;\n /** Caption custom CSS style. */\n captionStyle?: CSSProperties;\n /** Image description. Can be either a string, or sanitized html. */\n description?: string | { __html: string };\n /** Whether the image has to fill its container height or not. */\n fillHeight?: boolean;\n /** Image URL. */\n image: string;\n /** Size variant. */\n size?: ImageBlockSize;\n /** Tag content. */\n tags?: ReactNode;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Props to pass to the thumbnail (minus those already set by the ImageBlock props). */\n thumbnailProps?: Omit<ThumbnailProps, 'image' | 'size' | 'theme' | 'align' | 'fillHeight'>;\n /** Image title to display in the caption. */\n title?: string;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ImageBlock';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<ImageBlockProps> = {\n captionPosition: ImageBlockCaptionPosition.below,\n theme: Theme.light,\n align: Alignment.left,\n};\n\n/**\n * ImageBlock component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const ImageBlock: Comp<ImageBlockProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n actions,\n align,\n alt,\n captionPosition,\n captionStyle,\n className,\n description,\n fillHeight,\n image,\n size,\n tags,\n theme,\n thumbnailProps,\n title,\n ...forwardedProps\n } = props;\n return (\n <figure\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n captionPosition,\n align,\n size,\n theme,\n }),\n fillHeight && `${CLASSNAME}--fill-height`,\n )}\n >\n <Thumbnail\n {...thumbnailProps}\n className={classNames(`${CLASSNAME}__image`, thumbnailProps?.className)}\n fillHeight={fillHeight}\n align={align}\n image={image}\n size={size}\n theme={theme}\n alt={(alt || title) as string}\n />\n {(title || description || tags) && (\n <figcaption className={`${CLASSNAME}__wrapper`} style={captionStyle}>\n {(title || description) && (\n <div className={`${CLASSNAME}__caption`}>\n {title && <span className={`${CLASSNAME}__title`}>{title}</span>}\n {/* Add an ` ` when there is description and title. */}\n {title && description && '\\u00A0'}\n {isObject(description) && description.__html ? (\n // eslint-disable-next-line react/no-danger\n <span dangerouslySetInnerHTML={description} className={`${CLASSNAME}__description`} />\n ) : (\n <span className={`${CLASSNAME}__description`}>{description}</span>\n )}\n </div>\n )}\n {tags && <div className={`${CLASSNAME}__tags`}>{tags}</div>}\n </figcaption>\n )}\n {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n </figure>\n );\n});\nImageBlock.displayName = COMPONENT_NAME;\nImageBlock.className = CLASSNAME;\nImageBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["ImageBlockCaptionPosition","below","over","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","captionPosition","theme","Theme","light","align","Alignment","left","ImageBlock","forwardRef","props","ref","actions","alt","captionStyle","className","description","fillHeight","image","size","tags","thumbnailProps","title","forwardedProps","classNames","handleBasicClasses","prefix","isObject","__html","displayName","defaultProps"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
9
|
"@juggle/resize-observer": "^3.2.0",
|
|
10
|
-
"@lumx/core": "^2.1.9-alpha-
|
|
11
|
-
"@lumx/icons": "^2.1.9-alpha-
|
|
10
|
+
"@lumx/core": "^2.1.9-alpha-thumbnail11",
|
|
11
|
+
"@lumx/icons": "^2.1.9-alpha-thumbnail11",
|
|
12
12
|
"@popperjs/core": "^2.5.4",
|
|
13
13
|
"body-scroll-lock": "^3.1.5",
|
|
14
14
|
"classnames": "^2.2.6",
|
|
@@ -120,6 +120,6 @@
|
|
|
120
120
|
"build:storybook": "cd storybook && ./build"
|
|
121
121
|
},
|
|
122
122
|
"sideEffects": false,
|
|
123
|
-
"version": "2.1.9-alpha-
|
|
124
|
-
"gitHead": "
|
|
123
|
+
"version": "2.1.9-alpha-thumbnail11",
|
|
124
|
+
"gitHead": "ed766af5f36765c9299426b80f28f2a67dc47c41"
|
|
125
125
|
}
|
|
@@ -93,6 +93,7 @@ export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref)
|
|
|
93
93
|
size={size}
|
|
94
94
|
image={image}
|
|
95
95
|
alt={alt}
|
|
96
|
+
theme={theme}
|
|
96
97
|
/>
|
|
97
98
|
{actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}
|
|
98
99
|
{badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}
|
|
@@ -118,6 +118,7 @@ export const ImageBlock: Comp<ImageBlockProps, HTMLDivElement> = forwardRef((pro
|
|
|
118
118
|
<Thumbnail
|
|
119
119
|
{...thumbnailProps}
|
|
120
120
|
className={classNames(`${CLASSNAME}__image`, thumbnailProps?.className)}
|
|
121
|
+
fillHeight={fillHeight}
|
|
121
122
|
align={align}
|
|
122
123
|
image={image}
|
|
123
124
|
size={size}
|
|
@@ -16,7 +16,6 @@ exports[`<Thumbnail> Snapshots and structure should render story 'Clickable' 1`]
|
|
|
16
16
|
style={
|
|
17
17
|
Object {
|
|
18
18
|
"objectPosition": undefined,
|
|
19
|
-
"visibility": "hidden",
|
|
20
19
|
}
|
|
21
20
|
}
|
|
22
21
|
/>
|
|
@@ -40,7 +39,6 @@ exports[`<Thumbnail> Snapshots and structure should render story 'ClickableCusto
|
|
|
40
39
|
style={
|
|
41
40
|
Object {
|
|
42
41
|
"objectPosition": undefined,
|
|
43
|
-
"visibility": "hidden",
|
|
44
42
|
}
|
|
45
43
|
}
|
|
46
44
|
/>
|
|
@@ -64,7 +62,6 @@ exports[`<Thumbnail> Snapshots and structure should render story 'ClickableLink'
|
|
|
64
62
|
style={
|
|
65
63
|
Object {
|
|
66
64
|
"objectPosition": undefined,
|
|
67
|
-
"visibility": "hidden",
|
|
68
65
|
}
|
|
69
66
|
}
|
|
70
67
|
/>
|
|
@@ -87,7 +84,6 @@ exports[`<Thumbnail> Snapshots and structure should render story 'Default' 1`] =
|
|
|
87
84
|
style={
|
|
88
85
|
Object {
|
|
89
86
|
"objectPosition": undefined,
|
|
90
|
-
"visibility": "hidden",
|
|
91
87
|
}
|
|
92
88
|
}
|
|
93
89
|
/>
|
|
@@ -110,7 +106,6 @@ exports[`<Thumbnail> Snapshots and structure should render story 'WithBadge' 1`]
|
|
|
110
106
|
style={
|
|
111
107
|
Object {
|
|
112
108
|
"objectPosition": undefined,
|
|
113
|
-
"visibility": "hidden",
|
|
114
109
|
}
|
|
115
110
|
}
|
|
116
111
|
/>
|