Merge pull request #43 from edonehoo/iss9

docs(extensions): Adds documentation to each component group extension.

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

@@ -15,44 +15,57 @@ propComponents: ['Battery']
 
 import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery';
 
+The **battery** component generates a 'battery' which corresponds to a level 1-4. Each level corresponds with a severity level and respective color:
 
-This is the battery component that generates a 'battery' which corresponds to a level 1-4.
-- 1 - low, green (best case scenario)
-- 2 - medium, yellow
-- 3 - high, orange
-- 4 - critical, red (worst case scenario)
+| Severity level | Meaning | Style | 
+| --- | --- | --- | 
+| Level 1 | Low severity (best case scenario) | 1 green bar | "1", "low" |
+| Level 2 | Medium severity |  2 yellow bars | 
+| Level 3 | High severity | 3 orange bars | 
+| Level 4 | Critical severity (worst case scenario) | 4 red bars | 
 
-Also accepts a label which can be made invisible.
+To specify the severity of the battery's risk level, you can pass a predefined number or text value into the `severity` property that corresponds to the appropriate severity level.
 
+To add an optional label to a battery, add the `label` property to the `<Battery>` component.
 
-## Component usage
+## Examples
+
+### Default variant
+
+The default style of a battery (4 black lines) appears when any value besides "1", "2", "3", or "4" is passed to `severity`. 
+
+```js file="./BatteryDefaultExample.tsx"
+
+```
 
 ### Low severity
 
+To style a battery as low severity, pass "1", "info", or "low" to `severity`.
+
 ```js file="./BatteryLowExample.tsx"
 
 ```
 
 ### Medium severity
 
+To style a battery as medium severity, pass "2", "medium", or "warn" to `severity`.
+
 ```js file="./BatteryMediumExample.tsx"
 
 ```
 
 ### High severity
 
+To style a battery as high severity, pass "3", "high", or "error" to `severity`.
+
 ```js file="./BatteryHighExample.tsx"
 
 ```
 
 ### Critical severity
 
-```js file="./BatteryCriticalExample.tsx"
+To style a battery as critical severity, pass "4" or "critical" to `severity`.
 
-```
-
-### Default variant
-
-```js file="./BatteryDefaultExample.tsx"
+```js file="./BatteryCriticalExample.tsx"
 
-```
+```

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

@@ -38,45 +38,65 @@ import HorizontalNav from '@patternfly/react-component-groups/dist/dynamic/Horiz
 import DetailsPage from '@patternfly/react-component-groups/dist/dynamic/DetailsPage';
 import DetailsPageHeader from'@patternfly/react-component-groups/dist/dynamic/DetailsPageHeader';
 
-## Components Usage
+A **details page** component is used to provide users with details on a resource that they access.
 
-### DetailsPage Component
+## Examples
+
+### Basic details page
+
+A basic details page typically contains elements like `breadcrumbs`, a `pageHeading`, actions, and `tabs`.
+
+Details page content should be customized within the appropriate tab to fit your use case.
 
 ```js file="./DetailsPageExample.tsx"
 
 ```
 
-### DetailsPageHeader Component
+### Details page header
+
+The `pageHeader` for a details page contains the `breadcrumbs`, `pageHeading`, and any actions.
 
 ```js file="./DetailsPageHeaderExample.tsx"
 
 ```
 
-### Breadcrumbs Component
+### Details page breadcrumbs 
+
+You can specify the `children` of the details page `breadcrumbs` and the pages that they point to.
 
 ```js file="./BreadcrumbsExample.tsx"
 
 ```
 
-### ActionButtons Component
+### Details page action buttons 
+
+The action buttons in a details page header can be customized to be any [button](/components/button) variant.
+
+Include a [`tooltip`](/components/tooltip/) as appropriate.
 
 ```js file="./ActionButtonsExample.tsx"
 
 ```
 
-### ActionMenu Component
+### Details page action menu 
+
+The details page action menu contains multiple actions that users can take.
 
 ```js file="./ActionMenuExample.tsx"
 
 ```
 
-### ActionMenu with groupedActions Component
+### Details page action menu with grouped actions 
+
+To group related actions in a details page action menu, use the `groupedActions` property.
 
 ```js file="./ActionMenuGroupedExample.tsx"
 
 ```
 
-### HorizonalNav Component
+### Details page horizontal navigation
+
+A details page places `tabs` in a `<HorizontalNav>` component.
 
 ```js file="./HorizontalNavExample.tsx"
 

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

@@ -5,7 +5,7 @@ section: extensions
 subsection: Component groups
 # Sidenav secondary level section
 # should be the same for all markdown files
-id: ErrorBoundary
+id: Error boundary
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: react
 # If you use typescript, the name of the interface to display props for
@@ -15,17 +15,22 @@ propComponents: ['ErrorBoundary']
 
 import ErrorBoundary from "@patternfly/react-component-groups/dist/dynamic/ErrorBoundary";
 
-## Component usage
+The **error boundary** component repurposes the `<ErrorState>` component for an application error boundary.
 
-This component reuses the ErrorState component for an app error boundary.
+## Examples 
 
-### ErrorBoundary component
+### Basic error boundary 
+
+A basic error boundary has a `headerTitle`, an `errorTitle`, and lists error details when a user takes action (like selecting a link).
 
 ```js file="./ErrorBoundaryExample.tsx"
 
 ```
 
-### ErrorBoundary component without error
+### Error boundary without error
+
+If you do not wish to share error details, you can remove `throw new Error("");` and share other content instead.
+
 
 ```js file="./ErrorBoundaryNoExample.tsx"
 

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

@@ -15,11 +15,13 @@ propComponents: ['ErrorState']
 
 import ErrorState from "@patternfly/react-component-groups/dist/dynamic/ErrorState";
 
-## Component usage
+The **error state** component repurposes the `EmptyState` component to display an error to users.
 
-This component reuses the EmptyState component. Also most of its props is accepted.
+## Examples
 
-### ErrorState component
+### Basic error state
+
+To provide users with error details, a basic error state should contain an appropriate and informative `errorTitle` and `errorDescription`. 
 
 ```js file="./ErrorStateExample.tsx"
 

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

@@ -1,16 +1,22 @@
 ---
 section: extensions
 subsection: Component groups
-id: NotAuthorized
+id: Not authorized
 source: react
 propComponents: ['NotAuthorized']
 ---
 
 import NotAuthorized from "@patternfly/react-component-groups/dist/dynamic/NotAuthorized";
 
-## Component usage
+A **not authorized** component displays an error screen to users when they attempt to view a page that they don't have permission to access.
 
-### NotAuthorized component
+## Examples
+
+### Basic not authorized
+
+A basic not authorized component displays a title, a description, and custom actions. 
+
+You can customize the not authorized component to fit your use case by specifying the `serviceName` to appear in the title, the `description` to provide appropriate context for the error, and the `actions` that a user can take instead.
 
 ```js file="./NotAuthorizedExample.tsx"