@wlloyalty/wll-react-sdk 1.6.19 → 1.7.0

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

@@ -13,3 +13,9 @@ export declare const WithoutDescription: import("@storybook/csf").AnnotatedStory
 export declare const Locked: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
     tile: import("../../..").Tile;
 }, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const NoMedia: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../..").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const AllVersions: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../..").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;

package/dist/types/components/organisms/VenueTile/index.d.ts

@@ -7,9 +7,7 @@ type VenueTileProps = {
  * The VenueTile component with subcomponents attached.
  */
 export declare const VenueTile: (({ tile }: VenueTileProps) => React.ReactElement | null) & {
-    Media: ({ isArtworkOnly, }: {
-        isArtworkOnly?: boolean;
-    }) => React.ReactElement | null;
+    Media: () => React.ReactElement | null;
     Title: () => React.ReactElement | null;
     Description: () => React.ReactElement | null;
     Chevron: () => React.ReactElement;

package/dist/types/components/organisms/VenueTile/venue-tile-media.d.ts

@@ -1,13 +1,7 @@
 import React from 'react';
-type VenueTileMediaProps = {
-    isArtworkOnly?: boolean;
-};
 /**
  * Renders the media for a Venue Tile.
  *
- * @param props {VenueTileMediaProps} - Component props
- * @param props.isArtworkOnly {boolean} - Whether the media should be rendered as an artwork only component
  * @returns React.ReactElement or null if no artwork URL is present or artwork should not be shown
  */
-export declare const VenueTileMedia: ({ isArtworkOnly, }: VenueTileMediaProps) => React.ReactElement | null;
-export {};
+export declare const VenueTileMedia: () => React.ReactElement | null;

package/dist/web.js

@@ -20705,10 +20705,9 @@ var ContentTileRoot = function (_a) {
     isArtworkOnly: isArtworkOnly$1(configuration)
   }), !isArtworkOnly$1(configuration) && (/*#__PURE__*/React.createElement(Layout, {
     justify: hasArtwork ? 'start' : 'center',
-    style: {
-      paddingBottom: 0,
-      marginBottom: 0
-    }
+    style: __assign({}, !hasArtwork && tile.tileHeight === exports.TileHeight.Full && {
+      aspectRatio: 1
+    })
   }, /*#__PURE__*/React.createElement(Row, {
     justify: "between",
     align: "center",
@@ -23047,6 +23046,8 @@ var useVenueTileStyles = function () {
   return StyleSheet$1.create({
     imageContainer: {
       width: '100%',
+      minHeight: 130,
+      overflow: 'hidden',
       marginBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
     },
     image: {
@@ -23077,6 +23078,7 @@ var useVenueTileStyles = function () {
     },
     header: {
       width: '100%',
+      paddingTop: theme.sizes.xxxs,
       marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
     },
     tileTitle: __assign({
@@ -23093,6 +23095,12 @@ var useVenueTileStyles = function () {
       justifyContent: 'center',
       alignItems: 'center',
       zIndex: 10
+    },
+    pinOverlay: {
+      position: 'absolute',
+      top: 8,
+      right: 8,
+      zIndex: 20
     }
   });
 };
@@ -23100,45 +23108,54 @@ var useVenueTileStyles = function () {
 /**
  * Renders the media for a Venue Tile.
  *
- * @param props {VenueTileMediaProps} - Component props
- * @param props.isArtworkOnly {boolean} - Whether the media should be rendered as an artwork only component
  * @returns React.ReactElement or null if no artwork URL is present or artwork should not be shown
  */
-var VenueTileMedia = function (_a) {
-  var _b = _a.isArtworkOnly,
-    isArtworkOnly = _b === void 0 ? false : _b;
+var VenueTileMedia = function () {
   var styles = useVenueTileStyles();
   var tileContext = useTileContext();
   if (!isContextValid(tileContext)) return null;
-  var _c = tileContext.configuration,
-    artworkUrl = _c.artworkUrl,
-    _d = _c.name,
-    name = _d === void 0 ? 'Venue' : _d,
-    _e = _c.isLocked,
-    isLocked = _e === void 0 ? false : _e;
-  if (!artworkUrl) return null;
-  var containerStyle = {
-    flexBasis: isArtworkOnly ? '100%' : '50%'
-  };
+  var _a = tileContext.configuration,
+    artworkUrl = _a.artworkUrl,
+    _b = _a.name,
+    name = _b === void 0 ? 'Venue' : _b,
+    _c = _a.isLocked,
+    isLocked = _c === void 0 ? false : _c;
+  var containerStyle = __assign({
+    flexBasis: '50%'
+  }, tileContext.tileHeight === exports.TileHeight.Half && {
+    minHeight: 0
+  });
+  var showCenteredPin = !artworkUrl && !isLocked;
   return /*#__PURE__*/React.createElement(View$2, {
     style: [styles.imageContainer, containerStyle],
     testID: "venue-tile-media",
     role: "img",
     accessibilityLabel: "Venue image for ".concat(name)
-  }, /*#__PURE__*/React.createElement(ProgressiveImage, {
+  }, artworkUrl && (/*#__PURE__*/React.createElement(ProgressiveImage, {
     source: {
       uri: artworkUrl
     },
     style: styles.image,
     alt: "Venue image for ".concat(name)
-  }), isLocked && (/*#__PURE__*/React.createElement(View$2, {
+  })), /*#__PURE__*/React.createElement(View$2, {
     style: styles.lockOverlay,
     testID: "lock-overlay"
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, isLocked && /*#__PURE__*/React.createElement(Icon, {
     name: "LockKeyhole",
     size: 48,
     color: "white"
-  }))));
+  }), showCenteredPin ? (/*#__PURE__*/React.createElement(Icon, {
+    name: "MapPin",
+    size: 48,
+    color: "white"
+  })) : (/*#__PURE__*/React.createElement(View$2, {
+    style: styles.pinOverlay,
+    testID: "pin-overlay"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "MapPin",
+    size: 24,
+    color: "white"
+  })))));
 };
 
 /**
@@ -23189,11 +23206,10 @@ var VenueTileTitle = function () {
 };
 
 /**
- * The VenueTile component renders a tile with media, title, summary, points, and a chevron.
+ * The VenueTile component renders a tile with media, title, description, and a chevron.
  *
  * @param {VenueTileProps} props - Component props
  * @param {Tile} props.tile - The tile data to render
- * @returns React.ReactElement or null if tile is inactive or not a full-height tile
  */
 var VenueTileRoot = function (_a) {
   var tile = _a.tile;