Preparing the console for a release.

jarrodek · jarrodek · commit e3ef0e468404 · 2019-01-11T14:30:09.000-08:00
diff --git a/README.md b/README.md
@@ -4,6 +4,8 @@ __See live example of the API console in our [demo application][].__
 
 MuleSoft's API Console is a full-fledged API documentation tool that generates mobile-friendly web documentation based on RAML (Restful API Modeling Language) or OAS (Open API specification) documents. In addition to providing documentation, the tool provides the capability for users to try out requests on the fly.
 
+![API console design](docs/APIC-main-promo.png)
+
 ## API console 5.0 is here!
 
 Great news! Next version of API console is here! The upgrade includes new design, new data model and and build process that allows reduce size of the console.
@@ -13,11 +15,7 @@ Great news! Next version of API console is here! The upgrade includes new design
 We are working very hard to deliver first in class solutions for API documentation.
 MuleSoft's AMF allows to parse any* API document and produces common data model. API console consumes this model instead of RAML JS parser's.
 
-\* Currently AMF supports RAML 0.8, RAML 1.0, OAS 1.0 and OAS 2.0. It can be extended by defining new vocabulary to support other API spec formats.
-
-### Native support for web components
-
-API console now support final version of web components specification. This mean no more polyfills and less source code to be downloaded.
+\* Currently AMF supports RAML 0.8, RAML 1.0, OAS 2.0 and OAS 3.0. It can be extended by defining new vocabulary to support other API spec formats.
 
 ### Redesign
 
@@ -156,24 +154,24 @@ git clone https://github.com/mulesoft/api-console.git
 cd api-console
 ```
 
-2.  Checkout the latest version.
+2.  Install [polymer-cli][] and [Bower][].
 ```
-git checkout 5.0.0-preview
+sudo npm install -g bower polymer-cli
 ```
 
-3.  Install [polymer-cli][] and [Bower][].
+3.  Install dependencies.
 ```
-sudo npm install -g bower polymer-cli
+bower install && npm i
 ```
 
-4.  Install dependencies.
+4.  Serve the element.
 ```
-bower install
+polymer serve --open
 ```
 
-5.  Serve the element.
+5. If you are planning to parse own RAML/OAS file then additionally run this command to run AMF parsing service for the demo page:
 ```
-polymer serve --open
+npm staret
 ```
 
 The default page is the element's documentation. Switch to demo to see a working example.
diff --git a/api-console.html b/api-console.html
@@ -34,10 +34,10 @@
   <template>
     <style>
     :host {
-      --app-primary-color: #00A2DF;
-      --app-secondary-color: black;
+      --app-primary-color: var(--api-console-primary-color, #00A2DF);
+      --app-secondary-color: var(--api-console-secondary-color, black);
       display: block;
-      background-color: var(--primary-background-color, transparent);
+      background-color: var(--api-console-primary-background-color, var(--primary-background-color, transparent));
       @apply --arc-font-body1;
     }
 
@@ -84,7 +84,7 @@
     }
 
     :host([layout-narrow]) app-drawer {
-      z-index: 1;
+      z-index: var(--api-console-drawer-zindex, 1);
     }
 
     app-toolbar {
@@ -141,7 +141,7 @@
 
     api-request-panel,
     api-documentation {
-      max-width: var(--api-console-main-max-width, 900px);
+      max-width: var(--api-console-main-max-width, 1600px);
     }
 
     .api-docs {
@@ -190,6 +190,10 @@
       margin: 0;
       @apply --api-method-documentation-title-narrow;
     }
+
+    .store-link {
+      @apply --arc-link;
+    }
     </style>
     <template is="dom-if" if="[[app]]" restamp="true">
       <iron-media-query query="(max-width: 740px)" query-matches="{{narrow}}"></iron-media-query>
@@ -233,7 +237,7 @@ <h1 class="method-title">[[methodName]]</h1>
               </div>
             </div>
             <div class="extension-banner" active$="[[extensionBannerActive]]">
-              <p>For better experience install API console extension. Get it from <a target="_blank" href="https://chrome.google.com/webstore/detail/olkpohecoakpkpinafnpppponcfojioa">Chrome Web Store</a></p>
+              <p>For better experience install API console extension. Get it from <a target="_blank" class="store-link" href="https://chrome.google.com/webstore/detail/olkpohecoakpkpinafnpppponcfojioa">Chrome Web Store</a></p>
               <paper-icon-button icon="arc:close" on-click="dismissExtensionBanner"></paper-icon-button>
             </div>
             <api-request-panel
@@ -266,7 +270,7 @@ <h1 class="method-title">[[methodName]]</h1>
               <template is="dom-if" if="[[_renderInlineTyit]]" restamp>
                 <div class="inline-request">
                   <div class="extension-banner" active$="[[extensionBannerActive]]">
-                    <p>For better experience install API console extension. Get it from <a target="_blank" href="https://chrome.google.com/webstore/detail/olkpohecoakpkpinafnpppponcfojioa">Chrome Web Store</a></p>
+                    <p>For better experience install API console extension. Get it from <a target="_blank" class="store-link" href="https://chrome.google.com/webstore/detail/olkpohecoakpkpinafnpppponcfojioa">Chrome Web Store</a></p>
                     <paper-icon-button icon="arc:close" on-click="dismissExtensionBanner"></paper-icon-button>
                   </div>
                   <api-request-panel
diff --git a/demo/standalone/app.js b/demo/standalone/app.js
@@ -243,6 +243,7 @@
       case 'manualNavigation':
       case 'navigationOpened':
       case 'noExtensionBanner':
+      case 'inlineMethods':
         let apiConsole = document.querySelector('api-console');
         apiConsole[action] = e.detail.value;
         break;
diff --git a/demo/standalone/index.html b/demo/standalone/index.html
@@ -72,6 +72,9 @@
         <paper-item>
           <paper-toggle-button data-action="noExtensionBanner">No extension banner</paper-toggle-button>
         </paper-item>
+        <paper-item>
+          <paper-toggle-button data-action="inlineMethods">Render Try It inline with method documentation</paper-toggle-button>
+        </paper-item>
         <paper-item data-click-action="goBack">Close this API</paper-item>
       </paper-listbox>
     </paper-menu-button>
diff --git a/demo/themed/apic-theme-file.html b/demo/themed/apic-theme-file.html
@@ -109,7 +109,7 @@
     --arc-menu-height: 100%;
     --menu-selection-background-color: #00b9ff;
     --arc-menu-selected-background-color: var(--menu-selection-background-color);
-    --error-color: #FF5722;
+    --error-color: #ff835c;
 
     --api-console-toolbar-background-color: var(--primary-background-color);
     --api-console-toolbar-color: #fff;
@@ -135,6 +135,7 @@
       width: 36px;
       height: 36px;
     }
+    --api-navigation-endpoint-toggle-icon-hover-color: #eaeaea;
 
     /* Method labels in method documentation title */
     --method-display-get-background-color: rgb(0, 128, 0);
@@ -269,6 +270,7 @@
     --code-mirror-atom-color: var(--code-type-boolean-value-color);
     --code-mirror-cursor-color: #fff;
     --code-mirror-variable-color: #FFC107;
+    --code-mirror-attribute-color: #ff5fff;
 
     --arc-status-code-color-300: #3F51B5;
 
@@ -295,6 +297,7 @@
     --api-annotation-document-color: #ECEFF1;
     --apic-tryint-wide-background-color: #263238;
     --api-console-extension-banner-color: rgba(255, 255, 255, 0.54);
+    --from-row-action-icon-color:  rgba(255, 255, 255, 0.77);
     --from-row-action-icon-color-hover: rgba(255, 255, 255, 0.87);
     --api-method-documentation-bottom-navigation-color: #fff;
     --api-type-document-property-color: #ECEFF1;
@@ -304,6 +307,9 @@
     }
 
     --api-navigation-path-label-color: #CFD8DC;
+    --arc-link: {
+      color: #68b4ff;
+    };
   }
   </style>
 </custom-style>
diff --git a/demo/themed/app.js b/demo/themed/app.js
@@ -243,6 +243,7 @@
       case 'manualNavigation':
       case 'navigationOpened':
       case 'noExtensionBanner':
+      case 'inlineMethods':
         let apiConsole = document.querySelector('api-console');
         apiConsole[action] = e.detail.value;
         break;
diff --git a/demo/themed/index.html b/demo/themed/index.html
@@ -75,6 +75,9 @@
         <paper-item>
           <paper-toggle-button data-action="noExtensionBanner">No extension banner</paper-toggle-button>
         </paper-item>
+        <paper-item>
+          <paper-toggle-button data-action="inlineMethods">Render Try It inline with method documentation</paper-toggle-button>
+        </paper-item>
         <paper-item data-click-action="goBack">Close this API</paper-item>
       </paper-listbox>
     </paper-menu-button>
diff --git a/docs/APIC-main-promo.png b/docs/APIC-main-promo.png
diff --git a/test/index.html b/test/index.html
@@ -14,7 +14,8 @@
         'basic-test.html',
         'raml-aware-test.html',
         'amf-computations-test.html',
-        'attribution-test.html'
+        'attribution-test.html',
+        'integration-test.html'
       ]);
     </script>
   </body>
diff --git a/test/integration-test.html b/test/integration-test.html
