@meduza/ui-kit-2 0.1.12 → 0.1.14

package/package.json

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

package/src/DocumentItemsCount/DocumentItemsCount.stories.tsx

@@ -16,12 +16,10 @@ const Example: React.FC = () => {
   return (
     <>
       <div className={styles.root}>
-        <p>
-          <DocumentItemsCount type="card" items={4} />
-        </p>
-        <p>
-          <DocumentItemsCount type="podcast" items={4} />
-        </p>
+        <DocumentItemsCount type="card" items={4} />
+        <br />
+        <br />
+        <DocumentItemsCount type="podcast" items={4} />
       </div>
     </>
   )

package/src/DotsOnImage/DotsOnImage.module.css

@@ -4,6 +4,12 @@
   position: relative;
 
   display: block;
+
+  width: 100%;
+}
+
+.isVisible .dot {
+  animation: show 400ms ease both 500ms;
 }
 
 .dot {
@@ -15,20 +21,23 @@
   margin: 0;
   padding: 0;
 
-  cursor: pointer;
+  color: #fff;
+  font-weight: 600;
+  font-size: 13px;
+
+  font-family: $secondaryFont;
+  line-height: 28px;
   text-align: center;
 
-  color: #fff;
+  background-color: #000;
   border-width: 0;
   border-radius: 30px;
   outline-width: 0;
-  background-color: #000;
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
 
-  font-family: $secondaryFont;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 28px;
+  cursor: pointer;
+
+  opacity: 0;
 
   appearance: none;
   will-change: opacity;
@@ -40,6 +49,11 @@
   will-change: opacity;
 }
 
+.dot:hover,
+.dot.isActive {
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 1);
+}
+
 .popover {
   position: absolute;
   z-index: 10;
@@ -58,46 +72,26 @@
 }
 
 .popover.isLeft.isBottom {
-  transform: translateX(-100%) translateX(-22px) translateY(-100%) translateY(22px);
-}
-
-.popoverTitle {
-  margin-bottom: 16px;
-
-  font-weight: 600;
-}
-
-.popoverBody {
-  font-family: $secondaryFont;
-  font-size: 16px;
-  line-height: 22px;
+  transform: translateX(-100%) translateX(-22px) translateY(-100%)
+    translateY(22px);
 }
 
-.popoverText p {
-  margin: 0;
-}
+@keyframes show {
+  0% {
+    transform: scale(0.4);
 
-.popoverText a:hover {
-  color: $gold;
-}
+    opacity: 0;
+  }
 
-.dismiss {
-  position: absolute;
-  top: 0;
-  right: 0;
+  90% {
+    transform: scale(1.1);
 
-  margin: 0;
-  padding: 5px 12px 4px 4px;
+    opacity: 1;
+  }
 
-  cursor: pointer;
-
-  color: #b3b3b3;
-  border-width: 0;
-  outline: none;
-  background-color: transparent;
-}
+  100% {
+    transform: scale(1);
 
-.dismiss svg {
-  width: 10px;
-  height: 10px;
+    opacity: 1;
+  }
 }

package/src/DotsOnImage/index.tsx

@@ -1,5 +1,8 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
+import { useInView } from 'react-intersection-observer'
+
 import { PopoverData, DotsOnImageProps, SingleDot } from './DotsOnImage.types'
+
 import { Image } from '../Image'
 import { Popover } from '../Popover'
 import { Footnote } from '../Footnote'
@@ -14,6 +17,12 @@ import styles from './DotsOnImage.module.css'
 export const DotsOnImage: React.FC<DotsOnImageProps> = ({
   block: { optimized, width, height, credit, display, dots }
 }) => {
+  const [ref, inView, entry] = useInView({
+    threshold: 0.5
+  })
+
+  const container = useRef(null)
+
   const [popover, setPopover] = useState<PopoverData>({
     title: null,
     body: null,
@@ -21,6 +30,38 @@ export const DotsOnImage: React.FC<DotsOnImageProps> = ({
     id: null
   })
 
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    if (entry && entry.boundingClientRect && entry.boundingClientRect.y < 0) {
+      setVisible(true)
+    }
+  }, [entry])
+
+  useEffect(() => {
+    if (inView) {
+      setVisible(true)
+    }
+  }, [inView])
+
+  useEffect(() => {
+    if (popover.id) {
+      document.addEventListener('click', handleClickOutside)
+    } else {
+      document.removeEventListener('click', handleClickOutside)
+    }
+
+    return () => document.removeEventListener('click', handleClickOutside)
+  }, [popover])
+
+  const handleClickOutside = (event: MouseEvent): void => {
+    const path = event.composedPath()
+
+    if (path.indexOf(container.current) === -1) {
+      setPopover({ show: false })
+    }
+  }
+
   const handleDotClick = (dot: SingleDot): void => {
     const shouldShow = dot.id !== popover.id
     const side = dot.position.x > 50 ? 'isLeft' : 'isRight'
@@ -40,11 +81,30 @@ export const DotsOnImage: React.FC<DotsOnImageProps> = ({
   }
 
   return (
-    <div data-testid="dots-on-image" className={styles.root}>
-      <div className={styles.dots}>
+    <div
+      className={makeClassName([
+        [styles.root, true],
+        [styles.isVisible, visible]
+      ])}
+      data-testid="dots-on-image"
+      ref={ref}
+    >
+      <Image
+        optimized={optimized}
+        width={width}
+        height={height}
+        alt={credit}
+        display={display}
+        fullscreen={{ mobile: false, desktop: false }}
+      />
+
+      <div ref={container}>
         {dots.map((dot) => (
           <button
-            className={styles.dot}
+            className={makeClassName([
+              [styles.dot, true],
+              [styles.isActive, dot.id === popover.id]
+            ])}
             type="button"
             key={dot.id}
             style={{
@@ -60,50 +120,40 @@ export const DotsOnImage: React.FC<DotsOnImageProps> = ({
             {dot.icon.type === 'number' && dot.icon.number}
           </button>
         ))}
-      </div>
-      <div className={styles.image}>
-        <Image
-          optimized={optimized}
-          width={width}
-          height={height}
-          alt={credit}
-          display={display}
-          fullscreen={{ mobile: false, desktop: false }}
-        />
-      </div>
 
-      {popover.show && (
-        <>
-          {viewportSize().width >= MediaQuerySizes.LANDSCAPE_TABLET ? (
-            <div
-              className={makeClassName([
-                [styles.popover, true],
-                [styles[popover.side], !!popover.side],
-                [styles[popover.align], !!popover.align]
-              ])}
-              style={popover.style}
-            >
-              <Footnote
+        {popover.show && (
+          <>
+            {viewportSize().width >= MediaQuerySizes.LANDSCAPE_TABLET ? (
+              <div
+                className={makeClassName([
+                  [styles.popover, true],
+                  [styles[popover.side], !!popover.side],
+                  [styles[popover.align], !!popover.align]
+                ])}
+                style={popover.style}
+              >
+                <Footnote
+                  onClose={(): void => {
+                    setPopover({ show: false })
+                  }}
+                >
+                  {popover.title && <h3>{popover.title}</h3>}
+                  <div dangerouslySetInnerHTML={{ __html: popover.body }} />
+                </Footnote>
+              </div>
+            ) : (
+              <Popover
                 onClose={(): void => {
                   setPopover({ show: false })
                 }}
               >
-                <h3>{popover.title}</h3>
+                {popover.title && <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>
-          )}
-        </>
-      )}
+              </Popover>
+            )}
+          </>
+        )}
+      </div>
     </div>
   )
 }

package/src/EmbedBlock/EmbedBlock.tsx

@@ -44,7 +44,7 @@ export const EmbedBlock: React.FC<EmbedBlockProps> = ({
   ]
 
   const mobileFullwidth =
-    fullWidthProviders.indexOf(provider) || block.type === 'dots_on_image'
+    fullWidthProviders.indexOf(provider) > -1 || block.type === 'dots_on_image'
 
   const renderCC = (context?: string | string[]): JSX.Element => (
     <MediaCaption

package/src/QuoteBlock/QuoteBlock.module.css

@@ -12,7 +12,7 @@
 
   @media $mobile {
     margin: 0 0 20px;
-    padding-left: 36px;
+    padding-left: 38px;
 
     font-size: 20px;
     line-height: 28px;