Add button variant to pfe-autocomplete

.github/workflows/automerge.yml

@@ -1,4 +1,4 @@
-name: automerge
+name: Automerge PR
 on:
   pull_request:
     types: [labeled, unlabeled, synchronize, edited, unlocked]
@@ -8,10 +8,11 @@ on:
     types: [completed]
     status: success
 jobs:
-  automerge:
+  try_to_merge:
+    if: contains(github.event.pull_request.labels.*.name, 'ready to merge')
     runs-on: ubuntu-latest
     steps:
-      - name: automerge
+      - name: Try to automerge PR ${{ github.event.number }}
         uses: "pascalgn/automerge-action@4536e8847eb62fe2f0ee52c8fa92d17aa97f932f"
         env:
           GITHUB_TOKEN: "${{ secrets.ACTIONS }}"

.github/workflows/visualtests.yml

@@ -0,0 +1,59 @@
+name: Visual regression testing
+on:
+  workflow_dispatch:
+  pull_request:
+    types: [labeled]
+env:
+  BROWSERSTACK_KEY: ${{ secrets.BROWSERSTACK_KEY }}
+  BROWSERSTACK_USER: ${{ secrets.BROWSERSTACK_USER }}
+jobs:
+  visual_regression_tests:
+    if: github.event.inputs.manual == true || contains(github.event.pull_request.labels.*.name, 'ready to merge')  || contains(github.event.pull_request.labels.*.name, 'run e2e')
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [12.x]
+    steps:
+      - name: BrowserStackLocal env setup
+        uses: "browserstack/github-actions/setup-env@master"
+        with:
+          username: ${{ secrets.BROWSERSTACK_USER }}
+          access-key: ${{ secrets.BROWSERSTACK_KEY }}
+          build-name: BUILD_INFO
+          project-name: REPO_NAME
+
+      - uses: actions/checkout@v2
+
+      - name: Cache node modules
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+
+      - name: Start BrowserStackLocal
+        uses: "browserstack/github-actions/setup-local@master"
+        with:
+          local-testing: start
+          local-identifier: random
+          # local-logging-level: all-logs
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Visual regression tests
+        run: npm run e2e -- --verbose
+
+      - name: Stop BrowserStackLocal
+        uses: "browserstack/github-actions/setup-local@master"
+        with:
+          local-testing: stop

.gitignore

@@ -1,6 +1,7 @@
 # Development files
 node_modules
 tmp
+.tmp
 
 # Generator config file
 project.conf.json
@@ -16,6 +17,7 @@ doc/index.html
 # Logs
 lerna-debug.log
 npm-debug.log*
+local.log
 
 # Local files
 .env

.travis.yml

@@ -7,8 +7,12 @@ os:
 addons:
   firefox: latest
   chrome: stable
+  browserstack:
+    username: BROWSERSTACK_USER
+    access_key: BROWSERSTACK_KEY
 script:
   - npm test -- --verbose
+#  - npm run e2e -- --verbose
 cache:
   directories:
     - node_modules

README.md

@@ -44,10 +44,10 @@ Many commands have an optional argument of space-separated component name(s), if
 ### Compile
 
 ```shell
-# Run, watch, and build all components
+# Build and watch all components, run the server to preview demo pages
 npm run dev
 
-# Run, watch, and build one or more component(s)
+# Build and watch on one or more components, run the server to preview demo pages
 npm run dev [component-name(s)]
 ```
 
@@ -59,28 +59,35 @@ npm start
 
 # Runs storybook preview tool
 npm run storybook
-
-# Runs build and server (but doesn't watch)
-npm run demo
 ```
 
 ### Compile & Preview
 
 ```shell
-# Runs build, watch, and server processes
+# Runs build and server (but doesn't watch)
+npm run demo [component-name(s)]
+
+# Runs build, watch, and server processes, both demo pages and storybook
 npm run live-demo [component-name(s)]
 ```
 
 ### Testing
 
 ```shell
-# Run tests on all components
+# Build and run tests on all components
 npm run test 
 
-# Run tests on one component
+# Build and run tests on one component
 npm run test [component-name(s)]
 ```
 
+### Open a new pull request
+
+```shell
+# Open a new pull request
+npm run pr 
+```
+
 ## Support
 
 Though we have tested and verified general usability within these frameworks, PFE makes no guarantees about compatibility within specific sites & applications. Please test accordingly. For more details, check out the [official status card per component](https://github.com/patternfly/patternfly-elements/issues?q=is%3Aopen+is%3Aissue+label%3A%22status+tracking+only%22) or visit the [status page on the documentation site](https://patternfly.github.io/patternfly-elements/getting-started/component-status/).

docs/content/theme/color-palette.md

@@ -110,8 +110,8 @@ And finally, you’ll have colors for states such as error, warning, and success
 
 ```css
 :root {
-    --pfe-color--feedback--critical:                 $pfe-color--red-600 !default;
-    --pfe-color--feedback--critical--lightest:       $pfe-color--red-50 !default;
-    --pfe-color--feedback--critical--darkest:        $pfe-color--red-800 !default;
+    --pfe-color--feedback--critical:                 $pf-color-red-200 !default;
+    --pfe-color--feedback--critical--lightest:       $pf-color-red-50 !default;
+    --pfe-color--feedback--critical--darkest:        $pf-color-red-400 !default;
 }
 ```

docs/layouts/_default/list.html

@@ -8,7 +8,7 @@
   <!-- Convert to a partial -->
   <nav id="main-toc">
     <section class="inner-toc">
-      <span class="label big" style="margin-bottom: 1.5rem;">Version 1.0.0-prerelease.53</span>
+      <span class="label big" style="margin-bottom: 1.5rem;">Version 1.0.0-prerelease.56</span>
 
       <h3><a href="/getting-started">Getting Started</a></h3>
       <ul>

docs/layouts/_default/single.html

@@ -8,7 +8,7 @@
   <!-- Convert to a partial -->
   <nav id="main-toc">
     <section class="inner-toc">
-      <span class="label big" style="margin-bottom: 1.5rem;">Version 1.0.0-prerelease.53</span>
+      <span class="label big" style="margin-bottom: 1.5rem;">Version 1.0.0-prerelease.56</span>
 
       <h3><a href="/getting-started">Getting Started</a></h3>
       <ul>

docs/layouts/partials/header.html

@@ -40,7 +40,7 @@
 <!-- Convert to a partial -->
 <nav id="mobile-toc" class="hide">
   <section class="inner-toc">
-    <span class="label big" style="margin-bottom: 1.5rem;">Version 1.0.0-prerelease.53</span>
+    <span class="label big" style="margin-bottom: 1.5rem;">Version 1.0.0-prerelease.56</span>
 
     <h3><a href="/getting-started">Getting Started</a></h3>
     <ul>

elements/pfe-accordion/demo/index.html

@@ -21,9 +21,9 @@
     <link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
 
     <!-- uncomment the es5-adapter if you're using the umd version -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/custom-elements-es5-adapter.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
+    <script src="/examples/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+    <script src="/examples/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+    <script src="/examples/node_modules/requirejs/require.js"></script>
 
     <script>require([
       '../dist/pfe-accordion.umd.js',
@@ -105,7 +105,7 @@ <h2>Accordion component</h2>
       </header>
       <article>
         <pfe-accordion>
-          <pfe-accordion-header>
+          <pfe-accordion-header id="first-header">
             <h3>Nested panel example</h3>
           </pfe-accordion-header>
           <pfe-accordion-panel>

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

@@ -53,20 +53,12 @@ stories.add(PfeAccordion.tag, () => {
   });
 
   // Ask user if they want to add any custom content
-  const customContent = storybookBridge.boolean(
-    "Use custom content?",
-    false,
-    "Content"
-  );
+  const customContent = storybookBridge.boolean("Use custom content?", false, "Content");
 
   // Let the user customize the header + panel set
   if (customContent) {
     for (let i = 0; i < accordionCount; i++) {
-      headings[i] = storybookBridge.text(
-        `Heading ${i + 1}`,
-        "",
-        "accordion-set"
-      );
+      headings[i] = storybookBridge.text(`Heading ${i + 1}`, "", "accordion-set");
       panels[i] = storybookBridge.text(`Panel ${i + 1}`, "", "accordion-set");
     }
   }

elements/pfe-accordion/package.json

@@ -9,7 +9,7 @@
       "pfe-accordion-panel.js"
     ]
   },
-  "version": "1.0.0-prerelease.54",
+  "version": "1.0.0-prerelease.56",
   "publishConfig": {
     "access": "public"
   },
@@ -50,10 +50,10 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@patternfly/pfelement": "^1.0.0-prerelease.51"
+    "@patternfly/pfelement": "^1.0.0-prerelease.56"
   },
   "devDependencies": {
-    "@patternfly/pfe-sass": "^1.0.0-prerelease.54"
+    "@patternfly/pfe-sass": "^1.0.0-prerelease.56"
   },
   "generator-pfelement-version": "0.5.5",
   "bugs": {

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

@@ -86,19 +86,11 @@ class PfeAccordion extends PFElement {
 
     if (attr === "pfe-disclosure") {
       if (newVal === "true") {
-        this._allHeaders().forEach(header =>
-          header.setAttribute("pfe-disclosure", "true")
-        );
-        this._allPanels().forEach(panel =>
-          panel.setAttribute("pfe-disclosure", "true")
-        );
+        this._allHeaders().forEach(header => header.setAttribute("pfe-disclosure", "true"));
+        this._allPanels().forEach(panel => panel.setAttribute("pfe-disclosure", "true"));
       } else {
-        this._allHeaders().forEach(header =>
-          header.setAttribute("pfe-disclosure", "false")
-        );
-        this._allPanels().forEach(panel =>
-          panel.setAttribute("pfe-disclosure", "false")
-        );
+        this._allHeaders().forEach(header => header.setAttribute("pfe-disclosure", "false"));
+        this._allPanels().forEach(panel => panel.setAttribute("pfe-disclosure", "false"));
       }
     }
   }
@@ -180,10 +172,7 @@ class PfeAccordion extends PFElement {
     });
 
     if (headers.length === 1) {
-      if (
-        this.hasAttribute("pfe-disclosure") &&
-        this.getAttribute("pfe-disclosure") === "false"
-      ) {
+      if (this.hasAttribute("pfe-disclosure") && this.getAttribute("pfe-disclosure") === "false") {
         return;
       }
 
@@ -222,9 +211,7 @@ class PfeAccordion extends PFElement {
 
   _expandPanel(panel) {
     if (!panel) {
-      console.error(
-        `${PfeAccordion.tag}: Trying to expand a panel that doesn't exist`
-      );
+      console.error(`${PfeAccordion.tag}: Trying to expand a panel that doesn't exist`);
       return;
     }
 
@@ -244,9 +231,7 @@ class PfeAccordion extends PFElement {
 
   _collapsePanel(panel) {
     if (!panel) {
-      console.error(
-        `${PfeAccordion.tag}: Trying to collapse a panel that doesn't exist`
-      );
+      console.error(`${PfeAccordion.tag}: Trying to collapse a panel that doesn't exist`);
       return;
     }
 
@@ -339,9 +324,7 @@ class PfeAccordion extends PFElement {
     }
 
     if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) {
-      console.error(
-        `${PfeAccordion.tag}: Sibling element to a header needs to be a panel`
-      );
+      console.error(`${PfeAccordion.tag}: Sibling element to a header needs to be a panel`);
       return;
     }
 
@@ -350,15 +333,13 @@ class PfeAccordion extends PFElement {
 
   _previousHeader() {
     const headers = this._allHeaders();
-    let newIndex =
-      headers.findIndex(header => header === document.activeElement) - 1;
+    let newIndex = headers.findIndex(header => header === document.activeElement) - 1;
     return headers[(newIndex + headers.length) % headers.length];
   }
 
   _nextHeader() {
     const headers = this._allHeaders();
-    let newIndex =
-      headers.findIndex(header => header === document.activeElement) + 1;
+    let newIndex = headers.findIndex(header => header === document.activeElement) + 1;
     return headers[newIndex % headers.length];
   }
 

elements/pfe-accordion/test/index.html

@@ -9,7 +9,9 @@
     <script>
       // Load and run all tests (.html, .js):
       WCT.loadSuites([
-        'pfe-accordion_test.html'
+        'pfe-accordion_test.html',
+        'pfe-accordion_react_test.html',
+        'pfe-accordion_vue_test.html'
       ]);
     </script>