@amedia/brick-mcp 1.0.1 → 1.0.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 (34) hide show
  1. package/data/components/brick-alt-teaser.md +9 -4
  2. package/data/components/brick-button.md +3 -2
  3. package/data/components/brick-byline.md +138 -0
  4. package/data/components/brick-carousel.md +8 -6
  5. package/data/components/brick-classnames.md +19 -14
  6. package/data/components/brick-dialog.md +3 -3
  7. package/data/components/brick-expand.md +129 -0
  8. package/data/components/brick-illustrations.md +6 -5
  9. package/data/components/brick-pill.md +9 -7
  10. package/data/components/brick-player.md +6 -3
  11. package/data/components/brick-share.md +5 -2
  12. package/data/components/brick-skip-link.md +78 -0
  13. package/data/components/brick-stepper.md +2 -2
  14. package/data/components/brick-teaser.md +8 -7
  15. package/data/components/brick-tokens.md +12 -8
  16. package/data/components-metadata.json +41 -29
  17. package/dist/data/components/brick-alt-teaser.md +9 -4
  18. package/dist/data/components/brick-button.md +3 -2
  19. package/dist/data/components/brick-byline.md +138 -0
  20. package/dist/data/components/brick-carousel.md +8 -6
  21. package/dist/data/components/brick-classnames.md +19 -14
  22. package/dist/data/components/brick-dialog.md +3 -3
  23. package/dist/data/components/brick-expand.md +129 -0
  24. package/dist/data/components/brick-illustrations.md +6 -5
  25. package/dist/data/components/brick-pill.md +9 -7
  26. package/dist/data/components/brick-player.md +6 -3
  27. package/dist/data/components/brick-share.md +5 -2
  28. package/dist/data/components/brick-skip-link.md +78 -0
  29. package/dist/data/components/brick-stepper.md +2 -2
  30. package/dist/data/components/brick-teaser.md +8 -7
  31. package/dist/data/components/brick-tokens.md +12 -8
  32. package/dist/data/components-metadata.json +41 -29
  33. package/package.json +32 -32
  34. package/scripts/check-docs-versions.js +121 -0
package/data/components/brick-skip-link.md ADDED
@@ -0,0 +1,78 @@
1
+ ---
2
+ name: brick-skip-link
3
+ version: 0.0.1
4
+ selector: brick-skip-link-v0
5
+ category: Navigation
6
+ tags: [accessibility, a11y, skip-link, navigation, focus, keyboard, bypass]
7
+ use_cases: [main-navigation, header, keyboard-navigation, accessibility-improvement, bypass-blocks]
8
+ related: []
9
+ ---
10
+
11
+ # Brick Skip Link
12
+
13
+ A component that allows keyboard users to bypass blocks of repetitive content, such as navigation menus.
14
+
15
+ ## Key Capabilities
16
+
17
+ - Provides a "skip to content" link for improved keyboard navigation.
18
+ - Becomes visible only when it receives focus via keyboard tabbing.
19
+ - Helps users meet WCAG 2.4.1 (Bypass Blocks).
20
+ - Renders a semantic `<a>` tag for accessibility and SEO.
21
+ - Customizable link text and target element ID.
22
+ - Server-side rendering support for immediate availability.
23
+
24
+ ## Props/Attributes
25
+
26
+ | Attribute | Type | Default | Required | Description |
27
+ | ----------- | ------ | ----------------------- | -------- | ---------------------------------------------------- |
28
+ | `data-href` | string | - | yes | The selector for the target element (e.g., `#main`). |
29
+ | `data-text` | string | "Skip to main content" | no | The accessible text for the link. |
30
+
31
+ ## Usage
32
+
33
+ ### Server-side rendering (preferred)
34
+
35
+ Import the render function from the `/template` submodule and call it to produce an HTML string.
36
+
37
+ ```ts
38
+ import { renderBrickSkipLink } from '@amedia/brick-skip-link/template';
39
+
40
+ const html = renderBrickSkipLink({
41
+ dataHref: '#main-content',
42
+ dataText: 'Hopp til hovedinnhold'
43
+ });
44
+
45
+ // Include CSS file
46
+ <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-skip-link/v0/css/styles.css">
47
+ ```
48
+
49
+ ### Client-side (declarative HTML)
50
+
51
+ Use the custom element directly in HTML
52
+
53
+ ```html
54
+ <script type="module" src="https://assets.acdn.no/pkg/@amedia/brick-skip-link/v0/brick-skip-link.js"></script>
55
+
56
+ <brick-skip-link-v0 data-href="#main-content" data-text="Hopp til hovedinnhold"></brick-skip-link-v0>
57
+ ```
58
+
59
+ ## Accessibility
60
+
61
+ This component is a fundamental accessibility feature.
62
+
63
+ - **Bypass Blocks**: It directly addresses WCAG 2.4.1 by providing a mechanism to bypass blocks of content that are repeated on multiple Web pages.
64
+ - **Focus Management**: The component is designed to be visually hidden until it receives keyboard focus, making it unobtrusive for mouse users but available for keyboard and screen reader users.
65
+ - **Semantic HTML**: It renders a native `<a>` element with a valid `href`, ensuring it is correctly identified as a link by assistive technologies.
66
+
67
+ ## Technical Details
68
+
69
+ - **Package version**: `0.0.1`
70
+ - **Custom Element tag**: `brick-skip-link-v0`
71
+ - **Dependencies**:
72
+ - `@amedia/brick-template`
73
+ - `@amedia/brick-tokens`
74
+
75
+ ## Important Notes
76
+
77
+ - For the skip link to be effective, it should be one of the very first focusable elements in the page's DOM, ideally right after the `<body>` tag.
78
+ - The value of `data-href` must be a valid CSS selector that points to a single, existing element on the page (e.g., `#main-content`). The target element should have a corresponding `id`.
package/data/components/brick-stepper.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: brick-stepper
3
- version: 1.0.18
3
+ version: 1.1.9
4
4
  selector: brick-stepper-v1
5
5
  category: Navigation
6
6
  tags: [stepper, progress, steps, wizard, multi-step, process, indicator, accessibility]
@@ -316,4 +316,4 @@ function CheckoutFlow() {
316
316
 
317
317
  ## Version
318
318
 
319
- Current version: 1.0.18
319
+ Current version: 1.1.9
package/data/components/brick-teaser.md CHANGED
@@ -1,11 +1,11 @@
1
1
  ---
2
2
  name: brick-teaser
3
- version: 21.2.1
3
+ version: 22.2.9
4
4
  selector: brick-teaser-v22
5
5
  category: Data Display
6
6
  tags: [teaser, card, article, content, preview, link, image, metadata]
7
7
  use_cases: [article-listings, content-grids, news-feeds, content-previews, homepage, front-page]
8
- related: [brick-image, brick-avatar, brick-countdown, brick-icon, brick-pill, brick-player, brick-button]
8
+ related: [brick-image, brick-avatar, brick-countdown, brick-icon, brick-pill, brick-teaser-player, brick-button]
9
9
  ---
10
10
 
11
11
  # Brick Teaser
@@ -19,7 +19,7 @@ A comprehensive content teaser/card component for displaying article previews wi
19
19
  - Avatar support for authors/publications
20
20
  - Countdown timer integration
21
21
  - Premium content indicators (pill badges)
22
- - Video player integration
22
+ - Video teaser support (inline playback via brick-teaser-player)
23
23
  - Breaking news styling
24
24
  - Commercial/sponsored content support
25
25
  - Analytics (ADP) integration
@@ -62,7 +62,7 @@ The component supports multiple content types:
62
62
 
63
63
  ### Interactive Elements
64
64
  - Clickable teaser links
65
- - Video player integration
65
+ - Video teaser support (inline playback via brick-teaser-player)
66
66
  - Countdown timers for live events
67
67
  - Action buttons
68
68
 
@@ -246,12 +246,13 @@ The component integrates with ADP (Amedia Data Platform):
246
246
 
247
247
  ## Important Notes
248
248
 
249
- - Version 21.2.1 is the current stable version (mature component)
249
+ - Version 22.2.9 is the current stable version (mature component)
250
250
  - Supports complex teaser configurations with many optional features
251
251
  - Integrates deeply with Amedia's content management system (ACP)
252
252
  - The component is highly configurable for different content types
253
253
  - Breaking news, premium, and commercial content have special styling
254
- - Video teasers can integrate brick-player for inline playback
254
+ - **Breaking change in v22.0.0**: Removed `playOnFront` attribute and inline video playback functionality. Use `brick-teaser-player` for teasers that play videos
255
+ - Video teasers now require `brick-teaser-player` wrapper for inline playback
255
256
  - Gallery teasers show image count
256
257
  - Countdown timers for live events
257
258
  - The component generates custom-elements.json for IDE autocomplete
@@ -259,4 +260,4 @@ The component integrates with ADP (Amedia Data Platform):
259
260
 
260
261
  ## Version
261
262
 
262
- Current version: 21.2.1
263
+ Current version: 22.2.9
package/data/components/brick-tokens.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: brick-tokens
3
- version: 6.0.11
3
+ version: 6.2.1
4
4
  selector: N/A
5
5
  category: Utilities
6
6
  tags: [design-tokens, css, styling, themes, colors, spacing, typography, shadows]
@@ -106,11 +106,11 @@ Load the theme CSS file and set the corresponding class on a container (e.g. `<b
106
106
 
107
107
  ```html
108
108
  <!-- Load theme CSS from Eik CDN -->
109
- <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.11/css/alfa/styles.css" crossorigin="anonymous" />
110
- <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.11/css/bravo/styles.css" crossorigin="anonymous" />
111
- <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.11/css/charlie/styles.css" crossorigin="anonymous" />
112
- <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.11/css/nettavisen/styles.css" crossorigin="anonymous" />
113
- <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.11/css/alt/styles.css" crossorigin="anonymous" />
109
+ <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.2.1/css/alfa/styles.css" crossorigin="anonymous" />
110
+ <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.2.1/css/bravo/styles.css" crossorigin="anonymous" />
111
+ <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.2.1/css/charlie/styles.css" crossorigin="anonymous" />
112
+ <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.2.1/css/nettavisen/styles.css" crossorigin="anonymous" />
113
+ <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.2.1/css/alt/styles.css" crossorigin="anonymous" />
114
114
 
115
115
  <!-- Apply theme class to a container -->
116
116
  <body class="themeAlfa">...</body>
@@ -128,7 +128,7 @@ The package provides multiple formats:
128
128
 
129
129
  ```html
130
130
  <!-- Load theme CSS (one per page) -->
131
- <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.11/css/alfa/styles.css" crossorigin="anonymous" />
131
+ <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.2.1/css/alfa/styles.css" crossorigin="anonymous" />
132
132
  ```
133
133
 
134
134
  ## Common Token Examples
@@ -188,10 +188,14 @@ npm run validate # Validate CSS files
188
188
 
189
189
  ## Important Notes
190
190
 
191
- - Version 6.0.11 is the current stable version
191
+ - Version 6.2.1 is the current stable version
192
192
  - Tokens are generated from Figma via Tokens Studio + Style Dictionary
193
193
  - CSS custom properties use `--brick-{category}-{tokenName}` prefix (e.g. `--brick-colors-baseFg`, `--brick-space-x1`)
194
194
  - Theme CSS files are scoped to a class (e.g. `.themeAlfa`) — apply the class to a container element
195
195
  - There is no single `tokens.css` — CSS is per-theme: `dist/css/{theme}/styles.css`
196
196
  - The package is used by all Brick components for consistent styling
197
197
  - `sroStyle` is a utility class export for screen-reader-only visually hidden content
198
+ - Brand accent colors available since v6.2.0: `custom-one`, `custom-two`, `custom-three`, and `opinion` with `surface`, `surface-subtle`, and `text` variants
199
+ - Brand-specific publication colors available since v6.1.0 via CDN:
200
+ - CSS: `https://assets.acdn.no/pkg/@amedia/brick-tokens/v6/brand/css/{publication-key}/styles.css`
201
+ - JSON: `https://assets.acdn.no/pkg/@amedia/brick-tokens/v6/brand/mobile/{publication-key}/colors.json`
package/data/components-metadata.json CHANGED
@@ -1,7 +1,7 @@
1
1
  [
2
2
  {
3
3
  "name": "brick-alt-teaser",
4
- "version": "8.1.18",
4
+ "version": "8.1.23",
5
5
  "selector": "brick-alt-teaser-v8",
6
6
  "category": "Display",
7
7
  "tags": [
@@ -11,7 +11,7 @@
11
11
  },
12
12
  {
13
13
  "name": "brick-avatar",
14
- "version": "0.2.56",
14
+ "version": "0.2.60",
15
15
  "selector": "brick-avatar-v0",
16
16
  "description": "brick-avatar component",
17
17
  "category": "Display",
@@ -23,7 +23,7 @@
23
23
  },
24
24
  {
25
25
  "name": "brick-button",
26
- "version": "9.4.14",
26
+ "version": "9.4.18",
27
27
  "selector": "brick-button-v9",
28
28
  "category": "Forms",
29
29
  "tags": [
@@ -35,7 +35,7 @@
35
35
  },
36
36
  {
37
37
  "name": "brick-byline",
38
- "version": "1.0.18",
38
+ "version": "1.0.22",
39
39
  "selector": "brick-byline-v1",
40
40
  "description": "brick-byline component",
41
41
  "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-byline",
@@ -43,7 +43,7 @@
43
43
  },
44
44
  {
45
45
  "name": "brick-card",
46
- "version": "7.3.28",
46
+ "version": "7.3.32",
47
47
  "selector": "brick-card-v7",
48
48
  "category": "Layout",
49
49
  "tags": [
@@ -54,7 +54,7 @@
54
54
  },
55
55
  {
56
56
  "name": "brick-carousel",
57
- "version": "2.3.1",
57
+ "version": "2.3.5",
58
58
  "selector": "brick-carousel-v2",
59
59
  "description": "Simple carousel for any content passed to it.",
60
60
  "category": "Display",
@@ -78,7 +78,7 @@
78
78
  },
79
79
  {
80
80
  "name": "brick-countdown",
81
- "version": "3.0.3",
81
+ "version": "3.0.7",
82
82
  "selector": "brick-countdown-v3",
83
83
  "description": "brick-countdown component",
84
84
  "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-countdown",
@@ -86,7 +86,7 @@
86
86
  },
87
87
  {
88
88
  "name": "brick-dialog",
89
- "version": "2.1.11",
89
+ "version": "2.1.15",
90
90
  "selector": "brick-dialog-v2",
91
91
  "description": "brick-dialog component",
92
92
  "category": "Feedback",
@@ -98,7 +98,7 @@
98
98
  },
99
99
  {
100
100
  "name": "brick-expand",
101
- "version": "0.0.23",
101
+ "version": "0.0.27",
102
102
  "selector": "brick-expand-v0",
103
103
  "description": "brick-expand component",
104
104
  "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-expand",
@@ -117,7 +117,7 @@
117
117
  },
118
118
  {
119
119
  "name": "brick-helloworld",
120
- "version": "2.0.22",
120
+ "version": "2.0.28",
121
121
  "selector": "brick-helloworld-v2",
122
122
  "description": "Brick Hello World component",
123
123
  "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-helloworld",
@@ -125,7 +125,7 @@
125
125
  },
126
126
  {
127
127
  "name": "brick-icon",
128
- "version": "2.3.20",
128
+ "version": "2.3.24",
129
129
  "selector": "brick-icon-v2",
130
130
  "category": "Display",
131
131
  "tags": [
@@ -143,7 +143,7 @@
143
143
  },
144
144
  {
145
145
  "name": "brick-image",
146
- "version": "6.0.23",
146
+ "version": "6.0.27",
147
147
  "selector": "brick-image-v6",
148
148
  "category": "Display",
149
149
  "tags": [
@@ -154,7 +154,7 @@
154
154
  },
155
155
  {
156
156
  "name": "brick-input",
157
- "version": "4.0.2",
157
+ "version": "4.0.7",
158
158
  "selector": "brick-input-v4",
159
159
  "description": "brick-input component",
160
160
  "category": "Forms",
@@ -167,14 +167,14 @@
167
167
  },
168
168
  {
169
169
  "name": "brick-pill",
170
- "version": "10.1.2",
170
+ "version": "10.1.6",
171
171
  "selector": "brick-pill-v10",
172
172
  "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-pill",
173
173
  "mainJsFile": "brick-pill.js"
174
174
  },
175
175
  {
176
176
  "name": "brick-player",
177
- "version": "2.3.3",
177
+ "version": "2.4.3",
178
178
  "selector": "brick-player-v2",
179
179
  "description": "Component for playing video and audio files",
180
180
  "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-player",
@@ -182,7 +182,7 @@
182
182
  },
183
183
  {
184
184
  "name": "brick-published",
185
- "version": "4.0.19",
185
+ "version": "4.0.23",
186
186
  "selector": "brick-published-v4",
187
187
  "description": "brick-published",
188
188
  "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-published",
@@ -190,15 +190,27 @@
190
190
  },
191
191
  {
192
192
  "name": "brick-share",
193
- "version": "0.3.24",
193
+ "version": "0.4.3",
194
194
  "selector": "brick-share-v0",
195
195
  "description": "brick-share component",
196
196
  "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-share",
197
197
  "mainJsFile": "brick-share.js"
198
198
  },
199
+ {
200
+ "name": "brick-skip-link",
201
+ "version": "0.0.2",
202
+ "selector": "brick-skip-link-v0",
203
+ "description": "brick-skip-link component",
204
+ "category": "Navigation",
205
+ "tags": [
206
+ "navigation"
207
+ ],
208
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-skip-link",
209
+ "mainJsFile": "brick-skip-link.js"
210
+ },
199
211
  {
200
212
  "name": "brick-stepper",
201
- "version": "1.1.5",
213
+ "version": "1.1.9",
202
214
  "selector": "brick-stepper-v1",
203
215
  "description": "brick-stepper component",
204
216
  "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-stepper",
@@ -206,7 +218,7 @@
206
218
  },
207
219
  {
208
220
  "name": "brick-tab",
209
- "version": "0.1.26",
221
+ "version": "0.1.30",
210
222
  "selector": "brick-tab-v0",
211
223
  "description": "brick-tab component",
212
224
  "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-tab",
@@ -214,7 +226,7 @@
214
226
  },
215
227
  {
216
228
  "name": "brick-tabs",
217
- "version": "0.1.27",
229
+ "version": "0.1.31",
218
230
  "selector": "brick-tabs-v0",
219
231
  "description": "brick-tabs component handling tablist, tabs and tabpanel",
220
232
  "category": "Navigation",
@@ -226,7 +238,7 @@
226
238
  },
227
239
  {
228
240
  "name": "brick-tag",
229
- "version": "0.0.26",
241
+ "version": "0.0.30",
230
242
  "selector": "brick-tag-v0",
231
243
  "description": "brick-tag component",
232
244
  "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-tag",
@@ -234,7 +246,7 @@
234
246
  },
235
247
  {
236
248
  "name": "brick-teaser",
237
- "version": "22.2.1",
249
+ "version": "22.2.9",
238
250
  "selector": "brick-teaser-v22",
239
251
  "description": "Teaser component.",
240
252
  "category": "Display",
@@ -246,7 +258,7 @@
246
258
  },
247
259
  {
248
260
  "name": "brick-teaser-player",
249
- "version": "1.1.15",
261
+ "version": "1.1.20",
250
262
  "selector": "brick-teaser-player-v1",
251
263
  "description": "brick-video-teaser component",
252
264
  "category": "Display",
@@ -258,7 +270,7 @@
258
270
  },
259
271
  {
260
272
  "name": "brick-teaser-reels",
261
- "version": "0.4.18",
273
+ "version": "0.4.22",
262
274
  "selector": "brick-teaser-reels-v0",
263
275
  "description": "brick-teaser-reels component",
264
276
  "category": "Display",
@@ -270,7 +282,7 @@
270
282
  },
271
283
  {
272
284
  "name": "brick-textarea",
273
- "version": "2.0.22",
285
+ "version": "2.0.26",
274
286
  "selector": "brick-textarea-v2",
275
287
  "description": "brick-textarea component",
276
288
  "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-textarea",
@@ -286,7 +298,7 @@
286
298
  },
287
299
  {
288
300
  "name": "brick-toast",
289
- "version": "0.1.40",
301
+ "version": "0.1.44",
290
302
  "selector": "brick-toast-v0",
291
303
  "description": "brick-toast component",
292
304
  "category": "Feedback",
@@ -298,7 +310,7 @@
298
310
  },
299
311
  {
300
312
  "name": "brick-toggle",
301
- "version": "3.1.27",
313
+ "version": "3.1.32",
302
314
  "selector": "brick-toggle-v3",
303
315
  "description": "brick-toggle component",
304
316
  "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-toggle",
@@ -306,7 +318,7 @@
306
318
  },
307
319
  {
308
320
  "name": "brick-tokens",
309
- "version": "6.0.12",
321
+ "version": "6.2.1",
310
322
  "selector": "brick-tokens-v6",
311
323
  "description": "Tokens package",
312
324
  "category": "Utilities",
@@ -318,7 +330,7 @@
318
330
  },
319
331
  {
320
332
  "name": "brick-tooltip",
321
- "version": "1.0.29",
333
+ "version": "1.0.33",
322
334
  "selector": "brick-tooltip-v1",
323
335
  "description": "brick-tooltip component",
324
336
  "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-tooltip",
package/dist/data/components/brick-alt-teaser.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: brick-alt-teaser
3
- version: 8.0.65
3
+ version: 8.1.23
4
4
  selector: brick-alt-teaser-v8
5
5
  category: Media
6
6
  tags: [teaser, article, news, card, content-preview, media, alt-theme]
@@ -35,6 +35,7 @@ A flexible article teaser component designed for the Alt theme, supporting multi
35
35
  - Analytics integration with ADP (Amedia Data Platform)
36
36
  - Customizable background colors for visual categorization
37
37
  - Accessibility features including ARIA labels and screen reader support
38
+ - Compact (small) layout variant for horizontal display
38
39
 
39
40
  ## Props/Attributes
40
41
 
@@ -51,13 +52,13 @@ A flexible article teaser component designed for the Alt theme, supporting multi
51
52
  | `srcset` | string | '' | no | Responsive image srcset for different screen sizes |
52
53
  | `imagesizes` | string | '' | no | Image sizes attribute for responsive images |
53
54
  | `imageRatio` | string | '' | no | Custom aspect ratio (e.g., "16/9", "4/3", "1.33") |
54
- | `aoi` | number | - | no | Area of interest width for image cropping |
55
+ | `aoi` | string | '' | no | Area of interest for image cropping |
55
56
  | `altText` | string | '' | no | Alternative text for images |
56
57
  | `tags` | string | '' | no | Comma-separated content tags |
57
58
  | `pretitle` | string | '' | no | Text displayed above the main title (for features) |
58
59
  | `feature` | boolean | false | no | Enables feature layout variant |
59
60
  | `opinion` | boolean | false | no | Enables opinion layout variant |
60
- | `review` | number | - | no | Review rating (1-6, displayed as dice icons) |
61
+ | `review` | string | '' | no | Review rating (1-6, displayed as dice icons) |
61
62
  | `gallery` | string | '' | no | Comma-separated list of gallery image URLs |
62
63
  | `isVideo` | boolean | false | no | Enables video teaser mode |
63
64
  | `videoId` | string | '' | no | Video identifier for brick-player |
@@ -71,6 +72,10 @@ A flexible article teaser component designed for the Alt theme, supporting multi
71
72
  | `publicationOnHoverEventName` | string | '' | no | Custom event name dispatched on publication logo hover |
72
73
  | `siteId` | string | '' | no | Site identifier for analytics |
73
74
  | `small` | boolean | false | no | Enables compact layout variant |
75
+ | `video` | string | '' | no | Video URL for direct video embedding |
76
+ | `logo` | string | '' | no | Publication logo URL |
77
+ | `testId` | string | '' | no | Test identifier for automated testing |
78
+ | `variantId` | string | '' | no | A/B test variant identifier |
74
79
 
75
80
  ## Examples
76
81
 
@@ -261,4 +266,4 @@ The component automatically selects layout based on attributes:
261
266
 
262
267
  ## Version
263
268
 
264
- Current version: 8.0.65
269
+ Current version: 8.1.23
package/dist/data/components/brick-button.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: brick-button
3
- version: 9.3.1
3
+ version: 9.4.18
4
4
  selector: brick-button-v9
5
5
  category: Forms
6
6
  tags: [button, cta, action, interactive, link, form-control]
@@ -32,6 +32,7 @@ A customizable, accessible button component that supports multiple visual varian
32
32
  - CSS custom properties for styling customization
33
33
  - Analytics integration via ADP attributes
34
34
  - Framework-agnostic web component with SSR support
35
+ - Reactive attribute observation for dynamic updates (label, icon, disabled, linkto)
35
36
 
36
37
  ## Props/Attributes
37
38
 
@@ -370,4 +371,4 @@ brick-button-v9 {
370
371
 
371
372
  ## Version
372
373
 
373
- Current version: 9.3.1
374
+ Current version: 9.4.18
package/dist/data/components/brick-byline.md ADDED
@@ -0,0 +1,138 @@
1
+ ---
2
+ name: brick-byline
3
+ version: 1.0.22
4
+ selector: brick-byline-v0
5
+ category: Data Display
6
+ tags: [byline, author, journalist, profile, avatar, article-metadata]
7
+ use_cases:
8
+ [
9
+ article-bylines,
10
+ author-attribution,
11
+ journalist-profiles,
12
+ content-metadata,
13
+ ]
14
+ related: [brick-avatar, brick-teaser, brick-tokens]
15
+ ---
16
+
17
+ # Brick Byline
18
+
19
+ A component for displaying article bylines with author name, avatar, work title, email link, and profile URL.
20
+
21
+ ## Key Capabilities
22
+
23
+ - Displays author name with optional avatar image or initials
24
+ - Links to author profile URL or email
25
+ - Shows work title alongside avatar
26
+ - Schema.org Person microdata for structured data
27
+ - Integrates brick-avatar for profile images
28
+ - Server-side rendering support via template submodule
29
+ - Semantic HTML with `<address>` element for linked bylines
30
+
31
+ ## Props/Attributes
32
+
33
+ | Attribute | Type | Default | Required | Description |
34
+ | ------------------ | ------ | ------- | -------- | -------------------------------------------------------------- |
35
+ | `data-name` | string | - | yes | Author's display name |
36
+ | `data-email` | string | - | no | Author's email address (renders as mailto: link if no profile) |
37
+ | `data-profile-url` | string | - | no | URL to the author's profile page |
38
+ | `data-image-url` | string | - | no | URL to the author's avatar image |
39
+ | `data-work-title` | string | - | no | Author's role or title (e.g., "Politisk redaktør") |
40
+ | `data-initials` | string | - | no | Author's initials (used as avatar fallback when no image) |
41
+
42
+ ## Examples
43
+
44
+ ### Basic Byline
45
+
46
+ ```html
47
+ <brick-byline-v0 data-name="Ola Nordmann"> </brick-byline-v0>
48
+ ```
49
+
50
+ ### Byline with Profile Link
51
+
52
+ ```html
53
+ <brick-byline-v0
54
+ data-name="Kari Nordmann"
55
+ data-profile-url="https://www.example.com/journalist/kari"
56
+ >
57
+ </brick-byline-v0>
58
+ ```
59
+
60
+ ### Byline with Avatar and Work Title
61
+
62
+ ```html
63
+ <brick-byline-v0
64
+ data-name="Hege Breen Bakken"
65
+ data-work-title="Politisk redaktør"
66
+ data-image-url="https://example.com/images/hege.jpg"
67
+ data-profile-url="https://www.dt.no/journalist/hege"
68
+ >
69
+ </brick-byline-v0>
70
+ ```
71
+
72
+ ### Byline with Email
73
+
74
+ ```html
75
+ <brick-byline-v0
76
+ data-name="Per Hansen"
77
+ data-email="per.hansen@example.com"
78
+ data-work-title="Journalist"
79
+ >
80
+ </brick-byline-v0>
81
+ ```
82
+
83
+ ### Byline with Initials (No Image)
84
+
85
+ ```html
86
+ <brick-byline-v0
87
+ data-name="Lars Olsen"
88
+ data-initials="LO"
89
+ data-profile-url="https://www.example.com/journalist/lars"
90
+ >
91
+ </brick-byline-v0>
92
+ ```
93
+
94
+ ## Server-Side Rendering
95
+
96
+ ```javascript
97
+ import { renderBrickByline } from '@amedia/brick-byline/template';
98
+
99
+ const bylineHTML = renderBrickByline({
100
+ dataName: 'Hege Breen Bakken',
101
+ dataWorkTitle: 'Politisk redaktør',
102
+ dataImageUrl: 'https://example.com/images/hege.jpg',
103
+ dataProfileUrl: 'https://www.dt.no/journalist/hege',
104
+ });
105
+ ```
106
+
107
+ ## Accessibility
108
+
109
+ - Uses `<address>` element for bylines with profile links (semantic HTML)
110
+ - ARIA label includes work title and name (e.g., "Politisk redaktør Hege Breen Bakken")
111
+ - Profile/email links include `aria-label="Kontakt {name}"` for screen readers
112
+ - Uses Schema.org Person microdata (`itemprop="author"`, `itemprop="name"`, `itemprop="url"`)
113
+ - Avatar images include alt text via brick-avatar
114
+
115
+ ## Technical Details
116
+
117
+ - **Custom Element**: `brick-byline-v0`
118
+ - **Base Class**: BrickElement (from @amedia/brick-template)
119
+ - **Dependencies**:
120
+ - @amedia/brick-avatar (profile images)
121
+ - @amedia/brick-template (base class)
122
+ - @amedia/brick-tokens (design tokens)
123
+ - **Renders as**: `<address>` (with link) or `<div>` (without link)
124
+ - **Schema.org**: Implements Person microdata
125
+ - **SSR Compatible**: Yes, via `renderBrickByline` from template submodule
126
+
127
+ ## Important Notes
128
+
129
+ - When `data-profile-url` is provided, the byline renders as a linked `<address>` element
130
+ - When only `data-email` is provided (no profile URL), the link becomes a `mailto:` link
131
+ - When neither profile URL nor email is provided, the byline renders as a non-interactive `<div>`
132
+ - Work title is only displayed when an avatar image is also provided
133
+ - Initials are used as avatar fallback when no `data-image-url` is provided
134
+ - The `isRendered` flag in SSR prevents client-side re-rendering of server-rendered markup
135
+
136
+ ## Version
137
+
138
+ Current version: 1.0.22