@redocly/theme 0.17.1 → 0.18.1

package/lib/components/Menu/hooks/use-mobile-menu-items.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMobileMenuItems = void 0;
+const react_router_dom_1 = require("react-router-dom");
+const hooks_1 = require("../../../mocks/hooks");
+const useSidebarItems_1 = require("../../../mocks/Sidebar/useSidebarItems");
+const hooks_2 = require("../../../hooks");
+const constants_1 = require("../constants");
+const utils_1 = require("../utils");
+const MENU_SEPARATOR = {
+    type: 'separator',
+    separatorLine: true,
+};
+const TRANSLATION_KEYS = {
+    products: 'theme.mobileMenu.products',
+};
+const useMobileMenuItems = (menuType) => {
+    var _a, _b, _c;
+    const { versions = [] } = (0, hooks_1.usePageVersions)() || {};
+    const { defaultLocale, currentLocale, locales } = (0, hooks_1.useI18nConfig)();
+    const { translate } = (0, hooks_1.useTranslate)();
+    const activeVersion = versions.find((version) => version.active);
+    const sidebarItems = (0, useSidebarItems_1.useSidebarItems)(activeVersion);
+    const location = (0, react_router_dom_1.useLocation)();
+    const currentProduct = (0, hooks_1.useCurrentProduct)();
+    const hasProductNavbarOverride = (_a = currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.themeOverride) === null || _a === void 0 ? void 0 : _a.navbar;
+    const productThemeConfig = (0, hooks_2.useThemeConfig)();
+    const baseThemeConfig = (0, hooks_2.useThemeConfig)(false);
+    const baseNavItems = (((_b = baseThemeConfig.navbar) === null || _b === void 0 ? void 0 : _b.items) || []);
+    const productNavItems = (hasProductNavbarOverride ? ((_c = productThemeConfig.navbar) === null || _c === void 0 ? void 0 : _c.items) || [] : []);
+    const menuItems = [];
+    if (menuType === constants_1.MenuType.PAGE) {
+        if (activeVersion) {
+            // TODO: consider to refactor
+            const versionsSection = (0, utils_1.buildVersionSection)(translate, versions, activeVersion);
+            menuItems.push(...versionsSection);
+        }
+        if (menuItems.length && sidebarItems.length) {
+            menuItems.push(MENU_SEPARATOR);
+        }
+        menuItems.push(...sidebarItems);
+    }
+    else if (menuType === constants_1.MenuType.PRODUCT) {
+        menuItems.push(...productNavItems);
+        if (menuItems.length && baseNavItems.length) {
+            menuItems.push(MENU_SEPARATOR);
+        }
+        if (baseNavItems.length) {
+            menuItems.push(...baseNavItems);
+        }
+    }
+    else if (menuType === constants_1.MenuType.MAIN_MENU) {
+        const productMenuItems = Object.values(baseThemeConfig.products || {}).map((product) => ({
+            label: product.name,
+            link: product.link,
+            icon: product.icon,
+            type: 'link',
+        }));
+        if (productMenuItems.length) {
+            menuItems.push({
+                type: 'separator',
+                label: translate(TRANSLATION_KEYS.products, 'Products'),
+            });
+            menuItems.push(...productMenuItems);
+        }
+        if (menuItems.length && baseNavItems.length) {
+            menuItems.push(MENU_SEPARATOR);
+        }
+        if (baseNavItems.length) {
+            menuItems.push(...baseNavItems);
+        }
+    }
+    const languagesMenu = (0, utils_1.buildLanguagesGroup)(locales, defaultLocale, currentLocale);
+    if (menuItems.length && languagesMenu) {
+        menuItems.push(MENU_SEPARATOR);
+    }
+    if (languagesMenu) {
+        menuItems.push(languagesMenu);
+    }
+    return (0, utils_1.mapNavbarItems)(menuItems, defaultLocale, currentLocale, locales, location);
+};
+exports.useMobileMenuItems = useMobileMenuItems;
+//# sourceMappingURL=use-mobile-menu-items.js.map

package/lib/components/Menu/hooks/use-mobile-menu-levels.d.ts

@@ -0,0 +1,5 @@
+import { MenuType } from '../../../components/Menu/constants';
+export declare const useMobileMenuLevels: () => {
+    label: string;
+    type: MenuType;
+}[];

package/lib/components/Menu/hooks/use-mobile-menu-levels.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMobileMenuLevels = void 0;
+const react_1 = require("react");
+const react_router_dom_1 = require("react-router-dom");
+const hooks_1 = require("../../../mocks/hooks");
+const useSidebarItems_1 = require("../../../mocks/Sidebar/useSidebarItems");
+const constants_1 = require("../../../components/Menu/constants");
+const hooks_2 = require("../../../hooks");
+const TRANSLATION_KEYS = {
+    mainMenu: 'theme.mobileMenu.mainMenu',
+    previous: 'theme.mobileMenu.previous',
+};
+const useMobileMenuLevels = () => {
+    var _a, _b;
+    const { versions = [] } = (0, hooks_1.usePageVersions)() || {};
+    const activeVersion = versions.find((version) => version === null || version === void 0 ? void 0 : version.active);
+    const sidebarItems = (0, useSidebarItems_1.useSidebarItems)(activeVersion);
+    const { translate } = (0, hooks_1.useTranslate)();
+    const currentProduct = (0, hooks_1.useCurrentProduct)();
+    const productThemeConfig = (0, hooks_2.useThemeConfig)();
+    const location = (0, react_router_dom_1.useLocation)();
+    const hasProductNavbarOverride = (_a = currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.themeOverride) === null || _a === void 0 ? void 0 : _a.navbar;
+    const productNavItems = (hasProductNavbarOverride ? ((_b = productThemeConfig.navbar) === null || _b === void 0 ? void 0 : _b.items) || [] : []);
+    const menuLevels = (0, react_1.useMemo)(() => {
+        const menuLevels = [
+            {
+                label: translate(TRANSLATION_KEYS.mainMenu, 'Main Menu'),
+                type: constants_1.MenuType.MAIN_MENU,
+            },
+        ];
+        if (currentProduct && productNavItems.length) {
+            menuLevels.push({
+                label: currentProduct.name,
+                type: constants_1.MenuType.PRODUCT,
+            });
+        }
+        if (sidebarItems.length || activeVersion) {
+            menuLevels.push({
+                label: translate(TRANSLATION_KEYS.previous, 'Previous'),
+                type: constants_1.MenuType.PAGE,
+            });
+        }
+        return menuLevels;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [location]);
+    return menuLevels;
+};
+exports.useMobileMenuLevels = useMobileMenuLevels;
+//# sourceMappingURL=use-mobile-menu-levels.js.map

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

@@ -0,0 +1,3 @@
+export interface MobileMenuProps {
+    className?: string;
+}

package/lib/components/Menu/types.js

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

package/lib/components/Menu/utils.d.ts

@@ -0,0 +1,7 @@
+import type { Location } from 'react-router-dom';
+import type { ItemState } from '../../components/Sidebar/types';
+import type { Locale, ResolvedNavItem, TFunction, Version } from '../../types/portal';
+export declare const mapNavbarItems: (items: ResolvedNavItem[], defaultLocale: string, currentLocale: string, locales: Locale[], location: Location) => ItemState[];
+export declare const isItemActive: (item: ResolvedNavItem, defaultLocale: string, currentLocale: string, locales: Locale[], location: Location) => boolean;
+export declare const buildLanguagesGroup: (locales: Locale[], currentLocale: string, defaultLocale: string) => ResolvedNavItem | undefined;
+export declare const buildVersionSection: (translate: TFunction, versions: Version[], activeVersion?: Version) => ResolvedNavItem[];

package/lib/components/Menu/utils.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildVersionSection = exports.buildLanguagesGroup = exports.isItemActive = exports.mapNavbarItems = void 0;
+const utils_1 = require("../../mocks/utils");
+const urls_1 = require("../../utils/urls");
+const TRANSLATION_KEYS = {
+    version: 'theme.mobileMenu.version',
+};
+const mapNavbarItems = (items, defaultLocale, currentLocale, locales, location) => {
+    return items.map((navItem) => {
+        var _a;
+        return (Object.assign(Object.assign(Object.assign(Object.assign({}, navItem), (navItem.items && {
+            items: (0, exports.mapNavbarItems)(navItem.items, defaultLocale, currentLocale, locales, location),
+        })), ('link' in navItem && { link: navItem.link || '/' })), { active: 'link' in navItem &&
+                (0, exports.isItemActive)(navItem, defaultLocale, currentLocale, locales, location), hasActiveSubItem: !!((_a = navItem.items) === null || _a === void 0 ? void 0 : _a.find((item) => (0, exports.isItemActive)(item, defaultLocale, currentLocale, locales, location))) }));
+    });
+};
+exports.mapNavbarItems = mapNavbarItems;
+const isItemActive = (item, defaultLocale, currentLocale, locales, location) => {
+    const pathHash = location.pathname + location.hash;
+    const link = item.languageInsensitive
+        ? item.link || ''
+        : (0, utils_1.getPathnameForLocale)(item.link || '/', defaultLocale, currentLocale, locales);
+    return pathHash === (0, urls_1.withPathPrefix)(link);
+};
+exports.isItemActive = isItemActive;
+const buildLanguagesGroup = (locales, currentLocale, defaultLocale) => {
+    if (locales.length < 2) {
+        return;
+    }
+    const locale = locales.find((l) => l.code === currentLocale);
+    return {
+        type: 'group',
+        label: (locale === null || locale === void 0 ? void 0 : locale.name) || (locale === null || locale === void 0 ? void 0 : locale.code),
+        items: locales
+            .filter((locale) => locale.code !== currentLocale)
+            .map((locale) => {
+            const newLangPathname = (0, urls_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(location.pathname, defaultLocale, locale.code, locales));
+            const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
+            return {
+                type: 'link',
+                label: locale.name || locale.code || '',
+                link: newUrlWithLanguage,
+                active: false,
+                hasActiveSubItem: false,
+                languageInsensitive: true,
+            };
+        }),
+    };
+};
+exports.buildLanguagesGroup = buildLanguagesGroup;
+const buildVersionSection = (translate, versions, activeVersion) => {
+    return [
+        {
+            type: 'separator',
+            label: translate(TRANSLATION_KEYS.version, 'Version'),
+        },
+        {
+            type: 'group',
+            label: activeVersion === null || activeVersion === void 0 ? void 0 : activeVersion.label,
+            items: versions
+                .filter((version) => !version.active)
+                .map((version) => {
+                return {
+                    type: 'link',
+                    label: version.label,
+                    link: version.link,
+                    active: false,
+                    hasActiveSubItem: false,
+                };
+            }),
+        },
+    ];
+};
+exports.buildVersionSection = buildVersionSection;
+//# sourceMappingURL=utils.js.map

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

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare function MobileUserProfile(): JSX.Element;
+export declare function MobileUserProfile(): JSX.Element | null;

package/lib/components/Navbar/MobileUserProfile.js

@@ -18,17 +18,15 @@ function MobileUserProfile() {
     const translationKeys = {
         login: 'theme.profile.login',
     };
-    if (!(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated)) {
-        return (react_1.default.createElement(MobileProfileWrapper, { "data-component-name": "Navbar/MobileUserProfile" },
-            react_1.default.createElement(LoginButton, { href: loginUrl, "data-cy": "login-btn" }, translate(translationKeys.login, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login'))));
-    }
-    return (react_1.default.createElement(MobileProfileWrapper, { "data-component-name": "Navbar/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,
         react_1.default.createElement(UserDataWrapper, null,
             react_1.default.createElement(ProfilePicture, null,
                 react_1.default.createElement(Profile_1.Profile, { name: userData.name, imageUrl: userData.picture })),
             react_1.default.createElement(UserName, null, userData.name)),
         react_1.default.createElement(LogoutButton, { onClick: () => handleLogout() },
-            react_1.default.createElement(LogoutIcon_1.LogoutIcon, null))));
+            react_1.default.createElement(LogoutIcon_1.LogoutIcon, null))))));
 }
 exports.MobileUserProfile = MobileUserProfile;
 const LoginButton = styled_components_1.default.a `
@@ -49,7 +47,6 @@ const MobileProfileWrapper = styled_components_1.default.div `
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  position: fixed;
   bottom: 0;
   padding: 18px 16px;
   border-top: 1px solid var(--mobile-menu-profile-border-color);

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

@@ -1,14 +1,11 @@
 /// <reference types="react" />
 import type { NavbarLogoProps } from '../../components/NavbarLogo';
-import type { ResolvedConfigLinks } from '../../types/portal';
 export declare function Navbar(): JSX.Element | null;
 interface NavbarPresentationalProps extends NavbarLogoProps {
-    menuItemsExist: boolean;
     closeMobileMenu: () => void;
     openMobileMenu: () => void;
     isOpen: boolean;
     hideSearch: boolean;
-    menu: ResolvedConfigLinks;
     hideUserProfile: boolean | string | undefined;
     changeLanguage: (value: string) => void;
     className?: string;

package/lib/components/Navbar/Navbar.js

@@ -31,7 +31,6 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const Navbar_1 = require("../../components/Navbar");
 const useMobileMenu_1 = require("../../hooks/useMobileMenu");
-const utils_1 = require("../../utils");
 const NavbarLogo_1 = require("../../components/NavbarLogo");
 const MobileMenu_1 = require("../../components/Menu/MobileMenu");
 const ColorModeSwitcher_1 = require("../../components/ColorModeSwitcher/ColorModeSwitcher");
@@ -39,9 +38,9 @@ const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const Search_1 = require("../../components/Search/Search");
 const AuthUserProfile_1 = require("../../components/Profile/AuthUserProfile");
 const hooks_1 = require("../../mocks/hooks");
-const BurgerButton_1 = require("../../components/Navbar/BurgerButton");
-const useSidebarItems_1 = require("../../mocks/Sidebar/useSidebarItems");
 const LanguagePicker_1 = require("../../I18n/LanguagePicker");
+const Product_1 = require("../../components/Product");
+const BurgerButton_1 = require("../../components/Navbar/BurgerButton");
 const EmptyNavbarHack = (0, styled_components_1.createGlobalStyle) `
   :root {
     --navbar-height: 0px !important;
@@ -62,17 +61,14 @@ function Navbar() {
     }
     const openMobileMenu = () => setIsOpen(true);
     const closeMobileMenu = () => setIsOpen(false);
-    const menuItemsExist = !(0, utils_1.isPrimitive)(menu) && !(0, utils_1.isEmptyArray)(menu);
     if (!menu && !logo) {
         return react_1.default.createElement(EmptyNavbarHack, null);
     }
     return (react_1.default.createElement(NavbarPresentational, Object.assign({}, {
-        menuItemsExist,
         closeMobileMenu,
         openMobileMenu,
         isOpen,
         hideSearch: Boolean(hideSearch),
-        menu: menu,
         logo: logo,
         hideUserProfile,
         changeLanguage,
@@ -80,15 +76,16 @@ function Navbar() {
 }
 exports.Navbar = Navbar;
 function NavbarPresentational(props) {
-    const { versions = [] } = (0, hooks_1.usePageVersions)() || {};
-    const activeVersion = versions.find((version) => version === null || version === void 0 ? void 0 : version.active);
-    const sidebarItems = (0, useSidebarItems_1.useSidebarItems)(activeVersion);
-    const { menuItemsExist, closeMobileMenu, openMobileMenu, isOpen, hideSearch, logo, menu, hideUserProfile, changeLanguage, className, } = props;
+    var _a;
+    const { closeMobileMenu, openMobileMenu, isOpen, hideSearch, logo, hideUserProfile, changeLanguage, className, } = props;
+    const themeConfig = (0, useThemeConfig_1.useThemeConfig)();
+    const menu = (_a = themeConfig.navbar) === null || _a === void 0 ? void 0 : _a.items;
     return (react_1.default.createElement(exports.NavbarContainer, { "data-component-name": "Navbar/Navbar", className: className },
-        isOpen && react_1.default.createElement(MobileMenu_1.MobileMenu, { navItems: menu, sidebarItems: sidebarItems }),
+        isOpen && react_1.default.createElement(MobileMenu_1.MobileMenu, null),
         react_1.default.createElement(exports.NavbarRow, null,
-            menuItemsExist && (react_1.default.createElement(BurgerButton_1.BurgerButton, { onClick: isOpen ? closeMobileMenu : openMobileMenu, isOpen: isOpen })),
+            react_1.default.createElement(BurgerButton_1.BurgerButton, { onClick: isOpen ? closeMobileMenu : openMobileMenu, isOpen: isOpen }),
             react_1.default.createElement(NavbarLogo_1.NavbarLogo, { logo: logo }),
+            react_1.default.createElement(Product_1.ProductPicker, null),
             react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
             hideSearch ? null : react_1.default.createElement(Search_1.Search, null),
             react_1.default.createElement(LanguagePicker_1.LanguagePicker, { onChangeLanguage: changeLanguage }),

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

@@ -6,7 +6,11 @@ export interface NavbarItemProps {
     className?: string;
 }
 export declare function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null;
-export declare const NavbarMenuItemWithDropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NavbarMenuItemDropdown: import("styled-components").StyledComponent<({ children, className, items, withArrow, triggerEvent, onChange, dataAttributes, }: import("../../components/Dropdown").DropdownProps) => JSX.Element, any, {
+    dataAttributes: {
+        'data-component-name': string;
+    };
+}, "dataAttributes">;
 export declare const NavbarLink: import("styled-components").StyledComponent<typeof Link, any, {}, never>;
 export declare const NavbarMenuItem: import("styled-components").StyledComponent<"li", any, {
     active?: boolean | undefined;

package/lib/components/Navbar/NavbarItem.js

@@ -26,15 +26,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavbarIcon = exports.NavbarMenuItem = exports.NavbarLink = exports.NavbarMenuItemWithDropdownWrapper = exports.NavbarItem = void 0;
+exports.NavbarIcon = exports.NavbarMenuItem = exports.NavbarLink = exports.NavbarMenuItemDropdown = exports.NavbarItem = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const react_router_dom_1 = require("react-router-dom");
 const Link_1 = require("../../mocks/Link");
 const utils_1 = require("../../mocks/utils");
-const NavbarDropdown_1 = require("../../components/Navbar/NavbarDropdown");
 const hooks_1 = require("../../mocks/hooks");
 const utils_2 = require("../../utils");
+const Dropdown_1 = require("../../components/Dropdown");
 function NavbarItem({ navItem, className }) {
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const { translate } = (0, hooks_1.useTranslate)();
@@ -50,24 +50,24 @@ function NavbarItem({ navItem, className }) {
     }
     if (navItem.items) {
         const item = navItem;
-        return (react_1.default.createElement(exports.NavbarMenuItemWithDropdownWrapper, null,
+        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.NavbarIcon, { url: item.icon }),
-                react_1.default.createElement(NavbarLabel, null, translate(item.labelTranslationKey, item.label))),
-            react_1.default.createElement(NavbarDropdown_1.NavbarDropdown, { items: item.items })));
+                react_1.default.createElement(NavbarLabel, null, translate(item.labelTranslationKey, item.label)))));
     }
     return null;
 }
 exports.NavbarItem = NavbarItem;
-exports.NavbarMenuItemWithDropdownWrapper = styled_components_1.default.div `
-  display: inline-block;
-  position: relative;
-  border-radius: var(--navbar-item-border-radius);
-  &:hover {
-    background: var(--navbar-item-active-background-color);
-    ${NavbarDropdown_1.DropdownWrapper} {
-      display: block;
-    }
+exports.NavbarMenuItemDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).attrs(() => ({
+    dataAttributes: {
+        'data-component-name': 'Navbar/NavbarItemDropdown',
+    },
+})) `
+  :hover {
+    text-decoration: var(--navbar-item-hover-text-decoration);
+    background: var(--navbar-item-hover-background-color);
   }
 `;
 exports.NavbarLink = (0, styled_components_1.default)(Link_1.Link) `
@@ -77,14 +77,13 @@ exports.NavbarLink = (0, styled_components_1.default)(Link_1.Link) `
 exports.NavbarMenuItem = styled_components_1.default.li `
   display: inline-block;
   padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
-  margin-left: var(--navbar-item-margin-horizontal);
   text-align: center;
   line-height: 1;
   font-size: var(--navbar-item-font-size);
   border-radius: var(--navbar-item-border-radius);
   font-weight: var(--navbar-item-font-weight);
   background: ${({ active }) => active && 'var(--navbar-item-active-background-color)'};
-  color: ${({ active }) => active && 'var(--navbar-item-active-text-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);

package/lib/components/Navbar/NavbarMenu.js

@@ -19,13 +19,13 @@ function NavbarMenu({ menuItems, className, }) {
 exports.NavbarMenu = NavbarMenu;
 const NavItemsContainer = styled_components_1.default.ul `
   list-style: none;
-  margin: 0 var(--navbar-item-margin-horizontal);
   padding: 0;
   display: none;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: flex-end;
   flex: 1;
+  gap: var(--navbar-item-gap);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     display: flex;

package/lib/components/OpenApiDocs/Dropdown.js

@@ -87,15 +87,15 @@ box-sizing: border-box;
     height: 36px;
     outline: none;
     display: inline-block;
-    color: var(--dropdown-text-color);
+    color: var(--docs-dropdown-text-color);
     border-radius: var(--border-radius);
-    border: var(--dropdown-border);
-    padding: var(--dropdown-padding);
+    border: var(--docs-dropdown-border);
+    padding: var(--docs-dropdown-padding);
     vertical-align: bottom;
     width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
     text-transform: none;
     line-height: inherit;
-    font-size: var(--dropdown-font-size);
+    font-size: var(--docs-dropdown-font-size);
     font-family: inherit;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -126,7 +126,7 @@ box-sizing: border-box;
     line-height: inherit;
     font-size: 14px;
     font-family: inherit;
-    padding: var(--dropdown-padding);
+    padding: var(--docs-dropdown-padding);
     ${({ variant }) => (variant === 'dark' ? darkDropdownStyle : '')};
 
 `;

package/lib/components/Product/Product.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ProductConfig } from '../../config';
+export type ProductProps = {
+    product: ProductConfig;
+    className?: string;
+};
+export declare const Product: ({ product, className }: ProductProps) => JSX.Element | null;

package/lib/components/Product/Product.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Product = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Product = ({ product, className }) => {
+    return (react_1.default.createElement(ProductWrapper, { "data-component-name": "Product/Product", className: className },
+        react_1.default.createElement(ProductLogo, { src: product.icon }),
+        react_1.default.createElement("span", null, product.name)));
+};
+exports.Product = Product;
+const ProductWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+`;
+const ProductLogo = styled_components_1.default.img `
+  margin-right: var(--product-logo-margin);
+  max-height: var(--select-line-height);
+`;
+//# sourceMappingURL=Product.js.map

package/lib/components/Product/ProductPicker.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ProductPicker: () => JSX.Element | null;

package/lib/components/Product/ProductPicker.js

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductPicker = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../mocks/hooks");
+const Link_1 = require("../../mocks/Link");
+const icons_1 = require("../../icons");
+const Select_1 = require("../Select");
+const Product_1 = require("./Product");
+const ProductPicker = () => {
+    var _a;
+    const globalData = (0, hooks_1.useGlobalData)();
+    const currentProduct = (0, hooks_1.useCurrentProduct)();
+    const currentProductComponent = currentProduct ? (react_1.default.createElement(Product_1.Product, { product: currentProduct })) : ('Products');
+    const products = Object.values(((_a = globalData === null || globalData === void 0 ? void 0 : globalData.theme) === null || _a === void 0 ? void 0 : _a.products) || {});
+    const productComponents = products.map((product) => (react_1.default.createElement(Link_1.Link, { key: product.slug, to: product.link },
+        react_1.default.createElement(Product_1.Product, { product: product }))));
+    return products.length ? (react_1.default.createElement(ProductSelect, { selected: currentProductComponent, options: productComponents, withArrow: true, triggerEvent: "hover" })) : null;
+};
+exports.ProductPicker = ProductPicker;
+const ProductSelect = (0, styled_components_1.default)(Select_1.Select).attrs(() => ({
+    dataAttributes: {
+        'data-component-name': 'Product/ProductPicker',
+    },
+})) `
+  display: none;
+  font-size: var(--product-picker-font-size);
+  font-weight: var(--product-picker-font-weight);
+  line-height: var(--product-picker-line-height);
+  border-radius: var(--product-picker-border-radius);
+  color: var(--product-picker-text-color);
+
+  ${Select_1.SelectInput} {
+    border-radius: var(--product-picker-input-border-radius);
+    padding: var(--product-picker-input-padding-vertical)
+      var(--product-picker-input-padding-horizontal);
+    color: var(--navbar-text-color);
+
+    a {
+      color: var(--navbar-text-color);
+    }
+  }
+
+  ${Select_1.SelectList} {
+    min-width: var(--product-picker-list-min-width);
+    max-width: var(--product-picker-list-max-width);
+    padding: var(--product-picker-list-padding);
+    background-color: var(--product-picker-list-background-color);
+    border-radius: var(--product-picker-list-border-radius);
+    box-shadow: var(--product-picker-list-box-shadow);
+  }
+
+  ${Select_1.SelectListItem} {
+    border-radius: var(--product-picker-list-item-border-radius);
+
+    & > * {
+      padding: var(--product-picker-list-item-vertical-padding)
+        var(--product-picker-list-item-horizontal-padding);
+    }
+
+    :hover {
+      background-color: var(--product-picker-list-item-active-background-color);
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
+
+  :hover {
+    text-decoration: var(--navbar-item-hover-text-decoration);
+    background: var(--navbar-item-hover-background-color);
+  }
+
+  ${icons_1.ArrowIcon} {
+    fill: var(--navbar-text-color);
+  }
+`;
+//# sourceMappingURL=ProductPicker.js.map

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

@@ -0,0 +1,2 @@
+export * from '../../components/Product/ProductPicker';
+export * from '../../components/Product/Product';

package/lib/components/Product/index.js

@@ -0,0 +1,19 @@
+"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/Product/ProductPicker"), exports);
+__exportStar(require("../../components/Product/Product"), exports);
+//# sourceMappingURL=index.js.map