Add support for selected and pressable states

- Add support for the selected state.
- Add support for pressable states: hovered, pressed, disabled.
- Add default props for those states.

src/components/main/Chip/hooks.ts

@@ -1,12 +1,34 @@
+import { useMemo } from 'react';
+import { useIsPressed, useIsFocused, useIsHovered } from '../../hooks';
 import type { IChipProps } from './types';
 import { useComponentPropsResolver } from '../../../hooks';
 
 export const useChipPropsResolver = ( props: Omit<IChipProps, 'label'> ) => {
+	const { disabled, selected } = props;
+	const { isPressed, onPressIn, onPressOut } = useIsPressed( props );
+	const { isHovered, onHoverIn, onHoverOut } = useIsHovered( props );
+	const { isFocused, onFocus, onBlur } = useIsFocused( props );
+
+	const state = useMemo( () => ( {
+		isDisabled: disabled || false,
+		isSelected: selected || false,
+		isPressed,
+		isHovered,
+		isFocused
+	} ), [ disabled, selected, isPressed, isHovered, isFocused ] );
+
 	const {
 		__stack: stackProps,
 		__label: labelProps,
 		...containerProps
-	} = useComponentPropsResolver( 'Chip', props ) as IChipProps;
+	} = useComponentPropsResolver( 'Chip', props, state ) as IChipProps;
+
+	containerProps.onPressIn = onPressIn;
+	containerProps.onPressOut = onPressOut;
+	containerProps.onHoverIn = onHoverIn;
+	containerProps.onHoverOut = onHoverOut;
+	containerProps.onFocus = onFocus;
+	containerProps.onBlur = onBlur;
 
 	return {
 		containerProps,

src/components/main/Chip/types.ts

@@ -5,4 +5,5 @@ export interface IChipProps extends Omit<IPressableProps, 'children' | 'variant'
 	ComponentStyledProps<'Chip'>
 {
 	label: string,
+	selected?: boolean
 }

src/core/theme/defaultTheme/components/Chip.ts

@@ -11,6 +11,21 @@ export default {
 		__label: {
 			color: 'primary.900',
 			variant: 'small-bold'
+		},
+		__disabled: {
+			backgroundColor: 'primary.50',
+			__label: {
+				color: 'neutral.200'
+			}
+		},
+		__pressed: {
+			backgroundColor: 'neutral.50'
+		},
+		__hovered: {
+			backgroundColor: 'neutral.50'
+		},
+		__selected: {
+			borderColor: 'primary.900'
 		}
 	}
 };

tests/components/main/Chip.test.js

@@ -7,22 +7,28 @@ import Chip from '../../../src/components/main/Chip';
 const { itBehavesLike } = require( '../../support/sharedExamples' );
 
 describe( 'Chip', () => {
+	const label = 'Label';
+
 	const renderChip = props => render(
 		<Chip testID="test-chip" {...props} />,
 		{ wrapper: WithThemeProvider }
 	);
 
 	it( 'shows the passed label', () => {
-		const label = 'Label';
 		const { getByTestId } = renderChip( { label } );
 		expect( getByTestId( 'test-chip' ) ).toHaveTextContent( label );
 	} );
 
+	it( 'applies the correct styles when selected', () => {
+		const { getByTestId } = renderChip( { label, selected: true } );
+		expect( getByTestId( 'test-chip' ) ).toHaveStyle( { borderColor: '#01164D' } );
+	} );
+
 	itBehavesLike(
 		'aStyledSystemComponent',
 		{
 			renderComponent: props => renderChip(
-				{ label: 'Label', ...props }
+				{ label, ...props }
 			),
 			testId: 'test-chip'
 		}
@@ -32,7 +38,17 @@ describe( 'Chip', () => {
 		'aPressableComponent',
 		{
 			renderComponent: props => renderChip(
-				{ label: 'Label', ...props }
+				{ label, ...props }
+			),
+			testId: 'test-chip'
+		}
+	);
+
+	itBehavesLike(
+		'aStyledPressableComponent',
+		{
+			renderComponent: props => renderChip(
+				{ label, ...props }
 			),
 			testId: 'test-chip'
 		}