Bolt v2.6.0-beta.2

docs-site/src/pages/docs/45-development/25-patching=npm-package.md

@@ -0,0 +1,32 @@
+---
+title: Patching NPM Packages
+---
+
+## How it works
+Use the [patch-package](https://www.npmjs.com/package/patch-package) npm package to apply small changes to npm package
+on the Bolt consumer end (e.g. in a Drupal theme) without the need for a Bolt release. 
+
+## When Patching is helpful
+IMPORTANT: Packages should only be patched with changes we intend to add to the Bolt code base.  Ideally, this means
+there's an open (or better yet, merged) PR on the Bolt side with the exact changes in your patch.  The intention to get
+the problem fixed in Bolt (even if the final upstream code is slightly different) is 100% necessary though.  Changes not
+intended to be merged upstream create a maintenance nightmare and should be handled in custom, non-Bolt code instead.
+
+Patches can be useful for:
+  1. Testing.  Sometimes, a problem can't be fully replicated in Bolt and therefore needs to be pulled into Drupal to
+  confirm the proposed fix works.  Patching allows us to prevent a "guess and check" cycle of multiple hotfix releases.
+  2. Urgency.  For example:
+      - The fix is blocking additional integration work (e.g. someone needs to do more work on modals after we pull in a
+      patch to the modal component).  In this case, the patch allows them to keep working (and validate the proposed
+      solution) without waiting for a Bolt release.
+      - There's an imminent Drupal release and we have only one or two blockers.  In this case, the patch can be tested
+      by QA and even deployed to production without needing an 11th hour Bolt release and full regression testing.
+  3. Ease of development.  A bug discovered in Drupal might be easiest to fix and test directly in the Drupal codebase.
+  This would be most relevant if you were a Drupal developer and already had the Drupal bug reproduced locally.  The
+  patch could then be duplicated as a Bolt PR, or at least used to guide the Bolt development team to the problem. 
+
+## When to avoid patches
+- By default.  Unless one of the "When to patch" scenarios applies, lean toward not patching.
+- Complicated patches.  If a fix involves more than one component, many lines of code, and/or binary files, lean toward
+not patching.
+- Changes are not intended to be merged upstream.

docs-site/src/pages/pattern-lab/_patterns/02-components/band/35-band-with-background.twig

@@ -31,8 +31,9 @@
   } only %}
 </div>
 
+{# @todo: `isBackgroundVideo` will be removed with Bolt v3.0. Hide this demo page for now and remove it entirely with v3.0. #}
 {# Background Video #}
-{% set content_video %}
+{# {% set content_video %}
   {% include "@bolt-components-headline/headline.twig" with {
     size: "xxxlarge",
     text: "This Band Has a Backround Video",
@@ -71,4 +72,4 @@
     ]
   },
   content: content_video
-} only %}
+} only %} #}

docs-site/src/pages/pattern-lab/_patterns/02-components/video/45-video-with-inline-script-and-external-controls-as-background.twig → docs-site/src/pages/pattern-lab/_patterns/02-components/video/_video-with-inline-script-and-external-controls-as-background.twig

@@ -1,3 +1,5 @@
+{# @todo: `isBackgroundVideo` will be removed with Bolt v3.0. Hide this demo page for now and remove it entirely with v3.0. #}
+
 {% embed "@bolt-components-band/band.twig" with {
   theme: "dark",
   size: "medium",

docs-site/src/pages/pattern-lab/_patterns/02-components/video/autoplay/-autoplay-and-loop-hide-controls.twig

@@ -1,6 +1,5 @@
-<p>
-  This video has <code>autoplay</code> set to <code>true</code>, <code>loop</code> set to <code>true</code>, and <code>controls</code> set to <code>false</code>. When a video is autoplaying without any controls, it is muted by default. This is purely intended for decorations and not practical. Autoplaying video with sound is against best practices.
-</p>
+<p>This video has <code>autoplay</code> set to <code>true</code>, <code>loop</code> set to <code>true</code>, and <code>controls</code> set to <code>false</code>. When a video is autoplaying without any controls, it is muted by default. This is purely intended for decorations and not practical. Autoplaying video with sound is against best practices.</p>
+<p><mark>Note: videos are not expected to autoplay on iOS.</mark></p>
 
 {% include "@bolt/video.twig" with {
   "videoId": "5780495299001",

docs-site/src/pages/pattern-lab/_patterns/02-components/video/autoplay/-autoplay-and-loop.twig

@@ -1,6 +1,6 @@
-<p>
-  This video has <code>autoplay</code> set to <code>true</code> and <code>loop</code> set to <code>true</code>.
-</p>
+<p>This video has <code>autoplay</code> set to <code>true</code> and <code>loop</code> set to <code>true</code>.</p>
+<p><mark>Note: videos are not expected to autoplay on iOS.</mark></p>
+
 
 {% include "@bolt/video.twig" with {
   "videoId": "5780495299001",

docs-site/src/pages/pattern-lab/_patterns/02-components/video/autoplay/-autoplay.twig

@@ -1,6 +1,6 @@
-<p>
-  This video has <code>autoplay</code> set to <code>true</code>.
-</p>
+<p>This video has <code>autoplay</code> set to <code>true</code>.</p>
+<p><mark>Note: videos are not expected to autoplay on iOS.</mark></p>
+
 
 {% include "@bolt/video.twig" with {
   "videoId": "5780495299001",

package.json

@@ -58,10 +58,10 @@
     "release:beta": "./scripts/release/release-beta.sh",
     "release:rc": "./scripts/release/release-rc.sh",
     "serve": "node packages/servers/default-server",
-    "setup": "npx lerna bootstrap && yarn run setup:php",
+    "setup": "yarn && yarn run setup:php",
     "setup:full": "yarn --force && yarn run setup:php",
     "setup:php": "npx lerna exec --parallel --scope @bolt/twig-renderer --scope @bolt/drupal-twig-extensions --scope @bolt/core-php --scope @bolt/website -- composer install --prefer-dist --quiet",
-    "setup:quick": "yarn install --production && yarn run setup:php",
+    "setup:quick": "yarn && yarn run setup:php",
     "start": "cd docs-site && yarn run start",
     "test": "npm-run-all --parallel --aggregate-output test:js test:php test:monorepo test:build-tools",
     "test:e2e:full": "./node_modules/.bin/nightwatch --config packages/testing/testing-nightwatch/nightwatch.js --env chrome,firefox,ie11",
@@ -81,7 +81,7 @@
     "test:php": "cd packages/core-php -- composer run test",
     "test:pkgs": "lerna run test",
     "test:types": "tsc",
-    "postinstall": "patch-package"
+    "postinstall": "patch-package && npx lerna run postbootstrap"
   },
   "husky": {
     "hooks": {

packages/build-tools/__tests__/multi-lang/__snapshots__/index.js.snap

@@ -13583,6 +13583,26 @@ bolt-icon[size=\\"xlarge\\"] {
   fill: currentColor;
   fill: var(--bolt-theme-text, currentColor);
 }
+bolt-figure {
+  display: block;
+}
+bolt-figure:not(:last-child) {
+  margin-bottom: 1.155rem;
+}
+.c-bolt-figure {
+  margin: 0;
+  padding: 0;
+  display: block;
+}
+.c-bolt-figure__media {
+  display: block;
+}
+.c-bolt-figure__caption {
+  padding-top: 0.412rem;
+  font-size: 0.8rem;
+  line-height: 1.595;
+  display: block;
+}
 bolt-link {
   outline: 0;
 }
@@ -13654,26 +13674,6 @@ bolt-link {
 .c-bolt-link--headline:hover {
   text-decoration: underline;
 }
-bolt-figure {
-  display: block;
-}
-bolt-figure:not(:last-child) {
-  margin-bottom: 1.155rem;
-}
-.c-bolt-figure {
-  margin: 0;
-  padding: 0;
-  display: block;
-}
-.c-bolt-figure__media {
-  display: block;
-}
-.c-bolt-figure__caption {
-  padding-top: 0.412rem;
-  font-size: 0.8rem;
-  line-height: 1.595;
-  display: block;
-}
 bolt-ratio {
   display: block;
   width: 100%;
@@ -27216,6 +27216,26 @@ bolt-icon[size=\\"xlarge\\"] {
   fill: currentColor;
   fill: var(--bolt-theme-text, currentColor);
 }
+bolt-figure {
+  display: block;
+}
+bolt-figure:not(:last-child) {
+  margin-bottom: 1.65rem;
+}
+.c-bolt-figure {
+  margin: 0;
+  padding: 0;
+  display: block;
+}
+.c-bolt-figure__media {
+  display: block;
+}
+.c-bolt-figure__caption {
+  padding-top: 0.412rem;
+  font-size: 0.8rem;
+  line-height: 1.45;
+  display: block;
+}
 bolt-link {
   outline: 0;
 }
@@ -27282,26 +27302,6 @@ bolt-link {
 .c-bolt-link--headline:hover {
   text-decoration: underline;
 }
-bolt-figure {
-  display: block;
-}
-bolt-figure:not(:last-child) {
-  margin-bottom: 1.65rem;
-}
-.c-bolt-figure {
-  margin: 0;
-  padding: 0;
-  display: block;
-}
-.c-bolt-figure__media {
-  display: block;
-}
-.c-bolt-figure__caption {
-  padding-top: 0.412rem;
-  font-size: 0.8rem;
-  line-height: 1.45;
-  display: block;
-}
 bolt-ratio {
   display: block;
   width: 100%;

packages/components/bolt-band/src/band.js

@@ -38,6 +38,7 @@ class BoltBand extends withLitHtml() {
       this.classList.add('is-ready');
     }
 
+    // @todo: `isBackgroundVideo` will be removed with Bolt v3.0
     if (this.querySelector('bolt-video[is-background-video]')) {
       if (this.expandedHeight === null) {
         this.expandedHeight = '56.25vh';
@@ -88,6 +89,7 @@ class BoltBand extends withLitHtml() {
   }
 
   playHandler(event) {
+    // @todo: `isBackgroundVideo` will be removed with Bolt v3.0
     if (event.detail.isBackgroundVideo && this.expanded === false) {
       this.expand();
 

packages/components/bolt-band/src/band.scss

@@ -5,6 +5,7 @@
 @import '@bolt/core';
 
 // Custom element styles, some are neccessary for the video background
+// @todo: remove any unnecessary styles when `isBackgroundVideo` is removed in Bolt v3.0
 bolt-band {
   display: flex;
   width: 100%;