@meduza/ui-kit-2 0.1.18 → 0.1.20

package/dist/Cover/Cover.types.d.ts

@@ -1,4 +1,24 @@
+import { OptimizedImageItem } from '../types';
 export interface CoverProps {
-    block: any;
+    block: {
+        only_on?: string;
+        data: {
+            blocks: any;
+            cover: {
+                credit?: string;
+                caption?: string;
+                cc: string;
+                urls: {
+                    w325: OptimizedImageItem;
+                    w600: OptimizedImageItem;
+                };
+                mobile_ratio: number;
+                gradients: {
+                    text_rgb: string;
+                    bg_rgb: string;
+                };
+            };
+        };
+    };
     styleContext?: string[] | string;
 }

package/dist/DotsOnImage/DotsOnImage.types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { OptimizedImageItem } from '../Image/Image.types';
+import { OptimizedImageItem } from '../types';
 export interface PopoverData {
     title?: string;
     body?: string;

package/dist/Image/Image.types.d.ts

@@ -1,9 +1,4 @@
-export interface OptimizedImageItem {
-    '1x': string;
-    '2x': string;
-    '1x_webp': string;
-    '2x_webp': string;
-}
+import { OptimizedImageItem } from '../types';
 export interface ImageProps {
     alt?: string;
     display?: string;

package/dist/ListBlock/ListBlock.stories.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import { ListBlockProps } from './ListBlock.types';
 declare const _default: {
     title: string;
-    component: React.FC<import("./ListBlock.types").ListBlockProps>;
+    component: React.FC<ListBlockProps>;
     parameters: {
         themeWrapperSideBySide: boolean;
     };

package/dist/ListBlock/ListBlock.types.d.ts

@@ -1,4 +1,10 @@
+/// <reference types="react" />
 export interface ListBlockProps {
-    block: any;
+    block: {
+        type: keyof JSX.IntrinsicElements;
+        data: string[];
+        length: number;
+        only_on?: string;
+    };
     styleContext?: string[] | string;
 }

package/dist/RelatedBlock/RelatedBlock.types.d.ts

@@ -1,4 +1,17 @@
 export interface RelatedBlockProps {
-    block: any;
+    block: {
+        data: {
+            title: string;
+            related: {
+                title: string;
+                second_title?: string;
+                layout: string;
+                url?: string;
+                full_url?: string;
+                id: string;
+            }[];
+        };
+        only_on?: string;
+    };
     styleContext?: string[] | string;
 }

package/dist/RelatedRichBlock/RelatedRichBlock.stories.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.FC<import("./RelatedRichBlock.types").RelatedRichBlockProps>;
+    parameters: {
+        themeWrapperSideBySide: boolean;
+    };
+};
+export default _default;
+export declare const Default: React.FC;

package/dist/RelatedRichBlock/RelatedRichBlock.types.d.ts

@@ -0,0 +1,4 @@
+export interface RelatedRichBlockProps {
+    block?: any;
+    styleContext?: any;
+}

package/dist/RelatedRichBlock/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { RelatedRichBlockProps } from './RelatedRichBlock.types';
+export declare const RelatedRichBlock: React.FC<RelatedRichBlockProps>;

package/dist/RichTitle/RichTitle.types.d.ts

@@ -1,4 +1,11 @@
 export interface RichTitleProps {
-    block: any;
+    block: {
+        only_on?: string;
+        data: {
+            featured?: boolean;
+            first: string;
+            second?: string;
+        };
+    };
     styleContext?: string[] | string;
 }

package/dist/SimpleTitle/SimpleTitle.types.d.ts

@@ -1,4 +1,9 @@
 export interface SimpleTitleProps {
-    block: any;
+    block: {
+        data: {
+            first: string;
+        };
+        only_on?: string;
+    };
     styleContext?: string[] | string;
 }

package/dist/SourceBlock/SourceBlock.types.d.ts

@@ -1,4 +1,15 @@
 export interface SourceBlockProps {
-    block: any;
+    block: {
+        only_on?: string;
+        data: {
+            quote: {
+                type: string;
+                data: string;
+                length: number;
+            }[];
+            origin: string;
+            url: string;
+        };
+    };
     styleContext?: string[] | string;
 }

package/dist/index.d.ts

@@ -37,3 +37,4 @@ export * from './MetaItemLive';
 export * from './DocumentItemsCount';
 export * from './ToolbarButton';
 export * from './Footnote';
+export * from './RelatedRichBlock';

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+export interface OptimizedImageItem {
+    '1x': string;
+    '2x': string;
+    '1x_webp': string;
+    '2x_webp': string;
+}

package/dist/ui-kit-2.cjs.development.js

@@ -377,6 +377,9 @@ var toCamel = function toCamel(s) {
     return str.toUpperCase().replace('_', '');
   });
 };
+var toCapitalize = function toCapitalize(s) {
+  return s[0].toUpperCase() + s.slice(1);
+};
 
 var RenderPicture = function RenderPicture(_ref) {
   var source = _ref.source,
@@ -1396,7 +1399,7 @@ var EmbedBlockContainer = function EmbedBlockContainer(_ref) {
       styleContext = _ref.styleContext,
       lang = _ref.lang;
 
-  if (block.data.wrap_with_iframe) {
+  if (block.data && block.data.wrap_with_iframe) {
     return React__default.createElement(IframeBlock, {
       block: block,
       styleContext: styleContext,
@@ -1467,9 +1470,12 @@ var ChapterBlock = function ChapterBlock(_ref) {
   }));
 };
 
-var generateGradient = function generateGradient(color) {
-  var gradientSteps = [[0, 7], [0.08, 12], [0.16, 17], [0.22, 21], [0.32, 26], [0.42, 32], [0.52, 38], [0.62, 47], [0.72, 57], [0.82, 65], [1, 82]];
-  var gradient = gradientSteps.map(function (i) {
+var generateGradient = function generateGradient(color, type) {
+  var steps = {
+    mediaBlockBottom: [[0, 7], [0.08, 12], [0.16, 17], [0.22, 21], [0.32, 26], [0.42, 32], [0.52, 38], [0.62, 47], [0.72, 57], [0.82, 65], [1, 82]],
+    mediaBlockTop: [[0.5, 0], [0, 97]]
+  };
+  var gradient = steps[type].map(function (i) {
     return "rgba(" + color + ", " + i[0] + ") " + i[1] + "%";
   });
   return "linear-gradient(-180deg, " + gradient + ")";
@@ -1494,7 +1500,7 @@ var SimpleTitle = function SimpleTitle(_ref) {
   }, first);
 };
 
-var styles$n = {"root":"RichTitle-module_root__BK_WT","slide":"RichTitle-module_slide__1A-gB","game":"RichTitle-module_game__1g8Bn","half":"RichTitle-module_half__10GRI","featured":"RichTitle-module_featured__wJfaQ","mobile":"RichTitle-module_mobile__1Cb6E","desktop":"RichTitle-module_desktop__2ixSQ"};
+var styles$n = {"root":"RichTitle-module_root__BK_WT","slide":"RichTitle-module_slide__1A-gB","game":"RichTitle-module_game__1g8Bn","half":"RichTitle-module_half__10GRI","featured":"RichTitle-module_featured__wJfaQ","isInMediaBlock":"RichTitle-module_isInMediaBlock__3RDw4","mobile":"RichTitle-module_mobile__1Cb6E","desktop":"RichTitle-module_desktop__2ixSQ"};
 
 var RichTitle = function RichTitle(_ref) {
   var _ref$block = _ref.block,
@@ -1575,7 +1581,8 @@ var ListBlock = function ListBlock(_ref) {
   }
 
   return React__default.createElement(TagName, {
-    className: makeClassName(classNames)
+    className: makeClassName(classNames),
+    "data-testid": "list-block"
   }, data.map(function (item, index) {
     return React__default.createElement("li", {
       key: index,
@@ -2095,7 +2102,7 @@ var Cover = function Cover(_ref) {
   if (gradients) {
     var theme = [gradients.text_rgb === '0,0,0' ? 'dark' : 'light'];
     classNames = makeStyleContext(classNames, theme, styles$w);
-    style.backgroundImage = generateGradient(gradients.bg_rgb);
+    style.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockBottom');
   }
 
   var renderCC = function renderCC(context) {
@@ -2368,6 +2375,88 @@ var ToolbarButton = function ToolbarButton(_ref) {
   }, children));
 };
 
+var styles$B = {"root":"RelatedRichBlock-module_root__3NYmj","overlay":"RelatedRichBlock-module_overlay__3XSg_","overlayHeader":"RelatedRichBlock-module_overlayHeader__2Nmbv","isRich":"RelatedRichBlock-module_isRich__1LnA4","body":"RelatedRichBlock-module_body__1ZHZS","isCard":"RelatedRichBlock-module_isCard__2naDz","hasGradient":"RelatedRichBlock-module_hasGradient__27LOk","cover":"RelatedRichBlock-module_cover__3yygp","tag":"RelatedRichBlock-module_tag__3OLyG","dark":"RelatedRichBlock-module_dark__3Y1fE","light":"RelatedRichBlock-module_light__2mUxL","mobile":"RelatedRichBlock-module_mobile__JpCS4","desktop":"RelatedRichBlock-module_desktop__trL0D"};
+
+/* eslint-disable react/jsx-no-target-blank */
+var RelatedRichBlock = function RelatedRichBlock(_ref) {
+  var _ref$block = _ref.block,
+      onlyOn = _ref$block.only_on,
+      _ref$block$data = _ref$block.data,
+      blocks = _ref$block$data.blocks,
+      fallback = _ref$block$data.fallback,
+      url = _ref$block$data.url,
+      _ref$block$data$cover = _ref$block$data.cover,
+      urls = _ref$block$data$cover.urls,
+      gradients = _ref$block$data$cover.gradients,
+      tag = _ref$block$data$cover.tag,
+      layout = _ref$block$data$cover.layout,
+      ratio = _ref$block$data$cover.ratio,
+      styleContext = _ref.styleContext;
+  var style = {};
+  var styleHeader = {};
+
+  var _useState = React.useState(false),
+      isRich = _useState[0],
+      setIsRich = _useState[1];
+
+  var cardType = "is" + toCapitalize(layout);
+  React.useEffect(function () {
+    // setIsRich(Math.random() >= 0.5)
+    setIsRich(true);
+  }, []);
+  var classNames = [[styles$B.root, true], [styles$B[cardType], !!layout && !!styles$B[cardType]], [styles$B.hasGradient, !!gradients], [styles$B[onlyOn], !!onlyOn && !!styles$B[onlyOn]]];
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles$B);
+  }
+
+  if (gradients) {
+    var theme = [gradients.text_rgb === '0,0,0' ? 'dark' : 'light'];
+    classNames = makeStyleContext(classNames, theme, styles$B);
+    styleHeader.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockTop');
+    style.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockBottom');
+  }
+
+  if (!isRich) {
+    return React__default.createElement(RelatedBlock, {
+      block: fallback
+    });
+  }
+
+  return React__default.createElement("a", {
+    "data-testid": "related-rich-block",
+    className: makeClassName(classNames),
+    href: url,
+    target: "_blank"
+  }, layout === 'rich' && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: styles$B.overlay,
+    style: style
+  }), React__default.createElement("div", {
+    className: styles$B.overlayHeader,
+    style: styleHeader
+  })), React__default.createElement("div", {
+    className: styles$B.tag
+  }, React__default.createElement(Tag, {
+    size: "small",
+    theme: "inherit",
+    styleContext: "rich"
+  }, tag)), React__default.createElement("div", {
+    className: styles$B.cover
+  }, React__default.createElement(Image, {
+    optimized: urls,
+    ratio: ratio,
+    display: "narrow"
+  })), React__default.createElement("div", {
+    className: styles$B.body
+  }, blocks.map(function (item) {
+    return React__default.createElement(RenderBlocks, {
+      key: item.id,
+      block: item,
+      styleContext: [].concat(styleContext, ['isInMediaBlock'])
+    });
+  })));
+};
+
 exports.BookmarkButton = BookmarkButton;
 exports.Button = Button;
 exports.CardTitle = CardTitle;
@@ -2396,6 +2485,7 @@ exports.Primary = Primary;
 exports.QuoteBlock = QuoteBlock;
 exports.RawHtmlBlock = RawHtmlBlock;
 exports.RelatedBlock = RelatedBlock;
+exports.RelatedRichBlock = RelatedRichBlock;
 exports.RenderBlocks = RenderBlocks;
 exports.RichTitle = RichTitle;
 exports.Secondary = Secondary;