Merge pull request #29 from hmrc/feature/HMA-4082-add-body-text-to-in…

…formation-message

HMA-4082 Added body text to information message

CHANGELOG.md

@@ -16,6 +16,10 @@ Allowed headings:
 
 ## [Unreleased]
 
+### Added
+
+* Added body text for `InformationMessageCardView`
+
 ## [3.10.0] - 2021-04-07
 - Changed to Github packages for artefact storage.
 

README.md

@@ -652,6 +652,7 @@ If you need padding on your dividers, you can set `android:dividerPadding="@dime
     app:headline="@string/info_message_placeholder_headline"
     app:headlineContentDescription="@string/headlineContentDescription"
     app:headlineIcon="@drawable/ic_info"
+    app:body="@string/info_message_placeholder_headline"
     app:type="urgent" />
 ```
 

components/src/main/java/uk/gov/hmrc/components/organism/information/InformationMessageCardView.kt

@@ -42,6 +42,7 @@ class InformationMessageCardView @JvmOverloads constructor(
             type?.let {
                 binding.warningView.setTextColor(it.headlineTint)
                 binding.warningView.setIconTintColor(it.headlineTint)
+                binding.body.setTextColor(ContextCompat.getColor(context, it.headlineTint))
                 binding.rootLayout.setBackgroundColor(ContextCompat.getColor(context, it.headlineBackgroundColor))
                 binding.rootLayout.visibility = View.VISIBLE
             }
@@ -56,6 +57,7 @@ class InformationMessageCardView @JvmOverloads constructor(
                 setHeadlineContentDescription(it)
             }
             setHeadlineIcon(typedArray.getResourceId(R.styleable.InformationMessageCardView_headlineIcon, NO_ICON))
+            setBody(typedArray.getString(R.styleable.InformationMessageCardView_body))
             val typeOrdinal = typedArray.getInt(R.styleable.InformationMessageCardView_type, -1)
             if (typeOrdinal != -1) {
                 type = Type.values()[typeOrdinal]
@@ -81,6 +83,15 @@ class InformationMessageCardView @JvmOverloads constructor(
         binding.warningView.setIcon(resId)
     }
 
+    fun setBody(bodyText: String?) {
+        if (bodyText.isNullOrBlank()) {
+            binding.body.visibility = View.GONE
+        } else {
+            binding.body.visibility = View.VISIBLE
+            binding.body.text = bodyText
+        }
+    }
+
     fun setHeadlineButtons(buttons: List<SecondaryButton>) {
         binding.headlineButtonsContainer.removeAllViews()
 

components/src/main/res/layout/component_information_message_card.xml

@@ -34,6 +34,17 @@
             app:iconTintColor="@android:color/transparent"
             tools:text="Do not update your working hours if you or your partner are working less because of coronavirus (COVID-19)" />
 
+        <TextView
+            android:id="@+id/body"
+            style="@style/Text.Body"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:gravity="center_vertical"
+            android:paddingBottom="@dimen/hmrc_spacing_8"
+            android:paddingHorizontal="@dimen/hmrc_spacing_16"
+            android:visibility="gone"
+            tools:text="This is where we can have a short bit of copy about this thing." />
+
         <LinearLayout
             android:id="@+id/headline_buttons_container"
             android:layout_width="match_parent"

components/src/main/res/values/attrs.xml

@@ -254,6 +254,8 @@
         <attr name="headlineContentDescription" />
         <!-- Icon to display next to the headline text. -->
         <attr name="headlineIcon" format="reference" />
+        <!-- Body to display below the headline. -->
+        <attr name="body" />
         <!-- Type of message -->
         <attr name="type" format="enum">
             <!-- Warning message -->

sample/src/main/java/uk/gov/hmrc/components/sample/organisms/InformationMessageCardFragment.kt

@@ -50,5 +50,9 @@ class InformationMessageCardFragment : BaseComponentsFragment() {
         binding.infoMessageExample2.setHeadlineButtons(listOf(
             SecondaryButton(requireContext()).apply { setText(R.string.info_message_example_2_button) }
         ))
+
+        binding.infoMessageExample3.setHeadlineButtons(listOf(
+            SecondaryButton(requireContext()).apply { setText(R.string.info_message_example_3_button) }
+        ))
     }
 }

sample/src/main/res/layout/fragment_information_message_card.xml

@@ -29,6 +29,7 @@
             android:layout_margin="@dimen/hmrc_spacing_16"
             app:headline="@string/info_message_placeholder_headline"
             app:headlineIcon="@drawable/ic_info"
+            app:body="@string/info_message_placeholder_headline"
             app:type="urgent" />
 
         <TextView style="@style/ExampleText" />
@@ -56,9 +57,20 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_margin="@dimen/hmrc_spacing_16"
-            app:type="notice"
+            app:type="info"
             app:headline="@string/info_message_example_3_headline"
             app:headlineContentDescription="@string/info_message_example_3_headline_content_description"
+            app:headlineIcon="@drawable/ic_info"
+            app:body="@string/info_message_example_3_body" />
+
+        <uk.gov.hmrc.components.organism.information.InformationMessageCardView
+            android:id="@+id/info_message_example_4"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_margin="@dimen/hmrc_spacing_16"
+            app:type="notice"
+            app:headline="@string/info_message_example_4_headline"
+            app:headlineContentDescription="@string/info_message_example_4_headline_content_description"
             app:headlineIcon="@drawable/components_ic_warning" />
 
     </LinearLayout>

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

@@ -332,15 +332,20 @@
 
     <!-- Information Message -->
     <string name="info_message_placeholder_headline">Headline</string>
+    <string name="info_message_placeholder_body">Body</string>
     <string name="info_message_placeholder_headline_button">Headline button</string>
     <string name="info_message_example_1_headline">Info message</string>
     <string name="info_message_example_1_headline_content_description">Info message content description</string>
     <string name="info_message_example_1_button_primary">A primary action</string>
     <string name="info_message_example_1_button_secondary">A secondary action</string>
     <string name="info_message_example_2_headline">Warning message</string>
     <string name="info_message_example_2_button">Do something</string>
-    <string name="info_message_example_3_headline">Notice message</string>
-    <string name="info_message_example_3_headline_content_description">Notice message content description</string>
+    <string name="info_message_example_3_headline">Info message</string>
+    <string name="info_message_example_3_headline_content_description">Info message content description</string>
+    <string name="info_message_example_3_body">This is where we can have a short bit of copy about this thing.</string>
+    <string name="info_message_example_3_button">Do something</string>
+    <string name="info_message_example_4_headline">Notice message</string>
+    <string name="info_message_example_4_headline_content_description">Notice message content description</string>
 
     <!--  Menu Panel Row View  -->
     <string name="menu_panel_placeholder_title">Title</string>