@redocly/theme 0.74.2-pingfed.2 → 0.81.2-rc.1

package/src/components/Tag/Tag.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 type DefaultStatusColor = 'success' | 'processing' | 'error' | 'warning' | 'default';
 type ActionStatusColor = 'approved' | 'declined' | 'pending';
-type SubjectStatusColor = 'active' | 'draft' | 'deprecated';
+type SubjectStatusColor = 'active' | 'draft' | 'deprecated' | 'product';
 type HttpColor = 'get' | 'post' | 'put' | 'delete' | 'option' | 'patch' | 'head' | 'hook' | 'link';
 type StatusColor = DefaultStatusColor | ActionStatusColor | SubjectStatusColor | HttpColor;
 type Color =
@@ -19,27 +19,46 @@ type Color =
   | 'geekblue'
   | 'yellow';
 
-interface TagProps {
+type TagProps = {
   className?: string;
   children?: React.ReactNode;
   closable?: boolean;
   color?: StatusColor | Color | string;
+  borderless?: boolean;
+  withStatusDot?: boolean;
+  statusDotColor?: string;
   size?: string;
   icon?: React.ReactNode;
   onClick?: () => void;
-}
+};
 
-export function Tag({ children, className, color, icon, onClick, size }: TagProps): JSX.Element {
+export function Tag({
+  children,
+  color,
+  icon,
+  onClick,
+  size,
+  borderless,
+  withStatusDot,
+  statusDotColor = 'var(--tag-status-dot-color-default)',
+  ...otherProps
+}: TagProps): JSX.Element {
   return (
-    <TagContainer className={className} color={color} size={size} onClick={onClick}>
-      {icon ? icon : null}
+    <TagContainer
+      data-component-name="Tag/Tag"
+      borderless={borderless}
+      color={color}
+      size={size}
+      onClick={onClick}
+      {...otherProps}
+    >
+      {withStatusDot ? <StatusDot color={statusDotColor} /> : icon ? icon : null}
       {children}
     </TagContainer>
   );
 }
 
 const TagContainer = styled.div.attrs(({ className, color, size }: TagProps) => ({
-  'data-component-name': 'Tag/Tag',
   className:
     (className || '') +
     ` tag-default ${color ? `tag-${color}` : ''} ${size ? `tag-size-${size}` : ''}`,
@@ -66,7 +85,19 @@ const TagContainer = styled.div.attrs(({ className, color, size }: TagProps) =>
   text-transform: var(--tag-text-transform);
 
   color: var(--tag-color);
-  background-color: var(--tag-background-color);
-  border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);
+  background-color: var(--tag-bg-color);
+  ${({ borderless }) =>
+    borderless
+      ? ''
+      : 'border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);'}
   border-radius: var(--tag-border-radius);
 `;
+
+const StatusDot = styled.div<{ color: string }>`
+  display: inline-block;
+  width: var(--tag-badge-size);
+  height: var(--tag-badge-size);
+  border: var(--tag-badge-border-width) solid var(--tag-badge-border-color);
+  border-radius: 50%;
+  background-color: ${({ color }) => color};
+`;

package/src/components/Tag/variables.dark.ts

@@ -0,0 +1,16 @@
+import { css } from 'styled-components';
+
+export const tagDarkMode = css`
+  --tag-operation-color-delete: #fa82a2;
+  --tag-operation-color-get: #68cc97;
+  --tag-operation-color-post: #90b0f0;
+  --tag-operation-color-put: #e0a663;
+  --tag-operation-color-patch: #e0c363;
+
+  .tag-grey,
+  .tag-draft,
+  .tag-schema,
+  .tag-default {
+    --tag-bg-color: var(--color-warm-grey-4); // @presenter Color
+  }
+`;

package/src/components/Tag/variables.ts

@@ -0,0 +1,185 @@
+import { css } from 'styled-components';
+
+export const tag = css`
+  /**
+    * @tokens Tag borders
+    */
+
+  --tag-border-width: 1px; //@presenter Border
+  --tag-border-style: solid; //@presenter Border
+  --tag-border-radius: var(--border-radius-xl); // @presenter BorderRadius
+  --tag-box-shadow: none; // @presenter Shadow
+
+  --tag-status-dot-color-default: var(--color-persian-green-7);
+  --tag-badge-size: var(--spacing-xs);
+  --tag-badge-border-width: 1.5px;
+  --tag-badge-border-color: #ffffff;
+
+
+  /**
+    * @tokens Tag spacing
+    */
+
+  --tag-padding: 1px 8px; //@presenter Spacing
+  --tag-large-padding: 4px 16px; //@presenter Spacing
+  --tag-margin: 0 5px 0 0; //@presenter Spacing
+  --tag-gap: 5px; //@presenter Spacing
+
+  /**
+    * @tokens Tag size
+    */
+
+  .tag-size-large {
+    --tag-padding: var(--tag-large-padding);
+    --tag-font-size: var(--font-size-base);
+  }
+
+  /**
+    * @tokens Tag typography
+    */
+
+  --tag-font-size: var(--font-size-sm); // @presenter FontSize
+  --tag-font-family: inherit; // @presenter FontFamily
+  --tag-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --tag-line-height: var(--line-height-sm);
+  --tag-text-transform: capitalize;
+
+  /**
+    * @tokens Tag icon
+    */
+
+  --tag-icon-width: 1em; // @presenter Spacing
+  --tag-icon-height: 1em; // @presenter Spacing
+
+  /**
+    * @tokens Tag colors
+    */
+  --tag-basic-content-color: var(--color-warm-grey-9); // @presenter Color
+  --tag-basic-bg-color: var(--color-warm-grey-2); // @presenter Color
+  --tag-basic-border-color: var(--color-warm-grey-2); // @presenter Color
+
+  .tag-grey,
+  .tag-draft,
+  .tag-schema,
+  .tag-default {
+    --tag-color: var(--text-color-primary); // @presenter Color
+    --tag-bg-color: var(--color-warm-grey-2); // @presenter Color
+    --tag-border-color: var(--border-color-primary); // @presenter Color
+  }
+
+  .tag-green,
+  .tag-success,
+  .tag-approved {
+    --tag-color: var(--color-success-active); // @presenter Color
+    --tag-bg-color: var(--color-success-bg); // @presenter Color
+    --tag-border-color: var(--color-success-active); // @presenter Color
+  }
+
+  .tag-red,
+  .tag-error,
+  .tag-declined {
+    --tag-color: var(--color-error-active); // @presenter Color
+    --tag-bg-color: var(--color-error-bg); // @presenter Color
+    --tag-border-color: var(--color-error-active); // @presenter Color
+  }
+
+  .tag-gold,
+  .tag-warning,
+  .tag-deprecated {
+    --tag-color: var(--color-warning-active); // @presenter Color
+    --tag-bg-color: var(--color-warning-bg); // @presenter Color
+    --tag-border-color: var(--color-warning-active); // @presenter Color
+  }
+
+  .tag-blue,
+  .tag-processing {
+    --tag-color: var(--color-info-active); // @presenter Color
+    --tag-bg-color: var(--color-info-bg); // @presenter Color
+    --tag-border-color: var(--color-info-active); // @presenter Color
+  }
+
+  .tag-purple,
+  .tag-head {
+    --tag-color: var(--color-purple-7); // @presenter Color
+    --tag-bg-color: var(--color-purple-1); // @presenter Color
+    --tag-border-color: var(--color-purple-7); // @presenter Color
+  }
+
+  .tag-cyan,
+  .tag-option {
+    --tag-color: var(--color-turquoise-7); // @presenter Color
+    --tag-bg-color: var(--color-turquoise-1); // @presenter Color
+    --tag-border-color: var(--color-turquoise-7); // @presenter Color
+  }
+
+  .tag-yellow {
+    --tag-color: var(--color-carrot-7); // @presenter Color
+    --tag-bg-color: var(--color-carrot-1); // @presenter Color
+    --tag-border-color: var(--color-carrot-7); // @presenter Color
+  }
+
+  .tag-geekblue,
+  .tag-link {
+    --tag-color: var(--color-turquoise-7); // @presenter Color
+    --tag-bg-color: var(--color-turquoise-1); // @presenter Color
+    --tag-border-color: var(--color-turquoise-7); // @presenter Color
+  }
+
+  .tag-magenta,
+  .tag-hook {
+    --tag-color: var(--color-magenta-7); // @presenter Color
+    --tag-bg-color: var(--color-magenta-1); // @presenter Color
+    --tag-border-color: var(--color-magenta-7); // @presenter Color
+  }
+
+  .tag-lime {
+    --tag-color: var(--color-green-7); // @presenter Color
+    --tag-bg-color: none; // @presenter Color
+    --tag-border-color: var(--color-green-7); // @presenter Color
+  }
+
+  .tag-product {
+    --tag-color: var(--color-warm-grey-7); // @presenter Color
+    --tag-bg-color: transparent; // @presenter Color
+    --tag-border-color: var(--color-warm-grey-4); // @presenter Color
+  }
+
+  /**
+    * @tokens Tag http
+    */
+  .tag-http {
+    --tag-font-family: var(--font-family-monospaced); // @presenter FontFamily
+    --tag-text-transform: uppercase;
+  }
+
+  /**
+    * @tokens Operation tag colors
+    */
+
+  --tag-operation-color-delete: #E70B46;
+  --tag-operation-color-get: #25B869;
+  --tag-operation-color-post: #1E65F5;
+  --tag-operation-color-put: #F5901D;
+  --tag-operation-color-patch: #F5C31D;
+
+  .tag-delete {
+      --tag-color: var(--tag-operation-color-delete); // @presenter Color
+  }
+  .tag-get {
+      --tag-color: var(--tag-operation-color-get); // @presenter Color
+  }
+
+  .tag-post {
+      --tag-color: var(--tag-operation-color-post); // @presenter Color
+  }
+
+  .tag-put {
+      --tag-color: var(--tag-operation-color-put); // @presenter Color
+  }
+  
+  .tag-patch {
+      --tag-color: var(--tag-operation-color-patch); // @presenter Color
+  }
+
+  // @tokens End
+`;

package/src/components/Tags/CounterTag.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+
+export const CounterTag = styled(Tag).attrs({
+  className: 'tag-counter',
+  'data-component-name': 'Tags/CounterTag',
+})`
+  padding: var(--counter-tag-padding);
+  border-radius: var(--counter-tag-border-radius);
+  min-width: var(--counter-tag-min-width);
+  height: fit-content;
+`;

package/src/components/Tags/HttpTag.tsx

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+
+export const HttpTag = styled(Tag).attrs({
+  className: 'tag-http',
+  'data-component-name': 'Tags/HttpTag',
+})`
+  display: flex;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  margin: var(--http-tag-margin);
+  padding: var(--http-tag-padding);
+
+  width: var(--http-tag-width);
+  height: var(--http-tag-height);
+
+  font-size: var(--http-tag-font-size);
+  font-family: var(--http-tag-font-family);
+  font-weight: var(--http-tag-font-weight);
+  line-height: var(--http-tag-line-height);
+  border: var(--http-tag-border);
+  background-color: var(--http-tag-bg-color);
+`;

package/src/components/Tags/variables.ts

@@ -0,0 +1,18 @@
+import { css } from "styled-components";
+
+export const httpTag = css`
+  --http-tag-width: 45px;
+  --http-tag-height: 22px;
+  --http-tag-font-family: var(--font-family-monospaced); // @presenter FontFamily
+  --http-tag-font-size: var(--font-size-sm); // @presenter FontSize
+  --http-tag-font-weight: var(--font-weight-bold); //@presenter FontWeight
+  --http-tag-line-height: var(--line-height-sm); // @presenter LineHeight
+  --http-tag-margin: 0px;
+  --http-tag-padding: 2px 0 0 0;
+  --http-tag-border: none;
+  --http-tag-bg-color: none;
+
+  --counter-tag-padding: 0px var(--spacing-xxs);
+  --counter-tag-border-radius: var(--border-radius);
+  --counter-tag-min-width: var(--spacing-md);
+`

package/src/components/Tooltip/Tooltip.tsx

@@ -3,9 +3,9 @@ import styled, { css } from 'styled-components';
 
 import type { PropsWithChildren, ReactNode } from 'react';
 
-import { useControl, useOutsideClick } from '@theme/hooks';
+import { useControl, useOutsideClick } from '@redocly/theme/core/hooks';
 
-export interface TooltipProps {
+export type TooltipProps = {
   tip: string | ReactNode;
   isOpen?: boolean;
   withArrow?: boolean;
@@ -13,7 +13,7 @@ export interface TooltipProps {
   className?: string;
   width?: string;
   dataTestId?: string;
-}
+};
 
 export function TooltipComponent({
   children,
@@ -58,7 +58,7 @@ export function TooltipComponent({
       {children}
       {isOpened && (
         <TooltipBody
-          data-cy={dataTestId || (typeof tip === 'string' ? tip : '')}
+          data-testid={dataTestId || (typeof tip === 'string' ? tip : '')}
           placement={placement}
           width={width}
           withArrow={withArrow}
@@ -187,10 +187,10 @@ const TooltipBody = styled.span<
     display: inline-block;
     width: 0;
     height: 0;
-    border-color: var(--tooltip-background-color);
+    border-color: var(--tooltip-bg-color);
   }
 
-  background: var(--tooltip-background-color);
+  background: var(--tooltip-bg-color);
   color: var(--tooltip-text-color);
   box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;
 

package/src/components/Tooltip/variables.ts

@@ -0,0 +1,18 @@
+import { css } from 'styled-components';
+
+export const tooltip = css`
+  /**
+    * @tokens Tooltip Base
+    * @presenter Color
+    */
+
+  --tooltip-text-color: var(--text-color-secondary);
+  --tooltip-bg-color: var(--bg-color-raised);
+
+  .tooltip-copy-button {
+    --tooltip-text-color: var(--text-color-secondary);
+    --tooltip-bg-color: var(--bg-color-raised);
+  }
+
+  // @tokens End
+`;

package/src/components/Typography/CompactTypography.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Typography } from '@theme/components/Typography/Typography';
+import { Typography } from '@redocly/theme/components/Typography/Typography';
 
 export const CompactTypography = styled(Typography).attrs(() => ({
   mt: '0em',

package/src/components/Typography/H1.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { typography } from '@theme/utils';
+import { typography } from '@redocly/theme/core/utils';
 
 export const H1 = styled.h1.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Typography/H1',

package/src/components/Typography/H2.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { typography } from '@theme/utils';
+import { typography } from '@redocly/theme/core/utils';
 
 export const H2 = styled.h2.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Typography/H2',

package/src/components/Typography/H3.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { typography } from '@theme/utils';
+import { typography } from '@redocly/theme/core/utils';
 
 export const H3 = styled.h3.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Typography/H3',

package/src/components/Typography/H4.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+import { typography } from '@redocly/theme/core/utils';
+
+export const H4 = styled.h4.attrs<{ className?: string }>(({ className }) => ({
+  'data-component-name': 'Typography/H4',
+  className,
+}))`
+  color: var(--h4-text-color);
+  margin: var(--h4-margin-top) 0 var(--h4-margin-bottom);
+
+  ${typography('h4', 'h')};
+`;

package/src/components/Typography/Typography.ts

@@ -17,7 +17,7 @@ export const Typography = styled.span.attrs<{ className?: string }>(({ className
   'data-component-name': 'Typography/Typography',
   className,
 }))<TypographyProps>`
-  color: ${({ color }) => color || 'var(--text-base)'};
+  color: ${({ color }) => color || 'var(--text-color-primary)'};
   font-family: ${({ fontFamily }) => fontFamily || 'var(--font-family-base)'};
   font-size: ${({ fontSize }) => fontSize || 'var(--font-size-base)'};
   font-style: ${({ fontStyle }) => fontStyle};

package/src/components/UserMenu/LoginButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Button } from '@redocly/theme/components/Button/Button';
+
+export type LoginButtonProps = {
+  href: string;
+  className?: string;
+};
+
+export function LoginButton({ href, className }: LoginButtonProps): JSX.Element {
+  const { useTranslate, useTelemetry } = useThemeHooks();
+  const { translate } = useTranslate();
+  const telemetry = useTelemetry();
+
+  return (
+    <div data-component-name="UserMenu/LoginButton" className={className}>
+      <Button
+        data-translation-key="theme.userMenu.login"
+        to={href}
+        onClick={() => telemetry.send('login_button_clicked', {})}
+        data-testid="login-btn"
+        extraClass={className}
+        variant="secondary"
+        size="medium"
+      >
+        {translate('theme.userMenu.login', 'Login')}
+      </Button>
+    </div>
+  );
+}

package/src/components/UserMenu/LogoutMenuItem.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { LogoutIcon } from '@redocly/theme/icons/LogoutIcon/LogoutIcon';
+
+import { DropdownMenuItem } from '../Dropdown/DropdownMenuItem';
+
+export type LogoutMenuItemProps = {
+  iconOnly?: boolean;
+  className?: string;
+};
+
+export function LogoutMenuItem({ iconOnly, className }: LogoutMenuItemProps): JSX.Element {
+  const { useTranslate, useTelemetry, useUserMenu } = useThemeHooks();
+  const { handleLogout } = useUserMenu();
+  const telemetry = useTelemetry();
+  const { translate } = useTranslate();
+
+  const handleClick = () => {
+    telemetry.send('logout_menu_item_clicked', {});
+    handleLogout();
+  };
+
+  return (
+    <DropdownMenuItem
+      className={className}
+      dangerous
+      data-component-name="UserMenu/LogoutMenuItem"
+      onAction={handleClick}
+      data-translation-key="theme.userMenu.logout"
+      prefix={<LogoutIcon />}
+      style={{ width: iconOnly ? 'fit-content' : '100%' }}
+    >
+      {iconOnly ? null : translate('theme.userMenu.logout', 'Log out')}
+    </DropdownMenuItem>
+  );
+}

package/src/components/UserMenu/UserAvatar.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { UserIcon } from '@redocly/theme/icons/UserIcon/UserIcon';
+
+type UserAvatarProps = {
+  picture?: string;
+  className?: string;
+  height?: `var(${string})` | `${number}px`;
+  width?: `var(${string})` | `${number}px`;
+};
+
+export function UserAvatar({
+  picture,
+  className,
+  height = 'var(--user-menu-navbar-button-height)',
+  width = 'var(--user-menu-navbar-button-width)',
+}: UserAvatarProps): JSX.Element {
+  return (
+    <UserAvatarWrapper
+      data-component-name="UserMenu/UserAvatar"
+      className={className}
+      height={height}
+      width={width}
+    >
+      {picture ? <img src={picture} alt="profile" /> : <UserIcon />}
+    </UserAvatarWrapper>
+  );
+}
+
+const UserAvatarWrapper = styled.div<{ height: string; width: string }>`
+  width: ${({ width }) => width};
+  height: ${({ height }) => height};
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: center;
+  user-select: none;
+
+  font-family: var(--user-menu-avatar-font-family);
+  font-size: var(--user-menu-avatar-font-size);
+  line-height: var(--user-menu-avatar-line-height);
+  font-weight: var(--user-menu-avatar-font-weight);
+
+  border-radius: var(--user-menu-avatar-border-radius);
+  background-color: var(--user-menu-avatar-bg-color);
+
+  & > svg {
+    width: ${({ width }) => `calc(${width} - 14px)`};
+    height: ${({ height }) => `calc(${height} - 14px)`};
+  }
+
+  & > img {
+    color: transparent;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    text-align: center;
+    text-indent: 10000px;
+  }
+`;

package/src/components/UserMenu/UserInfoMenuItem.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+import { UserAvatar } from '@redocly/theme/components/UserMenu/UserAvatar';
+
+type UserInfoMenuItemProps = {
+  name: string;
+  email?: string;
+  picture?: string;
+  className?: string;
+};
+
+export function UserInfoMenuItem({
+  name,
+  picture,
+  email,
+  className,
+}: UserInfoMenuItemProps): JSX.Element {
+  return (
+    <UserInfoMenuItemWrapper className={className} role="none">
+      <>
+        <UserAvatar
+          width="var(--user-menu-avatar-width)"
+          height="var(--user-menu-avatar-height)"
+          picture={picture}
+        />
+        <UserInfoDetailsWrapper>
+          {name !== email ? <UserName>{name}</UserName> : null}
+          {email ? <Email title={email}>{email}</Email> : null}
+        </UserInfoDetailsWrapper>
+      </>
+    </UserInfoMenuItemWrapper>
+  );
+}
+
+const UserInfoMenuItemWrapper = styled(DropdownMenuItem).attrs({
+  'data-component-name': 'UserMenu/UserInfoMenuItem',
+})`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: var(--user-menu-user-info-items-gap);
+  cursor: default;
+
+  --dropdown-menu-item-padding-vertical: var(--user-menu-user-details-padding-vertical);
+  --dropdown-menu-item-padding-horizontal: var(--user-menu-user-details-padding-horizontal);
+  --dropdown-menu-item-bg-color: var(--user-menu-user-details-bg-color);
+  --dropdown-menu-item-bg-color-hover: var(--user-menu-user-details-bg-color);
+`;
+
+const UserName = styled.div`
+  font-weight: var(--user-menu-name-font-weight);
+  font-size: var(--user-menu-name-font-size);
+  line-height: var(--user-menu-name-line-height);
+`;
+
+const Email = styled.div`
+  font-size: var(--user-menu-email-font-size);
+  line-height: var(--user-menu-email-line-height);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  min-width: 0;
+`;
+
+const UserInfoDetailsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+`;