feat: new design tokens for form-field-description

nl-design-system · Sep 26, 2021 · 0294576 · 0294576
1 parent bb28c22
commit 0294576
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/components/form-field-description/bem.js b/components/form-field-description/bem.js
@@ -6,7 +6,7 @@
 import clsx from 'clsx';
 
 export const FormFieldDescription = ({ id = null, innerHTML = '', status = null }) =>
-  `<div id="${id}" class="${clsx(
+  `<div${id ? ` id="${id}"` : ''} class="${clsx(
     'utrecht-form-field-description',
     'utrecht-form-field-description--distanced',
     status === 'valid' && 'utrecht-form-field-description--valid',

diff --git a/components/form-field-description/bem.scss b/components/form-field-description/bem.scss
@@ -4,8 +4,10 @@
  */
 
 .utrecht-form-field-description {
+  color: var(--utrecht-form-field-description-color);
   font-family: var(--utrecht-document-font-family, inherit);
   font-size: var(--utrecht-form-field-description-font-size, inherit);
+  font-style: var(--utrecht-form-field-description-font-style);
 }
 
 .utrecht-form-field-description--distanced {

diff --git a/components/form-field-description/block.tokens.json b/components/form-field-description/block.tokens.json
@@ -1,12 +1,30 @@
 {
   "utrecht": {
     "form-field-description": {
+      "color": {
+        "css": {
+          "syntax": "<color>",
+          "inherits": true
+        }
+      },
       "font-family": {
         "css": {
           "syntax": "*",
           "inherits": true
         }
       },
+      "font-size": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
+      },
+      "font-style": {
+        "css": {
+          "syntax": "italic",
+          "inherits": true
+        }
+      },
       "margin-block-start": {
         "css": {
           "syntax": "<length>",