@redocly/theme 0.19.5 → 0.19.7

package/lib/components/Button/Button.js

@@ -51,7 +51,7 @@ const getSize = (size = 'default') => (0, styled_components_1.css) `
   min-width: var(--button-${size}-min-width);
 `;
 exports.baseButtonStyles = (0, styled_components_1.css) `
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-xs);
@@ -74,6 +74,7 @@ exports.baseButtonStyles = (0, styled_components_1.css) `
   &:hover {
     box-shadow: var(--button-hover-box-shadow);
     background-color: var(--button-hover-background-color);
+    color: var(--button-hover-color, var(--button-color));
     border: var(--button-border-width) var(--button-border-style) var(--button-hover-border-color);
   }
 

package/lib/components/Button/styledVariables.js

@@ -52,12 +52,16 @@ exports.button = (0, styled_components_1.css) `
     --button-color: var(--text-primary); // @presenter Color
     --button-background-color: var(--bg-overlay); // @presenter Color
     --button-border-color: var(--bg-overlay);
+    --button-outlined-color: var(--text-primary);
+
 
     --button-hover-background-color: var(--bg-overlay); // @presenter Color
     --button-hover-border-color: var(--border-primary); // @presenter Color
+    --button-outlined-hover-color: var(--text-primary); // @presenter Color
 
     --button-active-background-color: var(--bg-overlay); // @presenter Color
     --button-active-border-color: var(--button-color); // @presenter Color
+    --button-outlined-active-color: var(--bg-overlay); // @presenter Color
 
     --button-disabled-color: var(--text-placeholder); // @presenter Color
     --button-disabled-background-color: var(--bg-raised); // @presenter Color
@@ -72,12 +76,15 @@ exports.button = (0, styled_components_1.css) `
     --button-background-color: var(--color-primary); // @presenter Color
     --button-border-color: var(--color-primary); // @presenter Color
     --button-border: 1px solid var(--button-border-color);
+    --button-outlined-color: var(--color-primary);
 
     --button-hover-background-color: var(--color-primary-hover); // @presenter Color
     --button-hover-border-color: var(--color-primary-hover); // @presenter Color
+    --button-outlined-hover-color: var(--color-primary-hover);
 
     --button-active-background-color: var(--color-primary-active); // @presenter Color
     --button-active-border-color: var(--color-primary-active); // @presenter Color
+    --button-outlined-active-color: var(--color-primary-active); // @presenter Color
 
     --button-disabled-color: var(--text-placeholder); // @presenter Color
     --button-disabled-background-color: var(--bg-raised); // @presenter Color
@@ -88,7 +95,9 @@ exports.button = (0, styled_components_1.css) `
     * @tokens Button outline
     */
   .button-outlined {
-    --button-background-color: transparent; // @presenter Color
+    background-color: transparent;
+    --button-color: var(--button-outlined-color); // @presenter Color
+    --button-hover-color: var(--button-outlined-hover-color); // @presenter Color
   }
 
   /**

package/lib/components/Catalog/CatalogCard.js

@@ -48,7 +48,7 @@ function CatalogCard({ item }) {
                 React.createElement(CardFooter, null,
                     hasTags && (React.createElement(CardTags, null,
                         (item.tags || []).map((tag, index) => (React.createElement(CardTag, { key: tag + index, color: (0, utils_1.slug)(tag) },
-                            React.createElement(Highlight_1.Highlight, null, tag)))),
+                            React.createElement(Highlight_1.Highlight, null, (0, utils_1.capitalize)(tag))))),
                         (item.scorecardLevel && item.scorecardStatus && (React.createElement(CardTag, { color: statusToColor(item.scorecardStatus), className: "tag-variant-scorecard-level" },
                             React.createElement(Highlight_1.Highlight, null, item.scorecardLevel)))) ||
                             null)),
@@ -71,6 +71,7 @@ function statusToColor(status) {
 const SelectButton = styled_components_1.default.div `
   border: 1px solid var(--catalog-card-button-border-color);
   border-radius: 100%;
+  min-width: var(--catalog-card-button-width);
   width: var(--catalog-card-button-width);
   height: var(--catalog-card-button-height);
   display: flex;
@@ -147,6 +148,8 @@ const CardTags = styled_components_1.default.div `
   min-height: var(--spacing-xl);
 `;
 const CardTag = (0, styled_components_1.default)(Tag_1.Tag) `
+  display: block;
+  text-transform: inherit;
   margin: 0;
 `;
 //# sourceMappingURL=CatalogCard.js.map

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { MobileMenuProps } from '../../components/Menu/types';
-export declare function MobileMenu({ className }: MobileMenuProps): JSX.Element | null;
+export declare function MobileMenu({ className, hideUserProfile }: MobileMenuProps): JSX.Element | null;
 export declare const ControlButton: import("styled-components").StyledComponent<"li", any, {}, never>;

package/lib/components/Menu/MobileMenu.js

@@ -38,7 +38,7 @@ const icons_1 = require("../../icons");
 const Product_1 = require("../../components/Product/Product");
 const use_mobile_menu_levels_1 = require("../../components/Menu/hooks/use-mobile-menu-levels");
 const use_mobile_menu_items_1 = require("../../components/Menu/hooks/use-mobile-menu-items");
-function MobileMenu({ className }) {
+function MobileMenu({ className, hideUserProfile }) {
     var _a, _b, _c;
     const location = (0, react_router_dom_1.useLocation)();
     const product = (0, hooks_1.useCurrentProduct)();
@@ -65,7 +65,7 @@ function MobileMenu({ className }) {
                 react_1.default.createElement(Product_1.Product, { product: product }))) : null,
             react_1.default.createElement(MenuWrapper, null,
                 react_1.default.createElement(index_1.Menu, { items: menuItems, isMobile: true }))),
-        react_1.default.createElement(MobileUserProfile_1.MobileUserProfile, null)));
+        hideUserProfile ? null : react_1.default.createElement(MobileUserProfile_1.MobileUserProfile, null)));
 }
 exports.MobileMenu = MobileMenu;
 const MobileMenuWrapper = styled_components_1.default.div `

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

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

package/lib/components/Navbar/Navbar.js

@@ -81,7 +81,7 @@ function NavbarPresentational(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, null),
+        isOpen && react_1.default.createElement(MobileMenu_1.MobileMenu, { hideUserProfile: !!hideUserProfile }),
         react_1.default.createElement(exports.NavbarRow, null,
             react_1.default.createElement(BurgerButton_1.BurgerButton, { onClick: isOpen ? closeMobileMenu : openMobileMenu, isOpen: isOpen }),
             react_1.default.createElement(NavbarLogo_1.NavbarLogo, { logo: logo }),

package/lib/utils/index.d.ts

@@ -10,3 +10,4 @@ export * from './color';
 export * from './urls';
 export * from './jsUtils';
 export * from './tags-parser';
+export * from './text-transform';

package/lib/utils/index.js

@@ -26,4 +26,5 @@ __exportStar(require("./color"), exports);
 __exportStar(require("./urls"), exports);
 __exportStar(require("./jsUtils"), exports);
 __exportStar(require("./tags-parser"), exports);
+__exportStar(require("./text-transform"), exports);
 //# sourceMappingURL=index.js.map

package/lib/utils/text-transform.d.ts

@@ -0,0 +1 @@
+export declare function capitalize(input: string): string;

package/lib/utils/text-transform.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.capitalize = void 0;
+function capitalize(input) {
+    return input.charAt(0).toUpperCase() + input.slice(1);
+}
+exports.capitalize = capitalize;
+//# sourceMappingURL=text-transform.js.map

package/package.json

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

package/src/components/Button/Button.tsx

@@ -47,7 +47,7 @@ const getSize = (size: ButtonSize = 'default'): FlattenSimpleInterpolation => cs
 `;
 
 export const baseButtonStyles = css`
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-xs);
@@ -70,6 +70,7 @@ export const baseButtonStyles = css`
   &:hover {
     box-shadow: var(--button-hover-box-shadow);
     background-color: var(--button-hover-background-color);
+    color: var(--button-hover-color, var(--button-color));
     border: var(--button-border-width) var(--button-border-style) var(--button-hover-border-color);
   }
 

package/src/components/Button/styledVariables.ts

@@ -50,12 +50,16 @@ export const button = css`
     --button-color: var(--text-primary); // @presenter Color
     --button-background-color: var(--bg-overlay); // @presenter Color
     --button-border-color: var(--bg-overlay);
+    --button-outlined-color: var(--text-primary);
+
 
     --button-hover-background-color: var(--bg-overlay); // @presenter Color
     --button-hover-border-color: var(--border-primary); // @presenter Color
+    --button-outlined-hover-color: var(--text-primary); // @presenter Color
 
     --button-active-background-color: var(--bg-overlay); // @presenter Color
     --button-active-border-color: var(--button-color); // @presenter Color
+    --button-outlined-active-color: var(--bg-overlay); // @presenter Color
 
     --button-disabled-color: var(--text-placeholder); // @presenter Color
     --button-disabled-background-color: var(--bg-raised); // @presenter Color
@@ -70,12 +74,15 @@ export const button = css`
     --button-background-color: var(--color-primary); // @presenter Color
     --button-border-color: var(--color-primary); // @presenter Color
     --button-border: 1px solid var(--button-border-color);
+    --button-outlined-color: var(--color-primary);
 
     --button-hover-background-color: var(--color-primary-hover); // @presenter Color
     --button-hover-border-color: var(--color-primary-hover); // @presenter Color
+    --button-outlined-hover-color: var(--color-primary-hover);
 
     --button-active-background-color: var(--color-primary-active); // @presenter Color
     --button-active-border-color: var(--color-primary-active); // @presenter Color
+    --button-outlined-active-color: var(--color-primary-active); // @presenter Color
 
     --button-disabled-color: var(--text-placeholder); // @presenter Color
     --button-disabled-background-color: var(--bg-raised); // @presenter Color
@@ -86,7 +93,9 @@ export const button = css`
     * @tokens Button outline
     */
   .button-outlined {
-    --button-background-color: transparent; // @presenter Color
+    background-color: transparent;
+    --button-color: var(--button-outlined-color); // @presenter Color
+    --button-hover-color: var(--button-outlined-hover-color); // @presenter Color
   }
 
   /**

package/src/components/Catalog/CatalogCard.tsx

@@ -7,7 +7,7 @@ import { Highlight } from '@theme/ui/Highlight';
 import { Tag } from '@theme/components/Tag';
 import { PointingArrowIcon } from '@theme/icons';
 import { telemetry } from '@portal/telemetry';
-import { slug } from '@theme/utils';
+import { slug, capitalize } from '@theme/utils';
 
 export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
   const hasTags = item.scorecardStatus || item.tags?.length;
@@ -26,7 +26,7 @@ export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
               <CardTags>
                 {((item.tags as string[]) || []).map((tag, index) => (
                   <CardTag key={tag + index} color={slug(tag)}>
-                    <Highlight>{tag}</Highlight>
+                    <Highlight>{capitalize(tag)}</Highlight>
                   </CardTag>
                 ))}
                 {(item.scorecardLevel && item.scorecardStatus && (
@@ -66,6 +66,7 @@ function statusToColor(status: string) {
 const SelectButton = styled.div`
   border: 1px solid var(--catalog-card-button-border-color);
   border-radius: 100%;
+  min-width: var(--catalog-card-button-width);
   width: var(--catalog-card-button-width);
   height: var(--catalog-card-button-height);
   display: flex;
@@ -149,5 +150,7 @@ const CardTags = styled.div`
 `;
 
 const CardTag = styled(Tag)`
+  display: block;
+  text-transform: inherit;
   margin: 0;
 `;

package/src/components/Menu/MobileMenu.tsx

@@ -12,7 +12,7 @@ import { Product } from '@theme/components/Product/Product';
 import { useMobileMenuLevels } from '@theme/components/Menu/hooks/use-mobile-menu-levels';
 import { useMobileMenuItems } from '@theme/components/Menu/hooks/use-mobile-menu-items';
 
-export function MobileMenu({ className }: MobileMenuProps): JSX.Element | null {
+export function MobileMenu({ className, hideUserProfile }: MobileMenuProps): JSX.Element | null {
   const location = useLocation();
   const product = useCurrentProduct();
 
@@ -66,7 +66,7 @@ export function MobileMenu({ className }: MobileMenuProps): JSX.Element | null {
           <Menu items={menuItems} isMobile />
         </MenuWrapper>
       </ScrollableArea>
-      <MobileUserProfile />
+      {hideUserProfile ? null : <MobileUserProfile />}
     </MobileMenuWrapper>
   );
 }

package/src/components/Menu/types.ts

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

package/src/components/Navbar/Navbar.tsx

@@ -89,7 +89,7 @@ export function NavbarPresentational(props: NavbarPresentationalProps): JSX.Elem
 
   return (
     <NavbarContainer data-component-name="Navbar/Navbar" className={className}>
-      {isOpen && <MobileMenu />}
+      {isOpen && <MobileMenu hideUserProfile={!!hideUserProfile} />}
       <NavbarRow>
         <BurgerButton onClick={isOpen ? closeMobileMenu : openMobileMenu} isOpen={isOpen} />
         <NavbarLogo logo={logo} />

package/src/utils/index.ts

@@ -10,3 +10,4 @@ export * from './color';
 export * from './urls';
 export * from './jsUtils';
 export * from './tags-parser';
+export * from './text-transform';

package/src/utils/text-transform.ts

@@ -0,0 +1,3 @@
+export function capitalize(input: string): string {
+  return input.charAt(0).toUpperCase() + input.slice(1);
+}