Merge pull request #561 from Onlineberatung/bugfix/VIC-1180-preselect…

…ed-BS-should-have-a-radio-button fix: show radio button for preselected agency
Onlineberatung · Aug 4, 2022 · e0eca66 · e0eca66
2 parents 1c39349 + aa4716f
commit e0eca66
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 13 deletions.
diff --git 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
@@ -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;
+			}
 		}
 	}
 }