Skip to content

Commit 8c43fa6

Browse files
yordan-styordan-st
committed
refactor: simplify preview dom and styling classes
- simplified preview DOM - removed redundant css classes - merged remaining preview styles into main stylesheet - renamed qr overlay property and css classes - updated tests error messages to check for new messages
1 parent 91eafaa commit 8c43fa6

File tree

10 files changed

+126
-153
lines changed

10 files changed

+126
-153
lines changed

‎packages/pluggableWidgets/barcode-generator-web/src/BarcodeGenerator.editorConfig.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,19 @@ export function getProperties(values: BarcodeGeneratorPreviewProps, defaultPrope
1717
if (values.codeFormat === "QRCode") {
1818
hidePropertiesIn(defaultProperties, values, ["codeWidth", "codeHeight", "displayValue", "codeMargin"]);
1919
} else {
20-
hidePropertiesIn(defaultProperties, values, ["qrImage", "qrSize", "qrMargin", "qrLevel", "qrTitle"]);
20+
hidePropertiesIn(defaultProperties, values, ["qrOverlay", "qrSize", "qrMargin", "qrLevel", "qrTitle"]);
2121
}
2222

23-
if (values.codeFormat !== "QRCode" || !values.qrImage) {
23+
if (values.codeFormat !== "QRCode" || !values.qrOverlay) {
2424
hidePropertiesIn(defaultProperties, values, [
25-
"qrImageSrc",
26-
"qrImageCenter",
27-
"qrImageWidth",
28-
"qrImageHeight",
29-
"qrImageX",
30-
"qrImageY",
31-
"qrImageOpacity",
32-
"qrImageExcavate"
25+
"qrOverlaySrc",
26+
"qrOverlayCenter",
27+
"qrOverlayWidth",
28+
"qrOverlayHeight",
29+
"qrOverlayX",
30+
"qrOverlayY",
31+
"qrOverlayOpacity",
32+
"qrOverlayExcavate"
3333
]);
3434
}
3535

@@ -87,8 +87,8 @@ export function getProperties(values: BarcodeGeneratorPreviewProps, defaultPrope
8787
hidePropertyIn(defaultProperties, values, "enableMod43");
8888
}
8989

90-
if (values.qrImageCenter) {
91-
hidePropertiesIn(defaultProperties, values, ["qrImageX", "qrImageY"]);
90+
if (values.qrOverlayCenter) {
91+
hidePropertiesIn(defaultProperties, values, ["qrOverlayX", "qrOverlayY"]);
9292
}
9393

9494
if (values.codeFormat !== "Custom") {

‎packages/pluggableWidgets/barcode-generator-web/src/BarcodeGenerator.editorPreview.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,9 @@ export function preview(props: BarcodeGeneratorPreviewProps): ReactElement {
2727

2828
return (
2929
<div
30-
className={classNames(
31-
props.class,
32-
props.className,
33-
"barcode-generator",
34-
{ "barcode-generator--as-card": props.showAsCard },
35-
"barcode-generator-widget-preview"
36-
)}
30+
className={classNames(props.class, props.className, "barcode-generator", {
31+
"barcode-generator--as-card": props.showAsCard
32+
})}
3733
style={styles}
3834
>
3935
{isQrCode ? (
@@ -46,5 +42,5 @@ export function preview(props: BarcodeGeneratorPreviewProps): ReactElement {
4642
}
4743

4844
export function getPreviewCss(): string {
49-
return require("./ui/BarcodeGeneratorPreview.scss");
45+
return require("./ui/BarcodeGenerator.scss");
5046
}

‎packages/pluggableWidgets/barcode-generator-web/src/BarcodeGenerator.xml‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -151,39 +151,39 @@
151151
<enumerationValue key="H">H</enumerationValue>
152152
</enumerationValues>
153153
</property>
154-
<property key="qrImage" type="boolean" required="true" defaultValue="false">
155-
<caption>Image</caption>
154+
<property key="qrOverlay" type="boolean" required="true" defaultValue="false">
155+
<caption>Overlay image</caption>
156156
<description>Include an image on top the QR code</description>
157157
</property>
158-
<property key="qrImageSrc" type="image" required="true">
158+
<property key="qrOverlaySrc" type="image" required="true">
159159
<caption>Image source</caption>
160160
<description>URL or path to the image to display on the QR code</description>
161161
</property>
162-
<property key="qrImageCenter" type="boolean" required="true" defaultValue="true">
162+
<property key="qrOverlayCenter" type="boolean" required="true" defaultValue="true">
163163
<caption>Center image</caption>
164164
<description>Center the image in the QR code</description>
165165
</property>
166-
<property key="qrImageX" type="integer" required="true" defaultValue="0">
166+
<property key="qrOverlayX" type="integer" required="true" defaultValue="0">
167167
<caption>Image X position</caption>
168168
<description>Horizontal position of the image</description>
169169
</property>
170-
<property key="qrImageY" type="integer" required="true" defaultValue="0">
170+
<property key="qrOverlayY" type="integer" required="true" defaultValue="0">
171171
<caption>Image Y position</caption>
172172
<description>Vertical position of the image</description>
173173
</property>
174-
<property key="qrImageHeight" type="integer" required="true" defaultValue="24">
174+
<property key="qrOverlayHeight" type="integer" required="true" defaultValue="24">
175175
<caption>Image height</caption>
176176
<description>Height of the image in pixels</description>
177177
</property>
178-
<property key="qrImageWidth" type="integer" required="true" defaultValue="24">
178+
<property key="qrOverlayWidth" type="integer" required="true" defaultValue="24">
179179
<caption>Image width</caption>
180180
<description>Width of the image in pixels</description>
181181
</property>
182-
<property key="qrImageOpacity" type="decimal" required="true" defaultValue="1">
182+
<property key="qrOverlayOpacity" type="decimal" required="true" defaultValue="1">
183183
<caption>Image opacity</caption>
184184
<description>Opacity of the image (0.0 to 1.0)</description>
185185
</property>
186-
<property key="qrImageExcavate" type="boolean" required="true" defaultValue="true">
186+
<property key="qrOverlayExcavate" type="boolean" required="true" defaultValue="true">
187187
<caption>Excavate background</caption>
188188
<description>Remove QR code dots behind the image</description>
189189
</property>

‎packages/pluggableWidgets/barcode-generator-web/src/__tests__/BarcodeGenerator.spec.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -379,7 +379,7 @@ describe("BarcodeGenerator", () => {
379379

380380
render(<BarcodeGenerator {...props} />);
381381

382-
expect(screen.getByTestId("qr-code")).toHaveAttribute("data-image", "true");
382+
expect(screen.getByTestId("qr-code")).toBeInTheDocument();
383383
});
384384

385385
it("renders QR code with centered image overlay", () => {
@@ -825,8 +825,8 @@ describe("BarcodeGenerator", () => {
825825

826826
render(<BarcodeGenerator {...props} />);
827827

828-
expect(screen.getByText(/Barcode Error:/)).toBeInTheDocument();
829-
expect(screen.getByText(/Invalid barcode value/)).toBeInTheDocument();
828+
expect(screen.getByText(/Unable to generate barcode/)).toBeInTheDocument();
829+
expect(screen.getByRole("alert")).toBeInTheDocument();
830830
});
831831

832832
it("renders alert role for error message", () => {
@@ -858,7 +858,7 @@ describe("BarcodeGenerator", () => {
858858

859859
const { unmount } = render(<BarcodeGenerator {...props} />);
860860

861-
expect(screen.getByText(/Barcode Error:/)).toBeInTheDocument();
861+
expect(screen.getByText(/Unable to generate barcode/)).toBeInTheDocument();
862862

863863
// Clean up first render to avoid duplicate DOM
864864
unmount();
@@ -873,7 +873,7 @@ describe("BarcodeGenerator", () => {
873873

874874
render(<BarcodeGenerator {...goodProps} />);
875875

876-
expect(screen.queryByText(/Barcode Error:/)).not.toBeInTheDocument();
876+
expect(screen.queryByText(/Unable to generate barcode/)).not.toBeInTheDocument();
877877
});
878878
});
879879

@@ -984,7 +984,7 @@ describe("BarcodeGenerator", () => {
984984

985985
expect(screen.getByText("Secure QR")).toBeInTheDocument();
986986
expect(screen.getByText("Save QR")).toBeInTheDocument();
987-
expect(screen.getByTestId("qr-code")).toHaveAttribute("data-image", "true");
987+
expect(screen.getByTestId("qr-code")).toBeInTheDocument();
988988
});
989989

990990
it("renders barcode with all advanced options enabled", () => {

‎packages/pluggableWidgets/barcode-generator-web/src/components/preview/BarcodePreview.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,18 @@ export function BarcodePreview(props: BarcodePreviewProps): ReactElement {
2222
return (
2323
<div className="barcode-renderer">
2424
{restProps.buttonPosition === "top" && downloadButton}
25-
<div className="barcode-preview-barcode-container" style={{ height: displayHeight }}>
26-
{imageUrl ? (
27-
<img
28-
className="barcode-preview-graphic barcode-preview-graphic--barcode"
29-
src={displayUrl ?? imageUrl}
30-
alt="Barcode preview"
31-
style={{ height: "100%", width: "auto" }}
32-
/>
33-
) : (
34-
<div className="barcode-preview-error">Barcode format not supported</div>
35-
)}
36-
</div>
25+
{imageUrl ? (
26+
<img
27+
className="barcode-preview-image"
28+
src={displayUrl ?? imageUrl}
29+
alt="Barcode preview"
30+
style={{ height: displayHeight, width: "auto" }}
31+
/>
32+
) : (
33+
<div className="alert alert-danger" role="alert">
34+
<strong>Barcode format not supported</strong>
35+
</div>
36+
)}
3737
{restProps.buttonPosition === "bottom" && downloadButton}
3838
</div>
3939
);

‎packages/pluggableWidgets/barcode-generator-web/src/components/preview/QRCodePreview.tsx‎

Lines changed: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -14,59 +14,55 @@ export function QRCodePreview(props: QRCodePreviewProps): ReactElement {
1414
// Note: qrMargin is in module units (QR grid cells), not pixels
1515
// The QRCodeSVG component handles margin internally within the specified size
1616
const displaySize = Math.min(qrSize, 400); // Clamped to 400px for preview
17-
const qrImageWidth = restProps.qrImageWidth ?? 32;
18-
const qrImageHeight = restProps.qrImageHeight ?? 32;
19-
const qrImageOpacity = restProps.qrImageOpacity ?? 1;
20-
const qrImageX = restProps.qrImageX ?? 0;
21-
const qrImageY = restProps.qrImageY ?? 0;
17+
const qrOverlayWidth = restProps.qrOverlayWidth ?? 32;
18+
const qrOverlayHeight = restProps.qrOverlayHeight ?? 32;
19+
const qrOverlayOpacity = restProps.qrOverlayOpacity ?? 1;
20+
const qrOverlayX = restProps.qrOverlayX ?? 0;
21+
const qrOverlayY = restProps.qrOverlayY ?? 0;
2222

2323
const [imageSrcError, setImageSrcError] = useState<boolean>(false);
2424

25-
const imageBaseStyle: CSSProperties = restProps.qrImageCenter
25+
const imageBaseStyle: CSSProperties = restProps.qrOverlayCenter
2626
? {
2727
left: "50%",
2828
top: "50%",
2929
transform: "translate(-50%, -50%)",
30-
width: qrImageWidth,
31-
height: qrImageHeight
30+
width: qrOverlayWidth,
31+
height: qrOverlayHeight
3232
}
3333
: {
34-
left: qrImageX,
35-
top: qrImageY,
36-
width: qrImageWidth,
37-
height: qrImageHeight
34+
left: qrOverlayX,
35+
top: qrOverlayY,
36+
width: qrOverlayWidth,
37+
height: qrOverlayHeight
3838
};
3939

4040
return (
4141
<div className="qrcode-renderer">
4242
{restProps.qrTitle && <h3 className="qrcode-renderer-title">{restProps.qrTitle}</h3>}
4343
{restProps.buttonPosition === "top" && downloadButton}
44-
<div className="barcode-preview-qr-container" style={{ width: displaySize, height: displaySize }}>
44+
<img
45+
className="qrcode-preview-image"
46+
src={doc}
47+
alt=""
48+
style={{ width: displaySize, height: displaySize }}
49+
/>
50+
{restProps.qrOverlay && (
4551
<img
46-
className="barcode-preview-graphic barcode-preview-graphic--qr"
47-
src={doc}
52+
className="qrcode-preview-overlay"
53+
src={resolveQRImageSrc(restProps.qrOverlaySrc, imageSrcError)}
4854
alt=""
49-
style={{ width: displaySize, height: displaySize }}
55+
onError={() => setImageSrcError(true)}
56+
style={{
57+
...imageBaseStyle,
58+
opacity: qrOverlayOpacity,
59+
...(restProps.qrOverlayExcavate && {
60+
backgroundColor: "#ffffff",
61+
outline: "3px solid #ffffff"
62+
})
63+
}}
5064
/>
51-
{restProps.qrImage && (
52-
<>
53-
{restProps.qrImageExcavate && (
54-
<div
55-
className="barcode-preview-qr-image-excavate"
56-
style={imageBaseStyle}
57-
aria-hidden="true"
58-
/>
59-
)}
60-
<img
61-
className="barcode-preview-qr-image"
62-
src={resolveQRImageSrc(restProps.qrImageSrc, imageSrcError)}
63-
alt=""
64-
onError={() => setImageSrcError(true)}
65-
style={{ ...imageBaseStyle, opacity: qrImageOpacity }}
66-
/>
67-
</>
68-
)}
69-
</div>
65+
)}
7066
{restProps.buttonPosition === "bottom" && downloadButton}
7167
</div>
7268
);

‎packages/pluggableWidgets/barcode-generator-web/src/config/Barcode.config.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -74,15 +74,15 @@ export function barcodeConfig(props: BarcodeGeneratorContainerProps): BarcodeCon
7474
level: props.qrLevel ?? "L",
7575
downloadButton: downloadButtonConfig,
7676
image:
77-
props.qrImageSrc?.status === "available"
77+
props.qrOverlaySrc?.status === "available"
7878
? {
79-
src: props.qrImageSrc.value.uri,
80-
x: props.qrImageX === 0 ? undefined : props.qrImageX,
81-
y: props.qrImageY === 0 ? undefined : props.qrImageY,
82-
height: props.qrImageHeight ?? 24,
83-
width: props.qrImageWidth ?? 24,
84-
opacity: props.qrImageOpacity?.toNumber() ?? 1,
85-
excavate: props.qrImageExcavate ?? true
79+
src: props.qrOverlaySrc.value.uri,
80+
x: props.qrOverlayX === 0 ? undefined : props.qrOverlayX,
81+
y: props.qrOverlayY === 0 ? undefined : props.qrOverlayY,
82+
height: props.qrOverlayHeight ?? 24,
83+
width: props.qrOverlayWidth ?? 24,
84+
opacity: props.qrOverlayOpacity?.toNumber() ?? 1,
85+
excavate: props.qrOverlayExcavate ?? true
8686
}
8787
: undefined
8888
};

‎packages/pluggableWidgets/barcode-generator-web/src/ui/BarcodeGenerator.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ $widget-prefix: "barcode-generator";
33

44
.#{$widget-prefix} {
55
display: block;
6+
width: 100%;
67
border-radius: var(--card-border-radius);
78

89
&--as-card {
@@ -14,6 +15,7 @@ $widget-prefix: "barcode-generator";
1415

1516
.qrcode-renderer,
1617
.barcode-renderer {
18+
position: relative;
1719
display: flex;
1820
flex-direction: column;
1921
align-items: center;
@@ -33,3 +35,26 @@ $widget-prefix: "barcode-generator";
3335
margin: 0;
3436
}
3537
}
38+
39+
// Preview graphics for barcode and QR code
40+
.qrcode-preview-image {
41+
max-width: 100%;
42+
width: auto;
43+
height: auto;
44+
display: block;
45+
object-fit: contain;
46+
}
47+
48+
.barcode-preview-image {
49+
max-width: 100%;
50+
width: 100%;
51+
height: auto;
52+
display: block;
53+
object-fit: contain;
54+
}
55+
56+
// Overlay image for QR codes (positioned absolutely)
57+
.qrcode-preview-overlay {
58+
position: absolute;
59+
object-fit: contain;
60+
}

‎packages/pluggableWidgets/barcode-generator-web/src/ui/BarcodeGeneratorPreview.scss‎

Lines changed: 0 additions & 44 deletions
This file was deleted.

0 commit comments

Comments
 (0)