Band container <pfe-band> (#254)

* Add dynamic doc listing

* Remove index file from git project

* Initialize band layout

* Add updates to theme for band layout support

* Revert changes from doc listing update branch

* Revert doc changes from dynamic listing branch

* Updating and tidying up structure for band layout

* Update documentation for new sass functions

* Updating values and fixing attribute push

* JS tidy and rhelement cleanup

* Remove deprecated functions

* Tidy up styles for the band layout

* Updating syntax to support aside positioning

* Clean up the storybook template

* Clean up storybook template

* Update band logic to fix error

* Update band layout; fix discrepency in aside alignment

* US162827-band-layout-CSS-fork Added in cp-theme, added some helper text to the demo file to show what layouts are being applied; Adjusted CSS relating to padding and width for the band wrapper, container, & aside regions

* Got the local function working, update band demo file to include more examples, update band sass to accommodate for css var overrides + flexbox

* origin/US162827-band-layout-CSS-fork put back order of band demos; comment out cp theme suggestions - needs discussion

* origin/US162827-band-layout-CSS-fork adjust padding variable naming convention to match BEM

* origin/US162827-band-layout-CSS-fork adjust values of default widths on aside regions, comment out override examples

* origin/US162827-band-layout-CSS-fork put back paragraph styles into CP theme

* origin/US162827-band-layout-CSS-fork  remove commented out code from CP theme

* Update cp-theme.scss

clean up spaces

* Rename rh-band to pfe-band

* Fussing with adding schema and building dynamic storybook

* Commit updated compiled assets

* Add dynamic schema rendering

* Clean up storybook implementation for previewing

* Add tooling for storybook to auto-generate components and content; dynamically pull in schema

* Update compile task to work if schema is present or not; update pfe-card to set container type and update ctas too; fix style issues in pfe-band

* Fix prefixing issue

* Recompile and update variable name to pfe-

* Fix issue with storybook not rendering aside

* Fallbacks for Grid

* Commit current test state

* adding pfe-band header to demo page

* Remove unnecessary file edits from this PR

* Update tests for pfe-band

* Add a todo for aside tests

* Update readme

* Update logic and fix layout but in pfe-band

* Compile and add polyfills

* Add a README update to clarify slot names

* Remove inline comments for unused code

* Fix issue with storybook instance

* Reduce complexity in the band styles; simplify and bring together grid styles

* Compile after merging in master

* Fix band layout!!!

* Update rendering for storybook

* Update storybook to honor input fields for content

* Revert files that were edited by IDE

* Add context setting on card layout as well

* Updating functionality for json schema implementation

* Update pfelement to clean up the commented out code; beautify run on pfe-band.story.js

* Update BEM naming in band styles; update the demo page for band; add the context update to card; added a fill-height helper class for layouts to allow a flex-grow approach with grid too; updated the pfe-local function to accept fallbacks

* Push up BEM updates; getting IE to work with demo page

* Commit UMD compiled assets

* Add this.props abstraction for properties in pfelement; update demo page with better comments

* Add variables for horizontal and vertical gutters

* Add viewport in demo template

* Updated demo listing page

* Update pfe-band test for new slot names

* Documentation updates requested in code review

* updating the readme

* Pull out files that are unrelated; note that we need to open a PR to run the build on all assets in the repo to prevent this in future

* Update prerelease versions

* Update test defaults for weird CI failure

* Comment out tests that depend on viewport width

Author: castastrophe

.storybook/utils.js

@@ -19,41 +19,121 @@ String.prototype.sentenceCase = function() {
 };
 
 // Print attributes based on an object
-const listProperties = obj =>
+const listProperties = (obj, prefix = "") =>
   Object.entries(obj)
     .map(set => {
       let p = set[0];
       let v = set[1];
       let print = set[2] || true;
-      return print && v && v !== "null" ? ` ${p}="${v}"` : "";
+      return print && v && v !== "null" ? ` ${p !== "slot" ? `${prefix ? `${prefix}-` : ""}` : ""}${p}="${v}"` : "";
     })
     .join("");
 
 // Create a tag based on a provided object
-export function customTag(obj) {
-  return `<${obj.tag ? obj.tag : "div"} ${
-    obj.slot ? `slot="${obj.slot}"` : ""
-  }${listProperties(obj.attributes || {})}>${obj.content || autoContent()}</${
-    obj.tag ? obj.tag : "div"
-  }>`;
+// Accepts an object that can contain (all optional):
+// -- tag: html tag such as h1 or p, default is div
+// -- slot: rendered as slot="<input>"
+// -- attributes: passed through the listProperties function
+// -- content: Accepts html or plain text or renders default content
+export function customTag(obj, prefix = "") {
+  let start = "";
+  let end = "";
+  // If a tag is defined, or it has slots or attributes to apply
+  // render an open and close tag
+  if (obj.tag || obj.slot || obj.attributes) {
+    start += "<";
+    end += "</";
+    // If a tag is defined, use that, else use a div
+    if (obj.tag) {
+      start += obj.tag;
+      end += obj.tag;
+    } else {
+      start += "div";
+      end += "div";
+    }
+    start += obj.slot ? ` slot="${obj.slot}"` : "";
+    start += obj.attributes ? listProperties(obj.attributes || {}, prefix) : "";
+    start += ">";
+    end += ">";
+  }
+  return `${start}${obj.content || autoContent()}${end}`;
 }
 
+const parseMarkup = string => {
+  // Define the regex for use below
+  let find = /<(\w+[-\w]*)(.*?)>/;
+  let quotes = /['\"]+/g;
+  // Initialize the empty return object
+  let obj = {};
+  // Initialize the attributes object
+  obj.attributes = {};
+  // Capture the tag name and properties
+  let result = string.match(find);
+  // If results remain in the array, get the tag
+  if (result !== null && result.length > 0 && typeof result[1] === "string") {
+    obj.tag = result[1];
+    // If results remain in the array, get the attributes
+    if (result.length > 1 && typeof result[2] === "string") {
+      // Break the attributes apart using the spaces
+      let attr = result[2].trim().split(" ");
+      // If any attributes exist, break them down further
+      if (attr.length > 0) {
+        attr.forEach(set => {
+          // Break the attributes apart using the equal sign
+          let items = set.trim().split("=");
+          // If items are returned and they are both strings, add them to the attributes object
+          if (items.length > 1 && typeof items[0] === "string" && typeof items[1] === "string") {
+            obj.attributes[items[0].trim()] = items[1].replace(quotes, "").trim();
+          }
+        });
+      }
+    }
+    // Strip the original string of the wrapper element
+    obj.content = string.replace(new RegExp(`<\/?${obj.tag}.*?>`, "g"), "");
+  } else {
+    obj.tag = "div";
+    obj.content = string;
+  }
+  // Return the new object with the metadata
+  return obj;
+};
+
 // If a slot is a component or content, render that raw
 // if it's got a tag defined, run the custom tag function
 const renderSlots = (slots = []) =>
-  slots.map(slot => (slot.content ? slot.content : "")).join("");
+  slots
+    .map(slot => {
+      // If there are slot or attribute values but no tag defined
+      // Grep the content to see if we can use the first tag passed in
+      let has_tag = typeof slot.tag !== "undefined";
+      let has_slot = typeof slot.slot !== "undefined" && slot.slot.length > 0;
+      let has_attr = typeof slot.attributes !== "undefined" && Object.keys(slot.attributes).length > 0;
+      if (!has_tag && (has_slot || has_attr)) {
+        Object.assign(slot, parseMarkup(slot.content));
+      }
+      return slot.content
+        ? customTag({
+            tag: slot.tag,
+            slot: slot.slot,
+            attributes: slot.attributes,
+            content: slot.content
+          })
+        : "";
+    })
+    .join("");
 
 // Creates a component dynamically based on inputs
-export function component(tag, attributes = {}, slots = []) {
-  return `<${tag}${listProperties(attributes)}>${
-    slots.length > 0 ? renderSlots(slots) : autoContent()
-  }</${tag}>`;
+export function component(tag, attributes = {}, slots = [], prefix = "") {
+  return `<${tag}${listProperties(attributes, prefix)}>${slots.length > 0 ? renderSlots(slots) : autoContent()}</${tag}>`;
 }
 
 // Create an automatic heading
 export function autoHeading(short = false) {
   let length = short ? Math.random() + 2 : Math.random() * 10 + 5;
-  return loremIpsum({ count: length, units: "words" }).sentenceCase();
+  return loremIpsum({
+    count: length,
+    units: "words"
+  }).sentenceCase();
 }
 
 // Create a set of automatic content
@@ -121,43 +201,11 @@ export function autoContentKnobs(slots, bridge) {
 }
 
 export function demo(markup) {
-  // Prettify and clean the markup for rendering
-  cleaner.clean(
-    markup,
-    {
-      indent: "    ",
-      "remove-attributes": [],
-      "break-around-tags": [
-        "body",
-        "blockquote",
-        "br",
-        "div",
-        "h1",
-        "h2",
-        "h3",
-        "h4",
-        "h5",
-        "h6",
-        "head",
-        "hr",
-        "link",
-        "meta",
-        "p",
-        "table",
-        "title",
-        "td",
-        "tr",
-        "a"
-      ],
-      wrap: 0
-    },
-    html => (markup = html)
-  );
-
   // Return the rendered markup and the code snippet output
   return `${markup}`;
 }
 
+// prettier-ignore-start
 export function code(markup) {
   // Prettify and clean the markup for rendering
   cleaner.clean(
@@ -185,18 +233,21 @@ export function code(markup) {
         "title",
         "td",
         "tr",
-        "a"
+        "a",
+        "section",
+        "article",
+        "footer",
+        "aside"
       ],
       wrap: 0
     },
     html => (markup = html)
   );
 
   // Return the rendered markup and the code snippet output
-  return `<pre style="white-space: pre-wrap; padding: 20px 50px; background-color: #f0f0f0; font-weight: bold; border: 1px solid #bccc;">${escapeHTML(
-    markup
-  )}</pre>`;
+  return `<pre style="white-space: pre-wrap; padding: 20px 50px; background-color: #f0f0f0; font-weight: bold; border: 1px solid #bccc;">${escapeHTML(markup)}</pre>`;
 }
+// prettier-ignore-end
 
 export function preview(markup) {
   return demo(markup) + code(markup);

doc/index.html

@@ -12,6 +12,7 @@ <h1>Demos</h1>
         <ul id="demos">
 					<li><a href="../elements/pfe-accordion/demo">pfe-accordion</a></li>
 					<li><a href="../elements/pfe-autocomplete/demo">pfe-autocomplete</a></li>
+					<li><a href="../elements/pfe-band/demo">pfe-band</a></li>
 					<li><a href="../elements/pfe-card/demo">pfe-card</a></li>
 					<li><a href="../elements/pfe-content-set/demo">pfe-content-set</a></li>
 					<li><a href="../elements/pfe-cta/demo">pfe-cta</a></li>

elements/pfe-band/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": [["env", { "modules": false }]],
+  "plugins": ["external-helpers"]
+}

elements/pfe-band/.editorconfig

@@ -0,0 +1,17 @@
+# EditorConfig: http://EditorConfig.org
+
+# Top-most EditorConfig file
+root = true
+
+# Rules for JavaScript files:
+
+[*.{js,py,json,sh,html}]
+# 4 space indentation
+indent_style = space
+indent_size = 2
+# No trailing spaces
+trim_trailing_whitespace = true
+# Unix-style newlines
+end_of_line = lf
+# Newline ending every file
+insert_final_newline = true

elements/pfe-band/.npmignore

@@ -0,0 +1 @@
+node_modules

elements/pfe-band/.travis.yml

@@ -0,0 +1,18 @@
+language: node_js
+dist: trusty
+sudo: required
+addons:
+  firefox: "latest"
+  apt:
+    sources:
+      - google-chrome
+    packages:
+      - google-chrome-stable
+node_js: stable
+before_install:
+  - npm install -g web-component-tester
+install:
+  - npm install
+before_script:
+script:
+  - xvfb-run npm run test

elements/pfe-band/LICENSE.txt

@@ -0,0 +1,19 @@
+Copyright 2018 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-band/README.md

@@ -0,0 +1,85 @@
+# PatternFly Element | Band container
+
+This container element provides a set of slots in which to render banded content.
+
+## Slots
+
+All slots other than `pfe-band--body` are optional.  If the slot is not defined, the container tag for it will not be rendered in the template.
+
+- `pfe-band--header`: This slot renders at the top of the container and generally contains the title, headline, and or subheadline content.  Other possible candidates include a set of social sharing links or tags that describe the content below. The recommended tag for this slot is the `header` tag with h-level or p tags contained within it.
+- **Default slot**: This is the default slot and contains the bulk of the content in this element.  Paragraph text or a grid of cards or images might be rendered in this region.  Recommended tag for this slot is the `article` tag. Any content not assigned to a slot will be rendered here.
+- `pfe-band--footer`: This slot is typically used for calls-to-action or footnotes and is pushed to the bottom of the container.  Recommended tags include `pfe-cta` or `footer`.
+- `pfe-band--aside`: This slot is for content that should be rendered to the right or left of the default slot on desktop.  Asides often contain `pfe-card` or interest forms which provide users a little more information or context for the band.
+
+## Attributes
+
+<style>
+    .color-preview {
+        display: inline-block;
+        width: 1em;
+        height: 1em;
+        vertical-align: middle;
+        background-color: var(--bg, #ffffff);
+        border: 1px solid #444444;
+    }
+</style>
+
+There are several attributes available for customizing the visual treatment of this container.
+
+- `pfe-color`: Options include darkest, darker, accent, complement, lighter, lightest.  The band has a default value of `#dfdfdf`. Your theme will influence these colors so check there first if you are seeing inconsistencies.
+
+    | color | hex |
+    |-------|-----|
+    | default | <span class="color-preview" style="--bg:#dfdfdf"></span> #dfdfdf |
+    | darker | <span class="color-preview" style="--bg:#464646"></span> #464646 |
+    | darkest | <span class="color-preview" style="--bg:#131313"></span> #131313 |
+    | accent | <span class="color-preview" style="--bg:#fe460d"></span> #fe460d |
+    | complement | <span class="color-preview" style="--bg:#0477a4"></span> #0477a4 |
+    | lighter | <span class="color-preview" style="--bg:#ececec"></span> #ececec |
+    | lightest | <span class="color-preview" style="--bg:#ffffff"></span> #ffffff |
+
+- `pfe-img-src`: Optional background image applied to the entire band container.  Alignment of this image can be managed using the `--pfe-band--BackgroundPosition` variable which is set to `center center` by default.
+- `pfe-size`: Optionally adjusts the padding on the container.  Accepts: `small`.
+
+### Aside settings
+The aside settings have defaults and if no attribute is defined on the element's main tag, these attributes will be injected with their default values automatically.
+
+- `pfe-aside-desktop`: This influences where the aside is rendered at the desktop view and are indicated relative to the body content. Options are `right` or `left`. **Right is the default.**
+- `pfe-aside-mobile`: This influences the position of the aside in the mobile view as well as where in the DOM the aside markup is rendered. These names are relative to the body content. Options are `top` or `bottom`. **Bottom is the default.**
+- `pfe-aside-height`: This influences the height of the aside region relative to the body content. Options are `full` or `body`. A `full` height starts at the top of the band and spans the header, body, and footer regions. A `body` height spans the body and footer regions only with the header region sitting above it in the rendered view. **Body is the default.**
+
+## Variables
+There are several powerful variables available to hook into and override default styles.
+
+- Verical and horizontal padding: `--pfe-band--Padding--vertical` and `--pfe-band--Padding--horizontal` accept size values such as px, em, rem, etc.
+- Background color: Though using the `pfe-color` attribute is strongly recommended when setting the background color for the band, you can also use completely custom colors by updating the `--pfe-band--BackgroundColor` variable.  If you update this value manually, you should also update the `--pfe-broadcasted--color--text`, `--pfe-broadcasted--color--ui-link`[--visited, --hover, --focus] at the same time so that the text and links rendered on this background color show up correctly.
+- Background position: This is designed for use with the `pfe-img-src` attribute to allow you to align your background image.  Default value is `center center`.
+- Border: This allows the customization of a border around the entire container and is primarily designed to be used to add a top and/or bottom border line.  This variable accepts the entire border shorthand and is set to transparent by default.
+- Layout: The band has a rudimentary layout system designed to be used inside the slot regions for the header, body, footer, and aside.  It uses the CSS grid spec and creates a stacked layout by default.  By updating these values, you will be able to create simple grid layouts.  Please note that these do not include fallbacks for older browsers. Possible values include: `1fr 1fr`, `repeat(3, 1fr)`, `repeat(auto-fill, minmax(300px, 1fr))`
+    * `--pfe-band--layout`: Applied to `.pfe-band__container`.
+    * `--pfe-band_header--layout`: Applied to `.pfe-band__header`.
+    * `--pfe-band_body--layout`: Applied to `.pfe-band__body`.
+    * `--pfe-band_footer--layout`: Applied to `.pfe-band__footer`.
+    * `--pfe-band_aside--layout`: Applied to `.pfe-band__aside`.
+
+## Test
+
+    npm run test
+
+## Build
+
+    npm run build
+
+## Demo
+
+From the PFElements root directory, run:
+
+    npm start
+
+## Code style
+
+Band (and all PatternFly Elements) 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://github.com/prettier/prettier/#editor-integration
+[web-component-tester]: https://github.com/Polymer/web-component-tester