OPHJOD-300: Add hover style for RoundButton/RoundLinkButton

Opetushallitus · Apr 26, 2024 · a5b6195 · a5b6195
1 parent 59f2ad6
commit a5b6195
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 33 deletions.
diff --git a/lib/components/RoundButton/RoundButton.tsx b/lib/components/RoundButton/RoundButton.tsx
@@ -26,15 +26,19 @@ export const RoundButton = ({
       disabled={disabled}
       type="button"
       onClick={onClick}
-      className={`${className ? className : ''} flex flex-col justify-center ${disabled ? 'cursor-not-allowed opacity-50' : ''} min-w-[110px] items-center gap-2`.trim()}
+      className={`${className ? className : ''} group flex flex-col justify-center ${disabled ? 'cursor-not-allowed opacity-50' : ''} min-w-[110px] items-center gap-2`.trim()}
     >
       <span
         aria-hidden
-        className={`size-[72px] rounded-full ${selected ? 'bg-accent' : 'bg-bg-gray'} flex items-center justify-center ${selected ? 'text-white' : 'text-secondary-gray'} material-symbols-outlined size-48 select-none`}
+        className={`size-[72px] rounded-full ${selected ? 'bg-accent' : 'bg-bg-gray'} flex items-center justify-center ${selected ? 'text-white' : 'text-primary-gray hover:text-accent'} material-symbols-outlined size-48 select-none`}
       >
         {icon}
       </span>
-      <span className={`text-button-sm ${selected ? 'text-accent' : 'text-primary-gray'}`}>{label}</span>
+      <span
+        className={`text-button-sm ${selected ? 'text-accent' : 'text-primary-gray'} group-hover:text-accent group-hover:underline`}
+      >
+        {label}
+      </span>
     </button>
   );
 };
diff --git a/lib/components/RoundButton/__snapshots__/RoundButton.test.tsx.snap b/lib/components/RoundButton/__snapshots__/RoundButton.test.tsx.snap
@@ -2,17 +2,17 @@
 
 exports[`Snapshot testing > Default 1`] = `
 <button
-  class="flex flex-col justify-center  min-w-[110px] items-center gap-2"
+  class="group flex flex-col justify-center  min-w-[110px] items-center gap-2"
   type="button"
 >
   <span
     aria-hidden="true"
-    class="size-[72px] rounded-full bg-bg-gray flex items-center justify-center text-secondary-gray material-symbols-outlined size-48 select-none"
+    class="size-[72px] rounded-full bg-bg-gray flex items-center justify-center text-primary-gray hover:text-accent material-symbols-outlined size-48 select-none"
   >
     target
   </span>
   <span
-    class="text-button-sm text-primary-gray"
+    class="text-button-sm text-primary-gray group-hover:text-accent group-hover:underline"
   >
     Default
   </span>
@@ -21,17 +21,17 @@ exports[`Snapshot testing > Default 1`] = `
 
 exports[`Snapshot testing > Disabled, non-selected 1`] = `
 <button
-  class="flex flex-col justify-center  min-w-[110px] items-center gap-2"
+  class="group flex flex-col justify-center  min-w-[110px] items-center gap-2"
   type="button"
 >
   <span
     aria-hidden="true"
-    class="size-[72px] rounded-full bg-bg-gray flex items-center justify-center text-secondary-gray material-symbols-outlined size-48 select-none"
+    class="size-[72px] rounded-full bg-bg-gray flex items-center justify-center text-primary-gray hover:text-accent material-symbols-outlined size-48 select-none"
   >
     target
   </span>
   <span
-    class="text-button-sm text-primary-gray"
+    class="text-button-sm text-primary-gray group-hover:text-accent group-hover:underline"
   >
     Disabled, non-selected
   </span>
@@ -40,7 +40,7 @@ exports[`Snapshot testing > Disabled, non-selected 1`] = `
 
 exports[`Snapshot testing > Disabled, selected 1`] = `
 <button
-  class="flex flex-col justify-center  min-w-[110px] items-center gap-2"
+  class="group flex flex-col justify-center  min-w-[110px] items-center gap-2"
   type="button"
 >
   <span
@@ -50,7 +50,7 @@ exports[`Snapshot testing > Disabled, selected 1`] = `
     target
   </span>
   <span
-    class="text-button-sm text-accent"
+    class="text-button-sm text-accent group-hover:text-accent group-hover:underline"
   >
     Disabled, non-selected
   </span>
@@ -59,7 +59,7 @@ exports[`Snapshot testing > Disabled, selected 1`] = `
 
 exports[`Snapshot testing > Disabled, selected 2`] = `
 <button
-  class="flex flex-col justify-center  min-w-[110px] items-center gap-2"
+  class="group flex flex-col justify-center  min-w-[110px] items-center gap-2"
   type="button"
 >
   <span
@@ -69,7 +69,7 @@ exports[`Snapshot testing > Disabled, selected 2`] = `
     target
   </span>
   <span
-    class="text-button-sm text-accent"
+    class="text-button-sm text-accent group-hover:text-accent group-hover:underline"
   >
     Disabled, non-selected
   </span>
@@ -78,7 +78,7 @@ exports[`Snapshot testing > Disabled, selected 2`] = `
 
 exports[`Snapshot testing > selected 1`] = `
 <button
-  class="flex flex-col justify-center  min-w-[110px] items-center gap-2"
+  class="group flex flex-col justify-center  min-w-[110px] items-center gap-2"
   type="button"
 >
   <span
@@ -88,7 +88,7 @@ exports[`Snapshot testing > selected 1`] = `
     target
   </span>
   <span
-    class="text-button-sm text-accent"
+    class="text-button-sm text-accent group-hover:text-accent group-hover:underline"
   >
     Selected
   </span>

diff --git a/lib/components/RoundLinkButton/RoundLinkButton.tsx b/lib/components/RoundLinkButton/RoundLinkButton.tsx
@@ -28,15 +28,19 @@ export const RoundLinkButton = ({
   return (
     <Component
       {...rest}
-      className={`${className ? className : ''} inline-flex min-w-[110px] flex-col items-center justify-center gap-2 border border-none no-underline`}
+      className={`${className ? className : ''} group inline-flex min-w-[110px] flex-col items-center justify-center gap-2 border border-none no-underline`}
     >
       <span
         aria-hidden
-        className={`${selected ? 'text-white' : 'text-secondary-gray'} material-symbols-outlined size-48 flex size-[72px] select-none items-center justify-center self-center rounded-full ${selected ? 'bg-[#697077]' : 'bg-[#f5f5f5]'}`}
+        className={`${selected ? 'text-white' : 'text-primary-gray'} material-symbols-outlined size-48 group- flex size-[72px] select-none items-center justify-center self-center rounded-full ${selected ? 'bg-accent' : 'bg-bg-gray hover:text-accent'}`}
       >
         {icon}
       </span>
-      <span className={`text-button-sm ${selected ? 'text-accent' : 'text-primary-gray'}`}>{label}</span>
+      <span
+        className={`text-button-sm ${selected ? 'text-accent' : 'text-primary-gray'} group-hover:text-accent group-hover:underline`}
+      >
+        {label}
+      </span>
     </Component>
   );
 };
diff --git a/lib/components/RoundLinkButton/__snapshots__/RoundLinkButton.test.tsx.snap b/lib/components/RoundLinkButton/__snapshots__/RoundLinkButton.test.tsx.snap
@@ -2,17 +2,17 @@
 
 exports[`Snapshot testing > Default 1`] = `
 <a
-  class=" inline-flex min-w-[110px] flex-col items-center justify-center gap-2 border border-none no-underline"
+  class=" group inline-flex min-w-[110px] flex-col items-center justify-center gap-2 border border-none no-underline"
   href="/#"
 >
   <span
     aria-hidden="true"
-    class="text-secondary-gray material-symbols-outlined size-48 flex size-[72px] select-none items-center justify-center self-center rounded-full bg-[#f5f5f5]"
+    class="text-primary-gray material-symbols-outlined size-48 group- flex size-[72px] select-none items-center justify-center self-center rounded-full bg-bg-gray hover:text-accent"
   >
     target
   </span>
   <span
-    class="text-button-sm text-primary-gray"
+    class="text-button-sm text-primary-gray group-hover:text-accent group-hover:underline"
   >
     Default
   </span>
@@ -21,17 +21,17 @@ exports[`Snapshot testing > Default 1`] = `
 
 exports[`Snapshot testing > Disabled, non-selected 1`] = `
 <a
-  class=" inline-flex min-w-[110px] flex-col items-center justify-center gap-2 border border-none no-underline"
+  class=" group inline-flex min-w-[110px] flex-col items-center justify-center gap-2 border border-none no-underline"
   href="/#"
 >
   <span
     aria-hidden="true"
-    class="text-secondary-gray material-symbols-outlined size-48 flex size-[72px] select-none items-center justify-center self-center rounded-full bg-[#f5f5f5]"
+    class="text-primary-gray material-symbols-outlined size-48 group- flex size-[72px] select-none items-center justify-center self-center rounded-full bg-bg-gray hover:text-accent"
   >
     target
   </span>
   <span
-    class="text-button-sm text-primary-gray"
+    class="text-button-sm text-primary-gray group-hover:text-accent group-hover:underline"
   >
     Disabled, nonselected
   </span>
@@ -40,17 +40,17 @@ exports[`Snapshot testing > Disabled, non-selected 1`] = `
 
 exports[`Snapshot testing > Disabled, selected 1`] = `
 <a
-  class=" inline-flex min-w-[110px] flex-col items-center justify-center gap-2 border border-none no-underline"
+  class=" group inline-flex min-w-[110px] flex-col items-center justify-center gap-2 border border-none no-underline"
   href="/#"
 >
   <span
     aria-hidden="true"
-    class="text-white material-symbols-outlined size-48 flex size-[72px] select-none items-center justify-center self-center rounded-full bg-[#697077]"
+    class="text-white material-symbols-outlined size-48 group- flex size-[72px] select-none items-center justify-center self-center rounded-full bg-accent"
   >
     target
   </span>
   <span
-    class="text-button-sm text-accent"
+    class="text-button-sm text-accent group-hover:text-accent group-hover:underline"
   >
     Disabled, nonselected
   </span>
@@ -59,17 +59,17 @@ exports[`Snapshot testing > Disabled, selected 1`] = `
 
 exports[`Snapshot testing > Disabled, selected 2`] = `
 <a
-  class=" inline-flex min-w-[110px] flex-col items-center justify-center gap-2 border border-none no-underline"
+  class=" group inline-flex min-w-[110px] flex-col items-center justify-center gap-2 border border-none no-underline"
   href="/#"
 >
   <span
     aria-hidden="true"
-    class="text-white material-symbols-outlined size-48 flex size-[72px] select-none items-center justify-center self-center rounded-full bg-[#697077]"
+    class="text-white material-symbols-outlined size-48 group- flex size-[72px] select-none items-center justify-center self-center rounded-full bg-accent"
   >
     target
   </span>
   <span
-    class="text-button-sm text-accent"
+    class="text-button-sm text-accent group-hover:text-accent group-hover:underline"
   >
     Disabled, nonselected
   </span>
@@ -78,17 +78,17 @@ exports[`Snapshot testing > Disabled, selected 2`] = `
 
 exports[`Snapshot testing > selected 1`] = `
 <a
-  class=" inline-flex min-w-[110px] flex-col items-center justify-center gap-2 border border-none no-underline"
+  class=" group inline-flex min-w-[110px] flex-col items-center justify-center gap-2 border border-none no-underline"
   href="/#"
 >
   <span
     aria-hidden="true"
-    class="text-white material-symbols-outlined size-48 flex size-[72px] select-none items-center justify-center self-center rounded-full bg-[#697077]"
+    class="text-white material-symbols-outlined size-48 group- flex size-[72px] select-none items-center justify-center self-center rounded-full bg-accent"
   >
     target
   </span>
   <span
-    class="text-button-sm text-accent"
+    class="text-button-sm text-accent group-hover:text-accent group-hover:underline"
   >
     Selected
   </span>