pds-dev-kit-web 2.0.7 → 2.0.9-alpha.0

package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/desktop/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.D_MembershipSectionItem = void 0;
+var MembershipSectionItem_1 = require("./MembershipSectionItem");
+Object.defineProperty(exports, "D_MembershipSectionItem", { enumerable: true, get: function () { return __importDefault(MembershipSectionItem_1).default; } });

package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/index.d.ts

@@ -0,0 +1,2 @@
+export { D_MembershipSectionItem } from './desktop';
+export { M_MembershipSectionItem } from './mobile';

package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.M_MembershipSectionItem = exports.D_MembershipSectionItem = void 0;
+var desktop_1 = require("./desktop");
+Object.defineProperty(exports, "D_MembershipSectionItem", { enumerable: true, get: function () { return desktop_1.D_MembershipSectionItem; } });
+var mobile_1 = require("./mobile");
+Object.defineProperty(exports, "M_MembershipSectionItem", { enumerable: true, get: function () { return mobile_1.M_MembershipSectionItem; } });

package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/mobile/MembershipSectionItem.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import type { FillIconNameKeys, LineIconNameKeys } from '../../../../../DynamicLayout/components/pdsOriginal/common';
+import type { TextLabelProps } from '../../../../../DynamicLayout/components/pdsOriginal/desktop/TextLabel/TextLabel';
+import type { IItemButton, IItemDescription, IItemTitle, IMembershipCardTemplate } from '../../../../../DynamicLayout/types';
+declare function MembershipSectionItem(): JSX.Element;
+declare namespace MembershipSectionItem {
+    var Title: ({ text, color, lineHeight, ...textLabelProps }: IItemTitle & TextLabelProps & {
+        lineHeight?: number | undefined;
+    }) => JSX.Element;
+    var Description: ({ text, color, ...textLabelProps }: IItemDescription & TextLabelProps) => JSX.Element;
+    var DesignedSectionButton: ({ buttonType, backgroundColor, textColor, text, linkType, src, linkMethod, state, borderColor }: IItemButton) => JSX.Element;
+    var IconButton: ({ iconButtonBackgroundColor, iconButtonBorderColor, iconButtonDisabledBackgroundColor, iconButtonDisabledIconColor, iconButtonIconColor, isDisabled, iconName, state, onClick }: IconButtonProps) => JSX.Element;
+    var MembershipCard: ({ membershipCardTemplate, cardWidth }: MembershipCardProps) => JSX.Element;
+    var ColorOverrideIcon: ({ iconColor, iconName }: ColorOverrideIconProps) => JSX.Element;
+    var XlargeMainButton: ({ buttonTextColor, buttonBackgroundColor, buttonText, onClick }: XlargeMainButtonProps) => JSX.Element;
+}
+declare type IconButtonProps = {
+    iconButtonIconColor: string;
+    iconButtonDisabledIconColor: string;
+    iconButtonBorderColor: string;
+    iconButtonBackgroundColor: string;
+    iconButtonDisabledBackgroundColor: string;
+    isDisabled?: boolean;
+    iconName: FillIconNameKeys | LineIconNameKeys;
+    state?: 'normal' | 'disabled';
+    onClick?: (value?: number | string) => void;
+};
+declare type MembershipCardProps = {
+    membershipCardTemplate: IMembershipCardTemplate;
+    cardWidth?: number;
+};
+declare type ColorOverrideIconProps = {
+    iconColor: string;
+    iconName: FillIconNameKeys | LineIconNameKeys;
+};
+declare type XlargeMainButtonProps = {
+    buttonTextColor: string;
+    buttonBackgroundColor: string;
+    buttonText: string;
+    onClick?: () => void;
+};
+export default MembershipSectionItem;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/mobile/MembershipSectionItem.js

@@ -0,0 +1,264 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var pdsOriginal_1 = require("../../../../../DynamicLayout/components/pdsOriginal");
+var dynamicLayoutContext_1 = require("../../../../../DynamicLayout/dynamicLayoutContext");
+var styled_components_1 = __importStar(require("styled-components"));
+function MembershipSectionItem() {
+    return (0, jsx_runtime_1.jsx)(S_Item, { "x-dlayout-section-element-name": "Item", isClickable: false }, void 0);
+}
+var S_Item = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  ", "\n"], ["\n  position: relative;\n  ", "\n"])), function (_a) {
+    var isClickable = _a.isClickable;
+    return isClickable && 'cursor : pointer;';
+});
+function Title(_a) {
+    var text = _a.text, color = _a.color, _b = _a.lineHeight, lineHeight = _b === void 0 ? 1.5 : _b, textLabelProps = __rest(_a, ["text", "color", "lineHeight"]);
+    return ((0, jsx_runtime_1.jsx)(S_TitleStyleWrapper, __assign({ "x-dlayout-membership-item-element-name": "Title", color: color, lineHeight: lineHeight }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps), void 0) }), void 0));
+}
+var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"])), function (_a) {
+    var color = _a.color;
+    return color;
+}, function (_a) {
+    var lineHeight = _a.lineHeight;
+    return lineHeight;
+});
+function Description(_a) {
+    var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
+    return ((0, jsx_runtime_1.jsx)(S_DescriptionStyleWrapper, __assign({ "x-dlayout-membership-item-element-name": "Description", color: color }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextSecondary" }, textLabelProps), void 0) }), void 0));
+}
+var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    width: 100%;\n  }\n"], ["\n  & > div {\n    color: ", ";\n    width: 100%;\n  }\n"])), function (_a) {
+    var color = _a.color;
+    return color;
+});
+function DesignedSectionButton(_a) {
+    var buttonType = _a.buttonType, backgroundColor = _a.backgroundColor, textColor = _a.textColor, text = _a.text, _b = _a.linkType, linkType = _b === void 0 ? 'NONE' : _b, _c = _a.src, src = _c === void 0 ? '' : _c, _d = _a.linkMethod, linkMethod = _d === void 0 ? 'CLICK_BUTTON_IN_ITEM' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, borderColor = _a.borderColor;
+    var _f = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), mode = _f.mode, isPreview = _f.isPreview, navigationHandler = _f.navigationHandler;
+    var handleClickButton = function (e) {
+        if (isPreview !== null && isPreview !== void 0 ? isPreview : mode === 'PREVIEW')
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        typeof navigationHandler === 'function' && navigationHandler(linkType, src);
+    };
+    if (!src || linkMethod !== 'CLICK_BUTTON_IN_ITEM')
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    switch (buttonType) {
+        case 'A':
+            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
+        case 'B':
+            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
+        case 'C':
+            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
+        case 'D':
+            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
+        case 'E':
+            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
+        case 'F':
+            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
+        case 'G':
+            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
+        case 'H':
+            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionMainButtonWrapper, __assign({ "x-dlayout-membership-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
+        case 'I':
+            return ((0, jsx_runtime_1.jsx)(S_DesignedSectionTextButtonWrapper, __assign({ color: textColor, state: state }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextButton, { text: text || 'BUTTON', onClick: handleClickButton, state: state }, void 0) }), void 0));
+        default:
+            return (0, jsx_runtime_1.jsx)("button", __assign({ type: "button" }, { children: "wrong type" }), void 0);
+    }
+}
+var S_DesignedSectionMainButtonWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  & > button {\n    background-color: ", ";\n    border: ", ";\n    border-radius: ", ";\n\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"], ["\n  & > button {\n    background-color: ", ";\n    border: ", ";\n    border-radius: ", ";\n\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme, backgroundColor = _a.backgroundColor, state = _a.state;
+    if (backgroundColor && state === 'normal') {
+        return backgroundColor;
+    }
+    return theme.ui_cpnt_button_fill_base_disabled;
+}, function (_a) {
+    var borderWidth = _a.borderWidth, borderColor = _a.borderColor, state = _a.state, type = _a.type, theme = _a.theme;
+    if (type === 'E' || type === 'F' || type === 'G' || type === 'H') {
+        if (borderWidth && borderColor && state === 'normal') {
+            return borderWidth + "px solid " + borderColor;
+        }
+        if (borderWidth && state === 'disabled') {
+            return borderWidth + "px solid " + theme.ui_cpnt_button_line_border_disabled;
+        }
+    }
+    return 'none';
+}, function (_a) {
+    var radius = _a.radius;
+    return radius + "px";
+}, function (_a) {
+    var color = _a.color, state = _a.state, theme = _a.theme;
+    if (state === 'normal') {
+        return color;
+    }
+    return theme.ui_cpnt_textlabel_sys_tertiary;
+});
+var S_DesignedSectionTextButtonWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  & > button {\n    background: none;\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n\n    &:hover:enabled {\n      background: none;\n    }\n\n    &:active:enabled {\n      background: none;\n    }\n  }\n"], ["\n  & > button {\n    background: none;\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n\n    &:hover:enabled {\n      background: none;\n    }\n\n    &:active:enabled {\n      background: none;\n    }\n  }\n"])), function (_a) {
+    var color = _a.color, state = _a.state, theme = _a.theme;
+    if (state === 'normal') {
+        return color;
+    }
+    return theme.ui_cpnt_textlabel_sys_tertiary;
+});
+function IconButton(_a) {
+    var iconButtonBackgroundColor = _a.iconButtonBackgroundColor, iconButtonBorderColor = _a.iconButtonBorderColor, iconButtonDisabledBackgroundColor = _a.iconButtonDisabledBackgroundColor, iconButtonDisabledIconColor = _a.iconButtonDisabledIconColor, iconButtonIconColor = _a.iconButtonIconColor, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, iconName = _a.iconName, _c = _a.state, state = _c === void 0 ? 'normal' : _c, onClick = _a.onClick;
+    var handleOnClick = function () {
+        onClick && onClick();
+    };
+    return ((0, jsx_runtime_1.jsx)(S_IconButtonWrapper, __assign({ iconButtonIconColor: iconButtonIconColor, iconButtonDisabledIconColor: iconButtonDisabledIconColor, iconButtonBackgroundColor: iconButtonBackgroundColor, iconButtonDisabledBackgroundColor: iconButtonDisabledBackgroundColor, iconButtonBorderColor: iconButtonBorderColor, isDisabled: isDisabled }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_IconButton, { fillType: "line", shapeType: "circular", baseSize: "medium", iconName: iconName, state: state, onClick: handleOnClick }, void 0) }), void 0));
+}
+var S_IconButtonWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  & > button {\n    background-color: ", ";\n    border: ", ";\n  }\n\n  & > button:hover:enabled {\n    background-color: ", ";\n    border: ", ";\n  }\n\n  & > button > svg > path {\n    stroke: ", ";\n  }\n"], ["\n  & > button {\n    background-color: ", ";\n    border: ", ";\n  }\n\n  & > button:hover:enabled {\n    background-color: ", ";\n    border: ", ";\n  }\n\n  & > button > svg > path {\n    stroke: ", ";\n  }\n"])), function (_a) {
+    var iconButtonBackgroundColor = _a.iconButtonBackgroundColor, iconButtonDisabledBackgroundColor = _a.iconButtonDisabledBackgroundColor, isDisabled = _a.isDisabled;
+    return (isDisabled ? iconButtonDisabledBackgroundColor : iconButtonBackgroundColor);
+}, function (_a) {
+    var iconButtonBorderColor = _a.iconButtonBorderColor;
+    return "1px " + iconButtonBorderColor + " solid";
+}, function (_a) {
+    var iconButtonBackgroundColor = _a.iconButtonBackgroundColor;
+    return iconButtonBackgroundColor;
+}, function (_a) {
+    var iconButtonBorderColor = _a.iconButtonBorderColor;
+    return "1px " + iconButtonBorderColor + " solid";
+}, function (_a) {
+    var iconButtonIconColor = _a.iconButtonIconColor, iconButtonDisabledIconColor = _a.iconButtonDisabledIconColor, isDisabled = _a.isDisabled;
+    return isDisabled ? iconButtonDisabledIconColor : iconButtonIconColor;
+});
+function MembershipCard(_a) {
+    var membershipCardTemplate = _a.membershipCardTemplate, cardWidth = _a.cardWidth;
+    var backgroundImageSrc = membershipCardTemplate.backgroundImageSrc, designSchema = membershipCardTemplate.designSchema, logoImageSrc = membershipCardTemplate.logoImageSrc, overlayColorPrimary = membershipCardTemplate.overlayColorPrimary, overlayColorSecondary = membershipCardTemplate.overlayColorSecondary, overlayType = membershipCardTemplate.overlayType;
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(S_MembershipCardBox, { children: [(0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: backgroundImageSrc, width: cardWidth ? cardWidth : 'responsive', ratio: "10_16", scaleType: "cover" }, void 0), (0, jsx_runtime_1.jsx)(S_LogoImageWrapper, __assign({ designSchema: designSchema }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: logoImageSrc, width: "responsive", scaleType: "contain" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(S_MembershipCardOverlay, { overlayType: overlayType, overlayColorPrimary: overlayColorPrimary, overlayColorSecondary: overlayColorSecondary, cardWidth: cardWidth }, void 0)] }, void 0) }, void 0));
+}
+var S_MembershipCardBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: ", ";\n  min-width: ", ";\n  overflow: hidden;\n  position: relative;\n  width: auto;\n"], ["\n  border-radius: 12px;\n  height: ", ";\n  min-width: ", ";\n  overflow: hidden;\n  position: relative;\n  width: auto;\n"])), function (_a) {
+    var cardWidth = _a.cardWidth;
+    return (cardWidth ? cardWidth * 1.6 + "px" : '100%');
+}, function (_a) {
+    var cardWidth = _a.cardWidth;
+    return (cardWidth ? cardWidth + "px" : '100%');
+});
+var designSchemaA = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  left: 10%;\n  top: 6%;\n"], ["\n  left: 10%;\n  top: 6%;\n"])));
+var designSchemaB = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n"], ["\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n"])));
+var S_LogoImageWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  width: ", ";\n  z-index: 3;\n\n  ", "\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  width: ", ";\n  z-index: 3;\n\n  ", "\n"])), function (_a) {
+    var cardWidth = _a.cardWidth, designSchema = _a.designSchema;
+    if (designSchema === 'A') {
+        return cardWidth ? cardWidth * 0.5 + "px" : '50%';
+    }
+    if (designSchema === 'B') {
+        return cardWidth ? cardWidth * 0.6 + "px" : '60%';
+    }
+    return cardWidth ? cardWidth * 0.5 + "px" : '50%';
+}, function (_a) {
+    var designSchema = _a.designSchema;
+    switch (designSchema) {
+        case 'A':
+            return designSchemaA;
+        case 'B':
+            return designSchemaB;
+        default:
+            return designSchemaA;
+    }
+});
+var overlaySolidType = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (_a) {
+    var overlayColorPrimary = _a.overlayColorPrimary;
+    return overlayColorPrimary + "4C";
+});
+var overlayGradientType = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (_a) {
+    var overlayColorPrimary = _a.overlayColorPrimary, overlayColorSecondary = _a.overlayColorSecondary;
+    return "linear-gradient(135deg, " + overlayColorPrimary + "4C, " + overlayColorSecondary + "4C)";
+});
+var S_MembershipCardOverlay = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  height: ", ";\n  position: absolute;\n  top: 0;\n  width: ", ";\n  z-index: 2;\n\n  ", "\n"], ["\n  height: ", ";\n  position: absolute;\n  top: 0;\n  width: ", ";\n  z-index: 2;\n\n  ", "\n"])), function (_a) {
+    var cardWidth = _a.cardWidth;
+    return (cardWidth ? cardWidth * 1.6 + "px" : '100%');
+}, function (_a) {
+    var cardWidth = _a.cardWidth;
+    return (cardWidth ? cardWidth + "px" : '100%');
+}, function (_a) {
+    var overlayType = _a.overlayType;
+    switch (overlayType) {
+        case 'NONE':
+            return;
+        case 'SOLID':
+            return overlaySolidType;
+        case 'GRADIENT':
+            return overlayGradientType;
+        default:
+            return;
+    }
+});
+function ColorOverrideIcon(_a) {
+    var iconColor = _a.iconColor, iconName = _a.iconName;
+    return ((0, jsx_runtime_1.jsx)(S_ColorOverrideIconWrapper, __assign({ "x-dlayout-membership-item-element-name": "Icon", iconColor: iconColor }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.Icon, { colorKey: "ui_cpnt_icon_sys_grey_01", iconName: iconName }, void 0) }), void 0));
+}
+var S_ColorOverrideIconWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n\n  & path {\n    stroke: ", ";\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n\n  & path {\n    stroke: ", ";\n  }\n"])), function (_a) {
+    var iconColor = _a.iconColor;
+    return iconColor;
+});
+function XlargeMainButton(_a) {
+    var buttonTextColor = _a.buttonTextColor, buttonBackgroundColor = _a.buttonBackgroundColor, buttonText = _a.buttonText, onClick = _a.onClick;
+    var handleOnclick = function () {
+        onClick && onClick();
+    };
+    return ((0, jsx_runtime_1.jsx)(S_XlargeMainButtonPropsWrapper, __assign({ "x-dlayout-membership-item-element-name": "Icon", buttonTextColor: buttonTextColor, buttonBackgroundColor: buttonBackgroundColor }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: buttonText, size: "rlarge", responsiveMode: "use", onClick: handleOnclick }, void 0) }), void 0));
+}
+var S_XlargeMainButtonPropsWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  & > button {\n    background-color: ", ";\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"], ["\n  & > button {\n    background-color: ", ";\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme, buttonBackgroundColor = _a.buttonBackgroundColor;
+    return buttonBackgroundColor
+        ? buttonBackgroundColor
+        : theme.ui_cpnt_button_fill_base_disabled;
+}, function (_a) {
+    var buttonTextColor = _a.buttonTextColor, theme = _a.theme;
+    return buttonTextColor ? buttonTextColor : theme.ui_cpnt_textlabel_sys_tertiary;
+});
+MembershipSectionItem.Title = Title;
+MembershipSectionItem.Description = Description;
+MembershipSectionItem.DesignedSectionButton = DesignedSectionButton;
+MembershipSectionItem.IconButton = IconButton;
+MembershipSectionItem.MembershipCard = MembershipCard;
+MembershipSectionItem.ColorOverrideIcon = ColorOverrideIcon;
+MembershipSectionItem.XlargeMainButton = XlargeMainButton;
+exports.default = MembershipSectionItem;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/mobile/index.d.ts

@@ -0,0 +1 @@
+export { default as M_MembershipSectionItem } from './MembershipSectionItem';

package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/mobile/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.M_MembershipSectionItem = void 0;
+var MembershipSectionItem_1 = require("./MembershipSectionItem");
+Object.defineProperty(exports, "M_MembershipSectionItem", { enumerable: true, get: function () { return __importDefault(MembershipSectionItem_1).default; } });

package/dist/src/sub/DynamicLayout/sections/MembershipSection/constants.d.ts

@@ -0,0 +1,5 @@
+import type { TypeOfMembershipSectionToneColor } from './type';
+import type { TypeOfItemToneType } from '../../../DynamicLayout/types';
+export declare const MEMBERSHIP_SECTION_TONE_COLOR: {
+    [key in TypeOfItemToneType]: TypeOfMembershipSectionToneColor;
+};

package/dist/src/sub/DynamicLayout/sections/MembershipSection/constants.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MEMBERSHIP_SECTION_TONE_COLOR = void 0;
+exports.MEMBERSHIP_SECTION_TONE_COLOR = {
+    LIGHT: {
+        contentBackgroundDimColor: '#F5F5F8B3',
+        iconButtonBackgroundColor: '#FFFFFFFF',
+        iconButtonBorderColor: '#E3E5E9FF',
+        iconButtonDisabledBackgroundColor: '#FFFFFFFF',
+        iconButtonDisabledIconColor: '#AAAAB1FF',
+        iconButtonIconColor: '#1E1E20FF',
+        membershipPlanSheetBackgroundColor: '#EAEBEFFF',
+        membershipSheetBackgroundColor: '#F5F5F8FF',
+        membershipSheetTextLabelColor: '#1E1E20FF',
+        scrollbarColor: '#E3E5E9FF'
+    },
+    DARK: {
+        contentBackgroundDimColor: '#25252699',
+        iconButtonBackgroundColor: '#1E1E20FF',
+        iconButtonBorderColor: '#404042FF',
+        iconButtonDisabledBackgroundColor: '#151515FF',
+        iconButtonDisabledIconColor: '#68686CFF',
+        iconButtonIconColor: '#FDFDFDFF',
+        membershipPlanSheetBackgroundColor: '#303032FF',
+        membershipSheetBackgroundColor: '#252526FF',
+        membershipSheetTextLabelColor: '#FDFDFDFF',
+        scrollbarColor: '#404042FF'
+    }
+};

package/dist/src/sub/DynamicLayout/sections/MembershipSection/index.d.ts

@@ -0,0 +1,3 @@
+import { EditTypeMembershipSection } from './EditType';
+import { NormalTypeMembershipSection } from './NormalType';
+export { EditTypeMembershipSection, NormalTypeMembershipSection };

package/dist/src/sub/DynamicLayout/sections/MembershipSection/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NormalTypeMembershipSection = exports.EditTypeMembershipSection = void 0;
+var EditType_1 = require("./EditType");
+Object.defineProperty(exports, "EditTypeMembershipSection", { enumerable: true, get: function () { return EditType_1.EditTypeMembershipSection; } });
+var NormalType_1 = require("./NormalType");
+Object.defineProperty(exports, "NormalTypeMembershipSection", { enumerable: true, get: function () { return NormalType_1.NormalTypeMembershipSection; } });

package/dist/src/sub/DynamicLayout/sections/MembershipSection/type.d.ts

@@ -0,0 +1,5 @@
+export declare type TypeOfMembershipSectionToneColor = {
+    [key in colorTonePreset]: string;
+};
+declare type colorTonePreset = 'contentBackgroundDimColor' | 'iconButtonBackgroundColor' | 'iconButtonBorderColor' | 'iconButtonDisabledBackgroundColor' | 'iconButtonDisabledIconColor' | 'iconButtonIconColor' | 'membershipPlanSheetBackgroundColor' | 'membershipSheetBackgroundColor' | 'membershipSheetTextLabelColor' | 'scrollbarColor';
+export {};

package/dist/src/sub/DynamicLayout/sections/MembershipSection/type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -3,4 +3,6 @@ export { ContentsSection } from './ContentsSection';
 export { FooterSection } from './FooterSection';
 export { InfoBoxSection } from './InfoBoxSection';
 export { IntroSection } from './IntroSection';
+export { EditTypeMembershipSection } from './MembershipSection';
+export { NormalTypeMembershipSection } from './MembershipSection';
 export { FullscreenIframeSection } from './FullscreenIframeSection';

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FullscreenIframeSection = exports.IntroSection = exports.InfoBoxSection = exports.FooterSection = exports.ContentsSection = exports.ContentsCarouselSection = void 0;
+exports.FullscreenIframeSection = exports.NormalTypeMembershipSection = exports.EditTypeMembershipSection = exports.IntroSection = exports.InfoBoxSection = exports.FooterSection = exports.ContentsSection = exports.ContentsCarouselSection = void 0;
 var ContentsCarouselSection_1 = require("./ContentsCarouselSection");
 Object.defineProperty(exports, "ContentsCarouselSection", { enumerable: true, get: function () { return ContentsCarouselSection_1.ContentsCarouselSection; } });
 var ContentsSection_1 = require("./ContentsSection");
@@ -11,5 +11,9 @@ var InfoBoxSection_1 = require("./InfoBoxSection");
 Object.defineProperty(exports, "InfoBoxSection", { enumerable: true, get: function () { return InfoBoxSection_1.InfoBoxSection; } });
 var IntroSection_1 = require("./IntroSection");
 Object.defineProperty(exports, "IntroSection", { enumerable: true, get: function () { return IntroSection_1.IntroSection; } });
+var MembershipSection_1 = require("./MembershipSection");
+Object.defineProperty(exports, "EditTypeMembershipSection", { enumerable: true, get: function () { return MembershipSection_1.EditTypeMembershipSection; } });
+var MembershipSection_2 = require("./MembershipSection");
+Object.defineProperty(exports, "NormalTypeMembershipSection", { enumerable: true, get: function () { return MembershipSection_2.NormalTypeMembershipSection; } });
 var FullscreenIframeSection_1 = require("./FullscreenIframeSection");
 Object.defineProperty(exports, "FullscreenIframeSection", { enumerable: true, get: function () { return FullscreenIframeSection_1.FullscreenIframeSection; } });

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

@@ -1,9 +1,11 @@
+/// <reference types="react" />
 import type { TypeOfSectionAction } from './sectionActionTypes';
 export { TypeOfSectionAction };
-export declare type TypeOfSectionManifestSchema = 'BASE_INTRO' | 'BASE_CONTENTS' | 'BASE_CONTENTS_CAROUSEL' | 'BASE_FOOTER' | 'BASE_INFO_BOX' | 'EXP_IFRAME';
-export declare type TypeofSectionTemplate = 'BASE_INTRO_A' | 'BASE_INTRO_B' | 'BASE_INTRO_C' | 'BASE_INTRO_D' | 'BASE_CONTENTS_A' | 'BASE_CONTENTS_B' | 'BASE_CONTENTS_CAROUSEL_A' | 'BASE_CONTENTS_CAROUSEL_B' | 'BASE_FOOTER_A' | 'BASE_FOOTER_B' | 'BASE_INFO_BOX_A' | 'EXP_IFRAME_A';
+export declare type TypeOfSectionManifestSchema = 'BASE_INTRO' | 'BASE_CONTENTS' | 'BASE_CONTENTS_CAROUSEL' | 'BASE_FOOTER' | 'BASE_INFO_BOX' | 'EXP_IFRAME' | 'PRG_MEMBERSHIP_DISPLAY';
+export declare type TypeofSectionTemplate = 'BASE_INTRO_A' | 'BASE_INTRO_B' | 'BASE_INTRO_C' | 'BASE_INTRO_D' | 'BASE_CONTENTS_A' | 'BASE_CONTENTS_B' | 'BASE_CONTENTS_CAROUSEL_A' | 'BASE_CONTENTS_CAROUSEL_B' | 'BASE_FOOTER_A' | 'BASE_FOOTER_B' | 'BASE_INFO_BOX_A' | 'EXP_IFRAME_A' | 'PRG_MEMBERSHIP_DISPLAY_A' | 'PRG_MEMBERSHIP_DISPLAY_B';
 export declare type TypeOfSectionContentMediaType = 'IMAGE' | 'YOUTUBE';
 export declare type TypeOfSectionLinkType = 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE';
+export declare type TypeOfSectionType = 'PROGRAMMED' | 'DESIGNED';
 export declare type TypeOfCarouselAutoplayMode = 'AUTO' | 'MANUAL';
 export declare type TypeOfCarouselInfiniteLoopMode = 'USE' | 'NO_USE';
 export declare type TypeOfBackgroundMediaType = 'IMAGE' | 'YOUTUBE';
@@ -12,8 +14,10 @@ export declare type TypeOfItemButtonDesignType = 'A' | 'B' | 'C' | 'D' | 'E' | '
 export declare type TypeOfItemManifestSchema = 'BASE_CONTENTS_CAROUSEL_ITEM' | 'BASE_FOOTER_ITEM' | 'BASE_INFO_BOX_ITEM';
 export declare type TypeOfItemLinkMethod = 'CLICK_ITEM' | 'CLICK_BUTTON_IN_ITEM' | 'NONE';
 export declare type TypeOfItemLinkType = 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE';
+export declare type TypeOfItemToneType = 'LIGHT' | 'DARK';
+export declare type TypeOfProgrammedItemActionButtonTextType = 'A' | 'B' | 'C' | 'D' | 'E';
 declare type KeyOfSectionProperties = 'title' | 'description' | 'section_content_media_type' | 'section_content_media_src' | 'button_alpha_label' | 'button_alpha_link_type' | 'button_alpha_link_src' | 'button_bravo_label' | 'button_bravo_link_type' | 'button_bravo_link_src' | 'button_charlie_label' | 'button_charlie_link_type' | 'button_charlie_link_src' | 'button_delta_label' | 'button_delta_link_type' | 'button_delta_link_src' | 'button_echo_label' | 'button_echo_link_type' | 'button_echo_link_src' | 'carousel_autoplay_mode' | 'carousel_autoplay_time' | 'carousel_infinite_loop_mode' | 'item_link_method' | 'multi_purpose_url';
-declare type KeyOfSectionStyles = 'title_color_in_hex' | 'description_color_in_hex' | 'background_color_in_hex' | 'background_media_type' | 'background_media_src' | 'background_overlay_color_in_hex' | 'button_alpha_design_type' | 'button_alpha_background_color_in_hex' | 'button_alpha_label_color_in_hex' | 'button_bravo_design_type' | 'button_bravo_background_color_in_hex' | 'button_bravo_label_color_in_hex' | 'button_charlie_design_type' | 'button_charlie_background_color_in_hex' | 'button_charlie_label_color_in_hex' | 'button_delta_design_type' | 'button_delta_background_color_in_hex' | 'button_delta_label_color_in_hex' | 'button_echo_design_type' | 'button_echo_background_color_in_hex' | 'button_echo_label_color_in_hex' | 'item_title_color_in_hex' | 'item_description_color_in_hex' | 'item_button_design_type' | 'item_button_background_color_in_hex' | 'item_button_label_color_in_hex';
+declare type KeyOfSectionStyles = 'title_color_in_hex' | 'description_color_in_hex' | 'background_color_in_hex' | 'background_media_type' | 'background_media_src' | 'background_overlay_color_in_hex' | 'button_alpha_design_type' | 'button_alpha_background_color_in_hex' | 'button_alpha_label_color_in_hex' | 'button_bravo_design_type' | 'button_bravo_background_color_in_hex' | 'button_bravo_label_color_in_hex' | 'button_charlie_design_type' | 'button_charlie_background_color_in_hex' | 'button_charlie_label_color_in_hex' | 'button_delta_design_type' | 'button_delta_background_color_in_hex' | 'button_delta_label_color_in_hex' | 'button_echo_design_type' | 'button_echo_background_color_in_hex' | 'button_echo_label_color_in_hex' | 'item_title_color_in_hex' | 'item_description_color_in_hex' | 'item_button_design_type' | 'item_button_background_color_in_hex' | 'item_button_label_color_in_hex' | 'item_highlighting_color_in_hex' | 'item_tone_type' | 'programmed_item_action_button_text_type';
 declare type KeyOfItemProperties = 'title' | 'description' | 'body' | 'logo_image_src' | 'image_src' | 'link_type' | 'link_src' | 'button_label';
 export interface ISection {
     id: number;
@@ -31,6 +35,11 @@ export interface ISection {
     dynamicLayoutSectionItems: Array<IItem> | null;
     insertedAt: string;
     updatedAt: string;
+    type: TypeOfSectionType;
+    program?: 'MEMBERSHIP_DISPLAY';
+    programData?: {
+        mdid: string;
+    };
 }
 export interface ISectionProperties {
     title: string;
@@ -85,6 +94,9 @@ export interface ISectionStyles {
     itemButtonDesignType: TypeOfItemButtonDesignType;
     itemButtonBackgroundColorInHex: string;
     itemButtonLabelColorInHex: string;
+    itemHighlightingColorInHex: string;
+    itemToneType: TypeOfItemToneType;
+    programmedItemActionButtonTextType: TypeOfProgrammedItemActionButtonTextType;
 }
 export interface IItem {
     id: number;
@@ -99,7 +111,7 @@ export interface IItem {
     insertedAt: string;
     updatedAt: string;
 }
-interface IItemProperties {
+export interface IItemProperties {
     title: string;
     description: string;
     body: string;
@@ -178,4 +190,72 @@ export declare type DynamicLayoutProps = {
     navigationHandler?: (linkType: 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE', src: string) => void;
     onClickEditSection?: (section: ISection) => void;
     sectionActionHandler?: (action: TypeOfSectionAction) => void;
+    programmedSectionComponents?: IProgrammedSectionComponents;
+    programmedSectionPreviewData?: IProgrammedSectionPreviewData;
+};
+declare type SubscriptionProductType = 'FREE_INFINITE' | 'FREE_FINITE' | 'ONCE_INFINITE' | 'ONCE_FINITE' | 'COUPON_FREE_INFINITE' | 'COUPON_FREE_FINITE' | 'COUPON_ONCE_INFINITE' | 'COUPON_ONCE_FINITE' | 'SUBSCRIPTION_30DAYS' | 'SUBSCRIPTION_90DAYS' | 'SUBSCRIPTION_180DAYS' | 'SUBSCRIPTION_365DAYS';
+declare type ExpiryPeriodInDaysType = 1 | 3 | 7 | 14 | 30;
+export declare type IMembershipCardTemplate = {
+    backgroundImageSrc: string;
+    logoImageSrc: string;
+    overlayType: 'NONE' | 'SOLID' | 'GRADIENT';
+    overlayColorPrimary: string;
+    overlayColorSecondary: string;
+    designSchema: 'A' | 'B' | 'C';
+};
+export declare type IMembershipBenefitInfo = {
+    benefitAlpha?: string;
+    benefitBravo?: string;
+    benefitCharlie?: string;
+    benefitDelta?: string;
+    benefitEcho?: string;
+};
+export declare type IConnectedSubscriptionProducts = {
+    id: number;
+    order: number;
+    connectedMembershipId: number;
+    subscriptionProductId: number;
+    subscriptionProduct: {
+        id: number;
+        type: SubscriptionProductType;
+        title: string;
+        alias: string;
+        expiryPeriodInDays: ExpiryPeriodInDaysType;
+        isDeactivated: boolean;
+        fee: number | string;
+        insertedAt: string;
+        updatedAt: string;
+    };
+};
+export declare type IMembership = {
+    id: number;
+    type: 'SYSTEM_GUEST' | 'SYSTEM_MEMBER' | 'SYSTEM_P_APP_UNLOCK' | 'GENERAL';
+    mid: string;
+    title: string;
+    insertedAt: string;
+    updatedAt: string;
+    membershipCardTemplate: IMembershipCardTemplate;
+    membershipBenefitInfo: IMembershipBenefitInfo;
+    totalSubscriptionProducts: number;
+};
+export declare type IConnectedMembership = {
+    id: number;
+    order: number;
+    mdid: string;
+    mid: string;
+    membership: IMembership;
+    connectedSubscriptionProducts: IConnectedSubscriptionProducts[];
+};
+export declare type IProgrammedSectionComponents = {
+    [key in TypeOfSectionManifestSchema]?: JSX.Element;
+};
+export declare type IMembershipDisplay = {
+    id: number;
+    mdid: string;
+    title: string;
+    isDefault: boolean;
+    connectedMemberships: IConnectedMembership[];
+};
+export declare type IProgrammedSectionPreviewData = {
+    MEMBERSHIP_DISPLAY?: IMembershipDisplay;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "2.0.7",
+  "version": "2.0.9-alpha.0",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,9 +1,8 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.0.7]
+## [v2.0.9-alpha.0]
 
-## daily|https://design.storybook.publ.biz/
+## alpha|https://staging.storybook.publ.biz/
 
 ### sub
 * DynamicLayout
-    * 액션핸들러의 액션 네이밍 규칙을 수정
-        * [SECTION_NAME]_[OBJECT]_[ACTION] → @[TypeOfSectionManifestSchema]/[OBJECT]_[ACTION]
+    * membership section 생성

package/webhook/node_modules/esrecurse/.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["es2015"]
+}