fix(ListIcon): Icon color is now themed

Author: artalat

src/components/ListIcon/ListIcon.tsx

@@ -1,11 +1,23 @@
-import { Icon, ListIconDefaultProps, ListIconProps, } from '@bluebase/components';
+import { Icon, ListIconDefaultProps, ListIconProps } from '@bluebase/components';
+
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import React from 'react';
+import { Theme } from '@bluebase/core';
+
+export interface Props extends ListIconProps {
+	styles?: Partial<{
+		color: string;
+	}>;
+}
 
-export const ListIcon = (props: ListIconProps) => (
+export const ListIcon = ({ styles = {}, ...rest }: Props) => (
 	<ListItemIcon>
-		<Icon {...props} />
+		<Icon color={styles.color} {...rest} />
 	</ListItemIcon>
 );
 
-ListIcon.defaultProps = ListIconDefaultProps;
+ListIcon.defaultProps = ListIconDefaultProps;
+
+ListIcon.defaultStyles = (theme: Theme) => ({
+	color: theme.palette.action.active,
+});

src/components/ListIcon/__tests__/ListIcon.test.tsx

@@ -1,12 +1,13 @@
-import { BlueBaseApp } from '@bluebase/core';
-import { ListIcon } from '../ListIcon';
-import Plugin from '../../../';
+import { BlueBaseApp, getComponent } from '@bluebase/core';
+
+import Plugin from '../../..';
 import React from 'react';
 import { mount } from 'enzyme';
 import { waitForElement } from 'enzyme-async-helpers';
 
-describe('ListIcon', () => {
+const ListIcon = getComponent('ListIcon');
 
+describe('ListIcon', () => {
 	test('should forward title prop as primary', async () => {
 		const component = mount(
 			<BlueBaseApp plugins={[Plugin]}>
@@ -16,7 +17,29 @@ describe('ListIcon', () => {
 
 		await waitForElement(component, ListIcon);
 
-		expect(component.find('Icon').first().prop('name')).toBe('inbox');
+		expect(
+			component
+				.find('Icon')
+				.first()
+				.prop('name')
+		).toBe('inbox');
 	});
 
+	test('should not crash if improted directly', async () => {
+		const Component = require('../ListIcon').ListIcon;
+		const component = mount(
+			<BlueBaseApp plugins={[Plugin]}>
+				<Component name="inbox" />
+			</BlueBaseApp>
+		);
+
+		await waitForElement(component, Component);
+
+		expect(
+			component
+				.find('Icon')
+				.first()
+				.prop('name')
+		).toBe('inbox');
+	});
 });