Merge pull request #9198 from Expensify/Rory-CleanupInlineSystemMessage

Add story for InlineSystemMessage

src/components/InlineSystemMessage.js

@@ -2,9 +2,9 @@ import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
+import theme from '../styles/themes/default';
 import Text from './Text';
 import * as Expensicons from './Icon/Expensicons';
-import colors from '../styles/colors';
 import Icon from './Icon';
 
 const propTypes = {
@@ -18,7 +18,7 @@ const InlineSystemMessage = (props) => {
     }
     return (
         <View style={[styles.flexRow, styles.alignItemsCenter]}>
-            <Icon src={Expensicons.Exclamation} fill={colors.red} />
+            <Icon src={Expensicons.Exclamation} fill={theme.badgeDangerBG} />
             <Text style={[styles.inlineSystemMessage]}>{props.message}</Text>
         </View>
     );

src/stories/InlineSystemMessage.stories.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import InlineSystemMessage from '../components/InlineSystemMessage';
+
+/**
+ * We use the Component Story Format for writing stories. Follow the docs here:
+ *
+ * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
+ */
+const story = {
+    title: 'Components/InlineSystemMessage',
+    component: InlineSystemMessage,
+};
+
+// eslint-disable-next-line react/jsx-props-no-spreading
+const Template = args => <InlineSystemMessage {...args} />;
+
+// Arguments can be passed to the component by binding
+// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Default = Template.bind({});
+Default.args = {
+    message: 'This is an error message',
+};
+
+export default story;
+export {
+    Default,
+};