Standardize widget back button and remove kyper ChevronLeft icon

src/components/ConfigError.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Stack } from '@mui/material'
 import { Icon, Text } from '@mxenabled/mxui'
 import { Container } from 'src/components/Container'
 import styles from 'src/components/ConfigError.module.css'
@@ -16,15 +17,21 @@ interface ConfigErrorProps {
 export const ConfigError: React.FC<ConfigErrorProps> = ({ error }) => {
   return (
     <Container>
-      <div className={styles.container}>
+      <Stack
+        alignItems="center"
+        sx={{
+          marginTop: 4.5,
+          textAlign: 'center',
+        }}
+      >
         <Icon fill={true} name="error" size={32} sx={{ mb: 3 }} />
         <Text className={styles.errorTitle} component="h2" truncate={false} variant="H2">
           {error.title}
         </Text>
         <Text component="p" truncate={false} variant="Paragraph">
           {error.message}
         </Text>
-      </div>
+      </Stack>
     </Container>
   )
 }

src/components/ConnectNavigationHeader.js

@@ -1,29 +1,20 @@
 import React, { useContext, useState, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
-import { useTokens } from '@kyper/tokenprovider'
-
-import AppBar from '@mui/material/AppBar'
-import Box from '@mui/material/Box'
-import Toolbar from '@mui/material/Toolbar'
-import IconButton from '@mui/material/IconButton'
-import { Icon } from '@mxenabled/mxui'
-
 import { __ } from 'src/utilities/Intl'
 import { STEPS } from 'src/const/Connect'
 import { PostMessageContext } from 'src/ConnectWidget'
+import { GoBackButton } from 'src/components/GoBackButton'
 
 export const ConnectNavigationHeader = (props) => {
   const goBackButtonContainerRef = useRef()
   const postMessageFunctions = useContext(PostMessageContext)
-  const tokens = useTokens()
-  const sx = getStyles(tokens)
   const step = useSelector(
     (state) => state.connect.location[state.connect.location.length - 1]?.step ?? STEPS.SEARCH,
   )
-  const showMobileBackButton = useSelector(
-    (state) => state.config.show_back_button && state.connect.location.length === 1,
-  )
+  const showMobileBackButton =
+    useSelector((state) => state.config.show_back_button && state.connect.location.length === 1) ||
+    false
   const [shouldShowGlobalBackButton, setShouldShowGlobalBackButton] = useState(false)
 
   useEffect(() => {
@@ -65,40 +56,16 @@ export const ConnectNavigationHeader = (props) => {
   }
 
   return (
-    <Box data-test="navigation-header" sx={sx.container}>
-      <AppBar elevation={0} position="static" sx={sx.appBar}>
-        <Toolbar disableGutters={true} sx={sx.toolbar}>
-          {shouldShowGlobalBackButton || showMobileBackButton ? (
-            <IconButton
-              aria-label={__('Go Back')}
-              data-test="back-button"
-              name="connect-navigation-back-button"
-              onClick={backButtonNavigationHandler}
-              ref={goBackButtonContainerRef}
-              sx={sx.button}
-            >
-              <Icon name="arrow_back_ios_new" size={24} />
-            </IconButton>
-          ) : null}
-        </Toolbar>
-      </AppBar>
-    </Box>
+    <GoBackButton
+      handleGoBack={backButtonNavigationHandler}
+      ref={goBackButtonContainerRef}
+      shouldShowBackButton={shouldShowGlobalBackButton || showMobileBackButton}
+      toolbarSx={{ left: '50%', transform: 'translateX(-50%)' }}
+    />
   )
 }
 
 ConnectNavigationHeader.propTypes = {
   connectGoBack: PropTypes.func.isRequired,
   stepComponentRef: PropTypes.object,
 }
-
-const getStyles = (tokens) => ({
-  container: { flexGrow: 1 },
-  appBar: { backgroundColor: tokens.BackgroundColor.Container, display: 'flex' },
-  toolbar: {
-    padding: `0 ${tokens.Spacing.Medium}px`,
-    maxWidth: '368px',
-    left: '50%',
-    transform: 'translateX(-50%)',
-  },
-  button: { color: tokens.TextColor.Default },
-})

src/components/DayOfMonthPicker.tsx

@@ -38,7 +38,7 @@ export const DayOfMonthPicker = React.forwardRef<HTMLInputElement, DayOfMonthPic
           <Text
             component="h2"
             data-test="date-picker-header"
-            sx={{ marginBottom: tokens.Spacing.XSmall }}
+            sx={{ marginBottom: 1 }}
             truncate={false}
             variant="H2"
           >
@@ -47,7 +47,7 @@ export const DayOfMonthPicker = React.forwardRef<HTMLInputElement, DayOfMonthPic
           <Text
             component="p"
             data-test="date-picker-paragraph"
-            sx={{ marginBottom: tokens.Spacing.Large }}
+            sx={{ marginBottom: 3 }}
             truncate={false}
             variant="Paragraph"
           >

src/components/GoBackButton.module.css

@@ -0,0 +1,18 @@
+.container {
+  flex-grow: 1;
+}
+
+.appBar {
+  display: flex;
+}
+
+.toolbar {
+  padding: 0 var(--spacing-medium);
+  max-width: 368px;
+  left: 0;
+  transform: translateX(-5%);
+}
+
+.button {
+  color: var(--mui-palette-text-primary);
+}

src/components/GoBackButton.tsx

@@ -1,48 +1,44 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { forwardRef, useRef } from 'react'
-import PropTypes from 'prop-types'
-import { useTokens } from '@kyper/tokenprovider'
-import { IconButton } from '@mui/material'
-import { ChevronLeft } from '@kyper/icon/ChevronLeft'
+import { AppBar, Box, IconButton, Toolbar, SxProps, Theme } from '@mui/material'
+import { Icon } from '@mxenabled/mxui'
 
 import { __ } from 'src/utilities/Intl'
+import styles from 'src/components/GoBackButton.module.css'
 
 interface GoBackButtonProps {
   handleGoBack: () => void
+  shouldShowBackButton?: boolean
+  toolbarSx?: SxProps<Theme>
 }
 
 export const GoBackButton = forwardRef<HTMLButtonElement, GoBackButtonProps>((props, ref) => {
   const defaultRef = useRef(null)
-  const { handleGoBack } = props
-  const tokens = useTokens()
-  const styles = getStyles(tokens)
+  const { handleGoBack, shouldShowBackButton = true, toolbarSx = {} } = props
 
   return (
-    <IconButton
-      aria-label={__('Go Back')}
-      data-test="back-button"
-      onClick={handleGoBack}
-      ref={ref ?? defaultRef}
-      style={styles}
-    >
-      <ChevronLeft
-        color={tokens.TextColor.Default}
-        height={tokens.Spacing.Large}
-        width={tokens.Spacing.Large}
-      />
-    </IconButton>
+    <Box className={styles.container} data-test="navigation-header">
+      <AppBar
+        className={styles.appBar}
+        elevation={0}
+        position="static"
+        sx={{ backgroundColor: 'common.white' }}
+      >
+        <Toolbar className={styles.toolbar} disableGutters={true} sx={toolbarSx}>
+          {shouldShowBackButton ? (
+            <IconButton
+              aria-label={__('Go Back')}
+              className={styles.button}
+              data-test="back-button"
+              name="connect-navigation-back-button"
+              onClick={handleGoBack}
+              ref={ref ?? defaultRef}
+            >
+              <Icon name="arrow_back_ios_new" size={24} />
+            </IconButton>
+          ) : null}
+        </Toolbar>
+      </AppBar>
+    </Box>
   )
 })
-
-const getStyles = (tokens: any) => ({
-  height: '44px',
-  margin: `0px ${tokens.Spacing.XSmall}px ${tokens.Spacing.XSmall}px -${tokens.Spacing.Medium}px`,
-  padding: `0px 8px`,
-  width: '44px',
-})
-
-GoBackButton.propTypes = {
-  handleGoBack: PropTypes.func.isRequired,
-}
-
 GoBackButton.displayName = 'GoBackButton'

src/components/__tests__/GoBackButton-test.tsx

@@ -3,24 +3,27 @@ import { render, screen, fireEvent } from 'src/utilities/testingLibrary'
 import { GoBackButton } from '../GoBackButton'
 
 describe('GoBackButton', () => {
-  const handleGoBack = vi.fn()
+  const defaultProps = {
+    handleGoBack: vi.fn(),
+    shouldShowBackButton: true,
+  }
 
   it('renders the go back button', () => {
-    render(<GoBackButton handleGoBack={handleGoBack} />)
+    render(<GoBackButton {...defaultProps} />)
     const button = screen.getByRole('button', { name: /back/i })
     expect(button).toBeInTheDocument()
   })
 
   it('navigates back when clicked', () => {
-    render(<GoBackButton handleGoBack={handleGoBack} />)
+    render(<GoBackButton {...defaultProps} />)
     const button = screen.getByRole('button', { name: /back/i })
 
     fireEvent.click(button)
-    expect(handleGoBack).toHaveBeenCalled()
+    expect(defaultProps.handleGoBack).toHaveBeenCalled()
   })
 
   it('is accessible', () => {
-    render(<GoBackButton handleGoBack={handleGoBack} />)
+    render(<GoBackButton {...defaultProps} />)
     const button = screen.getByRole('button', { name: /back/i })
     expect(button).toHaveAttribute('aria-label', 'Go Back')
   })

typings/kyper.d.ts

@@ -17,7 +17,6 @@ declare module '@kyper/icon/Image'
 declare module '@kyper/icon/Health'
 declare module '@kyper/icon/Grid'
 declare module '@kyper/progressindicators'
-declare module '@kyper/icon/ChevronLeft'
 declare module '@kyper/icon/Lock'
 declare module '@kyper/utilityrow'
 declare module '@kyper/hooks'