@wlloyalty/wll-react-sdk 1.0.88 → 1.0.90

package/dist/types/components/molecules/CarouselNavButton/index.d.ts

@@ -0,0 +1,6 @@
+type CarouselNavButtonProps = {
+    direction: 'left' | 'right';
+    onPress: () => void;
+};
+export declare const CarouselNavButton: ({ direction, onPress, }: CarouselNavButtonProps) => JSX.Element;
+export default CarouselNavButton;

package/dist/types/components/molecules/CarouselNavButton/styles.d.ts

@@ -0,0 +1,22 @@
+export declare const useNavButtonStyles: () => {
+    navButton: {
+        position: "absolute";
+        top: "50%";
+        transform: {
+            translateY: number;
+        }[];
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        justifyContent: "center";
+        alignItems: "center";
+        zIndex: number;
+    };
+    navButtonLeft: {
+        left: number;
+    };
+    navButtonRight: {
+        right: number;
+    };
+};

package/dist/types/components/molecules/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Carousel } from './Carousel';
+export { default as CarouselNavButton } from './CarouselNavButton';
 export { default as Grid } from './Grid';
 export { default as ProgressIndicator } from './ProgressIndicator';
 export { default as SectionHeader } from './SectionHeader';

package/dist/web.js

@@ -7877,11 +7877,9 @@ var useMakeRequest = function (config) {
             return [4 /*yield*/, fetch(url, createRequestOptions())];
           case 3:
             response = _a.sent();
-            console.log('response', response);
             return [4 /*yield*/, response.json()];
           case 4:
             json = _a.sent();
-            console.log('json', json);
             if (json.status === 'fail') {
               return [2 /*return*/, {
                 status: 'fail',
@@ -20181,7 +20179,12 @@ var useContentTileStyles = function (hasArtwork) {
       paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
       flex: 1
     },
-    header: getHeaderStyle(hasArtwork)
+    header: getHeaderStyle(hasArtwork),
+    tileTitle: {
+      maxWidth: '90%',
+      flex: 1,
+      marginRight: 8
+    }
   });
 };
 
@@ -20236,14 +20239,23 @@ var ContentTileSummary = function () {
 
 var ContentTileTitle = function () {
   var tileContext = useTileContext();
+  var styles = useContentTileStyles();
   if (!isContextValid(tileContext)) return null;
-  var title = tileContext.configuration.title;
+  var _a = tileContext.configuration,
+    title = _a.title,
+    ctaLink = _a.ctaLink;
   if (!title) return null;
+  var handleTitleWidth = function () {
+    if (IS_MOBILE && ctaLink) {
+      return styles.titleWithLink;
+    }
+  };
   return /*#__PURE__*/React.createElement(Text, {
     variant: "title",
     accessibilityRole: "header",
     accessibilityLabel: title,
     numberOfLines: 1,
+    style: handleTitleWidth(),
     testID: "content-tile-title"
   }, title);
 };
@@ -20584,18 +20596,10 @@ var Carousel = function (_a) {
     }
   }, /*#__PURE__*/React.createElement(View$2, {
     style: styles.carouselContainer
-  }, showPrevButton && (/*#__PURE__*/React.createElement(Pressable$1, {
-    style: [styles.navButton, styles.navButtonLeft, {
-      backgroundColor: theme.background
-    }],
-    onPress: handlePrev,
-    accessibilityLabel: "Previous slide",
-    role: "button"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "ArrowLeft",
-    size: 20,
-    color: theme.primary
-  }))), /*#__PURE__*/React.createElement(ScrollView$2, {
+  }, showPrevButton && (/*#__PURE__*/React.createElement(CarouselNavButton, {
+    direction: "left",
+    onPress: handlePrev
+  })), /*#__PURE__*/React.createElement(ScrollView$2, {
     ref: scrollViewRef,
     horizontal: true,
     pagingEnabled: true,
@@ -20603,7 +20607,7 @@ var Carousel = function (_a) {
     onScroll: handleScroll,
     onMomentumScrollEnd: handleScrollEnd,
     scrollEventThrottle: 16,
-    style: [styles.carouselContent],
+    style: styles.carouselContent,
     contentContainerStyle: {
       width: containerWidth * sortedTiles.length
     },
@@ -20619,18 +20623,10 @@ var Carousel = function (_a) {
     }, /*#__PURE__*/React.createElement(BannerTile$1, {
       tile: tile
     }));
-  })), showNextButton && (/*#__PURE__*/React.createElement(Pressable$1, {
-    style: [styles.navButton, styles.navButtonRight, {
-      backgroundColor: theme.background
-    }],
-    onPress: handleNext,
-    accessibilityLabel: "Next slide",
-    role: "button"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "ArrowRight",
-    size: 20,
-    color: theme.primary
-  })))), displayControls && (/*#__PURE__*/React.createElement(View$2, {
+  })), showNextButton && (/*#__PURE__*/React.createElement(CarouselNavButton, {
+    direction: "right",
+    onPress: handleNext
+  }))), displayControls && (/*#__PURE__*/React.createElement(View$2, {
     style: dynamicStyles.indicators
   }, sortedTiles.map(function (_, index) {
     var width = animatedIndex.interpolate({
@@ -20650,6 +20646,53 @@ var Carousel = function (_a) {
   })))));
 };
 
+var useNavButtonStyles = function () {
+  var theme = useWllSdk().theme;
+  var buttonSize = IS_MOBILE ? BUTTON_SIZE * 0.75 : BUTTON_SIZE;
+  return StyleSheet$1.create({
+    navButton: {
+      position: 'absolute',
+      top: '50%',
+      transform: [{
+        translateY: -buttonSize / 2
+      }],
+      width: buttonSize,
+      height: buttonSize,
+      borderRadius: buttonSize / 2,
+      backgroundColor: theme.background,
+      justifyContent: 'center',
+      alignItems: 'center',
+      zIndex: 1
+    },
+    navButtonLeft: {
+      left: -buttonSize / 2
+    },
+    navButtonRight: {
+      right: -buttonSize / 2
+    }
+  });
+};
+
+var CarouselNavButton = function (_a) {
+  var direction = _a.direction,
+    onPress = _a.onPress;
+  var theme = useWllSdk().theme;
+  var isRight = direction === 'right';
+  var styles = useNavButtonStyles();
+  return /*#__PURE__*/React.createElement(Pressable$1, {
+    style: [styles.navButton, isRight ? styles.navButtonRight : styles.navButtonLeft, {
+      backgroundColor: theme.background
+    }],
+    onPress: onPress,
+    accessibilityLabel: "".concat(isRight ? 'Next' : 'Previous', " slide"),
+    role: "button"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: isRight ? 'ArrowRight' : 'ArrowLeft',
+    size: 20,
+    color: theme.primary
+  }));
+};
+
 var Grid = function (_a) {
   var section = _a.section;
   if (section.type !== exports.SectionType.Grid) {
@@ -21704,6 +21747,11 @@ var useRewardTileStyles = function () {
     header: {
       width: '100%',
       marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
+    },
+    tileTitle: {
+      maxWidth: '90%',
+      flex: 1,
+      marginRight: 8
     }
   });
 };
@@ -21813,9 +21861,15 @@ var RewardTileSummary = function () {
  */
 var RewardTileTitle = function () {
   var tileContext = useTileContext();
+  var styles = useRewardTileStyles();
   if (!isContextValid(tileContext)) return null;
   var name = tileContext.configuration.name;
   if (!name) return null;
+  var handleTitleWidth = function () {
+    if (IS_MOBILE) {
+      return styles.titleWithLink;
+    }
+  };
   return /*#__PURE__*/React.createElement(Text, {
     variant: "title",
     ellipsizeMode: "tail",
@@ -21823,10 +21877,7 @@ var RewardTileTitle = function () {
     accessibilityRole: "header",
     accessibilityLabel: "Reward title: ".concat(name),
     testID: "reward-tile-title",
-    style: {
-      flex: 1,
-      marginRight: 8
-    }
+    style: handleTitleWidth()
   }, name);
 };
 
@@ -22122,6 +22173,7 @@ exports.BaseBanner = BaseBanner;
 exports.BaseTile = BaseTile;
 exports.Button = Button;
 exports.Carousel = Carousel;
+exports.CarouselNavButton = CarouselNavButton;
 exports.Column = Column;
 exports.ContentTile = ContentTile$1;
 exports.ContentTileConfig = ContentTileConfig;