@redocly/theme 0.8.2 → 0.8.3

package/lib/Sidebar/SidebarLayout.js

@@ -7,14 +7,14 @@ exports.SidebarLayout = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Sidebar_1 = require("../Sidebar/Sidebar");
+const FooterWrapper_1 = require("../Sidebar/FooterWrapper");
+const HeaderWrapper_1 = require("../Sidebar/HeaderWrapper");
 const useMobileMenu_1 = require("../hooks/useMobileMenu");
 const MobileSidebarButton_1 = require("../Sidebar/MobileSidebarButton");
 const MenuContainer_1 = require("../Sidebar/MenuContainer");
 const SidebarSearch_1 = require("../Search/SidebarSearch");
 const useThemeConfig_1 = require("../hooks/useThemeConfig");
-const ArrowBack_1 = require("../Sidebar/ArrowBack");
-const Link_1 = require("../mocks/Link");
-function SidebarLayout({ versions, menu, backLink, isNavbar, }) {
+function SidebarLayout({ versions, menu, footer, header, growContent, }) {
     const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)();
     const toggleMenu = () => setIsOpen(!isOpen);
     const { search, sidebar } = (0, useThemeConfig_1.useThemeConfig)();
@@ -24,33 +24,12 @@ function SidebarLayout({ versions, menu, backLink, isNavbar, }) {
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/SidebarLayout" },
         react_1.default.createElement(MobileSidebarButton_1.MobileSidebarButton, { opened: isOpen, onClick: toggleMenu }),
         !(search === null || search === void 0 ? void 0 : search.hide) && (search === null || search === void 0 ? void 0 : search.placement) === 'sidebar' ? react_1.default.createElement(SidebarSearch_1.SidebarSearch, null) : null,
-        react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen, isNavbar: isNavbar },
-            (backLink && (react_1.default.createElement(BackLinkWrapper, null,
-                react_1.default.createElement(Link_1.Link, { to: backLink.slug },
-                    react_1.default.createElement(ArrowBack_1.ArrowBack, null),
-                    "Back to ",
-                    backLink.label)))) ||
-                null,
+        react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen },
+            header ? react_1.default.createElement(HeaderWrapper_1.HeaderWrapper, null, header) : null,
             versions,
-            react_1.default.createElement(MenuContainer_1.MenuContainer, null, menu))));
+            react_1.default.createElement(MenuContainer_1.MenuContainer, { growContent: growContent }, menu),
+            footer ? react_1.default.createElement(FooterWrapper_1.FooterWrapper, null, footer) : null)));
 }
 exports.SidebarLayout = SidebarLayout;
-const BackLinkWrapper = styled_components_1.default.div `
-  padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
-    var(--sidebar-item-padding-horizontal)
-    calc(var(--sidebar-offset-left) + var(--sidebar-item-padding-horizontal));
-
-  a {
-    color: var(--sidebar-back-button-text-color);
-    font-size: var(--sidebar-back-button-font-size);
-    font-family: var(--sidebar-back-button-font-family);
-    text-decoration: none;
-    &:hover {
-      color: var(--sidebar-back-button-hover-text-color);
-    }
-  }
-
-  border-bottom: 1px solid var(--sidebar-border-color);
-`;
 const Wrapper = styled_components_1.default.div ``;
 //# sourceMappingURL=SidebarLayout.js.map

package/lib/Sidebar/index.d.ts

@@ -17,3 +17,5 @@ export * from '../Sidebar/Separator';
 export * from '../Sidebar/SeparatorItem';
 export * from '../Sidebar/Sidebar';
 export * from '../Sidebar/SidebarLayout';
+export * from '../Sidebar/FooterWrapper';
+export * from '../Sidebar/HeaderWrapper';

package/lib/Sidebar/index.js

@@ -33,4 +33,6 @@ __exportStar(require("../Sidebar/Separator"), exports);
 __exportStar(require("../Sidebar/SeparatorItem"), exports);
 __exportStar(require("../Sidebar/Sidebar"), exports);
 __exportStar(require("../Sidebar/SidebarLayout"), exports);
+__exportStar(require("../Sidebar/FooterWrapper"), exports);
+__exportStar(require("../Sidebar/HeaderWrapper"), exports);
 //# sourceMappingURL=index.js.map

package/lib/SourceCode/SourceCode.d.ts

@@ -2,6 +2,7 @@
 interface CommonCodeProps {
     withLineNumbers?: boolean;
     startLineNumber?: number;
+    className?: string;
 }
 export interface SourceCodeProps extends CommonCodeProps {
     lang: string;
@@ -27,6 +28,6 @@ export interface ExternalSource {
     properties?: any;
     operation?: any;
 }
-export declare function Code({ source, lang, dataTestId, withLineNumbers, startLineNumber, }: CodeProps): JSX.Element;
-export declare function SourceCode({ lang, source, externalSource, onCopyClick, withCopyButton, dataTestId, withLineNumbers, startLineNumber, }: SourceCodeProps): JSX.Element;
+export declare function Code({ source, lang, dataTestId, withLineNumbers, startLineNumber, className, }: CodeProps): JSX.Element;
+export declare function SourceCode({ lang, source, externalSource, onCopyClick, withCopyButton, dataTestId, withLineNumbers, startLineNumber, className, }: SourceCodeProps): JSX.Element;
 export {};

package/lib/SourceCode/SourceCode.js

@@ -28,16 +28,16 @@ const react_1 = __importStar(require("react"));
 const utils_1 = require("../utils");
 const SamplesPanelControls_1 = require("../SamplesPanelControls");
 const CopyButton_1 = require("../CopyButton");
-function Code({ source, lang, dataTestId, withLineNumbers, startLineNumber, }) {
+function Code({ source, lang, dataTestId, withLineNumbers, startLineNumber, className, }) {
     const highlightedCode = (0, utils_1.highlight)(source, lang);
-    return (react_1.default.createElement(SamplesPanelControls_1.PreformattedCodeBlock, { dangerouslySetInnerHTML: {
+    return (react_1.default.createElement(SamplesPanelControls_1.PreformattedCodeBlock, { className: className, dangerouslySetInnerHTML: {
             __html: withLineNumbers
                 ? (0, utils_1.addLineNumbers)(highlightedCode, startLineNumber)
                 : highlightedCode,
         }, "data-cy": dataTestId }));
 }
 exports.Code = Code;
-function SourceCode({ lang, source, externalSource, onCopyClick, withCopyButton, dataTestId = 'source-code', withLineNumbers, startLineNumber, }) {
+function SourceCode({ lang, source, externalSource, onCopyClick, withCopyButton, dataTestId = 'source-code', withLineNumbers, startLineNumber, className, }) {
     const [sourceCode, setSourceCode] = (0, react_1.useState)(source !== null && source !== void 0 ? source : '');
     // The same initial value should be returned for ssr and frontend to avoid issues
     // Because we don't have session storage in ssr and can't get the security details there
@@ -52,9 +52,9 @@ function SourceCode({ lang, source, externalSource, onCopyClick, withCopyButton,
     if (withCopyButton) {
         return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { data: sourceCode, onCopyClick: onCopyClick, "data-component-name": "SourceCode/SourceCode" }, ({ renderCopyButton }) => (react_1.default.createElement(SamplesPanelControls_1.SampleControlsWrap, null,
             react_1.default.createElement(SamplesPanelControls_1.SampleControls, { "data-cy": "copy-button" }, renderCopyButton()),
-            react_1.default.createElement(Code, { lang: lang, source: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, dataTestId: dataTestId })))));
+            react_1.default.createElement(Code, { lang: lang, source: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, dataTestId: dataTestId, className: className })))));
     }
-    return (react_1.default.createElement(Code, { dataTestId: dataTestId, lang: lang, source: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, "data-component-name": "SourceCode/SourceCode" }));
+    return (react_1.default.createElement(Code, { dataTestId: dataTestId, className: className, lang: lang, source: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, "data-component-name": "SourceCode/SourceCode" }));
 }
 exports.SourceCode = SourceCode;
 //# sourceMappingURL=SourceCode.js.map

package/lib/globalStyle.js

@@ -1982,10 +1982,18 @@ exports.styles = (0, styled_components_1.css) `
     ${apiLogsTable}
     ${pages}
     ${modal}
+
+    --api-onboarding-table-text-color: #4e5356;
+
+    background-color: var(--background-color);
+    color: var(--text-color);
+    font-family: var(--font-family-base);
   }
 
   :root.dark {
     ${darkColors_1.darkMode};
+
+    --api-onboarding-table-text-color: #ffffff;
   }
 
   :root.notransition * {

package/lib/index.d.ts

@@ -23,3 +23,4 @@ export * from './types/config';
 export * from './config';
 export * from './Pages';
 export * from './Markdown';
+export * from './ReferenceDocs';

package/lib/index.js

@@ -39,4 +39,5 @@ __exportStar(require("./types/config"), exports);
 __exportStar(require("./config"), exports);
 __exportStar(require("./Pages"), exports);
 __exportStar(require("./Markdown"), exports);
+__exportStar(require("./ReferenceDocs"), exports);
 //# sourceMappingURL=index.js.map

package/lib/mocks/hooks/index.d.ts

@@ -13,4 +13,4 @@ export declare function useSidebarSiblingsData(): {
 };
 export declare function usePageSharedData<T = unknown>(_id: string): T;
 export declare function useCatalog(_items: ResolvedNavItem[], _config: CatalogConfig): FilteredCatalog;
-export {};
+export { useGlobalData } from '../useGlobalData';

package/lib/mocks/hooks/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCatalog = exports.usePageSharedData = exports.useSidebarSiblingsData = exports.useThemeConfig = void 0;
+exports.useGlobalData = exports.useCatalog = exports.usePageSharedData = exports.useSidebarSiblingsData = exports.useThemeConfig = void 0;
 function useThemeConfig() {
     return {
         search: {
@@ -69,4 +69,6 @@ function useCatalog(_items, _config) {
     throw new Error('Mock not implemented yet.');
 }
 exports.useCatalog = useCatalog;
+var useGlobalData_1 = require("../useGlobalData");
+Object.defineProperty(exports, "useGlobalData", { enumerable: true, get: function () { return useGlobalData_1.useGlobalData; } });
 //# sourceMappingURL=index.js.map

package/lib/mocks/useGlobalData.d.ts

@@ -0,0 +1 @@
+export declare function useGlobalData(): Record<string, unknown>;

package/lib/mocks/useGlobalData.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGlobalData = void 0;
+function useGlobalData() {
+    return {};
+}
+exports.useGlobalData = useGlobalData;
+//# sourceMappingURL=useGlobalData.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "Shared UI components lib",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/Button/Button.tsx

@@ -67,10 +67,14 @@ export const baseButtonStyles = css`
   }
 `;
 
-const StyledButton = styled.button.attrs(({ color = 'default', extraClass }: ButtonProps) => ({
-  className: `button-color-${color}${extraClass ? ` ${extraClass}` : ''}`,
-  'data-component-name': 'Button/Button',
-}))<ButtonProps>`
+const StyledButton = styled.button.attrs(
+  ({ color = 'default', extraClass, variant }: ButtonProps) => ({
+    className: `button-color-${color}${variant ? ` button-variant-${variant}` : ''}${
+      extraClass ? ` ${extraClass}` : ''
+    }`,
+    'data-component-name': 'Button/Button',
+  }),
+)<ButtonProps>`
   text-decoration: none;
   text-align: center;
 

package/src/Catalog/Filter.tsx

@@ -8,7 +8,7 @@ export function Filter({ filter }: { filter: ResolvedFilter }) {
   if (!filter.parentUsed) return null;
   return (
     <FilterGroup key={filter.property + filter.title}>
-      <FilterTitle>{filter.title} filter</FilterTitle>
+      <FilterTitle>{filter.title}</FilterTitle>
       {filter.type === 'select' ? (
         <StyledSelect
           onChange={(e) => filter.selectOption(e.target.value)}

package/src/Markdown/Admonition.tsx

@@ -9,6 +9,7 @@ interface AdmonitionTypeProps {
 
 export interface AdmonitionProps extends Partial<AdmonitionTypeProps> {
   name?: string;
+  className?: string;
   'data-source'?: string;
   'data-hash'?: string;
 }
@@ -17,12 +18,14 @@ export function Admonition({
   type = 'info',
   name,
   children,
+  className,
   'data-source': dataSource,
   'data-hash': dataHash,
 }: React.PropsWithChildren<AdmonitionProps>): JSX.Element {
   return (
     <Wrapper
       type={type}
+      className={className}
       data-component-name="Markdown/Admonition"
       data-source={dataSource}
       data-hash={dataHash}

package/src/Profile/Profile.tsx

@@ -10,7 +10,7 @@ export interface ProfileProps {
   onClick?: () => void;
 }
 
-function ProfileComponent({ name, imageUrl, onClick, color }: ProfileProps): JSX.Element {
+function ProfileComponent({ name = 'User', imageUrl, onClick, color }: ProfileProps): JSX.Element {
   if (imageUrl) {
     return (
       <ProfileWrapper onClick={onClick}>

package/src/ReferenceDocs/ClearButton.tsx

@@ -0,0 +1,32 @@
+import React, { memo } from 'react';
+import styled from 'styled-components';
+
+// FIXME!!!
+
+interface ClearButtonProps {
+  className?: string;
+  style?: React.CSSProperties;
+  handleClear?: () => void;
+}
+
+const ClearButtonComponent = ({ className, style, handleClear }: ClearButtonProps): JSX.Element => (
+  <button className={className} style={style} onClick={handleClear}>
+    ✕
+  </button>
+);
+
+export const ClearButton = styled(memo<ClearButtonProps>(ClearButtonComponent))`
+  z-index: 1;
+  position: absolute;
+  right: 24px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #89949f;
+  background: none;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    color: #fff;
+  }
+`;

package/src/ReferenceDocs/DevOnboardingTryItSecurity.tsx

@@ -0,0 +1,161 @@
+import * as React from 'react';
+import { Button } from '@theme';
+import styled from 'styled-components';
+
+import type { TryItSecurityAppsProps } from './TryItSecurityApps';
+
+import { usePageData } from '@portal/hooks/usePageData';
+
+import { Dropdown } from './Dropdown';
+
+export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
+  const apiId = (props as any).apiId;
+
+  // @ts-ignore
+  const { userData } = usePageData('userData') || {};
+
+  // TODO: handle error
+  const [_error, setError] = React.useState<string | undefined>();
+  const [apps, setApps] = React.useState<{ id: string; title: string }[] | undefined>();
+  const [appId, setAppId] = React.useState<string | undefined>('');
+  const [loading, setLoading] = React.useState(true);
+  const [appLoading, setAppLoading] = React.useState(false);
+
+  const [selectedAppSecret, setSelectedAppSecret] = React.useState<string | undefined>();
+
+  const [acceptValueUpdate, setAcceptValueUpdate] = React.useState(true);
+  const initialRender = React.useRef(true);
+
+  React.useEffect(() => {
+    if (!props.value && initialRender.current) return;
+    if (acceptValueUpdate) {
+      setAcceptValueUpdate(false);
+    } else {
+      setAppId('');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.value]);
+
+  React.useEffect(() => {
+    initialRender.current = false;
+    const prevAppId = sessionStorage.getItem('redocly_onboarding:prevAppId');
+    if (prevAppId) {
+      setAppId(prevAppId);
+    }
+    if (userData?.isAuthenticated) {
+      fetch(`/api/api-keys/api-products/${apiId}/access?expand=1`).then((res) => {
+        return res
+          .json()
+          .then((data: any) => {
+            if (res.ok) {
+              setApps(data.apps);
+            } else {
+              setError(data.message);
+            }
+          })
+          .catch(() => setError('Something went wrong'))
+          .finally(() => setLoading(false));
+      });
+    }
+  }, [apiId, userData?.isAuthenticated]);
+
+  React.useEffect(() => {
+    sessionStorage.setItem('redocly_onboarding:prevAppId', appId || '');
+  }, [appId]);
+
+  if (!apiId) {
+    return null;
+  }
+
+  const loadAppCredentials = (appId: string) => {
+    setAppLoading(true);
+    fetch(`/api/api-keys/apps/${appId}`).then((res) => {
+      return res
+        .json()
+        .then((data: any) => {
+          if (res.ok) {
+            const cred = data.credentials.find((cred: any) => cred.status === 'approved');
+            setAcceptValueUpdate(true);
+            setSelectedAppSecret(cred.clientSecret);
+          } else {
+            setError(data.message);
+          }
+        })
+        .catch(() => setError('Something went wrong'))
+        .finally(() => setAppLoading(false));
+    });
+  };
+
+  const placeholder = loading ? 'Loading your apps...' : undefined;
+
+  return (
+    <>
+      <FormLabel htmlFor="server">Select app: </FormLabel>
+      <FormControl>
+        <TryItDropdown
+          placeholder={placeholder}
+          value={appId || placeholder}
+          options={apps?.map((app) => ({ title: app.title, value: app.id })) || []}
+          fullWidth
+          onChange={({ value }: { value: string }) => {
+            setAppId(value);
+            loadAppCredentials(value);
+          }}
+        />
+        <UseKeyButton
+          disabled={!selectedAppSecret || appLoading}
+          color="secondary"
+          blinking={appLoading}
+          onClick={() => selectedAppSecret && props.onChange(selectedAppSecret)}
+        >
+          Use key
+        </UseKeyButton>
+      </FormControl>
+    </>
+  );
+}
+
+const TryItDropdown = styled(Dropdown)`
+  .dropdown-select,
+  label {
+    background-color: var(--panel-try-it-dropdown-background-color);
+    border: var(--panel-try-it-dropdown-border);
+    color: var(--panel-try-it-dropdown-color);
+  }
+`;
+
+const FormControl = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+const FormLabel = styled.label<{ required?: boolean }>`
+  padding-bottom: 6px;
+  display: block;
+  white-space: nowrap;
+  line-height: 1em;
+
+  ${({ required }) =>
+    required &&
+    `
+      &:after {
+        display: inline-block;
+        content: '*';
+        margin-left: 4px;
+        color: var(--color-error-500);
+      }
+    `}
+`;
+
+const UseKeyButton = styled(Button)`
+  width: 100px;
+  align-self: flex-end;
+  margin-top: 16px;
+  margin-right: 0;
+`;

package/src/ReferenceDocs/Dropdown.tsx

@@ -0,0 +1,202 @@
+import React, { memo, useMemo } from 'react';
+import styled from 'styled-components';
+
+export interface DropdownOption {
+  idx?: number;
+  value: string;
+  title?: string;
+  serverUrl?: string;
+  label?: string;
+}
+
+export interface DropdownProps {
+  options: DropdownOption[];
+  onChange: (option: DropdownOption) => void;
+  handleClear?: () => void;
+  clearable?: boolean;
+  ariaLabel?: string;
+  className?: string;
+  placeholder?: string;
+  value?: string;
+  dense?: boolean;
+  fullWidth?: boolean;
+  variant?: 'dark' | 'light';
+}
+
+export interface ArrowIconProps {
+  className?: string;
+  variant?: 'light' | 'dark';
+  style?: React.CSSProperties;
+}
+
+import { ClearButton } from './ClearButton';
+
+const ArrowSvg = ({ className, style }: ArrowIconProps): JSX.Element => (
+  <svg
+    className={className}
+    style={style}
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="6 9 12 15 18 9" />
+  </svg>
+);
+
+const ArrowIcon = styled(ArrowSvg)`
+  position: absolute;
+  pointer-events: none;
+  z-index: 1;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: 8px;
+  margin: auto;
+  text-align: center;
+  polyline {
+    color: ${(props) => props.variant === 'dark' && 'white'};
+  }
+`;
+
+const DropdownComponent = ({
+  options,
+  onChange,
+  handleClear,
+  clearable,
+  placeholder,
+  value = '',
+  className,
+  variant = 'light',
+}: DropdownProps): JSX.Element => {
+  const handleOnChange = (event: any) => {
+    const { selectedIndex } = event.target;
+    const index = placeholder || !value ? selectedIndex - 1 : selectedIndex;
+    onChange(options[index]);
+  };
+
+  const renderOptions = useMemo(
+    () =>
+      options.map(({ idx, value, title }: DropdownOption, index) => {
+        const normalizedValue = normalizeText(value);
+        return (
+          <option
+            key={idx || normalizedValue + index}
+            value={normalizedValue}
+            className="dropdown-option"
+          >
+            {title || normalizedValue}
+          </option>
+        );
+      }),
+    [options],
+  );
+
+  const normalizedValue = normalizeText(value);
+  const title = options.find((option) => option.value === value)?.title || normalizedValue;
+
+  return (
+    <div className={className + ' dropdown-wrapper'}>
+      <ArrowIcon variant={variant} />
+      {clearable && normalizedValue?.length > 0 && <ClearButton handleClear={handleClear} />}
+      <select onChange={handleOnChange} value={normalizedValue} className="dropdown-select">
+        {placeholder && (
+          <option disabled hidden value={placeholder}>
+            {placeholder}
+          </option>
+        )}
+        {!normalizedValue && !placeholder && <option disabled />}
+        {renderOptions}
+      </select>
+      <label>{title}</label>
+    </div>
+  );
+};
+
+export const Dropdown = styled(memo<DropdownProps>(DropdownComponent))`
+
+box-sizing: border-box;
+  outline: none;
+  display: inline-block;
+  border-radius: var(--border-radius);
+  vertical-align: bottom;
+  position: relative;
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+  cursor: pointer;
+  text-transform: none;
+
+  label {
+    box-sizing: border-box;
+    min-width: 90px;
+    height: 36px;
+    outline: none;
+    display: inline-block;
+    color: var(--dropdown-text-color);
+    border-radius: var(--border-radius);
+    border: var(--dropdown-border);
+    padding: var(--dropdown-padding);
+    vertical-align: bottom;
+    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+    text-transform: none;
+    line-height: inherit;
+    font-size: var(--dropdown-font-size);
+    font-family: inherit;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+
+    &,
+    &:hover,
+    &:focus-within {
+      border: 1px solid var(--border-color);
+      box-shadow: none;
+    }
+
+    ${({ variant }) => (variant === 'dark' ? darkDropdownStyle : '')};
+  }
+
+  .dropdown-select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    border: none;
+    appearance: none;
+    cursor: pointer;
+
+    color: var(--text-color);
+    line-height: inherit;
+    font-size: 14px;
+    font-family: inherit;
+    padding: var(--dropdown-padding);
+    ${({ variant }) => (variant === 'dark' ? darkDropdownStyle : '')};
+
+`;
+
+const darkDropdownStyle = `
+  background-color: var(--panel-samples-dropdown-background-color);
+  border: var(--panel-samples-dropdown-border);
+  color: var(--panel-samples-dropdown-color);
+
+  &,
+  &:hover,
+  &:focus-within {
+    border: none;
+    box-shadow: none;
+  }
+`;
+
+function isString<T>(value: T | string): value is string {
+  return typeof value === 'string';
+}
+
+export const normalizeText = (description?: string | Record<string, any>): string =>
+  isString(description) ? description : description?.raw;

package/src/ReferenceDocs/TryItSecurityApps.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { useGlobalData } from '@portal/hooks';
+
+import { DevOnboardingTryItSecurity } from './DevOnboardingTryItSecurity';
+
+export type TryItSecurityAppsProps = {
+  apiId?: string;
+  value?: string;
+  onChange: (newSecretKey: string) => void;
+};
+
+export function TryItSecurityApps(props: TryItSecurityAppsProps) {
+  const { hasDeveloperOnboarding } = useGlobalData() || {};
+
+  return hasDeveloperOnboarding && props.apiId ? <DevOnboardingTryItSecurity {...props} /> : null;
+}