diff --git a/docs/getting-started/elements/elements-options.md b/docs/getting-started/elements/elements-options.md index d727b1f2f..3b5469e7b 100644 --- a/docs/getting-started/elements/elements-options.md +++ b/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. - diff --git a/packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.tsx b/packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.tsx index ee6a1f996..607fd718b 100644 --- a/packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.tsx +++ b/packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.tsx @@ -79,6 +79,7 @@ const HttpOperationComponent = React.memo( responseStatusCode={responseStatusCode} requestBodyIndex={requestBodyIndex} hideTryIt={layoutOptions?.hideTryIt} + hideTryItPanel={layoutOptions?.hideTryItPanel} hideSamples={layoutOptions?.hideSamples} tryItCredentialsPolicy={tryItCredentialsPolicy} mockUrl={mocking.hideMocking ? undefined : mocking.mockUrl} diff --git a/packages/elements-core/src/components/TryIt/TryIt.tsx b/packages/elements-core/src/components/TryIt/TryIt.tsx index 246636174..1983e228d 100644 --- a/packages/elements-core/src/components/TryIt/TryIt.tsx +++ b/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 = ({ onRequestChange, requestBodyIndex, embeddedInMd = false, + hideTryItPanel = false, tryItCredentialsPolicy, corsProxy, }) => { @@ -349,7 +355,7 @@ export const TryIt: React.FC = ({ return ( - {tryItPanelElem} + {hideTryItPanel ? null : tryItPanelElem} {requestData && embeddedInMd && ( )} diff --git a/packages/elements-core/src/components/TryIt/TryItWithRequestSamples.stories.tsx b/packages/elements-core/src/components/TryIt/TryItWithRequestSamples.stories.tsx index 7c2370ce2..bcf090060 100644 --- a/packages/elements-core/src/components/TryIt/TryItWithRequestSamples.stories.tsx +++ b/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'; diff --git a/packages/elements-core/src/components/TryIt/TryItWithRequestSamples.tsx b/packages/elements-core/src/components/TryIt/TryItWithRequestSamples.tsx index 0979dc78e..ef3dd9a6a 100644 --- a/packages/elements-core/src/components/TryIt/TryItWithRequestSamples.tsx +++ b/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 & - ResponseExamplesProps & { hideTryIt?: boolean; hideSamples?: boolean }; + ResponseExamplesProps & { hideTryIt?: boolean; hideTryItPanel?: boolean; hideSamples?: boolean }; export const TryItWithRequestSamples: React.FC = ({ hideTryIt, + hideTryItPanel, hideSamples, ...props }) => { @@ -20,12 +21,17 @@ export const TryItWithRequestSamples: React.FC = ( return ( - {!hideTryIt && ( + {!hideTryIt ? ( - + + ) : ( + // The TryIt is responsible for generating the Request Data so it should always be rendered + <> + + )} {requestData && !hideSamples && }