Sprint14 staging

CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [1.7.0] - 12-18-20
+### Resolves
+
+- 'Give to the Libraries' item to be added in the bottom navidgation section in tl-header (#254)
+- TL Components should utilize externals to reduce bundle size. (#117)
+- Remove scss, rendered unnecessary by the recent theme features. (#276)
+- Remove scss, rendered unnecessary by the recent theme features. (#239)
+- Library hours disappear when moving from mobile layout to desktop layout. This also happens with the icons in the help dropdown. (#238)
+- Dropdown buttons and buttons exhibit different theming behavior (#241)
+- TL Components Documentation and Report pages should use theme-variant as opposed to theme-varient (#245)
+- TL Usage Documentation should use wvr ud scripts (#236)
+- FIx Mega Menu resize test. (#240)
+
 ## [1.6.0] - 11-20-20
 ### Resolves
 

defaults-dist-overrides.env

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

lighthouserc.json

@@ -4,7 +4,7 @@
   "ci": {
     "collect": {
       "numberOfRuns": 1,
-      "url": ["http://localhost:8080/"],
+      "url": ["http://localhost:8081/"],
       "startServerCommand": "npm run start:dist"
     },
     "assert": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tamu-library-components",
-  "version": "1.6.5",
+  "version": "1.7.0",
   "private": true,
   "config": {
     "DOCKER_SERVER": "10.55.134.48/weaver/tl-components"
@@ -51,17 +51,18 @@
     "@angular/platform-browser-dynamic": "^11.0.4",
     "@angular/router": "^11.0.4",
     "@ng-bootstrap/ng-bootstrap": "^8.0.0",
-    "@ngrx/effects": "^10.1.0",
-    "@ngrx/entity": "^10.1.0",
-    "@ngrx/store": "^10.1.0",
-    "@ngrx/store-devtools": "^10.1.0",
-    "@wvr/elements": "1.7.4",
+    "@ngrx/effects": "^10.1.1",
+    "@ngrx/entity": "^10.1.1",
+    "@ngrx/store": "^10.1.1",
+    "@ngrx/store-devtools": "^10.1.1",
+    "@wvr/elements": "1.8.0",
     "bootstrap": "^4.5.3",
     "document-register-element": "^1.14.5",
     "handlebars": "^4.7.6",
     "jsdom": "^16.4.0",
     "karma-viewport": "^1.0.7",
     "ng-inline-svg": "^11.0.1",
+    "ng-lazyload-image": "^9.1.0",
     "ngx-build-plus": "^10.1.1",
     "rxjs": "~6.6.3",
     "tslib": "^2.0.3",
@@ -78,7 +79,7 @@
     "@lhci/cli": "^0.6.1",
     "@types/jasmine": "~3.6.2",
     "@types/jasminewd2": "~2.0.8",
-    "@types/node": "^14.14.13",
+    "@types/node": "^14.14.14",
     "angular-tslint-rules": "^1.20.4",
     "codelyzer": "^6.0.1",
     "concat": "^1.0.3",

scripts/serve-dist.js

@@ -9,7 +9,7 @@ const bundlePath = `${basePath}/bundle`;
 
 const server = new StaticServer({
   rootPath: 'dist/bundle',
-  port: 8080,
+  port: 8081,
   name: 'tl-component-dist-server',
   followSymlink: true,
   cors: '*'

scripts/start-docker.js

@@ -6,7 +6,7 @@ const package = require('../package.json');
 const tagBase = process.env.npm_package_config_DOCKER_SERVER.length ?
                 `${process.env.npm_package_config_DOCKER_SERVER}:` :
                 '';
-const dockerCmd = `docker run --env-file=defaults.env --env-file=defaults-dev-overrides.env -p 8080:80 -t ${tagBase}${package.version}`;
+const dockerCmd = `docker run --env-file=defaults.env --env-file=defaults-dev-overrides.env -p 8081:80 -t ${tagBase}${package.version}`;
 
 shell.config.fatal = true;
 

src/app/shared/styles/tl-branded-btn.scss

@@ -2,227 +2,4 @@
 
 :host {
 
-  --tl-btn-border-radius: 4px;
-  --tl-btn-font-family: var(--tl-font-family-sans-serif);
-  --tl-btn-font-size: 18px;
-  --tl-btn-line-height: 24px;
-  --tl-btn-padding: .375rem .75rem;
-  --tl-btn-text-align: center;
-  --tl-btn-vertical-align: middle;
-  --tl-btn-box-shadow: none;
-
-  --tl-btn-border: 1px solid transparent;
-
-  // primary
-  --tl-btn-primary-background: rgb(80, 0, 0);
-  --tl-btn-primary-active-background: rgb(77, 77, 77);
-  --tl-btn-primary-hover-background: rgb(77, 77, 77);
-
-  --tl-btn-primary-color:rgb(255, 255, 255);
-  --tl-btn-primary-active-color:rgb(255, 255, 255);
-  --tl-btn-primary-hover-color:rgb(255, 255, 255);
-
-  --tl-btn-primary-text-decoration: none;
-  --tl-btn-primary-active-text-decoration: none;
-  --tl-btn-primary-focus-text-decoration: none;
-  --tl-btn-primary-hover-text-decoration: none;
-
-  --tl-btn-primary-width: 65px;
-
-  // secondary
-  --tl-btn-secondary-background: rgb(38, 90, 135);
-  --tl-btn-secondary-active-background: rgb(77, 77, 77);
-  --tl-btn-secondary-hover-background: rgb(77, 77, 77);
-
-  --tl-btn-secondary-border: 1px solid rgb(38, 90, 135);
-  --tl-btn-secondary-active-border: 1px solid rgb(77, 77, 77);
-  --tl-btn-secondary-focus-border: 1px solid rgb(77, 77, 77);
-  --tl-btn-secondary-hover-border: 1px solid rgb(77, 77, 77);
-
-  --tl-btn-secondary-color: rgb(255, 255, 255);
-  --tl-btn-secondary-active-color:rgb(255, 255, 255);
-  --tl-btn-secondary-hover-color:rgb(255, 255, 255);
-
-  --tl-btn-secondary-text-decoration: none;
-  --tl-btn-secondary-active-text-decoration: none;
-  --tl-btn-secondary-focus-text-decoration: none;
-  --tl-btn-secondary-hover-text-decoration: none;
-
-  --tl-btn-secondary-width: 85px;
-
-  // info
-  --tl-btn-info-background: rgb(91, 192, 222);
-  --tl-btn-info-active-background: rgb(49, 176, 213);
-  --tl-btn-info-hover-background: rgb(49, 176, 213);
-
-  --tl-btn-info-border: 1px solid rgb(151, 151, 151);
-  --tl-btn-info-active-border: 1px solid rgb(151, 151, 151);
-  --tl-btn-info-focus-border: 1px solid rgb(151, 151, 151);
-  --tl-btn-info-hover-border: 1px solid rgb(151, 151, 151);
-
-  --tl-btn-info-color:rgb(0, 0, 0);
-  --tl-btn-info-active-color:rgb(0, 0, 0);
-  --tl-btn-info-hover-color:rgb(0, 0, 0);
-
-  --tl-btn-info-text-decoration: none;
-  --tl-btn-info-active-text-decoration: none;
-  --tl-btn-info-focus-text-decoration: none;
-  --tl-btn-info-hover-text-decoration: none;
-
-  --tl-btn-info-width: 33px;
-
-
-  // warning
-  --tl-btn-warning-background: rgb(255, 194, 34);
-  --tl-btn-warning-active-background: rgb(255, 232, 170);
-  --tl-btn-warning-hover-background: rgb(255, 232, 170);
-
-  --tl-btn-warning-border: 1px solid rgb(255, 232, 170);
-  --tl-btn-warning-active-border: 1px solid rgb(255, 232, 170);
-  --tl-btn-warning-focus-border: 1px solid rgb(255, 232, 170);
-  --tl-btn-warning-hover-border: 1px solid rgb(255, 232, 170);
-
-  --tl-btn-warning-color: rgb(0, 0, 0);
-  --tl-btn-warning-active-color:rgb(0, 0, 0);
-  --tl-btn-warning-hover-color:rgb(0, 0, 0);
-
-  --tl-btn-warning-text-decoration: none;
-  --tl-btn-warning-active-text-decoration: none;
-  --tl-btn-warning-focus-text-decoration: none;
-  --tl-btn-warning-hover-text-decoration: none;
-
-  --tl-btn-warning-width: 69px;
-  --tl-btn-warning-hover-width: 124px;
-
-  // danger
-  --tl-btn-danger-background: rgb(228, 0, 43);
-  --tl-btn-danger-active-background: rgb(255, 219, 226);
-  --tl-btn-danger-hover-background: rgb(255, 219, 226);
-
-  --tl-btn-danger-border: 1px solid rgb(228, 0, 43);
-  --tl-btn-danger-active-border: 1px solid rgb(228, 0, 43);
-  --tl-btn-danger-focus-border: 1px solid rgb(228, 0, 43);
-  --tl-btn-danger-hover-border: 1px solid rgb(228, 0, 43);
-
-  --tl-btn-danger-color: rgb(255, 255, 255);
-  --tl-btn-danger-active-color:rgb(0, 0, 0);
-  --tl-btn-danger-hover-color:rgb(0, 0, 0);
-
-  --tl-btn-danger-text-decoration: none;
-  --tl-btn-danger-active-text-decoration: none;
-  --tl-btn-danger-focus-text-decoration: none;
-  --tl-btn-danger-hover-text-decoration: none;
-
-  --tl-btn-danger-width: 60px;
-
-  // success
-  --tl-btn-success-background: rgb(0, 189, 50);
-  --tl-btn-success-active-background: rgb(214, 255, 224);
-  --tl-btn-success-hover-background: rgb(214, 255, 224);
-
-  --tl-btn-success-border: 1px solid rgb(0, 189, 50);
-  --tl-btn-success-active-border: 1px solid rgb(0, 189, 50);
-  --tl-btn-success-focus-border: 1px solid rgb(0, 189, 50);
-  --tl-btn-success-hover-border: 1px solid rgb(0, 189, 50);
-
-  --tl-btn-success-color: rgb(0, 0, 0);
-  --tl-btn-success-active-color:rgb(0, 0, 0);
-  --tl-btn-success-hover-color:rgb(0, 0, 0);
-
-  --tl-btn-success-text-decoration: none;
-  --tl-btn-success-active-text-decoration: none;
-  --tl-btn-success-focus-text-decoration: none;
-  --tl-btn-success-hover-text-decoration: none;
-
-  --tl-btn-success-width: 63px;
-
-
-  // light
-  --tl-btn-light-background: rgb(255, 255, 255);
-  --tl-btn-light-active-background: rgb(80, 0, 0);
-  --tl-btn-light-hover-background: rgb(80, 0, 0);
-
-  --tl-btn-light-border: 1px solid rgb(80, 0, 0);
-  --tl-btn-light-active-border: 1px solid rgb(80, 0, 0);
-  --tl-btn-light-focus-border: 1px solid rgb(80, 0, 0);
-  --tl-btn-light-hover-border: 1px solid rgb(80, 0, 0);
-
-  --tl-btn-light-color: rgb(80, 0, 0);
-  --tl-btn-light-active-color:rgb(255, 255, 255);
-  --tl-btn-light-hover-color:rgb(255, 255, 255);
-
-  --tl-btn-light-text-decoration: none;
-  --tl-btn-light-active-text-decoration: none;
-  --tl-btn-light-focus-text-decoration: none;
-  --tl-btn-light-hover-text-decoration: none;
-
-  --tl-btn-light-width: 41px;
-
-  // dark
-  --tl-btn-dark-background: rgb(77, 77, 77);
-  --tl-btn-dark-active-background: rgb(255, 255, 255);
-  --tl-btn-dark-hover-background: rgb(255, 255, 255);
-
-  --tl-btn-dark-border: 1px solid rgb(77, 77, 77);
-  --tl-btn-dark-active-border: 1px solid rgb(77, 77, 77);
-  --tl-btn-dark-focus-border: 1px solid rgb(77, 77, 77);
-  --tl-btn-dark-hover-border: 1px solid rgb(77, 77, 77);
-
-  --tl-btn-dark-color: rgb(255, 255, 255);
-  --tl-btn-dark-active-color:rgb(77, 77, 77);
-  --tl-btn-dark-hover-color:rgb(77, 77, 77);
-
-  --tl-btn-dark-text-decoration: none;
-  --tl-btn-dark-active-text-decoration: none;
-  --tl-btn-dark-focus-text-decoration: none;
-  --tl-btn-dark-hover-text-decoration: none;
-
-  --tl-btn-dark-width: 40px;
-
-  // link
-  --tl-btn-link-background: none;
-  --tl-btn-link-active-background: none;
-  --tl-btn-link-hover-background: none;
-
-  --tl-btn-link-border: none;
-  --tl-btn-link-active-border: none;
-  --tl-btn-link-focus-border: none;
-  --tl-btn-link-hover-border: none;
-
-  --tl-btn-link-color: rgb(43, 93, 125); // rgb(80, 0, 0);
-  --tl-btn-link-active-color:rgb(43, 93, 125);
-  --tl-btn-link-hover-color:rgb(43, 93, 125);
-
-  --tl-btn-link-text-decoration: none;
-  --tl-btn-link-active-text-decoration: underline;
-  --tl-btn-link-focus-text-decoration: underline;
-  --tl-btn-link-hover-text-decoration: underline;
-
-  --tl-btn-link-width: 26px;
-
-  // dropdown styles
-
-  // primary button
-  --tl-dropdown-primary-button-background: rgb(38, 90, 135);
-  --tl-dropdown-primary-button-border: 1px solid rgb(30, 72, 108);
-  // primary button : hover
-  --tl-dropdown-primary-button-hover-background: rgb(77, 77, 77);
-  --tl-dropdown-primary-button--hover-border: 1px solid rgb(89, 89, 89);
-
-  // info button
-  --tl-dropdown-info-button-color: var(--tl-black) ;
-  --tl-dropdown-info-button-background: rgb(91, 192, 222);
-  --tl-dropdown-info-button-border: 1px solid rgb(70, 184, 218);
-  // info button : hover
-  --tl-dropdown-info-button-hover-background: rgb(49, 176, 213);
-  --tl-dropdown-info-button--hover-border: 1px solid rgb(38, 154, 188);
-  --tl-dropdown-info-button-hover-color: #fff ;
-
-  // default button
-  --tl-dropdown-default-button-background: rgb(80, 0, 0);
-  --tl-dropdown-default-button-border: 1px solid rgb(151, 151, 151);
-  --tl-dropdown-default-button-color: #ffffff ;
-  // default button : hover
-  --tl-dropdown-default-button-hover-background: rgb(77, 77, 77);
-
 }