[terra-framework] clinical-lowlight-theme port (#978)

* lowlight theme template changes

* clinical theme files added

* clinical lowlight theme reference wdio screenshots

* changelog

* fix for wdio failures

* docker-compose update

* after merge screenshot updates

* Add new variable for Modal-Manager Background Color

Companion to #986

* time input lowlight theme variable updated

* updated changelog and wdio screenshots after
latest toolkit release

* wdio screenshot updates

* more screenshot updates

* screenshots added

* screenshot cleanup

* time input lowlight theme updates

* timeinput related screenshot updates

* terra-tabs lowlight theme wdio screenshot updates

* updated ignore files and lowlight theme wdio
config

* cleaned lowlight obsolete variables and updated
travis to use test-ci service

* changelog

* removed clinical-lowlight-theme wdio screenshots

* changelog updates

* commented out lowlight theme wdio on travis

* added generated-themes to .npmignore for missed
files

* added missing changes to package.json

* updates to wdio configs

* travis documentation

* typo

Co-authored-by: Neil Pfeiffer <[email protected]>

.dockerignore

@@ -8,3 +8,4 @@ node_modules
 packages/*/node_modules
 lib
 build
+generated-themes

.eslintignore

@@ -4,3 +4,4 @@ coverage
 build
 **/aggregated-translations/*.*
 packages/terra-date-picker/src/react-datepicker/*.*
+generated-themes

.gitignore

@@ -60,4 +60,4 @@ props-table
 **/__snapshots__/diff
 errorScreenshots
 .vscode/
-generated-themes
+generated-themes

.travis.yml

@@ -49,6 +49,24 @@ jobs:
       script: travis_wait docker-compose run -e FORM_FACTOR=huge test-ci
     - name: enormous
       script: travis_wait docker-compose run -e FORM_FACTOR=enormous test-ci
+
+    # This should be enabled once after all the 3 mono repos have been merged with the lowlight theme files and screenshots have been generated.
+
+    # - stage: compile - lowlight theme
+    #   script: travis_wait docker-compose run test-ci npm run compile:lowlight
+    # - stage: wdio - lowlight theme
+    #   name: tiny
+    #   script: travis_wait docker-compose run -e FORM_FACTOR=tiny test-ci sh -c 'npm run wdio-lowlight'
+    # - name: small
+    #   script: travis_wait docker-compose run -e FORM_FACTOR=small test-ci sh -c 'npm run wdio-lowlight'
+    # - name: medium
+    #   script: travis_wait docker-compose run -e FORM_FACTOR=medium test-ci sh -c 'npm run wdio-lowlight'
+    # - name: large
+    #   script: travis_wait docker-compose run -e FORM_FACTOR=large test-ci sh -c 'npm run wdio-lowlight'
+    # - name: huge
+    #   script: travis_wait docker-compose run -e FORM_FACTOR=huge test-ci sh -c 'npm run wdio-lowlight'
+    # - name: enormous
+    #   script: travis_wait docker-compose run -e FORM_FACTOR=enormous test-ci sh -c 'npm run wdio-lowlight'
     - stage: compile - fusion theme
       script: travis_wait docker-compose run test-ci npm run compile:fusion
     - stage: wdio - fusion theme
@@ -88,6 +106,8 @@ stages:
   - danger lint and jest
   - compile - default theme
   - wdio - default theme
+  # - compile - lowlight theme
+  # - wdio - lowlight theme
   - compile - fusion theme
   - wdio - fusion theme
   - name: deploy

config/wdio/clinical-lowlight-theme/wdio.conf.js

@@ -0,0 +1,17 @@
+const defaultConfig = require('../../../node_modules/terra-toolkit/config/wdio/wdio.conf');
+
+// Disabling color contrast rule for clinical-lowlight-theme. May not be addressed, since these rules
+// are designed for normal lighting situations and NOT for specialized lighting situations (lowlight)
+const config = {
+  ...defaultConfig.config,
+  axe: {
+    ...defaultConfig.config.axe,
+    options: {
+      rules: [
+        { id: 'color-contrast', enabled: false },
+      ],
+    },
+  },
+};
+
+exports.config = config;

dev-site-config/site.config.js

@@ -4,6 +4,7 @@ const siteConfig = {
   appConfig: {
     themes: {
       'Default Theme': '',
+      'Clinical Low Light Theme': 'clinical-lowlight-theme',
       'Orion Fusion Theme': 'orion-fusion-theme',
     },
   },

package.json

@@ -74,6 +74,7 @@
     "compile:clean": "rm -rf packages/**/lib",
     "compile:src": "lerna run compile",
     "compile:prod": "rm -rf ./build; NODE_ENV=production webpack -p",
+    "compile:lowlight": "rm -rf ./build; THEME=clinical-lowlight-theme webpack -p",
     "compile:fusion": "rm -rf ./build; THEME=orion-fusion-theme webpack -p",
     "danger": "danger ci",
     "deploy": "npm run compile:prod && gh-pages -d build",
@@ -98,8 +99,9 @@
     "start-static": "npm run compile:prod && tt-serve-static --site ./build",
     "test": "npm run jest && npm run wdio",
     "wdio-default": "wdio node_modules/terra-toolkit/config/wdio/wdio.conf.js",
+    "wdio-lowlight": "THEME=clinical-lowlight-theme wdio config/wdio/clinical-lowlight-theme/wdio.conf.js",
     "wdio-fusion": "THEME=orion-fusion-theme wdio node_modules/terra-toolkit/config/wdio/wdio.conf.js",
-    "wdio": "npm run wdio-default && npm run wdio-fusion"
+    "wdio": "npm run wdio-default && npm run wdio-lowlight && npm run wdio-fusion"
   },
   "devDependencies": {
     "@babel/cli": "^7.5.0",
@@ -138,7 +140,7 @@
     "terra-dev-site": "^6.5.0",
     "terra-disclosure-manager": "^4.9.0",
     "terra-enzyme-intl": "^3.0.0",
-    "terra-toolkit": "^5.4.0",
+    "terra-toolkit": "^5.18.0",
     "webpack": "^4.30.0",
     "webpack-cli": "^3.3.2",
     "webpack-dev-server": "^3.3.1",

packages/terra-abstract-modal/.npmignore

@@ -5,4 +5,5 @@ tests/**/__snapshots__/
 aggregated-translations
 dev-site-config
 screenshots
-errorScreenshots
+errorScreenshots
+generated-themes

packages/terra-abstract-modal/CHANGELOG.md

@@ -3,6 +3,9 @@ Changelog
 
 Unreleased
 ----------
+### Added
+* Added clinical-lowlight-theme theming files
+
 ### Changed
 * Update dependency `wicg-inert` from `v2` to `v3`.
 

packages/terra-abstract-modal/clinical-lowlight-wdio.conf.js

@@ -0,0 +1,6 @@
+const path = require('path');
+const wdioConf = require('../../config/wdio/clinical-lowlight-theme/wdio.conf.js');
+
+wdioConf.config.specs = [path.join(__dirname, 'tests', 'wdio', '**', '*-spec.js')];
+
+exports.config = wdioConf.config;

packages/terra-abstract-modal/package.json

@@ -47,7 +47,8 @@
     "test": "npm run jest && npm run wdio",
     "jest": "jest --config ../../jestconfig.js",
     "wdio-default": "cd ../.. && npx wdio ./packages/$npm_package_name/wdio.conf.js",
+    "wdio-lowlight": "cd ../.. && THEME=clinical-lowlight-theme npx wdio ./packages/$npm_package_name/clinical-lowlight-wdio.conf.js",
     "wdio-fusion": "cd ../.. && THEME=orion-fusion-theme npx wdio ./packages/$npm_package_name/wdio.conf.js",
-    "wdio": "npm run wdio-default && npm run wdio-fusion"
+    "wdio": "npm run wdio-default && npm run wdio-lowlight && npm run wdio-fusion"
   }
 }

packages/terra-abstract-modal/themes/clinical-lowlight-theme/clinical-lowlight-theme.scss

@@ -0,0 +1,6 @@
+:global {
+  --terra-abstract-modal-overlay-background-color: rgba(0, 0, 0, 0.4);
+  --terra-abstract-modal-overlay-background-image: none;
+  --terra-abstract-modal-overlay-foreground-color: none;
+  --terra-abstract-modal-overlay-opacity: none;
+}

packages/terra-abstract-modal/wdio.conf.js

@@ -1,6 +1,6 @@
 const path = require('path');
 const wdioConf = require('../../node_modules/terra-toolkit/config/wdio/wdio.conf');
 
-wdioConf.config.specs = [path.join(__dirname, 'test*', 'wdio', '**', '*-spec.js')];
+wdioConf.config.specs = [path.join(__dirname, 'tests', 'wdio', '**', '*-spec.js')];
 
 exports.config = wdioConf.config;

packages/terra-aggregator/.npmignore

@@ -5,4 +5,5 @@ tests/**/__snapshots__/
 aggregated-translations
 dev-site-config
 screenshots
-errorScreenshots
+errorScreenshots
+generated-themes

packages/terra-aggregator/CHANGELOG.md

@@ -3,6 +3,9 @@ Changelog
 
 Unreleased
 ----------
+### Added
+* Added generated-themes to .npmignore
+
 4.39.0 - (February 4, 2020)
 ------------------
 ### Changed

packages/terra-aggregator/clinical-lowlight-wdio.conf.js

@@ -0,0 +1,6 @@
+const path = require('path');
+const wdioConf = require('../../config/wdio/clinical-lowlight-theme/wdio.conf.js');
+
+wdioConf.config.specs = [path.join(__dirname, 'tests', 'wdio', '**', '*-spec.js')];
+
+exports.config = wdioConf.config;

packages/terra-aggregator/package.json

@@ -49,6 +49,9 @@
     "precompile": "rm -rf lib",
     "test": "npm run jest && npm run wdio",
     "jest": "jest --config ../../jestconfig.js",
-    "wdio": "cd ../.. && npx wdio ./packages/$npm_package_name/wdio.conf.js"
+    "wdio-default": "cd ../.. && npx wdio ./packages/$npm_package_name/wdio.conf.js",
+    "wdio-lowlight": "cd ../.. && THEME=clinical-lowlight-theme npx wdio ./packages/$npm_package_name/clinical-lowlight-wdio.conf.js",
+    "wdio-fusion": "cd ../.. && THEME=orion-fusion-theme npx wdio ./packages/$npm_package_name/wdio.conf.js",
+    "wdio": "npm run wdio-default && npm run wdio-lowlight && npm run wdio-fusion"
   }
 }

packages/terra-aggregator/wdio.conf.js

@@ -1,6 +1,6 @@
 const path = require('path');
 const wdioConf = require('../../node_modules/terra-toolkit/config/wdio/wdio.conf');
 
-wdioConf.config.specs = [path.join(__dirname, 'test*', 'wdio', '**', '*-spec.js')];
+wdioConf.config.specs = [path.join(__dirname, 'tests', 'wdio', '**', '*-spec.js')];
 
 exports.config = wdioConf.config;

packages/terra-application-header-layout/.npmignore

@@ -5,4 +5,5 @@ tests/**/__snapshots__/
 aggregated-translations
 dev-site-config
 screenshots
-errorScreenshots
+errorScreenshots
+generated-themes

packages/terra-application-header-layout/CHANGELOG.md

@@ -3,6 +3,9 @@ Changelog
 
 Unreleased
 ----------
+### Added
+* Added clinical-lowlight-theme theming files
+
 3.24.0 - (February 4, 2020)
 ------------------
 ### Changed

packages/terra-application-header-layout/clinical-lowlight-wdio.conf.js

@@ -0,0 +1,6 @@
+const path = require('path');
+const wdioConf = require('../../config/wdio/clinical-lowlight-theme/wdio.conf.js');
+
+wdioConf.config.specs = [path.join(__dirname, 'tests', 'wdio', '**', '*-spec.js')];
+
+exports.config = wdioConf.config;

packages/terra-application-header-layout/package.json

@@ -43,6 +43,9 @@
     "precompile": "rm -rf lib",
     "test": "npm run jest && npm run wdio",
     "jest": "jest --config ../../jestconfig.js",
-    "wdio": "cd ../.. && npx wdio ./packages/$npm_package_name/wdio.conf.js"
+    "wdio-default": "cd ../.. && npx wdio ./packages/$npm_package_name/wdio.conf.js",
+    "wdio-lowlight": "cd ../.. && THEME=clinical-lowlight-theme npx wdio ./packages/$npm_package_name/clinical-lowlight-wdio.conf.js",
+    "wdio-fusion": "cd ../.. && THEME=orion-fusion-theme npx wdio ./packages/$npm_package_name/wdio.conf.js",
+    "wdio": "npm run wdio-default && npm run wdio-lowlight && npm run wdio-fusion"
   }
 }

packages/terra-application-header-layout/themes/clinical-lowlight-theme/clinical-lowlight-theme.scss

@@ -0,0 +1,5 @@
+:global {
+  --terra-application-header-layout-background-color: #222a2e;
+  --terra-application-header-layout-border: 1px solid #b2b5b6;
+  --terra-application-header-layout-color: #b2b5b6;
+}

packages/terra-application-header-layout/wdio.conf.js

@@ -1,6 +1,6 @@
 const path = require('path');
 const wdioConf = require('../../node_modules/terra-toolkit/config/wdio/wdio.conf');
 
-wdioConf.config.specs = [path.join(__dirname, 'test*', 'wdio', '**', '*-spec.js')];
+wdioConf.config.specs = [path.join(__dirname, 'tests', 'wdio', '**', '*-spec.js')];
 
 exports.config = wdioConf.config;

packages/terra-application-layout/.npmignore

@@ -5,4 +5,5 @@ tests/**/__snapshots__/
 aggregated-translations
 dev-site-config
 screenshots
-errorScreenshots
+errorScreenshots
+generated-themes

packages/terra-application-layout/CHANGELOG.md

@@ -3,6 +3,9 @@ Changelog
 
 Unreleased
 ----------
+### Added
+* Added clinical-lowlight-theme theming files
+
 5.26.0 - (February 4, 2020)
 ------------------
 ### Changed

packages/terra-application-layout/clinical-lowlight-wdio.conf.js

@@ -0,0 +1,6 @@
+const path = require('path');
+const wdioConf = require('../../config/wdio/clinical-lowlight-theme/wdio.conf.js');
+
+wdioConf.config.specs = [path.join(__dirname, 'tests', 'wdio', '**', '*-spec.js')];
+
+exports.config = wdioConf.config;

packages/terra-application-layout/package.json

@@ -58,6 +58,9 @@
     "precompile": "rm -rf lib",
     "test": "npm run jest && npm run wdio",
     "jest": "jest --config ../../jestconfig.js",
-    "wdio": "cd ../.. && npx wdio ./packages/$npm_package_name/wdio.conf.js"
+    "wdio-default": "cd ../.. && npx wdio ./packages/$npm_package_name/wdio.conf.js",
+    "wdio-lowlight": "cd ../.. && THEME=clinical-lowlight-theme npx wdio ./packages/$npm_package_name/clinical-lowlight-wdio.conf.js",
+    "wdio-fusion": "cd ../.. && THEME=orion-fusion-theme npx wdio ./packages/$npm_package_name/wdio.conf.js",
+    "wdio": "npm run wdio-default && npm run wdio-lowlight && npm run wdio-fusion"
   }
 }

packages/terra-application-layout/themes/clinical-lowlight-theme/clinical-lowlight-theme.scss

@@ -0,0 +1,30 @@
+:global {
+  --terra-application-layout-navbar-background-color: #004c76;
+  --terra-application-layout-navbar-background-image: none;
+  --terra-application-layout-navbar-before-background-color: transparent;
+  --terra-application-layout-navbar-before-background-image: none;
+  --terra-application-layout-navbar-border: none;
+  --terra-application-layout-navbar-box-shadow: none;
+  --terra-application-layout-navbar-toggle-border-right: 1px solid #0f699f;
+  --terra-application-layout-navbar-toggle-box-shadow: inset -1px 0 0 0 #022b46;
+
+  --terra-application-layout-menu-background-color: #222a2e;
+  --terra-application-layout-menu-header-background-color: #034370;
+  --terra-application-layout-menu-header-background-image: none;
+
+  --terra-application-layout-toggle-button-background-color: transparent;
+  --terra-application-layout-toggle-button-border: 0;
+  --terra-application-layout-toggle-button-box-shadow: none;
+  --terra-application-layout-toggle-button-color: #b2b5b6;
+  --terra-application-layout-toggle-button-left: 0;
+
+  --terra-application-layout-toggle-button-hover-background-color: #034370;
+  --terra-application-layout-toggle-button-hover-border-color: transparent;
+  --terra-application-layout-toggle-button-hover-box-shadow: none;
+  --terra-application-layout-toggle-button-hover-color: #b2b5b6;
+
+  --terra-application-layout-toggle-button-focus-background-color: #034370;
+  --terra-application-layout-toggle-button-focus-border-color: transparent;
+  --terra-application-layout-toggle-button-focus-box-shadow: none;
+  --terra-application-layout-toggle-button-focus-color: #b2b5b6;
+}

packages/terra-application-layout/wdio.conf.js

@@ -1,6 +1,6 @@
 const path = require('path');
 const wdioConf = require('../../node_modules/terra-toolkit/config/wdio/wdio.conf');
 
-wdioConf.config.specs = [path.join(__dirname, 'test*', 'wdio', '**', '*-spec.js')];
+wdioConf.config.specs = [path.join(__dirname, 'tests', 'wdio', '**', '*-spec.js')];
 
 exports.config = wdioConf.config;

packages/terra-application-links/.npmignore

@@ -5,4 +5,5 @@ tests/**/__snapshots__/
 aggregated-translations
 dev-site-config
 screenshots
-errorScreenshots
+errorScreenshots
+generated-themes

packages/terra-application-links/CHANGELOG.md

@@ -3,6 +3,9 @@ Changelog
 
 Unreleased
 ----------
+### Added
+* Added clinical-lowlight-theme theming files
+
 6.25.0 - (February 4, 2020)
 ------------------
 ### Changed

packages/terra-application-links/clinical-lowlight-wdio.conf.js

@@ -0,0 +1,6 @@
+const path = require('path');
+const wdioConf = require('../../config/wdio/clinical-lowlight-theme/wdio.conf.js');
+
+wdioConf.config.specs = [path.join(__dirname, 'tests', 'wdio', '**', '*-spec.js')];
+
+exports.config = wdioConf.config;

packages/terra-application-links/package.json

@@ -46,6 +46,9 @@
     "precompile": "rm -rf lib",
     "test": "npm run jest && npm run wdio",
     "jest": "jest --config ../../jestconfig.js",
-    "wdio": "cd ../.. && npx wdio ./packages/$npm_package_name/wdio.conf.js"
+    "wdio-default": "cd ../.. && npx wdio ./packages/$npm_package_name/wdio.conf.js",
+    "wdio-lowlight": "cd ../.. && THEME=clinical-lowlight-theme npx wdio ./packages/$npm_package_name/clinical-lowlight-wdio.conf.js",
+    "wdio-fusion": "cd ../.. && THEME=orion-fusion-theme npx wdio ./packages/$npm_package_name/wdio.conf.js",
+    "wdio": "npm run wdio-default && npm run wdio-lowlight && npm run wdio-fusion"
   }
 }