UI components for Wrench Group
HTML components for unified user experience across multiple environments
- branded user experience
- analytics
- user profile
- authentication
Dependencies
packages
npm install -g copyfiles
Configuration
Add new script get-theme-assets in package.json
This will copy assets to your project
Add get-theme-assets to dev and build scripts
"scripts": {
"dev": "vite && npm run get-theme-assets ",
"build": "vite build && npm run get-theme-assets ",
"preview": "vite preview",
"get-theme-assets": "copyfiles --flat node_modules/wrenchnpm-components/dist/assets/css/*.css dist/assets/css && copyfiles --flat node_modules/wrenchnpm-components/dist/assets/css/*.css src/assets/css "
},Usage
Theme
Place Theme in header or body tag Note: dev and prod may have different paths. Example: dev may include src folder
<svelte:head>
<Theme theme="morrisjenkins-com" themepath="/src/lib/assets/css/" />
</svelte:head>Button
Button can include href or onClick
<script>
function myEventHandler(e) {
console.log(e.detail.id, e.detail.data);
}
let ariaLabel = "the button";
</script>
<p>
<Button text="Primary BTN from NPM" icon="fa-truck-front" on:click={myEventHandler} id="123" data="hello"/>
</p>
<p>
<Button text="TEST BUTTON" icon="wg-icon-calendar" ariaLabel={ariaLabel} href="#/about" classes="a-button--md a-button--secondary" />
</p>