@veeqo/ui 15.4.0 → 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/package.json +1 -1
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":"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"}
|
|
@@ -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';
|