@OptIn(ExperimentalComposeUiApi::class) @Composable fun PoweredByPocketHeader( onLearnMoreClicked: (String) -> Unit, modifier: Modifier = Modifier, textColor: Color = FirefoxTheme.colors.textPrimary, linkTextColor: Color = FirefoxTheme.colors.textAccent, ) { val link = stringResource(R.string.pocket_stories_feature_learn_more) val text = stringResource(R.string.pocket_stories_feature_caption, link) val linkStartIndex = text.indexOf(link) val linkEndIndex = linkStartIndex + link.length Column( modifier = modifier.semantics { testTagsAsResourceId = true testTag = "pocket.header" }, horizontalAlignment = Alignment.CenterHorizontally, ) { Row( Modifier .fillMaxWidth() .semantics(mergeDescendants = true) {}, verticalAlignment = Alignment.CenterVertically, ) { Icon( painter = painterResource(id = R.drawable.pocket_vector), contentDescription = null, // Apply the red tint in code. Otherwise the image is black and white. tint = Color(0xFFEF4056), ) Spacer(modifier = Modifier.width(16.dp)) Column { Text( text = stringResource( R.string.pocket_stories_feature_title_2, LocalContext.current.getString(R.string.pocket_product_name), ), modifier = Modifier.semantics { testTagsAsResourceId = true testTag = "pocket.header.title" }, color = textColor, style = FirefoxTheme.typography.caption, ) Box( modifier = modifier.semantics { testTagsAsResourceId = true testTag = "pocket.header.subtitle" }, ) { ClickableSubstringLink( text = text, textColor = textColor, linkTextColor = linkTextColor, linkTextDecoration = TextDecoration.Underline, clickableStartIndex = linkStartIndex, clickableEndIndex = linkEndIndex, ) { onLearnMoreClicked( "https://www.mozilla.org/en-US/firefox/pocket/?$POCKET_FEATURE_UTM_KEY_VALUE", ) } } } } } }
Pocket feature section title. Shows a default text about Pocket and offers a external link to learn more.