Merge pull request #59 from TAMULib/sprint5-staging

Sprint5 staging
TAMULib · May 14, 2020 · 1250162 · 1250162
2 parents 7f92d80 + 395768d
commit 1250162
Show file tree

Hide file tree

Showing 15 changed files with 2,153 additions and 1,333 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,12 @@
+# Changelog
+
+## [0.0.5] - 05-14-2020
+### Resolves
+
+ - tl-header should have a mobile and tablet layout design #20
+ - tamu-library-components should have specified accessibility design standards #21
+ - tamu-library-components should have a drop down component design #22
+ - The tl-navlist component should utilize Shadowdom encapsulation #47
+ - TL Header should have border divisions between top-nav links #50
+ - TL Header should have border divisions between top-nav and title-row #51
+ - TL Components should optionally allow the inheritance of font styling from global styles #56
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tamu-library-components",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "scripts": {
     "build": "ng build --prod --output-hashing none",
     "build:clean": "npm run clean && npm run build",
@@ -32,15 +32,17 @@
     "@angular/core": "^9.0.1",
     "@angular/elements": "^9.0.1",
     "@angular/forms": "^9.0.1",
+    "@angular/localize": "^9.1.6",
     "@angular/platform-browser": "^9.0.1",
     "@angular/platform-browser-dynamic": "^9.0.1",
     "@angular/router": "^9.0.1",
     "@ng-bootstrap/ng-bootstrap": "^5.3.0",
-    "@wvr/elements": "0.0.4-rc",
+    "@wvr/elements": "0.0.5",
     "angular-tslint-rules": "^1.20.3",
     "bootstrap": "^4.4.1",
     "classlist.js": "^1.1.20150312",
     "document-register-element": "^1.14.3",
+    "elements-zone-strategy": "^9.0.0",
     "ie11-custom-properties": "^3.0.6",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",

diff --git a/src/app/shared/styles/tl-variables.scss b/src/app/shared/styles/tl-variables.scss
@@ -1,6 +1,7 @@
 @import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
 
 :host {
+  all: initial; /* 1st rule so subsequent properties are reset. */
   //TAMU logo specification
   --tl-logo-img-width: 52px;
   --tl-logo-img-height: 36px;
@@ -18,7 +19,26 @@
 
   // Default TL Font Variables
   --tl-default-font-size: 16px;
-  --tl-font-family-sans-serif: 'Lato', sans-serif;
-  --tl-nav-link-font-size: 14px;
+  --tl-default-font-family-sans-serif: 'Lato', sans-serif;
+
+  --tl-font-family-sans-serif:var(--tl-default-font-family-sans-serif);
+  --tl-font-size: var(--tl-default-font-size);
+
+  // custom defining the header variables
+  --tl-h1-font-size: calc(var(--tl-font-size)*2.25); // font-size: 2.25em !important; - https://library-new.library.tamu.edu/
+  --tl-h2-font-size: calc(var(--tl-font-size)*1.5);
+  --tl-h3-font-size: calc(var(--tl-font-size)*1.17);
+  --tl-h4-font-size: calc(var(--tl-font-size)*1);
+  --tl-h5-font-size: calc(var(--tl-font-size)*0.83);
+  --tl-h6-font-size: calc(var(--tl-font-size)*0.67);
+
+  // custom font size for nav-list items
+  --tl-nav-item-font-size: calc(var(--tl-font-size)*0.875);
+  --tl-text-node-font-size: calc(var(--tl-font-size)*0.875);
+
   --wvr-font-family-sans-serif: var(--tl-font-family-sans-serif);
+
+  font-family: var(--tl-font-family-sans-serif);
+  font-size: var(--tl-font-size);
+
 }
diff --git a/src/app/shared/tl-abstract-base.component.ts b/src/app/shared/tl-abstract-base.component.ts
@@ -0,0 +1,15 @@
+import { HostBinding, Input } from '@angular/core';
+
+export abstract class TamuAbstractBaseComponent {
+  /** Allows for the override of the --tl-default-font-size css variable. */
+  @HostBinding('style.--tl-font-size') _fontSize = 'var(--tl-default-font-size)';
+
+  /** Allows for the override of the --tl-font-family-sans-serif css variable. */
+  @HostBinding('style.--tl-font-family-sans-serif') _fontFamily = 'var(--tl-default-font-family-sans-serif)';
+
+  @Input() set inheritFontStyle(value: 'true' | 'false') {
+    this._fontSize = (value === 'true') ? 'inherit' : 'var(--tl-default-font-size)';
+    this._fontFamily = (value === 'true') ? 'inherit' : 'var(--tl-default-font-family-sans-serif)';
+  }
+
+}
diff --git a/src/app/tl-footer/tl-footer.component.scss b/src/app/tl-footer/tl-footer.component.scss
@@ -6,7 +6,7 @@
     // Weaver Component overrides
     --wvr-navbar-padding: 0px;
     --wvr-font-family-sans-serif: var(--tl-font-family-sans-serif);
-    --wvr-nav-link-font-size: var(--tl-nav-link-font-size);
+    --wvr-nav-link-font-size: var(--tl-nav-item-font-size);
     --footer-height: 50px;
   }
 

diff --git a/src/app/tl-footer/tl-footer.component.ts b/src/app/tl-footer/tl-footer.component.ts
@@ -1,5 +1,6 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 import { Link } from '../shared/link';
+import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
 
 /**
  * A fullwidth footer component which attaches to the bottom of the document body.
@@ -11,7 +12,7 @@ import { Link } from '../shared/link';
   styleUrls: ['./tl-footer.component.scss'],
   encapsulation: ViewEncapsulation.ShadowDom
 })
-export class TamuFooterComponent {
+export class TamuFooterComponent extends TamuAbstractBaseComponent {
 
   /** Used to override the background color. */
   backgroundColor = 'var(--tl-primary)';

diff --git a/src/app/tl-header/tl-header.component.html b/src/app/tl-header/tl-header.component.html
@@ -12,4 +12,5 @@
       <ng-content select="wvr-nav-li"></ng-content>
     </ng-container>
   </wvr-nav-list-element>
+
 </wvr-header-element>
diff --git a/src/app/tl-header/tl-header.component.scss b/src/app/tl-header/tl-header.component.scss
@@ -7,7 +7,7 @@
     // Weaver Component overrides
     --wvr-navbar-padding: 0px;
     --wvr-font-family-sans-serif: var(--tl-font-family-sans-serif);
-    --wvr-nav-link-font-size: var(--tl-nav-link-font-size);
+    --wvr-nav-link-font-size: var(--tl-nav-item-font-size);
 
     // Weaver Header Element Overrides
     --top-nav-height: 50px;
@@ -19,6 +19,12 @@
       --wvr-nav-link-color: var(--tl-white);
       --wvr-nav-link-color-hover: var(--tl-black);
       --wvr-nav-link-background-hover: var(--tl-deep-yellow);
+      --wvr-nav-li-width: contain;
+      border-right: 1px solid #6a0000;
+    }
+
+    wvr-nav-list-element[top-navigation] wvr-nav-li-element:last-child {
+      border-right: 0px;
     }
 
     wvr-nav-list-element[bottom-navigation] wvr-nav-li {
@@ -27,7 +33,18 @@
       --wvr-nav-link-background-hover: var(--tl-deep-grey);
     }
 
+    .navbar-brand {
+      font-size: var(--tl-default-font-size);
+    }
+
+    .h1 {
+      font-size: var(--tl-h1-font-size);
+    }
+
+    .top-nav{
+      border-bottom: 1px solid #333333;
+    }
+
   }
 
 }
-
diff --git a/src/app/tl-header/tl-header.component.spec.ts b/src/app/tl-header/tl-header.component.spec.ts
@@ -56,4 +56,20 @@ describe('TamuHeaderComponent', () => {
       .toEqual('TL Header Component');
   });
 
+  it("should have conditional font styling", () => {
+    expect(component.inheritFontStyle).toEqual(undefined);
+    expect(component._fontFamily).toEqual('var(--tl-default-font-family-sans-serif)');
+    expect(component._fontSize).toEqual('var(--tl-default-font-size)');
+
+    component.inheritFontStyle = 'true';
+    fixture.detectChanges();
+    expect(component._fontFamily).toEqual('inherit');
+    expect(component._fontSize).toEqual('inherit');
+
+    component.inheritFontStyle = 'false';
+    fixture.detectChanges();
+    expect(component._fontFamily).toEqual('var(--tl-default-font-family-sans-serif)');
+    expect(component._fontSize).toEqual('var(--tl-default-font-size)');
+  });
+
 });
diff --git a/src/app/tl-header/tl-header.component.ts b/src/app/tl-header/tl-header.component.ts
@@ -1,13 +1,14 @@
 import { Component, Input, ViewEncapsulation } from '@angular/core';
 import { Link } from '../shared/link';
+import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
 
 @Component({
   selector: 'tl-header-element',
   templateUrl: './tl-header.component.html',
   styleUrls: ['./tl-header.component.scss'],
   encapsulation: ViewEncapsulation.ShadowDom
 })
-export class TamuHeaderComponent {
+export class TamuHeaderComponent extends TamuAbstractBaseComponent {
 
   /** This is a URL pointing to the location of the logo. */
   logoSrc = 'https://labs.library.tamu.edu/tl-components/latest/assets/tamu-logo.svg';
@@ -40,7 +41,9 @@ export class TamuHeaderComponent {
   topLinks: Array<Link> = [
     { href: 'https://library.tamu.edu/about/hours.html', value: 'Hours' },
     { href: 'https://library.tamu.edu/about/index.html', value: 'Libraries' },
-    { href: 'http://askus.library.tamu.edu', value: 'AskUs' }
+    { href: 'https://library.tamu.edu/#', value: 'Information For' },
+    { href: 'https://library.tamu.edu/mylibrary/', value: 'MyLibrary' },
+    { href: 'http://askus.library.tamu.edu/', value: 'Help' }
   ];
 
-}
+}
diff --git a/src/app/tl-it-works/tl-it-works.component.scss b/src/app/tl-it-works/tl-it-works.component.scss
@@ -1,2 +1,9 @@
 @import "~bootstrap/scss/bootstrap.scss";
-@import "../shared/styles/tl-variables.scss";
+@import "../shared/styles/tl-variables.scss";
+
+:host {
+  h1.it-works {
+    font-size: var(--tl-font-size);
+    font-family: var(--tl-font-family-sans-serif);
+  }
+}
diff --git a/src/app/tl-it-works/tl-it-works.component.ts b/src/app/tl-it-works/tl-it-works.component.ts
@@ -1,12 +1,13 @@
 import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
 
 @Component({
   selector: 'tl-it-works-element',
   templateUrl: './tl-it-works.component.html',
   styleUrls: ['./tl-it-works.component.scss'],
   encapsulation: ViewEncapsulation.ShadowDom
 })
-export class TamuItWorksComponent {
+export class TamuItWorksComponent extends TamuAbstractBaseComponent {
 
   /** The text value to be displayed in the page title. */
   title = 'tl-it-works-component';

diff --git a/src/app/tl-nav-list/tl-nav-list.component.ts b/src/app/tl-nav-list/tl-nav-list.component.ts
@@ -1,5 +1,6 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ViewEncapsulation } from '@angular/core';
 import { Alignment } from '@wvr/elements';
+import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
 
 /**
  * The TamuNavList Component represents a navigation list.
@@ -8,9 +9,10 @@ import { Alignment } from '@wvr/elements';
 @Component({
   selector: 'tl-nav-list-element',
   templateUrl: './tl-nav-list.component.html',
-  styleUrls: ['./tl-nav-list.component.scss']
+  styleUrls: ['./tl-nav-list.component.scss'],
+  encapsulation: ViewEncapsulation.ShadowDom
 })
-export class TamuNavListComponent {
+export class TamuNavListComponent extends TamuAbstractBaseComponent {
 
   /** The aligned property describing the positioning of the list elements. */
   @Input() aligned: Alignment = Alignment.LEFT;

diff --git a/src/polyfills.ts b/src/polyfills.ts
@@ -1,3 +1,7 @@
+/***************************************************************************************************
+ * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
+ */
+import '@angular/localize/init';
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
  * You can add your own extra polyfills to this file.