@demos-europe/demosplan-ui 0.3.5 → 0.3.6

package/CHANGELOG.md

@@ -4,6 +4,18 @@ Since v0.0.10, this Changelog is formatted according to the [Common Changelog][c
 
 ## UNRELEASED
 
+## v0.3.6 - 2024-02-07
+### Fixed
+
+- ([#729](https://github.com/demos-europe/demosplan-ui/pull/729)) Fix DpAnonymizeText functionality ([@sakutademos](https://github.com/sakutademos))
+
+### Added
+
+- ([#721](https://github.com/demos-europe/demosplan-ui/pull/721)) Pass the allowEmpty prop to vue-multiselect, which prevents the deselection of values ([@sakutademos](https://github.com/sakutademos))
+- ([#718](https://github.com/demos-europe/demosplan-ui/pull/718)) Add missing data attr for E-2-E Test ([@ahmad-demos](https://github.com/ahmad-demos)) 
+- ([#714](https://github.com/demos-europe/demosplan-ui/pull/714)) add csrf token to dpRpc to prevent missing csrf errors ([@muellerdemos](https://github.com/muellerdemos)) 
+- ([#734](https://github.com/demos-europe/demosplan-ui/pull/734)) Allow mailto links in DpEditor link modal ([@spiess-demos](https://github.com/spiess-demos))
+
 ## v0.3.5 - 2024-01-09
 
 ### Fixed

package/buildTokens.js

@@ -1,6 +1,12 @@
 const glob = require('glob')
 const StyleDictionary = require('style-dictionary')
 
+const {
+  createPropertyFormatter,
+  fileHeader,
+  sortByReference
+} = StyleDictionary.formatHelpers
+
 const prefix = 'dp-'
 
 const tokensPath = 'tokens/src/**/*.json'
@@ -14,36 +20,73 @@ const files = glob
   // Do not render tokens only used internally
   .filter(filePath => !filePath.startsWith('_'))
 
+// Adds prefix to variables
 StyleDictionary.registerTransform({
   name: 'name/scss',
   type: 'name',
-  transformer: (token) => {
-    // The domain part ("palette", "ui"...) within color tokens should not be part of the variable name.
-    // The domain part ("scale", "heading", "ui"...) within font-size tokens should not be part of the variable name.
-    if (token.path[0] === 'color' || token.path[0] === 'font-size') {
-      token.path.splice(1, 1)
-    }
-    // The key "z-index" should be shortened in the variable name to match Tailwind syntax
-    if (token.path[0] === 'z-index') {
-      token.path[0] = 'z'
-    }
-    // Scss does not like variable names with dots in them, but Tailwind does, apparently.
-    if (token.path[0] === 'space') {
-      token.path[1] = token.path[1].replace('.', '_')
-    }
-    // "DEFAULT" is a Tailwind convention that should not be part of the Scss name
-    if (token.path[1] === 'DEFAULT') {
-      token.path.splice(1, 1)
-    }
-    return prefix + token.path.join('-')
-  }
+  transformer: (token) => prefix + token.path.join('-')
 })
 
+// Adds prefix transform to default scss transform group
 StyleDictionary.registerTransformGroup({
   name: 'custom/scss',
   transforms: StyleDictionary.transformGroup.scss.concat(['name/scss'])
 })
 
+/**
+ * This format is a customized version of the implementation
+ * in `formattedVariables`. It applies some transformations
+ * to scss variables according to the conventions in demosplan-ui.
+ * See https://github.com/amzn/style-dictionary/blob/17f4cb2f30bd002dfd55d6ef8c5bee4138de8d64/lib/common/formatHelpers/formattedVariables.js#L46
+ */
+StyleDictionary.registerFormat({
+  name: 'scss/customVariables',
+  formatter: ({dictionary, options, file}) => {
+    const { outputReferences, themeable = false, formatting} = options
+    let { allTokens } = dictionary
+
+    if (outputReferences) {
+      allTokens = [...allTokens].sort(sortByReference(dictionary))
+    }
+
+    const propertyFormatter = createPropertyFormatter({ outputReferences, dictionary, format: 'sass', formatting, themeable })
+
+    const tokens = allTokens
+      .map(token => {
+        let formattedVar = propertyFormatter(token)
+
+        // The domain part within color tokens should not be part of the variable name.
+        if (token.path[0] === 'color') {
+          formattedVar = formattedVar.replace(/-(brand|data|palette|ui)/g, '')
+        }
+
+        // The domain part within font-size tokens should not be part of the variable name.
+        if (token.path[0] === 'font-size') {
+          formattedVar = formattedVar.replace(/-(scale|brand|heading|ui)/g, '')
+        }
+
+        // The key "z-index" should be shortened in the variable name to match Tailwind syntax
+        if (token.path[0] === 'z-index') {
+          formattedVar = formattedVar.replace(/z-index-/g, 'z-')
+        }
+
+        // Scss does not like variable names with dots in them, but Tailwind does, apparently.
+        if (token.path[0] === 'space') {
+          formattedVar = formattedVar.replace(/\./g, '_')
+        }
+
+        // "DEFAULT" is a Tailwind convention that should not be part of the Scss name
+        formattedVar = formattedVar.replace(/-DEFAULT/g, '')
+
+        return formattedVar
+      })
+      .filter(function(strVal) { return !!strVal })
+      .join('\n')
+
+    return fileHeader({file, commentStyle: 'short'}) + '\n' + tokens + '\n'
+  }
+})
+
 const StyleDictionaryExtended = StyleDictionary.extend({
   source: [tokensPath],
   platforms: {
@@ -53,7 +96,7 @@ const StyleDictionaryExtended = StyleDictionary.extend({
       files: files.map((filePath) => {
         return {
           destination: `_${filePath}.scss`,
-          format: 'scss/variables',
+          format: 'scss/customVariables',
           filter: (token) => token.filePath.includes(filePath),
           options: {
             outputReferences: true