hlc-layer-ui/README.md

HLC Layer Components for Vue - Including Button and Hero Slider components with Prismic CMS integration

# HLC Layer UI

A collection of Vue 3 components for Nuxt 3 applications, including a Button component and a Hero Slider pattern with Prismic CMS integration.

## Installation

```bash
# Using bun
bun add hlc-layer-ui

# Using npm
npm install hlc-layer-ui

# Using yarn
yarn add hlc-layer-ui
```

## Setup

Add `hlc-layer-ui` to the `extends` array in your `nuxt.config.ts`:

```ts
export default defineNuxtConfig({
  extends: ['hlc-layer-ui']
})
```

## Components

### Button Component

```vue
<template>
  <Button variant="primary">Click me</Button>
  
  <!-- With loading state -->
  <Button loading>Loading...</Button>
  
  <!-- Different variants -->
  <Button variant="secondary">Secondary</Button>
  <Button variant="danger">Danger</Button>
  
  <!-- Different sizes -->
  <Button size="small">Small</Button>
  <Button size="large">Large</Button>
</template>
```

#### Button Props

| Name     | Type    | Default   | Description                                     |
|----------|---------|-----------|------------------------------------------------|
| variant  | string  | 'primary' | Button style: 'primary', 'secondary', 'danger' |
| size     | string  | 'medium'  | Button size: 'small', 'medium', 'large'       |
| loading  | boolean | false     | Shows a loading spinner                        |
| disabled | boolean | false     | Disables the button                           |

### Hero Slider Pattern

A modern, responsive hero slider with Prismic CMS integration, perfect for showcasing featured content, promotions, and announcements.

```vue
<template>
  <HeroSlider :data="sliderData" />
</template>

<script setup lang="ts">
import type { SliderData } from 'hlc-layer-ui'

const sliderData: SliderData = {
  primary: {
    enable_auto_rotation: true,
    slider_full_width: true,
    hide_content_on_mobile: false
  },
  items: [
    {
      hero_image_desktop: {
        dimensions: { width: 3840, height: 1410 },
        alt: "Slide Example",
        url: "your-image-url.jpg",
        // ... other Prismic image properties
      },
      hero_image_mobile: {
        // ... mobile image properties
      },
      enable_slide: true,
      schedule_to: "2025-02-14T22:59:00+0000",
      hero_helper_text: "FEATURED",
      hero_helper_text_color: "#D8A19A",
      hero_title: "Your Slide Title",
      hero_content: [
        {
          type: "paragraph",
          text: "Your slide content here.",
          spans: [],
          direction: "ltr"
        }
      ],
      hero_primary_cta_text: "Learn More",
      hero_primary_cta_link: {
        link_type: "Document",
        uid: "your-page"
      },
      hero_slider_theme: false,
      hero_content_mobile_background_color: "#F0D2CF"
    }
    // ... more slides
  ],
  id: "your-slider-id",
  slice_type: "hero_slider"
}
</script>
```

#### Hero Slider Features

- Responsive design with mobile/desktop images
- Auto-rotation support
- Full-width option
- Mobile content visibility toggle
- Primary and secondary CTAs
- Theme variations (light/dark)
- Scheduling support
- Rich text content with formatting

#### Best Practices

- Keep the number of slides between 3-5 for optimal user experience
- Ensure images are optimized and properly sized (desktop: 3840x1410px, mobile: 1242x1197px recommended)
- Use clear, action-oriented CTA text
- Keep content concise and focused
- Test slider behavior across different screen sizes
- Consider accessibility by providing meaningful alt text for images

## Development

To start the development server and view the component demos:

```bash
bun run dev
```

## License

MIT