Realogy Shared Components

This library contains the following components and features that can be included in Realogy products:

- Header component
- Footer component
- Advanced footer component
- Speed dial component
- Side nav component
- Theming

#### Register an application with RSC.

Migration Guide

Migrating to version 1.1:

- To hide the hamburger menu across all view ports add hide-hamburger-btn='true' attribute to rsc-header.

Migrating to version 1:

- The package is now available in es5 and and es2015 specifications.
- The index files are now available at @abt-desk/rsc/lib/es5 and @abt-desk/rsc/lib/es2015 for es5 and es2015 respectively.
- Components are packaged separately, to use the components import the components in the script separately.

Example:

``javascript
import "@abt-desk/rsc/lib/es5/header"; // for es5
import "@abt-desk/rsc/lib/es2015/header"; // for es6
`

Changelog

We'll keep track of each release in the CHANGELOG

Installation

`node
npm install @abt-desk/rsc
`

Integrating into a project

$3

Working with webpack, you can import the library into your main file.

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

$3

Copy the lib folder under your public directory.

`html



`

Usage

Include any or all of the components as a regular html tag where they'd logically reside within your HTML structure. For example, you might include the header near the top of the body:

`html

`

Usage to display any additional content

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 a consuming application may or may not be optional)

Example:

`html

Licensed under CC BY 4.0.

`

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

$3

`javascript
import React, { Component } from "react";
import "@abt-desk/rsc/lib/polyfills";
import "@abt-desk/rsc/lib/es2015/header";
import "@abt-desk/rsc/lib/es2015/footer";
import "@abt-desk/rsc/lib/es2015";
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 (


export default App;
`

$3

#### Import the css on the main style file of angular

src/app/styles.scss.

`javascript
@import '@abt-desk/rsc/lib/styles.css';
`

#### Import the polyfills on the polyfills file of angular

src/app/polyfills.ts.

`javascript
import "@abt-desk/rsc/lib/polyfills";
`

#### Add the assets in angular json

`javascript
"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

`javascript
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

`javascript
import { Component, OnInit, AfterViewInit, AfterViewChecked, NgZone } from '@angular/core';
import '@abt-desk/rsc/lib/es2015/header';
import '@abt-desk/rsc/lib/es2015/footer';
import '@abt-desk/rsc/lib/es2015';

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);
}

ngAfterViewInit() {
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

`html
*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"
>



`html














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



`javascript
const rscClient = window.__RSC__;
`

'rscServiceInit' event is emitted after rsc is ready.

Theming

A theme can be added globally by two ways

- By adding a brand key using rsc-client API setGlobalTheme (recommended method).

| setGlobalTheme |
| :----------------------------- |
| takes brand key as a parameter |
| parameters |
| brandKey: string |

`javascript
rscClient.setGlobalTheme("");
`

- By adding a brand key to the body element as shown below

`html

...application template

`

There are 3 css variables that are available that holds the primary, accent and warn colors for the current theme.

Variable names:

- --rsc-primary
- --rsc-accent
- --rsc-warn

Example:

`css
.body {
color: var(--rsc-primary);
}
`

Header

Import:

`javascript
import "@abt-desk/rsc/lib/es5/header"; // for es5
import "@abt-desk/rsc/lib/es2015/header"; // for es6
`

Selector:

$3

The header is composed of three main features:

- Waffle Menu
- Notifications (upcoming feature)
- Profile Menu

The Waffle Menu is a set of applications available to the user, so they may more easily access different tools in their product suite, no matter which they may currently be using. The applications can be grouped by category, with an additional set including the most recently accessed by the current user. Do not add extra margins for the waffle menu items that might broken down the title of the waffle menu items.

Notifications are product and company specific notices available within an application that are appropriate in context of the application, rather than an alternative such as email or a push notification. They include unread, read and archived states - as well as an index of all received notifications for future reference.

The Profile Menu is meant to contain all user related links and actions that aren't appropriate for other forms of navigation, such as a tree structure.

This might include the ability to log out of an application, linking to view or edit one's profile, or edit a user's application specific settings and preferences.

$3

#### Header with all content

!Header full

#### Header with minimum content

!Header minimum

#### User menu

!User menu

#### Waffle menu

!Waffle menu

$3

| Header with all content for mobile | Header with minimum content for mobile |
| :----------------------------------------------------------------- | :-------------------------------------------------------------------- |
| !Header full mobile | !Header minimum mobile |

#### Header mobile menus

| User menu for mobile | Waffle menu for mobile |
| :--------------------------------------------------------------- | :----------------------------------------------------------------- |
| !User mobile menu | !Waffle mobile menu |

$3

#### Properties for Header

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 appears on the header and profile menu |
| user-photo | User photo that appears 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 | Is is the API from where RSC gets the brand and application information from (default: ) |
| avatar-service-url | It is the API where the photo of the person logged in will be fetched from (default: ) |
| apps-service-url | It is the API where the waffle information is fetched from (default: ) |
| full-width-layout | Header/Footer full screen width: true or false (default: false) |
| header-size-update | To increase the header size along with components in it: true or false (default: false) |
| profile-menu | profile menu appears on the header and turn off legacy hamburger menu: true or false (default: true) |
| external-privacy-policy-path | url for privacy policy link in the footer |
| external-terms-of-service-path | url for terms of service link in the footer |
| hide-hamburger-btn (boolean) | enables and disables the hamburger button (default: true above viewport 992px and false for less) |

Example:

`html
app-key=""
brand-key=""
username=""
user-photo="https://image.test"
service-url="https://general.url"
apps-service-url="https://applications.url"
main-class="main"
okta-id=""
avatar-service-url="https://dev-avatar.mycbdesk.com"
/>
// Here you can add you custom component


`

To make the header sticky add the following styles

`html


| setOktaId |
| :---------------------------------------------------- |
| takes okta id as the parameter and sets oktaId in rsc |
| parameters |
| url: string |

Example:

`javascript
rscClient.setOktaId();
`

##### Set Access Token

| setAccessToken |
| :---------------------------------- |
| sets oktaId in rsc to retrieve apps |
| parameters |
| token: string - access token |

Example:

`javascript
rscClient.setAccessToken();
`

##### Set Help Docs Url

| setHelpDocsUrl |
| :---------------------------------------------------------------------------- |
| URL to help documentation, if provided help button will appear in the header. |
| parameters |
| url: string - url for help doc |

Example:

`javascript
rscClient.setHelpDocsUrl();
`

##### Set User

| setUser |
| :---------------------------------------------------------- |
| set user information |
| parameters |
| user: User - object containing details of the user |

Example:

`javascript
rscClient.setUser({
username: "name",
userPhoto: "https://image.test",
oktaId: "jh123h1j3hj213j4",
});
`

##### Set Username

| setUsername |
| :--------------- |
| sets a username |
| parameters |
| username: string |

Example:

`javascript
rscClient.setUsername();
`

##### Set User First Name

| setUserFirstName |
| :-------------------- |
| set a user first name |
| parameters |
| userFirstName: string |

Example:

`javascript
rscClient.setUserFirstName();
`

##### Show Profile In User Menu

| showProfileInUserMenu |
| :----------------------------------------------------- |
| set boolean to show or hide the photo on the user menu |
| parameters |
| showProfileInUserMenu: boolean |

Example:

`javascript
rscClient.showProfileInUserMenu(true);
`

| With profile in menu | Without profile in menu |
| :------------------------------------------------------------------- | :---------------------------------------------------------------------- |
| !With profile in menu | !Without profile in menu |

##### Set User Photo

| setUserPhoto |
| :------------------------------------------------------------------------------------------------------------ |
| set a user photo by url (e.g. ), set boolean to show or hide the photo on the user menu |
| parameters |
| userPhoto: string, showProfileInUserMenu: boolean |

Example:

`javascript
rscClient.setUserPhoto();
`

##### Show User Name In Topnav

| showUserNameInTopnav |
| :----------------------------------------------------------- |
| set boolean to show or hide the first username on the topnav |
| parameters |
| showUserNameInTopnav: boolean |

Example:

`javascript
rscClient.showUserNameInTopnav(true);
`

| With user name | Without user name |
| :------------------------------------------------------------- | :---------------------------------------------------------------- |
| !With user name | !Without user name |

##### Show Caret Down Icon In Topnav

| showCaretDownIconInTopnav |
| :------------------------------------------------------------------------------------ |
| set boolean to show or hide the caret indicator in header near the username in Topnav |
| parameters |
| showCaretDownIconInTopnav: boolean |

Example:

`javascript
rscClient.showCaretDownIconInTopnav(true);
`

| With caret down icon | Without caret down icon |
| :------------------------------------------------------------------- | :---------------------------------------------------------------------- |
| !With caret down icon | !Without caret down icon |

##### Show Beta Indicator

| showBetaIndicator |
| :--------------------------------------------------------- |
| set boolean to show or hide the "beta" indicator in header |
| parameters |
| showBetaIndicator: boolean |

Example:

`javascript
rscClient.showBetaIndicator(true);
`

| With beta indicator | Without beta indicator |
| :------------------------------------------------------------------ | :--------------------------------------------------------------------- |
| !With beta indicator | !Without beta indicator |

##### Show Waffle Menu

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

Example:

`javascript
rscClient.showWaffleMenu(false);
`

| With waffle menu | Without waffle menu |
| :------------------------------------------------------------------ | :--------------------------------------------------------------------- |
| !With beta indicator | !Without beta indicator |

##### Set Home Button Callback

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

Example:

`javascript
rsc.setHomeButtonCallback(function () {
console.log("redirecting to home...");
});
`

##### Set Menu Item

| setMenuItem |
| :-------------------------------------- |
| set additional item to the profile menu |
| parameters |
| menuItem: menu |

Example:

`javascript
rscClient.setMenuItem({ name: , url: , icon: , target: });
`

##### Remove Menu Item

| removeMenuItem |
| :------------------------------------ |
| removes an specific menu item by name |
| parameters |
| name: string |

Example:

`javascript
rsc.removeMenuItem("name of the menu item");
`

##### Set Menu

| setMenu |
| :------------------------------------ |
| An array of items to set the menu. |
| parameters |
| menuItems: Array\<menu> |

Example:

`javascript
rsc.setMenu([
{ name: , url: , icon: , target: },
{ name: , url: , icon: , target: }
]);
`

#### Events for Header

##### Hamburger button toggled

| rscHamburgerBtnToggled |
| :------------------------------------------------------ |
| emitted when the hamburger button is clicked or touched |

Example:

`javascript
const headerEl = document.getElementsByTagName("rsc-header")[0];

headerEl.addEventListener("rscHamburgerBtnToggled", () => {
// Execute code after side navigation is closed.
});
`

#### Header Interfaces

##### _Menu Item_

| property | type | required | description |
| --------------- | -------- | -------- | ---------------------------------------------------------------------------------- |
| name | string | | link text |
| url | string | | target url |
| icon | string | | fontawesome class icon, e.g. 'fa-times' (see ) |
| onTab | boolean | | set true to open in a new tab, default false |
| callback | function | | target callback function (optional, if not provided url will be used) |
| 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 tooltip, if needed. |
| tooltipPosition | string | | set position of tooltip. (default: below) |

##### _User_

| property | type | required | description |
| --------- | ------ | -------- | ----------------------------------------------------- |
| username | string | | set username |
| userPhoto | string | | set a user photo by url (e.g. ) |
| oktaId | string | | set oktaId |

Footer

Import:

`javascript
import "@abt-desk/rsc/lib/es5/footer"; // for es5
import "@abt-desk/rsc/lib/es2015/footer"; // for es6
`

selector:

$3

The footer component should include standard elements, such as legal information, links to privacy policies, sitemaps, terms of use and company branding and social media links (represented as icons).

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)

$3

!Standard footer

Example:

`html

It is licensed under CC BY 4.0.

`

Note: Footer component needs the header component to be mounted

Advanced footer

Import:

`javascript
import "@abt-desk/rsc/lib/es5/advanced-footer"; // for es5
import "@abt-desk/rsc/lib/es2015/advanced-footer"; // for es6
`

Selector:

$3

The advanced footer component should include standard elements, such as legal information, links to privacy policies, sitemaps, terms of use and company branding and social media links (represented as icons) similar to the standard footer plus links to service now and user settings.

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)

$3

#### Advanced footer with help desk links

!Advanced footer with helpdesk links

#### Advanced footer without help desk links

!Advanced footer without helpdesk links

#### Attributes of Advanced footer

The advanced footer component receives the following properties:

| Attribute | Description |
| ------------------------ | -------------------------------------------------------------------------------- |
| hide-help-desk-resources | If true it will hide the help desk resources in advanced footer (default: false) |

Example:

`html

It is licensed under CC BY 4.0.

`

Note: Advanced footer component needs the header component to be mounted

Speed Dial

Import:

`javascript
import "@abt-desk/rsc/lib/es5/advanced-footer"; // for es5
import "@abt-desk/rsc/lib/es2015/advanced-footer"; // for es6
`

Selector:

$3

The speed dial (alternately referred to as a floating action button, or FAB) would be used when you have a set of actions you'd like to make persistently available to users.

The speed dial is presented as a triggering floating action button, anchored to the bottom right of the screen. It will follow users when scrolling. When clicked, an overlay and its constituent child actions will appear.

Each child action should relate to a more broad concept. For example, an additive action, represented as a plus, might contain the ability to add listings, contacts or documents.

Speed dials should contain no more than 6 child actions.

Include the components as a regular html tag and add any of the attributes mentioned below to modify the component.

To replace the default icon with a custom image or content add content inside the rsc-speed-dial tag as shown below.

If side nav is being used, then place the speed dial element outside the side nav element.

`html





`

Options for this component can be set using the methods mentioned below

The main button color can be changed by overriding the 'fab-toggler' class as shown below:

`css
.rsc-speed-dial .fab-toggler {
background-color: ;
}
`

$3

| Speed dial closed | Speed dial open |
| :----------------------------------------------------------------- | :-------------------------------------------------------------- |
| !Speed dial closed | !Speed dial open |

$3

#### Attributes of Speed Dial

| Attribute | Description |
| -------------------- | ----------------------------------------------------------------------------------------------------- |
| fab-icon (optional) | font awesome class name, default: support fab icon will be displayed. |
| brand-key (optional) | a theme is applied on the component based on the Brand key, overrides the global theme |
| mat-color (optional) | sets the theme palette, default: accent |

Example:

`html


`

#### Methods for Speed Dial

##### Set a single speed dial

| setSpeedDialOption |
| :-------------------------------------------------------------------------------------- |
| this method is used to set speed dial options individually |
| parameters |
| option: speedDialOption - object containing details of the option |

Example:

`javascript
// without callback
rscClient.setSpeedDialOption({
name: "Leave Feedback",
icon: "fal fa-comment-exclamation",
weight: 2,
url: "https://www.mycbdesk.com/feedback",
target: "_blank",
});

// with callback
rscClient.setSpeedDialOption({
name: "See Help Articles & FAQs",
icon: "fal fa-question-circle",
callback: function (option) {
window.open("https://www.mycbdesk.com/help-center", "_blank");
},
});
`

##### Remove an option

| removeSpeedDialOption |
| :---------------------------------------------- |
| removes one speed dial option based on the name |
| parameters |
| name: string - name of the option |

Example:

`javascript
rscClient.removeSpeedDialOption("Leave Feedback");
`

##### Set multiple speed dial options

| setSpeedDial |
| :-------------------------------------------------------------------------------------------------- |
| this method adds the speed dial options passed to the method, all previous options will be replaced |
| parameters |
| speedDialOptions: Array\<speedDialOption> - collection of speed dial options |

Example:

`javascript
rscClient.setSpeedDial([
{
name: "Leave Feedback",
icon: "far fa-align-left",
weight: 2,
url: "https://www.mycbdesk.com/feedback",
target: "_blank",
},
{
name: "See Help Articles & FAQs",
icon: "fal fa-question-circle",
url: "https://www.mycbdesk.com/help-center",
},
]);
`

#### Speed Dial Interfaces

##### _Speed Dial Option_

| property | type | required | description |
| -------- | -------- | -------- | ----------------------------------------------------------------------------------------- |
| name | string | yes | option name |
| url | string | no | target url |
| icon | string | yes | font-awesome class icon, e.g. 'fa-times' (see ) |
| weight | int | no | options are sorted in ascending order (lowest weight is displayed at the top, default: 0) |
| target | string | no | sets target value, (default: '\_blank)' |
| callback | function | no | an optional property, the call back function is called every time an option is clicked |

Side Nav

Import:

`javascript
import "@abt-desk/rsc/lib/es5/side-nav"; // for es5
import "@abt-desk/rsc/lib/es2015/side-nav"; // for es6
`

Selector:

$3

The SideNav may be used in applications where content is organized in a tree structure. In the case of this component, this should be limited to applications where the content hierarchy includes 2-3 levels of navigation. More focused task-oriented applications aren't appropriate, but content heavy applications such as intranets should be able to leverage the component to quickly organize content in a way consistent with other products across the organization.

Implementation:

Place the main content of the application inside the side nav element. Ideally header component will be placed above the side nav element and offset height to equal the height of the header.

Set the sidenav config based on the type of device or as required for pages as shown below.

If you'd like to allow users on desktops the convenience of collapsing and expanding the sidenav to provide more room for content, ensure that enableStaggeredNav is set to true.

If speed dial is being used, then place the speed dial element outside the side nav element.

Example:

`html