Merge branch 'master' into 1.0

Author: mwcz

.gitattributes

@@ -0,0 +1,4 @@
+elements/*/*.umd.js     -diff -merge
+elements/*/*.umd.js.map -diff -merge
+themes/*/*.umd.js       -diff -merge
+themes/*/*.umd.js.map   -diff -merge

.storybook/utils.js

@@ -0,0 +1,8 @@
+// This is a collection of functions to reuse within RHElements stories.
+
+export function escapeHTML(html) {
+  const div = document.createElement("div");
+  const text = document.createTextNode(html);
+  div.appendChild(text);
+  return div.innerHTML;
+}

doc/index.html

@@ -13,6 +13,7 @@ <h1>RHElements demos</h1>
             <li><a href="../elements/rh-card/demo">rh-card</a></li>
             <li><a href="../elements/rh-cta/demo">rh-cta</a></li>
             <li><a href="../elements/rh-datetime/demo">rh-datetime</a></li>
+            <li><a href="../elements/rh-health-index/demo">rh-health-index</a></li>
             <li><a href="../elements/rh-icon-panel/demo">rh-icon-panel</a></li>
             <li><a href="../elements/rh-icon/demo">rh-icon</a></li>
             <li><a href="../elements/rh-number/demo">rh-number</a></li>

elements/all/package.json

@@ -14,6 +14,7 @@
     "@rhelements/rh-card": "file:elements/rh-card",
     "@rhelements/rh-cta": "file:elements/rh-cta",
     "@rhelements/rh-datetime": "file:elements/rh-datetime",
+    "@rhelements/rh-health-index": "file:elements/rh-health-index",
     "@rhelements/rh-icon": "file:elements/rh-icon",
     "@rhelements/rh-icon-panel": "file:elements/rh-icon-panel",
     "@rhelements/rh-number": "file:elements/rh-number",

elements/rh-card/rh-card.story.js

@@ -1,13 +1,30 @@
 import { storiesOf } from "@storybook/polymer";
-import { withKnobs, text, select } from "@storybook/addon-knobs/polymer";
+import {
+  withKnobs,
+  text,
+  select,
+  boolean
+} from "@storybook/addon-knobs/polymer";
 import "./rh-card";
 import cpTheme from "../../themes/cp-theme/cp-theme.js";
+import { escapeHTML } from "../../.storybook/utils.js";
 
 const stories = storiesOf("Card", module);
 stories.addDecorator(withKnobs);
 
 stories.add("rh-card", () => {
   const colorLabel = "Color";
+  const ctaLabel = "Call to Action";
+  const ctaTypeLabel = "Priority";
+  const colorDefault = "default";
+  const ctaDefault = false;
+  const ctaTypeDefault = "default";
+  let ctaPriorityValue = "";
+  let cardFooter = "";
+  let cardFooterString = "";
+  let valueAttr = "";
+  let ctaOnDark = "";
+  let colorAttr = "";
 
   const colorOptions = {
     lightest: "lightest",
@@ -19,11 +36,30 @@ stories.add("rh-card", () => {
     accent: "accent"
   };
 
-  const colorDefault = "default";
+  const ctaTypeOptions = {
+    default: "default",
+    primary: "primary",
+    secondary: "secondary"
+  };
 
   const colorValue = select(colorLabel, colorOptions, colorDefault);
+  const ctaValue = boolean(ctaLabel, ctaDefault);
 
-  let colorAttr = colorValue != "default" ? ` color="${colorValue}"` : "";
+  if (ctaValue != false) {
+    let ctaPriorityValue = select(ctaTypeLabel, ctaTypeOptions, ctaTypeDefault);
+    valueAttr =
+      ctaPriorityValue != "default" ? ` priority="${ctaPriorityValue}"` : "";
+    if (
+      colorValue != "lightest" &&
+      colorValue != "light" &&
+      colorValue != "default"
+    ) {
+      ctaOnDark = ' on="dark"';
+    }
+    cardFooter = `\n  <div slot="footer"><rh-cta${valueAttr}${ctaOnDark}><a href="#">Learn more</a></div>`;
+  }
+
+  colorAttr = colorValue != "default" ? ` color="${colorValue}"` : "";
 
   return `
 
@@ -47,7 +83,7 @@ stories.add("rh-card", () => {
     <h2>Your RHElement</h2>
     <rh-card class="custom-card"${colorAttr}>
       <h2 slot="header">Card Heading</h2>
-      <p>Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
+      <p>Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>${cardFooter}
     </rh-card>
   </section>
   <section>
@@ -56,9 +92,9 @@ stories.add("rh-card", () => {
 <code>&lt;rh-card${colorAttr}&gt;
   &lt;h2 slot="header"&gt;Card Heading&lt/h2&gt;
   &lt;p&gt;Become a Member&lt;/p&gt;
+  ${escapeHTML(cardFooter)}
 &lt;/rh-card&gt;</code>
   </pre>
-
   </section>
   <section>
     <h2>At a glance</h2>
@@ -70,14 +106,8 @@ stories.add("rh-card", () => {
       </rh-card>
       <rh-card color="light">
         <h2 slot="header">Light card</h2>
-
-        <p>
-          Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.
-        </p>
-        <p>
-          Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
-        </p>
-
+        <p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
+        <p>Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
         <div slot="footer"><rh-cta priority="secondary"><a href="#">Learn more</a></rh-cta></div>
       </rh-card>
       <rh-card>

elements/rh-health-index/.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    ["env", { "modules": "umd" }]
+  ]
+}

elements/rh-health-index/.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/rh-health-index/.npmignore

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

elements/rh-health-index/.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/rh-health-index/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.