@financial-times/n-conversion-forms 41.3.1 → 42.0.0

package/main.scss

@@ -1,13 +1,10 @@
-@import '@financial-times/o-icons/main';
-@import '@financial-times/o-colors/main';
-@import '@financial-times/o-normalise/main';
-@import '@financial-times/o-typography/main';
 @import '@financial-times/o-forms/main';
-@import '@financial-times/o-buttons/main';
 @import '@financial-times/o-message/main';
-@import '@financial-times/o-icons/main';
 @import '@financial-times/o-stepped-progress/main';
-@import '@financial-times/o-fonts/main';
+@import '@financial-times/o3-foundation/css/core.css';
+@import '@financial-times/o3-foundation/css/professional.css';
+@import '@financial-times/o3-button/css/core.css';
+@import '@financial-times/o3-button/css/professional.css';
 @import './styles/package-change';
 @import './styles/payment-term';
 @import './styles/payment-type';
@@ -20,14 +17,11 @@
 @import './styles/forms-additional-field-information';
 @import './styles/error';
 @import './styles/graduation-date';
-@import './styles/google-sign-in';
 @import './styles/confirmation';
 @import './styles/ft-edit-registration-confirmation';
 @import './styles/subscription-confirmation-with-payment-link';
 @import './styles/proceed-with-payment-link';
 
-@include oTypography();
-@include oFonts();
 @include oForms(
 	$opts: (
 		'elements': (
@@ -53,7 +47,10 @@
 
 // Custom styles
 .ncf {
-	@include oTypographySans($scale: 0);
+	font-family: var(--o3-type-body-base-font-family);
+	font-size: var(--o3-type-body-base-font-size);
+	font-weight: var(--o3-type-body-base-font-weight);
+	line-height: var(--o3-type-body-base-line-height);
 
 	&__divider-horizontal {
 		margin: 0 0 16px;
@@ -64,7 +61,7 @@
 	}
 
 	&__wrapper {
-		background: oColorsByName('white');
+		background: var(--o3-color-palette-white);
 		padding: 20px;
 
 		@include oGridRespondTo($from: S) {
@@ -89,23 +86,23 @@
 	}
 
 	&__message {
-		margin: 0 0 oSpacingByName('s6');
+		margin: 0 0 var(--o3-spacing-s);
 
 		@include oGridRespondTo($from: S) {
-			margin: 0 0 oSpacingByName('s3');
+			margin: 0 0 var(--o3-spacing-3xs);
 		}
 	}
 
 	&__light-licence-text {
-		font-weight: lighter;
+		font-weight: var(--o3-font-weight-light);
 	}
 
 	&__bold-licence-text {
-		font-weight: bold;
+		font-weight: var(--o3-font-weight-bold);
 	}
 
 	&__paragraph {
-		padding: oSpacingByName('s4') 0;
+		padding: var(--o3-spacing-2xs) 0;
 		margin: 0;
 
 		&--reduced-padding {
@@ -113,7 +110,7 @@
 		}
 
 		&--subscription-confirmation {
-			margin: oSpacingByName('s4') 0 oSpacingByName('s2');
+			margin: var(--o3-spacing-2xs) 0 var(--o3-spacing-4xs);
 		}
 	}
 
@@ -129,17 +126,20 @@
 	}
 
 	&__legend {
-		@include oTypographySans($weight: 'semibold', $include-font-family: false);
+		font-weight: var(--o3-font-weight-semibold);
+
 		padding: 0;
 	}
 
 	&__fieldset-descriptor {
 		margin: 0;
-		@include oTypographySans($scale: -1, $include-font-family: false);
+
+		line-height: var(--o3-font-lineheight-metric2-negative-2);
+		font-size: var(--o3-font-size-metric2-negative-2);
 	}
 
 	&__fields:not(:first-child) {
-		margin-top: oSpacingByName('s3');
+		margin-top: var(--o3-spacing-3xs);
 	}
 
 	&__field {
@@ -173,11 +173,16 @@
 	}
 
 	&__terms {
-		@include oTypographySans($scale: 0);
-		color: oColorsByName('black-80');
+		font-family: var(--o3-type-detail-font-family);
+		font-size: var(--o3-type-detail-font-size);
+		font-weight: var(--o3-type-detail-font-weight);
+		line-height: var(--o3-type-detail-line-height);
+		color: var(--o3-color-use-case-body-text);
 
 		&--small {
-			@include oTypographySans($scale: -1);
+			line-height: var(--o3-font-lineheight-metric2-negative-2);
+			font-size: var(--o3-font-size-metric2-negative-2);
+			font-family: var(--o3-font-family-metric);
 		}
 	}
 
@@ -185,16 +190,22 @@
 		@include oTypographyHeading($level: 3);
 
 		&--confirmation {
-			@include oTypographySerif($scale: 3);
-			margin: oSpacingByName('s6') 0;
+			line-height: var(--o3-font-lineheight-3);
+			font-size: var(--o3-font-size-3);
+			font-family: var(--o3-font-family-georgia);
+			margin: var(--o3-spacing-s) 0;
 		}
 	}
 
 	&__headed-paragraph {
 		.ncf__header {
-			@include oTypographySans($scale: 2, $include-font-family: false);
+			font-family: var(--o3-type-body-lg-font-family);
+			font-size: var(--o3-type-body-lg-font-size);
+			font-weight: var(--o3-type-body-lg-font-weight);
+			line-height: var(--o3-type-body-lg-line-height);
+
 			padding: 0;
-			margin: 0 0 oSpacingByName('s1');
+			margin: 0 0 var(--o3-spacing-5xs);
 		}
 
 		.ncf__paragraph {
@@ -204,101 +215,23 @@
 
 	&__header2 {
 		&--afterline {
-			@include oTypographySans(
-				$scale: 1,
-				$include-font-family: false,
-				$weight: 'semibold'
-			);
+			font-family: var(--o3-type-body-highlight-font-family);
+			font-size: var(--o3-type-body-highlight-font-size);
+			font-weight: var(--o3-type-body-highlight-font-weight);
+			line-height: var(--o3-type-body-highlight-line-height);
 
 			&:after {
-				padding-top: oSpacingByName('s3');
+				padding-top: var(--o3-spacing-3xs);
 				padding-bottom: 0;
 				content: '';
 				display: block;
 				width: 90px;
-				border-bottom: oSpacingByName('s1') solid oColorsByName('black');
+				border-bottom: var(--o3-spacing-5xs) solid var(--o3-color-palette-black);
 			}
 		}
 	}
 
-	&__link {
-		@include oTypographyLink;
-	}
-
-	&__link--external {
-		@include oTypographyLink($external: true);
-	}
-
 	&__button {
-		&--submit {
-			@include oButtonsContent(
-				$opts: (
-					'size': 'big',
-					'type': 'primary',
-				)
-			);
-		}
-
-		&--mono {
-			@include oButtonsContent(
-				$opts: (
-					'type': 'secondary',
-					'theme': 'mono',
-				)
-			);
-		}
-
-		&--inverse {
-			@include oButtonsContent(
-				$opts: (
-					'size': 'big',
-					'theme': 'inverse',
-					'type': 'secondary',
-				)
-			);
-		}
-
-		&--professional-inverse {
-			@include oButtonsContent(
-				$opts: (
-					'size': 'big',
-					'theme': 'professional-inverse',
-					'type': 'primary',
-				)
-			);
-		}
-
-		&--secondary {
-			@include oButtonsContent(
-				$opts: (
-					'size': 'big',
-					'type': 'secondary',
-				)
-			);
-		}
-
-		&--google {
-			@include oButtonsContent(
-				$opts: (
-					'size': 'big',
-					'type': 'secondary',
-				)
-			);
-			background-color: oColorsByName('white');
-			padding-left: 40px;
-
-			&::before {
-				content: '';
-				background: transparent
-					url('https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fwww.ft.com%2F__assets%2Fcreatives%2FG_active_focused_pressed.svg?source=m-login&width=20&height=20&format=svg')
-					no-repeat;
-				position: absolute;
-				left: 10px;
-				width: 18px;
-				height: 18px;
-			}
-		}
-
 		&--baseline {
 			vertical-align: baseline;
 		}
@@ -328,71 +261,94 @@
 	}
 
 	&__strong {
-		font-weight: oFontsWeight('semibold');
+		font-weight: var(--o3-font-weight-semibold);
 	}
 
 	&__regular {
-		font-weight: oFontsWeight('regular');
+		font-weight: var(--o3-font-weight-regular);
 	}
 
 	&__icon {
-		background: oColorsByName('paper');
-		border: 2px solid oColorsByName('black-40');
+		background: var(--o3-color-palette-paper);
+		border: 2px solid var(--o3-color-palette-black-40);
 		border-radius: 9999px;
 		display: block;
-		height: 20px;
+		height: 24px;
 		margin: 0 auto;
-		width: 20px;
+		width: 24px;
 	}
 
 	&__icon--tick {
-		background: oColorsByName('teal');
-		border-color: oColorsByName('teal');
+		background: var(--o3-color-palette-teal);
+		border-color: var(--o3-color-palette-teal);
+
 		&::before {
-			@include oIconsContent(
-				$icon-name: 'tick',
-				$color: oColorsByName('white'),
-				$size: 20
-			);
+			display: inline-block;
+			width: 24px;
+			height: 24px;
+			margin: 0 6px;
+			/* Set the icon colour, In this case match the
+             current foreground text colour. */
+			background-color: var(--o3-color-palette-white);
+			/* Mask the square with an Origami icon. */
+			mask-image: var(--o3-icon-tick);
+			mask-repeat: no-repeat;
+			mask-size: contain;
 			content: '';
-			color: oColorsByName('white');
 		}
 	}
 
 	&__icon--phone {
-		background: oColorsByName('teal');
-		border-color: oColorsByName('teal');
+		background: var(--o3-color-palette-teal);
+		border-color: var(--o3-color-palette-teal);
+
 		&::before {
-			@include oIconsContent(
-				$icon-name: 'phone',
-				$color: oColorsByName('white'),
-				$size: 20
-			);
+			display: inline-block;
+			width: 24px;
+			height: 24px;
+			/* Set the icon colour, In this case match the
+             current foreground text colour. */
+			background-color: var(--o3-color-palette-white);
+			/* Mask the square with an Origami icon. */
+			mask-image: var(--o3-icon-phone);
+			mask-repeat: no-repeat;
+			mask-size: contain;
 			content: '';
-			color: oColorsByName('white');
 		}
 	}
 
 	&__icon--error {
-		background: oColorsByName('crimson');
-		border-color: oColorsByName('crimson');
+		background: var(--o3-color-use-case-error);
+		border-color: var(--o3-color-use-case-error);
+
 		&::before {
-			@include oIconsContent(
-				$icon-name: 'warning',
-				$color: oColorsByName('white'),
-				$size: 20
-			);
+			display: inline-block;
+			width: 24px;
+			height: 24px;
+			/* Set the icon colour, In this case match the
+             current foreground text colour. */
+			background-color: var(--o3-color-palette-white);
+			/* Mask the square with an Origami icon. */
+			mask-image: var(--o3-icon-warning);
+			mask-repeat: no-repeat;
+			mask-size: contain;
 			content: '';
-			color: oColorsByName('white');
 		}
 	}
 
 	&__icon--inline-edit {
-		@include oIconsContent(
-			$icon-name: 'edit',
-			$color: oColorsByName('black'),
-			$size: 20
-		);
+		display: inline-block;
+		width: 12px;
+		height: 12px;
+		margin: 0 4px;
+		/* Set the icon colour, In this case match the
+         current foreground text colour. */
+		background-color: var(--o3-color-palette-black);
+		/* Mask the square with an Origami icon. */
+		mask-image: var(--o3-icon-edit);
+		mask-repeat: no-repeat;
+		mask-size: contain;
+		content: '';
 		border: 0;
 		vertical-align: middle;
 	}
@@ -400,23 +356,34 @@
 	&__icon--large {
 		width: 40px;
 		height: 40px;
-		&::before {
-			width: 40px;
-			height: 40px;
-		}
-	}
 
-	&__icon-download {
-		@include oIconsContent(
-			$icon-name: 'download',
-			$color: oColorsByName('black-70'),
-			$size: 32
-		);
+		&::before {
+			width: 24px;
+			height: 24px;
+			margin-top: 8px;
+		}
+	}
+
+	&__icon--download {
+		display: inline-block;
+		width: 24px;
+		height: 24px;
+		margin: 0 6px;
+		/* Set the icon colour, In this case match the
+         current foreground text colour. */
+		background-color: var(--o3-color-palette-black-70);
+		/* Mask the square with an Origami icon. */
+		mask-image: var(--o3-icon-download);
+		mask-repeat: no-repeat;
+		mask-size: contain;
+		content: '';
 		border: 0;
 		vertical-align: middle;
 	}
 
 	&__list {
+		font-family: var(--o3-font-family-metric);
+
 		&-title,
 		&-data {
 			width: calc(50% - 10px);
@@ -424,13 +391,16 @@
 			display: inline-block;
 			vertical-align: middle;
 		}
+
 		&-description {
 			margin: -10px 0 10px;
-			@include oTypographySans($scale: -1, $include-font-family: false);
+
+			line-height: var(--o3-font-lineheight-metric2-negative-2);
+			font-size: var(--o3-font-size-metric2-negative-2);
 		}
 
 		&-title {
-			font-weight: oFontsWeight('semibold');
+			font-weight: var(--o3-font-weight-semibold);
 		}
 	}
 
@@ -450,8 +420,9 @@
 
 	&__unordered-list {
 		padding-inline-start: 25px;
+
 		> li {
-			margin-bottom: oSpacingByName('s3');
+			margin-bottom: var(--o3-spacing-3xs);
 		}
 	}
 
@@ -476,14 +447,8 @@
 	&__hidden {
 		display: none !important;
 	}
-
-	.o-normalise-visually-hidden {
-		@include oNormaliseVisuallyHidden;
-	}
 }
 
-@include ncfGoogleSignIn();
-
 .ncf__password-field .ncf__password-field--show-password {
 	margin-top: 7px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "41.3.1",
+  "version": "42.0.0",
   "description": "Containing jsx components and styles for forms included on Accounts and Acquisition apps (next-signup, next-profile, next-retention, etc).",
   "main": "./dist/index.js",
   "scripts": {
@@ -95,19 +95,16 @@
     }
   },
   "peerDependencies": {
-    "@financial-times/o-buttons": "^7.5.0",
-    "@financial-times/o-colors": "^6.4.2",
     "@financial-times/o-expander": "^6.2.2",
     "@financial-times/o-forms": "^9.6.0",
     "@financial-times/o-grid": "^6.1.5",
     "@financial-times/o-header-services": "^5.2.2",
-    "@financial-times/o-icons": "^7.2.1",
     "@financial-times/o-layout": "^5.2.2",
     "@financial-times/o-loading": "^5.2.1",
     "@financial-times/o-message": "^5.2.1",
-    "@financial-times/o-normalise": "^3.2.2",
     "@financial-times/o-social-follow": "^1.0.0",
     "@financial-times/o-stepped-progress": "^4.0.2",
-    "@financial-times/o-typography": "^7.3.1"
+    "@financial-times/o3-foundation": "^3.2.4",
+    "@financial-times/o3-button": "^3.3.2"
   }
 }