feat: Allow icon sets to be updated (#867)

* feat Working through updates to allow icon sets to be updated

* feat Tidy demo page for icon set

* feat Update styles to support circled states

* feat Developing the storybook instance

* feat Update pfe-icon-panel to support pfe-icon updates

* feat Update icon panel so that if circle exists, use XL, else use LG

* feat Update template for icon panel and adjust styles for simplicity

* feat Update tests

* feat Do we need these anymore?

* feat Update demo page local iconset function and schema for panel

* feat Fix failing test

* feat Fix ES6 syntax in the demo page so it will upgrade in IE11

* feat Fix local icon set

* feat Remove console log from pfelement

* feat Add documentation for icon registery

* feat Update readme

* feat Fix issues uncovered from failing tests

* feat Update index, remove pfe-test

* feat Update changelog

Author: castastrophe

.storybook/utils.js

@@ -241,7 +241,7 @@ export function autoPropKnobs(properties, bridge) {
         }
 
         // Convert the array into an object
-        options.map(item => (opts[item.sentenceCase()] = item));
+        options.map(item => (opts[item] = item));
 
         // If the default value is not defined, use the new null option as the default
         if (defaultValue === "" || defaultValue === null) {

CHANGELOG-prerelease.md

@@ -2,14 +2,19 @@
 
 - [775b821](https://github.com/patternfly/patternfly-elements/commit/775b821702c903f926b8bf9fdf9c948ac949335f) feat: Add automatic labeling to PRs
 - [82bf8e6](https://github.com/patternfly/patternfly-elements/commit/82bf8e6a0d407a651571dac1e37d06a2b14fa3d4) feat: Move PR cards automatically in the Project when labels are changed
-- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Move tab headings to the ShadowDOM
+- [2adef08](https://github.com/patternfly/patternfly-elements/commit/2adef088768ac52f813899d42ba5a45119761ea3) fix: Add watch task to components generated before infra change
+- [235e9a8](https://github.com/patternfly/patternfly-elements/commit/235e9a816b763dc9251e3022c914cba72f148368) fix: Move tab headings to the ShadowDOM
+- [](https://github.com/patternfly/patternfly-elements/commit/) feat: pfe-icon and pfe-icon-panel updates
+    -  Update paths to built-in sets: (#723)
+    -  Storybook icon listing: (#728)
+    -  Icon panel storybook: (#719)
+
 
 ## Prerelease 49 ( 2020-05-29 )
 
 - [9adb7ce](https://github.com/patternfly/patternfly-elements/commit/9adb7ce4e5a672192ca49af8a7b7f9afb5f56e75) feat: pfe-jump-links (#858)
 - [b1e69ee](https://github.com/patternfly/patternfly-elements/commit/b1e69ee03f5a56a64c5f57dbc8327e8a2430f0fc) feat: pfe-dropdown (#668)
 - [7fe6014](https://github.com/patternfly/patternfly-elements/commit/7fe60149d05ec984e4411a73cf2e1f8185a2df98) fix: pfe-tabs vertical height (#796)
-- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Add watch task to components generated before infra change
 
 ## Prerelease 48 ( 2020-05-19 )
 

elements/pfe-badge/package-lock.json

@@ -1,33 +1,36 @@
-# PFElements Icon Panel Element
+# PatternFly Elements | Icon Panel Element
 
 ## Usage
 
 ```html
 <pfe-icon-panel icon="pfe-icon-server">
-  <h3 slot="header">This is pfe-icon-panel</h3>
+  <h3 slot="pfe-icon-panel--header">This is pfe-icon-panel</h3>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-  <pfe-cta slot="footer">
+  <pfe-cta slot="pfe-icon-panel--footer">
     <a href="https://pfelements.github.io">Learn more about PFElements</a>
   </pfe-cta>
 </pfe-icon-panel>
 ```
 
 ## Slots
 
-### header
-The header of the icon panel
+### Header
+The header of the icon panel.  Assign content to this region using `slot="pfe-icon-panel--header`.
 
 ### Default slot (body)
 Any content that is not designated for the header or footer slot, will go to this slot.
 
-### footer
-Use this slot for anything that you want in the footer of the icon panel.
+### Footer
+Use this slot for anything that you want in the footer of the icon panel.  Assign content to this region using `slot="pfe-icon-panel--footer`.
 
 ## Attributes
 
-### icon (observed)
-
-The name of the icon that you want to use. If the value of this attribute changes, the new icon will show up in the UI.
+| Name | Values | Description |
+| --- | --- | --- |
+| `icon` | `iconSet-iconName` | For example, `rh-leaf` loads a leaf icon from an icon set named "rh". |
+| `pfe-color` | `base` `lightest` `lighter` `darker` `darkest` `complement` `accent` `accent` `critical` `important` `moderate` `success` `info` `default` | The color variant to use.  This draws from your theming layer to color the icon.  This will set icon color or background color (if `pfe-circled` is true). |
+| `pfe-circled` | boolean attribute | Whether to draw a circular background behind the icon.  If this is chosen, the icon will render as `lg` size; otherwise the icon renders at the `xl` size. |
+| `pfe-stacked` | boolean attribute | Whether to stack the icon on top of the content. |
 
 ## Test
 

elements/pfe-icon-panel/README.md

@@ -24,7 +24,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/custom-elements-es5-adapter.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
-    <script>require(['../dist/pfe-icon-panel.umd.js'])</script>
+    <script>require(['../dist/pfe-icon-panel.umd', '../../pfe-band/dist/pfe-band.umd', '../../pfe-cta/dist/pfe-cta.umd'])</script>
 
     <noscript>
       <link href="../../pfelement/dist/pfelement--noscript.min.css" rel="stylesheet">
@@ -33,30 +33,59 @@
     <link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
   </head>
   <body unresolved>
-    <pfe-icon-panel icon="rh-server" circled color="critical">
-      <h3 slot="header">Default</h3>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-      <pfe-cta slot="footer"><a href="#">Learn more</a></pfe-cta>
-    </pfe-icon-panel>
-    <pfe-icon-panel icon="rh-server-stack" stacked>
-      <h3 slot="header">Stacked</h3>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-    </pfe-icon-panel>
-    <pfe-icon-panel icon="rh-server-stack-alt1" stacked centered>
-      <h3 slot="header">Stacked &amp; Centered</h3>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-    </pfe-icon-panel>
-    <pfe-icon-panel icon="rh-server-alt1" circled>
-      <h3 slot="header">Circled Default</h3>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-    </pfe-icon-panel>
-    <pfe-icon-panel icon="rh-server-alt2" circled color="dark">
-      <h3 slot="header">Circled Default</h3>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-    </pfe-icon-panel>
-    <pfe-icon-panel icon="rh-server-deploy" circled color="darkest">
-      <h3 slot="header">Circled Default</h3>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-    </pfe-icon-panel>
+    <pfe-band pfe-color="lightest">
+      <h1 slot="pfe-band--header"><code>&lt;pfe-icon-panel&gt;</code></h1>
+      <pfe-icon-panel icon="rh-server">
+        <h3 slot="pfe-icon-panel--header">Default</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        <pfe-cta slot="pfe-icon-panel--footer"><a href="#">Learn more</a></pfe-cta>
+      </pfe-icon-panel>
+    </pfe-band>
+
+    <pfe-band pfe-color="lightest" pfe-size="small">
+      <h2 slot="pfe-band--header">Stacked variants</h2>
+      <div class="pfe-l-grid pfe-m-gutters pfe-m-all-4-col">
+        <pfe-icon-panel icon="rh-server-stack" pfe-stacked>
+          <h3 slot="pfe-icon-panel--header">Default</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        </pfe-icon-panel>
+        <pfe-icon-panel icon="rh-server-stack-alt1" pfe-stacked pfe-centered>
+          <h3 slot="pfe-icon-panel--header">Centered</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        </pfe-icon-panel>
+        <pfe-icon-panel icon="rh-server-alt1" pfe-circled="false" pfe-stacked>
+          <h3 slot="pfe-icon-panel--header">No circle</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        </pfe-icon-panel>
+      </div>
+    </pfe-band>
+  
+    <pfe-band pfe-color="lightest" pfe-size="small">
+      <h2 slot="pfe-band--header">No circle variants</h2>
+      <div class="pfe-l-grid pfe-m-gutters pfe-m-all-8-col-on-sm">
+        <pfe-icon-panel icon="rh-server-alt1" pfe-circled="false">
+          <h3 slot="pfe-icon-panel--header">Default</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        </pfe-icon-panel>
+        <pfe-icon-panel icon="rh-server-alt1" pfe-circled="false" pfe-color="critical">
+          <h3 slot="pfe-icon-panel--header">Color</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        </pfe-icon-panel>
+      </div>
+    </pfe-band>
+  
+    <pfe-band pfe-color="lightest" pfe-size="small">
+      <h2 slot="pfe-band--header">Color variants</h2>
+      <div class="pfe-l-grid pfe-m-gutters pfe-m-all-8-col-on-sm">
+        <pfe-icon-panel icon="rh-server-alt2" pfe-circled pfe-color="darker">
+          <h3 slot="pfe-icon-panel--header">Darker</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        </pfe-icon-panel>
+        <pfe-icon-panel icon="rh-server-deploy" pfe-circled pfe-color="accent">
+          <h3 slot="pfe-icon-panel--header">Accent</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        </pfe-icon-panel>
+      </div>
+    </pfe-band>
   </body>
 </html>