[Docs] Update progress indicator style tab

src/pages/components/progress-indicator/style.mdx

@@ -7,22 +7,36 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+<PageDescription>
+
+The following page documents visual specifications such as color, typography,
+structure, and size.
+
+</PageDescription>
+
+<AnchorLinks>
+
+<AnchorLink>Color</AnchorLink> <AnchorLink>Typography</AnchorLink>
+<AnchorLink>Structure</AnchorLink>
+<AnchorLink>Feedback</AnchorLink>
+
+</AnchorLinks>
+
 ## Color
 
-All steps that have been completed are indicated by an outlined circle with a
-checkmark. The current step the user is on is indicated by a filled circle.
-Steps the user has not encountered yet, or future steps, are indicated by an
-outlined circle.
-
-| Element              | Property         | Color token           |
-| -------------------- | ---------------- | --------------------- |
-| Current icon         | fill             | `$interactive`        |
-| Complete icon        | fill             | `$interactive`        |
-| Incomplete icon      | fill             | `$icon-primary`       |
-| Current step line    | background-color | `$border-interactive` |
-| Incomplete step line | background-color | `$border-subtle` \*   |
-| Label                | text color       | `$text-primary`       |
-| Optional label       | text color       | `$text-secondary`     |
+A progress indicator step may be complete, current, or not started. The
+following table describes the color tokens used for each of these
+[states](/components/progress-indicator/usage#states).
+
+| Element            | Property         | Color token           |
+| ------------------ | ---------------- | --------------------- |
+| Complete icon      | fill             | `$interactive`        |
+| Current icon       | fill             | `$interactive`        |
+| Not started icon   | fill             | `$icon-primary`       |
+| Active step line   | background-color | `$border-interactive` |
+| Inactive step line | background-color | `$border-subtle` \*   |
+| Label              | text color       | `$text-primary`       |
+| Helper text        | text color       | `$text-secondary`     |
 
 <Caption>
   * Denotes a contextual color token that will change values based on the layer
@@ -38,23 +52,22 @@ outlined circle.
 </Row>
 
 <Caption>
-  Examples of completed, current, and incomplete steps for progress indicator
+  Examples of completed, current, and future steps for progress indicator
 </Caption>
 
 ### Interactive states
 
-| Element       | Property         | Color token           |
-| ------------- | ---------------- | --------------------- |
-| Step:focus    | border           | `$focus`              |
-| Label:hover   | text color       | `$link-primary-hover` |
-| Icon:error    | fill             | `$support-error`      |
-| Icon:disabled | fill             | `$icon-disabled`      |
-| Line:disabled | background-color | `$border-disabled`    |
+| Element        | Property   | Color token           |
+| -------------- | ---------- | --------------------- |
+| Step: focus    | border     | `$focus`              |
+| Label: hover   | text color | `$link-primary-hover` |
+| Icon: error    | fill       | `$support-error`      |
+| Icon: disabled | fill       | `$icon-disabled`      |
 
 <Row>
 <Column colLg={8}>
 
-![Examples of current, completed, and future steps for progress indicator](images/progress-indicator-style-2.png)
+![Examples of focus, hover, error, and disabled states for progress indicator](images/progress-indicator-style-2.png)
 
 </Column>
 </Row>
@@ -68,10 +81,10 @@ outlined circle.
 Labels should be one to two words only, with a limit of 16 characters total per
 label. All labels should be set in sentence case.
 
-| Element        | Font-size (px/rem) | Font-weight   | Type token         |
-| -------------- | ------------------ | ------------- | ------------------ |
-| Label          | 14 / 0.875         | Regular / 400 | `$body-compact-01` |
-| Optional label | 12 / 0.75          | Regular / 400 | `$label-01`        |
+| Element     | Font-size (px/rem) | Font-weight   | Type token         |
+| ----------- | ------------------ | ------------- | ------------------ |
+| Label       | 14 / 0.875         | Regular / 400 | `$body-compact-01` |
+| Helper text | 12 / 0.75          | Regular / 400 | `$label-01`        |
 
 ## Structure
 
@@ -93,3 +106,11 @@ All icons can be found in the [icons](/guidelines/icons/library) library.
 <Caption>
   Structure and spacing measurements for progress indicator | px / rem
 </Caption>
+
+## Feedback
+
+<!--Include a request for feedback here.-->
+
+Help us improve this component by providing feedback, asking questions, and
+leaving any other comments on
+[GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).

src/pages/components/progress-indicator/usage.mdx

@@ -90,15 +90,15 @@ number of steps, and overall progress in completing a task.
 </Column>
 </Row>
 
-1. **Status indicator:** Communicates if a step is completed, incomplete, not
-   started, or has an error. See the
+1. **Status indicator:** Communicates if a step is completed, current, not
+   started, disabled or has an error. See the
    [status indicator pattern](/patterns/status-indicator-pattern/) for guidance.
 2. **Active step line:** Indicates completed steps and the step the user is
    currently on.
 3. **Label:** Communicates what the user will accomplish in each step. Numbering
    each step also makes the progression more obvious.
-4. **Inactive step line:** Indicates incomplete steps as well as steps that are
-   in an error, disabled, or skeleton state.
+4. **Inactive step line:** Indicates steps that are not started as well as steps
+   that are in an error, disabled, or skeleton state.
 5. **Helper text:** Labels a step as optional or in an error state.
 
 ### Alignment