[#115] Update banner component

demo/src/main/java/com/orange/ods/demo/ui/components/Component.kt

@@ -74,7 +74,7 @@ sealed class Component(
 
     object Banners : Component(
         R.string.component_banners,
-        R.drawable.il_snackbars,
+        R.drawable.il_banners,
         null,
         R.string.component_banners_description,
         composableName = OdsComponent.OdsBanner.name

demo/src/main/java/com/orange/ods/demo/ui/components/banners/BannerCustomizationState.kt

@@ -0,0 +1,55 @@
+/*
+ *
+ *  Copyright 2021 Orange
+ *
+ *  Use of this source code is governed by an MIT-style
+ *  license that can be found in the LICENSE file or at
+ *  https://opensource.org/licenses/MIT.
+ * /
+ */
+
+package com.orange.ods.demo.ui.components.banners
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+
+@Composable
+fun rememberBannerCustomizationState(
+    buttonsCount: MutableState<Int> = rememberSaveable { mutableStateOf(BannerCustomizationState.MinActionButtonCount) },
+    textLinesCount: MutableState<Int> = rememberSaveable { mutableStateOf(BannerCustomizationState.MaxTextCount) },
+    dividerChecked: MutableState<Boolean> = rememberSaveable { mutableStateOf(true) },
+    iconChecked: MutableState<Boolean> = rememberSaveable { mutableStateOf(false) }
+) =
+    remember(buttonsCount, textLinesCount, dividerChecked, iconChecked) {
+        BannerCustomizationState(buttonsCount, textLinesCount, dividerChecked, iconChecked)
+    }
+
+class BannerCustomizationState(
+    val buttonsCount: MutableState<Int>,
+    val textLinesCount: MutableState<Int>,
+    val dividerChecked: MutableState<Boolean>,
+    val iconChecked: MutableState<Boolean>,
+) {
+
+    companion object {
+        const val MinActionButtonCount = 1
+        const val MaxActionButtonCount = 2
+        const val MinTextCount = 1
+        const val MaxTextCount = 2
+    }
+
+    val hasDivider
+        get() = dividerChecked.value
+
+    val hasIcon
+        get() = iconChecked.value
+
+    val hasButton
+        get() = buttonsCount.value > 1
+
+    val hasTextLines
+        get() = textLinesCount.value > 1
+}

demo/src/main/java/com/orange/ods/demo/ui/components/banners/ComponentBanners.kt

@@ -11,18 +11,20 @@
 package com.orange.ods.demo.ui.components.banners
 
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.rememberBottomSheetScaffoldState
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import com.orange.ods.compose.component.OdsComponent
 import com.orange.ods.compose.component.banner.OdsBanner
 import com.orange.ods.compose.component.list.OdsListItem
 import com.orange.ods.compose.component.list.OdsSwitchTrailing
 import com.orange.ods.demo.R
+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.CodeImplementationColumn
 import com.orange.ods.demo.ui.utilities.composable.CommonTechnicalTextColumn
@@ -32,42 +34,61 @@ import com.orange.ods.demo.ui.utilities.composable.TechnicalText
 @Composable
 fun ComponentBanners() {
 
-    val actionIconChecked = rememberSaveable { mutableStateOf(false) }
-    val actionOnNewLineChecked = rememberSaveable { mutableStateOf(false) }
-    if (!actionOnNewLineChecked.value) {
-        actionIconChecked.value = false
-    }
-
-    ComponentCustomizationBottomSheetScaffold(
-        bottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
-        bottomSheetContent = {
-            OdsListItem(
-                text = stringResource(id = R.string.component_banners_twoButtom),
-                trailing = OdsSwitchTrailing(checked = actionOnNewLineChecked)
-            )
-            OdsListItem(
-                text = stringResource(id = R.string.component_banners_image),
-                trailing = OdsSwitchTrailing(checked = actionIconChecked, enabled = actionOnNewLineChecked.value)
-            )
-        }
-    ) {
-        Column {
-            OdsBanner(
-                message = if (actionOnNewLineChecked.value) stringResource(id = R.string.component_banners_twoLine) else stringResource(id = R.string.component_banners_oneLine),
-                actionLabel = stringResource(id = R.string.component_snackbar_action_label),
-                actionOnNewLine = !actionOnNewLineChecked.value,
-                image = if (actionIconChecked.value) painterResource(id = com.orange.ods.R.drawable.placeholder) else null
-            )
+    val bannerCustomizationState = rememberBannerCustomizationState()
 
-            CodeImplementationColumn {
-                CommonTechnicalTextColumn(
-                    componentName = OdsComponent.OdsBanner.name
-                ) {
-                    if (actionOnNewLineChecked.value) TechnicalText(text = " message = \"${stringResource(id = R.string.component_banners_twoLine)}\"")
-                    else TechnicalText(text = "Message : \"${stringResource(id = R.string.component_banners_oneLine)}\"")
-                    TechnicalText("")
-                    if (actionIconChecked.value) TechnicalText(text = " image = painterResource(id = R.drawable.placeholder)")
+    with(bannerCustomizationState) {
+        ComponentCustomizationBottomSheetScaffold(
+            bottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
+            bottomSheetContent = {
+                ComponentCountRow(
+                    title = stringResource(id = R.string.component_banners_textLines),
+                    count = textLinesCount,
+                    minusIconContentDescription = stringResource(id = R.string.component_card_remove_action_button),
+                    plusIconContentDescription = stringResource(id = R.string.component_card_add_action_button),
+                    modifier = Modifier.padding(start = dimensionResource(id = R.dimen.screen_horizontal_margin)),
+                    minCount = BannerCustomizationState.MinTextCount,
+                    maxCount = BannerCustomizationState.MaxTextCount
+                )
+                ComponentCountRow(
+                    title = stringResource(id = R.string.component_banners_Buttons),
+                    count = buttonsCount,
+                    minusIconContentDescription = stringResource(id = R.string.component_banner_remove_action_button),
+                    plusIconContentDescription = stringResource(id = R.string.component_banner_add_action_button),
+                    modifier = Modifier.padding(start = dimensionResource(id = R.dimen.screen_horizontal_margin)),
+                    minCount = BannerCustomizationState.MinActionButtonCount,
+                    maxCount = BannerCustomizationState.MaxActionButtonCount
+                )
+                OdsListItem(
+                    text = stringResource(id = R.string.component_banners_image),
+                    trailing = OdsSwitchTrailing(checked = iconChecked, enabled = hasTextLines)
+                )
+                OdsListItem(
+                    text = stringResource(id = R.string.component_banners_divider),
+                    trailing = OdsSwitchTrailing(checked = dividerChecked)
+                )
+            }
+        ) {
+            Column {
+                OdsBanner(
+                    message = if (hasTextLines) stringResource(id = R.string.component_banners_twoLine) else stringResource(id = R.string.component_banners_oneLine),
+                    button1Text = stringResource(id = R.string.component_snackbar_action_label),
+                    buttonText = if (hasTextLines && hasButton) stringResource(id = R.string.component_snackbar_action_label) else null,
+                    actionOnNewLine = !hasTextLines,
+                    image = if (hasIcon) painterResource(id = com.orange.ods.R.drawable.placeholder) else null,
+                    divider = hasDivider
+                )
 
+                CodeImplementationColumn {
+                    CommonTechnicalTextColumn(
+                        componentName = OdsComponent.OdsBanner.name
+                    ) {
+                        if (hasTextLines) TechnicalText(text = " message = \"${stringResource(id = R.string.component_banners_twoLine)}\"")
+                        else TechnicalText(text = " message = \"${stringResource(id = R.string.component_banners_oneLine)}\"")
+                        TechnicalText("")
+                        TechnicalText(" divider = $hasDivider")
+                        TechnicalText("")
+                        if (hasIcon) TechnicalText(text = " image = painterResource(id = R.drawable.placeholder)")
+                    }
                 }
             }
         }

demo/src/main/res/drawable/il_banners.xml

@@ -0,0 +1,48 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="360dp"
+    android:height="180dp"
+    android:viewportWidth="360"
+    android:viewportHeight="180">
+  <path
+      android:pathData="M0,0h360v180h-360z"
+      android:strokeWidth="1"
+      android:fillColor="#1B1B1B"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M60,60h240v60h-240z"
+      android:strokeWidth="1"
+      android:fillColor="#333333"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M90,86m-14,0a14,14 0,1 1,28 0a14,14 0,1 1,-28 0"
+      android:strokeWidth="1"
+      android:fillColor="#D8D8D8"
+      android:strokeColor="#979797"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M112,76h172v5h-172z"
+      android:strokeWidth="1"
+      android:fillColor="#CCCCCC"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M112,89h95v5h-95z"
+      android:strokeWidth="1"
+      android:fillColor="#CCCCCC"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M254,107h30v5h-30z"
+      android:strokeWidth="1"
+      android:fillColor="#FF7900"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M216,107h30v5h-30z"
+      android:strokeWidth="1"
+      android:fillColor="#FF7900"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+</vector>

demo/src/main/res/values/strings.xml

@@ -106,8 +106,12 @@
 
     <!-- Components Banners -->
     <string name="component_banners">Banners</string>
-    <string name="component_banners_twoButtom">Two lines</string>
-    <string name="component_banners_image">Two lines with image</string>
+    <string name="component_banners_textLines">Text lines count</string>
+    <string name="component_banners_Buttons">Buttons count</string>
+    <string name="component_banners_divider">Divider</string>
+    <string name="component_banners_image">Image</string>
+    <string name="component_banner_remove_action_button">Remove Line</string>
+    <string name="component_banner_add_action_button">Add Line</string>
     <string name="component_banners_description">A banner displays an important message which requires an action to be dismissed.</string>
     <string name="component_banners_oneLine">One line text string with one action.</string>
     <string name="component_banners_twoLine">Two lines text string with two actions. One to two lines is preferable on mobile and tablet.</string>

lib/src/main/java/com/orange/ods/compose/component/banner/OdsBanner.kt

@@ -42,24 +42,30 @@ import com.orange.ods.compose.text.OdsTextBody2
  * <a href="https://system.design.orange.com/0c1af118d/p/19a040-banners/b/497b77" class="external" target="_blank">ODS banners</a>.
  *
  *
- * @param message text displayed in the banner
- * @param modifier modifiers for the Banner layout
- * @param image image display in the banner
- * @param actionLabel if set, it displays an [OdsTextButton] with the given [actionLabel] as an action of the banner.
- * @param actionOnNewLine whether or not action should be put on the separate line. Recommended
- * for action with long action text
- * @param onActionClick executed on action button click.
+ * @param message text displayed in the banner.
+ * @param modifier modifiers for the Banner layout.
+ * @param image image display in the banner.
+ * @param imageContentDescription Optional image content description.
+ * @param buttonText Optional text of the second button in the banner. If not present, button will not be shown. If present, [onButton2Click] need to be  handle.
+ * @param button1Text principal button in the banner, it displays an [OdsTextButton] with the given [button1Text] as an action of the banner.
+ * @param actionOnNewLine whether or not action should be put on the separate line.
+ * @param divider add the line at the end of the banner.
+ * @param onButtonClick Optional handler for the button click.
+ * @param onButton1Click executed on action button2 click.
  */
 @Composable
 @OdsComponentApi
 fun OdsBanner(
     modifier: Modifier = Modifier,
     message: String,
     image: Painter? = null,
-    iconContentDescription: String? = null,
+    imageContentDescription: String? = null,
     actionOnNewLine: Boolean = false,
-    actionLabel: String,
-    onActionClick: () -> Unit = {}
+    divider: Boolean = true,
+    button1Text: String,
+    buttonText: String? = null,
+    onButtonClick: (() -> Unit)? = null,
+    onButton1Click: () -> Unit = {}
 ) {
     Column(
         modifier = modifier
@@ -75,15 +81,17 @@ fun OdsBanner(
             modifier = Modifier.fillMaxWidth(),
             horizontalArrangement = Arrangement.SpaceBetween,
         ) {
-            image?.let {
-                Image(
-                    painter = image,
-                    contentDescription = iconContentDescription,
-                    contentScale = ContentScale.Crop,// crop the image if it's not a square
-                    modifier = Modifier
-                        .size(60.dp)
-                        .clip(CircleShape)
-                )
+            if (!actionOnNewLine) {
+                image?.let {
+                    Image(
+                        painter = image,
+                        contentDescription = imageContentDescription,
+                        contentScale = ContentScale.Crop,// crop the image if it's not a square
+                        modifier = Modifier
+                            .size(50.dp)
+                            .clip(CircleShape)
+                    )
+                }
             }
             OdsTextBody2(
                 modifier = Modifier
@@ -94,7 +102,6 @@ fun OdsBanner(
                     ),
                 text = message
             )
-
             if (actionOnNewLine) {
                 Row(
                     modifier = Modifier
@@ -104,8 +111,8 @@ fun OdsBanner(
                     OdsTextButton(
                         modifier = Modifier.padding(end = dimensionResource(id = R.dimen.spacing_s)),
                         style = OdsTextButtonStyle.Primary,
-                        text = actionLabel.uppercase(),
-                        onClick = onActionClick
+                        text = button1Text.uppercase(),
+                        onClick = onButton1Click
                     )
                 }
             }
@@ -119,18 +126,20 @@ fun OdsBanner(
                 OdsTextButton(
                     modifier = Modifier.padding(end = dimensionResource(id = R.dimen.spacing_s)),
                     style = OdsTextButtonStyle.Primary,
-                    text = actionLabel,
-                    onClick = onActionClick
-                )
-                OdsTextButton(
-                    modifier = Modifier.padding(end = dimensionResource(id = R.dimen.spacing_s)),
-                    style = OdsTextButtonStyle.Primary,
-                    text = actionLabel,
-                    onClick = onActionClick
+                    text = button1Text,
+                    onClick = onButton1Click
                 )
+                buttonText?.let {
+                    OdsTextButton(
+                        modifier = Modifier.padding(end = dimensionResource(id = R.dimen.spacing_s)),
+                        style = OdsTextButtonStyle.Primary,
+                        text = buttonText,
+                        onClick = { onButtonClick?.invoke() }
+                    )
+                }
             }
         }
-        Divider()
+        if (divider) Divider()
     }
 }
 
@@ -139,7 +148,7 @@ fun OdsBanner(
 private fun PreviewOdsBanner(@PreviewParameter(OdsBannerPreviewParameterProvider::class) actionOnNewLine: Boolean) = Preview {
     OdsBanner(
         message = "Two lines text string with two actions.", modifier = Modifier,
-        actionLabel = "Action",
+        button1Text = "Action",
         actionOnNewLine = actionOnNewLine
     )
 }