@dta-au/civictheme-twig 1.15.1 → 1.16.0

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 (19) hide show
  1. package/components/02-molecules/link-card/__snapshots__/link-card.test.js.snap +440 -105
  2. package/components/02-molecules/link-card/link-card.mdx +47 -0
  3. package/components/02-molecules/link-card/link-card.scss +56 -26
  4. package/components/02-molecules/link-card/link-card.stories.data.js +3 -0
  5. package/components/02-molecules/link-card/link-card.stories.js +43 -5
  6. package/components/02-molecules/link-card/link-card.test.js +46 -4
  7. package/components/02-molecules/link-card/link-card.twig +56 -12
  8. package/components/03-organisms/link-list/__snapshots__/link-list.test.js.snap +607 -106
  9. package/components/03-organisms/link-list/link-list.scss +49 -0
  10. package/components/03-organisms/link-list/link-list.stories.data.js +26 -7
  11. package/components/03-organisms/link-list/link-list.stories.js +14 -0
  12. package/components/03-organisms/link-list/link-list.test.js +20 -3
  13. package/components/03-organisms/link-list/link-list.twig +11 -2
  14. package/components/variables.components.scss +13 -1
  15. package/dist/civictheme.css +67 -17
  16. package/dist/civictheme.storybook.css +67 -17
  17. package/dist/civictheme.variables.css +6 -1
  18. package/dist/constants.json +6 -1
  19. package/package.json +1 -1
package/components/02-molecules/link-card/__snapshots__/link-card.test.js.snap CHANGED
@@ -6,6 +6,8 @@ exports[`Link Card applies theme class 1`] = `
6
6
 
7
7
 
8
8
 
9
+
10
+
9
11
 
10
12
  <div
11
13
  class="ct-link-card ct-theme-dark ct-link-card--default"
@@ -31,31 +33,45 @@ exports[`Link Card applies theme class 1`] = `
31
33
 
32
34
 
33
35
 
36
+
37
+
38
+
39
+
34
40
  <span
35
- aria-hidden="true"
36
- class="ct-link-card__icon"
41
+ class="ct-link-card__indicators"
37
42
  >
38
43
 
39
44
 
40
- <svg
45
+
46
+
47
+ <span
41
48
  aria-hidden="true"
42
- class="ct-icon ct-icon--size-small"
43
- height="24"
44
- role="img"
45
- viewBox="0 0 24 24"
46
- width="24"
47
- xmlns="http://www.w3.org/2000/svg"
49
+ class="ct-link-card__icon"
48
50
  >
49
51
 
50
-
51
- <path
52
- d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z"
53
- />
52
+
53
+ <svg
54
+ aria-hidden="true"
55
+ class="ct-icon ct-icon--size-small"
56
+ height="24"
57
+ role="img"
58
+ viewBox="0 0 24 24"
59
+ width="24"
60
+ xmlns="http://www.w3.org/2000/svg"
61
+ >
62
+
63
+
64
+ <path
65
+ d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z"
66
+ />
67
+
68
+
69
+ </svg>
54
70
 
55
-
56
- </svg>
57
-
71
+
72
+ </span>
58
73
 
74
+
59
75
  </span>
60
76
 
61
77
 
@@ -68,30 +84,33 @@ exports[`Link Card applies theme class 1`] = `
68
84
  </div>
69
85
  `;
70
86
 
71
- exports[`Link Card authenticated variant adds its modifier class 1`] = `
87
+ exports[`Link Card deactivated card is non-interactive with no href 1`] = `
72
88
  <div>
73
89
 
74
90
 
75
91
 
76
92
 
93
+
94
+
77
95
 
78
96
  <div
79
- class="ct-link-card ct-theme-light ct-link-card--authenticated"
97
+ class="ct-link-card ct-theme-light ct-link-card--default ct-link-card--secured ct-link-card--deactivated"
80
98
  data-component-name="ct-link-card"
81
99
  >
82
100
 
83
101
 
84
102
 
85
103
  <a
104
+ aria-disabled="true"
86
105
  class="ct-link-card__link"
87
- href="https://example.com/secure"
106
+ tabindex="-1"
88
107
  >
89
108
 
90
109
 
91
110
  <span
92
111
  class="ct-link-card__title"
93
112
  >
94
- Secure document
113
+ Locked resource
95
114
  </span>
96
115
 
97
116
 
@@ -99,33 +118,54 @@ exports[`Link Card authenticated variant adds its modifier class 1`] = `
99
118
 
100
119
 
101
120
 
121
+
122
+
102
123
  <span
103
- aria-hidden="true"
104
- class="ct-link-card__icon"
124
+ class="ct-visually-hidden"
105
125
  >
126
+ (secured)
127
+ </span>
128
+
106
129
 
107
-
108
- <svg
130
+
131
+
132
+ <span
133
+ class="ct-link-card__indicators"
134
+ >
135
+
136
+
137
+
138
+ <span
109
139
  aria-hidden="true"
110
- class="ct-icon ct-icon--size-small"
111
- height="24"
112
- role="img"
113
- viewBox="0 0 24 24"
114
- width="24"
115
- xmlns="http://www.w3.org/2000/svg"
140
+ class="ct-link-card__icon ct-link-card__icon--secured"
116
141
  >
117
142
 
118
-
119
- <path
120
- clip-rule="evenodd"
121
- d="M6.75 8.25V6.75a5.25 5.25 0 0 1 10.5 0v1.5h.75a2.25 2.25 0 0 1 2.25 2.25v8.25A2.25 2.25 0 0 1 18 21H6a2.25 2.25 0 0 1-2.25-2.25V10.5A2.25 2.25 0 0 1 6 8.25h.75Zm2 0h6.5V6.75a3.25 3.25 0 0 0-6.5 0v1.5ZM12 13a1.5 1.5 0 0 0-.75 2.8v1.45a.75.75 0 0 0 1.5 0V15.8A1.5 1.5 0 0 0 12 13Z"
122
- fill-rule="evenodd"
123
- />
143
+
144
+ <svg
145
+ aria-hidden="true"
146
+ class="ct-icon ct-icon--size-small"
147
+ height="24"
148
+ role="img"
149
+ viewBox="0 0 24 24"
150
+ width="24"
151
+ xmlns="http://www.w3.org/2000/svg"
152
+ >
153
+
154
+
155
+ <path
156
+ clip-rule="evenodd"
157
+ d="M6.75 8.25V6.75a5.25 5.25 0 0 1 10.5 0v1.5h.75a2.25 2.25 0 0 1 2.25 2.25v8.25A2.25 2.25 0 0 1 18 21H6a2.25 2.25 0 0 1-2.25-2.25V10.5A2.25 2.25 0 0 1 6 8.25h.75Zm2 0h6.5V6.75a3.25 3.25 0 0 0-6.5 0v1.5ZM12 13a1.5 1.5 0 0 0-.75 2.8v1.45a.75.75 0 0 0 1.5 0V15.8A1.5 1.5 0 0 0 12 13Z"
158
+ fill-rule="evenodd"
159
+ />
160
+
161
+
162
+ </svg>
124
163
 
125
-
126
- </svg>
127
-
164
+
165
+ </span>
128
166
 
167
+
168
+
129
169
  </span>
130
170
 
131
171
 
@@ -138,15 +178,17 @@ exports[`Link Card authenticated variant adds its modifier class 1`] = `
138
178
  </div>
139
179
  `;
140
180
 
141
- exports[`Link Card deactivated card is non-interactive with no href 1`] = `
181
+ exports[`Link Card deactivated implies the padlock even without is_secured 1`] = `
142
182
  <div>
143
183
 
144
184
 
145
185
 
146
186
 
187
+
188
+
147
189
 
148
190
  <div
149
- class="ct-link-card ct-theme-light ct-link-card--authenticated ct-link-card--deactivated"
191
+ class="ct-link-card ct-theme-light ct-link-card--default ct-link-card--deactivated"
150
192
  data-component-name="ct-link-card"
151
193
  >
152
194
 
@@ -170,33 +212,152 @@ exports[`Link Card deactivated card is non-interactive with no href 1`] = `
170
212
 
171
213
 
172
214
 
215
+
216
+
217
+ <span
218
+ class="ct-visually-hidden"
219
+ >
220
+ (secured)
221
+ </span>
222
+
223
+
224
+
225
+
173
226
  <span
174
- aria-hidden="true"
175
- class="ct-link-card__icon"
227
+ class="ct-link-card__indicators"
176
228
  >
177
229
 
178
-
179
- <svg
230
+
231
+
232
+ <span
180
233
  aria-hidden="true"
181
- class="ct-icon ct-icon--size-small"
182
- height="24"
183
- role="img"
184
- viewBox="0 0 24 24"
185
- width="24"
186
- xmlns="http://www.w3.org/2000/svg"
234
+ class="ct-link-card__icon ct-link-card__icon--secured"
187
235
  >
188
236
 
237
+
238
+ <svg
239
+ aria-hidden="true"
240
+ class="ct-icon ct-icon--size-small"
241
+ height="24"
242
+ role="img"
243
+ viewBox="0 0 24 24"
244
+ width="24"
245
+ xmlns="http://www.w3.org/2000/svg"
246
+ >
247
+
248
+
249
+ <path
250
+ clip-rule="evenodd"
251
+ d="M6.75 8.25V6.75a5.25 5.25 0 0 1 10.5 0v1.5h.75a2.25 2.25 0 0 1 2.25 2.25v8.25A2.25 2.25 0 0 1 18 21H6a2.25 2.25 0 0 1-2.25-2.25V10.5A2.25 2.25 0 0 1 6 8.25h.75Zm2 0h6.5V6.75a3.25 3.25 0 0 0-6.5 0v1.5ZM12 13a1.5 1.5 0 0 0-.75 2.8v1.45a.75.75 0 0 0 1.5 0V15.8A1.5 1.5 0 0 0 12 13Z"
252
+ fill-rule="evenodd"
253
+ />
254
+
255
+
256
+ </svg>
257
+
258
+
259
+ </span>
260
+
261
+
262
+
263
+ </span>
264
+
265
+
266
+ </a>
267
+
268
+
269
+ </div>
270
+
271
+
272
+ </div>
273
+ `;
274
+
275
+ exports[`Link Card download variant renders meta and its modifier class 1`] = `
276
+ <div>
277
+
278
+
189
279
 
190
- <path
191
- clip-rule="evenodd"
192
- d="M6.75 8.25V6.75a5.25 5.25 0 0 1 10.5 0v1.5h.75a2.25 2.25 0 0 1 2.25 2.25v8.25A2.25 2.25 0 0 1 18 21H6a2.25 2.25 0 0 1-2.25-2.25V10.5A2.25 2.25 0 0 1 6 8.25h.75Zm2 0h6.5V6.75a3.25 3.25 0 0 0-6.5 0v1.5ZM12 13a1.5 1.5 0 0 0-.75 2.8v1.45a.75.75 0 0 0 1.5 0V15.8A1.5 1.5 0 0 0 12 13Z"
193
- fill-rule="evenodd"
194
- />
280
+
281
+
282
+
283
+
284
+ <div
285
+ class="ct-link-card ct-theme-light ct-link-card--download"
286
+ data-component-name="ct-link-card"
287
+ >
288
+
195
289
 
290
+
291
+ <a
292
+ class="ct-link-card__link"
293
+ href="https://example.com/report.pdf"
294
+ >
295
+
296
+
297
+ <span
298
+ class="ct-link-card__title"
299
+ >
300
+ Annual report 2025
301
+ </span>
302
+
196
303
 
197
- </svg>
198
304
 
305
+
306
+ <span
307
+ class="ct-link-card__meta ct-link-card__meta--extension"
308
+ >
309
+ PDF
310
+ </span>
311
+
312
+
313
+ <span
314
+ class="ct-link-card__meta ct-link-card__meta--size"
315
+ >
316
+ 1.2 MB
317
+ </span>
318
+
319
+
320
+
321
+
322
+
323
+
324
+
325
+
326
+ <span
327
+ class="ct-link-card__indicators"
328
+ >
329
+
330
+
331
+
332
+
333
+ <span
334
+ aria-hidden="true"
335
+ class="ct-link-card__icon"
336
+ >
337
+
338
+
339
+ <svg
340
+ aria-hidden="true"
341
+ class="ct-icon ct-icon--size-small"
342
+ height="24"
343
+ role="img"
344
+ viewBox="0 0 24 24"
345
+ width="24"
346
+ xmlns="http://www.w3.org/2000/svg"
347
+ >
348
+
349
+
350
+ <path
351
+ d="M21 14C20.7348 14 20.4804 14.1054 20.2929 14.2929C20.1054 14.4804 20 14.7348 20 15V19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V15C4 14.7348 3.89464 14.4804 3.70711 14.2929C3.51957 14.1054 3.26522 14 3 14C2.73478 14 2.48043 14.1054 2.29289 14.2929C2.10536 14.4804 2 14.7348 2 15V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V15C22 14.7348 21.8946 14.4804 21.7071 14.2929C21.5196 14.1054 21.2652 14 21 14ZM11.29 15.71C11.3851 15.801 11.4972 15.8724 11.62 15.92C11.7397 15.9729 11.8691 16.0002 12 16.0002C12.1309 16.0002 12.2603 15.9729 12.38 15.92C12.5028 15.8724 12.6149 15.801 12.71 15.71L16.71 11.71C16.8983 11.5217 17.0041 11.2663 17.0041 11C17.0041 10.7337 16.8983 10.4783 16.71 10.29C16.5217 10.1017 16.2663 9.99591 16 9.99591C15.7337 9.99591 15.4783 10.1017 15.29 10.29L13 12.59V3C13 2.73478 12.8946 2.48043 12.7071 2.29289C12.5196 2.10536 12.2652 2 12 2C11.7348 2 11.4804 2.10536 11.2929 2.29289C11.1054 2.48043 11 2.73478 11 3V12.59L8.71 10.29C8.61676 10.1968 8.50607 10.1228 8.38425 10.0723C8.26243 10.0219 8.13186 9.99591 8 9.99591C7.86814 9.99591 7.73757 10.0219 7.61575 10.0723C7.49393 10.1228 7.38324 10.1968 7.29 10.29C7.19676 10.3832 7.1228 10.4939 7.07234 10.6158C7.02188 10.7376 6.99591 10.8681 6.99591 11C6.99591 11.1319 7.02188 11.2624 7.07234 11.3842C7.1228 11.5061 7.19676 11.6168 7.29 11.71L11.29 15.71Z"
352
+ />
353
+
354
+
355
+ </svg>
356
+
357
+
358
+ </span>
199
359
 
360
+
200
361
  </span>
201
362
 
202
363
 
@@ -215,6 +376,8 @@ exports[`Link Card external link opens in a new window with rel and hidden notic
215
376
 
216
377
 
217
378
 
379
+
380
+
218
381
 
219
382
  <div
220
383
  class="ct-link-card ct-theme-light ct-link-card--default"
@@ -239,6 +402,8 @@ exports[`Link Card external link opens in a new window with rel and hidden notic
239
402
 
240
403
 
241
404
 
405
+
406
+
242
407
 
243
408
  <span
244
409
  class="ct-visually-hidden"
@@ -249,31 +414,43 @@ exports[`Link Card external link opens in a new window with rel and hidden notic
249
414
 
250
415
 
251
416
 
417
+
418
+
252
419
  <span
253
- aria-hidden="true"
254
- class="ct-link-card__icon"
420
+ class="ct-link-card__indicators"
255
421
  >
256
422
 
257
423
 
258
- <svg
424
+
425
+
426
+ <span
259
427
  aria-hidden="true"
260
- class="ct-icon ct-icon--size-small"
261
- height="24"
262
- role="img"
263
- viewBox="0 0 24 24"
264
- width="24"
265
- xmlns="http://www.w3.org/2000/svg"
428
+ class="ct-link-card__icon"
266
429
  >
267
430
 
268
-
269
- <path
270
- d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z"
271
- />
431
+
432
+ <svg
433
+ aria-hidden="true"
434
+ class="ct-icon ct-icon--size-small"
435
+ height="24"
436
+ role="img"
437
+ viewBox="0 0 24 24"
438
+ width="24"
439
+ xmlns="http://www.w3.org/2000/svg"
440
+ >
441
+
442
+
443
+ <path
444
+ d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z"
445
+ />
446
+
447
+
448
+ </svg>
272
449
 
273
-
274
- </svg>
275
-
450
+
451
+ </span>
276
452
 
453
+
277
454
  </span>
278
455
 
279
456
 
@@ -292,6 +469,8 @@ exports[`Link Card renders a single link card 1`] = `
292
469
 
293
470
 
294
471
 
472
+
473
+
295
474
 
296
475
  <div
297
476
  class="ct-link-card ct-theme-light ct-link-card--default"
@@ -317,31 +496,45 @@ exports[`Link Card renders a single link card 1`] = `
317
496
 
318
497
 
319
498
 
499
+
500
+
501
+
502
+
320
503
  <span
321
- aria-hidden="true"
322
- class="ct-link-card__icon"
504
+ class="ct-link-card__indicators"
323
505
  >
324
506
 
325
507
 
326
- <svg
508
+
509
+
510
+ <span
327
511
  aria-hidden="true"
328
- class="ct-icon ct-icon--size-small"
329
- height="24"
330
- role="img"
331
- viewBox="0 0 24 24"
332
- width="24"
333
- xmlns="http://www.w3.org/2000/svg"
512
+ class="ct-link-card__icon"
334
513
  >
335
514
 
336
-
337
- <path
338
- d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z"
339
- />
515
+
516
+ <svg
517
+ aria-hidden="true"
518
+ class="ct-icon ct-icon--size-small"
519
+ height="24"
520
+ role="img"
521
+ viewBox="0 0 24 24"
522
+ width="24"
523
+ xmlns="http://www.w3.org/2000/svg"
524
+ >
525
+
526
+
527
+ <path
528
+ d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z"
529
+ />
530
+
531
+
532
+ </svg>
340
533
 
341
-
342
- </svg>
343
-
534
+
535
+ </span>
344
536
 
537
+
345
538
  </span>
346
539
 
347
540
 
@@ -360,6 +553,8 @@ exports[`Link Card renders attributes 1`] = `
360
553
 
361
554
 
362
555
 
556
+
557
+
363
558
 
364
559
  <div
365
560
  class="ct-link-card ct-theme-light ct-link-card--default"
@@ -386,31 +581,45 @@ exports[`Link Card renders attributes 1`] = `
386
581
 
387
582
 
388
583
 
584
+
585
+
586
+
587
+
389
588
  <span
390
- aria-hidden="true"
391
- class="ct-link-card__icon"
589
+ class="ct-link-card__indicators"
392
590
  >
393
591
 
394
592
 
395
- <svg
593
+
594
+
595
+ <span
396
596
  aria-hidden="true"
397
- class="ct-icon ct-icon--size-small"
398
- height="24"
399
- role="img"
400
- viewBox="0 0 24 24"
401
- width="24"
402
- xmlns="http://www.w3.org/2000/svg"
597
+ class="ct-link-card__icon"
403
598
  >
404
599
 
405
-
406
- <path
407
- d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z"
408
- />
600
+
601
+ <svg
602
+ aria-hidden="true"
603
+ class="ct-icon ct-icon--size-small"
604
+ height="24"
605
+ role="img"
606
+ viewBox="0 0 24 24"
607
+ width="24"
608
+ xmlns="http://www.w3.org/2000/svg"
609
+ >
610
+
611
+
612
+ <path
613
+ d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z"
614
+ />
615
+
616
+
617
+ </svg>
409
618
 
410
-
411
- </svg>
412
-
619
+
620
+ </span>
413
621
 
622
+
414
623
  </span>
415
624
 
416
625
 
@@ -430,6 +639,8 @@ exports[`Link Card renders nothing without a title 1`] = `
430
639
 
431
640
 
432
641
 
642
+
643
+
433
644
  </div>
434
645
  `;
435
646
 
@@ -440,5 +651,129 @@ exports[`Link Card renders nothing without a url 1`] = `
440
651
 
441
652
 
442
653
 
654
+
655
+
656
+ </div>
657
+ `;
658
+
659
+ exports[`Link Card secured shows a padlock alongside the type icon and a text notice 1`] = `
660
+ <div>
661
+
662
+
663
+
664
+
665
+
666
+
667
+
668
+ <div
669
+ class="ct-link-card ct-theme-light ct-link-card--default ct-link-card--secured"
670
+ data-component-name="ct-link-card"
671
+ >
672
+
673
+
674
+
675
+ <a
676
+ class="ct-link-card__link"
677
+ href="https://example.com/secure"
678
+ >
679
+
680
+
681
+ <span
682
+ class="ct-link-card__title"
683
+ >
684
+ Secure document
685
+ </span>
686
+
687
+
688
+
689
+
690
+
691
+
692
+
693
+
694
+ <span
695
+ class="ct-visually-hidden"
696
+ >
697
+ (secured)
698
+ </span>
699
+
700
+
701
+
702
+
703
+ <span
704
+ class="ct-link-card__indicators"
705
+ >
706
+
707
+
708
+
709
+ <span
710
+ aria-hidden="true"
711
+ class="ct-link-card__icon ct-link-card__icon--secured"
712
+ >
713
+
714
+
715
+ <svg
716
+ aria-hidden="true"
717
+ class="ct-icon ct-icon--size-small"
718
+ height="24"
719
+ role="img"
720
+ viewBox="0 0 24 24"
721
+ width="24"
722
+ xmlns="http://www.w3.org/2000/svg"
723
+ >
724
+
725
+
726
+ <path
727
+ clip-rule="evenodd"
728
+ d="M6.75 8.25V6.75a5.25 5.25 0 0 1 10.5 0v1.5h.75a2.25 2.25 0 0 1 2.25 2.25v8.25A2.25 2.25 0 0 1 18 21H6a2.25 2.25 0 0 1-2.25-2.25V10.5A2.25 2.25 0 0 1 6 8.25h.75Zm2 0h6.5V6.75a3.25 3.25 0 0 0-6.5 0v1.5ZM12 13a1.5 1.5 0 0 0-.75 2.8v1.45a.75.75 0 0 0 1.5 0V15.8A1.5 1.5 0 0 0 12 13Z"
729
+ fill-rule="evenodd"
730
+ />
731
+
732
+
733
+ </svg>
734
+
735
+
736
+ </span>
737
+
738
+
739
+
740
+
741
+ <span
742
+ aria-hidden="true"
743
+ class="ct-link-card__icon"
744
+ >
745
+
746
+
747
+ <svg
748
+ aria-hidden="true"
749
+ class="ct-icon ct-icon--size-small"
750
+ height="24"
751
+ role="img"
752
+ viewBox="0 0 24 24"
753
+ width="24"
754
+ xmlns="http://www.w3.org/2000/svg"
755
+ >
756
+
757
+
758
+ <path
759
+ d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z"
760
+ />
761
+
762
+
763
+ </svg>
764
+
765
+
766
+ </span>
767
+
768
+
769
+ </span>
770
+
771
+
772
+ </a>
773
+
774
+
775
+ </div>
776
+
777
+
443
778
  </div>
444
779
  `;