@redocly/theme 0.1.1 → 0.1.4

package/src/SourceCode/index.ts

@@ -0,0 +1 @@
+export * from './SourceCode';

package/src/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Tooltip } from './Tooltip';
+
+export default {
+  title: 'Tooltip',
+  component: Tooltip,
+} as ComponentMeta<typeof Tooltip>;
+
+const Template: ComponentStory<typeof Tooltip> = (args) => {
+  return (
+    <>
+      <div style={{ padding: '50px' }}>
+        <Tooltip {...args}>
+          <button>Sample</button>
+        </Tooltip>
+      </div>
+    </>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  open: true,
+  tip: 'Try me!',
+};

package/src/Tooltip/Tooltip.tsx

@@ -0,0 +1,171 @@
+import type { PropsWithChildren } from 'react';
+import React, { useCallback, useEffect, memo } from 'react';
+import styled, { css } from 'styled-components';
+
+import { useControl } from '../hooks';
+
+export interface TooltipProps {
+  tip: string;
+  open?: boolean;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  className?: string;
+  width?: string;
+  dataTestId?: string;
+}
+
+export function TooltipComponent({
+  children,
+  open,
+  tip,
+  placement = 'top',
+  className = 'default',
+  width,
+  dataTestId = tip,
+}: PropsWithChildren<TooltipProps>): JSX.Element {
+  const { isOpened, handleOpen, handleClose } = useControl(open);
+
+  const isControlled = open !== undefined;
+
+  useEffect(() => {
+    if (isControlled) {
+      if (open) {
+        handleOpen();
+      } else {
+        handleClose();
+      }
+    }
+  }, [open, isControlled, handleOpen, handleClose]);
+
+  const handleEnter = useCallback(() => {
+    handleOpen();
+  }, [handleOpen]);
+
+  const handleLeave = useCallback(() => {
+    handleClose();
+  }, [handleClose]);
+
+  return (
+    <TooltipWrapper
+      onMouseEnter={isControlled ? undefined : handleEnter}
+      onMouseLeave={isControlled ? undefined : handleLeave}
+      onClick={isControlled ? undefined : handleLeave}
+      className={`tooltip-${className}`}
+    >
+      {children}
+      {isOpened && (
+        <TooltipBody data-cy={dataTestId} placement={placement} width={width}>
+          {tip}
+        </TooltipBody>
+      )}
+    </TooltipWrapper>
+  );
+}
+
+export const Tooltip = memo<PropsWithChildren<TooltipProps>>(TooltipComponent);
+
+const PLACEMENTS = {
+  top: css`
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -99%);
+    margin-top: -10px;
+
+    &::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`
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 99%);
+    margin-bottom: -10px;
+
+    &::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`
+    top: 50%;
+    left: 0;
+    transform: translate(-100%, -50%);
+    margin-left: -10px;
+
+    &::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`
+    top: 50%;
+    right: 0;
+    transform: translate(100%, -50%);
+    margin-right: -10px;
+
+    &::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: inline-block;
+`;
+
+const TooltipBody = styled.span<Pick<Required<TooltipProps>, 'placement'> & { 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(--global-border-radius);
+  pointer-events: none;
+  transition: opacity 0.3s ease-out;
+
+  font-size: 13px;
+
+  &::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-color);
+  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;
+
+  width: ${({ width }) => width || '120px'};
+  ${({ placement }) => `${PLACEMENTS[placement]};`}
+`;

package/src/Tooltip/__tests__/Tooltip.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+
+import { Tooltip } from '../Tooltip';
+
+describe('Tooltip', () => {
+  it('renders closed', () => {
+    const { container } = render(
+      <Tooltip tip="Try me!">
+        <button>test</button>
+      </Tooltip>,
+    );
+    container;
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders opened', () => {
+    const { container } = render(
+      <Tooltip tip="Try me!" open={true} placement="bottom" dataTestId="tooltip-opened">
+        <button>test</button>
+      </Tooltip>,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should open and close on mouse enter/leave event', () => {
+    const { getByText } = render(
+      <Tooltip tip="Try me!" dataTestId="tooltip">
+        <button>test</button>
+      </Tooltip>,
+    );
+
+    fireEvent.mouseEnter(getByText('test'));
+    expect(getByText('Try me!')).toBeTruthy();
+
+    fireEvent.mouseLeave(getByText('test'));
+    // expect(getByText('Try me!')).toBeFalsy();
+    expect(() => getByText('Try me!')).toThrow();
+  });
+});

package/src/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tooltip renders closed 1`] = `
+.c0 {
+  position: relative;
+  display: inline-block;
+}
+
+<div
+  class="c0 tooltip-default"
+>
+  <button>
+    test
+  </button>
+</div>
+`;
+
+exports[`Tooltip renders opened 1`] = `
+.c0 {
+  position: relative;
+  display: inline-block;
+}
+
+.c1 {
+  display: inline-block;
+  position: absolute;
+  text-align: center;
+  padding: 10px 20px;
+  max-width: 250px;
+  white-space: normal;
+  overflow-wrap: break-word;
+  border-radius: var(--global-border-radius);
+  pointer-events: none;
+  -webkit-transition: opacity 0.3s ease-out;
+  transition: opacity 0.3s ease-out;
+  font-size: 13px;
+  background: var(--tooltip-background-color);
+  color: var(--tooltip-color);
+  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;
+  width: 120px;
+  bottom: 0;
+  left: 50%;
+  -webkit-transform: translate(-50%,99%);
+  -ms-transform: translate(-50%,99%);
+  transform: translate(-50%,99%);
+  margin-bottom: -10px;
+}
+
+.c1::after {
+  position: absolute;
+  content: ' ';
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-color: var(--tooltip-background-color);
+}
+
+.c1::after {
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom-width: 6px;
+  border-bottom-style: solid;
+  top: 0;
+  left: 50%;
+  -webkit-transform: translate(-50%,-99%);
+  -ms-transform: translate(-50%,-99%);
+  transform: translate(-50%,-99%);
+}
+
+<div
+  class="c0 tooltip-default"
+>
+  <button>
+    test
+  </button>
+  <span
+    class="c1"
+    data-cy="tooltip-opened"
+  >
+    Try me!
+  </span>
+</div>
+`;

package/src/Tooltip/index.ts

@@ -0,0 +1 @@
+export * from './Tooltip';