Fix up the HeaderWithCloseButton

.storybook/webpack.config.js

@@ -2,18 +2,34 @@
 /* eslint-disable no-param-reassign */
 const path = require('path');
 const dotenv = require('dotenv');
+const custom = require('../config/webpack/webpack.common');
 
 const env = dotenv.config({path: path.resolve(__dirname, '../.env.staging')}).parsed;
 
 module.exports = ({config}) => {
     config.resolve.alias = {
         'react-native-config': 'react-web-config',
         'react-native$': 'react-native-web',
+        '@react-native-community/netinfo': './mock',
     };
 
     // Necessary to overwrite the values in the existing DefinePlugin hardcoded to the Config staging values
     const definePluginIndex = config.plugins.findIndex(plugin => plugin.constructor.name === 'DefinePlugin');
     config.plugins[definePluginIndex].definitions.__REACT_WEB_CONFIG__ = JSON.stringify(env);
     config.resolve.extensions.push('.web.js', '.website.js');
+
+    const babelRulesIndex = custom.module.rules.findIndex(rule => rule.loader === 'babel-loader');
+    const babelRule = custom.module.rules[babelRulesIndex];
+    config.module.rules.push(babelRule);
+
+    // Allows loading SVG - more context here https://github.com/storybookjs/storybook/issues/6188
+    const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg'));
+    fileLoaderRule.exclude = /\.svg$/;
+    config.module.rules.push({
+        test: /\.svg$/,
+        enforce: 'pre',
+        loader: require.resolve('@svgr/webpack'),
+    });
+
     return config;
 };

src/components/AttachmentModal.js

@@ -113,6 +113,7 @@ class AttachmentModal extends PureComponent {
                     <HeaderWithCloseButton
                         title={this.props.title}
                         shouldShowBorderBottom
+                        shouldShowDownloadButton
                         onDownloadButtonPress={() => fileDownload(sourceURL)}
                         onCloseButtonPress={() => this.setState({isModalOpen: false})}
                     />

src/components/HeaderWithCloseButton.js

@@ -7,7 +7,6 @@ import styles from '../styles/styles';
 import Header from './Header';
 import Icon from './Icon';
 import {Close, Download, BackArrow} from './Icon/Expensicons';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
 const propTypes = {
     /** Title of the Header */
@@ -28,7 +27,8 @@ const propTypes = {
     /** Whether we should show a border on the bottom of the Header */
     shouldShowBorderBottom: PropTypes.bool,
 
-    ...withLocalizePropTypes,
+    /** Whether we should show a download button */
+    shouldShowDownloadButton: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -38,6 +38,7 @@ const defaultProps = {
     onBackButtonPress: () => {},
     shouldShowBackButton: false,
     shouldShowBorderBottom: false,
+    shouldShowDownloadButton: false,
 };
 
 const HeaderWithCloseButton = props => (
@@ -62,7 +63,7 @@ const HeaderWithCloseButton = props => (
             <Header title={props.title} />
             <View style={[styles.reportOptions, styles.flexRow]}>
                 {
-                    props.title === props.translate('common.attachment') && (
+                    props.shouldShowDownloadButton && (
                         <TouchableOpacity
                             onPress={props.onDownloadButtonPress}
                             style={[styles.touchableButtonImage]}
@@ -87,4 +88,4 @@ HeaderWithCloseButton.propTypes = propTypes;
 HeaderWithCloseButton.defaultProps = defaultProps;
 HeaderWithCloseButton.displayName = 'HeaderWithCloseButton';
 
-export default withLocalize(HeaderWithCloseButton);
+export default HeaderWithCloseButton;

src/libs/NetInfo/mock.js

@@ -0,0 +1,3 @@
+export default {
+    addEventListener: () => {},
+};

src/stories/Header.stories.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import Header from '../components/Header';
 
 /**
@@ -17,7 +18,6 @@ const Template = args => <Header {...args} />;
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 export const Default = Template.bind({});
 Default.args = {
-    textSize: 'large',
     title: 'Chats',
     shouldShowEnvironmentBadge: true,
 };

src/stories/HeaderWithCloseButton.stories.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
+
+/**
+ * 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
+ */
+export default {
+    title: 'Components/HeaderWithCloseButton',
+    component: HeaderWithCloseButton,
+};
+
+// eslint-disable-next-line react/jsx-props-no-spreading
+const Template = args => <HeaderWithCloseButton {...args} />;
+
+// Arguments can be passed to the component by binding
+// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Default = Template.bind({});
+Default.args = {
+    title: 'Attachment',
+    shouldShowDownloadButton: true,
+};