Merge pull request #467 from department-of-veterans-affairs/feature/4…

…47-narin-spacing-tokens

[Feature] Add spacing tokens and style-dictionary configs

packages/tokens/build.js

@@ -5,7 +5,7 @@ const StyleDictionary = require('style-dictionary')
  * Utils
  */
 
-/** Sort function to alphabetize token objects */
+/** Reterns a new tokens object sorted alphabetically by key */
 const sortTokensByKey = (obj) => {
   const sortedKeys = Object.keys(obj).sort()
   const sortedObj = {}
@@ -59,6 +59,12 @@ StyleDictionary.registerFilter({
   matcher: filterDark,
 })
 
+/** Remove tokens that do not have 'spacing' in the category */
+StyleDictionary.registerFilter({
+  name: 'filter/spacing/is-spacing',
+  matcher: (token) => token.attributes.category.includes('spacing'),
+})
+
 /**
  * Formats
  */
@@ -104,7 +110,8 @@ StyleDictionary.registerFormat({
   formatter: function () {
     return (
       "export { colors } from './colors'\n" +
-      "export { themes } from './themes'"
+      "export { themes } from './themes'\n" +
+      "export { spacing } from './spacing'"
     )
   },
 })
@@ -122,6 +129,19 @@ StyleDictionary.registerFormat({
   },
 })
 
+/** Creates named type declaration for spacing. Allows for TypeScript autocomplete */
+StyleDictionary.registerFormat({
+  name: 'typescript/es6-declarations/spacing',
+  formatter: function (dictionary) {
+    let declaration = 'export declare const spacing: {\n'
+    dictionary.allProperties.forEach((token) => {
+      declaration += `  ${token.name}: number;\n`
+    })
+    declaration += '}'
+    return declaration
+  },
+})
+
 /** Creates named type declaration for Themes. Allows for TypeScript autocomplete */
 StyleDictionary.registerFormat({
   name: 'typescript/es6-declarations/theme',
@@ -146,7 +166,8 @@ StyleDictionary.registerFormat({
   name: 'typescript/es6-declarations/module',
   formatter: function () {
     let declaration = "export * from './types/theme'\n"
-    declaration += "export * from './types/colors'"
+    declaration += "export * from './types/colors'\n"
+    declaration += "export * from './types/spacing'"
 
     return declaration
   },
@@ -156,9 +177,13 @@ StyleDictionary.registerFormat({
 StyleDictionary.registerFormat({
   name: 'json/dtcg',
   formatter: function ({ dictionary }) {
-    // Returns proper  value for dtcg aliasing
+    // Returns proper color value for dtcg aliasing
     const getValue = (value) => {
-      if (value.startsWith('{') && value.includes('.')) {
+      if (
+        typeof value == 'string' &&
+        value.startsWith('{') &&
+        value.includes('.')
+      ) {
         return `${value.split('.')[0]}}`
       }
 
@@ -179,6 +204,8 @@ StyleDictionary.registerFormat({
         return 'fontWeight'
       } else if (category === 'font' && type === 'size') {
         return 'dimension'
+      } else if (category === 'spacing') {
+        return 'number'
       }
 
       return ''
@@ -196,10 +223,28 @@ StyleDictionary.registerFormat({
       {},
     )
 
+    // Leave spacing tokens sorted by size
+    if (dictionary.allTokens?.[0].attributes?.category === 'spacing') {
+      return JSON.stringify(tokens, undefined, 2) + `\n`
+    }
+
     return JSON.stringify(sortTokensByKey(tokens), undefined, 2) + `\n`
   },
 })
 
+/** Custom format for spacing. Exports all spacing tokens as single object */
+StyleDictionary.registerFormat({
+  name: 'javascript/es6/vads-spacing',
+  formatter: function (dictionary) {
+    const tokens = dictionary.allProperties.reduce((result, token) => {
+      result[token.name] = token.value
+      return result
+    }, {})
+
+    return `export const spacing = ${JSON.stringify(tokens, null, 2)};`
+  },
+})
+
 /**
  * Transform Groups
  */

packages/tokens/config.js

@@ -6,6 +6,7 @@ module.exports = {
     'src/tokens/color/component-light.json',
     'src/tokens/color/semantic-dark.json',
     'src/tokens/color/component-dark.json',
+    'src/tokens/spacing/spacing.json',
   ],
   platforms: {
     rn: {
@@ -26,6 +27,11 @@ module.exports = {
           destination: 'js/index.js',
           format: 'javascript/es6/vads-module-export',
         },
+        {
+          destination: 'js/spacing.js',
+          format: 'javascript/es6/vads-spacing',
+          filter: 'filter/spacing/is-spacing',
+        },
         {
           destination: 'js/themes.js',
           format: 'javascript/es6/vads-colors-themes',
@@ -35,6 +41,11 @@ module.exports = {
           format: 'typescript/es6-declarations/colors',
           filter: 'filter/color/is-color',
         },
+        {
+          destination: 'types/spacing.d.ts',
+          format: 'typescript/es6-declarations/spacing',
+          filter: 'filter/spacing/is-spacing',
+        },
         {
           destination: 'types/theme.d.ts',
           format: 'typescript/es6-declarations/theme',
@@ -56,6 +67,11 @@ module.exports = {
           format: 'json/dtcg',
           filter: 'filter/color/light-mode',
         },
+        {
+          destination: `spacing.json`,
+          format: 'json/dtcg',
+          filter: 'filter/spacing/is-spacing',
+        },
       ],
     },
   },

packages/tokens/src/tokens/spacing/spacing.json

@@ -0,0 +1,86 @@
+{
+  "vads-space-none": {
+    "name": "vads-space-none",
+    "value": 0,
+    "attributes": {
+      "category": "spacing"
+    }
+  },
+  "vads-space-2xs": {
+    "name": "vads-space-2xs",
+    "value": 4,
+    "attributes": {
+      "category": "spacing"
+    }
+  },
+  "vads-space-xs": {
+    "name": "vads-space-xs",
+    "value": 8,
+    "attributes": {
+      "category": "spacing"
+    }
+  },
+  "vads-space-sm": {
+    "name": "vads-space-sm",
+    "value": 12,
+    "attributes": {
+      "category": "spacing"
+    }
+  },
+  "vads-space-md": {
+    "name": "vads-space-md",
+    "value": 16,
+    "attributes": {
+      "category": "spacing"
+    }
+  },
+  "vads-space-lg": {
+    "name": "vads-space-lg",
+    "value": 20,
+    "attributes": {
+      "category": "spacing"
+    }
+  },
+  "vads-space-xl": {
+    "name": "vads-space-xl",
+    "value": 24,
+    "attributes": {
+      "category": "spacing"
+    }
+  },
+  "vads-space-2xl": {
+    "name": "vads-space-2xl",
+    "value": 28,
+    "attributes": {
+      "category": "spacing"
+    }
+  },
+  "vads-space-3xl": {
+    "name": "vads-space-3xl",
+    "value": 32,
+    "attributes": {
+      "category": "spacing"
+    }
+  },
+  "vads-space-4xl": {
+    "name": "vads-space-4xl",
+    "value": 36,
+    "attributes": {
+      "category": "spacing"
+    }
+  },
+  "vads-space-5xl": {
+    "name": "vads-space-5xl",
+    "value": 40,
+    "attributes": {
+      "category": "spacing"
+    }
+  },
+  "vads-space-6xl": {
+    "name": "vads-space-6xl",
+    "value": 44,
+    "attributes": {
+      "category": "spacing"
+    }
+  }
+}