From abe82c07eac841b3ca66fac04b77afd797c394c1 Mon Sep 17 00:00:00 2001
From: Kasper Garnaes <kasper.garnaes@gmail.com>
Date: Fri, 3 Jun 2022 08:59:16 +0200
Subject: [PATCH] Add temporary design of focused checkboxes

This makes it easier to test keyboard navigation.

The border radius around elements is removed to create a rectangular
focuswhich resembles other boxes in the design. It was not used
anywhere else.

We should talk to the designers to determine a proper design here.
---
 src/stories/checkbox/checkbox.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/stories/checkbox/checkbox.scss b/src/stories/checkbox/checkbox.scss
index e6db884dc..8835adc0b 100644
--- a/src/stories/checkbox/checkbox.scss
+++ b/src/stories/checkbox/checkbox.scss
@@ -12,7 +12,6 @@
   user-select: none;
   cursor: pointer;
   padding: 6px 8px;
-  border-radius: 6px;
   overflow: hidden;
   transition: all 0.3s ease;
   display: flex;
@@ -66,6 +65,13 @@
   }
 }
 
+.checkbox__input:focus + .checkbox__label {
+  // TODO: Determine a proper design for elements in focus.
+  // This is a temporary solution to make it easier to test keyboard navigation.
+  outline: solid 1px $c-text-secondary-gray;
+  outline-offset: 0;
+}
+
 @keyframes zoom-in-out {
   50% {
     transform: scale(0.9);