FilterButton component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.79.0",
+  "version": "1.80.0",
   "main": "src/index.ts",
   "exports": {
     ".": "./src/index.ts",

src/components/FilterButton.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+
+import { Icon } from '@observation.org/react-native-components'
+import { rounded } from '@observation.org/react-native-components/styles'
+
+import { Theme, useStyles, useTheme } from '../theme'
+
+type FilterButtonProps = {
+  disabled?: boolean
+  activeFilters?: number
+  label: string
+  onPress?: () => void
+}
+
+const FilterButton = ({ activeFilters = 0, label, onPress }: FilterButtonProps) => {
+  const theme = useTheme()
+  const styles = useStyles(createStyles)
+
+  const backgroundColor = activeFilters > 0 ? theme.color.primary50 : theme.color.background.system.surfaceBase
+  return (
+    <TouchableOpacity style={[styles.container, { backgroundColor }]} onPress={onPress} activeOpacity={0.5}>
+      <View style={styles.titleContainer}>
+        <View style={styles.iconContainerStyle}>
+          <Icon name="bars-filter" size={theme.icon.size.s} color={theme.color.icon.system.brand} />
+        </View>
+        <Text style={styles.title}>{label}</Text>
+        {activeFilters > 0 && (
+          <View style={styles.activeFilterContainer}>
+            <Text style={styles.activeFilter}>{activeFilters}</Text>
+          </View>
+        )}
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+export default FilterButton
+
+const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    container: {
+      ...rounded.normal,
+      borderWidth: 2,
+      borderColor: theme.color.border.system.brand,
+      height: 32,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    title: {
+      textAlignVertical: 'center',
+      ...theme.font.small,
+      color: theme.color.text.system.brand,
+    },
+    titleContainer: {
+      marginHorizontal: theme.margin.half,
+      flexDirection: 'row',
+    },
+    iconContainerStyle: {
+      justifyContent: 'center',
+      paddingRight: theme.margin.half,
+    },
+    activeFilterContainer: {
+      ...rounded.normal,
+      marginLeft: theme.margin.half,
+      width: theme.icon.size.xl,
+      height: theme.icon.size.xl,
+      backgroundColor: theme.color.background.system.brand,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    activeFilter: {
+      textAlignVertical: 'center',
+      ...theme.font.small,
+      color: theme.color.text.system.staticWhite,
+    },
+  })

src/components/__tests__/FilterButton.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { describe, expect, jest, test } from '@jest/globals'
+import { fireEvent, render } from '@testing-library/react-native'
+
+import FilterButton from '../FilterButton'
+
+describe('FilterButton', () => {
+  describe('Rendering', () => {
+    test('Default props', () => {
+      const { toJSON } = render(<FilterButton label={'Filter'} />)
+      expect(toJSON()).toMatchSnapshot()
+    })
+
+    test('Enabled', () => {
+      const { getByText, toJSON } = render(<FilterButton label={'Filter'} activeFilters={3} />)
+      expect(getByText('Filter')).toBeTruthy()
+      expect(getByText('3')).toBeTruthy()
+      expect(toJSON()).toMatchSnapshot()
+    })
+
+    test('No active filters', () => {
+      const { queryByText, toJSON } = render(<FilterButton label={'Filter'} activeFilters={0} />)
+      expect(queryByText('0')).toBeNull()
+      expect(toJSON()).toMatchSnapshot()
+    })
+  })
+
+  describe('Interaction', () => {
+    test('Calls onPress when pressed', () => {
+      const onPress = jest.fn()
+      const { getByText } = render(<FilterButton label={'Filter'} activeFilters={3} onPress={onPress} />)
+      fireEvent.press(getByText('Filter'))
+      expect(onPress).toHaveBeenCalled()
+    })
+  })
+})