@patternfly/quickstarts 2.4.0 → 2.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +2 -2
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines.md +1 -1
- package/dist/patternfly-docs/quick-starts/examples/about.md +28 -21
- package/dist/patternfly-docs/quick-starts/examples/basic.md +7 -5
- package/dist/patternfly-docs/quick-starts/examples/help-topics.md +8 -5
- package/dist/quickstarts-full.es.js +308 -338
- package/dist/quickstarts-full.es.js.map +1 -1
- package/package.json +2 -2
- package/src/HelpTopicPanelContent.tsx +1 -1
- package/src/QuickStartPanelContent.tsx +1 -1
|
@@ -4,41 +4,42 @@
|
|
|
4
4
|
section: extensions
|
|
5
5
|
# Sidenav secondary level section
|
|
6
6
|
# should be the same for all markdown files for each extension
|
|
7
|
-
id: Quick
|
|
7
|
+
id: Quick starts
|
|
8
8
|
# Tab
|
|
9
9
|
source: about
|
|
10
|
+
sourceLink: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module/patternfly-docs/content/extensions/quick-starts/examples/about.md
|
|
10
11
|
---
|
|
11
12
|
# About
|
|
12
|
-
The **@patternfly/quickstarts** extension is made up of two
|
|
13
|
+
The **@patternfly/quickstarts** extension is made up of two product documentation tools: **quick starts** and **in-app documentation**.
|
|
13
14
|
|
|
14
15
|
## Full live demo application
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
A few key concepts are outlined below.
|
|
16
|
+
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.
|
|
18
17
|
|
|
19
18
|
## Quick starts
|
|
20
|
-
A
|
|
19
|
+
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.
|
|
21
20
|
|
|
22
|
-
|
|
21
|
+
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.
|
|
23
22
|
|
|
24
23
|
<img src="./img/side-panel.png" alt="Side panel elements" width="449"/>
|
|
25
24
|
|
|
26
|
-
For more
|
|
25
|
+
For more quick start details and visuals, [view the design guidelines.](/extensions/quick-starts/design-guidelines)
|
|
27
26
|
|
|
28
27
|
### Quick start format
|
|
29
28
|
|
|
30
29
|
#### For developers
|
|
31
|
-
|
|
30
|
+
To learn more about quick starts:
|
|
32
31
|
|
|
33
|
-
|
|
32
|
+
- [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).
|
|
33
|
+
- [View a basic example](/extensions/quick-starts/Basic-Quick-Starts).
|
|
34
|
+
- [View the live demo](https://quickstarts.netlify.app/) and [view the live demo code](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev).
|
|
34
35
|
|
|
35
36
|
#### For content authors
|
|
36
|
-
Quick starts can be written in `yaml` with markdown support, `asciidoc`, or
|
|
37
|
+
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).
|
|
37
38
|
|
|
38
39
|
### Opening and closing the side panel
|
|
39
40
|
|
|
40
41
|
#### Custom handler
|
|
41
|
-
|
|
42
|
+
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:
|
|
42
43
|
```typescript
|
|
43
44
|
const { setActiveQuickStart } = React.useContext<QuickStartContextValues>(
|
|
44
45
|
QuickStartContext,
|
|
@@ -46,32 +47,38 @@ const { setActiveQuickStart } = React.useContext<QuickStartContextValues>(
|
|
|
46
47
|
```
|
|
47
48
|
|
|
48
49
|
#### Quick start catalog
|
|
49
|
-
|
|
50
|
+
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.
|
|
50
51
|
|
|
51
52
|
<img src="./img/catalog.png" alt="Quick start catalog" width="1680"/>
|
|
52
53
|
|
|
53
54
|
## In-app documentation
|
|
54
|
-
In-app documentation
|
|
55
|
+
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.
|
|
55
56
|
|
|
56
|
-
`HelpTopics` are displayed in a side panel just like
|
|
57
|
+
`HelpTopics` are displayed in a side panel just like quick starts:
|
|
57
58
|
|
|
58
59
|
<img src="./img/help-topic.png" alt="quick start catalog" width="449"/>
|
|
59
60
|
|
|
60
|
-
###
|
|
61
|
+
### HelpTopic format
|
|
61
62
|
|
|
62
63
|
#### For developers
|
|
63
|
-
|
|
64
|
+
To learn more about `HelpTopic`s:
|
|
64
65
|
|
|
65
|
-
|
|
66
|
+
- [View a breakdown of the HelpTopic code format](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/src/utils/help-topic-types.ts).
|
|
67
|
+
- [View a basic example](/extensions/quick-starts/In-App-Documentation).
|
|
68
|
+
- [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).
|
|
66
69
|
|
|
67
70
|
#### For content authors
|
|
68
|
-
|
|
71
|
+
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).
|
|
69
72
|
|
|
70
73
|
### Opening and closing the side panel
|
|
71
|
-
|
|
74
|
+
To open a side panel, call the `setActiveHelpTopicByName` method(available from `HelpTopicContext`) and include the name of a `HelpTopic`.
|
|
72
75
|
|
|
73
76
|
```typescript
|
|
74
77
|
const { setActiveHelpTopicByName } = React.useContext<HelpTopicContextValues>(HelpTopicContext);
|
|
75
78
|
```
|
|
76
79
|
|
|
77
|
-
|
|
80
|
+
To close a side panel, call the `setActiveHelpTopicByName` method and pass in an empty string.
|
|
81
|
+
|
|
82
|
+
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).
|
|
83
|
+
|
|
84
|
+
|
|
@@ -4,24 +4,26 @@
|
|
|
4
4
|
section: extensions
|
|
5
5
|
# Sidenav secondary level section
|
|
6
6
|
# should be the same for all markdown files
|
|
7
|
-
id: Quick
|
|
7
|
+
id: Quick starts
|
|
8
8
|
# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
|
|
9
|
-
source: Basic-
|
|
9
|
+
source: Basic-quick-starts
|
|
10
10
|
# If you use typescript, the name of the interface to display props for
|
|
11
11
|
# These are found through the sourceProps function provided in patternfly-docs.source.js
|
|
12
12
|
propComponents: ['QuickStartContainer']
|
|
13
|
+
sourceLink: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module/patternfly-docs/content/extensions/quick-starts/examples/basic.md
|
|
13
14
|
---
|
|
14
15
|
|
|
15
16
|
import { quickStarts as exampleQuickStarts } from './example-data';
|
|
16
17
|
import { LoadingBox, QuickStartContainer, QuickStartCatalogPage, useLocalStorage, } from '@patternfly/quickstarts';
|
|
17
18
|
import '@patternfly/quickstarts/dist/quickstarts.css';
|
|
18
19
|
|
|
19
|
-
## Basic
|
|
20
|
+
## Basic quick starts examples
|
|
20
21
|
|
|
21
|
-
###
|
|
22
|
+
### Quick starts catalog
|
|
22
23
|
```js file="./Basic.jsx"
|
|
23
24
|
```
|
|
24
25
|
|
|
25
|
-
### Fullscreen
|
|
26
|
+
### Fullscreen catalog page
|
|
27
|
+
To view a fullscreen example, click the image below.
|
|
26
28
|
```js file="./Basic.jsx" isFullscreen
|
|
27
29
|
```
|
|
@@ -4,22 +4,25 @@
|
|
|
4
4
|
section: extensions
|
|
5
5
|
# Sidenav secondary level section
|
|
6
6
|
# should be the same for all markdown files for each extension
|
|
7
|
-
id: Quick
|
|
7
|
+
id: Quick starts
|
|
8
8
|
# Tab
|
|
9
|
-
source: In-
|
|
9
|
+
source: In-app-documentation
|
|
10
|
+
tabName: In-app documentation
|
|
10
11
|
propComponents: ['HelpTopicContainer']
|
|
12
|
+
sourceLink: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module/patternfly-docs/content/extensions/quick-starts/examples/help-topics.md
|
|
11
13
|
---
|
|
12
14
|
|
|
13
15
|
import { LoadingBox, HelpTopicContainer, HelpTopicContext } from '@patternfly/quickstarts';
|
|
14
16
|
import { helpTopics as exampleHelpTopics } from './example-data';
|
|
15
17
|
import '@patternfly/quickstarts/dist/quickstarts.css';
|
|
16
18
|
|
|
17
|
-
## In-app documentation
|
|
19
|
+
## In-app documentation examples
|
|
18
20
|
|
|
19
|
-
### Basic
|
|
21
|
+
### Basic help topic
|
|
20
22
|
```js file="./HelpTopic.jsx"
|
|
21
23
|
```
|
|
22
24
|
|
|
23
|
-
###
|
|
25
|
+
### Fullscreen help topic
|
|
26
|
+
To view a fullscreen example, click the image below.
|
|
24
27
|
```js file="./HelpTopic.jsx" isFullscreen
|
|
25
28
|
```
|