Skip to content

Commit

Permalink
Create small variant size for tags (#64)
Browse files Browse the repository at this point in the history
* feat(tags): Create small variant size.

* tests(tag): Create snapshot tests with Paparazzi
  • Loading branch information
GerardPaligot authored Jan 18, 2023
1 parent 6f6bc61 commit 0dd9529
Show file tree
Hide file tree
Showing 14 changed files with 271 additions and 29 deletions.
93 changes: 66 additions & 27 deletions sample/src/main/java/com/decathlon/compose/sample/screens/Tags.kt
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
package com.decathlon.compose.sample.screens

import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
Expand All @@ -19,7 +22,13 @@ import com.decathlon.compose.sample.R
import com.decathlon.compose.sample.components.SampleScaffold
import com.decathlon.vitamin.compose.foundation.VitaminTheme
import com.decathlon.vitamin.compose.tags.VitaminTagColors
import com.decathlon.vitamin.compose.tags.VitaminTagSizes
import com.decathlon.vitamin.compose.tags.VitaminTags
import com.decathlon.vitamin.compose.textinputs.VitaminTextInputs

private enum class Size(val type: String) {
Small("Small"), Medium("Medium")
}

object Tags : Screen {
override val name: String
Expand All @@ -28,6 +37,7 @@ object Tags : Screen {
override val navigationKey: String
get() = "Tags"

@Suppress("LongMethod")
@Composable
override fun Screen() {
val allTagColors = listOf(
Expand All @@ -44,42 +54,71 @@ object Tags : Screen {
Pair("Decorative Saffron", VitaminTagColors.decorativeSaffron())
)
val context = LocalContext.current

var sizeState by remember { mutableStateOf(Size.Medium) }
val sizes = when (sizeState) {
Size.Small -> VitaminTagSizes.small()
Size.Medium -> VitaminTagSizes.medium()
}
SampleScaffold(title = name) {
LazyColumn(
modifier = Modifier
.fillMaxSize()
.padding(horizontal = 4.dp)
modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(horizontal = 16.dp, vertical = 24.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
item {
VitaminTextInputs.FilledDropdown(
value = sizeState.type,
label = "Size",
) {
Size.values().forEach {
PrimaryItem(onClick = { sizeState = it }) {
Text(text = it.type)
}
}
}
}
item {
Text(
text = "Tags",
style = VitaminTheme.typography.h6
)
}
items(allTagColors) { color ->
Row(modifier = Modifier.padding(10.dp)) {
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
// Simple tag
VitaminTags.Accent(label = color.first, colors = color.second)

Spacer(Modifier.width(8.dp))

// Tag with icon
VitaminTags.Accent(
label = color.first, colors = color.second,
iconPainter = painterResource(
id = R.drawable.ic_vtmn_football_line
)
label = color.first,
colors = color.second,
sizes = sizes
)
VitaminTags.Accent(
label = color.first,
colors = color.second,
iconPainter = painterResource(id = R.drawable.ic_vtmn_football_line),
sizes = sizes
)
}
}
item {
Text(
text = "Interactive tags",
style = VitaminTheme.typography.h6
)
}
items(allTagColors) { color ->
Column(modifier = Modifier.padding(10.dp)) {
// Clickable tag
VitaminTags.Accent(label = "Clickable ${color.first}", colors = color.second) {
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
VitaminTags.Accent(
label = color.first,
colors = color.second,
sizes = sizes
) {
Toast.makeText(context, "Click on tag ${color.first}", Toast.LENGTH_SHORT).show()
}

// Clickable tag with icon
VitaminTags.Accent(
label = "Clickable ${color.first}", colors = color.second,
iconPainter = painterResource(
id = R.drawable.ic_vtmn_football_fill
)
label = color.first,
colors = color.second,
iconPainter = painterResource(id = R.drawable.ic_vtmn_football_fill),
sizes = sizes
) {
Toast.makeText(context, "Click on tag ${color.first}", Toast.LENGTH_SHORT).show()
}
Expand Down
2 changes: 2 additions & 0 deletions tags/build.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@ plugins {
id("kotlin-android")
id("VitaminComposeLibraryPlugin")
id("com.vanniktech.maven.publish")
id("app.cash.paparazzi")
}

dependencies {
api(project(":foundation"))
implementation(AndroidX.compose.ui.tooling)
testImplementation("com.google.testparameterinjector:test-parameter-injector:1.8")
}
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,35 @@ data class TagSizes(
)

object VitaminTagSizes {
@Composable
fun small(
contentPadding: PaddingValues = PaddingValues(horizontal = 8.dp, vertical = 2.dp),
clickablePadding: PaddingValues = PaddingValues(vertical = 10.dp),
iconSize: Dp = 16.dp,
labelStartPadding: Dp = 4.dp,
textStyle: TextStyle = VitaminTheme.typography.caption
): TagSizes = remember(
contentPadding,
clickablePadding,
iconSize,
labelStartPadding,
textStyle
) {
TagSizes(
contentPadding = contentPadding,
clickablePadding = clickablePadding,
iconSize = iconSize,
labelStartPadding = labelStartPadding,
textStyle = textStyle
)
}

@Composable
fun medium(
contentPadding: PaddingValues = PaddingValues(horizontal = 8.dp, vertical = 2.dp),
clickablePadding: PaddingValues = PaddingValues(vertical = 8.dp),
iconSize: Dp = 13.dp,
labelStartPadding: Dp = 6.dp,
iconSize: Dp = 16.dp,
labelStartPadding: Dp = 4.dp,
textStyle: TextStyle = VitaminTheme.typography.text3
): TagSizes = remember(
contentPadding,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
package com.decathlon.vitamin.compose.tags

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import app.cash.paparazzi.Paparazzi
import com.decathlon.vitamin.compose.foundation.VitaminTheme
import com.decathlon.vitamin.compose.tags.utils.Theme
import com.decathlon.vitamin.compose.tags.utils.Variant
import com.google.testing.junit.testparameterinjector.TestParameter
import com.google.testing.junit.testparameterinjector.TestParameterInjector
import org.junit.Rule
import org.junit.Test
import org.junit.runner.RunWith

@RunWith(TestParameterInjector::class)
class VitaminTagsTest(
@TestParameter val variant: Variant
) {
@get:Rule
val paparazzi = Paparazzi()

@Test
fun medium(@TestParameter theme: Theme) {
paparazzi.snapshot {
VitaminTheme(theme == Theme.Dark) {
Scaffold { padding ->
Column(
modifier = Modifier
.padding(padding)
.padding(horizontal = 16.dp, vertical = 16.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
Tags(
variant = variant,
sizes = VitaminTagSizes.medium()
)
}
}
}
}
}

@Test
fun small(@TestParameter theme: Theme) {
paparazzi.snapshot {
VitaminTheme(theme == Theme.Dark) {
Scaffold { padding ->
Column(
modifier = Modifier
.padding(padding)
.padding(horizontal = 16.dp, vertical = 16.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
Tags(
variant = variant,
sizes = VitaminTagSizes.small()
)
}
}
}
}
}
}

@Suppress("LongMethod")
@Composable
fun Tags(
variant: Variant,
sizes: TagSizes
) {
val onClick: (() -> Unit)? = if (variant == Variant.Interactive) { {} } else null
Text(text = variant.name, style = VitaminTheme.typography.subtitle1)
Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
VitaminTags.Accent(label = "Tag", sizes = sizes, onClick = onClick)
VitaminTags.Alert(label = "Tag", sizes = sizes, onClick = onClick)
VitaminTags.Brand(label = "Tag", sizes = sizes, onClick = onClick)
}
Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
VitaminTags.Accent(
label = "Tag",
iconPainter = painterResource(id = R.drawable.ic_vtmn_football_line),
sizes = sizes,
onClick = onClick
)
VitaminTags.Alert(
label = "Tag",
iconPainter = painterResource(id = R.drawable.ic_vtmn_football_line),
sizes = sizes,
onClick = onClick
)
VitaminTags.Brand(
label = "Tag",
iconPainter = painterResource(id = R.drawable.ic_vtmn_football_line),
sizes = sizes,
onClick = onClick
)
}
Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
VitaminTags.DecorativeEmerald(label = "Tag", sizes = sizes, onClick = onClick)
VitaminTags.DecorativeAmethyst(label = "Tag", sizes = sizes, onClick = onClick)
VitaminTags.DecorativeBrick(label = "Tag", sizes = sizes, onClick = onClick)
VitaminTags.DecorativeGold(label = "Tag", sizes = sizes, onClick = onClick)
}
Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
VitaminTags.DecorativeEmerald(
label = "Tag",
iconPainter = painterResource(id = R.drawable.ic_vtmn_football_line),
sizes = sizes,
onClick = onClick
)
VitaminTags.DecorativeAmethyst(
label = "Tag",
iconPainter = painterResource(id = R.drawable.ic_vtmn_football_line),
sizes = sizes,
onClick = onClick
)
VitaminTags.DecorativeBrick(
label = "Tag",
iconPainter = painterResource(id = R.drawable.ic_vtmn_football_line),
sizes = sizes,
onClick = onClick
)
VitaminTags.DecorativeGold(
label = "Tag",
iconPainter = painterResource(id = R.drawable.ic_vtmn_football_line),
sizes = sizes,
onClick = onClick
)
}
Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
VitaminTags.DecorativeCobalt(label = "Tag", sizes = sizes, onClick = onClick)
VitaminTags.DecorativeGravel(label = "Tag", sizes = sizes, onClick = onClick)
VitaminTags.DecorativeJade(label = "Tag", sizes = sizes, onClick = onClick)
VitaminTags.DecorativeSaffron(label = "Tag", sizes = sizes, onClick = onClick)
}
Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
VitaminTags.DecorativeCobalt(
label = "Tag",
iconPainter = painterResource(id = R.drawable.ic_vtmn_football_line),
sizes = sizes,
onClick = onClick
)
VitaminTags.DecorativeGravel(
label = "Tag",
iconPainter = painterResource(id = R.drawable.ic_vtmn_football_line),
sizes = sizes,
onClick = onClick
)
VitaminTags.DecorativeJade(
label = "Tag",
iconPainter = painterResource(id = R.drawable.ic_vtmn_football_line),
sizes = sizes,
onClick = onClick
)
VitaminTags.DecorativeSaffron(
label = "Tag",
iconPainter = painterResource(id = R.drawable.ic_vtmn_football_line),
sizes = sizes,
onClick = onClick
)
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
package com.decathlon.vitamin.compose.tags.utils

enum class Theme { Light, Dark }
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
package com.decathlon.vitamin.compose.tags.utils

enum class Variant {
Default, Interactive
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 0dd9529

Please sign in to comment.