[#327] Replace action buttons switches by a counter and factorize cus…

…tomization between card variants
Orange-OpenSource · Nov 23, 2022 · 96170bc · 96170bc
1 parent 9c60fa6
commit 96170bc
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 131 deletions.
diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardCustomizationState.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardCustomizationState.kt
@@ -22,24 +22,28 @@ fun rememberCardCustomizationState(
     thumbnailChecked: MutableState<Boolean> = rememberSaveable { mutableStateOf(true) },
     textChecked: MutableState<Boolean> = rememberSaveable { mutableStateOf(true) },
     subtitleChecked: MutableState<Boolean> = rememberSaveable { mutableStateOf(true) },
-    button1Checked: MutableState<Boolean> = rememberSaveable { mutableStateOf(true) },
-    button2Checked: MutableState<Boolean> = rememberSaveable { mutableStateOf(true) }
+    actionButtonCount: MutableState<Int> = rememberSaveable { mutableStateOf(CardCustomizationState.MinActionButtonCount) }
 ) =
-    remember(clickable, thumbnailChecked, textChecked, subtitleChecked, button1Checked, button2Checked) {
-        CardCustomizationState(clickable, thumbnailChecked, textChecked, subtitleChecked, button1Checked, button2Checked)
+    remember(clickable, thumbnailChecked, textChecked, subtitleChecked, actionButtonCount) {
+        CardCustomizationState(clickable, thumbnailChecked, textChecked, subtitleChecked, actionButtonCount)
     }
 
 class CardCustomizationState(
     val clickable: MutableState<Boolean>,
     val thumbnailChecked: MutableState<Boolean>,
     val textChecked: MutableState<Boolean>,
     val subtitleChecked: MutableState<Boolean>,
-    val button1Checked: MutableState<Boolean>,
-    val button2Checked: MutableState<Boolean>
+    val actionButtonCount: MutableState<Int>
 ) {
+
+    companion object {
+        const val MinActionButtonCount = 0
+        const val MaxActionButtonCount = 2
+    }
+
     val isClickable
         get() = clickable.value
-    
+
     val hasThumbnail
         get() = thumbnailChecked.value
 
@@ -50,8 +54,8 @@ class CardCustomizationState(
         get() = subtitleChecked.value
 
     val hasButton1
-        get() = button1Checked.value
+        get() = actionButtonCount.value > 0
 
     val hasButton2
-        get() = button2Checked.value
+        get() = actionButtonCount.value > 1
 }
diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardImageFirst.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardImageFirst.kt
@@ -16,8 +16,6 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.rememberBottomSheetScaffoldState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
@@ -26,51 +24,37 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import com.orange.ods.compose.component.card.OdsImageFirstCard
 import com.orange.ods.demo.R
-import com.orange.ods.demo.ui.components.utilities.ComponentCustomizationBottomSheetScaffold
 import com.orange.ods.demo.ui.components.utilities.clickOnElement
-import com.orange.ods.demo.ui.utilities.composable.SwitchListItem
 
-@OptIn(ExperimentalMaterialApi::class)
 @Composable
-fun CardImageFirst() {
+fun CardImageFirst(customizationState: CardCustomizationState) {
     val context = LocalContext.current
-    val cardCustomizationState = rememberCardCustomizationState()
 
-    with(cardCustomizationState) {
-        ComponentCustomizationBottomSheetScaffold(
-            bottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
-            bottomSheetContent = {
-                SwitchListItem(labelRes = R.string.component_card_clickable, checked = clickable)
-                SwitchListItem(labelRes = R.string.component_element_subtitle, checked = subtitleChecked)
-                SwitchListItem(labelRes = R.string.component_element_text, checked = textChecked)
-                SwitchListItem(labelRes = R.string.component_element_button1, checked = button1Checked)
-                SwitchListItem(labelRes = R.string.component_element_button2, checked = button2Checked)
-            }) {
-            Column(
-                modifier = Modifier
-                    .fillMaxSize()
-                    .padding(dimensionResource(id = R.dimen.spacing_m))
-                    .verticalScroll(state = rememberScrollState()),
-                verticalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.spacing_m))
-            ) {
-                val button1Text = stringResource(id = R.string.component_element_button1)
-                val button2Text = stringResource(id = R.string.component_element_button2)
-                val cardContainerText = stringResource(id = R.string.component_card_element_container)
+    with(customizationState) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(dimensionResource(id = R.dimen.spacing_m))
+                .verticalScroll(state = rememberScrollState()),
+            verticalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.spacing_m))
+        ) {
+            val button1Text = stringResource(id = R.string.component_element_button1)
+            val button2Text = stringResource(id = R.string.component_element_button2)
+            val cardContainerText = stringResource(id = R.string.component_card_element_container)
 
-                OdsImageFirstCard(
-                    title = stringResource(id = R.string.component_element_title),
-                    image = painterResource(id = R.drawable.placeholder),
-                    subtitle = if (hasSubtitle) stringResource(id = R.string.component_element_subtitle) else null,
-                    text = if (hasText) stringResource(id = R.string.component_element_text_value) else null,
-                    onCardClick = if (isClickable) {
-                        { clickOnElement(context, cardContainerText) }
-                    } else null,
-                    button1Text = if (hasButton1) button1Text else null,
-                    onButton1Click = { clickOnElement(context, button1Text) },
-                    button2Text = if (hasButton2) button2Text else null,
-                    onButton2Click = { clickOnElement(context, button2Text) }
-                )
-            }
+            OdsImageFirstCard(
+                title = stringResource(id = R.string.component_element_title),
+                image = painterResource(id = R.drawable.placeholder),
+                subtitle = if (hasSubtitle) stringResource(id = R.string.component_element_subtitle) else null,
+                text = if (hasText) stringResource(id = R.string.component_element_text_value) else null,
+                onCardClick = if (isClickable) {
+                    { clickOnElement(context, cardContainerText) }
+                } else null,
+                button1Text = if (hasButton1) button1Text else null,
+                onButton1Click = { clickOnElement(context, button1Text) },
+                button2Text = if (hasButton2) button2Text else null,
+                onButton2Click = { clickOnElement(context, button2Text) }
+            )
         }
     }
 }
diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardSmall.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardSmall.kt
@@ -15,8 +15,6 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.rememberBottomSheetScaffoldState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
@@ -25,42 +23,31 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import com.orange.ods.compose.component.card.OdsSmallCard
 import com.orange.ods.demo.R
-import com.orange.ods.demo.ui.components.utilities.ComponentCustomizationBottomSheetScaffold
 import com.orange.ods.demo.ui.components.utilities.clickOnElement
-import com.orange.ods.demo.ui.utilities.composable.SwitchListItem
 
-@OptIn(ExperimentalMaterialApi::class)
 @Composable
-fun CardSmall() {
+fun CardSmall(customizationState: CardCustomizationState) {
     val context = LocalContext.current
-    val cardCustomizationState = rememberCardCustomizationState()
 
-    with(cardCustomizationState) {
-        ComponentCustomizationBottomSheetScaffold(
-            bottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
-            bottomSheetContent = {
-                SwitchListItem(labelRes = R.string.component_card_clickable, checked = clickable)
-                SwitchListItem(labelRes = R.string.component_element_subtitle, checked = subtitleChecked)
-            }) {
-            Row(
-                modifier = Modifier
-                    .fillMaxSize()
-                    .padding(dimensionResource(id = R.dimen.spacing_m)),
-                horizontalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.spacing_m)),
-            ) {
-                val cardContainerText = stringResource(id = R.string.component_card_element_container)
+    with(customizationState) {
+        Row(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(dimensionResource(id = R.dimen.spacing_m)),
+            horizontalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.spacing_m)),
+        ) {
+            val cardContainerText = stringResource(id = R.string.component_card_element_container)
 
-                OdsSmallCard(
-                    modifier = Modifier.weight(0.5f),
-                    image = painterResource(id = R.drawable.placeholder),
-                    title = stringResource(id = R.string.component_element_title),
-                    subtitle = if (subtitleChecked.value) stringResource(id = R.string.component_element_subtitle) else null,
-                    onCardClick = if (isClickable) {
-                        { clickOnElement(context, cardContainerText) }
-                    } else null
-                )
-                Box(modifier = Modifier.weight(0.5f))
-            }
+            OdsSmallCard(
+                modifier = Modifier.weight(0.5f),
+                image = painterResource(id = R.drawable.placeholder),
+                title = stringResource(id = R.string.component_element_title),
+                subtitle = if (subtitleChecked.value) stringResource(id = R.string.component_element_subtitle) else null,
+                onCardClick = if (isClickable) {
+                    { clickOnElement(context, cardContainerText) }
+                } else null
+            )
+            Box(modifier = Modifier.weight(0.5f))
         }
     }
 }
diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardTitleFirst.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardTitleFirst.kt
@@ -16,8 +16,6 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.rememberBottomSheetScaffoldState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
@@ -26,53 +24,38 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import com.orange.ods.compose.component.card.OdsTitleFirstCard
 import com.orange.ods.demo.R
-import com.orange.ods.demo.ui.components.utilities.ComponentCustomizationBottomSheetScaffold
 import com.orange.ods.demo.ui.components.utilities.clickOnElement
-import com.orange.ods.demo.ui.utilities.composable.SwitchListItem
 
-@OptIn(ExperimentalMaterialApi::class)
 @Composable
-fun CardTitleFirst() {
+fun CardTitleFirst(customizationState: CardCustomizationState) {
     val context = LocalContext.current
-    val cardCustomizationState = rememberCardCustomizationState()
 
-    with(cardCustomizationState) {
-        ComponentCustomizationBottomSheetScaffold(
-            bottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
-            bottomSheetContent = {
-                SwitchListItem(labelRes = R.string.component_card_clickable, checked = clickable)
-                SwitchListItem(labelRes = R.string.component_element_thumbnail, checked = thumbnailChecked)
-                SwitchListItem(labelRes = R.string.component_element_subtitle, checked = subtitleChecked)
-                SwitchListItem(labelRes = R.string.component_element_text, checked = textChecked)
-                SwitchListItem(labelRes = R.string.component_element_button1, checked = button1Checked)
-                SwitchListItem(labelRes = R.string.component_element_button2, checked = button2Checked)
-            }) {
-            Column(
-                modifier = Modifier
-                    .fillMaxSize()
-                    .padding(dimensionResource(id = R.dimen.spacing_m))
-                    .verticalScroll(state = rememberScrollState()),
-                verticalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.spacing_m))
-            ) {
-                val button1Text = stringResource(id = R.string.component_element_button1)
-                val button2Text = stringResource(id = R.string.component_element_button2)
-                val cardContainerText = stringResource(id = R.string.component_card_element_container)
+    with(customizationState) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(dimensionResource(id = R.dimen.spacing_m))
+                .verticalScroll(state = rememberScrollState()),
+            verticalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.spacing_m))
+        ) {
+            val button1Text = stringResource(id = R.string.component_element_button1)
+            val button2Text = stringResource(id = R.string.component_element_button2)
+            val cardContainerText = stringResource(id = R.string.component_card_element_container)
 
-                OdsTitleFirstCard(
-                    title = stringResource(id = R.string.component_element_title),
-                    image = painterResource(id = R.drawable.placeholder),
-                    thumbnail = if (hasThumbnail) painterResource(id = R.drawable.placeholder) else null,
-                    subtitle = if (hasSubtitle) stringResource(id = R.string.component_element_subtitle) else null,
-                    text = if (hasText) stringResource(id = R.string.component_element_text_value) else null,
-                    onCardClick = if (isClickable) {
-                        { clickOnElement(context, cardContainerText) }
-                    } else null,
-                    button1Text = if (hasButton1) button1Text else null,
-                    onButton1Click = { clickOnElement(context, button1Text) },
-                    button2Text = if (hasButton2) button2Text else null,
-                    onButton2Click = { clickOnElement(context, button2Text) }
-                )
-            }
+            OdsTitleFirstCard(
+                title = stringResource(id = R.string.component_element_title),
+                image = painterResource(id = R.drawable.placeholder),
+                thumbnail = if (hasThumbnail) painterResource(id = R.drawable.placeholder) else null,
+                subtitle = if (hasSubtitle) stringResource(id = R.string.component_element_subtitle) else null,
+                text = if (hasText) stringResource(id = R.string.component_element_text_value) else null,
+                onCardClick = if (isClickable) {
+                    { clickOnElement(context, cardContainerText) }
+                } else null,
+                button1Text = if (hasButton1) button1Text else null,
+                onButton1Click = { clickOnElement(context, button1Text) },
+                button2Text = if (hasButton2) button2Text else null,
+                onButton2Click = { clickOnElement(context, button2Text) }
+            )
         }
     }
 }
diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/cards/ComponentCard.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/cards/ComponentCard.kt
@@ -10,15 +10,55 @@
 
 package com.orange.ods.demo.ui.components.cards
 
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.rememberBottomSheetScaffoldState
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.stringResource
+import com.orange.ods.demo.R
 import com.orange.ods.demo.ui.components.Variant
+import com.orange.ods.demo.ui.components.utilities.ComponentCountRow
+import com.orange.ods.demo.ui.components.utilities.ComponentCustomizationBottomSheetScaffold
+import com.orange.ods.demo.ui.utilities.composable.SwitchListItem
 
+@OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun ComponentCard(variant: Variant) {
-    when (variant) {
-        Variant.CardImageFirst -> CardImageFirst()
-        Variant.CardSmall -> CardSmall()
-        Variant.CardTitleFirst -> CardTitleFirst()
-        else -> {}
+    val cardCustomizationState = rememberCardCustomizationState()
+
+    with(cardCustomizationState) {
+        ComponentCustomizationBottomSheetScaffold(
+            bottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
+            bottomSheetContent = {
+                SwitchListItem(labelRes = R.string.component_card_clickable, checked = clickable)
+                if (variant == Variant.CardTitleFirst) {
+                    SwitchListItem(labelRes = R.string.component_element_thumbnail, checked = thumbnailChecked)
+                }
+                SwitchListItem(labelRes = R.string.component_element_subtitle, checked = subtitleChecked)
+                if (variant in listOf(Variant.CardTitleFirst, Variant.CardImageFirst)) {
+                    SwitchListItem(labelRes = R.string.component_element_text, checked = textChecked)
+                    ComponentCountRow(
+                        title = stringResource(id = R.string.component_card_action_button_count),
+                        count = actionButtonCount,
+                        minusIconContentDescription = stringResource(id = R.string.component_card_remove_action_button),
+                        plusIconContentDescription = stringResource(id = R.string.component_card_add_action_button),
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = dimensionResource(id = R.dimen.screen_horizontal_margin)),
+                        minCount = CardCustomizationState.MinActionButtonCount,
+                        maxCount = CardCustomizationState.MaxActionButtonCount
+                    )
+                }
+            }) {
+            when (variant) {
+                Variant.CardImageFirst -> CardImageFirst(customizationState = cardCustomizationState)
+                Variant.CardSmall -> CardSmall(customizationState = cardCustomizationState)
+                Variant.CardTitleFirst -> CardTitleFirst(customizationState = cardCustomizationState)
+                else -> {}
+            }
+        }
     }
 }
diff --git a/demo/src/main/res/values/strings.xml b/demo/src/main/res/values/strings.xml
@@ -139,7 +139,9 @@
     <string name="component_card_description">Cards are important components that can be used to organise and present a number of different types of related information.</string>
     <string name="component_card_element_container">Card container</string>
     <string name="component_card_clickable">Clickable card</string>
-
+    <string name="component_card_action_button_count">Action buttons</string>
+    <string name="component_card_remove_action_button">Remove action button</string>
+    <string name="component_card_add_action_button">Add action button</string>
 
     <!-- Component Checkboxes -->
     <string name="component_checkboxes">Checkboxes</string>