feat: adds sanity structure for compensation calculator section (#929)

* feat: adds sanity structure for compensation calculator section * feat: adds option for violet/dark for salary calc * fix: make calculator use state to be quicker * fix: structure compensation data better * feat: adds general handbook links to compensation site * feat: adds bottom link to compensation block * fix: design for calculator component * fix: translations for calculation * fix: default initial year --------- Co-authored-by: anemne <[email protected]> Co-authored-by: Petter Hohle <[email protected]>
varianter · Dec 6, 2024 · ea59917 · ea59917
1 parent 60b7d4f
commit ea59917
Show file tree

Hide file tree

Showing 25 changed files with 801 additions and 79 deletions.
diff --git a/messages/en.json b/messages/en.json
@@ -25,6 +25,20 @@
     "visit_cv": "Visit mini-CV",
     "read_more": "Read more"
   },
+  "compensation_calculator": {
+    "calculator": {
+      "formLabel": "Salary calculator",
+      "educationInput": "Education",
+      "yearInput": "The year you started in relevant work",
+      "bonusResult": "+ bonus",
+      "resultLabel": "Your annual salary"
+    },
+    "degreeOptions": {
+      "bachelor": "Bachelor",
+      "master": "Master"
+    }
+  },
+
   "employee_card": {
     "show": "Showing",
     "of": "out of",

diff --git a/messages/no.json b/messages/no.json
@@ -21,6 +21,19 @@
     "contact_sale": "Kontakt salg!",
     "contact_us": "Kontakt oss"
   },
+  "compensation_calculator": {
+    "calculator": {
+      "formLabel": "Lønnskalkulator",
+      "educationInput": "Utdanning",
+      "yearInput": "Året du begynte i relevant arbeid",
+      "bonusResult": "+ bonus",
+      "resultLabel": "Din årslønn"
+    },
+    "degreeOptions": {
+      "bachelor": "Bachelor",
+      "master": "Master"
+    }
+  },
   "custom_link": {
     "visit_cv": "Gå til mini-CV",
     "read_more": "Les mer"

diff --git a/messages/se.json b/messages/se.json
@@ -21,6 +21,19 @@
     "contact_sale": "Kontakta sälj!",
     "contact_us": "Kontakt oss"
   },
+  "compensation_calculator": {
+    "calculator": {
+      "formLabel": "Lönskalkulator",
+      "educationInput": "Utbildning",
+      "yearInput": "Året du började i relevant arbete",
+      "bonusResult": "+ bonus",
+      "resultLabel": "Din årslön"
+    },
+    "degreeOptions": {
+      "bachelor": "Bachelor",
+      "master": "Master"
+    }
+  },
   "custom_link": {
     "visit_cv": "Besök mini-CV",
     "read_more": "Läs mer"

diff --git a/src/components/compensations/utils/salary.ts b/src/components/compensations/utils/salary.ts
@@ -11,7 +11,7 @@ export function calculateSalary(
   salaries: Salaries,
 ): number | undefined {
   const degreeValue = degree === "bachelor" ? 1 : 0;
-  const adjustedYear = examinationYear + degreeValue;
+  const adjustedYear = examinationYear - degreeValue;
   return salaries[adjustedYear];
 }
 

diff --git a/src/components/forms/inputField/inputField.module.css b/src/components/forms/inputField/inputField.module.css
@@ -8,18 +8,18 @@
 }
 
 .label {
-  color: var(--background-bg-dark);
+  color: currentColor;
 }
 
 .input {
   display: flex;
   padding: 0.5rem 0.75rem;
   align-items: center;
   gap: 0.5rem;
-  align-self: stretch;
+  font-size: 1rem;
 
-  border-radius: 0.5rem;
-  border: 1px solid var(--background-bg-light-secondary, #ece1d3);
+  border-radius: var(--radius-small);
+  border: 1px solid var(--stroke-primary, #ece1d3);
   background: var(--text-primary-light, #fff);
 }
 

diff --git a/src/components/forms/radioButtonGroup/RadioButtonGroup.tsx b/src/components/forms/radioButtonGroup/RadioButtonGroup.tsx
@@ -1,7 +1,9 @@
 import React from "react";
 
 import styles from "src/components/forms/radioButtonGroup/radioButtonGroup.module.css";
-import textStyles from "src/components/text/text.module.css";
+import { tagComponentStyle } from "src/components/tag";
+import Text from "src/components/text/Text";
+import { cnIf } from "src/utils/css";
 
 export interface IOption {
   id: string;
@@ -17,6 +19,8 @@ interface RadioButtonProps {
   checked?: boolean;
   disabled?: boolean;
   defaultChecked?: boolean;
+  background?: "light" | "dark" | "violet";
+
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
@@ -26,6 +30,7 @@ interface RadioButtonGroupProps {
   options: IOption[];
   selectedId: string;
   onValueChange: (option: IOption) => void;
+  background?: "light" | "dark" | "violet";
 }
 
 export const RadioButtonGroup = ({
@@ -34,6 +39,7 @@ export const RadioButtonGroup = ({
   options,
   selectedId,
   onValueChange,
+  background = "light",
 }: RadioButtonGroupProps) => {
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const selectedOption = options.find(
@@ -46,21 +52,28 @@ export const RadioButtonGroup = ({
 
   return (
     <fieldset className={styles.fieldset} id={id}>
-      <legend className={textStyles.h3}>{label}</legend>
-      <div className={styles.wrapper}>
-        {options.map(({ id, label, disabled }) => (
-          <RadioButton
-            key={id}
-            id={id}
-            label={label}
-            name="radio"
-            disabled={disabled}
-            value={id}
-            checked={id === selectedId}
-            onChange={onChange}
-          />
-        ))}
-      </div>
+      <legend className={styles.srOnly}>
+        <Text type="labelRegular" as="span">
+          {label}
+        </Text>
+      </legend>
+      <Text type="labelRegular" aria-hidden>
+        {label}
+      </Text>
+
+      {options.map(({ id, label, disabled }) => (
+        <RadioButton
+          key={id}
+          id={id}
+          label={label}
+          name="radio"
+          disabled={disabled}
+          value={id}
+          checked={id === selectedId}
+          background={background}
+          onChange={onChange}
+        />
+      ))}
     </fieldset>
   );
 };
@@ -70,16 +83,20 @@ const RadioButton = ({
   name,
   value,
   label,
-  checked,
+  checked = false,
   disabled,
   defaultChecked,
   onChange,
+  background = "light",
 }: RadioButtonProps) => {
+  const className = cnIf({
+    [tagComponentStyle(checked, background)]: true,
+    [styles.inputLabelDisabled]: disabled ?? false,
+    [styles.inputLabel]: true,
+  });
+
   return (
-    <label
-      htmlFor={id}
-      className={`${styles.container} ${textStyles.caption} ${disabled ? styles.disabledLabel : styles.label}`}
-    >
+    <label htmlFor={id} className={className}>
       <input
         className={styles.input}
         type="radio"

diff --git a/src/components/forms/radioButtonGroup/radioButtonGroup.module.css b/src/components/forms/radioButtonGroup/radioButtonGroup.module.css
@@ -1,6 +1,20 @@
 .fieldset {
   border: 0 none;
   padding: 0;
+
+  display: flex;
+  flex-direction: row;
+  gap: 0.75rem;
+  row-gap: 0.5rem;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.srOnly {
+  /* hide from everything but screen readers */
+  position: absolute;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
 }
 
 .wrapper {
@@ -15,49 +29,23 @@
   align-items: center;
 }
 
-.label {
-  font-size: 1rem;
-  color: var(--dark-purple);
-}
-
 .disabledLabel {
   color: gray;
   cursor: not-allowed;
 }
 
+.inputLabel {
+  madgin: 0;
+  padding: 0;
+}
 .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: "";
+  width: 0px;
+  height: 0px;
+  border: none;
   position: absolute;
-  top: 4px;
-  left: 4px;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background-color: var(--background-bg-dark);
-}
-
-.input:hover {
-  background-color: var(--background-bg-light-primary);
-  outline: 2px solid var(--background-button-outline-dark);
-}
-
-.input:focus {
-  outline: 2px solid var(--background-button-outline-dark);
-}
-
-.input[disabled] {
-  cursor: not-allowed;
-  border-color: grey;
+  /* hide from everything but screen readers */
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
 }
diff --git a/src/components/linkButton/LinkButton.tsx b/src/components/linkButton/LinkButton.tsx
@@ -11,15 +11,32 @@ interface IButton {
   isSmall?: boolean;
   type?: LinkButtonType;
   link: ILink;
+  background?: "dark" | "light";
 }
 
-const typeClassMap: { [key in LinkButtonType]: string } = {
-  primary: styles.primary,
-  secondary: styles.secondary,
-};
+const typeClassMap = (
+  background: IButton["background"],
+): {
+  [key in LinkButtonType]: string;
+} => ({
+  primary:
+    background === "dark"
+      ? `${styles.primary} ${styles["primary--darkBg"]}`
+      : styles.primary,
+  secondary:
+    background === "dark"
+      ? `${styles.secondary} ${styles["secondary--darkBg"]}`
+      : styles.secondary,
+});
 
-const LinkButton = ({ isSmall, type = "primary", link }: IButton) => {
-  const className = `${styles.button} ${isSmall ? styles.small : ""} ${typeClassMap[type]}`;
+const LinkButton = ({
+  isSmall,
+  type = "primary",
+  link,
+  background,
+}: IButton) => {
+  const classMap = typeClassMap(background);
+  const className = `${styles.button} ${isSmall ? styles.small : ""} ${classMap[type]}`;
   const href = getHref(link);
   const linkTitleValue = link.linkTitle;
   return (

diff --git a/src/components/linkButton/linkButton.module.css b/src/components/linkButton/linkButton.module.css
@@ -71,10 +71,13 @@
 }
 
 .secondary {
-  /* Todo: this color needs to be changes */
-  color: var(--background-bg-dark);
+  --_borderColor: var(--text-secondary);
+  --_color: var(--background-bg-dark);
+  --_iconColor: var(--text-secondary);
+
+  color: var(--_color);
   background: rgba(255, 255, 255, 0);
-  border: 1px solid var(--text-secondary);
+  border: 1px solid var(--_borderColor);
 
   &:hover {
     background: rgba(31, 31, 31, 0.05);
@@ -85,6 +88,15 @@
   }
 
   &::after {
-    background-color: var(--text-secondary);
+    background-color: var(--_iconColor);
+  }
+}
+.secondary--darkBg {
+  /* @TODO: this color needs to be changed */
+  --_borderColor: var(--background-bg-light-secondary);
+  --_color: currentColor;
+
+  &::after {
+    background-color: currentColor;
   }
 }