added second color for quantity picker add icon

libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityAddIcon.kt

@@ -1,31 +1,79 @@
 package com.trendyol.uicomponents.quantitypicker
 
+import androidx.compose.animation.Animatable
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.Icon
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+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.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.launch
 
 @Composable
 internal fun QuantityAddIcon(
     icons: QuantityIcons,
     quantityData: QuantityPickerViewData,
     onAddClick: (() -> Unit)?
 ) {
+    val coroutineScope = rememberCoroutineScope()
+    var targetBackgroundColor by remember {
+        mutableStateOf(icons.addIconBackgroundColor ?: Color.White)
+    }
+    var iconTintColor by remember { mutableStateOf(Color.White) }
+    val animatedBackgroundColor = remember { Animatable(targetBackgroundColor) }
+
+    LaunchedEffect(key1 = quantityData.currentQuantity) {
+        iconTintColor = quantityData.getAddIconColor(icons, quantityData.currentQuantity)
+    }
+
+    val setTargetBackgroundColor: (color: Color) -> Unit = remember {
+        { color ->
+            if (targetBackgroundColor != color) {
+                targetBackgroundColor = color
+                coroutineScope.launch {
+                    animatedBackgroundColor.animateTo(
+                        targetValue = targetBackgroundColor,
+                        animationSpec = tween(500)
+                    )
+                }
+            }
+        }
+    }
+
+    LaunchedEffect(key1 = quantityData.currentQuantity) {
+        setTargetBackgroundColor.invoke(quantityData.getBackgroundColor(icons))
+    }
+
     Icon(
         painter = painterResource(id = icons.addIconResId),
-        tint = quantityData.getAddIconColor(icons.iconColor, icons.disabledColor),
+        tint = iconTintColor,
         contentDescription = null,
         modifier = Modifier
+            .clip(CircleShape)
+            .background(animatedBackgroundColor.value)
+            .padding(8.dp)
             .clickable(
-                enabled = quantityData.isAddButtonEnabled(),
-                onClick = { onAddClick?.invoke() },
-                interactionSource = MutableInteractionSource(),
                 indication = null,
+                interactionSource = MutableInteractionSource(),
+                enabled = quantityData.isAddButtonEnabled(),
+                onClick = {
+                    setTargetBackgroundColor.invoke(Color.White)
+                    iconTintColor = icons.iconColor
+                    onAddClick?.invoke()
+                }
             )
-            .padding(8.dp)
     )
 }

libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityIcons.kt

@@ -10,6 +10,7 @@ data class QuantityIcons(
     @DrawableRes val removeIconResId: Int? = R.drawable.ic_trash,
     val iconColor: Color,
     val disabledColor: Color,
+    val addIconBackgroundColor: Color? = null,
 ) {
     companion object {
         val default = QuantityIcons(

libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityPicker.kt

@@ -201,4 +201,13 @@ private fun PreviewSubtractButtonDisabledQuantityPicker() {
     QuantityPicker(
         quantityData = QuantityPickerViewData(currentQuantity = 2, minQuantity = 3),
     )
+}
+
+@Preview
+@Composable
+private fun PreviewAddButtonVisibleQuantityPicker() {
+    QuantityPicker(
+        icons = QuantityIcons.default.copy(addIconBackgroundColor = QuantityPickerDefaults.defaultColor),
+        quantityData = QuantityPickerViewData(currentQuantity = 0),
+    )
 }

libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityPickerViewData.kt

@@ -15,10 +15,25 @@ data class QuantityPickerViewData(
         return maxQuantity != -1
     }
 
-    fun getAddIconColor(iconTintColor: Color, disableTintColor: Color): Color {
-        return if (isAddButtonEnabled()) iconTintColor else disableTintColor
+    fun getAddIconColor(
+        icons: QuantityIcons,
+        currentQuantity: Int
+    ): Color {
+        val iconColor = if (currentQuantity == 0 && icons.addIconBackgroundColor != null) {
+            Color.White
+        } else {
+            icons.iconColor
+        }
+        return if (isAddButtonEnabled()) iconColor else icons.disabledColor
     }
 
+    fun getBackgroundColor(
+        icons: QuantityIcons
+    ): Color = if (currentQuantity == 0) {
+        icons.addIconBackgroundColor ?: Color.White
+    } else Color.White
+
+
     fun isSubtractButtonEnabled(): Boolean {
         return (currentQuantity > minQuantity)
     }

sample-compose/src/main/java/com/trendyol/uicomponents/samplecompose/QuantityPickerScreen.kt

@@ -15,6 +15,8 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import com.trendyol.uicomponents.quantitypicker.QuantityIcons
+import com.trendyol.uicomponents.quantitypicker.QuantityPickerDefaults
 import com.trendyol.uicomponents.quantitypicker.QuantityPickerDirection
 import com.trendyol.uicomponents.quantitypicker.QuantityPickerViewData
 import com.trendyol.uicomponents.samplecompose.ui.productcard.ProductCard
@@ -150,6 +152,9 @@ private fun ProductSliderSection() {
         ) {
             items(products) { product ->
                 ProductCard(
+                    quantityPickerIcons = QuantityIcons.default.copy(
+                        addIconBackgroundColor = QuantityPickerDefaults.defaultColor
+                    ),
                     productData = product,
                     modifier = Modifier.padding(
                         end = 14.dp,

sample-compose/src/main/java/com/trendyol/uicomponents/samplecompose/ui/productcard/ProductCard.kt

@@ -13,6 +13,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
+import com.trendyol.uicomponents.quantitypicker.QuantityIcons
 import com.trendyol.uicomponents.quantitypicker.QuantityPicker
 import com.trendyol.uicomponents.quantitypicker.QuantityPickerDirection
 import com.trendyol.uicomponents.sample.compose.R
@@ -22,6 +23,7 @@ import com.trendyol.uicomponents.samplecompose.ui.theme.Typography
 fun ProductCard(
     modifier: Modifier = Modifier,
     productData: ProductCardData,
+    quantityPickerIcons: QuantityIcons = QuantityIcons.default,
     direction: QuantityPickerDirection = QuantityPickerDirection.VERTICAL,
     onAddClick: ((ProductCardData) -> Unit),
     onSubtractClick: ((ProductCardData) -> Unit)
@@ -52,6 +54,7 @@ fun ProductCard(
             val pickerAlignment = if (direction == QuantityPickerDirection.VERTICAL)
                 Alignment.TopEnd else Alignment.TopStart
             QuantityPicker(
+                icons = quantityPickerIcons,
                 modifier = modifier.align(pickerAlignment),
                 direction = direction,
                 quantityData = productData.quantityData,