Adds a new sample events page and adds it to Percy (GoogleChrome#4604)

* Refactors collection usage in the events layout, adds a new sample page and tells percy to take a snapshot of it.

* Updates percy/

* Moves the new sample page over to the handbook as that's where all the percy pages will ultimately live when this is released

* Disables javascript on the meet-the-team page to prevent an issue with the web-tabs component.

* Reenables js on the events page

* Adds data-unresolved attribute to the web-tabs component and removal to BaseElement@firstUpdated,  providing the ability to detect double render.

* Removes double negative.

* Fixes package-lock and adds the new page to the index file.

* Switches from unresolved to resolved.

* revert changes to unrelated file

* revert changes to unrelated file

.percy.js

@@ -4,6 +4,7 @@ const SNAPSHOTS = [
   '/en/docs/handbook/content-types/docs-landing/index.html',
   '/en/docs/handbook/content-types/doc-post/index.html',
   '/en/docs/handbook/content-types/landing/index.html',
+  '/en/docs/handbook/content-types/meet-the-team/index.html',
 ];
 
 module.exports = {
@@ -33,6 +34,6 @@ module.exports = {
     exclude: [
       // Prevent percy to snapshot all index.html files in ./dist dir
       ({ name }) => !SNAPSHOTS.includes(name)
-    ]
+    ],
   }
 }

package.json

@@ -103,7 +103,7 @@
   "devDependencies": {
     "@ava/babel": "^1.0.1",
     "@google-cloud/secret-manager": "^3.2.2",
-    "@percy/cli": "^1.1.0",
+    "@percy/cli": "^1.16.0",
     "@rollup/plugin-commonjs": "^15.1.0",
     "@rollup/plugin-json": "^4.1.0",
     "ava": "^3.12.1",

site/_includes/partials/events-list.njk

@@ -14,13 +14,13 @@
   <web-tab title="{{ 'i18n.events.upcoming_events' | i18n(locale) }}">
     <div id="upcoming-events"
          class="display-grid grid-cols-1 grid-gap-400"
-         total-items="{{ collections.currentEvents.length }}">
-      {% for event in collections.currentEvents.slice(0,show) %}
+         total-items="{{ currentEvents.length }}">
+      {% for event in currentEvents.slice(0,show) %}
         {% include 'partials/event-card.njk' %}
       {% endfor %}
     </div>
 
-    {% if collections.currentEvents.length > show %}
+    {% if currentEvents.length > show %}
       <button id="load-upcoming-events"
          class="load-more__button type--small display-inline-flex"
          aria-controls="upcoming-events"
@@ -33,13 +33,13 @@
   <web-tab title="{{ 'i18n.events.past_events' | i18n(locale) }}">
     <div id="past-events"
          class="display-grid grid-cols-1 grid-gap-400"
-         total-items="{{ collections.pastEvents.length }}">
-      {% for event in collections.pastEvents.slice(0,show) %}
+         total-items="{{ pastEvents.length }}">
+      {% for event in pastEvents.slice(0,show) %}
         {% include 'partials/event-card.njk' %}
       {% endfor %}
     </div>
 
-    {% if collections.pastEvents.length > show %}
+    {% if pastEvents.length > show %}
       <button id="load-past-events"
               class="load-more__button type--small display-inline-flex"
               aria-controls="upcoming-events"

site/_js/web-components/base-element.js

@@ -18,6 +18,14 @@ import {LitElement} from 'lit-element';
 
 /* eslint-disable require-jsdoc */
 export class BaseElement extends LitElement {
+  /**
+   * @param {PropertyValues} changedProperties
+   */
+  firstUpdated(changedProperties) {
+    this.setAttribute('data-resolved', '');
+    super.firstUpdated(changedProperties);
+  }
+
   createRenderRoot() {
     // Disable shadow DOM.
     // Instead templates will be rendered in the light DOM.

site/_js/web-components/web-tabs.js

@@ -111,8 +111,13 @@ export class WebTabs extends BaseElement {
   }
 
   render() {
+    if ('resolved' in this.dataset) {
+      return Array.from(this.children);
+    }
+
     this._tabPanels = Array.from(this.children);
     const tabs = this._formatTabs();
+
     return html`
       <div role="tablist">${tabs}</div>
       ${this._tabPanels}