Merge remote-tracking branch 'shopify/main' into next

* shopify/main: (59 commits)
  [Announcement bar] Add social icons (Shopify#2497)
  Update theme version to match the pubic release (Shopify#2698)
  Add release/v10.0.0 branch fixes to main (Shopify#2693)
  fix default UI for dropdown and mega menu (Shopify#2644)
  Fix link formatting in Related Products heading (Shopify#2680)
  Update 2 translation files (Shopify#2637)
  Enable gift card recipient form by default on featured product section (Shopify#2666)
  Gift cards/enable recipient form by default (Shopify#2618)
  Add a Color Scheme setting for Menus-Header (Shopify#2622)
  Made mobile drawer full width by default-header (Shopify#2625)
  Allow multiple announcement bars in Header group (Shopify#2619)
  [Feat Product] Add rating styling sheet (Shopify#2620)
  Fix password page variables (Shopify#2607)
  Fix transform applied when it should not for sliders (Shopify#2606)
  Modify info string for gift card recipient checkbox (Shopify#2588)
  [3D lift animation] Raise hovered card above adjacent cards (Shopify#2589)
  Remove fallback color scheme info text (Shopify#2602)
  Fix CSS specifity issue to cancel animation for theme editor events (Shopify#2605)
  Remove settings daya for icon color (Shopify#2601)
  Follow ups for accessibility of announcements slider (Shopify#2580)
  ...

.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

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

.vscode/settings.json

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

assets/animations.js

@@ -1,28 +1,44 @@
 const SCROLL_ANIMATION_TRIGGER_CLASSNAME = 'scroll-trigger';
-const SCROLL_ANIMATION_ACTIVE_CLASSNAME = 'scroll-trigger--active';
+const SCROLL_ANIMATION_OFFSCREEN_CLASSNAME = 'scroll-trigger--offscreen';
+const SCROLL_ANIMATION_CANCEL_CLASSNAME = 'scroll-trigger--cancel';
 
 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};`);
+      if (elementTarget.classList.contains(SCROLL_ANIMATION_OFFSCREEN_CLASSNAME)) {
+        elementTarget.classList.remove(SCROLL_ANIMATION_OFFSCREEN_CLASSNAME);
+        if (elementTarget.hasAttribute('data-cascade'))
+          elementTarget.setAttribute('style', `--animation-order: ${index};`);
+      }
       observer.unobserve(elementTarget);
+    } else {
+      element.target.classList.add(SCROLL_ANIMATION_OFFSCREEN_CLASSNAME);
+      element.target.classList.remove(SCROLL_ANIMATION_CANCEL_CLASSNAME);
     }
   });
 }
 
-function initializeScrollAnimationTrigger(rootEl = document) {
+function initializeScrollAnimationTrigger(rootEl = document, isDesignModeEvent = false) {
   const animationTriggerElements = Array.from(rootEl.getElementsByClassName(SCROLL_ANIMATION_TRIGGER_CLASSNAME));
   if (animationTriggerElements.length === 0) return;
 
+  if (isDesignModeEvent) {
+    animationTriggerElements.forEach((element) => {
+      element.classList.add('scroll-trigger--design-mode');
+    });
+    return;
+  }
+
   const observer = new IntersectionObserver(onIntersection, {
-    threshold: 0.1,
+    rootMargin: '0px 0px -50px 0px',
   });
   animationTriggerElements.forEach((element) => observer.observe(element));
 }
 
 window.addEventListener('DOMContentLoaded', () => initializeScrollAnimationTrigger());
 
-document.addEventListener('shopify:section:load', (event) => initializeScrollAnimationTrigger(event.target));
+if (Shopify.designMode) {
+  document.addEventListener('shopify:section:load', (event) => initializeScrollAnimationTrigger(event.target, true));
+  document.addEventListener('shopify:section:reorder', () => initializeScrollAnimationTrigger(document, true));
+}