@redocly/theme 0.0.0-react18-20231120182601

package/src/components/Tiles/types.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from 'react';
+
+export type TextAlign = 'left' | 'right' | 'center' | 'justify';
+
+export interface TileProps {
+  header?: string;
+  icon?: string;
+  children?: string;
+  to?: string;
+  target?: string;
+  headerAlign?: TextAlign;
+  textAlign?: TextAlign;
+  bgColor?: string;
+  bgImage?: string;
+  color?: string;
+  className?: string;
+  style?: CSSProperties;
+  maxWidth?: string;
+}

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,202 @@
+import React, { useEffect, memo, useRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import { useControl, useOutsideClick } from '@theme/hooks';
+
+export interface TooltipProps {
+  tip: string | ReactNode;
+  isOpen?: boolean;
+  withArrow?: boolean;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  className?: string;
+  width?: string;
+  dataTestId?: string;
+}
+
+export function TooltipComponent({
+  children,
+  isOpen,
+  tip,
+  withArrow = true,
+  placement = 'top',
+  className = 'default',
+  width,
+  dataTestId,
+}: PropsWithChildren<TooltipProps>): JSX.Element {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const { isOpened, handleOpen, handleClose } = useControl(isOpen);
+
+  useOutsideClick(ref, handleClose);
+
+  const isControlled = isOpen !== undefined;
+
+  useEffect(() => {
+    if (isControlled) {
+      if (isOpen) {
+        handleOpen();
+      } else {
+        handleClose();
+      }
+    }
+  }, [isOpen, isControlled, handleOpen, handleClose]);
+
+  const controllers = !isControlled && {
+    onMouseEnter: handleOpen,
+    onMouseLeave: handleClose,
+    onClick: handleClose,
+  };
+
+  return (
+    <TooltipWrapper
+      ref={ref}
+      {...controllers}
+      className={`tooltip-${className}`}
+      data-component-name="Tooltip/Tooltip"
+    >
+      {children}
+      {isOpened && (
+        <TooltipBody
+          data-cy={dataTestId || (typeof tip === 'string' ? tip : '')}
+          placement={placement}
+          width={width}
+          withArrow={withArrow}
+        >
+          {tip}
+        </TooltipBody>
+      )}
+    </TooltipWrapper>
+  );
+}
+
+export const Tooltip = memo<PropsWithChildren<TooltipProps>>(TooltipComponent);
+
+const PLACEMENTS = {
+  top: css<Pick<TooltipProps, 'withArrow'>>`
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -99%);
+    margin-top: -10px;
+
+    ${({ withArrow }) =>
+      withArrow &&
+      css`
+        &::after {
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+          border-top-width: 6px;
+          border-top-style: solid;
+          bottom: 0;
+          left: 50%;
+          transform: translate(-50%, 99%);
+        }
+      `}
+  `,
+  bottom: css<Pick<TooltipProps, 'withArrow'>>`
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 99%);
+    margin-bottom: -10px;
+
+    ${({ withArrow }) =>
+      withArrow &&
+      css`
+        &::after {
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+          border-bottom-width: 6px;
+          border-bottom-style: solid;
+          top: 0;
+          left: 50%;
+          transform: translate(-50%, -99%);
+        }
+      `}
+  `,
+  left: css<Pick<TooltipProps, 'withArrow'>>`
+    top: 50%;
+    left: 0;
+    transform: translate(-100%, -50%);
+    margin-left: -10px;
+
+    ${({ withArrow }) =>
+      withArrow &&
+      css`
+        &::after {
+          border-top: 5px solid transparent;
+          border-bottom: 5px solid transparent;
+          border-left-width: 6px;
+          border-left-style: solid;
+          top: 50%;
+          right: 0;
+          transform: translate(99%, -50%);
+        }
+      `}
+  `,
+  right: css<Pick<TooltipProps, 'withArrow'>>`
+    top: 50%;
+    right: 0;
+    transform: translate(100%, -50%);
+    margin-right: -10px;
+
+    ${({ withArrow }) =>
+      withArrow &&
+      css`
+        &::after {
+          border-top: 5px solid transparent;
+          border-bottom: 5px solid transparent;
+          border-right-width: 6px;
+          border-right-style: solid;
+          top: 50%;
+          left: 0;
+          transform: translate(-99%, -50%);
+        }
+      `}
+  `,
+};
+
+const TooltipWrapper = styled.div`
+  position: relative;
+  display: flex;
+`;
+
+const TooltipBody = styled.span<
+  Pick<Required<TooltipProps>, 'placement' | 'withArrow'> & { width?: string }
+>`
+  display: inline-block;
+
+  position: absolute;
+  text-align: center;
+
+  padding: 10px 20px;
+  max-width: 250px;
+  white-space: normal;
+  overflow-wrap: break-word;
+
+  border-radius: var(--border-radius);
+  transition: opacity 0.3s ease-out;
+
+  font-size: 13px;
+
+  z-index: var(--z-index-overlay);
+
+  &::after {
+    position: absolute;
+
+    content: ' ';
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-color: var(--tooltip-background-color);
+  }
+
+  background: var(--tooltip-background-color);
+  color: var(--tooltip-text-color);
+  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;
+
+  width: ${({ width }) => width || '120px'};
+  ${({ placement }) =>
+    css`
+      ${PLACEMENTS[placement]};
+    `}
+`;

package/src/components/Tooltip/index.ts

@@ -0,0 +1,2 @@
+export * from '@theme/components/Tooltip/Tooltip';
+export * from '@theme/components/Tooltip/styledVariables';

package/src/components/Tooltip/styledVariables.ts

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

package/src/components/Typography/CompactTypography.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+import { Typography } from '@theme/components/Typography/Typography';
+
+export const CompactTypography = styled(Typography).attrs(() => ({
+  mt: '0em',
+  mb: '0em',
+  'data-component-name': 'Typography/CompactTypography',
+}))``;

package/src/components/Typography/Emphasis.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const Emphasis = styled.strong.attrs<{ className?: string }>(({ className }) => ({
+  'data-component-name': 'Typography/Emphasis',
+  className,
+}))`
+  font-weight: var(--font-weight-bold);
+`;

package/src/components/Typography/H1.ts

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

package/src/components/Typography/H2.ts

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

package/src/components/Typography/H3.ts

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

package/src/components/Typography/SectionHeader.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const SectionHeader = styled.h2.attrs<{ className?: string }>(({ className }) => ({
+  'data-component-name': 'Typography/SectionHeader',
+  className,
+}))`
+  color: var(--h2-text-color);
+  font-size: var(--h2-font-size);
+  font-weight: var(--font-weight-regular);
+  text-align: center;
+  margin: 2.65em 0;
+  padding: 0 20px;
+  font-family: var(--h2-font-family);
+`;

package/src/components/Typography/Typography.ts

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+export interface TypographyProps {
+  color?: string;
+  fontFamily?: string;
+  fontSize?: string;
+  fontStyle?: string;
+  fontWeight?: string;
+  lineHeight?: string;
+  letterSpacing?: string;
+  marginBottom?: string;
+  marginTop?: string;
+  textAlign?: string;
+}
+
+export const Typography = styled.div.attrs<{ className?: string }>(({ className }) => ({
+  'data-component-name': 'Typography/Typography',
+  className,
+}))<TypographyProps>`
+  color: ${({ color }) => color || 'var(--text-base)'};
+  font-family: ${({ fontFamily }) => fontFamily || 'var(--font-family-base)'};
+  font-size: ${({ fontSize }) => fontSize || 'var(--font-size-base)'};
+  font-style: ${({ fontStyle }) => fontStyle};
+  font-weight: ${({ fontWeight }) => fontWeight || 'var(--font-weight-regular)'};
+  line-height: ${({ lineHeight }) => lineHeight || 'var(--line-height-base)'};
+  letter-spacing: ${({ letterSpacing }) => letterSpacing};
+  margin-bottom: ${({ marginBottom }) => marginBottom};
+  margin-top: ${({ marginTop }) => marginTop};
+  text-align: ${({ textAlign }) => textAlign};
+`;

package/src/components/Typography/index.ts

@@ -0,0 +1,7 @@
+export * from '@theme/components/Typography/H1';
+export * from '@theme/components/Typography/H2';
+export * from '@theme/components/Typography/H3';
+export * from '@theme/components/Typography/Emphasis';
+export * from '@theme/components/Typography/SectionHeader';
+export * from '@theme/components/Typography/Typography';
+export * from '@theme/components/Typography/CompactTypography';

package/src/components/index.ts

@@ -0,0 +1,29 @@
+export * from '@theme/components/Button';
+export * from '@theme/components/CopyButton';
+export * from '@theme/components/EditPageButton';
+export * from '@theme/components/JsonViewer';
+export * from '@theme/components/Typography';
+export * from '@theme/components/SidebarLogo';
+export * from '@theme/components/CodeBlock';
+export * from '@theme/components/Tooltip';
+export * from '@theme/components/Panel';
+export * from '@theme/components/Feedback';
+export * from '@theme/components/Tag';
+export * from '@theme/components/TableOfContent';
+export * from '@theme/components/Profile';
+export * from '@theme/components/ColorModeSwitcher';
+export * from '@theme/components/Sidebar';
+export * from '@theme/components/Markdown';
+export * from '@theme/components/OpenApiDocs';
+export * from '@theme/components/SidebarActions';
+export * from '@theme/components/Filter';
+export * from '@theme/components/Tabs';
+export * from '@theme/components/Menu';
+export * from '@theme/components/Separator';
+export * from '@theme/components/Cards';
+export * from '@theme/components/Tiles';
+export * from '@theme/components/Breadcrumbs';
+export * from '@theme/components/Catalog';
+export * from '@theme/components/Product';
+export * from '@theme/components/Select';
+export * from '@theme/components/Dropdown';