@nationalarchives/frontend 0.1.19-prerelease → 0.1.20-prerelease

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 (2) hide show
  1. package/nationalarchives/components/card/fixtures.json +68 -106
  2. package/package.json +1 -1
package/nationalarchives/components/card/fixtures.json CHANGED
@@ -4,146 +4,120 @@
4
4
  {
5
5
  "name": "basic card",
6
6
  "options": {
7
- "heading": {
8
- "title": "Card title",
9
- "level": 3
10
- },
7
+ "title": "Card title",
8
+ "headingLevel": 3,
11
9
  "body": "<p>Card body</p>"
12
10
  },
13
- "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
11
+ "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
14
12
  "hidden": false
15
13
  },
16
14
  {
17
15
  "name": "with supertitle",
18
16
  "options": {
19
- "heading": {
20
- "supertitle": "Card supertitle",
21
- "title": "Card title",
22
- "level": 3
23
- },
17
+ "supertitle": "Card supertitle",
18
+ "title": "Card title",
19
+ "headingLevel": 3,
24
20
  "body": "<p>Card body</p>"
25
21
  },
26
- "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
22
+ "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><hgroup class=\"tna-hgroup tna-hgroup--m tna-card__heading\"><h3 class=\"tna-hgroup__title\"><span class=\"tna-hgroup__supertitle\">Card supertitle</span>Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
27
23
  "hidden": false
28
24
  },
29
25
  {
30
26
  "name": "heading size",
31
27
  "options": {
32
- "heading": {
33
- "title": "Card title",
34
- "level": 3,
35
- "size": "m"
36
- },
28
+ "title": "Card title",
29
+ "headingLevel": 3,
30
+ "headingSize": "xl",
37
31
  "body": "<p>Card body</p>"
38
32
  },
39
- "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
33
+ "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--xl tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
40
34
  "hidden": false
41
35
  },
42
36
  {
43
37
  "name": "heading level",
44
38
  "options": {
45
- "heading": {
46
- "title": "Card title",
47
- "level": 1
48
- },
39
+ "title": "Card title",
40
+ "headingLevel": 1,
49
41
  "body": "<p>Card body</p>"
50
42
  },
51
- "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
43
+ "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h1 class=\" tna-heading tna-heading--m tna-card__heading\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
52
44
  "hidden": false
53
45
  },
54
46
  {
55
47
  "name": "with link",
56
48
  "options": {
57
- "heading": {
58
- "title": "Card title",
59
- "level": 3
60
- },
49
+ "title": "Card title",
50
+ "headingLevel": 3,
61
51
  "href": "#",
62
52
  "body": "<p>Card body</p>"
63
53
  },
64
- "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\"></a></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
54
+ "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
65
55
  "hidden": false
66
56
  },
67
57
  {
68
58
  "name": "with text",
69
59
  "options": {
70
- "heading": {
71
- "title": "Card title",
72
- "level": 3
73
- },
60
+ "title": "Card title",
61
+ "headingLevel": 3,
74
62
  "text": "Card body"
75
63
  },
76
- "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
64
+ "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
77
65
  "hidden": false
78
66
  },
79
67
  {
80
68
  "name": "with image",
81
69
  "options": {
82
- "heading": {
83
- "title": "Card title",
84
- "level": 3
85
- },
86
- "image": {
87
- "src": "https://loremflickr.com/640/360",
88
- "alt": "A placeholder image",
89
- "width": 640,
90
- "height": 360
91
- },
70
+ "title": "Card title",
71
+ "headingLevel": 3,
72
+ "imageSrc": "https://loremflickr.com/640/360",
73
+ "imageAlt": "A placeholder image",
74
+ "imageWidth": 640,
75
+ "imageHeight": 360,
92
76
  "body": "<p>Card body</p>"
93
77
  },
94
- "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
78
+ "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--m tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
95
79
  "hidden": false
96
80
  },
97
81
  {
98
82
  "name": "with image and alternative sources",
99
83
  "options": {
100
- "heading": {
101
- "title": "Card title",
102
- "level": 3
103
- },
104
- "image": {
105
- "src": "https://loremflickr.com/640/360",
106
- "alt": "A placeholder image",
107
- "width": 640,
108
- "height": 360,
109
- "sources": [
110
- {
111
- "src": "https://www.gstatic.com/webp/gallery/2.webp",
112
- "type": "image/webp"
113
- }
114
- ]
115
- },
84
+ "title": "Card title",
85
+ "headingLevel": 3,
86
+ "imageSrc": "https://loremflickr.com/640/360",
87
+ "imageAlt": "A placeholder image",
88
+ "imageWidth": 640,
89
+ "imageHeight": 360,
90
+ "imageSources": [
91
+ {
92
+ "src": "https://www.gstatic.com/webp/gallery/2.webp",
93
+ "type": "image/webp"
94
+ }
95
+ ],
116
96
  "body": "<p>Card body</p>"
117
97
  },
118
- "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
98
+ "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--m tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"640\" height=\"360\"><source srcset=\"https://loremflickr.com/640/360\" type=\"image/jpeg\" width=\"640\" height=\"360\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
119
99
  "hidden": false
120
100
  },
121
101
  {
122
102
  "name": "with link and image",
123
103
  "options": {
124
- "heading": {
125
- "title": "Card title",
126
- "level": 3
127
- },
128
- "image": {
129
- "src": "https://loremflickr.com/640/360",
130
- "alt": "A placeholder image",
131
- "width": 640,
132
- "height": 360
133
- },
104
+ "title": "Card title",
105
+ "headingLevel": 3,
106
+ "imageSrc": "https://loremflickr.com/640/360",
107
+ "imageAlt": "A placeholder image",
108
+ "imageWidth": 640,
109
+ "imageHeight": 360,
134
110
  "href": "#",
135
111
  "body": "<p>Card body</p>"
136
112
  },
137
- "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\"></a></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
113
+ "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><a href=\"#\" class=\"tna-card__image-container\" tabindex=\"-1\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></a><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
138
114
  "hidden": false
139
115
  },
140
116
  {
141
117
  "name": "with actions",
142
118
  "options": {
143
- "heading": {
144
- "title": "Card title",
145
- "level": 3
146
- },
119
+ "title": "Card title",
120
+ "headingLevel": 3,
147
121
  "body": "<p>Card body</p>",
148
122
  "actions": [
149
123
  {
@@ -153,87 +127,75 @@
153
127
  }
154
128
  ]
155
129
  },
156
- "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" role=\"button\"title=\"Go and do the action\">Card action</a></div></div></div>",
130
+ "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" role=\"button\"title=\"Go and do the action\">Card action</a></div></div></div>",
157
131
  "hidden": false
158
132
  },
159
133
  {
160
134
  "name": "with a label",
161
135
  "options": {
162
- "heading": {
163
- "title": "Card title",
164
- "level": 3
165
- },
136
+ "title": "Card title",
137
+ "headingLevel": 3,
166
138
  "label": "New",
167
139
  "body": "<p>Card body</p>"
168
140
  },
169
- "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
141
+ "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
170
142
  "hidden": false
171
143
  },
172
144
  {
173
145
  "name": "with a boxed style",
174
146
  "options": {
175
- "heading": {
176
- "title": "Card title",
177
- "level": 3
178
- },
147
+ "title": "Card title",
148
+ "headingLevel": 3,
179
149
  "body": "<p>Card body</p>",
180
150
  "style": "boxed"
181
151
  },
182
- "html": "<div class=\"tna-card tna-card--contrast\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
152
+ "html": "<div class=\"tna-card tna-card--contrast\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
183
153
  "hidden": false
184
154
  },
185
155
  {
186
156
  "name": "with a accent style",
187
157
  "options": {
188
- "heading": {
189
- "title": "Card title",
190
- "level": 3
191
- },
158
+ "title": "Card title",
159
+ "headingLevel": 3,
192
160
  "body": "<p>Card body</p>",
193
161
  "style": "accent"
194
162
  },
195
- "html": "<div class=\"tna-card tna-card--accent\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
163
+ "html": "<div class=\"tna-card tna-card--accent\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
196
164
  "hidden": false
197
165
  },
198
166
  {
199
167
  "name": "with an unknown style",
200
168
  "options": {
201
- "heading": {
202
- "title": "Card title",
203
- "level": 3
204
- },
169
+ "title": "Card title",
170
+ "headingLevel": 3,
205
171
  "body": "<p>Card body</p>",
206
172
  "style": "foobar"
207
173
  },
208
- "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
174
+ "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
209
175
  "hidden": false
210
176
  },
211
177
  {
212
178
  "name": "with classes",
213
179
  "options": {
214
- "heading": {
215
- "title": "Card title",
216
- "level": 3
217
- },
180
+ "title": "Card title",
181
+ "headingLevel": 3,
218
182
  "body": "<p>Card body</p>",
219
183
  "classes": "card__test-class"
220
184
  },
221
- "html": "<div class=\"tna-card card__test-class\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
185
+ "html": "<div class=\"tna-card card__test-class\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
222
186
  "hidden": false
223
187
  },
224
188
  {
225
189
  "name": "with attributes",
226
190
  "options": {
227
- "heading": {
228
- "title": "Card title",
229
- "level": 3
230
- },
191
+ "title": "Card title",
192
+ "headingLevel": 3,
231
193
  "body": "<p>Card body</p>",
232
194
  "attributes": {
233
195
  "data-testattribute": "foobar"
234
196
  }
235
197
  },
236
- "html": "<div class=\"tna-card \" data-module=\"tna-card\" data-testattribute=\"foobar\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
198
+ "html": "<div class=\"tna-card \" data-module=\"tna-card\" data-testattribute=\"foobar\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
237
199
  "hidden": false
238
200
  }
239
201
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nationalarchives/frontend",
3
- "version": "0.1.19-prerelease",
3
+ "version": "0.1.20-prerelease",
4
4
  "description": "The National Archives frontend styles",
5
5
  "scripts": {
6
6
  "start": "storybook dev -p 6006",