@wavelengthusaf/components 2.9.2 → 2.9.3

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.
Files changed (8) hide show
  1. package/README.md +10 -1
  2. package/dist/cjs/index.cjs +105 -75
  3. package/dist/cjs/index.cjs.map +1 -1
  4. package/dist/cjs/index.d.cts +7 -2
  5. package/dist/esm/index.d.ts +7 -2
  6. package/dist/esm/index.js +106 -76
  7. package/dist/esm/index.js.map +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -14,21 +14,30 @@ npm install @wavelengthusaf/components
14
14
 
15
15
  ## Release Notes
16
16
 
17
+ ### 2.9.3
18
+
19
+ - 5/06/2025
20
+ - Updated Alert Component
21
+
17
22
  ### 2.9.2
23
+
18
24
  - 5/02/2025
19
25
  - Minor fix to exports
20
26
 
21
27
  ### 2.9.1
28
+
22
29
  - 5/02/2025
23
30
  - WavelengthButton updated; new props
24
31
  - Minor bug fixes
25
32
 
26
33
  ### 2.9.0
34
+
27
35
  - 4/25/2025
28
36
  - New Alert Component
29
37
  - Added tests for new components (Alert Component)
30
38
 
31
39
  ### 2.8.1
40
+
32
41
  - 4/18/2024
33
42
  - Created test for the Wavelength Comment Display
34
43
 
@@ -40,7 +49,7 @@ npm install @wavelengthusaf/components
40
49
  ### 2.7.2
41
50
 
42
51
  - 4/4/2025
43
- - Updated `WavelengthTitleBar` to be a standard `<div>` instead of an svg. Also added several props for further customization.
52
+ - Updated `WavelengthTitleBar` to be a standard `<div>` instead of an svg. Also added several props for further customization.
44
53
 
45
54
  ### 2.7.1
46
55
 
package/dist/cjs/index.cjs CHANGED
@@ -5413,87 +5413,117 @@ var _Notifications = require('@mui/icons-material/Notifications'); var _Notifica
5413
5413
  function WavelengthAlert({
5414
5414
  viewed,
5415
5415
  width: width2 = "320px",
5416
- height: height2 = "96px",
5417
- backgroundColor: backgroundColor2 = "rgba(229, 246, 253, 1)",
5418
- alertHeader = "Access Requested",
5416
+ height: height2,
5417
+ backgroundColor: backgroundColor2 = "#FBFBFB",
5418
+ appName,
5419
+ alertType = "Access Requested",
5419
5420
  alertDescription = "Keenan Ray has requested to be added as a User to your App",
5420
5421
  datatestid,
5422
+ variant,
5423
+ timeStamp,
5424
+ url,
5425
+ initiator,
5421
5426
  id,
5422
5427
  onClose
5423
5428
  }) {
5424
- if (!viewed) {
5425
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
5426
- "div",
5427
- {
5428
- role: "alert",
5429
- id,
5430
- "data-testid": datatestid,
5431
- style: {
5432
- width: width2,
5433
- height: height2,
5434
- backgroundColor: backgroundColor2,
5435
- fontFamily: "Roboto, sans-serif",
5436
- border: "1px solid rgba(2, 136, 209, 1)",
5437
- borderRadius: "4px",
5438
- display: "flex",
5439
- flexDirection: "row",
5440
- boxSizing: "border-box",
5441
- alignItems: "flex-start",
5442
- padding: "12px 16px 10px 16px"
5443
- },
5444
- children: [
5445
- " ",
5446
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Notifications2.default, { sx: { width: "24px", padding: "0px", color: "rgba(2, 136, 209, 1)" } }),
5447
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", flexDirection: "column", gap: "4px", width: "250px", marginLeft: "12px" }, children: [
5448
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "", style: { fontSize: "1rem", lineHeight: "150%", letterSpacing: "0.15px", fontWeight: 500 }, children: alertHeader }),
5449
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
5450
- "div",
5451
- {
5452
- style: { fontSize: ".875rem", fontWeight: 400, lineHeight: "143%", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", textOverflow: "ellipsis" },
5453
- children: alertDescription
5454
- }
5455
- )
5456
- ] }),
5457
- onClose && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.IconButton, { sx: { padding: "0px", width: "20px" }, onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, {}) })
5458
- ]
5459
- }
5460
- );
5429
+ const viewedStyles = viewed ? {
5430
+ backgroundColor: "#DFDCDC",
5431
+ border: "1px solid #A0A2A3",
5432
+ iconColor: "#A0A2A3"
5433
+ } : {
5434
+ backgroundColor: backgroundColor2,
5435
+ border: "1px solid rgba(2, 136, 209, 1)",
5436
+ iconColor: "rgba(2, 136, 209, 1)"
5437
+ };
5438
+ const baseContainerStyle = {
5439
+ width: width2,
5440
+ height: height2 || "fit-content",
5441
+ backgroundColor: viewedStyles.backgroundColor,
5442
+ fontFamily: "Roboto, sans-serif",
5443
+ border: viewedStyles.border,
5444
+ borderRadius: "4px",
5445
+ display: "flex",
5446
+ flexDirection: "row",
5447
+ boxSizing: "border-box",
5448
+ alignItems: "flex-start",
5449
+ padding: "12px 16px 10px 16px",
5450
+ color: "#1E4620",
5451
+ position: variant === "civilized" ? "relative" : void 0
5452
+ };
5453
+ const iconStyle = {
5454
+ width: "24px",
5455
+ padding: "0px",
5456
+ color: viewedStyles.iconColor
5457
+ };
5458
+ if (variant === "caveman") {
5459
+ return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { role: "alert", id, "data-testid": datatestid, style: baseContainerStyle, children: [
5460
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Notifications2.default, { sx: iconStyle }),
5461
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "a", { href: url, style: { display: "flex", flexDirection: "column", gap: "4px", width: "250px", marginLeft: "12px", textDecoration: "none", color: baseContainerStyle.color }, children: [
5462
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { style: { fontSize: "1rem", lineHeight: "150%", letterSpacing: "0.15px", fontWeight: 550 }, children: timeStamp }),
5463
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
5464
+ "div",
5465
+ {
5466
+ style: {
5467
+ fontSize: ".875rem",
5468
+ fontWeight: 400,
5469
+ lineHeight: "143%",
5470
+ display: "-webkit-box",
5471
+ WebkitLineClamp: 2,
5472
+ WebkitBoxOrient: "vertical",
5473
+ overflow: "hidden",
5474
+ textOverflow: "ellipsis"
5475
+ },
5476
+ children: alertType
5477
+ }
5478
+ )
5479
+ ] }),
5480
+ onClose && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.IconButton, { sx: { padding: "0px", width: "20px" }, onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, {}) })
5481
+ ] });
5482
+ } else if (variant === "basic") {
5483
+ return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { role: "alert", id, "data-testid": datatestid, style: baseContainerStyle, children: [
5484
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Notifications2.default, { sx: iconStyle }),
5485
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "a", { href: url, style: { display: "flex", flexDirection: "column", gap: "4px", width: "250px", marginLeft: "12px", textDecoration: "none", color: baseContainerStyle.color }, children: [
5486
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { style: { fontSize: "14px", lineHeight: "150%", letterSpacing: "0.15px", fontWeight: 500 }, children: timeStamp }),
5487
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "16px", fontWeight: 550, lineHeight: "24px" }, children: alertType }),
5488
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { fontSize: "14px", lineHeight: "20px", fontWeight: 400 }, children: [
5489
+ "App: ",
5490
+ appName
5491
+ ] })
5492
+ ] }),
5493
+ onClose && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.IconButton, { sx: { padding: "0px", width: "20px" }, onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, {}) })
5494
+ ] });
5461
5495
  } else {
5462
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
5463
- "div",
5464
- {
5465
- role: "alert",
5466
- id,
5467
- "data-testid": datatestid,
5468
- style: {
5469
- width: width2,
5470
- height: height2,
5471
- backgroundColor: backgroundColor2 = "#DFDCDC",
5472
- fontFamily: "Roboto, sans-serif",
5473
- border: "1px solid #A0A2A3",
5474
- borderRadius: "4px",
5475
- display: "flex",
5476
- flexDirection: "row",
5477
- boxSizing: "border-box",
5478
- alignItems: "flex-start",
5479
- padding: "12px 16px 10px 16px"
5480
- },
5481
- children: [
5482
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Notifications2.default, { sx: { width: "24px", padding: "0px", color: "#A0A2A3" } }),
5483
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", flexDirection: "column", gap: "4px", width: "250px", marginLeft: "12px" }, children: [
5484
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "", style: { fontSize: "1rem", lineHeight: "150%", letterSpacing: "0.15px", fontWeight: 500 }, children: alertHeader }),
5485
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
5486
- "div",
5487
- {
5488
- style: { fontSize: ".875rem", fontWeight: 400, lineHeight: "143%", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", textOverflow: "ellipsis" },
5489
- children: alertDescription
5490
- }
5491
- )
5492
- ] }),
5493
- onClose && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.IconButton, { sx: { padding: "0px", width: "20px" }, onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, {}) })
5494
- ]
5495
- }
5496
- );
5496
+ return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { role: "alert", id, "data-testid": datatestid, style: baseContainerStyle, children: [
5497
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Notifications2.default, { sx: iconStyle }),
5498
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "a", { href: url, style: { display: "flex", flexDirection: "column", gap: "7px", width: "250px", marginLeft: "12px", textDecoration: "none", color: baseContainerStyle.color }, children: [
5499
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { style: { fontSize: "16px", lineHeight: "24px", letterSpacing: "0.15px", fontWeight: 550 }, children: alertType }),
5500
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "14px", fontWeight: 400, lineHeight: "20px", letterSpacing: "0.25px", width: "200px" }, children: alertDescription }),
5501
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { fontSize: "14px", lineHeight: "20px", fontWeight: 400 }, children: [
5502
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontWeight: 550 }, children: "Initiator: " }),
5503
+ " ",
5504
+ initiator
5505
+ ] })
5506
+ ] }),
5507
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
5508
+ "div",
5509
+ {
5510
+ style: {
5511
+ textAlign: "center",
5512
+ display: "flex",
5513
+ flexDirection: "column",
5514
+ position: "absolute",
5515
+ right: "15px",
5516
+ bottom: "12px"
5517
+ },
5518
+ className: "icon-btn-container",
5519
+ children: [
5520
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.IconButton, { sx: { padding: "3px" }, onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.SvgIcon, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "#4E4E4F", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z" }) }) }) }),
5521
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "11px" }, children: "Dismiss" })
5522
+ ]
5523
+ }
5524
+ ),
5525
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { top: "6px", right: "15px", position: "absolute", fontSize: "11px", color: "#797979" }, children: timeStamp })
5526
+ ] });
5497
5527
  }
5498
5528
  }
5499
5529