@usertour/helpers 0.0.60 → 0.0.61
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/__tests__/convert-settings.test.cjs +172 -1
- package/dist/__tests__/convert-settings.test.js +121 -1
- package/dist/{chunk-77ALLS35.js → chunk-XKSTKX45.js} +52 -1
- package/dist/convert-settings.cjs +52 -1
- package/dist/convert-settings.js +1 -1
- package/dist/index.cjs +52 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
|
@@ -227,6 +227,42 @@ var convertSettings = (settings) => {
|
|
|
227
227
|
data.brandColor.color
|
|
228
228
|
);
|
|
229
229
|
data.survey.color = resolveAutoValue(data.survey.color, data.brandColor.background);
|
|
230
|
+
data.launcherButtons.primary.textColor.color = resolveAutoValue(
|
|
231
|
+
data.launcherButtons.primary.textColor.color,
|
|
232
|
+
data.brandColor.color
|
|
233
|
+
);
|
|
234
|
+
data.launcherButtons.primary.textColor.hover = resolveAutoValue(
|
|
235
|
+
data.launcherButtons.primary.textColor.hover,
|
|
236
|
+
data.brandColor.color
|
|
237
|
+
);
|
|
238
|
+
data.launcherButtons.primary.textColor.active = resolveAutoValue(
|
|
239
|
+
data.launcherButtons.primary.textColor.active,
|
|
240
|
+
data.brandColor.color
|
|
241
|
+
);
|
|
242
|
+
data.launcherButtons.primary.backgroundColor.background = resolveAutoValue(
|
|
243
|
+
data.launcherButtons.primary.backgroundColor.background,
|
|
244
|
+
data.brandColor.background
|
|
245
|
+
);
|
|
246
|
+
data.launcherButtons.primary.backgroundColor.hover = resolveAutoValue(
|
|
247
|
+
data.launcherButtons.primary.backgroundColor.hover,
|
|
248
|
+
data.brandColor.autoHover
|
|
249
|
+
);
|
|
250
|
+
data.launcherButtons.primary.backgroundColor.active = resolveAutoValue(
|
|
251
|
+
data.launcherButtons.primary.backgroundColor.active,
|
|
252
|
+
data.brandColor.autoActive
|
|
253
|
+
);
|
|
254
|
+
data.launcherButtons.primary.border.color.color = resolveAutoValue(
|
|
255
|
+
data.launcherButtons.primary.border.color.color,
|
|
256
|
+
data.brandColor.background
|
|
257
|
+
);
|
|
258
|
+
data.launcherButtons.primary.border.color.hover = resolveAutoValue(
|
|
259
|
+
data.launcherButtons.primary.border.color.hover,
|
|
260
|
+
data.brandColor.autoHover
|
|
261
|
+
);
|
|
262
|
+
data.launcherButtons.primary.border.color.active = resolveAutoValue(
|
|
263
|
+
data.launcherButtons.primary.border.color.active,
|
|
264
|
+
data.brandColor.autoActive
|
|
265
|
+
);
|
|
230
266
|
if (data.font.fontFamily === "System font") {
|
|
231
267
|
data.font.fontFamily = defaultFontFamily;
|
|
232
268
|
} else if (!data.font.fontFamily.includes("sans-serif")) {
|
|
@@ -326,7 +362,22 @@ var convertToCssVars = (settings, type = "tooltip") => {
|
|
|
326
362
|
"--usertour-checkmark-background-color": settings.checklist.checkmarkColor,
|
|
327
363
|
"--usertour-checklist-trigger-height": `${settings.checklistLauncher.height}px`,
|
|
328
364
|
"--usertour-checklist-trigger-hover-background-color": settings.checklistLauncher.color.hover,
|
|
329
|
-
"--usertour-question-color": hexToHSLString(settings.survey.color)
|
|
365
|
+
"--usertour-question-color": hexToHSLString(settings.survey.color),
|
|
366
|
+
"--usertour-launcher-button-height": `${settings.launcherButtons.height}px`,
|
|
367
|
+
"--usertour-launcher-button-width": settings.launcherButtons.width === 0 ? "auto" : `${settings.launcherButtons.width}px`,
|
|
368
|
+
"--usertour-launcher-button-horizontal-padding": `${settings.launcherButtons.px}px`,
|
|
369
|
+
"--usertour-launcher-button-border-radius": `${settings.launcherButtons.borderRadius}px`,
|
|
370
|
+
"--usertour-launcher-button-background-color": settings.launcherButtons.primary.backgroundColor.background,
|
|
371
|
+
"--usertour-launcher-button-hover-background-color": settings.launcherButtons.primary.backgroundColor.hover,
|
|
372
|
+
"--usertour-launcher-button-active-background-color": settings.launcherButtons.primary.backgroundColor.active,
|
|
373
|
+
"--usertour-launcher-button-font-color": settings.launcherButtons.primary.textColor.color,
|
|
374
|
+
"--usertour-launcher-button-hover-font-color": settings.launcherButtons.primary.textColor.hover,
|
|
375
|
+
"--usertour-launcher-button-active-font-color": settings.launcherButtons.primary.textColor.active,
|
|
376
|
+
"--usertour-launcher-button-font-weight": settings.launcherButtons.primary.fontWeight,
|
|
377
|
+
"--usertour-launcher-button-border-width": settings.launcherButtons.primary.border.enabled ? `${settings.launcherButtons.primary.border.borderWidth}px` : "0px",
|
|
378
|
+
"--usertour-launcher-button-border-color": settings.launcherButtons.primary.border.color.color,
|
|
379
|
+
"--usertour-launcher-button-hover-border-color": settings.launcherButtons.primary.border.color.hover,
|
|
380
|
+
"--usertour-launcher-button-active-border-color": settings.launcherButtons.primary.border.color.active
|
|
330
381
|
};
|
|
331
382
|
if (settings.backdrop.highlight.type === "inside") {
|
|
332
383
|
cssMapping["--usertour-backdrop-highlight-inset"] = "inset";
|
|
@@ -495,6 +546,37 @@ describe("convert-settings", () => {
|
|
|
495
546
|
}
|
|
496
547
|
}
|
|
497
548
|
},
|
|
549
|
+
launcherButtons: {
|
|
550
|
+
height: 32,
|
|
551
|
+
width: 0,
|
|
552
|
+
px: 16,
|
|
553
|
+
borderRadius: 8,
|
|
554
|
+
primary: {
|
|
555
|
+
fontWeight: 600,
|
|
556
|
+
textColor: {
|
|
557
|
+
color: "Auto",
|
|
558
|
+
hover: "Auto",
|
|
559
|
+
active: "Auto",
|
|
560
|
+
background: "#FFFFFF"
|
|
561
|
+
},
|
|
562
|
+
backgroundColor: {
|
|
563
|
+
color: "#FFFFFF",
|
|
564
|
+
hover: "Auto",
|
|
565
|
+
active: "Auto",
|
|
566
|
+
background: "Auto"
|
|
567
|
+
},
|
|
568
|
+
border: {
|
|
569
|
+
enabled: false,
|
|
570
|
+
borderWidth: 1,
|
|
571
|
+
color: {
|
|
572
|
+
color: "Auto",
|
|
573
|
+
hover: "Auto",
|
|
574
|
+
active: "Auto",
|
|
575
|
+
background: "#FFFFFF"
|
|
576
|
+
}
|
|
577
|
+
}
|
|
578
|
+
}
|
|
579
|
+
},
|
|
498
580
|
tooltip: {
|
|
499
581
|
width: 300,
|
|
500
582
|
notchSize: 20
|
|
@@ -706,6 +788,44 @@ describe("convert-settings", () => {
|
|
|
706
788
|
expect(result.survey.color).toBe(completeSettings.brandColor.background);
|
|
707
789
|
});
|
|
708
790
|
});
|
|
791
|
+
describe("launcherButtons Auto values", () => {
|
|
792
|
+
it("should resolve launcherButtons primary textColor from brandColor.color when set to Auto", () => {
|
|
793
|
+
const result = convertSettings(completeSettings);
|
|
794
|
+
expect(result.launcherButtons.primary.textColor.color).toBe(
|
|
795
|
+
completeSettings.brandColor.color
|
|
796
|
+
);
|
|
797
|
+
expect(result.launcherButtons.primary.textColor.hover).toBe(
|
|
798
|
+
completeSettings.brandColor.color
|
|
799
|
+
);
|
|
800
|
+
expect(result.launcherButtons.primary.textColor.active).toBe(
|
|
801
|
+
completeSettings.brandColor.color
|
|
802
|
+
);
|
|
803
|
+
});
|
|
804
|
+
it("should resolve launcherButtons primary backgroundColor from brandColor when set to Auto", () => {
|
|
805
|
+
const result = convertSettings(completeSettings);
|
|
806
|
+
expect(result.launcherButtons.primary.backgroundColor.background).toBe(
|
|
807
|
+
completeSettings.brandColor.background
|
|
808
|
+
);
|
|
809
|
+
expect(result.launcherButtons.primary.backgroundColor.hover).toBe(
|
|
810
|
+
completeSettings.brandColor.autoHover
|
|
811
|
+
);
|
|
812
|
+
expect(result.launcherButtons.primary.backgroundColor.active).toBe(
|
|
813
|
+
completeSettings.brandColor.autoActive
|
|
814
|
+
);
|
|
815
|
+
});
|
|
816
|
+
it("should resolve launcherButtons primary border.color from brandColor when set to Auto", () => {
|
|
817
|
+
const result = convertSettings(completeSettings);
|
|
818
|
+
expect(result.launcherButtons.primary.border.color.color).toBe(
|
|
819
|
+
completeSettings.brandColor.background
|
|
820
|
+
);
|
|
821
|
+
expect(result.launcherButtons.primary.border.color.hover).toBe(
|
|
822
|
+
completeSettings.brandColor.autoHover
|
|
823
|
+
);
|
|
824
|
+
expect(result.launcherButtons.primary.border.color.active).toBe(
|
|
825
|
+
completeSettings.brandColor.autoActive
|
|
826
|
+
);
|
|
827
|
+
});
|
|
828
|
+
});
|
|
709
829
|
describe("font family handling", () => {
|
|
710
830
|
it("should convert System font to full font family string", () => {
|
|
711
831
|
const result = convertSettings(completeSettings);
|
|
@@ -791,6 +911,21 @@ describe("convert-settings", () => {
|
|
|
791
911
|
expect(result.launcherIcon).toBeDefined();
|
|
792
912
|
expect(result.launcherIcon.size).toBe(import_types2.defaultSettings.launcherIcon.size);
|
|
793
913
|
});
|
|
914
|
+
it("should handle missing launcherButtons with defaultSettings fallback", () => {
|
|
915
|
+
const settings = {
|
|
916
|
+
mainColor: completeSettings.mainColor,
|
|
917
|
+
brandColor: completeSettings.brandColor
|
|
918
|
+
};
|
|
919
|
+
const result = convertSettings(settings);
|
|
920
|
+
expect(result.launcherButtons).toBeDefined();
|
|
921
|
+
expect(result.launcherButtons.height).toBe(import_types2.defaultSettings.launcherButtons.height);
|
|
922
|
+
expect(result.launcherButtons.width).toBe(import_types2.defaultSettings.launcherButtons.width);
|
|
923
|
+
expect(result.launcherButtons.px).toBe(import_types2.defaultSettings.launcherButtons.px);
|
|
924
|
+
expect(result.launcherButtons.borderRadius).toBe(
|
|
925
|
+
import_types2.defaultSettings.launcherButtons.borderRadius
|
|
926
|
+
);
|
|
927
|
+
expect(result.launcherButtons.primary).toBeDefined();
|
|
928
|
+
});
|
|
794
929
|
});
|
|
795
930
|
describe("convertSettings - Combined fallback (missing data + Auto resolution)", () => {
|
|
796
931
|
it("should apply both defaultSettings fallback and Auto resolution for empty input", () => {
|
|
@@ -821,6 +956,13 @@ describe("convert-settings", () => {
|
|
|
821
956
|
expect(result.buttons.secondary.backgroundColor.background).toBe(
|
|
822
957
|
import_types2.defaultSettings.mainColor.background
|
|
823
958
|
);
|
|
959
|
+
expect(result.launcherButtons.primary.textColor.color).toBe(import_types2.defaultSettings.brandColor.color);
|
|
960
|
+
expect(result.launcherButtons.primary.backgroundColor.background).toBe(
|
|
961
|
+
import_types2.defaultSettings.brandColor.background
|
|
962
|
+
);
|
|
963
|
+
expect(result.launcherButtons.primary.backgroundColor.hover).toBe(
|
|
964
|
+
import_types2.defaultSettings.brandColor.autoHover
|
|
965
|
+
);
|
|
824
966
|
});
|
|
825
967
|
it("should handle partial settings with correct fallback chain", () => {
|
|
826
968
|
const partialSettings = {
|
|
@@ -889,6 +1031,35 @@ describe("convert-settings", () => {
|
|
|
889
1031
|
expect(css).toContain("--usertour-widget-launcher-icon-hover-color:");
|
|
890
1032
|
expect(css).toContain("--usertour-widget-beacon-color:");
|
|
891
1033
|
});
|
|
1034
|
+
it("should include launcher button CSS variables", () => {
|
|
1035
|
+
const convertedSettings = convertSettings(completeSettings);
|
|
1036
|
+
const css = convertToCssVars(convertedSettings);
|
|
1037
|
+
expect(css).toContain("--usertour-launcher-button-height:");
|
|
1038
|
+
expect(css).toContain("--usertour-launcher-button-width:");
|
|
1039
|
+
expect(css).toContain("--usertour-launcher-button-horizontal-padding:");
|
|
1040
|
+
expect(css).toContain("--usertour-launcher-button-border-radius:");
|
|
1041
|
+
expect(css).toContain("--usertour-launcher-button-background-color:");
|
|
1042
|
+
expect(css).toContain("--usertour-launcher-button-hover-background-color:");
|
|
1043
|
+
expect(css).toContain("--usertour-launcher-button-active-background-color:");
|
|
1044
|
+
expect(css).toContain("--usertour-launcher-button-font-color:");
|
|
1045
|
+
expect(css).toContain("--usertour-launcher-button-hover-font-color:");
|
|
1046
|
+
expect(css).toContain("--usertour-launcher-button-active-font-color:");
|
|
1047
|
+
expect(css).toContain("--usertour-launcher-button-font-weight:");
|
|
1048
|
+
expect(css).toContain("--usertour-launcher-button-border-width:");
|
|
1049
|
+
expect(css).toContain("--usertour-launcher-button-border-color:");
|
|
1050
|
+
expect(css).toContain("--usertour-launcher-button-hover-border-color:");
|
|
1051
|
+
expect(css).toContain("--usertour-launcher-button-active-border-color:");
|
|
1052
|
+
});
|
|
1053
|
+
it("should set launcher button width to auto when width is 0", () => {
|
|
1054
|
+
const convertedSettings = convertSettings(completeSettings);
|
|
1055
|
+
const css = convertToCssVars(convertedSettings);
|
|
1056
|
+
expect(css).toContain("--usertour-launcher-button-width:auto");
|
|
1057
|
+
});
|
|
1058
|
+
it("should set launcher button border width to 0px when border is disabled", () => {
|
|
1059
|
+
const convertedSettings = convertSettings(completeSettings);
|
|
1060
|
+
const css = convertToCssVars(convertedSettings);
|
|
1061
|
+
expect(css).toContain("--usertour-launcher-button-border-width:0px");
|
|
1062
|
+
});
|
|
892
1063
|
it("should add modal padding for modal type", () => {
|
|
893
1064
|
const convertedSettings = convertSettings(completeSettings);
|
|
894
1065
|
const css = convertToCssVars(convertedSettings, "modal");
|
|
@@ -2,7 +2,7 @@ import {
|
|
|
2
2
|
convertSettings,
|
|
3
3
|
convertToCssVars,
|
|
4
4
|
mergeThemeDefaultSettings
|
|
5
|
-
} from "../chunk-
|
|
5
|
+
} from "../chunk-XKSTKX45.js";
|
|
6
6
|
import "../chunk-5C3J4DM2.js";
|
|
7
7
|
import "../chunk-FZFHBCB6.js";
|
|
8
8
|
import "../chunk-GFH3VWOC.js";
|
|
@@ -163,6 +163,37 @@ describe("convert-settings", () => {
|
|
|
163
163
|
}
|
|
164
164
|
}
|
|
165
165
|
},
|
|
166
|
+
launcherButtons: {
|
|
167
|
+
height: 32,
|
|
168
|
+
width: 0,
|
|
169
|
+
px: 16,
|
|
170
|
+
borderRadius: 8,
|
|
171
|
+
primary: {
|
|
172
|
+
fontWeight: 600,
|
|
173
|
+
textColor: {
|
|
174
|
+
color: "Auto",
|
|
175
|
+
hover: "Auto",
|
|
176
|
+
active: "Auto",
|
|
177
|
+
background: "#FFFFFF"
|
|
178
|
+
},
|
|
179
|
+
backgroundColor: {
|
|
180
|
+
color: "#FFFFFF",
|
|
181
|
+
hover: "Auto",
|
|
182
|
+
active: "Auto",
|
|
183
|
+
background: "Auto"
|
|
184
|
+
},
|
|
185
|
+
border: {
|
|
186
|
+
enabled: false,
|
|
187
|
+
borderWidth: 1,
|
|
188
|
+
color: {
|
|
189
|
+
color: "Auto",
|
|
190
|
+
hover: "Auto",
|
|
191
|
+
active: "Auto",
|
|
192
|
+
background: "#FFFFFF"
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
},
|
|
166
197
|
tooltip: {
|
|
167
198
|
width: 300,
|
|
168
199
|
notchSize: 20
|
|
@@ -374,6 +405,44 @@ describe("convert-settings", () => {
|
|
|
374
405
|
expect(result.survey.color).toBe(completeSettings.brandColor.background);
|
|
375
406
|
});
|
|
376
407
|
});
|
|
408
|
+
describe("launcherButtons Auto values", () => {
|
|
409
|
+
it("should resolve launcherButtons primary textColor from brandColor.color when set to Auto", () => {
|
|
410
|
+
const result = convertSettings(completeSettings);
|
|
411
|
+
expect(result.launcherButtons.primary.textColor.color).toBe(
|
|
412
|
+
completeSettings.brandColor.color
|
|
413
|
+
);
|
|
414
|
+
expect(result.launcherButtons.primary.textColor.hover).toBe(
|
|
415
|
+
completeSettings.brandColor.color
|
|
416
|
+
);
|
|
417
|
+
expect(result.launcherButtons.primary.textColor.active).toBe(
|
|
418
|
+
completeSettings.brandColor.color
|
|
419
|
+
);
|
|
420
|
+
});
|
|
421
|
+
it("should resolve launcherButtons primary backgroundColor from brandColor when set to Auto", () => {
|
|
422
|
+
const result = convertSettings(completeSettings);
|
|
423
|
+
expect(result.launcherButtons.primary.backgroundColor.background).toBe(
|
|
424
|
+
completeSettings.brandColor.background
|
|
425
|
+
);
|
|
426
|
+
expect(result.launcherButtons.primary.backgroundColor.hover).toBe(
|
|
427
|
+
completeSettings.brandColor.autoHover
|
|
428
|
+
);
|
|
429
|
+
expect(result.launcherButtons.primary.backgroundColor.active).toBe(
|
|
430
|
+
completeSettings.brandColor.autoActive
|
|
431
|
+
);
|
|
432
|
+
});
|
|
433
|
+
it("should resolve launcherButtons primary border.color from brandColor when set to Auto", () => {
|
|
434
|
+
const result = convertSettings(completeSettings);
|
|
435
|
+
expect(result.launcherButtons.primary.border.color.color).toBe(
|
|
436
|
+
completeSettings.brandColor.background
|
|
437
|
+
);
|
|
438
|
+
expect(result.launcherButtons.primary.border.color.hover).toBe(
|
|
439
|
+
completeSettings.brandColor.autoHover
|
|
440
|
+
);
|
|
441
|
+
expect(result.launcherButtons.primary.border.color.active).toBe(
|
|
442
|
+
completeSettings.brandColor.autoActive
|
|
443
|
+
);
|
|
444
|
+
});
|
|
445
|
+
});
|
|
377
446
|
describe("font family handling", () => {
|
|
378
447
|
it("should convert System font to full font family string", () => {
|
|
379
448
|
const result = convertSettings(completeSettings);
|
|
@@ -459,6 +528,21 @@ describe("convert-settings", () => {
|
|
|
459
528
|
expect(result.launcherIcon).toBeDefined();
|
|
460
529
|
expect(result.launcherIcon.size).toBe(defaultSettings.launcherIcon.size);
|
|
461
530
|
});
|
|
531
|
+
it("should handle missing launcherButtons with defaultSettings fallback", () => {
|
|
532
|
+
const settings = {
|
|
533
|
+
mainColor: completeSettings.mainColor,
|
|
534
|
+
brandColor: completeSettings.brandColor
|
|
535
|
+
};
|
|
536
|
+
const result = convertSettings(settings);
|
|
537
|
+
expect(result.launcherButtons).toBeDefined();
|
|
538
|
+
expect(result.launcherButtons.height).toBe(defaultSettings.launcherButtons.height);
|
|
539
|
+
expect(result.launcherButtons.width).toBe(defaultSettings.launcherButtons.width);
|
|
540
|
+
expect(result.launcherButtons.px).toBe(defaultSettings.launcherButtons.px);
|
|
541
|
+
expect(result.launcherButtons.borderRadius).toBe(
|
|
542
|
+
defaultSettings.launcherButtons.borderRadius
|
|
543
|
+
);
|
|
544
|
+
expect(result.launcherButtons.primary).toBeDefined();
|
|
545
|
+
});
|
|
462
546
|
});
|
|
463
547
|
describe("convertSettings - Combined fallback (missing data + Auto resolution)", () => {
|
|
464
548
|
it("should apply both defaultSettings fallback and Auto resolution for empty input", () => {
|
|
@@ -489,6 +573,13 @@ describe("convert-settings", () => {
|
|
|
489
573
|
expect(result.buttons.secondary.backgroundColor.background).toBe(
|
|
490
574
|
defaultSettings.mainColor.background
|
|
491
575
|
);
|
|
576
|
+
expect(result.launcherButtons.primary.textColor.color).toBe(defaultSettings.brandColor.color);
|
|
577
|
+
expect(result.launcherButtons.primary.backgroundColor.background).toBe(
|
|
578
|
+
defaultSettings.brandColor.background
|
|
579
|
+
);
|
|
580
|
+
expect(result.launcherButtons.primary.backgroundColor.hover).toBe(
|
|
581
|
+
defaultSettings.brandColor.autoHover
|
|
582
|
+
);
|
|
492
583
|
});
|
|
493
584
|
it("should handle partial settings with correct fallback chain", () => {
|
|
494
585
|
const partialSettings = {
|
|
@@ -557,6 +648,35 @@ describe("convert-settings", () => {
|
|
|
557
648
|
expect(css).toContain("--usertour-widget-launcher-icon-hover-color:");
|
|
558
649
|
expect(css).toContain("--usertour-widget-beacon-color:");
|
|
559
650
|
});
|
|
651
|
+
it("should include launcher button CSS variables", () => {
|
|
652
|
+
const convertedSettings = convertSettings(completeSettings);
|
|
653
|
+
const css = convertToCssVars(convertedSettings);
|
|
654
|
+
expect(css).toContain("--usertour-launcher-button-height:");
|
|
655
|
+
expect(css).toContain("--usertour-launcher-button-width:");
|
|
656
|
+
expect(css).toContain("--usertour-launcher-button-horizontal-padding:");
|
|
657
|
+
expect(css).toContain("--usertour-launcher-button-border-radius:");
|
|
658
|
+
expect(css).toContain("--usertour-launcher-button-background-color:");
|
|
659
|
+
expect(css).toContain("--usertour-launcher-button-hover-background-color:");
|
|
660
|
+
expect(css).toContain("--usertour-launcher-button-active-background-color:");
|
|
661
|
+
expect(css).toContain("--usertour-launcher-button-font-color:");
|
|
662
|
+
expect(css).toContain("--usertour-launcher-button-hover-font-color:");
|
|
663
|
+
expect(css).toContain("--usertour-launcher-button-active-font-color:");
|
|
664
|
+
expect(css).toContain("--usertour-launcher-button-font-weight:");
|
|
665
|
+
expect(css).toContain("--usertour-launcher-button-border-width:");
|
|
666
|
+
expect(css).toContain("--usertour-launcher-button-border-color:");
|
|
667
|
+
expect(css).toContain("--usertour-launcher-button-hover-border-color:");
|
|
668
|
+
expect(css).toContain("--usertour-launcher-button-active-border-color:");
|
|
669
|
+
});
|
|
670
|
+
it("should set launcher button width to auto when width is 0", () => {
|
|
671
|
+
const convertedSettings = convertSettings(completeSettings);
|
|
672
|
+
const css = convertToCssVars(convertedSettings);
|
|
673
|
+
expect(css).toContain("--usertour-launcher-button-width:auto");
|
|
674
|
+
});
|
|
675
|
+
it("should set launcher button border width to 0px when border is disabled", () => {
|
|
676
|
+
const convertedSettings = convertSettings(completeSettings);
|
|
677
|
+
const css = convertToCssVars(convertedSettings);
|
|
678
|
+
expect(css).toContain("--usertour-launcher-button-border-width:0px");
|
|
679
|
+
});
|
|
560
680
|
it("should add modal padding for modal type", () => {
|
|
561
681
|
const convertedSettings = convertSettings(completeSettings);
|
|
562
682
|
const css = convertToCssVars(convertedSettings, "modal");
|
|
@@ -164,6 +164,42 @@ var convertSettings = (settings) => {
|
|
|
164
164
|
data.brandColor.color
|
|
165
165
|
);
|
|
166
166
|
data.survey.color = resolveAutoValue(data.survey.color, data.brandColor.background);
|
|
167
|
+
data.launcherButtons.primary.textColor.color = resolveAutoValue(
|
|
168
|
+
data.launcherButtons.primary.textColor.color,
|
|
169
|
+
data.brandColor.color
|
|
170
|
+
);
|
|
171
|
+
data.launcherButtons.primary.textColor.hover = resolveAutoValue(
|
|
172
|
+
data.launcherButtons.primary.textColor.hover,
|
|
173
|
+
data.brandColor.color
|
|
174
|
+
);
|
|
175
|
+
data.launcherButtons.primary.textColor.active = resolveAutoValue(
|
|
176
|
+
data.launcherButtons.primary.textColor.active,
|
|
177
|
+
data.brandColor.color
|
|
178
|
+
);
|
|
179
|
+
data.launcherButtons.primary.backgroundColor.background = resolveAutoValue(
|
|
180
|
+
data.launcherButtons.primary.backgroundColor.background,
|
|
181
|
+
data.brandColor.background
|
|
182
|
+
);
|
|
183
|
+
data.launcherButtons.primary.backgroundColor.hover = resolveAutoValue(
|
|
184
|
+
data.launcherButtons.primary.backgroundColor.hover,
|
|
185
|
+
data.brandColor.autoHover
|
|
186
|
+
);
|
|
187
|
+
data.launcherButtons.primary.backgroundColor.active = resolveAutoValue(
|
|
188
|
+
data.launcherButtons.primary.backgroundColor.active,
|
|
189
|
+
data.brandColor.autoActive
|
|
190
|
+
);
|
|
191
|
+
data.launcherButtons.primary.border.color.color = resolveAutoValue(
|
|
192
|
+
data.launcherButtons.primary.border.color.color,
|
|
193
|
+
data.brandColor.background
|
|
194
|
+
);
|
|
195
|
+
data.launcherButtons.primary.border.color.hover = resolveAutoValue(
|
|
196
|
+
data.launcherButtons.primary.border.color.hover,
|
|
197
|
+
data.brandColor.autoHover
|
|
198
|
+
);
|
|
199
|
+
data.launcherButtons.primary.border.color.active = resolveAutoValue(
|
|
200
|
+
data.launcherButtons.primary.border.color.active,
|
|
201
|
+
data.brandColor.autoActive
|
|
202
|
+
);
|
|
167
203
|
if (data.font.fontFamily === "System font") {
|
|
168
204
|
data.font.fontFamily = defaultFontFamily;
|
|
169
205
|
} else if (!data.font.fontFamily.includes("sans-serif")) {
|
|
@@ -263,7 +299,22 @@ var convertToCssVars = (settings, type = "tooltip") => {
|
|
|
263
299
|
"--usertour-checkmark-background-color": settings.checklist.checkmarkColor,
|
|
264
300
|
"--usertour-checklist-trigger-height": `${settings.checklistLauncher.height}px`,
|
|
265
301
|
"--usertour-checklist-trigger-hover-background-color": settings.checklistLauncher.color.hover,
|
|
266
|
-
"--usertour-question-color": hexToHSLString(settings.survey.color)
|
|
302
|
+
"--usertour-question-color": hexToHSLString(settings.survey.color),
|
|
303
|
+
"--usertour-launcher-button-height": `${settings.launcherButtons.height}px`,
|
|
304
|
+
"--usertour-launcher-button-width": settings.launcherButtons.width === 0 ? "auto" : `${settings.launcherButtons.width}px`,
|
|
305
|
+
"--usertour-launcher-button-horizontal-padding": `${settings.launcherButtons.px}px`,
|
|
306
|
+
"--usertour-launcher-button-border-radius": `${settings.launcherButtons.borderRadius}px`,
|
|
307
|
+
"--usertour-launcher-button-background-color": settings.launcherButtons.primary.backgroundColor.background,
|
|
308
|
+
"--usertour-launcher-button-hover-background-color": settings.launcherButtons.primary.backgroundColor.hover,
|
|
309
|
+
"--usertour-launcher-button-active-background-color": settings.launcherButtons.primary.backgroundColor.active,
|
|
310
|
+
"--usertour-launcher-button-font-color": settings.launcherButtons.primary.textColor.color,
|
|
311
|
+
"--usertour-launcher-button-hover-font-color": settings.launcherButtons.primary.textColor.hover,
|
|
312
|
+
"--usertour-launcher-button-active-font-color": settings.launcherButtons.primary.textColor.active,
|
|
313
|
+
"--usertour-launcher-button-font-weight": settings.launcherButtons.primary.fontWeight,
|
|
314
|
+
"--usertour-launcher-button-border-width": settings.launcherButtons.primary.border.enabled ? `${settings.launcherButtons.primary.border.borderWidth}px` : "0px",
|
|
315
|
+
"--usertour-launcher-button-border-color": settings.launcherButtons.primary.border.color.color,
|
|
316
|
+
"--usertour-launcher-button-hover-border-color": settings.launcherButtons.primary.border.color.hover,
|
|
317
|
+
"--usertour-launcher-button-active-border-color": settings.launcherButtons.primary.border.color.active
|
|
267
318
|
};
|
|
268
319
|
if (settings.backdrop.highlight.type === "inside") {
|
|
269
320
|
cssMapping["--usertour-backdrop-highlight-inset"] = "inset";
|
|
@@ -236,6 +236,42 @@ var convertSettings = (settings) => {
|
|
|
236
236
|
data.brandColor.color
|
|
237
237
|
);
|
|
238
238
|
data.survey.color = resolveAutoValue(data.survey.color, data.brandColor.background);
|
|
239
|
+
data.launcherButtons.primary.textColor.color = resolveAutoValue(
|
|
240
|
+
data.launcherButtons.primary.textColor.color,
|
|
241
|
+
data.brandColor.color
|
|
242
|
+
);
|
|
243
|
+
data.launcherButtons.primary.textColor.hover = resolveAutoValue(
|
|
244
|
+
data.launcherButtons.primary.textColor.hover,
|
|
245
|
+
data.brandColor.color
|
|
246
|
+
);
|
|
247
|
+
data.launcherButtons.primary.textColor.active = resolveAutoValue(
|
|
248
|
+
data.launcherButtons.primary.textColor.active,
|
|
249
|
+
data.brandColor.color
|
|
250
|
+
);
|
|
251
|
+
data.launcherButtons.primary.backgroundColor.background = resolveAutoValue(
|
|
252
|
+
data.launcherButtons.primary.backgroundColor.background,
|
|
253
|
+
data.brandColor.background
|
|
254
|
+
);
|
|
255
|
+
data.launcherButtons.primary.backgroundColor.hover = resolveAutoValue(
|
|
256
|
+
data.launcherButtons.primary.backgroundColor.hover,
|
|
257
|
+
data.brandColor.autoHover
|
|
258
|
+
);
|
|
259
|
+
data.launcherButtons.primary.backgroundColor.active = resolveAutoValue(
|
|
260
|
+
data.launcherButtons.primary.backgroundColor.active,
|
|
261
|
+
data.brandColor.autoActive
|
|
262
|
+
);
|
|
263
|
+
data.launcherButtons.primary.border.color.color = resolveAutoValue(
|
|
264
|
+
data.launcherButtons.primary.border.color.color,
|
|
265
|
+
data.brandColor.background
|
|
266
|
+
);
|
|
267
|
+
data.launcherButtons.primary.border.color.hover = resolveAutoValue(
|
|
268
|
+
data.launcherButtons.primary.border.color.hover,
|
|
269
|
+
data.brandColor.autoHover
|
|
270
|
+
);
|
|
271
|
+
data.launcherButtons.primary.border.color.active = resolveAutoValue(
|
|
272
|
+
data.launcherButtons.primary.border.color.active,
|
|
273
|
+
data.brandColor.autoActive
|
|
274
|
+
);
|
|
239
275
|
if (data.font.fontFamily === "System font") {
|
|
240
276
|
data.font.fontFamily = defaultFontFamily;
|
|
241
277
|
} else if (!data.font.fontFamily.includes("sans-serif")) {
|
|
@@ -335,7 +371,22 @@ var convertToCssVars = (settings, type = "tooltip") => {
|
|
|
335
371
|
"--usertour-checkmark-background-color": settings.checklist.checkmarkColor,
|
|
336
372
|
"--usertour-checklist-trigger-height": `${settings.checklistLauncher.height}px`,
|
|
337
373
|
"--usertour-checklist-trigger-hover-background-color": settings.checklistLauncher.color.hover,
|
|
338
|
-
"--usertour-question-color": hexToHSLString(settings.survey.color)
|
|
374
|
+
"--usertour-question-color": hexToHSLString(settings.survey.color),
|
|
375
|
+
"--usertour-launcher-button-height": `${settings.launcherButtons.height}px`,
|
|
376
|
+
"--usertour-launcher-button-width": settings.launcherButtons.width === 0 ? "auto" : `${settings.launcherButtons.width}px`,
|
|
377
|
+
"--usertour-launcher-button-horizontal-padding": `${settings.launcherButtons.px}px`,
|
|
378
|
+
"--usertour-launcher-button-border-radius": `${settings.launcherButtons.borderRadius}px`,
|
|
379
|
+
"--usertour-launcher-button-background-color": settings.launcherButtons.primary.backgroundColor.background,
|
|
380
|
+
"--usertour-launcher-button-hover-background-color": settings.launcherButtons.primary.backgroundColor.hover,
|
|
381
|
+
"--usertour-launcher-button-active-background-color": settings.launcherButtons.primary.backgroundColor.active,
|
|
382
|
+
"--usertour-launcher-button-font-color": settings.launcherButtons.primary.textColor.color,
|
|
383
|
+
"--usertour-launcher-button-hover-font-color": settings.launcherButtons.primary.textColor.hover,
|
|
384
|
+
"--usertour-launcher-button-active-font-color": settings.launcherButtons.primary.textColor.active,
|
|
385
|
+
"--usertour-launcher-button-font-weight": settings.launcherButtons.primary.fontWeight,
|
|
386
|
+
"--usertour-launcher-button-border-width": settings.launcherButtons.primary.border.enabled ? `${settings.launcherButtons.primary.border.borderWidth}px` : "0px",
|
|
387
|
+
"--usertour-launcher-button-border-color": settings.launcherButtons.primary.border.color.color,
|
|
388
|
+
"--usertour-launcher-button-hover-border-color": settings.launcherButtons.primary.border.color.hover,
|
|
389
|
+
"--usertour-launcher-button-active-border-color": settings.launcherButtons.primary.border.color.active
|
|
339
390
|
};
|
|
340
391
|
if (settings.backdrop.highlight.type === "inside") {
|
|
341
392
|
cssMapping["--usertour-backdrop-highlight-inset"] = "inset";
|
package/dist/convert-settings.js
CHANGED
package/dist/index.cjs
CHANGED
|
@@ -538,6 +538,42 @@ var convertSettings = (settings) => {
|
|
|
538
538
|
data.brandColor.color
|
|
539
539
|
);
|
|
540
540
|
data.survey.color = resolveAutoValue(data.survey.color, data.brandColor.background);
|
|
541
|
+
data.launcherButtons.primary.textColor.color = resolveAutoValue(
|
|
542
|
+
data.launcherButtons.primary.textColor.color,
|
|
543
|
+
data.brandColor.color
|
|
544
|
+
);
|
|
545
|
+
data.launcherButtons.primary.textColor.hover = resolveAutoValue(
|
|
546
|
+
data.launcherButtons.primary.textColor.hover,
|
|
547
|
+
data.brandColor.color
|
|
548
|
+
);
|
|
549
|
+
data.launcherButtons.primary.textColor.active = resolveAutoValue(
|
|
550
|
+
data.launcherButtons.primary.textColor.active,
|
|
551
|
+
data.brandColor.color
|
|
552
|
+
);
|
|
553
|
+
data.launcherButtons.primary.backgroundColor.background = resolveAutoValue(
|
|
554
|
+
data.launcherButtons.primary.backgroundColor.background,
|
|
555
|
+
data.brandColor.background
|
|
556
|
+
);
|
|
557
|
+
data.launcherButtons.primary.backgroundColor.hover = resolveAutoValue(
|
|
558
|
+
data.launcherButtons.primary.backgroundColor.hover,
|
|
559
|
+
data.brandColor.autoHover
|
|
560
|
+
);
|
|
561
|
+
data.launcherButtons.primary.backgroundColor.active = resolveAutoValue(
|
|
562
|
+
data.launcherButtons.primary.backgroundColor.active,
|
|
563
|
+
data.brandColor.autoActive
|
|
564
|
+
);
|
|
565
|
+
data.launcherButtons.primary.border.color.color = resolveAutoValue(
|
|
566
|
+
data.launcherButtons.primary.border.color.color,
|
|
567
|
+
data.brandColor.background
|
|
568
|
+
);
|
|
569
|
+
data.launcherButtons.primary.border.color.hover = resolveAutoValue(
|
|
570
|
+
data.launcherButtons.primary.border.color.hover,
|
|
571
|
+
data.brandColor.autoHover
|
|
572
|
+
);
|
|
573
|
+
data.launcherButtons.primary.border.color.active = resolveAutoValue(
|
|
574
|
+
data.launcherButtons.primary.border.color.active,
|
|
575
|
+
data.brandColor.autoActive
|
|
576
|
+
);
|
|
541
577
|
if (data.font.fontFamily === "System font") {
|
|
542
578
|
data.font.fontFamily = defaultFontFamily;
|
|
543
579
|
} else if (!data.font.fontFamily.includes("sans-serif")) {
|
|
@@ -637,7 +673,22 @@ var convertToCssVars = (settings, type = "tooltip") => {
|
|
|
637
673
|
"--usertour-checkmark-background-color": settings.checklist.checkmarkColor,
|
|
638
674
|
"--usertour-checklist-trigger-height": `${settings.checklistLauncher.height}px`,
|
|
639
675
|
"--usertour-checklist-trigger-hover-background-color": settings.checklistLauncher.color.hover,
|
|
640
|
-
"--usertour-question-color": hexToHSLString(settings.survey.color)
|
|
676
|
+
"--usertour-question-color": hexToHSLString(settings.survey.color),
|
|
677
|
+
"--usertour-launcher-button-height": `${settings.launcherButtons.height}px`,
|
|
678
|
+
"--usertour-launcher-button-width": settings.launcherButtons.width === 0 ? "auto" : `${settings.launcherButtons.width}px`,
|
|
679
|
+
"--usertour-launcher-button-horizontal-padding": `${settings.launcherButtons.px}px`,
|
|
680
|
+
"--usertour-launcher-button-border-radius": `${settings.launcherButtons.borderRadius}px`,
|
|
681
|
+
"--usertour-launcher-button-background-color": settings.launcherButtons.primary.backgroundColor.background,
|
|
682
|
+
"--usertour-launcher-button-hover-background-color": settings.launcherButtons.primary.backgroundColor.hover,
|
|
683
|
+
"--usertour-launcher-button-active-background-color": settings.launcherButtons.primary.backgroundColor.active,
|
|
684
|
+
"--usertour-launcher-button-font-color": settings.launcherButtons.primary.textColor.color,
|
|
685
|
+
"--usertour-launcher-button-hover-font-color": settings.launcherButtons.primary.textColor.hover,
|
|
686
|
+
"--usertour-launcher-button-active-font-color": settings.launcherButtons.primary.textColor.active,
|
|
687
|
+
"--usertour-launcher-button-font-weight": settings.launcherButtons.primary.fontWeight,
|
|
688
|
+
"--usertour-launcher-button-border-width": settings.launcherButtons.primary.border.enabled ? `${settings.launcherButtons.primary.border.borderWidth}px` : "0px",
|
|
689
|
+
"--usertour-launcher-button-border-color": settings.launcherButtons.primary.border.color.color,
|
|
690
|
+
"--usertour-launcher-button-hover-border-color": settings.launcherButtons.primary.border.color.hover,
|
|
691
|
+
"--usertour-launcher-button-active-border-color": settings.launcherButtons.primary.border.color.active
|
|
641
692
|
};
|
|
642
693
|
if (settings.backdrop.highlight.type === "inside") {
|
|
643
694
|
cssMapping["--usertour-backdrop-highlight-inset"] = "inset";
|
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@usertour/helpers",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.61",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Utility functions and helpers shared across the UserTour project",
|
|
6
6
|
"homepage": "https://www.usertour.io",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@paralleldrive/cuid2": "^2.2.2",
|
|
32
|
-
"@usertour/types": "^0.0.
|
|
32
|
+
"@usertour/types": "^0.0.45",
|
|
33
33
|
"chroma-js": "^3.1.2",
|
|
34
34
|
"class-variance-authority": "^0.4.0",
|
|
35
35
|
"date-fns": "^2.30.0",
|