Merge and Update Remove and Delete patterns (carbon-design-system#356)

* docs: Merge and Update remove and delete patterns

* Update index.mdx

* Apply suggestions from code review

Co-Authored-By: VICTORIA <victoria@uk.ibm.com>

* Combined Success and Requested modal sections

- [x] Combined the sections for the success modal and requested modal into one.
- [x] Removed the positioning section

* Apply suggestions from code review

Got rid of all those "" marks!

Co-Authored-By: VICTORIA <victoria@uk.ibm.com>

* Apply suggestions from code review

Put description back in on Alison's request. Thanks for your help Alison!

Co-Authored-By: Alison Joseph <alisonejoseph@Gmail.com>

* Removed remove from the nav

* updated nav item for delete

* Renamed as Remove Pattern in nav-items.yaml

* Apply suggestions from code review

Co-Authored-By: Connor <connor@ibm.com>

* Docs: renamed page to remove

* Src: Fixed Anchor links after change of subheadings

src/data/nav-items.yaml

@@ -136,8 +136,8 @@
       path: /experimental/create-flows
     - title: Dashboard widgets
       path: /experimental/dashboard-widgets/usage
-    - title: Delete pattern
-      path: /experimental/delete-pattern
+    - title: Remove pattern
+      path: /experimental/remove-pattern
     - title: Export pattern
       path: /experimental/export-pattern
     - title: Generate an API key
@@ -150,8 +150,6 @@
       path: /experimental/navigation-pattern
     - title: Order summary template
       path: /experimental/order-summary-template/usage
-    - title: Remove pattern
-      path: /experimental/remove-pattern
 - title: Data visualization
   pages:
     - title: Get started

src/pages/experimental/remove-pattern/index.mdx

@@ -1,12 +1,9 @@
 ---
 title: Remove pattern
+description: Removing is an action that moves information from one location to another. Removal can be both destructive and non-destructive. Deletion is the most common type of removal and is destructive.
 ---
 
-<PageDescription>
-
-Removal is a non-destructive action. A user can remove an asset from a list or item without destroying it.
-
-</PageDescription>
+### _Removing_ is an action that moves information from one location to another. Removal can be both destructive and non-destructive. _Deletion_ is the most common type of removal and is destructive.
 
 #### Status:
 
@@ -16,37 +13,167 @@ Removal is a non-destructive action. A user can remove an asset from a list or i
 
 [Vikki Paterson](https://github.com/vikkipaterson)
 
-![Example of a removal using a modal in context](/images/modal-in-context.png)
+<AnchorLinks>
+
+<AnchorLink>High-impact deletion</AnchorLink>
+<AnchorLink>Medium-impact deletion</AnchorLink>
+<AnchorLink>Low-impact deletion</AnchorLink>
+<AnchorLink>Medium-impact removal</AnchorLink>
+<AnchorLink>Low-impact removal</AnchorLink>
+<AnchorLink>Anatomy</AnchorLink>
+
+</AnchorLinks>
+
+### Delete / Remove variations
 
-<Caption>Example of a remove pattern using a modal</Caption>
+| Action | Variation       | Description                                                                                                               |
+| ------ | --------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| Delete | _High impact_   | Action can't be reversed and causes significant loss. The user types the resource name into the modal to confim deletion. |
+|        | _Medium impact_ | Action can't be reversed and causes some loss. The user sees a modal and confirms the consequence of deletion.            |
+|        | _Low impact_    | Action is reversible or very low impact. A confirmation modal may not be required.                                        |
+| Remove | _Medium impact_ | Action can't be reversed and causes some loss. The user sees a modal and confirms the consequence of removal.             |
+|        | _Low impact_    | Action is reversible or very low impact. A confirmation modal may not be required.                                        |
 
-## Low impact
+## High-impact deletion
 
-User confirmation is not required for low-impact removals because the asset is not destroyed.
+A high-impact deletion cannot be reversed. The action would result in a significant loss for a user if done accidentally.
 
-## High impact
+When deleting is high-impact, a confirmation dialog should be presented to the user which displays:
 
-Require user confirmation for high impact removals. Communicate the consequences of the removal, and let the user know if the removal is permanent.
+- The name of the resource
+- Consequences of the deletion
+- This action cannot be undone.
+- An editable text field for the name of the resource to be entered
 
-Optionally, when the remove button is selected, change it to ‘Removing...’.
+For high-impact scenarios, a user should confirm the action by manually entering the name of the resource. The 'Delete' button is enabled when the text entered perfectly matches the resource name.
+
+Optionally a [Done modal](#done-modal), [Requested modal](#requested-modal) or [Notification](#notification) can be used to confirm the action (or a combination of one modal and a notification).
 
 <Row>
 <Column colLg={8}>
 
-![Example of a high-impact remove modal](images/first-view.png)
+![The user enters the resource name in order to confirm deletion.](images/2.png)
 
-<Caption>Example of a high-impact remove modal</Caption>
+<Caption>
+  {' '}
+  The user needs to enter the resource name in order to confirm deletion.
+</Caption>
+
+![When the resource name is entered the Delete button is enabled.](images/3.png)
+
+<Caption>
+  {' '}
+  When the resource name is entered the Delete button is enabled.
+</Caption>
 
 </Column>
 </Row>
 
+## Medium-impact deletion
+
+A medium-impact deletion is one that cannot be reversed, but would not be catastrophic if done accidentally. When deleting is medium-impact, a confirmation dialog should be presented to the user which displays:
+
+- The name of the resource
+- Consequences of the deletion
+- The action cannot be undone.
+
+Optionally an [Optional passive modal](#optional-passive-modal) or [Notification](#notification) can be used to confirm the action (or a combination of one modal and a notification).
+
+<Row>
+<Column colLg={8}>
+
+![Example of a medium impact delete modal](images/6.png)
+
+<Caption>An example of a standard delete modal</Caption>
+
+</Column>
+</Row>
+
+## Low-impact deletion
+
+Requiring the user to confirm deletion is generally recommended. However, in low impact situations, or when an ‘undo’ option is available, user confirmation may not be required.
+
+<Row>
+<Column colLg={8}>
+
+![Example of delete options in context without warnings for low impact delete actions](images/LowImpactDelete.png)
+
+<Caption> Low impact delete options</Caption>
+</Column>
+</Row>
+
+## Medium-impact removal
+
+Removing has a medium impact when the action can't be reversed, and could have some impact if done accidentally.
+
+Text should tell the user the consequences of the removal and that the action cannot be undone.
+
+<Row>
+<Column colLg={8}>
+
+![Example of a medium impact remove modal](images/first-view.png)
+
+<Caption>
+  {' '}
+  Removal modals should include consequences of removal, and "This action cannot
+  be undone" statement.
+</Caption>
+
+</Column>
+</Row>
+
+## Low-impact removal
+
+As removing does not destroy an asset, typically user confirmation is not required.
+
+<Row>
+<Column colLg={8}>
+
+![Example of remove options in context without warnings for low impact remove actions.](images/LowImpactRemove.png)
+
+<Caption> Example low impact remove options</Caption>
+
+</Column>
+</Row>
+
+## Anatomy
+
+### Optional passive modal
+
+In high or medium impact flows, an optional passive modal can be used to signify the state at the end of a remove or delete action.
+Some deletion or removal actions don't happen immediately, in these situations it's recommended to inform the user through the optional passive modal.
+
+<Row>
+<Column colLg={8}>
+
+![Example of a delete successful modal](images/Requested.png)
+
+<Caption>
+  {' '}
+  Use a success modal to show that a delete request has been made / is in
+  progress.
+</Caption>
+
+![Example of a remove successful modal](images/DoneMedium.png)
+
+<Caption> Use a success modal to show that removing is complete.</Caption>
+
+</Column>
+</Row>
+
+### Notification
+
+An optional notification can be used to confirm a delete or remove action has completed. This is useful when the action takes more than a few moments.
+
 <Row>
 <Column colLg={8}>
 
-![Example of a high-impact remove modal in its 'removing' state](images/second-view.png)
+![Example of a successful delete notification](images/7_updated.png)
 
 <Caption>
-  Example of a high-impact remove modal following user confirmation
+  {' '}
+  An optional notification can be used to confirm the delete or remove action
+  with medium or high impact actions.
 </Caption>
 
 </Column>