Standardize widget back button and remove kyper ChevronLeft icon

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/ConnectNavigationHeader.module.css

@@ -0,0 +1,4 @@
+.toolbar.toolbar:global(.MuiToolbar-root) {
+  left: 50%;
+  transform: translateX(-50%);
+}

src/components/DayOfMonthPicker.module.css

@@ -0,0 +1,7 @@
+.textGroup:global(.MuiStack-root) {
+  margin-bottom: var(--spacing-3);
+}
+
+.button:global(.MuiButton-root) {
+  width: 14.25%;
+}

src/components/GoBackButton.module.css

@@ -0,0 +1,19 @@
+.container:global(.MuiBox-root) {
+  flex-grow: 1;
+}
+
+.appBar:global(.MuiAppBar-root) {
+  background-color: var(--mui-palette-background-paper);
+  display: flex;
+}
+
+.toolbar:global(.MuiToolbar-root) {
+  left: 0;
+  max-width: 368px;
+  padding: 0 var(--spacing-2);
+  transform: translateX(-5%);
+}
+
+.button:global(.MuiIconButton-root) {
+  color: var(--mui-palette-text-primary);
+}

src/components/GoBackButton.tsx

@@ -1,48 +1,55 @@
 /* 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'
 
 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 { handleGoBack, shouldShowBackButton = true, toolbarSx = {} } = props
   const tokens = useTokens()
-  const styles = getStyles(tokens)
+  const defaultStyles = getStyles(tokens)
 
   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 data-test="navigation-header" sx={defaultStyles.container}>
+      <AppBar elevation={0} position="static" sx={defaultStyles.appBar}>
+        <Toolbar sx={{ ...defaultStyles.toolbar, ...toolbarSx }}>
+          {shouldShowBackButton ? (
+            <IconButton
+              aria-label={__('Go Back')}
+              data-test="back-button"
+              name="connect-navigation-back-button"
+              onClick={handleGoBack}
+              ref={ref ?? defaultRef}
+              sx={defaultStyles.button}
+            >
+              <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',
+  container: { flexGrow: 1 },
+  appBar: { backgroundColor: tokens.BackgroundColor.Container, display: 'flex' },
+  toolbar: {
+    padding: `0 ${tokens.Spacing.Medium}px`,
+    maxWidth: '368px',
+    left: 0,
+    transform: 'translateX(-5%)',
+  },
+  button: { color: tokens.TextColor.Default },
 })
 
-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'