feat: add grid tokens in the demo app

[paulinea]

No description provided.

[github-actions]

🟢 Netlify deploy for commit 7fabe55 succeeded

Deploy preview: https://671bb14781a5f44fb5d48ae3--ouds-android.netlify.app
Deploy log: https://app.netlify.com/sites/ouds-android/deploys/671bb14781a5f44fb5d48ae3

[florentmaitre]

Resolution of this resource is the same as the xxhdpi version and is different from the xxxhdpi light version, so I suppose this is not the correct resource.

Same comment for il_tokens_grid_max_width.png and il_tokens_grid_min_width.png.

[florentmaitre]

It's also possible to remove the padding here and use the horizontalArrangement parameter of the Row to achieve the same effect:

horizontalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Medium.value)

This allows to get rid of the noIllustrationProperty variable too.

[florentmaitre]

Rendering is correct but images could be in a column to ensure this method will still work if we change the container. We could also factorize several properties:

@Composable
fun GridIllustrations() {
    Column(
        modifier = Modifier.padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value),
        verticalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Medium.value)
    ) {
        val resourceIds = listOf(
            R.drawable.il_tokens_grid_column_margin,
            R.drawable.il_tokens_grid_min_width,
            R.drawable.il_tokens_grid_max_width
        )
        resourceIds.forEach {
            Image(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available
                painter = painterResource(id = it),
                contentDescription = null
            )
        }
    }
}