@veeqo/ui 15.3.4 → 15.5.0
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/README.md +2 -0
- package/dist/components/Image/Image.cjs +17 -9
- package/dist/components/Image/Image.cjs.map +1 -1
- package/dist/components/Image/Image.d.ts +2 -19
- package/dist/components/Image/Image.js +17 -9
- package/dist/components/Image/Image.js.map +1 -1
- package/dist/components/Image/Image.module.scss.cjs +2 -2
- package/dist/components/Image/Image.module.scss.cjs.map +1 -1
- package/dist/components/Image/Image.module.scss.js +2 -2
- package/dist/components/Image/Image.module.scss.js.map +1 -1
- package/dist/components/Image/index.d.ts +1 -0
- package/dist/components/Image/types.d.ts +20 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/hoc/withLabels/withLabels.cjs +6 -8
- package/dist/hoc/withLabels/withLabels.cjs.map +1 -1
- package/dist/hoc/withLabels/withLabels.js +6 -8
- package/dist/hoc/withLabels/withLabels.js.map +1 -1
- package/package.json +3 -4
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# Veeqo Components
|
|
2
2
|
|
|
3
|
+
> **Internal Consumers**: This repository is mirrored to GitFarm at [code.amazon.com/packages/Veeqo_veeqo-ui](https://code.amazon.com/packages/Veeqo_veeqo-ui/trees/main). **Do not open CRs or push directly to GitFarm**: it is a read-only replica. All changes must go through PRs on the [GitHub repository](https://github.com/veeqo/veeqo-ui). For internal consumption docs, see [internal_publishing.md](./docs/internal_publishing.md).
|
|
4
|
+
|
|
3
5
|
## Introduction
|
|
4
6
|
|
|
5
7
|
The frontend component library for reusable components in Veeqo which aim to reflect the [Veeqo Design System](https://www.figma.com/file/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?type=design&node-id=8067-38719&mode=design&t=v1hqIzanCtyYARwt-0). When possible we should aim to re-use components in this library all over the frontend and reduce the amount of custom components we create.
|
|
@@ -6,6 +6,7 @@ var reactDom = require('react-dom');
|
|
|
6
6
|
var PlaceholderImage = require('./components/PlaceholderImage.cjs');
|
|
7
7
|
var utils = require('./utils.cjs');
|
|
8
8
|
var buildClassnames = require('../../utils/buildClassnames.cjs');
|
|
9
|
+
require('uid/secure');
|
|
9
10
|
var urlUtils = require('../Anchor/utils/urlUtils.cjs');
|
|
10
11
|
var Image_module = require('./Image.module.scss.cjs');
|
|
11
12
|
|
|
@@ -13,14 +14,14 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
14
|
|
|
14
15
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
15
16
|
|
|
16
|
-
const Image = ({ src, alt = '', className, e2eClassName, width, height, previewWidth, previewHeight, previewPlacement = 'right', previewEnabled = false, placeholder, placeholderWidth, placeholderHeight, disablePlaceholder = false, }) => {
|
|
17
|
+
const Image = ({ src, alt = '', className, e2eClassName, width, height, radius = 'none', hasBorder = false, previewWidth, previewHeight, previewPlacement = 'right', previewEnabled = false, placeholder, placeholderWidth, placeholderHeight, disablePlaceholder = false, }) => {
|
|
17
18
|
const classNames = utils.generateClassNames(className);
|
|
18
19
|
const e2eClassNames = utils.generateClassNames(e2eClassName);
|
|
19
20
|
const contextAwareSrc = urlUtils.createContextAwareUrl(src);
|
|
20
21
|
const [isPreviewOpen, setIsPreviewOpen] = React.useState(false);
|
|
21
22
|
const [imageState, setImageState] = React.useState({ isLoaded: false, isError: false });
|
|
22
23
|
const [referenceElement, setReferenceElement] = React__default.default.useState(null);
|
|
23
|
-
const { refs, floatingStyles, placement: resolvedPlacement } = react.useFloating({
|
|
24
|
+
const { refs, floatingStyles, placement: resolvedPlacement, } = react.useFloating({
|
|
24
25
|
elements: { reference: referenceElement },
|
|
25
26
|
placement: previewPlacement,
|
|
26
27
|
middleware: [react.offset(12), react.flip(), react.shift({ limiter: react.limitShift() })],
|
|
@@ -31,27 +32,34 @@ const Image = ({ src, alt = '', className, e2eClassName, width, height, previewW
|
|
|
31
32
|
const onLoad = () => setImageState({ isLoaded: true, isError: false });
|
|
32
33
|
const onError = () => setImageState({ isLoaded: true, isError: true });
|
|
33
34
|
const isImageHidden = !imageState.isLoaded || imageState.isError;
|
|
34
|
-
return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
|
|
35
|
-
classNames === null || classNames === void 0 ? void 0 : classNames.container,
|
|
36
|
-
e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container,
|
|
37
|
-
className,
|
|
38
|
-
]) },
|
|
35
|
+
return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container, className]) },
|
|
39
36
|
React__default.default.createElement("img", { src: contextAwareSrc, alt: alt, className: buildClassnames.buildClassnames([
|
|
40
37
|
Image_module.image,
|
|
38
|
+
Image_module[`${radius}-radius`],
|
|
39
|
+
hasBorder && Image_module.outline,
|
|
41
40
|
previewEnabled && Image_module.previewEnabled,
|
|
42
41
|
classNames === null || classNames === void 0 ? void 0 : classNames.image,
|
|
43
42
|
e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.image,
|
|
44
43
|
]), width: width, height: height, onLoad: onLoad, onError: onError, onMouseEnter: openImagePreview, onMouseLeave: closeImagePreview, style: isImageHidden ? { display: 'none' } : {}, ref: setReferenceElement }),
|
|
45
44
|
!disablePlaceholder &&
|
|
46
45
|
isImageHidden &&
|
|
47
|
-
(placeholder || (React__default.default.createElement(PlaceholderImage.PlaceholderImage, { className: buildClassnames.buildClassnames([
|
|
46
|
+
(placeholder || (React__default.default.createElement(PlaceholderImage.PlaceholderImage, { className: buildClassnames.buildClassnames([
|
|
47
|
+
Image_module[`${radius}-radius`],
|
|
48
|
+
hasBorder && Image_module.outline,
|
|
49
|
+
classNames === null || classNames === void 0 ? void 0 : classNames.placeholder,
|
|
50
|
+
e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.placeholder,
|
|
51
|
+
]), width: placeholderWidth || width, height: placeholderHeight || height }))),
|
|
48
52
|
isPreviewOpen &&
|
|
49
53
|
reactDom.createPortal(React__default.default.createElement("div", { ref: refs.setFloating, style: floatingStyles, "data-placement": resolvedPlacement, className: buildClassnames.buildClassnames([
|
|
50
54
|
Image_module.previewImageContainer,
|
|
51
55
|
classNames === null || classNames === void 0 ? void 0 : classNames.previewImageContainer,
|
|
52
56
|
e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.previewImageContainer,
|
|
53
57
|
]) },
|
|
54
|
-
React__default.default.createElement("img", { className:
|
|
58
|
+
React__default.default.createElement("img", { className: buildClassnames.buildClassnames([
|
|
59
|
+
Image_module.previewImage,
|
|
60
|
+
Image_module[`${radius}-radius`],
|
|
61
|
+
hasBorder && Image_module.outline,
|
|
62
|
+
]), src: contextAwareSrc, alt: "", width: previewWidth, height: previewHeight })), document.body)));
|
|
55
63
|
};
|
|
56
64
|
|
|
57
65
|
exports.Image = Image;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.cjs","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { useFloating, offset, flip, shift, limitShift, autoUpdate
|
|
1
|
+
{"version":3,"file":"Image.cjs","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { useFloating, offset, flip, shift, limitShift, autoUpdate } from '@floating-ui/react';\nimport { createPortal } from 'react-dom';\nimport { PlaceholderImage } from './components/PlaceholderImage';\n\nimport { generateClassNames } from './utils';\nimport { buildClassnames } from '../../utils';\nimport { createContextAwareUrl } from '../Anchor/utils/urlUtils';\nimport imageStyles from './Image.module.scss';\nimport { ImageProps } from './types';\n\nexport const Image = ({\n src,\n alt = '',\n className,\n e2eClassName,\n width,\n height,\n radius = 'none',\n hasBorder = false,\n previewWidth,\n previewHeight,\n previewPlacement = 'right',\n previewEnabled = false,\n placeholder,\n placeholderWidth,\n placeholderHeight,\n disablePlaceholder = false,\n}: ImageProps) => {\n const classNames = generateClassNames(className);\n const e2eClassNames = generateClassNames(e2eClassName);\n const contextAwareSrc = createContextAwareUrl(src);\n\n const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n const [imageState, setImageState] = useState({ isLoaded: false, isError: false });\n\n const [referenceElement, setReferenceElement] = React.useState<HTMLImageElement | null>(null);\n const {\n refs,\n floatingStyles,\n placement: resolvedPlacement,\n } = useFloating({\n elements: { reference: referenceElement },\n placement: previewPlacement,\n middleware: [offset(12), flip(), shift({ limiter: limitShift() })],\n whileElementsMounted: autoUpdate,\n });\n\n const openImagePreview = useCallback(\n () => (previewEnabled ? setIsPreviewOpen(true) : {}),\n [previewEnabled],\n );\n const closeImagePreview = useCallback(\n () => (previewEnabled ? setIsPreviewOpen(false) : {}),\n [previewEnabled],\n );\n\n const onLoad = () => setImageState({ isLoaded: true, isError: false });\n const onError = () => setImageState({ isLoaded: true, isError: true });\n\n const isImageHidden = !imageState.isLoaded || imageState.isError;\n\n return (\n <div className={buildClassnames([classNames?.container, e2eClassNames?.container, className])}>\n <img\n src={contextAwareSrc}\n alt={alt}\n className={buildClassnames([\n imageStyles.image,\n imageStyles[`${radius}-radius`],\n hasBorder && imageStyles.outline,\n previewEnabled && imageStyles.previewEnabled,\n classNames?.image,\n e2eClassNames?.image,\n ])}\n width={width}\n height={height}\n onLoad={onLoad}\n onError={onError}\n onMouseEnter={openImagePreview}\n onMouseLeave={closeImagePreview}\n style={isImageHidden ? { display: 'none' } : {}}\n ref={setReferenceElement}\n />\n {!disablePlaceholder &&\n isImageHidden &&\n (placeholder || (\n <PlaceholderImage\n className={buildClassnames([\n imageStyles[`${radius}-radius`],\n hasBorder && imageStyles.outline,\n classNames?.placeholder,\n e2eClassNames?.placeholder,\n ])}\n width={placeholderWidth || width}\n height={placeholderHeight || height}\n />\n ))}\n {isPreviewOpen &&\n createPortal(\n <div\n ref={refs.setFloating}\n style={floatingStyles}\n data-placement={resolvedPlacement}\n className={buildClassnames([\n imageStyles.previewImageContainer,\n classNames?.previewImageContainer,\n e2eClassNames?.previewImageContainer,\n ])}\n >\n <img\n className={buildClassnames([\n imageStyles.previewImage,\n imageStyles[`${radius}-radius`],\n hasBorder && imageStyles.outline,\n ])}\n src={contextAwareSrc}\n alt=\"\"\n width={previewWidth}\n height={previewHeight}\n />\n </div>,\n document.body,\n )}\n </div>\n );\n};\n"],"names":["generateClassNames","createContextAwareUrl","useState","React","useFloating","offset","flip","shift","limitShift","autoUpdate","useCallback","buildClassnames","imageStyles","PlaceholderImage","createPortal"],"mappings":"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"}
|
|
@@ -1,20 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
src: string;
|
|
5
|
-
alt?: string;
|
|
6
|
-
className?: string;
|
|
7
|
-
e2eClassName?: string;
|
|
8
|
-
width?: string;
|
|
9
|
-
height?: string;
|
|
10
|
-
previewWidth?: string;
|
|
11
|
-
previewHeight?: string;
|
|
12
|
-
previewPlacement?: Placement;
|
|
13
|
-
previewEnabled?: boolean;
|
|
14
|
-
placeholder?: React.ReactNode;
|
|
15
|
-
placeholderWidth?: string;
|
|
16
|
-
placeholderHeight?: string;
|
|
17
|
-
disablePlaceholder?: boolean;
|
|
18
|
-
};
|
|
19
|
-
export declare const Image: ({ src, alt, className, e2eClassName, width, height, previewWidth, previewHeight, previewPlacement, previewEnabled, placeholder, placeholderWidth, placeholderHeight, disablePlaceholder, }: ImageProps) => React.JSX.Element;
|
|
20
|
-
export {};
|
|
2
|
+
import { ImageProps } from './types';
|
|
3
|
+
export declare const Image: ({ src, alt, className, e2eClassName, width, height, radius, hasBorder, previewWidth, previewHeight, previewPlacement, previewEnabled, placeholder, placeholderWidth, placeholderHeight, disablePlaceholder, }: ImageProps) => React.JSX.Element;
|
|
@@ -4,17 +4,18 @@ import { createPortal } from 'react-dom';
|
|
|
4
4
|
import { PlaceholderImage } from './components/PlaceholderImage.js';
|
|
5
5
|
import { generateClassNames } from './utils.js';
|
|
6
6
|
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
7
|
+
import 'uid/secure';
|
|
7
8
|
import { createContextAwareUrl } from '../Anchor/utils/urlUtils.js';
|
|
8
9
|
import imageStyles from './Image.module.scss.js';
|
|
9
10
|
|
|
10
|
-
const Image = ({ src, alt = '', className, e2eClassName, width, height, previewWidth, previewHeight, previewPlacement = 'right', previewEnabled = false, placeholder, placeholderWidth, placeholderHeight, disablePlaceholder = false, }) => {
|
|
11
|
+
const Image = ({ src, alt = '', className, e2eClassName, width, height, radius = 'none', hasBorder = false, previewWidth, previewHeight, previewPlacement = 'right', previewEnabled = false, placeholder, placeholderWidth, placeholderHeight, disablePlaceholder = false, }) => {
|
|
11
12
|
const classNames = generateClassNames(className);
|
|
12
13
|
const e2eClassNames = generateClassNames(e2eClassName);
|
|
13
14
|
const contextAwareSrc = createContextAwareUrl(src);
|
|
14
15
|
const [isPreviewOpen, setIsPreviewOpen] = useState(false);
|
|
15
16
|
const [imageState, setImageState] = useState({ isLoaded: false, isError: false });
|
|
16
17
|
const [referenceElement, setReferenceElement] = React__default.useState(null);
|
|
17
|
-
const { refs, floatingStyles, placement: resolvedPlacement } = useFloating({
|
|
18
|
+
const { refs, floatingStyles, placement: resolvedPlacement, } = useFloating({
|
|
18
19
|
elements: { reference: referenceElement },
|
|
19
20
|
placement: previewPlacement,
|
|
20
21
|
middleware: [offset(12), flip(), shift({ limiter: limitShift() })],
|
|
@@ -25,27 +26,34 @@ const Image = ({ src, alt = '', className, e2eClassName, width, height, previewW
|
|
|
25
26
|
const onLoad = () => setImageState({ isLoaded: true, isError: false });
|
|
26
27
|
const onError = () => setImageState({ isLoaded: true, isError: true });
|
|
27
28
|
const isImageHidden = !imageState.isLoaded || imageState.isError;
|
|
28
|
-
return (React__default.createElement("div", { className: buildClassnames([
|
|
29
|
-
classNames === null || classNames === void 0 ? void 0 : classNames.container,
|
|
30
|
-
e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container,
|
|
31
|
-
className,
|
|
32
|
-
]) },
|
|
29
|
+
return (React__default.createElement("div", { className: buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container, className]) },
|
|
33
30
|
React__default.createElement("img", { src: contextAwareSrc, alt: alt, className: buildClassnames([
|
|
34
31
|
imageStyles.image,
|
|
32
|
+
imageStyles[`${radius}-radius`],
|
|
33
|
+
hasBorder && imageStyles.outline,
|
|
35
34
|
previewEnabled && imageStyles.previewEnabled,
|
|
36
35
|
classNames === null || classNames === void 0 ? void 0 : classNames.image,
|
|
37
36
|
e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.image,
|
|
38
37
|
]), width: width, height: height, onLoad: onLoad, onError: onError, onMouseEnter: openImagePreview, onMouseLeave: closeImagePreview, style: isImageHidden ? { display: 'none' } : {}, ref: setReferenceElement }),
|
|
39
38
|
!disablePlaceholder &&
|
|
40
39
|
isImageHidden &&
|
|
41
|
-
(placeholder || (React__default.createElement(PlaceholderImage, { className: buildClassnames([
|
|
40
|
+
(placeholder || (React__default.createElement(PlaceholderImage, { className: buildClassnames([
|
|
41
|
+
imageStyles[`${radius}-radius`],
|
|
42
|
+
hasBorder && imageStyles.outline,
|
|
43
|
+
classNames === null || classNames === void 0 ? void 0 : classNames.placeholder,
|
|
44
|
+
e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.placeholder,
|
|
45
|
+
]), width: placeholderWidth || width, height: placeholderHeight || height }))),
|
|
42
46
|
isPreviewOpen &&
|
|
43
47
|
createPortal(React__default.createElement("div", { ref: refs.setFloating, style: floatingStyles, "data-placement": resolvedPlacement, className: buildClassnames([
|
|
44
48
|
imageStyles.previewImageContainer,
|
|
45
49
|
classNames === null || classNames === void 0 ? void 0 : classNames.previewImageContainer,
|
|
46
50
|
e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.previewImageContainer,
|
|
47
51
|
]) },
|
|
48
|
-
React__default.createElement("img", { className:
|
|
52
|
+
React__default.createElement("img", { className: buildClassnames([
|
|
53
|
+
imageStyles.previewImage,
|
|
54
|
+
imageStyles[`${radius}-radius`],
|
|
55
|
+
hasBorder && imageStyles.outline,
|
|
56
|
+
]), src: contextAwareSrc, alt: "", width: previewWidth, height: previewHeight })), document.body)));
|
|
49
57
|
};
|
|
50
58
|
|
|
51
59
|
export { Image };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.js","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { useFloating, offset, flip, shift, limitShift, autoUpdate
|
|
1
|
+
{"version":3,"file":"Image.js","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { useFloating, offset, flip, shift, limitShift, autoUpdate } from '@floating-ui/react';\nimport { createPortal } from 'react-dom';\nimport { PlaceholderImage } from './components/PlaceholderImage';\n\nimport { generateClassNames } from './utils';\nimport { buildClassnames } from '../../utils';\nimport { createContextAwareUrl } from '../Anchor/utils/urlUtils';\nimport imageStyles from './Image.module.scss';\nimport { ImageProps } from './types';\n\nexport const Image = ({\n src,\n alt = '',\n className,\n e2eClassName,\n width,\n height,\n radius = 'none',\n hasBorder = false,\n previewWidth,\n previewHeight,\n previewPlacement = 'right',\n previewEnabled = false,\n placeholder,\n placeholderWidth,\n placeholderHeight,\n disablePlaceholder = false,\n}: ImageProps) => {\n const classNames = generateClassNames(className);\n const e2eClassNames = generateClassNames(e2eClassName);\n const contextAwareSrc = createContextAwareUrl(src);\n\n const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n const [imageState, setImageState] = useState({ isLoaded: false, isError: false });\n\n const [referenceElement, setReferenceElement] = React.useState<HTMLImageElement | null>(null);\n const {\n refs,\n floatingStyles,\n placement: resolvedPlacement,\n } = useFloating({\n elements: { reference: referenceElement },\n placement: previewPlacement,\n middleware: [offset(12), flip(), shift({ limiter: limitShift() })],\n whileElementsMounted: autoUpdate,\n });\n\n const openImagePreview = useCallback(\n () => (previewEnabled ? setIsPreviewOpen(true) : {}),\n [previewEnabled],\n );\n const closeImagePreview = useCallback(\n () => (previewEnabled ? setIsPreviewOpen(false) : {}),\n [previewEnabled],\n );\n\n const onLoad = () => setImageState({ isLoaded: true, isError: false });\n const onError = () => setImageState({ isLoaded: true, isError: true });\n\n const isImageHidden = !imageState.isLoaded || imageState.isError;\n\n return (\n <div className={buildClassnames([classNames?.container, e2eClassNames?.container, className])}>\n <img\n src={contextAwareSrc}\n alt={alt}\n className={buildClassnames([\n imageStyles.image,\n imageStyles[`${radius}-radius`],\n hasBorder && imageStyles.outline,\n previewEnabled && imageStyles.previewEnabled,\n classNames?.image,\n e2eClassNames?.image,\n ])}\n width={width}\n height={height}\n onLoad={onLoad}\n onError={onError}\n onMouseEnter={openImagePreview}\n onMouseLeave={closeImagePreview}\n style={isImageHidden ? { display: 'none' } : {}}\n ref={setReferenceElement}\n />\n {!disablePlaceholder &&\n isImageHidden &&\n (placeholder || (\n <PlaceholderImage\n className={buildClassnames([\n imageStyles[`${radius}-radius`],\n hasBorder && imageStyles.outline,\n classNames?.placeholder,\n e2eClassNames?.placeholder,\n ])}\n width={placeholderWidth || width}\n height={placeholderHeight || height}\n />\n ))}\n {isPreviewOpen &&\n createPortal(\n <div\n ref={refs.setFloating}\n style={floatingStyles}\n data-placement={resolvedPlacement}\n className={buildClassnames([\n imageStyles.previewImageContainer,\n classNames?.previewImageContainer,\n e2eClassNames?.previewImageContainer,\n ])}\n >\n <img\n className={buildClassnames([\n imageStyles.previewImage,\n imageStyles[`${radius}-radius`],\n hasBorder && imageStyles.outline,\n ])}\n src={contextAwareSrc}\n alt=\"\"\n width={previewWidth}\n height={previewHeight}\n />\n </div>,\n document.body,\n )}\n </div>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;MAWa,KAAK,GAAG,CAAC,EACpB,GAAG,EACH,GAAG,GAAG,EAAE,EACR,SAAS,EACT,YAAY,EACZ,KAAK,EACL,MAAM,EACN,MAAM,GAAG,MAAM,EACf,SAAS,GAAG,KAAK,EACjB,YAAY,EACZ,aAAa,EACb,gBAAgB,GAAG,OAAO,EAC1B,cAAc,GAAG,KAAK,EACtB,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,GAAG,KAAK,GACf,KAAI;AACf,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;AAChD,IAAA,MAAM,aAAa,GAAG,kBAAkB,CAAC,YAAY,CAAC;AACtD,IAAA,MAAM,eAAe,GAAG,qBAAqB,CAAC,GAAG,CAAC;IAElD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACzD,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AAEjF,IAAA,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAA0B,IAAI,CAAC;IAC7F,MAAM,EACJ,IAAI,EACJ,cAAc,EACd,SAAS,EAAE,iBAAiB,GAC7B,GAAG,WAAW,CAAC;AACd,QAAA,QAAQ,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE;AACzC,QAAA,SAAS,EAAE,gBAAgB;AAC3B,QAAA,UAAU,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC;AAClE,QAAA,oBAAoB,EAAE,UAAU;AACjC,KAAA,CAAC;IAEF,MAAM,gBAAgB,GAAG,WAAW,CAClC,OAAO,cAAc,GAAG,gBAAgB,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,EACpD,CAAC,cAAc,CAAC,CACjB;IACD,MAAM,iBAAiB,GAAG,WAAW,CACnC,OAAO,cAAc,GAAG,gBAAgB,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,EACrD,CAAC,cAAc,CAAC,CACjB;AAED,IAAA,MAAM,MAAM,GAAG,MAAM,aAAa,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AACtE,IAAA,MAAM,OAAO,GAAG,MAAM,aAAa,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IAEtE,MAAM,aAAa,GAAG,CAAC,UAAU,CAAC,QAAQ,IAAI,UAAU,CAAC,OAAO;IAEhE,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,eAAe,CAAC,CAAC,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,SAAS,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,SAAS,EAAE,SAAS,CAAC,CAAC,EAAA;QAC3FA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,eAAe,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,WAAW,CAAC,KAAK;AACjB,gBAAA,WAAW,CAAC,CAAA,EAAG,MAAM,CAAA,OAAA,CAAS,CAAC;gBAC/B,SAAS,IAAI,WAAW,CAAC,OAAO;gBAChC,cAAc,IAAI,WAAW,CAAC,cAAc;AAC5C,gBAAA,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,KAAK;AACjB,gBAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK;aACrB,CAAC,EACF,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,iBAAiB,EAC/B,KAAK,EAAE,aAAa,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,EAC/C,GAAG,EAAE,mBAAmB,EAAA,CACxB;AACD,QAAA,CAAC,kBAAkB;YAClB,aAAa;aACZ,WAAW,KACVA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EACf,SAAS,EAAE,eAAe,CAAC;AACzB,oBAAA,WAAW,CAAC,CAAA,EAAG,MAAM,CAAA,OAAA,CAAS,CAAC;oBAC/B,SAAS,IAAI,WAAW,CAAC,OAAO;AAChC,oBAAA,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,WAAW;AACvB,oBAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,WAAW;AAC3B,iBAAA,CAAC,EACF,KAAK,EAAE,gBAAgB,IAAI,KAAK,EAChC,MAAM,EAAE,iBAAiB,IAAI,MAAM,EAAA,CACnC,CACH,CAAC;QACH,aAAa;AACZ,YAAA,YAAY,CACVA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE,cAAc,EAAA,gBAAA,EACL,iBAAiB,EACjC,SAAS,EAAE,eAAe,CAAC;AACzB,oBAAA,WAAW,CAAC,qBAAqB;AACjC,oBAAA,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,qBAAqB;AACjC,oBAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,qBAAqB;iBACrC,CAAC,EAAA;gBAEFA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,wBAAA,WAAW,CAAC,YAAY;AACxB,wBAAA,WAAW,CAAC,CAAA,EAAG,MAAM,CAAA,OAAA,CAAS,CAAC;wBAC/B,SAAS,IAAI,WAAW,CAAC,OAAO;qBACjC,CAAC,EACF,GAAG,EAAE,eAAe,EACpB,GAAG,EAAC,EAAE,EACN,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,aAAa,EAAA,CACrB,CACE,EACN,QAAQ,CAAC,IAAI,CACd,CACC;AAEV;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var imageStyles = {"image":"
|
|
5
|
+
___$insertStyle("._image_1v0xt_1 {\n box-sizing: border-box;\n cursor: default;\n}\n\n._none-radius_1v0xt_6 {\n border-radius: 0;\n}\n\n._base-radius_1v0xt_10 {\n border-radius: var(--radius-base);\n}\n\n._md-radius_1v0xt_14 {\n border-radius: var(--radius-md);\n}\n\n._outline_1v0xt_18 {\n border: var(--sizes-line) solid var(--colors-neutral-ink-lightest);\n}\n\n._previewEnabled_1v0xt_22 {\n cursor: zoom-in;\n}\n\n._previewImageContainer_1v0xt_26 {\n z-index: 10;\n background-color: transparent;\n}\n\n._previewImage_1v0xt_26 {\n box-shadow: 0 4px 12px rgba(27, 33, 38, 0.2);\n}");
|
|
6
|
+
var imageStyles = {"image":"_image_1v0xt_1","none-radius":"_none-radius_1v0xt_6","base-radius":"_base-radius_1v0xt_10","md-radius":"_md-radius_1v0xt_14","outline":"_outline_1v0xt_18","previewEnabled":"_previewEnabled_1v0xt_22","previewImageContainer":"_previewImageContainer_1v0xt_26","previewImage":"_previewImage_1v0xt_26"};
|
|
7
7
|
|
|
8
8
|
module.exports = imageStyles;
|
|
9
9
|
//# sourceMappingURL=Image.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.module.scss.cjs","sources":["../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n box-sizing: border-box;\n cursor: default;\n}\n\n.previewEnabled {\n cursor: zoom-in;\n}\n\n.previewImageContainer {\n z-index: 10;\n background-color: transparent;\n}\n\n.previewImage {\n box-shadow: 0 4px 12px rgba(27, 33, 38, 0.2);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"Image.module.scss.cjs","sources":["../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n box-sizing: border-box;\n cursor: default;\n}\n\n.none-radius {\n border-radius: 0;\n}\n\n.base-radius {\n border-radius: var(--radius-base);\n}\n\n.md-radius {\n border-radius: var(--radius-md);\n}\n\n.outline {\n border: var(--sizes-line) solid var(--colors-neutral-ink-lightest);\n}\n\n.previewEnabled {\n cursor: zoom-in;\n}\n\n.previewImageContainer {\n z-index: 10;\n background-color: transparent;\n}\n\n.previewImage {\n box-shadow: 0 4px 12px rgba(27, 33, 38, 0.2);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,kkBAAA;AACA,kBAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var imageStyles = {"image":"
|
|
3
|
+
insertStyle("._image_1v0xt_1 {\n box-sizing: border-box;\n cursor: default;\n}\n\n._none-radius_1v0xt_6 {\n border-radius: 0;\n}\n\n._base-radius_1v0xt_10 {\n border-radius: var(--radius-base);\n}\n\n._md-radius_1v0xt_14 {\n border-radius: var(--radius-md);\n}\n\n._outline_1v0xt_18 {\n border: var(--sizes-line) solid var(--colors-neutral-ink-lightest);\n}\n\n._previewEnabled_1v0xt_22 {\n cursor: zoom-in;\n}\n\n._previewImageContainer_1v0xt_26 {\n z-index: 10;\n background-color: transparent;\n}\n\n._previewImage_1v0xt_26 {\n box-shadow: 0 4px 12px rgba(27, 33, 38, 0.2);\n}");
|
|
4
|
+
var imageStyles = {"image":"_image_1v0xt_1","none-radius":"_none-radius_1v0xt_6","base-radius":"_base-radius_1v0xt_10","md-radius":"_md-radius_1v0xt_14","outline":"_outline_1v0xt_18","previewEnabled":"_previewEnabled_1v0xt_22","previewImageContainer":"_previewImageContainer_1v0xt_26","previewImage":"_previewImage_1v0xt_26"};
|
|
5
5
|
|
|
6
6
|
export { imageStyles as default };
|
|
7
7
|
//# sourceMappingURL=Image.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.module.scss.js","sources":["../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n box-sizing: border-box;\n cursor: default;\n}\n\n.previewEnabled {\n cursor: zoom-in;\n}\n\n.previewImageContainer {\n z-index: 10;\n background-color: transparent;\n}\n\n.previewImage {\n box-shadow: 0 4px 12px rgba(27, 33, 38, 0.2);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"Image.module.scss.js","sources":["../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n box-sizing: border-box;\n cursor: default;\n}\n\n.none-radius {\n border-radius: 0;\n}\n\n.base-radius {\n border-radius: var(--radius-base);\n}\n\n.md-radius {\n border-radius: var(--radius-md);\n}\n\n.outline {\n border: var(--sizes-line) solid var(--colors-neutral-ink-lightest);\n}\n\n.previewEnabled {\n cursor: zoom-in;\n}\n\n.previewImageContainer {\n z-index: 10;\n background-color: transparent;\n}\n\n.previewImage {\n box-shadow: 0 4px 12px rgba(27, 33, 38, 0.2);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,kkBAAA;AACA,kBAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}
|
|
@@ -1,6 +1,26 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Placement } from '@floating-ui/react';
|
|
1
3
|
export type ClassNamesReturnPayload = {
|
|
2
4
|
container?: string;
|
|
3
5
|
image?: string;
|
|
4
6
|
placeholder?: string;
|
|
5
7
|
previewImageContainer?: string;
|
|
6
8
|
};
|
|
9
|
+
export type ImageProps = {
|
|
10
|
+
src: string;
|
|
11
|
+
alt?: string;
|
|
12
|
+
className?: string;
|
|
13
|
+
e2eClassName?: string;
|
|
14
|
+
width?: string;
|
|
15
|
+
height?: string;
|
|
16
|
+
radius?: 'none' | 'base' | 'md';
|
|
17
|
+
hasBorder?: boolean;
|
|
18
|
+
previewWidth?: string;
|
|
19
|
+
previewHeight?: string;
|
|
20
|
+
previewPlacement?: Placement;
|
|
21
|
+
previewEnabled?: boolean;
|
|
22
|
+
placeholder?: React.ReactNode;
|
|
23
|
+
placeholderWidth?: string;
|
|
24
|
+
placeholderHeight?: string;
|
|
25
|
+
disablePlaceholder?: boolean;
|
|
26
|
+
};
|
|
@@ -34,6 +34,7 @@ export { FeatureBanner, type FeatureBannerProps } from './FeatureBanner';
|
|
|
34
34
|
export { FilterTag } from './FilterTag';
|
|
35
35
|
export { Grid } from './Grid';
|
|
36
36
|
export { Image } from './Image';
|
|
37
|
+
export type { ImageProps } from './Image';
|
|
37
38
|
export { InputAffix } from './InputAffix';
|
|
38
39
|
export { InputGroup, type InputGroupProps } from './InputGroup';
|
|
39
40
|
export { LegacyDataTable } from './LegacyDataTable';
|
|
@@ -3,11 +3,10 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var FlexCol = require('../../components/Flex/FlexCol/FlexCol.cjs');
|
|
5
5
|
var FlexRow = require('../../components/Flex/FlexRow/FlexRow.cjs');
|
|
6
|
+
var MiniAlert = require('../../components/Alerts/MiniAlert/MiniAlert.cjs');
|
|
6
7
|
var Text = require('../../components/Text/Text.cjs');
|
|
7
8
|
var useId = require('../../hooks/useId.cjs');
|
|
8
|
-
var CriticalIcon = require('../../icons/design-system/components/CriticalIcon.cjs');
|
|
9
9
|
var HelpIcon = require('../../icons/design-system/components/HelpIcon.cjs');
|
|
10
|
-
var LockIcon = require('../../icons/design-system/components/LockIcon.cjs');
|
|
11
10
|
var index = require('../../theme/index.cjs');
|
|
12
11
|
var BlockTooltip = require('./BlockTooltip.cjs');
|
|
13
12
|
var withLabels_module = require('./withLabels.module.scss.cjs');
|
|
@@ -29,12 +28,11 @@ const withLabels = (Component) => {
|
|
|
29
28
|
React__default.default.createElement(HelpIcon.ReactComponent, { "data-testid": "tooltip-help", width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.neutral.ink.light })))),
|
|
30
29
|
hint && (React__default.default.createElement(Text.Text, { variant: "hintText", as: "span", className: withLabels_module.hint, id: `${componentId}-hint` }, hint)),
|
|
31
30
|
React__default.default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, disabledMessage: disabledMessage, ...otherProps }),
|
|
32
|
-
error && (React__default.default.createElement(
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
React__default.default.createElement(Text.Text, { variant: "bodyBold", as: "span" }, disabledMessage)))));
|
|
31
|
+
error && (React__default.default.createElement(MiniAlert.MiniAlert, { id: `${componentId}-error`, variant: "error", isBold: false, role: "alert",
|
|
32
|
+
// Overcomplicated but title only accepts string & titleSlot skips <Text> wrapper (wrong font size).
|
|
33
|
+
// Use both with typeof to get correct sizing for strings and support JSX errors.
|
|
34
|
+
title: typeof error === 'string' ? error : undefined, titleSlot: typeof error !== 'string' ? error : undefined })),
|
|
35
|
+
disabledMessage && (React__default.default.createElement(MiniAlert.MiniAlert, { id: `${componentId}-disabled`, isBold: false, title: typeof disabledMessage === 'string' ? disabledMessage : undefined, titleSlot: typeof disabledMessage !== 'string' ? disabledMessage : undefined }))));
|
|
38
36
|
});
|
|
39
37
|
ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;
|
|
40
38
|
return ComponentWithLabels;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport {
|
|
1
|
+
{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { MiniAlert } from '../../components/Alerts/MiniAlert';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n id?: string;\n label?: ReactNode;\n hint?: ReactNode;\n error?: ReactNode;\n disabledMessage?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n const componentId = useId({ id, prefix: Component.name });\n\n if (!label)\n return (\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n );\n\n return (\n <FlexCol className={styles.rootStack}>\n <FlexRow>\n <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n {label}\n </Text>\n {(tooltip || tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n </BlockTooltip>\n )}\n </FlexRow>\n {hint && (\n <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n {hint}\n </Text>\n )}\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n {error && (\n <MiniAlert\n id={`${componentId}-error`}\n variant=\"error\"\n isBold={false}\n role=\"alert\"\n // Overcomplicated but title only accepts string & titleSlot skips <Text> wrapper (wrong font size).\n // Use both with typeof to get correct sizing for strings and support JSX errors.\n title={typeof error === 'string' ? error : undefined}\n titleSlot={typeof error !== 'string' ? error : undefined}\n />\n )}\n {disabledMessage && (\n <MiniAlert\n id={`${componentId}-disabled`}\n isBold={false}\n title={typeof disabledMessage === 'string' ? disabledMessage : undefined}\n titleSlot={typeof disabledMessage !== 'string' ? disabledMessage : undefined}\n />\n )}\n </FlexCol>\n );\n },\n );\n\n ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n return ComponentWithLabels;\n};\n"],"names":["forwardRef","useId","React","FlexCol","styles","FlexRow","Text","BlockTooltip","HelpIcon","theme","MiniAlert"],"mappings":"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"}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import React__default, { forwardRef } from 'react';
|
|
2
2
|
import { FlexCol } from '../../components/Flex/FlexCol/FlexCol.js';
|
|
3
3
|
import { FlexRow } from '../../components/Flex/FlexRow/FlexRow.js';
|
|
4
|
+
import { MiniAlert } from '../../components/Alerts/MiniAlert/MiniAlert.js';
|
|
4
5
|
import { Text } from '../../components/Text/Text.js';
|
|
5
6
|
import { useId } from '../../hooks/useId.js';
|
|
6
|
-
import { ReactComponent as CriticalIcon } from '../../icons/design-system/components/CriticalIcon.js';
|
|
7
7
|
import { ReactComponent as HelpIcon } from '../../icons/design-system/components/HelpIcon.js';
|
|
8
|
-
import { ReactComponent as LockIcon } from '../../icons/design-system/components/LockIcon.js';
|
|
9
8
|
import { theme } from '../../theme/index.js';
|
|
10
9
|
import { BlockTooltip } from './BlockTooltip.js';
|
|
11
10
|
import labelStyles from './withLabels.module.scss.js';
|
|
@@ -23,12 +22,11 @@ const withLabels = (Component) => {
|
|
|
23
22
|
React__default.createElement(HelpIcon, { "data-testid": "tooltip-help", width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.neutral.ink.light })))),
|
|
24
23
|
hint && (React__default.createElement(Text, { variant: "hintText", as: "span", className: labelStyles.hint, id: `${componentId}-hint` }, hint)),
|
|
25
24
|
React__default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, disabledMessage: disabledMessage, ...otherProps }),
|
|
26
|
-
error && (React__default.createElement(
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
React__default.createElement(Text, { variant: "bodyBold", as: "span" }, disabledMessage)))));
|
|
25
|
+
error && (React__default.createElement(MiniAlert, { id: `${componentId}-error`, variant: "error", isBold: false, role: "alert",
|
|
26
|
+
// Overcomplicated but title only accepts string & titleSlot skips <Text> wrapper (wrong font size).
|
|
27
|
+
// Use both with typeof to get correct sizing for strings and support JSX errors.
|
|
28
|
+
title: typeof error === 'string' ? error : undefined, titleSlot: typeof error !== 'string' ? error : undefined })),
|
|
29
|
+
disabledMessage && (React__default.createElement(MiniAlert, { id: `${componentId}-disabled`, isBold: false, title: typeof disabledMessage === 'string' ? disabledMessage : undefined, titleSlot: typeof disabledMessage !== 'string' ? disabledMessage : undefined }))));
|
|
32
30
|
});
|
|
33
31
|
ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;
|
|
34
32
|
return ComponentWithLabels;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport {
|
|
1
|
+
{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { MiniAlert } from '../../components/Alerts/MiniAlert';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n id?: string;\n label?: ReactNode;\n hint?: ReactNode;\n error?: ReactNode;\n disabledMessage?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n const componentId = useId({ id, prefix: Component.name });\n\n if (!label)\n return (\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n );\n\n return (\n <FlexCol className={styles.rootStack}>\n <FlexRow>\n <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n {label}\n </Text>\n {(tooltip || tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n </BlockTooltip>\n )}\n </FlexRow>\n {hint && (\n <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n {hint}\n </Text>\n )}\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n {error && (\n <MiniAlert\n id={`${componentId}-error`}\n variant=\"error\"\n isBold={false}\n role=\"alert\"\n // Overcomplicated but title only accepts string & titleSlot skips <Text> wrapper (wrong font size).\n // Use both with typeof to get correct sizing for strings and support JSX errors.\n title={typeof error === 'string' ? error : undefined}\n titleSlot={typeof error !== 'string' ? error : undefined}\n />\n )}\n {disabledMessage && (\n <MiniAlert\n id={`${componentId}-disabled`}\n isBold={false}\n title={typeof disabledMessage === 'string' ? disabledMessage : undefined}\n titleSlot={typeof disabledMessage !== 'string' ? disabledMessage : undefined}\n />\n )}\n </FlexCol>\n );\n },\n );\n\n ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n return ComponentWithLabels;\n};\n"],"names":["React","styles"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veeqo/ui",
|
|
3
|
-
"version": "15.
|
|
3
|
+
"version": "15.5.0",
|
|
4
4
|
"description": "New optimised component library for Veeqo.",
|
|
5
5
|
"author": "Robert Wealthall",
|
|
6
6
|
"license": "ISC",
|
|
@@ -35,8 +35,7 @@
|
|
|
35
35
|
"lint": "eslint --quiet src/* --ext .ts,.tsx && stylelint 'src/**/*.scss'",
|
|
36
36
|
"lint:fix": "eslint --quiet src/* --ext .ts,.tsx --fix && stylelint 'src/**/*.scss' --fix",
|
|
37
37
|
"emit-declarations": "echo 'Emit declarations is no longer required for buildstep. Deprecated.'",
|
|
38
|
-
"
|
|
39
|
-
"prepublishOnly": "npm run test && npm run build",
|
|
38
|
+
"prepublishOnly": "node scripts/internal-publish-rename.cjs && npm run test && npm run build",
|
|
40
39
|
"patch": "npm version patch && npm run changelog:update",
|
|
41
40
|
"minor": "npm version minor && npm run changelog:update",
|
|
42
41
|
"major": "npm version major && npm run changelog:update",
|
|
@@ -54,7 +53,7 @@
|
|
|
54
53
|
"issuePattern": "VQCL-[0-9]+"
|
|
55
54
|
},
|
|
56
55
|
"npm-pretty-much": {
|
|
57
|
-
"allowUnsafeName": "Renamed to @amzn/veeqo-ui via
|
|
56
|
+
"allowUnsafeName": "Renamed to @amzn/veeqo-ui via prepublishOnly for internal builds; published externally as @veeqo/ui on npmjs.com"
|
|
58
57
|
},
|
|
59
58
|
"devDependencies": {
|
|
60
59
|
"@babel/eslint-parser": "^7.22.15",
|