feat: extra form-label tokens

nl-design-system · Aug 21, 2021 · 1b36c06 · 1b36c06
1 parent 03a061d
commit 1b36c06
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 7 deletions.
diff --git a/components/form-field-checkbox-group/bem.stories.mdx b/components/form-field-checkbox-group/bem.stories.mdx
@@ -13,7 +13,7 @@ export const Template = ({
   options,
   groupLabelId = "group-label",
 }) => `<div class="utrecht-form-field-checkbox-group utrecht-form-field-checkbox-group--distanced" role="group" aria-labelledby="${groupLabelId}">
-  <div class="utrecht-form-field-checkbox-group__label" id="${groupLabelId}">${label}</div>
+  <div class="utrecht-form-field-checkbox-group__label utrecht-form-label" id="${groupLabelId}">${label}</div>
   ${options
     .map((option, index) => ({
       ...option,

diff --git a/components/form-field-radio-group/bem.stories.mdx b/components/form-field-radio-group/bem.stories.mdx
@@ -9,18 +9,18 @@ import "../radio-button/bem.css";
 import "../form-label/bem.css";
 export const Template = ({ label = "", name = "" }) =>
   `<div class="utrecht-form-field-radio-group utrecht-form-field-radio-group--distanced" role="radiogroup" aria-labelledby="id-9e42cd3e">
-  <div class="utrecht-form-field-radio-group__label" id="id-9e42cd3e">${label}</div>
+  <div class="utrecht-form-field-radio-group__label utrecht-form-label" id="id-9e42cd3e">${label}</div>
   <div class="utrecht-form-field-radio utrecht-form-field-radio--distanced">
     <input type="radio" name="${name}" class="utrecht-form-field-radio__input utrecht-radio-button" id="option-1">
-    <label class="utrecht-form-field-radio__label" for="option-1">Option 1</label>
+    <label class="utrecht-form-field-radio__label utrecht-form-label utrecht-form-label--radio" for="option-1">Option 1</label>
   </div>
   <div class="utrecht-form-field-radio utrecht-form-field-radio--distanced">
     <input type="radio" name="${name}" class="utrecht-form-field-radio__input utrecht-radio-button" id="option-2">
-    <label class="utrecht-form-field-radio__label" for="option-2">Option 2</label>
+    <label class="utrecht-form-field-radio__label utrecht-form-label utrecht-form-label--radio" for="option-2">Option 2</label>
   </div>
   <div class="utrecht-form-field-radio utrecht-form-field-radio--distanced">
     <input type="radio" name="${name}" class="utrecht-form-field-radio__input utrecht-radio-button" id="option-3">
-    <label class="utrecht-form-field-radio__label" for="option-3">Option 3</label>
+    <label class="utrecht-form-field-radio__label utrecht-form-label utrecht-form-label--radio" for="option-3">Option 3</label>
   </div>
 </div>`;
 

diff --git a/components/form-label/bem.css b/components/form-label/bem.css
@@ -4,14 +4,25 @@
  */
 
 .utrecht-form-label {
+  color: var(--utrecht-form-label-color);
   font-size: var(--utrecht-form-label-font-size);
   font-weight: var(--utrecht-form-label-font-weight);
 }
 
 .utrecht-form-label--checkbox {
+  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
   font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
 }
 
+.utrecht-form-label--checked {
+  font-weight: var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight));
+}
+
+.utrecht-form-label--disabled {
+  font-weight: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
+}
+
 .utrecht-form-label--radio {
+  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
   font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
 }
diff --git a/components/form-label/bem.stories.mdx b/components/form-label/bem.stories.mdx
@@ -6,10 +6,20 @@ Copyright (c) 2021 Robbert Broersma
 import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
 import clsx from "clsx";
 import "./bem.css";
-export const Template = ({ textContent = "", type = null }) =>
+
+export const defaultArgs = {
+  checked: false,
+  disabled: false,
+  textContent: "",
+  type: null,
+};
+
+export const Template = ({ checked = false, disabled = false, textContent = "", type = null }) =>
   `<span class="${clsx(
     "utrecht-form-label",
     type === "checkbox" && "utrecht-form-label--checkbox",
+    checked && "utrecht-form-label--checked",
+    disabled && "utrecht-form-label--disabled",
     type === "radio" && "utrecht-form-label--radio"
   )}">${textContent}</span>`;
 
@@ -44,6 +54,7 @@ Styling via the `.utrecht-form-label` class name:
   <Story
     name="Label"
     args={{
+      ...defaultArgs,
       textContent: "Username",
     }}
   >
@@ -53,6 +64,22 @@ Styling via the `.utrecht-form-label` class name:
 
 <ArgsTable story="Label" />
 
+# Label for disabled input
+
+Styling via the `.utrecht-form-label--disabled` class name:
+
+<Canvas>
+  <Story
+    name="Label for disabled input"
+    args={{
+      disabled: true,
+      textContent: "Username",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
 # Label for checkbox
 
 Styling via the `.utrecht-form-label--checkbox` class name:
@@ -69,6 +96,23 @@ Styling via the `.utrecht-form-label--checkbox` class name:
   </Story>
 </Canvas>
 
+# Label for checked checkbox
+
+Styling via the `.utrecht-form-label--checked` class name:
+
+<Canvas>
+  <Story
+    name="Label for checked checkbox"
+    args={{
+      checked: true,
+      textContent: "Username",
+      type: "checkbox",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
 # Label for radio button
 
 Styling via the `.utrecht-form-label--radio` class name:
@@ -77,7 +121,24 @@ Styling via the `.utrecht-form-label--radio` class name:
   <Story
     name="Label for radio button"
     args={{
-      textContent: "Username",
+      textContent: "Option 1",
+      type: "radio",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# Label for checked radio button
+
+Styling via the `.utrecht-form-label--radio` and `.utrecht-form-label--checked` class names:
+
+<Canvas>
+  <Story
+    name="Label for checked radio button"
+    args={{
+      checked: true,
+      textContent: "Option 1",
       type: "radio",
     }}
   >

diff --git a/components/form-label/block.style-dictionary.json b/components/form-label/block.style-dictionary.json
@@ -1,6 +1,12 @@
 {
   "utrecht": {
     "label": {
+      "color": {
+        "css": {
+          "syntax": "<color>",
+          "inherits": true
+        }
+      },
       "font-weight": {
         "css": {
           "syntax": "<number>",

diff --git a/components/form-label/modifier.style-dictionary.json b/components/form-label/modifier.style-dictionary.json
@@ -2,14 +2,42 @@
   "utrecht": {
     "form-label": {
       "checkbox": {
+        "color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        },
+        "font-weight": {
+          "css": {
+            "syntax": "<number>",
+            "inherits": true
+          }
+        }
+      },
+      "checked": {
         "font-weight": {
           "css": {
             "syntax": "<number>",
             "inherits": true
           }
         }
       },
+      "disabled": {
+        "color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        }
+      },
       "radio": {
+        "color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        },
         "font-weight": {
           "css": {
             "syntax": "<number>",