@patternfly/patternfly 4.202.1 → 4.203.1

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;

package/docs/pages/upgrade-guide.md

@@ -1,188 +0,0 @@
----
-id: upgrade-guide
-title: Upgrading to PatternFly 4
----
-
-Use the following steps to upgrade from PatternFly 3 to PatternFly 4.
-
-**Before you begin**
-
-- **Does you application require IE11 support?**
-   - If the answer is yes, you can't upgrade to PatternFly 4. We're sorry!
-- **Do you know what your build process is?**
-  - Steps and requirements differ for basic HTML, Gulp, and Webpack, so be prepared with that information going in.
-- **Do you need to run PatternFly 3 and PatternFly 4 together?**
-  - If the answer is yes, use the following steps to update your configuration in the `src/patternfly/sass-utilities/scss-variables.scss` file to state `false`:
-
-```scss
-$pf-global--enable-reset: false !default;
-```
-
-
-## Installing PatternFly 4
-
-Run the following commands to install:
-
-```bash
-npm install @patternfly/patternfly
-```
-
-----
-
-## Configure your project
-
-1. Navigate to the @patternfly/patternfly package you just installed and find the PatternFly 4 CSS stylesheet, `patternfly.css`. This file contains all of the updated PatternFly 4 styles.
-2. Copy `patternfly.css` to your project's CSS directory.
-3. In your HTML file, add the following line to the bottom of your list of CSS files to link to your new stylesheet:
-
-```html noLive
-<link rel="stylesheet" href="css/patternfly.css">
-```
-
-This will make it so that PatternFly 4 styles take precedence over anything that currently resides in your application.
-
-## Building PatternFly 4
-
-PatternFly 4 is distributed as separated modules:
-
-- **Layouts** allow you to structure and organize the content on your pages
-- **Components**, like buttons and alerts, can be assembled together to build applications
-
-Each module delivers a sass file (`scss`) and CSS file so you can either include them in your build environment or consume the CSS from your page header.
-
-- _If you need to overwrite any elements, we recommend extending the variables found in the `.scss` files, rather than manually overwriting the CSS._
-
-All of PatternFly 4's components are kept under `@patternfly/patternfly/components/`.
-
-All of PatternFly 4's layouts are kept under `@patternfly/patternfly/layouts/`.
-
-### Build Examples
-
-#### Webpack
-
-_This example uses the following configuration:_
-
-```json
-webpack: "3.8.1",
-sass-loader: "7.0.0",
-css-loader: "^0.28.11",
-style-loader: "^0.21.0",
-sass: "^1.34.0"
-```
-
-_Code Snippets_
-
-- Import all `.scss` files
-
-```js noLive
-module.exports = {
-  module: {
-    rules: [{
-      test: /\.scss$/,
-      use: [{
-        loader: "style-loader"
-      }, {
-        loader: "css-loader"
-      }, {
-        loader: "sass-loader",
-        options: {
-          includePaths: [
-            "../node_modules/@patternfly/patternfly/"
-          ]
-        }
-      }]
-    }]
-  }
-};
-```
-
-- Import select modules
-
-```js noLive
-module.exports = {
-  module: {
-    rules: [{
-      test: /\.scss$/,
-      use: [{
-        loader: "style-loader"
-      }, {
-        loader: "css-loader"
-      }, {
-        loader: "sass-loader",
-        options: {
-          includePaths: [
-            "../node_modules/@patternfly/patternfly/layouts/Page/",
-            "../node_modules/@patternfly/patternfly/layouts/Grid",
-            "../node_modules/@patternfly/patternfly/components/Content",
-            "../node_modules/@patternfly/patternfly/components/SecondaryNav",
-            "../node_modules/@patternfly/patternfly/components/Button"
-          ]
-        }
-      }]
-    }]
-  }
-};
-```
-
-----
-
-## Typography
-
-With PatternFly 4, we are switching from the Open Sans font family to Overpass. Additionally, we are updating the base font size from `12px` to `16px`, in order to increase readability and accessibility.
-
-Overpass can be utilized in two different ways:
-
-1. Built into PatternFly 4
-    - By default, we include Overpass as part of the PatternFly 4 distributed CSS file. You do not need to do anything with your configuration to use this new font family.
-1. Used as a CDN
-    - If you wish to use the CDN for Overpass rather than the default approach, you will need to update the `sass-utilities/scss-variables.scss` file and build PatternFly 4 as part of your build process.
-    - To use the CDN vs the standard build, update the `sass-utilities/scss-variables.scss` file as follows:
-
-```scss
-  $pf-global--enable-font-overpass-cdn: true !default;
-```
-
-## Icons
-
-### PatternFly icons
-
-TBD
-
-### Font Awesome 5
-
-Font Awesome 5 is now part of PatternFly 4, and we give you options for utilizing this icon library.
-
-#### Font Awesome 5 packaged vs CDN
-
-As part of PatternFly 4, we give users the option to either use Font Awesome 5 as an included set (prebuilt into the CSS), or as a CDN reference.
-
-If you wish to use the CDN, you will need to build PatternFly 4 from source (`node_modules/@patternfly/patternfly/`) and update the `sass-utilities/scss-variables.scss` file as follows:
-
-```scss
-$pf-global--enable-fontawesome-cdn: true !default;
-```
-
-#### Font Awesome 4 & 5
-
-If you are currently using Font Awesome 4 and just want to use Font Awesome 5 immediately, you will need to add the Font Awesome scripts:
-
-```html noLive
-<script defer src="https://use.fontawesome.com/releases/[VERSION]/js/all.js"></script>
-<script defer src="https://use.fontawesome.com/releases/[VERSION]/js/v4-shims.js"></script>
-```
-
-This replaces the bundled Font Awesome 5 files in PatternFly 4, so your configuration file (`sass-utilities/scss-variables.scss`) will need to be updated to remove Font Awesome 5.
-
-```scss
-$pf-global--disable-fontawesome: true !default;
-```
-
-#### Font Awesome 5 tree shaking
-
-Additionally, Font Awesome 5 now provides the option for [tree shaking](https://fontawesome.com/how-to-use/use-with-node-js#tree-shaking). In order to utilize this option, you will need to build PatternFly 4 from source (`node_modules/@patternfly/patternfly/`), and update the `sass-utilities/scss-variables.scss` file accordingly.
-
-The updated `scss-variables.scss` file should look as follows:
-
-```scss
-$pf-global--disable-fontawesome: true !default;
-```