norwegian-assets-ng

Angular assets for Norwegian ✈️

Component library and project base to facilitate setup of new Norwegian projects. The library contains common building blocks for Norwegian sites and services. Like buttons, destination search, calendars and so on.

Installation

In order to use components in your project, you have to install norwegian-assets-ng as a dependency of you project.

npm i norwegian-assets-ng

When it's in there, you can start importing the stuff you need. Like this 👇

app.module.ts

import { ButtonModule } from 'norwegian-assets-ng'

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ButtonModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<nas-button title="hipp hopp ostepop"></nas-button>

A working [but minimal] example project using norwegian-assets-ng can be found in /examples.

What about the SASS/SCSS?

The SCSS files for each component is compiled and injected into the component styles. In addition to this, the variables, mixins and such is included in the distributed package and is available for your project.

If you want the reset styles for instance, you can do like this:

@import '~norwegian-assets-ng/sass/2_generic/reset';

it's also possible to include the whole base style with fonts and all. To do this import

@import '~norwegian_assets_ng/sass/all';

Exposing the assets

The styles refer til asset files like fonts and icons. These files are part of the distributed package and you need to expose them through the angular compiler in order for everything to come together. You do this through defining app assets in your .angular-cli.json file.

Add the following line to the apps.assets array:

{ "glob": "**/*", "input": "../node_modules/norwegian-assets-ng/assets", "output": "./assets/" }

Development

storybook is used for component documentation and is an easy way to preview a component in isolation while developing. Start it by doing an npm run dev in your terminal.

Tech details

Based on angular-library-seed.

• Angular4+
• AOT/JIT compatible component library
• Styles and templates are inlined at build-time, no transpiling
• Cherry-pick the modules you need. No need to include everything
• Both components and modules are exposed, making it possible to compose new modules from the components

Adding your own component

Adding your own component doesn't require much, but there's a few things to be aware of:

• Add a folder for your component in src/components
• Add an index.ts file in the component folder and export the component and module
• Expose the component exports in src/components/index.ts by adding export * from './your-component-name'
• If you've made services you should export them same way under src/services

Roadmap

• Define library structure
• Figure out how to distribute it
• Storybook
• Test basics
• Font loading
• Image/SVG loading
• Start implementing components
• 🚀/💰