Merge pull request #274 from TAMULib/sprint13-staging

Sprint13 staging

.wvr-ud/static-assets/_styles.css

@@ -102,6 +102,7 @@ main {
 }
 
 #editor,
+#template-editor,
 #scss-editor,
 #source-editor {
   height:400px;

.wvr-ud/static-assets/index-base.html

@@ -42,6 +42,9 @@ <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-
               <li class="nav-item">
                 <a class="nav-link" id="snippet-tab" data-toggle="tab" href="#snippet" role="tab" aria-controls="snippet" aria-selected="false">Snippet</a>
               </li>
+              <li class="nav-item">
+                <a class="nav-link" id="template-tab" data-toggle="tab" href="#template" role="tab" aria-controls="template" aria-selected="false">Template</a>
+              </li>
               <li class="nav-item">
                 <a class="nav-link" id="scss-tab" data-toggle="tab" href="#scss" role="tab" aria-controls="scss" aria-selected="false">SCSS</a>
               </li>
@@ -59,6 +62,9 @@ <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-
                   Copy Snippet
                 </button>
               </div>
+              <div class="tab-pane" id="template" role="tabpanel" aria-labelledby="template-tab">
+                <div id="template-editor"></div>
+              </div>
               <div class="tab-pane" id="scss" role="tabpanel" aria-labelledby="scss-tab">
                 <div id="scss-editor"></div>
               </div>
@@ -69,7 +75,7 @@ <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-
           </div>
         </div>
       </main>
-     
+
     </div>
   </div>
 
@@ -111,14 +117,14 @@ <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-
   <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
   <script src="//cdn.statically.io/gh/zenorocha/clipboard.js/v2.0.4/dist/clipboard.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js" integrity="sha256-+nuEu243+6BveXk5N+Vbr268G+4FHjUOEcfKaBqfPbc=" crossorigin="anonymous"></script>
-  
+
   <!-- WUD Scripts -->
   <script type="application/json" id="expamples-manifest">
     {{EXAMPLE_MANIFEST}}
   </script>
   <script src="{{BASE_PATH}}wud.js"></script>
   <script src="{{BASE_PATH}}additional-scripts.js"></script>
-  
+
 </body>
 
 </html>

.wvr-ud/static-assets/wud.js

@@ -2,12 +2,14 @@ let componentManifest = JSON.parse($('#expamples-manifest').html());
 let editorElem = document.querySelector('#editor');
 let previewElem = document.querySelector('#preview');
 let desciptionElem = document.querySelector('#desciption');
+let templateElem = document.querySelector('#template');
 let activeExampleNameElem = document.querySelector('#active-component-name');
 let componentCollectionsList = document.querySelector('#component-collections');
 let componentCollectionTemplate = document.querySelector('#component-collection-template');
 let componentLinkTemplate = document.querySelector('#component-link-template');
 let editor;
 let scssEditor;
+let templateEditor;
 let sourceEditor;
 let components = [];
 let activeExample;
@@ -32,6 +34,15 @@ let setupEditor = () => {
       document.querySelector("main").classList.remove('loading');
     }, 500);
   });
+  templateEditor = ace.edit("template-editor");
+  templateEditor.setOptions({
+    readOnly: true,
+    highlightActiveLine: false,
+    highlightGutterLine: false,
+    theme: 'ace/theme/monokai',
+    mode: 'ace/mode/html'
+  });
+  templateEditor.renderer.$cursorLayer.element.style.opacity=0;
   scssEditor = ace.edit("scss-editor");
   scssEditor.setOptions({
     readOnly: true,
@@ -80,7 +91,7 @@ let setupComponentLinks = ()=>{
   });
   document.querySelector('.expand-collapse-all').addEventListener('click', e=>{
     e.preventDefault();
-  
+
     e.currentTarget.classList.contains('open') ?
     $('.component-links').collapse('hide') :
     $('.component-links').collapse('show')
@@ -95,11 +106,13 @@ let loadExample = (example) => {
   let desciption = example.querySelector('desciption').innerHTML;
   let componentScss = example.querySelector('component-scss').innerHTML;
   let componentSource = example.querySelector('component-source').innerHTML;
+  let componentTemplate = example.querySelector('component-template').rawTemplateHTML;
   document.querySelector('#copy-btn').setAttribute('data-clipboard-text', snippet);
   activeExampleNameElem.innerText = example.getAttribute('name');
   previewElem.innerHTML = snippet;
   desciptionElem.innerHTML = desciption;
   scssEditor.getSession().setValue(componentScss);
+  templateEditor.getSession().setValue(componentTemplate);
   sourceEditor.getSession().setValue(componentSource);
   editor.getSession().setValue(snippet);
 };
@@ -130,6 +143,7 @@ let renderComponentLinks = componentsToRender => {
           if(example.getAttribute('name').trim()===e.target.innerText.trim()) {
             activeExample=example;
             activeExample.querySelector('snippet').rawHTML = activeExample.querySelector('snippet').innerHTML;
+            activeExample.querySelector('component-template').rawTemplateHTML = activeExample.querySelector('component-template').innerHTML;
             loadExample(example);
           }
         });
@@ -221,4 +235,4 @@ setUpSearch();
 setupPromise.then(()=>{
   renderComponentLinks(components);
   loadInitialContent();
-});
+});

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [1.7.0] - 11-20-20
+### Resolves
+
+- Wvr animations have regressed and are no longer firing. (#256)
+- SetTimeouts are not performant at load time. (#257)
+- Weaver Usage Documentation should include the component template in tab list. (#260)
+- Wvr Components should support an extensible list of branded colors. (Primary, secondary, danger, warning... etc). (#262)
+- Refactor color usage across wvr components to use branded color list, and include fallback support. (#263)
+- Color preview component. (#264)
+
 ## [1.6.0] - 11-2-20
 ### Resolves
 
@@ -75,4 +85,4 @@
 - The wvr-header component's bottom-nav section should display conditionally (#81)
 - Weaver components usage documentation fails to build (#83)
 - Weaver documentation landing page is broken (#84)
-- wvr-footer's navbar should be have a height of 100% (#89)
+- wvr-footer's navbar should be have a height of 100% (#89)

angular.json

@@ -161,18 +161,6 @@
             "tsConfig": "projects/wvr-elements/tsconfig.spec.json",
             "karmaConfig": "projects/wvr-elements/karma.conf.js"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "projects/wvr-elements/tsconfig.lib.json",
-              "projects/wvr-elements/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     }

defaults-ci-overrides.env

@@ -3,5 +3,6 @@
 # in ./defaults.env when running a build for continuous integration.
 #
 
+THEME=default
 BASE_URL=https://tamulib.github.io/weaver-components/docs
 ASSETS_URL=https://tamulib.github.io/weaver-components/docs/assets

defaults-dev-overrides.env

@@ -3,5 +3,6 @@
 # in ./defaults.env when running `npm start`
 #
 
+THEME=defaultDark
 BASE_URL=http://localhost:4200
 ASSETS_URL=http://localhost:4200/assets

defaults-dist-overrides.env

@@ -3,5 +3,6 @@
 # in ./defaults.env when running `npm start:dist`
 #
 
+THEME=default
 BASE_URL=http://localhost:8080
 ASSETS_URL=http://localhost:8080/assets

defaults-static-overrides.env

@@ -3,5 +3,6 @@
 # in ./defaults.env when running `npm start:static`
 #
 
+THEME=default
 BASE_URL=http://localhost:8081
 ASSETS_URL=http://localhost:8081/weaver-components/docs/usage/assets

defaults.env

@@ -3,5 +3,6 @@
 # found at src/config-template.json.
 #
 
+THEME=default
 BASE_URL=https://labs.library.tamu.edu/wvr-components
 ASSETS_URL=https://labs.library.tamu.edu/wvr-components/assets

package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "git+https://github.com/TAMULib/weaver-components.git"
   },
-  "version": "1.6.0",
+  "version": "1.7.0",
   "private": false,
   "license": "MIT",
   "config": {
@@ -14,10 +14,11 @@
     "build": "ng build --prod --output-hashing none",
     "build:clean": "npm run clean && npm run build",
     "build:wvr-elements": "ng build wvr-elements",
+    "build:wvr-components-style": "node scripts/build-wvr-components-style.js",
     "build:wvr-components": "node scripts/build-wvr-components.js",
     "build:wvr-components-static": "node scripts/build-wvr-components-static.js",
     "build:lighthouse": "node scripts/build-lighthouse.js",
-    "prebuild": "npm run build:wvr-elements",
+    "prebuild": "npm run build:wvr-components-style && npm run build:wvr-elements",
     "postbuild": "npm run build:wvr-components",
     "build:docs": "npm run build:docs-usage && npm run build:docs-development",
     "build:docs-development": "compodoc --output ./static/weaver-components/docs/development -p ./projects/wvr-elements/tsconfig.docs.json",
@@ -37,10 +38,10 @@
     "lint": "ng lint",
     "link": "npm link ./dist/wvr-elements",
     "ng": "ng",
-    "start": "node scripts/build-wvr-components-configuration.js defaults-dev-overrides.env && ng serve --port 4200",
-    "start:dist": "node scripts/build-wvr-components-configuration.js defaults-dist-overrides.env && node scripts/serve-dist.js",
-    "start:static": "node scripts/build-wvr-components-configuration.js defaults-static-overrides.env && static-server static -p 8081",
-    "start:docker": "node scripts/start-docker.js",
+    "start": "node scripts/build-wvr-components-style.js && node scripts/build-wvr-components-configuration.js defaults-dev-overrides.env && ng serve --port 4200",
+    "start:dist": "node scripts/build-wvr-components-style.js && node scripts/build-wvr-components-configuration.js defaults-dist-overrides.env && node scripts/serve-dist.js",
+    "start:static": "node scripts/build-wvr-components-style.js && node scripts/build-wvr-components-configuration.js defaults-static-overrides.env && static-server static -p 8081",
+    "start:docker": "node scripts/build-wvr-components-style.js && node scripts/start-docker.js",
     "test": "npm run test:unit && npm run test:e2e",
     "test:audit": "rimraf .lighthouseci && lhci autorun --upload.target=temporary-public-storage --config=./lighthouserc.json && node scripts/build-wvr-components-lighthouse-badges.js",
     "test:e2e": "ng e2e",
@@ -51,52 +52,53 @@
     "test:ci": "npm run test:coverage && npm run test:audit"
   },
   "dependencies": {
-    "@angular/animations": "^10.2.0",
-    "@angular/common": "^10.2.0",
-    "@angular/compiler": "^10.2.0",
-    "@angular/core": "^10.2.0",
-    "@angular/elements": "^10.2.0",
-    "@angular/forms": "^10.2.0",
-    "@angular/localize": "^10.2.0",
-    "@angular/platform-browser": "^10.2.0",
-    "@angular/platform-browser-dynamic": "^10.2.0",
-    "@angular/router": "^10.2.0",
-    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
+    "@angular/animations": "^11.0.0",
+    "@angular/common": "^11.0.0",
+    "@angular/compiler": "^11.0.0",
+    "@angular/core": "^11.0.0",
+    "@angular/elements": "^11.0.0",
+    "@angular/forms": "^11.0.0",
+    "@angular/localize": "^11.0.0",
+    "@angular/platform-browser": "^11.0.0",
+    "@angular/platform-browser-dynamic": "^11.0.0",
+    "@angular/router": "^11.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^8.0.0",
     "@ngrx/core": "^1.2.0",
     "@ngrx/effects": "^10.0.1",
     "@ngrx/entity": "^10.0.1",
     "@ngrx/router-store": "^10.0.1",
     "@ngrx/store": "^10.0.1",
     "@ngrx/store-devtools": "^10.0.1",
-    "@types/json5": "0.0.30",
+    "@types/json5": "^0.0.30",
     "bootstrap": "^4.5.3",
     "classlist.js": "^1.1.20150312",
     "css-element-queries": "^1.2.3",
     "document-register-element": "^1.14.5",
     "dotenv-override": "^5.0.1",
     "dotenv-override-true": "^6.2.2",
     "handlebars": "^4.7.6",
+    "handlebars-loader": "^1.7.1",
     "ie11-custom-properties": "^4.1.0",
     "json5": "^2.1.3",
     "rxjs": "~6.6.3",
     "tslib": "^2.0.3",
     "web-animations-js": "^2.3.2",
-    "zone.js": "~0.11.2"
+    "zone.js": "~0.11.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1002.0",
-    "@angular-devkit/build-ng-packagr": "~0.1001.7",
-    "@angular-devkit/schematics": "^10.1.7",
-    "@angular/cli": "^10.1.7",
-    "@angular/compiler-cli": "^10.2.0",
-    "@angular/language-service": "^10.2.0",
+    "@angular-devkit/build-angular": "^0.1100.0",
+    "@angular-devkit/build-ng-packagr": "~0.1002.0",
+    "@angular-devkit/schematics": "^11.0.0",
+    "@angular/cli": "^11.0.0",
+    "@angular/compiler-cli": "^11.0.0",
+    "@angular/language-service": "^11.0.0",
     "@compodoc/compodoc": "^1.1.11",
-    "@lhci/cli": "^0.5.1",
+    "@lhci/cli": "^0.6.1",
     "@ngrx/schematics": "^10.0.1",
     "@pickra/copy-code-block": "^1.2.0",
-    "@types/jasmine": "~3.5.14",
+    "@types/jasmine": "~3.6.1",
     "@types/jasminewd2": "~2.0.8",
-    "@types/node": "^14.14.2",
+    "@types/node": "^14.14.7",
     "angular-tslint-rules": "^1.20.4",
     "chalk": "^4.1.0",
     "chrome-launcher": "^0.13.4",
@@ -115,14 +117,14 @@
     "karma-jasmine-html-reporter": "^1.5.4",
     "lighthouse": "^6.4.1",
     "lighthouse-badges": "^1.0.36",
-    "ng-packagr": "^10.1.2",
+    "ng-packagr": "^11.0.2",
     "protractor": "~7.0.0",
     "rimraf": "^3.0.2",
     "shelljs": "^0.8.4",
     "static-server": "^2.2.1",
-    "ts-loader": "^8.0.6",
+    "ts-loader": "^8.0.11",
     "ts-node": "~9.0.0",
     "tslint": "~6.1.3",
-    "typescript": "~4.0.3"
+    "typescript": "~4.0.5"
   }
 }

projects/wvr-elements/ng-package.json

@@ -5,6 +5,7 @@
     "entryFile": "src/public-api.ts"
   },
   "whitelistedNonPeerDependencies": [
-    "css-element-queries"
+    "css-element-queries",
+    "handlebars"
   ]
 }

projects/wvr-elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wvr/elements",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Collection of angular components for Weaver's Custom Web Component UI",
   "author": "Texas A&M University Libraries",
   "private": false,
@@ -22,7 +22,8 @@
   "license": "MIT",
   "dependencies": {
     "css-element-queries": "^1.2.3",
-    "tslib": "^2.0.0"
+    "tslib": "^2.0.0",
+    "handlebars": "^4.7.6"
   },
   "bin": {
     "wvr-ud": "./scripts/build-wvr-ud.js"

projects/wvr-elements/src/lib/core/wvr-animation.service.spec.ts → projects/wvr-elements/src/lib/core/animation.service.spec.ts

@@ -2,12 +2,14 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { StoreModule } from '@ngrx/store';
+import { WvrBaseComponent } from '../shared/wvr-base.component';
 import { WvrItWorksComponent } from '../wvr-it-works/wvr-it-works.component';
 import { metaReducers, ROOT_REDUCER } from './store';
-import { WvrAnimationService } from './wvr-animation.service';
+import { AnimationService } from './animation.service';
+import { APP_CONFIG, testAppConfig } from '../shared/config';
 
-describe('WvrAnimationService', () => {
-  let service: WvrAnimationService;
+describe('AnimationService', () => {
+  let service: AnimationService<WvrBaseComponent>;
   let componentOne: WvrItWorksComponent;
   let componentTwo: WvrItWorksComponent;
   let fixtureOne: ComponentFixture<WvrItWorksComponent>;
@@ -17,13 +19,17 @@ describe('WvrAnimationService', () => {
     await TestBed.configureTestingModule({
       imports: [BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers })],
       declarations: [WvrItWorksComponent],
+      providers: [{
+        provide: APP_CONFIG,
+        useValue: testAppConfig
+      }],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
       .compileComponents();
   });
 
   beforeEach(() => {
-    service = TestBed.inject(WvrAnimationService);
+    service = TestBed.inject(AnimationService);
 
     fixtureOne = TestBed.createComponent(WvrItWorksComponent);
     componentOne = fixtureOne.componentInstance;