whitelabel-components

Framework-agnostic Product Slider and Recipe Slider (Swiper). Styles and script are built as separate artifacts so any frontend stack can import them — React, Vue, Angular, Svelte, Astro, or plain HTML.

Install

npm install whitelabel-components

Usage

1. Styles

Import only the components you use:

import 'whitelabel-components/product-slider.css';
import 'whitelabel-components/recipe-slider.css';

whitelabel-components/style.css is an alias for the product slider stylesheet.

Or link the compiled files:

<link rel="stylesheet" href="node_modules/whitelabel-components/dist/product-slider.css">
<link rel="stylesheet" href="node_modules/whitelabel-components/dist/recipe-slider.css">

Sass consumers can pull the source entries (requires node_modules on the Sass load path for Swiper):

@use 'whitelabel-components/product-slider/scss';
@use 'whitelabel-components/recipe-slider/scss';

2. Markup

Product Slider

Render BEM markup with a .js-product-slider hook. Variants:

| Modifier | Behaviour | |---|---| | (default) | Text below image | | .product-slider--text-side | Text beside image (desktop) | | .product-slider--packshots-only | Centered packshots, dynamic bullets, CTA synced to active slide |

Packshot slides may carry:

data-cta-href="…" data-cta-label="…" data-cta-aria-label="…"

Recipe Slider

Render BEM markup with a .js-recipe-slider hook. Variants:

| Modifier | Behaviour | |---|---| | (default) | Image-only slides | | .recipe-slider--image-text | Image + title + text CTA on blue gradient section |

See index.html / Storybook in this repo for full markup examples. Icons and images are not shipped in the package — host them with your project.

3. Script

ESM (both components):

import {
  initProductSliders,
  initRecipeSliders,
} from 'whitelabel-components';

initProductSliders();
initRecipeSliders();

// Or scope to a mounted root (Vue/React/Svelte):
initProductSliders(rootElement);
initRecipeSliders(rootElement);

ESM (single component):

import { initProductSliders } from 'whitelabel-components/product-slider';
import { initRecipeSliders } from 'whitelabel-components/recipe-slider';

CommonJS:

const { initProductSliders, initRecipeSliders } = require('whitelabel-components');
initProductSliders();
initRecipeSliders();

Script tag / CDN-style:

<script src="node_modules/whitelabel-components/dist/product-slider.min.js"></script>
<script src="node_modules/whitelabel-components/dist/recipe-slider.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    WhitelabelProductSlider.initProductSliders();
    WhitelabelRecipeSlider.initRecipeSliders();
  });
</script>

Swiper is bundled into the JS builds; you do not need to install or import it separately for the default package.

Published files

| Path | Purpose | |---|---| | dist/index.mjs / .cjs / .d.ts | Root barrel — both inits | | dist/product-slider.css | Product Slider styles | | dist/product-slider.mjs / .cjs / .min.js / .d.ts | Product Slider JS (IIFE: WhitelabelProductSlider) | | dist/recipe-slider.css | Recipe Slider styles | | dist/recipe-slider.mjs / .cjs / .min.js / .d.ts | Recipe Slider JS (IIFE: WhitelabelRecipeSlider) |

Local development

npm install
npm run start:server       # SCSS + JS watch + live server
npm run storybook          # Storybook
npm run build:package      # Build publishable dist/
npm run pack:check         # Dry-run npm pack contents

Demo site entries remain src/scss/main.scss → css/ and src/js/functions.js → js/.

Publish

npm run build:package
npm publish --access public

prepack runs the package build automatically before npm publish / npm pack.