@redocly/theme 0.1.31 → 0.1.32

package/Navbar/Navbar.d.ts

@@ -4,7 +4,8 @@ interface NavbarProps {
     menu: ResolvedConfigLinks;
     logo: React.ReactNode;
     search: React.ReactNode;
+    profile?: React.ReactNode;
 }
-export declare function Navbar({ menu, logo, search }: NavbarProps): JSX.Element | null;
+export declare function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Element | null;
 export declare const NavbarContainer: import("styled-components").StyledComponent<"nav", any, {}, never>;
 export {};

package/Navbar/Navbar.js

@@ -33,7 +33,7 @@ var useMobileMenu_1 = require("../hooks/useMobileMenu");
 var MobileNavbarMenuButton_1 = require("../Navbar/MobileNavbarMenuButton");
 var MobileNavbarMenu_1 = require("../Navbar/MobileNavbarMenu");
 function Navbar(_a) {
-    var menu = _a.menu, logo = _a.logo, search = _a.search;
+    var menu = _a.menu, logo = _a.logo, search = _a.search, profile = _a.profile;
     var _b = __read((0, useMobileMenu_1.useMobileMenu)(false), 2), isOpen = _b[0], setIsOpen = _b[1];
     var _c = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME), searchSettings = _c.search, navbar = _c.navbar;
     var hideSearch = (searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.hide) || ((searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.placement) && (searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.placement) !== 'navbar');
@@ -47,7 +47,8 @@ function Navbar(_a) {
         isOpen && react_1.default.createElement(MobileNavbarMenu_1.MobileNavbarMenu, { closeMenu: closeMobileMenu, menuItems: menu }),
         logo,
         react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
-        hideSearch ? null : search));
+        hideSearch ? null : search,
+        profile));
 }
 exports.Navbar = Navbar;
 exports.NavbarContainer = styled_components_1.default.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: var(--navbar-height);\n  box-sizing: border-box;\n  display: flex;\n  color: var(--navbar-text-color);\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: 10px var(--sidebar-margin-left);\n  background: var(--navbar-background-color);\n  font-family: var(--h-font-family);\n\n  ", " {\n    padding: 10px var(--sidebar-margin-left);\n    font-size: 1rem;\n  }\n\n  ", " {\n    background: transparent;\n    display: none;\n    > :not(a, img) {\n      display: none !important;\n    }\n    img {\n      padding: 0;\n      margin: 0;\n    }\n  }\n"], ["\n  height: var(--navbar-height);\n  box-sizing: border-box;\n  display: flex;\n  color: var(--navbar-text-color);\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: 10px var(--sidebar-margin-left);\n  background: var(--navbar-background-color);\n  font-family: var(--h-font-family);\n\n  ", " {\n    padding: 10px var(--sidebar-margin-left);\n    font-size: 1rem;\n  }\n\n  ", " {\n    background: transparent;\n    display: none;\n    > :not(a, img) {\n      display: none !important;\n    }\n    img {\n      padding: 0;\n      margin: 0;\n    }\n  }\n"])), function (_a) {

package/Profile/Profile.js

@@ -31,7 +31,6 @@ exports.Profile = void 0;
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var utils_1 = require("../utils");
-var RANDOM_BG_COLOR = (0, utils_1.getRandomColor)();
 function ProfileComponent(_a) {
     var _b;
     var name = _a.name, imageUrl = _a.imageUrl, onClick = _a.onClick, color = _a.color;
@@ -44,14 +43,14 @@ function ProfileComponent(_a) {
     var avatarLetters = "".concat(name.charAt(0).toUpperCase()).concat(((_b = name.split(' ')[1]) === null || _b === void 0 ? void 0 : _b.charAt(0).toUpperCase()) || '');
     return (react_1.default.createElement(ProfileWrapper, { onClick: onClick },
         react_1.default.createElement(StyledUserName, { "data-cy": "user-name", color: color }, name),
-        react_1.default.createElement(AvatarWrapper, { background: RANDOM_BG_COLOR },
+        react_1.default.createElement(AvatarWrapper, { background: (0, utils_1.stringToHslColor)(name) },
             react_1.default.createElement("span", null, avatarLetters))));
 }
 exports.Profile = (0, react_1.memo)(ProfileComponent);
-var ProfileWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  width: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  width: auto;\n"])));
+var ProfileWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  width: auto;\n  padding-left: calc(var(--sidebar-spacing-horizontal) * 2);\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  width: auto;\n  padding-left: calc(var(--sidebar-spacing-horizontal) * 2);\n"])));
 var StyledUserName = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var color = _a.color;
-    return color || 'var(--color-content)';
+    return color || 'var(--navbar-text-color)';
 });
 var AvatarWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 40px;\n  height: 40px;\n  display: flex;\n  overflow: hidden;\n  position: relative;\n  font-size: 1.25rem;\n  align-items: center;\n  flex-shrink: 0;\n  line-height: 1;\n  user-select: none;\n  border-radius: 50%;\n  justify-content: center;\n  margin-left: 16px;\n\n  ", "\n\n  & > img {\n    color: transparent;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    text-align: center;\n    text-indent: 10000px;\n  }\n"], ["\n  width: 40px;\n  height: 40px;\n  display: flex;\n  overflow: hidden;\n  position: relative;\n  font-size: 1.25rem;\n  align-items: center;\n  flex-shrink: 0;\n  line-height: 1;\n  user-select: none;\n  border-radius: 50%;\n  justify-content: center;\n  margin-left: 16px;\n\n  ", "\n\n  & > img {\n    color: transparent;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    text-align: center;\n    text-indent: 10000px;\n  }\n"])), function (_a) {
     var background = _a.background;

package/TableOfContent/TableOfContent.js

@@ -76,7 +76,7 @@ function TableOfContent(props) {
                     return null;
                 }
                 var href = '#' + heading.id;
-                return (react_1.default.createElement(MenuItem, { key: href, href: href, depth: heading.depth || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": "toc-".concat(heading.value) }));
+                return (react_1.default.createElement(MenuItem, { key: href + idx, href: href, depth: heading.depth || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": "toc-".concat(heading.value) }));
             }))))));
 }
 exports.TableOfContent = TableOfContent;

package/package.json

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

package/src/Navbar/Navbar.tsx

@@ -13,9 +13,10 @@ interface NavbarProps {
   menu: ResolvedConfigLinks;
   logo: React.ReactNode;
   search: React.ReactNode;
+  profile?: React.ReactNode;
 }
 
-export function Navbar({ menu, logo, search }: NavbarProps): JSX.Element | null {
+export function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu(false);
   const { search: searchSettings, navbar } = useThemeSettings(DEFAULT_THEME_NAME);
   const hideSearch =
@@ -35,6 +36,7 @@ export function Navbar({ menu, logo, search }: NavbarProps): JSX.Element | null
       {logo}
       <NavbarMenu menuItems={menu} />
       {hideSearch ? null : search}
+      {profile}
     </NavbarContainer>
   );
 }

package/src/Profile/Profile.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import styled, { css } from 'styled-components';
 
-import { getRandomColor } from '@theme/utils';
+import { stringToHslColor } from '@theme/utils';
 
 export interface ProfileProps {
   name: string;
@@ -10,8 +10,6 @@ export interface ProfileProps {
   onClick?: () => void;
 }
 
-const RANDOM_BG_COLOR: string = getRandomColor();
-
 function ProfileComponent({ name, imageUrl, onClick, color }: ProfileProps): JSX.Element {
   if (imageUrl) {
     return (
@@ -37,7 +35,7 @@ function ProfileComponent({ name, imageUrl, onClick, color }: ProfileProps): JSX
       <StyledUserName data-cy="user-name" color={color}>
         {name}
       </StyledUserName>
-      <AvatarWrapper background={RANDOM_BG_COLOR}>
+      <AvatarWrapper background={stringToHslColor(name)}>
         <span>{avatarLetters}</span>
       </AvatarWrapper>
     </ProfileWrapper>
@@ -51,10 +49,11 @@ const ProfileWrapper = styled.div`
   align-items: center;
   cursor: pointer;
   width: auto;
+  padding-left: calc(var(--sidebar-spacing-horizontal) * 2);
 `;
 
 const StyledUserName = styled.span`
-  color: ${({ color }) => color || 'var(--color-content)'};
+  color: ${({ color }) => color || 'var(--navbar-text-color)'};
 `;
 
 const AvatarWrapper = styled.div<{ background?: string }>`

package/src/TableOfContent/TableOfContent.tsx

@@ -61,7 +61,7 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
               const href = '#' + heading.id;
               return (
                 <MenuItem
-                  key={href}
+                  key={href + idx}
                   href={href}
                   depth={heading.depth || 0}
                   className={activeHeadingId === heading.id ? 'active' : ''}

package/src/utils/color.ts

@@ -1,9 +1,12 @@
-export const getRandomNumber = (limit: number): number => Math.floor(Math.random() * limit);
+export function stringToHslColor(value: string): string {
+  const s = 30;
+  const l = 80;
+  let hash = 0;
 
-export function getRandomColor(): string {
-  const h = getRandomNumber(360);
-  const s = getRandomNumber(100);
-  const l = getRandomNumber(100);
+  for (let i = 0; i < value.length; i++) {
+    hash = value.charCodeAt(i) + ((hash << 5) - hash);
+  }
 
-  return `hsl(${h}deg, ${s}%, ${l}%)`;
+  const h = hash % 360;
+  return `hsl(${h}, ${s}%, ${l}%)`;
 }

package/utils/color.d.ts

@@ -1,2 +1 @@
-export declare const getRandomNumber: (limit: number) => number;
-export declare function getRandomColor(): string;
+export declare function stringToHslColor(value: string): string;

package/utils/color.js

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRandomColor = exports.getRandomNumber = void 0;
-var getRandomNumber = function (limit) { return Math.floor(Math.random() * limit); };
-exports.getRandomNumber = getRandomNumber;
-function getRandomColor() {
-    var h = (0, exports.getRandomNumber)(360);
-    var s = (0, exports.getRandomNumber)(100);
-    var l = (0, exports.getRandomNumber)(100);
-    return "hsl(".concat(h, "deg, ").concat(s, "%, ").concat(l, "%)");
+exports.stringToHslColor = void 0;
+function stringToHslColor(value) {
+    var s = 30;
+    var l = 80;
+    var hash = 0;
+    for (var i = 0; i < value.length; i++) {
+        hash = value.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    var h = hash % 360;
+    return "hsl(".concat(h, ", ").concat(s, "%, ").concat(l, "%)");
 }
-exports.getRandomColor = getRandomColor;
+exports.stringToHslColor = stringToHslColor;