@meduza/ui-kit-2 0.2.37 → 0.3.1

package/src/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react'
+import { Tooltip } from './'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
+import styles from './Tooltip.stories.module.css'
+
+export default {
+  title: 'Main / Tooltip',
+  component: Tooltip,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  const [x, setX] = useState<'left' | 'center'>('left')
+  const [y, setY] = useState<'top' | 'bottom'>('top')
+
+  const handleX = () => {
+    setX(x === 'left' ? 'center' : 'left')
+  }
+
+  const handleY = () => {
+    setY(y === 'top' ? 'bottom' : 'top')
+  }
+
+  return (
+    <>
+      <div className={styles.root}>
+        <button type="button" onClick={() => handleX()}>
+          {x === 'left' ? 'center' : 'left'}
+        </button>
+
+        <button type="button" onClick={() => handleY()}>
+          {y === 'bottom' ? 'top' : 'bottom'}
+        </button>
+
+        <div style={{ marginTop: 100 }}>
+          <Tooltip position={[x, y]}>
+            <h3>Magic link!</h3>
+            <p>
+              Это магическая ссылка: она открывает лайт-версию материала. Ее
+              можно отправить тому, у кого «Медуза» заблокирована — и все
+              откроется!
+            </p>
+            <p>
+              <a href="https://meduza.io" target="_blank" rel="noreferrer">
+                Будьте осторожны
+              </a>{' '}
+              «Медуза» в РФ — «нежелательная» организация. Не посылайте наши
+              статьи людям, которым вы не доверяете.
+            </p>
+          </Tooltip>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { Tooltip } from './'
+import { TooltipProps } from './Tooltip.types'
+
+describe('Tooltip', () => {
+  let props: TooltipProps
+
+  const renderComponent = () => render(<Tooltip {...props} />)
+
+  it('should have root style', () => {
+    const { container } = renderComponent()
+
+    expect(container).toBeInTheDocument()
+  })
+})

package/src/Tooltip/Tooltip.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { TooltipProps } from './Tooltip.types'
+import { makeClassName } from '../utils/makeClassName'
+import styles from './Tooltip.module.css'
+import { capitalizeFirstLetter } from '../utils/capitalizeFirstLetter'
+
+export const Tooltip: React.FC<TooltipProps> = ({ children, position }) => {
+  const [x, y] = position
+
+  const positionClass = `is${capitalizeFirstLetter(x)}${capitalizeFirstLetter(
+    y
+  )}`
+
+  return (
+    <div
+      className={makeClassName([
+        [styles.root, true],
+        [styles[positionClass], true]
+      ])}
+    >
+      <div className={styles.body}>{children}</div>
+    </div>
+  )
+}

package/src/Tooltip/Tooltip.types.ts

@@ -0,0 +1,8 @@
+export interface TooltipProps {
+  children: React.ReactNode
+  position: ['left' | 'center', 'top' | 'bottom']
+}
+
+export interface TooltipFooterProps {
+  children: React.ReactNode
+}

package/src/Tooltip/TooltipFooter.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import { TooltipFooterProps } from './Tooltip.types'
+import styles from './Tooltip.module.css'
+
+export const TooltipFooter: React.FC<TooltipFooterProps> = ({ children }) => {
+  return <div className={styles.footer}>{children}</div>
+}

package/src/Tooltip/index.tsx

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip'
+export { TooltipFooter } from './TooltipFooter'

package/src/constants.ts

@@ -29,6 +29,7 @@ export const SocialLabels = {
     fb: 'Фейсбук',
     tw: 'Твиттер',
     pdf: 'PDF',
+    unblock: 'Magic link',
     bookmark: 'В закладки',
     reaction: 'Напишите нам'
   },
@@ -37,6 +38,7 @@ export const SocialLabels = {
     fb: 'Fb',
     tw: 'Twitter',
     pdf: 'PDF',
+    unblock: 'Magic link',
     bookmark: 'Add to bookmarks'
   }
 }

package/src/index.tsx

@@ -42,4 +42,5 @@ export * from './SensitiveBlock'
 export * from './DonatesTeaser'
 export * from './ShopRelatedBlock'
 export * from './AnnouncementInText'
+export * from './Tooltip'
 // /* PLOP_INJECT_LINK */ //

package/src/utils/capitalizeFirstLetter.ts

@@ -0,0 +1,2 @@
+export const capitalizeFirstLetter = (string: string): string =>
+  string.charAt(0).toUpperCase() + string.slice(1)

package/dist/Button/loader.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const Loader: React.FC;
-export default Loader;