pds-dev-kit-web-test 0.0.12 → 0.0.14

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSG.js

@@ -12,8 +12,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MSG = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-        react_1.default.createElement(S_Content1, null, content1)))));
+    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSG", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSG", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSG" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSH.js

@@ -12,8 +12,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MSH = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-        react_1.default.createElement(S_Content1, null, content1)))));
+    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSH", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSH", areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSH" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/layout/LayoutMS/Containers/NavigationContainer/variation/Navigation.js

@@ -11,9 +11,9 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Navigation = function (_a) {
     var children = _a.children;
-    return (react_1.default.createElement(S_NavigationContainer, null,
-        react_1.default.createElement(S_NavigationArea, null,
-            react_1.default.createElement(S_NavigationContent, null, children))));
+    return (react_1.default.createElement(S_NavigationContainer, { "x-pds-name": "NavigationContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile" },
+        react_1.default.createElement(S_NavigationArea, { "x-pds-name": "NavigationArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile" },
+            react_1.default.createElement(S_NavigationContent, { "x-pds-name": "NavigationContent", "x-pds-element-type": "layout", "x-pds-device-type": "mobile" }, children))));
 };
 var S_NavigationContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/layout/LayoutMS/Containers/TabContainer/variation/Tab.js

@@ -11,9 +11,9 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Tab = function (_a) {
     var children = _a.children;
-    return (react_1.default.createElement(S_TabContainer, null,
-        react_1.default.createElement(S_TabArea, null,
-            react_1.default.createElement(S_TabContent, null, children))));
+    return (react_1.default.createElement(S_TabContainer, { "x-pds-name": "TabContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile" },
+        react_1.default.createElement(S_TabArea, { "x-pds-name": "TabArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile" },
+            react_1.default.createElement(S_TabContent, { "x-pds-name": "TabContent", "x-pds-element-type": "layout", "x-pds-device-type": "mobile" }, children))));
 };
 var S_TabContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/layout/LayoutMS/LayoutMS.js

@@ -11,7 +11,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var LayoutMS = function (_a) {
     var navigationContainer = _a.navigationContainer, children = _a.children;
-    return (react_1.default.createElement(S_LayoutMS, null,
+    return (react_1.default.createElement(S_LayoutMS, { "x-pds-name": "LayoutMS", "x-pds-element-type": "layout", "x-pds-device-type": "mobile" },
         react_1.default.createElement(S_Box, null,
             react_1.default.createElement(S_TopWrapper, null, navigationContainer),
             react_1.default.createElement(S_BottomWrapper, null, children))));

package/dist/src/mobile/panels/AnnotationSheet/AnnotationSheet.js

@@ -64,7 +64,7 @@ function AnnotationSheet(_a) {
             onClick(e);
         }
     };
-    return (react_1.default.createElement(S_AnnotationSheet, { "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick }, children));
+    return (react_1.default.createElement(S_AnnotationSheet, { "x-pds-name": "AnnotationSheet", "x-pds-element-type": "panel", "x-pds-device-type": "mobile", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick }, children));
 }
 var radiusStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
     var $radius = _a.$radius;

package/dist/src/mobile/panels/ContentSheet/ContentSheet.js

@@ -69,7 +69,7 @@ function ContentSheet(_a) {
         if (isLoading) {
             return (react_1.default.createElement(S_LoadingContentSheet, { "$width": width !== null && width !== void 0 ? width : loadingWidth, "$height": height !== null && height !== void 0 ? height : loadingHeight, shapeType: shapeType, "$radius": radius }));
         }
-        return (react_1.default.createElement(S_ContentSheet, { "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick }, children));
+        return (react_1.default.createElement(S_ContentSheet, { "x-pds-name": "ContentSheet", "x-pds-element-type": "panel", "x-pds-device-type": "mobile", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick }, children));
     };
     return ContentSheetVariation();
 }

package/dist/src/mobile/panels/MobileBasicModal/MobileBasicModal.js

@@ -50,7 +50,7 @@ function MobileBasicModal(_a) {
     }, []);
     return react_dom_1.default.createPortal(react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(S_ModalOverlay, null),
-        react_1.default.createElement(S_ModalWrapper, null,
+        react_1.default.createElement(S_ModalWrapper, { "x-pds-name": "MobileBasicModal", "x-pds-element-type": "panel", "x-pds-device-type": "mobile" },
             react_1.default.createElement(S_Header, null,
                 react_1.default.createElement(S_TitleWrapper, null,
                     react_1.default.createElement(components_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" })),

package/dist/src/mobile/panels/SectionSheet/SectionSheet.js

@@ -64,7 +64,7 @@ function SectionSheet(_a) {
             onClick(e);
         }
     };
-    return (react_1.default.createElement(S_SectionSheet, { "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick }, children));
+    return (react_1.default.createElement(S_SectionSheet, { "x-pds-name": "SectionSheet", "x-pds-element-type": "panel", "x-pds-device-type": "mobile", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick }, children));
 }
 var radiusStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
     var $radius = _a.$radius;

package/dist/src/sub/DynamicLayout/DynamicLayout.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { DynamicLayoutType } from './types';
+declare type DynamicLayoutProps = DynamicLayoutType & {
+    navigationHandler?: (linkType: 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE', src: string) => void;
+};
+declare function DynamicLayout({ device, isPreview, sections, navigationHandler }: DynamicLayoutProps): JSX.Element;
+export default DynamicLayout;

package/dist/src/sub/DynamicLayout/DynamicLayout.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var desktop_1 = require("./desktop");
+var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
+var mobile_1 = require("./mobile");
+function DynamicLayout(_a) {
+    var device = _a.device, isPreview = _a.isPreview, sections = _a.sections, navigationHandler = _a.navigationHandler;
+    return (react_1.default.createElement(dynamicLayoutContext_1.dynamicLayoutContext.Provider, { value: { isPreview: isPreview, navigationHandler: navigationHandler } }, {
+        UM: react_1.default.createElement(mobile_1.MobileWeb, { sections: sections }),
+        UW: react_1.default.createElement(desktop_1.DesktopWeb, { sections: sections })
+    }[device]));
+}
+exports.default = DynamicLayout;

package/dist/src/sub/DynamicLayout/desktop/DesktopWeb.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ISection } from '../types';
+declare type Props = {
+    sections: ISection[];
+};
+declare function DesktopWeb({ sections }: Props): JSX.Element;
+export default DesktopWeb;

package/dist/src/sub/DynamicLayout/desktop/DesktopWeb.js

@@ -0,0 +1,23 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var SectionMatcher_1 = __importDefault(require("./sections/SectionMatcher"));
+function DesktopWeb(_a) {
+    var sections = _a.sections;
+    return (react_1.default.createElement(react_1.default.Fragment, null, sections.map(function (section) { return (react_1.default.createElement(SectionMatcher_1.default, __assign({ key: section.id }, section))); })));
+}
+exports.default = DesktopWeb;

package/dist/src/sub/DynamicLayout/desktop/components/Item/Item.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TextLabelProps } from '../../../../../desktop/components/TextLabel/TextLabel';
+import { ImageViewProps } from '../../../../../hybrid/components/ImageView/ImageView';
+import { IItemTitle, IItemDescription, IItemButton, IItem } from '../../../types';
+declare function Item({ children, ...props }: IItem & {
+    children: React.ReactNode;
+}): JSX.Element;
+declare namespace Item {
+    var Title: ({ text, color, ...textLabelProps }: IItemTitle & TextLabelProps) => JSX.Element;
+    var Description: ({ text, color, ...textLabelProps }: IItemDescription & TextLabelProps) => JSX.Element;
+    var Image: ({ ...imageViewProps }: ImageViewProps) => JSX.Element;
+    var Button: ({ buttonType, backgroundColor, textColor, text, linkType, src, linkMethod, state, borderColor }: IItemButton) => JSX.Element;
+    var HTMLReader: ({ data, styleTheme, colorTheme, textAlign, color }: {
+        data?: string | undefined;
+        styleTheme?: "displayBold" | "headingBold" | "leadParaBold" | "leadParaRegular" | "subTitleBold" | "subTitleRegular" | "body1Bold" | "body1Regular" | "body2Bold" | "body2Regular" | "caption1Bold" | "caption1Regular" | "caption2Bold" | "caption2Regular" | "form1Regular" | "form2Regular" | "blog1Regular" | undefined;
+        color?: string | undefined;
+        textAlign?: "center" | "left" | "right" | undefined;
+        colorTheme?: "sysTextPrimary" | "sysTextSecondary" | "sysTextTertiary" | "sysTextWhite" | "sysTextError" | "sysTextWarning" | "sysTextBrandPrimary" | "sysTextBrandSeconVariant" | "usrTextBrandPrimary" | "usrTextBrandSeconVariant" | "usrTextBrandOnPrimary" | undefined;
+    }) => JSX.Element;
+}
+export default Item;