@redocly/theme 0.18.1 → 0.18.3-patch.0

package/src/components/{Navbar → Profile}/MobileUserProfile.tsx

@@ -3,9 +3,9 @@ import styled from 'styled-components';
 
 import { useProfileProps } from '@portal/Profile/useProfileProps';
 import { LogoutIcon } from '@theme/icons/LogoutIcon';
-import { AvatarWrapper, ProfileWrapper, Profile } from '@theme/components/Profile/Profile';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { useTranslate } from '@portal/hooks';
+import { UserProfileData } from '@theme/components/Profile/UserProfileData';
 
 export function MobileUserProfile() {
   const { userProfile } = useThemeConfig();
@@ -25,12 +25,7 @@ export function MobileUserProfile() {
         </LoginButton>
       ) : (
         <>
-          <UserDataWrapper>
-            <ProfilePicture>
-              <Profile name={userData.name} imageUrl={userData.picture} />
-            </ProfilePicture>
-            <UserName>{userData.name}</UserName>
-          </UserDataWrapper>
+          <UserProfileData userData={userData} />
           <LogoutButton onClick={() => handleLogout()}>
             <LogoutIcon />
           </LogoutButton>
@@ -46,7 +41,7 @@ const LoginButton = styled.a`
   margin: 0;
   padding: 5px 0;
   color: var(--mobile-menu-login-button-color);
-  font-size: 14px;
+  font-size: var(--font-size-base);
   text-align: center;
   line-height: 22px;
   cursor: pointer;
@@ -64,25 +59,6 @@ const MobileProfileWrapper = styled.div`
   background: var(--mobile-menu-profile-background);
 `;
 
-const UserDataWrapper = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const ProfilePicture = styled.div`
-  margin-right: 16px;
-
-  ${AvatarWrapper} {
-    margin: 0;
-  }
-
-  ${ProfileWrapper} {
-    padding: 0;
-  }
-`;
-
-const UserName = styled.div``;
-
 const LogoutButton = styled.div`
   cursor: pointer;
   user-select: none;

package/src/components/Profile/Profile.tsx

@@ -10,13 +10,10 @@ export interface ProfileProps {
   onClick?: () => void;
 }
 
-function ProfileComponent({ name = 'User', imageUrl, onClick, color }: ProfileProps): JSX.Element {
+function ProfileComponent({ name = 'User', imageUrl, onClick }: ProfileProps): JSX.Element {
   if (imageUrl) {
     return (
       <ProfileWrapper onClick={onClick} role="link">
-        <StyledUserName data-cy="user-name" color={color}>
-          {name}
-        </StyledUserName>
         {imageUrl && (
           <AvatarWrapper>
             <img data-cy="user-avatar" src={imageUrl} alt="profile" />
@@ -32,9 +29,6 @@ function ProfileComponent({ name = 'User', imageUrl, onClick, color }: ProfilePr
 
   return (
     <ProfileWrapper onClick={onClick} role="link">
-      <StyledUserName data-cy="user-name" color={color}>
-        {name}
-      </StyledUserName>
       <AvatarWrapper background={stringToHslColor(name)}>
         <span>{avatarLetters}</span>
       </AvatarWrapper>
@@ -51,22 +45,6 @@ export const ProfileWrapper = styled.div.attrs(() => ({
   align-items: center;
   cursor: pointer;
   width: auto;
-  padding: 0 var(--navbar-item-padding-horizontal);
-`;
-
-const StyledUserName = styled.span`
-  font-family: var(--profile-name-font-family);
-  font-size: var(--profile-name-font-size);
-  font-weight: var(--profile-name-font-weight);
-  color: var(--profile-name-text-color);
-  padding: var(--profile-name-padding-vertical) var(--profile-name-padding-horizontal);
-  margin: 0 var(--profile-name-margin-horizontal);
-
-  display: none;
-
-  ${({ theme }) => theme.mediaQueries?.medium} {
-    display: block;
-  }
 `;
 
 export const AvatarWrapper = styled.div<{ background?: string }>`
@@ -86,7 +64,6 @@ export const AvatarWrapper = styled.div<{ background?: string }>`
   font-weight: var(--profile-avatar-font-weight);
 
   border-radius: var(--profile-avatar-border-radius);
-  margin-left: var(--profile-avatar-margin-left);
 
   ${({ background }) => css`
     background-color: ${background};

package/src/components/Profile/UserProfile.tsx

@@ -8,6 +8,8 @@ import { Link } from '@portal/Link';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { useTranslate } from '@portal/hooks';
 import { Dropdown, DropdownList, DropdownListItem } from '@theme/components/Dropdown';
+import { UserProfileData } from '@theme/components/Profile/UserProfileData';
+import { LogoutIcon } from '@theme/icons';
 
 export function UserProfile({
   userData,
@@ -22,7 +24,7 @@ export function UserProfile({
   };
   const [isOpened, setIsOpened] = useState<boolean>(false);
 
-  const menuItems: JSX.Element[] = [];
+  const menuItems: JSX.Element[] = [<UserProfileData key={userData.name} userData={userData} />];
 
   if (hasDeveloperOnboarding) {
     menuItems.push(
@@ -53,12 +55,13 @@ export function UserProfile({
       data-translation-key={translationKeys.logout}
       role="link"
     >
+      <LogoutIcon />
       {translate(translationKeys.logout, userProfile?.logoutLabel || 'Log out')}
     </Logout>,
   );
 
   return (
-    <ProfileDropdown items={menuItems}>
+    <ProfileDropdown items={menuItems} alignment="end">
       <Profile
         name={userData.name}
         imageUrl={userData.picture}
@@ -92,14 +95,23 @@ const ProfileDropdown = styled(Dropdown).attrs(() => ({
   ${DropdownListItem} {
     border-radius: var(--profile-dropdown-list-item-border-radius);
 
-    & > * {
-      padding: var(--profile-dropdown-list-item-vertical-padding)
-        var(--profile-dropdown-list-item-horizontal-padding);
-    }
-
     :hover {
       background-color: var(--profile-dropdown-list-item-active-background-color);
     }
+
+    :first-child {
+      cursor: default;
+      background-color: var(--profile-dropdown-list-background-color);
+    }
   }
 `;
-const Logout = styled.div``;
+
+const Logout = styled.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  color: var(--profile-dropdown-logout-color);
+  fill: var(--profile-dropdown-logout-color);
+  border-top: 1px solid var(--profile-dropdown-logout-border-color);
+  padding: var(--profile-dropdown-logout-padding);
+`;

package/src/components/Profile/UserProfileData.tsx

@@ -0,0 +1,40 @@
+import { Profile } from '@theme';
+import React from 'react';
+import styled from 'styled-components';
+
+import { AvatarWrapper, ProfileWrapper } from '@theme/components/Profile/Profile';
+
+interface UserProfileDataProps {
+  userData: { name: string; picture: string };
+}
+
+export function UserProfileData(props: UserProfileDataProps) {
+  const { userData } = props;
+
+  return (
+    <UserProfileDataWrapper>
+      <ProfilePicture>
+        <Profile name={userData.name} imageUrl={userData.picture} />
+      </ProfilePicture>
+      <UserName>{userData.name}</UserName>
+    </UserProfileDataWrapper>
+  );
+}
+
+const UserProfileDataWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const ProfilePicture = styled.div`
+  margin-right: 16px;
+
+  ${AvatarWrapper} {
+    margin: 0;
+  }
+
+  ${ProfileWrapper} {
+    padding: 0;
+  }
+`;
+
+const UserName = styled.div``;

package/src/components/Profile/index.ts

@@ -4,3 +4,4 @@ export { LoginLink } from './LoginLink';
 export type { LoginLinkProps } from './LoginLink';
 export { UserProfile } from './UserProfile';
 export type { UserProfileProps } from './types';
+export * from '@theme/components/Profile/styledVariables';

package/src/components/Profile/styledVariables.ts

@@ -0,0 +1,53 @@
+import { css } from "styled-components";
+
+export const userProfile = css`
+
+  /**
+    * @tokens User Profile
+    */
+
+   --profile-avatar-width: var(--control-height-base); // @presenter Spacing
+   --profile-avatar-height: var(--control-height-base); // @presenter Spacing
+   --profile-avatar-border-radius: 50%; // @presenter BorderRadius
+
+   --profile-avatar-font-family: var(--navbar-item-font-family); // @presenter FontFamily
+   --profile-avatar-font-size: var(--navbar-item-font-size); // @presenter FontSize
+   --profile-avatar-font-weight: var(--font-weight-regular); // @presenter FontWeight
+   --profile-avatar-line-height: var(--line-height-base); // @presenter LineHeight
+  
+   --profile-avatar-padding-vertical: var(--spacing-base); // @presenter Spacing
+   --profile-avatar-padding-horizontal: var(--spacing-base); // @presenter Spacing
+
+   // @tokens End
+`;
+
+export const userProfileDropdown = css`
+  /**
+    * @tokens User profile menu dropdown
+    * */
+
+  --profile-dropdown-font-size: var(--dropdown-font-size); // @presenter FontSize
+  --profile-dropdown-font-weight: var(--dropdown-font-weight); // @presenter FontWeight
+  --profile-dropdown-line-height: var(--dropdown-line-height); // @presenter LineHeight
+  --profile-dropdown-text-color: var(--dropdown-text-color); // @presenter Color
+  --profile-dropdown-border-radius: var(--dropdown-border-radius); // @presenter BorderRadius
+
+  --profile-dropdown-list-min-width: var(--dropdown-list-min-width);
+  --profile-dropdown-list-max-width: var(--dropdown-list-max-width);
+  --profile-dropdown-list-padding: var(--dropdown-list-padding); // @presenter Spacing
+  --profile-dropdown-list-border-radius: var(--dropdown-list-border-radius); // @presenter BorderRadius
+  --profile-dropdown-list-background-color: var(--dropdown-list-background-color); // @presenter Color
+  --profile-dropdown-list-box-shadow: var(--dropdown-list-box-shadow); // @presenter Shadow
+
+  --profile-dropdown-list-item-horizontal-padding: var(--dropdown-list-item-horizontal-padding); // @presenter Spacing
+  --profile-dropdown-list-item-vertical-padding: var(--dropdown-list-item-vertical-padding); // @presenter Spacing
+  --profile-dropdown-list-item-border-radius: var(--dropdown-list-item-border-radius); // @presenter BorderRadius
+  --profile-dropdown-list-item-active-background-color: var(--dropdown-list-item-active-background-color); // @presenter Color
+  --profile-dropdown-list-item-separator-color: var(--dropdown-list-item-separator-color); // @presenter Color
+
+  --profile-dropdown-logout-color: var(--color-error-base);
+  --profile-dropdown-logout-border-color: var(--border-secondary);
+  --profile-dropdown-logout-padding: 0 0 0 var(--spacing-xxs);
+
+  // @tokens End
+`

package/src/components/Search/CancelSearch.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { useTranslate } from '@theme/mocks/hooks';
+import { Button } from '@theme/components/Button';
 
 export function CancelSearch({
   onClick,
@@ -17,27 +18,13 @@ export function CancelSearch({
 
   return (
     <Wrapper data-component-name="Search/CancelSearch" onClick={onClick} className={className}>
-      <Button data-translation-keys={translationKeys.cancel}>
+      <Button data-translation-keys={translationKeys.cancel} fullWidth variant="outlined">
         {translate(translationKeys.cancel, 'Cancel')}
       </Button>
     </Wrapper>
   );
 }
 
-const Button = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-  padding: 4px 16px;
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  border-radius: 6px;
-  font-size: 14px;
-  line-height: 22px;
-  height: 32px;
-`;
-
 const Wrapper = styled.div`
   display: flex;
   padding: 12px 16px 16px;

package/src/components/Search/ProductTag.tsx

@@ -26,17 +26,17 @@ const Wrapper = styled.div`
   align-items: center;
   padding: 1px 8px;
   gap: 4px;
-  background: #f2f2f2;
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  border-radius: 12px;
+  background: var(--bg-overlay);
+  border: 1px solid var(--border-secondary);
+  border-radius: var(--border-radius-xlg);
   margin-right: 16px;
 `;
 
 const Label = styled.span`
-  color: #1f2933;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 20px;
+  color: var(--text-secondary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
 `;
 
 const ClearIcon = styled(ThemeClearIcon)`

package/src/components/Search/RecentSearches.tsx

@@ -65,9 +65,9 @@ const Wrapper = styled.div`
 
 const Title = styled.div`
   color: var(--search-item-title-text-color);
-  font-weight: 600;
-  font-size: var(--font-size-small);
-  line-height: 20px;
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
   padding: 8px 24px;
 `;
 
@@ -81,7 +81,7 @@ const RecentItems = styled.div`
 const ClockBackwardsIcon = styled(ThemeClockBackwardsIcon)`
   width: 16px;
   height: 16px;
-  fill: #8d8d8d;
+  fill: var(--text-description);
 `;
 
 const ClearIcon = styled(ThemeClearIcon)`
@@ -115,7 +115,7 @@ const Item = styled.div`
   }
 
   :focus-visible {
-    outline: 2px solid var(--color-primary-200);
+    outline: 2px solid var(--color-primary);
     border-radius: 2px;
   }
 

package/src/components/Search/Search.tsx

@@ -7,6 +7,7 @@ import { SearchTrigger } from '@theme/components/Search/SearchTrigger';
 import { MobileSearchTrigger } from '@theme/components/Search/MobileSearchTrigger';
 import { SearchDialog } from '@theme/components/Search/SearchDialog';
 import { useThemeConfig } from '@theme/hooks';
+import { telemetry } from '@portal/telemetry';
 
 export function Search({ className }: { className?: string }): JSX.Element {
   const [isOpen, setIsOpen] = useState(false);
@@ -19,6 +20,7 @@ export function Search({ className }: { className?: string }): JSX.Element {
     if (hotkeysKeys) {
       hotkeys(hotkeysKeys, (ev) => {
         setIsOpen(true);
+        telemetry.send('search_opened', { method: 'shortcut' });
         ev.preventDefault();
       });
 
@@ -34,8 +36,18 @@ export function Search({ className }: { className?: string }): JSX.Element {
 
   return (
     <Wrapper data-component-name="Search/Search" className={className}>
-      <SearchTrigger onClick={() => setIsOpen(true)} />
-      <MobileSearchTrigger onClick={() => setIsOpen(true)} />
+      <SearchTrigger
+        onClick={() => {
+          telemetry.send('search_opened', { method: 'click' });
+          setIsOpen(true);
+        }}
+      />
+      <MobileSearchTrigger
+        onClick={() => {
+          telemetry.send('search_opened', { method: 'click' });
+          setIsOpen(true);
+        }}
+      />
 
       {isOpen && <SearchDialog onClose={onClose} />}
     </Wrapper>
@@ -44,6 +56,4 @@ export function Search({ className }: { className?: string }): JSX.Element {
 
 const Wrapper = styled.div`
   margin-left: auto;
-
-  padding: 0 var(--navbar-item-padding-horizontal);
 `;

package/src/components/Search/SearchIcon.tsx

@@ -5,15 +5,20 @@ import type { SVGProps } from 'react';
 
 const Icon = (props: SVGProps<SVGSVGElement>) => (
   <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    version="1.1"
-    x="0"
-    y="0"
-    viewBox="0 0 490 490"
     data-component-name="Search/SearchIcon"
     {...props}
   >
-    <path d="M484 455.2L366.2 337.4c29.2-35.6 46.8-81.2 46.8-130.9C413 92.5 320.5 0 206.5 0 92.4 0 0 92.5 0 206.5S92.4 413 206.5 413c49.7 0 95.2-17.5 130.8-46.7L455.1 484c8 8 20.9 8 28.9 0C492 476.1 492 463.1 484 455.2zM206.5 371.9C115.2 371.9 41 297.7 41 206.5S115.2 41 206.5 41C297.7 41 372 115.3 372 206.5S297.7 371.9 206.5 371.9z" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.66667 2.5C5.84258 2.5 5.037 2.74437 4.35179 3.20221C3.66659 3.66005 3.13254 4.31079 2.81717 5.07215C2.50181 5.83351 2.41929 6.67129 2.58006 7.47954C2.74084 8.2878 3.13767 9.03023 3.72039 9.61295C4.30311 10.1957 5.04554 10.5925 5.85379 10.7533C6.66205 10.914 7.49982 10.8315 8.26118 10.5162C9.02254 10.2008 9.67329 9.66675 10.1311 8.98154C10.589 8.29634 10.8333 7.49076 10.8333 6.66667C10.8333 5.5616 10.3943 4.50179 9.61295 3.72039C8.83155 2.93899 7.77174 2.5 6.66667 2.5ZM3.79622 2.37074C4.64588 1.80302 5.6448 1.5 6.66667 1.5C8.03695 1.5 9.35112 2.04434 10.3201 3.01328C11.289 3.98222 11.8333 5.29638 11.8333 6.66667C11.8333 7.68854 11.5303 8.68746 10.9626 9.53711C10.8672 9.67996 10.7649 9.8175 10.6565 9.94935L14.3536 13.6464C14.5488 13.8417 14.5488 14.1583 14.3536 14.3536C14.1583 14.5488 13.8417 14.5488 13.6464 14.3536L9.94935 10.6565C9.55739 10.979 9.11792 11.2437 8.64387 11.44C7.69978 11.8311 6.66094 11.9334 5.6587 11.7341C4.65647 11.5347 3.73586 11.0426 3.01328 10.3201C2.29071 9.59748 1.79864 8.67687 1.59928 7.67463C1.39992 6.6724 1.50224 5.63355 1.89329 4.68947C2.28434 3.74538 2.94657 2.93846 3.79622 2.37074Z"
+      fill="#A8A8A8"
+    />
   </svg>
 );
 

package/src/components/Search/SearchItem.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
-import { OperationBadge } from '@theme/components/OperationBadge';
+import { Tag } from '@theme/components/Tag';
 import { Link } from '@portal/Link';
 import { highlight } from '@theme/components/Search/utils';
 import type { ActiveItem } from '@theme/types/portal/src/shared/types/activeItem';
@@ -28,7 +28,7 @@ export function SearchItem({ item, className, product }: SearchItemProps): JSX.E
       {product && <ProductTag label={product} />}
       {item.httpVerb ? (
         <Operation>
-          <OperationBadge type={item.httpVerb}>{item.httpVerb}</OperationBadge>
+          <Tag color={item.httpVerb}>{item.httpVerb.toUpperCase()}</Tag>
           {item.pathName ? highlight(item.pathName) : null}
         </Operation>
       ) : null}
@@ -37,35 +37,30 @@ export function SearchItem({ item, className, product }: SearchItemProps): JSX.E
     </Wrapper>
   );
 
+  const itemParam = item.parameters?.[0];
+
   return (
     <>
-      {item.parameters?.length ? (
-        <>
-          {item.parameters.map((param, index) => {
-            const path = `${param.place} → ${
-              param.path?.length ? param.path?.join(' → ') + ' → ' : ''
-            }`;
-            return (
-              <SearchLink
-                className={className}
-                key={`${item.id}-${index}`}
-                to={item.url}
-                tabIndex={0}
-                innerRef={ref}
-                data-component-name="Search/SearchItem"
-              >
-                {header}
-                <Place>
-                  <div>
-                    {path}
-                    {highlight(param.name)}
-                  </div>
-                  <div>{highlight(param.description)}</div>
-                </Place>
-              </SearchLink>
-            );
-          })}
-        </>
+      {itemParam ? (
+        <SearchLink
+          className={className}
+          key={`${item.id}-${0}`}
+          to={item.url}
+          tabIndex={0}
+          innerRef={ref}
+          data-component-name="Search/SearchItem"
+        >
+          {header}
+          <Place>
+            <div>
+              {`${itemParam.place} → ${
+                itemParam.path?.length ? itemParam.path?.join(' → ') + ' → ' : ''
+              }`}
+              {highlight(itemParam.name)}
+            </div>
+            <div>{highlight(itemParam.description)}</div>
+          </Place>
+        </SearchLink>
       ) : (
         <SearchLink
           className={className}
@@ -130,7 +125,7 @@ const Description = styled.div`
 `;
 
 const Path = styled.div`
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-sm);
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 22px;
@@ -140,7 +135,7 @@ const Place = styled.div`
   display: flex;
   flex-direction: column;
   gap: 5px;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-sm);
   overflow: hidden;
   text-overflow: ellipsis;
 

package/src/components/Search/SearchTrigger.tsx

@@ -39,8 +39,9 @@ const Wrapper = styled.div`
   background-color: var(--search-trigger-background-color);
   border: var(--search-trigger-border);
   border-radius: var(--search-trigger-border-radius);
-  padding: 5px 10px 5px 14px;
+  padding: var(--search-trigger-padding);
   user-select: none;
+  gap: var(--search-trigger-gap);
 
   :hover {
     background-color: var(--search-trigger-hover-background-color);
@@ -56,13 +57,11 @@ const Wrapper = styled.div`
 `;
 
 const Label = styled.span`
-  padding-left: 10px;
-  padding-right: 16px;
   font-size: var(--search-trigger-font-size);
 `;
 
 const SearchIconSmall = styled(SearchIcon)`
-  width: 13px;
-  height: 13px;
+  width: var(--search-trigger-icon-size);
+  height: var(--search-trigger-icon-size);
   fill: var(--search-trigger-text-color);
 `;

package/src/components/Search/ShortcutKey.tsx

@@ -23,9 +23,5 @@ export function ShortcutKey(props: ShortcutKeyProps): JSX.Element {
 }
 
 export const Wrapper = styled.div`
-  cursor: pointer;
-  font-size: 0.75em;
-  right: 1em;
-  color: var(--search-trigger-shortcut-text-color);
-  opacity: 0.5;
+  font-size: var(--search-trigger-shortcut-font-size);
 `;

package/src/components/Search/SuggestedPages.tsx

@@ -47,8 +47,8 @@ const Wrapper = styled.div`
 const Title = styled.div`
   color: var(--search-item-title-text-color);
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-small);
-  line-height: 20px;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
   padding: 8px 24px;
 `;
 
@@ -89,7 +89,7 @@ const PageLink = styled(Link)`
     }
   }
   :focus-visible {
-    outline: 2px solid var(--color-primary-200);
+    outline: 2px solid var(--color-primary);
     border-radius: 2px;
   }
 `;

package/src/components/Search/index.ts

@@ -14,3 +14,4 @@ export * from '@theme/components/Search/MobileSearchTrigger';
 export * from '@theme/components/Search/CancelSearch';
 export * from '@theme/components/Search/ProductTag';
 export * from '@theme/components/Search/utils';
+export * from '@theme/components/Search/styledVariables';