Apply suggestions from code review

Co-authored-by: Jenny <32821331+jenny-s51@users.noreply.github.com>

README.md

@@ -2,7 +2,7 @@
 
 This package provides the resources necessary to use PatternFly Topology, an open source utility built off of [@patternfly/react-core](https://www.npmjs.com/package/@patternfly/react-core) that you can use to create a visual representation of all the applications within your project, their build status, and the components and services associated with them.
 
-Topology components are based on [PatternFly 4][patternfly-4] Based from https://github.com/patternfly/patternfly-react version 4.91.40
+Topology is based on PatternFly 5 components from https://github.com/patternfly/patternfly-react.
 
 Documentation for Topology and its features is available on [the PatternFly website.](www.patternfly.org/topology/about-topology)
 
@@ -18,6 +18,7 @@ Documentation for Topology and its features is available on [the PatternFly webs
 To use Topology, you will need to have both [Node Active LTS](https://github.com/nodejs/Release#release-schedule) and [Yarn](https://yarnpkg.com/) installed.
 
 1. Install and develop with the most up-to-date version of Node Active LTS. For example, to develop with Node 8, you would use the following commands:
+
     ```
     nvm install 8
     nvm use 8
@@ -28,11 +29,13 @@ To use Topology, you will need to have both [Node Active LTS](https://github.com
 
 Once you have all of the prequisites, you can install the Topology package with Yarn or npm:
 
-1. Using Yarn
+1. Using Yarn:
+
     ```
     yarn add @patternfly/react-topology
     ```
-1. Using npm
+1. Using npm:
+
     ```
     npm install @patternfly/react-topology --save
     ```

packages/module/patternfly-docs/content/examples/AboutTopology.md

@@ -29,7 +29,7 @@ import './topology-example.css';
 
 PatternFly's **Topology** is an open source utility built off of [@patternfly/react-core](https://www.npmjs.com/package/@patternfly/react-core) that you can use to create a visual representation of all the applications within your project, their build status, and the components and services associated with them. Creating these visuals can help document and communicate the intricacies of the processes behind your product.
 
-To create a Topology view for your product, you can create a simple foundation of nodes, which represent your data points, and connecting edges, which represent the relationships between nodes. Beyond this basis, you can continue to customize and enhance your Topology view to fit the specific needs of your product.
+To create a Topology view for your product, you can create a simple layout of nodes, which represents your data points, and connecting edges, which represent the relationships between nodes. Beyond this basis, you can continue to customize and enhance your Topology view to fit the specific needs of your product.
 
 ## Prerequisites
 

packages/module/patternfly-docs/content/examples/TopologyAnchors.md

@@ -28,7 +28,7 @@ import './topology-example.css';
 
 **Note:** Topology lives in its own package at [`@patternfly/react-topology`](https://www.npmjs.com/package/@patternfly/react-topology).
 
-An **anchor** is the point within a node where edges connect.
+An **anchor** is the point at which an edge connects to a node.
 
 By default, nodes use a `CenterAnchor`, which refers to the center of the bounds of the node. You can use different anchors for different node shapes.
 
@@ -42,7 +42,7 @@ You can specify the SVG element that determines edge locations by using the prov
 - **`useAnchor`:** Allows you to specify your own custom anchor or provide a function that returns a specific anchor.
   - This is useful for adjusting the anchor based on the node being displayed.
 
-These hooks accept the following parameters, allowing you to customize when to use the anchor:
+These hooks accept the following parameters, allowing you to customize the anchor:
 
 - **`points` (for `usePolygonAnchor` only):** The points for the polygon.
 - **`AnchorEnd`:** Use for start, end, or both.

packages/module/patternfly-docs/content/examples/TopologyContextMenu.md

@@ -28,18 +28,17 @@ import './topology-example.css';
 
 **Note:** Topology lives in its own package at [`@patternfly/react-topology`](https://www.npmjs.com/package/@patternfly/react-topology).
 
-A **context menu** displays a list of actions or links related to a graph element. Nodes, edges, and the graph itself can have context menus, which are shown when you right-click on a graph element. Selecting a menu item will trigger a process or navigate to a new location.  
+A **context menu** displays a list of actions or links related to a graph element. Nodes, edges, and the graph itself can have context menus, which are shown when you select the menu toggle or right-click on a graph element. Selecting a menu item will trigger a process or navigate to a new location.  
 
 ## Using context menus
 
-To add a context menu to a Topology element, use the `withContextMenu` utility when the context menu component is returned in the `componentFactory`. For example, `withContextMenu(() => contextMenu)(MyCustomNode)`. The component should accept 2 parameters: 
+To add a context menu to a Topology element, you can simply extend `WithContextMenuProps` and use the `withContextMenu` utility when the context menu component is returned in the `componentFactory`. For example, `withContextMenu(() => contextMenu)(MyCustomNode)`. The component should accept 2 parameters: 
 
 - **`onContextMenu`:** The function to call upon node selection. Typically the outer container for the component would call `onContextMenu` when clicked.
 - **`contextMenuOpen`:** Indicates if the menu is currently open and applies styling to the respective component.
 
 If you are using `DefaultNode`, these properties can be passed along and will be handled appropriately.
 
-<!--(you can simply extend `WithContextMenuProps`).-->
 
 ## Example 
 

packages/module/patternfly-docs/content/examples/TopologyControlBar.md

@@ -35,7 +35,7 @@ import './topology-example.css';
 
 **Note:** Topology lives in its own package at [`@patternfly/react-topology`](https://www.npmjs.com/package/@patternfly/react-topology).
 
-A **control bar** adds visualization controls to a Topology view, so that users can more easily explore.
+A **control bar** adds visualization controls to a Topology view, so that users can more easily explore the graph layout.
 
 ## Using a control bar
 

packages/module/patternfly-docs/content/examples/TopologyCustomNodes.md

@@ -34,7 +34,7 @@ A **node** is an element within a Topology view that represents your data point,
 
 To create nodes with custom styling, you will need to create a custom node component, which your `customComponentFactory` will return.
 
-To do this, you will need a `<CustomNode>` component, with `CustomNodeProps` as the generic type and the destructured `element` as the parameter. The code in the following example shows how you can retrive data from `element` and apply it to the attributes of `<DefaultNode>`.
+To do this, you will need a `<CustomNode>` component, with `CustomNodeProps` as the generic type and the destructured `element` as the parameter. The code in the following example shows how you can retrieve data from `element` and apply it to the attributes of `<DefaultNode>`.
 
 Within each node in your `NODES` array, you can set `data` to include additional custom attributes.
 

packages/module/patternfly-docs/content/examples/TopologyDragDropDemo.md

@@ -41,7 +41,7 @@ import './topology-example.css';
 
 ## Drag and drop
 
-To add drag and drop functionality to your Topology view, add the following in your `<ComponentFactory>`:
+To add drag and drop functionality to your Topology view, add the following in your `ComponentFactory`:
 
 - Nodes can be dragged about the canvas by using the `useDragNode` hook, or by wrapping the `<Node>` component with `withDragNode`.
 

packages/module/patternfly-docs/content/examples/TopologyLayouts.md

@@ -54,7 +54,7 @@ There are many algorithms available for positioning nodes, based on factors like
 - **Cola:** Built on top of the WebCola layout provided by [tgdwyer/WebCola](://github.com/tgdwyer/WebCola). 
   - This layout uses `force simulation` by default, but can be turned off by setting the options `layoutOnDrag` flag to "false".
 - **ColaGroups:** Uses the cola layout recursively on each group, so that the group's children locations are set before the group's location is set relative to other groups or nodes at its level.
-- **Grid:** Orders nodes in a gri, making the grid as `square` as possible.
+- **Grid:** Orders nodes in a grid, making the grid as `square` as possible.
   - This layout works well to distribute nodes without taking edges into consideration.
 - **Concentric:** Places nodes in a circular pattern.
   - This layout has better results focused on high connectivity.

packages/module/patternfly-docs/content/examples/TopologyPanZoom.md

@@ -32,7 +32,7 @@ import './topology-example.css';
 
 ## Using pan and zoom
 
-To allow users to pan and zoom in a Topology view, use the `withPanZoom` utility when you return the graph component in the `<ComponentFactory>`
+To allow users to pan and zoom in a Topology view, use the `withPanZoom` utility when you return the graph component in the `ComponentFactory`
   - For example: `withPanZoom(GraphComponent)`
 
 The component should accept a `panZoomRef` property, which should be the ref on the surface element for the group. This is the element that will accept the drag or mouse-wheel events.

packages/module/patternfly-docs/content/examples/TopologySelectable.md

@@ -32,7 +32,7 @@ import './topology-example.css';
 
 ## Using selection
 
-To allow nodes and edges to be selectable, use the `withSelection` utility when you return the node/edge component in the `<ComponentFactory>`. 
+To allow nodes and edges to be selectable, use the `withSelection` utility when you return the node/edge component in the `ComponentFactory`. 
   - For example: `withSelection()(MyCustomNode)`
 
 The component should accept 2 parameters, `onSelect` and `selected` (you can simply extend `WithSelectionProps`).

packages/module/patternfly-docs/content/examples/TopologyToolbar.md

@@ -49,7 +49,7 @@ To add a toolbar to a Topology view, wrap your `VisualizationProvider` with the
 
 **Note**: You can set the "state" on the controller to track values such as the `viewOptions`.
 
-`<GraphElement>` components can retrieve state from the controller via:
+`GraphElement` components can retrieve state from the controller via:
 `element.getController().getState<ControllerState>();`
 and react to that state accordingly.