Copy only commands in command snippets

components/MDX/Pre.tsx

@@ -35,14 +35,25 @@ const Pre = ({ children, className }: CodeProps) => {
         }
       }
 
-      document.body.appendChild(copyText);
-      const processedInnerText = toCopyContent(copyText, [
-        "." + commandStyles.line,
-        "." + codeStyles.line,
+      // Assemble an array of class names of elements within copyText to copy
+      // when a user clicks the copy button.
+      let classesToCopy = [
         // Class name added by rehype-highlight to a `code` element when
         // highlighting syntax in code snippets
         ".hljs",
-      ]);
+      ];
+
+      // If copyText includes at least one CommandLine, the intention is for
+      // users to copy commands and not example outputs (CodeLines). If there
+      // are no CommandLines, it is fine to copy the CodeLines.
+      if (copyText.getElementsByClassName(commandStyles.line).length > 0) {
+        classesToCopy.push("." + commandStyles.line);
+      } else {
+        classesToCopy.push("." + codeStyles.line);
+      }
+
+      document.body.appendChild(copyText);
+      const processedInnerText = toCopyContent(copyText, classesToCopy);
 
       navigator.clipboard.writeText(processedInnerText);
       document.body.removeChild(copyText);

components/Snippet/Snippet.stories.tsx

@@ -4,7 +4,7 @@ import { expect } from "@storybook/jest";
 
 import { Var } from "../Variables/Var";
 import { default as Snippet } from "./Snippet";
-import Command, { CommandLine } from "../Command/Command";
+import Command, { CommandLine, CommandComment } from "../Command/Command";
 import { CodeLine } from "../Code";
 import { replaceClipboardWithCopyBuffer } from "utils/clipboard";
 
@@ -55,6 +55,38 @@ export const CopyCommandVar: Story = {
   },
 };
 
+// A code snippet with commands should only copy the commands.
+export const CopyCommandVarWithOutput: Story = {
+  render: () => {
+    return (
+      <Snippet>
+        <Command>
+          <CommandLine data-content="$ ">
+            curl https://
+            <Var name="example.com" isGlobal="false" description="" />
+            /v1/webapi/saml/acs/azure-saml
+          </CommandLine>
+        </Command>
+        <CodeLine>
+          The output of curling <Var name="example.com" />
+        </CodeLine>
+      </Snippet>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    replaceClipboardWithCopyBuffer();
+    const canvas = within(canvasElement);
+
+    await step("Copy the content", async () => {
+      await userEvent.click(canvas.getByTestId("copy-button-all"));
+      expect(navigator.clipboard.readText()).toEqual(
+        "curl https://example.com/v1/webapi/saml/acs/azure-saml"
+      );
+    });
+  },
+};
+
+// A code snippet with no commands should copy all content within the snippet.
 export const CopyCodeLineVar: Story = {
   render: () => {
     return (