Update Monorail week 14.

dist/CommonStyles.d.ts

@@ -1,4 +1,4 @@
-import { SimpleInterpolation, Styles } from 'styled-components';
+import { SimpleInterpolation } from 'styled-components';
 import { PopOverPosition } from '@monorail/popOver/PopOver';
 declare enum AuthSubAppName {
     Academy = "academy",
@@ -8,9 +8,13 @@ declare enum AuthSubAppName {
     Hardhat = "hardhat",
     Range = "range",
     TechOps = "techops",
-    Tracker = "tracker"
+    Tracker = "tracker",
+    Execution = "execution",
+    Home = "home",
+    Events = "events",
+    EventDesign = "event-design"
 }
-export declare const visible: (isVisible?: boolean) => Styles;
+export declare const visible: (isVisible?: boolean) => import("styled-components").FlattenSimpleInterpolation;
 export declare enum ElevationRange {
     Elevation0 = "elevation0",
     Elevation1 = "elevation1",
@@ -38,9 +42,9 @@ export declare enum ElevationRange {
     Elevation23 = "elevation23",
     Elevation24 = "elevation24"
 }
-export declare const getElevation: (elevation: ElevationRange) => Styles;
-export declare const flexFlow: (direction?: string, wrap?: string) => Styles;
-export declare const ellipsis: import("styled-components").InterpolationValue[];
+export declare const getElevation: (elevation: ElevationRange) => import("styled-components").FlattenSimpleInterpolation;
+export declare const flexFlow: (direction?: string, wrap?: string) => import("styled-components").FlattenSimpleInterpolation;
+export declare const ellipsis: import("styled-components").FlattenSimpleInterpolation;
 export declare enum FontWeights {
     ExtraLight = 200,
     Light = 300,
@@ -62,7 +66,106 @@ export declare enum FontSizes {
     Content = "content",
     Micro = "micro"
 }
-export declare const typography: (weight: number, size: FontSizes, margin?: string | undefined) => Styles;
+export declare const typography: (weight: number, size: FontSizes, margin?: string | undefined) => {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+};
 export declare type Margin = {
     bottom?: number | 'auto';
     left?: number | 'auto';
@@ -73,7 +176,7 @@ export declare const typographyMargin: (size: FontSizes, margin?: string) => {
     margin: string;
 };
 export declare const shortHandDeconstruction: (value: string) => Margin;
-export declare const gothamFontFamily: import("styled-components").InterpolationValue[];
+export declare const gothamFontFamily: import("styled-components").FlattenSimpleInterpolation;
 /**
  * App Name
  */
@@ -87,7 +190,11 @@ export declare enum AppName {
     Repo = "repo",
     TechOps = "techops",
     Tracker = "tracker",
-    Training = "training"
+    Training = "training",
+    Execution = "execution",
+    Home = "home",
+    Events = "events",
+    EventDesign = "event-design"
 }
 export declare enum EventState {
     Active = "active",
@@ -128,6 +235,7 @@ export declare enum Colors {
     Requested = "requested",
     Inactive = "inactive",
     Academy = "academy",
+    Execution = "execution",
     Admin = "admin",
     Catalog = "catalog",
     Dashboard = "dashboard",
@@ -144,10 +252,11 @@ export declare enum Colors {
     Amber = "amber"
 }
 export declare type AppOrAuthSubAppName = AppName | AuthSubAppName;
-export declare type AppOrAuthSubAppNameString = 'admin' | 'academy' | 'catalog' | 'dashboard' | 'range' | 'tracker' | 'hardhat' | 'impact' | 'training' | 'techops' | 'repo' | 'externalLms';
+export declare type AppOrAuthSubAppNameString = 'admin' | 'academy' | 'catalog' | 'dashboard' | 'range' | 'tracker' | 'hardhat' | 'impact' | 'training' | 'techops' | 'repo' | 'externalLms' | 'execution' | 'home' | 'events' | 'event-design';
 export declare const convertAppNameToColor: (appNames: AppOrAuthSubAppName) => Colors;
 export declare const convertStringToAppName: (appNameString: string) => AppOrAuthSubAppName;
 export declare const convertAppNameToString: (appName: AppOrAuthSubAppName) => AppOrAuthSubAppNameString;
+export declare const isAppName: (name: string) => name is AppName;
 export declare const convertEventStateToColor: (eventState: EventState) => Colors;
 declare type HSLAMapType = {
     h: number;
@@ -162,19 +271,19 @@ export declare const colorHSLAMap: ({ color, alpha, }: {
 export declare const convertHSLAMapToCss: (HSLAMap: HSLAMapType) => string;
 export declare const colors: (color: Colors, alpha?: number) => string;
 export declare const baseFocusStyles: (addPositionToParent?: boolean) => SimpleInterpolation;
-export declare const baseOutlineStyles: (color?: Colors) => import("styled-components").InterpolationValue[];
-export declare const baseChromelessStyles: (color?: Colors, isActive?: boolean | undefined) => import("styled-components").InterpolationValue[];
-export declare const baseSecondaryStyles: (color?: Colors, isActive?: boolean | undefined) => import("styled-components").InterpolationValue[];
-export declare const basePrimaryStyles: (color?: Colors) => import("styled-components").InterpolationValue[];
-export declare const baseDisabledStyles: import("styled-components").InterpolationValue[];
+export declare const baseOutlineStyles: (color?: Colors) => import("styled-components").FlattenSimpleInterpolation;
+export declare const baseChromelessStyles: (color?: Colors, isActive?: boolean | undefined) => import("styled-components").FlattenSimpleInterpolation;
+export declare const baseSecondaryStyles: (color?: Colors, isActive?: boolean | undefined) => import("styled-components").FlattenSimpleInterpolation;
+export declare const basePrimaryStyles: (color?: Colors) => import("styled-components").FlattenSimpleInterpolation;
+export declare const baseDisabledStyles: import("styled-components").FlattenSimpleInterpolation;
 export declare enum BorderRadius {
     Small = 3,
     Medium = 4,
     Large = 6,
     XLarge = 8,
     Round = 1000
 }
-export declare const borderRadius: (borderRadius2?: BorderRadius) => import("styled-components").InterpolationValue[];
+export declare const borderRadius: (borderRadius2?: BorderRadius) => import("styled-components").FlattenSimpleInterpolation;
 export declare const generateScaleAnimation: (params: {
     position: PopOverPosition;
     isOpen: boolean;
@@ -185,7 +294,7 @@ export declare const generateScaleAnimation: (params: {
     inSideContentStyles: SimpleInterpolation;
 };
 export declare const ease: (isActive: boolean) => "ease-in" | "ease-out";
-export declare const buttonTransition: import("styled-components").InterpolationValue[];
+export declare const buttonTransition: import("styled-components").FlattenSimpleInterpolation;
 export declare const transition: (props: {
     properties?: Array<string>;
     easing: string;

dist/CommonStyles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Sizes = exports.sizes = exports.transition = exports.buttonTransition = exports.ease = exports.generateScaleAnimation = exports.borderRadius = exports.BorderRadius = exports.baseDisabledStyles = exports.basePrimaryStyles = exports.baseSecondaryStyles = exports.baseChromelessStyles = exports.baseOutlineStyles = exports.baseFocusStyles = exports.colors = exports.convertHSLAMapToCss = exports.colorHSLAMap = exports.convertEventStateToColor = exports.convertAppNameToString = exports.convertStringToAppName = exports.convertAppNameToColor = exports.Colors = exports.EventState = exports.AppName = exports.gothamFontFamily = exports.shortHandDeconstruction = exports.typographyMargin = exports.typography = exports.FontSizes = exports.FontWeights = exports.ellipsis = exports.flexFlow = exports.getElevation = exports.ElevationRange = exports.visible = void 0;
+exports.Sizes = exports.sizes = exports.transition = exports.buttonTransition = exports.ease = exports.generateScaleAnimation = exports.borderRadius = exports.BorderRadius = exports.baseDisabledStyles = exports.basePrimaryStyles = exports.baseSecondaryStyles = exports.baseChromelessStyles = exports.baseOutlineStyles = exports.baseFocusStyles = exports.colors = exports.convertHSLAMapToCss = exports.colorHSLAMap = exports.convertEventStateToColor = exports.isAppName = exports.convertAppNameToString = exports.convertStringToAppName = exports.convertAppNameToColor = exports.Colors = exports.EventState = exports.AppName = exports.gothamFontFamily = exports.shortHandDeconstruction = exports.typographyMargin = exports.typography = exports.FontSizes = exports.FontWeights = exports.ellipsis = exports.flexFlow = exports.getElevation = exports.ElevationRange = exports.visible = void 0;
 
 var _styledComponents = require("styled-components");
 
@@ -18,20 +18,17 @@ var AuthSubAppName;
   AuthSubAppName["Range"] = "range";
   AuthSubAppName["TechOps"] = "techops";
   AuthSubAppName["Tracker"] = "tracker";
+  AuthSubAppName["Execution"] = "execution";
+  AuthSubAppName["Home"] = "home";
+  AuthSubAppName["Events"] = "events";
+  AuthSubAppName["EventDesign"] = "event-design";
 })(AuthSubAppName || (AuthSubAppName = {}));
 
-const visible = (isVisible = false) => isVisible ? {
-  visibility: 'visible',
-  opacity: 0.9999 // Doing .9999 keeps the GPU activated on this element so that it can quickly change back to 0.
-
-} : {
-  visibility: 'hidden',
-  opacity: 0
-  /*
-  * Elevation
-  */
+const visible = (isVisible = false) => isVisible ? (0, _styledComponents.css)(["visibility:visible;opacity:0.9999;"]) : (0, _styledComponents.css)(["visibility:hidden;opacity:0;"]);
+/*
+* Elevation
+*/
 
-};
 
 exports.visible = visible;
 let ElevationRange;
@@ -93,9 +90,7 @@ const elevationStyles = {
   [ElevationRange.Elevation24]: '0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)'
 };
 
-const getElevation = elevation => ({
-  boxShadow: elevationStyles[elevation]
-});
+const getElevation = elevation => (0, _styledComponents.css)(["box-shadow:", ";"], elevationStyles[elevation]);
 /*
 * Flex Helpers
 */
@@ -105,10 +100,7 @@ exports.getElevation = getElevation;
 const defaultDirection = 'column';
 const defaultWrap = 'nowrap';
 
-const flexFlow = (direction = defaultDirection, wrap = defaultWrap) => ({
-  display: 'flex',
-  flexFlow: `${direction} ${wrap}`
-});
+const flexFlow = (direction = defaultDirection, wrap = defaultWrap) => (0, _styledComponents.css)(["display:flex;flex-flow:", " ", ";"], direction, wrap);
 /*
 * Typography
 */
@@ -366,6 +358,10 @@ exports.AppName = AppName;
   AppName["TechOps"] = "techops";
   AppName["Tracker"] = "tracker";
   AppName["Training"] = "training";
+  AppName["Execution"] = "execution";
+  AppName["Home"] = "home";
+  AppName["Events"] = "events";
+  AppName["EventDesign"] = "event-design";
 })(AppName || (exports.AppName = AppName = {}));
 
 let EventState;
@@ -414,6 +410,7 @@ exports.Colors = Colors;
   Colors["Requested"] = "requested";
   Colors["Inactive"] = "inactive";
   Colors["Academy"] = "academy";
+  Colors["Execution"] = "execution";
   Colors["Admin"] = "admin";
   Colors["Catalog"] = "catalog";
   Colors["Dashboard"] = "dashboard";
@@ -450,6 +447,16 @@ const convertAppNameToColor = appNames => {
     case AuthSubAppName.Dashboard:
       return Colors.Dashboard;
 
+    case AppName.Home:
+    case AuthSubAppName.Home:
+    case AppName.Events:
+    case AuthSubAppName.Events:
+    case AppName.EventDesign:
+    case AuthSubAppName.EventDesign:
+    case AuthSubAppName.Execution:
+    case AppName.Execution:
+      return Colors.White;
+
     case AppName.Range:
     case AuthSubAppName.Range:
       return Colors.Range;
@@ -521,6 +528,18 @@ const convertStringToAppName = appNameString => {
     case 'externalLms':
       return AppName.LMS;
 
+    case 'execution':
+      return AppName.Execution;
+
+    case 'home':
+      return AppName.Home;
+
+    case 'events':
+      return AppName.Events;
+
+    case 'event-design':
+      return AppName.EventDesign;
+
     default:
       return assertUnreachable('Invalid appName');
   }
@@ -571,11 +590,29 @@ const convertAppNameToString = appName => {
 
     case AppName.LMS:
       return 'externalLms';
+
+    case AppName.Home:
+    case AuthSubAppName.Home:
+      return 'home';
+
+    case AppName.Events:
+    case AuthSubAppName.Events:
+    case AppName.Execution:
+    case AuthSubAppName.Execution:
+      return 'events';
+
+    case AppName.EventDesign:
+    case AuthSubAppName.EventDesign:
+      return 'event-design';
   }
 };
 
 exports.convertAppNameToString = convertAppNameToString;
 
+const isAppName = name => Object.values(AppName).includes(name);
+
+exports.isAppName = isAppName;
+
 const convertEventStateToColor = eventState => {
   switch (eventState) {
     case EventState.Active:
@@ -822,6 +859,12 @@ const colorHSLAMap = ({
       l: 50,
       a: alpha
     },
+    [Colors.Execution]: {
+      h: 196,
+      s: 75,
+      l: 50,
+      a: alpha
+    },
     // Event Status
     // In Progress
     [Colors.Active]: {
@@ -1092,7 +1135,7 @@ const sizes = {
     width: 176
   },
   appSwitcher: {
-    width: 368
+    width: 376
   }
 };
 exports.sizes = sizes;