From 776fdeabc5d6542980f2f17d6856058aa0944ef4 Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Thu, 25 Jul 2024 14:06:26 +0200
Subject: [PATCH] Update radio buttons [SCI-10913]

---
 .../stylesheets/application.tailwind.css      |  3 +-
 .../shared_styles/elements/radio_buttons.scss |  3 +-
 app/assets/stylesheets/tailwind/radio.css     | 42 +++++++++++++++++++
 app/views/design_elements/_radio.html.erb     | 19 +++++++++
 app/views/design_elements/index.html.erb      |  2 +
 5 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/stylesheets/tailwind/radio.css
 create mode 100644 app/views/design_elements/_radio.html.erb

diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index 400c99bdf..9e83df130 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -2,6 +2,7 @@
 @import "tailwind/buttons";
 @import "tailwind/modals";
 @import "tailwind/flyouts";
+@import "tailwind/radio";
 @import "tailwind/loader.css";
 
 @tailwind base;
@@ -69,6 +70,6 @@ html {
 
 @keyframes shine-lines {
   0% { background-position: -150px }
-  
+
   40%, 100% { background-position: 320px }
 }
diff --git a/app/assets/stylesheets/shared_styles/elements/radio_buttons.scss b/app/assets/stylesheets/shared_styles/elements/radio_buttons.scss
index b940efe9e..5b7fd31ca 100644
--- a/app/assets/stylesheets/shared_styles/elements/radio_buttons.scss
+++ b/app/assets/stylesheets/shared_styles/elements/radio_buttons.scss
@@ -1,5 +1,5 @@
 // scss-lint:disable SelectorDepth QualifyingElement
-
+/*
 :root {
   --sci-radio-size: 16px;
 }
@@ -85,3 +85,4 @@ input[type="radio"].sci-radio {
     }
   }
 }
+*/
diff --git a/app/assets/stylesheets/tailwind/radio.css b/app/assets/stylesheets/tailwind/radio.css
new file mode 100644
index 000000000..197119397
--- /dev/null
+++ b/app/assets/stylesheets/tailwind/radio.css
@@ -0,0 +1,42 @@
+@layer components {
+
+  .sci-radio-container {
+    @apply inline-block h-4 w-4 relative;
+  }
+
+  input[type="radio"].sci-radio {
+    @apply cursor-pointer shrink-0 h-4 w-4 m-0 opacity-0 relative z-[2];
+  }
+
+  input[type="radio"].sci-radio + .sci-radio-label {
+    @apply inline-block shrink-0 h-4 w-4 absolute left-0;
+  }
+
+  input[type="radio"].sci-radio + .sci-radio-label::before {
+    @apply border-[1px] border-solid border-sn-black rounded-full text-white text-center transition-all
+           h-4 w-4 left-0 absolute;
+    content: "";
+  }
+
+  input[type="radio"].sci-radio + .sci-radio-label::after{
+    @apply bg-white rounded-full text-white text-center transition-all
+            absolute w-2.5 h-2.5 top-[3px] left-[3px] ;
+    content: "";
+  }
+
+  input[type="radio"].sci-radio:checked + .sci-radio-label::before {
+    @apply !border-sn-blue;
+  }
+
+  input[type="radio"].sci-radio:checked + .sci-radio-label::after {
+    @apply !bg-sn-science-blue;
+  }
+
+  input[type="radio"].sci-radio:disabled + .sci-radio-label::before {
+    @apply !border-sn-sleepy-grey;
+  }
+
+  input[type="radio"].sci-radio:checked:disabled + .sci-radio-label::after {
+    @apply !bg-sn-sleepy-grey;
+  }
+}
diff --git a/app/views/design_elements/_radio.html.erb b/app/views/design_elements/_radio.html.erb
new file mode 100644
index 000000000..2d7929388
--- /dev/null
+++ b/app/views/design_elements/_radio.html.erb
@@ -0,0 +1,19 @@
+<h1>Radio</h1>
+<div class="flex flex-items gap-8 p-6">
+  <div class="sci-radio-container">
+    <input type="radio" name="test_1" class="sci-radio">
+    <span class="sci-radio-label">
+  </div>
+  <div class="sci-radio-container">
+    <input type="radio" name="test_1" class="sci-radio" checked>
+    <span class="sci-radio-label">
+  </div>
+  <div class="sci-radio-container">
+    <input type="radio" name="test_2" class="sci-radio" disabled>
+    <span class="sci-radio-label">
+  </div>
+  <div class="sci-radio-container">
+    <input type="radio" name="test_2" class="sci-radio" checked disabled>
+    <span class="sci-radio-label">
+  </div>
+</div>
diff --git a/app/views/design_elements/index.html.erb b/app/views/design_elements/index.html.erb
index b8c3d4dc1..523cfe07e 100644
--- a/app/views/design_elements/index.html.erb
+++ b/app/views/design_elements/index.html.erb
@@ -10,6 +10,8 @@
   end
 %>
 
+<%= render partial: 'radio' %>
+
 <%= render partial: 'select' %>
 
 <%= render partial: 'modals' %>