Merge pull request #213 from contentauth/cai-6813+6855

fix(cai-manifest-summary): Add disabled state to inspect button when no URL is present
contentauth · Jan 29, 2025 · d201f1b · d201f1b
2 parents 1112a4d + 87ec50f
commit d201f1b
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git a/common/changes/c2pa-wc/cai-6813-6855_2025-01-29-22-54.json b/common/changes/c2pa-wc/cai-6813-6855_2025-01-29-22-54.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "c2pa-wc",
+      "comment": "Add disable state to inspect button in cai-manifest-sumamry",
+      "type": "patch"
+    }
+  ],
+  "packageName": "c2pa-wc"
+}
diff --git a/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.ts b/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.ts
@@ -140,6 +140,22 @@ export class ManifestSummary extends Configurable(
           background-color: var(--cai-button-color);
         }
 
+        #view-more-disabled {
+          display: block;
+          transition: all 150ms ease-in-out;
+          background-color: transparent;
+          border-radius: 9999px;
+          border: 2px solid var(--cai-background-pill);
+          padding: 8px 0;
+          font-weight: bold;
+          text-align: center;
+          text-decoration: none;
+          width: 100%;
+          color: var(--cai-primary-color);
+          background-color: var(--cai-background-pill);
+          pointer-events: none;
+        }
+
         .empty {
           display: none;
         }
@@ -285,7 +301,16 @@ export class ManifestSummary extends Configurable(
                 ${this.strings['manifest-summary.viewMore']}
               </a>
             `
-          : nothing}
+          : html`
+              <a
+                id="view-more-disabled"
+                part=${ManifestSummary.cssParts.viewMore}
+                href=${this.viewMoreUrl}
+                target="_blank"
+              >
+                ${this.strings['manifest-summary.viewMore']}
+              </a>
+            `}
       </div>
     </div>`;
   }