Rebuild docs using CLI tool

.eslintignore

@@ -6,4 +6,7 @@ dist
 node_modules
 public
 bin
-build
+build
+
+# paternfly-docs
+**/generated/**/*.js

.github/workflows/a11y.yml

@@ -13,10 +13,10 @@ jobs:
     steps:
     - name: Checkout
       uses: actions/checkout@v2
-    - name: Use Node.js 15
+    - name: Use Node.js 16
       uses: actions/setup-node@v2
       with:
-        node-version: 15
+        node-version: 16
     - name: Install
       run: yarn install
     - name: Build

.github/workflows/node.js.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [14.x, 16.x]
 
     steps:
     - uses: actions/checkout@v2

.github/workflows/npm-publish.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 16
       - run: yarn install
       - run: yarn build
 
@@ -25,7 +25,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 16
           registry-url: https://registry.npmjs.org/
       - run: yarn install
       - run: yarn build
@@ -40,7 +40,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 16
           registry-url: https://npm.pkg.github.com/
       - run: yarn install
       - run: yarn build

.github/workflows/visual-testing.yml

@@ -5,7 +5,7 @@ on:
     branches: [ main ]
   pull_request:
     branches: [ main ]
-    
+
 env:
   PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
 
@@ -16,10 +16,10 @@ jobs:
     steps:
     - name: Checkout
       uses: actions/checkout@v2
-    - name: Use Node.js 15
+    - name: Use Node.js 16
       uses: actions/setup-node@v2
       with:
-        node-version: 15
+        node-version: 16
     - name: Install
       run: yarn install
     - name: Build
@@ -29,4 +29,4 @@ jobs:
         yarn start &
         sleep 60 &&
         yarn visual
-      
+

.gitignore

@@ -8,3 +8,5 @@ storybook-static
 .idea
 .env
 stats.html
+
+.cache

packages/dev/src/Nav.ts

@@ -31,9 +31,9 @@ export const Nav: NavInterface[] = [
     to: '/quickstarts-context',
   },
   {
-    id: 'in-context-help',
-    name: 'In Context Help',
-    to: '/in-context-help',
+    id: 'in-app-documentation',
+    name: 'In-app documentation',
+    to: '/in-app-documentation',
   },
 ];
 

packages/dev/src/index.tsx

@@ -48,7 +48,7 @@ ReactDOM.render(
           <DefaultCatalog hint="This catalog is for testing the context based quick starts approach by utilizing the QuickStartContextProvider" />
         </AppContext>
       </Route>
-      <Route exact path="/in-context-help">
+      <Route exact path="/in-app-documentation">
         <AppHelpTopicDemo>
           <MockConsole />
         </AppHelpTopicDemo>

packages/dev/src/quickstarts-data/quick-start-test-data.ts

@@ -21,8 +21,8 @@ import sampleApplicationQuickstart from './yaml/sample-application-quickstart.ya
 import serverlessApplicationQuickstart from './yaml/serverless-application-quickstart.yaml';
 import springWithS2i from './yaml/spring-with-s2i.yaml';
 
-// in-context help examples
-import exampleHelpTopics from './yaml/in-context-help/example-topics.yaml';
+// In-app documentation examples
+import exampleHelpTopics from './yaml/in-app-documentation/example-topics.yaml';
 
 export const allQuickStarts: QuickStart[] = [
   template,

packages/module/.eslintignore

@@ -0,0 +1 @@
+**/generated/**/*.js

packages/module/.gitignore

@@ -0,0 +1,4 @@
+# Docs
+.cache
+**/generated/**/*.js
+public

packages/module/package.json

@@ -3,6 +3,7 @@
   "version": "2.2.3",
   "description": "PatternFly quick starts",
   "files": [
+    "src",
     "dist"
   ],
   "main": "dist/index.js",
@@ -20,7 +21,7 @@
   "scripts": {
     "clean": "rm -rf dist",
     "prebuild": "yarn clean",
-    "build": "rollup -c && yarn purge-css && yarn combine && yarn min-css && yarn min-css-standalone",
+    "build": "rollup -c && yarn purge-css && yarn combine && yarn min-css && yarn min-css-standalone && yarn docs:copy",
     "watch": "rollup -w --config rollup-quick.config.js",
     "quick": "rollup --config rollup-quick.config.js",
     "combine": "node ./combineCss.js",
@@ -32,7 +33,12 @@
     "post-css": "yarn purge-css && yarn min-css && yarn min-css-standalone",
     "purge-css": "purgecss --config ./purgecss.config.js",
     "min-css": "cleancss dist/quickstarts.css -o dist/quickstarts.min.css",
-    "min-css-standalone": "cleancss -o dist/quickstarts-standalone.min.css dist/patternfly-nested.css dist/quickstarts-standalone.css"
+    "min-css-standalone": "cleancss -o dist/quickstarts-standalone.min.css dist/patternfly-nested.css dist/quickstarts-standalone.css",
+    "docs:develop": "pf-docs-framework start",
+    "docs:build": "pf-docs-framework build all --output public",
+    "docs:serve": "pf-docs-framework serve public --port 5000",
+    "docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5000",
+    "docs:copy": "mkdir -p dist/patternfly-docs && cp -R patternfly-docs/content/extensions/quick-starts dist/patternfly-docs"
   },
   "peerDependencies": {
     "@patternfly/react-core": ">=4.115.2",
@@ -86,6 +92,7 @@
     "rollup-plugin-typescript2": "^0.29.0",
     "rollup-plugin-visualizer": "^5.5.0",
     "sass": "^1.35.2",
-    "tslib": "^2.0.3"
+    "tslib": "^2.0.3",
+    "@patternfly/documentation-framework": "1.0.2"
   }
 }

packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/design-guidelines.md

@@ -0,0 +1,105 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files for each extension
+section: extensions
+# Sidenav secondary level section
+# should be the same for all markdown files for each extension
+id: Quick Starts
+# Tab
+source: design-guidelines
+---
+
+# Quick starts
+## Elements
+### Card
+
+Quick starts are usually surfaced within a [catalog](https://www.patternfly.org/v4/components/card/design-guidelines/#cards-in-catalog-views) as clickable cards.
+
+<img src="./img/card-elements.png" alt="Elements of a card" width="370"/>
+
+1. **Icon:** An icon associated with the quick start topic can be included on the card. If no specific icon exists, use the rocket icon.
+2. **Title:** The title briefly communicates what the quick start covers.
+3. **Labels:** [Filled labels](https://www.patternfly.org/v4/components/label) communicate the estimated completion time and status. If the quick start is presented in a mixed catalog of resources, a label can indicate the type of resource.
+4. **Description:** The description summarizes the quick start outcome in four lines or fewer.
+5. **Prerequisites (optional):** Prerequisites communicate user requirements prior to starting the quick start. They’re displayed in a popover, and they’re organized into a bulleted list. The total number of prerequisites is listed in parentheses on the quick start card.
+
+<img src="./img/prerequisites.png" alt="Example of prerequisites" width="395"/>
+
+### Catalog
+Multiple quick starts are often presented to users in a catalog.
+
+<img src="./img/catalog-elements.png" alt="Quick start catalog" width="1680"/>
+
+Catalogs with 14 or fewer quick starts should  include a simple toolbar with the following elements:
+1. Keyword filter
+2. Status filter
+3. Item count  
+
+Catalogs with 15 or more quick starts should include filtering functionality presented as vertical filters on the left side of the page instead of a simple toolbar.
+
+For quick starts in a mixed catalog of resources, we recommend including an action link on the card so that users can easily recognize how to interact with it:
+
+* **Start:** Use if the quick start hasn't been started yet
+* **Continue:** Use if the quick start is in progress
+* **Restart:** Use if the quick start has already been completed
+
+There should only be one action displayed on a card at a time.
+
+<img src="./img/mixed-catalog.png" alt="Mixed resource catalog" width="1062"/>
+
+### Side panel
+Quick starts use the [drawer component](https://www.patternfly.org/v4/components/drawer), which contains all the step-by-step instructions and tasks.
+
+<img src="./img/side-panel-elements.png" alt="Side panel elements" width="449"/>
+
+1. **Quick start title:** The quick start title that is shown on the card.
+2. **Duration:** The estimated amount of time the quick start will take to complete.
+3. **Close:** The close button allows the user to close the quick start at any time.
+4. **Button bar:** The button bar allows the user to advance between quick start tasks. For task screens, the buttons are **Next**, **Back**, and **Restart**. For the intro screen, the only button is the **Start** button. On the completion screen, the buttons are **Close**, **Back**, and **Restart**.
+
+
+
+Everything is contained in the drawer and remains anchored to the right, allowing the user to follow the steps without blocking any parts of the UI. The drawer does not overlay the UI and instead pushes it to the left, including the masthead. This prevents any modals or side panels within the UI from covering the quick start instructions. The side panel is also resizable.
+
+<img src="./img/side-panel.png" alt="Side panel" width="1680"/>
+
+<img src="./img/side-panel-resized.png" alt="Resized side panel" width="1680"/>
+
+#### Introduction screen
+The first screen of any quick start is the introductory screen, which includes most of the information from the quick start card.
+
+<img src="./img/introduction-screen.png" alt="Introduction screen" width="449"/>
+
+#### Tasks
+Tasks consist of 2-10 steps, which walk the user through the UI to complete the goal of the task.
+
+<img src="./img/task.png" alt="Example task" width="449"/>
+
+#### Check your work
+The check your work module is shown at the bottom of the side panel for each task and helps the user validate that they have successfully completed the task. You can choose to make the check your work module required or optional. Validation questions should be yes/no questions, allowing the user to select the radio button with the appropriate response.
+
+<img src="./img/check-your-work.png" alt="Check your work module" width="431"/>
+
+If a user selects **Yes**, the check your work module and associated task header turn green. The task header icon becomes a checkmark.
+
+<img src="./img/task-yes.png" alt="Check your work module with Yes selected" width="449"/>
+
+If a user selects **No**, the check your work module and associated task header turn red. The task header icon becomes an **X**. When possible, explain what a user must do to complete the task, or link to relevant documentation.
+
+<img src="./img/task-no.png" alt="Check your work module with No selected" width="449"/>
+
+## Content guidelines
+Here are some general guidelines to follow when authoring quick start content:
+* Clearly state the outcome at the beginning of the quick start and provide brief context to explain why the user is completing the tasks.
+* Avoid screen captures. They require regular maintenance and can potentially lead to issues around accessibility and page loading.
+* Keep content minimal to avoid a wall of text that can overwhelm users and prevent easy skimming.
+* (Optional) As needed, provide a carefully curated set of links at specific points in the quick start:
+  * Provide links within a quick start task if the user is likely to need or want more conceptual or reference information.
+  * Provide links at the end of quick starts if the user is likely to need or want additional technical  information upon completion.
+  * Provide links in the check your work module when a user answers **No** if more robust information can help the user understand what actions they must take to complete the task.  
+
+For more specific quick start content guidelines, refer to the [Red Hat OpenShift documentation](https://docs.openshift.com/container-platform/4.7/web_console/creating-quick-start-tutorials.html). While these guidelines are geared towards Red Hat OpenShift, they can apply to quick starts in any products.
+
+## Quick starts in context
+
+<img src="./img/qs-context.png" alt="A quick start in context of a UI" width="1680"/>

packages/module/patternfly-docs/content/extensions/quick-starts/examples/Basic.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+  LoadingBox,
+  QuickStartContainer,
+  useLocalStorage,
+  QuickStartCatalogPage,
+} from '@patternfly/quickstarts';
+import { quickStarts as exampleQuickStarts } from './example-data';
+
+export const App = ({ showCardFooters }) => {
+  const [activeQuickStartID, setActiveQuickStartID] = useLocalStorage('quickstartId', '');
+  const [allQuickStartStates, setAllQuickStartStates] = useLocalStorage('quickstarts', {});
+  const language = localStorage.getItem('bridge/language') || 'en';
+
+  // eslint-disable-next-line no-console
+  React.useEffect(() => console.log(activeQuickStartID), [activeQuickStartID]);
+  React.useEffect(() => {
+    // callback on state change
+    // eslint-disable-next-line no-console
+    console.log(allQuickStartStates);
+  }, [allQuickStartStates]);
+
+  const [loading, setLoading] = React.useState(true);
+  const [quickStarts, setQuickStarts] = React.useState([]);
+  React.useEffect(() => {
+    const load = async () => {
+      setQuickStarts(exampleQuickStarts);
+      setLoading(false);
+    };
+    setTimeout(() => {
+      load();
+    }, 500);
+  }, []);
+
+  const drawerProps = {
+    quickStarts,
+    activeQuickStartID,
+    allQuickStartStates,
+    setActiveQuickStartID,
+    setAllQuickStartStates,
+    showCardFooters,
+    language,
+    loading,
+    alwaysShowTaskReview: true,
+    markdown: {
+      extensions: [
+        // variable substitution
+        {
+          type: 'output',
+          filter: function(html) {
+            html = html.replace(/\[APPLICATION\]/g, 'Mercury');
+            html = html.replace(/\[PRODUCT\]/g, 'Lightning');
+
+            return html;
+          },
+        },
+      ],
+    },
+  };
+
+  return (
+    <React.Suspense fallback={<LoadingBox />}>
+      <QuickStartContainer {...drawerProps}>
+        <QuickStartCatalogPage
+          title="Quick starts"
+          hint={
+            'Learn how to create, import, and run applications with step-by-step instructions and tasks.'
+          }
+        />
+      </QuickStartContainer>
+    </React.Suspense>
+  );
+};