@redocly/theme 0.19.4 → 0.19.6

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/Filter/Filter.js

@@ -74,7 +74,7 @@ function changeCasing(str, casing) {
         return str.toUpperCase();
     }
     if (casing === 'sentence') {
-        const words = str.split(/[\s-_]+/);
+        const words = str === null || str === void 0 ? void 0 : str.split(/[\s-_]+/);
         return words.map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(' ');
     }
 }

package/lib/components/Image/Image.js

@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 function parseSrcSet(srcSet) {
     const result = new Map();
-    const parts = srcSet.split(', ');
+    const parts = srcSet === null || srcSet === void 0 ? void 0 : srcSet.split(', ');
     for (const part of parts) {
         const [url, theme] = part.split(' ');
         result.set(theme, url);

package/lib/components/Profile/Profile.d.ts

@@ -8,7 +8,8 @@ export interface ProfileProps {
 export declare const Profile: React.NamedExoticComponent<ProfileProps>;
 export declare const ProfileWrapper: import("styled-components").StyledComponent<"div", any, {
     'data-component-name': string;
-}, "data-component-name">;
+    'data-cy': string;
+}, "data-component-name" | "data-cy">;
 export declare const AvatarWrapper: import("styled-components").StyledComponent<"div", any, {
     background?: string | undefined;
 }, never>;

package/lib/components/Profile/Profile.js

@@ -31,9 +31,9 @@ function ProfileComponent({ name = 'User', imageUrl, onClick }) {
     var _a;
     if (imageUrl) {
         return (react_1.default.createElement(exports.ProfileWrapper, { onClick: onClick, role: "link" }, imageUrl && (react_1.default.createElement(exports.AvatarWrapper, null,
-            react_1.default.createElement("img", { "data-cy": "user-avatar", src: imageUrl, alt: "profile" })))));
+            react_1.default.createElement("img", { src: imageUrl, alt: "profile" })))));
     }
-    const avatarLetters = `${name.charAt(0).toUpperCase()}${((_a = name.split(' ')[1]) === null || _a === void 0 ? void 0 : _a.charAt(0).toUpperCase()) || ''}`;
+    const avatarLetters = `${name === null || name === void 0 ? void 0 : name.charAt(0).toUpperCase()}${((_a = name === null || name === void 0 ? void 0 : name.split(' ')[1]) === null || _a === void 0 ? void 0 : _a.charAt(0).toUpperCase()) || ''}`;
     return (react_1.default.createElement(exports.ProfileWrapper, { onClick: onClick, role: "link" },
         react_1.default.createElement(exports.AvatarWrapper, { background: (0, utils_1.stringToHslColor)(name) },
             react_1.default.createElement("span", null, avatarLetters))));
@@ -41,6 +41,7 @@ function ProfileComponent({ name = 'User', imageUrl, onClick }) {
 exports.Profile = (0, react_1.memo)(ProfileComponent);
 exports.ProfileWrapper = styled_components_1.default.div.attrs(() => ({
     'data-component-name': 'Profile/Profile',
+    'data-cy': 'user-profile',
 })) `
   display: flex;
   align-items: center;

package/lib/components/Profile/UserProfile.js

@@ -67,6 +67,7 @@ exports.UserProfile = UserProfile;
 const ProfileDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).attrs(() => ({
     dataAttributes: {
         'data-component-name': 'Profile/ProfileDropdown',
+        'data-cy': 'user-profile-dropdown',
     },
 })) `
   font-size: var(--profile-dropdown-font-size);

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.4",
+  "version": "0.19.6",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

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/Filter/Filter.tsx

@@ -142,7 +142,7 @@ function changeCasing(
   }
 
   if (casing === 'sentence') {
-    const words = str.split(/[\s-_]+/);
+    const words = str?.split(/[\s-_]+/);
     return words.map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(' ');
   }
 }

package/src/components/Image/Image.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 function parseSrcSet(srcSet: string): Map<string, string> {
   const result = new Map<string, string>();
-  const parts = srcSet.split(', ');
+  const parts = srcSet?.split(', ');
 
   for (const part of parts) {
     const [url, theme] = part.split(' ');

package/src/components/Profile/Profile.tsx

@@ -16,15 +16,15 @@ function ProfileComponent({ name = 'User', imageUrl, onClick }: ProfileProps): J
       <ProfileWrapper onClick={onClick} role="link">
         {imageUrl && (
           <AvatarWrapper>
-            <img data-cy="user-avatar" src={imageUrl} alt="profile" />
+            <img src={imageUrl} alt="profile" />
           </AvatarWrapper>
         )}
       </ProfileWrapper>
     );
   }
 
-  const avatarLetters = `${name.charAt(0).toUpperCase()}${
-    name.split(' ')[1]?.charAt(0).toUpperCase() || ''
+  const avatarLetters = `${name?.charAt(0).toUpperCase()}${
+    name?.split(' ')[1]?.charAt(0).toUpperCase() || ''
   }`;
 
   return (
@@ -40,6 +40,7 @@ export const Profile = memo<ProfileProps>(ProfileComponent);
 
 export const ProfileWrapper = styled.div.attrs(() => ({
   'data-component-name': 'Profile/Profile',
+  'data-cy': 'user-profile',
 }))`
   display: flex;
   align-items: center;

package/src/components/Profile/UserProfile.tsx

@@ -77,6 +77,7 @@ export function UserProfile({
 const ProfileDropdown = styled(Dropdown).attrs(() => ({
   dataAttributes: {
     'data-component-name': 'Profile/ProfileDropdown',
+    'data-cy': 'user-profile-dropdown',
   },
 }))`
   font-size: var(--profile-dropdown-font-size);

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);
+}