diff --git a/Storybook/components/TopAppBar/TopAppBar.stories.tsx b/Storybook/components/TopAppBar/TopAppBar.stories.tsx index 1772e822..36e24ae9 100644 --- a/Storybook/components/TopAppBar/TopAppBar.stories.tsx +++ b/Storybook/components/TopAppBar/TopAppBar.stories.tsx @@ -5,9 +5,9 @@ import { StyleSheet, View } from 'react-native'; import { TopAppBar, Title } from '../../../src/components/topAppBar/TopAppBar'; import { Headline } from '../../../src/components/typography/Headline'; -const asString = { value: 'menu' }; +const asString = { value: 'Menu' }; const asButton = { - value: 'menu', + value: 'Menu', onPress: () => {}, }; const asComponent = { value: Headline H1 }; diff --git a/src/components/topAppBar/TopAppBar.tsx b/src/components/topAppBar/TopAppBar.tsx index 99d78b02..828c0b7f 100644 --- a/src/components/topAppBar/TopAppBar.tsx +++ b/src/components/topAppBar/TopAppBar.tsx @@ -6,8 +6,8 @@ import { Headline } from '../typography/Headline'; import DeviceInfo from 'react-native-device-info'; import type { WithTestID } from 'src/shared/type'; import TopAppBarAction from './TopAppBarAction'; -import {TopAppBarMenu} from "./Menu/TopAppBarMenu"; -import TopAppBarMenuItem from "./Menu/TopAppBarMenuItem"; +import { TopAppBarMenu } from './Menu/TopAppBarMenu'; +import TopAppBarMenuItem from './Menu/TopAppBarMenuItem'; export interface Title { value: ReactNode; @@ -22,6 +22,7 @@ export type TopAppBarProps = WithTestID<{ action?: ReactNode; }>; +const isTablet = DeviceInfo.isTablet(); // eslint-disable-next-line react/function-component-definition export function TopAppBar({ size = 'small', @@ -35,6 +36,12 @@ export function TopAppBar({ const styles = useStyles(size, style); + const headlineSize = isTablet + ? 'h1' + : isTitleBelowTopAppBar(size) + ? 'h3' + : 'h1'; + return ( {title.value} + + {title.value} + ) : ( title.value ) } onPress={title.onPress} - style={styles.title} + style={styles.content} /> {action} @@ -73,22 +82,31 @@ function useStyles( style: TopAppBarProps['style'], ) { const theme = useTheme(); - const isTablet = DeviceInfo.isTablet(); + return StyleSheet.create({ button: { backgroundColor: 'rgba(145, 158, 171, 0.24)', borderRadius: 18, marginLeft: isTablet ? 12 : theme.sw.spacing.xs, }, - title: { - paddingTop: size === 'medium' ? 9 : 0, + content: { + paddingTop: isTitleBelowTopAppBar(size) ? 9 : 0, paddingBottom: 0, justifyContent: 'flex-start', }, + title: { + lineHeight: isTitleBelowTopAppBar(size) ? undefined : 32, + }, header: { paddingHorizontal: 12, paddingBottom: 0, + marginBottom: theme.sw.spacing.l, + backgroundColor: theme.sw.colors.neutral['50'], ...style, }, }); } + +function isTitleBelowTopAppBar(size: TopAppBarProps['size']) { + return (['medium', 'large'] as (typeof size)[]).includes(size); +}