@cypress-design/react-tooltip 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @cypress-design/react-tooltip
+
+## 0.0.1
+
+### Patch Changes
+
+- [#30](https://github.com/cypress-io/cypress-design/pull/30) [`7194ec4`](https://github.com/cypress-io/cypress-design/commit/7194ec428b96cdb5b66e4f23f63379000db19e08) Thanks [@elevatebart](https://github.com/elevatebart)! - creation of tooltips component

package/ReadMe.md

@@ -0,0 +1,28 @@
+# Tooltip
+
+## Summary
+
+Use the tooltip component to display a message when the user hovers over an element.
+For accessibility, it also triggers on focus.
+
+To allow focus, one has to add `tabIndex="0"` to the Tooltip element.
+
+```jsx
+const comp = () => (
+  <Tooltip tabIndex="0">
+    <span>Focus me</span>
+  </Tooltip>
+)
+```
+
+## install
+
+```bash
+npm install @cypress-design/react-tooltip
+```
+
+or with yarn
+
+```bash
+yarn add @cypress-design/react-tooltip
+```

package/Tooltip.rootstory.tsx

@@ -0,0 +1,43 @@
+import { Placement } from '@floating-ui/react-dom-interactions'
+import * as React from 'react'
+import Tooltip from './Tooltip'
+
+export default ({
+  color = 'light',
+  placement,
+  tabIndex,
+}: {
+  color?: 'light' | 'dark'
+  placement?: Placement
+  tabIndex?: number
+} = {}) => (
+  <div className="center flex flex-col items-center gap-20">
+    <Tooltip
+      className="bg-red-200 p-4 w-1/2"
+      popper={<div className="bg-jade-200 text-gray-800 p-4">Popover</div>}
+      color={color}
+      placement={placement}
+      tabIndex={tabIndex}
+    >
+      <div>Hover Me (dynamic: {placement?.toString()})</div>
+    </Tooltip>
+    {(['top', 'right', 'bottom', 'left', 'top-start'] as const).map(
+      (placement) => (
+        <Tooltip
+          className="bg-indigo-200 p-4 w-1/2"
+          placement={placement}
+          key={placement}
+          color={color}
+          tabIndex={tabIndex}
+          popper={
+            <div className="bg-jade-200 text-gray-800 p-4">
+              Popover ({placement})
+            </div>
+          }
+        >
+          <div>Hover Me ({placement})</div>
+        </Tooltip>
+      )
+    )}
+  </div>
+)

package/Tooltip.stories.mdx

@@ -0,0 +1,43 @@
+import { ArgsTable, Canvas, Meta, Story, Description } from '@storybook/addon-docs'
+import { version } from "./package.json"
+import changelog from "./CHANGELOG.md"
+import TooltipStory from './Tooltip.rootstory';
+
+import { Tooltip } from './Tooltip'
+
+<h1>Tooltip<span className="text-lg font-normal"> - v{version}</span></h1>
+
+<Meta 
+  title="Tooltip" 
+  component={ Tooltip } 
+  argTypes={{
+    color: {
+      control: { type: 'select' },
+    },
+    placement: {
+      control: { type: 'select' },
+    },
+  }}
+  parameters={{
+    design: {
+      type: "figma",
+      url: 'https://www.figma.com/file/1WJ3GVQyMV5e7xVxPg3yID/Design-System?node-id=893%3A0',
+    }
+  }}
+/>
+
+A tooltip is used to provide more information to help a user complete a task.
+
+<Canvas withSource="none">
+  <Story name="Tooltip">
+    {(args) => {
+      return <TooltipStory {...args} />
+    }}
+  </Story>
+</Canvas>
+
+<ArgsTable />
+
+<Description>
+  {changelog.replace(/^# .+/, '## Changelog')}
+</Description>

package/Tooltip.tsx

@@ -0,0 +1,167 @@
+import clsx from 'clsx'
+import * as React from 'react'
+import {
+  Placement,
+  offset,
+  flip,
+  arrow,
+  autoUpdate,
+  useFloating,
+  useInteractions,
+  useHover,
+  useFocus,
+  useRole,
+  useDismiss,
+  safePolygon,
+  FloatingPortal,
+} from '@floating-ui/react-dom-interactions'
+
+export interface TooltipProps {
+  placement?: Placement
+  color?: 'light' | 'dark'
+  className?: string
+  tabIndex?: number | string
+  children?: React.ReactNode
+  popper?: React.ReactNode
+}
+
+const ROTATE_MAP = {
+  bottom: 180,
+  left: 270,
+  top: 0,
+  right: 90,
+}
+
+export const Tooltip: React.FC<
+  TooltipProps & React.HTMLProps<HTMLDivElement>
+> = ({ placement, color = 'light', className, children, popper, ...rest }) => {
+  const arrowRef = React.useRef(null)
+  const [open, setOpen] = React.useState(false)
+
+  const [container] = React.useState(() => {
+    // This will be executed only on the initial render
+    // https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+    return document.createElement('div')
+  })
+
+  React.useEffect(() => {
+    document.body.appendChild(container)
+    return () => {
+      document.body.removeChild(container)
+    }
+  }, [])
+
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    strategy,
+    placement: calculatedPlacement,
+    context,
+    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+  } = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    middleware: [flip(), offset(0), arrow({ element: arrowRef, padding: 24 })],
+    whileElementsMounted: autoUpdate,
+  })
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useHover(context, {
+      handleClose: safePolygon(),
+    }),
+    useFocus(context),
+    useRole(context, { role: 'tooltip' }),
+    useDismiss(context),
+  ])
+
+  const placementSide = calculatedPlacement.split('-')[0]
+  const arrowRotate = ROTATE_MAP[placementSide]
+
+  let arrowXRule = 'left',
+    arrowYRule = 'top'
+
+  if (arrowX && arrowY) {
+    arrowXRule = 'left'
+    arrowYRule = 'top'
+  } else if (arrowX) {
+    arrowXRule = 'left'
+    arrowYRule = placementSide === 'top' ? 'bottom' : 'top'
+  } else if (arrowY) {
+    arrowXRule = placementSide === 'left' ? 'right' : 'left'
+    arrowYRule = 'top'
+  }
+
+  return (
+    <>
+      <div
+        {...getReferenceProps()}
+        ref={reference}
+        className={className}
+        {...rest}
+      >
+        {children}
+      </div>
+      <FloatingPortal>
+        {open && (
+          <div
+            {...getFloatingProps({
+              ref: floating,
+              style: {
+                position: strategy,
+                top: y ?? '',
+                left: x ?? '',
+                padding: '16px',
+              },
+            })}
+          >
+            <svg
+              ref={arrowRef}
+              viewBox="0 0 48 48"
+              width="24"
+              height="24"
+              className={clsx('absolute', [
+                color === 'dark' && 'stroke-gray-800 fill-gray-900',
+                color === 'light' && 'stroke-gray-100 fill-white',
+              ])}
+              style={{
+                transform: `rotate(${arrowRotate}deg)`,
+                filter:
+                  placementSide === 'bottom' || color === 'dark'
+                    ? undefined
+                    : 'drop-shadow(0 1px 1px rgba(225, 227, 237, .8))',
+                [arrowXRule]: `${arrowX ?? -6}px`,
+                [arrowYRule]: `${arrowY ?? -6}px`,
+              }}
+              fill="none"
+            >
+              <rect x="0" y="0" width="48" height="4" strokeWidth="0" />
+              <path
+                d="M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3"
+                stroke-width="2"
+              />
+            </svg>
+            <div
+              className={clsx(
+                'rounded shadow border p-8px text-16px leading-24px min-w-160px text-center',
+                [
+                  color === 'dark' &&
+                    'bg-gray-900 shadow-gray-800 border-gray-800',
+                  color === 'light' &&
+                    'bg-white shadow-gray-100 border-gray-100',
+                  (!x || !y) && 'invisible',
+                ]
+              )}
+            >
+              {popper}
+            </div>
+          </div>
+        )}
+      </FloatingPortal>
+    </>
+  )
+}
+
+export default Tooltip

package/TooltipReact.cy.tsx

@@ -0,0 +1,14 @@
+/// <reference types="cypress" />
+
+import * as React from 'react'
+import { mount } from 'cypress/react'
+import TooltipStory from './Tooltip.rootstory'
+import assertions from '../assertions'
+
+describe('Tooltip', { viewportHeight: 800, viewportWidth: 800 }, () => {
+  function mountStory(options: Parameters<typeof TooltipStory>[0] = {}) {
+    mount(<TooltipStory {...options} tabIndex={1} />)
+  }
+
+  assertions(mountStory)
+})

package/dist/Tooltip.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Placement } from '@floating-ui/react-dom-interactions';
+export interface TooltipProps {
+    placement?: Placement;
+    color?: 'light' | 'dark';
+    className?: string;
+    tabIndex?: number | string;
+    children?: React.ReactNode;
+    popper?: React.ReactNode;
+}
+export declare const Tooltip: React.FC<TooltipProps & React.HTMLProps<HTMLDivElement>>;
+export default Tooltip;
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,SAAS,EAaV,MAAM,qCAAqC,CAAA;AAE5C,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AASD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAC5B,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAiI/C,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Tooltip';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA"}