add media library

* rebase editorial workflow pull requests when behind

* fix async/await transpilation

* add media library pagination

* switch media library to grid layout

* ensure that only cms branches can be force updated

src/components/UI/Dialog/Dialog.css

@@ -0,0 +1,52 @@
+.nc-dialog-wrapper {
+  z-index: 99999;
+}
+
+.nc-dialog-root {
+  height: 80%;
+  text-align: center;
+  max-width: 2200px;
+}
+
+.nc-dialog-body {
+  height: 100%;
+}
+
+.nc-dialog-contentWrapper {
+  height: 100%;
+}
+
+.nc-dialog-footer {
+  margin: 24px 0;
+  width: calc(100% - 48px);
+  position: absolute;
+  bottom: 0;
+}
+
+
+/**
+ * Progress Bar
+ */
+.nc-dialog-progressOverlay {
+  background-color: rgba(255, 255, 255, 0.75);
+  z-index: 1;
+  height: 100%;
+  width: 100%;
+}
+
+.nc-dialog-progressOverlay-active {
+  opacity: 1 !important;
+}
+
+.nc-dialog-progressBarContainer {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.nc-dialog-progressBar-linear {
+  width: 80%;
+}
+

src/components/UI/Dialog/FocusTrap.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import FocusTrapReact from 'focus-trap-react';
+
+/**
+ * A wrapper for focus-trap-react, which we use to completely remove focus traps
+ * from the DOM rather than using the library's own internal activation/pausing
+ * mechanisms, which can manifest bugs when nested.
+ */
+const FocusTrap = props => {
+  const { active, children, focusTrapOptions, className } = props;
+  return active
+    ? <FocusTrapReact focusTrapOptions={focusTrapOptions} className={className}>{children}</FocusTrapReact>
+    : <div className={className}>{children}</div>
+}
+
+export default FocusTrap;

src/components/UI/Dialog/index.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import RTDialog from 'react-toolbox/lib/dialog';
+import Overlay from 'react-toolbox/lib/overlay';
+import ProgressBar from 'react-toolbox/lib/progress_bar';
+import FocusTrap from './FocusTrap';
+
+const dialogTheme = {
+  wrapper: 'nc-dialog-wrapper',
+  dialog: 'nc-dialog-root',
+  body: 'nc-dialog-body',
+};
+
+const progressOverlayTheme = {
+  overlay: 'nc-dialog-progressOverlay',
+  active: 'nc-dialog-progressOverlay-active',
+};
+
+const progressBarTheme = {
+  linear: 'nc-dialog-progressBar-linear',
+};
+
+const Dialog = ({
+  type,
+  isVisible,
+  isLoading,
+  loadingMessage,
+  onClose,
+  footer,
+  className,
+  children,
+}) =>
+  <RTDialog
+    type={type || 'large'}
+    active={isVisible}
+    onEscKeyDown={onClose}
+    onOverlayClick={onClose}
+    theme={dialogTheme}
+    className={className}
+  >
+    <FocusTrap
+      active={isVisible && !isLoading}
+      focusTrapOptions={{ clickOutsideDeactivates: true, fallbackFocus: '.fallbackFocus' }}
+      className="nc-dialog-contentWrapper"
+    >
+      <Overlay active={isLoading} theme={progressOverlayTheme}>
+        <FocusTrap
+          active={isVisible && isLoading}
+          focusTrapOptions={{ clickOutsideDeactivates: true, initialFocus: 'h1' }}
+          className="nc-dialog-progressBarContainer"
+        >
+          <h1 style={{ marginTop: '-40px' }} tabIndex="-1">{ loadingMessage }</h1>
+          <ProgressBar type="linear" mode="indeterminate" theme={progressBarTheme}/>
+        </FocusTrap>
+      </Overlay>
+
+      <div className="fallbackFocus" className="nc-dialog-contentWrapper">
+        {children}
+      </div>
+
+      { footer ? <div className="nc-dialog-footer">{footer}</div> : null }
+
+    </FocusTrap>
+  </RTDialog>;
+
+export default Dialog;

src/components/UI/loader/Loader.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
-import classnames from 'classnames';
+import c from 'classnames';
 
 export default class Loader extends React.Component {
 
@@ -50,8 +50,8 @@ export default class Loader extends React.Component {
   };
 
   render() {
-    const { active } = this.props;
-    const className = classnames('nc-loader-root', { 'nc-loader-active': active });
-    return <div className={className}>{this.renderChild()}</div>;
+    const { active, className } = this.props;
+    const combinedClassName = c('nc-loader-root', { 'nc-loader-active': active }, className);
+    return <div className={combinedClassName}>{this.renderChild()}</div>;
   }
 }

src/components/UI/theme.css

@@ -1,5 +1,5 @@
 :root {
-  --fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --fontFamilyPrimary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   --fontFamilyMono: 'SFMono-Regular', Consolas, "Liberation Mono", Menlo, Courier, monospace;
   --defaultColor: #333;
   --defaultColorLight: #fff;
@@ -32,6 +32,27 @@
   --borderWidth: 2px;
   --border: solid var(--borderWidth) var(--secondaryColor);
   --textFieldBorder: var(--border);
+
+  --input: {
+    font-family: 'SFMono-Regular', Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    display: block;
+    width: 100%;
+    padding: 12px;
+    margin: 0;
+    border: var(--textFieldBorder);
+    border-radius: var(--borderRadius);
+    outline: 0;
+    box-shadow: none;
+    background-color: var(--controlBGColor);
+    font-size: 16px;
+    color: var(--textColor);
+    transition: border-color .3s ease;
+
+    &:focus,
+    &:active {
+      border-color: var(--primaryColor);
+    }
+  }
 }
 
 .nc-theme-base {