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

// 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

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:

<!-- 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

npm run build

Running Storybook for Component Exploration

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