@wavelengthusaf/components 2.5.1 → 2.7.0

package/README.md

@@ -14,6 +14,15 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 2.7.0
+
+- 3/24/2025
+- Added a Comment Component
+
+### 2.6.0
+
+- Added a new component, WavelengthProgressBar
+
 ### 2.5.1
 
 - 03/12/2025

package/dist/cjs/index.cjs

@@ -4677,9 +4677,102 @@ function WavelengthDragAndDrop({
   );
 }
 
+// src/components/PageComponents/WavelengthProgressBar.tsx
+var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box);
+var _LinearProgress = require('@mui/material/LinearProgress'); var _LinearProgress2 = _interopRequireDefault(_LinearProgress);
+
+function WavelengthProgressBar({ width: width2 = "425px", height: height2 = "12px", backgroundColor: backgroundColor2, borderRadius: borderRadius2 = "24px", progressColor, value, name, textColor = "inherit" }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", flexDirection: "row", width: width2, justifyContent: "space-between", color: textColor }, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "", children: name }),
+      value === 100 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { htmlFor: "", children: [
+        "Complete! - ",
+        value,
+        "%"
+      ] }),
+      value !== 100 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { htmlFor: "", children: [
+        "Uploading - ",
+        value,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { width: width2, height: "12px", borderRadius: "24px" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _LinearProgress2.default,
+      {
+        variant: "determinate",
+        value,
+        style: { backgroundColor: backgroundColor2, height: height2, borderRadius: borderRadius2, border: "2px solid black" },
+        sx: {
+          "& .MuiLinearProgress-bar": {
+            backgroundColor: progressColor,
+            borderRadius: borderRadius2,
+            border: "1px solid black"
+          }
+        }
+      }
+    ) })
+  ] });
+}
+
+// src/components/PageComponents/WavelengthCommentDisplay.tsx
+
+var _CheckCircleOutline = require('@mui/icons-material/CheckCircleOutline'); var _CheckCircleOutline2 = _interopRequireDefault(_CheckCircleOutline);
+var _CheckCircle = require('@mui/icons-material/CheckCircle'); var _CheckCircle2 = _interopRequireDefault(_CheckCircle);
+
+
+function WavelengthCommentDisplay(props) {
+  const [selected, setSelected] = _react.useState.call(void 0, false);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        width: props.width || "332px",
+        minHeight: "fit",
+        height: props.height || "fit-content",
+        backgroundColor: props.backgroundColor || "rgba(250, 242, 236, 1)",
+        border: props.border || "1px solid rgba(0, 0, 0, 0.05)",
+        borderRadius: "6px",
+        padding: "12px",
+        color: props.textColor || "black"
+      },
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { fontSize: "14px", fontWeight: 600, display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", padding: 0 }, children: [
+          props.author,
+          !selected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _material.IconButton,
+            {
+              onClick: () => {
+                setSelected(!selected);
+                props.onClick;
+              },
+              style: { padding: "0px" },
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircleOutline2.default, { fontSize: "small" })
+            }
+          ),
+          selected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _material.IconButton,
+            {
+              onClick: () => {
+                setSelected(!selected);
+                props.onClick;
+              },
+              style: { padding: "0px" },
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircle2.default, { fontSize: "small", sx: { color: props.iconSelectedColor || "rgba(209, 106, 47, 1)" } })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { style: { fontSize: "12px", fontWeight: 400, opacity: 0.6 }, children: props.date }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "14px", fontWeight: 400 }, children: props.comments })
+      ]
+    }
+  );
+}
+
 // src/components/footers/WavelengthFooter/WavelengthFooter.tsx
 
-var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box);
+
 var _Container = require('@mui/material/Container'); var _Container2 = _interopRequireDefault(_Container);
 
 
@@ -4885,7 +4978,7 @@ function DefaultIcon({ width: width2 = "180", height: height2 = 140 }) {
 var _Divider = require('@mui/material/Divider'); var _Divider2 = _interopRequireDefault(_Divider);
 
 
-function WavelengthPlaneTrail({ trailDir = "right", id }) {
+function WavelengthPlaneTrail({ trailDir = "right", id, color: color2 }) {
   let direction = "row-reverse";
   let flippy = "";
   if (trailDir !== "right") {
@@ -4903,11 +4996,11 @@ function WavelengthPlaneTrail({ trailDir = "right", id }) {
         "path",
         {
           d: "M4.16662 14.8988L5.76079 14.8988L8.16454 18.1359L18.2616 18.1359L14.1291 4.16669L16.2425 4.16669L24.5075 18.1359L33.985 18.1359C34.5022 18.1359 34.9422 18.3172 35.305 18.68C35.6677 19.0428 35.8491 19.4828 35.8491 20C35.8491 20.5172 35.6677 20.9572 35.305 21.32C34.9422 21.6828 34.5022 21.8642 33.985 21.8642L24.5075 21.8642L16.2425 35.8334L14.1291 35.8334L18.2616 21.8642L8.19662 21.8642L5.76079 25.1013L4.16662 25.1013L5.64329 20L4.16662 14.8988Z",
-          fill: palette2.primary
+          fill: color2 ? color2 : palette2.primary
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Grid2.default, { item: true, style: { width: "75%" }, id: "trailExample", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Divider2.default, { variant: "middle", sx: { bgcolor: palette2.primary } }) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Grid2.default, { item: true, style: { width: "75%" }, id: "trailExample", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Divider2.default, { variant: "middle", sx: { bgcolor: color2 ? color2 : palette2.primary } }) })
   ] });
 }
 
@@ -4943,7 +5036,7 @@ function WavelengthConfirmationModal(props) {
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "28px", fontWeight: 500, padding: "0px", marginBottom: "16px", fontFamily: props.fontFamily }, children: _optionalChain([props, 'access', _7 => _7.textObj, 'optionalAccess', _8 => _8.title]) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "16px", lineHeight: "19.2px", fontFamily: props.fontFamily, fontWeight: 400, height: "60px" }, children: _optionalChain([props, 'access', _9 => _9.textObj, 'optionalAccess', _10 => _10.dialog]) }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", flexDirection: "row", justifyContent: "flex-end", marginTop: "40px", gap: "8px" }, children: [
-          props.cacelButton,
+          props.cancelButton,
           props.submitButton
         ] })
       ]
@@ -5964,7 +6057,9 @@ function WavelengthTextField(props) {
 
 
 
-exports.AppLogo = AppLogo; exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultIcon = DefaultIcon; exports.DefaultPagination = DefaultPagination; exports.ManyPlanesComponent = ManyPlanesComponent; exports.NotAvailablePage = NotAvailablePage; exports.SearchTextField = SearchTextField; exports.SliderCardCarousel = SliderCardCarousel; exports.TestSnackbar = TestSnackbar; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTextField = WavelengthTextField; exports.WavelengthTitleBar = WavelengthTitleBar; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
+
+
+exports.AppLogo = AppLogo; exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultIcon = DefaultIcon; exports.DefaultPagination = DefaultPagination; exports.ManyPlanesComponent = ManyPlanesComponent; exports.NotAvailablePage = NotAvailablePage; exports.SearchTextField = SearchTextField; exports.SliderCardCarousel = SliderCardCarousel; exports.TestSnackbar = TestSnackbar; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTextField = WavelengthTextField; exports.WavelengthTitleBar = WavelengthTitleBar; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
 /*! Bundled license information:
 
 react-is/cjs/react-is.production.min.js: