Merge pull request #138 from tarkalabs/mahi/component/TUIDraggableCard

TUIDraggableCard component created with UI & ScreenShot Testing.

tarkaui/build.gradle.kts

@@ -64,7 +64,7 @@ publishing {
       run {
         groupId = "com.tarkalabs"
         artifactId = getLibraryArtifactId()
-        version = "0.56-alpha"
+        version = "0.57-alpha"
         artifact("$buildDir/outputs/aar/${getLibraryArtifactId()}-release.aar")
       }
     }

tarkaui/src/androidTest/java/com/tarkalabs/uicomponents/TUIDraggableCardTest.kt

@@ -0,0 +1,30 @@
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.test.assertIsDisplayed
+import androidx.compose.ui.test.assertIsNotFocused
+import androidx.compose.ui.test.assertIsToggleable
+import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.test.onNodeWithTag
+import androidx.compose.ui.test.onNodeWithText
+import com.tarkalabs.uicomponents.components.TUIDraggableCard
+import com.tarkalabs.uicomponents.components.TUIToggleSwitchTags
+import org.junit.Rule
+import org.junit.Test
+
+class TUIDraggableCardTest {
+  @get:Rule val composable = createComposeRule()
+
+  @Test fun is_passed_things_shown() {
+    val testTitle = "test"
+    val initialSwitchState = false
+    composable.setContent {
+      TUIDraggableCard(
+        dragIconModifier = Modifier,
+        onSwitchCheckedChange = {},
+        switchCheckedState = initialSwitchState,
+        title = testTitle
+      )
+    }
+    composable.onNodeWithText(testTitle).assertExists().assertIsDisplayed()
+    composable.onNodeWithTag(TUIToggleSwitchTags().parentTag).assertIsToggleable().assertIsNotFocused()
+  }
+}

tarkaui/src/androidTest/java/com/tarkalabs/uicomponents/screenshots/TUIDraggableCardScreenshotTest.kt

@@ -0,0 +1,39 @@
+package com.tarkalabs.uicomponents.screenshots
+
+import androidx.compose.ui.Modifier
+import com.tarkalabs.uicomponents.components.TUIDraggableCard
+import org.junit.Test
+import org.junit.runner.RunWith
+import org.junit.runners.Parameterized
+
+@RunWith(Parameterized::class)
+class TUIDraggableCardScreenshotTest(
+  private val testName: String,
+  private val switchState: Boolean,
+  private val darkTheme: Boolean,
+) : ComposeScreenshotComparator() {
+
+  companion object {
+    @JvmStatic
+    @Parameterized.Parameters
+    fun data(): Collection<Array<Any>> {
+      return mutableListOf<Array<Any>>().apply {
+        for (darkTheme in listOf(true, false)) {
+          for (switchState in listOf(true, false)) {
+            val testName = "switchState_${switchState}darkTheme_${darkTheme}"
+            add(arrayOf(testName, switchState, darkTheme))
+          }
+        }
+      }
+    }
+  }
+
+  @Test fun renderTUIDraggableCard() =
+    compareScreenshotFor(darkTheme, "DraggableCard_$testName") {
+      TUIDraggableCard(
+        dragIconModifier = Modifier,
+        switchCheckedState = switchState,
+        title = "Description 1",
+        onSwitchCheckedChange = {})
+    }
+}

tarkaui/src/main/java/com/tarkalabs/uicomponents/components/TUIDraggableCard.kt

@@ -0,0 +1,114 @@
+package com.tarkalabs.uicomponents.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+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.graphics.graphicsLayer
+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 androidx.compose.ui.zIndex
+import com.tarkalabs.tarkaicons.ReOrderDotsVertical24
+import com.tarkalabs.tarkaicons.TarkaIcons
+import com.tarkalabs.uicomponents.theme.TUITheme
+
+/**
+ *This Component is used to show the list of Cards those can be dragged vertically & re-arranged by the users.
+ *
+ * @param modifier - used to modify the parent (Row) attributes
+ * @param dragIconModifier - a modifier with dragListener & used in trailingIcon which is used to consume drag events.
+ * @param title - title text of the card which usually contains tab Name in TabConfigure Screen in Technician Settings.
+ * @param switchCheckedState - initial checked status of the switch
+ * @param onSwitchCheckedChange - callback which invokes when switch state changes
+ * @param tags - tags used to pick the compose items while testing
+ */
+@Composable
+fun TUIDraggableCard(
+  modifier: Modifier = Modifier,
+  dragIconModifier: Modifier,
+  title: String,
+  switchCheckedState: Boolean,
+  onSwitchCheckedChange: () -> Unit,
+  isDragging: Boolean = false,
+  tags: TUIDraggableCardTags = TUIDraggableCardTags(),
+) {
+  Row(
+    modifier = modifier
+      .testTag(tags.parentTag)
+      .fillMaxWidth()
+      .background(color = TUITheme.colors.surface, shape = RoundedCornerShape(16.dp))
+      .padding(top = 8.dp, bottom = 8.dp, start = 8.dp, end = 16.dp)
+      .zIndex(if (isDragging) 1f else 0f)
+      .graphicsLayer {
+        shadowElevation = if (isDragging) 8f else 0f
+      },
+    verticalAlignment = Alignment.CenterVertically,
+    horizontalArrangement = Arrangement.SpaceAround
+  ) {
+
+    Icon(
+      modifier = dragIconModifier
+        .testTag(tags.leadReOrderIconTag)
+        .size(48.dp)
+        .padding(12.dp),
+      painter = painterResource(id = TarkaIcons.Regular.ReOrderDotsVertical24.iconRes),
+      contentDescription = TarkaIcons.Regular.ReOrderDotsVertical24.contentDescription
+    )
+
+    Text(
+      modifier = Modifier
+        .weight(1f)
+        .padding(horizontal = 16.dp),
+      text = title,
+      color = TUITheme.colors.inputText,
+      style = TUITheme.typography.heading6,
+    )
+
+    TUIToggleSwitch(state = switchCheckedState, onToggleChange = onSwitchCheckedChange)
+  }
+}
+
+data class TUIDraggableCardTags(
+  val parentTag: String = "TUIDraggableCard",
+  val leadReOrderIconTag: String = "TUIDraggableCard_DragIcon",
+)
+
+@Preview
+@Composable
+fun TUIDraggableCardPreview() {
+
+  Column(modifier = Modifier.background(color = TUITheme.colors.onSurface)) {
+
+    VerticalSpacer(space = 5)
+
+    TUIDraggableCard(
+      title = "Description 1",
+      switchCheckedState = true,
+      onSwitchCheckedChange = {},
+      dragIconModifier = Modifier
+    )
+
+    VerticalSpacer(space = 5)
+
+    TUIDraggableCard(
+      title = "Description 2",
+      switchCheckedState = false,
+      onSwitchCheckedChange = {},
+      dragIconModifier = Modifier
+    )
+
+    VerticalSpacer(space = 5)
+
+  }
+}

tarkaui/src/main/java/com/tarkalabs/uicomponents/components/TUIToggleSwitch.kt

@@ -39,14 +39,15 @@ import com.tarkalabs.uicomponents.theme.TUITheme
  */
 
 @Composable fun TUIToggleSwitch(
+  modifier: Modifier = Modifier,
   state: Boolean, enabled: Boolean = true,
   tags: TUIToggleSwitchTags = TUIToggleSwitchTags(),
   onToggleChange: () -> Unit
 ) {
   var switchCheckedState by remember { mutableStateOf(state) }
   TUITheme {
     Switch(
-      modifier = Modifier.testTag(tags.parentTag),
+      modifier = modifier.testTag(tags.parentTag),
       checked = switchCheckedState, enabled = enabled, onCheckedChange = {
         switchCheckedState = it
         onToggleChange()