@redocly/theme 0.21.0 → 0.21.2

package/lib/components/Menu/MenuGroup.js

@@ -55,10 +55,11 @@ function MenuGroup({ item, isExpanded, toggleExpanded, children, className, }) {
     }, [isExpanded]);
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Menu/MenuGroup", className: className },
         react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
-            react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, isAlwaysExpanded: item.expanded === 'always', active: item.active, role: !item.link ? 'link' : 'none', expanded: isExpanded },
-                item.icon ? react_1.default.createElement(SidebarItemIcon_1.SidebarItemIcon, { src: item.icon }) : null,
-                translate(item.labelTranslationKey, item.label),
-                !!item.items.length && (react_1.default.createElement(ArrowIcon_1.ArrowIcon, { direction: isExpanded ? 'down' : 'right', weight: "thin" })))),
+            react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, isAlwaysExpanded: item.expanded === 'always', active: item.active, role: !item.link ? 'link' : 'none', expanded: isExpanded, withArrow: !!item.items.length },
+                !!item.items.length && (react_1.default.createElement(ArrowIcon_1.ArrowIcon, { direction: isExpanded ? 'down' : 'right', weight: "thin" })),
+                react_1.default.createElement(LabelWrapper, null,
+                    item.icon ? react_1.default.createElement(SidebarItemIcon_1.SidebarItemIcon, { src: item.icon }) : null,
+                    translate(item.labelTranslationKey, item.label)))),
         react_1.default.createElement(MenuWrapper, { isExpanded: isExpanded }, showChildren ? children : null),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }
@@ -82,7 +83,8 @@ const MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItem
   color: var(--sidebar-item-group-text-color);
   background: var(--sidebar-item-group-background-color);
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: var(--sidebar-item-group-gap);
 
   ${({ active }) => active
     ? `color: var(--sidebar-item-group-active-text-color);
@@ -93,5 +95,13 @@ const MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItem
     `
     color: var(--sidebar-item-group-active-text-color);
   `}
+
+  ${({ withArrow }) => !withArrow &&
+    `
+    padding-left: var(--sidebar-item-label-padding);
+  `}
+`;
+const LabelWrapper = styled_components_1.default.div `
+  display: flex;
 `;
 //# sourceMappingURL=MenuGroup.js.map

package/lib/components/Menu/MenuItem.js

@@ -25,6 +25,7 @@ function MenuItem({ item, className }) {
 exports.MenuItem = MenuItem;
 const Wrapper = styled_components_1.default.div ``;
 const Label = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
+  padding-left: var(--sidebar-item-label-padding);
   color: var(--mobile-menu-item-text-color);
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/lib/components/Menu/MobileMenuGroup.js

@@ -16,11 +16,11 @@ function MobileMenuGroup({ item, isExpanded, toggleExpanded, children, }) {
     const { translate } = (0, hooks_1.useTranslate)();
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Menu/MobileMenuGroup" },
         react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
-            react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, active: item.active, expanded: isExpanded },
+            react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, active: item.active, expanded: isExpanded, withArrow: !!item.items.length },
+                !!item.items.length && (react_1.default.createElement(icons_1.ArrowIcon, { direction: isExpanded ? 'down' : 'right', weight: "thin" })),
                 react_1.default.createElement(LabelContainer, null,
                     item.icon ? react_1.default.createElement(SidebarItemIcon_1.SidebarItemIcon, { src: item.icon }) : null,
-                    react_1.default.createElement(Label, null, translate(item.labelTranslationKey, item.label))),
-                !!item.items.length && (react_1.default.createElement(icons_1.ArrowIcon, { direction: isExpanded ? 'down' : 'right', weight: "thin" })))),
+                    react_1.default.createElement(Label, null, translate(item.labelTranslationKey, item.label))))),
         react_1.default.createElement(MenuWrapper, { isExpanded: isExpanded }, children),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }
@@ -39,7 +39,8 @@ const MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItem
   color: var(--mobile-menu-item-text-color);
   background: var(--mobile-menu-background);
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: var(--mobile-menu-item-group-gap);
 
   ${({ active }) => active &&
     `
@@ -51,5 +52,10 @@ const MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItem
     `
     color: var(--mobile-menu-item-active-text-color);
   `}
+
+  ${({ withArrow }) => !withArrow &&
+    `
+    padding-left: var(--mobile-menu-item-label-padding);
+  `}
 `;
 //# sourceMappingURL=MobileMenuGroup.js.map

package/lib/components/Menu/styledVariables.js

@@ -40,6 +40,8 @@ exports.mobileMenu = (0, styled_components_1.css) `
   --mobile-menu-item-text-color: var(--text-secondary); // @presenter Color
   --mobile-menu-item-active-background-color: var(--bg-raised); // @presenter Color
   --mobile-menu-item-active-text-color: var(--text-primary); // @presenter Color
+  --mobile-menu-item-label-padding: var(--spacing-xl); // @presenter Spacing
+  --mobile-menu-item-group-gap: var(--spacing-xs); // @presenter Spacing
 
   /**
       * @tokens Mobile Menu control button

package/lib/components/PageNavigation/NextButton.js

@@ -48,5 +48,6 @@ function NextButton({ nextPage, className }) {
 exports.NextButton = NextButton;
 const StyledButton = (0, styled_components_1.default)(Button_1.Button) `
   font-family: var(--font-family-base);
+  text-wrap: wrap;
 `;
 //# sourceMappingURL=NextButton.js.map

package/lib/components/PageNavigation/PreviousButton.js

@@ -28,5 +28,6 @@ function PreviousButton({ prevPage, className }) {
 exports.PreviousButton = PreviousButton;
 const StyledButton = (0, styled_components_1.default)(Button_1.Button) `
   font-family: var(--font-family-base);
+  text-wrap: wrap;
 `;
 //# sourceMappingURL=PreviousButton.js.map

package/lib/components/Sidebar/ApiCallItem.js

@@ -23,6 +23,7 @@ const Label = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
   display: flex;
   justify-content: space-between;
   color: var(--mobile-menu-item-text-color);
+  padding-left: var(--sidebar-item-label-padding);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     color: var(--sidebar-item-text-color);

package/lib/components/Sidebar/styledVariables.js

@@ -71,6 +71,7 @@ exports.sidebar = (0, styled_components_1.css) `
   --sidebar-margin-horizontal: var(--spacing-base); // @presenter Spacing
   --sidebar-item-padding-vertical: var(--spacing-xs); // @presenter Spacing
   --sidebar-item-padding-horizontal: var(--spacing-xs); // @presenter Spacing
+  --sidebar-item-label-padding: var(--spacing-xl); // @presenter Spacing
 
   /**
     * @tokens Sidebar item border
@@ -111,6 +112,7 @@ exports.sidebar = (0, styled_components_1.css) `
   --sidebar-item-group-background-color: var(--sidebar-background-color); // @presenter Color
   --sidebar-item-group-active-text-color: var(--sidebar-item-active-color); // @presenter Color
   --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);
+  --sidebar-item-group-gap: var(--spacing-xs); // @presenter Spacing
 
   // we need a theme config for chevron-location: left (default), right-compact, right, none
   // we need another theme config for chevron-style: up-down, down-up, right-down, down-right

package/lib/utils/highlight.d.ts

@@ -20,6 +20,7 @@ import 'prismjs/components/prism-scala.js';
 import 'prismjs/components/prism-sql.js';
 import 'prismjs/components/prism-swift.js';
 import 'prismjs/components/prism-graphql.js';
+import 'prismjs/plugins/treeview/prism-treeview.js';
 /**
  * map language names to Prism.js names
  */

package/lib/utils/highlight.js

@@ -47,6 +47,7 @@ require("prismjs/components/prism-scala.js");
 require("prismjs/components/prism-sql.js");
 require("prismjs/components/prism-swift.js");
 require("prismjs/components/prism-graphql.js");
+require("prismjs/plugins/treeview/prism-treeview.js");
 const DEFAULT_LANG = 'clike';
 const NEW_LINE_EXP = /\n(?!$)/g;
 Prism.languages.insertBefore('javascript', 'string', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.21.0",
+  "version": "0.21.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Menu/MenuGroup.tsx

@@ -50,12 +50,15 @@ export function MenuGroup({
           active={item.active}
           role={!item.link ? 'link' : 'none'}
           expanded={isExpanded}
+          withArrow={!!item.items.length}
         >
-          {item.icon ? <SidebarItemIcon src={item.icon} /> : null}
-          {translate(item.labelTranslationKey, item.label)}
           {!!item.items.length && (
             <ArrowIcon direction={isExpanded ? 'down' : 'right'} weight="thin" />
           )}
+          <LabelWrapper>
+            {item.icon ? <SidebarItemIcon src={item.icon} /> : null}
+            {translate(item.labelTranslationKey, item.label)}
+          </LabelWrapper>
         </MenuGroupLabel>
       </MenuLinkItem>
 
@@ -79,7 +82,11 @@ const MenuWrapper = styled.div<{ isExpanded?: boolean }>`
 	      transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;`};
 `;
 
-const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean; expanded?: boolean }>`
+const MenuGroupLabel = styled(MenuItemLabel)<{
+  isAlwaysExpanded?: boolean;
+  expanded?: boolean;
+  withArrow?: boolean;
+}>`
   padding-left: var(--sidebar-item-padding-horizontal);
   cursor: ${(props) => (props.isAlwaysExpanded ? 'default' : 'pointer')};
   font-family: var(--sidebar-item-group-font-family);
@@ -88,7 +95,8 @@ const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean; expan
   color: var(--sidebar-item-group-text-color);
   background: var(--sidebar-item-group-background-color);
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: var(--sidebar-item-group-gap);
 
   ${({ active }) =>
     active
@@ -101,4 +109,14 @@ const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean; expan
     `
     color: var(--sidebar-item-group-active-text-color);
   `}
+
+  ${({ withArrow }) =>
+    !withArrow &&
+    `
+    padding-left: var(--sidebar-item-label-padding);
+  `}
+`;
+
+const LabelWrapper = styled.div`
+  display: flex;
 `;

package/src/components/Menu/MenuItem.tsx

@@ -29,6 +29,7 @@ export function MenuItem({ item, className }: MenuItemProps): JSX.Element {
 const Wrapper = styled.div``;
 
 const Label = styled(MenuItemLabel)<{ active?: boolean }>`
+  padding-left: var(--sidebar-item-label-padding);
   color: var(--mobile-menu-item-text-color);
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/src/components/Menu/MobileMenuGroup.tsx

@@ -26,14 +26,19 @@ export function MobileMenuGroup({
   return (
     <Wrapper data-component-name="Menu/MobileMenuGroup">
       <MenuLinkItem item={item}>
-        <MenuGroupLabel onClick={toggleExpanded} active={item.active} expanded={isExpanded}>
+        <MenuGroupLabel
+          onClick={toggleExpanded}
+          active={item.active}
+          expanded={isExpanded}
+          withArrow={!!item.items.length}
+        >
+          {!!item.items.length && (
+            <ArrowIcon direction={isExpanded ? 'down' : 'right'} weight="thin" />
+          )}
           <LabelContainer>
             {item.icon ? <SidebarItemIcon src={item.icon} /> : null}
             <Label>{translate(item.labelTranslationKey, item.label)}</Label>
           </LabelContainer>
-          {!!item.items.length && (
-            <ArrowIcon direction={isExpanded ? 'down' : 'right'} weight="thin" />
-          )}
         </MenuGroupLabel>
       </MenuLinkItem>
       <MenuWrapper isExpanded={isExpanded}>{children}</MenuWrapper>
@@ -56,11 +61,16 @@ const MenuWrapper = styled.div<{ isExpanded?: boolean }>`
   ${(props) => !props.isExpanded && 'max-height: 0'}
 `;
 
-const MenuGroupLabel = styled(MenuItemLabel)<{ active?: boolean; expanded?: boolean }>`
+const MenuGroupLabel = styled(MenuItemLabel)<{
+  active?: boolean;
+  expanded?: boolean;
+  withArrow?: boolean;
+}>`
   color: var(--mobile-menu-item-text-color);
   background: var(--mobile-menu-background);
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: var(--mobile-menu-item-group-gap);
 
   ${({ active }) =>
     active &&
@@ -74,4 +84,10 @@ const MenuGroupLabel = styled(MenuItemLabel)<{ active?: boolean; expanded?: bool
     `
     color: var(--mobile-menu-item-active-text-color);
   `}
+
+  ${({ withArrow }) =>
+    !withArrow &&
+    `
+    padding-left: var(--mobile-menu-item-label-padding);
+  `}
 `;

package/src/components/Menu/styledVariables.ts

@@ -38,6 +38,8 @@ export const mobileMenu = css`
   --mobile-menu-item-text-color: var(--text-secondary); // @presenter Color
   --mobile-menu-item-active-background-color: var(--bg-raised); // @presenter Color
   --mobile-menu-item-active-text-color: var(--text-primary); // @presenter Color
+  --mobile-menu-item-label-padding: var(--spacing-xl); // @presenter Spacing
+  --mobile-menu-item-group-gap: var(--spacing-xs); // @presenter Spacing
 
   /**
       * @tokens Mobile Menu control button

package/src/components/PageNavigation/NextButton.tsx

@@ -42,4 +42,5 @@ export function NextButton({ nextPage, className }: NextPageType): JSX.Element {
 
 const StyledButton = styled(Button)`
   font-family: var(--font-family-base);
+  text-wrap: wrap;
 `;

package/src/components/PageNavigation/PreviousButton.tsx

@@ -45,4 +45,5 @@ export function PreviousButton({ prevPage, className }: PreviousPageType): JSX.E
 
 const StyledButton = styled(Button)`
   font-family: var(--font-family-base);
+  text-wrap: wrap;
 `;

package/src/components/Sidebar/ApiCallItem.tsx

@@ -28,6 +28,7 @@ const Label = styled(MenuItemLabel)`
   display: flex;
   justify-content: space-between;
   color: var(--mobile-menu-item-text-color);
+  padding-left: var(--sidebar-item-label-padding);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     color: var(--sidebar-item-text-color);

package/src/components/Sidebar/styledVariables.ts

@@ -69,6 +69,7 @@ export const sidebar = css`
   --sidebar-margin-horizontal: var(--spacing-base); // @presenter Spacing
   --sidebar-item-padding-vertical: var(--spacing-xs); // @presenter Spacing
   --sidebar-item-padding-horizontal: var(--spacing-xs); // @presenter Spacing
+  --sidebar-item-label-padding: var(--spacing-xl); // @presenter Spacing
 
   /**
     * @tokens Sidebar item border
@@ -109,6 +110,7 @@ export const sidebar = css`
   --sidebar-item-group-background-color: var(--sidebar-background-color); // @presenter Color
   --sidebar-item-group-active-text-color: var(--sidebar-item-active-color); // @presenter Color
   --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);
+  --sidebar-item-group-gap: var(--spacing-xs); // @presenter Spacing
 
   // we need a theme config for chevron-location: left (default), right-compact, right, none
   // we need another theme config for chevron-style: up-down, down-up, right-down, down-right

package/src/utils/highlight.ts

@@ -21,6 +21,7 @@ import 'prismjs/components/prism-scala.js';
 import 'prismjs/components/prism-sql.js';
 import 'prismjs/components/prism-swift.js';
 import 'prismjs/components/prism-graphql.js';
+import 'prismjs/plugins/treeview/prism-treeview.js';
 
 const DEFAULT_LANG = 'clike';
 const NEW_LINE_EXP = /\n(?!$)/g;