@financial-times/n-conversion-forms 35.0.0 → 36.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.toolkitstate/ci.json +2 -2
- package/components/__snapshots__/ft-edit-registration-confirmation.spec.js.snap +132 -0
- package/components/ft-edit-registration-confirmation.jsx +59 -0
- package/components/ft-edit-registration-confirmation.spec.js +40 -0
- package/components/ft-edit-registration-confirmation.stories.js +27 -0
- package/components/index.js +1 -0
- package/dist/ft-edit-registration-confirmation.jsx +51 -0
- package/dist/index.js +7 -0
- package/main.scss +1 -0
- package/package.json +6 -6
- package/styles/ft-edit-registration-confirmation.scss +139 -0
package/.toolkitstate/ci.json
CHANGED
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`RegistrationConfirmation renders a continue reading button when an articleUrl is provided 1`] = `
|
|
4
|
+
<div class="ncf">
|
|
5
|
+
<div class="ncf__center ncf__margin">
|
|
6
|
+
<div class="ncf__icon ncf__icon--tick ncf__icon--large">
|
|
7
|
+
</div>
|
|
8
|
+
<h1 class="ncf__header ncf__header--confirmation">
|
|
9
|
+
Success
|
|
10
|
+
</h1>
|
|
11
|
+
<p class="ncf_confirmation--message">
|
|
12
|
+
Thank you for registering for FT Edit.
|
|
13
|
+
</p>
|
|
14
|
+
<p class="ncf__confirmation--message margin-top-x4 ">
|
|
15
|
+
Enjoy 30 days of great journalism. We’ve sent confirmation to
|
|
16
|
+
<div>
|
|
17
|
+
<strong>
|
|
18
|
+
test@example.com
|
|
19
|
+
</strong>
|
|
20
|
+
.
|
|
21
|
+
</div>
|
|
22
|
+
</p>
|
|
23
|
+
</div>
|
|
24
|
+
<a href="/"
|
|
25
|
+
target="_parent"
|
|
26
|
+
class=" ncf__confirmation--finish ncf__button ncf__button--submit"
|
|
27
|
+
data-trackable="register-finish-head-to-ft-edit-hub"
|
|
28
|
+
>
|
|
29
|
+
Explore FT Edit
|
|
30
|
+
</a>
|
|
31
|
+
<a href="https://www.ft.com/content/9141eee7-825a-41d7-913d-49e8c12e76db"
|
|
32
|
+
target="_parent"
|
|
33
|
+
class=" ncf__confirmation--finish-article-read ncf__button ncf__button--secondary reduce-bottom-spacing"
|
|
34
|
+
data-trackable="register-finish-head-to-article"
|
|
35
|
+
>
|
|
36
|
+
Continue reading
|
|
37
|
+
</a>
|
|
38
|
+
</div>
|
|
39
|
+
`;
|
|
40
|
+
|
|
41
|
+
exports[`RegistrationConfirmation renders an explore hub button always 1`] = `
|
|
42
|
+
<div class="ncf">
|
|
43
|
+
<div class="ncf__center ncf__margin">
|
|
44
|
+
<div class="ncf__icon ncf__icon--tick ncf__icon--large">
|
|
45
|
+
</div>
|
|
46
|
+
<h1 class="ncf__header ncf__header--confirmation">
|
|
47
|
+
Success
|
|
48
|
+
</h1>
|
|
49
|
+
<p class="ncf_confirmation--message">
|
|
50
|
+
Thank you for registering for FT Edit.
|
|
51
|
+
</p>
|
|
52
|
+
<p class="ncf__confirmation--message margin-top-x4 ">
|
|
53
|
+
Enjoy 30 days of great journalism. We’ve sent confirmation to
|
|
54
|
+
<div>
|
|
55
|
+
<strong>
|
|
56
|
+
test@example.com
|
|
57
|
+
</strong>
|
|
58
|
+
.
|
|
59
|
+
</div>
|
|
60
|
+
</p>
|
|
61
|
+
</div>
|
|
62
|
+
<a href="http://thing-hub"
|
|
63
|
+
target="_parent"
|
|
64
|
+
class=" ncf__confirmation--finish ncf__button ncf__button--submit"
|
|
65
|
+
data-trackable="register-finish-head-to-ft-edit-hub"
|
|
66
|
+
>
|
|
67
|
+
Explore FT Edit
|
|
68
|
+
</a>
|
|
69
|
+
</div>
|
|
70
|
+
`;
|
|
71
|
+
|
|
72
|
+
exports[`RegistrationConfirmation renders with a custom email 1`] = `
|
|
73
|
+
<div class="ncf">
|
|
74
|
+
<div class="ncf__center ncf__margin">
|
|
75
|
+
<div class="ncf__icon ncf__icon--tick ncf__icon--large">
|
|
76
|
+
</div>
|
|
77
|
+
<h1 class="ncf__header ncf__header--confirmation">
|
|
78
|
+
Success
|
|
79
|
+
</h1>
|
|
80
|
+
<p class="ncf_confirmation--message">
|
|
81
|
+
Thank you for registering for FT Edit.
|
|
82
|
+
</p>
|
|
83
|
+
<p class="ncf__confirmation--message margin-top-x4 ">
|
|
84
|
+
Enjoy 30 days of great journalism. We’ve sent confirmation to
|
|
85
|
+
<div>
|
|
86
|
+
<strong>
|
|
87
|
+
test@example.com
|
|
88
|
+
</strong>
|
|
89
|
+
.
|
|
90
|
+
</div>
|
|
91
|
+
</p>
|
|
92
|
+
</div>
|
|
93
|
+
<a href="/"
|
|
94
|
+
target="_parent"
|
|
95
|
+
class=" ncf__confirmation--finish ncf__button ncf__button--submit"
|
|
96
|
+
data-trackable="register-finish-head-to-ft-edit-hub"
|
|
97
|
+
>
|
|
98
|
+
Explore FT Edit
|
|
99
|
+
</a>
|
|
100
|
+
</div>
|
|
101
|
+
`;
|
|
102
|
+
|
|
103
|
+
exports[`RegistrationConfirmation renders with default props 1`] = `
|
|
104
|
+
<div class="ncf">
|
|
105
|
+
<div class="ncf__center ncf__margin">
|
|
106
|
+
<div class="ncf__icon ncf__icon--tick ncf__icon--large">
|
|
107
|
+
</div>
|
|
108
|
+
<h1 class="ncf__header ncf__header--confirmation">
|
|
109
|
+
Success
|
|
110
|
+
</h1>
|
|
111
|
+
<p class="ncf_confirmation--message">
|
|
112
|
+
Thank you for registering for FT Edit.
|
|
113
|
+
</p>
|
|
114
|
+
<p class="ncf__confirmation--message margin-top-x4 ">
|
|
115
|
+
Enjoy 30 days of great journalism. We’ve sent confirmation to
|
|
116
|
+
<div>
|
|
117
|
+
<strong>
|
|
118
|
+
bob@gmail.com
|
|
119
|
+
</strong>
|
|
120
|
+
.
|
|
121
|
+
</div>
|
|
122
|
+
</p>
|
|
123
|
+
</div>
|
|
124
|
+
<a href="/"
|
|
125
|
+
target="_parent"
|
|
126
|
+
class=" ncf__confirmation--finish ncf__button ncf__button--submit"
|
|
127
|
+
data-trackable="register-finish-head-to-ft-edit-hub"
|
|
128
|
+
>
|
|
129
|
+
Explore FT Edit
|
|
130
|
+
</a>
|
|
131
|
+
</div>
|
|
132
|
+
`;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
|
|
4
|
+
/***
|
|
5
|
+
* This component has been created for a trial feature for the FT Edit app to be used inside
|
|
6
|
+
* next-subscribe. This can be removed after the trial. The trial is beginning May 2024, please
|
|
7
|
+
* reach out to light-apps channel if we dont reach out first, as to when this can be deleted.
|
|
8
|
+
*/
|
|
9
|
+
const EMAIL_DEFAULT_TEXT = 'bob@gmail.com';
|
|
10
|
+
|
|
11
|
+
export function FTEditRegistrationConfirmation({
|
|
12
|
+
email = EMAIL_DEFAULT_TEXT,
|
|
13
|
+
articleUrl = '',
|
|
14
|
+
hubUrl = '/',
|
|
15
|
+
}) {
|
|
16
|
+
return (
|
|
17
|
+
<div className="ncf">
|
|
18
|
+
<div className="ncf__center ncf__margin">
|
|
19
|
+
<div className="ncf__icon ncf__icon--tick ncf__icon--large"></div>
|
|
20
|
+
<h1 className="ncf__header ncf__header--confirmation">Success</h1>
|
|
21
|
+
<p className="ncf_confirmation--message">
|
|
22
|
+
Thank you for registering for FT Edit.
|
|
23
|
+
</p>
|
|
24
|
+
<p className="ncf__confirmation--message margin-top-x4 ">
|
|
25
|
+
Enjoy 30 days of great journalism. We’ve sent confirmation to
|
|
26
|
+
<div>
|
|
27
|
+
<strong>{email}</strong>.
|
|
28
|
+
</div>
|
|
29
|
+
</p>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<a
|
|
33
|
+
href={hubUrl}
|
|
34
|
+
target="_parent"
|
|
35
|
+
className=" ncf__confirmation--finish ncf__button ncf__button--submit"
|
|
36
|
+
data-trackable="register-finish-head-to-ft-edit-hub"
|
|
37
|
+
>
|
|
38
|
+
Explore FT Edit
|
|
39
|
+
</a>
|
|
40
|
+
|
|
41
|
+
{articleUrl && (
|
|
42
|
+
<a
|
|
43
|
+
href={articleUrl}
|
|
44
|
+
target="_parent"
|
|
45
|
+
className=" ncf__confirmation--finish-article-read ncf__button ncf__button--secondary reduce-bottom-spacing"
|
|
46
|
+
data-trackable="register-finish-head-to-article"
|
|
47
|
+
>
|
|
48
|
+
Continue reading
|
|
49
|
+
</a>
|
|
50
|
+
)}
|
|
51
|
+
</div>
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
FTEditRegistrationConfirmation.propTypes = {
|
|
56
|
+
email: PropTypes.string,
|
|
57
|
+
articleUrl: PropTypes.string,
|
|
58
|
+
hubUrl: PropTypes.string,
|
|
59
|
+
};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { FTEditRegistrationConfirmation } from './index';
|
|
2
|
+
import { expectToRenderCorrectly } from '../test-jest/helpers/expect-to-render-correctly';
|
|
3
|
+
|
|
4
|
+
/***
|
|
5
|
+
* This component has been created for a trial feature for the FT Edit app to be used inside
|
|
6
|
+
* next-subscribe. This can be removed after the trial. The trial is beginning May 2024, please
|
|
7
|
+
* reach out to light-apps channel if we dont reach out first, as to when this can be deleted.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
expect.extend(expectToRenderCorrectly);
|
|
11
|
+
|
|
12
|
+
describe('RegistrationConfirmation', () => {
|
|
13
|
+
it('renders with default props', () => {
|
|
14
|
+
const props = {};
|
|
15
|
+
|
|
16
|
+
expect(FTEditRegistrationConfirmation).toRenderCorrectly(props);
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
it('renders with a custom email', () => {
|
|
20
|
+
const props = { email: 'test@example.com' };
|
|
21
|
+
|
|
22
|
+
expect(FTEditRegistrationConfirmation).toRenderCorrectly(props);
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
it('renders an explore hub button always', () => {
|
|
26
|
+
const props = { email: 'test@example.com', hubUrl: 'http://thing-hub' };
|
|
27
|
+
|
|
28
|
+
expect(FTEditRegistrationConfirmation).toRenderCorrectly(props);
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
it('renders a continue reading button when an articleUrl is provided', () => {
|
|
32
|
+
const props = {
|
|
33
|
+
email: 'test@example.com',
|
|
34
|
+
articleUrl:
|
|
35
|
+
'https://www.ft.com/content/9141eee7-825a-41d7-913d-49e8c12e76db',
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
expect(FTEditRegistrationConfirmation).toRenderCorrectly(props);
|
|
39
|
+
});
|
|
40
|
+
});
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FTEditRegistrationConfirmation } from './ft-edit-registration-confirmation';
|
|
3
|
+
|
|
4
|
+
/***
|
|
5
|
+
* This component has been created for a trial feature for the FT Edit app to be used inside
|
|
6
|
+
* next-subscribe. This can be removed after the trial. The trial is beginning May 2024, please
|
|
7
|
+
* reach out to light-apps channel if we dont reach out first, as to when this can be deleted.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
export default {
|
|
11
|
+
title: 'FT Edit Registration Confirmation',
|
|
12
|
+
component: FTEditRegistrationConfirmation,
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export const Basic = (args) => <FTEditRegistrationConfirmation {...args} />;
|
|
16
|
+
Basic.args = {
|
|
17
|
+
email: 'some@email.com',
|
|
18
|
+
hubUrl: 'https://ft-hub',
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export const WithArticleUrl = (args) => (
|
|
22
|
+
<FTEditRegistrationConfirmation {...args} />
|
|
23
|
+
);
|
|
24
|
+
Basic.args = {
|
|
25
|
+
email: 'some@email.com',
|
|
26
|
+
articleUrl: 'http://read-this-article.com',
|
|
27
|
+
};
|
package/components/index.js
CHANGED
|
@@ -29,6 +29,7 @@ export { ErrorPage } from './error-page';
|
|
|
29
29
|
export { Fieldset } from './fieldset';
|
|
30
30
|
export { FirstName } from './first-name';
|
|
31
31
|
export { Form } from './form';
|
|
32
|
+
export { FTEditRegistrationConfirmation } from './ft-edit-registration-confirmation';
|
|
32
33
|
export { Industry } from './industry';
|
|
33
34
|
export { JobTitle } from './job-title';
|
|
34
35
|
export { PersonalTitle } from './personal-title';
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.FTEditRegistrationConfirmation = FTEditRegistrationConfirmation;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
|
+
/***
|
|
11
|
+
* This component has been created for a trial feature for the FT Edit app to be used inside
|
|
12
|
+
* next-subscribe. This can be removed after the trial. The trial is beginning May 2024, please
|
|
13
|
+
* reach out to light-apps channel if we dont reach out first, as to when this can be deleted.
|
|
14
|
+
*/
|
|
15
|
+
var EMAIL_DEFAULT_TEXT = 'bob@gmail.com';
|
|
16
|
+
function FTEditRegistrationConfirmation(_ref) {
|
|
17
|
+
var _ref$email = _ref.email,
|
|
18
|
+
email = _ref$email === void 0 ? EMAIL_DEFAULT_TEXT : _ref$email,
|
|
19
|
+
_ref$articleUrl = _ref.articleUrl,
|
|
20
|
+
articleUrl = _ref$articleUrl === void 0 ? '' : _ref$articleUrl,
|
|
21
|
+
_ref$hubUrl = _ref.hubUrl,
|
|
22
|
+
hubUrl = _ref$hubUrl === void 0 ? '/' : _ref$hubUrl;
|
|
23
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
24
|
+
className: "ncf"
|
|
25
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
26
|
+
className: "ncf__center ncf__margin"
|
|
27
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
28
|
+
className: "ncf__icon ncf__icon--tick ncf__icon--large"
|
|
29
|
+
}), /*#__PURE__*/_react["default"].createElement("h1", {
|
|
30
|
+
className: "ncf__header ncf__header--confirmation"
|
|
31
|
+
}, "Success"), /*#__PURE__*/_react["default"].createElement("p", {
|
|
32
|
+
className: "ncf_confirmation--message"
|
|
33
|
+
}, "Thank you for registering for FT Edit."), /*#__PURE__*/_react["default"].createElement("p", {
|
|
34
|
+
className: "ncf__confirmation--message margin-top-x4 "
|
|
35
|
+
}, "Enjoy 30 days of great journalism. We\u2019ve sent confirmation to", /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("strong", null, email), "."))), /*#__PURE__*/_react["default"].createElement("a", {
|
|
36
|
+
href: hubUrl,
|
|
37
|
+
target: "_parent",
|
|
38
|
+
className: " ncf__confirmation--finish ncf__button ncf__button--submit",
|
|
39
|
+
"data-trackable": "register-finish-head-to-ft-edit-hub"
|
|
40
|
+
}, "Explore FT Edit"), articleUrl && /*#__PURE__*/_react["default"].createElement("a", {
|
|
41
|
+
href: articleUrl,
|
|
42
|
+
target: "_parent",
|
|
43
|
+
className: " ncf__confirmation--finish-article-read ncf__button ncf__button--secondary reduce-bottom-spacing",
|
|
44
|
+
"data-trackable": "register-finish-head-to-article"
|
|
45
|
+
}, "Continue reading"));
|
|
46
|
+
}
|
|
47
|
+
FTEditRegistrationConfirmation.propTypes = {
|
|
48
|
+
email: _propTypes["default"].string,
|
|
49
|
+
articleUrl: _propTypes["default"].string,
|
|
50
|
+
hubUrl: _propTypes["default"].string
|
|
51
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -183,6 +183,12 @@ Object.defineProperty(exports, "ErrorPage", {
|
|
|
183
183
|
return _errorPage.ErrorPage;
|
|
184
184
|
}
|
|
185
185
|
});
|
|
186
|
+
Object.defineProperty(exports, "FTEditRegistrationConfirmation", {
|
|
187
|
+
enumerable: true,
|
|
188
|
+
get: function get() {
|
|
189
|
+
return _ftEditRegistrationConfirmation.FTEditRegistrationConfirmation;
|
|
190
|
+
}
|
|
191
|
+
});
|
|
186
192
|
Object.defineProperty(exports, "Fieldset", {
|
|
187
193
|
enumerable: true,
|
|
188
194
|
get: function get() {
|
|
@@ -388,6 +394,7 @@ var _errorPage = require("./error-page");
|
|
|
388
394
|
var _fieldset = require("./fieldset");
|
|
389
395
|
var _firstName = require("./first-name");
|
|
390
396
|
var _form = require("./form");
|
|
397
|
+
var _ftEditRegistrationConfirmation = require("./ft-edit-registration-confirmation");
|
|
391
398
|
var _industry = require("./industry");
|
|
392
399
|
var _jobTitle = require("./job-title");
|
|
393
400
|
var _personalTitle = require("./personal-title");
|
package/main.scss
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@financial-times/n-conversion-forms",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "36.0.1",
|
|
4
4
|
"description": "Containing jsx components and styles for forms included on Accounts and Acqusition apps (next-signup, next-profile, next-retention, etc).",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -38,9 +38,9 @@
|
|
|
38
38
|
"@babel/preset-env": "^7.23.9",
|
|
39
39
|
"@babel/preset-react": "^7.23.3",
|
|
40
40
|
"@dotcom-tool-kit/babel": "3.1.6",
|
|
41
|
-
"@dotcom-tool-kit/component": "4.1.
|
|
42
|
-
"@dotcom-tool-kit/eslint": "3.2.
|
|
43
|
-
"@dotcom-tool-kit/frontend-app": "3.2.
|
|
41
|
+
"@dotcom-tool-kit/component": "4.1.3",
|
|
42
|
+
"@dotcom-tool-kit/eslint": "3.2.1",
|
|
43
|
+
"@dotcom-tool-kit/frontend-app": "3.2.4",
|
|
44
44
|
"@dotcom-tool-kit/jest": "3.4.0",
|
|
45
45
|
"@dotcom-tool-kit/lint-staged-npm": "3.2.0",
|
|
46
46
|
"@dotcom-tool-kit/logger": "3.4.0",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"@storybook/react-webpack5": "^7.6.13",
|
|
55
55
|
"@sucrase/jest-plugin": "^3.0.0",
|
|
56
56
|
"check-engines": "^1.6.0",
|
|
57
|
-
"dotcom-tool-kit": "3.
|
|
57
|
+
"dotcom-tool-kit": "3.5.0",
|
|
58
58
|
"enzyme": "^3.11.0",
|
|
59
59
|
"enzyme-adapter-react-16": "^1.15.7",
|
|
60
60
|
"eslint-config-prettier": "^9.1.0",
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"webpack-cli": "^5.1.4"
|
|
82
82
|
},
|
|
83
83
|
"engines": {
|
|
84
|
-
"node": "
|
|
84
|
+
"node": "18.x",
|
|
85
85
|
"npm": "7.x || 8.x || 9.x"
|
|
86
86
|
},
|
|
87
87
|
"lint-staged": {
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
@import '@financial-times/o-social-follow/main';
|
|
2
|
+
@import '@financial-times/o-grid/main';
|
|
3
|
+
|
|
4
|
+
/***
|
|
5
|
+
* This component has been created for a trial feature for the FT Edit app to be used inside
|
|
6
|
+
* next-subscribe. This can be removed after the trial. The trial is beginning May 2024, please
|
|
7
|
+
* reach out to light-apps channel if we dont reach out first, as to when this can be deleted.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
@include oSocialFollow(
|
|
11
|
+
$opts: (
|
|
12
|
+
'icons': (
|
|
13
|
+
'twitter',
|
|
14
|
+
'facebook',
|
|
15
|
+
'linkedin',
|
|
16
|
+
'instagram',
|
|
17
|
+
),
|
|
18
|
+
)
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
@mixin ncfConfirmation() {
|
|
22
|
+
&__confirmation {
|
|
23
|
+
&--message {
|
|
24
|
+
max-width: 304px;
|
|
25
|
+
margin: auto;
|
|
26
|
+
margin-bottom: 12px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&--desktop {
|
|
30
|
+
@include oGridRespondTo($until: M) {
|
|
31
|
+
display: none;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&--mobile {
|
|
36
|
+
@include oGridRespondTo(M) {
|
|
37
|
+
display: none;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&--links {
|
|
42
|
+
display: grid;
|
|
43
|
+
grid-template-rows: 1fr 1fr;
|
|
44
|
+
gap: oSpacingByName('s4');
|
|
45
|
+
margin-top: oSpacingByName('s6');
|
|
46
|
+
|
|
47
|
+
@include oGridRespondTo(M) {
|
|
48
|
+
grid-template-rows: unset;
|
|
49
|
+
grid-template-columns: 1fr 1fr;
|
|
50
|
+
gap: oSpacingByName('s8');
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&--socials {
|
|
55
|
+
@include oGridRespondTo(M) {
|
|
56
|
+
padding: oSpacingByName('s6') oSpacingByName('s4');
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&--badges {
|
|
61
|
+
@include oGridRespondTo($until: M) {
|
|
62
|
+
display: grid;
|
|
63
|
+
grid-template-columns: 1fr 1fr;
|
|
64
|
+
gap: oSpacingByName('s6');
|
|
65
|
+
margin: auto;
|
|
66
|
+
max-width: 256px;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&--app-badges {
|
|
71
|
+
@include oGridRespondTo($until: M) {
|
|
72
|
+
display: flex;
|
|
73
|
+
flex-direction: column;
|
|
74
|
+
gap: 16px;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&--alerts {
|
|
79
|
+
display: flex;
|
|
80
|
+
flex-direction: column;
|
|
81
|
+
padding: 24px 20px;
|
|
82
|
+
background-color: oColorsByName('white-60');
|
|
83
|
+
|
|
84
|
+
a {
|
|
85
|
+
color: oColorsByName('black-90');
|
|
86
|
+
border-color: currentColor;
|
|
87
|
+
position: sticky;
|
|
88
|
+
top: 100vh;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&--finish {
|
|
93
|
+
display: block;
|
|
94
|
+
margin: 48px auto 0;
|
|
95
|
+
width: 100%;
|
|
96
|
+
|
|
97
|
+
@include oGridRespondTo(M) {
|
|
98
|
+
max-width: 260px;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
&--finish-article-read {
|
|
103
|
+
display: block;
|
|
104
|
+
margin: 12px auto 0px;
|
|
105
|
+
width: 100%;
|
|
106
|
+
|
|
107
|
+
@include oGridRespondTo(M) {
|
|
108
|
+
max-width: 260px;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.ncf-icon::before {
|
|
115
|
+
content: '';
|
|
116
|
+
display: inline-block;
|
|
117
|
+
vertical-align: middle;
|
|
118
|
+
background-size: contain;
|
|
119
|
+
background-repeat: no-repeat;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.ncf-icon--myft::before {
|
|
123
|
+
margin-left: 0.5rem;
|
|
124
|
+
height: 1rem;
|
|
125
|
+
width: 3rem;
|
|
126
|
+
background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo:brand-myft?format=svg&source=next-subscribe&tint=%2333302E%2C%2333302E&width=28&height=16');
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.ncf-icon--android::before {
|
|
130
|
+
height: 40px;
|
|
131
|
+
width: 136px;
|
|
132
|
+
background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/app-badge-v1%3Aandroid?source=next-subscribe');
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.ncf-icon--apple::before {
|
|
136
|
+
height: 40px;
|
|
137
|
+
width: 136px;
|
|
138
|
+
background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/app-badge-v1%3Aapple?format=svg&source=next-subscribe');
|
|
139
|
+
}
|