@financial-times/n-myft-ui 24.0.0 → 25.0.0-beta.2

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 (27) hide show
  1. package/.circleci/config.yml +18 -18
  2. package/README.md +51 -0
  3. package/build-state/npm-shrinkwrap.json +41988 -10988
  4. package/components/collections/collections.jsx +68 -0
  5. package/components/collections/collections.test.js +83 -0
  6. package/components/concept-list/concept-list.jsx +55 -0
  7. package/components/concept-list/concept-list.test.js +116 -0
  8. package/components/follow-button/__tests__/follow-button.test.js +3 -3
  9. package/components/follow-button/follow-button.jsx +3 -3
  10. package/components/index.js +15 -0
  11. package/components/pin-button/pin-button.jsx +40 -0
  12. package/components/pin-button/pin-button.test.js +57 -0
  13. package/components/save-for-later/save-for-later.jsx +103 -0
  14. package/components/save-for-later/save-for-later.test.js +59 -0
  15. package/demos/app.js +18 -27
  16. package/demos/templates/demo-layout.html +1 -1
  17. package/demos/templates/demo.html +436 -413
  18. package/demos/templates/demo.jsx +93 -1
  19. package/dist/bundles/bundle.js +3133 -0
  20. package/package.json +19 -9
  21. package/webpack.config.js +34 -0
  22. package/components/collections/collections.html +0 -77
  23. package/components/concept-list/concept-list.html +0 -28
  24. package/components/pin-button/pin-button.html +0 -20
  25. package/components/save-for-later/save-for-later.html +0 -67
  26. package/demos/fixtures/follow-button-plus-digest.json +0 -6
  27. package/demos/templates/digest-on-follow.html +0 -12
package/demos/templates/demo.html CHANGED
@@ -1,459 +1,482 @@
1
- <div class="o-grid-container o-grid-container--snappy demo-container">
2
- <h1>{{title}}</h1>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
3
 
4
- <section
5
- id="follow-button"
6
- class="demo-section">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>{{title}}</title>
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <link rel="stylesheet" href="/public/main.css">
9
+ </head>
10
+
11
+ <body>
12
+
13
+ <div class="o-grid-container o-grid-container--snappy">
7
14
  <div class="o-grid-row">
8
- <div data-o-grid-colspan="12">
9
- <h2
10
- class="demo-section__title">
11
- Follow button
12
- </h2>
13
-
14
- {{#followButton}}
15
- {{{renderReactComponent localPath="components/follow-button/follow-button" flags=@root.flags}}}
16
- {{/followButton}}
17
-
18
- <h2
19
- class="demo-section__title">
20
- x-dash follow button
21
- </h2>
22
-
23
- {{#followButton}}
24
- {{{renderReactComponent localPath="components/follow-button/follow-button" buttonText=name flags=@root.flags}}}
25
- {{/followButton}}
26
-
27
- {{#saveButton}}
28
- <h2 class="demo-section__title">
29
- Save button
30
- </h2>
31
- {{> n-myft-ui/components/save-for-later/save-for-later }}
32
- {{/saveButton}}
15
+ <ul>
16
+ <li><a href="/">Basic</a></li>
17
+ <li><a href="/demo-jsx">JSX demo</a></li>
18
+ </ul>
19
+ </div>
20
+ </div>
21
+ <div class="o-grid-container o-grid-container--snappy demo-container">
22
+ <h1>{{title}}</h1>
33
23
 
34
- {{#saveButton}}
35
- <h2 class="demo-section__title">
36
- Unsave button
24
+ <section
25
+ id="follow-button"
26
+ class="demo-section">
27
+ <div class="o-grid-row">
28
+ <div data-o-grid-colspan="12">
29
+ <h2
30
+ class="demo-section__title">
31
+ Follow button
37
32
  </h2>
38
- {{> n-myft-ui/components/save-for-later/save-for-later isSaved=true }}
39
- {{/saveButton}}
40
33
 
41
- {{#saveButton}}
42
- <h2 class="demo-section__title">
43
- Save button with icon
44
- </h2>
45
- {{> n-myft-ui/components/save-for-later/save-for-later saveButtonWithIcon=true }}
46
- {{/saveButton}}
34
+ {{#followButton}}
35
+ {{{renderReactComponent localPath="components/follow-button/follow-button" flags=@root.flags}}}
36
+ {{/followButton}}
47
37
 
48
- {{#saveButton}}
49
- <h2 class="demo-section__title">
50
- Unsave button with icon
38
+ <h2
39
+ class="demo-section__title">
40
+ x-dash follow button
51
41
  </h2>
52
- {{> n-myft-ui/components/save-for-later/save-for-later isSaved=true saveButtonWithIcon=true }}
53
- {{/saveButton}}
54
-
55
- <h2 class="demo-section__title">
56
- Pin button
57
- </h2>
58
- {{#each pinButton}}
59
- {{> n-myft-ui/components/pin-button/pin-button }}
60
- {{/each}}
61
42
 
62
- {{#instantAlert}}
43
+ {{#followButton}}
44
+ {{{renderReactComponent localPath="components/follow-button/follow-button" buttonText=name flags=@root.flags}}}
45
+ {{/followButton}}
46
+
47
+ {{#saveButton}}
48
+ <h2 class="demo-section__title">
49
+ Save button
50
+ </h2>
51
+ {{{renderReactComponent localPath="components/save-for-later/save-for-later" flags=@root.flags title=title contentId=contentId }}}
52
+ {{/saveButton}}
53
+
54
+ {{#saveButton}}
55
+ <h2 class="demo-section__title">
56
+ Unsave button
57
+ </h2>
58
+ {{{renderReactComponent localPath="components/save-for-later/save-for-later" flags=@root.flags title=title contentId=contentId isSaved=true }}}
59
+ {{/saveButton}}
60
+
61
+ {{#saveButton}}
62
+ <h2 class="demo-section__title">
63
+ Save button with icon
64
+ </h2>
65
+ {{{renderReactComponent localPath="components/save-for-later/save-for-later" flags=@root.flags title=title contentId=contentId saveButtonWithIcon=true }}}
66
+ {{/saveButton}}
67
+
68
+ {{#saveButton}}
69
+ <h2 class="demo-section__title">
70
+ Unsave button with icon
71
+ </h2>
72
+ {{{renderReactComponent localPath="components/save-for-later/save-for-later" flags=@root.flags title=title contentId=contentId saveButtonWithIcon=true isSaved=true }}}
73
+ {{/saveButton}}
74
+
63
75
  <h2 class="demo-section__title">
64
- Instant Alert
76
+ Pin button
65
77
  </h2>
66
- {{> n-myft-ui/components/instant-alert/instant-alert }}
67
- {{/instantAlert}}
78
+ {{#each pinButton}}
79
+ {{{renderReactComponent localPath="components/pin-button/pin-button" flags=@root.flags title=title id=id name=name directType=directType showPrioritiseButton=showPrioritiseButton }}}
80
+ {{/each}}
68
81
 
82
+ {{#instantAlert}}
83
+ <h2 class="demo-section__title">
84
+ Instant Alert
85
+ </h2>
86
+ {{> n-myft-ui/components/instant-alert/instant-alert }}
87
+ {{/instantAlert}}
69
88
 
70
- </div>
71
- </div>
72
- </section>
73
89
 
74
- <section
75
- id="follow-concept"
76
- class="demo-section">
77
- <div class="o-grid-row">
78
- <div data-o-grid-colspan="12">
79
- <h2 class="demo-section__title">
80
- Follow concept
81
- </h2>
82
- <p class="demo-section__description">
83
- These are used in a group of many suggested follows/unfollows such as
84
- the myFT page cold start.
85
- </p>
86
- <div class="concept-collection concept-collection--standard">
87
- <h3 class="concept-collection__title">
88
- Standard
89
- </h3>
90
- <ul class="concept-collection__list">
91
- <li>
92
- <button class="n-myft-follow-button">
93
- Books
94
- </button>
95
- </li>
96
- <li>
97
- <button
98
- aria-pressed="true"
99
- class="n-myft-follow-button">
100
- Life &amp; Arts
101
- </button>
102
- </li>
103
- <li>
104
- <button
105
- class="n-myft-follow-button">
106
- Theo Leanse
107
- </button>
108
- </li>
109
- <li>
110
- <button
111
- aria-pressed="true"
112
- disabled
113
- class="n-myft-follow-button">
114
- Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
115
- say that they were perfectly normal, thank you very much.
116
- </button>
117
- </li>
118
- </ul>
119
90
  </div>
120
91
  </div>
121
- </div>
92
+ </section>
122
93
 
123
- <div class="o-grid-row">
124
- <div data-o-grid-colspan="12">
125
- <div class="concept-collection concept-collection--inverse">
126
- <h3 class="concept-collection__title">
127
- Inverse
128
- </h3>
129
- <ul class="concept-collection__list">
130
- <li>
131
- <button
132
- class="n-myft-follow-button n-myft-follow-button--inverse">
133
- Books
134
- </button>
135
- </li>
136
- <li>
137
- <button
138
- aria-pressed="true"
139
- class="n-myft-follow-button n-myft-follow-button--inverse">
140
- Life &amp; Arts
141
- </button>
142
- </li>
143
- <li>
144
- <button
145
- class="n-myft-follow-button n-myft-follow-button--inverse">
146
- Theo Leanse
147
- </button>
148
- </li>
149
- <li>
150
- <button
151
- aria-pressed="true"
152
- disabled
153
- class="n-myft-follow-button n-myft-follow-button--inverse">
154
- Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
155
- say that they were perfectly normal, thank you very much.
156
- </button>
157
- </li>
158
- </ul>
94
+ <section
95
+ id="follow-concept"
96
+ class="demo-section">
97
+ <div class="o-grid-row">
98
+ <div data-o-grid-colspan="12">
99
+ <h2 class="demo-section__title">
100
+ Follow concept
101
+ </h2>
102
+ <p class="demo-section__description">
103
+ These are used in a group of many suggested follows/unfollows such as
104
+ the myFT page cold start.
105
+ </p>
106
+ <div class="concept-collection concept-collection--standard">
107
+ <h3 class="concept-collection__title">
108
+ Standard
109
+ </h3>
110
+ <ul class="concept-collection__list">
111
+ <li>
112
+ <button class="n-myft-follow-button">
113
+ Books
114
+ </button>
115
+ </li>
116
+ <li>
117
+ <button
118
+ aria-pressed="true"
119
+ class="n-myft-follow-button">
120
+ Life &amp; Arts
121
+ </button>
122
+ </li>
123
+ <li>
124
+ <button
125
+ class="n-myft-follow-button">
126
+ Theo Leanse
127
+ </button>
128
+ </li>
129
+ <li>
130
+ <button
131
+ aria-pressed="true"
132
+ disabled
133
+ class="n-myft-follow-button">
134
+ Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
135
+ say that they were perfectly normal, thank you very much.
136
+ </button>
137
+ </li>
138
+ </ul>
139
+ </div>
159
140
  </div>
160
141
  </div>
161
- </div>
162
142
 
163
- <div class="o-grid-row">
164
- <div data-o-grid-colspan="12">
165
- <div class="concept-collection concept-collection--monochrome">
166
- <h3 class="concept-collection__title">
167
- Monochrome
168
- </h3>
169
- <ul class="concept-collection__list">
170
- <li>
171
- <button
172
- class="n-myft-follow-button n-myft-follow-button--monochrome"
173
- aria-pressed="false">
174
- Theo Leanse
175
- </button>
176
- </li>
177
- <li>
178
- <button
179
- class="n-myft-follow-button n-myft-follow-button--monochrome"
180
- aria-pressed="true">
181
- Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
182
- say that they were perfectly normal, thank you very much.
183
- </button>
184
- </li>
185
- <li>
186
- <button
187
- disabled
188
- class="n-myft-follow-button n-myft-follow-button--monochrome"
189
- aria-pressed="true">
190
- chee
191
- </button>
192
- </li>
193
- </ul>
143
+ <div class="o-grid-row">
144
+ <div data-o-grid-colspan="12">
145
+ <div class="concept-collection concept-collection--inverse">
146
+ <h3 class="concept-collection__title">
147
+ Inverse
148
+ </h3>
149
+ <ul class="concept-collection__list">
150
+ <li>
151
+ <button
152
+ class="n-myft-follow-button n-myft-follow-button--inverse">
153
+ Books
154
+ </button>
155
+ </li>
156
+ <li>
157
+ <button
158
+ aria-pressed="true"
159
+ class="n-myft-follow-button n-myft-follow-button--inverse">
160
+ Life &amp; Arts
161
+ </button>
162
+ </li>
163
+ <li>
164
+ <button
165
+ class="n-myft-follow-button n-myft-follow-button--inverse">
166
+ Theo Leanse
167
+ </button>
168
+ </li>
169
+ <li>
170
+ <button
171
+ aria-pressed="true"
172
+ disabled
173
+ class="n-myft-follow-button n-myft-follow-button--inverse">
174
+ Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
175
+ say that they were perfectly normal, thank you very much.
176
+ </button>
177
+ </li>
178
+ </ul>
179
+ </div>
194
180
  </div>
195
181
  </div>
196
- </div>
197
182
 
198
- <div class="o-grid-row">
199
- <div data-o-grid-colspan="12">
200
- <div class="concept-collection concept-collection--opinion">
201
- <h3 class="concept-collection__title">
202
- Opinion topper
203
- </h3>
204
- <ul class="concept-collection__list">
205
- <li>
206
- <button
207
- class="n-myft-follow-button n-myft-follow-button--opinion"
208
- aria-pressed="false">
209
- Theo Leanse
210
- </button>
211
- </li>
212
- <li>
213
- <button
214
- class="n-myft-follow-button n-myft-follow-button--opinion"
215
- aria-pressed="true">
216
- Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
217
- say that they were perfectly normal, thank you very much.
218
- </button>
219
- </li>
220
- <li>
221
- <button
222
- disabled
223
- class="n-myft-follow-button n-myft-follow-button--opinion"
224
- aria-pressed="false">
225
- chee
226
- </button>
227
- </li>
228
- </ul>
183
+ <div class="o-grid-row">
184
+ <div data-o-grid-colspan="12">
185
+ <div class="concept-collection concept-collection--monochrome">
186
+ <h3 class="concept-collection__title">
187
+ Monochrome
188
+ </h3>
189
+ <ul class="concept-collection__list">
190
+ <li>
191
+ <button
192
+ class="n-myft-follow-button n-myft-follow-button--monochrome"
193
+ aria-pressed="false">
194
+ Theo Leanse
195
+ </button>
196
+ </li>
197
+ <li>
198
+ <button
199
+ class="n-myft-follow-button n-myft-follow-button--monochrome"
200
+ aria-pressed="true">
201
+ Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
202
+ say that they were perfectly normal, thank you very much.
203
+ </button>
204
+ </li>
205
+ <li>
206
+ <button
207
+ disabled
208
+ class="n-myft-follow-button n-myft-follow-button--monochrome"
209
+ aria-pressed="true">
210
+ chee
211
+ </button>
212
+ </li>
213
+ </ul>
214
+ </div>
229
215
  </div>
230
216
  </div>
231
- </div>
232
- </section>
233
217
 
234
- <section
235
- id="onboarding-cta"
236
- class="demo-section">
237
- <div class="o-grid-row">
238
- <div data-o-grid-colspan="12">
239
- <h2 class="demo-section__title">
240
- Onboarding call to action
241
- </h2>
242
-
243
- <p class="demo-section__description">
244
- Used on the myFT section of the homepage.
245
- </p>
246
-
247
- <a class="n-myft-onboarding-cta" href="#">
248
- See stories
249
- </a>
218
+ <div class="o-grid-row">
219
+ <div data-o-grid-colspan="12">
220
+ <div class="concept-collection concept-collection--opinion">
221
+ <h3 class="concept-collection__title">
222
+ Opinion topper
223
+ </h3>
224
+ <ul class="concept-collection__list">
225
+ <li>
226
+ <button
227
+ class="n-myft-follow-button n-myft-follow-button--opinion"
228
+ aria-pressed="false">
229
+ Theo Leanse
230
+ </button>
231
+ </li>
232
+ <li>
233
+ <button
234
+ class="n-myft-follow-button n-myft-follow-button--opinion"
235
+ aria-pressed="true">
236
+ Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
237
+ say that they were perfectly normal, thank you very much.
238
+ </button>
239
+ </li>
240
+ <li>
241
+ <button
242
+ disabled
243
+ class="n-myft-follow-button n-myft-follow-button--opinion"
244
+ aria-pressed="false">
245
+ chee
246
+ </button>
247
+ </li>
248
+ </ul>
249
+ </div>
250
+ </div>
250
251
  </div>
251
- </div>
252
- </section>
252
+ </section>
253
253
 
254
- <section
255
- id="concept-pill"
256
- class="demo-section">
257
- <div class="o-grid-row">
258
- <div data-o-grid-colspan="12">
259
- <h2 class="demo-section__title">
260
- Concept pill
261
- </h2>
262
- <p class="demo-section__description">
263
- Used for links to concepts (eg: on the email digest page)
264
- </p>
265
- <div class="concept-collection concept-collection--standard">
266
- <h3 class="concept-collection__title">
267
- Standard
268
- </h3>
269
- <ul class="concept-collection__list">
270
- <li>
271
- <a
272
- class="n-myft-concept-pill"
273
- href="#">
274
- Books
275
- </a>
276
- </li>
277
- <li>
278
- <a
279
- class="n-myft-concept-pill"
280
- href="#">
281
- Life &amp; Arts
282
- </a>
283
- </li>
284
- <li>
285
- <a
286
- class="n-myft-concept-pill"
287
- href="#">
288
- Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
289
- say that they were perfectly normal, thank you very much.
290
- </a>
291
- </li>
292
- <li>
293
- <button
294
- class="n-myft-concept-pill"
295
- disabled>
296
- Books
297
- </button>
298
- </li>
299
- </ul>
254
+ <section
255
+ id="onboarding-cta"
256
+ class="demo-section">
257
+ <div class="o-grid-row">
258
+ <div data-o-grid-colspan="12">
259
+ <h2 class="demo-section__title">
260
+ Onboarding call to action
261
+ </h2>
262
+
263
+ <p class="demo-section__description">
264
+ Used on the myFT section of the homepage.
265
+ </p>
266
+
267
+ <a class="n-myft-onboarding-cta" href="#">
268
+ See stories
269
+ </a>
300
270
  </div>
301
271
  </div>
302
- </div>
272
+ </section>
303
273
 
304
- <div class="o-grid-row">
305
- <div data-o-grid-colspan="12">
306
- <div class="concept-collection concept-collection--inverse">
307
- <h3 class="concept-collection__title">
308
- Inverse
309
- </h3>
310
- <ul class="concept-collection__list">
311
- <li>
312
- <a
313
- class="n-myft-concept-pill n-myft-concept-pill--inverse"
314
- href="#">
315
- Books
316
- </a>
317
- </li>
318
- <li>
319
- <a
320
- class="n-myft-concept-pill n-myft-concept-pill--inverse"
321
- href="#">
322
- Life &amp; Arts
323
- </a>
324
- </li>
325
- <li>
326
- <a
327
- class="n-myft-concept-pill n-myft-concept-pill--inverse"
328
- href="#">
329
- Theo Leanse
330
- </a>
331
- </li>
332
- <li>
333
- <button
334
- class="n-myft-concept-pill n-myft-concept-pill--inverse"
335
- disabled>
336
- Books
337
- </button>
338
- </li>
339
- </ul>
274
+ <section
275
+ id="concept-pill"
276
+ class="demo-section">
277
+ <div class="o-grid-row">
278
+ <div data-o-grid-colspan="12">
279
+ <h2 class="demo-section__title">
280
+ Concept pill
281
+ </h2>
282
+ <p class="demo-section__description">
283
+ Used for links to concepts (eg: on the email digest page)
284
+ </p>
285
+ <div class="concept-collection concept-collection--standard">
286
+ <h3 class="concept-collection__title">
287
+ Standard
288
+ </h3>
289
+ <ul class="concept-collection__list">
290
+ <li>
291
+ <a
292
+ class="n-myft-concept-pill"
293
+ href="#">
294
+ Books
295
+ </a>
296
+ </li>
297
+ <li>
298
+ <a
299
+ class="n-myft-concept-pill"
300
+ href="#">
301
+ Life &amp; Arts
302
+ </a>
303
+ </li>
304
+ <li>
305
+ <a
306
+ class="n-myft-concept-pill"
307
+ href="#">
308
+ Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
309
+ say that they were perfectly normal, thank you very much.
310
+ </a>
311
+ </li>
312
+ <li>
313
+ <button
314
+ class="n-myft-concept-pill"
315
+ disabled>
316
+ Books
317
+ </button>
318
+ </li>
319
+ </ul>
320
+ </div>
340
321
  </div>
341
322
  </div>
342
- </div>
343
323
 
344
- <div class="o-grid-row">
345
- <div data-o-grid-colspan="12">
346
- <div class="concept-collection concept-collection--monochrome">
347
- <h3 class="concept-collection__title">
348
- Monochrome
349
- </h3>
350
-
351
- <ul class="concept-collection__list">
352
- <li>
353
- <a
354
- class="n-myft-concept-pill n-myft-concept-pill--monochrome"
355
- aria-pressed="false">
356
- Theo Leanse
357
- </a>
358
- </li>
359
- <li>
360
- <a
361
- class="n-myft-concept-pill n-myft-concept-pill--monochrome"
362
- aria-pressed="false">
363
- Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
364
- say that they were perfectly normal, thank you very much.
365
- </a>
366
- </li>
367
- <li>
368
- <a
369
- disabled
370
- class="n-myft-concept-pill n-myft-concept-pill--monochrome"
371
- aria-pressed="true">
372
- chee
373
- </a>
374
- </li>
375
- </ul>
324
+ <div class="o-grid-row">
325
+ <div data-o-grid-colspan="12">
326
+ <div class="concept-collection concept-collection--inverse">
327
+ <h3 class="concept-collection__title">
328
+ Inverse
329
+ </h3>
330
+ <ul class="concept-collection__list">
331
+ <li>
332
+ <a
333
+ class="n-myft-concept-pill n-myft-concept-pill--inverse"
334
+ href="#">
335
+ Books
336
+ </a>
337
+ </li>
338
+ <li>
339
+ <a
340
+ class="n-myft-concept-pill n-myft-concept-pill--inverse"
341
+ href="#">
342
+ Life &amp; Arts
343
+ </a>
344
+ </li>
345
+ <li>
346
+ <a
347
+ class="n-myft-concept-pill n-myft-concept-pill--inverse"
348
+ href="#">
349
+ Theo Leanse
350
+ </a>
351
+ </li>
352
+ <li>
353
+ <button
354
+ class="n-myft-concept-pill n-myft-concept-pill--inverse"
355
+ disabled>
356
+ Books
357
+ </button>
358
+ </li>
359
+ </ul>
360
+ </div>
376
361
  </div>
377
362
  </div>
378
- </div>
379
363
 
380
- <div class="o-grid-row">
381
- <div data-o-grid-colspan="12">
382
- <div class="concept-collection concept-collection--opinion">
383
- <h3 class="concept-collection__title">
384
- Opinion topper
385
- </h3>
386
- <ul class="concept-collection__list">
387
- <li>
388
- <a
389
- class="n-myft-concept-pill n-myft-concept-pill--opinion"
390
- aria-pressed="false">
391
- Theo Leanse
392
- </a>
393
- </li>
394
- <li>
395
- <a
396
- class="n-myft-concept-pill n-myft-concept-pill--opinion"
397
- aria-pressed="false">
398
- Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
399
- say that they were perfectly normal, thank you very much.
400
- </a>
401
- </li>
402
- <li>
403
- <a
404
- disabled
405
- class="n-myft-concept-pill n-myft-concept-pill--opinion"
406
- aria-pressed="true">
407
- chee
408
- </a>
409
- </li>
410
- </ul>
364
+ <div class="o-grid-row">
365
+ <div data-o-grid-colspan="12">
366
+ <div class="concept-collection concept-collection--monochrome">
367
+ <h3 class="concept-collection__title">
368
+ Monochrome
369
+ </h3>
370
+
371
+ <ul class="concept-collection__list">
372
+ <li>
373
+ <a
374
+ class="n-myft-concept-pill n-myft-concept-pill--monochrome"
375
+ aria-pressed="false">
376
+ Theo Leanse
377
+ </a>
378
+ </li>
379
+ <li>
380
+ <a
381
+ class="n-myft-concept-pill n-myft-concept-pill--monochrome"
382
+ aria-pressed="false">
383
+ Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
384
+ say that they were perfectly normal, thank you very much.
385
+ </a>
386
+ </li>
387
+ <li>
388
+ <a
389
+ disabled
390
+ class="n-myft-concept-pill n-myft-concept-pill--monochrome"
391
+ aria-pressed="true">
392
+ chee
393
+ </a>
394
+ </li>
395
+ </ul>
396
+ </div>
411
397
  </div>
412
398
  </div>
413
- </div>
414
- </section>
415
399
 
416
- <section
417
- id="collections"
418
- class="demo-section">
419
- <div class="o-grid-row">
420
- <div data-o-grid-colspan="12">
421
- <h2 class="demo-section__title">
422
- Collections
423
- </h2>
424
-
425
- <p class="demo-section__description">
426
- Curated collections of topics to follow.
427
- </p>
400
+ <div class="o-grid-row">
401
+ <div data-o-grid-colspan="12">
402
+ <div class="concept-collection concept-collection--opinion">
403
+ <h3 class="concept-collection__title">
404
+ Opinion topper
405
+ </h3>
406
+ <ul class="concept-collection__list">
407
+ <li>
408
+ <a
409
+ class="n-myft-concept-pill n-myft-concept-pill--opinion"
410
+ aria-pressed="false">
411
+ Theo Leanse
412
+ </a>
413
+ </li>
414
+ <li>
415
+ <a
416
+ class="n-myft-concept-pill n-myft-concept-pill--opinion"
417
+ aria-pressed="false">
418
+ Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
419
+ say that they were perfectly normal, thank you very much.
420
+ </a>
421
+ </li>
422
+ <li>
423
+ <a
424
+ disabled
425
+ class="n-myft-concept-pill n-myft-concept-pill--opinion"
426
+ aria-pressed="true">
427
+ chee
428
+ </a>
429
+ </li>
430
+ </ul>
431
+ </div>
432
+ </div>
428
433
  </div>
434
+ </section>
435
+
436
+ <section
437
+ id="collections"
438
+ class="demo-section">
439
+ <div class="o-grid-row">
440
+ <div data-o-grid-colspan="12">
441
+ <h2 class="demo-section__title">
442
+ Collections
443
+ </h2>
429
444
 
430
- {{#collections}}
431
- <div data-o-grid-colspan="3">
432
- {{> n-myft-ui/components/collections/collections }}
445
+ <p class="demo-section__description">
446
+ Curated collections of topics to follow.
447
+ </p>
433
448
  </div>
434
- {{/collections}}
435
- </div>
436
- </section>
437
449
 
438
- <section
439
- id="topic-list"
440
- class="demo-section">
441
- <div class="o-grid-row">
442
- <div data-o-grid-colspan="12">
443
- <h2 class="demo-section__title">
444
- Topic list
445
- </h2>
446
-
447
- <p class="demo-section__description">
448
- A list of topics to follow
449
- </p>
450
+ {{#collections}}
451
+ <div data-o-grid-colspan="3">
452
+ {{{renderReactComponent localPath="components/collections/collections" flags=@root.flags concepts=this.concepts title=this.title liteStyle=this.liteStyle collectionName=this.collectionName trackable=this.trackable}}}
453
+ </div>
454
+ {{/collections}}
450
455
  </div>
456
+ </section>
451
457
 
452
- {{#each conceptList}}
453
- <div data-o-grid-colspan="3">
454
- {{> n-myft-ui/components/concept-list/concept-list }}
458
+ <section
459
+ id="topic-list"
460
+ class="demo-section">
461
+ <div class="o-grid-row">
462
+ <div data-o-grid-colspan="12">
463
+ <h2 class="demo-section__title">
464
+ Topic list
465
+ </h2>
466
+
467
+ <p class="demo-section__description">
468
+ A list of topics to follow
469
+ </p>
455
470
  </div>
456
- {{/each}}
457
- </div>
458
- </section>
459
- </div>
471
+
472
+ {{#each conceptList}}
473
+ <div data-o-grid-colspan="3">
474
+ {{{renderReactComponent localPath="components/concept-list/concept-list" flags=@root.flags concepts=this.concepts contentType=this.contentType conceptListTitle=this.conceptListTitle trackable=this.trackable}}}
475
+ </div>
476
+ {{/each}}
477
+ </div>
478
+ </section>
479
+ </div>
480
+ </body>
481
+
482
+ </html>