Upgrade to latest version of storybook

.storybook/addons.js

@@ -1,3 +1,5 @@
+import '@storybook/addon-notes/register-panel';
 import "@storybook/addon-knobs/register";
 import "@storybook/addon-viewport/register";
-import "@storybook/addon-options/register";
+import '@storybook/addon-backgrounds/register';
+import '@storybook/addon-actions/register';

.storybook/config.js

@@ -1,14 +1,30 @@
-import { configure } from "@storybook/polymer";
-import { setOptions } from "@storybook/addon-options";
+import { configure, addParameters } from "@storybook/polymer";
 
 import "./test-theme.css";
 
 const req = require.context("../elements", true, /\.story\.js$/);
 
-setOptions({
-  name: "PatternFly Elements",
-  url: "/",
-  addonPanelInRight: true
+// Theming doc: https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/theming/index.md
+// Parameters: https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/options-parameter/index.md
+addParameters({
+  options: {
+    panelPosition: "right",
+    theme: {
+      brandTitle: "PatternFly Elements",
+      brandUrl: "/"
+    }
+  },
+  backgrounds: [{
+    name: "light",
+    value: "#fff",
+    default: true
+  },{
+    name: "dark",
+    value: "#252525"
+  }, {
+    name: "saturated",
+    value: "#007a87"
+  }]
 });
 
 function loadStories() {

.storybook/webpack.config.js

@@ -1,7 +1,7 @@
 const path = require("path");
 
-module.exports = (baseConfig, env, defaultConfig) => {
-  defaultConfig.resolve.alias = {
+module.exports = async ({ config, mode }) => {
+  config.resolve.alias = {
     "../../whatwg-fetch/fetch.js": path.join(
       __dirname,
       "../node_modules/whatwg-fetch/fetch.js"
@@ -20,5 +20,5 @@ module.exports = (baseConfig, env, defaultConfig) => {
     )
   };
 
-  return defaultConfig;
+  return config;
 };

CHANGELOG-prerelease.md

@@ -8,7 +8,8 @@ Tag: [v1.0.0-prerelease.26](https://github.com/patternfly/patternfly-elements/re
 - [274e35c](https://github.com/patternfly/patternfly-elements/commit/274e35cd4e8a08721888d8fad195b6fe37a525b7) Navigation component
 - [6b5db77](https://github.com/patternfly/patternfly-elements/commit/6b5db77c20358499f78b66811b73ea6be309318b) Update documentation
 - [d4600dd](https://github.com/patternfly/patternfly-elements/commit/d4600dd1c6e2abfcf8918d06b4eaacb8fb62d208) Add automatic Sass globbing to pfe-sass
-- [](https://github.com/patternfly/patternfly-elements/commit/) pfe-cta: fix functions & IE11 accessibility
+- [27a97e1](https://github.com/patternfly/patternfly-elements/commit/27a97e135986de37ede55504a1630bf974de0e0c) pfe-cta: fix functions & IE11 accessibility
+- []() Upgrade to latest version of storybook #366
 
 ## Prerelease 25 ( 2019-09-10 )
 

elements/pfe-accordion/demo/pfe-accordion.story.js

@@ -1,18 +1,38 @@
 import { storiesOf } from "@storybook/polymer";
+import { withActions } from '@storybook/addon-actions';
 import * as storybookBridge from "@storybook/addon-knobs/polymer";
 import * as tools from "../../../.storybook/utils.js";
 
 import PfeAccordion from "../pfe-accordion";
 
 const stories = storiesOf("Accordion", module);
 
+// Add the documentation
+import about from "../docs/ABOUT.md";
+import slots from "../docs/SLOTS.md";
+import attributes from "../docs/ATTRIBUTES.md";
+import styling from "../docs/STYLING.md";
+import events from "../docs/EVENTS.md";
+stories.addParameters({
+  notes: {
+    About: about,
+    Slots: slots,
+    Attributes: attributes,
+    Events: events,
+    Styling: styling,
+  }
+});
+
 // Define the template to be used
 const template = (data = {}) => {
   return tools.component(PfeAccordion.tag, data.prop, data.slots);
 };
 
 stories.addDecorator(storybookBridge.withKnobs);
 
+// Log events
+stories.addDecorator(withActions("pfe-accordion:change"))
+
 stories.add(PfeAccordion.tag, () => {
   let config = {};
   let headings = [];

elements/pfe-accordion/docs/ABOUT.md

@@ -0,0 +1,7 @@
+The accordion component provides a way to toggle content in a list.
+
+It is comprised of 3 web components:
+
+- `pfe-accordion`
+- `pfe-accordion-header`
+- `pfe-accordion-panel`

elements/pfe-accordion/docs/ATTRIBUTES.md

@@ -0,0 +1,13 @@
+**`color`**
+Changes the color of `<pfe-accordion-header>`
+
+| Value             | Description                                                               |
+| ----------------- | ------------------------------------------------------------------------- |
+| `striped`         | Alternates `light` and `lightest` theme colors on `<pfe-accordion-header>` |
+| `lightest`        | `lightest` theme color                                                    |
+| `light` (default) | `light` theme color                                                       |
+| `base`            | `base` theme color                                                        |
+| `dark`            | `dark` theme color                                                        |
+| `darkest`         | `darkest` theme color                                                     |
+| `complement`      | `complement`theme color                                                   |
+| `accent`          | `accent` theme color                                                      |

elements/pfe-accordion/docs/EVENTS.md

@@ -0,0 +1,10 @@
+### pfe-accordion:change
+
+Fires when an pfe-accordion-header is activated. The detail object contains the
+following
+
+```
+detail: {
+  expanded: Boolean
+}
+```

elements/pfe-accordion/docs/SLOTS.md

@@ -0,0 +1,12 @@
+### Default slot in pfe-accordion
+
+Place the `pfe-accordion-header` and `pfe-accordion-panel` elements here.
+
+### Default slot in pfe-accordion-header
+
+We expect the light DOM of the `pfe-accordion-header` to be a heading level tag
+(h1, h2, h3, h4, h5, h6)
+
+### Default slot in pfe-accordion-panel
+
+Add the content for your accordion panel here.

elements/pfe-accordion/docs/STYLING.md

@@ -0,0 +1,24 @@
+
+| Theme Var Hook                                        | Description                                               | Default                                     |
+| ----------------------------------------------------- | --------------------------------------------------------- | ------------------------------------------- |
+| `--pfe-theme--color--surface--lighter`                 | Default `<pfe-accordion-header>` color                     | $pfe-color--surface--lighter                 |
+| `--pfe-theme--color--surface--lighter--text`           | Default `<pfe-accordion-header>` text color                | $pfe-color--surface--lighter--text           |
+| `--pfe-theme--color--surface--lighter--link--focus`    | Focus border color for default `<pfe-accordion-header>`    | $pfe-color--surface--lighter--link--focus    |
+| `--pfe-theme--color--surface--lightest`                | Lightest `<pfe-accordion-header>` color option             | $pfe-color--surface--lighter                 |
+| `--pfe-theme--color--surface--lightest--text`          | Lightest `<pfe-accordion-header>` text color option        | $pfe-color--surface--lightest--text          |
+| `--pfe-theme--color--surface--lightest--link--focus`   | Focus border color for lightest `<pfe-accordion-header>`   | $pfe-color--surface--lightest--link--focus   |
+| `--pfe-theme--color--surface--base`                    | Base `<pfe-accordion-header>` color option                 | $pfe-color--surface--base                    |
+| `--pfe-theme--color--surface--base--text`              | Base `<pfe-accordion-header>` text color option            | $pfe-color--surface--base--text              |
+| `--pfe-theme--color--surface--base--link--focus`       | Focus border color for base `<pfe-accordion-header>`       | $pfe-color--surface--base--link--focus       |
+| `--pfe-theme--color--surface--darker`                  | Dark `<pfe-accordion-header>` color option                 | $pfe-color--surface--darker                  |
+| `--pfe-theme--color--surface--darker--text`            | Dark `<pfe-accordion-header>` text color option            | $pfe-color--surface--darker--text            |
+| `--pfe-theme--color--surface--darker--link--focus`     | Focus border color for dark `<pfe-accordion-header>`       | $pfe-color--surface--darker--link--focus     |
+| `--pfe-theme--color--surface--darkest`                 | Darkest `<pfe-accordion-header>` color option              | $pfe-color--surface--darkest                 |
+| `--pfe-theme--color--surface--darkest--text`           | Darkest `<pfe-accordion-header>` text color option         | $pfe-color--surface--darkest--text           |
+| `--pfe-theme--color--surface--darkest--link--focus`    | Focus border color for darkest `<pfe-accordion-header>`    | $pfe-color--surface--darkest--link--focus    |
+| `--pfe-theme--color--surface--complement`              | Complement `<pfe-accordion-header>` color option           | $pfe-color--surface--complement              |
+| `--pfe-theme--color--surface--complement--text`        | Complement `<pfe-accordion-header>` text color option      | $pfe-color--surface--complement--text        |
+| `--pfe-theme--color--surface--complement--link--focus` | Focus border color for complement `<pfe-accordion-header>` | $pfe-color--surface--complement--link--focus |
+| `--pfe-theme--color--surface--accent`                  | Accent `<pfe-accordion-header>` color option               | $pfe-color--surface--accent                  |
+| `--pfe-theme--color--surface--accent--text`            | Accent `<pfe-accordion-header>` text color option          | $pfe-color--surface--accent--text            |
+| `--pfe-theme--color--surface--accent--link--focus`     | Focus border color for accent `<pfe-accordion-header>`     | $pfe-color--surface--accent--link--focus     |

elements/pfe-accordion/docs/USAGE.md

@@ -0,0 +1,16 @@
+```html
+<pfe-accordion>
+  <pfe-accordion-header>
+    <h2>Why do wizards need money if they could just create it?</h2>
+  </pfe-accordion-header>
+  <pfe-accordion-panel>
+    <p>There is legislation that decides what you can conjure and what you can not. Because things that you conjure out of thin air will not last, it is illegal in the wizarding world.</p>
+  </pfe-accordion-panel>
+  <pfe-accordion-header>
+    <h2>Why doesn't Harry have a portrait of his parents?</h2>
+  </pfe-accordion-header>
+  <pfe-accordion-panel>
+    <p>The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.</p>
+  </pfe-accordion-panel>
+</pfe-accordion>
+```

elements/pfe-band/demo/pfe-band.story.js

@@ -14,6 +14,14 @@ let theme = "base";
 
 const stories = storiesOf("Band", module);
 
+// Add the readme
+import readme from "../README.md";
+stories.addParameters({
+  notes: {
+    markdown: readme
+  }
+});
+
 // Define the templates to be used
 const template = (data = {}) =>
   tools.component(PfeBand.tag, data.prop, data.slots);

elements/pfe-card/demo/pfe-card.story.js

@@ -19,12 +19,20 @@ import PfeCard from "../pfe-card";
 
 const stories = storiesOf("Card", module);
 
+// Add the readme
+import readme from "../README.md";
+stories.addParameters({
+  notes: {
+    markdown: readme
+  }
+});
+
 // Define the template to be used
 const template = (data = {}) => {
   return tools.component(PfeCard.tag, data.prop, data.slots);
 };
 
-stories.addDecorator(storybookBridge.withKnobs);
+stories.addDecorator(storybookBridge.withKnobs({ escapeHTML: false }));
 
 const defaultHeading = tools.autoHeading(true);
 const defaultBody = tools.autoContent(1, 2);

elements/pfe-collapse/demo/pfe-collapse.story.js

@@ -6,36 +6,44 @@ import { PfeCollapse } from "../pfe-collapse";
 
 const stories = storiesOf("Collapse", module);
 
-stories.addDecorator(storybookBridge.withKnobs);
+// Add the readme
+import readme from "../README.md";
+stories.addParameters({
+  notes: {
+    markdown: readme
+  }
+});
 
+// Define the template to be used
 const template = (data = {}) => {
   return tools.component(PfeCollapse.tag, data.prop, data.slots);
 };
 
+stories.addDecorator(storybookBridge.withKnobs);
+const defaultContent = tools.autoContent(5, 3);
+
 stories.add(PfeCollapse.tag,  () => {
   let config = {};
 
   const props = PfeCollapse.properties;
   const slots = PfeCollapse.slots;
 
-  config.slots = [];
-
-  config.slots.push({
+  config.slots = [{
     content:
       tools.component("pfe-collapse-toggle", {}, [
         {
           content: tools.customTag({
             tag: "h3",
-            content: "Toggle Control"
+            content: "Click me!"
           })
         }
       ]) +
       tools.component("pfe-collapse-panel", {}, [
         {
-          content: tools.autoContent(5, 3)
+          content: defaultContent
         }
       ])
-  });
+  }];
 
   let rendered = template(config);
   return tools.preview(rendered);

elements/pfe-content-set/demo/pfe-content-set.story.js

@@ -7,6 +7,14 @@ import PfeCta from "../../pfe-cta/pfe-cta";
 
 const stories = storiesOf("Content set", module);
 
+// Add the readme
+import readme from "../README.md";
+stories.addParameters({
+  notes: {
+    markdown: readme
+  }
+});
+
 // Define the template to be used
 const template = (data = {}) => {
   return tools.component(PfeContentSet.tag, data.prop, data.slots);

elements/pfe-cta/demo/pfe-cta.story.js

@@ -6,6 +6,14 @@ import PfeCta from "../pfe-cta";
 
 const stories = storiesOf("Call to action", module);
 
+// Add the readme
+import readme from "../README.md";
+stories.addParameters({
+  notes: {
+    markdown: readme
+  }
+});
+
 // Define the template to be used
 const template = (data = {}) => {
   return tools.component(PfeCta.tag, data.prop, data.slots);

elements/pfe-datetime/demo/pfe-datetime.story.js

@@ -6,6 +6,14 @@ import PfeDatetime from "../pfe-datetime";
 
 const stories = storiesOf("Datetime", module);
 
+// Add the readme
+import readme from "../README.md";
+stories.addParameters({
+  notes: {
+    markdown: readme
+  }
+});
+
 // Define the template to be used
 const template = (data = {}) => {
   return tools.component(PfeDatetime.tag, data.prop, data.slots);

elements/pfe-health-index/demo/pfe-health-index.story.js

@@ -4,10 +4,16 @@ import * as tools from "../../../.storybook/utils.js";
 
 import PfeHealthIndex from "../pfe-health-index";
 
-// import cpTheme from "../../../themes/cp-theme/cp-theme.js";
-
 const stories = storiesOf("Health Index", module);
 
+// Add the readme
+import readme from "../README.md";
+stories.addParameters({
+  notes: {
+    markdown: readme
+  }
+});
+
 // Define the template to be used
 const template = (data = {}) => {
   return tools.component(PfeHealthIndex.tag, data.prop, data.slots);

elements/pfe-icon-panel/demo/pfe-icon-panel.story.js

@@ -8,6 +8,15 @@ import {
 import "../pfe-icon-panel.js";
 
 const stories = storiesOf("Icon", module);
+
+// Add the readme
+import readme from "../README.md";
+stories.addParameters({
+  notes: {
+    markdown: readme
+  }
+});
+
 stories.addDecorator(withKnobs);
 
 stories.add("pfe-icon-panel", () => {