From 3fdc7bb87a131f651b98476629f401b49702f8c9 Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Sun, 27 Sep 2020 13:47:49 -0400
Subject: [PATCH] InfoPanel: indicate lack of support for duotone weight in JS
 lib

While phosphor-icons uses an icon font implementation, we won't be able
to provide the duotone weight in that library. We now indicate lack of
support by disabling the code snippet and copy button.
---
 src/components/IconGrid/IconGrid.css  |  4 ++
 src/components/IconGrid/InfoPanel.tsx | 55 ++++++++++++++++-----------
 2 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/components/IconGrid/IconGrid.css b/src/components/IconGrid/IconGrid.css
index 7c8d783..d669ae6 100644
--- a/src/components/IconGrid/IconGrid.css
+++ b/src/components/IconGrid/IconGrid.css
@@ -121,6 +121,10 @@
   cursor: pointer;
 }
 
+.snippet button:disabled {
+  cursor: not-allowed;
+}
+
 .button-row {
   display: flex;
 }
diff --git a/src/components/IconGrid/InfoPanel.tsx b/src/components/IconGrid/InfoPanel.tsx
index 05e1b11..c56de80 100644
--- a/src/components/IconGrid/InfoPanel.tsx
+++ b/src/components/IconGrid/InfoPanel.tsx
@@ -45,15 +45,18 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
   const ref = useRef<SVGSVGElement>(null);
 
   const snippets = {
-    html: `<i class="ph-${name}${
-      weight === "regular" ? "" : `-${weight}`
-    }"></i>`,
+    html:
+      weight === "duotone"
+        ? "This weight is not yet supported"
+        : `<i class="ph-${name}${
+            weight === "regular" ? "" : `-${weight}`
+          }"></i>`,
     react: `<${Icon.displayName} size={${size}} ${
       color !== "#000000" ? `color="${color}" ` : ""
     }${weight === "regular" ? "" : `weight="${weight}" `}/>`,
     vue: `<Ph${Icon.displayName} :size="${size}" ${
       color !== "#000000" ? `color="${color}" ` : ""
-    }${weight === "regular" ? "" : `weight="${weight}" `}/>`
+    }${weight === "regular" ? "" : `weight="${weight}" `}/>`,
   };
 
   const handleCopySnippet = (
@@ -101,22 +104,6 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
         </div>
       </div>
       <div className="icon-usage">
-        <div className="snippet">
-          HTML/CSS
-          <pre tabIndex={0}>
-            {snippets.html}
-            <button
-              title="Copy snippet"
-              onClick={(e) => handleCopySnippet(e, "html")}
-            >
-              {copied === "html" ? (
-                <CheckCircle size={24} color="#1FA647" weight="fill" />
-              ) : (
-                <Copy size={24} color="currentColor" weight="fill" />
-              )}
-            </button>
-          </pre>
-        </div>
         <div className="snippet">
           React
           <pre tabIndex={0}>
@@ -149,13 +136,33 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
             </button>
           </pre>
         </div>
+        <div className="snippet">
+          HTML/CSS
+          <pre
+            tabIndex={0}
+            style={weight === "duotone" ? { color: "#B7B7B7" } : {}}
+          >
+            {snippets.html}
+            <button
+              title="Copy snippet"
+              onClick={(e) => handleCopySnippet(e, "html")}
+              disabled={weight === "duotone"}
+            >
+              {copied === "html" ? (
+                <CheckCircle size={24} color="#1FA647" weight="fill" />
+              ) : (
+                <Copy size={24} color="currentColor" weight="fill" />
+              )}
+            </button>
+          </pre>
+        </div>
         <div className="button-row">
           <button
             style={{ color: isDark ? "white" : "black" }}
             onClick={handleDownloadSVG}
           >
-            <Download size={32} color="currentColor" weight="fill" />{" "}
-            Download SVG
+            <Download size={32} color="currentColor" weight="fill" /> Download
+            SVG
           </button>
           <button
             style={{ color: isDark ? "white" : "black" }}
@@ -177,7 +184,9 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
         size={32}
         weight="fill"
         onClick={() => setOpen(false)}
-        onKeyDown={(e) => {e.key === "Enter" && setOpen(false)}}
+        onKeyDown={(e) => {
+          e.key === "Enter" && setOpen(false);
+        }}
       />
     </motion.section>
   );