@hero-design/rn-work-uikit 1.6.1 → 1.6.2-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @hero-design/rn-work-uikit
 
+## 1.6.2-alpha.0
+
+### Patch Changes
+
+- Updated dependencies [[`e92d1dab57316441e7b5054debe823328e1a1083`](https://github.com/Thinkei/hero-design/commit/e92d1dab57316441e7b5054debe823328e1a1083)]:
+  - @hero-design/rn@8.104.1-alpha.0
+
 ## 1.6.1
 
 ### Patch Changes

package/lib/index.js

@@ -6507,7 +6507,8 @@ var getIconTheme = function getIconTheme(theme) {
     warning: theme.colors.warning,
     disabledText: theme.colors.disabledOnDefaultGlobalSurface,
     invertedText: theme.colors.onDarkGlobalSurface,
-    muted: theme.colors.mutedOnDefaultGlobalSurface
+    muted: theme.colors.mutedOnDefaultGlobalSurface,
+    inactive: theme.colors.inactiveOnDefaultGlobalSurface
   };
   var sizes = {
     xxxsmall: theme.fontSizes.small,
@@ -7637,6 +7638,85 @@ var getAppCueTheme = function getAppCueTheme(theme) {
   };
 };
 
+var getFilterTriggerTheme = function getFilterTriggerTheme(theme) {
+  var borderWidths = {
+    wrapper: {
+      filled: theme.borderWidths.medium,
+      outlined: theme.borderWidths.medium,
+      ghost: 0
+    }
+  };
+  var colors = {
+    wrapper: {
+      activeBackground: theme.colors.highlightedSurface,
+      inactiveBackground: theme.colors.neutralGlobalSurface,
+      background: {
+        active: {
+          filled: theme.colors.highlightedSurface,
+          outlined: 'transparent',
+          ghost: 'transparent',
+          filledLabeless: theme.colors.neutralGlobalSurface
+        },
+        inactive: {
+          filled: theme.colors.neutralGlobalSurface,
+          outlined: 'transparent',
+          ghost: 'transparent'
+        }
+      },
+      border: {
+        active: {
+          filled: theme.colors.highlightedSurface,
+          outlined: theme.colors.primaryOutline,
+          ghost: 'transparent',
+          filledLabeless: theme.colors.neutralGlobalSurface
+        },
+        inactive: {
+          filled: theme.colors.neutralGlobalSurface,
+          outlined: theme.colors.secondaryOutline,
+          ghost: 'transparent'
+        }
+      }
+    }
+  };
+  var space = {
+    wrapper: {
+      "default": {
+        paddingHorizontal: theme.space.smallMedium,
+        paddingVertical: theme.space.xsmall
+      },
+      labeless: {
+        paddingHorizontal: theme.space.small,
+        paddingVertical: theme.space.xsmall
+      },
+      itemGap: theme.space.xsmall
+    },
+    badge: {
+      labelessRight: theme.space.xxsmall,
+      labelessBottom: theme.space.xxsmall
+    }
+  };
+  var radii = {
+    wrapper: {
+      "default": theme.radii.xxxlarge,
+      labeless: theme.radii.xlarge
+    }
+  };
+  var sizes = {
+    wrapperHeight: scale(36)
+  };
+  var lineHeights = {
+    text: theme.lineHeights.small
+  };
+  return {
+    colors: colors,
+    space: space,
+    radii: radii,
+    borderWidths: borderWidths,
+    sizes: sizes,
+    lineHeights: lineHeights
+  };
+};
+
 var getTheme$1 = function getTheme() {
   var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
   var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : swagSystemPalette$2;
@@ -7669,6 +7749,7 @@ var getTheme$1 = function getTheme() {
       empty: getEmptyTheme(globalTheme),
       error: getErrorTheme(globalTheme),
       fab: getFABTheme(globalTheme),
+      filterTrigger: getFilterTriggerTheme(globalTheme),
       icon: getIconTheme(globalTheme),
       image: getImageTheme(globalTheme),
       list: getListTheme(globalTheme),
@@ -8412,7 +8493,8 @@ var COLOR_INTENTS = {
   warning: 'warning',
   'disabled-text': 'disabledText',
   'text-inverted': 'invertedText',
-  muted: 'muted'
+  muted: 'muted',
+  inactive: 'inactive'
 };
 var StyledHeroIcon = index$b(HeroIcon)(function (_ref) {
   var themeIntent = _ref.themeIntent,
@@ -8510,7 +8592,7 @@ var FONTWEIGHT_MAP$2 = {
   regular: 'regular',
   'semi-bold': 'semiBold'
 };
-var StyledText$3 = index$b(reactNative.Text)(function (_ref) {
+var StyledText$4 = index$b(reactNative.Text)(function (_ref) {
   var themeFontSize = _ref.themeFontSize,
     themeFontWeight = _ref.themeFontWeight,
     themeIntent = _ref.themeIntent,
@@ -8542,7 +8624,7 @@ var Text = function Text(_ref) {
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     nativeProps = _objectWithoutProperties(_ref, _excluded$O);
   useDeprecation('Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.');
-  return /*#__PURE__*/React__namespace.default.createElement(StyledText$3, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledText$4, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
     themeIntent: intent,
@@ -15548,7 +15630,7 @@ var StyledTextWrapper$1 = index$b(reactNative.View)(function () {
     height: '100%'
   };
 });
-var StyledText$2 = index$b(Typography.Body)(function (_ref2) {
+var StyledText$3 = index$b(Typography.Body)(function (_ref2) {
   var themeSize = _ref2.themeSize,
     theme = _ref2.theme;
   return _objectSpread2({
@@ -15603,7 +15685,7 @@ var Avatar = function Avatar(_ref) {
     themeIntent: intent,
     themeSize: size,
     style: style
-  }, (source === undefined || hasImageError) && /*#__PURE__*/React__namespace.default.createElement(StyledTextWrapper$1, null, /*#__PURE__*/React__namespace.default.createElement(StyledText$2, {
+  }, (source === undefined || hasImageError) && /*#__PURE__*/React__namespace.default.createElement(StyledTextWrapper$1, null, /*#__PURE__*/React__namespace.default.createElement(StyledText$3, {
     themeSize: size
   }, title)), source !== undefined && /*#__PURE__*/React__namespace.default.createElement(StyledImage$1, {
     resizeMode: "cover",
@@ -15819,7 +15901,7 @@ var StyledView$1 = index$b(reactNative.Animated.View)(function (_ref) {
     borderColor: themeVariant === 'outlined' ? theme.__hd__.badge.colors.border : theme.__hd__.badge.colors[themeIntent]
   };
 });
-var StyledText$1 = index$b(Typography.Caption)(function (_ref2) {
+var StyledText$2 = index$b(Typography.Caption)(function (_ref2) {
   var theme = _ref2.theme,
     themeSize = _ref2.themeSize;
   return {
@@ -16009,7 +16091,7 @@ var Badge = function Badge(_ref) {
     icon: icon,
     themeSize: size,
     intent: "text-inverted"
-  }) : /*#__PURE__*/React__namespace.default.createElement(StyledText$1, {
+  }) : /*#__PURE__*/React__namespace.default.createElement(StyledText$2, {
     themeSize: size
   }, content));
 };
@@ -24734,7 +24816,7 @@ var StyledContent = index$b(reactNative.View)(function (_ref2) {
     alignItems: 'center'
   };
 });
-var StyledBadge$1 = index$b(reactNative.View)(function (_ref3) {
+var StyledBadge$2 = index$b(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     right: theme.__hd__.mapPin.space.iconRight,
@@ -24822,7 +24904,7 @@ var MapPin = function MapPin(_ref) {
     icon: icon,
     size: "xsmall",
     testID: testID ? "".concat(testID, "-icon") : undefined
-  })), badgeIcon && /*#__PURE__*/React__namespace.default.createElement(StyledBadge$1, {
+  })), badgeIcon && /*#__PURE__*/React__namespace.default.createElement(StyledBadge$2, {
     testID: testID ? "".concat(testID, "-badge") : undefined
   }, /*#__PURE__*/React__namespace.default.createElement(StyledBadgeIcon, {
     icon: badgeIcon,
@@ -27015,7 +27097,7 @@ var StyledView = index$b(reactNative.View)(function (_ref) {
     paddingHorizontal: theme.__hd__.tag.space.horizontalPadding
   };
 });
-var StyledText = index$b(Typography.Caption)(function (_ref2) {
+var StyledText$1 = index$b(Typography.Caption)(function (_ref2) {
   var themeIntent = _ref2.themeIntent,
     theme = _ref2.theme;
   return {
@@ -27041,7 +27123,7 @@ var Tag = function Tag(_ref) {
     themeIntent: intent,
     style: style,
     testID: testID
-  }), typeof content === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledText, {
+  }), typeof content === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledText$1, {
     themeIntent: intent,
     fontWeight: "semi-bold"
   }, content) : content);
@@ -27134,8 +27216,7 @@ var StyledInputContainer$1 = index$b(reactNative.View)(function (_ref8) {
     backgroundColor: theme.__hd__.toolbar.colors.inputContainerBackground,
     borderRadius: theme.__hd__.toolbar.radii.messageContainer,
     height: theme.__hd__.toolbar.sizes.messageInputHeight,
-    paddingHorizontal: theme.__hd__.toolbar.space.messageInputPaddingHorizontal,
-    paddingVertical: theme.__hd__.toolbar.space.messageInputPaddingVertical
+    paddingHorizontal: theme.__hd__.toolbar.space.messageInputPaddingHorizontal
   };
 });
 var StyledInput$1 = index$b(reactNative.TextInput)(function (_ref9) {
@@ -46705,7 +46786,7 @@ var StyledHandlerContainer = index$b(reactNative.View)(function (_ref5) {
     paddingVertical: theme.__hd__.search.space.inputVerticalPadding
   };
 });
-var StyledBadge = index$b(Badge$1)(function (_ref6) {
+var StyledBadge$1 = index$b(Badge$1)(function (_ref6) {
   var theme = _ref6.theme;
   return {
     position: 'absolute',
@@ -46907,12 +46988,12 @@ var renderBadge = function renderBadge(props) {
   var content = props.content,
     icon = props.icon,
     rest = _objectWithoutProperties(props, _excluded$4);
-  if (content) return /*#__PURE__*/React__namespace.default.createElement(StyledBadge, _extends$1({
+  if (content) return /*#__PURE__*/React__namespace.default.createElement(StyledBadge$1, _extends$1({
     intent: "primary",
     content: content,
     size: "small"
   }, rest));
-  if (icon) return /*#__PURE__*/React__namespace.default.createElement(StyledBadge, _extends$1({
+  if (icon) return /*#__PURE__*/React__namespace.default.createElement(StyledBadge$1, _extends$1({
     intent: "primary",
     icon: icon,
     size: "small"
@@ -47022,6 +47103,122 @@ var FloatingIsland = function FloatingIsland(_ref2) {
   }));
 };
 
+var getBackgroundColor = function getBackgroundColor(theme, themeIsActive, themeHasLabel, themeVariant) {
+  var colors = theme.__hd__.filterTrigger.colors;
+  if (themeIsActive && !themeHasLabel && themeVariant === 'filled') {
+    return colors.wrapper.background.active.filledLabeless;
+  }
+  var state = themeIsActive ? 'active' : 'inactive';
+  return colors.wrapper.background[state][themeVariant];
+};
+var getBorderStyles = function getBorderStyles(theme, themeIsActive, themeHasLabel, themeVariant) {
+  var _theme$__hd__$filterT = theme.__hd__.filterTrigger,
+    colors = _theme$__hd__$filterT.colors,
+    borderWidths = _theme$__hd__$filterT.borderWidths,
+    radii = _theme$__hd__$filterT.radii;
+  var borderColor;
+  if (themeIsActive && !themeHasLabel && themeVariant === 'filled') {
+    borderColor = colors.wrapper.border.active.filledLabeless;
+  } else {
+    var state = themeIsActive ? 'active' : 'inactive';
+    borderColor = colors.wrapper.border[state][themeVariant];
+  }
+  return {
+    borderWidth: borderWidths.wrapper[themeVariant],
+    borderColor: borderColor,
+    borderRadius: themeHasLabel ? radii.wrapper["default"] : radii.wrapper.labeless
+  };
+};
+var getSpacingStyles = function getSpacingStyles(theme, themeHasLabel) {
+  var space = theme.__hd__.filterTrigger.space;
+  var paddingConfig = themeHasLabel ? space.wrapper["default"] : space.wrapper.labeless;
+  return {
+    gap: space.wrapper.itemGap,
+    paddingHorizontal: paddingConfig.paddingHorizontal,
+    paddingVertical: paddingConfig.paddingVertical
+  };
+};
+var StyledFilterWrapper = index$b(reactNative.TouchableOpacity)(function (_ref) {
+  var theme = _ref.theme,
+    themeActive = _ref.themeActive,
+    themeVariant = _ref.themeVariant,
+    themeHasLabel = _ref.themeHasLabel;
+  return _objectSpread2(_objectSpread2({
+    position: 'relative',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'flex-start',
+    height: theme.__hd__.filterTrigger.sizes.wrapperHeight,
+    backgroundColor: getBackgroundColor(theme, themeActive, themeHasLabel, themeVariant)
+  }, getBorderStyles(theme, themeActive, themeHasLabel, themeVariant)), getSpacingStyles(theme, themeHasLabel));
+});
+var StyledBadge = index$b(Badge$1)(function (_ref2) {
+  var theme = _ref2.theme,
+    themeHasLabel = _ref2.themeHasLabel;
+  return _objectSpread2({
+    position: 'absolute'
+  }, themeHasLabel ? {
+    right: 0,
+    bottom: 0
+  } : {
+    right: -theme.__hd__.filterTrigger.space.badge.labelessRight,
+    bottom: -theme.__hd__.filterTrigger.space.badge.labelessBottom
+  });
+});
+var StyledText = index$b(Typography.Body)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    lineHeight: theme.__hd__.filterTrigger.lineHeights.text,
+    textAlignVertical: 'center',
+    includeFontPadding: false
+  };
+});
+
+var FilterTrigger = function FilterTrigger(_ref) {
+  var label = _ref.label,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    _ref$filterCount = _ref.filterCount,
+    filterCount = _ref$filterCount === void 0 ? 0 : _ref$filterCount,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'filled' : _ref$variant,
+    suffix = _ref.suffix,
+    onPress = _ref.onPress,
+    testID = _ref.testID,
+    style = _ref.style;
+  var shouldShowBadge = filterCount > 0 && active;
+  var iconIntent = active ? 'text' : 'inactive';
+  var typographyVariant = active ? 'small-bold' : 'small';
+  return /*#__PURE__*/React__namespace.default.createElement(StyledFilterWrapper, {
+    testID: testID,
+    style: style,
+    themeActive: active,
+    themeVariant: variant,
+    onPress: onPress,
+    themeHasLabel: !!label
+  }, label ? /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(StyledText, {
+    variant: typographyVariant
+  }, label), shouldShowBadge && /*#__PURE__*/React__namespace.default.createElement(Badge$1, {
+    content: filterCount,
+    size: "small"
+  }), suffix && /*#__PURE__*/React__namespace.default.createElement(Icon, {
+    icon: suffix,
+    size: "xxxsmall",
+    intent: iconIntent,
+    testID: "".concat(testID, "-suffix")
+  })) : /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, suffix && /*#__PURE__*/React__namespace.default.createElement(Icon, {
+    icon: suffix,
+    size: "xsmall",
+    intent: iconIntent,
+    testID: "".concat(testID, "-suffix")
+  }), shouldShowBadge && /*#__PURE__*/React__namespace.default.createElement(StyledBadge, {
+    content: filterCount,
+    size: "small",
+    themeHasLabel: !!label
+  })));
+};
+
 var getZIndexByState = function getZIndexByState(_ref) {
   var themeFocused = _ref.themeFocused,
     themeHasError = _ref.themeHasError;
@@ -67159,6 +67356,7 @@ exports.Drawer = index$8;
 exports.Empty = Empty;
 exports.Error = ErrorComponent;
 exports.FAB = FAB;
+exports.FilterTrigger = FilterTrigger;
 exports.FlatListWithFAB = FlatListWithFAB;
 exports.FloatingIsland = FloatingIsland;
 exports.FormGroup = FormGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.6.1",
+  "version": "1.6.2-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,7 +23,7 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/rn": "^8.103.7",
+    "@hero-design/rn": "^8.104.1-alpha.0",
     "hero-editor": "^1.15.5"
   },
   "peerDependencies": {

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -702,6 +702,76 @@ exports[`theme returns correct theme object 1`] = `
         "titleMarginHorizontal": 7.846153846153847,
       },
     },
+    "filterTrigger": {
+      "borderWidths": {
+        "wrapper": {
+          "filled": 2,
+          "ghost": 0,
+          "outlined": 2,
+        },
+      },
+      "colors": {
+        "wrapper": {
+          "activeBackground": "#ece8ef",
+          "background": {
+            "active": {
+              "filled": "#ece8ef",
+              "filledLabeless": "#f6f6f7",
+              "ghost": "transparent",
+              "outlined": "transparent",
+            },
+            "inactive": {
+              "filled": "#f6f6f7",
+              "ghost": "transparent",
+              "outlined": "transparent",
+            },
+          },
+          "border": {
+            "active": {
+              "filled": "#ece8ef",
+              "filledLabeless": "#f6f6f7",
+              "ghost": "transparent",
+              "outlined": "#001f23",
+            },
+            "inactive": {
+              "filled": "#f6f6f7",
+              "ghost": "transparent",
+              "outlined": "#e8e9ea",
+            },
+          },
+          "inactiveBackground": "#f6f6f7",
+        },
+      },
+      "lineHeights": {
+        "text": 15.76923076923077,
+      },
+      "radii": {
+        "wrapper": {
+          "default": 24,
+          "labeless": 16,
+        },
+      },
+      "sizes": {
+        "wrapperHeight": 35.30769230769231,
+      },
+      "space": {
+        "badge": {
+          "labelessBottom": 1.9615384615384617,
+          "labelessRight": 1.9615384615384617,
+        },
+        "wrapper": {
+          "default": {
+            "paddingHorizontal": 11.76923076923077,
+            "paddingVertical": 3.9230769230769234,
+          },
+          "itemGap": 3.9230769230769234,
+          "labeless": {
+            "paddingHorizontal": 7.846153846153847,
+            "paddingVertical": 3.9230769230769234,
+          },
+        },
+      },
+    },
     "floatingIsland": {
       "colors": {
         "wrapperBackground": "#ffffff",
@@ -736,6 +806,7 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "danger": "#cb300a",
         "disabledText": "#bfc1c5",
+        "inactive": "#808f91",
         "info": "#b5c3fd",
         "invertedText": "#ffffff",
         "muted": "#4d6265",