@redocly/theme 0.35.7 → 0.36.0

package/lib/components/Dropdown/Dropdown.d.ts

@@ -18,5 +18,5 @@ export declare const DropdownList: import("styled-components").StyledComponent<"
     alignment?: string | undefined;
 }, never>;
 export declare const DropdownListItem: import("styled-components").StyledComponent<"li", any, {
-    separator?: boolean | undefined;
+    separatorLine?: boolean | undefined;
 }, never>;

package/lib/components/Dropdown/Dropdown.js

@@ -51,8 +51,8 @@ const Dropdown = ({ children, className, items, withArrow, triggerEvent = 'click
             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.DropdownList, { placement: placement, alignment: alignment }, items.map((item, index) => {
-            var _a;
-            return (react_1.default.createElement(exports.DropdownListItem, { key: index, onClick: () => handleClick(item), separator: (_a = item.props) === null || _a === void 0 ? void 0 : _a.separator }, item));
+            var _a, _b, _c, _d;
+            return ((_a = item.props) === null || _a === void 0 ? void 0 : _a.separator) ? (react_1.default.createElement(DropdownSeparatorItem, { key: index, separatorLine: (_b = item.props) === null || _b === void 0 ? void 0 : _b.separatorLine, linePosition: (_c = item.props) === null || _c === void 0 ? void 0 : _c.linePosition }, item)) : (react_1.default.createElement(exports.DropdownListItem, { key: index, onClick: () => handleClick(item), separatorLine: (_d = item.props) === null || _d === void 0 ? void 0 : _d.separatorLine }, item));
         })))));
 };
 exports.Dropdown = Dropdown;
@@ -106,11 +106,31 @@ exports.DropdownListItem = styled_components_1.default.li `
     background-color: var(--dropdown-list-item-active-background-color);
   }
 
-  ${({ separator }) => separator &&
+  ${({ separatorLine }) => separatorLine &&
     (0, styled_components_1.css) `
       border-bottom: 1px solid var(--dropdown-list-item-separator-color);
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     `}
 `;
+const DropdownSeparatorItem = styled_components_1.default.div `
+  display: block;
+  width: 100%;
+  border: none;
+  background: none;
+  padding: var(--dropdown-list-item-space-between) 0;
+  text-align: left;
+  cursor: default;
+  & > * {
+    padding: var(--dropdown-list-item-separator-padding-top)
+      var(--dropdown-list-item-horizontal-padding)
+      var(--dropdown-list-item-separator-padding-bottom);
+  }
+  ${({ separatorLine, linePosition }) => separatorLine &&
+    (0, styled_components_1.css) `
+    border-${linePosition}: 1px solid var(--dropdown-list-item-separator-color);
+    border-${linePosition}-left-radius: 0;
+    border-${linePosition}-right-radius: 0;
+  `}
+`;
 //# sourceMappingURL=Dropdown.js.map

package/lib/components/Dropdown/styledVariables.js

@@ -20,11 +20,14 @@ exports.dropdown = (0, styled_components_1.css) `
   --dropdown-list-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
 
   --dropdown-list-item-horizontal-padding: var(--spacing-base); // @presenter Spacing
-  --dropdown-list-item-vertical-padding: var(--spacing-xs); // @presenter Spacing
+  --dropdown-list-item-vertical-padding: 5px; // @presenter Spacing
   --dropdown-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
   --dropdown-list-item-active-background-color: var(--bg-raised); // @presenter Color
   --dropdown-list-item-separator-color: var(--border-primary); // @presenter Color
 
+  --dropdown-list-item-space-between: 2px; // @presenter Spacing
+  --dropdown-list-item-separator-padding-top: var(--spacing-xs); // @presenter Spacing
+  --dropdown-list-item-separator-padding-bottom: var(--spacing-xxs); // @presenter Spacing
   // @tokens End
 `;
 //# sourceMappingURL=styledVariables.js.map

package/lib/components/Feedback/Feedback.d.ts

@@ -2,4 +2,4 @@ import * as React from 'react';
 import type { FeedbackProps } from '../../types/portal/src/shared/types/feedback';
 export declare const Feedback: (props: FeedbackProps & {
     path?: string;
-}) => React.JSX.Element;
+}) => React.JSX.Element | null;

package/lib/components/Feedback/Feedback.js

@@ -35,10 +35,14 @@ const hooks_1 = require("../../hooks");
 const useSubmitFeedback_1 = require("../../mocks/Feedback/useSubmitFeedback");
 const telemetry_1 = require("../../mocks/telemetry");
 const Feedback = (props) => {
+    var _a;
     const { submitFeedback } = (0, useSubmitFeedback_1.useSubmitFeedback)();
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const { feedback: themeFeedbackConf } = (0, hooks_1.useThemeConfig)();
-    const feedbackConf = Object.assign(Object.assign({}, themeFeedbackConf), props);
+    const feedbackConf = Object.assign(Object.assign({}, themeFeedbackConf), { path: props === null || props === void 0 ? void 0 : props.path, type: (props === null || props === void 0 ? void 0 : props.type) || (themeFeedbackConf === null || themeFeedbackConf === void 0 ? void 0 : themeFeedbackConf.type), settings: (props === null || props === void 0 ? void 0 : props.settings) || (themeFeedbackConf === null || themeFeedbackConf === void 0 ? void 0 : themeFeedbackConf.settings) || {}, hide: (_a = props.hide) !== null && _a !== void 0 ? _a : themeFeedbackConf === null || themeFeedbackConf === void 0 ? void 0 : themeFeedbackConf.hide });
+    if (feedbackConf.hide) {
+        return null;
+    }
     const renderFeedbackComponent = () => {
         const { type, settings, path } = feedbackConf;
         switch (type) {

package/lib/components/Feedback/Stars.js

@@ -33,7 +33,7 @@ const Stars = ({ max = 5, onChange, value }) => {
     const [hovered, setHovered] = React.useState(value || 0);
     const stars = [];
     for (let index = 1; index <= max; index++) {
-        stars.push(React.createElement(Star, { key: index, onClick: () => onChange(index), onMouseOver: () => setHovered(index), onMouseLeave: () => !value && setHovered(0) },
+        stars.push(React.createElement(Star, { "data-testid": `star-${index}`, key: index, onClick: () => onChange(index), onMouseOver: () => setHovered(index), onMouseLeave: () => !value && setHovered(0) },
             React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20" }, hovered < index ? (React.createElement("g", { fill: "#e8c002" },
                 React.createElement("path", { d: "M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7zm-10 6.9-3.76 2.27 1-4.28L3.5 8.5h4.61L10 4.6l1.9 3.9h4.6l-3.73 3.4 1 4.28z" }))) : (React.createElement("g", { fill: "#e8c002" },
                 React.createElement("path", { d: "M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7z" }))))));

package/lib/components/Navbar/NavbarItem.js

@@ -54,7 +54,15 @@ function NavbarItem({ navItem, className }) {
     if (navItem.items) {
         const item = navItem;
         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))));
+        const groupItemsComponents = groupItems.map((item, index) => {
+            if (item.type === 'link') {
+                return (react_1.default.createElement(Link_1.Link, { key: `${item.label}_${index}`, to: item.link, separatorLine: item.separatorLine }, translate(item.labelTranslationKey, item.label)));
+            }
+            if (item.type === 'separator') {
+                return (react_1.default.createElement(NavbarSeparator, { key: `${item.label}_${index}`, separator: true, separatorLine: item.separatorLine, linePosition: item.linePosition }, translate(item.labelTranslationKey, item.label)));
+            }
+            return null;
+        });
         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, onClick: () => telemetry_1.telemetry.send('navbar_menu_item_clicked', { type: 'group' }) },
                 react_1.default.createElement(exports.NavbarIcon, { url: item.icon }),
@@ -125,4 +133,9 @@ exports.NavbarIcon = styled_components_1.default.i `
       background-repeat: no-repeat;
     `}
 `;
+const NavbarSeparator = styled_components_1.default.span `
+  font-size: var(--navbar-separator-font-size);
+  color: var(--navbar-separator-text-color);
+  line-height: var(--navbar-separator-line-height);
+`;
 //# sourceMappingURL=NavbarItem.js.map

package/lib/components/Navbar/styledVariables.js

@@ -38,5 +38,9 @@ exports.navbar = (0, styled_components_1.css) `
   --navbar-item-icon-width: 1.5em; // @presenter Spacing
   --navbar-item-icon-height: 1.5em; // @presenter Spacing
   --navbar-item-icon-margin-right: 0.5em; // @presenter Spacing
+  
+  --navbar-separator-text-color: var(--text-secondary);
+  --navbar-separator-font-size: var(--font-size-sm);
+  --navbar-separator-line-height: var(--line-height-sm);
 `;
 //# sourceMappingURL=styledVariables.js.map

package/lib/components/Profile/UserProfile.js

@@ -47,7 +47,7 @@ function UserProfile({ userData, handleLogout, hasDeveloperOnboarding = false, }
     }
     if (userProfile && userProfile.menu) {
         for (const item of userProfile.menu) {
-            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(Link_1.Link, { external: item.external, key: item.label, to: item.link || '', separatorLine: item === null || item === void 0 ? void 0 : item.separatorLine }, item.label));
         }
     }
     menuItems.push(react_1.default.createElement(Logout, { onClick: () => {

package/lib/types/portal/src/shared/constants.d.ts

@@ -1,4 +1,4 @@
-export { REDOCLY_TEAMS_RBAC } from '@redocly/config';
+export { REDOCLY_TEAMS_RBAC, REDOCLY_ROUTE_RBAC } from '@redocly/config';
 export declare const DEFAULT_THEME_NAME = "@redocly/theme";
 export declare const USER_THEME_ALIAS = "@theme";
 export declare const DEFAULT_LOCALE_PLACEHOLDER = "default_locale";

package/lib/types/portal/src/shared/constants.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FsErrors = exports.ExternalRoutes = exports.DEV_LOGIN_SLUG = exports.FEEDBACK_TYPES = exports.DEFAULT_LOCALE_PLACEHOLDER = exports.USER_THEME_ALIAS = exports.DEFAULT_THEME_NAME = exports.REDOCLY_TEAMS_RBAC = void 0;
+exports.FsErrors = exports.ExternalRoutes = exports.DEV_LOGIN_SLUG = exports.FEEDBACK_TYPES = exports.DEFAULT_LOCALE_PLACEHOLDER = exports.USER_THEME_ALIAS = exports.DEFAULT_THEME_NAME = exports.REDOCLY_ROUTE_RBAC = exports.REDOCLY_TEAMS_RBAC = void 0;
 var config_1 = require("@redocly/config");
 Object.defineProperty(exports, "REDOCLY_TEAMS_RBAC", { enumerable: true, get: function () { return config_1.REDOCLY_TEAMS_RBAC; } });
+Object.defineProperty(exports, "REDOCLY_ROUTE_RBAC", { enumerable: true, get: function () { return config_1.REDOCLY_ROUTE_RBAC; } });
 exports.DEFAULT_THEME_NAME = '@redocly/theme';
 exports.USER_THEME_ALIAS = '@theme';
 exports.DEFAULT_LOCALE_PLACEHOLDER = 'default_locale';

package/lib/types/portal/src/shared/types/feedback.d.ts

@@ -10,4 +10,5 @@ export type SubmitFeedbackParams = {
 export type FeedbackProps = {
     type: FEEDBACK_TYPES;
     settings: (RatingProps | SentimentProps | CommentProps | MoodProps | ScaleProps)['settings'];
+    hide?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.35.7",
+  "version": "0.36.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -89,7 +89,7 @@
     "react-calendar": "4.2.1",
     "react-date-picker": "10.0.3",
     "timeago.js": "^4.0.2",
-    "@redocly/config": "0.1.5"
+    "@redocly/config": "0.2.0"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",

package/src/components/Dropdown/Dropdown.tsx

@@ -69,15 +69,25 @@ export const Dropdown = ({
       </DropdownHeader>
       {isOpen && (
         <DropdownList placement={placement} alignment={alignment}>
-          {items.map((item, index) => (
-            <DropdownListItem
-              key={index}
-              onClick={() => handleClick(item)}
-              separator={(item as JSX.Element).props?.separator}
-            >
-              {item}
-            </DropdownListItem>
-          ))}
+          {items.map((item, index) =>
+            (item as JSX.Element).props?.separator ? (
+              <DropdownSeparatorItem
+                key={index}
+                separatorLine={(item as JSX.Element).props?.separatorLine}
+                linePosition={(item as JSX.Element).props?.linePosition}
+              >
+                {item}
+              </DropdownSeparatorItem>
+            ) : (
+              <DropdownListItem
+                key={index}
+                onClick={() => handleClick(item)}
+                separatorLine={(item as JSX.Element).props?.separatorLine}
+              >
+                {item}
+              </DropdownListItem>
+            ),
+          )}
         </DropdownList>
       )}
     </DropdownContainer>
@@ -126,7 +136,7 @@ export const DropdownList = styled.ul<{ placement?: string; alignment?: string }
   z-index: 1;
 `;
 
-export const DropdownListItem = styled.li<{ separator?: boolean }>`
+export const DropdownListItem = styled.li<{ separatorLine?: boolean }>`
   border-radius: var(--dropdown-list-item-border-radius);
 
   & > * {
@@ -137,11 +147,36 @@ export const DropdownListItem = styled.li<{ separator?: boolean }>`
     background-color: var(--dropdown-list-item-active-background-color);
   }
 
-  ${({ separator }) =>
-    separator &&
+  ${({ separatorLine }) =>
+    separatorLine &&
     css`
       border-bottom: 1px solid var(--dropdown-list-item-separator-color);
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     `}
 `;
+
+const DropdownSeparatorItem = styled.div<{
+  separatorLine?: boolean;
+  linePosition: 'top' | 'bottom';
+}>`
+  display: block;
+  width: 100%;
+  border: none;
+  background: none;
+  padding: var(--dropdown-list-item-space-between) 0;
+  text-align: left;
+  cursor: default;
+  & > * {
+    padding: var(--dropdown-list-item-separator-padding-top)
+      var(--dropdown-list-item-horizontal-padding)
+      var(--dropdown-list-item-separator-padding-bottom);
+  }
+  ${({ separatorLine, linePosition }) =>
+    separatorLine &&
+    css`
+    border-${linePosition}: 1px solid var(--dropdown-list-item-separator-color);
+    border-${linePosition}-left-radius: 0;
+    border-${linePosition}-right-radius: 0;
+  `}
+`;

package/src/components/Dropdown/styledVariables.ts

@@ -18,10 +18,13 @@ export const dropdown = css`
   --dropdown-list-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
 
   --dropdown-list-item-horizontal-padding: var(--spacing-base); // @presenter Spacing
-  --dropdown-list-item-vertical-padding: var(--spacing-xs); // @presenter Spacing
+  --dropdown-list-item-vertical-padding: 5px; // @presenter Spacing
   --dropdown-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
   --dropdown-list-item-active-background-color: var(--bg-raised); // @presenter Color
   --dropdown-list-item-separator-color: var(--border-primary); // @presenter Color
 
+  --dropdown-list-item-space-between: 2px; // @presenter Spacing
+  --dropdown-list-item-separator-padding-top: var(--spacing-xs); // @presenter Spacing
+  --dropdown-list-item-separator-padding-bottom: var(--spacing-xxs); // @presenter Spacing
   // @tokens End
 `;

package/src/components/Feedback/Feedback.tsx

@@ -12,7 +12,17 @@ export const Feedback = (props: FeedbackProps & { path?: string }) => {
   const { submitFeedback } = useSubmitFeedback();
   const { pathname } = useLocation();
   const { feedback: themeFeedbackConf } = useThemeConfig();
-  const feedbackConf = { ...themeFeedbackConf, ...props };
+  const feedbackConf = {
+    ...themeFeedbackConf,
+    path: props?.path,
+    type: props?.type || themeFeedbackConf?.type,
+    settings: props?.settings || themeFeedbackConf?.settings || {},
+    hide: props.hide ?? themeFeedbackConf?.hide,
+  };
+
+  if (feedbackConf.hide) {
+    return null;
+  }
 
   const renderFeedbackComponent = () => {
     const { type, settings, path } = feedbackConf;

package/src/components/Feedback/Stars.tsx

@@ -15,6 +15,7 @@ export const Stars = ({ max = 5, onChange, value }: StarsProps): JSX.Element =>
   for (let index = 1; index <= max; index++) {
     stars.push(
       <Star
+        data-testid={`star-${index}`}
         key={index}
         onClick={() => onChange(index)}
         onMouseOver={() => setHovered(index)}

package/src/components/Navbar/NavbarItem.tsx

@@ -49,15 +49,34 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
 
   if ((navItem as ResolvedNavGroupItem).items) {
     const item = navItem as ResolvedNavGroupItem;
-    const groupItems = item.items as ResolvedNavLinkItem[];
-    const groupItemsComponents = groupItems.map((item, index) => (
-      <Link key={`${item.label}_${index}`} to={item.link}>
-        {translate(item.labelTranslationKey, item.label)}
-      </Link>
-    ));
+    const groupItems = item.items as ResolvedNavItem[];
+    const groupItemsComponents = groupItems.map((item, index) => {
+      if (item.type === 'link') {
+        return (
+          <Link key={`${item.label}_${index}`} to={item.link} separatorLine={item.separatorLine}>
+            {translate(item.labelTranslationKey, item.label)}
+          </Link>
+        );
+      }
+
+      if (item.type === 'separator') {
+        return (
+          <NavbarSeparator
+            key={`${item.label}_${index}`}
+            separator={true}
+            separatorLine={item.separatorLine}
+            linePosition={item.linePosition}
+          >
+            {translate(item.labelTranslationKey, item.label)}
+          </NavbarSeparator>
+        );
+      }
+
+      return null;
+    });
 
     return (
-      <NavbarMenuItemDropdown items={groupItemsComponents} triggerEvent="hover">
+      <NavbarMenuItemDropdown items={groupItemsComponents as JSX.Element[]} triggerEvent="hover">
         <NavbarMenuItem
           active={false}
           data-component-name="Navbar/NavbarItem"
@@ -146,3 +165,13 @@ export const NavbarIcon = styled.i<{ url?: string }>`
       background-repeat: no-repeat;
     `}
 `;
+
+const NavbarSeparator = styled.span<{
+  separator: true;
+  separatorLine?: boolean;
+  linePosition?: 'top' | 'bottom';
+}>`
+  font-size: var(--navbar-separator-font-size);
+  color: var(--navbar-separator-text-color);
+  line-height: var(--navbar-separator-line-height);
+`;

package/src/components/Navbar/styledVariables.ts

@@ -36,4 +36,8 @@ export const navbar = css`
   --navbar-item-icon-width: 1.5em; // @presenter Spacing
   --navbar-item-icon-height: 1.5em; // @presenter Spacing
   --navbar-item-icon-margin-right: 0.5em; // @presenter Spacing
+  
+  --navbar-separator-text-color: var(--text-secondary);
+  --navbar-separator-font-size: var(--font-size-sm);
+  --navbar-separator-line-height: var(--line-height-sm);
 `;

package/src/components/Profile/UserProfile.tsx

@@ -38,7 +38,7 @@ export function UserProfile({
           external={item.external}
           key={item.label}
           to={item.link || ''}
-          separator={item?.separatorLine}
+          separatorLine={item?.separatorLine}
         >
           {item.label}
         </Link>,

package/src/types/portal/src/shared/constants.ts

@@ -1,9 +1,9 @@
-export { REDOCLY_TEAMS_RBAC } from '@redocly/config';
+export { REDOCLY_TEAMS_RBAC, REDOCLY_ROUTE_RBAC  } from '@redocly/config';
 
 export const DEFAULT_THEME_NAME = '@redocly/theme';
 export const USER_THEME_ALIAS = '@theme';
-export const DEFAULT_LOCALE_PLACEHOLDER = 'default_locale'
-export type REQUIRED_OIDC_SCOPES =  string[];
+export const DEFAULT_LOCALE_PLACEHOLDER = 'default_locale';
+export type REQUIRED_OIDC_SCOPES = string[];
 export type DEFAULT_COOKIE_EXPIRATION = number;
 export enum FEEDBACK_TYPES {
   RATING = 'rating',
@@ -19,4 +19,4 @@ export enum ExternalRoutes {
 }
 export enum FsErrors {
   NotExist = 'ENOENT',
-}
+}

package/src/types/portal/src/shared/types/feedback.ts

@@ -19,4 +19,5 @@ export type SubmitFeedbackParams = {
 export type FeedbackProps = {
   type: FEEDBACK_TYPES;
   settings: (RatingProps | SentimentProps | CommentProps | MoodProps | ScaleProps)['settings'];
+  hide?: boolean;
 };