@meduza/ui-kit-2 0.1.40 → 0.1.42

package/package.json

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

package/src/EmbedBlock/EmbedBlock.tsx

@@ -71,6 +71,7 @@ export const EmbedBlock: React.FC<EmbedBlockProps> = ({
               alt={block.data.caption}
               display={block.data.display}
               lazy={block.data.lazy}
+              styleContext={styleContext}
             />
           </div>
         )

package/src/Image/Image.module.css

@@ -25,7 +25,7 @@
 }
 
 .isLoaded {
-  background-color: transparent
+  background-color: transparent;
 }
 
 .wrapper {
@@ -72,3 +72,7 @@
 [data-input='mouse'] .wrapper {
   outline: none;
 }
+
+.dark {
+  background-color: transparent;
+}

package/src/Image/Image.types.ts

@@ -20,6 +20,7 @@ export interface ImageProps {
     desktop: boolean
   }
   ratio?: number
+  styleContext?: string[] | string
 }
 
 export interface PictureProps {

package/src/Image/index.tsx

@@ -1,6 +1,7 @@
 import React, { useContext, useState } from 'react'
 import { ImageProps } from './Image.types'
-import { makeClassName } from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
+import makeStyleContext from '../utils/makeStyleContext'
 import BlockContext from '../utils/BlockContext'
 import viewportSize from '../utils/viewportSize'
 import postMessage from '../utils/postMessage'
@@ -19,7 +20,8 @@ export const Image: React.FC<ImageProps> = ({
   source,
   lazy,
   fullscreen,
-  ratio
+  ratio,
+  styleContext
 }) => {
   const { lightBox } = useContext(BlockContext)
   const [isLoaded, setIsLoaded] = useState(false)
@@ -59,13 +61,19 @@ export const Image: React.FC<ImageProps> = ({
     (optimized.w325 && optimized.w325['1x']) ||
     optimized.original
 
+  let classNames: ClassNames = [
+    [styles.root, true],
+    [styles.isLoaded, isLoaded],
+    [styles.fullscreen, fullscreen && fullscreen.desktop]
+  ]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
   return (
     <div
-      className={makeClassName([
-        [styles.root, true],
-        [styles.isLoaded, isLoaded],
-        [styles.fullscreen, fullscreen && fullscreen.desktop]
-      ])}
+      className={makeClassName(classNames)}
       style={blockStyles}
       data-testid="image"
     >

package/src/Popover/index.tsx

@@ -22,10 +22,14 @@ export const Popover: React.FC<PopoverProps> = ({ children, onClose }) => {
   }
 
   useEffect(() => {
+    document.body.dataset.popover = 'true'
+
     window.addEventListener('keydown', escFunction, false)
     window.addEventListener('scroll', handleScroll, false)
 
     return () => {
+      document.body.removeAttribute('data-popover')
+
       window.removeEventListener('keydown', escFunction, false)
       window.removeEventListener('scroll', handleScroll, false)
     }