Merge pull request #173 from tarkalabs/ms/floating_nav_list_type

UI Component: Floating Navigation Button

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,

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,

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)
+    }
+  }
+}

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
     )
   }