@redocly/theme 0.19.3 → 0.19.5

package/lib/components/Button/Button.js

@@ -69,6 +69,7 @@ exports.baseButtonStyles = (0, styled_components_1.css) `
   font-family: var(--button-font-family);
   font-weight: var(--button-font-weight);
   box-shadow: var(--button-box-shadow);
+  text-wrap: var(--button-text-wrap);
 
   &:hover {
     box-shadow: var(--button-hover-box-shadow);

package/lib/components/Button/styledVariables.js

@@ -37,6 +37,8 @@ exports.button = (0, styled_components_1.css) `
   --button-large-font-size: var(--font-size-lg); // @presenter FontSize
   --button-large-padding: 8px 16px;
 
+  --button-text-wrap: nowrap;
+
   /**
     * @tokens Button icon
     */

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/Panel/styledVariables.js

@@ -445,6 +445,7 @@ exports.apiReferencePanels = (0, styled_components_1.css) `
   --panel-try-it-action-button-font-weight: var(--font-weight-bold); // @presenter FontWeight
   --panel-try-it-action-button-font-size: var(--panel-font-size); // @presenter FontSize
   --panel-try-it-action-button-text-color: var(--text-light-solid); // @presenter Color
+  --panel-try-it-action-button-text-wrap: var(--button-text-wrap);
   --panel-try-it-action-button-background-color: var(--color-primary); // @presenter Color
   --panel-try-it-action-button-border-color: var(--color-primary); // @presenter Color
 

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/package.json

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

package/src/components/Button/Button.tsx

@@ -65,6 +65,7 @@ export const baseButtonStyles = css`
   font-family: var(--button-font-family);
   font-weight: var(--button-font-weight);
   box-shadow: var(--button-box-shadow);
+  text-wrap: var(--button-text-wrap);
 
   &:hover {
     box-shadow: var(--button-hover-box-shadow);

package/src/components/Button/styledVariables.ts

@@ -35,6 +35,8 @@ export const button = css`
   --button-large-font-size: var(--font-size-lg); // @presenter FontSize
   --button-large-padding: 8px 16px;
 
+  --button-text-wrap: nowrap;
+
   /**
     * @tokens Button icon
     */

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/Panel/styledVariables.ts

@@ -444,6 +444,7 @@ export const apiReferencePanels = css`
   --panel-try-it-action-button-font-weight: var(--font-weight-bold); // @presenter FontWeight
   --panel-try-it-action-button-font-size: var(--panel-font-size); // @presenter FontSize
   --panel-try-it-action-button-text-color: var(--text-light-solid); // @presenter Color
+  --panel-try-it-action-button-text-wrap: var(--button-text-wrap);
   --panel-try-it-action-button-background-color: var(--color-primary); // @presenter Color
   --panel-try-it-action-button-border-color: var(--color-primary); // @presenter Color
 

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