From d7e088dcb883efa4c517e493bbbec4d221e80f6b Mon Sep 17 00:00:00 2001
From: Tarik Al Mashni <tarikalmashni@gmail.com>
Date: Wed, 3 Aug 2022 15:20:17 +0200
Subject: [PATCH] fix: show radio button for preselected agency

---
 .../agencySelection/PreselectedAgency.tsx     | 16 ++++++++----
 .../preselectedAgency.styles.scss             | 26 +++++++++++++------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/components/agencySelection/PreselectedAgency.tsx b/src/components/agencySelection/PreselectedAgency.tsx
index bdf1da6e4..56a23a1f2 100644
--- a/src/components/agencySelection/PreselectedAgency.tsx
+++ b/src/components/agencySelection/PreselectedAgency.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Text } from '../text/Text';
 import { AgencyDataInterface } from '../../globalState';
 import { Headline } from '../headline/Headline';
+import { RadioButton } from '../radioButton/RadioButton';
 import { AgencyInfo } from './AgencyInfo';
-import './preselectedAgency.styles';
 import { AgencyLanguages } from './AgencyLanguages';
+import './preselectedAgency.styles';
 
 export interface PreselectedAgencyProps {
 	prefix: string;
@@ -16,13 +16,19 @@ export const PreselectedAgency = (props: PreselectedAgencyProps) => (
 	<div className="preselectedAgency" data-cy="show-preselected-agency">
 		<Headline semanticLevel="4" styleLevel="5" text={props.prefix} />
 		<div className="preselectedAgency__item">
-			<Text text={props.agencyData.name} type="standard" />
+			<RadioButton
+				name="agencySelection"
+				type="smaller"
+				value={props.agencyData.id.toString()}
+				checked
+				inputId={props.agencyData.id.toString()}
+				label={props.agencyData.name}
+				handleRadioButton={() => void 0}
+			/>
 			<AgencyInfo
 				agency={props.agencyData}
 				isProfileView={props.isProfileView}
 			/>
-		</div>
-		<div>
 			<AgencyLanguages agencyId={props.agencyData.id} />
 		</div>
 	</div>
diff --git a/src/components/agencySelection/preselectedAgency.styles.scss b/src/components/agencySelection/preselectedAgency.styles.scss
index 13ea42041..43edee985 100644
--- a/src/components/agencySelection/preselectedAgency.styles.scss
+++ b/src/components/agencySelection/preselectedAgency.styles.scss
@@ -1,7 +1,10 @@
+$maxFormElementWidth: 320px;
 $infoIconSize: 16px;
 
 .preselectedAgency {
 	margin-top: 28px;
+	animation: fadeIn linear 0.2s;
+	position: relative;
 
 	.headline {
 		margin: 0 0 12px;
@@ -10,18 +13,25 @@ $infoIconSize: 16px;
 
 	&__item {
 		display: flex;
-		position: relative;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		padding: 12px 0;
 
-		.text {
-			width: 100%;
+		.radioButton {
+			flex-basis: calc(100% - #{$infoIconSize + 1px});
+			min-height: unset;
+		}
+
+		.agencyLanguages {
+			margin-left: 32px;
 		}
-	}
 
-	.agencyInfo {
-		top: 34px;
+		.agencyInfo {
+			top: 34px;
 
-		&--above {
-			top: auto;
+			&--above {
+				top: auto;
+			}
 		}
 	}
 }