@financial-times/n-myft-ui 23.1.2 → 24.0.2

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