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

Sign up to get free protection for your applications and to get access to all the features.
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>