CONSOLE-3305: add DetailsPage and associated components

packages/module/package.json

@@ -13,8 +13,8 @@
     "clean": "rimraf dist",
     "docs:develop": "pf-docs-framework start",
     "docs:build": "pf-docs-framework build all --output public",
-    "docs:serve": "pf-docs-framework serve public --port 5000",
-    "docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5000",
+    "docs:serve": "pf-docs-framework serve public --port 5001",
+    "docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5001",
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config",
     "serve:a11y": "serve coverage"
   },
@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@patternfly/react-core": "^4.250.1",
+    "@patternfly/react-icons": "^4.93.6",
     "react-jss": "^10.9.2"
   },
   "peerDependencies": {
@@ -47,10 +48,13 @@
     "@redhat-cloud-services/frontend-components-utilities": "^3.2.25",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-router-dom": "^5.3.3",
     "classnames": "^2.2.5",
     "copyfiles": "^2.4.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
     "rimraf": "^2.6.2",
     "typescript": "^4.9.5"
   }

packages/module/patternfly-a11y.config.js

@@ -14,7 +14,7 @@ const urls = Object.keys(fullscreenRoutes)
   .reduce((result, item) => (result.includes(item) ? result : [ ...result, item ]), []);
 
 module.exports = {
-  prefix: 'http://localhost:5000',
+  prefix: 'http://localhost:5001',
   waitFor,
   crawl: false,
   urls: [ ...urls ],

packages/module/patternfly-docs/content/extensions/extended-components/examples/ActionButtonsExample.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ActionButtons } from '@patternfly/react-component-groups';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <ActionButtons
+    actionButtons={[
+      {
+        children: 'Primary action',
+        // eslint-disable-next-line no-console
+        onClick: () => {console.log('Primary action clicked')},
+        tooltip: 'Click me!',
+      },
+      {
+        children: 'Secondary action',
+        // eslint-disable-next-line no-console
+        onClick:  () => {console.log('Secondary action clicked')},
+        variant: 'secondary',
+      },
+    ]}
+  />
+);

packages/module/patternfly-docs/content/extensions/extended-components/examples/ActionMenuExample.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ActionMenu } from '@patternfly/react-component-groups';
+
+export const BasicExample: React.FC = () => (
+  <ActionMenu
+    actions={[
+      {
+        children: 'Edit resource',
+        itemID: 'action-menu-example-1',
+        cta: {
+          // eslint-disable-next-line no-console
+          callback: () => console.log('Edit resource clicked'),
+        },
+      },
+      {
+        children: 'Delete resource',
+        itemID: 'action-menu-example-2',
+        cta: {
+          // eslint-disable-next-line no-console
+          callback: () => console.log('Delete resource clicked'),
+        },
+        isDisabled: true,
+      },
+    ]}
+    id='action-menu-example'
+  />
+);

packages/module/patternfly-docs/content/extensions/extended-components/examples/ActionMenuGroupedExample.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ActionMenu } from '@patternfly/react-component-groups';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <ActionMenu
+    groupedActions={[
+      {
+        groupId: 'group1',
+        groupActions: [
+          {
+            children: 'Edit resource',
+            itemID: 'action-menu-grouped-group-1-example-1',
+            cta: {
+              // eslint-disable-next-line no-console
+              callback: () => console.log('Edit resource clicked'),
+            },
+          },
+          {
+            children: 'Delete resource',
+            itemID: 'action-menu-grouped-group-1-example-2',
+            cta: {
+              // eslint-disable-next-line no-console
+              callback: () => console.log('Delete resource clicked'),
+            },
+            isDisabled: true,
+          },
+        ],
+      },
+      {
+        groupId: 'group2',
+        label: 'Links',
+        groupActions: [
+          {
+            children: 'GitHub',
+            itemID: 'action-menu-grouped-group-2-example-1',
+            cta: {
+              href: 'https://github.com/',
+              external: true,
+            },
+          },
+          {
+            children: 'Link',
+            itemID: 'action-menu-grouped-group-2-example-2',
+            cta: {
+              href: '/#',
+            },
+            description: 'Description of link',
+          },
+        ],
+      },
+    ]}
+    displayLabelBeforeIcon
+    id='action-menu-grouped-example'
+  />
+);

packages/module/patternfly-docs/content/extensions/extended-components/examples/BreadcrumbsExample.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Breadcrumbs } from '@patternfly/react-component-groups';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <Router>
+    <Breadcrumbs
+      breadcrumbs={[
+        { children: 'Resources', to: '/resources' },
+        { children: 'Resource details', to: '/resources/example-resource' },
+      ]}
+    />
+  </Router>
+);