feat: Add Radio, update Checkbox and Switch

packages/css/src/common/hide-input.scss

@@ -0,0 +1,11 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@mixin hide-input {
+  appearance: none;
+  margin-block: 0;
+  margin-inline: 0;
+  opacity: 0%; /* to hide native input field in older iOS */
+}

packages/css/src/common/input-label-focus.scss

@@ -0,0 +1,21 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+/**
+  * Focus is first set on the label next to a focussed input, and then
+  * hidden when the focussed input doesn't have focus-visible.
+  * This progressive enhancement means you get the benefits of focus-visible
+  * while still showing a focus ring on browsers that don't support focus-visible (like older Safari).
+  */
+
+@mixin input-label-focus {
+  &:focus + label {
+    outline: auto;
+  }
+
+  &:focus:not(:focus-visible) + label {
+    outline: 0;
+  }
+}

packages/css/src/components/checkbox/checkbox.scss

@@ -3,16 +3,12 @@
  * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/input-label-focus";
+@import "../../common/hide-input";
+
 .amsterdam-checkbox__input {
-  appearance: none;
-  margin-block: 0;
-  margin-inline: 0;
-  opacity: 0%; /* to hide native input field in older iOS */
-
-  &:focus-visible + label {
-    outline: auto;
-    outline-offset: var(--amsterdam-checkbox-outline-offset);
-  }
+  @include hide-input;
+  @include input-label-focus;
 }
 
 .amsterdam-checkbox__checkmark {
@@ -23,9 +19,12 @@
   width: 1.5rem;
 
   &::after {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 1rem;
     border-color: var(--amsterdam-checkbox-checkmark-border-color);
     border-style: solid;
-    border-width: 2px;
+    border-width: 0.125rem;
     box-sizing: border-box;
     content: "";
     height: 1.5rem;
@@ -43,9 +42,10 @@
   display: inline-flex;
   font-family: var(--amsterdam-checkbox-font-family);
   font-size: var(--amsterdam-checkbox-font-size);
-  font-weight: 400;
+  font-weight: var(--amsterdam-checkbox-font-weight);
   gap: 0.5rem;
   line-height: var(--amsterdam-checkbox-line-height);
+  outline-offset: var(--amsterdam-checkbox-outline-offset);
 
   &:hover {
     color: var(--amsterdam-checkbox-hover-color);
@@ -55,7 +55,7 @@
 
     .amsterdam-checkbox__checkmark::after {
       border-color: var(--amsterdam-checkbox-checkmark-hover-border-color);
-      border-width: 3px;
+      border-width: 0.1875rem;
     }
   }
 
@@ -66,10 +66,7 @@
 .amsterdam-checkbox__input:checked {
   + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
     background-color: var(--amsterdam-checkbox-checkmark-checked-background-color);
-    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M12.216%2027.016%200%2014.168l2.91-2.77%209.346%209.837L29.129%204%2032%206.8z%22%2F%3E%3C%2Fsvg%3E");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 1rem;
+    background-image: var(--amsterdam-checkbox-checkmark-checked-background-image);
     border: none;
   }
 }
@@ -78,7 +75,7 @@
 .amsterdam-checkbox__input:indeterminate {
   + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
     background-color: var(--amsterdam-checkbox-checkmark-indeterminate-background-color);
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0id2hpdGUiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMTMuNzE0aDMydjRIMHoiLz48L3N2Zz4=");
+    background-image: var(--amsterdam-checkbox-checkmark-indeterminate-background-image);
     background-position: center;
     background-repeat: no-repeat;
     background-size: 1rem;
@@ -102,7 +99,7 @@
 
     .amsterdam-checkbox__checkmark::after {
       border-color: var(--amsterdam-checkbox-checkmark-disabled-border-color);
-      border-width: 2px;
+      border-width: 0.125rem;
     }
   }
 }

packages/css/src/components/index.scss

@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+@import "./radio/radio";
 @import "./tabs/tabs";
 @import "./text-area/text-area";
 @import "./column/column";

packages/css/src/components/radio/README.md

@@ -0,0 +1,18 @@
+<!-- @license CC0-1.0 -->
+
+# Radio
+
+Allows users to select one option from a list.
+
+## Guidelines
+
+- Do not assume that users will know how many options they can select based on the visual difference between radios and checkboxes alone.
+  If needed, add a hint explaining this, for example, ‘Select one option’.
+- Order radio options alphabetically by default.
+  In some cases, it can be helpful to order them from most-to-least common options.
+  For example, you could order options for ‘Where do you live?’ based on population size.
+  However you should do this with extreme caution as it can reinforce bias.
+  If in doubt, order alphabetically.
+- Labels should be concise. Try to keep labels shorter than 4 words.
+
+Use a [Checkbox](/docs/components-forms-checkbox--docs) when a user can select more than 1 option from a list.

packages/css/src/components/radio/radio.scss

@@ -0,0 +1,157 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/input-label-focus";
+@import "../../common/hide-input";
+
+.amsterdam-radio__input {
+  @include hide-input;
+  @include input-label-focus;
+}
+
+.amsterdam-radio__circle {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  height: calc(var(--amsterdam-radio-font-size) * var(--amsterdam-radio-line-height));
+  width: 1.5rem;
+
+  &::after {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 1rem;
+    border-color: var(--amsterdam-radio-circle-border-color);
+    border-radius: 100%;
+    border-style: solid;
+    border-width: 0.125rem;
+    box-sizing: border-box;
+    content: "";
+    height: 1.5rem;
+    width: 100%;
+  }
+}
+
+@mixin reset {
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-radio__label {
+  color: var(--amsterdam-radio-color);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--amsterdam-radio-font-family);
+  font-size: var(--amsterdam-radio-font-size);
+  font-weight: var(--amsterdam-radio-font-weight);
+  gap: 0.5rem;
+  line-height: var(--amsterdam-radio-line-height);
+  outline-offset: var(--amsterdam-radio-outline-offset);
+
+  &:hover {
+    color: var(--amsterdam-radio-hover-color);
+    text-decoration-line: underline;
+    text-decoration-thickness: 0.125rem;
+    text-underline-offset: 0.375rem;
+
+    .amsterdam-radio__circle::after {
+      border-color: var(--amsterdam-radio-circle-hover-border-color);
+    }
+  }
+
+  @include reset;
+}
+
+// Default checked
+.amsterdam-radio__input:checked {
+  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+    background-image: var(--amsterdam-radio-circle-checked-background-image);
+  }
+}
+
+// Invalid unchecked
+.amsterdam-radio__input[aria-invalid="true"] {
+  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+    border-color: var(--amsterdam-radio-circle-invalid-border-color);
+  }
+}
+
+// Disabled unchecked
+.amsterdam-radio__input:disabled {
+  + .amsterdam-radio__label {
+    color: var(--amsterdam-radio-disabled-color);
+    cursor: not-allowed;
+
+    .amsterdam-radio__circle::after {
+      border-color: var(--amsterdam-radio-circle-disabled-border-color);
+      border-width: 0.125rem;
+    }
+  }
+}
+
+// Invalid checked
+.amsterdam-radio__input[aria-invalid="true"]:checked {
+  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+    background-image: var(--amsterdam-radio-circle-invalid-checked-background-image);
+  }
+}
+
+// Disabled label
+.amsterdam-radio__input:disabled + .amsterdam-radio__label:hover {
+  text-decoration: none;
+}
+
+// Disabled checked
+.amsterdam-radio__input:disabled:checked {
+  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+    background-image: var(--amsterdam-radio-circle-disabled-checked-background-image);
+  }
+}
+
+// Disabled invalid unchecked
+.amsterdam-radio__input[aria-invalid="true"]:disabled {
+  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+    border-color: var(--amsterdam-radio-circle-disabled-border-color);
+  }
+}
+
+// HOVER STATES
+
+// Invalid unchecked hover
+.amsterdam-radio__input[aria-invalid="true"] + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+  // TODO: this should be the (currently non-existent) dark red hover color
+  border-color: var(--amsterdam-radio-circle-invalid-hover-border-color);
+}
+
+// Default checked hover
+.amsterdam-radio__input:checked + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+  background-image: var(--amsterdam-radio-circle-checked-hover-background-image);
+}
+
+// Invalid checked hover
+.amsterdam-radio__input[aria-invalid="true"]:checked + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+  // TODO: this should be the (currently non-existent) dark red hover color
+  background-image: var(--amsterdam-radio-circle-invalid-checked-hover-background-image);
+}
+
+// Disabled checked hover
+.amsterdam-radio__input:disabled:checked + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+  background-image: var(--amsterdam-radio-circle-disabled-checked-hover-background-image);
+}
+
+// Disabled invalid unchecked hover
+.amsterdam-radio__input[aria-invalid="true"]:disabled + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+  // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+  border-color: var(--amsterdam-radio-circle-disabled-border-color);
+}
+
+// DISABLED INVALID STATES
+
+// Disabled invalid checked
+.amsterdam-radio__input[aria-invalid="true"]:disabled:checked {
+  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+    background-image: var(--amsterdam-radio-circle-disabled-checked-background-image);
+  }
+}

packages/css/src/components/switch/switch.scss

@@ -3,22 +3,24 @@
  * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/input-label-focus";
+@import "../../common/hide-input";
+
 @mixin reset {
   box-sizing: border-box;
 }
 
 .amsterdam-switch__input {
-  appearance: none;
-  margin-block: 0;
-  margin-inline: 0;
-  opacity: 0%; /* to hide native input field in older iOS */
+  @include hide-input;
+  @include input-label-focus;
 }
 
 .amsterdam-switch__label {
   background-color: var(--amsterdam-switch-background-color);
   border-radius: calc(var(--amsterdam-switch-thumb-width) * 2);
   cursor: pointer;
   display: inline-block;
+  outline-offset: var(--amsterdam-switch-outline-offset);
   padding-block: 1px;
   padding-inline: 1px;
   transition: background-color 0.2s ease-in-out;
@@ -48,12 +50,6 @@
   cursor: not-allowed;
 }
 
-.amsterdam-switch__input:focus-visible + .amsterdam-switch__label {
-  outline-color: -webkit-focus-ring-color;
-  outline-offset: var(--amsterdam-switch-outline-offset);
-  outline-style: auto;
-}
-
 .amsterdam-switch__input:checked + .amsterdam-switch__label::before {
   // The 2px is to account for the 1px padding-inline on the label
   transform: translate(calc(var(--amsterdam-switch-width) - var(--amsterdam-switch-thumb-width) - 2px));

packages/react/src/Radio/README.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# React Radio component
+
+[Radio documentation](../../../css/src/components/radio/README.md)