@antscorp/antsomi-ui 1.3.5-beta.172 → 1.3.5-beta.174

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

@@ -1,3 +1,14 @@
+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, { memo, useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
@@ -8,7 +19,7 @@ import { MobileFrameV2 } from '@antscorp/antsomi-ui/es/components/atoms';
 // Constants
 import { DEVICE_TYPE } from '../../constants';
 export const Banner = memo(props => {
-    const { deviceType, showSkeleton = false, children } = props;
+    const { deviceType, showSkeleton = false, children, height } = props, restOfProps = __rest(props, ["deviceType", "showSkeleton", "children", "height"]);
     const isMobile = useMemo(() => deviceType === DEVICE_TYPE.MOBILE.value, [deviceType]);
     // States
     const [shouldAnimate, setShouldAnimate] = useState(false);
@@ -20,7 +31,7 @@ export const Banner = memo(props => {
         }, 1000);
         return () => clearTimeout(timerId);
     }, [children]);
-    return (React.createElement(BannerWrapper, null,
+    return (React.createElement(BannerWrapper, Object.assign({ "$height": height }, restOfProps),
         React.createElement("div", { className: `${isMobile ? 'mobile-wrapper animate__animated animate__zoomIn' : 'desktop-wrapper'}` },
             React.createElement("div", { className: classNames({
                     'content-wrapper': true,

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

@@ -1 +1,3 @@
-export declare const BannerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerWrapper: import("styled-components").StyledComponent<"div", any, {
+    $height?: number | undefined;
+}, never>;

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

@@ -1,6 +1,7 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 // Images
 import skeletonBackground from '../../../../../assets/images/background/skeleton-background.png';
+import { globalToken } from '../../providers';
 const THUMBNAIL_CARD_RADIUS = 5;
 export const BannerWrapper = styled.div `
   width: 100%;
@@ -9,26 +10,31 @@ export const BannerWrapper = styled.div `
   justify-content: center;
   align-items: center;
   background-color: #0000001a;
+  border-radius: ${globalToken.borderRadius}px;
 
-  @media screen and (max-height: 1000px) {
-    height: 760px;
-    max-height: 760px;
+  ${props => props.$height
+    ? `height: ${props.$height}px`
+    : css `
+          @media screen and (max-height: 1000px) {
+            height: 760px;
+            max-height: 760px;
 
-    .mobile-wrapper {
-      width: 359px;
-      height: 722.41px;
-    }
-  }
+            .mobile-wrapper {
+              width: 359px;
+              height: 722.41px;
+            }
+          }
 
-  @media screen and (min-height: 1001px) {
-    height: 830px;
-    max-height: 830px;
+          @media screen and (min-height: 1001px) {
+            height: 830px;
+            max-height: 830px;
 
-    .mobile-wrapper {
-      width: 380px;
-      height: 800px;
-    }
-  }
+            .mobile-wrapper {
+              width: 380px;
+              height: 800px;
+            }
+          }
+        `}
 
   .mobile-wrapper {
     position: relative;

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

@@ -2,9 +2,9 @@
 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';
@@ -13,7 +13,7 @@ export const Information = memo(props => {
     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(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;
@@ -24,12 +24,7 @@ export const Information = memo(props => {
                     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(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 } })),
+            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").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,9 +1,10 @@
 // Libraries
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 // Components
-import { Flex } from '../../../../atoms';
+import { Button, Flex } from '../../../../atoms';
+import { globalToken } from '../../providers';
 export const InformationWrapper = styled(Flex) `
-  width: 350px;
+  width: 300px;
   flex-shrink: 0;
   font-size: 12px;
   height: 100%;
@@ -43,3 +44,13 @@ export const InformationWrapper = styled(Flex) `
     max-height: 682px;
   }
 `;
+export const CheckboxButton = styled(Button) `
+  color: ${globalToken.colorText} !important;
+  font-weight: 400 !important;
+
+  ${p => p.$active &&
+    css `
+      color: ${globalToken.colorPrimary} !important;
+      background-color: ${globalToken.blue1_1} !important;
+    `}
+`;

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

@@ -27,6 +27,6 @@ export const SimilarTemplate = memo(props => {
         React.createElement("div", { className: "title" }, "Similar templates"),
         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 }, restOfSimilarCardProps)));
+            return (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id || idx, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false, className: "thumbnail-card" }, restOfSimilarCardProps)));
         })))) : null;
 });

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

@@ -2,15 +2,25 @@
 import styled from 'styled-components';
 // Components
 import { Flex } from '../../../../atoms';
+// Providers
+import { globalToken } from '../../providers';
 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;
   justify-content: space-between;
+
+  .thumbnail-card {
+    border-radius: ${globalToken.borderRadius}px;
+
+    > div {
+      border-radius: ${globalToken.borderRadius}px;
+    }
+  }
 `;

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

@@ -2,6 +2,7 @@ var _a;
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 import { SwiperSlide } from 'swiper/react';
+import { globalToken } from '../../providers';
 export const ThumbnailSliderWrapper = styled.div `
   width: 100%;
   display: flex;
@@ -20,6 +21,11 @@ export const ThumbnailSliderWrapper = styled.div `
   .thumbnail-animation {
     box-shadow: none;
     transition: box-shadow 0.1s ease-in-out;
+    border-radius: ${globalToken.borderRadius}px;
+
+    > div {
+      border-radius: ${globalToken.borderRadius}px;
+    }
 
     &:hover {
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), 0 0 32px rgba(0, 0, 0, 0.04);

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

@@ -18,17 +18,19 @@ import { Banner, Information, SimilarTemplate, ThumbnailSlider } from './compone
 import { ModalContainer, ModalWrapper } from './styled';
 // Constants
 import { DEVICE_TYPE, SIMILAR_TEMPLATE_DEFAULT, THUMBNAIL_DEFAULT } from './constants';
+import { AntdConfigProviderV2 } from './providers';
 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);
-    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 },
-                React.createElement("div", { className: "overview" },
-                    React.createElement(Flex, { gap: 20, vertical: true, style: { width: '100%' } },
-                        React.createElement(Banner, Object.assign({ deviceType: deviceType }, bannerProps)),
-                        React.createElement(ThumbnailSlider, Object.assign({}, thumbnailProps)))),
-                React.createElement(Information, Object.assign({ deviceType: deviceType, onDeviceTypeChange: value => setDeviceType(value) }, informationProps))),
-            React.createElement(SimilarTemplate, Object.assign({}, similarTemplateProps)))));
+    return (React.createElement(AntdConfigProviderV2, null,
+        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 },
+                    React.createElement("div", { className: "overview" },
+                        React.createElement(Flex, { gap: 20, vertical: true, style: { width: '100%' } },
+                            React.createElement(Banner, Object.assign({ deviceType: deviceType }, bannerProps)),
+                            React.createElement(ThumbnailSlider, Object.assign({}, thumbnailProps)))),
+                    React.createElement(Information, Object.assign({ deviceType: deviceType, onDeviceTypeChange: value => setDeviceType(value) }, informationProps))),
+                React.createElement(SimilarTemplate, Object.assign({}, similarTemplateProps))))));
 });

package/es/components/organism/PreviewTemplateModal/providers/AntdConfigProviderV2.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ConfigProviderProps } from 'antd';
+interface AntdConfigProviderV2Props extends ConfigProviderProps {
+}
+export declare const AntdConfigProviderV2: React.FC<AntdConfigProviderV2Props>;
+export declare const globalToken: import("antd/es/theme/internal").AliasToken;
+export {};

package/es/components/organism/PreviewTemplateModal/providers/AntdConfigProviderV2.js

@@ -0,0 +1,26 @@
+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;
+};
+var _a;
+// Libraries
+import React from 'react';
+import { ConfigProvider, theme } from 'antd';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+const { getDesignToken } = theme;
+const themeV2 = {
+    token: Object.assign(Object.assign({}, THEME.token), { colorText: '#000000', borderRadius: 10, borderRadiusLG: 10 }),
+    components: Object.assign(Object.assign({}, THEME.components), { Button: Object.assign(Object.assign({}, (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Button), { textHoverBg: '#F2F9FF' }) }),
+};
+export const AntdConfigProviderV2 = props => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (React.createElement(ConfigProvider, Object.assign({ theme: themeV2 }, restProps), children));
+};
+export const globalToken = getDesignToken(themeV2);

package/es/components/organism/PreviewTemplateModal/providers/index.d.ts

@@ -0,0 +1 @@
+export * from './AntdConfigProviderV2';

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

@@ -0,0 +1 @@
+export * from './AntdConfigProviderV2';

package/es/components/organism/PreviewTemplateModal/types.d.ts

@@ -12,9 +12,10 @@ export interface PreviewTemplateModalProps extends ModalProps {
     similarTemplateProps?: SimilarTemplateProps;
     informationProps?: Omit<InformationProps, 'deviceType' | 'onDeviceTypeChange'>;
 }
-export interface BannerProps {
+export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
     deviceType: InformationProps['deviceType'];
     showSkeleton?: boolean;
+    height?: number;
     children?: React.ReactNode;
 }
 export type ThumbnailProps = Omit<ThumbnailCardProps, 'id' | 'name' | 'thumbnail' | 'onClickWrapper'> & {

package/package.json

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