@redocly/theme 0.0.0-react18-20231120182601

package/src/components/Product/ProductPicker.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { ThemeUIConfig } from '@theme/config';
+import { useCurrentProduct, useGlobalData } from '@portal/hooks';
+import { usePreloadHistory } from '@portal/usePreloadHistory';
+import { ArrowIcon } from '@theme/icons';
+import { Select, SelectInput, SelectList, SelectListItem } from '@theme/components/Select';
+import { Product } from '@theme/components/Product';
+
+export const ProductPicker = () => {
+  const globalData = useGlobalData() as { theme?: ThemeUIConfig };
+  const currentProduct = useCurrentProduct();
+
+  const { push } = usePreloadHistory();
+
+  const products = Object.values(globalData?.theme?.products || {});
+
+  const productComponents = products.map((product) => ({
+    element: <Product product={product} />,
+    value: product,
+  }));
+
+  return products.length ? (
+    <ProductSelect
+      value={currentProduct}
+      placeholder="Products"
+      options={productComponents}
+      triggerEvent="hover"
+      onChange={(product: typeof currentProduct) => {
+        if (!product) return;
+        push(product.link);
+      }}
+    />
+  ) : null;
+};
+
+const ProductSelect = styled(Select).attrs(() => ({
+  dataAttributes: {
+    'data-component-name': 'Product/ProductPicker',
+  },
+}))`
+  --select-list-item-active-background-color: var(
+    --product-picker-list-item-active-background-color
+  );
+  --select-list-item-hover-background-color: var(--product-picker-list-item-hover-background-color);
+
+  display: none;
+  font-size: var(--product-picker-font-size);
+  font-weight: var(--product-picker-font-weight);
+  line-height: var(--product-picker-line-height);
+  border-radius: var(--product-picker-border-radius);
+  color: var(--product-picker-text-color);
+
+  ${SelectInput} {
+    border-radius: var(--product-picker-input-border-radius);
+    padding: var(--product-picker-input-padding-vertical)
+      var(--product-picker-input-padding-horizontal);
+    color: var(--navbar-text-color);
+
+    a {
+      color: var(--navbar-text-color);
+    }
+  }
+
+  ${SelectList} {
+    min-width: var(--product-picker-list-min-width);
+    max-width: var(--product-picker-list-max-width);
+    padding: var(--product-picker-list-padding);
+    background-color: var(--product-picker-list-background-color);
+    border-radius: var(--product-picker-list-border-radius);
+    box-shadow: var(--product-picker-list-box-shadow);
+  }
+
+  ${SelectListItem} {
+    border-radius: var(--product-picker-list-item-border-radius);
+
+    & > * {
+      padding: var(--product-picker-list-item-vertical-padding)
+        var(--product-picker-list-item-horizontal-padding);
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
+
+  :hover {
+    text-decoration: var(--navbar-item-hover-text-decoration);
+    background: var(--navbar-item-hover-background-color);
+  }
+
+  ${ArrowIcon} {
+    fill: var(--navbar-text-color);
+  }
+`;

package/src/components/Product/index.ts

@@ -0,0 +1,3 @@
+export * from '@theme/components/Product/ProductPicker';
+export * from '@theme/components/Product/Product';
+export * from '@theme/components/Product/styledVariables';

package/src/components/Product/styledVariables.ts

@@ -0,0 +1,40 @@
+import { css } from "styled-components";
+
+export const product = css`
+
+  /**
+    * @tokens Product
+    */
+  --product-logo-margin: 10px; // @presenter Spacing
+
+  // @tokens End
+`;
+
+export const productPicker = css`
+  /**
+    * @tokens Product picker
+    * */
+
+  --product-picker-font-size: var(--select-font-size); // @presenter FontSize
+  --product-picker-font-weight: var(--select-font-weight); // @presenter FontWeight
+  --product-picker-line-height: var(--select-line-height); // @presenter LineHeight
+  --product-picker-text-color: var(--select-text-color); // @presenter Color
+  --product-picker-border-radius: var(--select-border-radius); // @presenter BorderRadius
+
+  --product-picker-input-padding-horizontal: var(--select-input-padding-horizontal); // @presenter Spacing
+  --product-picker-input-padding-vertical: var(--select-input-padding-vertical); // @presenter Spacing
+  --product-picker-input-border-radius: var(--select-input-border-radius); // @presenter BorderRadius
+
+  --product-picker-list-min-width: var(--select-list-min-width);
+  --product-picker-list-max-width: var(--select-list-max-width);
+  --product-picker-list-padding: var(--select-list-padding); // @presenter Spacing
+  --product-picker-list-border-radius: var(--select-list-border-radius); // @presenter BorderRadius
+  --product-picker-list-background-color: var(--select-list-background-color); // @presenter Color
+  --product-picker-list-box-shadow: var(--select-list-box-shadow); // @presenter Shadow
+
+  --product-picker-list-item-horizontal-padding: var(--select-list-item-horizontal-padding); // @presenter Spacing
+  --product-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
+  --product-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
+  --product-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+  --product-picker-list-item-hover-background-color: var(--select-list-item-hover-background-color); // @presenter Color
+`;

package/src/components/Profile/AuthUserProfile.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { LoginLink } from '@theme/components/Profile/LoginLink';
+import { UserProfile } from '@theme/components/Profile/UserProfile';
+import { useProfileProps } from '@portal/Profile/useProfileProps';
+
+export function AuthUserProfile() {
+  const { userData, hasDeveloperOnboarding, loginUrl, handleLogout } = useProfileProps();
+
+  if (userData?.isAuthenticated) {
+    return (
+      <UserProfile
+        userData={userData}
+        handleLogout={handleLogout}
+        hasDeveloperOnboarding={!!hasDeveloperOnboarding}
+      />
+    );
+  }
+
+  if (loginUrl) {
+    return <LoginLink href={loginUrl} data-cy="login-btn" />;
+  }
+
+  return null;
+}

package/src/components/Profile/LoginLink.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { useTranslate } from '@portal/hooks';
+import { telemetry } from '@portal/telemetry';
+
+export interface LoginLinkProps {
+  href: string;
+}
+
+export function LoginLink({ href }: LoginLinkProps): JSX.Element {
+  const { userProfile } = useThemeConfig();
+  const { translate } = useTranslate();
+
+  return (
+    <StyledLink
+      href={href}
+      data-translation-key="theme.profile.login"
+      onClick={() => {
+        telemetry.send('login_button_clicked', {});
+      }}
+    >
+      {translate('theme.profile.login', userProfile?.loginLabel || 'Login')}
+    </StyledLink>
+  );
+}
+
+const StyledLink = styled.a.attrs(() => ({
+  'data-component-name': 'Profile/LoginLink',
+}))`
+  display: inline-block;
+  color: var(--navbar-text-color);
+  text-decoration: none;
+  text-align: center;
+  line-height: 1;
+  font-size: var(--navbar-font-size);
+  font-weight: var(--navbar-item-font-weight);
+  &:hover {
+    color: var(--navbar-item-hover-text-color);
+  }
+`;

package/src/components/Profile/MobileUserProfile.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { useProfileProps } from '@portal/Profile/useProfileProps';
+import { LogoutIcon } from '@theme/icons/LogoutIcon';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { useTranslate } from '@portal/hooks';
+import { UserProfileData } from '@theme/components/Profile/UserProfileData';
+import { telemetry } from '@portal/telemetry';
+
+export function MobileUserProfile() {
+  const { userProfile } = useThemeConfig();
+  const { userData, handleLogout, loginUrl } = useProfileProps();
+  const { translate } = useTranslate();
+
+  if (!userData?.isAuthenticated && !loginUrl) return null;
+
+  return (
+    <MobileProfileWrapper data-component-name="Navbar/MobileUserProfile">
+      {!userData?.isAuthenticated ? (
+        <LoginButton
+          href={loginUrl}
+          data-cy="login-btn"
+          onClick={() => telemetry.send('login_button_clicked', {})}
+        >
+          {translate('theme.profile.login', userProfile?.loginLabel || 'Login')}
+        </LoginButton>
+      ) : (
+        <>
+          <UserProfileData userData={userData} />
+          <LogoutButton
+            onClick={() => {
+              handleLogout();
+              telemetry.send('logout_menu_item_clicked', {});
+            }}
+          >
+            <LogoutIcon />
+          </LogoutButton>
+        </>
+      )}
+    </MobileProfileWrapper>
+  );
+}
+const LoginButton = styled.a`
+  background: var(--mobile-menu-login-button-background);
+  border-radius: var(--mobile-menu-login-button-border-radius);
+  width: 100%;
+  margin: 0;
+  padding: 5px 0;
+  color: var(--mobile-menu-login-button-color);
+  border: 1px solid var(--mobile-menu-login-button-border-color);
+  font-size: var(--mobile-menu-login-button-font-size);
+  font-family: var(--mobile-menu-login-button-font-family);
+  font-weight: var(--mobile-menu-login-button-font-weight);
+  text-align: center;
+  line-height: var(--mobile-menu-login-button-line-height);
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover {
+    color: var(--mobile-menu-login-button-hover-color);
+  }
+`;
+
+const MobileProfileWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  bottom: 0;
+  padding: 18px 16px;
+  border-top: 1px solid var(--mobile-menu-profile-border-color);
+  background: var(--mobile-menu-profile-background);
+`;
+
+const LogoutButton = styled.div`
+  cursor: pointer;
+  user-select: none;
+`;

package/src/components/Profile/Profile.tsx

@@ -0,0 +1,85 @@
+import React, { memo } from 'react';
+import styled, { css } from 'styled-components';
+
+import { stringToHslColor } from '@theme/utils';
+
+export interface ProfileProps {
+  name: string;
+  imageUrl?: string;
+  color?: string;
+  onClick?: () => void;
+}
+
+function ProfileComponent({ name = 'User', imageUrl, onClick }: ProfileProps): JSX.Element {
+  if (imageUrl) {
+    return (
+      <ProfileWrapper onClick={onClick} role="link">
+        {imageUrl && (
+          <AvatarWrapper>
+            <img src={imageUrl} alt="profile" />
+          </AvatarWrapper>
+        )}
+      </ProfileWrapper>
+    );
+  }
+
+  const avatarLetters = `${name?.charAt(0).toUpperCase()}${
+    name?.split(' ')[1]?.charAt(0).toUpperCase() || ''
+  }`;
+
+  return (
+    <ProfileWrapper onClick={onClick} role="link">
+      <AvatarWrapper background={stringToHslColor(name)}>
+        <span>{avatarLetters}</span>
+      </AvatarWrapper>
+    </ProfileWrapper>
+  );
+}
+
+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;
+  cursor: pointer;
+  width: auto;
+`;
+
+export const AvatarWrapper = styled.div<{ background?: string }>`
+  width: var(--profile-avatar-width);
+  height: var(--profile-avatar-height);
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: center;
+  user-select: none;
+
+  font-family: var(--profile-avatar-font-family);
+  font-size: var(--profile-avatar-font-size);
+  line-height: var(--profile-avatar-line-height);
+  font-weight: var(--profile-avatar-font-weight);
+
+  border-radius: var(--profile-avatar-border-radius);
+
+  ${({ background }) => css`
+    background-color: ${background};
+    span {
+      color: ${background};
+      filter: invert(100%);
+    }
+  `}
+
+  & > img {
+    color: transparent;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    text-align: center;
+    text-indent: 10000px;
+  }
+`;

package/src/components/Profile/UserProfile.tsx

@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import type { UserProfileProps } from '@theme/components/Profile';
+import { Profile } from '@theme/components/Profile/Profile';
+import { UserProfileData } from '@theme/components/Profile/UserProfileData';
+import { Link } from '@portal/Link';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { useTranslate } from '@portal/hooks';
+import { telemetry } from '@portal/telemetry';
+import { Dropdown, DropdownList, DropdownListItem } from '@theme/components/Dropdown';
+import { LogoutIcon } from '@theme/icons';
+
+export function UserProfile({
+  userData,
+  handleLogout,
+  hasDeveloperOnboarding = false,
+}: UserProfileProps): JSX.Element {
+  const { userProfile } = useThemeConfig();
+  const { translate } = useTranslate();
+
+  const [isOpened, setIsOpened] = useState<boolean>(false);
+
+  const menuItems: JSX.Element[] = [<UserProfileData key={userData.name} userData={userData} />];
+
+  if (hasDeveloperOnboarding) {
+    menuItems.push(
+      <Link to="/apps" data-translation-key="theme.profile.myApps">
+        {translate('theme.profile.myApps', 'My Apps')}
+      </Link>,
+    );
+  }
+
+  if (userProfile && userProfile.menu) {
+    for (const item of userProfile.menu) {
+      menuItems.push(
+        <Link
+          external={item.external}
+          key={item.label}
+          to={item.link || ''}
+          separator={item?.separatorLine}
+        >
+          {item.label}
+        </Link>,
+      );
+    }
+  }
+
+  menuItems.push(
+    <Logout
+      onClick={() => {
+        handleLogout();
+        telemetry.send('logout_menu_item_clicked', {});
+      }}
+      data-translation-key="theme.profile.logout"
+      role="link"
+    >
+      <LogoutIcon />
+      {translate('theme.profile.logout', userProfile?.logoutLabel || 'Log out')}
+    </Logout>,
+  );
+
+  return (
+    <ProfileDropdown items={menuItems} alignment="end">
+      <Profile
+        name={userData.name}
+        imageUrl={userData.picture}
+        onClick={userData.logoutDisabled ? undefined : () => setIsOpened(!isOpened)}
+      />
+    </ProfileDropdown>
+  );
+}
+
+const ProfileDropdown = styled(Dropdown).attrs(() => ({
+  dataAttributes: {
+    'data-component-name': 'Profile/ProfileDropdown',
+    'data-cy': 'user-profile-dropdown',
+  },
+}))`
+  font-size: var(--profile-dropdown-font-size);
+  font-weight: var(--profile-dropdown-font-weight);
+  line-height: var(--profile-dropdown-line-height);
+  border-radius: var(--profile-dropdown-border-radius);
+  color: var(--profile-dropdown-text-color);
+
+  ${DropdownList} {
+    right: 0;
+    min-width: var(--profile-dropdown-list-min-width);
+    max-width: var(--profile-dropdown-list-max-width);
+    padding: var(--profile-dropdown-list-padding);
+    background-color: var(--profile-dropdown-list-background-color);
+    border-radius: var(--profile-dropdown-list-border-radius);
+    box-shadow: var(--profile-dropdown-list-box-shadow);
+  }
+
+  ${DropdownListItem} {
+    border-radius: var(--profile-dropdown-list-item-border-radius);
+
+    :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`
+  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 React from 'react';
+import styled from 'styled-components';
+
+import { Profile } from '@theme/components/Profile';
+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

@@ -0,0 +1,10 @@
+export { Profile } from '@theme/components/Profile/Profile';
+export type { ProfileProps } from '@theme/components/Profile/Profile';
+export { LoginLink } from '@theme/components/Profile/LoginLink';
+export type { LoginLinkProps } from '@theme/components/Profile/LoginLink';
+export { UserProfile } from '@theme/components/Profile/UserProfile';
+export type { UserProfileProps } from '@theme/components/Profile/types';
+export * from '@theme/components/Profile/AuthUserProfile';
+export * from '@theme/components/Profile/MobileUserProfile';
+export * from '@theme/components/Profile/UserProfileData';
+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/Profile/types.ts

@@ -0,0 +1,12 @@
+export interface UserProfileProps {
+  userData: {
+    isAuthenticated: boolean;
+    name: string;
+    picture: string;
+    logoutDisabled?: boolean;
+  };
+  handleLogout: (logoutRedirect?: string) => void;
+  hasDeveloperOnboarding?: boolean;
+  loginUrl?: string;
+  className?: string;
+}

package/src/components/Scorecard/Card.tsx

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+export const ScorecardCard = styled.div.attrs({
+  'data-component-name': 'Scorecard/ScorecardCard',
+})`
+  color: var(--text-primary);
+  background-color: var(--bg-raised);
+  border-radius: 4px;
+
+  border: 1px solid var(--border-primary);
+  box-shadow: 0 0 10px 0 rgba(35, 35, 35, 0.05);
+
+  flex: 1;
+  min-width: 300px;
+  padding: 20px;
+`;
+
+export const ScorecardCardTitle = styled.h3`
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin-bottom: 10px;
+  margin-top: 0;
+`;
+
+export function getLevelColor(idx: number, numberOfLevels: number) {
+  if (numberOfLevels === 0) {
+    return 'hsl(0, 0%, 50%)';
+  }
+
+  const hue = ((idx + 1) / numberOfLevels) * 120;
+  const lum = 50 - ((idx + 1) / numberOfLevels) * 25;
+  return `hsl(${hue}, 100%, ${lum}%)`;
+}