feat: styling for custom checkbox

nl-design-system · Oct 7, 2021 · 53bf7a9 · 53bf7a9
1 parent 5c3d795
commit 53bf7a9
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 23 deletions.
diff --git a/components/custom-checkbox/bem.scss b/components/custom-checkbox/bem.scss
@@ -117,7 +117,8 @@
   @extend .utrecht-custom-checkbox__box--indeterminate;
 }
 
-.utrecht-custom-checkbox__icon {
+.utrecht-custom-checkbox__icon--checked,
+.utrecht-custom-checkbox__icon--indeterminate {
   display: none;
 }
 

diff --git a/components/custom-checkbox/stencil.stories.mdx b/components/custom-checkbox/stencil.stories.mdx
@@ -99,6 +99,21 @@ export const CustomCheckbox = ({
   </Story>
 </Canvas>
 
+### Disabled and checked
+
+<Canvas>
+  <Story
+    name="Disabled and checked checkbox"
+    args={{
+      ...defaultArgs,
+      checked: true,
+      disabled: true,
+    }}
+  >
+    {CustomCheckbox.bind({})}
+  </Story>
+</Canvas>
+
 ### Checked
 
 <Canvas>
@@ -127,10 +142,25 @@ export const CustomCheckbox = ({
   </Story>
 </Canvas>
 
-### Required and invalid
+### Invalid and checked
 
 The native checkbox should have the same position and size as the custom checkbox, so the native error message tooltip aligns with the custom checkbox.
 
+<Canvas>
+  <Story
+    name="Invalid and checked checkbox"
+    args={{
+      ...defaultArgs,
+      checked: true,
+      invalid: true,
+    }}
+  >
+    {CustomCheckbox.bind({})}
+  </Story>
+</Canvas>
+
+### Required and invalid
+
 <Canvas>
   <Story
     name="Required checkbox"

diff --git a/components/custom-checkbox/stencil.tsx b/components/custom-checkbox/stencil.tsx
@@ -16,13 +16,14 @@ export class CustomCheckbox {
   @Prop({ reflect: true }) checked: boolean = false;
   @Prop({ reflect: true }) indeterminate: boolean = false;
   @Prop({ reflect: true }) invalid: boolean = false;
+  @Prop({ reflect: true }) required: boolean = false;
   @Event() utrechtBlur: EventEmitter;
   @Event() utrechtChange: EventEmitter;
   @Event() utrechtFocus: EventEmitter;
   @Event() utrechtInput: EventEmitter;
 
   render() {
-    const { checked, disabled, indeterminate, invalid } = this;
+    const { checked, disabled, indeterminate, invalid, required } = this;
     const active = false;
 
     const toggleInteraction = () => {
@@ -55,9 +56,10 @@ export class CustomCheckbox {
         class="utrecht-custom-checkbox"
         role="checkbox"
         tabIndex={disabled ? null : 0}
-        aria-checked={indeterminate ? "mixed" : checked}
-        aria-disabled={disabled}
-        aria-invalid={invalid}
+        aria-checked={indeterminate ? "mixed" : checked ? "true" : "false"}
+        aria-disabled={disabled ? "true" : null}
+        aria-invalid={invalid ? "true" : null}
+        aria-required={required ? "true" : null}
         onClick={handleClick}
         onKeyPress={handleKeyPress}
         onKeyUp={handleKeyUp}
@@ -69,17 +71,14 @@ export class CustomCheckbox {
             checked && "utrecht-custom-checkbox__box--checked",
             !checked && "utrecht-custom-checkbox__box--not-checked",
             disabled && "utrecht-custom-checkbox__box--disabled",
-            focus && "utrecht-custom-checkbox__box--focus",
             invalid && "utrecht-custom-checkbox__box--invalid",
             indeterminate && "utrecht-custom-checkbox__box--indeterminate"
           )}
         >
-          <utrecht-icon-checkmark class="utrecht-custom-checkbox__icon utrecht-custom-checkbox__icon--checked">
-            ✔
-          </utrecht-icon-checkmark>
-          <utrecht-icon-indeterminate class="utrecht-custom-checkbox__icon utrecht-custom-checkbox__icon--indeterminate">
-            ■
-          </utrecht-icon-indeterminate>
+          {checked && <utrecht-icon-checkmark class="utrecht-custom-checkbox__icon">✔</utrecht-icon-checkmark>}
+          {indeterminate && (
+            <utrecht-icon-indeterminate class="utrecht-custom-checkbox__icon">■</utrecht-icon-indeterminate>
+          )}
         </div>
       </div>
     );

diff --git a/proprietary/design-tokens/src/brand/utrecht/color.tokens.json b/proprietary/design-tokens/src/brand/utrecht/color.tokens.json
@@ -35,6 +35,7 @@
         "80": { "value": "hsl(90 30% 80%)", "comment": "Licht groen" },
         "90": { "value": "hsl(90 30% 90%)", "comment": "Achtergrond licht groen" }
       },
+      "invalid": { "value": "#990000" },
       "white": { "value": "hsl(0 0% 100%)" },
       "black": { "value": "hsl(0 0% 0%)" }
     }

diff --git a/proprietary/design-tokens/src/common/utrecht/feedback.tokens.json b/proprietary/design-tokens/src/common/utrecht/feedback.tokens.json
@@ -17,9 +17,9 @@
         "color": { "value": "{utrecht.color.green.50.value}" }
       },
       "invalid": {
-        "background-color": { "value": "{utrecht.feedback.danger.background-color.value}" },
-        "border-color": { "value": "{utrecht.feedback.danger.border-color.value}" },
-        "color": { "value": "{utrecht.feedback.danger.color.value}" }
+        "background-color": { "value": "{utrecht.color.invalid.value}" },
+        "border-color": { "value": "{utrecht.color.invalid.value}" },
+        "color": { "value": "{utrecht.color.invalid.value}" }
       },
       "valid": {
         "background-color": { "value": "{utrecht.feedback.safe.background-color.value}" },

diff --git a/proprietary/design-tokens/src/component/utrecht/custom-checkbox/block.tokens.json b/proprietary/design-tokens/src/component/utrecht/custom-checkbox/block.tokens.json
@@ -4,9 +4,9 @@
       "size": { "value": "24px" },
       "border-color": { "value": "{utrecht.form-input.border-color.value}" },
       "color": { "value": "{utrecht.form-input.color.value}" },
-      "border-width": { "value": "2px" },
+      "border-width": { "value": "1px" },
       "background-color": { "value": "{utrecht.form-input.background-color.value}" },
-      "border-radius": { "value": "2px" },
+      "border-radius": { "value": "0" },
       "padding": {}
     }
   }

diff --git a/proprietary/design-tokens/src/component/utrecht/custom-checkbox/modifier.tokens.json b/proprietary/design-tokens/src/component/utrecht/custom-checkbox/modifier.tokens.json
@@ -13,12 +13,13 @@
         "background-color": {}
       },
       "disabled": {
-        "border-color": { "value": "{utrecht.color.grey.30.value}" },
-        "border-width": { "value": "{utrecht.color.grey.40.value}" },
-        "background-color": { "value": "{utrecht.color.white.value}" }
+        "border-color": { "value": "{utrecht.color.grey.80.value}" },
+        "border-width": {},
+        "background-color": { "value": "{utrecht.color.white.value}" },
+        "color": { "value": "{utrecht.color.grey.80.value}" }
       },
       "checked": {
-        "border-color": {},
+        "border-color": { "value": "{utrecht.color.blue.40.value}" },
         "border-width": {},
         "background-color": { "value": "{utrecht.color.blue.40.value}" },
         "color": { "value": "{utrecht.color.white.value}" },
@@ -33,7 +34,7 @@
       "invalid": {
         "border-color": { "value": "{utrecht.form-input.invalid.border-color.value}" },
         "border-width": {},
-        "background-color": { "value": "{utrecht.color.red.40.value}" },
+        "background-color": { "value": "{utrecht.feedback.invalid.background-color.value}" },
         "color": { "value": "{utrecht.color.white.value}" },
         "active": {
           "border-color": {},