Skip to content

Commit 243e194

Browse files
fix(docs): Update overview page and gallery
2 parents f42a8ea + d49aa86 commit 243e194

File tree

3 files changed

+1603
-1302
lines changed

3 files changed

+1603
-1302
lines changed

packages/module/patternfly-docs/content/extensions/component-groups/about-component-groups.md

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,18 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa
99
import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery';
1010
import galleryData from './gallery-data.json';
1111

12-
Component groups lives in its own package [`@patternfly/react-component-groups`](https://www.npmjs.com/package/@patternfly/react-component-groups)
12+
**Note:** Component groups lives in its own package [`@patternfly/react-component-groups`](https://www.npmjs.com/package/@patternfly/react-component-groups)
1313

1414
**Note:** This extension replaces [`RedHatInsights/frontend-components`](https://github.com/RedHatInsights/frontend-components). If you previously used `frontend-components`, you can refer to [this migration guide](https://github.com/patternfly/react-component-groups/blob/main/migration.md) to help you transition to `react-component-groups`.
1515

16-
# Component groups
1716

18-
The component groups extension contains a range of React components that are more complex than basic PatternFly components. These component groups combine and adjust multiple base components to provide opinionated solutions for recurring use cases across products using PatternFly.
17+
**Component groups** are a range of React components that are more complex than basic PatternFly components. These groups combine and adjust multiple base components to provide opinionated solutions for recurring use cases across products using PatternFly.
1918

2019
The creation and maintenance of this extension is a collaborative effort between the PatternFly and Red Hat Hybrid Cloud Console teams. All component groups receive accessibility and design reviews, and we are working to improve internationalization, add test coverage, and ensure that CSS overrides all correctly reference the PatternFly CSS API.
2120

22-
There are a few different functional categories of component groups:
23-
24-
<SectionGallery
25-
section="Component groups"
26-
galleryItemsData={galleryData}
27-
placeholderText="Search component groups by name"
28-
includeSubsections={true}
29-
hasGridText={true}
30-
isFullWidth={false}
31-
/>
21+
---
3222

33-
## Contribution guidelines
23+
## How do I contribute to this extension?
3424

3525
The code for component groups lives in the [`patternfly/react-component-groups repository`](https://github.com/patternfly/react-component-groups).
3626

@@ -41,3 +31,19 @@ Specific contribution guidelines and instructions are outlined in [the component
4131
We aim to align the standards of component groups as closely as possible with existing PatternFly standards. Given that this is a multi-team collaboration, we will continue to work towards this goal together.
4232

4333
If you notice a bug or have a suggestion for a new component group, open an issue in our [GitHub repository](https://github.com/patternfly/react-component-groups/issues)! Please make sure to check if there is already a pre-existing issue before creating a new one.
34+
35+
---
36+
37+
## Explore component groups
38+
39+
<SectionGallery
40+
section="extensions"
41+
subsection="component-groups"
42+
galleryItemsData={galleryData}
43+
placeholderText="Search by name"
44+
onlyShowInGalleryData={true}
45+
hasGridText={true}
46+
isFullWidth={false}
47+
/>
48+
49+
Lines changed: 76 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,77 @@
11
{
2-
"content-containers": {
3-
"summary": "Organize and display information in structured or flexible containers."
4-
},
5-
"controls": {
6-
"summary": "Enable more effective navigation and selection by providing users with options for interaction and input."
7-
},
8-
"error-communication": {
9-
"summary": "Communicate issues or restrictions through error and alert states."
10-
},
11-
"helpers": {
12-
"summary": "Provide users with utilities that enhance usability and provide additional guidance or information within the UI."
13-
},
14-
"status-and-state-indicators": {
15-
"summary": "Inform users of system conditions or processes through visualizations of entity states, statuses, and loading indicators."
16-
}
17-
}
2+
"ansible": {
3+
"summary": "Displays the Ansible project logo, with a support status style."
4+
},
5+
"bulk-select": {
6+
"summary": "Enables users to select data records in batches."
7+
},
8+
"close-button": {
9+
"summary": "Provides a way for users to exit a modal, dialogue, or similar action."
10+
},
11+
"column-management-modal": {
12+
"summary": "A modal that allows users to manage the display of table columns."
13+
},
14+
"error-boundary": {
15+
"summary": "Displays an application error boundary."
16+
},
17+
"error-state": {
18+
"summary": "Displays an error state message to users."
19+
},
20+
"external-link-button": {
21+
"summary": "A button that opens links in an external tab."
22+
},
23+
"field-builder": {
24+
"summary": "Builds dynamic form fields with customizable fields."
25+
},
26+
"list-manager": {
27+
"summary": "Allows users to manage and reorder lists."
28+
},
29+
"log-snippet": {
30+
"summary": "Displays a log snippet or code along with a message."
31+
},
32+
"maintenance": {
33+
"summary": "A maintenance state message."
34+
},
35+
"missing-page": {
36+
"summary": "An error message with a return to homepage button."
37+
},
38+
"multi-content-card": {
39+
"summary": "A single layout that contains multiple cards."
40+
},
41+
"page-header": {
42+
"summary": "A page header with a title, subtitle and other optional content."
43+
},
44+
"responsive-actions": {
45+
"summary": "Displays actions in a responsive layout."
46+
},
47+
"service-card": {
48+
"summary": "A service card with an icon, title, description, and an optional customized footer."
49+
},
50+
"severity": {
51+
"summary": "An icon with an optional label that corresponds to a severity level."
52+
},
53+
"shortcut-grid": {
54+
"summary": "A grid of keyboard shortcuts with their description."
55+
},
56+
"skeleton-table": {
57+
"summary": "Placeholder skeletons to use in a table as its contents load."
58+
},
59+
"stale-data-warning": {
60+
"summary": "A warning status to use when an object is stale and planned for removal."
61+
},
62+
"status": {
63+
"summary": "An icon and text pair that conveys different statuses."
64+
},
65+
"tag-count": {
66+
"summary": "A tag icon with a number that represents a count value."
67+
},
68+
"unauthorized-access": {
69+
"summary": "An error screen with a no access permissions message."
70+
},
71+
"unavailable-content": {
72+
"summary": "A temporarily unavailable message."
73+
},
74+
"warning-modal": {
75+
"summary": "A modal that asks users to confirm or cancel a risky action."
76+
}
77+
}

0 commit comments

Comments
 (0)