Merge pull request #73 from zcash/72-chip

ui-lib/src/main/java/cash/z/ecc/ui/screen/common/Chip.kt

@@ -0,0 +1,49 @@
+package cash.z.ecc.ui.screen.common
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import cash.z.ecc.ui.screen.onboarding.model.Index
+import cash.z.ecc.ui.theme.ZcashTheme
+
+@Preview
+@Composable
+fun ComposablePreview() {
+    ZcashTheme(darkTheme = false) {
+        Chip(Index(1), "edict")
+    }
+}
+
+@Composable
+fun Chip(
+    index: Index,
+    text: String,
+) {
+    Surface(
+        modifier = Modifier.padding(4.dp),
+        shape = MaterialTheme.shapes.medium,
+        color = MaterialTheme.colors.secondary,
+        elevation = 8.dp,
+    ) {
+        Row(modifier = Modifier.padding(8.dp)) {
+            Text(
+                text = index.value.toString(),
+                style = ZcashTheme.typography.chipIndex,
+                color = ZcashTheme.colors.chipIndex,
+            )
+            Spacer(modifier = Modifier.padding(horizontal = 2.dp, vertical = 0.dp))
+            Text(
+                text = text,
+                style = MaterialTheme.typography.body1,
+                color = MaterialTheme.colors.onSecondary,
+            )
+        }
+    }
+}

ui-lib/src/main/java/cash/z/ecc/ui/screen/debug/view/DesignGuide.kt

@@ -11,6 +11,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import cash.z.ecc.ui.screen.common.Body
+import cash.z.ecc.ui.screen.common.Chip
 import cash.z.ecc.ui.screen.common.Header
 import cash.z.ecc.ui.screen.common.NavigationButton
 import cash.z.ecc.ui.screen.common.PinkProgress
@@ -47,6 +48,7 @@ fun DesignGuide() {
             Callout(Icons.Filled.Person, contentDescription = "Person")
             Callout(Icons.Filled.List, contentDescription = "List")
             PinkProgress(progress = Progress(Index(1), Index(4)), Modifier.fillMaxWidth())
+            Chip(Index(1), "edict")
         }
     }
 }

ui-lib/src/main/java/cash/z/ecc/ui/theme/Color.kt

@@ -15,6 +15,7 @@ object Dark {
     val textTertiaryButton = Color.White
     val textNavigationButton = Color.Black
     val textCaption = Color(0xFF68728B)
+    val textChipIndex = Color(0xFFFFB900)
 
     val primaryButton = Color(0xFFFFB900)
     val primaryButtonPressed = Color(0xFFFFD800)
@@ -50,6 +51,7 @@ object Light {
     val textSecondaryButton = Color(0xFF2E476E)
     val textTertiaryButton = Color(0xFF283559)
     val textCaption = Color(0xFF2D3747)
+    val textChipIndex = Color(0xFFEE8592)
 
     // TODO The button colors are wrong for light
     val primaryButton = Color(0xFF263357)

ui-lib/src/main/java/cash/z/ecc/ui/theme/Theme.kt

@@ -41,7 +41,8 @@ data class ExtendedColors(
     val onCallout: Color,
     val progressStart: Color,
     val progressEnd: Color,
-    val progressBackground: Color
+    val progressBackground: Color,
+    val chipIndex: Color
 )
 
 val DarkExtendedColorPalette = ExtendedColors(
@@ -52,7 +53,8 @@ val DarkExtendedColorPalette = ExtendedColors(
     onCallout = Dark.onCallout,
     progressStart = Dark.progressStart,
     progressEnd = Dark.progressEnd,
-    progressBackground = Dark.progressBackground
+    progressBackground = Dark.progressBackground,
+    chipIndex = Dark.textChipIndex
 )
 
 val LightExtendedColorPalette = ExtendedColors(
@@ -63,7 +65,8 @@ val LightExtendedColorPalette = ExtendedColors(
     onCallout = Light.onCallout,
     progressStart = Light.progressStart,
     progressEnd = Light.progressEnd,
-    progressBackground = Light.progressBackground
+    progressBackground = Light.progressBackground,
+    chipIndex = Light.textChipIndex
 )
 
 val LocalExtendedColors = staticCompositionLocalOf {
@@ -75,7 +78,8 @@ val LocalExtendedColors = staticCompositionLocalOf {
         onCallout = Color.Unspecified,
         progressStart = Color.Unspecified,
         progressEnd = Color.Unspecified,
-        progressBackground = Color.Unspecified
+        progressBackground = Color.Unspecified,
+        chipIndex = Color.Unspecified
     )
 }
 
@@ -111,4 +115,8 @@ object ZcashTheme {
     val colors: ExtendedColors
         @Composable
         get() = LocalExtendedColors.current
+
+    val typography: ExtendedTypography
+        @Composable
+        get() = LocalExtendedTypography.current
 }

ui-lib/src/main/java/cash/z/ecc/ui/theme/Typography.kt

@@ -1,10 +1,13 @@
 package cash.z.ecc.ui.theme
 
 import androidx.compose.material.Typography
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.BaselineShift
 import androidx.compose.ui.unit.ExperimentalUnitApi
 import androidx.compose.ui.unit.sp
 import cash.z.ecc.ui.R
@@ -37,3 +40,18 @@ val Typography = Typography(
         fontSize = 16.sp
     ),
 )
+
+@Immutable
+data class ExtendedTypography(
+    val chipIndex: TextStyle,
+)
+
+val LocalExtendedTypography = staticCompositionLocalOf {
+    ExtendedTypography(
+        chipIndex = Typography.body1.copy(
+            fontSize = 10.sp,
+            baselineShift = BaselineShift.Superscript,
+            fontWeight = FontWeight.Bold
+        )
+    )
+}