@wlloyalty/wll-react-sdk 1.2.0 → 1.3.0

package/dist/types/components/organisms/ContentTile/ContentTile.stories.d.ts

@@ -5,6 +5,9 @@ export default _default;
 export declare const FullSizeWelcomeTier: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
     tile: import("../../../types/tile").Tile;
 }, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const ImageWithLongTitleAndBody: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
 export declare const FullSizeRewardHighlight: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
     tile: import("../../../types/tile").Tile;
 }, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
@@ -26,3 +29,27 @@ export declare const HalfSizeReferralBonus: import("@storybook/csf").AnnotatedSt
 export declare const FullSizePartnerRewards: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
     tile: import("../../../types/tile").Tile;
 }, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const TitleOnly: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const BodyOnly: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const TitleAndBody: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const HalfSizeTitleOnly: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const HalfSizeBodyOnly: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const HalfSizeTitleAndBody: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const ResponsiveTest: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const HalfSizeArtworkOnly: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;

package/dist/types/components/organisms/Group/Group.stories.d.ts

@@ -8,3 +8,4 @@ export declare const EmptySections: Story;
 export declare const FullGroup: Story;
 export declare const GamificationFullGroup: Story;
 export declare const AirMilesTravelFullGroup: Story;
+export declare const ContentTileGroup: Story;

package/dist/types/constants/responsive.d.ts

@@ -3,5 +3,5 @@ export declare const DIMENSION_MODES: {
     TABLET: "tablet";
     MOBILE: "mobile";
 };
-export declare const TABLET_SCREEN_WIDTH = 728;
-export declare const SMALL_SCREEN_WIDTH = 530;
+export declare const TABLET_SCREEN_WIDTH = 768;
+export declare const SMALL_SCREEN_WIDTH = 480;

package/dist/web.js

@@ -8459,8 +8459,8 @@ var DIMENSION_MODES = {
   TABLET: 'tablet',
   MOBILE: 'mobile'
 };
-var TABLET_SCREEN_WIDTH = 728;
-var SMALL_SCREEN_WIDTH = 530;
+var TABLET_SCREEN_WIDTH = 768;
+var SMALL_SCREEN_WIDTH = 480;
 
 var isWeb = Platform$1.OS === 'web';
 function getDimensionMode(window) {
@@ -18992,7 +18992,7 @@ var Text = function (_a) {
         });
       case 'title':
         return __assign(__assign({}, baseStyle), {
-          fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.md, isDesktop, isTablet),
+          fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
           fontWeight: 'bold'
         });
       case 'body':
@@ -19010,7 +19010,7 @@ var Text = function (_a) {
       case 'label':
       default:
         return __assign(__assign({}, baseStyle), {
-          fontSize: useResponsiveValue(theme.sizes.sm, theme.sizes.xs, isDesktop, isTablet)
+          fontSize: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
         });
     }
   };
@@ -20083,6 +20083,7 @@ var BadgeTileDateEarned = function () {
  */
 var BadgeTileDescription = function () {
   var tileContext = useTileContext();
+  var width = useWindowDimensions().width;
   if (!isContextValid(tileContext)) return null;
   var _a = tileContext.configuration,
     count = _a.count,
@@ -20092,13 +20093,23 @@ var BadgeTileDescription = function () {
   // For Latest type, hide description when count = 0
   // For Specific type, always show description
   if (count === 0 && type === exports.BadgeTileType.Latest) return null;
+  var numberOfLines = React.useMemo(function () {
+    if (width <= 480) return 2;
+    if (width <= 768) return 3;
+    if (width <= 1024) return 1;
+    return 2;
+  }, [width]);
   return /*#__PURE__*/React.createElement(View$2, {
     accessible: true,
     accessibilityLabel: "Badge description: ".concat(description),
-    testID: "badge-tile-description"
+    testID: "badge-tile-description",
+    style: {
+      width: '100%',
+      overflow: 'hidden'
+    }
   }, /*#__PURE__*/React.createElement(Text, {
     variant: "body",
-    numberOfLines: 2,
+    numberOfLines: numberOfLines,
     ellipsizeMode: "tail",
     accessibilityElementsHidden: true,
     importantForAccessibility: "no-hide-descendants"
@@ -20197,7 +20208,7 @@ var BadgeTileTitle = function () {
   }, /*#__PURE__*/React.createElement(Text, {
     variant: "title",
     style: styles.titleText,
-    numberOfLines: count === 0 ? 2 : 1,
+    numberOfLines: 1,
     ellipsizeMode: "tail",
     accessibilityElementsHidden: true,
     importantForAccessibility: "no-hide-descendants"
@@ -20448,16 +20459,17 @@ var useContentTileStyles = function (hasArtwork) {
   return StyleSheet$1.create({
     imageContainer: {
       width: '100%',
-      marginBottom: 0
+      marginBottom: 0,
+      overflow: 'hidden'
     },
     image: {
       position: 'absolute',
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-      width: '100%',
-      height: '100%',
+      top: -1,
+      left: -1,
+      bottom: -1,
+      right: -1,
+      width: '102%',
+      height: '102%',
       resizeMode: 'cover'
     },
     content: {
@@ -20502,21 +20514,30 @@ var ContentTileMedia = function (_a) {
 
 var ContentTileSummary = function () {
   var tileContext = useTileContext();
+  var sizeInfo = useTileSize(tileContext);
   if (!isContextValid(tileContext)) return null;
-  var body = tileContext.configuration.body;
+  var _a = tileContext.configuration,
+    body = _a.body,
+    title = _a.title,
+    artworkUrl = _a.artworkUrl;
   if (!body) return null;
-  var sizeInfo = useTileSize(tileContext);
   if (!sizeInfo) return null;
-  var isFullSize = sizeInfo.isFullSize,
-    isHalfSize = sizeInfo.isHalfSize;
-  var getNumberOfLines = function () {
-    return isFullSize ? 3 : isHalfSize ? 4 : 3;
-  };
+  var isHalfSize = sizeInfo.isHalfSize;
+  var numberOfLines = React.useMemo(function () {
+    if (!body) return undefined;
+    if (isHalfSize) {
+      if (!title && body) return 4;
+      if (title && body) return 2;
+    }
+    if (artworkUrl) return 3;
+    if (!title) return 8;
+    return 6;
+  }, [title, body, artworkUrl, isHalfSize]);
   return /*#__PURE__*/React.createElement(Text, {
     variant: "body",
     role: "article",
     accessibilityLabel: body,
-    numberOfLines: getNumberOfLines(),
+    numberOfLines: numberOfLines,
     testID: "content-tile-summary"
   }, body);
 };
@@ -20524,10 +20545,25 @@ var ContentTileSummary = function () {
 var ContentTileTitle = function () {
   var tileContext = useTileContext();
   var styles = useContentTileStyles();
+  var sizeInfo = useTileSize(tileContext);
   if (!isContextValid(tileContext)) return null;
   var _a = tileContext.configuration,
     title = _a.title,
-    ctaLink = _a.ctaLink;
+    ctaLink = _a.ctaLink,
+    body = _a.body,
+    artworkUrl = _a.artworkUrl;
+  if (!sizeInfo) return null;
+  var isHalfSize = sizeInfo.isHalfSize;
+  var numberOfLines = React.useMemo(function () {
+    if (!title) return undefined;
+    if (isHalfSize) {
+      if (title && !body) return 3;
+      if (title && body) return 1;
+    }
+    if (artworkUrl) return 1;
+    if (!body) return 7;
+    return 2;
+  }, [title, body, artworkUrl, isHalfSize]);
   if (!title) return null;
   var handleTitleWidth = function () {
     if (IS_MOBILE && ctaLink) {
@@ -20538,7 +20574,7 @@ var ContentTileTitle = function () {
     variant: "title",
     role: "heading",
     accessibilityLabel: title,
-    numberOfLines: 1,
+    numberOfLines: numberOfLines,
     style: handleTitleWidth(),
     testID: "content-tile-title"
   }, title);
@@ -20730,14 +20766,14 @@ var useSectionHeaderStyles = function () {
       marginBottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet)
     },
     sectionTitle: {
-      fontSize: useResponsiveValue(theme.sizes.xxxl, theme.sizes.xl, isDesktop, isTablet),
+      fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.xl, isDesktop, isTablet),
       marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
       fontWeight: '700',
       color: theme.text,
       fontFamily: theme.fontFamily
     },
     sectionDescription: {
-      fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.md, isDesktop, isTablet),
+      fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
       color: theme.alphaDerivedText[80],
       fontFamily: theme.fontFamily
     }
@@ -22244,13 +22280,21 @@ var RewardTilePoints = function () {
 var RewardTileSummary = function () {
   var tileContext = useTileContext();
   if (!isContextValid(tileContext)) return null;
-  var summary = tileContext.configuration.summary;
+  var _a = tileContext.configuration,
+    summary = _a.summary,
+    _b = _a.showPrice,
+    showPrice = _b === void 0 ? true : _b,
+    price = _a.price;
+  var shouldShowPrice = showPrice && price !== undefined && price !== null && price !== 0;
+  var numberOfLines = shouldShowPrice ? 1 : 3;
   if (!summary) return null;
   return /*#__PURE__*/React.createElement(Text, {
     variant: "body",
     role: "article",
     accessibilityLabel: summary,
-    testID: "reward-tile-summary"
+    testID: "reward-tile-summary",
+    numberOfLines: numberOfLines,
+    ellipsizeMode: "tail"
   }, summary);
 };