fix: allow to display the code samples when try it panel is hidden

docs/getting-started/elements/elements-options.md

@@ -4,7 +4,8 @@
 - `apiDescriptionDocument` - OpenAPI document, provided as YAML string, JSON string, or JavaScript object.
 - `basePath` - Helps when using `router: 'history'` but docs are in a subdirectory like `https://example.com/docs/api`.
 - `hideInternal` - Pass `"true"` to filter out any content which has been marked as internal with `x-internal`.
-- `hideTryIt` - Pass `true` to hide the [**Try It** feature](https://docs.stoplight.io/docs/platform/ZG9jOjM2OTM3Mjky-try-it).
+- `hideTryIt` - Pass `true` to hide the [**Try It** feature](https://docs.stoplight.io/docs/platform/ZG9jOjM2OTM3Mjky-try-it) completely.
+- `hideTryItPanel` - Pass `true` to hide the Try It panel while still display the Request Sample, expects `hideTryIt` to be `false`
 - `hideSchemas` - Pass `true` to hide the schemas in the Table of Contents, when using the `sidebar` layout.
 - `hideExport` - Pass `true` to hide the Export button on overview section of the documentation.
 - `tryItCorsProxy` - Pass the URL of a CORS proxy used to send requests to the Try It feature. The provided URL is pre-pended to the URL of an actual request.
@@ -19,4 +20,3 @@
   - `hash` - uses the hash portion of the URL to keep the UI in sync with the URL.
   - `memory` - keeps the history of your "URL" in memory (doesn't read or write to the address bar).
   - `static` - renders using the StaticRouter which can help render pages on the server.
-

packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.tsx

@@ -79,6 +79,7 @@ const HttpOperationComponent = React.memo<HttpOperationProps>(
         responseStatusCode={responseStatusCode}
         requestBodyIndex={requestBodyIndex}
         hideTryIt={layoutOptions?.hideTryIt}
+        hideTryItPanel={layoutOptions?.hideTryItPanel}
         hideSamples={layoutOptions?.hideSamples}
         tryItCredentialsPolicy={tryItCredentialsPolicy}
         mockUrl={mocking.hideMocking ? undefined : mocking.mockUrl}

packages/elements-core/src/components/TryIt/TryIt.tsx

@@ -56,6 +56,11 @@ export interface TryItProps {
    */
   embeddedInMd?: boolean;
 
+  /**
+   * True when TryIt Panel should be hidden
+   */
+  hideTryItPanel?: boolean;
+
   /**
    * Fetch credentials policy for TryIt component
    * For more information: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
@@ -78,6 +83,7 @@ export const TryIt: React.FC<TryItProps> = ({
   onRequestChange,
   requestBodyIndex,
   embeddedInMd = false,
+  hideTryItPanel = false,
   tryItCredentialsPolicy,
   corsProxy,
 }) => {
@@ -349,7 +355,7 @@ export const TryIt: React.FC<TryItProps> = ({
 
   return (
     <Box rounded="lg" overflowY="hidden">
-      {tryItPanelElem}
+      {hideTryItPanel ? null : tryItPanelElem}
       {requestData && embeddedInMd && (
         <RequestSamples request={requestData} customCodeSamples={customCodeSamples} embeddedInMd />
       )}

packages/elements-core/src/components/TryIt/TryItWithRequestSamples.stories.tsx

@@ -23,3 +23,10 @@ WithVariables.args = {
   httpOperation: operationWithUrlVariables,
 };
 WithVariables.storyName = 'With Server Variables';
+
+export const WithoutTryItPanel = Template.bind({});
+WithoutTryItPanel.args = {
+  hideTryIt: true,
+  httpOperation: operationWithUrlVariables,
+};
+WithoutTryItPanel.storyName = 'Without Try It Panel';

packages/elements-core/src/components/TryIt/TryItWithRequestSamples.tsx

@@ -7,10 +7,11 @@ import { ResponseExamples, ResponseExamplesProps } from '../ResponseExamples/Res
 import { TryIt, TryItProps } from './TryIt';
 
 export type TryItWithRequestSamplesProps = Omit<TryItProps, 'onRequestChange'> &
-  ResponseExamplesProps & { hideTryIt?: boolean; hideSamples?: boolean };
+  ResponseExamplesProps & { hideTryIt?: boolean; hideTryItPanel?: boolean; hideSamples?: boolean };
 
 export const TryItWithRequestSamples: React.FC<TryItWithRequestSamplesProps> = ({
   hideTryIt,
+  hideTryItPanel,
   hideSamples,
   ...props
 }) => {
@@ -20,12 +21,17 @@ export const TryItWithRequestSamples: React.FC<TryItWithRequestSamplesProps> = (
 
   return (
     <VStack spacing={6}>
-      {!hideTryIt && (
+      {!hideTryIt ? (
         <InvertTheme>
           <Box>
-            <TryIt {...props} onRequestChange={setRequestData} />
+            <TryIt {...props} hideTryItPanel={hideTryItPanel} onRequestChange={setRequestData} />
           </Box>
         </InvertTheme>
+      ) : (
+        // The TryIt is responsible for generating the Request Data so it should always be rendered
+        <>
+          <TryIt {...props} hideTryItPanel={hideTryIt} onRequestChange={setRequestData} />
+        </>
       )}
 
       {requestData && !hideSamples && <RequestSamples request={requestData} customCodeSamples={customCodeSamples} />}