feat(actions): Add actions docs

Author: fhlavac

packages/module/patternfly-docs/content/extensions/data-view/examples/Components/Components.md

@@ -16,7 +16,7 @@ sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/mod
 ---
 import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
 import { CubesIcon, FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
-import { BulkSelect, ErrorState } from '@patternfly/react-component-groups';
+import { BulkSelect, ErrorState, ResponsiveAction, ResponsiveActions } from '@patternfly/react-component-groups';
 import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
 import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
@@ -26,14 +26,25 @@ import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynami
 
 The **data view toolbar** component renders a default opinionated data view toolbar above or below the data section. 
 
-Data view toolbar can contain a `pagination`, `bulkSelect` or any other children content passed. The preffered way of passing children toolbar items is using the [toolbar item](/components/toolbar#toolbar-items) component.
+Data view toolbar can contain a `pagination`, `bulkSelect`, `actions` or other children content passed. The preffered way of passing children toolbar items is using the [toolbar item](/components/toolbar#toolbar-items) component.
 
 ### Basic toolbar example
 
 ```js file="./DataViewToolbarExample.tsx"
 
 ```
 
+# Toolbar actions
+Data view toolbar can display actions using the `actions` property accepting a React node. You can make use of a predefined [responsive actions](/extensions/component-groups/responsive-actions) component from the [component groups](/extensions/component-groups/about-component-groups) extension.
+
+### Actions configuration
+
+### Actions example
+
+```js file="./DataViewToolbarActionsExample.tsx"
+
+```
+
 ## Data view table
 
 The **data view table** component renders your columns and rows definition into a [table](/components/table) component. 

packages/module/patternfly-docs/content/extensions/data-view/examples/Components/DataViewToolbarActionsExample.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+import { BulkSelect, ResponsiveAction, ResponsiveActions } from '@patternfly/react-component-groups';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <DataViewToolbar 
+    bulkSelect={
+      <BulkSelect
+        selectedCount={0}
+        pageCount={5}
+        onSelect={() => null}
+      />  
+    }
+    actions={
+      <ResponsiveActions breakpoint="lg" ouiaId="example-actions">
+        <ResponsiveAction isPersistent variant="primary">Persistent</ResponsiveAction>
+        <ResponsiveAction isPinned variant="secondary">Pinned</ResponsiveAction>
+        <ResponsiveAction>Action three</ResponsiveAction>
+        <ResponsiveAction>Action four</ResponsiveAction>
+      </ResponsiveActions>
+    }
+    pagination={
+      <Pagination page={1} perPage={10} />
+    }
+  />
+)

packages/module/patternfly-docs/content/extensions/data-view/examples/Components/DataViewToolbarExample.tsx

@@ -6,15 +6,15 @@ import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewTo
 
 export const BasicExample: React.FunctionComponent = () => (
   <DataViewToolbar 
-    pagination={
-      <Pagination page={1} perPage={10} />
-    }
     bulkSelect={
       <BulkSelect
         selectedCount={0}
         pageCount={5}
         onSelect={() => null}
       />  
-    } 
+    }
+    pagination={
+      <Pagination page={1} perPage={10} />
+    }
   />
 )

packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md

@@ -62,7 +62,7 @@ This example uses the URL for persisting the pagination state.
 Allows to select data records inside the data view and show the selection state.
 
 ### Toolbar usage
-Data view toolbar can display a bulk selection component using the `bulkSelect` property accepting a React node. You can make use of a predefined [bulk select](/extensions/component-groups/bulk-select) from the [component groups](/extensions/component-groups/about-component-groups) extension.
+Data view toolbar can display a bulk selection component using the `bulkSelect` property accepting a React node. You can make use of a predefined [bulk select](/extensions/component-groups/bulk-select) component from the [component groups](/extensions/component-groups/about-component-groups) extension.
 
 ### Selection state
 
@@ -84,4 +84,3 @@ The `useDataViewSelection` hook manages the selection state of the data view.
 ```js file="./SelectionExample.tsx"
 
 ```
-