GALADRIEL Design System

The library of web components and Storybook for the Galadriel Design System. The components can be used in any kind of web projects, the description here focuses on Ionic Angular so check StencilJS tutorials for other options.

Using the Design System

To get to know the Galadriel Design System check out the single source of truth in Storybook by following those steps:

1. clone the git repository
2. run npm install
3. run npm run storybook:full - will take care of any prebuilding needed to run the Storybook properly
4. sometimes the browser refuses to load the Addons panel of the Storybook - if that happens the Knobs, Design and HTML addon will be hidden and Canvas will take most of the space. To fix open the browser console and run localStorage.clear()

Using the component library in an Ionic project

To install the package into your project just run:

npm install --save galadriel

Import the package into the modules of every page that will use it (e.g. home.module.ts) by adding import galadriel; into the file.

Allow non-angular elements in the project by importing and adding the CUSTOM_ELEMENTS_SCHEMA to the same module file from above. The import statement should look something like that:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from  '@angular/core';

The custom elements schema is also added (in the same file) within the NgModule class (@NgModule decorator), under schemas. After adding your @NgModule should look sth like this:

@NgModule({
    imports: [
        CommonModule,
        IonicModule
    ],
    declarations: [HomePage],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class HomePageModule {}

The last step is calling the defineCustomElements function in a main.ts file within the Ionic project located in the /src folder. Use the following import statement:

import { defineCustomElements } from  'package-name/loader';

Afterwards, add it in the bottom of the file (probably after 'platformBrowserDynamic()...') like this:

defineCustomElements(window);

All done! You can use the available components in the html of the page with their Stencil tags. Happy creating!

Handling object type of properties using Ionic property binding

Some of the components have objects as properties. In this case they can be added using the Ionic property binding.

In the template file of the page (html) the property is bound to the expression with the square brackets as seen in the example below:

<component [property]="expression"></component>

The expression is defined in the class definition of the component and can be an object of any kind. This works for any kind of objects in Ionic.

Handling emitted events of the components

The event emitters can be listened to in Ionic by using brackets in the template. The emitted event values can then be used in a function that is part of the page class as in the example below:

<component [event]="function($event.detail.emittedvalue)"></component>

Built by Wellbe

All rights reserved.