pb-sxp-ui 1.20.29 → 1.20.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/index.cjs +25 -12
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +25 -12
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +7 -7
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +7 -7
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +25 -12
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +7 -7
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/StructurePage/index.js +25 -12
  14. package/lib/core/components/StructurePage/index.js +25 -12
  15. package/package.json +1 -1
package/es/core/components/StructurePage/index.js CHANGED
@@ -81,7 +81,8 @@ const baseStyles = {
81
81
  },
82
82
  carouselSection: {
83
83
  width: '100%',
84
- position: 'relative'
84
+ position: 'relative',
85
+ padding: '20px 16px'
85
86
  },
86
87
  carouselImageContainer: {
87
88
  width: '100%',
@@ -112,7 +113,7 @@ const baseStyles = {
112
113
  },
113
114
  carouselInfoSection: {
114
115
  width: '100%',
115
- padding: '20px',
116
+ padding: '10px 20px',
116
117
  backgroundColor: '#000',
117
118
  color: '#fff',
118
119
  textAlign: 'center'
@@ -305,7 +306,7 @@ const baseStyles = {
305
306
  }
306
307
  };
307
308
  const StructurePage = (_a) => {
308
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
309
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
309
310
  var { containerStyle, containerHeight = 664, containerWidth = 375, className = '', apiUrl = 'https://bff-be-dev.chatlabs.net/api/v1/recommend/list', requestBody, editorMode = false, multiCTAConfig: propMultiCTAConfig, videoPlayIcon: propVideoPlayIcon, isCmsMode = false, storyId, customHeaders } = _a, rest = __rest(_a, ["containerStyle", "containerHeight", "containerWidth", "className", "apiUrl", "requestBody", "editorMode", "multiCTAConfig", "videoPlayIcon", "isCmsMode", "storyId", "customHeaders"]);
310
311
  const [data, setData] = useState(null);
311
312
  const [loading, setLoading] = useState(true);
@@ -372,7 +373,7 @@ const StructurePage = (_a) => {
372
373
  }
373
374
  const config = multiCTAConfig[configKey];
374
375
  const styleKeys = [
375
- 'fontSize', 'color', 'textAlign', 'fontWeight',
376
+ 'fontSize', 'color', 'textAlign', 'fontWeight', 'fontStyle', 'textDecoration',
376
377
  'backgroundColor', 'padding', 'margin', 'borderRadius',
377
378
  'showBorder', 'borderWidth', 'borderColor',
378
379
  'buttonBackgroundColor', 'buttonTextColor', 'buttonWidth', 'buttonHeight'
@@ -396,8 +397,16 @@ const StructurePage = (_a) => {
396
397
  if (styleConfig.textAlign && typeof styleConfig.textAlign === 'string') {
397
398
  customStyle.textAlign = styleConfig.textAlign;
398
399
  }
399
- if (styleConfig.fontWeight && typeof styleConfig.fontWeight === 'number') {
400
- customStyle.fontWeight = styleConfig.fontWeight;
400
+ if (styleConfig.fontWeight) {
401
+ customStyle.fontWeight = typeof styleConfig.fontWeight === 'number'
402
+ ? styleConfig.fontWeight
403
+ : styleConfig.fontWeight;
404
+ }
405
+ if (styleConfig.fontStyle && typeof styleConfig.fontStyle === 'string') {
406
+ customStyle.fontStyle = styleConfig.fontStyle;
407
+ }
408
+ if (styleConfig.textDecoration && typeof styleConfig.textDecoration === 'string') {
409
+ customStyle.textDecoration = styleConfig.textDecoration;
401
410
  }
402
411
  if (styleConfig.backgroundColor && typeof styleConfig.backgroundColor === 'string') {
403
412
  customStyle.backgroundColor = styleConfig.backgroundColor;
@@ -639,8 +648,8 @@ const StructurePage = (_a) => {
639
648
  React.createElement("video", { ref: heroVideoRef, src: data.heroSection.url, style: baseStyles.heroVideo, autoPlay: true, muted: true, loop: true, playsInline: true, controls: false }),
640
649
  isHeroVideoPaused && (React.createElement(FormatImage, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' })))) : ((_e = data.heroSection.imgUrls) === null || _e === void 0 ? void 0 : _e[0]) ? (React.createElement("img", { src: data.heroSection.imgUrls[0], alt: 'Hero', style: baseStyles.heroImage })) : null,
641
650
  React.createElement("div", { style: baseStyles.heroOverlay }, renderCTA('heroButton', (_g = (_f = data.heroSection.bindProducts) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.bindCta, (_h = data.heroSection.bindProducts) === null || _h === void 0 ? void 0 : _h[0], baseStyles.heroButton))))),
642
- data.carouselSection && data.carouselSection.length > 0 && (React.createElement("div", { style: mergeStyles(baseStyles.carouselSection, 'carouselSection') },
643
- React.createElement("div", { style: baseStyles.carouselImageContainer },
651
+ data.carouselSection && data.carouselSection.length > 0 && (React.createElement("div", { style: Object.assign(Object.assign({}, mergeStyles(baseStyles.carouselSection, 'carouselSection')), (((_j = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.carouselContainerStyle) === null || _j === void 0 ? void 0 : _j.padding) && { padding: multiCTAConfig.carouselContainerStyle.padding })) },
652
+ React.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.carouselImageContainer), (((_k = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.carouselContainerStyle) === null || _k === void 0 ? void 0 : _k.aspectRatio) && { aspectRatio: multiCTAConfig.carouselContainerStyle.aspectRatio })) },
644
653
  React.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.carouselContainer), { transform: `translateX(-${carouselIndex * 100}%)` }) }, data.carouselSection.map((item, index) => {
645
654
  var _a;
646
655
  return (React.createElement("div", { key: item.itemId, style: baseStyles.carouselSlide }, item.url ? (React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: () => handleCarouselVideoClick(index) },
@@ -652,13 +661,14 @@ const StructurePage = (_a) => {
652
661
  React.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { left: '10px' }), onClick: handleCarouselPrev }, "\u2039"),
653
662
  React.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { right: '10px' }), onClick: handleCarouselNext }, "\u203A")),
654
663
  React.createElement("div", { style: mergeStyles(baseStyles.carouselInfoSection, 'carouselSection') },
655
- ((_j = data.carouselSection[carouselIndex]) === null || _j === void 0 ? void 0 : _j.text) && (React.createElement("div", { style: mergeStyles(baseStyles.carouselText, 'carouselSection') }, (_k = data.carouselSection[carouselIndex]) === null || _k === void 0 ? void 0 : _k.text)),
656
- renderCTA('carouselButton', (_o = (_m = (_l = data.carouselSection[carouselIndex]) === null || _l === void 0 ? void 0 : _l.bindProducts) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.bindCta, (_q = (_p = data.carouselSection[carouselIndex]) === null || _p === void 0 ? void 0 : _p.bindProducts) === null || _q === void 0 ? void 0 : _q[0], baseStyles.carouselButton)))),
664
+ ((_l = data.carouselSection[carouselIndex]) === null || _l === void 0 ? void 0 : _l.text) && (React.createElement("div", { style: mergeStyles(baseStyles.carouselText, 'carouselSection') }, (_m = data.carouselSection[carouselIndex]) === null || _m === void 0 ? void 0 : _m.text)),
665
+ renderCTA('carouselButton', (_q = (_p = (_o = data.carouselSection[carouselIndex]) === null || _o === void 0 ? void 0 : _o.bindProducts) === null || _p === void 0 ? void 0 : _p[0]) === null || _q === void 0 ? void 0 : _q.bindCta, (_s = (_r = data.carouselSection[carouselIndex]) === null || _r === void 0 ? void 0 : _r.bindProducts) === null || _s === void 0 ? void 0 : _s[0], baseStyles.carouselButton)))),
657
666
  data.highlightRevealSection && (React.createElement("div", { style: mergeStyles(baseStyles.highlightSection, 'highlightSection') },
658
667
  React.createElement("div", { style: baseStyles.highlightImageContainer },
659
668
  React.createElement("img", { src: data.highlightRevealSection.landingImageUrl || data.highlightRevealSection.cover, alt: data.highlightRevealSection.title, style: baseStyles.highlightImage })),
660
669
  React.createElement("div", { style: mergeStyles(baseStyles.highlightInfoSection, 'highlightSection') },
661
- React.createElement("div", { style: mergeStyles(baseStyles.highlightTitle, 'highlightSection') }, data.highlightRevealSection.title),
670
+ data.highlightRevealSection.text && (React.createElement("div", { style: { marginBottom: '10px' } },
671
+ React.createElement("div", { style: mergeStyles(baseStyles.highlightTitle, 'highlightSection') }, data.highlightRevealSection.text))),
662
672
  renderCTA('highlightButton', data.highlightRevealSection.bindCta, data.highlightRevealSection, baseStyles.highlightButton)))),
663
673
  data.productGridSection && data.productGridSection.length > 0 && (React.createElement("div", { style: mergeStyles(baseStyles.productGrid, 'productGrid') }, (() => {
664
674
  const gridItems = [null, null, null, null, null, null];
@@ -700,7 +710,10 @@ const StructurePage = (_a) => {
700
710
  });
701
711
  })())),
702
712
  data.footerSection && (React.createElement("div", { style: mergeStyles(baseStyles.footerSection, 'footerSection') },
703
- React.createElement("div", { style: mergeStyles(baseStyles.footerInfoSection, 'footerSection') }, renderCTA('footerButton', data.footerSection.bindCta, data.footerSection, baseStyles.footerButton)),
713
+ React.createElement("div", { style: mergeStyles(baseStyles.footerInfoSection, 'footerSection') },
714
+ data.footerSection.text && (React.createElement("div", { style: { marginBottom: '15px' } },
715
+ React.createElement("div", { style: mergeStyles(baseStyles.footerText, 'footerSection') }, data.footerSection.text))),
716
+ renderCTA('footerButton', data.footerSection.bindCta, data.footerSection, baseStyles.footerButton)),
704
717
  React.createElement("div", { style: baseStyles.footerImageContainer },
705
718
  React.createElement("img", { src: data.footerSection.landingImageUrl || data.footerSection.cover, alt: data.footerSection.title, style: baseStyles.footerImage }))))));
706
719
  };
package/lib/core/components/StructurePage/index.js CHANGED
@@ -83,7 +83,8 @@ const baseStyles = {
83
83
  },
84
84
  carouselSection: {
85
85
  width: '100%',
86
- position: 'relative'
86
+ position: 'relative',
87
+ padding: '20px 16px'
87
88
  },
88
89
  carouselImageContainer: {
89
90
  width: '100%',
@@ -114,7 +115,7 @@ const baseStyles = {
114
115
  },
115
116
  carouselInfoSection: {
116
117
  width: '100%',
117
- padding: '20px',
118
+ padding: '10px 20px',
118
119
  backgroundColor: '#000',
119
120
  color: '#fff',
120
121
  textAlign: 'center'
@@ -307,7 +308,7 @@ const baseStyles = {
307
308
  }
308
309
  };
309
310
  const StructurePage = (_a) => {
310
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
311
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
311
312
  var { containerStyle, containerHeight = 664, containerWidth = 375, className = '', apiUrl = 'https://bff-be-dev.chatlabs.net/api/v1/recommend/list', requestBody, editorMode = false, multiCTAConfig: propMultiCTAConfig, videoPlayIcon: propVideoPlayIcon, isCmsMode = false, storyId, customHeaders } = _a, rest = tslib_1.__rest(_a, ["containerStyle", "containerHeight", "containerWidth", "className", "apiUrl", "requestBody", "editorMode", "multiCTAConfig", "videoPlayIcon", "isCmsMode", "storyId", "customHeaders"]);
312
313
  const [data, setData] = (0, react_1.useState)(null);
313
314
  const [loading, setLoading] = (0, react_1.useState)(true);
@@ -374,7 +375,7 @@ const StructurePage = (_a) => {
374
375
  }
375
376
  const config = multiCTAConfig[configKey];
376
377
  const styleKeys = [
377
- 'fontSize', 'color', 'textAlign', 'fontWeight',
378
+ 'fontSize', 'color', 'textAlign', 'fontWeight', 'fontStyle', 'textDecoration',
378
379
  'backgroundColor', 'padding', 'margin', 'borderRadius',
379
380
  'showBorder', 'borderWidth', 'borderColor',
380
381
  'buttonBackgroundColor', 'buttonTextColor', 'buttonWidth', 'buttonHeight'
@@ -398,8 +399,16 @@ const StructurePage = (_a) => {
398
399
  if (styleConfig.textAlign && typeof styleConfig.textAlign === 'string') {
399
400
  customStyle.textAlign = styleConfig.textAlign;
400
401
  }
401
- if (styleConfig.fontWeight && typeof styleConfig.fontWeight === 'number') {
402
- customStyle.fontWeight = styleConfig.fontWeight;
402
+ if (styleConfig.fontWeight) {
403
+ customStyle.fontWeight = typeof styleConfig.fontWeight === 'number'
404
+ ? styleConfig.fontWeight
405
+ : styleConfig.fontWeight;
406
+ }
407
+ if (styleConfig.fontStyle && typeof styleConfig.fontStyle === 'string') {
408
+ customStyle.fontStyle = styleConfig.fontStyle;
409
+ }
410
+ if (styleConfig.textDecoration && typeof styleConfig.textDecoration === 'string') {
411
+ customStyle.textDecoration = styleConfig.textDecoration;
403
412
  }
404
413
  if (styleConfig.backgroundColor && typeof styleConfig.backgroundColor === 'string') {
405
414
  customStyle.backgroundColor = styleConfig.backgroundColor;
@@ -641,8 +650,8 @@ const StructurePage = (_a) => {
641
650
  react_1.default.createElement("video", { ref: heroVideoRef, src: data.heroSection.url, style: baseStyles.heroVideo, autoPlay: true, muted: true, loop: true, playsInline: true, controls: false }),
642
651
  isHeroVideoPaused && (react_1.default.createElement(FormatImage_1.default, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' })))) : ((_e = data.heroSection.imgUrls) === null || _e === void 0 ? void 0 : _e[0]) ? (react_1.default.createElement("img", { src: data.heroSection.imgUrls[0], alt: 'Hero', style: baseStyles.heroImage })) : null,
643
652
  react_1.default.createElement("div", { style: baseStyles.heroOverlay }, renderCTA('heroButton', (_g = (_f = data.heroSection.bindProducts) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.bindCta, (_h = data.heroSection.bindProducts) === null || _h === void 0 ? void 0 : _h[0], baseStyles.heroButton))))),
644
- data.carouselSection && data.carouselSection.length > 0 && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.carouselSection, 'carouselSection') },
645
- react_1.default.createElement("div", { style: baseStyles.carouselImageContainer },
653
+ data.carouselSection && data.carouselSection.length > 0 && (react_1.default.createElement("div", { style: Object.assign(Object.assign({}, mergeStyles(baseStyles.carouselSection, 'carouselSection')), (((_j = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.carouselContainerStyle) === null || _j === void 0 ? void 0 : _j.padding) && { padding: multiCTAConfig.carouselContainerStyle.padding })) },
654
+ react_1.default.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.carouselImageContainer), (((_k = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.carouselContainerStyle) === null || _k === void 0 ? void 0 : _k.aspectRatio) && { aspectRatio: multiCTAConfig.carouselContainerStyle.aspectRatio })) },
646
655
  react_1.default.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.carouselContainer), { transform: `translateX(-${carouselIndex * 100}%)` }) }, data.carouselSection.map((item, index) => {
647
656
  var _a;
648
657
  return (react_1.default.createElement("div", { key: item.itemId, style: baseStyles.carouselSlide }, item.url ? (react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: () => handleCarouselVideoClick(index) },
@@ -654,13 +663,14 @@ const StructurePage = (_a) => {
654
663
  react_1.default.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { left: '10px' }), onClick: handleCarouselPrev }, "\u2039"),
655
664
  react_1.default.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { right: '10px' }), onClick: handleCarouselNext }, "\u203A")),
656
665
  react_1.default.createElement("div", { style: mergeStyles(baseStyles.carouselInfoSection, 'carouselSection') },
657
- ((_j = data.carouselSection[carouselIndex]) === null || _j === void 0 ? void 0 : _j.text) && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.carouselText, 'carouselSection') }, (_k = data.carouselSection[carouselIndex]) === null || _k === void 0 ? void 0 : _k.text)),
658
- renderCTA('carouselButton', (_o = (_m = (_l = data.carouselSection[carouselIndex]) === null || _l === void 0 ? void 0 : _l.bindProducts) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.bindCta, (_q = (_p = data.carouselSection[carouselIndex]) === null || _p === void 0 ? void 0 : _p.bindProducts) === null || _q === void 0 ? void 0 : _q[0], baseStyles.carouselButton)))),
666
+ ((_l = data.carouselSection[carouselIndex]) === null || _l === void 0 ? void 0 : _l.text) && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.carouselText, 'carouselSection') }, (_m = data.carouselSection[carouselIndex]) === null || _m === void 0 ? void 0 : _m.text)),
667
+ renderCTA('carouselButton', (_q = (_p = (_o = data.carouselSection[carouselIndex]) === null || _o === void 0 ? void 0 : _o.bindProducts) === null || _p === void 0 ? void 0 : _p[0]) === null || _q === void 0 ? void 0 : _q.bindCta, (_s = (_r = data.carouselSection[carouselIndex]) === null || _r === void 0 ? void 0 : _r.bindProducts) === null || _s === void 0 ? void 0 : _s[0], baseStyles.carouselButton)))),
659
668
  data.highlightRevealSection && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.highlightSection, 'highlightSection') },
660
669
  react_1.default.createElement("div", { style: baseStyles.highlightImageContainer },
661
670
  react_1.default.createElement("img", { src: data.highlightRevealSection.landingImageUrl || data.highlightRevealSection.cover, alt: data.highlightRevealSection.title, style: baseStyles.highlightImage })),
662
671
  react_1.default.createElement("div", { style: mergeStyles(baseStyles.highlightInfoSection, 'highlightSection') },
663
- react_1.default.createElement("div", { style: mergeStyles(baseStyles.highlightTitle, 'highlightSection') }, data.highlightRevealSection.title),
672
+ data.highlightRevealSection.text && (react_1.default.createElement("div", { style: { marginBottom: '10px' } },
673
+ react_1.default.createElement("div", { style: mergeStyles(baseStyles.highlightTitle, 'highlightSection') }, data.highlightRevealSection.text))),
664
674
  renderCTA('highlightButton', data.highlightRevealSection.bindCta, data.highlightRevealSection, baseStyles.highlightButton)))),
665
675
  data.productGridSection && data.productGridSection.length > 0 && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.productGrid, 'productGrid') }, (() => {
666
676
  const gridItems = [null, null, null, null, null, null];
@@ -702,7 +712,10 @@ const StructurePage = (_a) => {
702
712
  });
703
713
  })())),
704
714
  data.footerSection && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.footerSection, 'footerSection') },
705
- react_1.default.createElement("div", { style: mergeStyles(baseStyles.footerInfoSection, 'footerSection') }, renderCTA('footerButton', data.footerSection.bindCta, data.footerSection, baseStyles.footerButton)),
715
+ react_1.default.createElement("div", { style: mergeStyles(baseStyles.footerInfoSection, 'footerSection') },
716
+ data.footerSection.text && (react_1.default.createElement("div", { style: { marginBottom: '15px' } },
717
+ react_1.default.createElement("div", { style: mergeStyles(baseStyles.footerText, 'footerSection') }, data.footerSection.text))),
718
+ renderCTA('footerButton', data.footerSection.bindCta, data.footerSection, baseStyles.footerButton)),
706
719
  react_1.default.createElement("div", { style: baseStyles.footerImageContainer },
707
720
  react_1.default.createElement("img", { src: data.footerSection.landingImageUrl || data.footerSection.cover, alt: data.footerSection.title, style: baseStyles.footerImage }))))));
708
721
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.20.29",
3
+ "version": "1.20.30",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",