diff --git a/.idea/codeInsightSettings.xml b/.idea/codeInsightSettings.xml index 97248f80fb..f01c2b775f 100644 --- a/.idea/codeInsightSettings.xml +++ b/.idea/codeInsightSettings.xml @@ -12,6 +12,7 @@ android.widget.GridLayout.Alignment androidx.constraintlayout.helper.widget.Flow androidx.constraintlayout.solver.widgets.Flow + androidx.core.content.pm.ShortcutInfoCompat.Surface androidx.navigation.compose.composable androidx.navigation.compose.navigation arrow.core.Eval.Companion.raise diff --git a/app/design-system/design-system-hedvig/src/main/kotlin/com/hedvig/android/design/system/hedvig/EmptyState.kt b/app/design-system/design-system-hedvig/src/main/kotlin/com/hedvig/android/design/system/hedvig/EmptyState.kt index 527ba46e85..7015dd0d7f 100644 --- a/app/design-system/design-system-hedvig/src/main/kotlin/com/hedvig/android/design/system/hedvig/EmptyState.kt +++ b/app/design-system/design-system-hedvig/src/main/kotlin/com/hedvig/android/design/system/hedvig/EmptyState.kt @@ -187,7 +187,7 @@ private val emptyStateColors: EmptyStateColors @Preview @Composable -fun EmptyStatePreview() { +private fun EmptyStatePreview() { HedvigTheme { Surface(color = Color.White) { EmptyState( diff --git a/app/design-system/design-system-hedvig/src/main/kotlin/com/hedvig/android/design/system/hedvig/HedvigBottomSheet.kt b/app/design-system/design-system-hedvig/src/main/kotlin/com/hedvig/android/design/system/hedvig/HedvigBottomSheet.kt index cb1a5f623a..2df0d190fc 100644 --- a/app/design-system/design-system-hedvig/src/main/kotlin/com/hedvig/android/design/system/hedvig/HedvigBottomSheet.kt +++ b/app/design-system/design-system-hedvig/src/main/kotlin/com/hedvig/android/design/system/hedvig/HedvigBottomSheet.kt @@ -9,9 +9,12 @@ import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.WindowInsets +import androidx.compose.foundation.layout.WindowInsetsSides +import androidx.compose.foundation.layout.WindowInsetsSides.Companion import androidx.compose.foundation.layout.asPaddingValues import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.only import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.safeDrawing import androidx.compose.foundation.layout.width @@ -21,6 +24,7 @@ import androidx.compose.foundation.verticalScroll import androidx.compose.runtime.Composable import androidx.compose.runtime.Immutable import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.Stable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember @@ -92,6 +96,64 @@ fun HedvigBottomSheet( } } +@Composable +fun rememberHedvigBottomSheetState(): HedvigBottomSheetState { + return remember { HedvigBottomSheetStateImpl() } +} + +@Stable +interface HedvigBottomSheetState { + val isVisible: Boolean + val data: T? + + fun show(data: T) + + fun dismiss() +} + +fun HedvigBottomSheetState.show() { + show(Unit) +} + +private class HedvigBottomSheetStateImpl() : HedvigBottomSheetState { + override var isVisible: Boolean by mutableStateOf(false) + private set + override var data: T? by mutableStateOf(null) + private set + + override fun dismiss() { + isVisible = false + } + + override fun show(data: T) { + this.data = data + isVisible = true + } +} + +@OptIn(ExperimentalSheetApi::class) +@Composable +fun HedvigBottomSheet( + hedvigBottomSheetState: HedvigBottomSheetState, + content: @Composable ColumnScope.(T) -> Unit, +) { + InternalHedvigBottomSheet( + isVisible = hedvigBottomSheetState.isVisible, + onVisibleChange = { + if (!it) { + hedvigBottomSheetState.dismiss() + } + }, + onSystemBack = { + hedvigBottomSheetState.dismiss() + }, + ) { + if (hedvigBottomSheetState.data != null) { + content(hedvigBottomSheetState.data!!) + } + } +} + @OptIn(ExperimentalSheetApi::class) @Composable private fun InternalHedvigBottomSheet( @@ -110,8 +172,8 @@ private fun InternalHedvigBottomSheet( scrollState.animateScrollTo(scrollState.maxValue) } } - val defaultPadding = WindowInsets.safeDrawing.asPaddingValues() - val finalSheetPadding = sheetPadding ?: defaultPadding + val finalSheetPadding = + sheetPadding ?: WindowInsets.safeDrawing.only(WindowInsetsSides.Top + Companion.Horizontal).asPaddingValues() ModalSheet( visible = isVisible, onVisibleChange = onVisibleChange, diff --git a/app/design-system/design-system-hedvig/src/main/kotlin/com/hedvig/android/design/system/hedvig/NavigationBar.kt b/app/design-system/design-system-hedvig/src/main/kotlin/com/hedvig/android/design/system/hedvig/NavigationBar.kt index c9e5f73f9f..bb44667477 100644 --- a/app/design-system/design-system-hedvig/src/main/kotlin/com/hedvig/android/design/system/hedvig/NavigationBar.kt +++ b/app/design-system/design-system-hedvig/src/main/kotlin/com/hedvig/android/design/system/hedvig/NavigationBar.kt @@ -117,7 +117,7 @@ fun NavigationRail( modifier: Modifier = Modifier, ) { val borderColor = NavigationTokens.BorderColor.value - NavigationContainer(modifier) { + NavigationContainer(modifier.fillMaxHeight()) { Column( horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = if (isExtraTall) { diff --git a/app/design-system/design-system-hedvig/src/main/kotlin/com/hedvig/android/design/system/hedvig/Tab.kt b/app/design-system/design-system-hedvig/src/main/kotlin/com/hedvig/android/design/system/hedvig/Tab.kt index 2c3289f538..d6e32f68e0 100644 --- a/app/design-system/design-system-hedvig/src/main/kotlin/com/hedvig/android/design/system/hedvig/Tab.kt +++ b/app/design-system/design-system-hedvig/src/main/kotlin/com/hedvig/android/design/system/hedvig/Tab.kt @@ -1,6 +1,7 @@ package com.hedvig.android.design.system.hedvig import androidx.compose.animation.core.FastOutSlowInEasing +import androidx.compose.animation.core.FiniteAnimationSpec import androidx.compose.animation.core.animateIntOffsetAsState import androidx.compose.animation.core.tween import androidx.compose.foundation.background @@ -56,14 +57,15 @@ fun HedvigTabRowMaxSixTabs( modifier: Modifier = Modifier, tabSize: TabSize = TabDefaults.defaultSize, tabStyle: TabStyle = TabDefaults.defaultStyle, + selectIndicatorAnimationSpec: FiniteAnimationSpec = tween( + durationMillis = 600, + easing = FastOutSlowInEasing, + ), ) { var currentIndicatorOffset by rememberSaveable(stateSaver = IntOffset.Saver) { mutableStateOf(IntOffset(0, 0)) } val indicatorOffset: IntOffset by animateIntOffsetAsState( targetValue = currentIndicatorOffset, - animationSpec = tween( - durationMillis = 600, - easing = FastOutSlowInEasing, - ), + animationSpec = selectIndicatorAnimationSpec, label = "", ) var oneLineHeight by remember { mutableIntStateOf(0) } diff --git a/app/feature/feature-home/src/main/kotlin/com/hedvig/android/feature/home/home/ui/HomeDestination.kt b/app/feature/feature-home/src/main/kotlin/com/hedvig/android/feature/home/home/ui/HomeDestination.kt index 888c21c847..7e4af5bccd 100644 --- a/app/feature/feature-home/src/main/kotlin/com/hedvig/android/feature/home/home/ui/HomeDestination.kt +++ b/app/feature/feature-home/src/main/kotlin/com/hedvig/android/feature/home/home/ui/HomeDestination.kt @@ -19,6 +19,7 @@ import androidx.compose.foundation.layout.only import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.safeDrawing import androidx.compose.foundation.layout.systemBars +import androidx.compose.foundation.layout.windowInsetsBottomHeight import androidx.compose.foundation.layout.windowInsetsPadding import androidx.compose.foundation.pager.HorizontalPager import androidx.compose.foundation.pager.rememberPagerState @@ -584,14 +585,13 @@ private fun CrossSellBottomSheet( isVisible = true, onVisibleChange = { onDismissed() }, content = { - Column { - Spacer(Modifier.height(32.dp)) - CrossSellsSection( - showNotificationBadge = false, - crossSells = crossSells, - onCrossSellClick = onCrossSellClick, - ) - } + CrossSellsSection( + showNotificationBadge = false, + crossSells = crossSells, + onCrossSellClick = onCrossSellClick, + ) + Spacer(Modifier.height(16.dp)) + Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.safeDrawing)) }, ) } diff --git a/app/feature/feature-insurances/build.gradle.kts b/app/feature/feature-insurances/build.gradle.kts index 16e372969f..b49a51ac52 100644 --- a/app/feature/feature-insurances/build.gradle.kts +++ b/app/feature/feature-insurances/build.gradle.kts @@ -16,7 +16,6 @@ android { dependencies { api(libs.coil.coil) - implementation(libs.androidx.compose.material3) implementation(libs.androidx.lifecycle.compose) implementation(libs.apollo.normalizedCache) implementation(libs.apollo.testingSupport) @@ -31,10 +30,7 @@ dependencies { implementation(projects.coreCommonAndroidPublic) implementation(projects.coreCommonPublic) implementation(projects.coreDemoMode) - implementation(projects.coreDesignSystem) - implementation(projects.coreIcons) implementation(projects.coreResources) - implementation(projects.coreUi) implementation(projects.crossSells) implementation(projects.dataContractAndroid) implementation(projects.dataContractPublic) diff --git a/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurance/InsuranceDestination.kt b/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurance/InsuranceDestination.kt index 04d055b286..a149fa771c 100644 --- a/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurance/InsuranceDestination.kt +++ b/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurance/InsuranceDestination.kt @@ -21,10 +21,6 @@ import androidx.compose.foundation.layout.windowInsetsBottomHeight import androidx.compose.foundation.layout.windowInsetsPadding import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll -import androidx.compose.material3.CardDefaults -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Surface -import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.DisposableEffect import androidx.compose.runtime.getValue @@ -46,17 +42,15 @@ import androidx.lifecycle.compose.dropUnlessResumed import coil.ImageLoader import com.hedvig.android.compose.ui.preview.BooleanCollectionPreviewParameterProvider import com.hedvig.android.compose.ui.preview.PreviewContentWithProvidedParametersAnimatedOnClick -import com.hedvig.android.core.designsystem.component.card.HedvigCard -import com.hedvig.android.core.designsystem.component.error.HedvigErrorSection -import com.hedvig.android.core.designsystem.component.information.HedvigInformationSection -import com.hedvig.android.core.designsystem.material3.squircleMedium -import com.hedvig.android.core.ui.preview.rememberPreviewImageLoader import com.hedvig.android.crosssells.CrossSellItemPlaceholder import com.hedvig.android.crosssells.CrossSellsSection import com.hedvig.android.data.contract.ContractGroup import com.hedvig.android.data.contract.ContractType import com.hedvig.android.data.contract.android.CrossSell import com.hedvig.android.data.productvariant.ProductVariant +import com.hedvig.android.design.system.hedvig.EmptyState +import com.hedvig.android.design.system.hedvig.HedvigCard +import com.hedvig.android.design.system.hedvig.HedvigErrorSection import com.hedvig.android.design.system.hedvig.HedvigNotificationCard import com.hedvig.android.design.system.hedvig.HedvigPreview import com.hedvig.android.design.system.hedvig.HedvigText @@ -65,6 +59,8 @@ import com.hedvig.android.design.system.hedvig.InsuranceCard import com.hedvig.android.design.system.hedvig.InsuranceCardPlaceholder import com.hedvig.android.design.system.hedvig.NotificationDefaults.InfoCardStyle import com.hedvig.android.design.system.hedvig.NotificationDefaults.NotificationPriority +import com.hedvig.android.design.system.hedvig.Surface +import com.hedvig.android.design.system.hedvig.rememberPreviewImageLoader import com.hedvig.android.feature.insurances.data.InsuranceAgreement import com.hedvig.android.feature.insurances.data.InsuranceContract import com.hedvig.android.feature.insurances.insurance.presentation.InsuranceScreenEvent @@ -152,7 +148,7 @@ private fun InsuranceScreen( .fillMaxWidth() .padding(horizontal = 16.dp), ) { - Text( + HedvigText( text = stringResource(id = R.string.DASHBOARD_SCREEN_TITLE), style = HedvigTheme.typography.headlineSmall, ) @@ -212,19 +208,15 @@ private fun InsuranceScreenContent( modifier = modifier.padding(top = 16.dp), verticalArrangement = Arrangement.spacedBy(24.dp), ) { - val insuranceCardModifier = Modifier - .padding(horizontal = 16.dp) - .clip(MaterialTheme.shapes.squircleMedium) if (uiState.isLoading) { InsuranceCardPlaceholder( imageLoader = imageLoader, - modifier = insuranceCardModifier, + modifier = Modifier.padding(horizontal = 16.dp), ) - CrossSellItemPlaceholder() + CrossSellItemPlaceholder(Modifier.padding(horizontal = 16.dp)) } else { ContractsSection( imageLoader = imageLoader, - modifier = insuranceCardModifier, onInsuranceCardClick = onInsuranceCardClick, contracts = uiState.contracts, ) @@ -239,6 +231,7 @@ private fun InsuranceScreenContent( showNotificationBadge = showNotificationBadge, crossSells = uiState.crossSells, onCrossSellClick = onCrossSellClick, + modifier = Modifier.padding(horizontal = 16.dp), ) } if (quantityOfCancelledInsurances > 0) { @@ -263,20 +256,21 @@ private fun ContractsSection( onInsuranceCardClick: (contractId: String) -> Unit, modifier: Modifier = Modifier, ) { - if (contracts.isEmpty()) { - HedvigInformationSection( - title = stringResource(id = R.string.INSURANCES_NO_ACTIVE), - withDefaultVerticalSpacing = true, - ) - } else { - Column(verticalArrangement = Arrangement.spacedBy(8.dp)) { - for (contract in contracts) { - InsuranceCard( - contract = contract, - imageLoader = imageLoader, - modifier = modifier, - onInsuranceCardClick = onInsuranceCardClick, - ) + Box(modifier) { + if (contracts.isEmpty()) { + EmptyState( + text = stringResource(id = R.string.INSURANCES_NO_ACTIVE), + description = null, + ) + } else { + Column(verticalArrangement = Arrangement.spacedBy(8.dp)) { + for (contract in contracts) { + InsuranceCard( + contract = contract, + imageLoader = imageLoader, + onInsuranceCardClick = onInsuranceCardClick, + ) + } } } } @@ -295,7 +289,8 @@ private fun InsuranceCard( topText = contract.currentInsuranceAgreement.productVariant.displayName, bottomText = contract.exposureDisplayName, imageLoader = imageLoader, - modifier = modifier + modifier = modifier.padding(horizontal = 16.dp) + .clip(HedvigTheme.shapes.cornerXLarge) .clickable { onInsuranceCardClick(contract.id) }, @@ -308,17 +303,9 @@ private fun InsuranceCard( private fun TerminatedContractsButton(text: String, onClick: () -> Unit, modifier: Modifier = Modifier) { HedvigCard( onClick = onClick, - colors = CardDefaults.outlinedCardColors(), - modifier = modifier, + modifier = modifier.fillMaxWidth(), ) { - Row( - verticalAlignment = Alignment.CenterVertically, - modifier = Modifier - .padding(16.dp) - .fillMaxWidth(), - ) { - Text(text) - } + HedvigText(text, Modifier.padding(16.dp)) } } @@ -345,8 +332,8 @@ private fun MovingFlowSuggestionSection(onNavigateToMovingFlow: () -> Unit, modi private fun PreviewInsuranceScreen( @PreviewParameter(BooleanCollectionPreviewParameterProvider::class) withContracts: Boolean, ) { - com.hedvig.android.core.designsystem.theme.HedvigTheme { - Surface { + HedvigTheme { + Surface(color = HedvigTheme.colorScheme.backgroundPrimary) { InsuranceScreen( InsuranceUiState( contracts = if (withContracts) { @@ -386,7 +373,7 @@ private fun PreviewInsuranceScreen( private fun PreviewInsuranceDestinationAnimation() { val values = InsuranceUiStateProvider().values.toList() HedvigTheme { - Surface { + Surface(color = HedvigTheme.colorScheme.backgroundPrimary) { PreviewContentWithProvidedParametersAnimatedOnClick( parametersList = values, content = { insuranceUiState -> diff --git a/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/ContractDetailDestination.kt b/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/ContractDetailDestination.kt index 6dc941ec28..62668281a9 100644 --- a/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/ContractDetailDestination.kt +++ b/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/ContractDetailDestination.kt @@ -2,6 +2,7 @@ package com.hedvig.android.feature.insurances.insurancedetail import androidx.compose.animation.AnimatedContent import androidx.compose.animation.core.Spring +import androidx.compose.animation.core.VisibilityThreshold import androidx.compose.animation.core.spring import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut @@ -14,46 +15,50 @@ import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.WindowInsetsSides import androidx.compose.foundation.layout.asPaddingValues import androidx.compose.foundation.layout.consumeWindowInsets +import androidx.compose.foundation.layout.exclude import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.onConsumedWindowInsetsChanged import androidx.compose.foundation.layout.only import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.safeDrawing +import androidx.compose.foundation.layout.windowInsetsPadding import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.pager.HorizontalPager +import androidx.compose.foundation.pager.PagerDefaults import androidx.compose.foundation.pager.PagerState import androidx.compose.foundation.pager.rememberPagerState -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Surface -import androidx.compose.material3.Tab -import androidx.compose.material3.TabRow -import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.rememberCoroutineScope +import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.platform.LocalConfiguration -import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.stringResource +import androidx.compose.ui.unit.IntOffset import androidx.compose.ui.unit.dp import androidx.lifecycle.compose.collectAsStateWithLifecycle import coil.ImageLoader import com.hedvig.android.compose.ui.animateContentHeight -import com.hedvig.android.core.designsystem.component.error.HedvigErrorSection -import com.hedvig.android.core.designsystem.preview.HedvigPreview -import com.hedvig.android.core.designsystem.theme.HedvigTheme -import com.hedvig.android.core.ui.appbar.m3.TopAppBarWithBack -import com.hedvig.android.core.ui.plus -import com.hedvig.android.core.ui.preview.rememberPreviewImageLoader import com.hedvig.android.data.contract.ContractGroup.RENTAL import com.hedvig.android.data.contract.ContractType.SE_APARTMENT_RENT import com.hedvig.android.data.productvariant.InsuranceVariantDocument import com.hedvig.android.data.productvariant.ProductVariant +import com.hedvig.android.design.system.hedvig.HedvigErrorSection +import com.hedvig.android.design.system.hedvig.HedvigPreview +import com.hedvig.android.design.system.hedvig.HedvigTabRowMaxSixTabs +import com.hedvig.android.design.system.hedvig.HedvigTheme import com.hedvig.android.design.system.hedvig.InsuranceCard import com.hedvig.android.design.system.hedvig.InsuranceCardPlaceholder +import com.hedvig.android.design.system.hedvig.Surface +import com.hedvig.android.design.system.hedvig.TabDefaults.TabSize +import com.hedvig.android.design.system.hedvig.TabDefaults.TabStyle.Filled +import com.hedvig.android.design.system.hedvig.TopAppBarWithBack +import com.hedvig.android.design.system.hedvig.plus +import com.hedvig.android.design.system.hedvig.rememberPreviewImageLoader import com.hedvig.android.feature.insurances.data.CancelInsuranceData import com.hedvig.android.feature.insurances.data.InsuranceAgreement import com.hedvig.android.feature.insurances.data.InsuranceAgreement.CreationCause.NEW_CONTRACT @@ -172,14 +177,24 @@ private fun ContractDetailScreen( } is ContractDetailsUiState.Success -> { + var consumedWindowInsets by remember { mutableStateOf(WindowInsets(0.dp)) } LazyColumn( contentPadding = WindowInsets .safeDrawing .only(WindowInsetsSides.Horizontal + WindowInsetsSides.Bottom) + .exclude(consumedWindowInsets) .asPaddingValues() .plus(PaddingValues(top = 16.dp)), modifier = Modifier .fillMaxSize() + .onConsumedWindowInsetsChanged { + consumedWindowInsets = it + } + .windowInsetsPadding( + WindowInsets + .safeDrawing + .only(WindowInsetsSides.Horizontal + WindowInsetsSides.Bottom), + ) .consumeWindowInsets( WindowInsets.safeDrawing.only(WindowInsetsSides.Horizontal + WindowInsetsSides.Bottom), ), @@ -200,7 +215,16 @@ private fun ContractDetailScreen( ) } item(key = 2, contentType = "space") { Spacer(Modifier.height(16.dp)) } - stickyHeader(key = 3, contentType = "PagerSelector") { PagerSelector(pagerState) } + stickyHeader(key = 3, contentType = "PagerSelector") { + Surface(color = HedvigTheme.colorScheme.backgroundPrimary) { + PagerSelector( + pagerState = pagerState, + modifier = Modifier + .padding(horizontal = 16.dp) + .padding(bottom = 8.dp), + ) + } + } item( key = 4, contentType = "Pager", @@ -208,8 +232,14 @@ private fun ContractDetailScreen( HorizontalPager( state = pagerState, key = { it }, + flingBehavior = PagerDefaults.flingBehavior( + state = pagerState, + snapAnimationSpec = horizontalPagerSpringSpec(), + ), verticalAlignment = Alignment.Top, - modifier = Modifier.animateContentHeight(spring(stiffness = Spring.StiffnessLow)), + modifier = Modifier + .padding(top = 8.dp) + .animateContentHeight(spring(stiffness = Spring.StiffnessLow)), ) { pageIndex -> when (pageIndex) { 0 -> { @@ -280,6 +310,11 @@ private fun ContractDetailScreen( } } +private fun horizontalPagerSpringSpec(visibilityThreshhold: T? = null) = spring( + stiffness = Spring.StiffnessMediumLow, + visibilityThreshold = visibilityThreshhold, +) + @Composable private fun InsuranceContract.getAllDocuments(): List = buildList { addAll(currentInsuranceAgreement.productVariant.documents) @@ -293,45 +328,33 @@ private fun InsuranceContract.getAllDocuments(): List } } -@OptIn(ExperimentalFoundationApi::class) @Composable -private fun PagerSelector(pagerState: PagerState) { - LocalConfiguration.current - val resources = LocalContext.current.resources +private fun PagerSelector(pagerState: PagerState, modifier: Modifier = Modifier) { val couroutineScope = rememberCoroutineScope() - TabRow( + HedvigTabRowMaxSixTabs( + tabTitles = listOf( + stringResource(R.string.insurance_details_view_tab_1_title), + stringResource(R.string.insurance_details_view_tab_2_title), + stringResource(R.string.insurance_details_view_tab_3_title), + ), selectedTabIndex = pagerState.currentPage, - containerColor = MaterialTheme.colorScheme.background, - contentColor = MaterialTheme.colorScheme.onBackground, - modifier = Modifier.fillMaxWidth(), - ) { - remember { - listOf( - resources.getString(R.string.insurance_details_view_tab_1_title), - resources.getString(R.string.insurance_details_view_tab_2_title), - resources.getString(R.string.insurance_details_view_tab_3_title), - ) - }.mapIndexed { index, tabTitle -> - Tab( - selected = pagerState.currentPage == index, - onClick = { - couroutineScope.launch { - pagerState.animateScrollToPage(index) - } - }, - text = { - Text(text = tabTitle, style = MaterialTheme.typography.bodyMedium) - }, - ) - } - } + selectIndicatorAnimationSpec = horizontalPagerSpringSpec(IntOffset.VisibilityThreshold), + onTabChosen = { index -> + couroutineScope.launch { + pagerState.animateScrollToPage(index) + } + }, + modifier = modifier.fillMaxWidth(), + tabSize = TabSize.Medium, + tabStyle = Filled, + ) } @HedvigPreview @Composable private fun PreviewContractDetailScreen() { HedvigTheme { - Surface(color = MaterialTheme.colorScheme.background) { + Surface(color = HedvigTheme.colorScheme.backgroundPrimary) { ContractDetailScreen( uiState = Success( InsuranceContract( diff --git a/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/coverage/CoverageTab.kt b/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/coverage/CoverageTab.kt index 099699269f..4b125c2dff 100644 --- a/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/coverage/CoverageTab.kt +++ b/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/coverage/CoverageTab.kt @@ -1,6 +1,5 @@ package com.hedvig.android.feature.insurances.insurancedetail.coverage -import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column @@ -17,218 +16,94 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.safeDrawing import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width +import androidx.compose.foundation.layout.windowInsetsBottomHeight import androidx.compose.foundation.layout.windowInsetsPadding -import androidx.compose.foundation.layout.wrapContentSize -import androidx.compose.foundation.rememberScrollState -import androidx.compose.foundation.shape.CircleShape -import androidx.compose.foundation.verticalScroll -import androidx.compose.material.icons.Icons -import androidx.compose.material3.BottomSheetDefaults -import androidx.compose.material3.ExperimentalMaterial3Api -import androidx.compose.material3.HorizontalDivider -import androidx.compose.material3.Icon -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.ModalBottomSheet -import androidx.compose.material3.Surface -import androidx.compose.material3.Text -import androidx.compose.material3.rememberModalBottomSheetState import androidx.compose.runtime.Composable -import androidx.compose.runtime.getValue -import androidx.compose.runtime.mutableIntStateOf -import androidx.compose.runtime.mutableStateOf -import androidx.compose.runtime.remember -import androidx.compose.runtime.rememberCoroutineScope -import androidx.compose.runtime.saveable.rememberSaveable -import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color +import androidx.compose.ui.draw.drawWithContent +import androidx.compose.ui.geometry.Offset import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp -import com.hedvig.android.core.designsystem.component.button.HedvigTextButton -import com.hedvig.android.core.designsystem.material3.squircleLargeTop -import com.hedvig.android.core.designsystem.preview.HedvigPreview -import com.hedvig.android.core.designsystem.theme.HedvigTheme -import com.hedvig.android.core.icons.Hedvig -import com.hedvig.android.core.icons.hedvig.normal.InfoFilled -import com.hedvig.android.core.ui.card.ExpandablePlusCard -import com.hedvig.android.core.ui.text.HorizontalItemsWithMaximumSpaceTaken import com.hedvig.android.data.productvariant.InsurableLimit import com.hedvig.android.data.productvariant.ProductVariantPeril -import kotlinx.coroutines.launch +import com.hedvig.android.design.system.hedvig.ButtonDefaults.ButtonSize.Large +import com.hedvig.android.design.system.hedvig.HedvigBottomSheet +import com.hedvig.android.design.system.hedvig.HedvigPreview +import com.hedvig.android.design.system.hedvig.HedvigText +import com.hedvig.android.design.system.hedvig.HedvigTextButton +import com.hedvig.android.design.system.hedvig.HedvigTheme +import com.hedvig.android.design.system.hedvig.HorizontalItemsWithMaximumSpaceTaken +import com.hedvig.android.design.system.hedvig.Icon +import com.hedvig.android.design.system.hedvig.PerilData +import com.hedvig.android.design.system.hedvig.PerilDefaults.PerilSize.Small +import com.hedvig.android.design.system.hedvig.PerilList +import com.hedvig.android.design.system.hedvig.Surface +import com.hedvig.android.design.system.hedvig.icon.HedvigIcons +import com.hedvig.android.design.system.hedvig.icon.InfoFilled +import com.hedvig.android.design.system.hedvig.rememberHedvigBottomSheetState -@ExperimentalMaterial3Api @Composable internal fun CoverageTab( insurableLimits: List, perils: List, modifier: Modifier = Modifier, ) { - val coroutineScope = rememberCoroutineScope() - val sheetState = rememberModalBottomSheetState(true) - var selectedInsurableLimit: InsurableLimit? by remember { mutableStateOf(null) } - val selectedInsurableLimitValue = selectedInsurableLimit - - if (selectedInsurableLimitValue != null) { - ModalBottomSheet( - containerColor = MaterialTheme.colorScheme.background, - onDismissRequest = { selectedInsurableLimit = null }, - shape = MaterialTheme.shapes.squircleLargeTop, - sheetState = sheetState, - tonalElevation = 0.dp, - contentWindowInsets = { BottomSheetDefaults.windowInsets.only(WindowInsetsSides.Top) }, - ) { - Column( - Modifier - .verticalScroll(rememberScrollState()) - .padding(horizontal = 24.dp) - .padding(bottom = 16.dp) - .windowInsetsPadding( - BottomSheetDefaults.windowInsets.only(WindowInsetsSides.Horizontal + WindowInsetsSides.Bottom), - ), - ) { - Text(stringResource(hedvig.resources.R.string.CONTRACT_COVERAGE_MORE_INFO)) - Spacer(Modifier.height(8.dp)) - Text(text = selectedInsurableLimitValue.description, color = MaterialTheme.colorScheme.onSurfaceVariant) - Spacer(Modifier.height(8.dp)) - HedvigTextButton( - text = stringResource(hedvig.resources.R.string.general_close_button), - onClick = { - coroutineScope.launch { - sheetState.hide() - }.invokeOnCompletion { - selectedInsurableLimit = null - } - }, - ) - } - } + val bottomSheetState = rememberHedvigBottomSheetState() + HedvigBottomSheet(bottomSheetState) { selectedInsurableLimit -> + HedvigText(stringResource(hedvig.resources.R.string.CONTRACT_COVERAGE_MORE_INFO)) + Spacer(Modifier.height(8.dp)) + HedvigText( + text = selectedInsurableLimit.description, + color = HedvigTheme.colorScheme.textSecondary, + modifier = Modifier.fillMaxWidth(), + ) + Spacer(Modifier.height(8.dp)) + HedvigTextButton( + text = stringResource(hedvig.resources.R.string.general_close_button), + buttonSize = Large, + onClick = { bottomSheetState.dismiss() }, + modifier = Modifier.fillMaxWidth(), + ) + Spacer(Modifier.height(16.dp)) + Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.safeDrawing)) } Column(modifier = modifier) { - Spacer(Modifier.height(16.dp)) InsurableLimitSection( insurableLimits = insurableLimits, onInsurableLimitClick = { insurableLimit: InsurableLimit -> - selectedInsurableLimit = insurableLimit + bottomSheetState.show(insurableLimit) }, ) Spacer(Modifier.height(16.dp)) if (perils.isNotEmpty()) { - PerilSection(perils) + PerilList( + perilItems = perils.map { + PerilData( + title = it.title, + description = it.description, + covered = it.covered, + colorCode = it.colorCode, + ) + }, + size = Small, + modifier = Modifier.padding(horizontal = 16.dp), + ) Spacer(Modifier.height(16.dp)) } Spacer(Modifier.windowInsetsPadding(WindowInsets.safeDrawing.only(WindowInsetsSides.Bottom))) } } -@Suppress("UnusedReceiverParameter") -@Composable -private fun ColumnScope.PerilSection(perilItems: List) { - var expandedItemIndex by rememberSaveable { mutableIntStateOf(-1) } - for ((index, perilItem) in perilItems.withIndex()) { - ExpandableCoverageCard( - isExpanded = expandedItemIndex == index, - onClick = { - if (expandedItemIndex == index) { - expandedItemIndex = -1 - } else { - expandedItemIndex = index - } - }, - color = perilItem.colorCode?.color(), - title = perilItem.title, - expandedTitle = perilItem.description, - expandedDescriptionList = perilItem.covered, - modifier = Modifier.padding(horizontal = 16.dp), - ) - if (index != perilItems.lastIndex) { - Spacer(Modifier.height(4.dp)) - } - } -} - -private fun String.color(): Color { - return try { - Color(android.graphics.Color.parseColor(this)) - } catch (e: Exception) { - Color.Black // todo: was crushing in dev, possibly terms migration not finished - } -} - -@Composable -private fun ExpandableCoverageCard( - isExpanded: Boolean, - onClick: () -> Unit, - color: Color?, - title: String, - expandedTitle: String, - expandedDescriptionList: List, - modifier: Modifier = Modifier, -) { - ExpandablePlusCard( - isExpanded = isExpanded, - onClick = onClick, - content = { - Spacer( - Modifier - .size(24.dp) - .wrapContentSize(Alignment.Center) - .size(16.dp) - .background(color ?: Color(0xFFB8D194), CircleShape), - ) - Spacer(Modifier.width(8.dp)) - Text( - text = title, - style = MaterialTheme.typography.headlineSmall, - modifier = Modifier.weight(1f, true), - ) - }, - expandedContent = { - Column( - Modifier.padding(start = 44.dp, end = 32.dp), - ) { - Spacer(Modifier.height(12.dp)) - Text( - text = expandedTitle, - style = MaterialTheme.typography.bodyMedium, - ) - Spacer(Modifier.height(12.dp)) - if (expandedDescriptionList.isNotEmpty()) { - Spacer(Modifier.height(12.dp)) - for ((index, itemDescription) in expandedDescriptionList.withIndex()) { - Row { - Text( - text = (index + 1).toString().padStart(length = 2, padChar = '0'), - style = MaterialTheme.typography.bodyMedium, - color = MaterialTheme.colorScheme.onSurfaceVariant, - ) - Spacer(Modifier.width(12.dp)) - Text( - text = itemDescription, - style = MaterialTheme.typography.bodyMedium, - modifier = Modifier.weight(1f), - ) - } - if (index != expandedDescriptionList.lastIndex) { - Spacer(Modifier.height(12.dp)) - } - } - } - Spacer(Modifier.height(12.dp)) - } - }, - modifier = modifier, - ) -} - @Suppress("UnusedReceiverParameter") @Composable private fun ColumnScope.InsurableLimitSection( insurableLimits: List, onInsurableLimitClick: (InsurableLimit) -> Unit, ) { + val dividerColor = HedvigTheme.colorScheme.borderSecondary insurableLimits.mapIndexed { index, insurableLimitItem -> HorizontalItemsWithMaximumSpaceTaken( startSlot = { @@ -236,7 +111,7 @@ private fun ColumnScope.InsurableLimitSection( verticalAlignment = Alignment.CenterVertically, modifier = Modifier.padding(vertical = 16.dp), ) { - Text(insurableLimitItem.label) + HedvigText(insurableLimitItem.label) } }, endSlot = { @@ -245,18 +120,18 @@ private fun ColumnScope.InsurableLimitSection( horizontalArrangement = Arrangement.End, modifier = Modifier.padding(vertical = 16.dp), ) { - Text( + HedvigText( text = insurableLimitItem.limit, textAlign = TextAlign.End, - color = MaterialTheme.colorScheme.onSurfaceVariant, + color = HedvigTheme.colorScheme.textSecondary, modifier = Modifier.align(Alignment.CenterVertically), ) Spacer(Modifier.width(8.dp)) Icon( - imageVector = Icons.Hedvig.InfoFilled, + imageVector = HedvigIcons.InfoFilled, contentDescription = null, modifier = Modifier.size(16.dp), - tint = MaterialTheme.colorScheme.onSurfaceVariant, + tint = HedvigTheme.colorScheme.fillSecondary, ) } }, @@ -264,18 +139,21 @@ private fun ColumnScope.InsurableLimitSection( modifier = Modifier .heightIn(min = 56.dp) .fillMaxWidth() - .clickable { - onInsurableLimitClick(insurableLimitItem) - } - .padding(horizontal = 16.dp), + .clickable { onInsurableLimitClick(insurableLimitItem) } + .padding(horizontal = 16.dp) + .then( + if (index != 0) { + Modifier.drawWithContent { + drawContent() + if (index != insurableLimits.lastIndex) { + drawLine(dividerColor, Offset.Zero, Offset(size.width, 0f), 1.dp.toPx()) + } + } + } else { + Modifier + }, + ), ) - if (index != insurableLimits.lastIndex) { - HorizontalDivider( - Modifier - .fillMaxWidth() - .padding(horizontal = 16.dp), - ) - } } } @@ -283,7 +161,7 @@ private fun ColumnScope.InsurableLimitSection( @Composable private fun PreviewCoverageTab() { HedvigTheme { - Surface(color = MaterialTheme.colorScheme.background) { + Surface(color = HedvigTheme.colorScheme.backgroundPrimary) { CoverageTab( previewInsurableLimits, previewPerils, @@ -296,7 +174,7 @@ private fun PreviewCoverageTab() { @Composable private fun PreviewInsurableLimitSection() { HedvigTheme { - Surface(color = MaterialTheme.colorScheme.background) { + Surface(color = HedvigTheme.colorScheme.backgroundPrimary) { Column { InsurableLimitSection( previewInsurableLimits, @@ -307,18 +185,6 @@ private fun PreviewInsurableLimitSection() { } } -@HedvigPreview -@Composable -private fun PreviewPerilSection() { - HedvigTheme { - Surface(color = MaterialTheme.colorScheme.background) { - Column { - PerilSection(previewPerils) - } - } - } -} - private val previewPerils: List = List(4) { index -> ProductVariantPeril( id = index.toString(), diff --git a/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/documents/DocumentsTab.kt b/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/documents/DocumentsTab.kt index a2f0cc211d..6d828ed759 100644 --- a/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/documents/DocumentsTab.kt +++ b/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/documents/DocumentsTab.kt @@ -1,6 +1,5 @@ package com.hedvig.android.feature.insurances.insurancedetail.documents -import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer @@ -13,25 +12,24 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.safeDrawing import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.windowInsetsPadding -import androidx.compose.material.icons.Icons -import androidx.compose.material3.Icon -import androidx.compose.material3.LocalContentColor -import androidx.compose.material3.LocalTextStyle -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Surface -import androidx.compose.material3.Text +import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import com.hedvig.android.compose.ui.stringWithShiftedLabel -import com.hedvig.android.core.designsystem.component.card.HedvigCard -import com.hedvig.android.core.designsystem.preview.HedvigPreview -import com.hedvig.android.core.designsystem.theme.HedvigTheme -import com.hedvig.android.core.icons.Hedvig -import com.hedvig.android.core.icons.hedvig.small.hedvig.ArrowNorthEast import com.hedvig.android.data.productvariant.InsuranceVariantDocument +import com.hedvig.android.design.system.hedvig.HedvigCard +import com.hedvig.android.design.system.hedvig.HedvigPreview +import com.hedvig.android.design.system.hedvig.HedvigText +import com.hedvig.android.design.system.hedvig.HedvigTheme import com.hedvig.android.design.system.hedvig.HorizontalItemsWithMaximumSpaceTaken +import com.hedvig.android.design.system.hedvig.Icon +import com.hedvig.android.design.system.hedvig.LocalContentColor +import com.hedvig.android.design.system.hedvig.LocalTextStyle +import com.hedvig.android.design.system.hedvig.Surface +import com.hedvig.android.design.system.hedvig.icon.ArrowNorthEast +import com.hedvig.android.design.system.hedvig.icon.HedvigIcons @Composable internal fun DocumentsTab( @@ -40,7 +38,6 @@ internal fun DocumentsTab( modifier: Modifier = Modifier, ) { Column(modifier) { - Spacer(Modifier.height(16.dp)) for ((index, document) in documents.withIndex()) { DocumentCard( onClick = { onDocumentClicked(document.url) }, @@ -71,31 +68,31 @@ private fun DocumentCard(onClick: () -> Unit, title: String, subtitle: String?) HorizontalItemsWithMaximumSpaceTaken( startSlot = { Column { - Text( + HedvigText( text = stringWithShiftedLabel( text = title, labelText = "PDF", - labelFontSize = MaterialTheme.typography.bodySmall.fontSize, + labelFontSize = HedvigTheme.typography.bodySmall.fontSize, textColor = LocalContentColor.current, textFontSize = LocalTextStyle.current.fontSize, ), ) if (!subtitle.isNullOrBlank()) { - Text( + HedvigText( text = subtitle, - color = MaterialTheme.colorScheme.onSurfaceVariant, + color = HedvigTheme.colorScheme.textSecondary, ) } } }, endSlot = { - Row(horizontalArrangement = Arrangement.End) { - Icon( - imageVector = Icons.Hedvig.ArrowNorthEast, - contentDescription = null, - modifier = Modifier.size(16.dp), - ) - } + Icon( + imageVector = HedvigIcons.ArrowNorthEast, + contentDescription = null, + modifier = Modifier + .wrapContentSize(Alignment.CenterEnd) + .size(24.dp), + ) }, spaceBetween = 8.dp, ) @@ -107,7 +104,7 @@ private fun DocumentCard(onClick: () -> Unit, title: String, subtitle: String?) @Composable private fun PreviewDocumentsScreen() { HedvigTheme { - Surface(color = MaterialTheme.colorScheme.background) { + Surface(color = HedvigTheme.colorScheme.backgroundPrimary) { DocumentsTab( documents = listOf( InsuranceVariantDocument("", "test", InsuranceVariantDocument.InsuranceDocumentType.GENERAL_TERMS), diff --git a/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/yourinfo/EditInsuranceBottomSheetContent.kt b/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/yourinfo/EditInsuranceBottomSheetContent.kt index 387d342c06..17a7c0ffd6 100644 --- a/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/yourinfo/EditInsuranceBottomSheetContent.kt +++ b/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/yourinfo/EditInsuranceBottomSheetContent.kt @@ -3,12 +3,12 @@ package com.hedvig.android.feature.insurances.insurancedetail.yourinfo import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Surface -import androidx.compose.material3.Text +import androidx.compose.foundation.layout.safeDrawing +import androidx.compose.foundation.layout.windowInsetsBottomHeight import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableIntStateOf @@ -19,14 +19,16 @@ import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import androidx.lifecycle.compose.dropUnlessResumed -import com.hedvig.android.core.designsystem.component.button.HedvigContainedButton -import com.hedvig.android.core.designsystem.component.button.HedvigTextButton -import com.hedvig.android.core.designsystem.preview.HedvigPreview +import com.hedvig.android.design.system.hedvig.ButtonDefaults.ButtonSize.Large import com.hedvig.android.design.system.hedvig.ChosenState.Chosen import com.hedvig.android.design.system.hedvig.ChosenState.NotChosen +import com.hedvig.android.design.system.hedvig.HedvigButton +import com.hedvig.android.design.system.hedvig.HedvigPreview import com.hedvig.android.design.system.hedvig.HedvigText +import com.hedvig.android.design.system.hedvig.HedvigTextButton import com.hedvig.android.design.system.hedvig.HedvigTheme import com.hedvig.android.design.system.hedvig.RadioOptionRightAligned +import com.hedvig.android.design.system.hedvig.Surface import hedvig.resources.R @Composable @@ -44,9 +46,8 @@ internal fun EditInsuranceBottomSheetContent( Column( modifier = modifier, ) { - Text( + HedvigText( text = stringResource(id = R.string.CONTRACT_CHANGE_INFORMATION_TITLE), - style = MaterialTheme.typography.bodyLarge, textAlign = TextAlign.Center, modifier = Modifier .fillMaxWidth() @@ -57,22 +58,22 @@ internal fun EditInsuranceBottomSheetContent( verticalArrangement = Arrangement.spacedBy(4.dp), ) { if (allowChangeAddress) { - RadioOptionRightAligned( - chosenState = if (selectedItemIndex == 0) Chosen else NotChosen, - onClick = { selectedItemIndex = 0 }, - optionContent = { - Column { - HedvigText( - text = stringResource(R.string.insurance_details_change_address_button), - ) - HedvigText( - text = stringResource(R.string.HC_QUICK_ACTIONS_CHANGE_ADDRESS_SUBTITLE), - color = HedvigTheme.colorScheme.textSecondary, - style = HedvigTheme.typography.label, - ) - } - }, - ) + RadioOptionRightAligned( + chosenState = if (selectedItemIndex == 0) Chosen else NotChosen, + onClick = { selectedItemIndex = 0 }, + optionContent = { + Column { + HedvigText( + text = stringResource(R.string.insurance_details_change_address_button), + ) + HedvigText( + text = stringResource(R.string.HC_QUICK_ACTIONS_CHANGE_ADDRESS_SUBTITLE), + color = HedvigTheme.colorScheme.textSecondary, + style = HedvigTheme.typography.label, + ) + } + }, + ) } if (allowEditCoInsured) { RadioOptionRightAligned( @@ -112,11 +113,11 @@ internal fun EditInsuranceBottomSheetContent( } } Spacer(modifier = Modifier.height(16.dp)) - HedvigContainedButton( + HedvigButton( text = stringResource(id = R.string.general_continue_button), - enabled = selectedItemIndex > -1, + enabled = selectedItemIndex != -1, onClick = dropUnlessResumed { - if (selectedItemIndex == 0) { + if (selectedItemIndex == 0 && allowChangeAddress) { onChangeAddressClick() } else if (selectedItemIndex == 1 && allowEditCoInsured) { onEditCoInsuredClick() @@ -124,21 +125,25 @@ internal fun EditInsuranceBottomSheetContent( onChangeTierClick() } }, + modifier = Modifier.fillMaxWidth(), ) Spacer(modifier = Modifier.height(8.dp)) HedvigTextButton( text = stringResource(id = R.string.general_cancel_button), + buttonSize = Large, onClick = onDismiss, + modifier = Modifier.fillMaxWidth(), ) - Spacer(modifier = Modifier.height(8.dp)) + Spacer(Modifier.height(16.dp)) + Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.safeDrawing)) } } @Composable @HedvigPreview private fun PreviewEditInsuranceBottomSheetContent() { - com.hedvig.android.core.designsystem.theme.HedvigTheme { - Surface(color = MaterialTheme.colorScheme.background) { + HedvigTheme { + Surface(color = HedvigTheme.colorScheme.backgroundPrimary) { EditInsuranceBottomSheetContent( allowChangeAddress = true, allowEditCoInsured = true, diff --git a/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/yourinfo/UpcomingChangesBottomSheetContent.kt b/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/yourinfo/UpcomingChangesBottomSheetContent.kt index 6b2ebae658..284fab798e 100644 --- a/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/yourinfo/UpcomingChangesBottomSheetContent.kt +++ b/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/yourinfo/UpcomingChangesBottomSheetContent.kt @@ -2,22 +2,26 @@ package com.hedvig.android.feature.insurances.insurancedetail.yourinfo import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Surface -import androidx.compose.material3.Text +import androidx.compose.foundation.layout.safeDrawing +import androidx.compose.foundation.layout.windowInsetsBottomHeight import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp -import com.hedvig.android.core.designsystem.component.button.HedvigContainedButton -import com.hedvig.android.core.designsystem.component.button.HedvigTextButton -import com.hedvig.android.core.designsystem.preview.HedvigPreview -import com.hedvig.android.core.designsystem.theme.HedvigTheme -import com.hedvig.android.core.ui.infocard.VectorInfoCard +import com.hedvig.android.design.system.hedvig.ButtonDefaults.ButtonSize.Large +import com.hedvig.android.design.system.hedvig.HedvigButton +import com.hedvig.android.design.system.hedvig.HedvigNotificationCard +import com.hedvig.android.design.system.hedvig.HedvigPreview +import com.hedvig.android.design.system.hedvig.HedvigText +import com.hedvig.android.design.system.hedvig.HedvigTextButton +import com.hedvig.android.design.system.hedvig.HedvigTheme +import com.hedvig.android.design.system.hedvig.NotificationDefaults.NotificationPriority +import com.hedvig.android.design.system.hedvig.Surface import hedvig.resources.R @Composable @@ -28,12 +32,9 @@ internal fun UpcomingChangesBottomSheetContent( onDismiss: () -> Unit, modifier: Modifier = Modifier, ) { - Column( - modifier = modifier, - ) { - Text( + Column(modifier = modifier) { + HedvigText( text = stringResource(id = R.string.insurance_details_update_details_sheet_title), - style = MaterialTheme.typography.bodyLarge, textAlign = TextAlign.Center, modifier = Modifier .fillMaxWidth() @@ -42,21 +43,27 @@ internal fun UpcomingChangesBottomSheetContent( Spacer(modifier = Modifier.height(32.dp)) CoverageRows(coverageRowItems = sections) Spacer(modifier = Modifier.height(16.dp)) - VectorInfoCard( - text = infoText, + HedvigNotificationCard( + message = infoText, + priority = NotificationPriority.Info, modifier = Modifier.fillMaxWidth(), ) Spacer(modifier = Modifier.height(16.dp)) - HedvigContainedButton( + HedvigButton( text = stringResource(id = R.string.open_chat), + enabled = true, onClick = onNavigateToNewConversation, + modifier = Modifier.fillMaxWidth(), ) Spacer(modifier = Modifier.height(8.dp)) HedvigTextButton( text = stringResource(id = R.string.general_close_button), + buttonSize = Large, onClick = onDismiss, + modifier = Modifier.fillMaxWidth(), ) - Spacer(modifier = Modifier.height(8.dp)) + Spacer(Modifier.height(16.dp)) + Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.safeDrawing)) } } @@ -64,7 +71,7 @@ internal fun UpcomingChangesBottomSheetContent( @HedvigPreview private fun PreviewUpcomingChangesBottomSheetContent() { HedvigTheme { - Surface(color = MaterialTheme.colorScheme.background) { + Surface(color = HedvigTheme.colorScheme.backgroundPrimary) { UpcomingChangesBottomSheetContent( infoText = "Test", sections = listOf( diff --git a/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/yourinfo/YourInfoTab.kt b/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/yourinfo/YourInfoTab.kt index b48e37323d..7eab5ff987 100644 --- a/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/yourinfo/YourInfoTab.kt +++ b/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/insurancedetail/yourinfo/YourInfoTab.kt @@ -4,68 +4,55 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.WindowInsetsSides import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height -import androidx.compose.foundation.layout.only import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size -import androidx.compose.foundation.layout.windowInsetsPadding -import androidx.compose.foundation.rememberScrollState -import androidx.compose.foundation.verticalScroll -import androidx.compose.material.icons.Icons -import androidx.compose.material3.BottomSheetDefaults -import androidx.compose.material3.ButtonDefaults -import androidx.compose.material3.ExperimentalMaterial3Api -import androidx.compose.material3.HorizontalDivider -import androidx.compose.material3.Icon -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.ModalBottomSheet -import androidx.compose.material3.Surface -import androidx.compose.material3.Text -import androidx.compose.material3.rememberModalBottomSheetState import androidx.compose.runtime.Composable -import androidx.compose.runtime.getValue -import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember -import androidx.compose.runtime.rememberCoroutineScope -import androidx.compose.runtime.saveable.rememberSaveable -import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import com.hedvig.android.core.common.android.time.daysUntil -import com.hedvig.android.core.designsystem.component.button.HedvigContainedButton -import com.hedvig.android.core.designsystem.component.button.HedvigTextButton -import com.hedvig.android.core.designsystem.component.information.HedvigPill -import com.hedvig.android.core.designsystem.material3.onWarningContainer -import com.hedvig.android.core.designsystem.material3.squircleLargeTop -import com.hedvig.android.core.designsystem.material3.warningContainer -import com.hedvig.android.core.designsystem.material3.warningElement -import com.hedvig.android.core.designsystem.preview.HedvigPreview -import com.hedvig.android.core.designsystem.theme.HedvigTheme -import com.hedvig.android.core.icons.Hedvig -import com.hedvig.android.core.icons.hedvig.normal.WarningFilled -import com.hedvig.android.core.icons.hedvig.small.hedvig.Lock -import com.hedvig.android.core.ui.infocard.InfoCardTextButton -import com.hedvig.android.core.ui.infocard.VectorInfoCard -import com.hedvig.android.core.ui.infocard.VectorWarningCard -import com.hedvig.android.core.ui.rememberHedvigBirthDateDateTimeFormatter -import com.hedvig.android.core.ui.rememberHedvigDateTimeFormatter -import com.hedvig.android.core.ui.text.HorizontalItemsWithMaximumSpaceTaken import com.hedvig.android.data.contract.ContractGroup import com.hedvig.android.data.contract.ContractType import com.hedvig.android.data.productvariant.ProductVariant +import com.hedvig.android.design.system.hedvig.ButtonDefaults.ButtonStyle.Ghost +import com.hedvig.android.design.system.hedvig.HedvigBottomSheet +import com.hedvig.android.design.system.hedvig.HedvigButton +import com.hedvig.android.design.system.hedvig.HedvigNotificationCard +import com.hedvig.android.design.system.hedvig.HedvigPreview +import com.hedvig.android.design.system.hedvig.HedvigText +import com.hedvig.android.design.system.hedvig.HedvigTheme +import com.hedvig.android.design.system.hedvig.HighlightLabel +import com.hedvig.android.design.system.hedvig.HighlightLabelDefaults.HighLightSize.Small +import com.hedvig.android.design.system.hedvig.HighlightLabelDefaults.HighlightColor.Amber +import com.hedvig.android.design.system.hedvig.HighlightLabelDefaults.HighlightColor.Red +import com.hedvig.android.design.system.hedvig.HighlightLabelDefaults.HighlightShade.LIGHT +import com.hedvig.android.design.system.hedvig.HighlightLabelDefaults.HighlightShade.MEDIUM +import com.hedvig.android.design.system.hedvig.HorizontalDivider +import com.hedvig.android.design.system.hedvig.HorizontalItemsWithMaximumSpaceTaken +import com.hedvig.android.design.system.hedvig.Icon +import com.hedvig.android.design.system.hedvig.NotificationDefaults.InfoCardStyle.Button +import com.hedvig.android.design.system.hedvig.NotificationDefaults.InfoCardStyle.Default +import com.hedvig.android.design.system.hedvig.NotificationDefaults.NotificationPriority.Attention +import com.hedvig.android.design.system.hedvig.NotificationDefaults.NotificationPriority.Info +import com.hedvig.android.design.system.hedvig.Surface +import com.hedvig.android.design.system.hedvig.datepicker.rememberHedvigBirthDateDateTimeFormatter +import com.hedvig.android.design.system.hedvig.datepicker.rememberHedvigDateTimeFormatter +import com.hedvig.android.design.system.hedvig.icon.HedvigIcons +import com.hedvig.android.design.system.hedvig.icon.Lock +import com.hedvig.android.design.system.hedvig.icon.WarningFilled +import com.hedvig.android.design.system.hedvig.rememberHedvigBottomSheetState +import com.hedvig.android.design.system.hedvig.show import com.hedvig.android.feature.insurances.data.InsuranceAgreement import hedvig.resources.R -import kotlinx.coroutines.launch import kotlinx.datetime.LocalDate import kotlinx.datetime.TimeZone import kotlinx.datetime.toJavaLocalDate -@ExperimentalMaterial3Api @Composable internal fun YourInfoTab( coverageItems: List>, @@ -88,79 +75,33 @@ internal fun YourInfoTab( modifier: Modifier = Modifier, ) { val dateTimeFormatter = rememberHedvigDateTimeFormatter() - val coroutineScope = rememberCoroutineScope() - var showEditYourInfoBottomSheet by rememberSaveable { mutableStateOf(false) } - if (showEditYourInfoBottomSheet) { - val sheetState = rememberModalBottomSheetState(true) - ModalBottomSheet( - containerColor = MaterialTheme.colorScheme.background, - onDismissRequest = { - showEditYourInfoBottomSheet = false + val editYourInfoBottomSheet = rememberHedvigBottomSheetState() + HedvigBottomSheet(editYourInfoBottomSheet) { + EditInsuranceBottomSheetContent( + allowChangeAddress = allowChangeAddress, + allowEditCoInsured = allowEditCoInsured, + allowChangeTier = allowChangeTier, + onChangeTierClick = { + editYourInfoBottomSheet.dismiss() + onChangeTierClick() }, - shape = MaterialTheme.shapes.squircleLargeTop, - sheetState = sheetState, - tonalElevation = 0.dp, - contentWindowInsets = { BottomSheetDefaults.windowInsets.only(WindowInsetsSides.Top) }, - ) { - EditInsuranceBottomSheetContent( - allowChangeAddress = allowChangeAddress, - allowEditCoInsured = allowEditCoInsured, - allowChangeTier = allowChangeTier, - onChangeTierClick = { - coroutineScope.launch { - sheetState.hide() - }.invokeOnCompletion { - showEditYourInfoBottomSheet = false - onChangeTierClick() - } - }, - onEditCoInsuredClick = { - coroutineScope.launch { - sheetState.hide() - }.invokeOnCompletion { - showEditYourInfoBottomSheet = false - onEditCoInsuredClick() - } - }, - onChangeAddressClick = { - coroutineScope.launch { - sheetState.hide() - }.invokeOnCompletion { - showEditYourInfoBottomSheet = false - onChangeAddressClick() - } - }, - onDismiss = { - coroutineScope.launch { - sheetState.hide() - }.invokeOnCompletion { - showEditYourInfoBottomSheet = false - } - }, - modifier = Modifier - .verticalScroll(rememberScrollState()) - .padding(horizontal = 16.dp) - .padding(bottom = 16.dp) - .windowInsetsPadding( - BottomSheetDefaults.windowInsets.only(WindowInsetsSides.Horizontal + WindowInsetsSides.Bottom), - ), - ) - } + onEditCoInsuredClick = { + editYourInfoBottomSheet.dismiss() + onEditCoInsuredClick() + }, + onChangeAddressClick = { + editYourInfoBottomSheet.dismiss() + onChangeAddressClick() + }, + onDismiss = { + editYourInfoBottomSheet.dismiss() + }, + ) } - var showUpcomingChangesBottomSheet by rememberSaveable { mutableStateOf(false) } - if (showUpcomingChangesBottomSheet && upcomingChangesInsuranceAgreement != null) { - val sheetState = rememberModalBottomSheetState(true) - ModalBottomSheet( - containerColor = MaterialTheme.colorScheme.background, - onDismissRequest = { - showUpcomingChangesBottomSheet = false - }, - shape = MaterialTheme.shapes.squircleLargeTop, - sheetState = sheetState, - tonalElevation = 0.dp, - contentWindowInsets = { BottomSheetDefaults.windowInsets.only(WindowInsetsSides.Top) }, - ) { + val upcomingChangesBottomSheet = rememberHedvigBottomSheetState() + if (upcomingChangesInsuranceAgreement != null) { + HedvigBottomSheet(upcomingChangesBottomSheet) { UpcomingChangesBottomSheetContent( infoText = stringResource( id = R.string.insurances_tab_your_insurance_will_be_updated_with_info, @@ -169,31 +110,17 @@ internal fun YourInfoTab( sections = upcomingChangesInsuranceAgreement.displayItems .map { it.title to it.value }, onNavigateToNewConversation = { - coroutineScope.launch { - sheetState.hide() - showUpcomingChangesBottomSheet = false - onNavigateToNewConversation() - } + upcomingChangesBottomSheet.dismiss() + onNavigateToNewConversation() }, onDismiss = { - coroutineScope.launch { - sheetState.hide() - showUpcomingChangesBottomSheet = false - } + upcomingChangesBottomSheet.dismiss() }, - modifier = Modifier - .verticalScroll(rememberScrollState()) - .padding(horizontal = 16.dp) - .padding(bottom = 16.dp) - .windowInsetsPadding( - BottomSheetDefaults.windowInsets.only(WindowInsetsSides.Horizontal + WindowInsetsSides.Bottom), - ), ) } } Column(modifier) { - Spacer(Modifier.height(16.dp)) if (upcomingChangesInsuranceAgreement != null) { if (upcomingChangesInsuranceAgreement.creationCause == InsuranceAgreement.CreationCause.RENEWAL && upcomingChangesInsuranceAgreement.certificateUrl != null @@ -201,36 +128,30 @@ internal fun YourInfoTab( val daysUntilRenewal = remember(TimeZone.currentSystemDefault(), upcomingChangesInsuranceAgreement.activeFrom) { daysUntil(upcomingChangesInsuranceAgreement.activeFrom) } - VectorInfoCard( - text = stringResource(R.string.DASHBOARD_RENEWAL_PROMPTER_BODY, daysUntilRenewal), - modifier = modifier, - ) { - InfoCardTextButton( - onClick = { openUrl(upcomingChangesInsuranceAgreement.certificateUrl) }, - text = stringResource(R.string.CONTRACT_VIEW_CERTIFICATE_BUTTON), - modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 16.dp), - ) - } + HedvigNotificationCard( + message = stringResource(R.string.DASHBOARD_RENEWAL_PROMPTER_BODY, daysUntilRenewal), + priority = Info, + style = Button( + stringResource(R.string.CONTRACT_VIEW_CERTIFICATE_BUTTON), + { openUrl(upcomingChangesInsuranceAgreement.certificateUrl) }, + ), + ) } else { - VectorInfoCard( - text = stringResource( - id = R.string.insurances_tab_your_insurance_will_be_updated, + HedvigNotificationCard( + message = stringResource( + R.string.insurances_tab_your_insurance_will_be_updated, dateTimeFormatter.format(upcomingChangesInsuranceAgreement.activeFrom.toJavaLocalDate()), ), - modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 16.dp), - ) { - if (upcomingChangesInsuranceAgreement.displayItems.isNotEmpty()) { - InfoCardTextButton( - text = stringResource(id = R.string.insurances_tab_view_details), - onClick = { showUpcomingChangesBottomSheet = true }, - modifier = Modifier.fillMaxWidth(), + priority = Info, + style = if (upcomingChangesInsuranceAgreement.displayItems.isNotEmpty()) { + Button( + stringResource(id = R.string.insurances_tab_view_details), + { upcomingChangesBottomSheet.show() }, ) - } - } + } else { + Default + }, + ) } } @@ -251,21 +172,21 @@ internal fun YourInfoTab( Spacer(Modifier.height(16.dp)) if (!isTerminated) { if (allowChangeAddress || allowEditCoInsured) { - HedvigContainedButton( + HedvigButton( text = stringResource(R.string.CONTRACT_EDIT_INFO_LABEL), - onClick = { showEditYourInfoBottomSheet = true }, - modifier = Modifier.padding(horizontal = 16.dp), + enabled = true, + onClick = { editYourInfoBottomSheet.show() }, + modifier = Modifier.padding(horizontal = 16.dp).fillMaxWidth(), ) Spacer(Modifier.height(8.dp)) } if (allowTerminatingInsurance) { - HedvigTextButton( + HedvigButton( text = stringResource(R.string.TERMINATION_BUTTON), + buttonStyle = Ghost, + enabled = true, onClick = { onCancelInsuranceClick() }, - colors = ButtonDefaults.textButtonColors( - contentColor = MaterialTheme.colorScheme.onSurfaceVariant, - ), - modifier = Modifier.padding(horizontal = 16.dp), + modifier = Modifier.padding(horizontal = 16.dp).fillMaxWidth(), ) Spacer(Modifier.height(8.dp)) } @@ -284,7 +205,7 @@ internal fun CoverageRows(coverageRowItems: List>, modifier verticalAlignment = Alignment.CenterVertically, modifier = Modifier.padding(vertical = 16.dp), ) { - Text(firstText) + HedvigText(firstText) } }, endSlot = { @@ -293,9 +214,9 @@ internal fun CoverageRows(coverageRowItems: List>, modifier horizontalArrangement = Arrangement.End, modifier = Modifier.padding(vertical = 16.dp), ) { - Text( + HedvigText( text = secondText, - color = MaterialTheme.colorScheme.onSurfaceVariant, + color = HedvigTheme.colorScheme.textSecondary, textAlign = TextAlign.End, ) } @@ -326,7 +247,7 @@ internal fun CoInsuredSection( verticalAlignment = Alignment.CenterVertically, modifier = Modifier.padding(vertical = 4.dp), ) { - Text(stringResource(id = R.string.CHANGE_ADDRESS_CO_INSURED_LABEL)) + HedvigText(stringResource(id = R.string.CHANGE_ADDRESS_CO_INSURED_LABEL)) } }, endSlot = { @@ -340,9 +261,9 @@ internal fun CoInsuredSection( } else { stringResource(id = R.string.CHANGE_ADDRESS_YOU_PLUS, coInsuredList.size) } - Text( + HedvigText( text = text, - color = MaterialTheme.colorScheme.onSurfaceVariant, + color = HedvigTheme.colorScheme.textSecondary, textAlign = TextAlign.End, ) } @@ -358,11 +279,11 @@ internal fun CoInsuredSection( modifier = Modifier.padding(vertical = 12.dp), ) { Column { - Text(contractHolderDisplayName) + HedvigText(contractHolderDisplayName) if (contractHolderSSN != null) { - Text( + HedvigText( text = contractHolderSSN, - color = MaterialTheme.colorScheme.onSurfaceVariant, + color = HedvigTheme.colorScheme.textSecondary, ) } } @@ -374,8 +295,8 @@ internal fun CoInsuredSection( modifier = Modifier.padding(vertical = 14.dp), ) { Icon( - imageVector = Icons.Hedvig.Lock, - tint = MaterialTheme.colorScheme.onSurfaceVariant, + imageVector = HedvigIcons.Lock, + tint = HedvigTheme.colorScheme.fillSecondary, contentDescription = "Locked info", modifier = Modifier.size(16.dp), ) @@ -392,38 +313,38 @@ internal fun CoInsuredSection( modifier = Modifier.padding(vertical = 12.dp), ) { Column { - Text( + HedvigText( text = coInsured.getDisplayName().ifBlank { stringResource(id = R.string.CONTRACT_COINSURED) }, ) - Text( + HedvigText( text = coInsured.getSsnOrBirthDate(birthDateTimeFormatter) ?: stringResource(id = R.string.CONTRACT_NO_INFORMATION), - color = MaterialTheme.colorScheme.onSurfaceVariant, + color = HedvigTheme.colorScheme.textSecondary, ) if (coInsured.activatesOn != null) { Spacer(Modifier.height(4.dp)) - HedvigPill( - text = stringResource( + HighlightLabel( + labelText = stringResource( id = R.string.CONTRACT_ADD_COINSURED_ACTIVE_FROM, dateTimeFormatter.format(coInsured.activatesOn.toJavaLocalDate()), ), - contentColor = MaterialTheme.colorScheme.onWarningContainer, - color = MaterialTheme.colorScheme.warningContainer, + size = Small, + color = Amber(MEDIUM), ) } if (coInsured.terminatesOn != null) { Spacer(Modifier.height(4.dp)) - HedvigPill( - text = stringResource( + HighlightLabel( + labelText = stringResource( id = R.string.CONTRACT_ADD_COINSURED_ACTIVE_UNTIL, dateTimeFormatter.format(coInsured.terminatesOn.toJavaLocalDate()), ), - contentColor = MaterialTheme.colorScheme.onErrorContainer, - color = MaterialTheme.colorScheme.errorContainer, + size = Small, + color = Red(LIGHT), ) } } @@ -436,9 +357,9 @@ internal fun CoInsuredSection( modifier = Modifier.padding(vertical = 14.dp), ) { Icon( - imageVector = Icons.Hedvig.WarningFilled, - tint = MaterialTheme.colorScheme.warningElement, - contentDescription = "Needs info", + imageVector = HedvigIcons.WarningFilled, + tint = HedvigTheme.colorScheme.signalAmberElement, + contentDescription = null, modifier = Modifier.size(16.dp), ) } @@ -451,15 +372,14 @@ internal fun CoInsuredSection( val hasMissingInfoAndIsNotTerminating = coInsuredList.any { it.hasMissingInfo && it.terminatesOn == null } if (hasMissingInfoAndIsNotTerminating) { Spacer(Modifier.height(8.dp)) - VectorWarningCard( - text = stringResource(id = R.string.CONTRACT_COINSURED_ADD_PERSONAL_INFO), - ) { - InfoCardTextButton( - text = stringResource(id = R.string.CONTRACT_COINSURED_MISSING_ADD_INFO), - onClick = onMissingInfoClick, - modifier = Modifier.fillMaxWidth(), - ) - } + HedvigNotificationCard( + message = stringResource(R.string.CONTRACT_COINSURED_ADD_PERSONAL_INFO), + priority = Attention, + style = Button( + stringResource(R.string.CONTRACT_COINSURED_MISSING_ADD_INFO), + onMissingInfoClick, + ), + ) } } } @@ -468,7 +388,7 @@ internal fun CoInsuredSection( @HedvigPreview private fun PreviewYourInfoTab() { HedvigTheme { - Surface(color = MaterialTheme.colorScheme.background) { + Surface(color = HedvigTheme.colorScheme.backgroundPrimary) { YourInfoTab( coverageItems = listOf( "Address".repeat(4) to "Bellmansgatan 19A", diff --git a/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/navigation/InsuranceGraph.kt b/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/navigation/InsuranceGraph.kt index 22b4c1fad4..1fda9376aa 100644 --- a/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/navigation/InsuranceGraph.kt +++ b/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/navigation/InsuranceGraph.kt @@ -4,7 +4,7 @@ import androidx.navigation.NavBackStackEntry import androidx.navigation.NavGraphBuilder import androidx.navigation.navDeepLink import coil.ImageLoader -import com.hedvig.android.core.designsystem.material3.motion.MotionDefaults +import com.hedvig.android.design.system.hedvig.MotionDefaults import com.hedvig.android.feature.insurances.data.CancelInsuranceData import com.hedvig.android.feature.insurances.insurance.InsuranceDestination import com.hedvig.android.feature.insurances.insurance.presentation.InsuranceViewModel diff --git a/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/terminatedcontracts/TerminatedContractsDestination.kt b/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/terminatedcontracts/TerminatedContractsDestination.kt index bc57cf1fc4..01f8f47ab6 100644 --- a/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/terminatedcontracts/TerminatedContractsDestination.kt +++ b/app/feature/feature-insurances/src/main/kotlin/com/hedvig/android/feature/insurances/terminatedcontracts/TerminatedContractsDestination.kt @@ -4,8 +4,6 @@ import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Surface import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.ui.Modifier @@ -16,17 +14,17 @@ import androidx.compose.ui.tooling.preview.datasource.CollectionPreviewParameter import androidx.compose.ui.unit.dp import androidx.lifecycle.compose.collectAsStateWithLifecycle import coil.ImageLoader -import com.hedvig.android.core.designsystem.component.error.HedvigErrorSection -import com.hedvig.android.core.designsystem.component.progress.HedvigFullScreenCenterAlignedProgress -import com.hedvig.android.core.designsystem.material3.squircleMedium -import com.hedvig.android.core.designsystem.preview.HedvigPreview -import com.hedvig.android.core.designsystem.theme.HedvigTheme -import com.hedvig.android.core.ui.preview.rememberPreviewImageLoader -import com.hedvig.android.core.ui.scaffold.HedvigScaffold import com.hedvig.android.data.contract.ContractGroup import com.hedvig.android.data.contract.ContractType import com.hedvig.android.data.productvariant.ProductVariant +import com.hedvig.android.design.system.hedvig.HedvigErrorSection +import com.hedvig.android.design.system.hedvig.HedvigFullScreenCenterAlignedProgress +import com.hedvig.android.design.system.hedvig.HedvigPreview +import com.hedvig.android.design.system.hedvig.HedvigScaffold +import com.hedvig.android.design.system.hedvig.HedvigTheme import com.hedvig.android.design.system.hedvig.InsuranceCard +import com.hedvig.android.design.system.hedvig.Surface +import com.hedvig.android.design.system.hedvig.rememberPreviewImageLoader import com.hedvig.android.feature.insurances.data.InsuranceAgreement import com.hedvig.android.feature.insurances.data.InsuranceContract import com.hedvig.android.feature.insurances.ui.createChips @@ -85,7 +83,7 @@ private fun TerminatedContractsScreen( imageLoader = imageLoader, modifier = Modifier .padding(horizontal = 16.dp) - .clip(MaterialTheme.shapes.squircleMedium) + .clip(HedvigTheme.shapes.cornerLarge) .clickable { onContractClick(contract.id) }, @@ -108,7 +106,7 @@ private fun PreviewTerminatedContractsScreen( @PreviewParameter(PreviewTerminatedContractsUiStateProvider::class) uiState: TerminatedContractsUiState, ) { HedvigTheme { - Surface(color = MaterialTheme.colorScheme.background) { + Surface(color = HedvigTheme.colorScheme.backgroundPrimary) { TerminatedContractsScreen(uiState, {}, {}, {}, rememberPreviewImageLoader()) } } diff --git a/app/feature/feature-login/src/main/kotlin/com/hedvig/android/feature/login/marketing/MarketingDestination.kt b/app/feature/feature-login/src/main/kotlin/com/hedvig/android/feature/login/marketing/MarketingDestination.kt index 97c38ebfa0..41fcfa4057 100644 --- a/app/feature/feature-login/src/main/kotlin/com/hedvig/android/feature/login/marketing/MarketingDestination.kt +++ b/app/feature/feature-login/src/main/kotlin/com/hedvig/android/feature/login/marketing/MarketingDestination.kt @@ -306,10 +306,10 @@ private fun PreferencesPagerSelector( stringResource(R.string.market_picker_modal_title), stringResource(R.string.language_picker_modal_title), ), - tabStyle = TabDefaults.TabStyle.Filled, selectedTabIndex = selectedTabIndex, onTabChosen = { selectTabIndex(it) }, modifier = modifier, + tabStyle = TabDefaults.TabStyle.Filled, ) } diff --git a/app/feature/feature-profile/src/test/kotlin/com/hedvig/android/feature/profile/myinfo/MyInfoPresenterTest.kt b/app/feature/feature-profile/src/test/kotlin/com/hedvig/android/feature/profile/myinfo/MyInfoPresenterTest.kt index 7b647894af..1f055d9165 100644 --- a/app/feature/feature-profile/src/test/kotlin/com/hedvig/android/feature/profile/myinfo/MyInfoPresenterTest.kt +++ b/app/feature/feature-profile/src/test/kotlin/com/hedvig/android/feature/profile/myinfo/MyInfoPresenterTest.kt @@ -15,7 +15,6 @@ import com.hedvig.android.feature.profile.data.ProfileRepository import com.hedvig.android.logger.TestLogcatLoggingRule import com.hedvig.android.molecule.test.test import kotlinx.coroutines.test.runTest -import org.junit.Ignore import org.junit.Rule import org.junit.Test diff --git a/app/ui/cross-sells/build.gradle.kts b/app/ui/cross-sells/build.gradle.kts index 81baeacdb0..78481e564f 100644 --- a/app/ui/cross-sells/build.gradle.kts +++ b/app/ui/cross-sells/build.gradle.kts @@ -4,20 +4,17 @@ plugins { } hedvig { - serialization() compose() } dependencies { implementation(libs.androidx.compose.foundationLayout) - implementation(libs.androidx.compose.material3) implementation(libs.androidx.compose.runtime) implementation(libs.androidx.compose.uiCore) implementation(libs.androidx.lifecycle.compose) - implementation(projects.coreDesignSystem) implementation(projects.coreResources) - implementation(projects.coreUi) implementation(projects.coreUiData) implementation(projects.dataContractAndroid) + implementation(projects.designSystemHedvig) implementation(projects.placeholder) } diff --git a/app/ui/cross-sells/src/main/kotlin/com/hedvig/android/crosssells/CrossSells.kt b/app/ui/cross-sells/src/main/kotlin/com/hedvig/android/crosssells/CrossSells.kt index d7b46cddf1..14f835dbed 100644 --- a/app/ui/cross-sells/src/main/kotlin/com/hedvig/android/crosssells/CrossSells.kt +++ b/app/ui/cross-sells/src/main/kotlin/com/hedvig/android/crosssells/CrossSells.kt @@ -10,13 +10,8 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.heightIn -import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width -import androidx.compose.material3.ButtonDefaults -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Surface -import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.DisposableEffect import androidx.compose.runtime.getValue @@ -32,14 +27,16 @@ import androidx.compose.ui.unit.dp import androidx.lifecycle.Lifecycle import androidx.lifecycle.LifecycleEventObserver import androidx.lifecycle.compose.LocalLifecycleOwner -import com.hedvig.android.core.designsystem.component.button.HedvigContainedSmallButton -import com.hedvig.android.core.designsystem.material3.lightTypeContainer -import com.hedvig.android.core.designsystem.material3.onLightTypeContainer -import com.hedvig.android.core.designsystem.material3.squircleLarge -import com.hedvig.android.core.designsystem.preview.HedvigPreview -import com.hedvig.android.core.designsystem.theme.HedvigTheme import com.hedvig.android.data.contract.android.CrossSell +import com.hedvig.android.data.contract.android.CrossSell.CrossSellType.HOME import com.hedvig.android.data.contract.android.iconRes +import com.hedvig.android.design.system.hedvig.ButtonDefaults.ButtonSize.Small +import com.hedvig.android.design.system.hedvig.ButtonDefaults.ButtonStyle.PrimaryAlt +import com.hedvig.android.design.system.hedvig.HedvigButton +import com.hedvig.android.design.system.hedvig.HedvigPreview +import com.hedvig.android.design.system.hedvig.HedvigText +import com.hedvig.android.design.system.hedvig.HedvigTheme +import com.hedvig.android.design.system.hedvig.Surface import com.hedvig.android.placeholder.PlaceholderHighlight import com.hedvig.android.placeholder.fade import com.hedvig.android.placeholder.placeholder @@ -56,7 +53,7 @@ fun CrossSellsSection( Column(modifier) { CrossSellsSubHeaderWithDivider(showNotificationBadge) for ((index, crossSell) in crossSells.withIndex()) { - CrossSellItem(crossSell, onCrossSellClick, Modifier.padding(horizontal = 16.dp)) + CrossSellItem(crossSell, onCrossSellClick) if (index != crossSells.lastIndex) { Spacer(Modifier.height(16.dp)) } @@ -65,8 +62,8 @@ fun CrossSellsSection( } @Composable -fun CrossSellItemPlaceholder() { - Column { +fun CrossSellItemPlaceholder(modifier: Modifier = Modifier) { + Column(modifier) { CrossSellsSubHeaderWithDivider(false) CrossSellItem( crossSellTitle = "HHHH", @@ -75,7 +72,7 @@ fun CrossSellItemPlaceholder() { type = CrossSell.CrossSellType.HOME, onCrossSellClick = {}, isLoading = true, - modifier = Modifier.padding(horizontal = 16.dp), + modifier = Modifier, ) } } @@ -86,7 +83,7 @@ private fun CrossSellsSubHeaderWithDivider(showNotificationBadge: Boolean) { NotificationSubheading( text = stringResource(R.string.insurance_tab_cross_sells_title), showNotification = showNotificationBadge, - modifier = Modifier.padding(horizontal = 16.dp), + modifier = Modifier, ) Spacer(Modifier.height(16.dp)) } @@ -127,7 +124,7 @@ private fun CrossSellItem( .placeholder( visible = isLoading, highlight = PlaceholderHighlight.fade(), - shape = MaterialTheme.shapes.squircleLarge, + shape = HedvigTheme.shapes.cornerLarge, ), ) Spacer(Modifier.width(16.dp)) @@ -135,34 +132,31 @@ private fun CrossSellItem( modifier = Modifier.weight(1f), verticalArrangement = Arrangement.Center, ) { - Text( + HedvigText( text = crossSellTitle, - style = MaterialTheme.typography.bodyLarge, + style = HedvigTheme.typography.bodySmall, modifier = Modifier.placeholder(visible = isLoading, highlight = PlaceholderHighlight.shimmer()), ) Spacer(Modifier.height(4.dp)) - Text( + HedvigText( text = crossSellSubtitle, - style = MaterialTheme.typography.bodyMedium.copy( - color = MaterialTheme.colorScheme.onSurfaceVariant, - ), + style = HedvigTheme.typography.label, + color = HedvigTheme.colorScheme.textSecondary, modifier = Modifier.placeholder(visible = isLoading, highlight = PlaceholderHighlight.shimmer()), ) } Spacer(Modifier.width(16.dp)) - HedvigContainedSmallButton( + HedvigButton( text = stringResource(R.string.cross_sell_get_price), onClick = { onCrossSellClick(storeUrl) }, - colors = ButtonDefaults.buttonColors( - containerColor = MaterialTheme.colorScheme.lightTypeContainer, - contentColor = MaterialTheme.colorScheme.onLightTypeContainer, - ), + buttonSize = Small, + buttonStyle = PrimaryAlt, modifier = Modifier.placeholder( visible = isLoading, highlight = PlaceholderHighlight.shimmer(), - shape = MaterialTheme.shapes.squircleLarge, + shape = HedvigTheme.shapes.cornerXLarge, ), enabled = !isLoading, ) @@ -197,7 +191,7 @@ private fun NotificationSubheading(text: String, showNotification: Boolean, modi Spacer(Modifier.width(8.dp)) } } - Text(text = text) + HedvigText(text = text) } } @@ -205,12 +199,22 @@ private fun NotificationSubheading(text: String, showNotification: Boolean, modi @Composable private fun PreviewCrossSellsSection() { HedvigTheme { - Surface(color = MaterialTheme.colorScheme.background) { + Surface(color = HedvigTheme.colorScheme.backgroundPrimary) { CrossSellsSection( true, - List(2) { CrossSell("id", "title", "subtitle", "storeUrl", CrossSell.CrossSellType.HOME) }, + List(2) { CrossSell("id", "title", "subtitle", "storeUrl", HOME) }, {}, ) } } } + +@HedvigPreview +@Composable +private fun PreviewCrossSellItemPlaceholder() { + HedvigTheme { + Surface(color = HedvigTheme.colorScheme.backgroundPrimary) { + CrossSellItemPlaceholder() + } + } +} diff --git a/micro-apps/design-showcase/src/main/kotlin/com/hedvig/android/sample/design/showcase/tabs/Tabs.kt b/micro-apps/design-showcase/src/main/kotlin/com/hedvig/android/sample/design/showcase/tabs/Tabs.kt index 7b80f3c339..a88b814fa3 100644 --- a/micro-apps/design-showcase/src/main/kotlin/com/hedvig/android/sample/design/showcase/tabs/Tabs.kt +++ b/micro-apps/design-showcase/src/main/kotlin/com/hedvig/android/sample/design/showcase/tabs/Tabs.kt @@ -57,140 +57,140 @@ fun TabsShowcase() { HedvigText(text = "1 tab") Spacer(modifier = Modifier.height(16.dp)) HedvigTabRowMaxSixTabs( - modifier = Modifier.fillMaxWidth(), - tabStyle = Filled, - tabSize = Small, tabTitles = listOf("One title"), selectedTabIndex = selectedIndex00, onTabChosen = { selectedIndex00 = it }, + modifier = Modifier.fillMaxWidth(), + tabSize = Small, + tabStyle = Filled, ) Spacer(modifier = Modifier.height(16.dp)) HedvigText(text = "3 tabs") Spacer(modifier = Modifier.height(16.dp)) HedvigTabRowMaxSixTabs( - modifier = Modifier.fillMaxWidth(), - tabStyle = Filled, - tabSize = Small, tabTitles = titles3, selectedTabIndex = selectedIndex01, onTabChosen = { selectedIndex01 = it }, + modifier = Modifier.fillMaxWidth(), + tabSize = Small, + tabStyle = Filled, ) Spacer(modifier = Modifier.height(16.dp)) HedvigText(text = "4 tabs") Spacer(modifier = Modifier.height(16.dp)) HedvigTabRowMaxSixTabs( - modifier = Modifier.fillMaxWidth(), - tabStyle = Filled, - tabSize = Small, tabTitles = titles4, selectedTabIndex = selectedIndex02, onTabChosen = { selectedIndex02 = it }, + modifier = Modifier.fillMaxWidth(), + tabSize = Small, + tabStyle = Filled, ) Spacer(modifier = Modifier.height(16.dp)) HedvigText(text = "5 tabs") Spacer(modifier = Modifier.height(16.dp)) HedvigTabRowMaxSixTabs( - modifier = Modifier.fillMaxWidth(), - tabStyle = Filled, - tabSize = Small, tabTitles = titles5, selectedTabIndex = selectedIndex03, onTabChosen = { selectedIndex03 = it }, + modifier = Modifier.fillMaxWidth(), + tabSize = Small, + tabStyle = Filled, ) Spacer(modifier = Modifier.height(16.dp)) HedvigText(text = "6 tabs") Spacer(modifier = Modifier.height(16.dp)) HedvigTabRowMaxSixTabs( - modifier = Modifier.fillMaxWidth(), - tabStyle = Filled, - tabSize = Small, tabTitles = titles6, selectedTabIndex = selectedIndex04, onTabChosen = { selectedIndex04 = it }, + modifier = Modifier.fillMaxWidth(), + tabSize = Small, + tabStyle = Filled, ) Spacer(modifier = Modifier.height(16.dp)) HedvigText(text = "Small, Filled and Default") Spacer(modifier = Modifier.height(16.dp)) HedvigTabRowMaxSixTabs( - modifier = Modifier.fillMaxWidth(), - tabStyle = Filled, - tabSize = Small, tabTitles = titles3, selectedTabIndex = selectedIndex, onTabChosen = { selectedIndex = it }, + modifier = Modifier.fillMaxWidth(), + tabSize = Small, + tabStyle = Filled, ) Spacer(modifier = Modifier.height(16.dp)) HedvigTabRowMaxSixTabs( - modifier = Modifier.fillMaxWidth(), - tabStyle = Default, - tabSize = Small, tabTitles = titles3, selectedTabIndex = selectedIndex2, onTabChosen = { selectedIndex2 = it }, + modifier = Modifier.fillMaxWidth(), + tabSize = Small, + tabStyle = Default, ) Spacer(modifier = Modifier.height(16.dp)) HedvigText(text = "Mini Filled") Spacer(modifier = Modifier.height(16.dp)) HedvigTabRowMaxSixTabs( - modifier = Modifier.fillMaxWidth(), - tabStyle = Filled, - tabSize = Mini, tabTitles = titles3, selectedTabIndex = selectedIndex3, onTabChosen = { selectedIndex3 = it }, + modifier = Modifier.fillMaxWidth(), + tabSize = Mini, + tabStyle = Filled, ) Spacer(modifier = Modifier.height(16.dp)) HedvigText(text = "Medium Filled") Spacer(modifier = Modifier.height(16.dp)) HedvigTabRowMaxSixTabs( - modifier = Modifier.fillMaxWidth(), - tabStyle = Filled, - tabSize = Medium, tabTitles = titles3, selectedTabIndex = selectedIndex4, onTabChosen = { selectedIndex4 = it }, + modifier = Modifier.fillMaxWidth(), + tabSize = Medium, + tabStyle = Filled, ) Spacer(modifier = Modifier.height(16.dp)) HedvigText(text = "Large Filled") Spacer(modifier = Modifier.height(16.dp)) HedvigTabRowMaxSixTabs( - modifier = Modifier.fillMaxWidth(), - tabStyle = Filled, - tabSize = Large, tabTitles = titles3, selectedTabIndex = selectedIndex5, onTabChosen = { selectedIndex5 = it }, + modifier = Modifier.fillMaxWidth(), + tabSize = Large, + tabStyle = Filled, ) Spacer(modifier = Modifier.height(16.dp)) HedvigTabRowMaxSixTabs( - modifier = Modifier.fillMaxWidth(), - tabStyle = Filled, - tabSize = Large, tabTitles = titles6, selectedTabIndex = selectedIndex6, onTabChosen = { selectedIndex6 = it }, + modifier = Modifier.fillMaxWidth(), + tabSize = Large, + tabStyle = Filled, ) Spacer(modifier = Modifier.height(16.dp)) }