add copy button styles

Author: shleewhite

website/app/components/doc/code-group/index.gts

@@ -94,6 +94,16 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
     return label;
   }
 
+  get copyButtonClassNames() {
+    const classNames = ['doc-code-group__copy-button'];
+    if (this.copyStatus === 'success') {
+      classNames.push('doc-code-group__copy-button--status-success');
+    } else if (this.copyStatus === 'error') {
+      classNames.push('doc-code-group__copy-button--status-error');
+    }
+    return classNames.join(' ');
+  }
+
   handleGtsExpandClick = () => {
     this.isExpanded = !this.isExpanded;
     this.expandIconName = this.isExpanded ? 'unfold-close' : 'unfold-open';
@@ -162,7 +172,7 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
             <button
               type="button"
               aria-label={{this.copyButtonLabel}}
-              class="doc-code-group__copy-button"
+              class={{this.copyButtonClassNames}}
               {{docClipboard
                 text=this.currentViewSnippet
                 onSuccess=this.onSuccess

website/app/styles/doc-components/code-group.scss

@@ -67,10 +67,19 @@
       border-radius: 4px;
       cursor: pointer;
 
-
-     &:hover {
+      &:hover {
         background-color: var(--doc-color-gray-600);
      }
+
+      &.doc-code-group__copy-button--status-success {
+        color: var(--doc-color-feedback-success-100);
+        background-color: var(--doc-color-feedback-success-300);
+      }
+
+      &.doc-code-group__copy-button--status-error {
+        color: var(--doc-color-feedback-critical-100);
+        background-color: var(--doc-color-feedback-critical-300);
+      }
     }
   }
 }