ADS: Remote Messaging

common-ui/src/main/java/com/duckduckgo/mobile/android/themepreview/ui/component/Component.kt

@@ -32,6 +32,7 @@ enum class Component {
     BOTTOM_APP_BAR,
     TABS,
     SNACKBAR,
+    REMOTE_MESSAGE,
     INFO_PANEL,
     DIALOG,
     BOTTOM_SHEET,

common-ui/src/main/java/com/duckduckgo/mobile/android/themepreview/ui/component/ComponentViewHolder.kt

@@ -24,6 +24,8 @@ import android.view.ViewGroup
 import android.widget.FrameLayout
 import androidx.recyclerview.widget.RecyclerView
 import com.duckduckgo.mobile.android.R
+import com.duckduckgo.mobile.android.ui.view.MessageCta
+import com.duckduckgo.mobile.android.ui.view.MessageCta.Message
 import com.duckduckgo.mobile.android.ui.view.listitem.OneLineListItem
 import com.duckduckgo.mobile.android.ui.view.listitem.SectionHeaderListItem
 import com.duckduckgo.mobile.android.ui.view.listitem.TwoLineListItem
@@ -60,6 +62,61 @@ sealed class ComponentViewHolder(val view: View) : RecyclerView.ViewHolder(view)
         parent: ViewGroup,
     ) : ComponentViewHolder(inflate(parent, R.layout.component_info_panel))
 
+    class RemoteMessageComponentViewHolder(
+        parent: ViewGroup,
+    ) : ComponentViewHolder(inflate(parent, R.layout.component_remote_message)) {
+        override fun bind(component: Component) {
+            val smallMessage = Message(title = "Small Message", subtitle = "Body text goes here. This component doesn't have buttons")
+            val bigSingleMessage = Message(
+                illustration = R.drawable.ic_announce,
+                title = "Big Single  Message",
+                subtitle = "Body text goes here. This component has one button",
+                action = "Primary",
+            )
+            val bigTwoActionsMessage = Message(
+                illustration = R.drawable.ic_ddg_announce,
+                title = "Big Two Actions Message",
+                subtitle = "Body text goes here. This component has two buttons",
+                action = "Primary",
+                action2 = "Secondary",
+            )
+
+            val bigTwoActionsUpdateMessage = Message(
+                illustration = R.drawable.ic_app_update,
+                title = "Big Two Actions Message",
+                subtitle = "Body text goes here. This component has two buttons and showcases and app update",
+                action = "Primary",
+                action2 = "Secondary",
+            )
+
+            val mediumMessage = Message(
+                illustration = R.drawable.ic_critical_update,
+                title = "Big Single  Message",
+                subtitle = "Body text goes here. This component has one button",
+            )
+
+            view.findViewById<MessageCta>(R.id.small_remote_message).apply {
+                setMessage(smallMessage)
+            }
+
+            view.findViewById<MessageCta>(R.id.medium_remote_message).apply {
+                setMessage(mediumMessage)
+            }
+
+            view.findViewById<MessageCta>(R.id.big_single_remote_message).apply {
+                setMessage(bigSingleMessage)
+            }
+
+            view.findViewById<MessageCta>(R.id.big_two_actions_remote_message).apply {
+                setMessage(bigTwoActionsMessage)
+            }
+
+            view.findViewById<MessageCta>(R.id.big_two_actions_update_remote_message).apply {
+                setMessage(bigTwoActionsUpdateMessage)
+            }
+        }
+    }
+
     class SearchBarComponentViewHolder(
         parent: ViewGroup,
     ) : ComponentViewHolder(inflate(parent, R.layout.component_search_bar))
@@ -236,6 +293,7 @@ sealed class ComponentViewHolder(val view: View) : RecyclerView.ViewHolder(view)
                 Component.SLIDER -> SliderComponentViewHolder(parent)
                 Component.SNACKBAR -> SnackbarComponentViewHolder(parent)
                 Component.INFO_PANEL -> InfoPanelComponentViewHolder(parent)
+                Component.REMOTE_MESSAGE -> RemoteMessageComponentViewHolder(parent)
                 Component.SEARCH_BAR -> SearchBarComponentViewHolder(parent)
                 Component.MENU_ITEM -> MenuItemComponentViewHolder(parent)
                 Component.SECTION_HEADER_LIST_ITEM -> HeaderSectionComponentViewHolder(parent)

common-ui/src/main/java/com/duckduckgo/mobile/android/themepreview/ui/component/navigation/ComponentMessagingFragment.kt

@@ -21,6 +21,6 @@ import com.duckduckgo.mobile.android.themepreview.ui.component.ComponentFragment
 
 class ComponentMessagingFragment : ComponentFragment() {
     override fun getComponents(): List<Component> {
-        return listOf(Component.INFO_PANEL, Component.SNACKBAR)
+        return listOf(Component.REMOTE_MESSAGE, Component.INFO_PANEL, Component.SNACKBAR)
     }
 }

common-ui/src/main/res/drawable/background_message_cta.xml

@@ -15,6 +15,6 @@
   -->
 
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
-    <solid android:color="?attr/dialogBgColor" />
-    <corners android:radius="@dimen/keyline_2" />
+    <solid android:color="?attr/daxColorSurface" />
+    <corners android:radius="@dimen/mediumShapeCornerRadius" />
 </shape>

common-ui/src/main/res/layout/component_remote_message.xml

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+~ Copyright (C) 2019 The Android Open Source Project
+~
+~ Licensed under the Apache License, Version 2.0 (the "License");
+~ you may not use this file except in compliance with the License.
+~ You may obtain a copy of the License at
+~
+~      http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+
+
+<androidx.core.widget.NestedScrollView
+        xmlns:android="http://schemas.android.com/apk/res/android"
+        xmlns:app="http://schemas.android.com/apk/res-auto"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
+
+    <LinearLayout
+            android:layout_width="match_parent"
+            android:orientation="vertical"
+            android:layout_height="wrap_content"
+            android:clipToPadding="false"
+            android:paddingTop="@dimen/keyline_5"
+            android:paddingBottom="@dimen/keyline_5"
+            android:paddingStart="@dimen/keyline_4"
+            android:paddingEnd="@dimen/keyline_4">
+
+        <com.duckduckgo.mobile.android.ui.view.listitem.SectionHeaderListItem
+                android:id="@+id/label"
+                android:layout_height="wrap_content"
+                android:layout_width="match_parent"
+                app:primaryText="Remote Messaging Framework"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"/>
+
+        <com.duckduckgo.mobile.android.ui.view.MessageCta
+                android:id="@+id/small_remote_message"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content" />
+
+        <com.duckduckgo.mobile.android.ui.view.MessageCta
+                android:id="@+id/medium_remote_message"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content" />
+
+        <com.duckduckgo.mobile.android.ui.view.MessageCta
+                android:id="@+id/big_single_remote_message"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content" />
+
+        <com.duckduckgo.mobile.android.ui.view.MessageCta
+                android:id="@+id/big_two_actions_remote_message"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content" />
+
+        <com.duckduckgo.mobile.android.ui.view.MessageCta
+                android:id="@+id/big_two_actions_update_remote_message"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content" />
+
+    </LinearLayout>
+
+</androidx.core.widget.NestedScrollView>

common-ui/src/main/res/layout/view_message_cta.xml

@@ -22,12 +22,11 @@
         android:id="@+id/close"
         android:layout_width="@dimen/messageCtaCloseButtonSize"
         android:layout_height="@dimen/messageCtaCloseButtonSize"
-        android:padding="@dimen/keyline_2"
         android:background="?selectableItemBackground"
+        android:padding="@dimen/keyline_2"
         android:src="@drawable/ic_close_24"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        app:tint="?normalTextColor" />
+        app:layout_constraintTop_toTopOf="parent" />
 
     <androidx.appcompat.widget.AppCompatImageView
         android:id="@+id/illustration"
@@ -40,67 +39,62 @@
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 
-    <TextView
+    <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
         android:id="@+id/messageTitle"
-        style="@style/MessageCta.Title"
-        android:layout_width="match_parent"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:layout_marginStart="@dimen/keyline_4"
-        android:layout_marginTop="6dp"
-        android:layout_marginEnd="@dimen/keyline_4"
+        android:layout_marginStart="40dp"
+        android:layout_marginTop="@dimen/keyline_2"
+        android:layout_marginEnd="40dp"
+        android:gravity="center"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/illustration"
-        app:layout_goneMarginTop="20dp"
+        app:layout_goneMarginTop="@dimen/keyline_4"
+        app:typography="h3"
         tools:text="Placeholder Title" />
 
-    <TextView
+    <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
         android:id="@+id/messageSubtitle"
-        style="@style/MessageCta.Description"
-        android:layout_width="match_parent"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_marginStart="@dimen/keyline_4"
         android:layout_marginTop="4dp"
         android:layout_marginEnd="@dimen/keyline_4"
-        android:layout_marginBottom="6dp"
+        android:gravity="center"
         app:layout_constraintBottom_toTopOf="@id/primaryActionButton"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/messageTitle"
         app:layout_goneMarginBottom="18dp"
+        app:typography="body2"
         tools:text="Body text goes here. This component can be used with one or two buttons." />
 
-    <com.duckduckgo.mobile.android.ui.view.button.ButtonPrimarySmall
+    <com.duckduckgo.mobile.android.ui.view.button.DaxButtonPrimary
         android:id="@+id/primaryActionButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginStart="@dimen/keyline_2"
-        android:layout_marginTop="@dimen/keyline_2"
+        android:layout_marginStart="@dimen/keyline_1"
+        android:layout_marginTop="@dimen/keyline_4"
         android:layout_marginBottom="@dimen/keyline_4"
-        android:paddingTop="10dp"
-        android:paddingBottom="10dp"
-        android:paddingStart="14dp"
-        android:paddingEnd="14dp"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toEndOf="@+id/secondaryActionButton"
         app:layout_constraintTop_toBottomOf="@id/messageSubtitle"
         app:layout_goneMarginStart="0dp"
         tools:text="button" />
 
-    <com.duckduckgo.mobile.android.ui.view.button.ButtonGhostSmall
+    <com.duckduckgo.mobile.android.ui.view.button.DaxButtonGhost
         android:id="@+id/secondaryActionButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:paddingTop="10dp"
-        android:paddingBottom="10dp"
-        android:paddingStart="14dp"
-        android:paddingEnd="14dp"
-        app:layout_constraintBottom_toBottomOf="@id/primaryActionButton"
+        android:layout_marginTop="@dimen/keyline_4"
+        android:layout_marginEnd="@dimen/keyline_1"
+        android:layout_marginBottom="@dimen/keyline_4"
+        app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toStartOf="@id/primaryActionButton"
         app:layout_constraintHorizontal_chainStyle="packed"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="@id/primaryActionButton"
         tools:text="button" />
 
 </androidx.constraintlayout.widget.ConstraintLayout>

common-ui/src/main/res/values/styles.xml

@@ -439,16 +439,6 @@
 
     <style name="MessageCta" />
 
-    <style name="MessageCta.Title" parent="TextAppearance.DuckDuckGo.Headline4">
-        <item name="android:fontFamily">sans-serif-medium</item>
-        <item name="android:textStyle">normal</item>
-        <item name="android:gravity">center</item>
-    </style>
-
-    <style name="MessageCta.Description" parent="TextAppearance.DuckDuckGo.Body2">
-        <item name="android:gravity">center</item>
-    </style>
-
     <style name="MessageCta.Button" parent="Widget.AppCompat.Button.Borderless">
         <item name="android:minHeight">36dp</item>
         <item name="android:paddingTop">10dp</item>

common-ui/src/main/res/values/widgets.xml

@@ -284,10 +284,7 @@
         <item name="android:layout_height">wrap_content</item>
         <item name="android:background">@drawable/background_message_cta</item>
         <item name="android:elevation">4dp</item>
-        <item name="android:layout_marginTop">@dimen/keyline_4</item>
-        <item name="android:layout_marginStart">@dimen/keyline_4</item>
-        <item name="android:layout_marginEnd">@dimen/keyline_4</item>
-        <item name="android:layout_marginBottom">@dimen/keyline_1</item>
+        <item name="android:layout_margin">@dimen/keyline_4</item>
     </style>
 
     <!-- Dialogs -->