From 54954492e8733ae1ff87a0323aa2eef16ab3db9a Mon Sep 17 00:00:00 2001
From: Sami Korpela <sami.korpela@gofore.com>
Date: Mon, 8 Apr 2024 10:56:11 +0300
Subject: [PATCH] OPHJOD-285: Update RoundLinkButton clickable area

---
 lib/components/RoundButton/RoundButton.tsx    |  4 +-
 .../__snapshots__/RoundButton.test.tsx.snap   | 20 +++----
 .../RoundLinkButton/RoundLinkButton.tsx       | 24 ++++----
 .../RoundLinkButton.test.tsx.snap             | 60 +++++++------------
 4 files changed, 44 insertions(+), 64 deletions(-)

diff --git a/lib/components/RoundButton/RoundButton.tsx b/lib/components/RoundButton/RoundButton.tsx
index 1c0115f..5ad777a 100644
--- a/lib/components/RoundButton/RoundButton.tsx
+++ b/lib/components/RoundButton/RoundButton.tsx
@@ -24,10 +24,10 @@ export const RoundButton = ({ label, onClick, disabled = false, selected = false
         disabled={disabled}
         type="button"
         onClick={onClick}
-        className={`border-transparent hover:ring-purple-500 focus:ring-purple-500 size-[72px] rounded-full border hover:ring focus:outline-none focus:ring focus:hover:border-none ${selected ? 'bg-[#697077]' : 'bg-[#f5f5f5]'}`}
+        className={`focus:ring-purple-500 size-[72px] rounded-full border border-none hover:ring hover:ring-accent focus:outline-none focus:ring focus:hover:border-none ${selected ? 'bg-[#697077]' : 'bg-[#f5f5f5]'}`}
       >
         {/** TODO: Need real icons and alignment and styles to be adjusted then */}
-        <span className={`text-5xl text-center leading-6 ${selected ? 'text-[#ffffff]' : 'text-[#4d5358]'}`}>
+        <span className={`text-center text-[42px] leading-6 ${selected ? 'text-[#ffffff]' : 'text-[#4d5358]'}`}>
           &#9776;
         </span>
       </button>
diff --git a/lib/components/RoundButton/__snapshots__/RoundButton.test.tsx.snap b/lib/components/RoundButton/__snapshots__/RoundButton.test.tsx.snap
index 4100fca..9afd748 100644
--- a/lib/components/RoundButton/__snapshots__/RoundButton.test.tsx.snap
+++ b/lib/components/RoundButton/__snapshots__/RoundButton.test.tsx.snap
@@ -6,11 +6,11 @@ exports[`Snapshot testing > Default 1`] = `
 >
   <button
     aria-labelledby=":r0:"
-    class="border-transparent hover:ring-purple-500 focus:ring-purple-500 size-[72px] rounded-full border hover:ring focus:outline-none focus:ring focus:hover:border-none bg-[#f5f5f5]"
+    class="focus:ring-purple-500 size-[72px] rounded-full border border-none hover:ring hover:ring-accent focus:outline-none focus:ring focus:hover:border-none bg-[#f5f5f5]"
     type="button"
   >
     <span
-      class="text-5xl text-center leading-6 text-[#4d5358]"
+      class="text-center text-[42px] leading-6 text-[#4d5358]"
     >
       ☰
     </span>
@@ -30,11 +30,11 @@ exports[`Snapshot testing > Disabled, non-selected 1`] = `
 >
   <button
     aria-labelledby=":r3:"
-    class="border-transparent hover:ring-purple-500 focus:ring-purple-500 size-[72px] rounded-full border hover:ring focus:outline-none focus:ring focus:hover:border-none bg-[#f5f5f5]"
+    class="focus:ring-purple-500 size-[72px] rounded-full border border-none hover:ring hover:ring-accent focus:outline-none focus:ring focus:hover:border-none bg-[#f5f5f5]"
     type="button"
   >
     <span
-      class="text-5xl text-center leading-6 text-[#4d5358]"
+      class="text-center text-[42px] leading-6 text-[#4d5358]"
     >
       ☰
     </span>
@@ -54,11 +54,11 @@ exports[`Snapshot testing > Disabled, selected 1`] = `
 >
   <button
     aria-labelledby=":r2:"
-    class="border-transparent hover:ring-purple-500 focus:ring-purple-500 size-[72px] rounded-full border hover:ring focus:outline-none focus:ring focus:hover:border-none bg-[#697077]"
+    class="focus:ring-purple-500 size-[72px] rounded-full border border-none hover:ring hover:ring-accent focus:outline-none focus:ring focus:hover:border-none bg-[#697077]"
     type="button"
   >
     <span
-      class="text-5xl text-center leading-6 text-[#ffffff]"
+      class="text-center text-[42px] leading-6 text-[#ffffff]"
     >
       ☰
     </span>
@@ -78,11 +78,11 @@ exports[`Snapshot testing > Disabled, selected 2`] = `
 >
   <button
     aria-labelledby=":r4:"
-    class="border-transparent hover:ring-purple-500 focus:ring-purple-500 size-[72px] rounded-full border hover:ring focus:outline-none focus:ring focus:hover:border-none bg-[#697077]"
+    class="focus:ring-purple-500 size-[72px] rounded-full border border-none hover:ring hover:ring-accent focus:outline-none focus:ring focus:hover:border-none bg-[#697077]"
     type="button"
   >
     <span
-      class="text-5xl text-center leading-6 text-[#ffffff]"
+      class="text-center text-[42px] leading-6 text-[#ffffff]"
     >
       ☰
     </span>
@@ -102,11 +102,11 @@ exports[`Snapshot testing > selected 1`] = `
 >
   <button
     aria-labelledby=":r1:"
-    class="border-transparent hover:ring-purple-500 focus:ring-purple-500 size-[72px] rounded-full border hover:ring focus:outline-none focus:ring focus:hover:border-none bg-[#697077]"
+    class="focus:ring-purple-500 size-[72px] rounded-full border border-none hover:ring hover:ring-accent focus:outline-none focus:ring focus:hover:border-none bg-[#697077]"
     type="button"
   >
     <span
-      class="text-5xl text-center leading-6 text-[#ffffff]"
+      class="text-center text-[42px] leading-6 text-[#ffffff]"
     >
       ☰
     </span>
diff --git a/lib/components/RoundLinkButton/RoundLinkButton.tsx b/lib/components/RoundLinkButton/RoundLinkButton.tsx
index 33a14b5..b6ce76a 100644
--- a/lib/components/RoundLinkButton/RoundLinkButton.tsx
+++ b/lib/components/RoundLinkButton/RoundLinkButton.tsx
@@ -27,19 +27,19 @@ export const RoundLinkButton = ({
   const labelId = useId();
   return (
     <div className={`${className ? className : ''} flex flex-col items-center justify-center px-1`.trim()}>
-      <div
-        className={`border-transparent hover:ring-purple-500 size-[72px] rounded-full border no-underline hover:ring ${selected ? 'bg-[#697077]' : 'bg-[#f5f5f5]'}`}
+      <Component
+        {...rest}
+        aria-labelledby={labelId}
+        className={`flex size-[72px] justify-center rounded-full border border-none no-underline hover:ring hover:ring-accent focus:outline-none focus:ring focus:hover:border-none ${selected ? 'bg-[#697077]' : 'bg-[#f5f5f5]'}`}
       >
-        <Component {...rest} aria-labelledby={labelId}>
-          {/** TODO: Need real icons and alignment and styles to be adjusted then */}
-          <span
-            aria-hidden={true}
-            className={`text-5xl flex select-none justify-center pt-1 ${selected ? 'text-[#ffffff]' : 'text-[#4d5358]'}`}
-          >
-            &#9776;
-          </span>
-        </Component>
-      </div>
+        {/** TODO: Need real icons and alignment and styles to be adjusted then */}
+        <span
+          aria-hidden={true}
+          className={`select-none text-[42px] ${selected ? 'text-[#ffffff]' : 'text-[#4d5358]'}`}
+        >
+          &#9776;
+        </span>
+      </Component>
       <span id={labelId} className={'text-sm flex justify-center font-normal'}>
         {label}
       </span>
diff --git a/lib/components/RoundLinkButton/__snapshots__/RoundLinkButton.test.tsx.snap b/lib/components/RoundLinkButton/__snapshots__/RoundLinkButton.test.tsx.snap
index b3344e4..4e269e7 100644
--- a/lib/components/RoundLinkButton/__snapshots__/RoundLinkButton.test.tsx.snap
+++ b/lib/components/RoundLinkButton/__snapshots__/RoundLinkButton.test.tsx.snap
@@ -4,15 +4,11 @@ exports[`Snapshot testing > Default 1`] = `
 <div
   class="flex flex-col items-center justify-center px-1"
 >
-  <div
-    class="border-transparent hover:ring-purple-500 size-[72px] rounded-full border no-underline hover:ring bg-[#f5f5f5]"
+  <a
+    href="/#"
   >
-    <a
-      href="/#"
-    >
-      label
-    </a>
-  </div>
+    label
+  </a>
   <span
     class="text-sm flex justify-center font-normal"
     id=":r0:"
@@ -26,15 +22,11 @@ exports[`Snapshot testing > Disabled, non-selected 1`] = `
 <div
   class="flex flex-col items-center justify-center px-1"
 >
-  <div
-    class="border-transparent hover:ring-purple-500 size-[72px] rounded-full border no-underline hover:ring bg-[#f5f5f5]"
+  <a
+    href="/#"
   >
-    <a
-      href="/#"
-    >
-      label
-    </a>
-  </div>
+    label
+  </a>
   <span
     class="text-sm flex justify-center font-normal"
     id=":r3:"
@@ -48,15 +40,11 @@ exports[`Snapshot testing > Disabled, selected 1`] = `
 <div
   class="flex flex-col items-center justify-center px-1"
 >
-  <div
-    class="border-transparent hover:ring-purple-500 size-[72px] rounded-full border no-underline hover:ring bg-[#697077]"
+  <a
+    href="/#"
   >
-    <a
-      href="/#"
-    >
-      label
-    </a>
-  </div>
+    label
+  </a>
   <span
     class="text-sm flex justify-center font-normal"
     id=":r2:"
@@ -70,15 +58,11 @@ exports[`Snapshot testing > Disabled, selected 2`] = `
 <div
   class="flex flex-col items-center justify-center px-1"
 >
-  <div
-    class="border-transparent hover:ring-purple-500 size-[72px] rounded-full border no-underline hover:ring bg-[#697077]"
+  <a
+    href="/#"
   >
-    <a
-      href="/#"
-    >
-      label
-    </a>
-  </div>
+    label
+  </a>
   <span
     class="text-sm flex justify-center font-normal"
     id=":r4:"
@@ -92,15 +76,11 @@ exports[`Snapshot testing > selected 1`] = `
 <div
   class="flex flex-col items-center justify-center px-1"
 >
-  <div
-    class="border-transparent hover:ring-purple-500 size-[72px] rounded-full border no-underline hover:ring bg-[#697077]"
+  <a
+    href="/#"
   >
-    <a
-      href="/#"
-    >
-      label
-    </a>
-  </div>
+    label
+  </a>
   <span
     class="text-sm flex justify-center font-normal"
     id=":r1:"