feat: pfe-progress-steps [new component] (#1436) (#1613)

* fix: merged master fix and issue-1405-product-trials-epic--broken-master

* feat: added better logic for switching grid gaps for button-group

* feat: updated demo

* feat: pfe-progress-steps disable link on current and error state.

* feat: pfe-progress-steps fixed thin white line around svgs

* chore: pfe-progress-steps cleanup

* feat: updated demo to use remote libs

* fix: pfe-popover fixed darkmode button color

* feat: pfe-absolute-position switch from attr change callback to prop observers

* fix: pfe-alert added correct icon gap, moved to css grid

* chore: update to 1.6.0

* chore: commit dist files for short term

* chore: remove dist files

* chore: removing unrelated components

* chore: removing dist directories

* chore: remove console.log

* feat: made vertical min-height dynamic

* chore: version bump

* First pass at updating styles to use pfe functions

* Remove debugging

* Update polyfills

* Add documentation folder

* Remove jump links content from progress stepper docs

* Add documentation for the variable hooks

* Update documentation; add values array

* First pass at storybook view

* Abstract item template

* Update story

* Update tests for progress steps

* Update progress steps

* Add todo notes

* Remove progress steps html now that it's using the new testing framework

* [pfe-progress-steps] CSS Variable Notes NO MERGE (#1623)

* feat: added inline comments

* Update elements/pfe-progress-steps/src/pfe-progress-steps-item.scss

* Update elements/pfe-progress-steps/src/pfe-progress-steps-item.scss

* Update elements/pfe-progress-steps/src/pfe-progress-steps-item.scss

* Apply suggestions from code review

* Allow text to inherit font color

* Adding a few setters

Co-authored-by: [ Cassondra ] <[email protected]>

* Reworking the styles to simplify the markup

* Fixing a few hangnails

* Update links to use inherit

* Update logic to use more precise math for determining alignment

* Revert storybook update

* Minor updates

* update changelog

* Updating typo

* Remove html test from old testing suite

* Update styles on demo page

* feat: updated css vars for RH theme in demo

* feat: updated preview image for docs

* fix: fixed the description of the progress steps

* Update feedback--info colors to ui-accent

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: [ Cassondra ] <[email protected]>

Author: 3 people

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

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.

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