Skip to content

Commit

Permalink
Merge branch 'main' into ANDROID-13655_button_ids
Browse files Browse the repository at this point in the history
  • Loading branch information
DevPabloGarcia committed Oct 17, 2023
2 parents afc87bc + b043c2f commit 4af0349
Show file tree
Hide file tree
Showing 92 changed files with 3,704 additions and 1,286 deletions.
7 changes: 7 additions & 0 deletions .github/actions/generate-html-report/action.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
name: 'Generate HTML Report'
description: 'Generates HTML report from screenshots'
runs:
using: "composite"
steps:
- run: ${GITHUB_ACTION_PATH}/scripts/generate-html-report.sh
shell: bash
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
#!/bin/bash

mkdir reports
touch reports/report.html
cp */screenshots/*_compare.png reports/
files=$(find . -type f -name "*_compare.png" | grep "reports/")
{
echo '<!doctype html>'
echo '<html>'
echo '<head>'
echo '<title>Screenshots failure report</title>'
echo '<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet">'
echo '<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">'
echo '<meta charset="UTF-8">'
echo '</head>'
echo '<style>'
echo 'body {'
echo 'display: flex;'
echo 'min-height: 100vh;'
echo 'flex-direction: column;'
echo '}'
echo 'main {'
echo 'flex: 1 0 auto;'
echo '}'
echo '</style>'
echo '<body>'
echo '<nav>'
echo '<div class="nav-wrapper indigo darken-3">'
echo '<a href="#" class="brand-logo left">Screenshots failure report</a>'
echo '<ul id="nav-mobile" class="right hide-on-med-and-down">'
echo '<li><a href="https://github.com/takahirom/roborazzi">Roborazzi</a></li>'
echo '</ul>'
echo '</div>'
echo '</nav>'
echo '<main class="container">'
echo '<div class="section">'
echo '<table class="highlight responsive-table">'
echo '<tr><th>File name</th><th>Comparison</th></tr>'
} >> reports/report.html

for file in $files; do
# Get the file name and insert newlines every 100 characters
fileName=$(basename "$file" | sed -r 's/(.{100})/\1<br>/g')
echo "<tr><td>$(basename "$file")</td>" >> reports/report.html
echo "<td><a href=\"$(basename "$file")\"><img src=\"$(basename "$file")\" width=\"100%\" height=\"100%\" /></a></td></tr>" >> reports/report.html
done
{
echo '</table>'
echo '</div>'
echo '</main>'
echo '<footer class="page-footer indigo darken-3">'
echo '<div></div>'
echo '</footer>'
echo '<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>'
echo '</body></html>'
} >> reports/report.html

echo "Report: "
cat reports/report.html
49 changes: 49 additions & 0 deletions .github/workflows/compare_screenshots.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
name: Compare Screenshots

on:
workflow_dispatch:
pull_request:

jobs:
CompareScreenshots:

runs-on: ubuntu-latest

steps:
- name: Checkout repo
uses: actions/checkout@v3

- name: Setup Gradle
uses: gradle/gradle-build-action@v2

- name: Verify Screenshots (roborazzi)
run: 'bash ./gradlew verifyRoborazziDebug'

- id: generate-html
name: Generate Html Report
if: failure()
uses: ./.github/actions/generate-html-report

- name: Generate screenshots tests reports tar.gz
if: failure()
run: |
tar cvzf mistica-screenshots-tests-report.tar.gz reports || echo "No screenshots tests reports found"
shell: bash

- name: Checkout Telefonica/github-actions repo
if: failure()
uses: actions/checkout@v3
with:
repository: Telefonica/github-actions
token: "${{ secrets.NOVUM_PRIVATE_REPOS }}"
path: .github/shared-actions

- name: Upload reports to azure
if: failure()
uses: ./.github/shared-actions/azure/upload-to-storage
with:
azure-account-name: ${{secrets.AZURE_ACCOUNT_NAME}}
azure-account-key: ${{secrets.AZURE_ACCOUNT_KEY}}
globs: |
mistica-screenshots-tests-report.tar.gz
generate-summary: true
24 changes: 24 additions & 0 deletions .github/workflows/update_screenshot_baseline.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
name: "Update screenshot baseline"
on:
workflow_dispatch:

jobs:
screenshots_baseline:
runs-on: ubuntu-latest
steps:
- name: Checkout repo
uses: actions/checkout@v2

- name: Run Roborazzi Record
run: 'bash ./gradlew clean recordRoborazziDebug'

- name: Check Git status
run: 'git status'
shell: bash

- name: Commit and push screenshots baseline
id: commitAndPushScreenshotsBaseline
uses: EndBug/add-and-commit@v7
with:
message: 'Updated screenshots baseline'
add: './**/screenshots/*'
11 changes: 10 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -171,9 +171,18 @@ First of all, you have to find where is the problem, there are two main places:
- The token is wrong in the [mistica-design repository](https://github.com/Telefonica/mistica-design/tree/production/tokens)
- In this case, you have to talk with design core team to fix it and generate the tokens again using the [GitHub Action](https://github.com/Telefonica/mistica-android/actions/workflows/import-design-tokens.yml)
- The token is ok in the mistica-design repository but wrong in our code. In this case, there are two possible problems:
- The tokens are not updated with the last changes of mistica-design repo. To fix it, run the GitHub Action to update them.
- The tokens are not updated with the last changes of mistica-design repo. To fix it, run [the GitHub Action](https://github.com/Telefonica/mistica-android/actions/workflows/import-design-tokens.yml) to update them.
- There is some issue in the tokens generator code. In this case, you will have to fix it in this repository.

### How to add support for new type of tokens
If the design team adds a new type of token, for example, they want to include some animation duration as a token, we will have to add support for it.

Some points that you should have in mind in this case:
- Usually a new `key` will be added at the top level of the JSON (light, dark, radius, etc). You will have to update the DTO to deserialize it.
- Before starting to write code to generate the code and XMLs automatically, you will have to think about how to give support to this new token in Mistica, for example, which attributes you will have to create for example. Once you have this clear, you will be able to start generating that code that could be written manually if this generator didn't exist.
- As we support XML and Compose, we have to give support to this new token in both systems. For that, we have two main classes [`GenerateXMLFiles`](https://github.com/Telefonica/mistica-android/blob/main/tokens/src/main/java/com/telefonica/mistica/tokens/xml/GenerateXMLFiles.kt) and [`GenerateComposeFiles`](https://github.com/Telefonica/mistica-android/blob/main/tokens/src/main/java/com/telefonica/mistica/tokens/compose/GenerateComposeFiles.kt). You will have to modify them to add support for the new type of token.
- To test your development easily, you can download [the tokens files](https://github.com/Telefonica/mistica-design/tree/pre-production/tokens) into `/temp/mistica-design/tokens` directory and run `./gradlew generateMisticaTokens`.

## Library size

Library aar size is around **270 KB**, without including transitive dependencies (Lottie, material and kotlin).
Expand Down
2 changes: 1 addition & 1 deletion UPGRADING.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,4 +70,4 @@ We should start migrating the links that have to use chevron from button.Button
Watch out that the new app:style attribute is needed to set the button style (with LINK / LINK_INVERSE for links).
Later on we'll deprecate the button.Button in favour of button2.Button and start migrating the rest.

When this new compose wrapper is used on dialogs the ViewTreeLifecycle should be provided.
When this new compose wrapper is used on dialogs the ViewTreeLifecycle should be provided (see initViewTreeOwners() in Sheet.kt).
4 changes: 3 additions & 1 deletion build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@ buildscript {
compose_core_version = '1.3.1'
compose_compiler_version = '1.4.7'
kotlin_version = "1.8.21"
androidx_appcompat_version = "1.5.1"
androidx_appcompat_version = "1.6.0"
androidx_activity_compose_version = "1.6.0"
accompanist_version = "0.30.1"
coil_version = '2.2.2'
constraintComposeVersion = '1.0.1'
roborazzi_version = "1.4.0"
}
repositories {
google()
Expand All @@ -27,6 +28,7 @@ buildscript {
plugins {
id 'org.jetbrains.kotlin.android' version '1.5.21' apply false
id 'io.github.gradle-nexus.publish-plugin' version '1.1.0' apply false
id "io.github.takahirom.roborazzi" version '1.4.0' apply false
}

allprojects {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ class CalloutsCatalogFragment : Fragment() {
CalloutButtonsConfig.values().map { it.name },
)
)
setText(CalloutButtonsConfig.BUTTONS_CONFIG_PRIMARY.name)
setText(CalloutButtonsConfig.PRIMARY.name)
}
view.findViewById<Button>(R.id.update_button).setOnClickListener {
updateCalloutView(view)
Expand Down Expand Up @@ -87,12 +87,12 @@ class CalloutsCatalogFragment : Fragment() {
}

private enum class CalloutButtonsConfig(@CalloutView.ButtonsConfig val buttonsConfig: Int) {
BUTTONS_CONFIG_NONE(CalloutView.BUTTONS_CONFIG_NONE),
BUTTONS_CONFIG_PRIMARY(CalloutView.BUTTONS_CONFIG_PRIMARY),
BUTTONS_CONFIG_PRIMARY_LINK(CalloutView.BUTTONS_CONFIG_PRIMARY_LINK),
BUTTONS_CONFIG_PRIMARY_SECONDARY(CalloutView.BUTTONS_CONFIG_PRIMARY_SECONDARY),
BUTTONS_CONFIG_SECONDARY(CalloutView.BUTTONS_CONFIG_SECONDARY),
BUTTONS_CONFIG_SECONDARY_LINK(CalloutView.BUTTONS_CONFIG_SECONDARY_LINK),
BUTTONS_CONFIG_LINK(CalloutView.BUTTONS_CONFIG_LINK),
NONE(CalloutView.BUTTONS_CONFIG_NONE),
PRIMARY(CalloutView.BUTTONS_CONFIG_PRIMARY),
PRIMARY_AND_LINK(CalloutView.BUTTONS_CONFIG_PRIMARY_LINK),
PRIMARY_AND_SECONDARY(CalloutView.BUTTONS_CONFIG_PRIMARY_SECONDARY),
SECONDARY(CalloutView.BUTTONS_CONFIG_SECONDARY),
SECONDARY_AND_LINK(CalloutView.BUTTONS_CONFIG_SECONDARY_LINK),
LINK(CalloutView.BUTTONS_CONFIG_LINK),
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,13 @@ import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import android.widget.Toast
import androidx.fragment.app.Fragment
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.PagerState
import com.telefonica.mistica.card.mediacard.MediaCardView
import com.telefonica.mistica.catalog.R.drawable.card_image_sample
import com.telefonica.mistica.catalog.databinding.CarouselFragmentCatalogBinding
import com.telefonica.mistica.compose.card.Action
import com.telefonica.mistica.compose.card.mediacard.MediaCard
import com.telefonica.mistica.compose.card.mediacard.MediaCardImage
import com.telefonica.mistica.compose.carousel.CarouselState
import com.telefonica.mistica.compose.tag.Tag
import com.telefonica.mistica.tag.TagView.Companion.TYPE_PROMO

class CarouselFragment : Fragment() {

Expand All @@ -35,35 +26,41 @@ class CarouselFragment : Fragment() {
return binding.root
}

@OptIn(ExperimentalPagerApi::class)
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
val carouselState = CarouselState(PagerState(0))
val pages = 6
binding.carouselView
.setContent { page -> CarouselItem(page) }
.setContent(getMediaCardsForCarousel())
.setState(carouselState)
.setItemCount(pages)
.setItemCount(MEDIA_CARDS_CAROUSEL_SIZE)

binding.carouselPageIndicatorView
.setState(carouselState)
.setPageCount(pages)
.setPageCount(MEDIA_CARDS_CAROUSEL_SIZE)
}

private fun getMediaCardsForCarousel(): List<MediaCardView> {
val mediaCards = mutableListOf<MediaCardView>()
for (i in 1..MEDIA_CARDS_CAROUSEL_SIZE) {
mediaCards.add(MediaCardView(requireContext()).apply {
setTag("HEADLINE")
setCardImage(card_image_sample)
setTitle("Page$i")
setSubtitleText("(position ${i - 1})")
setDescription("Description")
setPrimaryButtonText("Primary")
setLinkButtonText("Link")
setPrimaryButtonOnClick { Toast.makeText(requireContext(), "primaryButton$i", Toast.LENGTH_SHORT).show() }
setLinkButtonOnClick { Toast.makeText(requireContext(), "linkButton$i", Toast.LENGTH_SHORT).show() }
setCardAdditionalContent(null)
})
}
return mediaCards
}

private companion object {
const val MEDIA_CARDS_CAROUSEL_SIZE = 6
}
}

@Composable
private fun CarouselItem(page: Int) {
MediaCard(
modifier = Modifier
.height(500.dp)
.fillMaxWidth(),
image = MediaCardImage.MediaCardImageResource(card_image_sample),
tag = Tag("HEADLINE").withStyle(TYPE_PROMO),
title = "Page ${page + 1} ",
subtitle = "(position ${page})",
description = "Description",
primaryButton = Action("Primary") {},
linkButton = Action("Link") {}
)
}

Loading

0 comments on commit 4af0349

Please sign in to comment.