Add examples for Chip component

Author: maurobender

Diff for: example/src/App.tsx

@@ -18,6 +18,7 @@ import FormControlExamples from './components/FormControlExamples';
 import TextInputExamples from './components/TextInputExamples';
 import PaletteColorGrid from './components/PaletteColorGrid';
 import ColorModeToggler from './components/ColorModeToggler';
+import ChipExamples from './components/ChipExamples';
 
 const styles = StyleSheet.create( {
 	container: {
@@ -128,6 +129,7 @@ const App = () => (
 						<RadioExamples/>
 						<FormControlExamples />
 						<TextInputExamples />
+						<ChipExamples />
 					</VStack>
 				</ScrollView>
 			</SafeAreaView>

Diff for: example/src/components/ChipExamples.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+
+import { Alert, StyleSheet, View } from 'react-native';
+import {
+	Chip, HStack, Icon, Text, VStack
+} from '@amalgama/embassy-ui';
+import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+const styles = StyleSheet.create( {
+	container: {
+		marginBottom: 20
+	},
+	separator: {
+		height: 1,
+		minWidth: '100%',
+		marginTop: 2,
+		marginBottom: 6,
+		backgroundColor: 'black'
+	},
+	vspace: {
+		height: 10,
+		minWidth: '100%'
+	}
+} );
+
+const onChipPressed = () => Alert.alert( 'Pressed!' );
+const onDeletePressed = () => Alert.alert( 'Delete pressed!' );
+
+const ChipExamples = () => (
+	<VStack style={styles.container} space="2">
+		<Text variant="headline">Chip Component</Text>
+		<View style={styles.vspace} />
+		<HStack space="2" width="100%" flexWrap="wrap">
+			<Chip label="Label" onPress={onChipPressed} />
+			<Chip label="Selected" onPress={onChipPressed} selected />
+			<Chip label="Disabled" onPress={onChipPressed} disabled />
+		</HStack>
+		<HStack space="2" width="100%" flexWrap="wrap">
+			<Chip
+				icon={<Icon name="lightning-bolt-outline" as={MaterialCommunityIcon} />}
+				label="Left Icon"
+			/>
+			<Chip
+				label="Delete Icon"
+				onDeletePress={onDeletePressed}
+			/>
+		</HStack>
+		<HStack space="2" width="100%" flexWrap="wrap">
+			<Chip
+				label="Custom Delete Icon"
+				deleteIcon={<Icon name="close-circle-outline" as={MaterialCommunityIcon} />}
+				onDeletePress={onDeletePressed}
+			/>
+		</HStack>
+	</VStack>
+);
+
+export default ChipExamples;

Diff for: web_example/src/App.tsx

@@ -17,6 +17,7 @@ import RadioExamples from './components/RadioExamples';
 import FormControlExamples from './components/FormControlExamples';
 import TextInputExamples from './components/TextInputExamples';
 import PaletteColorGrid from './components/PaletteColorGrid';
+import ChipExamples from './components/ChipExamples';
 
 const customTheme = extendThemeConfig( {
 	palette: {
@@ -122,6 +123,7 @@ const App = () => (
 				<RadioExamples/>
 				<FormControlExamples />
 				<TextInputExamples />
+				<ChipExamples />
 			</VStack>
 		</Box>
 	</ThemeProvider>

Diff for: web_example/src/components/ChipExamples.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+
+import { Alert, StyleSheet, View } from 'react-native';
+import {
+	Chip, HStack, Icon, Text, VStack
+} from '@amalgama/embassy-ui';
+import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+const styles = StyleSheet.create( {
+	container: {
+		marginBottom: 20
+	},
+	separator: {
+		height: 1,
+		minWidth: '100%',
+		marginTop: 2,
+		marginBottom: 6,
+		backgroundColor: 'black'
+	},
+	vspace: {
+		height: 10,
+		minWidth: '100%'
+	}
+} );
+
+const onChipPressed = () => Alert.alert( 'Pressed!' );
+const onDeletePressed = () => Alert.alert( 'Delete pressed!' );
+
+const ChipExamples = () => (
+	<VStack style={styles.container} space="2">
+		<Text variant="headline">Chip Component</Text>
+		<View style={styles.vspace} />
+		<HStack space="2" width="100%" flexWrap="wrap">
+			<Chip label="Label" onPress={onChipPressed} />
+			<Chip label="Selected" onPress={onChipPressed} selected />
+			<Chip label="Disabled" onPress={onChipPressed} disabled />
+		</HStack>
+		<HStack space="2" width="100%" flexWrap="wrap">
+			<Chip
+				icon={<Icon name="lightning-bolt-outline" as={MaterialCommunityIcon} />}
+				label="Left Icon"
+			/>
+			<Chip
+				label="Delete Icon"
+				onDeletePress={onDeletePressed}
+			/>
+		</HStack>
+		<HStack space="2" width="100%" flexWrap="wrap">
+			<Chip
+				label="Custom Delete Icon"
+				deleteIcon={<Icon name="close-circle-outline" as={MaterialCommunityIcon} />}
+				onDeletePress={onDeletePressed}
+			/>
+		</HStack>
+	</VStack>
+);
+
+export default ChipExamples;