feat: add code example for tokens use

NOTICE.txt

@@ -15,6 +15,7 @@ app/src/beta/res/drawable/ic_launcher_foreground.xml
 app/src/main/res/drawable/ic_border.xml
 app/src/main/res/drawable/ic_chevron_down.xml
 app/src/main/res/drawable/ic_component_atom.xml
+app/src/main/res/drawable/ic_copy.xml
 app/src/main/res/drawable/ic_design_token_figma.xml
 app/src/main/res/drawable/ic_design_token_figma_no_padding.xml
 app/src/main/res/drawable/ic_dimension.xml

app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt

@@ -16,6 +16,15 @@ import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
 import androidx.compose.runtime.Immutable
 import com.orange.ouds.app.R
+import com.orange.ouds.app.ui.utilities.getTokenName
+import com.orange.ouds.theme.tokens.OudsBorderKeyToken
+import com.orange.ouds.theme.tokens.OudsColorKeyToken
+import com.orange.ouds.theme.tokens.OudsElevationKeyToken
+import com.orange.ouds.theme.tokens.OudsGridKeyToken
+import com.orange.ouds.theme.tokens.OudsOpacityKeyToken
+import com.orange.ouds.theme.tokens.OudsSizeKeyToken
+import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
+import com.orange.ouds.theme.tokens.OudsTypographyKeyToken
 
 val tokenCategories = TokenCategory::class.sealedSubclasses.mapNotNull { it.objectInstance }
 
@@ -24,6 +33,7 @@ sealed class TokenCategory<T>(
     @StringRes val nameRes: Int,
     @DrawableRes val imageRes: Int,
     @StringRes val descriptionRes: Int,
+    val valueCodeExample: String? = null,
     val properties: List<TokenProperty<T>> = emptyList(),
     val subcategories: List<TokenCategory<*>> = emptyList(),
 ) where T : TokenCategory<T> {
@@ -40,13 +50,15 @@ sealed class TokenCategory<T>(
         R.string.app_tokens_border_label,
         R.drawable.ic_border,
         R.string.app_tokens_border_description_text,
-        listOf(TokenProperty.BorderWidth, TokenProperty.BorderRadius, TokenProperty.BorderStyle)
+        getTokenValueCode<OudsBorderKeyToken.Width.None>(),
+        listOf(TokenProperty.BorderWidth, TokenProperty.BorderRadius, TokenProperty.BorderStyle),
     )
 
     data object Color : TokenCategory<Color>(
         R.string.app_tokens_color_label,
         R.drawable.ic_palette,
         R.string.app_tokens_color_description_text,
+        getTokenValueCode<OudsColorKeyToken.Action.Disabled>(),
         listOf(
             TokenProperty.ColorAction,
             TokenProperty.ColorAlways,
@@ -70,6 +82,7 @@ sealed class TokenCategory<T>(
             R.string.app_tokens_dimension_space_label,
             R.drawable.ic_dimension,
             R.string.app_tokens_dimension_space_description_text,
+            getTokenValueCode<OudsSpaceKeyToken.Scaled.None>(),
             listOf(
                 TokenProperty.SpaceScaled,
                 TokenProperty.SpaceFixed,
@@ -91,6 +104,7 @@ sealed class TokenCategory<T>(
             R.string.app_tokens_dimension_size_label,
             R.drawable.ic_dimension,
             R.string.app_tokens_dimension_size_description_text,
+            getTokenValueCode<OudsSizeKeyToken.Icon.Decorative.Shortest>(),
             listOf(TokenProperty.SizeIconDecorative, TokenProperty.SizeIconWithText),
         )
     }
@@ -99,27 +113,33 @@ sealed class TokenCategory<T>(
         R.string.app_tokens_elevation_label,
         R.drawable.ic_layers,
         R.string.app_tokens_elevation_description_text,
+        getTokenValueCode<OudsElevationKeyToken.None>(),
         listOf(TokenProperty.Elevation)
     )
 
     data object Grid : TokenCategory<Grid>(
         R.string.app_tokens_grid_label,
         R.drawable.ic_menu_grid,
         R.string.app_tokens_grid_description_text,
+        getTokenValueCode<OudsGridKeyToken.MinWidth>(),
         listOf(TokenProperty.Grid)
     )
 
     data object Opacity : TokenCategory<Opacity>(
         R.string.app_tokens_opacity_label,
         R.drawable.ic_filter_effects,
         R.string.app_tokens_opacity_description_text,
+        getTokenValueCode<OudsOpacityKeyToken.Transparent>(),
         listOf(TokenProperty.Opacity)
     )
 
     data object Typography : TokenCategory<Typography>(
         R.string.app_tokens_typography_label,
         R.drawable.ic_typography,
         R.string.app_tokens_typography_description_text,
+        getTokenValueCode<OudsTypographyKeyToken.Display.Large>(),
         listOf(TokenProperty.Typography)
     )
 }
+
+private inline fun <reified T> getTokenValueCode() = "${T::class.getTokenName()}.value"

app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategoryDetailScreen.kt

@@ -12,10 +12,21 @@
 
 package com.orange.ouds.app.ui.tokens
 
+import android.content.Context
+import android.widget.Toast
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.FastOutSlowInEasing
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.core.updateTransition
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.fadeIn
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
@@ -26,18 +37,39 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.LocalRippleConfiguration
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.platform.ClipboardManager
+import androidx.compose.ui.platform.LocalClipboardManager
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.heading
 import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.stateDescription
+import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 import com.orange.ouds.app.R
 import com.orange.ouds.app.ui.utilities.composable.DetailScreenHeader
 import com.orange.ouds.app.ui.utilities.composable.Screen
@@ -61,6 +93,9 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory<*>, onSubcategoryClic
                     descriptionRes = tokenCategory.descriptionRes,
                     imageRes = tokenCategory.imageRes
                 )
+                tokenCategory.valueCodeExample?.let { codeExample ->
+                    CodeColumn(modifier = Modifier.padding(top = OudsSpaceKeyToken.Fixed.Shortest.value), codeExample = codeExample)
+                }
             }
 
             if (tokenCategory.subcategories.isNotEmpty()) {
@@ -210,6 +245,82 @@ private fun TokenPropertyHeader(tokenProperty: TokenProperty<*>, modifier: Modif
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun CodeColumn(codeExample: String, modifier: Modifier = Modifier) {
+    val context = LocalContext.current
+    val clipboardManager = LocalClipboardManager.current
+    var isExpanded by rememberSaveable { mutableStateOf(false) }
+    val linkStateDescription = stringResource(if (isExpanded) R.string.app_common_expanded_a11y else R.string.app_common_collapsed_a11y)
+    val linkContentDescription = stringResource(R.string.app_tokens_viewCodeExample_label)
+    val transition = updateTransition(targetState = isExpanded, label = "LinkArrowTransition")
+    val linkArrowRotation by transition.animateFloat(
+        label = "LinkArrowRotation",
+        transitionSpec = {
+            tween(durationMillis = 300, easing = FastOutSlowInEasing)
+        }
+    ) { expanded ->
+        if (expanded) 180f else 0f
+    }
+
+    Column(modifier = modifier.padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value)) {
+        CompositionLocalProvider(LocalRippleConfiguration provides null) {
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(vertical = OudsSpaceKeyToken.Fixed.Short.value)
+                    .clickable {
+                        isExpanded = !isExpanded
+                    }
+                    .clearAndSetSemantics {
+                        contentDescription = linkContentDescription
+                        stateDescription = linkStateDescription
+                    },
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.PaddingInline.WithArrow.Short.value)
+            ) {
+                Text(
+                    text = stringResource(R.string.app_tokens_viewCodeExample_label),
+                    style = OudsTypographyKeyToken.Label.Strong.Large.value
+                )
+                Icon(
+                    modifier = Modifier.rotate(linkArrowRotation),
+                    painter = painterResource(R.drawable.ic_chevron_down),
+                    tint = OudsColorKeyToken.Brand.Primary.Default.value,
+                    contentDescription = null
+                )
+            }
+        }
+        AnimatedVisibility(visible = isExpanded, enter = fadeIn(tween(delayMillis = 150)) + expandVertically()) {
+            Box(
+                modifier = Modifier
+                    .background(color = OudsColorKeyToken.Background.Secondary.value)
+                    .border(width = 1.dp, color = OudsColorKeyToken.Border.Default.value, shape = RectangleShape)
+            ) {
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Short.value),
+                    verticalAlignment = Alignment.Top
+                ) {
+                    Text(
+                        modifier = Modifier
+                            .weight(1f)
+                            .padding(vertical = OudsSpaceKeyToken.Fixed.Medium.value)
+                            .padding(start = OudsSpaceKeyToken.Fixed.Medium.value), text = codeExample, style = TextStyle(fontFamily = FontFamily.Monospace)
+                    )
+                    IconButton(onClick = { copyCodeToClipboard(context, codeExample, clipboardManager) }) {
+                        Icon(painter = painterResource(R.drawable.ic_copy), contentDescription = stringResource(R.string.app_common_copyCode_a11y))
+                    }
+                }
+            }
+        }
+    }
+}
+
+private fun copyCodeToClipboard(context: Context, code: String, clipboardManager: ClipboardManager) {
+    clipboardManager.setText(AnnotatedString(code))
+    Toast.makeText(context, context.getString(R.string.app_common_codeCopied_text), Toast.LENGTH_SHORT).show()
+}
+
 @UiModePreviews.Default
 @Composable
 private fun PreviewTokenCategoryDetailScreen(

app/src/main/java/com/orange/ouds/app/ui/utilities/KClassExt.kt

@@ -52,9 +52,11 @@ fun KClass<*>.getTokens(
     }
 }
 
-fun KClass<*>.getTokenName(fromParent: KClass<*>): String {
+fun KClass<*>.getTokenName(fromParent: KClass<*>? = null): String {
+    val prefix = if (fromParent != null) "${fromParent.qualifiedName.orEmpty()}." else "${java.`package`?.name.orEmpty()}."
+
     return qualifiedName.orEmpty()
-        .removePrefix("${fromParent.qualifiedName.orEmpty()}.")
+        .removePrefix(prefix)
         .removeSuffix(".Companion")
 }
 

app/src/main/res/drawable/ic_copy.xml

@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M14.4,3L3,3l0,12c0,1.325 1.075,2.4 2.4,2.4l0.6,0L6,5.4l10.8,0c0,-1.325 -1.075,-2.4 -2.4,-2.4Z"
+      android:fillColor="#000000"/>
+  <path
+      android:pathData="M18.6,6.6l-11.4,0l0,12c0,1.325 1.075,2.4 2.4,2.4l11.4,0l0,-12c0,-1.325 -1.075,-2.4 -2.4,-2.4Z"
+      android:fillColor="#000000"/>
+</vector>

app/src/main/res/values/strings.xml

@@ -15,6 +15,10 @@
 
     <!-- Common -->
     <string name="app_common_back_a11y">Back</string>
+    <string name="app_common_copyCode_a11y">Copy code</string>
+    <string name="app_common_codeCopied_text">Code copied to the clipboard</string>
+    <string name="app_common_collapsed_a11y">Collapsed</string>
+    <string name="app_common_expanded_a11y">Expanded</string>
 
     <!-- Top bar -->
     <string name="app_topBar_theme_button_a11y">ChangeTheme</string>
@@ -33,6 +37,7 @@
     <string name="app_tokens_floatFormat_label" translatable="false">%sf</string>
     <string name="app_tokens_dpFormat_label" translatable="false">%s dp</string>
     <string name="app_tokens_spFormat_label" translatable="false">%s sp</string>
+    <string name="app_tokens_viewCodeExample_label">View token code example</string>
 
     <!-- Tokens: border -->
     <string name="app_tokens_border_label">Border</string>