chore(docs): fix formatting on Progress Steps docs (#4101)

* chore(docs): fix formatting on Progress Steps docs

* chore: combine timeline comparison with ordered display list

* chore: reorder heading to match content order

* chore: add timeline anchor

* chore: update Timeline docs with same content

* chore: update List docs with same content

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: serifluous

packages/paste-website/src/pages/components/list/index.mdx

@@ -86,7 +86,7 @@ Lists are a number of connected list items that are printed consecutively, typic
 - Lists should align with the font-size, font-weight, and line-height of paragraphs, but are styled with bullets or numbers.
 - Lists can have similar children elements as paragraphs to provide emphasis on a certain word or phrase.
 
-### Ordered Display List vs Progress Steps
+### Progress Steps vs Ordered Display List vs Timeline
 
 **Progress Steps**
 
@@ -97,6 +97,10 @@ Lists are a number of connected list items that are printed consecutively, typic
 
 Ordered Display Lists structure tasks but don’t show progression or status through a multi-step task.
 
+**Timeline**
+
+- [Timeline](/components/timeline) displays the history or sequence of events, focusing on what has happened over time.
+- Use Timeline when user interaction is secondary, and progress does not depend on user actions since the process continues even without direct user input.
 ### Accessibility
 
 - `ListItem`s should always have an `OrderedList` or `UnorderedList` parent component.

packages/paste-website/src/pages/components/progress-steps/index.mdx

@@ -93,7 +93,7 @@ Each step can communicate one of these statuses:
 - **Error**: The user has interacted with this step but more action is required that will prevent completing the full task.
 - **Incomplete + Disabled**: This step is not yet reached by a user.
 
-### Ordered Display List vs Progress Steps
+### Progress Steps vs Ordered Display List vs Timeline
 
 **Progress Steps**
 
@@ -104,6 +104,11 @@ Each step can communicate one of these statuses:
 
 [Ordered Display Lists](/components/list#ordered-display-list) structure tasks but don’t show progression or status through a multi-step task.
 
+**Timeline**
+
+- [Timeline](/components/timeline) displays the history or sequence of events, focusing on what has happened over time.
+- Use Timeline when user interaction is secondary, and progress does not depend on user actions since the process continues even without direct user input.
+
 ### Accessibility
 
 - Give each step a concise label describing what the goal of that step is.
@@ -237,28 +242,6 @@ Each step within the Progress Steps component has a label which can be set to ad
   {i18nExample}
 </LivePreview>
 
-
-### Timeline vs. Progress Steps
-
-Use Progress Steps:
-
-<UnorderedList>
-  <ListItem>To guide users through a sequence of steps necessary to complete a task.</ListItem>
-  <ListItem>
-    When user interaction is required at certain points in a process and actions are necessary to complete a goal.
-  </ListItem>
-</UnorderedList>
-
-Use Timeline:
-
-<UnorderedList>
-  <ListItem>To display the history or sequence of events, focusing on what has happened over time.</ListItem>
-  <ListItem>
-    When user interaction is secondary, and progress does not depend on user actions, ensuring the process continues
-    even without direct user input.
-  </ListItem>
-</UnorderedList>
-
 ## Composition Notes
 
 - Each step must have a label. Keep the label concise with fewer than 5 words per label.

packages/paste-website/src/pages/components/timeline/index.mdx

@@ -107,26 +107,22 @@ Timelines can be used in different use cases, such as tracking milestones, monit
   </ListItem>
 </UnorderedList>
 
-### Timeline vs. Progress Steps
+### Progress Steps vs Ordered Display List vs Timeline
 
-Use Timeline:
+**Progress Steps**
 
-<UnorderedList>
-  <ListItem>To display the history or sequence of events, focusing on what has happened over time.</ListItem>
-  <ListItem>
-    When user interaction is secondary, and progress does not depend on user actions, ensuring the process continues
-    even without direct user input.
-  </ListItem>
-</UnorderedList>
+- [Progress Steps](/components/progress-steps) show users an outline of a complex multi-step task across multiple pages or apps.
+- Progress Steps convey progression and have interactive status states.
 
-Use Progress Steps:
+**Ordered Display List**
+
+[Ordered Display Lists](/components/list#ordered-display-list) structure tasks but don’t show progression or status through a multi-step task.
+
+**Timeline**
+
+- Timeline displays the history or sequence of events, focusing on what has happened over time.
+- Use Timeline when user interaction is secondary, and progress does not depend on user actions since the process continues even without direct user input.
 
-<UnorderedList>
-  <ListItem>To guide users through a sequence of steps necessary to complete a task.</ListItem>
-  <ListItem>
-    When user interaction is required at certain points in a process and actions are necessary to complete a goal.
-  </ListItem>
-</UnorderedList>
 
 ## Examples