@redocly/theme 0.18.2 → 0.18.3-patch.1

package/lib/components/Select/Select.js

@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const icons_1 = require("../../icons");
 const hooks_1 = require("../../hooks");
-const Select = ({ className, selected, options, dataAttributes, withArrow, triggerEvent = 'click', onChange, }) => {
+const Select = ({ className, selected, options, dataAttributes, withArrow, triggerEvent = 'click', onChange, placement, alignment, icon, onlyIcon, }) => {
     const selectRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [_selected, setSelected] = (0, react_1.useState)(selected);
@@ -56,9 +56,10 @@ const Select = ({ className, selected, options, dataAttributes, withArrow, trigg
     }, [selected]);
     return (react_1.default.createElement(exports.SelectContainer, Object.assign({}, dataAttributes, { "data-testid": "select", className: className, ref: selectRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
         react_1.default.createElement(exports.SelectInput, null,
-            react_1.default.createElement(exports.SelectInputValue, { withArrow: withArrow }, _selected),
+            !onlyIcon && (react_1.default.createElement(exports.SelectInputValue, { withIcon: withArrow || !!icon }, _selected)),
+            icon,
             withArrow ? isOpen ? react_1.default.createElement(icons_1.ArrowIcon, { direction: "up" }) : react_1.default.createElement(icons_1.ArrowIcon, { direction: "down" }) : null),
-        isOpen && (react_1.default.createElement(exports.SelectList, null, options.map((option, index) => (react_1.default.createElement(exports.SelectListItem, { key: index, onClick: () => handleSelect(option) }, option)))))));
+        isOpen && (react_1.default.createElement(exports.SelectList, { placement: placement, alignment: alignment }, options.map((option, index) => (react_1.default.createElement(exports.SelectListItem, { key: index, onClick: () => handleSelect(option) }, option)))))));
 };
 exports.Select = Select;
 exports.SelectContainer = styled_components_1.default.div `
@@ -85,12 +86,14 @@ exports.SelectInput = styled_components_1.default.div `
 `;
 exports.SelectInputValue = styled_components_1.default.div `
   pointer-events: none;
-  ${({ withArrow }) => (withArrow ? 'margin-right: 8px;' : '')}
+  ${({ withIcon }) => (withIcon ? 'margin-right: 8px;' : '')}
 `;
 exports.SelectList = styled_components_1.default.ul `
   position: absolute;
-  top: 100%;
-  left: 0;
+  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
+  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
+  left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
+  right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   margin: 0;
   min-width: var(--select-list-min-width);
   max-width: var(--select-list-max-width);

package/lib/components/Select/index.d.ts

@@ -1 +1,2 @@
 export * from '../../components/Select/Select';
+export * from '../../components/Select/styledVariables';

package/lib/components/Select/index.js

@@ -15,4 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../components/Select/Select"), exports);
+__exportStar(require("../../components/Select/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/Select/styledVariables.d.ts

@@ -0,0 +1 @@
+export declare const select: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Select/styledVariables.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.select = void 0;
+const styled_components_1 = require("styled-components");
+exports.select = (0, styled_components_1.css) `
+  /**
+    * @tokens Select
+    * */
+  --select-font-size: var(--font-size-base); // @presenter FontSize
+  --select-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --select-line-height: var(--line-height-base); // @presenter LineHeight
+  --select-text-color: var(--text-secondary); // @presenter Color
+  --select-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --select-input-padding-horizontal: 16px;  // @presenter Spacing
+  --select-input-padding-vertical: 6px;  // @presenter Spacing
+  --select-input-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --select-list-min-width: 100px;
+  --select-list-max-width: 300px;
+  --select-list-padding: var(--spacing-xxs); // @presenter Spacing
+  --select-list-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --select-list-background-color: var(--background-color); // @presenter Color
+  --select-list-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
+
+  --select-list-item-horizontal-padding: var(--spacing-base); // @presenter Spacing
+  --select-list-item-vertical-padding: var(--spacing-xs); // @presenter Spacing
+  --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-list-item-active-background-color: var(--bg-raised); // @presenter Color
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/Separator/Separator.js

@@ -9,12 +9,20 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
 const SeparatorItem_1 = require("../../components/Separator/SeparatorItem");
 const hooks_1 = require("../../mocks/hooks");
+const hooks_2 = require("../../hooks");
 function Separator({ item, className }) {
     const { translate } = (0, hooks_1.useTranslate)();
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/Separator", className: className },
+    const { sidebar } = (0, hooks_2.useThemeConfig)();
+    const separatorLine = item.separatorLine || (sidebar === null || sidebar === void 0 ? void 0 : sidebar.separatorLine);
+    const linePosition = item.linePosition || (sidebar === null || sidebar === void 0 ? void 0 : sidebar.linePosition) || 'bottom';
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/Separator", className: className, linePosition: linePosition, withLabel: !!item.label },
         react_1.default.createElement(SeparatorItem_1.SeparatorItem, null, translate(item.labelTranslationKey, item.label)),
-        item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
+        separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }
 exports.Separator = Separator;
-const Wrapper = styled_components_1.default.div ``;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: ${({ linePosition }) => (linePosition === 'top' ? 'column-reverse' : 'column')};
+  margin-top: ${({ withLabel }) => (withLabel ? 'var(--sidebar-item-separator-offset)' : '0')};
+`;
 //# sourceMappingURL=Separator.js.map

package/lib/components/Separator/SeparatorItem.js

@@ -11,24 +11,20 @@ exports.SeparatorItem = (0, styled_components_1.default)(MenuItemLabel_1.MenuIte
     className,
 })) `
   cursor: default;
-  font-weight: var(--font-weight-bold);
-  color: var(--sidebar-separator-item-color);
-  font-family: var(--sidebar-item-separator-font-family);
+  font-weight: var(--sidebar-item-separator-font-weight);
+  color: var(--sidebar-item-separator-text-color);
   font-size: var(--sidebar-item-separator-font-size);
   text-transform: var(--sidebar-item-separator-text-transform);
   background: var(--mobile-menu-background);
+  border-radius: 0;
+  padding: var(--sidebar-item-separator-padding);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     background: var(--sidebar-item-separator-background-color);
   }
 
-  *:not(:first-child) > & {
-    margin-top: var(--sidebar-item-separator-offset);
-  }
-
   :hover {
-    color: inherit;
-    background-color: inherit;
+    color: var(--sidebar-item-separator-text-color);
   }
 `;
 //# sourceMappingURL=SeparatorItem.js.map

package/lib/components/Separator/SeparatorLine.js

@@ -9,8 +9,12 @@ exports.SeparatorLine = styled_components_1.default.div.attrs(({ className }) =>
     'data-component-name': 'Sidebar/SeparatorLine',
     className,
 })) `
-  height: 1px;
-  background-color: var(--sidebar-item-separator-line-color);
-  margin: var(--sidebar-item-separator-offset) 0 var(--sidebar-item-padding-vertical) 0;
+  height: var(--sidebar-item-separator-border-width);
+  background-color: var(--sidebar-item-separator-border-color);
+  margin: var(--mobile-sidebar-item-separator-line-offset);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    margin: var(--sidebar-item-separator-line-offset);
+  }
 `;
 //# sourceMappingURL=SeparatorLine.js.map

package/lib/components/Sidebar/ApiCallItem.d.ts

@@ -1,9 +1,5 @@
 /// <reference types="react" />
+import { Tag } from '../../components/Tag';
 import type { MenuItemProps } from '../../components/Sidebar/types';
 export declare function ApiCallItem({ item, className }: MenuItemProps): JSX.Element;
-export declare const Badge: import("styled-components").StyledComponent<"span", any, {
-    className: `operation-type ${string}`;
-    'data-component-name': string;
-} & {
-    type: string;
-}, "className" | "data-component-name">;
+export declare const HttpTag: import("styled-components").StyledComponent<typeof Tag, any, {}, never>;

package/lib/components/Sidebar/ApiCallItem.js

@@ -3,10 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Badge = exports.ApiCallItem = void 0;
+exports.HttpTag = exports.ApiCallItem = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const OperationBadge_1 = require("../../components/OperationBadge");
+const Tag_1 = require("../../components/Tag");
 const MenuLinkItem_1 = require("../../components/Menu/MenuLinkItem");
 const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
 const MenuItemLabel_1 = require("../../components/Menu/MenuItemLabel");
@@ -14,12 +14,14 @@ function ApiCallItem({ item, className }) {
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/ApiCallItem", className: className },
         react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
             react_1.default.createElement(Label, { active: item.active },
-                react_1.default.createElement(exports.Badge, { type: item.httpVerb || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb),
-                item.label)),
+                item.label,
+                react_1.default.createElement(exports.HttpTag, { color: item.httpVerb || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb))),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }
 exports.ApiCallItem = ApiCallItem;
 const Label = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
+  display: flex;
+  justify-content: space-between;
   color: var(--mobile-menu-item-text-color);
 
   ${({ theme }) => theme.mediaQueries.medium} {
@@ -27,15 +29,17 @@ const Label = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
   }
 `;
 const Wrapper = styled_components_1.default.div ``;
-exports.Badge = (0, styled_components_1.default)(OperationBadge_1.OperationBadge) `
+exports.HttpTag = (0, styled_components_1.default)(Tag_1.Tag) `
   flex-shrink: 0;
-  margin-top: 0;
-  width: 36px;
-  height: 14px;
-  font-size: var(--sidebar-item-badge-http-font-size);
-  font-family: var(--sidebar-item-badge-http-font-family);
-  font-weight: var(--sidebar-item-badge-http-font-weight);
-  border-radius: var(--sidebar-item-badge-http-border-radius);
-  color: var(--sidebar-item-badge-http-text-color);
+  margin: var(--sidebar-item-http-tag-margin);
+  text-transform: uppercase;
+
+  width: var(--sidebar-item-http-tag-width);
+  height: var(--sidebar-item-http-tag-height);
+
+  font-size: var(--sidebar-item-http-tag-font-size);
+  font-family: var(--sidebar-item-http-tag-font-family);
+  font-weight: var(--sidebar-item-http-tag-font-weight);
+  border-radius: var(--sidebar-item-http-tag-border-radius);
 `;
 //# sourceMappingURL=ApiCallItem.js.map

package/lib/components/Sidebar/FooterWrapper.js

@@ -6,15 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FooterWrapper = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 exports.FooterWrapper = styled_components_1.default.div `
+  padding: var(--sidebar-footer-padding-vertical) var(--sidebar-footer-padding-horizontal);
+
   ${({ collapsed }) => collapsed &&
     `
         position: sticky;
         bottom: 0;
+        padding: 0;
     `}
-  margin: var(--sidebar-offset-top) 0 var(--sidebar-spacing-unit) var(--sidebar-offset-left);
-  padding-top: var(--sidebar-spacing-unit);
-  padding-right: var(--sidebar-spacing-unit);
-  border-top: solid 1px var(--border-color);
 
   button {
     margin: 0;

package/lib/components/Sidebar/HeaderWrapper.js

@@ -10,7 +10,7 @@ exports.HeaderWrapper = styled_components_1.default.div.attrs(({ className }) =>
     className,
 })) `
   margin: var(--sidebar-offset-top) 0 0 var(--sidebar-offset-left);
-  padding-bottom: var(--sidebar-spacing-unit);
-  border-bottom: solid 1px var(--border-color);
+  padding-bottom: var(--sidebar-header-padding-bottom);
+  border-bottom: solid 1px var(--border-secondary);
 `;
 //# sourceMappingURL=HeaderWrapper.js.map

package/lib/components/Sidebar/SidebarLayout.js

@@ -37,6 +37,7 @@ const MobileSidebarButton_1 = require("../../components/Sidebar/MobileSidebarBut
 const MenuContainer_1 = require("../../components/Menu/MenuContainer");
 const SidebarSearch_1 = require("../../components/Search/SidebarSearch");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+const telemetry_1 = require("../../mocks/telemetry");
 const MobileSidebarIcon_1 = require("./MobileSidebarIcon");
 const StyledFooterWrapper = (0, styled_components_1.default)(FooterWrapper_1.FooterWrapper) `
   display: none;
@@ -65,7 +66,7 @@ function SidebarLayout({ versions, menu, footer, header, growContent, collapsed,
             react_1.default.createElement(MobileSidebarIcon_1.MobileSidebarIcon, null)))) : null) : (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/SidebarLayout", className: className },
         !(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 },
-            header ? react_1.default.createElement(HeaderWrapper_1.HeaderWrapper, null, header) : null,
+            header ? (react_1.default.createElement(HeaderWrapper_1.HeaderWrapper, { onClick: () => telemetry_1.telemetry.send('back_to_catalog_button_clicked', {}) }, header)) : null,
             versions ? react_1.default.createElement(react_1.default.Fragment, null, versions) : null,
             react_1.default.createElement(MenuContainer_1.MenuContainer, { growContent: growContent }, menu),
             footer && !isOpen ? (react_1.default.createElement(FooterWrapper_1.FooterWrapper, { "data-component-name": "Sidebar/FooterWrapper" }, footer)) : null)))));

package/lib/components/Sidebar/VersionPicker.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { SelectProps } from '../Select';
-export declare const VersionPicker: import("styled-components").StyledComponent<({ className, selected, options, dataAttributes, withArrow, triggerEvent, onChange, }: SelectProps) => JSX.Element, any, {
+export declare const VersionPicker: import("styled-components").StyledComponent<({ className, selected, options, dataAttributes, withArrow, triggerEvent, onChange, placement, alignment, icon, onlyIcon, }: SelectProps) => JSX.Element, any, {
     dataAttributes: {
         'data-component-name': string;
     };

package/lib/components/Sidebar/index.d.ts

@@ -11,3 +11,4 @@ export * from '../../components/Sidebar/FooterWrapper';
 export * from '../../components/Sidebar/HeaderWrapper';
 export * from '../../components/Sidebar/SidebarItemIcon';
 export * from '../../components/Sidebar/VersionPicker';
+export * from '../../components/Sidebar/styledVariables';

package/lib/components/Sidebar/index.js

@@ -27,4 +27,5 @@ __exportStar(require("../../components/Sidebar/FooterWrapper"), exports);
 __exportStar(require("../../components/Sidebar/HeaderWrapper"), exports);
 __exportStar(require("../../components/Sidebar/SidebarItemIcon"), exports);
 __exportStar(require("../../components/Sidebar/VersionPicker"), exports);
+__exportStar(require("../../components/Sidebar/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/Sidebar/styledVariables.d.ts

@@ -0,0 +1,2 @@
+export declare const sidebar: import("styled-components").FlattenSimpleInterpolation;
+export declare const versionPicker: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Sidebar/styledVariables.js

@@ -0,0 +1,215 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.versionPicker = exports.sidebar = void 0;
+const styled_components_1 = require("styled-components");
+exports.sidebar = (0, styled_components_1.css) `
+  /* === Sidebar === */
+
+  /**
+    * @tokens Sidebar logo
+    */
+
+  --sidebar-logo-max-height: 285px; // @presenter Spacing
+  --sidebar-logo-max-width: 285px; // @presenter Spacing
+  --sidebar-logo-padding: 2px; // @presenter Spacing
+
+  /**
+    * @tokens Sidebar typography
+    */
+  --sidebar-word-break: inherit; // @presenter WordBreak
+
+  /**
+    * @tokens Sidebar colors
+    * @presenter Color
+    */
+  --sidebar-background-color: var(--bg-base); // @presenter Color
+  --sidebar-border-color: var(--border-secondary); // @presenter Color
+
+  /**
+    * @tokens Sidebar spacing
+    * @presenter Spacing
+    */
+  --sidebar-spacing-unit: var(--spacing-base); // @presenter Spacing
+  --sidebar-width: 285px; // @presenter Spacing
+
+  --sidebar-offset-top: var(--sidebar-spacing-unit); // @presenter Spacing
+  --sidebar-offset-left: var(--sidebar-spacing-unit); // @presenter Spacing
+
+  --sidebar-header-padding-bottom: var(--sidebar-spacing-unit); // @presenter Spacing
+
+  --sidebar-chevron-size: var(--spacing-xs); // @presenter Spacing
+
+  /* === Sidebar Item === */
+
+  /**
+    * @tokens Sidebar item typography
+    */
+  --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily
+  --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize
+  --sidebar-item-font-weight: var(--font-weight-regular); // @presenter FontSize
+  --sidebar-item-line-height: var(--line-height-base); // @presenter LineHeight
+
+  /**
+    * @tokens Sidebar item colors
+    *  @presenter Color
+    */
+  --sidebar-item-text-color: var(--text-secondary); // @presenter Color
+  --sidebar-item-background-color: transparent; // @presenter Color
+
+  --sidebar-item-active-color: var(--text-primary); // @presenter Color
+  --sidebar-item-active-background-color: var(--bg-overlay); // @presenter Color
+
+  --sidebar-item-hover-background-color: var(--bg-raised); // @presenter Color
+  --sidebar-item-hover-color: var(--text-primary); // @presenter Color
+
+  /**
+    * @tokens Sidebar item spacing
+    * @presenter Spacing
+    */
+
+  --sidebar-item-nested-offset: var(--spacing-xs); // @presenter Spacing
+  --sidebar-margin-horizontal: var(--spacing-base); // @presenter Spacing
+  --sidebar-item-padding-vertical: var(--spacing-xs); // @presenter Spacing
+  --sidebar-item-padding-horizontal: var(--spacing-xs); // @presenter Spacing
+
+  /**
+    * @tokens Sidebar item border
+    */
+  --sidebar-item-border-radius: 6px; // @presenter BorderRadius
+
+  /** 
+    * @tokens Sidebar item icon
+    */
+  --sidebar-item-icon-size: var(--spacing-xl);
+  --sidebar-item-icon-border-radius: 100%;
+
+  /**
+    * @tokens Sidebar item sublabel
+    */
+  --sidebar-item-sublabel-font-family: inherit; // sublabel is for drilldown only but I would like to support it in general
+  --sidebar-item-sublabel-font-size: var(--font-size-base); // @presenter FontSize
+  --sidebar-item-sublabel-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --sidebar-item-sublabel-text-color: var(--sidebar-item-text-color); // @presenter Color
+
+  /**
+    * @tokens Sidebar item drilldown
+    */
+
+  --sidebar-item-drilldown-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-drilldown-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-text-drilldown-transform: inherit; // @presenter TextTransform
+  --sidebar-item-drilldown-text-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-item-drilldown-background-color: var(--sidebar-background-color); // @presenter Color
+
+  /**
+    * @tokens Sidebar item group
+    */
+  --sidebar-item-group-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-group-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-text-group-transform: inherit;
+  --sidebar-item-group-text-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-item-group-background-color: var(--sidebar-background-color); // @presenter Color
+  --sidebar-item-group-active-text-color: var(--sidebar-item-active-color); // @presenter Color
+  --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);
+
+  // we need a theme config for chevron-location: left (default), right-compact, right, none
+  // we need another theme config for chevron-style: up-down, down-up, right-down, down-right
+
+  --sidebar-group-item-chevron-size: var(--spacing-xs); // @presenter Spacing
+  --sidebar-group-item-chevron-color: var(--sidebar-item-text-color); // @presenter Color
+
+  /**
+    * @tokens Sidebar item separator
+    */
+  --sidebar-item-separator-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-separator-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-item-separator-font-weight: var(--sidebar-item-font-weight); // @presenter FontWeight
+  --sidebar-item-separator-text-transform: inherit; // @presenter TextTransform
+  --sidebar-item-separator-text-color: var(--text-placeholder); // @presenter Color
+
+  --sidebar-item-separator-background-color: var(--sidebar-background-color); // @presenter Color
+  --sidebar-item-separator-line-color: var(--border-primary); // @presenter Color
+  --sidebar-item-separator-offset: var(--spacing-sm); // @presenter Spacing
+  --sidebar-item-separator-line-offset: var(--spacing-xxs) var(--sidebar-margin-horizontal); // @presenter Spacing
+  --mobile-sidebar-item-separator-line-offset: var(--spacing-xxs) var(--spacing-xs); // @presenter Spacing
+  --sidebar-item-separator-border-width: 1px; // @presenter Spacing
+  --sidebar-item-separator-border-color: var(--border-primary); // @presenter Color
+  --sidebar-item-separator-padding: var(--spacing-xxs) var(--sidebar-item-padding-horizontal); // @presenter Spacing
+
+  /**
+   * @tokens Sidebar item http tag
+   */
+
+  --sidebar-item-http-tag-width: auto;
+  --sidebar-item-http-tag-height: 20px;
+  --sidebar-item-http-tag-font-family: var(--code-font-family); // @presenter FontFamily
+  --sidebar-item-http-tag-font-size: var(--font-size-sm); // @presenter FontSize
+  --sidebar-item-http-tag-font-weight: normal; //@presenter FontWeight
+  --sidebar-item-http-tag-border-radius: var(--border-radius-xlg); // @presenter BorderRadius
+  --sidebar-item-http-tag-margin: 0 0 0 5px;
+
+  /**
+    * @tokens Sidebar back button
+    */
+  --sidebar-back-button-font-family: var(--sidebar-item-font-family);
+  --sidebar-back-button-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-back-button-transform: inherit; // @presenter TextTransform
+  --sidebar-back-button-text-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-back-button-background-color: transparent; // @presenter Color
+  --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color); // @presenter Color
+  --sidebar-back-button-hover-background-color: transparent; // @presenter Color
+  --sidebar-back-button-icon-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-back-button-margin: 0 0 var(--spacing-lg) 0; // @presenter Spacing
+  --sidebar-back-padding-left: var(--spacing-xs); // @presenter Spacing
+  --sidebar-back-button-icon: none;
+
+  /** 
+  * @tokens Sidebar footer
+  */
+  --sidebar-footer-padding-vertical: var(--spacing-sm); // @presenter Spacing
+  --sidebar-footer-padding-horizontal: var(--spacing-lg); // @presenter Spacing
+  --sidebar-collapse-button-background-color: var(--bg-overlay); // @presenter Color
+  --sidebar-collapse-button-icon-color: var(--text-primary); // @presenter Color
+  --sidebar-collapse-button-border-color: var(--border-primary); // @presenter Color
+  --sidebar-collapse-button-active-background-color: unset; // @presenter Color
+  --sidebar-collapse-button-active-border-color: 0; // @presenter Color
+
+  --sidebar-controls-collapsed-gap: var(--spacing-xs); // @presenter Spacing
+  --sidebar-controls-collapsed-padding-vertical: var(--spacing-xs); // @presenter Spacing
+  --sidebar-controls-collapsed-padding-horizontal: var(--spacing-xxs); // @presenter Spacing
+ 
+  // @tokens End
+`;
+exports.versionPicker = (0, styled_components_1.css) `
+  /**
+    * @tokens Version picker
+    * */
+
+  --version-picker-font-size: var(--font-size-base); // @presenter FontSize
+  --version-picker-font-weight: var(--select-font-weight); // @presenter FontWeight
+  --version-picker-line-height: var(--select-line-height); // @presenter LineHeight
+  --version-picker-text-color: var(--select-text-color); // @presenter Color
+  --version-picker-border-radius: var(--select-border-radius); // @presenter BorderRadius
+  --version-picker-margin-vertical: 10px; // @presenter Spacing
+  --version-picker-margin-horizontal: 15px; // @presenter Spacing
+
+  --version-picker-input-padding-horizontal: var(--select-input-padding-horizontal); // @presenter Spacing
+  --version-picker-input-padding-vertical: var(--select-input-padding-vertical); // @presenter Spacing
+  --version-picker-input-border: 1px solid var(--border-primary); // @presenter Border
+  --version-picker-input-border-radius: var(--select-input-border-radius); // @presenter BorderRadius
+
+  --version-picker-list-min-width: var(--select-list-min-width);
+  --version-picker-list-max-width: var(--select-list-max-width);
+  --version-picker-list-padding: var(--select-list-padding); // @presenter Spacing
+  --version-picker-list-border-radius: var(--select-list-border-radius); // @presenter BorderRadius
+  --version-picker-list-background-color: var(--select-list-background-color); // @presenter Color
+  --version-picker-list-box-shadow: var(--select-list-box-shadow); // @presenter Shadow
+
+  --version-picker-list-item-horizontal-padding: var(--select-list-item-horizontal-padding); // @presenter Spacing
+  --version-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
+  --version-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
+  --version-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+  
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/Sidebar/types.d.ts

@@ -43,6 +43,7 @@ export interface NavItem {
     requiredPermission?: string;
     menuStyle?: MenuStyle;
     separatorLine?: boolean;
+    linePosition?: 'top' | 'bottom';
     version?: string;
     default?: boolean;
 }

package/lib/components/SidebarActions/CollapseSidebarButton.js

@@ -1,13 +1,53 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollapseSidebarButton = void 0;
 const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
 const styled_1 = require("../../components/SidebarActions/styled");
 const CollapseSidebarButton = ({ initialValue, onClick, }) => {
-    return (react_1.default.createElement(styled_1.StyledToggleRightPanelButton, { title: initialValue ? 'Show sidebar' : 'Hide sidebar', onClick: onClick }, initialValue ? react_1.default.createElement(styled_1.HideLeftPanelSVG, null) : react_1.default.createElement(styled_1.ShowLeftPanelSVG, null)));
+    return (react_1.default.createElement(ToggleButton, { title: initialValue ? 'Show sidebar' : 'Hide sidebar', onClick: onClick, collapsed: initialValue }, initialValue ? react_1.default.createElement(styled_1.HideLeftPanelSVG, null) : react_1.default.createElement(styled_1.ShowLeftPanelSVG, null)));
 };
 exports.CollapseSidebarButton = CollapseSidebarButton;
+const ToggleButton = (0, styled_components_1.default)(styled_1.StyledToggleRightPanelButton) `
+  background: var(--sidebar-collapse-button-background-color);
+  fill: var(--sidebar-collapse-button-icon-color);
+  margin-right: ${({ collapsed }) => (collapsed ? 0 : 'calc(var(--spacing-unit) * -9)')};
+  border: 1px solid var(--sidebar-collapse-button-border-color);
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-xxs);
+  height: var(--control-height-sm);
+  width: var(--control-height-sm);
+
+  ${({ collapsed }) => collapsed &&
+    (0, styled_components_1.css) `
+      background: var(--sidebar-collapse-button-active-background-color);
+      border: var(--sidebar-collapse-button-active-border-color);
+    `}
+`;
 //# sourceMappingURL=CollapseSidebarButton.js.map

package/lib/components/SidebarActions/SidebarActions.js

@@ -9,6 +9,7 @@ const ChangeViewButton_1 = require("../../components/SidebarActions/ChangeViewBu
 const ToggleRightPanelButton_1 = require("../../components/SidebarActions/ToggleRightPanelButton");
 const CollapseSidebarButton_1 = require("../../components/SidebarActions/CollapseSidebarButton");
 const styled_1 = require("../../components/SidebarActions/styled");
+const telemetry_1 = require("../../mocks/telemetry");
 var LayoutVariant;
 (function (LayoutVariant) {
     LayoutVariant["STACKED"] = "stacked";
@@ -17,10 +18,21 @@ var LayoutVariant;
 const SidebarActions = ({ showChangeLayoutButton, showRightPanelToggle, layout, initialShowRightPanelToggle, hideCollapseSidebarButton = false, collapsedSidebar, isOpenapiDocs, onChangeRightPanelViewClick, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }) => {
     return (react_1.default.createElement(styled_1.ControlsWrap, { className: className, isOpenapiDocs: isOpenapiDocs, isCollapsed: collapsedSidebar, "data-component-name": "Sidebar/Actions" },
         isOpenapiDocs && (react_1.default.createElement(styled_1.ControlsWrapChangeLayoutButtons, { isCollapsed: collapsedSidebar },
-            initialShowRightPanelToggle && (react_1.default.createElement(ToggleRightPanelButton_1.ToggleRightPanelButton, { showRightPanelToggle: showRightPanelToggle, onClick: onChangeRightPanelViewClick })),
-            showChangeLayoutButton && showRightPanelToggle && (react_1.default.createElement(ChangeViewButton_1.ChangeViewButton, { layout: layout, onClick: onChangeViewClick })))),
+            initialShowRightPanelToggle && (react_1.default.createElement(ToggleRightPanelButton_1.ToggleRightPanelButton, { showRightPanelToggle: showRightPanelToggle, onClick: () => {
+                    onChangeRightPanelViewClick();
+                    telemetry_1.telemetry.send('sidebar_samples_button_clicked', {});
+                } })),
+            showChangeLayoutButton && showRightPanelToggle && (react_1.default.createElement(ChangeViewButton_1.ChangeViewButton, { layout: layout, onClick: () => {
+                    onChangeViewClick();
+                    telemetry_1.telemetry.send('change_layout_button_clicked', {});
+                } })))),
         !collapsedSidebar && requestAccessButton,
-        !hideCollapseSidebarButton && (react_1.default.createElement(CollapseSidebarButton_1.CollapseSidebarButton, { initialValue: collapsedSidebar, onClick: onChangeCollapseSidebarClick }))));
+        !hideCollapseSidebarButton && (react_1.default.createElement(CollapseSidebarButton_1.CollapseSidebarButton, { initialValue: collapsedSidebar, onClick: () => {
+                onChangeCollapseSidebarClick();
+                collapsedSidebar
+                    ? telemetry_1.telemetry.send('sidebar_item_expanded', {})
+                    : telemetry_1.telemetry.send('sidebar_item_collapsed', {});
+            } }))));
 };
 exports.SidebarActions = SidebarActions;
 //# sourceMappingURL=SidebarActions.js.map