UWE Design System

Basic Installation & Usage

Refer to 'Framework Integration' section for specific instructions for React, Vue & Angular integration.

NPM Installation

npm i uwe-ds

Use UNPKG CDN

Vanilla JavaScript projects can simply use the CDN. Place the following links are the top of your index.html page.

<link rel="stylesheet" type="text/css" href="https://unpkg.com/uwe-ds@latest/dist/uwe-ds/uwe-ds.css" />
<script type="module" src="https://unpkg.com/uwe-ds@latest/dist/uwe-ds/uwe-ds.esm.js"></script>
<script nomodule src="https://unpkg.com/uwe-ds@latest/dist/uwe-ds/uwe-ds.js"></script>

Framework Integrations

React

With a React app built with create-react-app, two lines need to be added to the index.js file (after installing the uwe-ds package):

// Other imports...

// Add this one
import { applyPolyfills, defineCustomElements } from 'uwe-ds/loader';

ReactDOM.render(<App />, document.getElementById('root'));

// Has not effect on design system - optional.
serviceWorker.unregister();

// and add this one
applyPolyfills().then(() => {
    defineCustomElements(window);
});

UWE components should be usable inside other React components now.

Sometimes the CSS styling doesn't get applied to components. In order to get this to work, add a link to the CSS in public/index.html:

<!-- UWE Design System CSS CDN -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/uwe-ds@latest/dist/uwe-ds/uwe-ds.css"/>

Helpful Resources: Stencil Documentation for React

Vue

Assuming that the package has been installed with npm i uwe-ds beforehand, your main.js file should look like this:

// Other imports

// Add this line
import { applyPolyfills, defineCustomElements } from 'uwe-ds/loader';

Vue.config.productionTip = false;

// Add this line (Tells Vue to ignore all UWE components)
Vue.config.ignoredElements = [/uwe-\w*/];

// Add this line (Bind the custom elements to the window object)
applyPolyfills().then(() => {
  defineCustomElements(window);
});

new Vue({
  render: h => h(App)
}).$mount('#app');

UWE components should be usable inside other Vue components now.

Sometimes the CSS styling doesn't get applied to components. In order to get this to work, add a link to the CSS in public/index.html:

<!-- UWE Design System CSS CDN -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/uwe-ds@latest/dist/uwe-ds/uwe-ds.css"/>

Helpful Resources: Stencil Documentation for Vue

Angular

Assuming that the package has been installed with npm i uwe-ds beforehand, your main.ts file should look like this:

// Other imports

// Add this
import { applyPolyfills, defineCustomElements } from 'uwe-ds/loader';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

// Add this
applyPolyfills().then(() => {
  defineCustomElements(window)
})

Add this into the App Module (app.module.ts) and every other module that will use the components:

import { BrowserModule } from '@angular/platform-browser';
// Add CUSTOM_ELEMENTS_SCHEMA - prevents errors when using UWE components
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  // Add this
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Sometimes the CSS styling doesn't get applied to components. In order to get this to work, add a link to the CSS in src/index.html:

<!-- UWE Design System CSS CDN -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/uwe-ds@latest/dist/uwe-ds/uwe-ds.css"/>

Helpful Resources: Stencil Documentation for Angular