Merge pull request #164 from GSA/top-banner

Added description for the top banner
GSA · Feb 28, 2020 · 7720a69 · 7720a69
2 parents a70de6f + cfeae5a
commit 7720a69
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 3 deletions.
diff --git a/libs/component-sample/src/lib/feature/header-sample/header-sample.component.html b/libs/component-sample/src/lib/feature/header-sample/header-sample.component.html
@@ -1 +1,3 @@
-<sds-header #header [model]="modelHeader" (linkEvent)="linkEvent.next($event)"></sds-header>
+<sds-header #header [model]="modelHeader" (linkEvent)="linkEvent.next($event)"
+topBannerDescription="Authoritative site for Assistance Listings and Wage Determinations only"
+></sds-header>
diff --git a/libs/packages/components/src/lib/header/header.component.html b/libs/packages/components/src/lib/header/header.component.html
@@ -1,4 +1,6 @@
-<sds-top-banner *ngIf="showTopBanner"></sds-top-banner>
+<sds-top-banner *ngIf="showTopBanner" 
+[description]="topBannerDescription"
+></sds-top-banner>
 <div
   class="usa-overlay"
   [class.is-visible]="mobileNavActive"

diff --git a/libs/packages/components/src/lib/header/header.component.ts b/libs/packages/components/src/lib/header/header.component.ts
@@ -27,6 +27,7 @@ export class SdsHeaderComponent {
    */
   @Input() model: HeaderModel;
 
+  @Input() topBannerDescription: string = '';
   /**
    * Takes in a text string and removes all white space characters and returns the new string
    * @param text

diff --git a/libs/packages/components/src/lib/top-banner/top-banner.component.html b/libs/packages/components/src/lib/top-banner/top-banner.component.html
@@ -25,6 +25,9 @@
         >
           <span class="usa-banner__button-text">Here’s how you know</span>
         </button>
+        <div class="usa-banner__header-description">
+          <em>{{ description }}</em>
+        </div>
       </div>
     </header>
     <div

diff --git a/libs/packages/components/src/lib/top-banner/top-banner.component.ts b/libs/packages/components/src/lib/top-banner/top-banner.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'sds-top-banner',
@@ -7,6 +7,7 @@ import { Component } from '@angular/core';
 })
 export class SdsTopBannerComponent {
   showDetail = false;
+  @Input() description = '';
 
   toggleDetails() {
     this.showDetail = !this.showDetail;