Merge pull request #76 from sebgroup/release/rc

Release/rc

.github/workflows/main.yml

@@ -8,9 +8,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v2
-    - uses: actions/setup-node@v2
-      with:
-        node-version: '12'
 
     - name: Get branch name
       shell: bash

README.md

@@ -1,101 +1,131 @@
 # @sebgroup/ng-wizard
 
-[![Build Status](https://travis-ci.com/sebgroup/ng-wizard.svg?token=ogFUkA9d52UFZqFZXBNy&branch=master)](https://travis-ci.com/sebgroup/ng-wizard)
+[![CI](https://github.com/sebgroup/ng-wizard/actions/workflows/main.yml/badge.svg)](https://github.com/sebgroup/ng-wizard/actions/workflows/main.yml)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
-A reusable angular component for a Wizard according to the seb-style guide. It manages all the css for you. It does require the use of Angulars router to keep track of what step in the wizard the user is currently on.
+<p class="lead">
+  This is a wizard component built for angular. It uses routes and route guards to control steps and it relies on
+  Bootstrap for markup and styling as well as Font Awesome for icons.
+</p>
+<h4>Requirements</h4>
+<ul class="list-group list-group-check">
+  <li class="list-group-item">
+    <strong>Angular</strong> - This component is built for Angular and tested with version 12+.
+  </li>
+  <li class="list-group-item">
+    <strong>A route for each step</strong> - Each step in the wizard is a route with an optional route guard using
+    <a href="https://angular.io/api/router/CanActivate" class="external" target="_blank">CanActivate</a> (for protected
+    steps). Step controls are provided using route data objects.
+  </li>
+  <li class="list-group-item">
+    <strong>Bootstrap</strong> - This component relies on styles provided by SEB:s Bootstrap theme:
+    <a href="https://github.com/sebgroup/bootstrap" class="external" target="_blank">@sebgroup/bootstrap</a>.
+  </li>
+  <li class="list-group-item">
+    <strong>Font Awesome</strong> - This component uses Font Awesome regular icons (dependency might be removed in a
+    future release).
+    <div class="alert alert-warning alert-icon mt-3 mx-n5 mx-sm-0">
+      Note that you need to have a pro license for Font Awesome or use SEB:s internal npm registry to install this
+      package.
+    </div>
+  </li>
+</ul>
+
+## Demo and documentation
+
+[View demo and documentation](https://sebgroup.github.io/ng-wizard/)
 
 ## Quick start
 
-Import the module.
+### Install
+
+```
+npm install @sebgroup/ng-wizard
+```
+
+### Import the module.
+
+app.module.ts
 
 ```TypeScript
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { SebNgWizardModule, WizardSteps } from '@sebgroup/ng-wizard';
+
+import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { WizardModule } from 'ng-wizard';
+import { StepOneComponent } from './steps/step-one/step-one.component';
+import { StepTwoComponent } from './steps/step-two/step-two.component';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    WizardModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+  declarations: [AppComponent, StepOneComponent, StepTwoComponent],
+  imports: [BrowserModule, BrowserAnimationsModule, AppRoutingModule, FontAwesomeModule, SebNgWizardModule.forRoot()],
+  providers: [WizardSteps],
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {
+  constructor(library: FaIconLibrary) {
+    // add icons that should be available in the app/module
+  }
+}
 ```
 
-Setup the steps and event-listeners in your component.
+### Setup steps as routes
 
-```TypeScript
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { WizardStep } from 'ng-wizard';
-
-@Component({
-  selector: 'app-root', // tslint:disable-line
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
-})
-export class AppComponent {
-  steps: WizardStep[] = [
-    { path: '/first', text: 'First step' },
-    { path: '/second', text: 'Second step' },
-    { path: '/third', text: 'Third step' }
-  ];
+app-routing.module.ts
 
-  constructor(private router: Router) {}
+```TypeScript
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { WizardStep } from '@sebgroup/ng-wizard';
+import { StepOneComponent } from './steps/step-one/step-one.component';
+import { StepTwoComponent } from './steps/step-two/step-two.component';
+
+const routes: WizardStep[] = [
+  {
+    path: '',
+    redirectTo: 'step-one',
+    pathMatch: 'full',
+  },
+  {
+    path: 'step-one',
+    component: StepOneComponent,
+    data: {
+      heading: 'Step one',
+    },
+  },
+  {
+    path: 'step-two',
+    component: StepTwoComponent,
+    data: {
+      heading: 'Step two',
+    }
+  },
+];
 
-  onClose() {
-    console.log('close');
-  }
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}
 
-  onStep(step: WizardStep) {
-    this.router.navigateByUrl(step.path);
-  }
-}
 ```
 
-Write the markup for your template.
+### Add component
+
+app.component.ts
 
 ```Html
-<wiz-wizard [hideNavigation]="false"
-             title="Wizard title"
-            [steps]="steps"
-            (navigate)="onStep($event)"
-            (close)="onClose($event)">
+<!-- add wizard component and router outlet -->
+<wiz-wizard>
   <div class="wizard-main">
-    <div class="container">
-      <router-outlet></router-outlet>
-    </div>
-  </div>
-  <div class="wizard-right-content">
-    <h3>Help content</h3>
-    <p>Content in the right column of the wizard</p>
+    <!-- this is where your steps will be rendered -->
+    <router-outlet></router-outlet>
   </div>
 </wiz-wizard>
 ```
 
-## Content selectors
-
-Two content selectors are used by the wizard, _.wizard-main_ where the main content of the wizard will be displayed. To get started quickly, place your router-outlet there. _.wizard-right-content_ this is where your right hand side help content will be placed.
-
-## The properties of the wizard component
-
-The properties you should know about are;
-
-- _wizardTitle_ a string that described the title of the wizard.
-- _steps_ an array of _WizardSteps_ that describe the different steps the wizard of following, the path property must be the same as in the applications router since it's this property it's using to mark what steps have been visited and which is currently active.
-- _hideNavigation_ a boolean that tells the wizard to hide the navigation pane on the left side.
-- _hideCloseButton_ a boolean that tells the wizard to hide the close button on the top-right.
-- _lang_ a string that tells the wizard what language it should be displayed in.
-- _useNavbar_ a boolean that tells the wizard to show an optional bootstrap navbar above the wizard. _this requires your application to have [@sebgroup/bootstrap](https://sebgroup.github.io/bootstrap/)_
-- _routerOutletName_ if using a named router outlet for the wizard, the name needs to be sent in under this property.
-
-## Events
-
-Two events are used, _navigate_, it fires when the user clicks one of the links in the left navigation pane, the _WizardStep_ associated with that step is sent with the event. _close_ fires when the user clicks the X button in the top right corner of the wizard.
+For more info and examples please see [demo and documentation](https://sebgroup.github.io/ng-wizard/).