@iqual/nuxt-icms 1.1.0 → 1.2.2

package/components/DesignSystem/README.md

@@ -0,0 +1,489 @@
+# ICMS Design System Documentation
+
+The ICMS Design System is built following Atomic Design principles with Vue 3, Nuxt 3, TypeScript, and Tailwind CSS. It provides a comprehensive set of reusable components organized into Atoms, Molecules, and Organisms.
+
+## Table of Contents
+
+- [Architecture](#architecture)
+- [Technology Stack](#technology-stack)
+- [Component Hierarchy](#component-hierarchy)
+- [Atoms](#atoms)
+- [Molecules](#molecules)
+- [Organisms](#organisms)
+- [Composables](#composables)
+- [Styling Guidelines](#styling-guidelines)
+- [Best Practices](#best-practices)
+- [Usage Examples](#usage-examples)
+
+## Architecture
+
+The design system follows **Atomic Design methodology**:
+
+- **Atoms**: Basic building blocks (buttons, inputs, containers)
+- **Molecules**: Simple combinations of atoms (cards, forms, navigation items)
+- **Organisms**: Complex components combining molecules and atoms (headers, sections, content blocks)
+
+### File Structure
+
+```
+components/DesignSystem/
+├── Atoms/           # Basic UI elements
+├── Molecules/       # Component combinations
+└── Organisms/       # Complex layout components
+```
+
+## Technology Stack
+
+- **Vue 3**: Composition API with `<script setup>` syntax
+- **TypeScript**: Full type safety
+- **Tailwind CSS**: Utility-first styling
+- **Tailwind Variants**: Type-safe component variants
+- **Container Queries**: Responsive design with `@container`
+- **GraphQL**: Type-safe data fetching
+- **Nuxt 3**: Framework with auto-imports
+
+### Key Dependencies
+
+```typescript
+import { tv } from 'tailwind-variants'  // Component variants
+import cn from '@iqual/nuxt-icms/composables/useCn'  // Class merging
+```
+
+## Component Hierarchy
+
+### Atoms
+
+| Component | Purpose | Key Features |
+|-----------|---------|--------------|
+| `Button.vue` | Interactive elements | Multiple styles, color schemes, link integration |
+| `Caption.vue` | Text captions | Typography variants |
+| `Container.vue` | Layout wrapper | Responsive containers |
+| `GridRow.vue` | Grid layout | CSS Grid implementation |
+| `LinkListItem.vue` | Navigation items | Styled list items |
+
+### Molecules
+
+| Component | Purpose | Key Features |
+|-----------|---------|--------------|
+| `ButtonGroup.vue` | Button collections | Grouped button layout |
+| `Card.vue` | Content cards | Media integration, color schemes |
+| `IconText.vue` | Icon + text combinations | Flexible icon positioning |
+| `MediaLightbox.vue` | Media overlay | Carousel, keyboard navigation |
+| `MediaSlider.vue` | Media carousels | Touch/swipe support |
+| `Partnership.vue` | Partner displays | Logo arrangements |
+| `Table.vue` | Data tables | Responsive table layout |
+| `TitleComposition.vue` | Heading combinations | Semantic heading structure |
+| `iFrame.vue` | Embedded content | Responsive iframe wrapper |
+
+### Organisms
+
+| Component | Purpose | Key Features |
+|-----------|---------|--------------|
+| `ContentBlock.vue` | Rich content | Flexible content layout |
+| `FlipTeaser.vue` | Interactive cards | Hover/click animations |
+| `LogoElement.vue` | Brand display | Logo arrangements |
+| `Map.vue` | Geographic content | Map integration |
+| `TeamElement.vue` | People showcase | Team member cards |
+| `TeaserCard.vue` | Content previews | Image + text teasers |
+| `Testimonial.vue` | User feedback | Quote formatting |
+| `TimelineElement.vue` | Chronological content | Timeline layout |
+| `TwoColumnTextElement.vue` | Text layout | Multi-column text |
+
+## Atoms
+
+### Button
+
+The foundational interactive component with comprehensive styling options.
+
+```vue
+<DesignSystemAtomsButton
+  label="Click me"
+  subline="Optional subtitle"
+  link="/example"
+  :target-blank="false"
+  style="normal"
+  color-scheme="accent"
+  text-alignment="center"
+/>
+```
+
+**Props:**
+- `label` (string): Button text
+- `subline` (string): Optional subtitle
+- `link` (string): Navigation target
+- `targetBlank` (boolean): Open in new tab
+- `style` (string): `normal`, `focus`, `minimal`
+- `colorScheme` (string): `none`, `dark`, `light`, `accent`
+- `textAlignment` (string): `left`, `center`, `right`
+
+**Variants:**
+- **Normal**: Standard button appearance
+- **Focus**: Emphasized styling
+- **Minimal**: Text-only, underlined
+
+### Container
+
+Responsive layout wrapper with consistent spacing.
+
+```vue
+<DesignSystemAtomsContainer>
+  <p>Content goes here</p>
+</DesignSystemAtomsContainer>
+```
+
+**Features:**
+- Responsive max-width
+- Consistent horizontal padding
+- Container query support
+
+### GridRow
+
+CSS Grid implementation for flexible layouts.
+
+```vue
+<DesignSystemAtomsGridRow :columns="3">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</DesignSystemAtomsGridRow>
+```
+
+## Molecules
+
+### Card
+
+Versatile content container with media support.
+
+```vue
+<DesignSystemMoleculesCard
+  title="Card Title"
+  title-weight="semibold"
+  text="Card description text"
+  :image="imageMedia"
+  :icon="iconMedia"
+  color-scheme="light"
+/>
+```
+
+**Props:**
+- `title` (string): Card heading
+- `titleWeight` (string): Font weight
+- `text` (string): Description
+- `image` (MediaFragment): Optional image
+- `icon` (MediaFragment): Optional icon
+- `colorScheme` (string): Color variant
+
+**Color Schemes:**
+- `none`: Default background
+- `dark`: Dark theme
+- `light`: Light theme
+- `accent`: Brand colors
+
+### MediaLightbox
+
+Advanced media overlay with carousel functionality.
+
+```vue
+<DesignSystemMoleculesMediaLightbox
+  :media-objects="mediaArray"
+  :current-index="0"
+  :is-open="showLightbox"
+  @close="showLightbox = false"
+  @navigate="handleNavigation"
+/>
+```
+
+**Features:**
+- Multi-media support (images, videos, remote videos)
+- Keyboard navigation (arrow keys, escape)
+- Touch/swipe gestures
+- Automatic video controls
+- Loading states
+- Error handling
+
+**Props:**
+- `mediaObjects` (MediaFragment[]): Media array
+- `currentIndex` (number): Starting position
+- `isOpen` (boolean): Visibility state
+
+**Events:**
+- `close`: Lightbox closed
+- `navigate`: Index changed
+
+### MediaSlider
+
+Touch-enabled media carousel for galleries.
+
+```vue
+<DesignSystemMoleculesMediaSlider
+  :media-objects="images"
+  :current-index="0"
+  @click="openLightbox"
+/>
+```
+
+**Features:**
+- Touch/swipe support
+- Responsive image sizing
+- Automatic thumbnail generation
+- Click-to-expand integration
+
+## Organisms
+
+### TeaserCard
+
+Content preview component with image and text.
+
+```vue
+<DesignSystemOrganismsTeaserCard
+  :image="teaserImage"
+  pretitle="Category"
+  title="Article Title"
+  subtitle="Subtitle"
+  text="Preview text..."
+  :link="'/article/slug'"
+  link-label="Read more"
+  color-scheme="light"
+/>
+```
+
+**Props:**
+- `image` (MediaFragment): Preview image
+- `pretitle` (string): Category/tag
+- `title` (string): Main heading
+- `subtitle` (string): Secondary heading
+- `text` (string): Description
+- `link` (string): Target URL
+- `linkLabel` (string): CTA text
+- `colorScheme` (string): Theme variant
+
+### ContentBlock
+
+Flexible content container for rich text and media.
+
+```vue
+<DesignSystemOrganismsContentBlock
+  pretitle="Section"
+  title="Main Heading"
+  title-style="heading-2"
+  title-weight="bold"
+  subtitle="Subheading"
+  text="<p>Rich HTML content...</p>"
+/>
+```
+
+**Features:**
+- Semantic heading hierarchy
+- Rich text support
+- Flexible typography scaling
+- Responsive spacing
+
+## Composables
+
+The design system includes several composables for enhanced functionality:
+
+### useMediaLightbox
+
+Manages lightbox state and media navigation.
+
+```typescript
+const { mediaObjects, openLightbox, closeLightbox } = useMediaLightbox()
+```
+
+### useCn
+
+Utility for merging Tailwind classes.
+
+```typescript
+import cn from '@iqual/nuxt-icms/composables/useCn'
+
+const classes = cn('base-class', conditionalClass && 'conditional', props.className)
+```
+
+### useIsMobile
+
+Responsive design helper.
+
+```typescript
+const { isMobile } = useIsMobile()
+```
+
+## Styling Guidelines
+
+### Color Schemes
+
+The system supports four primary color schemes:
+
+1. **None**: Default/transparent backgrounds
+2. **Dark**: Dark theme with light text
+3. **Light**: Light backgrounds with dark text  
+4. **Accent**: Brand colors and highlights
+
+### Responsive Design
+
+Components use container queries (`@container`) for intrinsic responsiveness:
+
+```css
+@container {
+  .component {
+    @apply flex-col;
+  }
+}
+
+@container (min-width: 768px) {
+  .component {
+    @apply flex-row;
+  }
+}
+```
+
+### Typography
+
+Semantic heading structure with utility classes:
+
+- `heading-1` through `heading-6`: Semantic levels
+- Font weights: `light`, `normal`, `medium`, `semibold`, `bold`
+- Text alignment: `left`, `center`, `right`
+
+### Spacing
+
+Consistent spacing using Tailwind's spacing scale:
+
+- Component padding: `p-6`, `p-16` for larger screens
+- Component gaps: `gap-6`, `gap-16`
+- Margin utilities: `mb-2`, `mb-4`, `mt-auto`
+
+## Best Practices
+
+### Component Development
+
+1. **Use TypeScript interfaces** for prop definitions
+2. **Implement Tailwind Variants** for consistent styling
+3. **Support container queries** for responsive design
+4. **Include accessibility attributes** (ARIA labels, semantic HTML)
+5. **Handle loading and error states** for media components
+
+### Performance
+
+1. **Lazy load media** components when possible
+2. **Use computed properties** for expensive calculations
+3. **Implement proper image sizing** with `imageSizes` prop
+4. **Minimize bundle size** with tree-shaking
+
+### Accessibility
+
+1. **Semantic HTML elements** (`button`, `nav`, `main`, etc.)
+2. **ARIA labels and roles** for complex components
+3. **Keyboard navigation** support
+4. **Focus management** in modals and overlays
+5. **Screen reader support** with proper text alternatives
+
+### Maintainability
+
+1. **Consistent naming conventions** (`PascalCase` for components)
+2. **Comprehensive prop documentation** with TypeScript
+3. **Reusable style variants** with Tailwind Variants
+4. **Modular component architecture** following Atomic Design
+
+## Usage Examples
+
+### Basic Page Layout
+
+```vue
+<template>
+  <DesignSystemAtomsContainer>
+    <DesignSystemOrganismsContentBlock
+      title="Page Title"
+      title-style="heading-1"
+      text="<p>Page content...</p>"
+    />
+    
+    <DesignSystemAtomsGridRow :columns="3">
+      <DesignSystemMoleculesCard
+        v-for="item in items"
+        :key="item.id"
+        :title="item.title"
+        :text="item.description"
+        :image="item.image"
+        color-scheme="light"
+      />
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+```
+
+### Interactive Gallery
+
+```vue
+<template>
+  <DesignSystemMoleculesMediaSlider
+    :media-objects="galleryImages"
+    @click="openLightbox"
+  />
+  
+  <DesignSystemMoleculesMediaLightbox
+    :media-objects="galleryImages"
+    :current-index="currentIndex"
+    :is-open="showLightbox"
+    @close="showLightbox = false"
+    @navigate="currentIndex = $event"
+  />
+</template>
+
+<script setup>
+const { mediaObjects, openLightbox } = useMediaLightbox()
+const showLightbox = ref(false)
+const currentIndex = ref(0)
+
+const handleImageClick = (index: number) => {
+  currentIndex.value = index
+  showLightbox.value = true
+}
+</script>
+```
+
+### Button Variations
+
+```vue
+<template>
+  <div class="space-y-4">
+    <!-- Primary CTA -->
+    <DesignSystemAtomsButton
+      label="Get Started"
+      style="focus"
+      color-scheme="accent"
+      text-alignment="center"
+    />
+    
+    <!-- Secondary action -->
+    <DesignSystemAtomsButton
+      label="Learn More"
+      style="normal"
+      color-scheme="light"
+    />
+    
+    <!-- Minimal link -->
+    <DesignSystemAtomsButton
+      label="Skip this step"
+      style="minimal"
+      color-scheme="none"
+    />
+  </div>
+</template>
+```
+
+---
+
+## Contributing
+
+When adding new components:
+
+1. Follow Atomic Design principles
+2. Use TypeScript for all props and events
+3. Implement Tailwind Variants for styling
+4. Include comprehensive documentation
+5. Add usage examples
+6. Test across different screen sizes
+7. Ensure accessibility compliance
+
+For questions or contributions, refer to the project's main documentation or contact the development team.

package/components/Media/Image/index.vue

@@ -20,7 +20,6 @@
       :class="elementClass"
       :loading="imageLoading"
     />
-
     <figcaption v-if="showCaption && media?.caption" 
       v-text="media?.caption" 
       :class="figcaptionClass" />
@@ -28,9 +27,6 @@
 </template>
 
 <script lang="ts" setup>
-import cn from '@iqual/nuxt-icms/composables/useCn'
-import { checkDensities, parseDensities, parseSize, parseSizes } from '/node_modules/@nuxt/image/dist/runtime/utils'
-import type { ImageOptions, ImageSizesOptions, CreateImageOptions, ResolvedImage, ImageCTX, $Img, ImageSizes, ImageSizesVariant } from '/node_modules/@nuxt/image/dist/runtime/types'
 import type { MediaImageFragment } from '#graphql-operations'
 
 const props = withDefaults(
@@ -51,165 +47,11 @@ const props = withDefaults(
   },
 )
 
-// Get the data.
-const img = useImage()
-const baseUrl = useRuntimeConfig().public.imageBaseUrl
-const sourceImage = baseUrl + props?.media?.sourceUrl?.path
-
-const placeHolderImage = computed(() => {
-  return img(sourceImage, {format: 'webp', width: 100, blur: 100})
-})
-
-const imageSources = computed(() => {
-  const sources = []
-  const imgSizes = props.imageSizes ?? Object.keys(img.options.screens).map(key => `${key}:100vw`).join(' ');
-
-  // No aspect ratios provided.
-  if (!props?.imageAspectRatios) {
-    sources.push(img.getSizes(sourceImage, {
-      sizes: imgSizes,
-      modifiers: {
-        format: 'webp'
-      }
-    }));
-    return sources
-  }
-
-  // Aspect ratios provided.
-  const parsedAspectRatios = parseSizes(props?.imageAspectRatios)
-  const parsedImageSizes = parseSizes(imgSizes)
-  const densities = img.options.densities
-  const keys = Object.keys(parsedImageSizes);
-  const lastKey = keys[keys.length - 1];
-
-  for (const keyAspectRatios in parsedAspectRatios) {
-    const [l, h]  = parsedAspectRatios[keyAspectRatios].split('/').map(Number);
-    const hwRatio = (l && h) ? h / l : 0
-    const sizeVariants = []
-    const srcsetVariants = [] 
-
-    let screenSizes = Object.keys(parsedImageSizes)
-    if (Object.keys(parsedImageSizes).includes(keyAspectRatios)) {
-      const minSizeIndex = Object.keys(parsedImageSizes).indexOf(keyAspectRatios)
-      screenSizes = Object.keys(parsedImageSizes).slice(minSizeIndex)
-    }
-
-    for (const index in screenSizes) {
-      const screenSize = screenSizes[index]
-
-      const variant = getSizesVariant(screenSize, String(parsedImageSizes[screenSize]), hwRatio)
-      if (variant === undefined) {
-        continue
-      }
-
-      // Add size variant with 'media'.
-      sizeVariants.push({
-        size: variant.size,
-        screenMaxWidth: variant.screenMaxWidth,
-        media: `(max-width: ${variant.screenMaxWidth}px)`,
-      })
-
-      // Add srcset variants and ignore densities (for current 'size' processed).
-      srcsetVariants.push({
-        width: variant._cWidth,
-        src: img(sourceImage, {
-          width: variant._cWidth ? variant._cWidth : undefined,
-          height: variant._cHeight ? variant._cHeight : undefined,
-          fit: 'cover',
-          format: 'webp'
-        }),
-      })
-
-      // Make sure to not create duplicate size variants for the same screen size.
-      if (keyAspectRatios != screenSize && Object.keys(parsedAspectRatios).includes(screenSize)) {
-        break
-      }
-    }
-
-    const media = sizeVariants.slice(-1)[0]?.media
-    finaliseSizeVariants(sizeVariants)
-    finaliseSrcsetVariants(srcsetVariants)
-
-    const sizesVal = sizeVariants.length ? sizeVariants.map(v => `${v.media ? v.media + ' ' : ''}${v.size}`).join(', ') : undefined
-    const suffix = sizesVal ? 'w' : 'x'
-    const srcsetVal = srcsetVariants.map(v => `${v.src} ${v.width}${suffix}`).join(', ')
-
-    let source = {
-      sizes: sizesVal,
-      srcset: srcsetVal,
-    }
-
-    if (keyAspectRatios != Object.keys(parsedAspectRatios).slice(-1)[0]) {
-      source.media = media
-    }
-    sources.push(source)
-  }
-  return sources
+const { placeHolderImage, imageSources } = useImageSources({
+  media: toRef(props, 'media'),
+  imageAspectRatios: toRef(props, 'imageAspectRatios'),
+  imageSizes: toRef(props, 'imageSizes'),
 })
 
-// Helper function, copied from NuxtImage.
-function getSizesVariant(key: string, size: string, hwRatio: number): ImageSizesVariant | undefined {
-  const screenMaxWidth = (img.options.screens && img.options.screens[key]) || Number.parseInt(key)
-  const isFluid = size.endsWith('vw')
-  if (!isFluid && /^\d+$/.test(size)) {
-    size = size + 'px'
-  }
-  if (!isFluid && !size.endsWith('px')) {
-    return undefined
-  }
-  let _cWidth = Number.parseInt(size)
-  if (!screenMaxWidth || !_cWidth) {
-    return undefined
-  }
-  if (isFluid) {
-    _cWidth = Math.round((_cWidth / 100) * screenMaxWidth)
-  }
-  const _cHeight = Math.round(_cWidth * hwRatio)
-  return {
-    size,
-    screenMaxWidth,
-    _cWidth,
-    _cHeight,
-  }
-}
-
-// Helper function, copied from NuxtImage.
-function finaliseSizeVariants(sizeVariants: any[]) {
-  sizeVariants.sort((v1, v2) => v1.screenMaxWidth - v2.screenMaxWidth)
-
-  // de-duplicate size variants (by key `media`)
-  let previousMedia = null
-  for (let i = sizeVariants.length - 1; i >= 0; i--) {
-    const sizeVariant = sizeVariants[i]
-    if (sizeVariant.media === previousMedia) {
-      sizeVariants.splice(i, 1)
-    }
-    previousMedia = sizeVariant.media
-  }
-
-  for (let i = 0; i < sizeVariants.length; i++) {
-    sizeVariants[i].media = sizeVariants[i + 1]?.media || ''
-  }
-}
-
-// Helper function, copied from NuxtImage.
-function finaliseSrcsetVariants(srcsetVariants: any[]) {
-  // sort by width
-  srcsetVariants.sort((v1, v2) => v1.width - v2.width)
-
-  // de-duplicate srcset variants (by key `width`)
-  let previousWidth = null
-  for (let i = srcsetVariants.length - 1; i >= 0; i--) {
-    const sizeVariant = srcsetVariants[i]
-    if (sizeVariant.width === previousWidth) {
-      srcsetVariants.splice(i, 1)
-    }
-    previousWidth = sizeVariant.width
-  }
-}
-
 </script>
 
-<style scoped>
-
-</style>

package/components/Media/RemoteVideo/index.vue

@@ -7,19 +7,19 @@
         :title="media?.title"
         allow="autoplay; encrypted-media; picture-in-picture"
         allowfullscreen
-        class="aspect-video w-full md:px-40 lg:px-0"
+        class="aspect-video w-full"
         :class="elementClass"
       />
 
       <button
         v-if="!isPlaying"
-        class="relative flex aspect-video w-full cursor-pointer items-center justify-center md:px-40 lg:px-0"
+        class="relative flex aspect-video w-full cursor-pointer items-center justify-center"
+        :class="elementClass"
         @click.prevent="isPlaying = true"
       >
         <img
           :src="thumbnailUrl"
           class="absolute left-0 top-0 aspect-video size-full object-cover"
-          :class="elementClass"
           :alt="thumbnailAlt"
         />
 

package/components/Node/Icms/Page/SearchResult/fragment.graphql

@@ -0,0 +1,8 @@
+fragment nodeIcmsPageSearchResult on NodeIcmsPage {
+  id
+  title: label
+  description: body
+  link: url {
+    path
+  }
+}