@iqual/nuxt-icms 1.2.1 → 1.2.3

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/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/index.vue

@@ -1,7 +1,9 @@
 <template>
-  <BlokkliProvider v-slot="{ entity }" v-bind="blokkliProps" :entity="props">
-    <BlokkliField :list="paragraphs" name="field_icms_paragraphs" />
-  </BlokkliProvider>
+  <div>
+    <BlokkliProvider v-slot="{ entity }" v-bind="blokkliProps" :entity="props">
+      <BlokkliField :list="paragraphs" name="field_icms_paragraphs" />
+    </BlokkliProvider>
+  </div>
 </template>
 
 <script lang="ts" setup>

package/components/Paragraph/Card/Layout/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
     <DesignSystemAtomsGridRow v-if="pretitle || title">
-      <div class="col-span-12 md:col-span-8">
+      <div class="col-span-12 md:col-span-12">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -11,7 +11,7 @@
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-8">
+      <div class="col-span-12 md:col-span-9">
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
           :text="text"

package/components/Paragraph/Contact/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
     <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-5">
+      <div class="col-span-12 md:col-span-12">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -12,7 +12,6 @@
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-7"></div>
       <div class="col-span-12 md:col-span-5">
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"

package/components/Paragraph/Downloads/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
     <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-5">
+      <div class="col-span-12 md:col-span-12">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -10,7 +10,6 @@
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-7"></div>
       <div class="col-span-12 md:col-span-5">
         <DesignSystemOrganismsContentBlock
           :media="media"

package/components/Paragraph/FAQ/Layout/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer :spacing="spacing" :colorScheme="colorScheme">
     <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-5">
+      <div class="col-span-12 md:col-span-12">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -12,7 +12,6 @@
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-7"></div>
       <div class="col-span-12 md:col-span-5">
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"

package/components/Paragraph/FlipTeasers/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
     <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-8">
+      <div class="col-span-12 md:col-span-12">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -11,7 +11,7 @@
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-8">
+      <div class="col-span-12 md:col-span-9">
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
           :text="text"

package/components/Paragraph/Gallery/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
     <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-8">
+      <div class="col-span-12 md:col-span-12">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -11,7 +11,7 @@
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-8">
+      <div class="col-span-12 md:col-span-9">
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
           :text="text"
@@ -35,12 +35,13 @@
           mediaClass="size-full cursor-pointer object-cover object-center"
         />
       </div>
-      <FsLightbox
-        :toggler="toggleLightbox"
-        :sources="sources"
-        :slide="currentSlide"
-        :customAttributes="customAttributes"
+      <DesignSystemMoleculesMediaLightbox
+        :media-objects="(media?.filter((item): item is MediaFragment => Boolean(item)) || [])"
+        :is-open="isOpen"
+        :current-index="currentIndex"
         :captions="captions"
+        @close="closeLightbox"
+        @update:current-index="setCurrentIndex"
       />
     </DesignSystemAtomsGridRow>
   </DesignSystemAtomsContainer>
@@ -48,20 +49,21 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutGalleryFragment } from '#graphql-operations'
-import FsLightbox from 'fslightbox-vue'
+import type { MediaFragment } from '#graphql-operations'
+import { useMediaLightbox } from '@iqual/nuxt-icms/composables/useMediaLightbox'
 
-const { options } = useAttrs().blokkliData
+const { options } = useAttrs().blokkliData as any
 
 const props = defineProps<ParagraphIcmsLayoutGalleryFragment>()
 
 const {
-  toggleLightbox,
-  currentSlide,
+  isOpen,
+  currentIndex,
   openLightbox,
-  sources,
-  customAttributes,
+  closeLightbox,
+  setCurrentIndex,
   captions,
-} = useLightbox(props.media)
+} = useMediaLightbox(props.media)
 
 const colorScheme = computed(() => {
   return options.value.colorScheme

package/components/Paragraph/IconText/Layout/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
     <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-5">
+      <div class="col-span-12 md:col-span-12">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -12,7 +12,6 @@
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-7"></div>
       <div class="col-span-12 md:col-span-5">
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"