Update to Dawn 9.0.0 (#2531)

9.0.0 Update

.github/workflows/ci.yml

@@ -5,21 +5,21 @@ jobs:
     name: Lighthouse
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Lighthouse
-        uses: shopify/lighthouse-ci-action@v1
+        uses: shopify/lighthouse-ci-action@v1.1.1
         with:
           store: ${{ secrets.SHOP_STORE_OS2 }}
           password: ${{ secrets.SHOP_PASSWORD_OS2 }}
           access_token: ${{ secrets.SHOP_ACCESS_TOKEN }}
-          product_handle: puppy
           collection_handle: all
           lhci_github_app_token: ${{ secrets.LHCI_GITHUB_TOKEN }}
+          pull_theme: ${{ secrets.SHOP_PULL_THEME }}
   theme-check:
     name: Theme Check
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Theme Check
         uses: shopify/theme-check-action@v1
         with:

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.liquid",
+      "options": {
+        "singleQuote": false
+      }
+    }
+  ]
+}

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["shopify.theme-check-vscode"]
+  "recommendations": ["shopify.theme-check-vscode", "esbenp.prettier-vscode"]
 }

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "editor.formatOnSave": false,
+  "[javascript]": {
+    "editor.formatOnSave": true
+  },
+  "[css]": {
+    "editor.formatOnSave": true
+  },
+  "[liquid]": {
+    "editor.formatOnSave": true
+  }
+}

assets/animations.js

@@ -0,0 +1,28 @@
+const SCROLL_ANIMATION_TRIGGER_CLASSNAME = 'scroll-trigger';
+const SCROLL_ANIMATION_ACTIVE_CLASSNAME = 'scroll-trigger--active';
+
+function onIntersection(elements, observer) {
+  elements.forEach((element, index) => {
+    if (element.isIntersecting) {
+      const elementTarget = element.target;
+      elementTarget.classList.add(SCROLL_ANIMATION_ACTIVE_CLASSNAME);
+      if (elementTarget.hasAttribute('data-cascade'))
+        elementTarget.setAttribute('style', `--animation-order: ${index};`);
+      observer.unobserve(elementTarget);
+    }
+  });
+}
+
+function initializeScrollAnimationTrigger(rootEl = document) {
+  const animationTriggerElements = Array.from(rootEl.getElementsByClassName(SCROLL_ANIMATION_TRIGGER_CLASSNAME));
+  if (animationTriggerElements.length === 0) return;
+
+  const observer = new IntersectionObserver(onIntersection, {
+    threshold: 0.1,
+  });
+  animationTriggerElements.forEach((element) => observer.observe(element));
+}
+
+window.addEventListener('DOMContentLoaded', () => initializeScrollAnimationTrigger());
+
+document.addEventListener('shopify:section:load', (event) => initializeScrollAnimationTrigger(event.target));