WIP US198278 pfe tab styles

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

@@ -1,10 +1,24 @@
 import { storiesOf } from "@storybook/polymer";
+import { withKnobs, text, select } from "@storybook/addon-knobs/polymer";
+import { escapeHTML } from "../../.storybook/utils.js";
 import "./pfe-accordion";
 
-storiesOf("Accordion", module).add(
-  "pfe-accordion",
-  () => `
-  <pfe-accordion>
+const stories = storiesOf("Accordion", module);
+stories.addDecorator(withKnobs);
+
+stories.add("pfe-accordion", () => {
+  const color = select("Header color", {
+    lightest: "Lightest",
+    striped: "Striped",
+    base: "Base",
+    dark: "Dark",
+    darkest: "Darkest",
+    accent: "Accent",
+    complement: "Complement"
+  });
+
+  return `
+  <pfe-accordion${color ? ` color="${color}"` : ""}>
     <pfe-accordion-header>
       <h2>Why do wizards need money if they could just create it?</h2>
     </pfe-accordion-header>
@@ -37,5 +51,5 @@ storiesOf("Accordion", module).add(
       <p><a href="https://www.pottermore.com/collection/characters" target="blank">Read more about the characters</a></p>
     </pfe-accordion-panel>
   </pfe-accordion>
-  `
-);
+  `;
+});

elements/pfe-hide-show/.babelrc

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

elements/pfe-hide-show/.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-hide-show/.npmignore

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

elements/pfe-hide-show/.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-hide-show/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-hide-show/README.md

@@ -0,0 +1,34 @@
+# PatternFly Elements | Hide-show Element
+
+## Dependencies
+
+Make sure you have [Polyserve][polyserve] and [Web Component Tester][web-component-tester] installed.
+
+    npm install -g polyserve web-component-tester
+
+Requires the pfe-accordion and pfe-tabs components be loaded.
+
+## Dev
+
+    `npm start`
+
+## Test
+
+    `npm run test`
+
+## Build
+
+    `npm run build`
+
+## Demo
+
+Run `npm start` and Polyserve will start a server and open your default browser to the demo page of the element.
+
+## Code style
+
+Hide-show (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
+[polyserve]: https://github.com/Polymer/polyserve
+[web-component-tester]: https://github.com/Polymer/web-component-tester

elements/pfe-hide-show/gulpfile.js

@@ -0,0 +1,5 @@
+// rollup.config.js
+const gulpFactory = require("../../scripts/gulpfile.factory.js");
+const pfelementPackage = require("./package.json");
+
+gulpFactory(pfelementPackage.pfelement);

elements/pfe-hide-show/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@patternfly/pfe-hide-show",
+  "pfelement": {
+    "className": "PfeHideShow",
+    "elementName": "pfe-hide-show"
+  },
+  "version": "1.0.0-prerelease.7",
+  "description": "This PatternFly Element dynamically hides and shows content; the style is determined by the available space.",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.js",
+  "scripts": {
+    "build": "../../node_modules/.bin/gulp && ../../node_modules/.bin/prettier --ignore-path ../../.prettierignore --write '**/*.{js,json}'",
+    "dev": "../../node_modules/.bin/gulp dev",
+    "test": "../../node_modules/.bin/wct --configFile ../../wct.conf.json elements/pfe-hide-show/test/"
+  },
+  "author": {
+    "name": "cd"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@patternfly/pfe-accordion": "^1.0.0-prerelease.7",
+    "@patternfly/pfelement": "^1.0.0-prerelease.7",
+    "@patternfly/pfe-sass": "^1.0.0-prerelease.7",
+    "@patternfly/pfe-tabs": "^1.0.0-prerelease.7"
+  },
+  "generator-pfelement-version": "0.6.8"
+}