@amedia/brick-mcp 0.1.3 → 0.1.4

package/data/components/brick-teaser-reels.md

@@ -0,0 +1,190 @@
+---
+name: brick-teaser-reels
+version: 0.4.5
+selector: brick-teaser-reels-v0
+category: Media
+tags: [reels, video, teaser, stories, vertical-video, short-form]
+use_cases: [vertical-videos, stories, reels, short-form-content, social-media-style]
+related: [brick-image, brick-button, brick-tokens, brick-teaser-player]
+---
+
+# Brick Teaser Reels
+
+A vertical video teaser component optimized for reels/stories-style content with poster image, video preview, and customizable aspect ratios.
+
+## Key Capabilities
+
+- Vertical video format optimized for reels/stories
+- Poster image display with brick-image
+- Video source support
+- Customizable aspect ratios
+- Duration display
+- Click-to-play functionality
+- Event type tracking
+- Responsive design
+- Server-side rendering support
+
+## Props/Attributes
+
+| Attribute           | Type   | Default | Required | Description                                        |
+| ------------------- | ------ | ------- | -------- | -------------------------------------------------- |
+| `data-title`        | string | -       | yes      | Reel title                                         |
+| `data-url`          | string | -       | yes      | Link URL for the reel                              |
+| `data-image-src`    | string | -       | yes      | Poster image URL                                   |
+| `data-video-src`    | string | -       | no       | Video source URL for preview                       |
+| `data-aspect-ratio` | string | `9:16`  | no       | Video aspect ratio (typically vertical for reels)  |
+| `data-duration`     | string | -       | no       | Video duration in seconds                          |
+| `data-event-type`   | string | -       | no       | Event type for tracking/analytics                  |
+
+## Examples
+
+### Basic Reel Teaser
+
+```html
+<brick-teaser-reels-v0
+  data-title="Breaking News Reel"
+  data-url="/reels/breaking-news"
+  data-image-src="https://example.com/poster.jpg"
+  data-aspect-ratio="9:16"
+>
+</brick-teaser-reels-v0>
+```
+
+### With Video Preview
+
+```html
+<brick-teaser-reels-v0
+  data-title="Sports Highlight"
+  data-url="/reels/sports-highlight"
+  data-image-src="https://example.com/sports-poster.jpg"
+  data-video-src="https://example.com/preview.mp4"
+  data-duration="30"
+  data-aspect-ratio="9:16"
+>
+</brick-teaser-reels-v0>
+```
+
+### With Duration Display
+
+```html
+<brick-teaser-reels-v0
+  data-title="Quick Update"
+  data-url="/reels/quick-update"
+  data-image-src="https://example.com/update-poster.jpg"
+  data-duration="15"
+  data-aspect-ratio="9:16"
+>
+</brick-teaser-reels-v0>
+```
+
+### With Event Tracking
+
+```html
+<brick-teaser-reels-v0
+  data-title="Trending Topic"
+  data-url="/reels/trending"
+  data-image-src="https://example.com/trending-poster.jpg"
+  data-event-type="reel-click"
+  data-aspect-ratio="9:16"
+>
+</brick-teaser-reels-v0>
+```
+
+## Server-Side Rendering
+
+```javascript
+import { renderBrickTeaserPlayer } from '@amedia/brick-teaser-reels/template';
+
+const html = renderBrickTeaserPlayer({
+  dataTitle: 'My Reel',
+  dataUrl: '/reels/my-reel',
+  dataImageSrc: 'https://example.com/poster.jpg',
+  dataVideoSrc: 'https://example.com/preview.mp4',
+  dataAspectRatio: '9:16',
+  dataDuration: '30',
+  dataEventType: 'reel-view',
+});
+```
+
+## Common Patterns
+
+### Reels Feed
+
+```html
+<div class="reels-feed">
+  <brick-teaser-reels-v0
+    data-title="Reel 1"
+    data-url="/reels/1"
+    data-image-src="https://example.com/reel1.jpg"
+    data-duration="15"
+  ></brick-teaser-reels-v0>
+
+  <brick-teaser-reels-v0
+    data-title="Reel 2"
+    data-url="/reels/2"
+    data-image-src="https://example.com/reel2.jpg"
+    data-duration="20"
+  ></brick-teaser-reels-v0>
+
+  <brick-teaser-reels-v0
+    data-title="Reel 3"
+    data-url="/reels/3"
+    data-image-src="https://example.com/reel3.jpg"
+    data-duration="25"
+  ></brick-teaser-reels-v0>
+</div>
+```
+
+### Stories-Style Navigation
+
+```html
+<nav class="stories-container">
+  <brick-teaser-reels-v0
+    data-title="Story 1"
+    data-url="/stories/1"
+    data-image-src="https://example.com/story1.jpg"
+    data-aspect-ratio="9:16"
+  ></brick-teaser-reels-v0>
+
+  <brick-teaser-reels-v0
+    data-title="Story 2"
+    data-url="/stories/2"
+    data-image-src="https://example.com/story2.jpg"
+    data-aspect-ratio="9:16"
+  ></brick-teaser-reels-v0>
+</nav>
+```
+
+## Accessibility
+
+- Semantic link elements for navigation
+- Alt text for poster images
+- Keyboard accessible
+- Focus visible states
+- ARIA labels for video duration
+
+## Technical Details
+
+- **Custom Element**: `brick-teaser-reels-v0`
+- **Base Class**: BrickElement
+- **Dependencies**:
+  - @amedia/brick-image (poster display)
+  - @amedia/brick-button (interaction)
+  - @amedia/brick-template (base class)
+  - @amedia/brick-tokens (design tokens)
+- **Renders as**: Link wrapper with image and video preview
+- **SSR Compatible**: Yes, with template function
+
+## Important Notes
+
+- Optimized for vertical (9:16) aspect ratio typical of reels/stories
+- Poster image is required for initial display
+- Video source is optional and used for preview/hover effects
+- Duration is displayed as seconds
+- The component is versioned as v0, indicating potential breaking changes
+- Event type can be used for analytics tracking
+- Integrates with brick-image for responsive poster display
+
+## Version
+
+Current version: 0.4.5

package/data/components/brick-teaser.md

@@ -0,0 +1,262 @@
+---
+name: brick-teaser
+version: 21.2.1
+selector: brick-teaser-v21
+category: Data Display
+tags: [teaser, card, article, content, preview, link, image, metadata]
+use_cases: [article-listings, content-grids, news-feeds, content-previews, homepage, front-page]
+related: [brick-image, brick-avatar, brick-countdown, brick-icon, brick-pill, brick-player, brick-button]
+---
+
+# Brick Teaser
+
+A comprehensive content teaser/card component for displaying article previews with image, title, metadata, and various content types (story, feature, video, gallery, etc.).
+
+## Key Capabilities
+
+- Multiple teaser types (story, feature, video, gallery, opinion, review, commercial, etc.)
+- Responsive image display with brick-image
+- Avatar support for authors/publications
+- Countdown timer integration
+- Premium content indicators (pill badges)
+- Video player integration
+- Breaking news styling
+- Commercial/sponsored content support
+- Analytics (ADP) integration
+- Rich metadata display (author, date, publication)
+- Multiple layout variations
+- Accessibility-first design
+- Server-side rendering support
+- Custom elements manifest for tooling
+
+## Teaser Types
+
+The component supports multiple content types:
+
+- **story**: Standard article teaser
+- **feature**: Featured content
+- **video**: Video content with player
+- **gallery**: Photo gallery
+- **opinion**: Opinion pieces
+- **review**: Review articles
+- **commercial**: Sponsored/commercial content
+- **sport**: Sports content
+- **alt**: Alternative layouts
+- **untold**: Special content type
+
+## Key Features
+
+### Image Display
+- Responsive images via brick-image
+- Multiple aspect ratios support
+- Lazy loading
+- Poster images for video content
+
+### Metadata
+- Author information with avatars
+- Publication branding
+- Publish/update timestamps
+- Premium indicators
+- Breaking news badges
+- Content category pills
+
+### Interactive Elements
+- Clickable teaser links
+- Video player integration
+- Countdown timers for live events
+- Action buttons
+
+### Analytics
+- ADP tracking integration
+- Content model tagging
+- Teaser click tracking
+- Custom event types
+
+## Examples
+
+### Basic Article Teaser
+
+```html
+<brick-teaser-v21
+  data-type="story"
+  data-title="Breaking News Story"
+  data-url="/article/breaking-news"
+  data-image-src="https://example.com/image.jpg"
+  data-lead-text="This is the article lead text providing a brief summary..."
+>
+</brick-teaser-v21>
+```
+
+### Video Teaser
+
+```html
+<brick-teaser-v21
+  data-type="video"
+  data-title="Watch: Amazing Video"
+  data-url="/video/amazing"
+  data-image-src="https://example.com/video-poster.jpg"
+  data-media-id="video-uuid-here"
+  data-duration="180"
+>
+</brick-teaser-v21>
+```
+
+### Premium Content
+
+```html
+<brick-teaser-v21
+  data-type="story"
+  data-title="Premium Article"
+  data-url="/article/premium"
+  data-image-src="https://example.com/premium.jpg"
+  data-is-premium="true"
+  data-pill-version="premium"
+>
+</brick-teaser-v21>
+```
+
+### With Author Information
+
+```html
+<brick-teaser-v21
+  data-type="opinion"
+  data-title="Opinion: Important Topic"
+  data-url="/opinion/important-topic"
+  data-image-src="https://example.com/opinion.jpg"
+  data-author-name="John Doe"
+  data-author-avatar-url="https://example.com/author.jpg"
+  data-published-date="2026-01-08T12:00:00Z"
+>
+</brick-teaser-v21>
+```
+
+### Gallery Teaser
+
+```html
+<brick-teaser-v21
+  data-type="gallery"
+  data-title="Photo Gallery: Event Coverage"
+  data-url="/gallery/event"
+  data-image-src="https://example.com/gallery-cover.jpg"
+  data-gallery-count="25"
+>
+</brick-teaser-v21>
+```
+
+### Breaking News
+
+```html
+<brick-teaser-v21
+  data-type="story"
+  data-title="Breaking: Major Development"
+  data-url="/breaking/major-development"
+  data-image-src="https://example.com/breaking.jpg"
+  data-is-breaking="true"
+  data-breaking-skin="breaking"
+>
+</brick-teaser-v21>
+```
+
+### Commercial/Sponsored
+
+```html
+<brick-teaser-v21
+  data-type="commercial"
+  data-title="Sponsored: Product Review"
+  data-url="/commercial/product-review"
+  data-image-src="https://example.com/commercial.jpg"
+  data-commercial-category="shopping"
+>
+</brick-teaser-v21>
+```
+
+## Server-Side Rendering
+
+```javascript
+import { renderTeaser } from '@amedia/brick-teaser/template';
+
+const html = renderTeaser({
+  teaserData: {
+    type: 'story',
+    title: 'Article Title',
+    url: '/article/slug',
+    image: {
+      src: 'https://example.com/image.jpg',
+      alt: 'Image description',
+    },
+    leadText: 'Article summary...',
+    author: {
+      name: 'Author Name',
+      avatarUrl: 'https://example.com/avatar.jpg',
+    },
+    publishedDate: '2026-01-08T12:00:00Z',
+    isPremium: false,
+  },
+  renderOptions: {
+    removeLogScope: false,
+    aoiBeta: false,
+  },
+});
+```
+
+## Analytics Integration
+
+The component integrates with ADP (Amedia Data Platform):
+
+```html
+<brick-teaser-v21
+  data-type="story"
+  data-title="Tracked Article"
+  data-url="/article/tracked"
+  data-adp-type="teaser"
+  data-content-model="free"
+  data-identifier="5-8-123456"
+>
+</brick-teaser-v21>
+```
+
+## Accessibility
+
+- Semantic HTML with proper heading hierarchy
+- ARIA labels for all interactive elements
+- Alt text for images
+- Keyboard navigation support
+- Screen reader announcements
+- Focus visible states
+- Proper link semantics
+
+## Technical Details
+
+- **Custom Element**: `brick-teaser-v21`
+- **Base Class**: BrickElement
+- **Dependencies**:
+  - @amedia/brick-image (image display)
+  - @amedia/brick-avatar (author avatars)
+  - @amedia/brick-countdown (live event timers)
+  - @amedia/brick-icon (icons)
+  - @amedia/brick-pill (badges/indicators)
+  - @amedia/brick-player (video playback)
+  - @amedia/brick-button (actions)
+  - @amedia/brick-template (base class)
+  - @amedia/brick-tokens (design tokens)
+  - @amedia/brick-themes (theming)
+- **Renders as**: Article/link wrapper with rich metadata
+- **SSR Compatible**: Yes, with template function
+- **Custom Elements Manifest**: Included for IDE/tooling support
+
+## Important Notes
+
+- Version 21.2.1 is the current stable version (mature component)
+- Supports complex teaser configurations with many optional features
+- Integrates deeply with Amedia's content management system (ACP)
+- The component is highly configurable for different content types
+- Breaking news, premium, and commercial content have special styling
+- Video teasers can integrate brick-player for inline playback
+- Gallery teasers show image count
+- Countdown timers for live events
+- The component generates custom-elements.json for IDE autocomplete
+- Used extensively across Amedia publications for content display
+
+## Version
+
+Current version: 21.2.1

package/data/components/brick-template.md

@@ -0,0 +1,226 @@
+---
+name: brick-template
+version: 2.0.0
+selector: N/A
+category: Utilities
+tags: [template, base-class, web-components, internal, foundation, boilerplate]
+use_cases: [component-development, web-component-creation, brick-component-foundation]
+related: [brick-tokens]
+---
+
+# Brick Template
+
+An internal foundational package that provides the base class and utilities for building Brick web components, handling common boilerplate and web component lifecycle management.
+
+## Key Capabilities
+
+- Base `BrickElement` class for all Brick components
+- `defineCustomElement` decorator for component registration
+- Handles web component lifecycle (connectedCallback, disconnectedCallback, etc.)
+- Attribute observation and reactivity
+- Property-to-attribute synchronization
+- Shadow DOM management
+- Framework-agnostic web component standard implementation
+- TypeScript support with type definitions
+
+## Core Exports
+
+### BrickElement Class
+
+The base class that all Brick components extend from. Provides:
+
+- Automatic custom element registration
+- Lifecycle hooks
+- Attribute observation
+- Property management
+- Shadow DOM handling
+
+### defineCustomElement Decorator
+
+A TypeScript decorator for declaring custom elements with automatic registration.
+
+## Examples
+
+### Basic Component
+
+```typescript
+import { BrickElement, defineCustomElement } from '@amedia/brick-template';
+import { css } from '@amedia/brick-tokens';
+
+const titleClass = css({
+  color: '$supportiveBlackText',
+  backgroundColor: '$supportiveBlackBg'
+});
+
+@defineCustomElement({
+  selector: 'brick-is-awesome',
+})
+class BrickIsAwesome extends BrickElement {
+  get HTML() {
+    return `<h1 class="${titleClass}">Brick is Awesome!</h1>`;
+  }
+}
+```
+
+### Component with Properties
+
+```typescript
+import { BrickElement, defineCustomElement } from '@amedia/brick-template';
+
+@defineCustomElement({
+  selector: 'brick-example',
+})
+class BrickExample extends BrickElement {
+  // Define observed attributes
+  static get observedAttributes() {
+    return ['data-label', 'data-value'];
+  }
+
+  // Getters for properties
+  get dataLabel() {
+    return this.getAttribute('data-label') || '';
+  }
+
+  set dataLabel(value: string) {
+    this.setAttribute('data-label', value);
+  }
+
+  get dataValue() {
+    return this.getAttribute('data-value') || '';
+  }
+
+  set dataValue(value: string) {
+    this.setAttribute('data-value', value);
+  }
+
+  // Render method
+  get HTML() {
+    return `
+      <div>
+        <span>${this.dataLabel}</span>
+        <span>${this.dataValue}</span>
+      </div>
+    `;
+  }
+}
+```
+
+### Component with Lifecycle Hooks
+
+```typescript
+import { BrickElement, defineCustomElement } from '@amedia/brick-template';
+
+@defineCustomElement({
+  selector: 'brick-lifecycle',
+})
+class BrickLifecycle extends BrickElement {
+  connectedCallback() {
+    super.connectedCallback();
+    console.log('Component connected to DOM');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    console.log('Component removed from DOM');
+  }
+
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    console.log(`Attribute ${name} changed from ${oldValue} to ${newValue}`);
+  }
+
+  get HTML() {
+    return `<div>Lifecycle Component</div>`;
+  }
+}
+```
+
+## Usage in Brick Components
+
+All Brick components use brick-template as their foundation:
+
+```typescript
+import { BrickElement, defineCustomElement } from '@amedia/brick-template';
+import { css } from '@amedia/brick-tokens';
+
+@defineCustomElement({
+  selector: 'brick-button-v9',
+})
+export class BrickButton extends BrickElement {
+  static get observedAttributes() {
+    return ['data-label', 'data-version', 'data-size'];
+  }
+
+  get HTML() {
+    return `<button>${this.dataLabel}</button>`;
+  }
+}
+```
+
+## BrickElement API
+
+### Properties
+
+- `shadowRoot`: Access to the component's shadow DOM
+- `observedAttributes`: Static property defining which attributes to watch
+
+### Lifecycle Methods
+
+- `connectedCallback()`: Called when element is inserted into DOM
+- `disconnectedCallback()`: Called when element is removed from DOM
+- `attributeChangedCallback(name, oldValue, newValue)`: Called when observed attribute changes
+- `adoptedCallback()`: Called when element is moved to a new document
+
+### Template Method
+
+- `get HTML()`: Override this getter to define your component's template
+
+## Framework Compatibility
+
+Brick-template creates standard web components that work with:
+
+- Vanilla JavaScript
+- Svelte
+- React
+- Vue
+- Angular
+- Any framework that supports web components
+
+```javascript
+// Vanilla JS
+import '@amedia/brick-button';
+const button = document.createElement('brick-button-v9');
+button.dataLabel = 'Click me';
+
+// Svelte
+import '@amedia/brick-button';
+<brick-button-v9 data-label="Click me" />
+
+// React
+import '@amedia/brick-button';
+<brick-button-v9 data-label="Click me" />
+```
+
+## Technical Details
+
+- **Package Type**: Internal utility/foundation package
+- **Output**: BrickElement class and defineCustomElement decorator
+- **Standard**: Web Components standard (Custom Elements v1)
+- **TypeScript**: Full TypeScript support with type definitions
+- **Shadow DOM**: Automatic shadow DOM creation and management
+- **Dependencies**: None (standalone foundation)
+
+## Important Notes
+
+- This is an internal package used by all Brick components
+- Not meant to be used directly in applications
+- Provides the foundation for the Brick component architecture
+- All Brick components extend BrickElement
+- Handles common web component boilerplate automatically
+- Version 2.0.0 is the current stable version
+- Components must override the `HTML` getter to define their template
+- The `@defineCustomElement` decorator automatically registers the custom element
+
+## Version
+
+Current version: 2.0.0