@amedia/brick-mcp 0.0.2 → 0.1.0

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

@@ -0,0 +1,604 @@
+---
+name: brick-illustrations
+version: 1.2.5
+category: Media
+tags: [svg, illustrations, graphics, assets, cdn, decorative, figma]
+use_cases:
+  [
+    error-pages,
+    empty-states,
+    onboarding,
+    success-messages,
+    feature-explanations,
+    subscription-flows,
+    sports-content,
+    audio-content,
+    elder-users,
+    youth-content,
+    app-downloads,
+    location-features,
+    payment-flows,
+    cancellation-flows,
+  ]
+related: [brick-icons, brick-avatar]
+---
+
+# Brick Illustrations
+
+A collection of SVG illustrations synced from Figma and distributed via CDN for use across Amedia applications.
+
+## Key Capabilities
+
+- 99+ professionally designed SVG illustrations covering various use cases
+- Delivered via Eik CDN for fast, cached loading
+- Scalable vector graphics with no quality loss at any size
+- Organized by category (error, success, audio, sport, subscription, etc.)
+- Accessible implementation with support for decorative and informative contexts
+- Automated sync from Figma design system
+
+## Available Illustrations
+
+### Error & Alert States
+
+- `404-binoculars.svg` - 404 error page
+- `404-binocularsimple.svg` - Simplified 404 error
+- `alert-cat.svg` - Alert/warning states
+- `error-ufo.svg` - General error state
+- `warning-bananapeel.svg` - Warning message
+- `warning-ghost.svg` - Warning message
+
+### Success & Positive States
+
+- `success-thumbsup.svg` - Success confirmation
+- `success-chefskiss.svg` - Perfect/excellent outcome
+- `success-fistbump.svg` - Success celebration
+- `thanks-handshake.svg` - Thank you message
+- `welcome-highfive.svg` - Welcome/greeting
+
+### Audio Content
+
+- `audio-bearded.svg` - Audio content user
+- `audio-busgirl.svg` - Listening while commuting
+- `audio-busman.svg` - Listening while commuting
+- `audio-cloud.svg` - Audio streaming
+- `audio-dreaming.svg` - Podcast/audio content
+- `audio-intransit.svg` - Mobile audio listening
+- `audio-kid.svg` - Youth audio content
+- `audio-macho.svg` - Audio user persona
+
+### Sport Content
+
+- `sport-athletes5.svg`, `sport-athletes6.svg`, `sport-athletes9.svg` - Athletes
+- `sport-champion.svg` - Winner/champion
+- `sport-equipment.svg` - Sports equipment
+- `sport-golf.svg` - Golf content
+- `sport-hockey.svg` - Hockey content
+- `sport-kick.svg` - Football/soccer
+- `sport-spectator.svg` - Watching sports
+- `sport-tennisfam.svg` - Tennis/family sports
+- `sport-watchparty.svg` - Group watching
+
+### Subscription & Onboarding
+
+- `sub-stacks.svg` - Subscription tiers
+- `sub-young.svg` - Youth subscription
+- `upgrade-rocket.svg` - Upgrade flow
+- `downgrade-pony.svg` - Downgrade flow
+- `change-generations.svg` - Account changes
+- `change-paperplane.svg` - Change confirmation
+
+### Reading & News
+
+- `read-digital.svg` - Digital reading
+- `read-newspaper.svg` - Newspaper reading
+- `read-friends.svg` - Social reading
+- `news-pleasant.svg` - Positive news
+- `news-serious.svg` - Serious news content
+
+### Elder Users
+
+- `elder-eavis.svg` - eAvis for seniors
+- `elder-look.svg` - Senior user
+- `elder-tablet.svg` - Tablet usage
+- `elder-tabletuser.svg` - Senior tablet user
+
+### Youth Content (Ung)
+
+- `ung-catgirl.svg` - Youth persona
+- `ung-group.svg` - Youth group
+- `ung-heart.svg` - Youth favorite
+- `ung-highfive.svg` - Youth celebration
+- `ung-scroll.svg` - Youth browsing
+
+### Kakadu App
+
+- `kakadu-aicreate.svg` - AI content creation
+- `kakadu-aidlogin.svg` - AI-assisted login
+- `kakadu-appconfig.svg` - App configuration
+- `kakadu-appreading.svg`, `kakadu-appreading2.svg` - App reading
+- `kakadu-del-abo.svg` - Delete subscription
+- `kakadu-downloadappstore.svg` - App Store download
+- `kakadu-downloadgoogleplay.svg` - Google Play download
+- `kakadu-eavisconfig.svg` - eAvis configuration
+- `kakadu-endre-abo.svg` - Change subscription
+- `kakadu-familysharing.svg`, `kakadu-familysharing2.svg` - Family sharing
+- `kakadu-meld-flytt.svg` - Report move
+- `kakadu-midl-adresse.svg` - Temporary address
+- `kakadu-sportuser.svg` - Sports user
+- `kakadu-uteblitt-avis.svg` - Missing newspaper
+
+### Cancellation Flow
+
+- `cancel-brokenheart.svg` - Cancellation sadness
+- `cancel-bye.svg` - Goodbye message
+- `cancel-chocolate.svg` - Win-back offer
+
+### Other Categories
+
+- `enjoy-breakfast.svg`, `enjoy-cats.svg`, `enjoy-coffee.svg`, `enjoy-cuddle.svg`, `enjoy-watching.svg` - Lifestyle/enjoyment
+- `friendly-balldog.svg`, `friendly-hello.svg`, `friendly-tada.svg` - Friendly greetings
+- `location-boypin.svg`, `location-boypins.svg`, `location-girlpin.svg`, `location-girlpins.svg` - Location features
+- `payment-wallet.svg` - Payment flows
+- `purchase-handheart.svg`, `purchase-happydog.svg` - Purchase confirmation
+- `save-squirrel.svg` - Savings feature
+- `share-family.svg`, `share-pizzapaper.svg` - Sharing features
+- `plussalt-consume.svg`, `plussalt-pigeon.svg`, `plussalt-screentime.svg` - Pluss content
+- `loading-messenger.svg` - Loading state
+- `expiry-bindle.svg` - Expiration notice
+- `winback-mendingheart.svg` - Win-back campaign
+- `nt-logosymbol.svg` - Norsk Tipping logo
+- `rikstoto-logosymbol.svg` - Rikstoto logo
+- `fordeg-velgavis.svg` - Choose newspaper
+- `alt-served.svg` - Alternative served
+- `watch-video.svg` - Video content
+
+## Usage
+
+All illustrations are available via Eik CDN. Access them using the base URL pattern:
+
+```
+https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/{filename}
+```
+
+### Basic HTML Implementation
+
+#### Decorative Illustration
+
+```html
+<img
+  src="https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/alert-cat.svg"
+  alt=""
+  role="presentation"
+  aria-hidden="true"
+/>
+```
+
+#### Informative Illustration
+
+```html
+<img
+  src="https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/success-thumbsup.svg"
+  alt="Your subscription has been successfully activated"
+/>
+```
+
+### Using Object Tag
+
+```html
+<object
+  type="image/svg+xml"
+  data="https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/upgrade-rocket.svg"
+  aria-label="Upgrade to premium subscription"
+>
+  Upgrade illustration
+</object>
+```
+
+## Examples
+
+### 404 Error Page
+
+```html
+<div class="error-page">
+  <img
+    src="https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/404-binoculars.svg"
+    alt="Page not found"
+    width="300"
+    height="300"
+  />
+  <h1>Siden ble ikke funnet</h1>
+  <p>Vi finner dessverre ikke siden du leter etter.</p>
+</div>
+```
+
+### Success Message
+
+```html
+<div class="success-message">
+  <img
+    src="https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/success-fistbump.svg"
+    alt="Success"
+    width="200"
+    height="200"
+  />
+  <h2>Takk for din bestilling!</h2>
+  <p>Du vil motta en bekreftelse på e-post.</p>
+</div>
+```
+
+### Subscription Upgrade Flow
+
+```html
+<div class="upgrade-card">
+  <img
+    src="https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/upgrade-rocket.svg"
+    alt=""
+    role="presentation"
+    width="150"
+    height="150"
+  />
+  <h3>Oppgrader til Premium</h3>
+  <p>Få tilgang til alle artikler og eksklusivt innhold.</p>
+  <button>Oppgrader nå</button>
+</div>
+```
+
+### Empty State for Audio Content
+
+```html
+<div class="empty-state">
+  <img
+    src="https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/audio-cloud.svg"
+    alt="No audio content available"
+    width="250"
+    height="250"
+  />
+  <h3>Ingen podcast tilgjengelig ennå</h3>
+  <p>Sjekk tilbake senere for nytt innhold.</p>
+</div>
+```
+
+### App Download Section
+
+```html
+<section class="app-download">
+  <h2>Last ned appen</h2>
+  <div class="download-buttons">
+    <a href="https://apps.apple.com/...">
+      <img
+        src="https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/kakadu-downloadappstore.svg"
+        alt="Last ned fra App Store"
+        width="200"
+        height="60"
+      />
+    </a>
+    <a href="https://play.google.com/...">
+      <img
+        src="https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/kakadu-downloadgoogleplay.svg"
+        alt="Last ned fra Google Play"
+        width="200"
+        height="60"
+      />
+    </a>
+  </div>
+</section>
+```
+
+### Sports Content Hero
+
+```html
+<div class="sport-hero">
+  <img
+    src="https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/sport-watchparty.svg"
+    alt=""
+    role="presentation"
+    width="400"
+    height="300"
+  />
+  <div class="hero-content">
+    <h1>Se alle kampene live</h1>
+    <p>Strøm fotball, hockey og mer med vårt sportsabonnement.</p>
+  </div>
+</div>
+```
+
+### Cancellation Flow with Win-back
+
+```html
+<div class="cancellation-flow">
+  <img
+    src="https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/cancel-chocolate.svg"
+    alt=""
+    role="presentation"
+    width="200"
+    height="200"
+  />
+  <h2>Før du går...</h2>
+  <p>Vi vil gjerne tilby deg 50% rabatt i 3 måneder.</p>
+  <button class="primary">Aksepter tilbudet</button>
+  <button class="secondary">Avslutt likevel</button>
+</div>
+```
+
+## Framework Integration
+
+### Svelte
+
+```svelte
+<script>
+  const baseUrl = 'https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/';
+  const illustration = 'success-thumbsup.svg';
+  const isDecorative = false;
+</script>
+
+<img
+  src="{baseUrl}{illustration}"
+  alt={isDecorative ? '' : 'Success message'}
+  role={isDecorative ? 'presentation' : undefined}
+  aria-hidden={isDecorative}
+  width="200"
+  height="200"
+/>
+```
+
+### React
+
+```jsx
+const IllustrationImage = ({
+  name,
+  alt,
+  isDecorative = false,
+  width = 200,
+  height = 200,
+}) => {
+  const baseUrl =
+    'https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/';
+
+  return (
+    <img
+      src={`${baseUrl}${name}`}
+      alt={isDecorative ? '' : alt}
+      role={isDecorative ? 'presentation' : undefined}
+      aria-hidden={isDecorative}
+      width={width}
+      height={height}
+    />
+  );
+};
+
+// Usage
+<IllustrationImage name="error-ufo.svg" alt="An error occurred" />;
+```
+
+### Vue
+
+```vue
+<template>
+  <img
+    :src="illustrationUrl"
+    :alt="isDecorative ? '' : alt"
+    :role="isDecorative ? 'presentation' : undefined"
+    :aria-hidden="isDecorative"
+    :width="width"
+    :height="height"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    name: String,
+    alt: String,
+    isDecorative: {
+      type: Boolean,
+      default: false,
+    },
+    width: {
+      type: Number,
+      default: 200,
+    },
+    height: {
+      type: Number,
+      default: 200,
+    },
+  },
+  computed: {
+    illustrationUrl() {
+      return `https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/${this.name}`;
+    },
+  },
+};
+</script>
+```
+
+## Accessibility
+
+### Decorative vs Informative
+
+Illustrations can be either decorative or informative:
+
+**Decorative**: The illustration is purely visual and doesn't add information to the content.
+
+```html
+<img src="..." alt="" role="presentation" aria-hidden="true" />
+```
+
+**Informative**: The illustration conveys meaning that isn't provided by adjacent text.
+
+```html
+<img
+  src="..."
+  alt="Descriptive text explaining the meaning, not just describing the image"
+/>
+```
+
+### Best Practices
+
+- **Pair with text**: Always combine illustrations with text to ensure meaning is clear
+- **Contextual alt text**: For informative illustrations, describe the meaning/context, not the visual details
+- **Not interactive**: Illustrations should not have click or hover behaviors. Wrap with interactive elements instead
+- **Size considerations**: Ensure adequate size for visibility (minimum 150x150px recommended)
+
+### Examples
+
+#### Do: Contextual Alt Text
+
+```html
+<img
+  src="https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/payment-wallet.svg"
+  alt="Secure payment processed successfully"
+/>
+```
+
+#### Don't: Descriptive Alt Text
+
+```html
+<!-- Don't describe the visual -->
+<img
+  src="https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/payment-wallet.svg"
+  alt="A blue wallet with coins"
+/>
+```
+
+#### Do: Paired with Text
+
+```html
+<div class="message">
+  <img src="..." alt="" role="presentation" aria-hidden="true" />
+  <div>
+    <h2>Betaling fullført</h2>
+    <p>Din betaling på 99 kr er bekreftet.</p>
+  </div>
+</div>
+```
+
+#### Do: Interactive Wrapper
+
+```html
+<a href="/upgrade" class="upgrade-card">
+  <img
+    src="https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/upgrade-rocket.svg"
+    alt=""
+    role="presentation"
+  />
+  <span>Oppgrader til Premium</span>
+</a>
+```
+
+## Common Patterns
+
+### Error Page Pattern
+
+```html
+<main class="error-container" role="main">
+  <img
+    src="https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/404-binoculars.svg"
+    alt="Page not found"
+    width="300"
+    height="300"
+  />
+  <h1>404 - Siden ble ikke funnet</h1>
+  <p>Siden du leter etter eksisterer ikke eller har blitt flyttet.</p>
+  <a href="/">Gå til forsiden</a>
+</main>
+```
+
+### Empty State Pattern
+
+```html
+<div class="empty-state" role="status">
+  <img
+    src="https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/loading-messenger.svg"
+    alt=""
+    role="presentation"
+    aria-hidden="true"
+    width="250"
+    height="250"
+  />
+  <h3>Ingen meldinger ennå</h3>
+  <p>Når du mottar meldinger vil de vises her.</p>
+</div>
+```
+
+### Onboarding Step Pattern
+
+```html
+<article class="onboarding-step">
+  <img
+    src="https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/kakadu-familysharing.svg"
+    alt=""
+    role="presentation"
+    width="200"
+    height="200"
+  />
+  <h2>Del med familien</h2>
+  <p>Inviter opptil 4 familiemedlemmer til å dele ditt abonnement.</p>
+  <button>Neste</button>
+</article>
+```
+
+### Feature Highlight Pattern
+
+```html
+<section class="feature-grid">
+  <div class="feature">
+    <img
+      src="https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/read-digital.svg"
+      alt=""
+      role="presentation"
+    />
+    <h3>Les digitalt</h3>
+    <p>Tilgang til alle artikler på nett og i app.</p>
+  </div>
+  <div class="feature">
+    <img
+      src="https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/audio-cloud.svg"
+      alt=""
+      role="presentation"
+    />
+    <h3>Lytt til innhold</h3>
+    <p>Podcaster og lytteartikler.</p>
+  </div>
+  <div class="feature">
+    <img
+      src="https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/share-family.svg"
+      alt=""
+      role="presentation"
+    />
+    <h3>Del med familien</h3>
+    <p>Opptil 4 ekstra brukere.</p>
+  </div>
+</section>
+```
+
+## Technical Details
+
+- **Package**: @amedia/brick-illustrations
+- **CDN Base URL**: https://assets.acdn.no/pkg/@amedia/brick-illustrations/v1/svg/
+- **Format**: SVG (Scalable Vector Graphics)
+- **Source**: Figma via Figmagic
+- **Distribution**: Eik CDN
+- **Build Tool**: Figmagic 4.5.11
+- **Total Illustrations**: 99+
+
+## Important Notes
+
+- **Sync from Figma**: Illustrations are automatically synced from Figma design system. Do not manually edit SVG files.
+- **Usage guidelines**: Review [Amedia's Illustrations Usage Guidelines](https://amedia.slite.com/app/docs/rAiiGn60o3METD) before implementation
+- **No direct manipulation**: Illustrations are static assets. For interactive graphics, consider using brick-icons or custom components
+- **Performance**: SVGs are cached on CDN. Use appropriate width/height attributes to prevent layout shift
+- **Naming convention**: File names follow pattern `{category}-{description}.svg` (e.g., `sport-hockey.svg`, `success-thumbsup.svg`)
+- **Version aliasing**: Use `v1` in URLs for automatic minor/patch updates, or pin to specific version if needed
+- **Accessibility required**: All implementations must specify whether illustration is decorative or informative
+
+## Version
+
+Current version: 1.2.5
+
+Latest changes:
+
+- Synced illustrations from Figma
+- Added new illustrations for various use cases
+- Updated elder user illustrations
+- Added youth (ung) content illustrations
+- Expanded Kakadu app illustration set