# Cradlepoint Design System for WordPress

A WordPress-optimized web component library for Cradlepoint websites and applications. This package provides web components that can be easily integrated into WordPress themes and plugins.

## Installation

### Manual Installation

1. Download the latest release from the GitHub repository
2. Extract the files to your WordPress theme or plugin directory
3. Enqueue the scripts and styles in your theme or plugin

```php
// In your theme's functions.php or plugin file
function enqueue_cradlepoint_components() {
    // Enqueue the main component library
    wp_enqueue_script(
        'cradlepoint-components',
        get_template_directory_uri() . '/path/to/cradlepoint-wp/dist/cradlepoint-wp.js',
        array(),
        '2.0.0',
        true
    );
    
    // Enqueue the styles
    wp_enqueue_style(
        'cradlepoint-styles',
        get_template_directory_uri() . '/path/to/cradlepoint-wp/dist/css/global.css',
        array(),
        '2.0.0'
    );
}
add_action('wp_enqueue_scripts', 'enqueue_cradlepoint_components');
```

### NPM Installation

```bash
npm install design-system-for-cradlepoint-wp
```

Then require or import the components and styles in your build process.

## Usage

### Basic Usage in Templates

Once the components are properly enqueued, you can use them directly in your WordPress templates or content:

```html
<!-- Button example -->
<cradlepoint-button-cta link="https://example.com" text-color="#ffffff" background-color="#0066cc">
    Click Me
</cradlepoint-button-cta>

<!-- Card example -->
<cradlepoint-card-bg background-color="#f5f5f5" text-color="#333333">
    <h3>Card Title</h3>
    <p>Card content goes here</p>
</cradlepoint-card-bg>
```

### With Gutenberg Blocks

You can also integrate these components with Gutenberg blocks to provide a visual editing experience. A sample block implementation would use the web components in its `save()` function.

## Available Components

This library includes all the Cradlepoint design system components, optimized for WordPress:

- Buttons (CTA, Simple)
- Cards (Background, Image-Title-Text, Quote, Simple)
- Layout components (Container, Container Stack, 50/50)
- Navigation (Nav, Nav Main, Nav Lang)
- Heroes and Banners
- And more...

## Development

### Building the Package

```bash
npm run build
```

### Running Storybook for Component Exploration

```bash
npm run storybook:dev
```

## WordPress Integration Examples

Check the `/examples` directory for WordPress integration examples including:

- Basic theme integration
- Gutenberg block implementations
- Plugin usage examples
- Shortcode examples

## License

MIT