@amedia/brick-mcp 0.1.3 → 0.1.4

package/dist/data/components/brick-tag.md

@@ -0,0 +1,335 @@
+---
+name: brick-tag
+version: 0.0.14
+selector: brick-tag-v0
+category: Navigation
+tags: [tag, label, link, category, topic, metadata, badge]
+use_cases: [article-tags, categories, topics, filtering, navigation, metadata-display]
+related: [brick-tokens, brick-template]
+---
+
+# Brick Tag
+
+A clickable tag component for displaying and linking to topics, categories, or metadata with multiple visual variants and customizable styling.
+
+## Key Capabilities
+
+- Three visual variants: simple, prominent, and capsule
+- Three size options: small, medium, and large
+- Renders as clickable link with proper semantics
+- Customizable colors via CSS custom properties
+- ARIA label support for accessibility
+- Underline decoration on hover
+- Server-side rendering support
+
+## Props/Attributes
+
+| Attribute         | Type                                    | Default    | Required | Description                                       |
+| ----------------- | --------------------------------------- | ---------- | -------- | ------------------------------------------------- |
+| `data-text`       | string                                  | -          | yes      | Tag text to display                               |
+| `data-link`       | string                                  | -          | yes      | URL to navigate to when tag is clicked            |
+| `data-version`    | `"simple" \| "prominent" \| "capsule"`  | `"simple"` | no       | Visual style variant                              |
+| `data-size`       | `"small" \| "medium" \| "large"`        | `"medium"` | no       | Tag size                                          |
+| `data-aria-label` | string                                  | -          | no       | ARIA label for accessibility                      |
+
+## Examples
+
+### Basic Tag (Simple)
+
+```html
+<brick-tag-v0
+  data-text="Ullhunder"
+  data-link="https://ba.no/tag/ullhunder"
+  data-aria-label="Vis artikler om Ullhunder"
+>
+</brick-tag-v0>
+```
+
+### Prominent Tag
+
+```html
+<brick-tag-v0
+  data-text="Breaking News"
+  data-link="/tag/breaking-news"
+  data-version="prominent"
+  data-size="large"
+  data-aria-label="Se nyheter om Breaking News"
+>
+</brick-tag-v0>
+```
+
+### Capsule Tag
+
+```html
+<brick-tag-v0
+  data-text="Sports"
+  data-link="/tag/sports"
+  data-version="capsule"
+>
+</brick-tag-v0>
+```
+
+### Small Tag
+
+```html
+<brick-tag-v0
+  data-text="Technology"
+  data-link="/tag/technology"
+  data-size="small"
+>
+</brick-tag-v0>
+```
+
+### Multiple Tags
+
+```html
+<div class="article-tags">
+  <brick-tag-v0
+    data-text="Politics"
+    data-link="/tag/politics"
+    data-version="simple"
+  ></brick-tag-v0>
+
+  <brick-tag-v0
+    data-text="Economy"
+    data-link="/tag/economy"
+    data-version="simple"
+  ></brick-tag-v0>
+
+  <brick-tag-v0
+    data-text="Environment"
+    data-link="/tag/environment"
+    data-version="simple"
+  ></brick-tag-v0>
+</div>
+```
+
+## Server-Side Rendering
+
+```javascript
+import { renderBrickTag } from '@amedia/brick-tag/template';
+
+const html = renderBrickTag({
+  dataText: 'Technology',
+  dataLink: '/tag/technology',
+  dataVersion: 'prominent',
+  dataSize: 'medium',
+  dataAriaLabel: 'View articles about technology',
+});
+```
+
+## Styling and CSS Properties
+
+Customize tag appearance using CSS custom properties:
+
+```css
+brick-tag-v0 {
+  /* Foreground color */
+  --b-tag-link-color-fg: #008300;
+
+  /* Background color */
+  --b-tag-link-color-bg: rgb(221, 255, 221);
+
+  /* Hover background color */
+  --b-tag-link-hover-bg: rgb(199, 245, 199);
+
+  /* Hover foreground color */
+  --b-tag-link-hover-fg: #008300;
+}
+```
+
+### Example: Custom Green Tag
+
+```html
+<brick-tag-v0
+  data-text="Environment"
+  data-link="/tag/environment"
+  data-version="prominent"
+  style="--b-tag-link-color-fg: #008300; --b-tag-link-color-bg: rgb(221, 255, 221); --b-tag-link-hover-bg: rgb(199, 245, 199); --b-tag-link-hover-fg: #008300"
+>
+</brick-tag-v0>
+```
+
+## Visual Variants
+
+### Simple
+
+Default style with minimal visual weight. Best for inline tag lists.
+
+```html
+<brick-tag-v0
+  data-text="Simple Tag"
+  data-link="/tag/simple"
+  data-version="simple"
+>
+</brick-tag-v0>
+```
+
+### Prominent
+
+More visual emphasis with stronger background. Best for featured tags.
+
+```html
+<brick-tag-v0
+  data-text="Prominent Tag"
+  data-link="/tag/prominent"
+  data-version="prominent"
+>
+</brick-tag-v0>
+```
+
+### Capsule
+
+Rounded capsule style. Best for category badges.
+
+```html
+<brick-tag-v0
+  data-text="Capsule Tag"
+  data-link="/tag/capsule"
+  data-version="capsule"
+>
+</brick-tag-v0>
+```
+
+## Accessibility
+
+- Renders as semantic `<a>` link element
+- Support for custom ARIA labels via `data-aria-label`
+- Keyboard accessible (Tab to focus, Enter to activate)
+- Focus visible states for keyboard navigation
+- Underline on hover for visual feedback
+
+## Common Patterns
+
+### Article Tags List
+
+```html
+<div class="article-meta">
+  <h3>Tags:</h3>
+  <brick-tag-v0
+    data-text="Local News"
+    data-link="/tag/local-news"
+  ></brick-tag-v0>
+
+  <brick-tag-v0
+    data-text="City Council"
+    data-link="/tag/city-council"
+  ></brick-tag-v0>
+
+  <brick-tag-v0
+    data-text="Infrastructure"
+    data-link="/tag/infrastructure"
+  ></brick-tag-v0>
+</div>
+```
+
+### Category Navigation
+
+```html
+<nav aria-label="Article categories">
+  <brick-tag-v0
+    data-text="Sports"
+    data-link="/category/sports"
+    data-version="prominent"
+    data-size="large"
+  ></brick-tag-v0>
+
+  <brick-tag-v0
+    data-text="Politics"
+    data-link="/category/politics"
+    data-version="prominent"
+    data-size="large"
+  ></brick-tag-v0>
+
+  <brick-tag-v0
+    data-text="Culture"
+    data-link="/category/culture"
+    data-version="prominent"
+    data-size="large"
+  ></brick-tag-v0>
+</nav>
+```
+
+### Topic Pills
+
+```html
+<div class="topic-pills">
+  <brick-tag-v0
+    data-text="Breaking"
+    data-link="/breaking"
+    data-version="capsule"
+    data-size="small"
+  ></brick-tag-v0>
+
+  <brick-tag-v0
+    data-text="Trending"
+    data-link="/trending"
+    data-version="capsule"
+    data-size="small"
+  ></brick-tag-v0>
+</div>
+```
+
+## Framework Integration
+
+### Svelte
+
+```svelte
+<script>
+  const tags = [
+    { text: 'Politics', link: '/tag/politics' },
+    { text: 'Economy', link: '/tag/economy' },
+    { text: 'Sports', link: '/tag/sports' }
+  ];
+</script>
+
+{#each tags as tag}
+  <brick-tag-v0
+    data-text={tag.text}
+    data-link={tag.link}
+    data-version="simple"
+  />
+{/each}
+```
+
+### React
+
+```jsx
+function TagList({ tags }) {
+  return (
+    <div className="tags">
+      {tags.map((tag) => (
+        <brick-tag-v0
+          key={tag.id}
+          data-text={tag.text}
+          data-link={tag.link}
+          data-version="simple"
+        />
+      ))}
+    </div>
+  );
+}
+```
+
+## Technical Details
+
+- **Custom Element**: `brick-tag-v0`
+- **Base Class**: BrickElement
+- **Dependencies**:
+  - @amedia/brick-template (base class)
+  - @amedia/brick-tokens (design tokens)
+- **Renders as**: `<a>` (anchor/link element)
+- **SSR Compatible**: Yes, with template function
+
+## Important Notes
+
+- Both `data-text` and `data-link` are required attributes
+- The component always renders as a clickable link
+- Hover state includes underline decoration for better UX
+- Custom colors should maintain WCAG AA contrast requirements
+- The component is versioned as v0, indicating it may have breaking changes in future releases
+- Future versions may add dismissable and filter functionality (noted in types but not yet implemented)
+
+## Version
+
+Current version: 0.0.14

package/dist/data/components/brick-teaser-player.md

@@ -0,0 +1,248 @@
+---
+name: brick-teaser-player
+version: 1.1.0
+selector: brick-teaser-player-v1
+category: Media
+tags: [video, player, teaser, flowplayer, media, autoplay, next-video, overlay]
+use_cases: [video-teasers, video-playlists, next-video-recommendations, video-articles, media-content]
+related: [brick-player, brick-image, brick-button, brick-tokens]
+---
+
+# Brick Teaser Player
+
+A video teaser component that wraps brick-player and provides "next video" overlay functionality with poster image, title, and premium indicators.
+
+## Key Capabilities
+
+- Wraps brick-player for video playback
+- Automatic "next video" overlay at video end
+- Displays next video metadata (title, poster, duration, premium status)
+- Configurable aspect ratios (landscape, square, etc.)
+- Autoplay support with muted playback
+- Ad management (enable/disable ads)
+- Premium content indicators
+- Accessibility support with ARIA labels
+- Server-side rendering support
+- Integrates with brick-image for poster display
+
+## Props/Attributes
+
+| Attribute               | Type   | Default | Required | Description                                                 |
+| ----------------------- | ------ | ------- | -------- | ----------------------------------------------------------- |
+| `data-title`            | string | -       | no       | Video title for display                                     |
+| `data-media-id`         | string | -       | yes      | Flowplayer media UUID                                       |
+| `data-player-id`        | string | -       | no       | Flowplayer configuration UUID                               |
+| `data-autoplay`         | string | `false` | no       | Enable autoplay ("true" or "false")                         |
+| `data-ads-disabled`     | string | `false` | no       | Disable video ads ("true" or "false")                       |
+| `data-aspect-ratio`     | string | `16:9`  | no       | Video aspect ratio (e.g., "16:9", "1:1", "9:16")            |
+| `data-start`            | string | `0`     | no       | Start offset in seconds                                     |
+| `data-next`             | string | -       | no       | Next video recommendation data (deprecated, use individual) |
+| `data-next-acp-id`      | string | -       | no       | Next video ACP identifier                                   |
+| `data-next-title`       | string | -       | no       | Next video title                                            |
+| `data-next-poster-url`  | string | -       | no       | Next video poster image URL                                 |
+| `data-next-duration`    | string | -       | no       | Next video duration in seconds                              |
+| `data-next-permalink`   | string | -       | no       | Next video permalink/URL                                    |
+| `data-next-premium`     | string | `false` | no       | Whether next video is premium content ("true" or "false")   |
+| `data-muted`            | string | `false` | no       | Mute video audio ("true" or "false")                        |
+
+## Examples
+
+### Basic Video Teaser
+
+```html
+<brick-teaser-player-v1
+  data-media-id="5f4ff76f-7080-4972-b4b8-32007dfb545e"
+  data-title="Breaking News Video"
+>
+</brick-teaser-player-v1>
+```
+
+### With Player Configuration
+
+```html
+<brick-teaser-player-v1
+  data-media-id="5f4ff76f-7080-4972-b4b8-32007dfb545e"
+  data-player-id="your-flowplayer-config-uuid"
+  data-title="News Report"
+  data-ads-disabled="true"
+>
+</brick-teaser-player-v1>
+```
+
+### Square Video with Autoplay
+
+```html
+<brick-teaser-player-v1
+  data-media-id="5f4ff76f-7080-4972-b4b8-32007dfb545e"
+  data-aspect-ratio="1:1"
+  data-autoplay="true"
+  data-muted="true"
+>
+</brick-teaser-player-v1>
+```
+
+### With Next Video Recommendation
+
+```html
+<brick-teaser-player-v1
+  data-media-id="5f4ff76f-7080-4972-b4b8-32007dfb545e"
+  data-title="Current Video"
+  data-next-acp-id="5-95-2075626"
+  data-next-title="Anders Magnus: – Harris bør kaste ham til ulvene"
+  data-next-poster-url="https://g.acdn.no/obscura/API/image/r1/ece5/a/1729163346000/nett/2024/10/17/13/Kamala_Harris.jpg"
+  data-next-duration="409"
+  data-next-permalink="/video/therefore-heggebo-first-choice/v/5-8-2786319"
+  data-next-premium="false"
+>
+</brick-teaser-player-v1>
+```
+
+### Premium Next Video
+
+```html
+<brick-teaser-player-v1
+  data-media-id="5f4ff76f-7080-4972-b4b8-32007dfb545e"
+  data-next-title="Premium Content Video"
+  data-next-poster-url="https://example.com/poster.jpg"
+  data-next-duration="300"
+  data-next-permalink="/video/premium-content/v/5-8-1234567"
+  data-next-premium="true"
+>
+</brick-teaser-player-v1>
+```
+
+### Vertical Video (Stories/Reels)
+
+```html
+<brick-teaser-player-v1
+  data-media-id="5f4ff76f-7080-4972-b4b8-32007dfb545e"
+  data-aspect-ratio="9:16"
+  data-autoplay="true"
+  data-muted="true"
+>
+</brick-teaser-player-v1>
+```
+
+## Programmatic Usage
+
+```javascript
+const teaser = document.querySelector('brick-teaser-player-v1');
+
+// Update next video programmatically
+teaser.dataNextTitle = 'New Video Title';
+teaser.dataNextPosterUrl = 'https://example.com/new-poster.jpg';
+teaser.dataNextDuration = '180';
+teaser.dataNextPermalink = '/video/new-video/v/5-8-9999999';
+```
+
+## Server-Side Rendering
+
+```javascript
+import { renderBrickTeaserPlayer } from '@amedia/brick-teaser-player/template';
+
+const html = renderBrickTeaserPlayer({
+  dataMediaId: '5f4ff76f-7080-4972-b4b8-32007dfb545e',
+  dataTitle: 'Video Title',
+  dataAspectRatio: '16:9',
+  dataAutoplay: 'true',
+  dataMuted: 'true',
+  dataNextTitle: 'Next Video',
+  dataNextPosterUrl: 'https://example.com/poster.jpg',
+  dataNextDuration: '300',
+  dataNextPermalink: '/video/next',
+  dataNextPremium: 'false',
+});
+```
+
+## Next Video Overlay
+
+When a video ends, the component automatically displays an overlay showing:
+
+- Next video poster image (via brick-image)
+- Next video title
+- Video duration
+- Premium indicator (if applicable)
+- Clickable link to next video
+
+The overlay can be:
+- Closed with ESC key
+- Closed by clicking outside the overlay
+- Navigated to by clicking the link
+
+## Accessibility
+
+- Implements proper ARIA labels for video player controls
+- Next video overlay is keyboard accessible
+- Focus management for overlay open/close states
+- Screen reader announcements for next video recommendations
+- Semantic HTML for video metadata
+
+## Common Patterns
+
+### Video Playlist
+
+```html
+<brick-teaser-player-v1
+  data-media-id="video-1-id"
+  data-title="Video 1"
+  data-next-title="Video 2"
+  data-next-poster-url="/poster-2.jpg"
+  data-next-duration="240"
+  data-next-permalink="/video-2"
+>
+</brick-teaser-player-v1>
+```
+
+### Autoplay Muted Video
+
+```html
+<brick-teaser-player-v1
+  data-media-id="5f4ff76f-7080-4972-b4b8-32007dfb545e"
+  data-autoplay="true"
+  data-muted="true"
+  data-ads-disabled="true"
+>
+</brick-teaser-player-v1>
+```
+
+### Video with ACP Tracking
+
+```html
+<brick-teaser-player-v1
+  data-media-id="5f4ff76f-7080-4972-b4b8-32007dfb545e"
+  data-next-acp-id="5-95-2075626"
+  data-next-title="Next Video Title"
+  data-next-poster-url="https://example.com/poster.jpg"
+  data-next-duration="409"
+  data-next-permalink="/video/next"
+>
+</brick-teaser-player-v1>
+```
+
+## Technical Details
+
+- **Custom Element**: `brick-teaser-player-v1`
+- **Base Class**: BrickElement
+- **Dependencies**:
+  - @amedia/brick-player (video playback)
+  - @amedia/brick-image (poster images)
+  - @amedia/brick-button (UI controls)
+  - @amedia/brick-template (base class)
+  - @amedia/brick-tokens (design tokens)
+- **Renders as**: Container wrapping brick-player with overlay functionality
+- **SSR Compatible**: Yes, with template function
+
+## Important Notes
+
+- The component is a wrapper around brick-player, inheriting its Flowplayer functionality
+- Media IDs must be valid Flowplayer UUIDs
+- Next video data can be provided individually or via the deprecated `data-next` JSON attribute
+- The next video overlay appears automatically when the current video ends
+- Premium content is indicated visually in the overlay
+- Aspect ratio should match the actual video format for best display
+- Autoplay typically requires muted playback to work across browsers
+- The component integrates with video-yoshi API for recommendations
+
+## Version
+
+Current version: 1.1.0