@antscorp/antsomi-ui 1.3.5-beta.62 → 1.3.5-beta.621

package/es/components/organism/PreviewTemplateModal/components/Banner/styled.js

@@ -1,98 +1,100 @@
-import styled from 'styled-components';
+// Libraries
+import styled, { css } from 'styled-components';
+import { isNumber } from 'lodash';
 // Images
 import skeletonBackground from '../../../../../assets/images/background/skeleton-background.png';
-import MobileFrame from '../../../../../assets/svg/mobile-frame.svg';
 // Constants
-import { DEVICE_TYPE } from '../../constants';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { MOBILE_VIEWPORT } from '@antscorp/antsomi-ui/es/components/atoms/MobileFrameV2/constants';
 const THUMBNAIL_CARD_RADIUS = 5;
-const { MOBILE } = DEVICE_TYPE;
-const MOBILE_BORDER_RADIUS = '19px 19px 19px 21px / 21px 21px 21px 21px';
 export const BannerWrapper = styled.div `
   width: 100%;
-  height: 762px;
-  max-height: 762px;
   overflow-y: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #0000001a;
+  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorBgSkeleton};
+  border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+  border: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1};
+  height: ${({ $height }) => (isNumber($height) ? `${$height}px` : $height)};
 
-  .device-type {
-    position: relative;
-    height: 750px;
-    border-radius: ${THUMBNAIL_CARD_RADIUS}px;
-    width: 100%;
-
-    .device-type__wrapper,
-    .device-type__background {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-    }
+  // Calculate scale of mobile frame
+  #banner-mobile {
+    ${({ clientHeight }) => {
+    const [smallScale, largeScale] = (() => {
+        if (clientHeight) {
+            const bannerPadding = 5;
+            const margin = 18;
+            const smallScale = (clientHeight - bannerPadding * 2) / (MOBILE_VIEWPORT.MD.height + margin * 2);
+            const largeScale = (clientHeight - bannerPadding * 2) / (MOBILE_VIEWPORT.LG.height + margin * 2);
+            return [smallScale, largeScale];
+        }
+        return [1, 1];
+    })();
+    return css `
+        @media screen and (max-height: 1000px) {
+          transform: scale(${smallScale});
+        }
 
-    ${p => {
-    switch (p.deviceType) {
-        case MOBILE.value:
-            return `
-          width: 416.004px;
-          height: 713px;             
-          display: flex;
-          justify-content: center;
-          align-items: center;
-
-          .device-type__background {
-            background: url(${MobileFrame}) no-repeat center center;
-          }
-
-          .device-type__wrapper {
-            width: 391px;
-            left: 11px;    
-            height: 661px;
-            top: 11px;              
-            z-index: 1;
-            border-radius: ${MOBILE_BORDER_RADIUS};
+        @media screen and (min-height: 1001px) {
+          transform: scale(${largeScale});
+        }
+      `;
+}}
+  }
 
-            .content-wrapper {
-              border-radius: inherit;
+  .mobile-wrapper {
+    position: relative;
+    border-radius: 80px;
+    animation-duration: 0.2s !important;
 
-              & > * {
-                border-radius: inherit;
-              }
-            }
-          }
-          `;
-        default:
-            return p.showBackgroundSkeleton
-                ? `
-                .device-type__background {
-                  background: center / cover no-repeat url(${skeletonBackground});
-                }
+    .content-wrapper {
+      width: fit-content;
+      height: fit-content;
+    }
 
-                .device-type__wrapper {              
-                  .backdrop {
-                    border-radius: ${THUMBNAIL_CARD_RADIUS}px;
-                    position: absolute;
-                    width: 100%;
-                    height: 100%;
-                    background-color: black;
-                    opacity: 0.5;
-                    z-index: 10;
-                    top: 0;
-                    left: 0;
-                  }
-                }                 
-                `
-                : '';
+    .skeleton,
+    .backdrop {
+      left: 5px;
     }
-}}
+  }
 
+  .desktop-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    border-radius: ${THUMBNAIL_CARD_RADIUS}px;
+    transition: width 0.2s ease, height 0.2s ease;
     .content-wrapper {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 12;
       width: 100%;
       height: 100%;
     }
   }
+
+  .content-wrapper {
+    position: absolute;
+    z-index: 12;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .skeleton {
+    width: 100%;
+    height: 100%;
+    background: center / cover no-repeat url(${skeletonBackground});
+    border-radius: inherit;
+  }
+
+  .backdrop {
+    border-radius: inherit;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    opacity: 0.5;
+    z-index: 10;
+    top: 0;
+    left: 0;
+  }
 `;

package/es/components/organism/PreviewTemplateModal/components/Information/index.js

@@ -2,28 +2,29 @@
 import React, { memo } from 'react';
 import Icon from '@antscorp/icons';
 // Styled
-import { InformationWrapper } from './styled';
+import { CheckboxButton, InformationWrapper } from './styled';
 // Components
-import { Button, Radio, Typography, Flex } from '../../../../atoms';
+import { Button, Typography, Flex } from '../../../../atoms';
 // Constants
 import { DEVICE_TYPE } from '../../constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const Information = memo(props => {
-    const { deviceType, itemName = 'Template name', buttonText = 'Use template', description = '', categoryListing, showDeviceRadios = true, onButtonClick, onDeviceTypeChange, } = props;
+    var _a;
+    const { deviceType, itemName = 'Template name', buttonText = 'Use template', description, categoryListing, showDeviceRadios = true, onButtonClick, onDeviceTypeChange, } = props;
     return (React.createElement(InformationWrapper, { gap: 20, vertical: true },
         React.createElement("div", { style: { flexShrink: 0 }, className: "title" }, itemName),
-        React.createElement(Flex, { gap: 20, vertical: true, className: "content-information" },
-            React.createElement("div", null, description), categoryListing === null || categoryListing === void 0 ? void 0 :
-            categoryListing.map(({ key, label, children }) => (React.createElement("div", { key: key },
-                React.createElement("div", null,
-                    label,
-                    ":"),
-                React.createElement("div", { style: { fontWeight: 'bold' } }, children === null || children === void 0 ? void 0 : children.map(({ label }) => label).join(', ')))))),
-        showDeviceRadios && (React.createElement(Radio.Group, { options: Object.values(DEVICE_TYPE).map(({ value, label, icon }) => ({
-                label: (React.createElement(Flex, { gap: 5, align: "center" },
-                    React.createElement(Icon, { type: icon }),
-                    label)),
-                value,
-            })), onChange: e => onDeviceTypeChange(e.target.value), value: deviceType, optionType: "button", style: { flexShrink: 0 } })),
-        React.createElement(Button, { type: "primary", style: { width: '100%', flexShrink: 0 }, onClick: onButtonClick },
-            React.createElement(Typography.Text, { ellipsis: { tooltip: buttonText }, style: { maxWidth: '100%', color: 'inherit' } }, buttonText))));
+        React.createElement(Flex, { gap: 15, vertical: true, className: "content-information" },
+            description && React.createElement("div", { style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }, description), categoryListing === null || categoryListing === void 0 ? void 0 :
+            categoryListing.map(({ key, label, children }) => {
+                var _a;
+                return (React.createElement("div", { key: key },
+                    React.createElement("div", { style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } },
+                        label,
+                        ":"),
+                    React.createElement("div", { style: { fontWeight: 'bold' } }, children === null || children === void 0 ? void 0 : children.map(({ label }) => label).join(', '))));
+            })),
+        React.createElement(Flex, { gap: 20, style: { flexShrink: 0 }, vertical: true },
+            showDeviceRadios && (React.createElement(Flex, { align: "center", gap: 1 }, Object.values(DEVICE_TYPE).map(({ value, label, icon }) => (React.createElement(CheckboxButton, { key: value, icon: React.createElement(Icon, { type: icon }), block: true, "$active": deviceType === value, onClick: () => onDeviceTypeChange(value), type: "text" }, label))))),
+            React.createElement(Button, { type: "primary", style: { width: '100%', flexShrink: 0 }, onClick: onButtonClick },
+                React.createElement(Typography.Text, { ellipsis: { tooltip: buttonText }, style: { maxWidth: '100%', color: 'inherit' } }, buttonText)))));
 });

package/es/components/organism/PreviewTemplateModal/components/Information/styled.d.ts

@@ -1,2 +1,7 @@
 /// <reference types="react" />
 export declare const InformationWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const CheckboxButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/button/button").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {
+    $active?: boolean | undefined;
+}, never>;

package/es/components/organism/PreviewTemplateModal/components/Information/styled.js

@@ -1,19 +1,28 @@
 // Libraries
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 // Components
-import { Flex } from '../../../../atoms';
+import { Button, Flex } from '../../../../atoms';
+// Providers
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const InformationWrapper = styled(Flex) `
-  width: 350px;
+  width: 300px;
   flex-shrink: 0;
   font-size: 12px;
-  max-height: 762px;
+  height: 100%;
+  max-height: 100%;
 
   .title {
     font-size: 16px;
     font-weight: 700;
     max-width: 100%;
     color: inherit;
-    padding-right: 20px;
+    padding-right: 25px;
+    word-break: break-word;
+
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
   }
 
   .antsomi-radio-group {
@@ -32,10 +41,21 @@ export const InformationWrapper = styled(Flex) `
         font-size: 24px;
       }
     }
+  }
 
-    .content-information {
-      flex: 1 1 0%;
-      overflow-y: auto;
-    }
+  .content-information {
+    flex: 1 1 0%;
+    height: fit-content;
+    overflow-y: auto;
+    max-height: 682px;
   }
 `;
+export const CheckboxButton = styled(Button) `
+  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorText} !important;
+
+  ${p => p.$active &&
+    css `
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary} !important;
+      background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1} !important;
+    `}
+`;

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/index.js

@@ -10,12 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
+import { isEmpty } from 'lodash';
 // Components
 import { ThumbnailCard } from '../../../../molecules';
-import { Empty, Flex } from '../../../../atoms';
 // Styled
-import { SimilarTemplateWrapper } from './styled';
+import { SimilarTemplateWrapper, TemplateListWrapper } from './styled';
 // Constants
 import { SIMILAR_CARD_HEIGHT_DEFAULT, SIMILAR_CARD_WIDTH_DEFAULT } from '../../constants';
 const MAX_QUANTITY_TEMPLATES = 4;
@@ -23,7 +23,12 @@ export const SimilarTemplate = memo(props => {
     var _a;
     const { show = true, similarTemplates = [], similarCardProps } = props;
     const _b = similarCardProps || {}, { width = SIMILAR_CARD_WIDTH_DEFAULT, height = SIMILAR_CARD_HEIGHT_DEFAULT } = _b, restOfSimilarCardProps = __rest(_b, ["width", "height"]);
-    return show ? (React.createElement(SimilarTemplateWrapper, { gap: 15, vertical: true },
+    // Memo
+    const thumbnailCacheValue = useMemo(() => new Date().getTime(), []);
+    return show && !isEmpty(similarTemplates) ? (React.createElement(SimilarTemplateWrapper, { gap: 15, vertical: true },
         React.createElement("div", { className: "title" }, "Similar templates"),
-        React.createElement(Flex, { gap: 30 }, ((_a = similarTemplates === null || similarTemplates === void 0 ? void 0 : similarTemplates.slice(0, MAX_QUANTITY_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.map(({ id, name, thumbnail }) => (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false }, restOfSimilarCardProps))))) || React.createElement(Empty, null)))) : null;
+        React.createElement(TemplateListWrapper, { templateQuantity: MAX_QUANTITY_TEMPLATES }, (_a = similarTemplates.slice(0, MAX_QUANTITY_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.map((item, idx) => {
+            const { id, name, thumbnail } = item || {};
+            return (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id || idx, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false, className: "thumbnail-card", thumbnailCacheValue: thumbnailCacheValue }, restOfSimilarCardProps)));
+        })))) : null;
 });

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/styled.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="react" />
 export declare const SimilarTemplateWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const TemplateListWrapper: import("styled-components").StyledComponent<"div", any, {
+    templateQuantity: number;
+}, never>;

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/styled.js

@@ -2,11 +2,25 @@
 import styled from 'styled-components';
 // Components
 import { Flex } from '../../../../atoms';
+// Providers
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const SimilarTemplateWrapper = styled(Flex) `
   margin-top: 15px;
 
   .title {
-    font-weight: 700;
+    font-weight: 400;
     font-size: 16px;
   }
 `;
+export const TemplateListWrapper = styled.div `
+  display: flex;
+  gap: 30px;
+
+  .thumbnail-card {
+    border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+
+    > div {
+      border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+    }
+  }
+`;

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/index.js

@@ -23,6 +23,7 @@ import { Button, Flex } from '../../../../atoms';
 import { ThumbnailCard } from '../../../../molecules';
 // Constants
 import { THUMBNAIL_HEIGHT_DEFAULT, THUMBNAIL_WIDTH_DEFAULT } from '../../constants';
+import classNames from 'classnames';
 /** Max width of list thumbnail's wrapper, it is used to show swiper if the width is greater than 990 */
 const WRAPPER_WIDTH = 990;
 const GAP_X = 10;
@@ -30,7 +31,7 @@ const ICON_SIZE = 24;
 export const ThumbnailSlider = memo(props => {
     const { thumbnails, width = THUMBNAIL_WIDTH_DEFAULT, height = THUMBNAIL_HEIGHT_DEFAULT, onClickThumbnail } = props, restOfThumbnailProps = __rest(props, ["thumbnails", "width", "height", "onClickThumbnail"]);
     //  States
-    const [isSlideBeginning, setSlideBeginning] = useState(false);
+    const [isSlideBeginning, setSlideBeginning] = useState(true);
     const [isSlideEnd, setSlideEnd] = useState(false);
     // Refs
     const navigationPrevRef = useRef(null);
@@ -43,6 +44,7 @@ export const ThumbnailSlider = memo(props => {
         const calculate = ((thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) || 0) * thumbnailWrapperWidth;
         return calculate > WRAPPER_WIDTH;
     }, [thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length, thumbnailWrapperWidth]);
+    const thumbnailCacheValue = useMemo(() => new Date().getTime(), []);
     // Renders
     const renderThumbnail = (args) => {
         const { thumbnail, index } = args;
@@ -50,7 +52,7 @@ export const ThumbnailSlider = memo(props => {
         return (React.createElement(Flex, { gap: GAP_X },
             !!index && (React.createElement(Flex, { align: "center" },
                 React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: ICON_SIZE, transform: 'rotate(270deg)' } }))),
-            React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, width: width, height: height, thumbnail: url, style: { flexShrink: 0 }, actionAvailable: false, onClickWrapper: () => onClickThumbnail === null || onClickThumbnail === void 0 ? void 0 : onClickThumbnail(thumbnail) }, restOfThumbnailProps))));
+            React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, width: width, height: height, thumbnail: url, thumbnailCacheValue: thumbnailCacheValue, style: { flexShrink: 0 }, className: "thumbnail-animation", actionAvailable: false, onClickWrapper: () => onClickThumbnail === null || onClickThumbnail === void 0 ? void 0 : onClickThumbnail(thumbnail) }, restOfThumbnailProps))));
     };
     return thumbnails && !isEmpty(thumbnails) ? (React.createElement(ThumbnailSliderWrapper, null, isShowSwiper ? (React.createElement(React.Fragment, null,
         React.createElement(Swiper, { slidesPerView: Math.floor(WRAPPER_WIDTH / thumbnailWrapperWidth), spaceBetween: GAP_X, modules: [Navigation, A11y, Thumbs], navigation: {
@@ -59,19 +61,21 @@ export const ThumbnailSlider = memo(props => {
             }, onBeforeInit: swiper => {
                 setTimeout(() => {
                     // Override prevEl & nextEl now that refs are defined
-                    swiper.params.navigation.prevEl = navigationPrevRef.current;
-                    swiper.params.navigation.nextEl = navigationNextRef.current;
-                    // Re-init navigation
-                    swiper.navigation.destroy();
-                    swiper.navigation.init();
-                    swiper.navigation.update();
+                    if (swiper.params.navigation && typeof swiper.params.navigation !== 'boolean') {
+                        swiper.params.navigation.prevEl = navigationPrevRef.current;
+                        swiper.params.navigation.nextEl = navigationNextRef.current;
+                        // Re-init navigation
+                        swiper.navigation.destroy();
+                        swiper.navigation.init();
+                        swiper.navigation.update();
+                    }
                 });
             }, onSlideChange: ({ isBeginning, isEnd }) => {
                 setSlideBeginning(isBeginning);
                 setSlideEnd(isEnd);
             } }, thumbnails.map((thumbnail, index) => (React.createElement(SwiperSlideWrapper, { key: `slide-${thumbnail.id}` }, renderThumbnail({ thumbnail, index }))))),
-        React.createElement(Button, { ref: navigationPrevRef, className: "custom-button-prev", disabled: isSlideBeginning },
+        React.createElement(Button, { ref: navigationPrevRef, className: classNames({ 'custom-button-prev': true, hidden: isSlideBeginning }) },
             React.createElement(Icon, { type: "icon-ants-expand-more" })),
-        React.createElement(Button, { ref: navigationNextRef, className: "custom-button-next", disabled: isSlideEnd },
+        React.createElement(Button, { ref: navigationNextRef, className: classNames({ 'custom-button-next': true, hidden: isSlideEnd }) },
             React.createElement(Icon, { type: "icon-ants-expand-more" })))) : (React.createElement(Flex, { gap: GAP_X, style: { width: 'fit-content' } }, thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.map((thumbnail, index) => (React.createElement(React.Fragment, { key: thumbnail.id }, renderThumbnail({ thumbnail, index })))))))) : null;
 });

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/styled.js

@@ -1,7 +1,8 @@
 var _a;
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 import { SwiperSlide } from 'swiper/react';
+// Constants
+import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const ThumbnailSliderWrapper = styled.div `
   width: 100%;
   display: flex;
@@ -11,11 +12,26 @@ export const ThumbnailSliderWrapper = styled.div `
 
   .swiper {
     max-width: 1030px;
+
     .swiper-slide {
       width: fit-content !important;
     }
   }
 
+  .thumbnail-animation {
+    box-shadow: none;
+    transition: box-shadow 0.1s ease-in-out;
+    border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+
+    > div {
+      border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+    }
+
+    &:hover {
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), 0 0 32px rgba(0, 0, 0, 0.04);
+    }
+  }
+
   .custom-button-prev,
   .custom-button-next {
     z-index: 10;
@@ -48,6 +64,10 @@ export const ThumbnailSliderWrapper = styled.div `
     transform: rotate(-90deg);
   }
 
+  .hidden {
+    display: none !important;
+  }
+
   i {
     font-size: 20px;
     color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};

package/es/components/organism/PreviewTemplateModal/constants/defaultProps.js

@@ -5,6 +5,7 @@ export const SIMILAR_CARD_HEIGHT_DEFAULT = 230;
 export const THUMBNAIL_URL = 'https://st-media-template.antsomi.com/base64-img/37563.png';
 export const SIMILAR_TEMPLATE_DEFAULT = {
     show: false,
+    similarTemplates: [],
 };
 export const THUMBNAIL_DEFAULT = {
     thumbnails: [],

package/es/components/organism/PreviewTemplateModal/index.js

@@ -10,7 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { memo, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
+import { isNil } from 'lodash';
 // Components
 import { Flex, Spin } from '../../atoms';
 import { Banner, Information, SimilarTemplate, ThumbnailSlider } from './components';
@@ -22,6 +23,11 @@ export const PreviewTemplateModal = memo(props => {
     const { bannerProps, thumbnailProps = THUMBNAIL_DEFAULT, similarTemplateProps = SIMILAR_TEMPLATE_DEFAULT, informationProps, loading = false } = props, restOfProps = __rest(props, ["bannerProps", "thumbnailProps", "similarTemplateProps", "informationProps", "loading"]);
     // States
     const [deviceType, setDeviceType] = useState(DEVICE_TYPE.DESKTOP.value);
+    useEffect(() => {
+        if (!isNil(bannerProps === null || bannerProps === void 0 ? void 0 : bannerProps.deviceType)) {
+            setDeviceType(bannerProps.deviceType);
+        }
+    }, [bannerProps === null || bannerProps === void 0 ? void 0 : bannerProps.deviceType]);
     return (React.createElement(ModalContainer, Object.assign({ footer: null, centered: true, modalRender: node => React.createElement(ModalWrapper, null, node) }, restOfProps),
         React.createElement(Spin, { spinning: loading },
             React.createElement(Flex, { gap: 20 },

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/BannerPropsTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const BannerPropsTable: React.FC;

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/BannerPropsTable/index.js

@@ -0,0 +1,34 @@
+// Libraries
+import React from 'react';
+import { Image } from 'antd';
+// Components
+import { Table } from '../../../../../..';
+import { Typography, Flex } from '../../../../../../atoms';
+// Images
+import skeletonBackgroundImage from '../../../../../../../assets/images/components/PreviewModal/Banner/skeletonBackground.png';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const BannerPropsTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'showBackgroundSkeleton',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handler show or hide skeleton background"),
+                React.createElement(Image, { src: skeletonBackgroundImage, width: 200, height: "auto" }))),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, "false"),
+        },
+        {
+            key: '2',
+            property: 'children',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Children of Banner Component"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "ReactNode"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/DataTypeTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DataTypeTable: React.FC;

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/DataTypeTable/index.js

@@ -0,0 +1,62 @@
+// Libraries
+import React from 'react';
+import { Table } from '@antscorp/antsomi-ui/es/index';
+import LinkTo from '@storybook/addon-links/react';
+import { Image } from 'antd';
+// Images
+import bannerImage from '../../../../../../../assets/images/components/PreviewModal/banner.png';
+import informationImage from '../../../../../../../assets/images/components/PreviewModal/information.png';
+import thumbnailsImage from '../../../../../../../assets/images/components/PreviewModal/thumbnails.png';
+import similarTemplateImage from '../../../../../../../assets/images/components/PreviewModal/similarTemplate.png';
+// Constants
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const DataTypeTable = () => {
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: 'Type',
+            dataIndex: 'type',
+            key: 'type',
+        },
+        {
+            title: 'Description',
+            dataIndex: 'description',
+            key: 'description',
+        },
+    ];
+    const dataSource = [
+        {
+            key: 'bannerProps',
+            name: 'bannerProps',
+            type: (React.createElement(LinkTo, { story: "banner-props" },
+                React.createElement(CustomTag, { type: "link" }, "BannerProps"))),
+            description: React.createElement(Image, { src: bannerImage, width: 200, height: "auto" }),
+        },
+        {
+            key: 'informationProps',
+            name: 'informationProps',
+            type: (React.createElement(LinkTo, { story: "information-props" },
+                React.createElement(CustomTag, { type: "link" }, "InformationProps"))),
+            description: React.createElement(Image, { src: informationImage, width: 200, height: "auto" }),
+        },
+        {
+            key: 'ThumbnailProps',
+            name: 'ThumbnailProps',
+            type: (React.createElement(LinkTo, { story: "thumbnail-props" },
+                React.createElement(CustomTag, { type: "link" }, "ThumbnailProps"))),
+            description: React.createElement(Image, { src: thumbnailsImage, width: 200, height: "auto" }),
+        },
+        {
+            key: 'SimilarTemplateProps',
+            name: 'SimilarTemplateProps',
+            type: (React.createElement(LinkTo, { story: "similar-template-props" },
+                React.createElement(CustomTag, { type: "link" }, "SimilarTemplateProps"))),
+            description: React.createElement(Image, { src: similarTemplateImage, width: 200, height: "auto" }),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: columns, pagination: false });
+};

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/InformationPropsTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const InformationPropsTable: React.FC;