fix:button shadow

DTS-STN · Sep 8, 2023 · bc011a3 · bc011a3
1 parent b4cae80
commit bc011a3
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 13 deletions.
diff --git a/src/components/FormSelectableCard/FormSelectableCard.js b/src/components/FormSelectableCard/FormSelectableCard.js
@@ -1,14 +1,15 @@
 import PropTypes from "prop-types";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { FormError } from "../FormError/FormError";
 import { FormLabel } from "../FormLabel/FormLabel";
 import bank from "../../assets/bank.svg";
 
 export function FormSelectableCard(props) {
   const [selected, setSelected] = useState(props.selected || null);
+  const [radioHover, setRadioHover] = useState(false);
   const validationClass = props.hasError
-    ? "ds-border-specific-red-red50b focus:ds-border-multi-blue-blue60f focus:ds-shadow-text-input"
-    : "ds-border-multi-neutrals-grey85a focus:ds-border-multi-blue-blue60f focus:ds-shadow-text-input";
+    ? "ds-border-specific-red-red50b "
+    : "ds-border-[#ACACAC]";
 
   return (
     <div id={props.id}>
@@ -30,10 +31,22 @@ export function FormSelectableCard(props) {
         {props.options.map(({ id, label, checked, value }, index) => (
           <li
             className={`ds-min-h-[182px] ds-max-w-[360px] max-[574px]:ds-max-w-[290px] ds-rounded-lg hover:ds-shadow-[#0E62C9] ds-border-[1px] ${
-              selected === id ? "ds-border-[#0E62C9]" : "ds-border-[#ACACAC]"
+              selected === index ? "ds-border-[#0E62C9]" : "ds-border-[#ACACAC]"
             } hover:ds-border-[#0E62C9] hover:ds-drop-shadow-[0px_0px_6px_rgba(14,98,201,0.5)] ds-cursor-pointer ds-mb-8px ds-border-[1px] hover:ds-border-[2px]`}
             key={index}
             id={index}
+            onFocus={() => {
+              setRadioHover(index);
+            }}
+            onMouseOver={() => {
+              setRadioHover(index);
+            }}
+            onBlur={() => {
+              setRadioHover(null);
+            }}
+            onMouseLeave={() => {
+              setRadioHover(null);
+            }}
           >
             <label
               htmlFor={id}
@@ -50,6 +63,8 @@ export function FormSelectableCard(props) {
                 selected={selected}
                 setSelected={setSelected}
                 checked={checked}
+                radioHover={radioHover}
+                hasError={props.hasError}
               />
               <LowerCard
                 {...props}
@@ -72,33 +87,42 @@ export function FormSelectableCard(props) {
 }
 
 const UpperCard = (props) => {
-  props.selected === props.id && handleScroll(props.index);
+  useEffect(() => {
+    console.log(props.selected, props.index, props.id);
+    props.selected === props.index && handleScroll(props.index);
+  }, [props.selected]);
+
   return (
     <div
       className={`ds-h-[72px] ${
-        props.selected === props.id ? "ds-bg-[#F2F8FF]" : "ds-bg-[#F5F5F5]"
+        props.selected === props.index ? "ds-bg-[#F2F8FF]" : "ds-bg-[#F5F5F5]"
       } ds-rounded-t-lg ds-border-[0px]`}
     >
       <div className="ds-pt-[16px] ds-pt-[12px] ds-px-[24px] max-[574px]:ds-px-[16px] ds-flex ds-items-center">
         <input
           type="radio"
-          name={props.name}
+          name={props.id}
           id={props.id}
           className="ds-hidden"
           value={props.value}
           tabIndex={0}
           onChange={(e) => {
-            props.setSelected((prev) => props.id);
+            props.setSelected(props.index);
             props.onChange(props.value, e);
           }}
           data-testid={`${props.id}-${props.dataTestId}`}
-          checked={props.selected === props.id}
+          checked={props.selected === props.index}
         />
         <span
           role="radio"
           aria-label={props.name}
-          className={`ds-relative ds-label ds-block ds-mr-3.5 ds-min-w-43px ds-w-43px ds-h-43px ds-border-2 ds-border-solid ${props.validationClass} ds-rounded-full ds-float-left after:ds-absolute ds-outline-0`}
-          aria-checked={props.selected === props.id}
+          className={`ds-relative ds-bg-white ds-label ds-block ds-mr-3.5 ds-min-w-43px ds-w-43px ds-h-43px ds-border-2 ds-border-solid  ${radioBorder(
+            props.index,
+            props.selected,
+            props.radioHover,
+            props.hasError
+          )} ds-rounded-full ds-float-left after:ds-absolute ds-outline-0`}
+          aria-checked={props.selected === props.index}
           tabIndex={0}
         ></span>
         <p className="ds-heading5 ds-w-full">{props.value}</p>
@@ -123,13 +147,27 @@ const LowerCard = (props) => {
   );
 };
 
-const handleScroll = (id) => {
-  const scrollTo = document.getElementById(id);
+const handleScroll = (index) => {
+  const scrollTo = document.getElementById(index);
   if (scrollTo) {
     scrollTo.scrollIntoView({ behavior: "smooth" });
   }
 };
 
+const radioBorder = (index, selected, radioHover, hasError) => {
+  // console.log({ index, selected, radioHover, hasError });
+  if (hasError) {
+    return "ds-border-multi-blue-blue60f";
+  }
+  if (index === selected) {
+    return "ds-border-multi-blue-blue60f";
+  }
+  if (index === radioHover) {
+    return "ds-drop-shadow-[0px_0px_6px_rgba(14,98,201,0.5)] ds-border-multi-blue-blue60f";
+  }
+  return "ds-border-[#ACACAC]";
+};
+
 FormSelectableCard.defaultProps = {
   checked: false,
   dataTestId: "primary-selectable-card",

diff --git a/src/styles/forms.css b/src/styles/forms.css
@@ -87,6 +87,7 @@
 .ds-radio .ds-label {
   -webkit-tap-highlight-color: transparent;
 }
+
 .ds-radio .ds-label:after {
   content: "";
   position: absolute;
@@ -101,6 +102,7 @@
   opacity: 0.08;
   pointer-events: none;
 }
+
 /* 
 input[type="radio"]:checked + .ds-label {
   border-color: #0e62c9;