diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/examples/about.md b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/about.md index 3bccb940..fb5215a3 100644 --- a/packages/module/patternfly-docs/content/extensions/quick-starts/examples/about.md +++ b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/about.md @@ -4,41 +4,41 @@ section: extensions # Sidenav secondary level section # should be the same for all markdown files for each extension -id: Quick Starts +id: Quick starts # Tab source: about --- # About -The **@patternfly/quickstarts** extension is made up of two parts: `Quick starts` and `in-app documentation` product documentation tools. +The **@patternfly/quickstarts** extension is made up of two product documentation tools: **quick starts** and **in-app documentation**. ## Full live demo application -A live demo of **quick starts 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. +To learn more about quick starts and in-app documentation, you may [view examples in a live demo](https://quickstarts.netlify.app/), explore the [demo code](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev), or continue reading below. ## Quick starts -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 guide installation and setup. +A quick start is a set of step-by-step instructions and tasks presented in a side panel embedded within a product’s UI. Quick starts can help users get started with a product by providing installation and setup guidance. -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. +A quick start has multiple tasks, each with multiple steps. On completion, a quick start gives users the artifacts or state needed to successfully use a product, specific features, or add-ons. Side panel elements -For more detailed design guidelines and visuals see [here.](/extensions/quick-starts/design-guidelines#quickstarts) +For more quick start details and visuals, [view the design guidelines.](/extensions/quick-starts/design-guidelines) ### Quick start format #### For developers -A detailed breakdown of the Quick start format in code can be seen [here](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/src/utils/quick-start-types.ts). +To learn more about quick starts: -Quickly preview a [basic example](/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). +- [View a breakdown of the quick start code format](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/src/utils/quick-start-types.ts). +- [View a basic example](/extensions/quick-starts/Basic-Quick-Starts). +- [View the live demo](https://quickstarts.netlify.app/) and [view the live demo code](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev). #### For content authors -Quick starts 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) +Quick starts can be written in `yaml` with markdown support, `asciidoc`, or `json`. To learn more about each of these formats, [view example files](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: +To open the side panel of a quick start, call the `setActiveQuickStart` or `setActiveQuickstartID` methods. These methods are provided by `QuickStartContext` and can be accessed in your React components: ```typescript const { setActiveQuickStart } = React.useContext( QuickStartContext, @@ -46,32 +46,38 @@ const { setActiveQuickStart } = React.useContext( ``` #### Quick start catalog -By providing a set of quick starts to the `QuickStartContainer`, a full-page catalog view will be generated. Clicking on a catalog card will open its respective `quick start` in the side panel. +To generate a full-page catalog view, add a set of quick starts to a `QuickStartContainer`. Clicking on a catalog card will open its respective quick start in a side panel. Quick start catalog ## In-app documentation -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. +In-app documentation defines topics that are relevant to a product. A `HelpTopic` is a single unit of in-app documentation that contains a **content** section, which defines 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 `quick starts`: +`HelpTopics` are displayed in a side panel just like quick starts: quick start catalog -### Help Topic format +### HelpTopic 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). +To learn more about `HelpTopic`s: -Quickly preview a [basic example](/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). +- [View a breakdown of the HelpTopic code format](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/src/utils/help-topic-types.ts). +- [View a basic example](/extensions/quick-starts/In-App-Documentation). +- [View the live demo](https://quickstarts.netlify.app/in-context-help) and [view the live 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) +A `HelpTopic` is written in `yaml` with markdown support. [View an example yaml file](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/dev/src/quickstarts-data/yaml/in-app-documentation/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. +To open a side panel, call the `setActiveHelpTopicByName` method(available from `HelpTopicContext`) and include the name of a `HelpTopic`. ```typescript const { setActiveHelpTopicByName } = React.useContext(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 example](/extensions/quick-starts/In-App-Documentation) or [live demo code](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev) for more details. +To close a side panel, call the `setActiveHelpTopicByName` method and pass in an empty string. + +There is no prebuilt `HelpTopic` catalog: to build one, attach a handler to the appropriate DOM element using the `setActiveHelpTopicByName` method. For more details, see the [basic example](/extensions/quick-starts/In-App-Documentation) or the [live demo code](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev). + + diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/examples/basic.md b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/basic.md index 1cece359..f158d027 100644 --- a/packages/module/patternfly-docs/content/extensions/quick-starts/examples/basic.md +++ b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/basic.md @@ -4,9 +4,9 @@ section: extensions # Sidenav secondary level section # should be the same for all markdown files -id: Quick Starts +id: Quick starts # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) -source: Basic-Quick-Starts +source: Basic-quick-starts # If you use typescript, the name of the interface to display props for # These are found through the sourceProps function provided in patternfly-docs.source.js propComponents: ['QuickStartContainer'] @@ -16,12 +16,13 @@ import { quickStarts as exampleQuickStarts } from './example-data'; import { LoadingBox, QuickStartContainer, QuickStartCatalogPage, useLocalStorage, } from '@patternfly/quickstarts'; import '@patternfly/quickstarts/dist/quickstarts.css'; -## Basic Quick Starts Usage +## Basic quick starts examples -### With Catalog Page +### Quick starts catalog ```js file="./Basic.jsx" ``` -### Fullscreen example +### Fullscreen catalog page +To view a fullscreen example, click the image below. ```js file="./Basic.jsx" isFullscreen ``` diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/examples/help-topics.md b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/help-topics.md index 6a719ad4..a0501d9d 100644 --- a/packages/module/patternfly-docs/content/extensions/quick-starts/examples/help-topics.md +++ b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/help-topics.md @@ -4,9 +4,10 @@ section: extensions # Sidenav secondary level section # should be the same for all markdown files for each extension -id: Quick Starts +id: Quick starts # Tab -source: In-App-Documentation +source: In-app-documentation +tabName: In-app documentation propComponents: ['HelpTopicContainer'] --- @@ -14,12 +15,13 @@ import { LoadingBox, HelpTopicContainer, HelpTopicContext } from '@patternfly/qu import { helpTopics as exampleHelpTopics } from './example-data'; import '@patternfly/quickstarts/dist/quickstarts.css'; -## In-app documentation +## In-app documentation examples -### Basic Example +### Basic help topic ```js file="./HelpTopic.jsx" ``` -### Basic Example Fullscreen +### Fullscreen help topic +To view a fullscreen example, click the image below. ```js file="./HelpTopic.jsx" isFullscreen ```