@meduza/ui-kit-2 0.1.9 → 0.1.10

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.9",
+  "version": "0.1.10",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",

package/src/DotsOnImage/DotsOnImage.module.css

@@ -39,23 +39,27 @@
   top: 50%;
   left: 50%;
 
-  width: 340px;
-  padding: 25px;
-
   transform: translate(-50%, -50%);
+}
+
+.popoverTitle {
+  margin-bottom: 16px;
 
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  background-color: #fff;
-  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
+  font-weight: 600;
+}
 
+.popoverBody {
   font-family: $secondaryFont;
   font-size: 16px;
   line-height: 22px;
 }
 
-.popoverTitle {
-  font-weight: 600;
+.popoverText p {
+  margin: 0;
+}
+
+.popoverText a:hover {
+  color: $gold;
 }
 
 .dismiss {

package/src/DotsOnImage/DotsOnImage.test.tsx

@@ -11,7 +11,7 @@ describe('Dots On Image', () => {
   const renderComponent = () => render(<DotsOnImage block={data} />)
 
   it('should have root style', () => {
-    const { getByTestId } = renderComponent()
+  const { getByTestId } = renderComponent()
 
     const dotsOnImage = getByTestId('dots-on-image')
 

package/src/DotsOnImage/index.tsx

@@ -1,7 +1,11 @@
 import React, { useState } from 'react'
 import { PopoverData, DotsOnImageProps, SingleDot } from './DotsOnImage.types'
 import { Image } from '../Image'
-import { SvgSymbol } from '../SvgSymbol'
+import { Popover } from '../Popover'
+import { Footnote } from '../Footnote'
+
+import viewportSize from '../utils/viewportSize'
+import { MediaQuerySizes } from '../constants'
 
 import styles from './DotsOnImage.module.css'
 
@@ -62,20 +66,29 @@ export const DotsOnImage: React.FC<DotsOnImageProps> = ({
       </div>
 
       {popover.show && (
-        <div className={styles.popover}>
-          <button
-            className={styles.dismiss}
-            type="button"
-            onClick={(): void => setPopover({ show: false })}
-          >
-            <SvgSymbol icon="cross" size="unset" />
-          </button>
-          <div className={styles.popoverTitle}>{popover.title}</div>
-          <div
-            className={styles.popoverBody}
-            dangerouslySetInnerHTML={{ __html: popover.body }}
-          />
-        </div>
+        <>
+          {viewportSize().width >= MediaQuerySizes.LANDSCAPE_TABLET ? (
+            <div className={styles.popover}>
+              <Footnote
+                onClose={(): void => {
+                  setPopover({ show: false })
+                }}
+              >
+                <h3>{popover.title}</h3>
+                <div dangerouslySetInnerHTML={{ __html: popover.body }} />
+              </Footnote>
+            </div>
+          ) : (
+            <Popover
+              onClose={(): void => {
+                setPopover({ show: false })
+              }}
+            >
+              <h3>{popover.title}</h3>
+              <div dangerouslySetInnerHTML={{ __html: popover.body }} />
+            </Popover>
+          )}
+        </>
       )}
     </div>
   )

package/src/DotsOnImage/mock.json

@@ -3,8 +3,8 @@
   "data": {
     "dots": [
       {
-        "title": "заг 1ой точки",
-        "body": "<p>тест на <strong>точке</strong></p>",
+        "title": "Мафия и Голливуд",
+        "body": "<p>Но Голливуду тех лет далеко за вдохновением ходить было не нужно. Мафия в 20-е подминала под себя профсоюзы по всей стране, и Голливуд не был исключением. Один из таких профсоюзов возглавил Томас Мэлой. Когда в 1931 году уволенный киномеханик пришёл к нему жаловаться, то подручный Мэлоя застрелил его прямо в кабинете. Причём без всяких последствий для себя.</p>",
         "position": {
           "x": 43.86,
           "y": 31.03
@@ -17,8 +17,8 @@
         "id": "0-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
       },
       {
-        "title": "2222",
-        "body": "<p>sdsd</p>",
+        "title": "Аль Капоне в кино",
+        "body": "<p>Первые гангстерские фильмы начала 30-х своим появлением обязаны «Королю Чикаго» — Аль Капоне. Ещё при жизни он стал знаменитостью мирового масштаба: он получал письма со всех концов света, а журналисты выстраивались в очередь, чтобы задать ему пару вопросов. Отель «Готорн», из которого он привык вести дела, городские экскурсоводы называли «замком Капоне».</p>",
         "position": {
           "x": 16.05,
           "y": 18.83

package/src/EmbedBlock/EmbedBlock.module.css

@@ -183,7 +183,7 @@
   }
 }
 
-.mobile .figure {
+.mobile:first-child .figure {
   overflow: hidden;
 
   border-radius: 8px 8px 0 0;

package/src/Footnote/Footnote.module.css

@@ -0,0 +1,70 @@
+@import '../vars.css';
+
+.root {
+  position: relative;
+
+  width: 320px;
+  padding: 20px;
+
+  border-radius: 8px;
+  background-color: #fff;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.2);
+}
+
+.body {
+  font-family: $secondaryFont;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.body h3 {
+  margin: 0 0 16px;
+
+  font-size: inherit;
+  font-weight: 600;
+  line-height: inherit;
+}
+
+.body p {
+  margin: 0;
+}
+
+.body p + p {
+  margin-top: 6px;
+}
+
+
+.body a {
+  color: inherit;
+  box-shadow: inset 0 -1px $gold;
+}
+
+.body a:hover {
+  color: $gold;
+}
+
+.dismiss {
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  margin: 0;
+  padding: 6px 9px 10px;
+
+  cursor: pointer;
+
+  color: #b3b3b3;
+  border-width: 0;
+  outline: none;
+  background-color: transparent;
+}
+
+.dismiss:hover {
+  color: #757575;
+}
+
+.dismiss svg {
+  width: 12px;
+  height: 12px;
+}
+

package/src/Footnote/Footnote.stories.module.css

@@ -0,0 +1,5 @@
+@import '../vars.css';
+
+.root {
+  display: block;
+}

package/src/Footnote/Footnote.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Footnote } from './'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
+import styles from './Footnote.stories.module.css'
+
+export default {
+  title: 'Main / Footnote',
+  component: Footnote,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  return (
+    <>
+      <div className={styles.root}>
+        <Footnote onClose={(): void => alert('Handle Close')}>
+          <h3>Заголовок лвлвлдфова выа вовофдывлоа</h3>
+          <p>
+            «Я видел истинного Дональда Трампа, наблюдал за ним. Это обманщик,
+            притворщик и задира. Настоящий паршивец! Все его слова абсурдны
+            и&nbsp;направлены на скандал. Рейган когда-то сказал Горбачёву:
+            «Мистер Горбачёв, развалите эту стену!», а&nbsp;Трамп собирается
+            взводить стену между Америкой и Мексикой.
+          </p>
+        </Footnote>
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/Footnote/Footnote.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { Footnote } from './'
+import { FootnoteProps } from './Footnote.types'
+
+import styles from './Footnote.module.css'
+
+describe('Footnote', () => {
+  let props: FootnoteProps
+
+  const renderComponent = () => render(<Footnote {...props} />)
+
+  it('should have root style', () => {
+    const { getByTestId } = renderComponent()
+
+    const footnote = getByTestId('footnote')
+
+    expect(footnote).toHaveClass(styles.root)
+  })
+})

package/src/Footnote/Footnote.types.ts

@@ -0,0 +1,5 @@
+import React from 'react'
+export interface FootnoteProps {
+  children: React.ReactNode | JSX.Element[] | JSX.Element
+  onClose: () => void
+}

package/src/Footnote/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { FootnoteProps } from './Footnote.types'
+import makeClassName from '../utils/makeClassName'
+
+import { SvgSymbol } from '../SvgSymbol'
+
+import styles from './Footnote.module.css'
+
+export const Footnote: React.FC<FootnoteProps> = ({ children, onClose }) => {
+  return (
+    <div
+      data-testid="footnote"
+      className={makeClassName([[styles.root, true]])}
+    >
+      <button
+        className={styles.dismiss}
+        type="button"
+        onClick={(): void => onClose()}
+      >
+        <SvgSymbol icon="cross" size="unset" />
+      </button>
+
+      <div className={styles.body}>{children}</div>
+    </div>
+  )
+}

package/src/Popover/Popover.module.css

@@ -13,11 +13,14 @@
   width: 100%;
   height: 100%;
   min-height: 120px;
-  padding: 10px 10px 0;
+  padding: 10px 0 0;
 
   animation: fadeOut 250ms ease both 100ms;
 
   opacity: 1;
+
+  font-size: 16px;
+  line-height: 22px;
 }
 
 .root.visible {
@@ -44,7 +47,7 @@
   max-width: 420px;
   min-height: 80px;
   margin: 0 auto;
-  padding: 15px 20px 40px;
+  padding: 22px 20px 28px;
 
   animation: disappear 350ms ease both;
 }
@@ -97,6 +100,37 @@
   animation: appear 350ms ease both;
 }
 
+.body {
+  font-family: $secondaryFont;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.body h3 {
+  margin: 0 0 5px;
+
+  font-size: inherit;
+  font-weight: 600;
+  line-height: inherit;
+}
+
+.body p {
+  margin: 0;
+}
+
+.body p + p {
+  margin-top: 6px;
+}
+
+.body a {
+  color: inherit;
+  box-shadow: inset 0 -1px $gold;
+}
+
+.body a:hover {
+  color: $gold;
+}
+
 @keyframes appear {
   0% {
     transform: translateY(100%);

package/src/Popover/index.tsx

@@ -70,7 +70,7 @@ export const Popover: React.FC<PopoverProps> = ({ children, onClose }) => {
             height="100%"
           />
         </svg>
-        {children}
+        <div className={styles.body}>{children}</div>
       </div>
     </div>
   )

package/src/SimpleBlock/FootnoteLink.css

@@ -32,3 +32,10 @@ span[data-body]:hover {
   background-color: #5B5B5B;
   box-shadow: inset 1px 0 #747474, inset 0 1px #747474, inset -1px 0 #747474, inset 0 -1px #747474;
 }
+
+span[data-highlight='true'],
+span[data-highlight='true']:hover {
+  background-color: #f4efe9;
+  box-shadow: inset 1px 0 #b88b58, inset 0 1px #b88b58, inset -1px 0 #b88b58,
+    inset 0 -1px #b88b58;
+}

package/src/index.tsx

@@ -36,4 +36,5 @@ export * from './MetaItem'
 export * from './MetaItemLive'
 export * from './DocumentItemsCount'
 export * from './ToolbarButton'
+export * from './Footnote'
 // /* PLOP_INJECT_LINK */ //