Progress bar docs

src/data/nav-items.yaml

@@ -140,6 +140,8 @@
       path: /components/overflow-menu/usage/
     - title: Pagination
       path: /components/pagination/usage/
+    - title: Progress bar
+      path: /components/progress-bar/usage/
     - title: Progress indicator
       path: /components/progress-indicator/usage/
     - title: Radio button

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

@@ -0,0 +1,105 @@
+---
+title: Progress bar
+description:
+  A progress bar provides feedback about the duration and progression of a
+  process.
+tabs: ['Usage', 'Style']
+---
+
+## Color
+
+| Element       | Property   | Color token           |
+| ------------- | ---------- | --------------------- |
+| Label         | Text color | `$text-primary`       |
+| Helper text   | Text color | `$text-helper`        |
+| Track         | Background | `$border-subtle`      |
+| Bar: active   | Background | `$border-interactive` |
+| Bar: success  | Background | `$support-success`    |
+| Icon: success | Fill       | `$support-success`    |
+| Bar: error    | Background | `$support-error`      |
+| Icon: error   | Fill       | `$support-error`      |
+
+<Row>
+<Column colLg={8}>
+
+![Progress bar status colors](images/progress-bar-style-1.png)
+
+<Caption>Status colors</Caption>
+
+</Column>
+</Row>
+
+<Row>
+<Column colLg={12}>
+
+![Progress bar status colors](images/progress-bar-style-2.png)
+
+<Caption>Progress bar colors for light themes</Caption>
+
+</Column>
+</Row>
+
+<Row>
+<Column colLg={12}>
+
+![Progress bar status colors](images/progress-bar-style-3.png)
+
+<Caption>Progress bar colors for dark themes</Caption>
+
+</Column>
+</Row>
+
+## Typography
+
+The width and height of a popover container can vary depending on the amount of
+content within it. We recommend to not exceed a popover width size of four
+columns.
+
+| Element     | Font-size (px/rem) | Font-weight | Type token        |
+| ----------- | ------------------ | ----------- | ----------------- |
+| Label       | 14px / 0.875rem    | Regular/400 | `$label-01`       |
+| Helper text | 12px / 0.75rem     | Regular/400 | `$helper-text-01` |
+
+## Structure
+
+Progress bar can have two ways for text alignment. The first one has text
+aligned left with progress bar and the second one has text aligned to the middle
+of the progress bar. The width of a progress bar can be customized appropriately
+for its context. The minimum width of a progress bar is 48px and keep its width
+to a maximum of six columns when possible.
+
+| Element              | Property       | px / rem | Spacing token |
+| -------------------- | -------------- | -------- | ------------- |
+| Label (top aligned)  | Padding-bottom | 8/.5     | `$spacing-03` |
+| Helper text          | Padding-top    | 8/0.5    | `$spacing-03` |
+| Label (left aligned) | Padding-right  | 16/1     | `$spacing-05` |
+
+<div className="image--fixed">
+
+![Structure and spacing measurements for a popover container.](images/progress-bar-style-4.png)
+
+</div>
+
+<Caption>
+  Structure and spacing measurements a popover container. | px / rem
+</Caption>
+
+## Sizes
+
+There are two sizes for the progress bar height, default and small.
+
+| Size    | Height px / rem |
+| ------- | --------------- |
+| Default | 8 / 0.5         |
+| Small   | 4 / 0.25        |
+
+<div className="image--fixed">
+
+![Structure and spacing measurements between a popover container and trigger button.](images/progress-bar-style-5.png)
+
+</div>
+
+<Caption>
+  Structure and spacing measurements between a popover container and trigger
+  button. | px / rem
+</Caption>