Merge branch 'dawn-13'

.github/CONTRIBUTING.md

@@ -63,16 +63,6 @@ We relentlessly and continuously optimize code within the constraint of being We
 
 Themes must be built with purpose. They shouldn’t support each and every feature in Shopify.
 
-### JavaScript not required, fails gracefully
-
-_NoJS is our baseline._
-
-We extract every bit of speed and functionality out of HTTP, semantic HTML, and CSS before writing our first line of JavaScript.
-
-JavaScript can only be used to progressively enhance features. JavaScript cannot be required to find or purchase products. And the little JavaScript that we use must always fail gracefully, such that every browser gets the most “enhanced” experience that it can within the capabilities that it has.
-
->:information_source: We do so not because we expect buyers to experience our storefronts with JavaScript disabled, but because it keeps us aligned with the other principles: writing fast, server-rendered, Web-native code.
-
 ### Server-rendered
 
 _Our main constraint._

.github/workflows/ci.yml

@@ -0,0 +1,26 @@
+name: CI
+on: [push]
+jobs:
+  lhci:
+    name: Lighthouse
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Lighthouse
+        uses: shopify/lighthouse-ci-action@v1
+        with:
+          store: ${{ secrets.SHOP_STORE_OS2 }}
+          password: ${{ secrets.SHOP_PASSWORD_OS2 }}
+          access_token: ${{ secrets.SHOP_ACCESS_TOKEN }}
+          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@v3
+      - name: Theme Check
+        uses: shopify/theme-check-action@v1
+        with:
+          token: ${{ github.token }}

.github/workflows/cla.yml

@@ -0,0 +1,22 @@
+name: Contributor License Agreement (CLA)
+
+on:
+  pull_request_target:
+    types: [opened, synchronize, reopened]
+  issue_comment:
+    types: [created]
+
+jobs:
+  cla:
+    runs-on: ubuntu-latest
+    if: |
+      (github.event.issue.pull_request 
+        && !github.event.issue.pull_request.merged_at
+        && contains(github.event.comment.body, 'signed')
+      ) 
+      || (github.event.pull_request && !github.event.pull_request.merged)
+    steps:
+      - uses: Shopify/shopify-cla-action@v1
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          cla-token: ${{ secrets.CLA_TOKEN }}

LICENSE.md

@@ -0,0 +1,9 @@
+Copyright (c) 2021-present Shopify Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, sell and/or create derivative works of the Software or any part thereof, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The rights granted above may only be exercised to develop themes that integrate or interoperate with Shopify software or services, and, if applicable, to distribute, offer for sale or otherwise make available any such themes via the Shopify Theme Store.   All other uses of the Software are strictly prohibited.
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

assets/base.css

@@ -73,26 +73,6 @@
 
 /* base */
 
-.no-js:not(html) {
-  display: none !important;
-}
-
-html.no-js .no-js:not(html) {
-  display: block !important;
-}
-
-.no-js-inline {
-  display: none !important;
-}
-
-html.no-js .no-js-inline {
-  display: inline-block !important;
-}
-
-html.no-js .no-js-hidden {
-  display: none !important;
-}
-
 .page-width {
   max-width: var(--page-width);
   margin: 0 auto;
@@ -594,6 +574,7 @@ details > * {
   --duration-medium: 300ms;
   --duration-long: 500ms;
   --duration-extra-long: 600ms;
+  --duration-extra-longer: 750ms;
   --duration-extended: 3s;
   --ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
   --animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards;
@@ -714,19 +695,12 @@ summary::-webkit-details-marker {
 }
 
 /* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */
-.focused,
-.no-js *:focus {
+.focused {
   outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
   outline-offset: 0.3rem;
   box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
 }
 
-/* Negate the fallback side-effect for browsers that support :focus-visible */
-.no-js *:focus:not(:focus-visible) {
-  outline: 0;
-  box-shadow: none;
-}
-
 /*
   Focus ring - inset
 */
@@ -737,18 +711,12 @@ summary::-webkit-details-marker {
   box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
 }
 
-.focused.focus-inset,
-.no-js .focus-inset:focus {
+.focused.focus-inset {
   outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
   outline-offset: -0.2rem;
   box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
 }
 
-.no-js .focus-inset:focus:not(:focus-visible) {
-  outline: 0;
-  box-shadow: none;
-}
-
 /*
   Focus ring - none
 */
@@ -765,18 +733,12 @@ summary::-webkit-details-marker {
   box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
 }
 
-.focus-offset.focused,
-.no-js .focus-offset:focus {
+.focus-offset.focused {
   outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
   outline-offset: 1rem;
   box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
 }
 
-.no-js .focus-offset:focus:not(:focus-visible) {
-  outline: 0;
-  box-shadow: none;
-}
-
 /* component-title */
 .title,
 .title-wrapper-with-link {
@@ -2037,34 +1999,14 @@ product-info .loading__spinner:not(.hidden) ~ *,
   list-style-type: none;
 }
 
-.no-js details[open] .modal__toggle {
-  position: absolute;
-  z-index: 5;
-}
-
 .modal__toggle-close {
   display: none;
 }
 
-.no-js details[open] svg.modal__toggle-close {
-  display: flex;
-  z-index: 1;
-  height: 1.7rem;
-  width: 1.7rem;
-}
-
 .modal__toggle-open {
   display: flex;
 }
 
-.no-js details[open] .modal__toggle-open {
-  display: none;
-}
-
-.no-js .modal__close-button.link {
-  display: none;
-}
-
 .modal__close-button.link {
   display: flex;
   justify-content: center;
@@ -2638,10 +2580,6 @@ menu-drawer + .header__search {
   }
 }
 
-.no-js .predictive-search {
-  display: none;
-}
-
 details[open] > .search-modal {
   opacity: 1;
   animation: animateMenuOpen var(--duration-default) ease;
@@ -2661,11 +2599,6 @@ details[open] .modal-overlay::after {
   height: 100vh;
 }
 
-.no-js details[open] > .header__icon--search {
-  top: 1rem;
-  right: 0.5rem;
-}
-
 .search-modal {
   opacity: 0;
   border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
@@ -3308,6 +3241,7 @@ details-disclosure > details {
     opacity: 1;
     animation: none;
     transition: none;
+    transform: none;
   }
 
   .scroll-trigger.scroll-trigger--design-mode.animate--slide-in {

assets/component-cart-drawer.css

@@ -383,7 +383,7 @@ cart-drawer-items::-webkit-scrollbar-track-piece {
 
 .cart-drawer .quantity-popover__info.global-settings-popup {
   transform: translateY(0);
-  right: 0;
+  top: 100%;
 }
 
 .cart-drawer .cart-item__error {

assets/component-cart-items.css

@@ -337,8 +337,7 @@ cart-remove-button .icon-remove {
 @media screen and (min-width: 750px) {
   .cart-items .cart-items__heading--quantity,
   .cart-item .cart-item__quantity,
-  .cart-item__quantity--info quantity-popover > *,
-  .no-js .cart-item .cart-item__quantity--info {
+  .cart-item__quantity--info quantity-popover > * {
     padding-left: 5rem;
   }
 

assets/component-cart.css

@@ -155,7 +155,7 @@ cart-items {
   width: 100%;
 }
 
-.cart__ctas > *:not(noscript:first-child) + * {
+.cart__ctas > * + * {
   margin-top: 1rem;
 }