[Wave9] Progress Bar UI

src/components/HeaderWithBackButton/index.tsx

@@ -58,6 +58,7 @@ function HeaderWithBackButton({
     shouldOverlay = false,
     singleExecution = (func) => func,
     shouldNavigateToTopMostReport = false,
+    progressBarPercentage,
 }: HeaderWithBackButtonProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -70,6 +71,33 @@ function HeaderWithBackButton({
     // If the icon is present, the header bar should be taller and use different font.
     const isCentralPaneSettings = !!icon;
 
+    let middleContent = null;
+    if (progressBarPercentage) {
+        middleContent = (
+            <View>
+                <View style={styles.progressBarWrapper}>
+                    <View style={[{width: `${progressBarPercentage}%`}, styles.progressBar]} />
+                </View>
+            </View>
+        );
+    } else if (shouldShowAvatarWithDisplay) {
+        middleContent = (
+            <AvatarWithDisplayName
+                report={report}
+                policy={policy}
+                shouldEnableDetailPageNavigation={shouldEnableDetailPageNavigation}
+            />
+        );
+    } else {
+        middleContent = (
+            <Header
+                title={title}
+                subtitle={stepCounter ? translate('stepCounter', stepCounter) : subtitle}
+                textStyles={titleColor ? [StyleUtils.getTextColorStyle(titleColor)] : []}
+            />
+        );
+    }
+
     return (
         <View
             // Hover on some part of close icons will not work on Electron if dragArea is true
@@ -118,19 +146,7 @@ function HeaderWithBackButton({
                         additionalStyles={[styles.mr2]}
                     />
                 )}
-                {shouldShowAvatarWithDisplay ? (
-                    <AvatarWithDisplayName
-                        report={report}
-                        policy={policy}
-                        shouldEnableDetailPageNavigation={shouldEnableDetailPageNavigation}
-                    />
-                ) : (
-                    <Header
-                        title={title}
-                        subtitle={stepCounter ? translate('stepCounter', stepCounter) : subtitle}
-                        textStyles={[titleColor ? StyleUtils.getTextColorStyle(titleColor) : {}, isCentralPaneSettings && styles.textHeadlineH1]}
-                    />
-                )}
+                {middleContent}
                 <View style={[styles.reportOptions, styles.flexRow, styles.pr5, styles.alignItemsCenter]}>
                     {children}
                     {shouldShowDownloadButton && (

src/components/HeaderWithBackButton/types.ts

@@ -121,6 +121,9 @@ type HeaderWithBackButtonProps = Partial<ChildrenProps> & {
 
     /** Whether we should overlay the 3 dots menu */
     shouldOverlayDots?: boolean;
+
+    /** 0 - 100 number indicating current progress of the progress bar */
+    progressBarPercentage?: number;
 };
 
 export type {ThreeDotsMenuItem};

src/stories/HeaderWithBackButton.stories.js

@@ -24,6 +24,8 @@ function Template(args) {
 const Default = Template.bind({});
 const Attachment = Template.bind({});
 const Profile = Template.bind({});
+const ProgressBar = Template.bind({});
+
 Default.args = {
     title: 'Settings',
 };
@@ -35,6 +37,11 @@ Profile.args = {
     title: 'Profile',
     shouldShowBackButton: true,
 };
+ProgressBar.args = {
+    title: 'ProgressBar',
+    shouldShowBackButton: true,
+    progressBarPercentage: 33,
+};
 
 export default story;
-export {Default, Attachment, Profile};
+export {Default, Attachment, Profile, ProgressBar};

src/styles/index.ts

@@ -4343,6 +4343,21 @@ const styles = (theme: ThemeColors) =>
             borderColor: theme.icon,
         },
 
+        progressBarWrapper: {
+            position: 'absolute',
+            width: variables.componentSizeMedium,
+            height: 4,
+            borderRadius: variables.componentBorderRadiusRounded,
+            backgroundColor: theme.progressBarBackground,
+            alignSelf: 'center',
+        },
+
+        progressBar: {
+            borderRadius: variables.componentBorderRadiusRounded,
+            height: '100%',
+            backgroundColor: theme.progressBarFill,
+        },
+
         interactiveStepHeaderContainer: {
             flex: 1,
             alignSelf: 'center',

src/styles/theme/themes/dark.ts

@@ -86,6 +86,8 @@ const darkTheme = {
     loungeAccessOverlay: colors.blue800,
     mapAttributionText: colors.black,
     white: colors.white,
+    progressBarBackground: colors.green800,
+    progressBarFill: colors.green400,
 
     // Adding a color here will animate the status bar to the right color when the screen is opened.
     // Note that it needs to be a screen name, not a route url.

src/styles/theme/themes/light.ts

@@ -86,6 +86,8 @@ const lightTheme = {
     loungeAccessOverlay: colors.blue800,
     mapAttributionText: colors.black,
     white: colors.white,
+    progressBarBackground: colors.green800,
+    progressBarFill: colors.green400,
 
     // Adding a color here will animate the status bar to the right color when the screen is opened.
     // Note that it needs to be a screen name, not a route url.

src/styles/theme/types.ts

@@ -89,6 +89,8 @@ type ThemeColors = {
     loungeAccessOverlay: Color;
     mapAttributionText: Color;
     white: Color;
+    progressBarBackground: Color;
+    progressBarFill: Color;
 
     PAGE_THEMES: Record<string, {backgroundColor: Color; statusBarStyle: StatusBarStyle}>;