Moved RadioButton component to RadioButtonGroup

varianter · Aug 26, 2024 · aa2531c · aa2531c
1 parent 5a29dc4
commit aa2531c
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 101 deletions.
diff --git a/src/components/forms/radioButtonGroup/RadioButtonGroup.tsx b/src/components/forms/radioButtonGroup/RadioButtonGroup.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import styles from "src/components/forms/radioButtonGroup/radioButtonGroup.module.css";
-import { RadioButton } from "./components/RadioButton";
 import textStyles from "src/components/text/text.module.css";
 
 export interface IOption {
@@ -9,6 +8,17 @@ export interface IOption {
   disabled?: boolean;
 }
 
+interface RadioButtonProps {
+  id: string;
+  name: string;
+  label: string;
+  value?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  defaultChecked?: boolean;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
 interface RadioButtonGroupProps {
   id: string;
   label: string;
@@ -53,3 +63,37 @@ export const RadioButtonGroup = ({
     </fieldset>
   );
 };
+
+const RadioButton = ({
+  id,
+  name,
+  value,
+  label,
+  checked,
+  disabled,
+  defaultChecked,
+  onChange,
+}: RadioButtonProps) => {
+  return (
+    <label
+      htmlFor={id}
+      className={`${styles.container} ${textStyles.caption} ${disabled ? styles.disabledLabel : styles.label}`}
+    >
+      <input
+        className={styles.input}
+        type="radio"
+        name={name}
+        id={id}
+        value={value}
+        checked={checked}
+        disabled={disabled}
+        aria-disabled={disabled ? "true" : "false"}
+        defaultChecked={defaultChecked}
+        onChange={onChange}
+        aria-label={label}
+      />
+
+      {label}
+    </label>
+  );
+};
diff --git a/src/components/forms/radioButtonGroup/components/RadioButton.tsx b/src/components/forms/radioButtonGroup/components/RadioButton.tsx
diff --git a/src/components/forms/radioButtonGroup/components/radioButton.module.css b/src/components/forms/radioButtonGroup/components/radioButton.module.css
diff --git a/src/components/forms/radioButtonGroup/radioButtonGroup.module.css b/src/components/forms/radioButtonGroup/radioButtonGroup.module.css
@@ -8,3 +8,56 @@
   flex-direction: column;
   gap: 0.5rem;
 }
+
+.container {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.label {
+  font-size: 1rem;
+  color: var(--dark-purple);
+}
+
+.disabledLabel {
+  color: gray;
+  cursor: not-allowed;
+}
+
+.input {
+  appearance: none;
+  width: 24px;
+  height: 24px;
+  border: 2px solid black;
+  border-radius: 50%;
+  transition: all 0.1s ease-in-out;
+  box-sizing: border-box;
+  background-color: white;
+  position: relative;
+}
+
+.input:checked::after {
+  content: "";
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: var(--primary-green-dark);
+}
+
+.input:hover {
+  background-color: var(--primary-green-light);
+  outline: 2px solid var(--primary-green-light);
+}
+
+.input:focus {
+  outline: 2px solid var(--primary-green-light);
+}
+
+.input[disabled] {
+  cursor: not-allowed;
+  border-color: grey;
+}
diff --git a/src/salaryAndBenefits/components/salaryCalculator/SalaryCalculator.tsx b/src/salaryAndBenefits/components/salaryCalculator/SalaryCalculator.tsx
@@ -35,6 +35,7 @@ export default function SalaryCalculator({
 
   return (
     <form
+      //TODO: replace aria-label with static translation from Sanity
       aria-label="salary calculator"
       className={styles.calculator}
       onSubmit={onSubmit}