@wlloyalty/wll-react-sdk 1.4.5 → 1.4.6

package/dist/types/components/atoms/Chip/Chip.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/atoms/Chip/Chip.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/react';
+import Chip, { ChipProps } from './index';
+declare const meta: Meta<typeof Chip>;
+export default meta;
+export declare const Primary: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ChipProps>;
+export declare const Green: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ChipProps>;
+export declare const Grey: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ChipProps>;

package/dist/types/components/atoms/Chip/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { AccessibilityRole, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { StatusVariant } from '../../../types/tile';
+type ChipLabel = React.ReactNode;
+type AriaLive = 'polite' | 'assertive' | 'off';
+export type ChipProps = {
+    label: ChipLabel;
+    variant?: StatusVariant;
+    role?: AccessibilityRole | 'status';
+    ariaLive?: AriaLive;
+    accessibilityLabel?: string;
+    testID?: string;
+    style?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+};
+declare const Chip: ({ label, variant, role, ariaLive, accessibilityLabel, testID, style, labelStyle, }: ChipProps) => React.ReactElement;
+export default Chip;

package/dist/types/components/atoms/Chip/styles.d.ts

@@ -0,0 +1,20 @@
+export declare const useChipStyles: () => {
+    container: {
+        alignSelf: "flex-start";
+        alignItems: "center";
+        justifyContent: "center";
+        flexDirection: "row";
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderRadius: 9999;
+        overflow: "hidden";
+        flexShrink: number;
+    };
+    label: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: "400";
+        flexShrink: number;
+    };
+};

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

@@ -10,3 +10,4 @@ export { default as Indicator } from './Indicator';
 export { default as Skeleton } from './Skeleton';
 export { default as TileContainer } from './TileContainer';
 export { Column, FullFlex, Layout, Row, Spacer } from './Primatives';
+export { default as Chip } from './Chip';

package/dist/types/types/tile.d.ts

@@ -26,6 +26,11 @@ export declare enum TileHeight {
     Full = "FULL"
 }
 export type ProgessType = 'NAME' | 'POINTS';
+export declare enum StatusVariant {
+    PRIMARY = "primary",
+    GREEN = "green",
+    GREY = "grey"
+}
 export declare class BannerTileConfig {
     artworkUrl?: string | null;
     title?: string | null;

package/dist/web.js

@@ -7706,7 +7706,7 @@ var styles$g = StyleSheet$1.create({
     cursor: 'pointer'
   }
 });
-var Text$3 = Text$2;
+var RNText = Text$2;
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -8443,16 +8443,6 @@ var desaturateColor = function (color) {
   if (!baseColor) return COLOR_CONSTANTS.DEFAULT_COLOR;
   return baseColor.grayscale().lighten(COLOR_CONSTANTS.DESATURATION_LIGHTEN_AMOUNT).toString();
 };
-/**
- * Gets the appropriate state color based on type and count
- * @param baseColor - Base color to process
- * @param type - Type of state
- * @param count - Count affecting the state
- * @returns Processed color string
- */
-var getStateColor = function (baseColor, type, count) {
-  return shouldDesaturate(type, count) ? desaturateColor(baseColor) : baseColor;
-};
 
 var DIMENSION_MODES = {
   DESKTOP: 'desktop',
@@ -8806,7 +8796,7 @@ var Button = function (_a) {
       disabled: disabled
     },
     testID: testID
-  }, /*#__PURE__*/React__namespace.createElement(Text$3, {
+  }, /*#__PURE__*/React__namespace.createElement(RNText, {
     style: [styles.text, textStyle]
   }, title));
 };
@@ -16417,7 +16407,7 @@ var SectionList = createAnimatedComponent(SectionListWithEventThrottle);
  * @format
  */
 
-var Text$1 = createAnimatedComponent(Text$3);
+var Text$1 = createAnimatedComponent(RNText);
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -19064,7 +19054,7 @@ var Text = function (_a) {
       accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
   }
   var combinedStyles = [styles.base, variantStyle, styles.webOverrides, style];
-  return /*#__PURE__*/React__namespace.createElement(Text$3, __assign({
+  return /*#__PURE__*/React__namespace.createElement(RNText, __assign({
     style: combinedStyles
   }, props, {
     accessible: true,
@@ -19106,6 +19096,12 @@ exports.TileHeight = void 0;
   TileHeight["Half"] = "HALF";
   TileHeight["Full"] = "FULL";
 })(exports.TileHeight || (exports.TileHeight = {}));
+exports.StatusVariant = void 0;
+(function (StatusVariant) {
+  StatusVariant["PRIMARY"] = "primary";
+  StatusVariant["GREEN"] = "green";
+  StatusVariant["GREY"] = "grey";
+})(exports.StatusVariant || (exports.StatusVariant = {}));
 var BannerTileConfig = /** @class */function () {
   function BannerTileConfig() {}
   return BannerTileConfig;
@@ -19671,7 +19667,7 @@ var Indicator = function () {
   };
   return /*#__PURE__*/React.createElement(View$2, {
     style: styles$5.indicator
-  }, /*#__PURE__*/React.createElement(Text$3, {
+  }, /*#__PURE__*/React.createElement(RNText, {
     style: styles$5.indicatorText
   }, getCurrentLayout()));
 };
@@ -19916,7 +19912,7 @@ function withTileFetching(WrappedComponent) {
     if (error || !tileData) {
       return /*#__PURE__*/React.createElement(View$2, {
         style: commonStyles.emptyContainer
-      }, /*#__PURE__*/React.createElement(Text$3, null, "No tile data available"));
+      }, /*#__PURE__*/React.createElement(RNText, null, "No tile data available"));
     }
     return /*#__PURE__*/React.createElement(WrappedComponent, __assign({}, props, {
       tile: tileData
@@ -19981,69 +19977,13 @@ var handleLastEarnedDate = function (date, userLocale) {
   }
 };
 
-/**
- * Custom hook that returns the styles for the BadgeTile component.
- * Applies responsive styling based on the current device.
- *
- * @returns StyleSheet styles for the BadgeTile component
- */
-var useBadgeTileStyles = function () {
-  var _a = useResponsive$1(),
-    isDesktop = _a.isDesktop,
-    isTablet = _a.isTablet;
-  var theme = useWllSdk().theme;
-  return StyleSheet$1.create({
-    container: {
-      flex: 1
-    },
-    indicatorContainer: {
-      position: 'absolute',
-      bottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet),
-      right: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet),
-      backgroundColor: 'rgba(0,0,0,0.6)',
-      borderRadius: 40,
-      width: 40,
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: 40
-    },
-    countText: {
-      color: '#FFF',
-      fontSize: 14,
-      fontWeight: 'bold'
-    },
-    header: {
-      flexBasis: '50%',
-      alignItems: 'center',
-      justifyContent: 'center',
-      position: 'relative',
-      marginBottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet)
-    },
-    image: {
-      width: '100%',
-      height: '100%'
-    },
-    titleText: {
-      marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
-    },
-    dateEarnedContainer: {
-      alignItems: 'flex-start',
-      paddingHorizontal: 8,
-      paddingVertical: 4,
-      borderRadius: 20
-    }
-  });
-};
-
 /**
  * Renders the date earned for a Badge Tile.
  *
  * @returns React.ReactElement or null if badge is not earned or badgeNotEarnedMessage exists
  */
 var BadgeTileDateEarned = function () {
-  var styles = useBadgeTileStyles();
   var tileContext = useTileContext();
-  var theme = useWllSdk().theme;
   if (!isContextValid(tileContext)) return null;
   var _a = tileContext.configuration,
     count = _a.count,
@@ -20060,28 +20000,15 @@ var BadgeTileDateEarned = function () {
   if (type === exports.BadgeTileType.Specific && count === 0 && !badgeNotEarnedMessage) {
     return null;
   }
-  var backgroundColor = getStateColor(theme.alphaDerivedPrimary[20], type, count);
-  var containerStyle = [styles.dateEarnedContainer, {
-    backgroundColor: backgroundColor
-  }];
-  var textColor = getReadableTextColor(backgroundColor);
-  var displayText = count === 0 ? badgeNotEarnedMessage : "".concat(awardedDatePrefix, " ").concat(handleLastEarnedDate(lastEarnedAt, locale));
-  var accessibilityLabel = count === 0 ? 'Badge not yet earned' : "Badge earned on ".concat(handleLastEarnedDate(lastEarnedAt, locale));
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: containerStyle,
-    accessible: true,
+  var formattedDate = handleLastEarnedDate(lastEarnedAt, locale);
+  var displayText = count === 0 ? badgeNotEarnedMessage : "".concat(awardedDatePrefix, " ").concat(formattedDate);
+  var accessibilityLabel = count === 0 ? 'Badge not yet earned' : "Badge earned on ".concat(formattedDate);
+  return /*#__PURE__*/React.createElement(Chip, {
+    label: displayText,
+    variant: count === 0 ? exports.StatusVariant.GREY : exports.StatusVariant.PRIMARY,
     accessibilityLabel: accessibilityLabel,
     testID: "badge-tile-date-earned"
-  }, /*#__PURE__*/React.createElement(Text, {
-    variant: "label",
-    style: [styles.dateEarnedText, {
-      color: textColor
-    }],
-    numberOfLines: 1,
-    ellipsizeMode: "tail",
-    accessibilityElementsHidden: true,
-    importantForAccessibility: "no-hide-descendants"
-  }, displayText));
+  });
 };
 
 /**
@@ -20124,6 +20051,60 @@ var BadgeTileDescription = function () {
   }, description));
 };
 
+/**
+ * Custom hook that returns the styles for the BadgeTile component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the BadgeTile component
+ */
+var useBadgeTileStyles = function () {
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
+  var theme = useWllSdk().theme;
+  return StyleSheet$1.create({
+    container: {
+      flex: 1
+    },
+    indicatorContainer: {
+      position: 'absolute',
+      bottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet),
+      right: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet),
+      backgroundColor: 'rgba(0,0,0,0.6)',
+      borderRadius: 40,
+      width: 40,
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: 40
+    },
+    countText: {
+      color: '#FFF',
+      fontSize: 14,
+      fontWeight: 'bold'
+    },
+    header: {
+      flexBasis: '50%',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'relative',
+      marginBottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet)
+    },
+    image: {
+      width: '100%',
+      height: '100%'
+    },
+    titleText: {
+      marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
+    },
+    dateEarnedContainer: {
+      alignItems: 'flex-start',
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      borderRadius: 20
+    }
+  });
+};
+
 /**
  * Renders the media for a Badge Tile.
  *
@@ -21455,7 +21436,7 @@ var EmptyState = function (_a) {
     style: commonStyles.emptyContainer,
     role: "article",
     accessibilityLabel: "Empty state: ".concat(message)
-  }, /*#__PURE__*/React.createElement(Text$3, null, message));
+  }, /*#__PURE__*/React.createElement(RNText, null, message));
 };
 /**
  * The Section component renders a section based on its type (e.g., Banner, Grid).
@@ -22918,6 +22899,130 @@ var styles = StyleSheet$1.create({
   }
 });
 
+var useChipStyles = function () {
+  var theme = useWllSdk().theme;
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
+  var paddingHorizontal = useResponsiveValue(12, 8, isDesktop, isTablet);
+  var paddingVertical = useResponsiveValue(6, 3, isDesktop, isTablet);
+  var fontSize = useResponsiveValue(theme.sizes.sm, theme.sizes.xs, isDesktop, isTablet);
+  var lineHeight = Math.max(fontSize, Math.round(fontSize * 1.3));
+  return StyleSheet$1.create({
+    container: {
+      alignSelf: 'flex-start',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'row',
+      paddingHorizontal: paddingHorizontal,
+      paddingVertical: paddingVertical,
+      borderRadius: theme.sizes.borderRadiusRounded,
+      overflow: 'hidden',
+      flexShrink: 1
+    },
+    label: {
+      fontFamily: theme.fontFamily,
+      fontSize: fontSize,
+      lineHeight: lineHeight,
+      fontWeight: '400',
+      flexShrink: 1
+    }
+  });
+};
+
+var mapLiveRegion = function (ariaLive) {
+  if (ariaLive === void 0) {
+    ariaLive = 'polite';
+  }
+  switch (ariaLive) {
+    case 'assertive':
+      return {
+        native: 'assertive',
+        web: 'assertive'
+      };
+    case 'off':
+      return {
+        native: 'none',
+        web: 'off'
+      };
+    case 'polite':
+    default:
+      return {
+        native: 'polite',
+        web: 'polite'
+      };
+  }
+};
+var Chip = function (_a) {
+  var label = _a.label,
+    _b = _a.variant,
+    variant = _b === void 0 ? exports.StatusVariant.PRIMARY : _b,
+    _c = _a.role,
+    role = _c === void 0 ? 'status' : _c,
+    _d = _a.ariaLive,
+    ariaLive = _d === void 0 ? 'polite' : _d,
+    accessibilityLabel = _a.accessibilityLabel,
+    testID = _a.testID,
+    style = _a.style,
+    labelStyle = _a.labelStyle;
+  var styles = useChipStyles();
+  var theme = useWllSdk().theme;
+  var variantStyles = React.useMemo(function () {
+    var _a, _b;
+    switch (variant) {
+      case exports.StatusVariant.GREEN:
+        return {
+          container: {
+            backgroundColor: '#d1f0e1'
+          },
+          label: {
+            color: '#128e55'
+          }
+        };
+      case exports.StatusVariant.GREY:
+        return {
+          container: {
+            backgroundColor: '#dadde0'
+          },
+          label: {
+            color: '#666666'
+          }
+        };
+      case exports.StatusVariant.PRIMARY:
+      default:
+        return {
+          container: {
+            backgroundColor: (_b = (_a = theme.alphaDerivedPrimary) === null || _a === void 0 ? void 0 : _a[10]) !== null && _b !== void 0 ? _b : theme.primary
+          },
+          label: {
+            color: theme.primary
+          }
+        };
+    }
+  }, [theme, variant]);
+  var computedAccessibilityLabel = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : typeof label === 'string' ? label : undefined;
+  var _e = mapLiveRegion(ariaLive),
+    accessibilityLiveRegion = _e.native,
+    ariaLiveValue = _e.web;
+  var isSimpleLabel = typeof label === 'string';
+  var isIndividuallyAccessible = computedAccessibilityLabel !== undefined;
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: [styles.container, variantStyles.container, style],
+    accessible: isIndividuallyAccessible,
+    accessibilityRole: role,
+    accessibilityLiveRegion: accessibilityLiveRegion,
+    accessibilityLabel: computedAccessibilityLabel,
+    "aria-live": ariaLiveValue,
+    testID: testID
+  }, isSimpleLabel ? (/*#__PURE__*/React.createElement(RNText, {
+    style: [styles.label, variantStyles.label, labelStyle],
+    numberOfLines: 1,
+    ellipsizeMode: "tail",
+    accessible: false,
+    importantForAccessibility: "no"
+  }, label)) : label);
+};
+
 var Reward = /** @class */function () {
   function Reward() {}
   return Reward;
@@ -22932,6 +23037,7 @@ exports.BaseTile = BaseTile;
 exports.Button = Button;
 exports.Carousel = Carousel;
 exports.CarouselNavButton = CarouselNavButton;
+exports.Chip = Chip;
 exports.Column = Column;
 exports.ContentTile = ContentTile$1;
 exports.ContentTileConfig = ContentTileConfig;