@amedia/brick-mcp 0.0.2 → 0.1.0

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

@@ -0,0 +1,570 @@
+---
+name: brick-icons
+version: 2.1.0
+category: Media
+tags: [icons, svg, sprite, graphics, design-system, figma]
+use_cases:
+  [
+    icons,
+    ui-enhancement,
+    navigation-icons,
+    action-icons,
+    status-indicators,
+    brand-icons,
+    decorative-graphics,
+  ]
+related: [brick-button, brick-card, brick-actions]
+---
+
+# Brick Icons
+
+SVG icon sprite library providing theme-specific icon sets distributed via CDN for consistent, scalable graphics across Amedia's design system.
+
+## Key Capabilities
+
+- **Theme-Specific Sprites**: Separate SVG sprite files for each theme (alfa, bravo, charlie, nettavisen, alt)
+- **CDN Distribution**: Icons served via Eik CDN for optimal performance and caching
+- **Figma Automation**: Icons automatically synced from Figma using Figmagic
+- **Scalable Graphics**: SVG format ensures crisp rendering at any size without quality loss
+- **Color Inheritance**: Icons use `currentColor` for easy color customization via CSS
+- **Comprehensive Icon Set**: Includes navigation, action, status, social, and brand icons
+
+## Available Themes
+
+| Theme      | CDN Path                                                                       |
+| ---------- | ------------------------------------------------------------------------------ |
+| alfa       | `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg`       |
+| bravo      | `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/bravo/icons.svg`      |
+| charlie    | `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/charlie/icons.svg`    |
+| nettavisen | `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/nettavisen/icons.svg` |
+| alt        | `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alt/icons.svg`        |
+
+## Icon Categories
+
+**Navigation**: arrow-down, arrow-up, arrow-left, arrow-right, arrow-dropdown, arrow-dropup, chevron-down, chevron-up, close, menu
+
+**Actions**: add, delete, copy, share, share-url, edit, settings-fill, settings-outline, camera, gift
+
+**Status**: checkmark, checkmark-toggle, check-circle, error-circle, warning-circle, info-circle, lock, notification-off
+
+**Media**: play, pause, replay, volume-on, volume-off, desktop, mobile
+
+**Social/Brand**: facebook, instagram, linkedin, twitter, youtube, appstore, googleplay
+
+**Tags/Labels**: pill-tag, pill-video, pill-breaking, pill-untold, plusall, tag-fill, tag-outline
+
+**Other**: clock, datepicker, dice-1 through dice-6, logo-alt
+
+## Examples
+
+### Basic Icon Usage
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+  <use
+    href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#checkmark"
+  ></use>
+</svg>
+```
+
+### Accessible Icon with Title
+
+```html
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  aria-labelledby="search-title"
+>
+  <title id="search-title">Search</title>
+  <use
+    href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#search"
+  ></use>
+</svg>
+```
+
+### Decorative Icon (Hidden from Screen Readers)
+
+```html
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  aria-hidden="true"
+>
+  <use
+    href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/nettavisen/icons.svg#arrow-right"
+  ></use>
+</svg>
+```
+
+### Icon with Custom Color and Size
+
+```html
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  style="color: #ff0000;"
+>
+  <use
+    href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/charlie/icons.svg#heart"
+  ></use>
+</svg>
+```
+
+### Icon in Button Component
+
+```html
+<brick-button-v9 data-variant="primary">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    aria-hidden="true"
+  >
+    <use
+      href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#add"
+    ></use>
+  </svg>
+  Add Item
+</brick-button-v9>
+```
+
+### Social Media Icon Link
+
+```html
+<a href="https://facebook.com/example" aria-label="Follow us on Facebook">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    aria-hidden="true"
+  >
+    <use
+      href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alt/icons.svg#facebook"
+    ></use>
+  </svg>
+</a>
+```
+
+## Framework Integration
+
+### Svelte
+
+```svelte
+<script>
+  const theme = 'alfa';
+  const iconName = 'checkmark';
+  const iconUrl = `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/${theme}/icons.svg#${iconName}`;
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+  <use href={iconUrl}></use>
+</svg>
+```
+
+### React
+
+```jsx
+function Icon({ theme, name, size = 24, title }) {
+  const iconUrl = `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/${theme}/icons.svg#${name}`;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      aria-labelledby={title ? `icon-${name}` : undefined}
+    >
+      {title && <title id={`icon-${name}`}>{title}</title>}
+      <use href={iconUrl}></use>
+    </svg>
+  );
+}
+
+// Usage
+<Icon theme="alfa" name="checkmark" title="Success" />;
+```
+
+### Vue
+
+```vue
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size">
+    <title v-if="title">{{ title }}</title>
+    <use :href="iconUrl"></use>
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    theme: { type: String, required: true },
+    name: { type: String, required: true },
+    size: { type: Number, default: 24 },
+    title: String,
+  },
+  computed: {
+    iconUrl() {
+      return `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/${this.theme}/icons.svg#${this.name}`;
+    },
+  },
+};
+</script>
+```
+
+## Programmatic Usage
+
+### Import Sprite Paths
+
+```javascript
+import { alfa, bravo, charlie, nettavisen, alt } from '@amedia/brick-icons';
+
+console.log(alfa); // './sprites/alfa/icons.svg'
+```
+
+### Dynamic Icon Loading
+
+```javascript
+// Helper function to create icon element
+function createIcon(theme, iconName, options = {}) {
+  const { width = 24, height = 24, title, color } = options;
+
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+  svg.setAttribute('width', width);
+  svg.setAttribute('height', height);
+
+  if (color) {
+    svg.style.color = color;
+  }
+
+  if (title) {
+    const titleElement = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'title'
+    );
+    titleElement.textContent = title;
+    svg.appendChild(titleElement);
+  } else {
+    svg.setAttribute('aria-hidden', 'true');
+  }
+
+  const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+  use.setAttributeNS(
+    'http://www.w3.org/1999/xlink',
+    'href',
+    `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/${theme}/icons.svg#${iconName}`
+  );
+
+  svg.appendChild(use);
+  return svg;
+}
+
+// Usage
+const icon = createIcon('alfa', 'checkmark', {
+  width: 32,
+  height: 32,
+  title: 'Completed',
+  color: '#00aa00',
+});
+document.body.appendChild(icon);
+```
+
+## Accessibility
+
+### Informative vs Decorative Icons
+
+**Informative Icons** (convey meaning):
+
+- MUST include a `<title>` element with descriptive text
+- MUST have `aria-labelledby` pointing to the title element ID
+- Example: Standalone icon buttons, status indicators
+
+**Decorative Icons** (purely visual):
+
+- MUST include `aria-hidden="true"`
+- Should be paired with visible text labels
+- Example: Icons next to text labels in buttons
+
+### Best Practices
+
+```html
+<!-- ✅ GOOD: Informative icon with proper accessibility -->
+<button>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    aria-labelledby="close-title"
+  >
+    <title id="close-title">Close dialog</title>
+    <use href="icons/alfa/icons.svg#close"></use>
+  </svg>
+</button>
+
+<!-- ✅ GOOD: Decorative icon paired with text -->
+<button>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    aria-hidden="true"
+  >
+    <use href="icons/alfa/icons.svg#add"></use>
+  </svg>
+  Add Item
+</button>
+
+<!-- ❌ BAD: Informative icon without accessibility support -->
+<button>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+    <use href="icons/alfa/icons.svg#delete"></use>
+  </svg>
+</button>
+
+<!-- ❌ BAD: Standalone decorative icon -->
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+  <use href="icons/alfa/icons.svg#arrow-right"></use>
+</svg>
+```
+
+### Keyboard Navigation
+
+Icons themselves are not interactive. Always wrap icons in interactive elements like:
+
+- `<button>` for actions
+- `<a>` for navigation
+- Ensure interactive elements are keyboard accessible with proper focus styles
+
+## Common Patterns
+
+### Icon Button
+
+```html
+<brick-button-v9 data-variant="ghost" data-shape="circle">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    aria-labelledby="settings-title"
+  >
+    <title id="settings-title">Open settings</title>
+    <use
+      href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#settings-fill"
+    ></use>
+  </svg>
+</brick-button-v9>
+```
+
+### Status Indicator with Icon
+
+```html
+<div
+  class="status-success"
+  style="display: flex; align-items: center; gap: 8px; color: #00aa00;"
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    aria-hidden="true"
+  >
+    <use
+      href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#check-circle"
+    ></use>
+  </svg>
+  <span>Operation completed successfully</span>
+</div>
+```
+
+### Navigation Menu Item
+
+```html
+<a href="/profile" style="display: flex; align-items: center; gap: 12px;">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    aria-hidden="true"
+  >
+    <use
+      href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/nettavisen/icons.svg#user"
+    ></use>
+  </svg>
+  <span>My Profile</span>
+</a>
+```
+
+### Media Controls
+
+```html
+<div class="media-controls" style="display: flex; gap: 16px;">
+  <button aria-label="Play video">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      aria-hidden="true"
+    >
+      <use
+        href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alt/icons.svg#play"
+      ></use>
+    </svg>
+  </button>
+  <button aria-label="Mute audio">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      aria-hidden="true"
+    >
+      <use
+        href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alt/icons.svg#volume-on"
+      ></use>
+    </svg>
+  </button>
+</div>
+```
+
+### Social Media Links
+
+```html
+<nav aria-label="Social media" style="display: flex; gap: 16px;">
+  <a href="https://facebook.com/example" aria-label="Facebook">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      aria-hidden="true"
+    >
+      <use
+        href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/charlie/icons.svg#facebook"
+      ></use>
+    </svg>
+  </a>
+  <a href="https://twitter.com/example" aria-label="Twitter">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      aria-hidden="true"
+    >
+      <use
+        href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/charlie/icons.svg#twitter"
+      ></use>
+    </svg>
+  </a>
+  <a href="https://instagram.com/example" aria-label="Instagram">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      aria-hidden="true"
+    >
+      <use
+        href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/charlie/icons.svg#instagram"
+      ></use>
+    </svg>
+  </a>
+</nav>
+```
+
+## Technical Details
+
+- **Package Name**: @amedia/brick-icons
+- **Distribution**: CDN via Eik (https://assets.acdn.no)
+- **Source**: Figma (synced via Figmagic)
+- **Format**: SVG sprite sheets
+- **Themes**: alfa, bravo, charlie, nettavisen, alt
+- **Build Tools**: Figmagic, svg-sprite, svgson
+- **Dependencies**: None (icons are static assets)
+
+### CDN URL Structure
+
+```
+https://assets.acdn.no/pkg/@amedia/brick-icons/v{major}/icons/{theme}/icons.svg#{icon-name}
+```
+
+Example:
+
+```
+https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#checkmark
+```
+
+### Version Aliasing
+
+The package uses Eik version aliasing:
+
+- `v1` → Latest 1.x.x version
+- `v2` → Latest 2.x.x version (current)
+
+This allows automatic updates within major versions without changing URLs.
+
+## Important Notes
+
+### Icon Updates
+
+Icons are automatically synced from Figma. To update icons:
+
+1. Ensure you have Figma API access token
+2. Run: `npm run build:svg && npm run build:altered-svg && npm run build:sprite`
+3. Create changeset: `npx changeset`
+4. Commit and push changes
+5. After merge, flush Varnish cache if needed
+
+### Color Customization
+
+Most icons use `currentColor` for fill/stroke, allowing easy color changes via CSS:
+
+```html
+<svg
+  style="color: #ff0000;"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+>
+  <use href="icons/alfa/icons.svg#heart"></use>
+</svg>
+```
+
+Some multi-colored brand icons (like social media logos) may have fixed colors.
+
+### Performance
+
+- Icons are served from CDN with aggressive caching
+- Sprite sheets bundle all icons per theme in single HTTP request
+- Use version aliases (v2) for automatic updates within major versions
+- Consider preloading sprite sheets for critical icons:
+
+```html
+<link
+  rel="preload"
+  as="image"
+  type="image/svg+xml"
+  href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg"
+/>
+```
+
+### Browser Compatibility
+
+SVG sprites with `<use>` elements are supported in all modern browsers. For legacy browser support, consider using polyfills like svg4everybody.
+
+### Icon Availability
+
+Not all icons are available in all themes. Check the Figma source files or sprite sheets to confirm icon availability for your theme. The build process syncs exactly what's in Figma for each theme.
+
+### Non-Interactive Elements
+
+Icons are purely presentational elements and should NOT be interactive on their own. Always wrap icons in interactive elements like `<button>` or `<a>` tags when user interaction is needed.
+
+## Version
+
+Current version: 2.1.0
+
+Recent updates:
+
+- **2.1.0**: New icons: gift, camera, settings-outline
+- **2.0.4**: Synced icons
+- **2.0.0**: Removed CommonJS support (ESM only)