@patternfly/patternfly 4.202.2 → 4.203.2

package/docs/pages/guidelines.md

@@ -1,367 +0,0 @@
----
-id: Guidelines
----
-
-Please enforce these guidelines at all times. Small or large, call out what's incorrect.
-
-Every line of code should appear to be written by a single person, no matter the number of contributors.
-
-This set of rules generate some constraints and conventions. If you run into instances where a convention isn’t obvious or a solution could be handled in a few different ways, contact the PatternFly community, have a conversation about how to handle it and update this guidelines when needed.
-
-## Separation of UI structure concerns
-
-PatternFly is made out of isolated and modular structures that fall into 2 categories:
-
-- Layouts
-- Components
-
-### Layouts
-
-Layouts are the containers that allow for organizing and grouping its immediate children on the page.
-
-- A layout never imposes padding or element styles on its children.
-
-The classes are prefixed with `-l` (after the PatternFly prefix `pf-`), for example: `.pf-l-split` or `.pf-l-stack`.
-
-### Components
-
-Components are modular and independent structures concerned with how a thing looks.
-
-- A component always touches all four sides of its parent container.
-- The component itself never has widths, floats or margins.
-- The first element in a component should never use top margins and should touch the top of its component.
-- Components should include semantic markup and necessary ARIA tags to implement the [accessibility guidelines](/accessibility-guide).
-
-The parent container of a component is prefixed with `-c` (after the PatternFly prefix `pf-`), for example: `.pf-c-alert` or `.pf-c-button`.
-
-### When to create a new component
-
-As a general rule, create an extension to an element with BEM modifiers if it’s a change of color or scale. If the change generates a new entity, then create a new component.
-
-Repetition is better than the wrong abstraction.
-
-## Additional features
-
-### Utilities
-
-PatternFly is made up of isolated components that don't allow dependencies. Therefore, the use of helpers or utility classes is discouraged.
-
-However, from time to time it is recognized that an exception to the PatternFly styling may be needed for a special case. For those instances, utility classes are supplied to assist in allowing minor styling changes without creating the need for adding custom CSS.
-
-A utility class is prefixed with `-u` (after the PatternFly prefix `pf-`), for example: `.pf-u-align-content-center`.
-
-### Demos
-
-Demos show how components and layouts can be put together to build more complex structures.
-
-- A demo never includes its own styles. If styling is necessary to implement a desired demo, then new components or layouts, or variants of the components or layouts used, should be created instead.
-- A demo doesn't add any accessibility tags that aren't already in the components. All accessibility should be handled at the component level.
-
-## Variables
-
-PatternFly follows a two-layer theming system where **global variables** always inform **component variables**. Each one of those layers follow a set of very specific rules.
-
-### Global variables
-
-The main reason to have global variables is to maintain consistency. They adhere to the following rules:
-
-- They are prefixed with the word `global` and follow the formula `--pf-global--concept--PropertyCamelCase--modifier--state`.
-  - a `concept` is something like a `spacer` or `main-title`.
-  - a `PropertyCamelCase` is something like `BackgroundColor` or `FontSize`.
-  - a `modifier` is something like  `sm`, or `lg`.
-  - and a `state` is something like  `hover`, or `expanded`.
-- They are concepts, never tied to an element or component. This is incorrect: `--pf-global--h1--FontSize`, this is correct: `--pf-global--FontSize--3xl`.
-
-For example a global variable setup would look like:
-
-```scss
-  // --pf-global--concept--size
-  --pf-global--spacer--lg: .5rem;
-  --pf-global--spacer--xl: 1rem;
-  --pf-global--spacer--2xl: 2rem;
-
-  // --pf-global--PropertyCamelCase--modifier
-  --pf-global--FontSize--3xl: 2rem;
-  --pf-global--FontSize--2xl: 1.8rem;
-  --pf-global--FontSize--lg: 1rem;
-
-  // --pf-global--PropertyCamelCase--state
-  --pf-global--link--TextDecoration--hover: #ccc;
-
-  // --pf-global--PropertyCamelCase--modifier
-  --pf-global--Color--100: #000;
-
-  // --pf-global--concept--modifier
-  --pf-global--primary-color--100: #00f;
-```
-
-### Component variables
-
-The second layer is scoped to themeable component custom properties. This setup allows for consistency across components, generates a common language between designers and developers, and gives granular control to authors. The rules are as follows:
-
-- They follow this general formula `--pf-c-block[__element][--modifier][--state][--breakpoint][--pseudo-element]--PropertyCamelCase`.
-  - `--pf-c-block` refers to the block, usually the component or layout name (i.e., `--pf-c-alert`).
-  - `__element` refers to the element inside of the block (i.e., `__title`).
-  - `--modifier` refers to a modifier class such as `.pf-m-danger`, and is prefixed with `m-` in the component variable (i.e., `--m-danger`).
-  - `--state` is something like `hover` or `active`.
-  - `--breakpoint` is a media query breakpoint such as `sm` for `$pf-global--breakpoint--xs`.
-  - `--pseudo-element` is one of either `before` or `after`.
-- The value of a component variable is **always** defined by a global variable.
-- It's possible to include multiple elements, modifiers, states, and breakpoints in a single component variable.
-- The order of elements, modifiers, states, and breakpoints in the variable name should match the selector order.
-
-For example:
-
-```scss
-// Component scoped variables are always defined by global variables
---pf-c-alert--Padding: var(--pf-global--spacer--xl);
---pf-c-alert--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
---pf-c-alert__title--FontSize: var(--pf-global--FontSize--2xl);
-
-// --block--PropertyCamelCase
-.pf-c-alert {
-  padding: var(--pf-c-alert--Padding);
-}
-
-// --block--state--PropertyCamelCase
-.pf-c-alert {
-  &:hover {
-    background-color: var(--pf-c-alert--hover--BackgroundColor);
-  }
-}
-
-// --block__element--PropertyCamelCase
-.pf-c-alert__title {
-  font-size: var(--pf-c-alert__title--FontSize);
-}
-
-// A more complex example
-.pf-c-switch {
-  @media (max-width: $pf-global--breakpoint--sm) {
-    .pf-c-switch__input {
-      &:disabled {
-        ~ .pf-c-switch__toggle {
-          &::before {
-            background-color: var(--pf-c-switch--sm__input--disabled__toggle--before--BackgroundColor);
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-### Comment all magic values
-
-If a situation arises where a value needs entering into the style sheets that isn't already defined in the global variables this should serve as a red flag to you.
-
-In the case where a 'magic' value needs entering, ensure a comment is added on the line above to explain its relevance.
-
-## Harry Robert's Guidelines
-
-PatternFly follows [Harry Robert's CSS Guidelines](https://cssguidelin.es/) with some exceptions, deviations and additions.
-
-### Exceptions
-
-PatternFly doesn't follow these rules:
-
-- [Table of contents](https://cssguidelin.es/#able-of-contents)
-- [Titling](https://cssguidelin.es/#titling)
-- [Anatomy of a Ruleset](https://cssguidelin.es/#anatomy-of-a-ruleset)
-- [Multi-line CSS](https://cssguidelin.es/#multi-line-css)
-- [Indenting](https://cssguidelin.es/#indenting)
-- [Meaningful Whitespace](https://cssguidelin.es/#meaningful-whitespace)
-- [80 Characters Wide](https://cssguidelin.es/#characters-wide)
-
-### Deviations from Harry Robert's Guidelines
-
-#### HTML
-
-**Practicality over purity**. Strive to maintain HTML standards and semantics, but not at the expense of practicality. Use the least amount of markup with the fewest intricacies whenever possible.
-
-#### Comment and organization
-
-Code is written and maintained by people. Ensure your code is descriptive, well commented, and approachable by others. Great code comments convey context or purpose. Do not simply reiterate a component or class name.
-
-Be sure to write in complete sentences for larger comments and succinct phrases for general notes.
-
-Follow this comment structure:
-
-1. Block
-1. Sections
-1. Line
-
-```scss
-// Section level comment
-.selector {
-  line-height: 1.5; // Line level comment
-  color: #333;
-}
-```
-
-##### 1. Section
-
-This comment is a section divider or describes a block of code.
-
-- Leave one blank lines above.
-
-##### 2. Line
-
-Describes a specific line of code.
-
-### Additions to Harry Robert's Guidelines
-
-#### Lintable CSS rules
-
-The [CSS linter](https://stylelint.io/) is PatternFly's single source of truth for CSS syntax, declaration order, and other CSS rules like disallow type selectors, disallow vendor prefixes, and more.
-
-#### Shorthand notation
-
-Limit the use of shorthand declarations to instances where you must explicitly set all the available values. Common overused shorthand properties include:
-
-- `padding`
-- `margin`
-- `font`
-- `background`
-- `border`
-- `border-radius`
-
-```scss
-// Bad
-.element {
-  margin: 0 0 10px;
-  background: #f00;
-  background: url("image.jpg");
-  border-radius: 3px 3px 0 0;
-}
-
-// Good
-.element {
-  margin-bottom: 10px;
-  background-color: #f00;
-  background-image: url("image.jpg");
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-}
-```
-
-The [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) and [Harry Robert](https://csswizardry.com/2016/12/css-shorthand-syntax-considered-an-anti-pattern/) both have great articles on shorthand properties for those unfamiliar with notation and behaviour.
-
-### Sass
-
-PatternFly uses [Sass](http://sass-lang.com/) to preprocess CSS.
-
-As a general rule don't overcomplicate Sass, keep it easy to parse for a normal human.
-
-#### Nesting
-
-As a general rule avoid Sass nesting to increase specificity. Try not to nest more than three layers deep.
-
-Limit nesting to the following use cases:
-
-1. Modifiers
-1. Media queries
-1. States, pseudo-classes, and pseudo-elements
-1. Combinators
-
-##### 1. Modifiers and elements of a block
-
-* Do not use [Sass's parent selector](https://css-tricks.com/the-sass-ampersand/) mechanism to construct BEM elements.
-* Do use that method to create compound selectors with modifier classes.
-
-```scss
-// Good
-.pf-nav {
-  // styles
-
-  &.pf-m-vertical {
-    // styles
-  }
-}
-
-.pf-nav__item {
-  // styles
-}
-
-// Bad
-.pf-nav {
-  // styles
-
-  &__item {
-    // styles
-  }
-}
-
-.pf-m-nav.pf-m-vertical {
-  // styles
-}
-```
-
-##### 2. Media queries
-
-Component-specific media queries should be nested inside the component block. Remember that PatternFly is mobile first. **Do progressive enhancement, not gracefully degradation.**
-
-PatternFly has 5 breakpoints:
-
-```scss
-  $pf-global-breakpoint--xs: 0;
-  $pf-global-breakpoint--sm: 576px;
-  $pf-global-breakpoint--md: 768px;
-  $pf-global-breakpoint--lg: 992px;
-  $pf-global-breakpoint--xl: 1200px;
-```
-
-To make sure you are writing mobile first, always do `min-width`:
-
-```scss
-.pf-nav {
-  // mobile styles
-
-  // Styles for small view ports and up
-  @media (min-width: $pf-global-breakpoint--xs) {
-    // non-mobile styles
-  }
-}
-```
-
-##### 4. States, pseudo-classes and pseudo-elements
-
-States of a component should be included as a nested element. This includes hover, focus, and active states:
-
-```scss
-.pf-c-button {
-  background: var(--pf-c-button--Background);
-
-  &:hover {
-    background: var(--pf-c-button--hover--Background);
-  }
-}
-```
-
-
-#### Sass variables
-
-We create global Sass variables to keep a Bootstrap theme in sync. These values also inform our component level variables.
-
-#### @mixin and @extend
-
-Since our components are isolated and modular try to avoid `@mixin` and `@extend` because they generate a dependency.
-
-#### Nested calc() functions
-
-There is currently a bug in cssnano ([issue #64 on postcss-calc](https://github.com/postcss/postcss-calc/issues/64)) that causes nested `calc()` CSS functions to be removed. So a function like `calc(5 * calc(3 - 1))` becomes `calc(5 * 3 - 1)`. It's worth noting that this problem only impacts our distribution package. Nested `calc()` functions work fine in the development environment.
-
-PatternFly developers should avoid nested `calc()` CSS functions until this bug is resolved and the package is updated in the [patternfly repository](https://github.com/patternfly/patternfly). If you're interested in following this issue, you can do so in [issue #1295 on patternfly](https://github.com/patternfly/patternfly/issues/1295).
-
-#### Hover styles
-
-While the default styles applied to an element might not provide a visual indication of target area, the styles that display on hover should. To ensure that these styles accurately convey the target area of an element where the user can click, `:hover` styles should be applied to the clickable element of a component, and not to a larger wrapping element.
-
-## References
-
-This guide is inspired by people we follow and respect:
-
-- **[Mark Otto](http://markdotto.com/):** [Code Guideline](http://codeguide.co/)
-- **[Robert Harris](http://csswizardry.com/):** [CSS Guidelines](http://cssguidelin.es/)
-- **[Gravity Department](http://gravitydept.com/)**: [Style Guide Field Manual](http://manuals.gravitydept.com/code/css/style-guide)
-- **[Kitty Giraudel](http://kittygiraudel.com/):** [SASS Guidelines](https://sass-guidelin.es/)

package/docs/pages/icons.md

@@ -1,129 +0,0 @@
----
-id: Icons
----
-| Icon name | Icon | Code |
-| --- | --- | --- |
-| add-circle-o | <i class="pf-icon pf-icon-add-circle-o"></i> | &lt;i class=&quot;pf-icon pf-icon-add-circle-o&quot;&gt;&lt;/i&gt;
-| ansible-tower | <i class="pf-icon pf-icon-ansible-tower"></i> | &lt;i class=&quot;pf-icon pf-icon-ansible-tower&quot;&gt;&lt;/i&gt;
-| applications | <i class="pf-icon pf-icon-applications"></i> | &lt;i class=&quot;pf-icon pf-icon-applications&quot;&gt;&lt;/i&gt;
-| arrow | <i class="pf-icon pf-icon-arrow"></i> | &lt;i class=&quot;pf-icon pf-icon-arrow&quot;&gt;&lt;/i&gt;
-| asleep | <i class="pf-icon pf-icon-asleep"></i> | &lt;i class=&quot;pf-icon pf-icon-asleep&quot;&gt;&lt;/i&gt;
-| attention-bell | <i class="pf-icon pf-icon-attention-bell"></i> | &lt;i class=&quot;pf-icon pf-icon-attention-bell&quot;&gt;&lt;/i&gt;
-| automation | <i class="pf-icon pf-icon-automation"></i> | &lt;i class=&quot;pf-icon pf-icon-automation&quot;&gt;&lt;/i&gt;
-| bell | <i class="pf-icon pf-icon-bell"></i> | &lt;i class=&quot;pf-icon pf-icon-bell&quot;&gt;&lt;/i&gt;
-| blueprint | <i class="pf-icon pf-icon-blueprint"></i> | &lt;i class=&quot;pf-icon pf-icon-blueprint&quot;&gt;&lt;/i&gt;
-| build | <i class="pf-icon pf-icon-build"></i> | &lt;i class=&quot;pf-icon pf-icon-build&quot;&gt;&lt;/i&gt;
-| builder-image | <i class="pf-icon pf-icon-builder-image"></i> | &lt;i class=&quot;pf-icon pf-icon-builder-image&quot;&gt;&lt;/i&gt;
-| bundle | <i class="pf-icon pf-icon-bundle"></i> | &lt;i class=&quot;pf-icon pf-icon-bundle&quot;&gt;&lt;/i&gt;
-| catalog | <i class="pf-icon pf-icon-catalog"></i> | &lt;i class=&quot;pf-icon pf-icon-catalog&quot;&gt;&lt;/i&gt;
-| chat | <i class="pf-icon pf-icon-chat"></i> | &lt;i class=&quot;pf-icon pf-icon-chat&quot;&gt;&lt;/i&gt;
-| close | <i class="pf-icon pf-icon-close"></i> | &lt;i class=&quot;pf-icon pf-icon-close&quot;&gt;&lt;/i&gt;
-| cloud-security | <i class="pf-icon pf-icon-cloud-security"></i> | &lt;i class=&quot;pf-icon pf-icon-cloud-security&quot;&gt;&lt;/i&gt;
-| cloud-tenant | <i class="pf-icon pf-icon-cloud-tenant"></i> | &lt;i class=&quot;pf-icon pf-icon-cloud-tenant&quot;&gt;&lt;/i&gt;
-| cluster | <i class="pf-icon pf-icon-cluster"></i> | &lt;i class=&quot;pf-icon pf-icon-cluster&quot;&gt;&lt;/i&gt;
-| connected | <i class="pf-icon pf-icon-connected"></i> | &lt;i class=&quot;pf-icon pf-icon-connected&quot;&gt;&lt;/i&gt;
-| container-node | <i class="pf-icon pf-icon-container-node"></i> | &lt;i class=&quot;pf-icon pf-icon-container-node&quot;&gt;&lt;/i&gt;
-| cpu | <i class="pf-icon pf-icon-cpu"></i> | &lt;i class=&quot;pf-icon pf-icon-cpu&quot;&gt;&lt;/i&gt;
-| critical-risk | <i class="pf-icon pf-icon-critical-risk"></i> | &lt;i class=&quot;pf-icon pf-icon-critical-risk&quot;&gt;&lt;/i&gt;
-| degraded | <i class="pf-icon pf-icon-degraded"></i> | &lt;i class=&quot;pf-icon pf-icon-degraded&quot;&gt;&lt;/i&gt;
-| disconnected | <i class="pf-icon pf-icon-disconnected"></i> | &lt;i class=&quot;pf-icon pf-icon-disconnected&quot;&gt;&lt;/i&gt;
-| domain | <i class="pf-icon pf-icon-domain"></i> | &lt;i class=&quot;pf-icon pf-icon-domain&quot;&gt;&lt;/i&gt;
-| edit | <i class="pf-icon pf-icon-edit"></i> | &lt;i class=&quot;pf-icon pf-icon-edit&quot;&gt;&lt;/i&gt;
-| enhancement | <i class="pf-icon pf-icon-enhancement"></i> | &lt;i class=&quot;pf-icon pf-icon-enhancement&quot;&gt;&lt;/i&gt;
-| enterprise | <i class="pf-icon pf-icon-enterprise"></i> | &lt;i class=&quot;pf-icon pf-icon-enterprise&quot;&gt;&lt;/i&gt;
-| equalizer | <i class="pf-icon pf-icon-equalizer"></i> | &lt;i class=&quot;pf-icon pf-icon-equalizer&quot;&gt;&lt;/i&gt;
-| error-circle-o | <i class="pf-icon pf-icon-error-circle-o"></i> | &lt;i class=&quot;pf-icon pf-icon-error-circle-o&quot;&gt;&lt;/i&gt;
-| export | <i class="pf-icon pf-icon-export"></i> | &lt;i class=&quot;pf-icon pf-icon-export&quot;&gt;&lt;/i&gt;
-| filter | <i class="pf-icon pf-icon-filter"></i> | &lt;i class=&quot;pf-icon pf-icon-filter&quot;&gt;&lt;/i&gt;
-| flavor | <i class="pf-icon pf-icon-flavor"></i> | &lt;i class=&quot;pf-icon pf-icon-flavor&quot;&gt;&lt;/i&gt;
-| folder-close | <i class="pf-icon pf-icon-folder-close"></i> | &lt;i class=&quot;pf-icon pf-icon-folder-close&quot;&gt;&lt;/i&gt;
-| folder-open | <i class="pf-icon pf-icon-folder-open"></i> | &lt;i class=&quot;pf-icon pf-icon-folder-open&quot;&gt;&lt;/i&gt;
-| globe-route | <i class="pf-icon pf-icon-globe-route"></i> | &lt;i class=&quot;pf-icon pf-icon-globe-route&quot;&gt;&lt;/i&gt;
-| help | <i class="pf-icon pf-icon-help"></i> | &lt;i class=&quot;pf-icon pf-icon-help&quot;&gt;&lt;/i&gt;
-| history | <i class="pf-icon pf-icon-history"></i> | &lt;i class=&quot;pf-icon pf-icon-history&quot;&gt;&lt;/i&gt;
-| home | <i class="pf-icon pf-icon-home"></i> | &lt;i class=&quot;pf-icon pf-icon-home&quot;&gt;&lt;/i&gt;
-| import | <i class="pf-icon pf-icon-import"></i> | &lt;i class=&quot;pf-icon pf-icon-import&quot;&gt;&lt;/i&gt;
-| in-progress | <i class="pf-icon pf-icon-in-progress"></i> | &lt;i class=&quot;pf-icon pf-icon-in-progress&quot;&gt;&lt;/i&gt;
-| info | <i class="pf-icon pf-icon-info"></i> | &lt;i class=&quot;pf-icon pf-icon-info&quot;&gt;&lt;/i&gt;
-| infrastructure | <i class="pf-icon pf-icon-infrastructure"></i> | &lt;i class=&quot;pf-icon pf-icon-infrastructure&quot;&gt;&lt;/i&gt;
-| integration | <i class="pf-icon pf-icon-integration"></i> | &lt;i class=&quot;pf-icon pf-icon-integration&quot;&gt;&lt;/i&gt;
-| key | <i class="pf-icon pf-icon-key"></i> | &lt;i class=&quot;pf-icon pf-icon-key&quot;&gt;&lt;/i&gt;
-| locked | <i class="pf-icon pf-icon-locked"></i> | &lt;i class=&quot;pf-icon pf-icon-locked&quot;&gt;&lt;/i&gt;
-| maintenance | <i class="pf-icon pf-icon-maintenance"></i> | &lt;i class=&quot;pf-icon pf-icon-maintenance&quot;&gt;&lt;/i&gt;
-| memory | <i class="pf-icon pf-icon-memory"></i> | &lt;i class=&quot;pf-icon pf-icon-memory&quot;&gt;&lt;/i&gt;
-| messages | <i class="pf-icon pf-icon-messages"></i> | &lt;i class=&quot;pf-icon pf-icon-messages&quot;&gt;&lt;/i&gt;
-| middleware | <i class="pf-icon pf-icon-middleware"></i> | &lt;i class=&quot;pf-icon pf-icon-middleware&quot;&gt;&lt;/i&gt;
-| migration | <i class="pf-icon pf-icon-migration"></i> | &lt;i class=&quot;pf-icon pf-icon-migration&quot;&gt;&lt;/i&gt;
-| module | <i class="pf-icon pf-icon-module"></i> | &lt;i class=&quot;pf-icon pf-icon-module&quot;&gt;&lt;/i&gt;
-| monitoring | <i class="pf-icon pf-icon-monitoring"></i> | &lt;i class=&quot;pf-icon pf-icon-monitoring&quot;&gt;&lt;/i&gt;
-| namespaces | <i class="pf-icon pf-icon-namespaces"></i> | &lt;i class=&quot;pf-icon pf-icon-namespaces&quot;&gt;&lt;/i&gt;
-| not-started | <i class="pf-icon pf-icon-not-started"></i> | &lt;i class=&quot;pf-icon pf-icon-not-started&quot;&gt;&lt;/i&gt;
-| network | <i class="pf-icon pf-icon-network"></i> | &lt;i class=&quot;pf-icon pf-icon-network&quot;&gt;&lt;/i&gt;
-| new-process | <i class="pf-icon pf-icon-new-process"></i> | &lt;i class=&quot;pf-icon pf-icon-new-process&quot;&gt;&lt;/i&gt;
-| off | <i class="pf-icon pf-icon-off"></i> | &lt;i class=&quot;pf-icon pf-icon-off&quot;&gt;&lt;/i&gt;
-| ok | <i class="pf-icon pf-icon-ok"></i> | &lt;i class=&quot;pf-icon pf-icon-ok&quot;&gt;&lt;/i&gt;
-| on-running | <i class="pf-icon pf-icon-on-running"></i> | &lt;i class=&quot;pf-icon pf-icon-on-running&quot;&gt;&lt;/i&gt;
-| on | <i class="pf-icon pf-icon-on"></i> | &lt;i class=&quot;pf-icon pf-icon-on&quot;&gt;&lt;/i&gt;
-| openshift | <i class="pf-icon pf-icon-openshift"></i> | &lt;i class=&quot;pf-icon pf-icon-openshift&quot;&gt;&lt;/i&gt;
-| openstack | <i class="pf-icon pf-icon-openstack"></i> | &lt;i class=&quot;pf-icon pf-icon-openstack&quot;&gt;&lt;/i&gt;
-| optimize | <i class="pf-icon pf-icon-optimize"></i> | &lt;i class=&quot;pf-icon pf-icon-optimize&quot;&gt;&lt;/i&gt;
-| orders | <i class="pf-icon pf-icon-orders"></i> | &lt;i class=&quot;pf-icon pf-icon-orders&quot;&gt;&lt;/i&gt;
-| os-image | <i class="pf-icon pf-icon-os-image"></i> | &lt;i class=&quot;pf-icon pf-icon-os-image&quot;&gt;&lt;/i&gt;
-| package | <i class="pf-icon pf-icon-package"></i> | &lt;i class=&quot;pf-icon pf-icon-package&quot;&gt;&lt;/i&gt;
-| panel-open | <i class="pf-icon pf-icon-panel-open"></i> | &lt;i class=&quot;pf-icon pf-icon-panel-open&quot;&gt;&lt;/i&gt;
-| panel-close | <i class="pf-icon pf-icon-panel-close"></i> | &lt;i class=&quot;pf-icon pf-icon-panel-close&quot;&gt;&lt;/i&gt;
-| paused | <i class="pf-icon pf-icon-paused"></i> | &lt;i class=&quot;pf-icon pf-icon-paused&quot;&gt;&lt;/i&gt;
-| pending | <i class="pf-icon pf-icon-pending"></i> | &lt;i class=&quot;pf-icon pf-icon-pending&quot;&gt;&lt;/i&gt;
-| pficon-dragdrop | <i class="pf-icon pf-icon-pficon-dragdrop"></i> | &lt;i class=&quot;pf-icon pf-icon-pficon-dragdrop&quot;&gt;&lt;/i&gt;
-| pficon-history | <i class="pf-icon pf-icon-pficon-history"></i> | &lt;i class=&quot;pf-icon pf-icon-pficon-history&quot;&gt;&lt;/i&gt;
-| pficon-network-range | <i class="pf-icon pf-icon-pficon-network-range"></i> | &lt;i class=&quot;pf-icon pf-icon-pficon-network-range&quot;&gt;&lt;/i&gt;
-| pficon-satellite | <i class="pf-icon pf-icon-pficon-satellite"></i> | &lt;i class=&quot;pf-icon pf-icon-pficon-satellite&quot;&gt;&lt;/i&gt;
-| pficon-sort-common-asc | <i class="pf-icon pf-icon-pficon-sort-common-asc"></i> | &lt;i class=&quot;pf-icon pf-icon-pficon-sort-common-asc&quot;&gt;&lt;/i&gt;
-| pficon-sort-common-desc | <i class="pf-icon pf-icon-pficon-sort-common-desc"></i> | &lt;i class=&quot;pf-icon pf-icon-pficon-sort-common-desc&quot;&gt;&lt;/i&gt;
-| pficon-template | <i class="pf-icon pf-icon-pficon-template"></i> | &lt;i class=&quot;pf-icon pf-icon-pficon-template&quot;&gt;&lt;/i&gt;
-| pficon-vcenter | <i class="pf-icon pf-icon-pficon-vcenter"></i> | &lt;i class=&quot;pf-icon pf-icon-pficon-vcenter&quot;&gt;&lt;/i&gt;
-| plugged | <i class="pf-icon pf-icon-plugged"></i> | &lt;i class=&quot;pf-icon pf-icon-plugged&quot;&gt;&lt;/i&gt;
-| port | <i class="pf-icon pf-icon-port"></i> | &lt;i class=&quot;pf-icon pf-icon-port&quot;&gt;&lt;/i&gt;
-| print | <i class="pf-icon pf-icon-print"></i> | &lt;i class=&quot;pf-icon pf-icon-print&quot;&gt;&lt;/i&gt;
-| private | <i class="pf-icon pf-icon-private"></i> | &lt;i class=&quot;pf-icon pf-icon-private&quot;&gt;&lt;/i&gt;
-| process-automation | <i class="pf-icon pf-icon-process-automation"></i> | &lt;i class=&quot;pf-icon pf-icon-process-automation&quot;&gt;&lt;/i&gt;
-| project | <i class="pf-icon pf-icon-project"></i> | &lt;i class=&quot;pf-icon pf-icon-project&quot;&gt;&lt;/i&gt;
-| rebalance | <i class="pf-icon pf-icon-rebalance"></i> | &lt;i class=&quot;pf-icon pf-icon-rebalance&quot;&gt;&lt;/i&gt;
-| rebooting | <i class="pf-icon pf-icon-rebooting"></i> | &lt;i class=&quot;pf-icon pf-icon-rebooting&quot;&gt;&lt;/i&gt;
-| regions | <i class="pf-icon pf-icon-regions"></i> | &lt;i class=&quot;pf-icon pf-icon-regions&quot;&gt;&lt;/i&gt;
-| registry | <i class="pf-icon pf-icon-registry"></i> | &lt;i class=&quot;pf-icon pf-icon-registry&quot;&gt;&lt;/i&gt;
-| remove2 | <i class="pf-icon pf-icon-remove2"></i> | &lt;i class=&quot;pf-icon pf-icon-remove2&quot;&gt;&lt;/i&gt;
-| replicator | <i class="pf-icon pf-icon-replicator"></i> | &lt;i class=&quot;pf-icon pf-icon-replicator&quot;&gt;&lt;/i&gt;
-| repository | <i class="pf-icon pf-icon-repository"></i> | &lt;i class=&quot;pf-icon pf-icon-repository&quot;&gt;&lt;/i&gt;
-| resource-pool | <i class="pf-icon pf-icon-resource-pool"></i> | &lt;i class=&quot;pf-icon pf-icon-resource-pool&quot;&gt;&lt;/i&gt;
-| resources-almost-empty | <i class="pf-icon pf-icon-resources-almost-empty"></i> | &lt;i class=&quot;pf-icon pf-icon-resources-almost-empty&quot;&gt;&lt;/i&gt;
-| resources-almost-full | <i class="pf-icon pf-icon-resources-almost-full"></i> | &lt;i class=&quot;pf-icon pf-icon-resources-almost-full&quot;&gt;&lt;/i&gt;
-| resources-empty | <i class="pf-icon pf-icon-resources-empty"></i> | &lt;i class=&quot;pf-icon pf-icon-resources-empty&quot;&gt;&lt;/i&gt;
-| resources-full | <i class="pf-icon pf-icon-resources-full"></i> | &lt;i class=&quot;pf-icon pf-icon-resources-full&quot;&gt;&lt;/i&gt;
-| running | <i class="pf-icon pf-icon-running"></i> | &lt;i class=&quot;pf-icon pf-icon-running&quot;&gt;&lt;/i&gt;
-| save | <i class="pf-icon pf-icon-save"></i> | &lt;i class=&quot;pf-icon pf-icon-save&quot;&gt;&lt;/i&gt;
-| screen | <i class="pf-icon pf-icon-screen"></i> | &lt;i class=&quot;pf-icon pf-icon-screen&quot;&gt;&lt;/i&gt;
-| security | <i class="pf-icon pf-icon-security"></i> | &lt;i class=&quot;pf-icon pf-icon-security&quot;&gt;&lt;/i&gt;
-| server-group | <i class="pf-icon pf-icon-server-group"></i> | &lt;i class=&quot;pf-icon pf-icon-server-group&quot;&gt;&lt;/i&gt;
-| server | <i class="pf-icon pf-icon-server"></i> | &lt;i class=&quot;pf-icon pf-icon-server&quot;&gt;&lt;/i&gt;
-| service-catalog | <i class="pf-icon pf-icon-service-catalog"></i> | &lt;i class=&quot;pf-icon pf-icon-service-catalog&quot;&gt;&lt;/i&gt;
-| service | <i class="pf-icon pf-icon-service"></i> | &lt;i class=&quot;pf-icon pf-icon-service&quot;&gt;&lt;/i&gt;
-| services | <i class="pf-icon pf-icon-services"></i> | &lt;i class=&quot;pf-icon pf-icon-services&quot;&gt;&lt;/i&gt;
-| spinner | <i class="pf-icon pf-icon-spinner"></i> | &lt;i class=&quot;pf-icon pf-icon-spinner&quot;&gt;&lt;/i&gt;
-| spinner2 | <i class="pf-icon pf-icon-spinner2"></i> | &lt;i class=&quot;pf-icon pf-icon-spinner2&quot;&gt;&lt;/i&gt;
-| storage-domain | <i class="pf-icon pf-icon-storage-domain"></i> | &lt;i class=&quot;pf-icon pf-icon-storage-domain&quot;&gt;&lt;/i&gt;
-| task | <i class="pf-icon pf-icon-task"></i> | &lt;i class=&quot;pf-icon pf-icon-task&quot;&gt;&lt;/i&gt;
-| tenant | <i class="pf-icon pf-icon-tenant"></i> | &lt;i class=&quot;pf-icon pf-icon-tenant&quot;&gt;&lt;/i&gt;
-| thumb-tack | <i class="pf-icon pf-icon-thumb-tack"></i> | &lt;i class=&quot;pf-icon pf-icon-thumb-tack&quot;&gt;&lt;/i&gt;
-| topology | <i class="pf-icon pf-icon-topology"></i> | &lt;i class=&quot;pf-icon pf-icon-topology&quot;&gt;&lt;/i&gt;
-| trend-down | <i class="pf-icon pf-icon-trend-down"></i> | &lt;i class=&quot;pf-icon pf-icon-trend-down&quot;&gt;&lt;/i&gt;
-| trend-up | <i class="pf-icon pf-icon-trend-up"></i> | &lt;i class=&quot;pf-icon pf-icon-trend-up&quot;&gt;&lt;/i&gt;
-| unknown | <i class="pf-icon pf-icon-unknown"></i> | &lt;i class=&quot;pf-icon pf-icon-unknown&quot;&gt;&lt;/i&gt;
-| unlocked | <i class="pf-icon pf-icon-unlocked"></i> | &lt;i class=&quot;pf-icon pf-icon-unlocked&quot;&gt;&lt;/i&gt;
-| unplugged | <i class="pf-icon pf-icon-unplugged"></i> | &lt;i class=&quot;pf-icon pf-icon-unplugged&quot;&gt;&lt;/i&gt;
-| user | <i class="pf-icon pf-icon-user"></i> | &lt;i class=&quot;pf-icon pf-icon-user&quot;&gt;&lt;/i&gt;
-| users | <i class="pf-icon pf-icon-users"></i> | &lt;i class=&quot;pf-icon pf-icon-users&quot;&gt;&lt;/i&gt;
-| virtual-machine | <i class="pf-icon pf-icon-virtual-machine"></i> | &lt;i class=&quot;pf-icon pf-icon-virtual-machine&quot;&gt;&lt;/i&gt;
-| volume | <i class="pf-icon pf-icon-volume"></i> | &lt;i class=&quot;pf-icon pf-icon-volume&quot;&gt;&lt;/i&gt;
-| warning-triangle | <i class="pf-icon pf-icon-warning-triangle"></i> | &lt;i class=&quot;pf-icon pf-icon-warning-triangle&quot;&gt;&lt;/i&gt;
-| zone | <i class="pf-icon pf-icon-zone"></i> | &lt;i class=&quot;pf-icon pf-icon-zone&quot;&gt;&lt;/i&gt;

package/docs/pages/index.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { PageSection } from '@patternfly/react-core';
-import quickRefPdf from './reference-docs/PF-quick-ref.pdf';
-
-const HomePage = () => (
-  <PageSection variant="light">
-    Just getting started? Take a look at the <a href="/contribution">Contribution guide</a> and{' '}
-    <a href="/guidelines">Coding guidelines.</a> Always keep our <a href="/accessibility-guide">Accessibility guide</a>{' '}
-    in mind. Download a <a href={quickRefPdf}>quick reference sheet.</a>
-  </PageSection>
-);
-
-export default HomePage;