No issue - introduced warnings alongside to errors (#71)

* No issue - introduced warnings alongside to errors * No issue - increased the package version
browser-automation · Mar 30, 2024 · 21971ae · 21971ae
1 parent 0ba565b
commit 21971ae
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cba-components",
-  "version": "1.2.6",
+  "version": "1.3.0",
   "description": "This is a repository where the components for the Chromium Browser Automation project might live.",
   "main": "index.js",
   "bin": {

diff --git a/src/cba-list/cba-list.js b/src/cba-list/cba-list.js
@@ -7,7 +7,7 @@ const constructableCSS = new ConstructableCSS(shadowCSS);
 /**
  * @typedef  {object} Info - information tooltip.
  * @property {string} [description] - tooltip text.
- * @property {"error" | "info"} [type] - tooltip type.
+ * @property {"error" | "warning" | "info"} [type] - tooltip type.
  * @property {string} [link] - tooltip link.
  * @property {string} [linkText] - tooltip link text.
  */
@@ -556,7 +556,7 @@ export class List extends HTMLElement
   _renderTooltip(infoElem, item)
   {
     const infoText = item.description || "";
-    const subitems = item.link ? html`<a href="${item.link}">${item.linkText || "Learn more"}</a>` : "";
+    const subitems = item.link ? html`<a href="${item.link}" target="_blank">${item.linkText || "Learn more"}</a>` : "";
     render(html`<p>${infoText}</p>${subitems}`, this.tooltip);
     const infoRect = infoElem.getBoundingClientRect();
     const offsetTop = (infoRect.top  + infoRect.height / 2) - this.getBoundingClientRect().top - 2;
@@ -601,8 +601,7 @@ export class List extends HTMLElement
       const row = html`<span class="${classes.join(" ")}" draggable="${this.drag}" title="${text}" tabindex="${selected ? 0 : -1}" contenteditable="${editable}" class="text">${text}</span>`;
       if (item.info)
       {
-        const infoTypeClassname = item.info.type === "error" ? "alert" : "default";
-        const tooltip = html`<span class="${infoTypeClassname} info" @mouseenter="${this.showTooltip.bind(this)}" @mouseleave="${this.hideTooltip.bind(this)}">${infoIcon}</span>`;
+        const tooltip = html`<span class="${item.info.type || "default"} info" @mouseenter="${this.showTooltip.bind(this)}" @mouseleave="${this.hideTooltip.bind(this)}">${infoIcon}</span>`;
         if (item.info.type === "error")
         {
           return html`<div class="rowWrapper">${tooltip}${row}</div>`;

diff --git a/src/cba-list/shadow.css b/src/cba-list/shadow.css
@@ -157,11 +157,16 @@ li .info
   border-right-width: 0;
 }
 
-li .info.alert svg g
+li .info.error svg g
 {
   fill: rgb(255, 131, 131);
 }
 
+li .info.warning svg g
+{
+  fill: rgb(213, 184, 105);
+}
+
 li .info.default svg g
 {
  fill: #999;

diff --git a/src/cba-table/cba-table.js b/src/cba-table/cba-table.js
@@ -13,7 +13,7 @@ const constructableCSS = new ConstructableCSS(shadowCSS);
 /**
  * @typedef  {object} Alert - alert object.
  * @property {string} [text] - alert text.
- * @property {"error"} [type] - alert type.
+ * @property {"error" | "warning"} [type] - alert type.
  */
 
 /**
@@ -530,8 +530,14 @@ export class Table extends HTMLElement
       const classes = [];
       if (selected)
         classes.push("highlight");
-      if (alert && alert.type === "error")
+      if (alert)
+      {
         classes.push("alert");
+        if (alert.type)
+        {
+          classes.push(alert.type);
+        }
+      }
       const alertText = alert && alert.text ? alert.text : "";
       return html`<tr data-id="${id}" class=${ifDefined(classes.join(" "))} draggable="${ifDefined(this.reorder)}" tabindex=${selected ? 0 : -1}>${this.columns.map((name) =>
       {

diff --git a/src/cba-table/shadow.css b/src/cba-table/shadow.css
@@ -3,6 +3,7 @@
   --hover-primary: #eaeaea;
   --hover-secondary: #e4e4e4;
   --color-alert: #f57777b3;
+  --color-warning: #f5f577b3;
   --color-primary: #222222;
   --color-border: #aaaaaa;
   --color-selected: #cccccc;
@@ -120,11 +121,16 @@ tbody tr.alert
   outline: none;
 }
 
-tbody tr.alert
+tbody tr.error
 {
   background-color: var(--color-alert);
 }
 
+tbody tr.warning
+{
+  background-color: var(--color-warning);
+}
+
 tbody tr
 {
   outline: none;

diff --git a/tests/smoke/cba-list/smoke.js b/tests/smoke/cba-list/smoke.js
@@ -37,7 +37,11 @@ const items = [
   {
     id: "row3",
     data: "Info",
-    text: "List3"
+    text: "List3",
+    info: {
+      type: "warning",
+      description: "Middle warning text"
+    }
   },
 ];
 

diff --git a/tests/smoke/cba-table/smoke.js b/tests/smoke/cba-table/smoke.js
@@ -18,6 +18,13 @@ items.push({
   alert: {type: "error", text: "This is an alert"},
 });
 
+items.push({
+  id: "warning-item",
+  values: ["Warning", "Value warning"],
+  type: "Event warning",
+  alert: {type: "warning", text: "This is a warning"},
+});
+
 for (let index = 0; index < 30; index++)
 {
   items.push({