Merge pull request #90 from abusix/pla-959-replace-fancy-data-channel…

…-stepper-component-with Fix Radio Box Issues
abusix · Jan 16, 2024 · ddb7573 · ddb7573
2 parents 8678e33 + 146bd1f
commit ddb7573
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 21 deletions.
diff --git a/src/components/form-field/radio-box/radio-box-option.tsx b/src/components/form-field/radio-box/radio-box-option.tsx
@@ -8,13 +8,28 @@ export interface RadioBoxOptionProps {
     value: string;
     disabled?: boolean;
     recommendationText?: string;
+    className?: string;
 }
 
+export const radioBoxContainerStyles = {
+    base: "group relative flex items-center gap-3 rounded-lg bg-neutral-0 border p-4 border-neutral-300 hover:border-primary-500 hover:bg-primary-50",
+    checked: "border-primary-500 bg-primary-500 hover:bg-primary-500 hover:text-neutral-0",
+    disabled:
+        "border-neutral-400 bg-neutral-100 group-hover:border-neutral-400 group-hover:bg-neutral-100 hover:border-neutral-400 hover:bg-neutral-100",
+};
+
+export const radioBoxCircleStyles = {
+    base: "relative inline-block h-4 w-4 shrink-0 rounded-full bg-neutral-0 border border-neutral-400",
+    unchecked: "group-hover:border-primary-500 group-hover:bg-neutral-0",
+    disabled: "bg-neutral-100 group-hover:border-neutral-400 group-hover:bg-neutral-100",
+};
+
 export const RadioBoxOption = ({
     children,
     value,
     disabled,
     recommendationText,
+    className,
 }: RadioBoxOptionProps) => {
     return (
         <RadioGroup.Option
@@ -25,46 +40,42 @@ export const RadioBoxOption = ({
             {({ checked, disabled: optionDisabled }) => (
                 <div
                     className={classNames(
-                        "group relative flex items-center gap-3 rounded-lg border p-4",
-                        checked
-                            ? "border-primary-500 bg-primary-500"
-                            : "border-neutral-300 hover:border-primary-500 hover:bg-primary-50",
-                        optionDisabled &&
-                            "cursor-not-allowed bg-neutral-100 hover:border-neutral-300 hover:bg-neutral-100"
+                        radioBoxContainerStyles.base,
+                        checked && radioBoxContainerStyles.checked,
+                        optionDisabled && radioBoxContainerStyles.disabled
                     )}
                 >
                     {recommendationText && (
                         <RecommendationTag>{recommendationText}</RecommendationTag>
                     )}
 
-                    <span
+                    <div
                         className={classNames(
-                            "relative inline-block h-4 w-4 shrink-0 rounded-full bg-neutral-0",
-                            !checked &&
-                                "border border-neutral-400 group-hover:border-primary-500 group-hover:bg-neutral-0",
-                            optionDisabled &&
-                                "border border-neutral-400 bg-neutral-100 group-hover:border-neutral-400 group-hover:bg-neutral-100"
+                            radioBoxCircleStyles.base,
+                            !checked && radioBoxCircleStyles.unchecked,
+                            optionDisabled && radioBoxCircleStyles.disabled
                         )}
                     >
                         {checked && (
-                            <span
+                            <div
                                 className={classNames(
                                     "absolute inset-0 m-auto block h-2 w-2 rounded-full bg-primary-500",
                                     optionDisabled && "bg-neutral-500"
                                 )}
                             />
                         )}
-                    </span>
+                    </div>
 
-                    <p
+                    <div
                         className={classNames(
-                            "paragraph-200",
+                            "flex flex-col gap-2",
                             checked && "text-neutral-0",
-                            optionDisabled && "text-neutral-600"
+                            optionDisabled && "text-neutral-600",
+                            className
                         )}
                     >
                         {children}
-                    </p>
+                    </div>
                 </div>
             )}
         </RadioGroup.Option>

diff --git a/src/components/form-field/radio-box/radio-box.stories.tsx b/src/components/form-field/radio-box/radio-box.stories.tsx
@@ -21,7 +21,7 @@ const RadioBoxWithHooks = () => {
                 <FormField.RadioBox.Option value="value_1" recommendationText="Recommended">
                     <div className="flex flex-col gap-2">
                         <h2 className="headline-500">Option 1</h2>
-                        <p>
+                        <p className="paragraph-200">
                             To be, or not to be, that is the question: Whether ’tis nobler in the
                             mind to suffer The slings and arrows of outrageous fortune, …
                         </p>
@@ -31,7 +31,7 @@ const RadioBoxWithHooks = () => {
                 <FormField.RadioBox.Option value="value_2">
                     <div className="flex flex-col gap-2">
                         <h2 className="headline-500">Option 2</h2>
-                        <p>
+                        <p className="paragraph-200">
                             To be, or not to be, that is the question: Whether ’tis nobler in the
                             mind to suffer The slings and arrows of outrageous fortune, …
                         </p>
@@ -41,7 +41,7 @@ const RadioBoxWithHooks = () => {
                 <FormField.RadioBox.Option value="value_3" disabled>
                     <div className="flex flex-col gap-2">
                         <h2 className="headline-500">Option 3</h2>
-                        <p>
+                        <p className="paragraph-200">
                             To be, or not to be, that is the question: Whether ’tis nobler in the
                             mind to suffer The slings and arrows of outrageous fortune, …
                         </p>