update docs, few prop defs

Author: CooperRedhat

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",
@@ -36,7 +37,8 @@
     "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: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",

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

@@ -6,15 +6,11 @@ section: extensions
 # should be the same for all markdown files for each extension
 id: Quick Starts
 # Tab
-source: Design-Guidelines
+source: design-guidelines
 ---
 
-A **quick start** is a set of step-by-step instructions and tasks presented in a side panel embedded in a product’s UI. Quick starts can help users get started with a product, and they often provide guidance around installation and setup.
-
-Each task in a quick start has multiple steps, and each quick start has multiple tasks. The outcome of the quick start includes the artifacts or state needed to successfully use the product, specific features, or add-ons.
-
+# Quickstarts
 ## 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.

packages/module/patternfly-docs/content/extensions/quick-starts/examples/about.md

@@ -0,0 +1,77 @@
+---
+# 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: about
+---
+# About
+The **@patternfly/quickstarts** extension is made up of two parts: `Quickstarts` and `In App Documenation` product documentation tools.
+
+## Full live demo application
+A live demo of **Quickstarts and In App Documentation** can be found [here](https://quickstarts.netlify.app/), or view the [demo code](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev).
+
+A few key concepts are outlined below.
+
+## Quickstarts
+A `Quickstart` is a set of step-by-step instructions and tasks presented in a side panel embedded in a product’s UI. Quick starts can help users get started with a product, and they often provide guidance around installation and setup.
+
+Each task in a quick start has multiple steps, and each quick start has multiple tasks. The outcome of the quick start includes the artifacts or state needed to successfully use the product, specific features, or add-ons.
+
+<img src="./img/side-panel.png" alt="Side panel elements" width="449"/>
+
+For more detailed design guidelines and visuals see [here.](/extensions/quick-starts/design-guidelines#quickstarts)
+
+### Quickstart format
+
+#### For developers
+A detailed breakdown of the quickstart format in code can be seen [here](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/src/utils/quick-start-types.ts).
+
+Quickly preview a [basic exmaple](/extensions/quick-starts/Basic-Quick-Starts), and remember there is a [live demo](https://quickstarts.netlify.app/) with [full demo code](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev).
+
+#### For content authors
+Quickstarts can be written in `yaml` with markdown support, `asciidoc`, or just `json`. For examples of each of these formats see [here](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev/src/quickstarts-data)
+
+### Opening and closing the side panel
+
+#### Custom handler
+Open the side panel by calling the `setActiveQuickStart` or `setActiveQuickstartID` methods. These methods are provided by the `QuickStartContext` and can be accessed in your React components:
+```typescript
+const { setActiveQuickStart } = React.useContext<QuickStartContextValues>(
+    QuickStartContext,
+  );
+```
+
+#### Quickstart catalog
+By providing a set of quickstarts to the `QuickStartContainer`, a full page catalog view will be generated. Clicking on a catalog card will open its respective `Quickstart` in the side panel. 
+
+<img src="./img/catalog.png" alt="Quick start catalog" width="1680"/>
+
+## In App Documenation
+In App Documentation is used to provide definitions for a set of topics relevant to your product. A single unit of In App Documentation can be called a `HelpTopic`, which is also the name used in code. `HelpTopic`'s essential sections are a **content** section that contains a definition of the term or topic, and an optional list of **links** to provide the user with other relevant information.
+
+`HelpTopics` are displayed in a side panel just like `Quickstarts`:
+
+<img src="./img/help-topic.png" alt="Quick start catalog" width="449"/>
+
+### Help Topic format
+
+#### For developers
+A detailed breakdown of the `HelpTopic` format in code can be seen [here](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/src/utils/help-topic-types.ts).
+
+Quickly preview a [basic exmaple](/extensions/quick-starts/In-App-Documentation), and remember there is a [live demo](https://quickstarts.netlify.app/in-context-help) with [full demo code](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev).
+
+#### For content authors
+HelpTopics are written in `yaml` with markdown support. An example can be seen [here](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/dev/src/quickstarts-data/yaml/in-context-help/example-topics.yaml)
+
+### Opening and closing the side panel
+Open the side panel by calling `setActiveHelpTopicByName` (available from `HelpTopicContext`) with a `HelpTopic`'s name value.
+
+```typescript
+const { setActiveHelpTopicByName } = React.useContext<HelpTopicContextValues>(HelpTopicContext);
+```
+
+Close it by calling `setActiveHelpTopicByName` with an empty string. There is no prebuilt `HelpTopic` catalog. simply attach a handler with `setActiveHelpTopicByName` to the appropriate DOM element. See the [basic exmaple](/extensions/quick-starts/In-App-Documentation), or [live demo code](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev) for more details.

…ions/quick-starts/examples/HelpTopics.md …ons/quick-starts/examples/help-topics.mdpackages/module/patternfly-docs/content/extensions/quick-starts/examples/HelpTopics.md renamed to packages/module/patternfly-docs/content/extensions/quick-starts/examples/help-topics.md packages/module/patternfly-docs/content/extensions/quick-starts/examples/HelpTopics.md renamed to packages/module/patternfly-docs/content/extensions/quick-starts/examples/help-topics.md

@@ -7,6 +7,7 @@ section: extensions
 id: Quick Starts
 # Tab
 source: In-App-Documentation
+propComponents: ['HelpTopicContainer']
 ---
 
 import { LoadingBox, HelpTopicContainer, HelpTopicContext } from '@patternfly/quickstarts';

packages/module/patternfly-docs/content/extensions/quick-starts/examples/img/catalog.png

@@ -11,24 +11,25 @@ import { QuickStartContextValues } from './utils/quick-start-context';
 import { HelpTopic } from './utils/help-topic-types';
 
 export interface HelpTopicContainerProps extends React.HTMLProps<HTMLDivElement> {
-  /* array of HelpTopics */
+  /** array of HelpTopics */
   helpTopics: HelpTopic[];
-  /* text resources object */
+  /** text resources object
+   * Add custom strings: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#localization
+   */
   resourceBundle?: any;
-  /* language of the current resource bundle */
+  /** language of the current resource bundle */
   language?: string;
-  /* if true, will show a loading spinner on the catalog page (default false) */
+  /** if true, will show a loading spinner on the catalog page (default false) */
   loading?: boolean;
   /**
    * Additional markdown extensions and renderers to use
-   * TODO: example usage - In the meantime you can take a look at:
-   * https://github.com/openshift/console/blob/master/frontend/packages/console-app/src/components/quick-starts/utils/quick-start-context.tsx#L235
+   * Example usage: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#markdown-extensions
    */
   markdown?: {
     extensions?: any[];
     renderExtension?: (docContext: HTMLDocument, rootSelector: string) => React.ReactNode;
   };
-  /* additional quick start context props */
+  /** additional quick start context props */
   contextProps?: QuickStartContextValues;
 }
 
@@ -41,7 +42,7 @@ export const HelpTopicContainer: React.FC<HelpTopicContainerProps> = ({
   markdown,
   contextProps,
   ...props
-}) => {
+}: HelpTopicContainerProps) => {
   const valuesForHelpTopicContext: HelpTopicContextValues = useValuesForHelpTopicContext({
     helpTopics,
     language,

packages/module/patternfly-docs/content/extensions/quick-starts/examples/img/help-topic.png

@@ -40,7 +40,9 @@ export interface QuickStartContainerProps extends React.HTMLProps<HTMLDivElement
   useLegacyHeaderColors?: boolean;
   /** text resources object */
   resourceBundle?: any;
-  /** language of the current resource bundle */
+  /** language of the current resource bundle
+   * Add custom strings: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#localization
+   */
   language?: string;
   /** if true, will show a loading spinner on the catalog page (default false) */
   loading?: boolean;
@@ -50,8 +52,7 @@ export interface QuickStartContainerProps extends React.HTMLProps<HTMLDivElement
   alwaysShowTaskReview?: boolean;
   /**
    * Additional markdown extensions and renderers to use
-   * TODO: example usage - In the meantime you can take a look at:
-   * https://github.com/openshift/console/blob/master/frontend/packages/console-app/src/components/quick-starts/utils/quick-start-context.tsx#L235
+   * Example usage: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#markdown-extensions
    */
   markdown?: {
     extensions?: any[];