From 929b4e1a355ca081dcbb55c7ca70ce563e6ffcf3 Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <24361490+mathiazom@users.noreply.github.com>
Date: Mon, 26 Aug 2024 09:21:18 +0200
Subject: [PATCH 1/4] fix(queries): map slug to internalLink for more section
 types (#514)

---
 studio/lib/queries/pages.ts | 38 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/studio/lib/queries/pages.ts b/studio/lib/queries/pages.ts
index b2a52e399..37d140c10 100644
--- a/studio/lib/queries/pages.ts
+++ b/studio/lib/queries/pages.ts
@@ -15,7 +15,43 @@ const SECTIONS_FRAGMENT = groq`
           }
         }
       }
-    }
+    },
+    _type == "article" => {
+      ...,
+      link {
+        ...,
+        linkType == "internal" => {
+          ...,
+          "internalLink": internalLink->{
+            "_ref": slug.current
+          }
+        }
+      }
+    },
+    _type == "callout" => {
+      ...,
+      link {
+        ...,
+        linkType == "internal" => {
+          ...,
+          "internalLink": internalLink->{
+            "_ref": slug.current
+          }
+        }
+      }
+    },
+       _type == "ctaSection" => {
+      ...,
+      callToActions[] {
+        ...,
+        linkType == "internal" => {
+          ...,
+          "internalLink": internalLink->{
+            "_ref": slug.current
+          }
+        }
+      }
+    },
   }
 `;
 

From bf2db66adf659f47a2c68774c68533ab5432aea8 Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <mom@variant.no>
Date: Fri, 23 Aug 2024 13:45:16 +0200
Subject: [PATCH 2/4] feat: add salary calculator based on legacy site

Co-authored-by: Ane <ane-ness@hotmail.no>
---
 .../forms/inputField/InputField.tsx           |  8 ++-
 .../radioButtonGroup/RadioButtonGroup.tsx     | 14 ++--
 .../radioButtonGroup.module.css               | 11 +--
 src/salaryAndBenefits/SalaryAndBenefits.tsx   | 70 +++++++++++++++++++
 .../salaryCalculator/SalaryCalculator.tsx     | 68 ++++++++++++++++++
 .../salaryCalculator.module.css               |  5 ++
 .../utils/calculateSalary.ts                  | 29 ++++++++
 src/salaryAndBenefits/utils/salaryData.ts     | 41 +++++++++++
 studio/lib/payloads/salaryAndBenefits.ts      |  1 +
 9 files changed, 234 insertions(+), 13 deletions(-)
 create mode 100644 src/salaryAndBenefits/components/salaryCalculator/SalaryCalculator.tsx
 create mode 100644 src/salaryAndBenefits/components/salaryCalculator/salaryCalculator.module.css
 create mode 100644 src/salaryAndBenefits/utils/calculateSalary.ts
 create mode 100644 src/salaryAndBenefits/utils/salaryData.ts

diff --git a/src/components/forms/inputField/InputField.tsx b/src/components/forms/inputField/InputField.tsx
index 07d5ac340..78f17aa8d 100644
--- a/src/components/forms/inputField/InputField.tsx
+++ b/src/components/forms/inputField/InputField.tsx
@@ -10,9 +10,11 @@ interface InputFieldProps {
   autoComplete?: HTMLInputAutoCompleteAttribute;
   autoCorrect?: string;
   type?: HTMLInputTypeAttribute;
+  max?: number;
+  min?: number;
   spellCheck?: "true" | "false";
   autoCapitalize?: string;
-  value: string;
+  value: string | number;
   onChange: (name: string, value: string) => void;
   required?: boolean;
 }
@@ -24,6 +26,8 @@ const InputField = ({
   autoComplete,
   autoCorrect = "off",
   type = "text",
+  max,
+  min,
   spellCheck,
   autoCapitalize,
   value,
@@ -56,6 +60,8 @@ const InputField = ({
         autoComplete={autoComplete}
         autoCorrect={autoCorrect}
         type={type}
+        max={max}
+        min={min}
         className={styles.input}
         spellCheck={spellCheck}
         value={value}
diff --git a/src/components/forms/radioButtonGroup/RadioButtonGroup.tsx b/src/components/forms/radioButtonGroup/RadioButtonGroup.tsx
index 155b838cf..98bb57490 100644
--- a/src/components/forms/radioButtonGroup/RadioButtonGroup.tsx
+++ b/src/components/forms/radioButtonGroup/RadioButtonGroup.tsx
@@ -3,11 +3,11 @@ import styles from "src/components/forms/radioButtonGroup/radioButtonGroup.modul
 import { RadioButton } from "./components/RadioButton";
 import textStyles from "src/components/text/text.module.css";
 
-interface IOption {
+export interface IOption {
   id: string;
   label: string;
-  disabled: boolean;
-  currentChecked: boolean;
+  disabled?: boolean;
+  currentSelected: boolean;
 }
 
 interface RenderOptionsProps {
@@ -41,8 +41,8 @@ interface RadioButtonGroupProps {
  *
  * ```
  * const options = [
- *   { id: 'radio1', label: 'Option 1', value: '1', currentChecked: false },
- *   { id: 'radio2', label: 'Option 2', value: '2', currentChecked: true },
+ *   { id: 'radio1', label: 'Option 1', value: '1', currentSelected: false },
+ *   { id: 'radio2', label: 'Option 2', value: '2', currentSelected: true },
  * ];
  *
  * <RadioButtonGroup
@@ -82,7 +82,7 @@ export const RadioButtonGroup = ({
 const RenderOptions = ({ options, onChange }: RenderOptionsProps) => {
   return (
     <>
-      {options.map(({ id, label, disabled, currentChecked }) => (
+      {options.map(({ id, label, disabled, currentSelected }) => (
         <RadioButton
           key={id}
           id={id}
@@ -90,7 +90,7 @@ const RenderOptions = ({ options, onChange }: RenderOptionsProps) => {
           name="radio"
           disabled={disabled}
           value={label}
-          defaultChecked={currentChecked}
+          defaultChecked={currentSelected}
           onChange={onChange}
         />
       ))}
diff --git a/src/components/forms/radioButtonGroup/radioButtonGroup.module.css b/src/components/forms/radioButtonGroup/radioButtonGroup.module.css
index db43fa211..208d09b0d 100644
--- a/src/components/forms/radioButtonGroup/radioButtonGroup.module.css
+++ b/src/components/forms/radioButtonGroup/radioButtonGroup.module.css
@@ -1,9 +1,10 @@
 .fieldset {
-  border: 0 none;
+    border: 0 none;
+    padding: 0;
 }
 
 .wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
\ No newline at end of file
diff --git a/src/salaryAndBenefits/SalaryAndBenefits.tsx b/src/salaryAndBenefits/SalaryAndBenefits.tsx
index 5a1e6fad1..a061e4a83 100644
--- a/src/salaryAndBenefits/SalaryAndBenefits.tsx
+++ b/src/salaryAndBenefits/SalaryAndBenefits.tsx
@@ -1,16 +1,86 @@
+"use client";
+
 import styles from "./salaryAndBenefits.module.css";
 import Text from "src/components/text/Text";
 import { SalaryAndBenefitsPage } from "studio/lib/payloads/salaryAndBenefits";
 import { RichText } from "src/components/richText/RichText";
+import SalaryCalculator, {
+  Degree,
+} from "./components/salaryCalculator/SalaryCalculator";
+import { useState } from "react";
+import {
+  calculatePension,
+  calculateSalary,
+  maxExperience,
+} from "./utils/calculateSalary";
 
 interface SalaryAndBenefitsProps {
   salaryAndBenefits: SalaryAndBenefitsPage;
 }
 
+interface SalaryCalculatorFormState {
+  examinationYear: number;
+  selectedDegree: Degree;
+}
+
 const SalaryAndBenefits = ({ salaryAndBenefits }: SalaryAndBenefitsProps) => {
+  const currentYear = new Date().getFullYear();
+  const minExaminationYear = maxExperience(currentYear);
+  const maxExaminationYear = currentYear - 1;
+
+  const [formState, setFormState] = useState<SalaryCalculatorFormState>({
+    examinationYear: currentYear - 1,
+    selectedDegree: "bachelor",
+  });
+  const [salary, setSalary] = useState<number | null>(null);
+
+  const updateSelectedDegree = (newDegree: Degree) => {
+    setFormState((prevState) => ({
+      ...prevState,
+      selectedDegree: newDegree,
+    }));
+  };
+
+  const updateExaminationYear = (newYear: number) => {
+    setFormState((prevState) => ({
+      ...prevState,
+      examinationYear: newYear,
+    }));
+  };
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    setSalary(
+      calculateSalary(
+        currentYear,
+        formState.examinationYear,
+        formState.selectedDegree,
+      ),
+    );
+  };
+
   return (
     <div className={styles.wrapper}>
       <Text type="h1">{salaryAndBenefits.basicTitle}</Text>
+      {salaryAndBenefits.showSalaryCalculator && (
+        <SalaryCalculator
+          // TODO: should also take in degree state (this requires changes to IOption of RadioButtonGroup)
+          examinationYear={formState.examinationYear}
+          minExaminationYear={minExaminationYear}
+          maxExaminationYear={maxExaminationYear}
+          onDegreeChanged={updateSelectedDegree}
+          onExaminationYearChanged={updateExaminationYear}
+          onSubmit={handleSubmit}
+        />
+      )}
+      {salary !== null ? (
+        <div aria-live="polite">
+          <Text> Du vil få en årlig lønn på {salary}</Text>
+          <Text>
+            Du vil få en årlig pensjon på omtrent {calculatePension(salary)}
+          </Text>
+        </div>
+      ) : null}
       <div className={styles.benefits}>
         {salaryAndBenefits.benefits.map((benefit) => (
           <div key={benefit._key} className={styles.benefitWrapper}>
diff --git a/src/salaryAndBenefits/components/salaryCalculator/SalaryCalculator.tsx b/src/salaryAndBenefits/components/salaryCalculator/SalaryCalculator.tsx
new file mode 100644
index 000000000..f6fb28f9d
--- /dev/null
+++ b/src/salaryAndBenefits/components/salaryCalculator/SalaryCalculator.tsx
@@ -0,0 +1,68 @@
+import styles from "./salaryCalculator.module.css";
+import InputField from "src/components/forms/inputField/InputField";
+import {
+  IOption,
+  RadioButtonGroup,
+} from "src/components/forms/radioButtonGroup/RadioButtonGroup";
+import Button from "src/components/buttons/Button";
+
+export type Degree = "bachelor" | "master";
+
+const degreeOptions: IOption[] = [
+  {
+    id: "bachelor",
+    label: "Bachelor",
+    currentSelected: true,
+    disabled: false,
+  },
+  { id: "master", label: "Master", currentSelected: false, disabled: false },
+];
+
+interface SalaryCalculatorProps {
+  examinationYear: number;
+  minExaminationYear: number;
+  maxExaminationYear: number;
+  onDegreeChanged: (degree: Degree) => void;
+  onExaminationYearChanged: (examinationYear: number) => void;
+  onSubmit: (event: React.FormEvent) => void;
+}
+
+export default function SalaryCalculator({
+  examinationYear,
+  minExaminationYear,
+  maxExaminationYear,
+  onDegreeChanged,
+  onExaminationYearChanged,
+  onSubmit,
+}: SalaryCalculatorProps) {
+  return (
+    <form
+      aria-label="salary calculator"
+      className={styles.calculator}
+      onSubmit={onSubmit}
+    >
+      <RadioButtonGroup
+        id="degree-group"
+        label="Choose your degree"
+        options={degreeOptions}
+        onValueChange={(value) =>
+          (value.id === "bachelor" || value.id === "master") &&
+          onDegreeChanged(value.id)
+        }
+      />
+      <InputField
+        label="year"
+        name="examinationYear"
+        type="number"
+        max={maxExaminationYear}
+        min={minExaminationYear}
+        value={examinationYear}
+        onChange={(_name, value) => onExaminationYearChanged(parseInt(value))}
+        required
+      />
+      <Button type="secondary" size="small">
+        Submit
+      </Button>
+    </form>
+  );
+}
diff --git a/src/salaryAndBenefits/components/salaryCalculator/salaryCalculator.module.css b/src/salaryAndBenefits/components/salaryCalculator/salaryCalculator.module.css
new file mode 100644
index 000000000..99961ac01
--- /dev/null
+++ b/src/salaryAndBenefits/components/salaryCalculator/salaryCalculator.module.css
@@ -0,0 +1,5 @@
+.calculator{
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
\ No newline at end of file
diff --git a/src/salaryAndBenefits/utils/calculateSalary.ts b/src/salaryAndBenefits/utils/calculateSalary.ts
new file mode 100644
index 000000000..b23dc7290
--- /dev/null
+++ b/src/salaryAndBenefits/utils/calculateSalary.ts
@@ -0,0 +1,29 @@
+import { payscale } from "./salaryData";
+  
+interface PayScale {
+    [year: number]: {
+      [examinationYear: number]: number;
+    };
+  }
+  
+  const salaryPayscale: PayScale = payscale;
+  
+  export function calculateSalary(
+    currentYear: number,
+    examinationYear: number,
+    degree: string
+  ): number {
+
+    const degreeValue = degree === "bachelor" ? 1 : 0;
+    const adjustedYear = (examinationYear + degreeValue);
+    return salaryPayscale[currentYear][adjustedYear];
+  }
+
+  export function calculatePension(salary: number): number {
+    return Math.round(salary * 0.07);
+  }
+
+  export function maxExperience(thisYear: number): number {
+  const years = Object.keys(salaryPayscale[thisYear]).map(Number)
+    return Math.min(...years);
+  }
\ No newline at end of file
diff --git a/src/salaryAndBenefits/utils/salaryData.ts b/src/salaryAndBenefits/utils/salaryData.ts
new file mode 100644
index 000000000..24a8b85f6
--- /dev/null
+++ b/src/salaryAndBenefits/utils/salaryData.ts
@@ -0,0 +1,41 @@
+export const payscale = {
+    2024: {
+      2024 : 600000,
+      2023 : 635833,
+      2022 : 681829,
+      2021 : 734982,
+      2020 : 789982,
+      2019 : 838539,
+      2018 : 879553,
+      2017 : 916886,
+      2016 : 949000,
+      2015 : 977333,
+      2014 : 1005324,
+      2013 : 1031405,
+      2012 : 1064738,
+      2011 : 1091489,
+      2010 : 1113742,
+      2009 : 1138742,
+      2008 : 1166667,
+      2007 : 1192460,
+      2006 : 1210126,
+      2005 : 1233560,
+      2004 : 1264767,
+      2003 : 1289780,
+      2002 : 1299680,
+      2001 : 1295953,
+      2000 : 1305501,
+      1999 : 1328501,
+      1998 : 1349349,
+      1997 : 1365121,
+      1996 : 1384832,
+      1995 : 1399711,
+      1994 : 1422069,
+      1993 : 1429358,
+      1992 : 1452891,
+      1991 : 1458021,
+      1990 : 1467321,
+      1989 : 1484721
+    }
+  } ;
+  
\ No newline at end of file
diff --git a/studio/lib/payloads/salaryAndBenefits.ts b/studio/lib/payloads/salaryAndBenefits.ts
index cc847e3cc..ff6636c49 100644
--- a/studio/lib/payloads/salaryAndBenefits.ts
+++ b/studio/lib/payloads/salaryAndBenefits.ts
@@ -18,4 +18,5 @@ export interface SalaryAndBenefitsPage {
   page: string;
   slug: Slug;
   benefits: Benefit[];
+  showSalaryCalculator: boolean;
 }

From f4a868b2d22fb560ace491c64ced9ced4b3c4d57 Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <mom@variant.no>
Date: Fri, 23 Aug 2024 14:00:51 +0200
Subject: [PATCH 3/4] chore(salaryCalculator): prettify

---
 .../radioButtonGroup.module.css               | 12 +--
 .../salaryCalculator.module.css               | 10 +--
 .../utils/calculateSalary.ts                  | 47 ++++++-----
 src/salaryAndBenefits/utils/salaryData.ts     | 79 +++++++++----------
 4 files changed, 73 insertions(+), 75 deletions(-)

diff --git a/src/components/forms/radioButtonGroup/radioButtonGroup.module.css b/src/components/forms/radioButtonGroup/radioButtonGroup.module.css
index 208d09b0d..193076c3e 100644
--- a/src/components/forms/radioButtonGroup/radioButtonGroup.module.css
+++ b/src/components/forms/radioButtonGroup/radioButtonGroup.module.css
@@ -1,10 +1,10 @@
 .fieldset {
-    border: 0 none;
-    padding: 0;
+  border: 0 none;
+  padding: 0;
 }
 
 .wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
\ No newline at end of file
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
diff --git a/src/salaryAndBenefits/components/salaryCalculator/salaryCalculator.module.css b/src/salaryAndBenefits/components/salaryCalculator/salaryCalculator.module.css
index 99961ac01..464990c85 100644
--- a/src/salaryAndBenefits/components/salaryCalculator/salaryCalculator.module.css
+++ b/src/salaryAndBenefits/components/salaryCalculator/salaryCalculator.module.css
@@ -1,5 +1,5 @@
-.calculator{
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-}
\ No newline at end of file
+.calculator {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
diff --git a/src/salaryAndBenefits/utils/calculateSalary.ts b/src/salaryAndBenefits/utils/calculateSalary.ts
index b23dc7290..6e1e1ec6b 100644
--- a/src/salaryAndBenefits/utils/calculateSalary.ts
+++ b/src/salaryAndBenefits/utils/calculateSalary.ts
@@ -1,29 +1,28 @@
 import { payscale } from "./salaryData";
-  
+
 interface PayScale {
-    [year: number]: {
-      [examinationYear: number]: number;
-    };
-  }
-  
-  const salaryPayscale: PayScale = payscale;
-  
-  export function calculateSalary(
-    currentYear: number,
-    examinationYear: number,
-    degree: string
-  ): number {
+  [year: number]: {
+    [examinationYear: number]: number;
+  };
+}
+
+const salaryPayscale: PayScale = payscale;
 
-    const degreeValue = degree === "bachelor" ? 1 : 0;
-    const adjustedYear = (examinationYear + degreeValue);
-    return salaryPayscale[currentYear][adjustedYear];
-  }
+export function calculateSalary(
+  currentYear: number,
+  examinationYear: number,
+  degree: string,
+): number {
+  const degreeValue = degree === "bachelor" ? 1 : 0;
+  const adjustedYear = examinationYear + degreeValue;
+  return salaryPayscale[currentYear][adjustedYear];
+}
 
-  export function calculatePension(salary: number): number {
-    return Math.round(salary * 0.07);
-  }
+export function calculatePension(salary: number): number {
+  return Math.round(salary * 0.07);
+}
 
-  export function maxExperience(thisYear: number): number {
-  const years = Object.keys(salaryPayscale[thisYear]).map(Number)
-    return Math.min(...years);
-  }
\ No newline at end of file
+export function maxExperience(thisYear: number): number {
+  const years = Object.keys(salaryPayscale[thisYear]).map(Number);
+  return Math.min(...years);
+}
diff --git a/src/salaryAndBenefits/utils/salaryData.ts b/src/salaryAndBenefits/utils/salaryData.ts
index 24a8b85f6..10c359d9a 100644
--- a/src/salaryAndBenefits/utils/salaryData.ts
+++ b/src/salaryAndBenefits/utils/salaryData.ts
@@ -1,41 +1,40 @@
 export const payscale = {
-    2024: {
-      2024 : 600000,
-      2023 : 635833,
-      2022 : 681829,
-      2021 : 734982,
-      2020 : 789982,
-      2019 : 838539,
-      2018 : 879553,
-      2017 : 916886,
-      2016 : 949000,
-      2015 : 977333,
-      2014 : 1005324,
-      2013 : 1031405,
-      2012 : 1064738,
-      2011 : 1091489,
-      2010 : 1113742,
-      2009 : 1138742,
-      2008 : 1166667,
-      2007 : 1192460,
-      2006 : 1210126,
-      2005 : 1233560,
-      2004 : 1264767,
-      2003 : 1289780,
-      2002 : 1299680,
-      2001 : 1295953,
-      2000 : 1305501,
-      1999 : 1328501,
-      1998 : 1349349,
-      1997 : 1365121,
-      1996 : 1384832,
-      1995 : 1399711,
-      1994 : 1422069,
-      1993 : 1429358,
-      1992 : 1452891,
-      1991 : 1458021,
-      1990 : 1467321,
-      1989 : 1484721
-    }
-  } ;
-  
\ No newline at end of file
+  2024: {
+    2024: 600000,
+    2023: 635833,
+    2022: 681829,
+    2021: 734982,
+    2020: 789982,
+    2019: 838539,
+    2018: 879553,
+    2017: 916886,
+    2016: 949000,
+    2015: 977333,
+    2014: 1005324,
+    2013: 1031405,
+    2012: 1064738,
+    2011: 1091489,
+    2010: 1113742,
+    2009: 1138742,
+    2008: 1166667,
+    2007: 1192460,
+    2006: 1210126,
+    2005: 1233560,
+    2004: 1264767,
+    2003: 1289780,
+    2002: 1299680,
+    2001: 1295953,
+    2000: 1305501,
+    1999: 1328501,
+    1998: 1349349,
+    1997: 1365121,
+    1996: 1384832,
+    1995: 1399711,
+    1994: 1422069,
+    1993: 1429358,
+    1992: 1452891,
+    1991: 1458021,
+    1990: 1467321,
+    1989: 1484721,
+  },
+};

From 74a81484b33510547ab8fe35d7127e35da56b912 Mon Sep 17 00:00:00 2001
From: christinaroise <christina@roise.no>
Date: Mon, 26 Aug 2024 11:04:55 +0200
Subject: [PATCH 4/4] simplify selectedValue and minor cleanup

---
 .../radioButtonGroup/RadioButtonGroup.tsx     | 80 +++++--------------
 src/salaryAndBenefits/SalaryAndBenefits.tsx   | 47 +++++------
 .../salaryCalculator/SalaryCalculator.tsx     | 36 ++++-----
 3 files changed, 55 insertions(+), 108 deletions(-)

diff --git a/src/components/forms/radioButtonGroup/RadioButtonGroup.tsx b/src/components/forms/radioButtonGroup/RadioButtonGroup.tsx
index 98bb57490..2080cc18f 100644
--- a/src/components/forms/radioButtonGroup/RadioButtonGroup.tsx
+++ b/src/components/forms/radioButtonGroup/RadioButtonGroup.tsx
@@ -7,63 +7,27 @@ export interface IOption {
   id: string;
   label: string;
   disabled?: boolean;
-  currentSelected: boolean;
-}
-
-interface RenderOptionsProps {
-  options: IOption[];
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 interface RadioButtonGroupProps {
   id: string;
   label: string;
   options: IOption[];
+  selectedId: string;
   onValueChange: (option: IOption) => void;
 }
 
-/**
- * Important Note on RadioButtons:
- *
- * - The `RadioButton` component, defined in this code, should not be used in isolation.
- *   Radio buttons are designed to be part of a group where only one option can be selected at a time.
- *
- * - When used individually, a radio button loses its intended functionality of providing mutually exclusive choices
- *   and may confuse users or lead to unexpected behavior.
- *
- * - Instead, radio buttons should always be used within a group, typically managed by a parent component
- *   such as `RadioButtonGroup`, which ensures that only one radio button in the group can be selected at any given time.
- *
- * - The parent component should handle the state management and changes, ensuring that the user can only select
- *   one option from the group and that this selection is properly communicated back to the application.
- *
- * - Example of usage within a group:
- *
- * ```
- * const options = [
- *   { id: 'radio1', label: 'Option 1', value: '1', currentSelected: false },
- *   { id: 'radio2', label: 'Option 2', value: '2', currentSelected: true },
- * ];
- *
- * <RadioButtonGroup
- *   id="example-group"
- *   label="Choose an option"
- *   options={options}
- *   onValueChange={(name, value) => console.log(`Selected ${name}: ${value}`)}
- * />
- * ```
- * - In this example, the `RadioButtonGroup` component renders multiple `RadioButton` components
- *   as part of a cohesive group, enabling proper radio button functionality.
- */
-
 export const RadioButtonGroup = ({
   id,
   label,
   options,
+  selectedId,
   onValueChange,
 }: RadioButtonGroupProps) => {
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedOption = options.find((option) => option.id === e.target.id);
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedOption = options.find(
+      (option) => option.id === e.target.value
+    );
     if (selectedOption) {
       onValueChange(selectedOption);
     }
@@ -73,27 +37,19 @@ export const RadioButtonGroup = ({
     <fieldset className={styles.fieldset} id={id}>
       <legend className={textStyles.h3}>{label}</legend>
       <div className={styles.wrapper}>
-        <RenderOptions options={options} onChange={handleChange} />
+        {options.map(({ id, label, disabled }) => (
+          <RadioButton
+            key={id}
+            id={id}
+            label={label}
+            name="radio"
+            disabled={disabled}
+            value={id}
+            checked={id === selectedId}
+            onChange={onChange}
+          />
+        ))}
       </div>
     </fieldset>
   );
 };
-
-const RenderOptions = ({ options, onChange }: RenderOptionsProps) => {
-  return (
-    <>
-      {options.map(({ id, label, disabled, currentSelected }) => (
-        <RadioButton
-          key={id}
-          id={id}
-          label={label}
-          name="radio"
-          disabled={disabled}
-          value={label}
-          defaultChecked={currentSelected}
-          onChange={onChange}
-        />
-      ))}
-    </>
-  );
-};
diff --git a/src/salaryAndBenefits/SalaryAndBenefits.tsx b/src/salaryAndBenefits/SalaryAndBenefits.tsx
index a061e4a83..999c14d47 100644
--- a/src/salaryAndBenefits/SalaryAndBenefits.tsx
+++ b/src/salaryAndBenefits/SalaryAndBenefits.tsx
@@ -1,5 +1,4 @@
 "use client";
-
 import styles from "./salaryAndBenefits.module.css";
 import Text from "src/components/text/Text";
 import { SalaryAndBenefitsPage } from "studio/lib/payloads/salaryAndBenefits";
@@ -8,11 +7,7 @@ import SalaryCalculator, {
   Degree,
 } from "./components/salaryCalculator/SalaryCalculator";
 import { useState } from "react";
-import {
-  calculatePension,
-  calculateSalary,
-  maxExperience,
-} from "./utils/calculateSalary";
+import { calculatePension, calculateSalary } from "./utils/calculateSalary";
 
 interface SalaryAndBenefitsProps {
   salaryAndBenefits: SalaryAndBenefitsPage;
@@ -25,8 +20,6 @@ interface SalaryCalculatorFormState {
 
 const SalaryAndBenefits = ({ salaryAndBenefits }: SalaryAndBenefitsProps) => {
   const currentYear = new Date().getFullYear();
-  const minExaminationYear = maxExperience(currentYear);
-  const maxExaminationYear = currentYear - 1;
 
   const [formState, setFormState] = useState<SalaryCalculatorFormState>({
     examinationYear: currentYear - 1,
@@ -54,8 +47,8 @@ const SalaryAndBenefits = ({ salaryAndBenefits }: SalaryAndBenefitsProps) => {
       calculateSalary(
         currentYear,
         formState.examinationYear,
-        formState.selectedDegree,
-      ),
+        formState.selectedDegree
+      )
     );
   };
 
@@ -63,24 +56,24 @@ const SalaryAndBenefits = ({ salaryAndBenefits }: SalaryAndBenefitsProps) => {
     <div className={styles.wrapper}>
       <Text type="h1">{salaryAndBenefits.basicTitle}</Text>
       {salaryAndBenefits.showSalaryCalculator && (
-        <SalaryCalculator
-          // TODO: should also take in degree state (this requires changes to IOption of RadioButtonGroup)
-          examinationYear={formState.examinationYear}
-          minExaminationYear={minExaminationYear}
-          maxExaminationYear={maxExaminationYear}
-          onDegreeChanged={updateSelectedDegree}
-          onExaminationYearChanged={updateExaminationYear}
-          onSubmit={handleSubmit}
-        />
+        <>
+          <SalaryCalculator
+            examinationYearValue={formState.examinationYear}
+            selectedDegree={formState.selectedDegree}
+            onDegreeChanged={updateSelectedDegree}
+            onExaminationYearChanged={updateExaminationYear}
+            onSubmit={handleSubmit}
+          />
+          {salary !== null ? (
+            <div aria-live="polite">
+              <Text> Du vil få en årlig lønn på {salary}</Text>
+              <Text>
+                Du vil få en årlig pensjon på omtrent {calculatePension(salary)}
+              </Text>
+            </div>
+          ) : null}
+        </>
       )}
-      {salary !== null ? (
-        <div aria-live="polite">
-          <Text> Du vil få en årlig lønn på {salary}</Text>
-          <Text>
-            Du vil få en årlig pensjon på omtrent {calculatePension(salary)}
-          </Text>
-        </div>
-      ) : null}
       <div className={styles.benefits}>
         {salaryAndBenefits.benefits.map((benefit) => (
           <div key={benefit._key} className={styles.benefitWrapper}>
diff --git a/src/salaryAndBenefits/components/salaryCalculator/SalaryCalculator.tsx b/src/salaryAndBenefits/components/salaryCalculator/SalaryCalculator.tsx
index f6fb28f9d..3db2ef89f 100644
--- a/src/salaryAndBenefits/components/salaryCalculator/SalaryCalculator.tsx
+++ b/src/salaryAndBenefits/components/salaryCalculator/SalaryCalculator.tsx
@@ -5,36 +5,34 @@ import {
   RadioButtonGroup,
 } from "src/components/forms/radioButtonGroup/RadioButtonGroup";
 import Button from "src/components/buttons/Button";
+import { maxExperience } from "src/salaryAndBenefits/utils/calculateSalary";
 
 export type Degree = "bachelor" | "master";
 
 const degreeOptions: IOption[] = [
-  {
-    id: "bachelor",
-    label: "Bachelor",
-    currentSelected: true,
-    disabled: false,
-  },
-  { id: "master", label: "Master", currentSelected: false, disabled: false },
+  { id: "bachelor", label: "Bachelor" },
+  { id: "master", label: "Master" },
 ];
 
 interface SalaryCalculatorProps {
-  examinationYear: number;
-  minExaminationYear: number;
-  maxExaminationYear: number;
+  examinationYearValue: number;
+  selectedDegree: Degree;
   onDegreeChanged: (degree: Degree) => void;
   onExaminationYearChanged: (examinationYear: number) => void;
   onSubmit: (event: React.FormEvent) => void;
 }
 
 export default function SalaryCalculator({
-  examinationYear,
-  minExaminationYear,
-  maxExaminationYear,
+  examinationYearValue: yearValue,
+  selectedDegree,
   onDegreeChanged,
   onExaminationYearChanged,
   onSubmit,
 }: SalaryCalculatorProps) {
+  const currentYear = new Date().getFullYear();
+  const minExaminationYear = maxExperience(currentYear);
+  const maxExaminationYear = currentYear - 1;
+
   return (
     <form
       aria-label="salary calculator"
@@ -45,18 +43,18 @@ export default function SalaryCalculator({
         id="degree-group"
         label="Choose your degree"
         options={degreeOptions}
-        onValueChange={(value) =>
-          (value.id === "bachelor" || value.id === "master") &&
-          onDegreeChanged(value.id)
+        selectedId={selectedDegree}
+        onValueChange={(selectedOption) =>
+          onDegreeChanged(selectedOption.id as Degree)
         }
       />
       <InputField
-        label="year"
+        label="Year"
         name="examinationYear"
         type="number"
-        max={maxExaminationYear}
         min={minExaminationYear}
-        value={examinationYear}
+        max={maxExaminationYear}
+        value={yearValue}
         onChange={(_name, value) => onExaminationYearChanged(parseInt(value))}
         required
       />