diff --git a/tarkaui/src/main/java/com/tarkalabs/uicomponents/components/TUITextRow.kt b/tarkaui/src/main/java/com/tarkalabs/uicomponents/components/TUITextRow.kt index 9b41c504..231db87e 100644 --- a/tarkaui/src/main/java/com/tarkalabs/uicomponents/components/TUITextRow.kt +++ b/tarkaui/src/main/java/com/tarkalabs/uicomponents/components/TUITextRow.kt @@ -68,7 +68,7 @@ import com.tarkalabs.uicomponents.theme.TUITheme @Composable fun TUITextRow( title: String, style: TextRowStyle = Title, - modifier: Modifier = Modifier.fillMaxWidth(), + modifier: Modifier = Modifier, iconOne: TarkaIcon? = null, iconTwo: TarkaIcon? = null, buttonTitle: String? = null, diff --git a/tarkaui/src/main/java/com/tarkalabs/uicomponents/components/tab/TUIFloatingNavBar.kt b/tarkaui/src/main/java/com/tarkalabs/uicomponents/components/tab/TUIFloatingNavBar.kt index 731d6a88..f54196c3 100644 --- a/tarkaui/src/main/java/com/tarkalabs/uicomponents/components/tab/TUIFloatingNavBar.kt +++ b/tarkaui/src/main/java/com/tarkalabs/uicomponents/components/tab/TUIFloatingNavBar.kt @@ -44,7 +44,7 @@ import com.tarkalabs.uicomponents.theme.TUITheme horizontalArrangement = Arrangement.SpaceAround, modifier = modifier .horizontalScroll(rememberScrollState()) - .background(color = TUITheme.colors.onPrimary, shape = RoundedCornerShape(32.dp)) + .background(color = TUITheme.colors.primaryAltHover, shape = RoundedCornerShape(32.dp)) .border( width = 1.dp, color = TUITheme.colors.primaryAltHover, diff --git a/tarkaui/src/main/java/com/tarkalabs/uicomponents/components/tab/TUIFloatingNavButton.kt b/tarkaui/src/main/java/com/tarkalabs/uicomponents/components/tab/TUIFloatingNavButton.kt new file mode 100644 index 00000000..fe7a6aa0 --- /dev/null +++ b/tarkaui/src/main/java/com/tarkalabs/uicomponents/components/tab/TUIFloatingNavButton.kt @@ -0,0 +1,235 @@ +package com.tarkalabs.uicomponents.components.tab + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.wrapContentSize +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Icon +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.platform.testTag +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.tarkalabs.tarkaicons.CalendarRtl24 +import com.tarkalabs.tarkaicons.ChevronDown24 +import com.tarkalabs.tarkaicons.Directions24 +import com.tarkalabs.tarkaicons.Diversity24 +import com.tarkalabs.tarkaicons.Map24 +import com.tarkalabs.tarkaicons.Navigation24 +import com.tarkalabs.tarkaicons.TarkaIcon +import com.tarkalabs.tarkaicons.TarkaIcons +import com.tarkalabs.uicomponents.components.VerticalSpacer +import com.tarkalabs.uicomponents.components.tab.TUIFloatingNavButtonContentType.Burger +import com.tarkalabs.uicomponents.components.tab.TUIFloatingNavButtonContentType.List +import com.tarkalabs.uicomponents.components.tab.TUIFloatingNavButtonContentType.Navigation +import com.tarkalabs.uicomponents.components.tab.TUIFloatingNavButtonStyle.BURGER +import com.tarkalabs.uicomponents.components.tab.TUIFloatingNavButtonStyle.LIST +import com.tarkalabs.uicomponents.components.tab.TUIFloatingNavButtonStyle.NAVIGATION +import com.tarkalabs.uicomponents.components.tab.TUIFloatingNavButtonStyle.VIEW_TOGGLE +import com.tarkalabs.uicomponents.extentions.clickableWithoutRipple +import com.tarkalabs.uicomponents.theme.TUITheme + +enum class TUIFloatingNavButtonStyle { + NAVIGATION, + VIEW_TOGGLE, + LIST, + BURGER; + + companion object { + val defaultStyle: TUIFloatingNavButtonStyle = NAVIGATION + } +} + +sealed class TUIFloatingNavButtonContentType { + data class List( + val iconOne: TarkaIcon? = null, + val onIconOneClick: (() -> Unit)? = null, + val iconTwo: TarkaIcon? = null, + val onIconTwoClick: (() -> Unit)? = null, + val iconThree: TarkaIcon? = null, + val onIconThreeClick: (() -> Unit)? = null + ) : TUIFloatingNavButtonContentType() + + data class Navigation( + val leadingIcon: TarkaIcon? = null, + val text: String, + ) : TUIFloatingNavButtonContentType() + + object Burger : TUIFloatingNavButtonContentType() +} + +/** + * TUIFloatingNavButton is a reusable compose function which can be used to create floating navigation button of different styles. + * @param modifier The modifier to be applied to this button. + * @param style The style of the button. Default being [TUIFloatingNavButtonStyle.defaultStyle] + * @param contentType The type of content to be displayed in the button. + * @param onClick The callback function to be invoked when the button is clicked. + * @param tags The tags to be applied to the button for testing.**/ +@Composable fun TUIFloatingNavButton( + modifier: Modifier = Modifier, + style: TUIFloatingNavButtonStyle = TUIFloatingNavButtonStyle.defaultStyle, + contentType: TUIFloatingNavButtonContentType, + onClick: (() -> Unit)? = null, + tags: TUIFloatingNavButtonTags = TUIFloatingNavButtonTags() +) { + Row(modifier = modifier + .wrapContentSize() + .clickableWithoutRipple { + if (style != LIST && onClick != null) { + onClick() + } + } + .background(shape = RoundedCornerShape(32.dp), color = TUITheme.colors.primaryAltHover.copy(alpha = 0.3f)) + .testTag(tags.parentTag)) { + + when (contentType) { + is Burger -> TUIFloatingNavBurgerButton() + is Navigation -> TUIFloatingNavTypeButton(contentType, style) + is List -> TUIFloatingNavListButton(contentType) + } + } +} + +@Composable +private fun TUIFloatingNavTypeButton( + contentType: Navigation, + style: TUIFloatingNavButtonStyle, + tags: TUIFloatingNavButtonTags = TUIFloatingNavButtonTags(), +) { + Row( + modifier = Modifier.padding(horizontal = 16.dp, vertical = 16.dp), + verticalAlignment = Alignment.CenterVertically + ) { + + if (contentType.leadingIcon != null) Icon( + modifier = Modifier.testTag(tags.leadingIconTag), + painter = painterResource(id = contentType.leadingIcon.iconRes), + contentDescription = contentType.leadingIcon.contentDescription, + tint = TUITheme.colors.primary, + ) + + Text( + modifier = Modifier.padding(horizontal = 8.dp), + text = contentType.text, + style = TUITheme.typography.heading6, + color = TUITheme.colors.primary + ) + + if (style == NAVIGATION) { + Icon( + modifier = Modifier.testTag(tags.trailingIconTag), + painter = painterResource(id = TarkaIcons.Filled.ChevronDown24.iconRes), + contentDescription = TarkaIcons.Filled.ChevronDown24.contentDescription, + tint = TUITheme.colors.primary, + ) + } + } +} + +@Composable fun TUIFloatingNavListButton( + contentType: List, + tags: TUIFloatingNavButtonTags = TUIFloatingNavButtonTags(), +) { + Row( + modifier = Modifier + .padding(horizontal = 4.dp, vertical = 4.dp), + verticalAlignment = Alignment.CenterVertically + ) { + if (contentType.iconOne != null) { + Icon( + modifier = Modifier + .padding(12.dp) + .clickableWithoutRipple { + if (contentType.onIconOneClick != null) { + contentType.onIconOneClick.invoke() + } + } + .testTag(tags.iconOneTag), + painter = painterResource(id = contentType.iconOne.iconRes), + contentDescription = contentType.iconOne.contentDescription, + tint = TUITheme.colors.primary + ) + } + if (contentType.iconTwo != null) { + Icon( + modifier = Modifier + .padding(12.dp) + .clickableWithoutRipple { + if (contentType.onIconTwoClick != null) { + contentType.onIconTwoClick.invoke() + } + } + .testTag(tags.iconTwoTag), + painter = painterResource(id = contentType.iconTwo.iconRes), + contentDescription = contentType.iconTwo.contentDescription, + tint = TUITheme.colors.primary, + ) + } + if (contentType.iconThree != null) { + Icon( + modifier = Modifier + .padding(12.dp) + .clickableWithoutRipple { + if (contentType.onIconThreeClick != null) { + contentType.onIconThreeClick.invoke() + } + } + .testTag(tags.iconThreeTag), + painter = painterResource(id = contentType.iconThree.iconRes), + contentDescription = contentType.iconThree.contentDescription, + tint = TUITheme.colors.primary + ) + } + } +} + +@Composable fun TUIFloatingNavBurgerButton() { + Icon( + modifier = Modifier.padding(12.dp), + painter = painterResource(id = TarkaIcons.Filled.Navigation24.iconRes), + contentDescription = TarkaIcons.Filled.Navigation24.contentDescription, + tint = TUITheme.colors.primary + ) +} + + +data class TUIFloatingNavButtonTags( + val parentTag: String = "TUIFloatingNavButton", + val leadingIconTag: String = "TUIFloatingNavButton_LeadingIcon", + val trailingIconTag: String = "TUIFloatingNavButton_TrailingIcon", + val iconOneTag: String = "TUIFloatingNavButton_Icon_One", + val iconTwoTag: String = "TUIFloatingNavButton_Icon_Two", + val iconThreeTag: String = "TUIFloatingNavButton_Icon_Three", +) + +@Preview(showBackground = true, showSystemUi = true) @Composable fun TUIFloatingNavButtonPreview() { + TUITheme { + Column( + horizontalAlignment = Alignment.CenterHorizontally + ) { + VerticalSpacer(space = 40) + TUIFloatingNavButton( + contentType = Navigation(leadingIcon = TarkaIcons.Filled.Diversity24, "Overview"), + ) + VerticalSpacer(space = 40) + TUIFloatingNavButton( + contentType = List( + iconOne = TarkaIcons.Regular.CalendarRtl24, iconTwo = TarkaIcons.Regular.Map24, + iconThree = TarkaIcons.Regular.Directions24 + ), style = LIST + ) + VerticalSpacer(space = 40) + TUIFloatingNavButton( + contentType = Navigation(leadingIcon = TarkaIcons.Filled.Diversity24, "Overview"), + style = VIEW_TOGGLE + ) + VerticalSpacer(space = 40) + TUIFloatingNavButton(contentType = Burger, style = BURGER) + } + } +} \ No newline at end of file diff --git a/tarkaui/src/main/java/com/tarkalabs/uicomponents/components/tab/TUIFloatingTab.kt b/tarkaui/src/main/java/com/tarkalabs/uicomponents/components/tab/TUIFloatingTab.kt index 68fe97ac..a9760044 100644 --- a/tarkaui/src/main/java/com/tarkalabs/uicomponents/components/tab/TUIFloatingTab.kt +++ b/tarkaui/src/main/java/com/tarkalabs/uicomponents/components/tab/TUIFloatingTab.kt @@ -64,7 +64,7 @@ import com.tarkalabs.uicomponents.theme.TUITheme Text( modifier = Modifier.padding(16.dp), text = title, - style = TUITheme.typography.body6, + style = TUITheme.typography.heading6, color = if (selected) TUITheme.colors.onPrimary else TUITheme.colors.primary ) }