[terra-core] clinical-lowlight-theme port (cerner#2758)

* configuration changes * theme files and changelog * wdio screenshot generated * theme file updates * merge updates * Custom wdio configs to disable accessibility tests * markdown wdio screenshot update * changelog * separate docker service for lowlight theme * removed dialog-modal theme variables * changelog corrections after merge * updated lowlight button screenshots * Adding lowlight disabled button styles * Updated lowlight wdio screenshots * changed toolkit reference to master * lowlight theme screenshot update * docker-compose file update * addressed review comments and updated lowlight theme screenshots * lowlight theme button hover border colors updated * search field wdio screenshot updates * screenshot updates * updated screenshots lowlight * screenshot updates - default theme * search field wdio screenshots * searchfield wdio screenshot update * searchfield lowlight wdio screenshot update * W D I O * revert search field wdio changes * lowlight theme wdio screenshots updated * cleaned lowlight theme scss files * terra-alert custom color fix * added generated-themes to all ignore files * screenshots updates after table uplift * commented table test for row * addressed review comments * using test-ci service for lowlight theme * travis.yml changes * t r a v i s * removed clinical-lowlight-theme wdio screenshots * changelog updates * commented out lowlight theme wdio on travis * reverted temporary table wdio fix * updated terra-icon missed tests and package.json * added remaining lowlight wdio config * updated wdio config files * change * travis.yml documentation Co-authored-by: Ryan Manuel <[email protected]> Co-authored-by: Neil Pfeiffer <[email protected]> Co-authored-by: Matt Henkes <[email protected]>
saket2403 · Feb 17, 2020 · 39ff08a · 39ff08a
1 parent 30d56d9
commit 39ff08a
Show file tree

Hide file tree

Showing 344 changed files with 2,104 additions and 445 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -8,3 +8,4 @@ node_modules
 packages/*/node_modules
 lib
 build
+generated-themes
diff --git a/.eslintignore b/.eslintignore
@@ -3,3 +3,4 @@ node_modules
 coverage
 build
 **/aggregated-translations/*.*
+generated-themes
diff --git a/.travis.yml b/.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

diff --git a/config/wdio/clinical-lowlight-theme/wdio.conf.js b/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;
diff --git a/dev-site-config/site.config.js b/dev-site-config/site.config.js
@@ -1,8 +1,8 @@
-
 const siteConfig = {
   appConfig: {
     themes: {
       'Default Theme': '',
+      'Clinical Low Light Theme': 'clinical-lowlight-theme',
       'Orion Fusion Theme': 'orion-fusion-theme',
     },
   },

diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "compile:build": "lerna ls | cut -d ' ' -f1 | xargs -I {} babel packages/{}/src --out-dir packages/{}/lib --copy-files",
     "compile:clean": "rm -rf packages/**/lib",
     "compile:prod": "rm -rf ./build; 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": "webpack --config webpack.config -p && gh-pages -d build",
@@ -88,8 +89,9 @@
     "start-static": "tt-serve-static --site ./build",
     "test": "npm run jest && npm run wdio",
     "wdio-default": "NODE_OPTIONS=--max-old-space-size=2048 wdio node_modules/terra-toolkit/config/wdio/wdio.conf.js",
+    "wdio-lowlight": "NODE_OPTIONS=--max-old-space-size=2048 THEME=clinical-lowlight-theme wdio config/wdio/clinical-lowlight-theme/wdio.conf.js",
     "wdio-fusion": "NODE_OPTIONS=--max-old-space-size=2048 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",

diff --git a/packages/terra-action-footer/.npmignore b/packages/terra-action-footer/.npmignore
@@ -5,4 +5,5 @@ tests/**/__snapshots__/
 aggregated-translations
 dev-site-config
 screenshots
-errorScreenshots
+errorScreenshots
+generated-themes
diff --git a/packages/terra-action-footer/CHANGELOG.md b/packages/terra-action-footer/CHANGELOG.md
@@ -3,6 +3,8 @@ ChangeLog
 
 Unreleased
 ----------
+### Added
+* Added clinical-lowlight-theme theming files
 
 2.33.0 - (February 4, 2020)
 ------------------

diff --git a/packages/terra-action-footer/clinical-lowlight-wdio.conf.js b/packages/terra-action-footer/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;
diff --git a/packages/terra-action-footer/package.json b/packages/terra-action-footer/package.json
@@ -40,7 +40,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"
   }
 }
diff --git a/packages/terra-action-footer/themes/clinical-lowlight-theme/clinical-lowlight-theme.scss b/packages/terra-action-footer/themes/clinical-lowlight-theme/clinical-lowlight-theme.scss
@@ -0,0 +1,4 @@
+:global {
+  --terra-action-footer-background-color: transparent;
+  --terra-action-footer-border-top: 0.07143rem solid #181b1d;
+}
diff --git a/packages/terra-action-footer/wdio.conf.js b/packages/terra-action-footer/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;
diff --git a/packages/terra-action-header/.npmignore b/packages/terra-action-header/.npmignore
@@ -5,4 +5,5 @@ tests/**/__snapshots__/
 aggregated-translations
 dev-site-config
 screenshots
-errorScreenshots
+errorScreenshots
+generated-themes
diff --git a/packages/terra-action-header/CHANGELOG.md b/packages/terra-action-header/CHANGELOG.md
@@ -3,6 +3,8 @@ ChangeLog
 
 Unreleased
 ----------
+### Added
+* Added clinical-lowlight-theme theming files
 
 2.36.0 - (February 4, 2020)
 ------------------

diff --git a/packages/terra-action-header/clinical-lowlight-wdio.conf.js b/packages/terra-action-header/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;
diff --git a/packages/terra-action-header/package.json b/packages/terra-action-header/package.json
@@ -42,7 +42,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"
   }
 }
diff --git a/packages/terra-action-header/themes/clinical-lowlight-theme/clinical-lowlight-theme.scss b/packages/terra-action-header/themes/clinical-lowlight-theme/clinical-lowlight-theme.scss
@@ -0,0 +1,18 @@
+@import '~terra-mixins/lib/Mixins';
+
+:global {
+  --terra-action-header-background-color: #141719;
+  --terra-action-header-border-bottom: 1px solid #181d1b;
+  --terra-action-header-border-left: none;
+  --terra-action-header-border-right: none;
+  --terra-action-header-border-top: none;
+  --terra-action-header-box-shadow: none;
+  --terra-action-header-color: #b2b5b6;
+
+  @include terra-inline-svg-var('--terra-action-header-back-background-image', '<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path fill="#c5c5c6" d="M48 21H10.6L27.3 3.9 23.5.1 0 24l23.5 23.9 3.8-3.8L10.6 27H48z"></path></svg>');
+  @include terra-inline-svg-var('--terra-action-header-close-background-image', '<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path fill="#c5c5c6" d="M28.2 24L42.9 9.1 40.8 7l-1.7-1.6-.4-.5L24 19.7 9.4 4.9 7.2 7 5.6 8.6l-.5.5L19.8 24 5.1 38.9 7.2 41l1.7 1.6.5.5L24 28.3l14.7 14.8.4-.5 1.7-1.6 2.1-2.1L28.2 24z"></path></svg>');
+  @include terra-inline-svg-var('--terra-action-header-maximize-background-image', '<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path fill="#c5c5c6" d="M17.7 26.1L6.9 36.9 0 30v18h18l-6.9-6.9 10.8-10.8zM48 0H30l6.9 6.9-10.8 10.8 4.2 4.2 10.8-10.8L48 18z"></path></svg>');
+  @include terra-inline-svg-var('--terra-action-header-minimize-background-image', '<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path fill="#c5c5c6" d="M10.8 32.9L0 43.7 4.2 48l10.9-10.8 6.9 6.9V26H3.9zM48 4.2L43.8 0 32.9 10.8 26 3.9V22h18.1l-6.9-6.9z"></path></svg>');
+  @include terra-inline-svg-var('--terra-action-header-next-background-image', '<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path fill="#c5c5c6" d="M24 37.7L0 14.2l3.8-3.9L24 30l20.2-19.7 3.8 3.9z"></path></svg>');
+  @include terra-inline-svg-var('--terra-action-header-previous-background-image', '<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path fill="#c5c5c6" d="M24 10.3l24 23.5-3.8 3.9L24 18 3.8 37.7 0 33.8z"></path></svg>');
+}
diff --git a/packages/terra-action-header/wdio.conf.js b/packages/terra-action-header/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;
diff --git a/packages/terra-alert/.npmignore b/packages/terra-alert/.npmignore
@@ -5,4 +5,5 @@ tests/**/__snapshots__/
 aggregated-translations
 dev-site-config
 screenshots
-errorScreenshots
+errorScreenshots
+generated-themes
diff --git a/packages/terra-alert/CHANGELOG.md b/packages/terra-alert/CHANGELOG.md
@@ -3,11 +3,13 @@ ChangeLog
 
 Unreleased
 ----------
+### Added
+* Added clinical-lowlight-theme theming files
 
 4.20.0 - (February 4, 2020)
 ------------------
 ### Changed
-* Update docs to use mdx syntax.
+* Update docs to use mdx syntax
 
 4.19.0 - (January 28, 2020)
 ------------------
@@ -31,12 +33,12 @@ Unreleased
 
 4.15.0 - (December 3, 2019)
 ------------------
-### Fixed
-* Fixed jest tests due to ResponsiveElement change
-
 ### Added
 * Added orion-fusion-theme and generated the respective reference wdio screenshots.
 
+### Fixed
+* Fixed jest tests due to ResponsiveElement change
+
 4.14.0 - (October 30, 2019)
 ------------------
 ### Fixed

diff --git a/packages/terra-alert/clinical-lowlight-wdio.conf.js b/packages/terra-alert/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;
diff --git a/packages/terra-alert/package.json b/packages/terra-alert/package.json
@@ -42,7 +42,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"
   }
 }
diff --git a/packages/terra-alert/themes/clinical-lowlight-theme/clinical-lowlight-theme.scss b/packages/terra-alert/themes/clinical-lowlight-theme/clinical-lowlight-theme.scss
@@ -0,0 +1,27 @@
+:global {
+  --terra-alert-alert-background-color: #332425;
+  --terra-alert-alert-title-color: #fb4c4c;
+
+  --terra-alert-custom-background-color: #1a2226;
+  --terra-alert-custom-text-color: #b2b5b6;
+
+  --terra-alert-error-background-color: #332425;
+  --terra-alert-error-title-color: #fb4c4c;
+
+  --terra-alert-advisory-background-color: #1a2226;
+  --terra-alert-info-background-color: #1a2226;
+  --terra-alert-success-background-color: #1a2226;
+  --terra-alert-warning-background-color: #464232;
+
+  --terra-alert-custom-default-color: #1c1f21;
+
+  --terra-alert-color: #b2b5b6;
+
+  --terra-alert-advisory-box-shadow: 2px 0 0 #5a81ff inset;
+  --terra-alert-alert-box-shadow: 2px 0 0 #fb4c4c inset;
+  --terra-alert-custom-box-shadow: 2px 0 0 #9b9fa1 inset;
+  --terra-alert-error-box-shadow: 2px 0 0 #fb4c4c inset;
+  --terra-alert-info-box-shadow: 2px 0 0 #5a81ff inset;
+  --terra-alert-success-box-shadow: 2px 0 0 #407d17 inset;
+  --terra-alert-warning-box-shadow: 2px 0 0 #ffb166 inset;
+}
diff --git a/packages/terra-alert/wdio.conf.js b/packages/terra-alert/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;
diff --git a/packages/terra-arrange/.npmignore b/packages/terra-arrange/.npmignore
@@ -5,4 +5,5 @@ tests/**/__snapshots__/
 aggregated-translations
 dev-site-config
 screenshots
-errorScreenshots
+errorScreenshots
+generated-themes
diff --git a/packages/terra-arrange/CHANGELOG.md b/packages/terra-arrange/CHANGELOG.md
@@ -3,6 +3,8 @@ ChangeLog
 
 Unreleased
 ----------
+### Added
+* Added generated-themes to .npmignore
 
 3.28.0 - (February 4, 2020)
 ------------------

diff --git a/packages/terra-arrange/clinical-lowlight-wdio.conf.js b/packages/terra-arrange/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;
diff --git a/packages/terra-arrange/package.json b/packages/terra-arrange/package.json
@@ -28,7 +28,10 @@
     "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"
   },
   "peerDependencies": {
     "react": "^16.8.5",

diff --git a/packages/terra-arrange/wdio.conf.js b/packages/terra-arrange/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;
diff --git a/packages/terra-avatar/.npmignore b/packages/terra-avatar/.npmignore
@@ -5,4 +5,5 @@ tests/**/__snapshots__/
 aggregated-translations
 dev-site-config
 screenshots
-errorScreenshots
+errorScreenshots
+generated-themes
diff --git a/packages/terra-avatar/CHANGELOG.md b/packages/terra-avatar/CHANGELOG.md
@@ -3,6 +3,8 @@ ChangeLog
 
 Unreleased
 ----------
+### Added
+* Added clinical-lowlight-theme theming files
 
 2.33.0 - (February 4, 2020)
 ------------------

diff --git a/packages/terra-avatar/clinical-lowlight-wdio.conf.js b/packages/terra-avatar/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;
diff --git a/packages/terra-avatar/package.json b/packages/terra-avatar/package.json
@@ -39,7 +39,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"
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,3 +8,4 @@ node_modules @@
     packages/*/node_modules
     lib
     build
+    generated-themes