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

@@ -121,6 +121,10 @@
   cursor: pointer;
 }
 
+.snippet button:disabled {
+  cursor: not-allowed;
+}
+
 .button-row {
   display: flex;
 }

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}${
+    html:
-      weight === "regular" ? "" : `-${weight}`
+      weight === "duotone"
-    }"></i>`,
+        ? "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 size={32} color="currentColor" weight="fill" /> Download
-            Download SVG
+            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>
   );