refactor: 💡 <Text />, required types and style for infoSmall

CaritasDeutschland · Feb 9, 2021 · 470267f · 470267f
1 parent a630110
commit 470267f
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 9 deletions.
diff --git a/src/components/agencySelection/AgencySelection.tsx b/src/components/agencySelection/AgencySelection.tsx
@@ -188,6 +188,7 @@ export const AgencySelection = (props: AgencySelectionProps) => {
 					text={translate(
 						'profile.data.register.consultingModeInfo.groupChats'
 					)}
+					type="infoSmall"
 				/>
 			) : (
 				<>
@@ -202,6 +203,7 @@ export const AgencySelection = (props: AgencySelectionProps) => {
 							text={translate(
 								'profile.data.register.selectAgencyInfo'
 							)}
+							type="infoSmall"
 						/>
 					)}
 					{!props.preselectedAgency &&

diff --git a/src/components/inputField/InputField.tsx b/src/components/inputField/InputField.tsx
@@ -139,8 +139,9 @@ export const InputField = (props: InputFieldProps) => {
 					) : null}
 					{inputItem.infoText && (
 						<Text
-							text={inputItem.infoText}
 							className="formWrapper__infoText"
+							text={inputItem.infoText}
+							type="infoSmall"
 						/>
 					)}
 				</div>

diff --git a/src/components/profile/AskerNewRegistration.tsx b/src/components/profile/AskerNewRegistration.tsx
@@ -166,6 +166,7 @@ export const AskerNewRegistration = () => {
 						text={translate(
 							'profile.data.register.consultingModeInfo.singleChats'
 						)}
+						type="infoSmall"
 					/>
 				</div>
 			) : (

diff --git a/src/components/registration/Registration.tsx b/src/components/registration/Registration.tsx
@@ -677,6 +677,7 @@ const Registration = () => {
 										text={translate(
 											'registration.password.note'
 										)}
+										type="infoSmall"
 									/>
 								)}
 								{resortData.showEmail && (

diff --git a/src/components/selectedAgencyInfo/SelectedAgencyInfo.tsx b/src/components/selectedAgencyInfo/SelectedAgencyInfo.tsx
@@ -32,8 +32,9 @@ export const SelectedAgencyInfo = (props: SelectedAgencyInfoProps) => {
 				<div className="selectedAgencyInfo__teamAgency">
 					<InfoIcon className="selectedAgencyInfo__icon" />
 					<Text
-						text={translate('registration.agency.prefilled.isTeam')}
 						className="selectedAgencyInfo__text"
+						text={translate('registration.agency.prefilled.isTeam')}
+						type="infoSmall"
 					/>
 				</div>
 			</div>
@@ -47,8 +48,9 @@ export const SelectedAgencyInfo = (props: SelectedAgencyInfoProps) => {
 			}`}
 		>
 			<Text
-				text={props.prefix}
 				className="selectedAgencyInfo__text selectedAgencyInfo__overline"
+				text={props.prefix}
+				type="infoSmall"
 			/>
 			<p className="selectedAgencyInfo__agencyName">
 				{props.agencyData.name}
@@ -57,8 +59,9 @@ export const SelectedAgencyInfo = (props: SelectedAgencyInfoProps) => {
 				<div className="selectedAgencyInfo__teamAgency">
 					<InfoIcon className="selectedAgencyInfo__icon" />
 					<Text
-						text={translate('registration.agency.prefilled.isTeam')}
 						className="selectedAgencyInfo__text"
+						text={translate('registration.agency.prefilled.isTeam')}
+						type="infoSmall"
 					/>
 				</div>
 			)}

diff --git a/src/components/text/Text.tsx b/src/components/text/Text.tsx
@@ -5,7 +5,7 @@ export interface TextProps {
 	text: string;
 	labelType?: LABEL_TYPES;
 	className?: string;
-	type?:
+	type:
 		| 'standard'
 		| 'infoLargeStandard'
 		| 'infoLargeAlternative'
@@ -32,7 +32,11 @@ const getLabelContent = (type: string) => {
 
 export const Text = (props: TextProps) => {
 	return (
-		<p className={`text ${props.className ? props.className : ''}`}>
+		<p
+			className={`text text--${props.type} ${
+				props.className ? props.className : ''
+			}`}
+		>
 			{props.labelType && (
 				<span
 					className={

diff --git a/src/components/text/text.styles.scss b/src/components/text/text.styles.scss
@@ -1,10 +1,13 @@
 .text {
-	color: $tertiary;
-	font-size: $font-size-secondary;
-	line-height: $line-height-secondary;
 	text-align: left;
 	margin: 0;
 
+	&--infoSmall {
+		color: $tertiary;
+		font-size: $font-size-secondary;
+		line-height: $line-height-secondary;
+	}
+
 	&__label {
 		font-family: $font-family-medium;
 		font-weight: $font-weight-medium;