@redocly/theme 0.18.3-patch.0 → 0.18.3-patch.2

package/lib/components/Filter/Filter.js

@@ -10,7 +10,7 @@ const react_date_picker_1 = require("react-date-picker");
 const hooks_1 = require("../../mocks/hooks");
 const icons_1 = require("../../icons");
 const Select_1 = require("../../components/Select");
-function Filter({ filter }) {
+function Filter({ filter, filterValuesCasing, }) {
     var _a, _b;
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
@@ -33,7 +33,7 @@ function Filter({ filter }) {
         selectOptions.push(...filter.filteredOptions.map((option) => ({
             value: option.value,
             component: (react_1.default.createElement(FilterOption, { key: option.value, role: "link", onClick: () => filter.selectOption(option.value) },
-                react_1.default.createElement(FilterOptionLabel, null, translate(option.value)),
+                react_1.default.createElement(FilterOptionLabel, null, changeCasing(translate(option.value), filterValuesCasing)),
                 react_1.default.createElement(FilterOptionCount, null, option.count))),
         })));
     }
@@ -48,7 +48,7 @@ function Filter({ filter }) {
         react_1.default.createElement(FilterTitle, null,
             translate(filter.titleTranslationKey, filter.title),
             " "),
-        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { selected: selectedOptionComponent, options: selectOptions.map((option) => option.component) })) : filter.type === 'date-range' ? (react_1.default.createElement(react_1.default.Fragment, null,
+        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { withArrow: true, selected: selectedOptionComponent, options: selectOptions.map((option) => option.component) })) : filter.type === 'date-range' ? (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(DatePickerWrapper, null,
                 react_1.default.createElement("span", null, "From:"),
                 react_1.default.createElement(react_date_picker_1.DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : null, minDetail: "decade", maxDate: new Date(), onChange: (from) => {
@@ -66,11 +66,17 @@ function Filter({ filter }) {
             const id = 'filter--' + filter.property + '--' + slug(value.value);
             return (react_1.default.createElement(FilterOption, { key: id, role: "link", onClick: () => filter.toggleOption(value.value) },
                 react_1.default.createElement(icons_1.CheckboxIcon, { checked: filter.selectedOptions.has(value.value) }),
-                react_1.default.createElement(FilterOptionLabel, null, translate(value.value)),
+                react_1.default.createElement(FilterOptionLabel, null, changeCasing(translate(value.value), filterValuesCasing)),
                 react_1.default.createElement(FilterOptionCount, null, value.count)));
         }))));
 }
 exports.Filter = Filter;
+function changeCasing(str, casing) {
+    if (casing !== 'sentence')
+        return str;
+    const words = str.split(/[\s-_]+/);
+    return words.map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(' ');
+}
 const FilterGroup = styled_components_1.default.div `
   padding: var(--filter-group-padding);
 `;
@@ -80,6 +86,9 @@ const FilterOptionLabel = styled_components_1.default.label `
   font-weight: var(--filter-option-label-font-weight);
   margin: var(--filter-option-label-margin);
   color: var(--filter-option-label-color);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 `;
 const FilterOptionCount = styled_components_1.default.label `
   cursor: pointer;
@@ -100,7 +109,7 @@ const FilterTitle = styled_components_1.default.h4 `
   font-size: var(--filter-title-font-size);
   margin: var(--filter-title-margin);
 `;
-const FilterOption = styled_components_1.default.label `
+const FilterOption = styled_components_1.default.label.attrs({ 'data-cy': 'Filter/FilterOption' }) `
   display: flex;
   align-items: center;
   cursor: pointer;

package/lib/components/Filter/FilterContent.d.ts

@@ -5,7 +5,8 @@ interface FilterContentProps {
     filters: ResolvedFilter[];
     filterTerm: string;
     isMobile: boolean;
+    filterValuesCasing?: 'sentence';
 }
-export declare function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, }: FilterContentProps): JSX.Element;
+export declare function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, filterValuesCasing, }: FilterContentProps): JSX.Element;
 export declare const FilterItems: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/lib/components/Filter/FilterContent.js

@@ -11,23 +11,32 @@ const hooks_1 = require("../../mocks/hooks");
 const Catalog_1 = require("../../components/Catalog");
 const index_1 = require("../../components/Filter/index");
 const FilterPopover_1 = require("../../components/Filter/FilterPopover");
-function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, }) {
+function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, filterValuesCasing, }) {
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
         placeholder: 'theme.catalog.filters.placeholder',
         clearAll: 'theme.catalog.filters.clearAll',
     };
+    const hasActiveFilters = filters.some((filter) => {
+        if (filter.selectedOptions && filter.selectedOptions instanceof Set) {
+            return filter.selectedOptions.size;
+        }
+        else if (filter.selectedOptions.from && filter.selectedOptions.to) {
+            return true;
+        }
+    });
     const handleClearAll = () => {
         filters.forEach((filter) => filter.selectOption(''));
     };
     return (react_1.default.createElement(FilterContentWrapper, { isMobile: isMobile },
         react_1.default.createElement(Catalog_1.FilterControls, null,
             react_1.default.createElement(FilterPopover_1.StyledInput, { placeholder: translate(translationKeys.placeholder, 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
-        react_1.default.createElement(exports.FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(index_1.Filter, { filter: filter, key: filter.property + '-' + idx })))),
-        react_1.default.createElement(_theme_1.Button, { size: "small", onClick: handleClearAll }, translate(translationKeys.placeholder, 'Clear all filters'))));
+        react_1.default.createElement(exports.FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(index_1.Filter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing })))),
+        hasActiveFilters && (react_1.default.createElement(_theme_1.Button, { size: "small", onClick: handleClearAll }, translate(translationKeys.placeholder, 'Clear all filters')))));
 }
 exports.FilterContent = FilterContent;
 const FilterContentWrapper = styled_components_1.default.div `
+  width: var(--sidebar-width);
   display: none;
 
   ${_theme_1.Button} {

package/lib/components/Filter/FilterPopover.d.ts

@@ -2,10 +2,10 @@
 import type { ResolvedFilter } from '../../types/portal/src/shared/types/catalog';
 interface FilterPopoverProps {
     setIsAddingFilter: (value: boolean) => void;
-    setFilterTerm: (value: string) => void;
     filters: ResolvedFilter[];
-    filterTerm: string;
 }
-export declare function FilterPopover({ setIsAddingFilter, setFilterTerm, filters, filterTerm, }: FilterPopoverProps): JSX.Element;
-export declare const StyledInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare function FilterPopover({ setIsAddingFilter, filters }: FilterPopoverProps): JSX.Element;
+export declare const StyledInput: import("styled-components").StyledComponent<"input", any, {
+    'data-cy': string;
+}, "data-cy">;
 export {};

package/lib/components/Filter/FilterPopover.js

@@ -9,7 +9,15 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const _theme_1 = require("../../index.js");
 const FilterContent_1 = require("../../components/Filter/FilterContent");
 const hooks_1 = require("../../mocks/hooks");
-function FilterPopover({ setIsAddingFilter, setFilterTerm, filters, filterTerm, }) {
+function FilterPopover({ setIsAddingFilter, filters }) {
+    const [filterTerm, setFilterTerm] = react_1.default.useState('');
+    const filteredFilters = filters
+        .map((filter) => {
+        const options = filter.options.filter((option) => option.value.includes(filterTerm));
+        return options.length
+            ? Object.assign(Object.assign({}, filter), { filteredOptions: options }) : null;
+    })
+        .filter(Boolean);
     const translationKeys = {
         placeholder: 'theme.catalog.filters.placeholder',
         done: 'theme.catalog.filters.done',
@@ -22,7 +30,7 @@ function FilterPopover({ setIsAddingFilter, setFilterTerm, filters, filterTerm,
         react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, isMobile: true }),
         react_1.default.createElement(_theme_1.FilterControls, null,
             react_1.default.createElement(exports.StyledInput, { placeholder: translate(translationKeys.placeholder, 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
-        react_1.default.createElement(FilterContent_1.FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(_theme_1.Filter, { filter: filter, key: filter.property + '-' + idx }))))));
+        react_1.default.createElement(FilterContent_1.FilterItems, null, filteredFilters.map((filter, idx) => (react_1.default.createElement(_theme_1.Filter, { filter: filter, key: filter.property + '-' + idx }))))));
 }
 exports.FilterPopover = FilterPopover;
 const FilterPopoverWrapper = styled_components_1.default.aside `
@@ -56,7 +64,9 @@ const FilterPopoverHeaderLabel = styled_components_1.default.div `
   font-size: var(--filter-popover-header-label-font-size);
   font-weight: var(--filter-popover-header-label-font-weight);
 `;
-const FilterPopoverHeaderButton = styled_components_1.default.div `
+const FilterPopoverHeaderButton = styled_components_1.default.div.attrs({
+    'data-cy': 'FilterPopover/DoneButton',
+}) `
   color: var(--filter-popover-header-button-color);
   justify-self: end;
   font-size: var(--filter-popover-header-button-font-size);
@@ -64,7 +74,7 @@ const FilterPopoverHeaderButton = styled_components_1.default.div `
   height: var(--filter-popover-header-button-height);
   line-height: var(--filter-popover-header-button-height);
 `;
-exports.StyledInput = styled_components_1.default.input `
+exports.StyledInput = styled_components_1.default.input.attrs({ 'data-cy': 'FilterPopover/Input' }) `
   border: var(--filter-input-border);
   min-width: var(--filter-input-min-width);
   width: 100%;

package/lib/components/Filter/FilterTag.js

@@ -13,7 +13,7 @@ function FilterTag({ label, onClick }) {
         react_1.default.createElement(ClearIcon_1.ClearIcon, null)));
 }
 exports.FilterTag = FilterTag;
-const TagWrapper = styled_components_1.default.div `
+const TagWrapper = styled_components_1.default.div.attrs({ 'data-cy': 'Filter/FilterTag' }) `
   display: flex;
   align-items: center;
   white-space: nowrap;

package/lib/components/Footer/FooterColumn.js

@@ -9,6 +9,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
 const hooks_1 = require("../../mocks/hooks");
 const Image_1 = require("../../components/Image/Image");
+const telemetry_1 = require("../../mocks/telemetry");
 function FooterColumn({ column, className }) {
     const { translate } = (0, hooks_1.useTranslate)();
     const { items = [] } = column;
@@ -19,7 +20,7 @@ function FooterColumn({ column, className }) {
             if (columnItem.type === 'error') {
                 return null;
             }
-            return columnItem.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { key: columnItem.label + '_' + columnItemIndex }, translate(columnItem.labelTranslationKey, columnItem.label))) : (react_1.default.createElement(FooterLink, { key: columnItemIndex, to: columnItem.link, external: columnItem.external, target: columnItem.target, "data-cy": columnItem.label, iconsOnly: iconsOnly },
+            return columnItem.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { key: columnItem.label + '_' + columnItemIndex }, translate(columnItem.labelTranslationKey, columnItem.label))) : (react_1.default.createElement(FooterLink, { key: columnItemIndex, to: columnItem.link, external: columnItem.external, target: columnItem.target, "data-cy": columnItem.label, iconsOnly: iconsOnly, onClick: () => telemetry_1.telemetry.send('footer_item_clicked', {}) },
                 columnItem.icon || columnItem.srcSet ? (react_1.default.createElement(exports.FooterLinkIcon, null,
                     react_1.default.createElement(Image_1.Image, { src: columnItem.icon, srcSet: columnItem.srcSet }))) : null,
                 !iconsOnly && translate(columnItem.labelTranslationKey, columnItem.label)));

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

@@ -0,0 +1 @@
+export * from '../../components/LastUpdated/styledVariables';

package/lib/components/LastUpdated/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/LastUpdated/styledVariables"), exports);
+//# sourceMappingURL=index.js.map

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

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

package/lib/components/LastUpdated/styledVariables.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lastUpdated = void 0;
+const styled_components_1 = require("styled-components");
+exports.lastUpdated = (0, styled_components_1.css) `
+  --last-updated-text-color: var(--text-secondary);
+  --last-updated-font-size: var(--font-size-sm);
+  --last-updated-font-family: var(--font-family-base);
+  --last-updated-line-height: var(--line-height-base);
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/Menu/MenuItemLabel.js

@@ -19,6 +19,7 @@ exports.MenuItemLabel = styled_components_1.default.li.attrs(({ className }) =>
   font-family: var(--sidebar-item-font-family);
   font-size: var(--sidebar-item-font-size);
   font-weight: var(--sidebar-item-font-weight);
+  line-height: var(--sidebar-item-line-height);
   margin: var(--menu-item-label-margin);
   padding: var(--menu-item-label-padding);
   border-radius: var(--sidebar-item-border-radius);
@@ -39,6 +40,7 @@ exports.MenuItemLabel = styled_components_1.default.li.attrs(({ className }) =>
 
     ${({ theme }) => theme.mediaQueries.medium} {
       color: var(--sidebar-item-hover-color);
+      background: var(--sidebar-item-hover-background-color);
     }
   }
 

package/lib/components/Menu/MenuLinkItem.js

@@ -7,8 +7,9 @@ exports.MenuLinkItem = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const MenuLink_1 = require("../../components/Menu/MenuLink");
+const telemetry_1 = require("../../mocks/telemetry");
 function MenuLinkItem({ item, children, className, }) {
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/MenuLinkItem", className: className }, item.link ? (react_1.default.createElement(MenuLink_1.MenuLink, Object.assign({ to: item.link }, item), children)) : (children)));
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/MenuLinkItem", className: className, onClick: () => telemetry_1.telemetry.send('sidebar_item_clicked', { label: item.label, type: item.type }) }, item.link ? (react_1.default.createElement(MenuLink_1.MenuLink, Object.assign({ to: item.link }, item), children)) : (children)));
 }
 exports.MenuLinkItem = MenuLinkItem;
 const Wrapper = styled_components_1.default.span ``;

package/lib/components/Menu/MobileMenu.js

@@ -135,10 +135,10 @@ const ControlButtonLabel = styled_components_1.default.span `
   ${({ paddingDirection }) => paddingDirection === 'right' && 'padding-right: 8px'};
 `;
 const ProductNameWrapper = styled_components_1.default.div `
-  color: var(--menu-product-name-color);
-  border-radius: var(--menu-product-name-border-radius);
-  border: 1px solid var(--menu-product-name-border-color);
-  padding: var(--menu-product-name-padding);
-  margin: var(--menu-product-name-margin);
+  color: var(--mobile-menu-product-name-color);
+  border-radius: var(--mobile-menu-product-name-border-radius);
+  border: var(--mobile-menu-product-name-border);
+  padding: var(--mobile-menu-product-name-padding);
+  margin: var(--mobile-menu-product-name-margin);
 `;
 //# sourceMappingURL=MobileMenu.js.map

package/lib/components/Menu/styledVariables.js

@@ -7,7 +7,7 @@ exports.mobileMenu = (0, styled_components_1.css) `
       * @tokens Mobile Menu icons
       */
   --mobile-menu-icons-size: var(--spacing-md); // @presenter Spacing
-  --mobile-menu-search-icon-size: calc(var(--spacing-md) - 2px); // @presenter Spacing
+  --mobile-menu-search-icon-size: var(--spacing-md); // @presenter Spacing
 
   /**
       * @tokens Mobile Menu wrapper
@@ -60,9 +60,25 @@ exports.mobileMenu = (0, styled_components_1.css) `
   /**
       * @tokens Mobile Menu Login button
       * */
-  --mobile-menu-login-button-background: var(--color-primary-base); // @presenter Color
+  --mobile-menu-login-button-background: var(--color-primary-bg); // @presenter Color
   --mobile-menu-login-button-color: var(--color-primary-text); // @presenter Color
+  --mobile-menu-login-button-hover-color: var(--text-primary); // @presenter Color
+  --mobile-menu-login-button-border-color: var(--color-primary-border); // @presenter Color
+  --mobile-menu-login-button-border-radius: var(--border-radius-md); // @presenter Spacing
+  --mobile-menu-login-button-font-size: var(--font-size-base); // @presenter FontSize
+  --mobile-menu-login-button-font-family: inherit; // @presenter FontFamily
+  --mobile-menu-login-button-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --mobile-menu-login-button-line-height: var(--line-height-base); // @presenter LineHeight
 
+  /**
+      * @tokens Mobile Menu Product
+      * */
+  --mobile-menu-product-name-color: var(--mobile-menu-item-text-color);
+  --mobile-menu-product-name-border-radius: var(--mobile-menu-item-radius);
+  --mobile-menu-product-name-border: 1px solid var(--border-secondary);
+  --mobile-menu-product-name-padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
+  --mobile-menu-product-name-margin: var(--spacing-sm) var(--spacing-xs) 0 var(--spacing-xs);
+  
   // @tokens End
 `;
 exports.menu = (0, styled_components_1.css) `
@@ -80,11 +96,6 @@ exports.menu = (0, styled_components_1.css) `
   --menu-item-label-margin: 0 var(--sidebar-margin-horizontal);
   --menu-item-label-padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
 
-  --menu-product-name-color: var(--mobile-menu-item-text-color);
-  --menu-product-name-border-radius: var(--mobile-menu-item-radius);
-  --menu-product-name-border-color: 1px solid rgba(0, 0, 0, 0.06);
-  --menu-product-name-padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
-  --menu-product-name-margin: var(--spacing-sm) var(--spacing-xs) 0 var(--spacing-xs);
   // @tokens End
 `;
 //# sourceMappingURL=styledVariables.js.map

package/lib/components/Navbar/NavbarItem.d.ts

@@ -6,7 +6,7 @@ export interface NavbarItemProps {
     className?: string;
 }
 export declare function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null;
-export declare const NavbarMenuItemDropdown: import("styled-components").StyledComponent<({ children, className, items, withArrow, triggerEvent, onChange, dataAttributes, placement, alignment, }: import("../../components/Dropdown").DropdownProps) => JSX.Element, any, {
+export declare const NavbarMenuItemDropdown: import("styled-components").StyledComponent<({ children, className, items, withArrow, triggerEvent, onChange, dataAttributes, placement, alignment, icon, }: import("../../components/Dropdown").DropdownProps) => JSX.Element, any, {
     dataAttributes: {
         'data-component-name': string;
     };

package/lib/components/Navbar/NavbarItem.js

@@ -34,6 +34,7 @@ const Link_1 = require("../../mocks/Link");
 const utils_1 = require("../../mocks/utils");
 const hooks_1 = require("../../mocks/hooks");
 const utils_2 = require("../../utils");
+const telemetry_1 = require("../../mocks/telemetry");
 const Dropdown_1 = require("../../components/Dropdown");
 function NavbarItem({ navItem, className }) {
     const { pathname } = (0, react_router_dom_1.useLocation)();
@@ -43,7 +44,7 @@ function NavbarItem({ navItem, className }) {
         const item = navItem;
         const isActive = pathname ===
             (0, utils_2.withPathPrefix)((0, utils_1.getPathnameForLocale)(item.link, defaultLocale, currentLocale, locales));
-        return (react_1.default.createElement(exports.NavbarMenuItem, { active: isActive, "data-component-name": "Navbar/NavbarItem", className: className },
+        return (react_1.default.createElement(exports.NavbarMenuItem, { active: isActive, "data-component-name": "Navbar/NavbarItem", className: className, onClick: () => telemetry_1.telemetry.send('navbar_menu_item_clicked', { type: 'link' }) },
             react_1.default.createElement(exports.NavbarLink, { to: item.link, external: item.external, target: item.target, active: isActive },
                 item.icon ? react_1.default.createElement(exports.NavbarIcon, { url: item.icon }) : null,
                 react_1.default.createElement(NavbarLabel, null, translate(item.labelTranslationKey, item.label)))));
@@ -53,7 +54,7 @@ function NavbarItem({ navItem, className }) {
         const groupItems = item.items;
         const groupItemsComponents = groupItems.map((item, index) => (react_1.default.createElement(Link_1.Link, { key: `${item.label}_${index}`, to: item.link }, translate(item.labelTranslationKey, item.label))));
         return (react_1.default.createElement(exports.NavbarMenuItemDropdown, { items: groupItemsComponents, triggerEvent: "hover" },
-            react_1.default.createElement(exports.NavbarMenuItem, { active: false, "data-component-name": "Navbar/NavbarItem", className: className },
+            react_1.default.createElement(exports.NavbarMenuItem, { active: false, "data-component-name": "Navbar/NavbarItem", className: className, onClick: () => telemetry_1.telemetry.send('navbar_menu_item_clicked', { type: 'group' }) },
                 react_1.default.createElement(exports.NavbarIcon, { url: item.icon }),
                 react_1.default.createElement(NavbarLabel, null, translate(item.labelTranslationKey, item.label)))));
     }
@@ -79,17 +80,22 @@ exports.NavbarMenuItem = styled_components_1.default.li `
   padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
   text-align: center;
   line-height: var(--navbar-item-line-height);
-  border-radius: var(--navbar-item-border-radius);
   font-weight: var(--navbar-item-font-weight);
 
+  border-radius: var(--navbar-item-border-radius);
+  border-bottom: ${({ active }) => active ? 'var(--navbar-item-active-bottom-border)' : 'var(--navbar-item-bottom-border)'};
+
   background: ${({ active }) => active && 'var(--navbar-item-active-background-color)'};
   color: ${({ active }) => active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
+
   &:hover {
     color: var(--navbar-item-hover-text-color);
     text-decoration: var(--navbar-item-hover-text-decoration);
+    border-bottom: ${({ active }) => !active && 'var(--navbar-item-hover-bottom-border)'};
     background: ${({ active }) => active
     ? 'var(--navbar-item-active-background-color)'
     : 'var(--navbar-item-hover-background-color)'};
+
     ${exports.NavbarLink} {
       color: var(--navbar-item-hover-text-color);
       text-decoration: var(--navbar-item-hover-text-decoration);

package/lib/components/Navbar/styledVariables.js

@@ -22,16 +22,19 @@ exports.navbar = (0, styled_components_1.css) `
 
   --navbar-item-active-text-color: var(--text-primary);
   --navbar-item-active-text-decoration: none;
+  --navbar-item-active-bottom-border: 2px solid var(--navbar-item-active-text-color);
 
   --navbar-item-padding-vertical: var(--spacing-xxs);
   --navbar-item-padding-horizontal: var(--spacing-sm);
   --navbar-item-line-height: var(--line-height-base);
-  --navbar-item-border-radius: 32px;
-  --navbar-item-active-background-color: var(--bg-sunken);
+  --navbar-item-active-background-color: none;
+  --navbar-item-border-radius: 0;
+  --navbar-item-bottom-border: 2px solid transparent;
 
   --navbar-item-hover-text-color: var(--text-primary);
   --navbar-item-hover-text-decoration: none;
   --navbar-item-hover-background-color: none;
+  --navbar-item-hover-bottom-border: 2px solid var(--border-primary);
 
   --navbar-item-icon-width: 1.5em; // @presenter Spacing
   --navbar-item-icon-height: 1.5em; // @presenter Spacing

package/lib/components/NavbarLogo/NavbarLogo.js

@@ -8,12 +8,13 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
 const Image_1 = require("../../components/Image/Image");
+const telemetry_1 = require("../../mocks/telemetry");
 function NavbarLogo({ logo, className }) {
     if (!logo.image && !logo.srcSet) {
         return null;
     }
     const img = (react_1.default.createElement(Image_1.Image, { className: className, src: logo.image, srcSet: logo.srcSet, alt: logo.altText }));
-    return react_1.default.createElement(exports.LogoContainer, null, logo.link ? react_1.default.createElement(Link_1.Link, { to: logo.link }, img) : img);
+    return (react_1.default.createElement(exports.LogoContainer, null, logo.link ? (react_1.default.createElement(Link_1.Link, { to: logo.link, onClick: () => telemetry_1.telemetry.send('logo_clicked', {}) }, img)) : (img)));
 }
 exports.NavbarLogo = NavbarLogo;
 exports.LogoContainer = styled_components_1.default.div.attrs({

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

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

package/lib/components/NavbarLogo/index.js

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

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

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

package/lib/components/NavbarLogo/styledVariables.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logo = void 0;
+const styled_components_1 = require("styled-components");
+exports.logo = (0, styled_components_1.css) `
+  /**
+    * @tokens Logo
+    */
+
+  --navbar-logo-height: 2rem; // @presenter Spacing
+  --navbar-logo-width: auto;
+  --navbar-logo-margin: 16px; // @presenter Spacing
+  --navbar-logo-max-width: 285px; // @presenter Spacing
+  --navbar-logo-max-height: 285px; // @presenter Spacing
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/Panel/styledVariables.js

@@ -196,7 +196,7 @@ exports.apiReferencePanels = (0, styled_components_1.css) `
   --panel-heading-font-family: var(--font-family-base); // @presenter FontFamily
   --panel-heading-font-size: 18px; // @presenter FontSize
   --panel-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight
-  --panel-heading-text-color: vat(--text-primary);
+  --panel-heading-text-color: var(--text-primary);
   --panel-heading-padding: var(--spacing-base);
   --panel-heading-line-height: 1; // @presenter LineHeight
   --panel-heading-white-space: 'nowrap';
@@ -209,7 +209,7 @@ exports.apiReferencePanels = (0, styled_components_1.css) `
   --panel-body-font-family: var(--font-family-base); // @presenter FontFamily
   --panel-body-font-size: var(--font-size-base); // @presenter FontSize
   --panel-body-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --panel-body-text-color: vat(--text-secondary);
+  --panel-body-text-color: var(--text-secondary);
   --panel-body-padding: var(--spacing-base);
   --panel-body-border: 1px solid var(--border-primary);
 
@@ -432,7 +432,7 @@ exports.apiReferencePanels = (0, styled_components_1.css) `
   --panel-try-it-tabs-disabled-text-color: var(--text-placeholder); // @presenter Color
 
   --panel-try-it-tabs-background-color: none; // @presenter Color
-  --panel-try-it-tabs-hover-background-color: var(--bg-raised);; // @presenter Color
+  --panel-try-it-tabs-hover-background-color: var(--bg-raised); // @presenter Color
   --panel-try-it-tabs-active-background-color: var(--bg-base); // @presenter Color
   --panel-try-it-tabs-disabled-background-color: none; // @presenter Color
 
@@ -477,13 +477,5 @@ exports.apiReferencePanels = (0, styled_components_1.css) `
   --panel-try-it-border: 1px solid var(--border-primary); // @presenter Border
 
   // @tokens End
-
-  // TODO PUL RIGHT section - related to pull right - fix later
-
-  --samples-panel-markdown-background-color: #3c4c5a;
-  --samples-panel-markdown-border-color: #46596a;
-
-  --layout-right-rail-width: 50%;
-  --layout-right-rail-background-color: transparent;
 `;
 //# sourceMappingURL=styledVariables.js.map

package/lib/components/Profile/LoginLink.js

@@ -8,13 +8,16 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const hooks_1 = require("../../mocks/hooks");
+const telemetry_1 = require("../../mocks/telemetry");
 function LoginLink({ href }) {
     const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
         login: 'theme.profile.login',
     };
-    return (react_1.default.createElement(StyledLink, { href: href, "data-translation-key": translationKeys.login }, translate(translationKeys.login, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login')));
+    return (react_1.default.createElement(StyledLink, { href: href, "data-translation-key": translationKeys.login, onClick: () => {
+            telemetry_1.telemetry.send('login_button_clicked', {});
+        } }, translate(translationKeys.login, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login')));
 }
 exports.LoginLink = LoginLink;
 const StyledLink = styled_components_1.default.a.attrs(() => ({

package/lib/components/Profile/MobileUserProfile.js

@@ -11,6 +11,7 @@ const LogoutIcon_1 = require("../../icons/LogoutIcon");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const hooks_1 = require("../../mocks/hooks");
 const UserProfileData_1 = require("../../components/Profile/UserProfileData");
+const telemetry_1 = require("../../mocks/telemetry");
 function MobileUserProfile() {
     const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
     const { userData, handleLogout, loginUrl } = (0, useProfileProps_1.useProfileProps)();
@@ -20,24 +21,34 @@ function MobileUserProfile() {
     };
     if (!(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) && !loginUrl)
         return null;
-    return (react_1.default.createElement(MobileProfileWrapper, { "data-component-name": "Navbar/MobileUserProfile" }, !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) ? (react_1.default.createElement(LoginButton, { href: loginUrl, "data-cy": "login-btn" }, translate(translationKeys.login, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login'))) : (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(MobileProfileWrapper, { "data-component-name": "Navbar/MobileUserProfile" }, !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) ? (react_1.default.createElement(LoginButton, { href: loginUrl, "data-cy": "login-btn", onClick: () => telemetry_1.telemetry.send('login_button_clicked', {}) }, translate(translationKeys.login, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login'))) : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(UserProfileData_1.UserProfileData, { userData: userData }),
-        react_1.default.createElement(LogoutButton, { onClick: () => handleLogout() },
+        react_1.default.createElement(LogoutButton, { onClick: () => {
+                handleLogout();
+                telemetry_1.telemetry.send('logout_menu_item_clicked', {});
+            } },
             react_1.default.createElement(LogoutIcon_1.LogoutIcon, null))))));
 }
 exports.MobileUserProfile = MobileUserProfile;
 const LoginButton = styled_components_1.default.a `
   background: var(--mobile-menu-login-button-background);
-  border-radius: 6px;
+  border-radius: var(--mobile-menu-login-button-border-radius);
   width: 100%;
   margin: 0;
   padding: 5px 0;
   color: var(--mobile-menu-login-button-color);
-  font-size: var(--font-size-base);
+  border: 1px solid var(--mobile-menu-login-button-border-color);
+  font-size: var(--mobile-menu-login-button-font-size);
+  font-family: var(--mobile-menu-login-button-font-family);
+  font-weight: var(--mobile-menu-login-button-font-weight);
   text-align: center;
-  line-height: 22px;
+  line-height: var(--mobile-menu-login-button-line-height);
   cursor: pointer;
   text-decoration: none;
+
+  &:hover {
+    color: var(--mobile-menu-login-button-hover-color);
+  }
 `;
 const MobileProfileWrapper = styled_components_1.default.div `
   display: flex;

package/lib/components/Profile/UserProfile.js

@@ -33,6 +33,7 @@ const Profile_1 = require("../../components/Profile/Profile");
 const Link_1 = require("../../mocks/Link");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const hooks_1 = require("../../mocks/hooks");
+const telemetry_1 = require("../../mocks/telemetry");
 const Dropdown_1 = require("../../components/Dropdown");
 const UserProfileData_1 = require("../../components/Profile/UserProfileData");
 const icons_1 = require("../../icons");
@@ -53,7 +54,10 @@ function UserProfile({ userData, handleLogout, hasDeveloperOnboarding = false, }
             menuItems.push(react_1.default.createElement(Link_1.Link, { external: item.external, key: item.label, to: item.link || '', separator: item === null || item === void 0 ? void 0 : item.separatorLine }, item.label));
         }
     }
-    menuItems.push(react_1.default.createElement(Logout, { onClick: () => handleLogout(), "data-translation-key": translationKeys.logout, role: "link" },
+    menuItems.push(react_1.default.createElement(Logout, { onClick: () => {
+            handleLogout();
+            telemetry_1.telemetry.send('logout_menu_item_clicked', {});
+        }, "data-translation-key": translationKeys.logout, role: "link" },
         react_1.default.createElement(icons_1.LogoutIcon, null),
         translate(translationKeys.logout, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.logoutLabel) || 'Log out')));
     return (react_1.default.createElement(ProfileDropdown, { items: menuItems, alignment: "end" },

package/lib/components/Search/ProductTag.js

@@ -45,7 +45,7 @@ const Wrapper = styled_components_1.default.div `
   background: var(--bg-overlay);
   border: 1px solid var(--border-secondary);
   border-radius: var(--border-radius-xlg);
-  margin-right: 16px;
+  margin-right: var(--spacing-base);
 `;
 const Label = styled_components_1.default.span `
   color: var(--text-secondary);

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

@@ -15,9 +15,7 @@ export interface SelectProps {
 export declare const Select: ({ className, selected, options, dataAttributes, withArrow, triggerEvent, onChange, placement, alignment, icon, onlyIcon, }: SelectProps) => JSX.Element;
 export declare const SelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SelectInput: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SelectInputValue: import("styled-components").StyledComponent<"div", any, {
-    withIcon?: boolean | undefined;
-}, never>;
+export declare const SelectInputValue: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SelectList: import("styled-components").StyledComponent<"ul", any, {
     placement?: string | undefined;
     alignment?: string | undefined;