Merge pull request #38 from Simspace/ux/monorail-release-v0.0.19

Monorail Release v0.0.19 - 'Yanni'
Simspace · Jan 14, 2020 · efc9468 · efc9468
2 parents d865048 + cde88a3
commit efc9468
Show file tree

Hide file tree

Showing 276 changed files with 10,198 additions and 3,337 deletions.
diff --git a/README.md b/README.md
@@ -18,22 +18,13 @@ yarn add react react-dom styled-components
 
 Check the accepted version range in `package.json` for compatibility.
 
-To use Monorail components you must wrap your app with `ThemeProvider` and pass it `monorailTheme`
-```
-import { monorailTheme } from "@simspace/monorail/dist/helpers/theme";
-import { ThemeProvider } from "@simspace/monorail/dist/helpers/styled-components";
-
-<ThemeProvider theme={monorailTheme}>
-...
-</ThemeProvider>
-```
-
 Import the components you want and use them
 
 ```jsx
 import { Button } from '@simspace/monorail/dist/visualComponents/buttons/Button'
 
 ...
+
 render() {
   return (
     <Button>Monorail</Button>

diff --git a/babel.config.js b/babel.config.js
@@ -44,6 +44,9 @@ const babelConfig = {
         pure: true,
       },
     ],
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+    '@babel/plugin-proposal-optional-chaining',
+    '@babel/plugin-proposal-numeric-separator',
     // '@babel/plugin-transform-react-inline-elements',
     // 'transform-react-remove-prop-types',
     // 'transform-react-pure-class-to-function',

diff --git a/dist/helpers/appName.d.ts b/dist/helpers/appName.d.ts
@@ -21,6 +21,7 @@ export declare enum AppName {
     Hardhat = "hardhat",
     Impact = "impact",
     LMS = "externalLms",
+    MyOrg = "my-org",
     NetworkSetup = "network-setup",
     Range = "range",
     Repo = "repo",
@@ -30,7 +31,7 @@ export declare enum AppName {
     Training = "training"
 }
 export declare type AppOrAuthSubAppName = AppName | AuthSubAppName;
-export declare type AppOrAuthSubAppNameString = 'academy' | 'admin' | 'catalog' | 'event-design' | 'events' | 'execution' | 'externalLms' | 'hardhat' | 'impact' | 'network-setup' | 'range' | 'repo' | 'reports-analytics' | 'techops' | 'tracker' | 'training';
+export declare type AppOrAuthSubAppNameString = 'academy' | 'admin' | 'catalog' | 'event-design' | 'events' | 'execution' | 'externalLms' | 'hardhat' | 'impact' | 'my-org' | 'network-setup' | 'range' | 'repo' | 'reports-analytics' | 'techops' | 'tracker' | 'training';
 export declare const convertAppNameToColor: (appNames: AppOrAuthSubAppName) => Colors;
 export declare const convertAppNameToSecondaryColor: (appNames: AppOrAuthSubAppName) => Colors;
 export declare const convertStringToAppName: (appNameString: string) => AppOrAuthSubAppName;

diff --git a/dist/helpers/appName.js b/dist/helpers/appName.js
@@ -35,6 +35,7 @@ exports.AppName = AppName;
   AppName["Hardhat"] = "hardhat";
   AppName["Impact"] = "impact";
   AppName["LMS"] = "externalLms";
+  AppName["MyOrg"] = "my-org";
   AppName["NetworkSetup"] = "network-setup";
   AppName["Range"] = "range";
   AppName["Repo"] = "repo";
@@ -47,10 +48,6 @@ exports.AppName = AppName;
 const convertAppNameToColor = appNames => {
   /* eslint-disable default-case */
   switch (appNames) {
-    case AppName.Range:
-    case AuthSubAppName.Range:
-      return _color.Colors.Range;
-
     case AppName.Events:
     case AppName.Execution:
     case AppName.Tracker:
@@ -59,6 +56,8 @@ const convertAppNameToColor = appNames => {
     case AuthSubAppName.Tracker:
       return _color.Colors.Tracker;
 
+    case AppName.Range:
+    case AuthSubAppName.Range:
     case AppName.EventDesign:
     case AppName.Hardhat:
     case AppName.NetworkSetup:
@@ -91,6 +90,9 @@ const convertAppNameToColor = appNames => {
     case AuthSubAppName.Admin:
       return _color.Colors.Admin;
 
+    case AppName.MyOrg:
+      return _color.Colors.MyOrg;
+
     default:
       return _color.Colors.White;
   }
@@ -103,10 +105,6 @@ exports.convertAppNameToColor = convertAppNameToColor;
 const convertAppNameToSecondaryColor = appNames => {
   /* eslint-disable default-case */
   switch (appNames) {
-    case AppName.Range:
-    case AuthSubAppName.Range:
-      return _color.Colors.Range;
-
     case AppName.Events:
     case AppName.Execution:
     case AppName.Tracker:
@@ -115,6 +113,8 @@ const convertAppNameToSecondaryColor = appNames => {
     case AuthSubAppName.Tracker:
       return _color.Colors.TrackerAlt;
 
+    case AppName.Range:
+    case AuthSubAppName.Range:
     case AppName.EventDesign:
     case AppName.Hardhat:
     case AppName.NetworkSetup:
@@ -147,6 +147,9 @@ const convertAppNameToSecondaryColor = appNames => {
     case AuthSubAppName.Admin:
       return _color.Colors.AdminAlt;
 
+    case AppName.MyOrg:
+      return _color.Colors.MyOrgAlt;
+
     default:
       return _color.Colors.White;
   }
@@ -201,6 +204,9 @@ const convertStringToAppName = appNameString => {
     case 'reports-analytics':
       return AppName.ReportsAnalytics;
 
+    case 'my-org':
+      return AppName.MyOrg;
+
     default:
       return AppName.Events;
   }
@@ -262,6 +268,9 @@ const convertAppNameToString = appName => {
     case AppName.ReportsAnalytics:
     case AuthSubAppName.ReportsAnalytics:
       return 'reports-analytics';
+
+    case AppName.MyOrg:
+      return 'my-org';
   }
   /* eslint-disable default-case */
 

diff --git a/dist/helpers/baseStyles.js b/dist/helpers/baseStyles.js
@@ -13,8 +13,8 @@ var _styledComponents = require("./styled-components");
 
 var _theme = require("./theme");
 
-const baseFocusStyles = (addPositionToParent = true) => _styledComponents.css`
-  ${addPositionToParent && _styledComponents.css`
+const baseFocusStyles = (addPositionToParent = true) => (0, _styledComponents.css)`
+  ${addPositionToParent && (0, _styledComponents.css)`
       position: relative;
     `};
 
@@ -49,7 +49,7 @@ const baseFocusStyles = (addPositionToParent = true) => _styledComponents.css`
 
 exports.baseFocusStyles = baseFocusStyles;
 
-const floatingOutlineStyles = (color = 'currentColor') => _styledComponents.css`
+const floatingOutlineStyles = (color = 'currentColor') => (0, _styledComponents.css)`
   /**
   * Using inner element for border to avoid width issue when compared with other base buttons styles
   */
@@ -67,7 +67,7 @@ const floatingOutlineStyles = (color = 'currentColor') => _styledComponents.css`
 
 exports.floatingOutlineStyles = floatingOutlineStyles;
 
-const floatingBackgroundStyles = (color = 'currentColor') => _styledComponents.css`
+const floatingBackgroundStyles = (color = 'currentColor') => (0, _styledComponents.css)`
   /**
   * Using inner element for border to avoid width issue when compared with other base buttons styles
   */
@@ -85,7 +85,7 @@ const floatingBackgroundStyles = (color = 'currentColor') => _styledComponents.c
 
 exports.floatingBackgroundStyles = floatingBackgroundStyles;
 
-const baseOutlineStyles = (color = _color.Colors.BrandLightBlue, focusColor = _color.Colors.BrandDarkBlue) => _styledComponents.css`
+const baseOutlineStyles = (color = _color.Colors.BrandLightBlue, focusColor = _color.Colors.BrandDarkBlue) => (0, _styledComponents.css)`
   background: transparent;
   border: 0;
   color: ${(0, _color.getColor)(color)};
@@ -109,7 +109,7 @@ const baseOutlineStyles = (color = _color.Colors.BrandLightBlue, focusColor = _c
 
 exports.baseOutlineStyles = baseOutlineStyles;
 
-const baseChromelessStyles = (color = _theme.ThemeColors.ActionSecondary) => _styledComponents.css`
+const baseChromelessStyles = (color = _theme.ThemeColors.ActionSecondary) => (0, _styledComponents.css)`
   background: transparent;
   border: 0;
 
@@ -125,7 +125,7 @@ const baseChromelessStyles = (color = _theme.ThemeColors.ActionSecondary) => _st
 
 exports.baseChromelessStyles = baseChromelessStyles;
 
-const baseIconButtonChromelessStyles = (isActive = false) => _styledComponents.css`
+const baseIconButtonChromelessStyles = (isActive = false) => (0, _styledComponents.css)`
   background: ${isActive ? (0, _theme.getThemeColor)(_theme.ThemeColors.PrimaryColor, 0.12) : 'transparent'};
   color: ${(0, _theme.getThemeColor)(isActive ? _theme.ThemeColors.Text900 : _theme.ThemeColors.Text600)};
   border: 0;
@@ -147,7 +147,7 @@ const baseIconButtonChromelessStyles = (isActive = false) => _styledComponents.c
 
 exports.baseIconButtonChromelessStyles = baseIconButtonChromelessStyles;
 
-const baseSecondaryStyles = (color = _theme.ThemeColors.ActionSecondary) => _styledComponents.css`
+const baseSecondaryStyles = (color = _theme.ThemeColors.ActionSecondary) => (0, _styledComponents.css)`
   background: ${(0, _theme.getThemeColor)(color, 0.12)};
   border: 0;
   color: ${(0, _theme.getThemeColor)(color)};
@@ -163,7 +163,7 @@ const baseSecondaryStyles = (color = _theme.ThemeColors.ActionSecondary) => _sty
 
 exports.baseSecondaryStyles = baseSecondaryStyles;
 
-const basePrimaryStyles = (backgroundColor = _theme.ThemeColors.ActionPrimary, color = _theme.ThemeColors.BackgroundSecondary) => _styledComponents.css`
+const basePrimaryStyles = (backgroundColor = _theme.ThemeColors.ActionPrimary, color = _theme.ThemeColors.BackgroundSecondary) => (0, _styledComponents.css)`
   background: ${(0, _theme.getThemeColor)(backgroundColor)};
   border: 0;
   color: ${(0, _theme.getThemeColor)(color)};
@@ -186,7 +186,7 @@ const basePrimaryStyles = (backgroundColor = _theme.ThemeColors.ActionPrimary, c
 
 exports.basePrimaryStyles = basePrimaryStyles;
 
-const baseButtonBarStyles = (color = _color.Colors.Black) => _styledComponents.css`
+const baseButtonBarStyles = (color = _color.Colors.Black) => (0, _styledComponents.css)`
   background: transparent;
   border: 0;
   color: ${(0, _color.getColor)(color, 0.32)};
@@ -204,7 +204,7 @@ const baseButtonBarStyles = (color = _color.Colors.Black) => _styledComponents.c
 
 exports.baseButtonBarStyles = baseButtonBarStyles;
 
-const baseToolBarStyles = (color = _color.Colors.Black) => _styledComponents.css`
+const baseToolBarStyles = (color = _color.Colors.Black) => (0, _styledComponents.css)`
   background-color: ${(0, _color.getColor)(color, 0.14)};
   border: 0;
   color: ${(0, _color.getColor)(color, 0.74)};
@@ -221,7 +221,7 @@ const baseToolBarStyles = (color = _color.Colors.Black) => _styledComponents.css
 `;
 
 exports.baseToolBarStyles = baseToolBarStyles;
-const baseDisabledStyles = _styledComponents.css`
+const baseDisabledStyles = (0, _styledComponents.css)`
   cursor: default;
   opacity: 0.4;
   pointer-events: none;
@@ -233,7 +233,7 @@ const baseDisabledStyles = _styledComponents.css`
   }
 `;
 exports.baseDisabledStyles = baseDisabledStyles;
-const baseErrorBorderStyles = _styledComponents.css`
+const baseErrorBorderStyles = (0, _styledComponents.css)`
   border-color: ${(0, _color.getColor)(_color.Colors.Red)};
 
   &:hover {
@@ -246,7 +246,7 @@ const baseErrorBorderStyles = _styledComponents.css`
   }
 `;
 exports.baseErrorBorderStyles = baseErrorBorderStyles;
-const baseErrorBackgroundStyles = _styledComponents.css`
+const baseErrorBackgroundStyles = (0, _styledComponents.css)`
   background: ${(0, _color.getColor)(_color.Colors.Red, 0.1)};
 
   &:hover,
@@ -257,7 +257,7 @@ const baseErrorBackgroundStyles = _styledComponents.css`
 `;
 exports.baseErrorBackgroundStyles = baseErrorBackgroundStyles;
 
-const baseHyperLinkStyles = (color = _theme.ThemeColors.ActionPrimary) => _styledComponents.css`
+const baseHyperLinkStyles = (color = _theme.ThemeColors.ActionPrimary) => (0, _styledComponents.css)`
   color: ${(0, _theme.getThemeColor)(color)};
 
   &:hover {

diff --git a/dist/helpers/categoryTransforms.d.ts b/dist/helpers/categoryTransforms.d.ts
@@ -1,5 +1,5 @@
 import { Colors } from '@monorail/helpers/color';
 export declare const categoryReadableName: (entryCategory: string) => string;
 export declare const categoryIcon: (entryCategory: string) => string;
-export declare const categoryColor: (entryCategory: string) => Colors.Academy | Colors.Range | Colors.Tracker;
+export declare const categoryColor: (entryCategory: string) => Colors.Academy | Colors.RangeAlt | Colors.Tracker;
 export declare const categoryPathname: (entryCategory: string) => "/catalog/course-plan" | "/catalog/training-packages" | "/catalog/content-modules" | "/catalog/external-subnets" | "/catalog/network-spec" | "/catalog/physical-assets" | "/catalog/vm-templates" | "/catalog/config-modules" | "/events" | "/catalog/discover";
diff --git a/dist/helpers/categoryTransforms.js b/dist/helpers/categoryTransforms.js
@@ -105,7 +105,7 @@ const categoryColor = entryCategory => {
     case 'physical-asset':
     case 'clone-source':
     case 'config-module':
-      return _color.Colors.Range;
+      return _color.Colors.RangeAlt;
 
     case 'exercise':
     case 'event':

diff --git a/dist/helpers/color.d.ts b/dist/helpers/color.d.ts
@@ -40,6 +40,7 @@ export declare enum Colors {
     CatalogAlt = "catalogAlt",
     Dashboard = "dashboard",
     Range = "range",
+    RangeAlt = "rangeAlt",
     Tracker = "tracker",
     TrackerAlt = "trackerAlt",
     Hardhat = "hardhat",
@@ -50,13 +51,20 @@ export declare enum Colors {
     TechOpsAlt = "techopsAlt",
     Repo = "repo",
     LMS = "externalLms",
+    MyOrg = "myOrg",
+    MyOrgAlt = "myOrgAlt",
     Green = "green",
     Red = "red",
     Amber = "amber",
     Error = "error",
     Warning = "warning",
     Success = "success",
-    Info = "info"
+    Info = "info",
+    High = "high",
+    HighModerate = "highModerate",
+    Moderate = "moderate",
+    LowModerate = "lowModerate",
+    Low = "low"
 }
 declare type HSLAMapType = {
     h: number;