fix: uses lowercase for parameter names in Compose's Typography

elementsinteractive · Jul 11, 2022 · 90e85c9 · 90e85c9
1 parent 7390e98
commit 90e85c9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
   },
   "dependencies": {
     "ejs": "^3.1.8",
+    "lodash": "^4.17.21",
     "style-dictionary": "^3.7.1",
     "tinycolor2": "^1.4.2",
     "token-transformer": "^0.0.24",
@@ -62,7 +63,6 @@
     "husky": "^8.0.1",
     "jest": "^28.1.0",
     "lint-staged": "^13.0.3",
-    "lodash": "^4.17.21",
     "prettier": "^2.6.2",
     "semantic-release": "^19.0.3",
     "ts-jest": "^28.0.5",

diff --git a/src/android/formatters/__tests__/__snapshots__/typographyFormatter.test.ts.snap b/src/android/formatters/__tests__/__snapshots__/typographyFormatter.test.ts.snap
@@ -10,22 +10,22 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.sp
 import com.airbnb.android.showkase.annotation.ShowkaseTypography
 
-@ShowkaseTypography(name = \\"H1\\", group = \\"material\\")
-val H1 = TextStyle(
+@ShowkaseTypography(name = \\"h1\\", group = \\"material\\")
+val h1 = TextStyle(
     fontWeight = FontWeight.Light,
     fontSize = 96.sp,
     letterSpacing = (-1.5).sp,
 )
 
-@ShowkaseTypography(name = \\"H2\\", group = \\"material\\")
-val H2 = TextStyle(
+@ShowkaseTypography(name = \\"h2\\", group = \\"material\\")
+val h2 = TextStyle(
     fontWeight = FontWeight.Light,
     fontSize = 60.sp,
     letterSpacing = (-0.5).sp,
 )
 
 val AppTypography = Typography(
-    H1 = H1,
-    H2 = H2,
+    h1 = h1,
+    h2 = h2,
 )"
 `;
diff --git a/src/android/formatters/typographyFormatter.ts b/src/android/formatters/typographyFormatter.ts
@@ -1,8 +1,10 @@
-import Color from 'tinycolor2'
-import { useTemplate } from '../../utils'
-import type { Dictionary, Formatter } from 'style-dictionary'
+import type { Formatter } from 'style-dictionary'
+import { toLower } from 'lodash'
+
 import { FormatterConfig } from './types'
 
+import { useTemplate } from '../../utils'
+
 export const typographyFormatter: (config: FormatterConfig) => Formatter =
   (config: FormatterConfig) =>
   ({ dictionary }) => {
@@ -19,7 +21,7 @@ export const typographyFormatter: (config: FormatterConfig) => Formatter =
     const tokens = dictionary.tokens
 
     const typographies = Object.keys(tokens).map(token => ({
-      name: token,
+      name: toLower(token),
       ...tokens[token].value,
       fontWeight: mapFontWeight(tokens[token].value.fontWeight),
     }))