Merge pull request #94 from thepensionsregulator/feature-form-elements-default-spacing

default checkboxes and radio buttons spacing applied

Author: d4lek

packages/forms/src/elements/checkbox/checkbox.module.scss

@@ -30,5 +30,5 @@
 	font-size: $font-size-2;
 	font-weight: $font-weight-2;
 	margin-top: $space-2;
-	margin-left: 60px;
+	margin-left: 55px;
 }

packages/forms/src/elements/checkbox/checkbox.tsx

@@ -22,7 +22,12 @@ export const Checkbox: React.FC<Partial<CheckboxIconProps>> = ({
 		<StyledInputLabel
 			element="div"
 			cfg={Object.assign(
-				{ mt: 1, py: 1, alignItems: 'flex-start', flexDirection: 'column' },
+				{
+					mt: 1,
+					mb: 3,
+					alignItems: 'flex-start',
+					flexDirection: 'column',
+				},
 				cfg,
 			)}
 		>
@@ -38,7 +43,7 @@ export const Checkbox: React.FC<Partial<CheckboxIconProps>> = ({
 				) : (
 					<CheckboxBlank className={styles.checkbox} />
 				)}
-				<P cfg={{ ml: 4, fontWeight: 3 }}>{label}</P>
+				<P cfg={{ ml: 3, fontWeight: 3 }}>{label}</P>
 			</label>
 			{hint && <P className={styles.hint}>{hint}</P>}
 		</StyledInputLabel>

packages/forms/src/elements/radio/radio.mdx

@@ -52,27 +52,23 @@ import { FFRadioButton } from '@tpr/forms';
 							name={FIELD_NAME}
 							value="value_a"
 							label="Select Value A"
-							cfg={{ mb: 4 }}
 						/>
 						<FFRadioButton
 							name={FIELD_NAME}
 							value="value_b"
 							label="Select Value B"
 							hint="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea obcaecati repellat molestias nemo deleniti eveniet vel similique nesciunt fugiat nisi?"
-							cfg={{ mb: 4 }}
 						/>
 						<FFRadioButton
 							name={FIELD_NAME}
 							value="value_c"
 							label="Select Value C"
-							cfg={{ mb: 4 }}
 						/>
 						<FFRadioButton
 							name={FIELD_NAME}
 							value="value_d"
 							label="Select Value D"
 							hint="Lorem, ipsum dolor sit amet consectetur adipisicing elit."
-							cfg={{ mb: 4 }}
 						/>
 						<FFRadioButton
 							name={FIELD_NAME}

packages/forms/src/elements/radio/radio.module.scss

@@ -27,7 +27,7 @@
 
 .label {
 	line-height: 27px;
-	padding-left: $space-2;
+	padding-left: $space-1;
 	cursor: pointer;
 }
 
@@ -41,5 +41,5 @@
 	font-size: $font-size-2;
 	font-weight: $font-weight-2;
 	margin-top: $space-2;
-	margin-left: 60px;
+	margin-left: 55px;
 }

packages/forms/src/elements/radio/radio.tsx

@@ -25,7 +25,13 @@ export const RadioButton: React.FC<RadioButtonProps> = ({
 		<StyledInputLabel
 			element="div"
 			cfg={Object.assign(
-				{ mt: 1, py: 1, alignItems: 'flex-start', flexDirection: 'column' },
+				{
+					mt: 1,
+					mb: 3,
+					py: 1,
+					alignItems: 'flex-start',
+					flexDirection: 'column',
+				},
 				cfg,
 			)}
 		>