norwegian-assets-site

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/norwegian-assets-ng as a dependency of you project.

npm i @norwegian/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/norwegian-assets-ng';

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

app.component.html

<nas-button primary>hipp hopp ostepop</nas-button>

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

What about the 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 just want the styles:

@import '~@norwegian/norwegian-assets-ng/scss/index';

If you want the style

@import '~@norwegian/norwegian-assets-ng/scss/index';

Important: Write new css in BEM

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/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

Before adding new components:

• Make sure you export it in /src/components/index.ts
• Run these commands:

• npm run build
• npm run test
• npm run lint.

Version History

See CHANGELOG for history

Roadmap

• Define library structure
• Figure out how to distribute it
• Storybook
• Test basics
• Font loading
• Image/SVG loading
• Implementing components