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

package/styles/subscription-confirmation-with-payment-link.scss

@@ -2,16 +2,16 @@
 @import '@financial-times/o-buttons/main';
 
 .subscription-active-with-payment-link {
-  background: oColorsByName('ft-grey');
-  padding: oSpacingByName('s6') oSpacingByName('s6') oSpacingByName('s8');
-  color: oColorsByName('white');
+  background: var(--o3-color-palette-ft-grey);
+  padding: var(--o3-spacing-s) var(--o3-spacing-s) var(--o3-spacing-m);
+  color: var(--o3-color-palette-white);
   display: flex;
   flex-direction: column;
 }
 
 .subscription-active-with-payment-link--responsive {
   @include oGridRespondTo($from: M) {
-    padding: oSpacingByName('s6') 50px oSpacingByName('s8');
+    padding: var(--o3-spacing-s) 50px var(--o3-spacing-m);
   }
 }
 
@@ -26,61 +26,101 @@
   justify-content: center;
   width: 24px;
   height: 24px;
-  background-color: oColorsByName('ft-pink');
+  background-color: var(--o3-color-palette-ft-pink);
   border-radius: 50%;
-  margin-right: oSpacingByName('s4');
+  margin-right: var(--o3-spacing-2xs);
 }
 
 .subscription-active-with-payment-link__icon {
-  @include oIconsContent($icon-name: 'tick', $color: oColorsByName('ft-grey'), $size: 34);
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  margin: 6px;
+  margin-top: 15px;
+  /* Set the icon colour, In this case match the
+   current foreground text colour. */
+  background-color: var(--o3-color-palette-ft-grey);
+  /* Mask the square with an Origami icon. */
+  mask-image: var(--o3-icon-tick);
+  mask-repeat: no-repeat;
+  mask-size: contain;
 }
 
 .subscription-active-with-payment-link__title {
   margin: 0;
-  @include oTypographySans($scale: 4, $weight: 'regular');
+
+  font-family: var(--o3-type-title-md-font-family);
+  font-size: var(--o3-type-title-md-font-size);
+  font-weight: var(--o3-type-title-md-font-weight);
+  line-height: var(--o3-type-title-md-line-height);
 }
 
 .subscription-active-with-payment-link__description {
-  @include oTypographySans($scale: 1);
-  color: oColorsByName('white');
+  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);
+
+  color: var(--o3-color-palette-white);
 }
 
 .subscription-active-with-payment-link__label {
-  @include oTypographySans($scale: 1);
-  color: oColorsByName('ft-pink');
-  margin-bottom: oSpacingByName('s2');
+  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);
+
+  color: var(--o3-color-palette-ft-pink);
+  margin-bottom: var(--o3-spacing-4xs);
 }
 
 .subscription-active-with-payment-link__payment-box {
   display: flex;
   align-items: center;
-  background: oColorsByName('ft-grey');
+  background: var(--o3-color-palette-ft-grey);
   overflow: hidden;
-  gap: oSpacingByName('s2');
+  gap: var(--o3-spacing-4xs);
   width: 100%;
 }
 
 .subscription-active-with-payment-link__input {
   flex-grow: 1;
-  background: oColorsByName('white-60');
+  background: var(--o3-color-palette-white-60);
   border: none;
   box-sizing: border-box;
-  color: oColorsByName('black-60');
-  @include oTypographySans($scale: 1);
-  padding: 10px oSpacingByName('s4');
+  color: var(--o3-color-palette-black-60);
+
+  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);
+
+  padding: 10px var(--o3-spacing-2xs);
   text-overflow: ellipsis;
   height: 40px;
 }
 
 .subscription-active-with-payment-link__button {
-  @include oTypographySans($scale: 1);
-  @include oButtonsContent($opts: ('type': 'primary', 'theme': ('color': 'ft-pink')));
-  color: oColorsByName('ft-grey');
+  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);
   transition: background 0.2s ease-in-out;
   padding: 10px 20px;
   height: 40px;
 }
 
-.subscription-active-with-payment-link__button--copied {
-  background-color: oColorsMix($color: 'ft-pink', $background: 'white', $percentage: 80%);
+.subscription-active-with-payment-link__button.subscription-active-with-payment-link__button--copied {
+  background-color: #fdd9c1;; // Fallback for browsers that don’t support color-mix()
+  background-color: color-mix(in srgb, var(--o3-color-palette-ft-pink) 80%, var(--o3-color-palette-white) 20%);
+}
+
+.subscription-active-with-payment-link__button.subscription-active-with-payment-link__button--ft-pink{
+  background-color: var(--o3-color-palette-ft-pink);
+  color: var(--o3-color-palette-ft-grey);
+}
+
+.subscription-active-with-payment-link__button.subscription-active-with-payment-link__button--ft-pink:hover{
+  background-color:#caa68e;
+  color: var(--o3-color-palette-ft-grey);
 }

package/components/__snapshots__/google-sign-in.spec.js.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GoogleSignIn renders with default props 1`] = `
-<link href="https://fonts.googleapis.com/css?family=Roboto"
-      rel="stylesheet"
->
-<base target="_parent">
-<a class="google_button"
-   href="https://www.ft.com"
->
-  Sign in with Google
-</a>
-`;

package/components/google-sign-in.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export function GoogleSignIn({ signInRedirectUrl }) {
-	return (
-		<>
-			<link
-				href="https://fonts.googleapis.com/css?family=Roboto"
-				rel="stylesheet"
-			></link>
-			<base target="_parent" />
-			<a className="google_button" href={signInRedirectUrl}>
-				Sign in with Google
-			</a>
-		</>
-	);
-}
-
-GoogleSignIn.propTypes = {
-	signInRedirectUrl: PropTypes.string.isRequired,
-};

package/components/google-sign-in.spec.js

@@ -1,14 +0,0 @@
-import { GoogleSignIn } from './index';
-import { expectToRenderCorrectly } from '../test-jest/helpers/expect-to-render-correctly';
-
-expect.extend(expectToRenderCorrectly);
-
-describe('GoogleSignIn', () => {
-	it('renders with default props', () => {
-		const props = {
-			signInRedirectUrl: 'https://www.ft.com',
-		};
-
-		expect(GoogleSignIn).toRenderCorrectly(props);
-	});
-});

package/components/google-sign-in.stories.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { GoogleSignIn } from './google-sign-in';
-
-export default {
-	title: 'Google Sign In',
-	component: GoogleSignIn,
-};
-
-export const Basic = (args) => <GoogleSignIn {...args} />;
-Basic.args = {
-	signInRedirectUrl:
-		'https://social-login-svc-eu-test.memb.ft.com/login/google',
-};

package/dist/google-sign-in.jsx

@@ -1,24 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GoogleSignIn = GoogleSignIn;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-function GoogleSignIn(_ref) {
-  var signInRedirectUrl = _ref.signInRedirectUrl;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("link", {
-    href: "https://fonts.googleapis.com/css?family=Roboto",
-    rel: "stylesheet"
-  }), /*#__PURE__*/_react["default"].createElement("base", {
-    target: "_parent"
-  }), /*#__PURE__*/_react["default"].createElement("a", {
-    className: "google_button",
-    href: signInRedirectUrl
-  }, "Sign in with Google"));
-}
-GoogleSignIn.propTypes = {
-  signInRedirectUrl: _propTypes["default"].string.isRequired
-};