Merge remote-tracking branch 'upstream/main'

* upstream/main: (205 commits)
  Fix for small screens with large fonts don't fit all content (Shopify#2946)
  Adjust quantity rules margin (Shopify#2948)
  Update Social media settings defaults to remove Shopify links (Shopify#2830)
  added json to barcode to pass gtin as a json string (Shopify#2804)
  Fixed extra margin spacing in collage section when header is empty (Shopify#2770)
  Track state of mouseenter event (Shopify#2934)
  Fix misalignment of total items in quick order list (Shopify#2923)
  Hide vol pricing and qty rules when variant is unavailable (Shopify#2889)
  Fix font family for quick order list (Shopify#2888)
  v11.0.0 version bump and release notes (Shopify#2916)
  Revert "v11.0.0 version bump and release notes (Shopify#2906)" (Shopify#2915)
  Update quantity-popover.css
  v11.0.0 version bump and release notes (Shopify#2906)
  Fix social list styles loading (Shopify#2900)
  Fix an error (Shopify#2903)
  Fix hardcoded info color (Shopify#2893)
  Fix error misalignment for Quick order list (Shopify#2887)
  Replace generic section name with section ID. (Shopify#2884)
  Fix cart drawer for variant list and tablet spacing (Shopify#2880)
  Add missing shadow styles to inputs in Quick Order List (Shopify#2879)
  ...

.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
+  }
+}

README.md

@@ -22,11 +22,12 @@ Dawn represents a HTML-first, JavaScript-only-as-needed approach to theme develo
 You can find a more detailed version of our theme code principles in the [contribution guide](https://github.com/Shopify/dawn/blob/main/.github/CONTRIBUTING.md#theme-code-principles).
 
 ## Getting started
-
 We recommend using Dawn as a starting point for theme development. [Learn more on Shopify.dev](https://shopify.dev/themes/getting-started/create). 
 
 > If you're building a theme for the Shopify Theme Store, then you can use Dawn as a starting point. However, the theme that you submit needs to be [substantively different from Dawn](https://shopify.dev/themes/store/requirements#uniqueness) so that it provides added value for merchants. Learn about the [ways that you can use Dawn](https://shopify.dev/themes/tools/dawn#ways-to-use-dawn).
 
+Please note that the main branch may include code for features not yet released. The "stable" version of Dawn is available in the theme store.
+
 ## Staying up to date with Dawn changes
 
 Say you're building a new theme off Dawn but you still want to be able to pull in the latest changes, you can add a remote `upstream` pointing to this Dawn repository.

assets/animations.js

@@ -0,0 +1,102 @@
+const SCROLL_ANIMATION_TRIGGER_CLASSNAME = 'scroll-trigger';
+const SCROLL_ANIMATION_OFFSCREEN_CLASSNAME = 'scroll-trigger--offscreen';
+const SCROLL_ZOOM_IN_TRIGGER_CLASSNAME = 'animate--zoom-in';
+const SCROLL_ANIMATION_CANCEL_CLASSNAME = 'scroll-trigger--cancel';
+
+// Scroll in animation logic
+function onIntersection(elements, observer) {
+  elements.forEach((element, index) => {
+    if (element.isIntersecting) {
+      const elementTarget = element.target;
+      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, 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, {
+    rootMargin: '0px 0px -50px 0px',
+  });
+  animationTriggerElements.forEach((element) => observer.observe(element));
+}
+
+// Zoom in animation logic
+function initializeScrollZoomAnimationTrigger() {
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+  const animationTriggerElements = Array.from(document.getElementsByClassName(SCROLL_ZOOM_IN_TRIGGER_CLASSNAME));
+
+  if (animationTriggerElements.length === 0) return;
+
+  const scaleAmount = 0.2 / 100;
+
+  animationTriggerElements.forEach((element) => {
+    let elementIsVisible = false;
+    const observer = new IntersectionObserver((elements) => {
+      elements.forEach((entry) => {
+        elementIsVisible = entry.isIntersecting;
+      });
+    });
+    observer.observe(element);
+
+    element.style.setProperty('--zoom-in-ratio', 1 + scaleAmount * percentageSeen(element));
+
+    window.addEventListener(
+      'scroll',
+      throttle(() => {
+        if (!elementIsVisible) return;
+
+        element.style.setProperty('--zoom-in-ratio', 1 + scaleAmount * percentageSeen(element));
+      }),
+      { passive: true }
+    );
+  });
+}
+
+function percentageSeen(element) {
+  const viewportHeight = window.innerHeight;
+  const scrollY = window.scrollY;
+  const elementPositionY = element.getBoundingClientRect().top + scrollY;
+  const elementHeight = element.offsetHeight;
+
+  if (elementPositionY > scrollY + viewportHeight) {
+    // If we haven't reached the image yet
+    return 0;
+  } else if (elementPositionY + elementHeight < scrollY) {
+    // If we've completely scrolled past the image
+    return 100;
+  }
+
+  // When the image is in the viewport
+  const distance = scrollY + viewportHeight - elementPositionY;
+  let percentage = distance / ((viewportHeight + elementHeight) / 100);
+  return Math.round(percentage);
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+  initializeScrollAnimationTrigger();
+  initializeScrollZoomAnimationTrigger();
+});
+
+if (Shopify.designMode) {
+  document.addEventListener('shopify:section:load', (event) => initializeScrollAnimationTrigger(event.target, true));
+  document.addEventListener('shopify:section:reorder', () => initializeScrollAnimationTrigger(document, true));
+}