@amedia/brick-mcp 0.0.1-LLM-DOCS → 0.0.1-NEW-PATH-1

package/data/components/brick-illustrations.md

@@ -1,552 +0,0 @@
----
-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