Merge branch 'master' into issue-310/band-layout

Author: kylebuch8

docs/assets/pfe-base-sass/variables/_colors.scss

@@ -160,7 +160,7 @@ $pfe-global--disabled-state--BorderColor:        $pfe-global--color--gray-mercur
 // Theme colors
 // ========================================================================
 
-// I think these are misplaced. Should be in cp-theme instead.
+// @TODO I think these are misplaced. Should be in the theme instead
 // $pfe-global--primary-color:         $pfe-global--color--red !default;
 // $pfe-global--secondary-color:       $pf-color-black-600 !default;
 //

docs/assets/sass/_colors.scss

@@ -160,7 +160,7 @@ $pfe-global--disabled-state--BorderColor:        $pfe-global--color--gray-mercur
 // Theme colors
 // ========================================================================
 
-// I think these are misplaced. Should be in cp-theme instead.
+// @TODO I think these are misplaced. Should be in the theme instead.
 // $pfe-global--primary-color:         $pfe-global--color--red !default;
 // $pfe-global--secondary-color:       $pf-color-black-600 !default;
 //

docs/content/develop/step-1a.md

@@ -55,7 +55,7 @@ You may also specify multiple elements.  For example, `pfe-card` and `pfe-cta` a
 npm run dev pfe-card pfe-cta
 ```
 
-## Preview Your Changes
+## Preview your changes
 
 From the root of the PatternFly Elements repository, run the start command which will open a browser to the `/doc` directory.
 

docs/content/theme/pfe-layouts.md

@@ -12,7 +12,6 @@ tags = [ "theme" ]
 <link rel="stylesheet" type="text/css" href="//overpass-30e2.kxcdn.com/overpass.css">
 <link rel="stylesheet" type="text/css" href="../pfe-layouts.css">
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/themes/prism.min.css">
-<link rel="stylesheet" type="text/css" href="../../cp-themeset/cp-themeset.css">
 
 <style>
 

elements/pfe-accordion/demo/index.html

@@ -5,7 +5,6 @@
     <title>PFElements: pfe-accordion Demo</title>
 
     <link rel="stylesheet" href="http://overpass-30e2.kxcdn.com/overpass.css" />
-    <!-- <link rel="stylesheet" href="../../../themes/cp-theme/cp-theme.css" /> -->
 
     <noscript>
       <link href="../../pfelement/pfelement-noscript.min.css" rel="stylesheet">

elements/pfe-accordion/src/pfe-accordion.js

@@ -185,8 +185,8 @@ class PfeAccordion extends PFElement {
     headers.forEach(header => {
       const panel = this._panelForHeader(header);
 
-      header.setAttribute("aria-controls", panel.id);
-      panel.setAttribute("aria-labelledby", header.id);
+      header.setAttribute("aria-controls", panel.pfeId);
+      panel.setAttribute("aria-labelledby", header.pfeId);
     });
   }
 
@@ -356,6 +356,18 @@ class PfeAccordionHeader extends PFElement {
     return "pfe-accordion-header.html";
   }
 
+  get pfeId() {
+    return this.getAttribute("pfe-id");
+  }
+
+  set pfeId(id) {
+    if (!id) {
+      return;
+    }
+
+    this.setAttribute("pfe-id", id);
+  }
+
   static get observedAttributes() {
     return ["aria-expanded"];
   }
@@ -372,8 +384,8 @@ class PfeAccordionHeader extends PFElement {
       this.setAttribute("role", "header");
     }
 
-    if (!this.id) {
-      this.id = `${PfeAccordionHeader.tag}-${generateId()}`;
+    if (!this.pfeId) {
+      this.pfeId = `${PfeAccordionHeader.tag}-${generateId()}`;
     }
 
     this.button = this.shadowRoot.querySelector("button");
@@ -456,6 +468,18 @@ class PfeAccordionPanel extends PFElement {
     return "pfe-accordion-panel.html";
   }
 
+  get pfeId() {
+    return this.getAttribute("pfe-id");
+  }
+
+  set pfeId(id) {
+    if (!id) {
+      return;
+    }
+
+    this.setAttribute("pfe-id", id);
+  }
+
   constructor() {
     super(PfeAccordionPanel);
   }
@@ -467,8 +491,8 @@ class PfeAccordionPanel extends PFElement {
       this.setAttribute("role", "region");
     }
 
-    if (!this.id) {
-      this.id = `${PfeAccordionPanel.tag}-${generateId()}`;
+    if (!this.pfeId) {
+      this.pfeId = `${PfeAccordionPanel.tag}-${generateId()}`;
     }
   }
 

elements/pfe-accordion/test/pfe-accordion_test.html

@@ -68,8 +68,8 @@ <h2>Where do the main characters work as adults?</h2>
           assert.equal(header.getAttribute('role'), 'header');
           assert.isTrue(panel.hasAttribute('aria-labelledby'));
           assert.equal(panel.getAttribute('role'), 'region');
-          assert.equal(header.id, panel.getAttribute('aria-labelledby'));
-          assert.equal(panel.id, header.getAttribute('aria-controls'));
+          assert.equal(header.pfeId, panel.getAttribute('aria-labelledby'));
+          assert.equal(panel.pfeId, header.getAttribute('aria-controls'));
         });
 
         test('it should expand a panel when a header is selected', () => {

elements/pfe-autocomplete/LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright 2018 Red Hat, Inc.
+Copyright 2019 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

elements/pfe-autocomplete/README.md

@@ -4,15 +4,12 @@
 
 ## Install
 ```
-npm install @patternfly/cp-theme
 npm install @patternfly/pfe-autocomplete
 ```
 
-cp-theme is a package that contains css variables setting that is used for theming patternfly elements.
 
 Once installed, import it to your application:
 ```
-import '@patternfly/cp-theme.umd.js';
 import '@patternfly/pfe-autocomplete.umd.js';
 ```
 

elements/pfe-autocomplete/demo/index.html

@@ -15,7 +15,6 @@
     <script src="/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
     <script>require([
-      '../../../themes/cp-theme/cp-theme.umd.js',
       '../pfe-autocomplete.umd.js'
     ])</script>
   </head>