Add gallery to the about page (#366)

* fix(nav): Fix ResponsiveActions displaying

* fix(gallery): Add gallery to the about page

* fix(gallery): Adress review notes

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

Co-authored-by: Erin Donehoo <[email protected]>

---------

Co-authored-by: Erin Donehoo <[email protected]>

Author: fhlavac

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

@@ -4,16 +4,29 @@ id: About component groups
 sortValue: 1
 sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/about-component-groups.md
 --- 
+import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery';
+import galleryData from './gallery-data.json';
 
 Component groups lives in its own package [`@patternfly/react-component-groups`](https://www.npmjs.com/package/@patternfly/react-component-groups) 
 
+**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`.
+
 # Component groups
 
-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. 
+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.
+
+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.
 
-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 unit test coverage, and ensure that CSS overrides all correctly reference the PatternFly CSS API.
+There are a few different functional categories of component groups:
 
-**Note:** This extension replaces [`RedHatInsights/frontend-components`](https://github.com/RedHatInsights/frontend-components). If you previoulsy 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`.
+<SectionGallery
+  section="Component groups"
+  galleryItemsData={galleryData}
+  placeholderText="Search component groups by name"
+  includeSubsections={true}
+  hasGridText={true}
+  isFullWidth={false}
+/>
 
 ## Contribution guidelines
 
@@ -25,4 +38,4 @@ Specific contribution guidelines and instructions are outlined in [the component
 
 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.
 
-If you notice a bug or have a suggestion for a new component group, feel free to file 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 issue. 
+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. 

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

@@ -1,8 +1,8 @@
 ---
 # Sidenav top-level section
 # should be the same for all markdown files
-section: extensions
-subsection: Component groups
+section: Component groups
+subsection: Controls
 # Sidenav secondary level section
 # should be the same for all markdown files
 id: Responsive actions

packages/module/patternfly-docs/content/extensions/component-groups/gallery-data.json

@@ -0,0 +1,17 @@
+{
+    "content-containers": {
+      "summary": "Organize and display information in structured or flexible containers."
+    }, 
+    "controls": {
+      "summary": "Enable more effective navigation and selection by providing users with options for interaction and input."
+    },
+    "error-communication": {
+      "summary": "Communicate issues or restrictions through error and alert states."
+    },
+    "helpers": {
+      "summary": "Provide users with utilities that enhance usability and provide additional guidance or information within the UI."
+    },
+    "status-and-state-indicators": {
+      "summary": "Inform users of system conditions or processes through visualizations of entity states, statuses, and loading indicators."
+    }
+  }

yarn.lock

@@ -1760,9 +1760,9 @@
   version "5.0.0-prerelease.0"
   resolved "file:packages/module"
   dependencies:
-    "@patternfly/react-core" "^6.0.0-alpha.101"
-    "@patternfly/react-icons" "^6.0.0-alpha.36"
-    "@patternfly/react-table" "^6.0.0-alpha.102"
+    "@patternfly/react-core" "^6.0.0-prerelease.21"
+    "@patternfly/react-icons" "^6.0.0-prerelease.7"
+    "@patternfly/react-table" "^6.0.0-prerelease.22"
     clsx "^2.1.1"
     react-jss "^10.10.0"