pfe-avatar (#222)

* add rh-avatar, first pass

* add `rhelement.var` to retrieve CSS custom properties

* refactor some rh-avatar attributes

* fix rh-avatar test

* add user-provided image test

* format rh-avatar scss with prettier

* add rh-avatar support for --rh-avatar--colors CSS var

* update avatar README

* rh-avatar: handle 3+ initials in a name

* remove initials from avatar

* add markup preview to avatar in storybook

* removing WIP from README

* removing commented out sass

* adding new color defaults

* making the story a bit better

* commenting out the root css variable override

* built files

* rebuild test index file

* remove copyright and useless switch statement

* remove unrelated elements' bundles

* remove all 'initials' mentions from pfe-avatar README

* prefix pfe-avatar attributes with 'pfe-'

* fix avatar demo and storybook

* fix avatar's storybook markup preview

Author: mwcz

.storybook/utils.js

@@ -25,7 +25,9 @@ const listProperties = (obj, prefix = "") =>
       let p = set[0];
       let v = set[1];
       let print = set[2] || true;
-      return print && v && v !== "null" ? ` ${p !== "slot" ? `${prefix ? `${prefix}-` : ""}` : ""}${p}="${v}"` : "";
+      return print && v && v !== "null"
+        ? ` ${p !== "slot" ? `${prefix ? `${prefix}-` : ""}` : ""}${p}="${v}"`
+        : "";
     })
     .join("");
 
@@ -82,8 +84,14 @@ const parseMarkup = string => {
           // 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();
+          if (
+            items.length > 1 &&
+            typeof items[0] === "string" &&
+            typeof items[1] === "string"
+          ) {
+            obj.attributes[items[0].trim()] = items[1]
+              .replace(quotes, "")
+              .trim();
           }
         });
       }
@@ -107,7 +115,9 @@ const renderSlots = (slots = []) =>
       // 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;
+      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));
       }
@@ -124,7 +134,9 @@ const renderSlots = (slots = []) =>
 
 // Creates a component dynamically based on inputs
 export function component(tag, attributes = {}, slots = [], prefix = "") {
-  return `<${tag}${listProperties(attributes, prefix)}>${slots.length > 0 ? renderSlots(slots) : autoContent()}</${tag}>`;
+  return `<${tag}${listProperties(attributes, prefix)}>${
+    slots.length > 0 ? renderSlots(slots) : autoContent()
+  }</${tag}>`;
 }
 
 // Create an automatic heading
@@ -245,7 +257,9 @@ export function code(markup) {
   );
 
   // 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
 

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-avatar/demo">pfe-avatar</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>

elements/pfe-accordion/pfe-accordion.js

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

elements/pfe-autocomplete/pfe-autocomplete.js

@@ -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-avatar/.babelrc

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

elements/pfe-avatar/.editorconfig

@@ -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-avatar/.npmignore

@@ -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-avatar/.travis.yml

@@ -0,0 +1,65 @@
+PFElements Avatar Element
+
+`pfe-avatar` is an element for displaying a user's avatar image. If the user in question has provided a custom avatar, provide it and it will be displayed. If they don't, a nice colored pattern will be generated based on their name. A specific name will always generate the same pattern, so users' avatars will stay static without the need for storing their generated image.
+
+## Usage
+
+```html
+<pfe-avatar name="Eleanore Stillwagon"></pfe-avatar>
+
+<pfe-avatar name="Libbie Koscinski" shape="rounded" pattern="squares"></pfe-avatar>
+
+<pfe-avatar name="Blanca Rohloff" pattern="triangles"></pfe-avatar>
+
+<pfe-avatar name="Edwardo Lindsey" src="https://clayto.com/2014/03/rgb-webgl-color-cube/colorcube.jpg"></pfe-avatar>
+```
+
+## Attributes
+
+### pfe-name (observed) (required)
+
+The user's name, either given name and family name, or username. When displaying a pattern, the name will be used to seed the pattern generator.
+
+### pfe-src (observed)
+
+The URL to the user's custom avatar image. It will be displayed instead of a random pattern.
+
+### pfe-pattern (observed)
+
+The type of pattern to display. Currently supported values are `"squares"` and `"triangles"`.
+
+| squares                         | triangles                           |
+| ------------------------------- | ----------------------------------- |
+| ![squares image](./squares.png) | ![triangles image](./triangles.png) |
+
+### pfe-shape (observed)
+
+The shape of the avatar itself. Supported values are `"square"` (default), `"rounded"`, and `"circle"`.
+
+## Styling
+
+| Theme Var Hook         | Description                                                                                                                                                   | Default                                   |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| `--pfe-avatar--colors` | A space-delimited list of colors to use for generated patterns. Only hex values are supported, ex: `#fc0` or `#0fcb41`. Any number of colors may be provided. | `#3B0083 #f0ab00 #007a87 #00b9e4 #92d400` |
+
+## Test
+
+    npm run test
+
+## Build
+
+    npm run build
+
+## Demo
+
+From the PFElements root directory, run:
+
+    npm start
+
+## Code style
+
+Avatar (and all PFElements) 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://prettier.io/docs/en/editors.html
+[web-component-tester]: https://github.com/Polymer/web-component-tester