@antscorp/antsomi-ui 1.3.5-beta.78 → 1.3.5-beta.79

package/es/components/atoms/MobileFrameV2/MobileFrameV2.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export interface MobileFrameV2Props extends React.HtmlHTMLAttributes<HTMLDivElement> {
+}
+export declare const MobileFrameV2: React.FC<React.PropsWithChildren<MobileFrameV2Props>>;

package/es/components/atoms/MobileFrameV2/MobileFrameV2.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React from 'react';
+// Styled
+import { MobileWrapper, MobileInner, MobileCamera } from './styled';
+export const MobileFrameV2 = (_a) => {
+    var { children } = _a, restOfProps = __rest(_a, ["children"]);
+    return (React.createElement(MobileWrapper, Object.assign({}, restOfProps),
+        React.createElement(MobileInner, null, children),
+        React.createElement(MobileCamera, null)));
+};

package/es/components/atoms/MobileFrameV2/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const MOBILE_VIEWPORT: {
+    width: number;
+    height: number;
+};

package/es/components/atoms/MobileFrameV2/constants.js

@@ -0,0 +1,4 @@
+export const MOBILE_VIEWPORT = {
+    width: 352.5,
+    height: 764.2,
+};

package/es/components/atoms/MobileFrameV2/index.d.ts

@@ -0,0 +1,2 @@
+export { MobileFrameV2 } from './MobileFrameV2';
+export type { MobileFrameV2Props } from './MobileFrameV2';

package/es/components/atoms/MobileFrameV2/index.js

@@ -0,0 +1 @@
+export { MobileFrameV2 } from './MobileFrameV2';

package/es/components/atoms/MobileFrameV2/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const MobileWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MobileInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MobileCamera: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/atoms/MobileFrameV2/styled.js

@@ -0,0 +1,35 @@
+// Libraries
+import styled from 'styled-components/macro';
+// Assets
+import MobileFrameV2 from '@antscorp/antsomi-ui/es/assets/images/ip14-pro-mobile-frame.png';
+import cameraImage from '@antscorp/antsomi-ui/es/assets/images/ip14-pro-camera.png';
+// Constants
+import { MOBILE_VIEWPORT } from './constants';
+export const MobileWrapper = styled.div `
+  position: relative;
+  display: flex;
+  justify-content: center;
+  background: url(${MobileFrameV2}) no-repeat center center;
+  background-size: contain;
+`;
+export const MobileInner = styled.div `
+  position: relative;
+  width: ${MOBILE_VIEWPORT.width}px;
+  max-width: ${MOBILE_VIEWPORT.width}px;
+  height: ${MOBILE_VIEWPORT.height}px;
+  margin: 18px 21px;
+  border-radius: 50px;
+  overflow: hidden;
+`;
+export const MobileCamera = styled.div `
+  position: absolute;
+  width: 112.11px;
+  height: 32.29px;
+  margin: auto;
+  top: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  background: url(${cameraImage}) no-repeat center center;
+  background-size: contain;
+`;

package/es/components/atoms/index.d.ts

@@ -36,6 +36,7 @@ export * from './Flex';
 export * from './RateV2';
 export * from './PreviewTabs';
 export * from './MobileFrame';
+export * from './MobileFrameV2';
 export * from './SlideBar';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';

package/es/components/atoms/index.js

@@ -36,4 +36,5 @@ export * from './Flex';
 export * from './RateV2';
 export * from './PreviewTabs';
 export * from './MobileFrame';
+export * from './MobileFrameV2';
 export * from './SlideBar';

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

@@ -1,13 +1,18 @@
 // Libraries
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 // Styled
 import { BannerWrapper } from './styled';
+// Components
+import { MobileFrameV2 } from '@antscorp/antsomi-ui/es/components/atoms';
+// Constants
+import { DEVICE_TYPE } from '../../constants';
 export const Banner = memo(props => {
-    const { deviceType, showBackgroundSkeleton = false, children } = props;
-    return (React.createElement(BannerWrapper, { deviceType: deviceType, showBackgroundSkeleton: showBackgroundSkeleton },
-        React.createElement("div", { className: "device-type" },
-            React.createElement("div", { className: "device-type__background" }),
-            React.createElement("div", { className: "device-type__wrapper" },
-                React.createElement("div", { className: "content-wrapper" }, children || null),
-                React.createElement("div", { className: "backdrop" })))));
+    const { deviceType, showSkeleton = false, children } = props;
+    const isMobile = useMemo(() => deviceType === DEVICE_TYPE.MOBILE.value, [deviceType]);
+    return (React.createElement(BannerWrapper, null,
+        React.createElement("div", { className: `${isMobile ? 'mobile-wrapper' : 'desktop-wrapper'}` },
+            React.createElement("div", { className: "content-wrapper" }, isMobile ? React.createElement(MobileFrameV2, null, children || null) : children || null),
+            showSkeleton && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "skeleton" }),
+                React.createElement("div", { className: "backdrop" }))))));
 });

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

@@ -1,4 +1 @@
-export declare const BannerWrapper: import("styled-components").StyledComponent<"div", any, {
-    deviceType: string;
-    showBackgroundSkeleton: boolean;
-}, never>;
+export declare const BannerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,98 +1,69 @@
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 // Images
 import skeletonBackground from '../../../../../assets/images/background/skeleton-background.png';
-import MobileFrame from '../../../../../assets/svg/mobile-frame.svg';
-// Constants
-import { DEVICE_TYPE } from '../../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;
+  height: 830px;
+  max-height: 830px;
   overflow-y: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #0000001a;
 
-  .device-type {
+  .mobile-wrapper {
     position: relative;
-    height: 750px;
-    border-radius: ${THUMBNAIL_CARD_RADIUS}px;
-    width: 100%;
+    width: 380px;
+    height: 800px;
+    border-radius: 80px;
 
-    .device-type__wrapper,
-    .device-type__background {
-      width: 100%;
-      height: 100%;
-      position: absolute;
+    .content-wrapper {
+      width: fit-content;
+      height: fit-content;
     }
 
-    ${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};
-
-            .content-wrapper {
-              border-radius: inherit;
-
-              & > * {
-                border-radius: inherit;
-              }
-            }
-          }
-          `;
-        default:
-            return p.showBackgroundSkeleton
-                ? `
-                .device-type__background {
-                  background: center / cover no-repeat url(${skeletonBackground});
-                }
-
-                .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;
 
     .content-wrapper {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 12;
       width: 100%;
       height: 100%;
     }
   }
+
+  .content-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 12;
+  }
+
+  .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/types.d.ts

@@ -14,7 +14,7 @@ export interface PreviewTemplateModalProps extends ModalProps {
 }
 export interface BannerProps {
     deviceType: InformationProps['deviceType'];
-    showBackgroundSkeleton?: boolean;
+    showSkeleton?: boolean;
     children?: React.ReactNode;
 }
 export type ThumbnailProps = Omit<ThumbnailCardProps, keyof TTemplateItem | 'onClickWrapper'> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.78",
+  "version": "1.3.5-beta.79",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",