@abt-desk/rsc

This library contains two components, the header and footer to be integrated in different realogy web systems.

Usage no npm install needed!

<script type="module">
  import abtDeskRsc from 'https://cdn.skypack.dev/@abt-desk/rsc';
</script>

README

Realogy Shared Components

This library contains two components, the header and footer to be integrated in different realogy web systems.

The header is composed of three main features:

  • Waffle Menu
  • Notifications
  • Profile Menu

Installation

npm install @abt-desk/rsc

Integrating into a project

First Option

Working with webpack you can import the library on the main file

import "@abt-desk/rsc/lib/polyfills";
import "@abt-desk/rsc";
import "@abt-desk/rsc/lib/styles.css";

Second Option

Copy the lib folder under your public directory

<script type="text/javascript" src="public/rsc/lib/polyfills.js"></script>
<script type="text/javascript" src="public/rsc/lib/index.js"></script>
<link rel="stylesheet" href="public/rsc/lib/styles.css">

Usage

Include the components as a regular html tag, example:

<rsc-header></rsc-header>
<rsc-footer></rsc-footer>
or
<rsc-header></rsc-header>
<rsc-advanced-footer></rsc-advanced-footer>

Usage to display any additional content in copyrights for footer components

Include the components as a regular html tag with any additional content you wanted to display as below, example: (The additional content which is passed by consuming application is optional)

<rsc-footer *ngIf="mounted">
    <span>It is licensed under CC BY 4.0.<span/>
</rsc-footer>
or
<rsc-advanced-footer>
  <span>It is licensed under CC BY 4.0.<span/>
</rsc-advanced-footer>



**Note: Footer component needs the header component to be mounted**

## Header Component Attributes

The header component receives the following properties:

| Attribute | Description |
| --------- | ----------- |
| app-key (required) | Key of the application |
| brand-key | Key of the brand, if not added default brand will be set |
| username | Username that appers on the header and profile menu |
| user-photo | User photo that appers on the header and profile menu |
| main-class | Body's class name to show and hide body when needed |
| okta-id | Okta Id to retrieve the photo to display on the header |
| service-url | RSC service url (default: https://rsc.realogy.com) |
| avatar-service-url | Avatar service url (default: https://avatar.mycbdesk.com) |
| apps-service-url | Application/waffle service url (default: https://backend.mycbdesk.com) |
| full-width-layout |  Header/Footer full screen width: true or false (default) |
| header-size-update | To increase the header size along with components in it: true or false (default) |
| profile-menu | profile menu appers on the header and turn off legacy hamburger menu: true or false (default) |

### Example

```

Usage for speed dial component

Include the components as a regular html tag and add any of the properties mentioned below to modify the component, all of the properties are optional and has a default value. To replace the default content add content inside the rsc-speed-dial tag.

Options for this component can be set using setSpeedDialOption and setSpeedDial methods

fab-icon = font awesome class name default: support fab icon will be displayed

Note: at least one option is required to render the component

Example

` // Default

// Font awesome icon override

// Custom content `

Important: It's necessary to enclosed your main content into a wrapper with an specific class and pass it to the header component as main-class, It makes work the menus correctly on mobile view.

React Example

import React, { Component } from 'react';
import "@abt-desk/rsc/lib/polyfills";
import "@abt-desk/rsc";
import "@abt-desk/rsc/lib/styles.css";

import './App.css';

class App extends Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    const rscClient = window.__RSC__;
    rscClient.setMenuItem({ name: 'My Profile', url: 'www.google.com', icon: 'far fa-user', target: '_blank'});
    rscClient.setMenuItem({ name: 'Reset Dashboard Layout', url: 'www.github.com', icon: 'fal fa-repeat-alt', target: '_blank'});
    rscClient.setMenuItem({ name: 'Settings', url: 'www.google.com', icon: 'fal fa-cog', target: '_blank'});
    rscClient.setMenuItem({ name: 'Log Out', url: 'www.github.com', icon: 'fal fa-sign-out-alt', target: '_blank'});
  }

  render() {
    return (
      <div className="App">
        <rsc-header
          app-key="84bbb33a-27b6-4c6d-b965-242e9a101ec3"
          brand-key="85440"
          username="Sergey"
          main-class="main"
          user-photo="http://www.iconarchive.com/download/i60042/mattahan/ultrabuuf/Comics-Spiderman-Morales.ico"
          okta-id="00uhcgfrmyEIAef7R0h7"
          service-url="https://general.url"
          apps-service-url="https://applications.url"
          avatar-service-url="https://dev-avatar.mycbdesk.com">
        </rsc-header>
        <div className="main">
          <h1>Sample React App</h1>
          <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
          industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
          electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
          of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
          Aldus PageMaker including versions of Lorem Ipsum.
          </p>
        </div>
        <rsc-footer></rsc-footer>
      </div>
    );
  }
}

export default App;

Note: You need to ensure that the header element was mounted before starting to use the client library.

Angular Example

  • Import the css on the main style file of angular src/app/styles.scss.
@import '@abt-desk/rsc/lib/styles.css';
  • Import the polyfills on the polyfills file of angular src/app/polyfills.ts.
import '@abt-desk/rsc/lib/polyfills';
  • Add the assets in angular json
"assets": [
  ...
  {
    "input": "./node_modules/@abt-desk/rsc/lib/assets/rsc-icons",
    "glob": "**/*",
    "output": "/assets/rsc-icons/"
  }
],
  • Enable custom elements on your angular module adding the CUSTOM_ELEMENTS_SCHEMA to the schemas
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }
  • Import the components in the main file
import { Component, OnInit, AfterViewInit, AfterViewChecked, NgZone } from '@angular/core';
import '@abt-desk/rsc';

function _window(): any {
  return window;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterViewInit, AfterViewChecked {
  constructor(private ngZone: NgZone) {

  }
  title = 'angular-integration-test';
  public mounted = false;
  public isSetMenu = false;

  ngOnInit() {
    this.ngZone.run(() => this.mounted = true);
  }

  ngAfterViewChecked() {
    const rscClient =  _window().__RSC__;
    if (rscClient && !this.isSetMenu) {
      rscClient.setMenuItem({ name: 'My Profile', url: 'www.google.com', icon: 'far fa-user', target: '_blank'});
      rscClient.setMenuItem({ name: 'Reset Dashboard Layout', url: 'www.github.com', icon: 'fal fa-repeat-alt', target: '_blank'});
      rscClient.setMenuItem({ name: 'Settings', url: 'www.google.com', icon: 'fal fa-cog', target: '_blank'});
      rscClient.setMenuItem({ name: 'Log Out', url: 'www.github.com', icon: 'fal fa-sign-out-alt', target: '_blank'});
      this.isSetMenu = true;
    }
  }
}
  • Template
<rsc-header *ngIf="mounted"
  app-key="84bbb33a-27b6-4c6d-b965-242e9a101ec3"
  brand-key="85440"
  username="Sergey"
  main-class="main"
  user-photo="http://www.iconarchive.com/download/i60042/mattahan/ultrabuuf/Comics-Spiderman-Morales.ico"
  okta-id="00uhcgfrmyEIAef7R0h7"
  service-url="https://general.url"
  apps-service-url="https://applications.url"
  avatar-service-url="https://dev-avatar.mycbdesk.com">
</rsc-header>
<div class="main">
  <h1>Sample Angular App</h1>
  <p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
  industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
  scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
  electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
  of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
  Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>
<rsc-footer *ngIf="mounted"></rsc-footer>

Note: Ensure to mount the header and footer once your angular component was mounted, notice the mounted variable, then the client libray is available.

Plain Web Page Example

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sample</title>
    <base href="/">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="public/rsc/lib/polyfills.js"></script>
    <script type="text/javascript" src="public/rsc/lib/index.js"></script>
    <link rel="stylesheet" href="public/rsc/lib/styles.css">
  </head>
  <body>
    <rsc-header
      app-key="84bbb33a-27b6-4c6d-b965-242e9a101ec3"
      brand-key="85440"
      username="Sergey"
      user-photo="http://www.iconarchive.com/download/i60042/mattahan/ultrabuuf/Comics-Spiderman-Morales.ico"
      okta-id="00uhcgfrmyEIAef7R0h7"
      service-url="https://general.url"
      apps-service-url="https://applications.url"
      avatar-service-url="https://dev-avatar.mycbdesk.com">
    </rsc-header>
    <div className="main">
      <h1>Sample Plain Web Page</h1>
      <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
      industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
      scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
      electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
      Aldus PageMaker including versions of Lorem Ipsum.
      </p>
    </div>
    <rsc-footer></rsc-footer>
    <rsc-speed-dial></rsc-speed-dial>
    <script>
      var rscClient = window.__RSC__;
      rscClient.setMenuItem({ name: 'My Profile', url: 'www.google.com', icon: 'far fa-user', target: '_blank'});
      rscClient.setMenuItem({ name: 'Reset Dashboard Layout', url: 'www.github.com', icon: 'fal fa-repeat-alt', target: '_blank'});
      rscClient.setMenuItem({ name: 'Settings', url: 'www.google.com', icon: 'fal fa-cog', target: '_blank'});
      rscClient.setMenuItem({ name: 'Log Out', url: 'www.github.com', icon: 'fal fa-sign-out-alt', target: '_blank'});
    </script>
  </body>
</html>

Note: You need to ensure that the header element was mounted before starting to use the client library.

Client library

With the library is exposed some functionalities to interact with the component. Get the rscService as following:

const rscClient = window.__RSC__;

Functions

setUser(Object)

setUser({ username, userPhoto, oktaId }): set user information

Object Structure:

  • username(string): set username
  • userPhoto(string): set a user photo by url (e.g. https://image.sergey)
  • oktaId(string): set oktaId

setUsername(string)

setUsername(username): set a username

setUserFirstName(string)

setUserFirstName(userFirstName): set a user first name

setUserPhoto(string, boolean)

setUserPhoto(userPhoto, showProfileInUserMenu): set a user photo by url (e.g. https://image.sergey), set boolean to show or hide the photo on the user menu

showProfileInUserMenu(boolean)

showProfileInUserMenu(showProfileInUserMenu): set boolean to show or hide the photo on the user menu

showUserNameInTopnav(boolean)

showUserNameInTopnav(showUserNameInTopnav): set boolean to show or hide the first username on the topnav

showCaretDownIconInTopnav(boolean)

showCaretDownIconInTopnav(showCaretDownIconInTopnav): set boolean to show or hide the caret indicator in header near the username in Topnav

showBetaIndicator(boolean)

showBetaIndicator(showBetaIndicator): set boolean to show or hide the "beta" indicator in header

showWaffleMenu(boolean)

showWaffleMenu(showWaffleMenu): set boolean to show or hide the "waffleMenu" indicator in header - default value is true.

setOktaId(string)

setOktaId(oktaId): set oktaId

setHomeButtonCallback(callback: function)

setHomeButtonCallback(callback): set a home button callback function, which will be called, when a user clicks on the header logo/app name.

setMenuItem(Object)

setMenuItem({ name, url, callback, icon, onTab, weight}): set additional item to the profile menu

Object Structure:

  • name(string): link text
  • url(string): target url (optional, if not provided callback will be used)
  • callback(function): target callback function (optional, if not provided url will be used)
  • icon(string): fontawesome class icon, e.g. 'fa-times' (see https://fontawesome.com/)
  • onTab(boolean): set true to open in a new tab, default false
  • weight(int): menu items are sorted in ascending order. (default: 0)
  • showTooltip(boolean): to show the material tooltip. (default: false)
  • tooltipText(string): content to be shown in the tooltip
  • tooltipClass(string): custom class to be added in tooltop, if needed.
  • tooltipPosition(string): set position of tooltip. (default: below)

removeMenuItem(string)

removeMenuItem(name): removes an specific menu item by name

setMenu(Array)

setMenu([{ name, url, icon, onTab}, ...]]): An array of items to set the menu.

Object Structure:

  • name(string): link text
  • url(string): target url
  • icon(string): fontawesome class icon, e.g. 'fa-times' (see https://fontawesome.com/)
  • onTab(boolean): set true to open in a new tab, default false

setSpeedDialOption(Object)

setSpeedDialOption({ name: string, url: string, icon: string, weight: number, target?: string, openNewWindow?: boolean, newWindowConfig?: string }): set additional item to the speed dial

Object Structure:

  • name(string): option name
  • url(string): target url optional
  • icon(string): font-awesome class icon, e.g. 'fa-times' (see https://fontawesome.com/)
  • weight(int): options are sorted in ascending order (lowest weight is displayed at the top, default: 0).
  • target(string): set target value, (default: '_blank)'
  • callback(function): an optional property, the call back function is called every time an option is clicked

removeSpeedDialOption(string)

removeSpeedDialOption(name): removes a specific speed dial option by name

setSpeedDial(Array)

setSpeedDial([{ name: string, url: string, icon: string, weight: number, target?: string, openNewWindow?: boolean, newWindowConfig?: string }, ...]]): An array of options to set the speed dial.

Object Structure:

  • name(string): option name
  • url(string): target url optional
  • icon(string): font-awesome class icon, e.g. 'fa-times' (see https://fontawesome.com/)
  • weight(int): options are sorted in ascending order (lowest weight is displayed at the top, default: 0).
  • target(string): set target value, (default: '_blank)'
  • callback(function): an optional property, the call back function is called every time an option is clicked

setAccessToken(string)

setAccessToken(token): Access token to retrieve apps

setHelpDocsUrl(string)

setHelpDocsUrl(url): URL to help documentation, if provided help button will appear in the header.

Development

Run Dev Server

Run a dev server on port 4000

npm start

Run Tests

npm tests

Build

Build script is going to generate the lib folder.

npm run build

npm version patch

npm publish

This project was generated with Angular CLI version 1.7.4.