@financial-times/n-conversion-forms 23.2.0 → 23.2.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.
Files changed (5) hide show
  1. package/components/__snapshots__/registration-confirmation.spec.js.snap +142 -90
  2. package/components/registration-confirmation.jsx +56 -26
  3. package/dist/registration-confirmation.js +35 -8
  4. package/package.json +1 -1
  5. package/styles/confirmation.scss +46 -12
package/components/__snapshots__/registration-confirmation.spec.js.snap CHANGED
@@ -8,7 +8,7 @@ exports[`RegistrationConfirmation renders with a custom email 1`] = `
8
8
  <h1 class="ncf__header ncf__header--confirmation">
9
9
  Success
10
10
  </h1>
11
- <p class="ncf__paragraph ncf__confirmation--message">
11
+ <p class="ncf__confirmation--message">
12
12
  We’ve sent confirmation to test@example.com.
13
13
  </p>
14
14
  </div>
@@ -20,61 +20,87 @@ exports[`RegistrationConfirmation renders with a custom email 1`] = `
20
20
  Breaking news alerts, direct to your lock screen
21
21
  </b>
22
22
  <p class="ncf__confirmation--mobile">
23
- Find us in the app and google play stores or follow us on our socials
23
+ Download our apps or follow us on our socials
24
24
  </p>
25
25
  <p class="ncf__confirmation--desktop">
26
26
  Find us in the app and google play stores or follow us on our socials
27
27
  </p>
28
- <section class="o-social-follow"
29
- aria-label="Follow on social media"
30
- >
31
- <a href="https://www.instagram.com/financialtimes"
32
- class="o-social-follow-icon o-social-follow-icon--instagram"
33
- target="_blank"
34
- rel="noopener noreferrer"
35
- data-trackable="register-social-instagram"
36
- >
37
- <span class="o-social-follow-icon__label">
38
- on instagram
39
- </span>
40
- </a>
41
- <a href="https://www.linkedin.com/company/financial-times"
42
- class="o-social-follow-icon o-social-follow-icon--linkedin"
43
- target="_blank"
44
- rel="noopener noreferrer"
45
- data-trackable="register-social-linkedin"
46
- >
47
- <span class="o-social-follow-icon__label">
48
- on linkedin
49
- </span>
50
- </a>
51
- <a href="https://twitter.com/FT"
52
- class="o-social-follow-icon o-social-follow-icon--twitter"
53
- target="_blank"
54
- rel="noopener noreferrer"
55
- data-trackable="register-social-twitter"
28
+ <div class="ncf__confirmation--badges">
29
+ <div class="o-social-follow"
30
+ aria-label="Follow on social media"
56
31
  >
57
- <span class="o-social-follow-icon__label">
58
- on twitter
59
- </span>
60
- </a>
61
- <a href="https://www.facebook.com/financialtimes"
62
- class="o-social-follow-icon o-social-follow-icon--facebook"
63
- target="_blank"
64
- rel="noopener noreferrer"
65
- data-trackable="register-social-facebook"
32
+ <a href="https://www.instagram.com/financialtimes"
33
+ class="o-social-follow-icon o-social-follow-icon--instagram"
34
+ target="_blank"
35
+ rel="noopener noreferrer"
36
+ data-trackable="register-social-instagram"
37
+ >
38
+ <span class="o-social-follow-icon__label">
39
+ on instagram
40
+ </span>
41
+ </a>
42
+ <a href="https://www.linkedin.com/company/financial-times"
43
+ class="o-social-follow-icon o-social-follow-icon--linkedin"
44
+ target="_blank"
45
+ rel="noopener noreferrer"
46
+ data-trackable="register-social-linkedin"
47
+ >
48
+ <span class="o-social-follow-icon__label">
49
+ on linkedin
50
+ </span>
51
+ </a>
52
+ <a href="https://twitter.com/FT"
53
+ class="o-social-follow-icon o-social-follow-icon--twitter"
54
+ target="_blank"
55
+ rel="noopener noreferrer"
56
+ data-trackable="register-social-twitter"
57
+ >
58
+ <span class="o-social-follow-icon__label">
59
+ on twitter
60
+ </span>
61
+ </a>
62
+ <a href="https://www.facebook.com/financialtimes"
63
+ class="o-social-follow-icon o-social-follow-icon--facebook"
64
+ target="_blank"
65
+ rel="noopener noreferrer"
66
+ data-trackable="register-social-facebook"
67
+ >
68
+ <span class="o-social-follow-icon__label">
69
+ on facebook
70
+ </span>
71
+ </a>
72
+ </div>
73
+ <div class="ncf__confirmation--mobile ncf__confirmation--app-badges"
74
+ aria-label="Download the app"
66
75
  >
67
- <span class="o-social-follow-icon__label">
68
- on facebook
69
- </span>
70
- </a>
71
- </section>
76
+ <a href="https://apps.apple.com/app/apple-store/id1200842933"
77
+ class="ncf-icon ncf-icon--apple"
78
+ target="_blank"
79
+ rel="noopener noreferrer"
80
+ data-trackable="register-app-apple"
81
+ >
82
+ <span class="o-social-follow-icon__label">
83
+ on apple
84
+ </span>
85
+ </a>
86
+ <a href="https://play.google.com/store/apps/details?id=com.ft.news"
87
+ class="ncf-icon ncf-icon--android"
88
+ target="_blank"
89
+ rel="noopener noreferrer"
90
+ data-trackable="register-app-android"
91
+ >
92
+ <span class="o-social-follow-icon__label">
93
+ on android
94
+ </span>
95
+ </a>
96
+ </div>
97
+ </div>
72
98
  </div>
73
99
  <div class="ncf__confirmation--alerts">
74
100
  <b>
75
101
  Set up email alerts in
76
102
  <span aria-label="myFT"
77
- class="icon-myft"
103
+ class="ncf-icon ncf-icon--myft"
78
104
  >
79
105
  </span>
80
106
  </b>
@@ -107,7 +133,7 @@ exports[`RegistrationConfirmation renders with default props 1`] = `
107
133
  <h1 class="ncf__header ncf__header--confirmation">
108
134
  Success
109
135
  </h1>
110
- <p class="ncf__paragraph ncf__confirmation--message">
136
+ <p class="ncf__confirmation--message">
111
137
  We’ve sent confirmation to your email.
112
138
  </p>
113
139
  </div>
@@ -119,61 +145,87 @@ exports[`RegistrationConfirmation renders with default props 1`] = `
119
145
  Breaking news alerts, direct to your lock screen
120
146
  </b>
121
147
  <p class="ncf__confirmation--mobile">
122
- Find us in the app and google play stores or follow us on our socials
148
+ Download our apps or follow us on our socials
123
149
  </p>
124
150
  <p class="ncf__confirmation--desktop">
125
151
  Find us in the app and google play stores or follow us on our socials
126
152
  </p>
127
- <section class="o-social-follow"
128
- aria-label="Follow on social media"
129
- >
130
- <a href="https://www.instagram.com/financialtimes"
131
- class="o-social-follow-icon o-social-follow-icon--instagram"
132
- target="_blank"
133
- rel="noopener noreferrer"
134
- data-trackable="register-social-instagram"
135
- >
136
- <span class="o-social-follow-icon__label">
137
- on instagram
138
- </span>
139
- </a>
140
- <a href="https://www.linkedin.com/company/financial-times"
141
- class="o-social-follow-icon o-social-follow-icon--linkedin"
142
- target="_blank"
143
- rel="noopener noreferrer"
144
- data-trackable="register-social-linkedin"
145
- >
146
- <span class="o-social-follow-icon__label">
147
- on linkedin
148
- </span>
149
- </a>
150
- <a href="https://twitter.com/FT"
151
- class="o-social-follow-icon o-social-follow-icon--twitter"
152
- target="_blank"
153
- rel="noopener noreferrer"
154
- data-trackable="register-social-twitter"
153
+ <div class="ncf__confirmation--badges">
154
+ <div class="o-social-follow"
155
+ aria-label="Follow on social media"
155
156
  >
156
- <span class="o-social-follow-icon__label">
157
- on twitter
158
- </span>
159
- </a>
160
- <a href="https://www.facebook.com/financialtimes"
161
- class="o-social-follow-icon o-social-follow-icon--facebook"
162
- target="_blank"
163
- rel="noopener noreferrer"
164
- data-trackable="register-social-facebook"
157
+ <a href="https://www.instagram.com/financialtimes"
158
+ class="o-social-follow-icon o-social-follow-icon--instagram"
159
+ target="_blank"
160
+ rel="noopener noreferrer"
161
+ data-trackable="register-social-instagram"
162
+ >
163
+ <span class="o-social-follow-icon__label">
164
+ on instagram
165
+ </span>
166
+ </a>
167
+ <a href="https://www.linkedin.com/company/financial-times"
168
+ class="o-social-follow-icon o-social-follow-icon--linkedin"
169
+ target="_blank"
170
+ rel="noopener noreferrer"
171
+ data-trackable="register-social-linkedin"
172
+ >
173
+ <span class="o-social-follow-icon__label">
174
+ on linkedin
175
+ </span>
176
+ </a>
177
+ <a href="https://twitter.com/FT"
178
+ class="o-social-follow-icon o-social-follow-icon--twitter"
179
+ target="_blank"
180
+ rel="noopener noreferrer"
181
+ data-trackable="register-social-twitter"
182
+ >
183
+ <span class="o-social-follow-icon__label">
184
+ on twitter
185
+ </span>
186
+ </a>
187
+ <a href="https://www.facebook.com/financialtimes"
188
+ class="o-social-follow-icon o-social-follow-icon--facebook"
189
+ target="_blank"
190
+ rel="noopener noreferrer"
191
+ data-trackable="register-social-facebook"
192
+ >
193
+ <span class="o-social-follow-icon__label">
194
+ on facebook
195
+ </span>
196
+ </a>
197
+ </div>
198
+ <div class="ncf__confirmation--mobile ncf__confirmation--app-badges"
199
+ aria-label="Download the app"
165
200
  >
166
- <span class="o-social-follow-icon__label">
167
- on facebook
168
- </span>
169
- </a>
170
- </section>
201
+ <a href="https://apps.apple.com/app/apple-store/id1200842933"
202
+ class="ncf-icon ncf-icon--apple"
203
+ target="_blank"
204
+ rel="noopener noreferrer"
205
+ data-trackable="register-app-apple"
206
+ >
207
+ <span class="o-social-follow-icon__label">
208
+ on apple
209
+ </span>
210
+ </a>
211
+ <a href="https://play.google.com/store/apps/details?id=com.ft.news"
212
+ class="ncf-icon ncf-icon--android"
213
+ target="_blank"
214
+ rel="noopener noreferrer"
215
+ data-trackable="register-app-android"
216
+ >
217
+ <span class="o-social-follow-icon__label">
218
+ on android
219
+ </span>
220
+ </a>
221
+ </div>
222
+ </div>
171
223
  </div>
172
224
  <div class="ncf__confirmation--alerts">
173
225
  <b>
174
226
  Set up email alerts in
175
227
  <span aria-label="myFT"
176
- class="icon-myft"
228
+ class="ncf-icon ncf-icon--myft"
177
229
  >
178
230
  </span>
179
231
  </b>
package/components/registration-confirmation.jsx CHANGED
@@ -22,13 +22,27 @@ const SOCIALS = [
22
22
  },
23
23
  ];
24
24
 
25
- export function RegistrationConfirmation ({ email = EMAIL_DEFAULT_TEXT }) {
25
+ const STORES = [
26
+ {
27
+ name: 'apple',
28
+ link: 'https://apps.apple.com/app/apple-store/id1200842933',
29
+ },
30
+ {
31
+ name: 'android',
32
+ link: 'https://play.google.com/store/apps/details?id=com.ft.news',
33
+ },
34
+ ];
35
+
36
+ export function RegistrationConfirmation ({
37
+ email = EMAIL_DEFAULT_TEXT,
38
+ returnUrl = '/',
39
+ }) {
26
40
  return (
27
41
  <div className="ncf">
28
42
  <div className="ncf__center ncf__margin">
29
43
  <div className="ncf__icon ncf__icon--tick ncf__icon--large"></div>
30
44
  <h1 className="ncf__header ncf__header--confirmation">Success</h1>
31
- <p className="ncf__paragraph ncf__confirmation--message">
45
+ <p className="ncf__confirmation--message">
32
46
  We’ve sent confirmation to {email}.
33
47
  </p>
34
48
  </div>
@@ -39,37 +53,53 @@ export function RegistrationConfirmation ({ email = EMAIL_DEFAULT_TEXT }) {
39
53
  <div className="ncf__confirmation--socials">
40
54
  <b>Breaking news alerts, direct to your lock screen</b>
41
55
  <p className="ncf__confirmation--mobile">
42
- {/* TODO: Once the store links are done, switch this sentence */}
43
- {/* Download our apps or follow us on our socials */}
44
- Find us in the app and google play stores or follow us on our
45
- socials
56
+ Download our apps or follow us on our socials
46
57
  </p>
47
58
  <p className="ncf__confirmation--desktop">
48
59
  Find us in the app and google play stores or follow us on our
49
60
  socials
50
61
  </p>
51
- <section
52
- className="o-social-follow"
53
- aria-label="Follow on social media"
54
- >
55
- {SOCIALS.map(({ name, link }) => (
56
- <a
57
- key={name}
58
- href={link}
59
- className={`o-social-follow-icon o-social-follow-icon--${name}`}
60
- target="_blank"
61
- rel="noopener noreferrer"
62
- data-trackable={`register-social-${name}`}
63
- >
64
- <span className="o-social-follow-icon__label">on {name}</span>
65
- </a>
66
- ))}
67
- </section>
62
+ <div className="ncf__confirmation--badges">
63
+ <div
64
+ className="o-social-follow"
65
+ aria-label="Follow on social media"
66
+ >
67
+ {SOCIALS.map(({ name, link }) => (
68
+ <a
69
+ key={name}
70
+ href={link}
71
+ className={`o-social-follow-icon o-social-follow-icon--${name}`}
72
+ target="_blank"
73
+ rel="noopener noreferrer"
74
+ data-trackable={`register-social-${name}`}
75
+ >
76
+ <span className="o-social-follow-icon__label">on {name}</span>
77
+ </a>
78
+ ))}
79
+ </div>
80
+ <div
81
+ className="ncf__confirmation--mobile ncf__confirmation--app-badges"
82
+ aria-label="Download the app"
83
+ >
84
+ {STORES.map(({ name, link }) => (
85
+ <a
86
+ key={name}
87
+ href={link}
88
+ className={`ncf-icon ncf-icon--${name}`}
89
+ target="_blank"
90
+ rel="noopener noreferrer"
91
+ data-trackable={`register-app-${name}`}
92
+ >
93
+ <span className="o-social-follow-icon__label">on {name}</span>
94
+ </a>
95
+ ))}
96
+ </div>
97
+ </div>
68
98
  </div>
69
99
  <div className="ncf__confirmation--alerts">
70
100
  <b>
71
101
  Set up email alerts in
72
- <span aria-label="myFT" className="icon-myft" />
102
+ <span aria-label="myFT" className="ncf-icon ncf-icon--myft" />
73
103
  </b>
74
104
 
75
105
  <p>
@@ -77,7 +107,7 @@ export function RegistrationConfirmation ({ email = EMAIL_DEFAULT_TEXT }) {
77
107
  for the most important topics and additional newsletters
78
108
  </p>
79
109
  <a
80
- href={'/myft'}
110
+ href="/myft"
81
111
  className="margin-top-x4 ncf__button ncf__button--secondary"
82
112
  data-trackable="register-personalise-my-alerts"
83
113
  >
@@ -87,7 +117,7 @@ export function RegistrationConfirmation ({ email = EMAIL_DEFAULT_TEXT }) {
87
117
  </div>
88
118
 
89
119
  <a
90
- href={'/'}
120
+ href={returnUrl}
91
121
  target="_parent"
92
122
  className="ncf__confirmation--finish ncf__button ncf__button--submit"
93
123
  data-trackable="register-finish"
package/dist/registration-confirmation.js CHANGED
@@ -25,10 +25,19 @@ var SOCIALS = [{
25
25
  name: 'facebook',
26
26
  link: 'https://www.facebook.com/financialtimes'
27
27
  }];
28
+ var STORES = [{
29
+ name: 'apple',
30
+ link: 'https://apps.apple.com/app/apple-store/id1200842933'
31
+ }, {
32
+ name: 'android',
33
+ link: 'https://play.google.com/store/apps/details?id=com.ft.news'
34
+ }];
28
35
 
29
36
  function RegistrationConfirmation(_ref) {
30
37
  var _ref$email = _ref.email,
31
- email = _ref$email === void 0 ? EMAIL_DEFAULT_TEXT : _ref$email;
38
+ email = _ref$email === void 0 ? EMAIL_DEFAULT_TEXT : _ref$email,
39
+ _ref$returnUrl = _ref.returnUrl,
40
+ returnUrl = _ref$returnUrl === void 0 ? '/' : _ref$returnUrl;
32
41
  return /*#__PURE__*/_react["default"].createElement("div", {
33
42
  className: "ncf"
34
43
  }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -38,7 +47,7 @@ function RegistrationConfirmation(_ref) {
38
47
  }), /*#__PURE__*/_react["default"].createElement("h1", {
39
48
  className: "ncf__header ncf__header--confirmation"
40
49
  }, "Success"), /*#__PURE__*/_react["default"].createElement("p", {
41
- className: "ncf__paragraph ncf__confirmation--message"
50
+ className: "ncf__confirmation--message"
42
51
  }, "We\u2019ve sent confirmation to ", email, ".")), /*#__PURE__*/_react["default"].createElement("div", {
43
52
  className: "ncf__divider-horizontal"
44
53
  }), /*#__PURE__*/_react["default"].createElement("div", {
@@ -47,9 +56,11 @@ function RegistrationConfirmation(_ref) {
47
56
  className: "ncf__confirmation--socials"
48
57
  }, /*#__PURE__*/_react["default"].createElement("b", null, "Breaking news alerts, direct to your lock screen"), /*#__PURE__*/_react["default"].createElement("p", {
49
58
  className: "ncf__confirmation--mobile"
50
- }, "Find us in the app and google play stores or follow us on our socials"), /*#__PURE__*/_react["default"].createElement("p", {
59
+ }, "Download our apps or follow us on our socials"), /*#__PURE__*/_react["default"].createElement("p", {
51
60
  className: "ncf__confirmation--desktop"
52
- }, "Find us in the app and google play stores or follow us on our socials"), /*#__PURE__*/_react["default"].createElement("section", {
61
+ }, "Find us in the app and google play stores or follow us on our socials"), /*#__PURE__*/_react["default"].createElement("div", {
62
+ className: "ncf__confirmation--badges"
63
+ }, /*#__PURE__*/_react["default"].createElement("div", {
53
64
  className: "o-social-follow",
54
65
  "aria-label": "Follow on social media"
55
66
  }, SOCIALS.map(function (_ref2) {
@@ -65,17 +76,33 @@ function RegistrationConfirmation(_ref) {
65
76
  }, /*#__PURE__*/_react["default"].createElement("span", {
66
77
  className: "o-social-follow-icon__label"
67
78
  }, "on ", name));
68
- }))), /*#__PURE__*/_react["default"].createElement("div", {
79
+ })), /*#__PURE__*/_react["default"].createElement("div", {
80
+ className: "ncf__confirmation--mobile ncf__confirmation--app-badges",
81
+ "aria-label": "Download the app"
82
+ }, STORES.map(function (_ref3) {
83
+ var name = _ref3.name,
84
+ link = _ref3.link;
85
+ return /*#__PURE__*/_react["default"].createElement("a", {
86
+ key: name,
87
+ href: link,
88
+ className: "ncf-icon ncf-icon--".concat(name),
89
+ target: "_blank",
90
+ rel: "noopener noreferrer",
91
+ "data-trackable": "register-app-".concat(name)
92
+ }, /*#__PURE__*/_react["default"].createElement("span", {
93
+ className: "o-social-follow-icon__label"
94
+ }, "on ", name));
95
+ })))), /*#__PURE__*/_react["default"].createElement("div", {
69
96
  className: "ncf__confirmation--alerts"
70
97
  }, /*#__PURE__*/_react["default"].createElement("b", null, "Set up email alerts in", /*#__PURE__*/_react["default"].createElement("span", {
71
98
  "aria-label": "myFT",
72
- className: "icon-myft"
99
+ className: "ncf-icon ncf-icon--myft"
73
100
  })), /*#__PURE__*/_react["default"].createElement("p", null, "Choose the content you want to follow by personalising your alerts for the most important topics and additional newsletters"), /*#__PURE__*/_react["default"].createElement("a", {
74
- href: '/myft',
101
+ href: "/myft",
75
102
  className: "margin-top-x4 ncf__button ncf__button--secondary",
76
103
  "data-trackable": "register-personalise-my-alerts"
77
104
  }, "Personalise my alerts"))), /*#__PURE__*/_react["default"].createElement("a", {
78
- href: '/',
105
+ href: returnUrl,
79
106
  target: "_parent",
80
107
  className: "ncf__confirmation--finish ncf__button ncf__button--submit",
81
108
  "data-trackable": "register-finish"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/n-conversion-forms",
3
- "version": "23.2.0",
3
+ "version": "23.2.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": {
package/styles/confirmation.scss CHANGED
@@ -20,13 +20,13 @@
20
20
  }
21
21
 
22
22
  &--desktop {
23
- @include oGridRespondTo($until: L) {
23
+ @include oGridRespondTo($until: M) {
24
24
  display: none;
25
25
  }
26
26
  }
27
27
 
28
28
  &--mobile {
29
- @include oGridRespondTo(L) {
29
+ @include oGridRespondTo(M) {
30
30
  display: none;
31
31
  }
32
32
  }
@@ -34,9 +34,10 @@
34
34
  &--links {
35
35
  display: grid;
36
36
  grid-template-rows: 1fr 1fr;
37
- gap: oSpacingByName('s6');
37
+ gap: oSpacingByName('s4');
38
+ margin-top: oSpacingByName('s6');
38
39
 
39
- @media (min-width: 980px) {
40
+ @include oGridRespondTo(M) {
40
41
  grid-template-rows: unset;
41
42
  grid-template-columns: 1fr 1fr;
42
43
  gap: oSpacingByName('s8');
@@ -44,15 +45,33 @@
44
45
  }
45
46
 
46
47
  &--socials {
47
- @media (min-width: 980px) {
48
+ @include oGridRespondTo(M) {
48
49
  padding: oSpacingByName('s6') oSpacingByName('s4');
49
50
  }
50
51
  }
51
52
 
53
+ &--badges {
54
+ @include oGridRespondTo($until: M) {
55
+ display: grid;
56
+ grid-template-columns: 1fr 1fr;
57
+ gap: oSpacingByName('s6');
58
+ margin: auto;
59
+ max-width: 256px;
60
+ }
61
+ }
62
+
63
+ &--app-badges {
64
+ @include oGridRespondTo($until: M) {
65
+ display: flex;
66
+ flex-direction: column;
67
+ gap: 16px;
68
+ }
69
+ }
70
+
52
71
  &--alerts {
53
72
  display: flex;
54
73
  flex-direction: column;
55
- padding: oSpacingByName('s6') oSpacingByName('s4');
74
+ padding: 24px 20px;
56
75
  background-color: oColorsByName('white-60');
57
76
 
58
77
  a {
@@ -65,24 +84,39 @@
65
84
 
66
85
  &--finish {
67
86
  display: block;
68
- margin: 4rem auto 0;
87
+ margin: 48px auto 0;
69
88
  width: 100%;
70
89
 
71
- @media (min-width: 740px) {
90
+ @include oGridRespondTo(M) {
72
91
  max-width: 260px;
73
92
  }
74
93
  }
75
94
  }
76
95
  }
77
96
 
78
- .icon-myft::before {
97
+ .ncf-icon::before {
79
98
  content: '';
80
99
  display: inline-block;
81
- margin-left: 0.5rem;
82
- height: 1rem;
83
- width: 3rem;
84
100
  vertical-align: middle;
85
101
  background-size: contain;
86
102
  background-repeat: no-repeat;
103
+ }
104
+
105
+ .ncf-icon--myft::before {
106
+ margin-left: 0.5rem;
107
+ height: 1rem;
108
+ width: 3rem;
87
109
  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');
88
110
  }
111
+
112
+ .ncf-icon--android::before {
113
+ height: 40px;
114
+ width: 136px;
115
+ background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/app-badge-v1%3Aandroid?source=next-subscribe');
116
+ }
117
+
118
+ .ncf-icon--apple::before {
119
+ height: 40px;
120
+ width: 136px;
121
+ background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/app-badge-v1%3Aapple?format=svg&source=next-subscribe');
122
+ }