add failure to copy logic and cross icon

Author: Jesse Haigh

src/components/ContentNode/CodeListing.vue

@@ -25,13 +25,14 @@
       <button
         v-if="copyToClipboard"
         class="copy-button"
-        :class="{ copied: isCopied }"
+        :class="copyState"
         @click="copyCodeToClipboard"
         :aria-label="$t('icons.copy')"
         :title="$t('icons.copy')"
       >
-        <CopyIcon v-if="!isCopied" class="copy-icon"/>
-        <CheckmarkIcon v-if="isCopied" class="checkmark-icon"/>
+        <CopyIcon v-if="copyState === 'idle'" class="copy-icon"/>
+        <CheckmarkIcon v-if="copyState === 'success'" class="checkmark-icon"/>
+        <CrossIcon v-if="copyState === 'failure'" class="cross-icon"/>
       </button>
       <!-- Do not add newlines in <pre>, as they'll appear in the rendered HTML. -->
       <pre><CodeBlock><template
@@ -58,6 +59,7 @@ import Language from 'docc-render/constants/Language';
 import CodeBlock from 'docc-render/components/CodeBlock.vue';
 import CopyIcon from 'docc-render/components/Icons/CopyIcon.vue';
 import CheckmarkIcon from 'docc-render/components/Icons/CheckmarkIcon.vue';
+import CrossIcon from 'docc-render/components/Icons/CrossIcon.vue';
 import { highlightContent, registerHighlightLanguage } from 'docc-render/utils/syntax-highlight';
 
 import CodeListingFilename from './CodeListingFilename.vue';
@@ -69,11 +71,12 @@ export default {
     CodeBlock,
     CopyIcon,
     CheckmarkIcon,
+    CrossIcon,
   },
   data() {
     return {
       syntaxHighlightedLines: [],
-      isCopied: false,
+      copyState: 'idle',
     };
   },
   props: {
@@ -151,14 +154,17 @@ export default {
     copyCodeToClipboard() {
       navigator.clipboard.writeText(this.copyableText)
         .then(() => {
-          this.isCopied = true;
+          this.copyState = 'success';
+        })
+        .catch((err) => {
+          console.error('Failed to copy text: ', err);
+          this.copyState = 'failure';
+        })
+        .finally(() => {
           setTimeout(() => {
-            this.isCopied = false;
+            this.copyState = 'idle';
           }, 1000);
-        })
-        .catch(err => (
-          console.error('Failed to copy text: ', err)
-        ));
+        });
     },
   },
 };
@@ -289,9 +295,14 @@ pre {
   fill: var(--color-figure-gray);
 }
 
-.copy-button.copied .checkmark-icon {
+.copy-button.success .checkmark-icon {
   color: var(--color-figure-blue);
   fill: currentColor;
 }
 
+.copy-button.failure .cross-icon {
+  color: var(--color-figure-red);
+  fill: currentColor;
+}
+
 </style>

src/components/Icons/CrossIcon.vue

@@ -0,0 +1,37 @@
+<!--
+  This source file is part of the Swift.org open source project
+
+  Copyright (c) 2025 Apple Inc. and the Swift project authors
+  Licensed under Apache License v2.0 with Runtime Library Exception
+
+  See https://swift.org/LICENSE.txt for license information
+  See https://swift.org/CONTRIBUTORS.txt for Swift project authors
+-->
+
+<template>
+  <SVGIcon
+    class="CrossIcon"
+    viewBox="0 0 24 24"
+    themeId="cross"
+  >
+    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41
+         10.59 12 5 17.59 6.41 19 12 13.41
+         17.59 19 19 17.59 13.41 12z"/>
+  </SVGIcon>
+</template>
+
+<script>
+import SVGIcon from 'docc-render/components/SVGIcon.vue';
+
+export default {
+  name: 'CrossIcon',
+  components: { SVGIcon },
+};
+</script>
+
+<style scoped lang="scss">
+.CrossIcon {
+  opacity: 1;
+  stroke: currentColor;
+}
+</style>