patternfly · castastrophe · May 21, 2021 · Apr 16, 2021 · Apr 16, 2021 · Apr 16, 2021
diff --git a/CHANGELOG-1.x.md b/CHANGELOG-1.x.md
@@ -1,10 +1,11 @@
-# 1.9.0 (TBD)
+# 1.9.0 (2021)
 
-- [](https://github.com/patternfly/patternfly-elements/commit/) feat: [pfe-styles] ordered list primary styles
+- [](https://github.com/patternfly/patternfly-elements/commit/) feat: pfe-progress-steps (new) (#1436)
+- [9411f1f](https://github.com/patternfly/patternfly-elements/commit/9411f1f7e614be43e50105540262cd1992bca50f) feat: [pfe-styles] ordered list primary styles
+- [b89bd6b](https://github.com/patternfly/patternfly-elements/commit/b89bd6b34dc5bd42c61dd1670bf273587b650268) feat: persist debugLog in localStorage
 
 # 1.8.0 (2021-05-18)
 
-- [](https://github.com/patternfly/patternfly-elements/commit/) feat: persist debugLog in localStorage
 - [267ff8e](https://github.com/patternfly/patternfly-elements/commit/267ff8ee7df7cd0512f16c58fdb169f941bfa4cd) feat: Update fetch mixin to support region input (#1328)
 - [f1c1176](https://github.com/patternfly/patternfly-elements/commit/f1c1176d9278d6e5b8066b42fc040ea01d98ecb2) feat: pfe-icon now supports setting default icon sets
 - [56eb55e](https://github.com/patternfly/patternfly-elements/commit/56eb55ec8b4b62aee7d36950d158229cbf50ddef) fix: pfe-accordion IE11 regression; background context should always be white with black text

diff --git a/elements/pfe-progress-steps/LICENSE.txt b/elements/pfe-progress-steps/LICENSE.txt
@@ -0,0 +1,19 @@
+Copyright 2021 Red Hat, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/elements/pfe-progress-steps/README.md b/elements/pfe-progress-steps/README.md
@@ -0,0 +1,101 @@
+# PatternFly Element | Progress stepper element
+A component that gives the user a visual representation of the current state of their progress through an application (typically a multistep form).
+
+## Usage
+Describe how best to use this web component along with best practices.
+
+```html
+  <pfe-progress-steps>
+    <pfe-progress-steps-item state="active" current>
+      <div slot="title">Current</div>
+      <a slot="link" href="#">View current step</a>
+    </pfe-progress-steps-item>
+    <pfe-progress-steps-item>
+      <div slot="title">Next</div>
+      <a slot="link" href="#">View next step</a>
+    </pfe-progress-steps-item>
+    <pfe-progress-steps-item>
+      <div slot="title">Last</div>
+      <a slot="link" href="#">View last step</a>
+    </pfe-progress-steps-item>
+  </pfe-progress-steps>
+```
+
+## Slots
+
+### pfe-progress-steps-item
+
+- `title`: The item's short descriptive title.
+- `description`: A short description of what the item represents.
+
+## Attributes
+
+### pfe-progress-steps
+
+- `vertical`: Describe each available attribute and what function is serves.
+
+### pfe-progress-steps-item
+
+- `current`: Indicates if this item is the current active item.
+- `state`: Describes the state of the current item; allows "inactive", "done", or "error".
+
+## Variable hooks
+
+Available hooks for styling:
+
+| Variable name | Default value | Region |
+| --- | --- | --- |
+| `--pfe-progress-steps__item--Width` | var(--pfe-theme--ui--element--size--lg, 75px) | item |
+| `--pfe-progress-steps__circle--Size` | var(--pfe-theme--ui--element--size--md, 32px) | circle |
+| `--pfe-progress-steps__progress-bar--Color` | var(--pfe-theme--color--ui--border--lighter, #d2d2d2) | progress |
+| `--pfe-progress-steps__progress-bar--Fill` | var(--pfe-theme--color--ui-accent, #06c) | progress |
+| `--pfe-progress-steps__progress-bar--Width` | var(--pfe-theme--ui--border-width--md, 2px) | progress |
+| --- | --- | --- |
+| `--pfe-progress-steps-item--Width` | auto |  |
+| `--pfe-progress-steps-item--MinHeight--vertical` | var(--pfe-progress-steps__item--Width, var(--pfe-theme--ui--element--size--lg, 75px)) |  |
+| `--pfe-progress-steps-item__circle--Size` | var(--pfe-theme--ui--element--size--md, 32px) | circle |
+| `--pfe-progress-steps-item__circle--Color` | var(--pfe-theme--color--feedback--info, #06c) | circle |
+| `--pfe-progress-steps-item__circle--Color--hover` | var(--pfe-theme--color--feedback--info, #06c) | circle |
+| `--pfe-progress-steps-item__circle--Color--focus` | var(--pfe-theme--color--feedback--info, #06c) | circle |
+| `--pfe-progress-steps-item__circle--Background` | radial-gradient(circle, white 60%, rgba(255, 255, 255, 0) 61%) | circle |
+| `--pfe-progress-steps-item__circle--Width` | var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px)) | circle |
+| `--pfe-progress-steps-item__circle--Height` | var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px)) | circle |
+| `--pfe-progress-steps-item__circle-wrapper--Width` | var(--pfe-progress-steps-item__circle--Width, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))) | circle |
+| `--pfe-progress-steps-item__circle-wrapper--Height` | var(--pfe-progress-steps-item__circle--Height, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))) | circle |
+| `--pfe-progress-steps-item__title--Color` | var(--pfe-theme--color--text, #151515) | title |
+| `--pfe-progress-steps-item__title--Color--active` | var(--pfe-theme--color--feedback--info, #06c) | title |
+| `--pfe-progress-steps-item__title--Color--error` | var(--pfe-theme--color--feedback--critical--lighter, #c9190b) | title |
+| `--pfe-progress-steps-item__title--MarginTop--vertical` | calc( var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px)) / 6) | title |
+| `--pfe-progress-steps-item__description--Color` | var(--pfe-theme--color--text--muted, #6a6e73) | description |
+| `--pfe-progress-steps-item__description--Color--error` | var(--pfe-theme--color--feedback--critical--lighter, #c9190b) | description |
+| `--pfe-progress-steps-item--spacer` | var(--pfe-theme--content-spacer--body--sm, 0.5rem) |  |
+| `--pfe-progress-steps-item__circle-inner--Width` | calc( var(--pfe-progress-steps-item__circle--Width, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))) / 2.2) | circle |
+| `--pfe-progress-steps-item__circle-inner--Height` | calc( var(--pfe-progress-steps-item__circle--Height, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))) / 2.2) | circle |
+| `--pfe-progress-steps-item__circle-outer--Width` | var(--pfe-progress-steps-item__circle--Width, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))) | circle |
+| `--pfe-progress-steps-item__circle-outer--Height` | var(--pfe-progress-steps-item__circle--Height, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))) | circle |
+
+## Dev
+
+`npm start`
+
+## Test
+
+`npm run test`
+
+## Build
+
+`npm run build`
+
+## Demo
+
+From the PFElements root directory, run:
+
+`npm run demo`
+
+## Code style
+
+Progress stepper (and all PFElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
+
+[prettier]: https://github.com/prettier/prettier/
+[prettier-ed]: https://prettier.io/docs/en/editors.html
+[web-component-tester]: https://github.com/Polymer/web-component-tester