refactor: change ResponseSamples to CodeSamples (PaloAltoNetworks#1162)

Author: dsuket

packages/docusaurus-theme-openapi-docs/src/theme/CodeSamples/_CodeSamples.scss

@@ -0,0 +1,3 @@
+.openapi-code__code-samples-container {
+  margin-top: 2rem;
+}

packages/docusaurus-theme-openapi-docs/src/theme/ResponseSamples/index.tsx renamed to packages/docusaurus-theme-openapi-docs/src/theme/CodeSamples/index.tsx

@@ -11,21 +11,16 @@ import CodeBlock from "@theme/CodeBlock";
 import { Language } from "prism-react-renderer";
 
 export interface Props {
-  readonly responseExample: string;
+  readonly example: string;
   readonly language: Language;
 }
 
-function ResponseSamples({
-  responseExample,
-  language,
-}: Props): React.JSX.Element {
+function CodeSamples({ example, language }: Props): React.JSX.Element {
   return (
-    <div className="openapi-code__response-samples-container">
-      <CodeBlock language={language ? language : "json"}>
-        {responseExample}
-      </CodeBlock>
+    <div className="openapi-code__code-samples-container">
+      <CodeBlock language={language ? language : "json"}>{example}</CodeBlock>
     </div>
   );
 }
 
-export default ResponseSamples;
+export default CodeSamples;

packages/docusaurus-theme-openapi-docs/src/theme/ResponseExamples/index.tsx

@@ -7,8 +7,8 @@
 
 import React from "react";
 
+import CodeSamples from "@theme/CodeSamples";
 import Markdown from "@theme/Markdown";
-import ResponseSamples from "@theme/ResponseSamples";
 import TabItem from "@theme/TabItem";
 import { sampleResponseFromSchema } from "docusaurus-plugin-openapi-docs/lib/openapi/createResponseExample";
 import format from "xml-formatter";
@@ -78,10 +78,7 @@ export const ResponseExamples: React.FC<ResponseExamplesProps> = ({
               {exampleValue.summary}
             </Markdown>
           )}
-          <ResponseSamples
-            responseExample={responseExample}
-            language={language}
-          />
+          <CodeSamples example={responseExample} language={language} />
         </TabItem>
       );
     }
@@ -120,7 +117,7 @@ export const ResponseExample: React.FC<ResponseExampleProps> = ({
           {responseExample.summary}
         </Markdown>
       )}
-      <ResponseSamples responseExample={exampleContent} language={language} />
+      <CodeSamples example={exampleContent} language={language} />
     </TabItem>
   );
 };
@@ -167,7 +164,7 @@ export const ExampleFromSchema: React.FC<ExampleFromSchemaProps> = ({
       return (
         // @ts-ignore
         <TabItem label="Example (auto)" value="Example (auto)">
-          <ResponseSamples responseExample={xmlExample} language="xml" />
+          <CodeSamples example={xmlExample} language="xml" />
         </TabItem>
       );
     }
@@ -180,8 +177,8 @@ export const ExampleFromSchema: React.FC<ExampleFromSchemaProps> = ({
     return (
       // @ts-ignore
       <TabItem label="Example (auto)" value="Example (auto)">
-        <ResponseSamples
-          responseExample={JSON.stringify(responseExample, null, 2)}
+        <CodeSamples
+          example={JSON.stringify(responseExample, null, 2)}
           language="json"
         />
       </TabItem>

packages/docusaurus-theme-openapi-docs/src/theme/ResponseSamples/_ResponseSamples.scss

@@ -38,7 +38,7 @@
 @use "./SchemaTabs/SchemaTabs";
 @use "./OperationTabs/OperationTabs";
 /* Code Samples */
-@use "./ResponseSamples/ResponseSamples";
+@use "./CodeSamples/CodeSamples";
 /* Markdown Styling */
 @use "./Markdown/Details/Details";