fix: add mobile pull quote artwork

tests/mobile-homepage.spec.js

@@ -100,11 +100,14 @@ test("mobile pull quote matches the reference scale", async ({ page }) => {
 
     const quote = await getBox(page.locator(".pull-quote"));
     const text = await getBox(page.locator(".pull-quote__text"));
-    const vectorImage = page.locator(".pull-quote__vector img");
+    const desktopVector = page.locator(".pull-quote__vector--bg");
-    const vector = await getBox(vectorImage);
+    const mobileVector = page.locator(".pull-quote__vector--mobile");
-    const bandHeight = await page.locator(".pull-quote").evaluate((element) =>
+    const vector = await getBox(mobileVector);
-        Number.parseFloat(getComputedStyle(element, "::after").height),
+    const bandHeight = await page
-    );
+        .locator(".pull-quote")
+        .evaluate((element) =>
+            Number.parseFloat(getComputedStyle(element, "::after").height),
+        );
 
     expectNear(quote.height, 361, 6);
     expectNear(bandHeight, 16, 1);
@@ -119,9 +122,9 @@ test("mobile pull quote matches the reference scale", async ({ page }) => {
     expectNear(vector.x, quote.x, 3);
     expectNear(vector.width, quote.width, 3);
     expectNear(vector.height, quote.height - bandHeight, 3);
-    await expect(vectorImage).toHaveCSS("max-width", "none");
+    await expect(mobileVector).toBeVisible();
-    await expect(vectorImage).toHaveCSS("object-fit", "fill");
+    await expect(desktopVector).toBeHidden();
-    await expect(vectorImage).toHaveCSS("position", "static");
+    await expect(mobileVector).toHaveCSS("object-fit", "cover");
 });
 
 test("mobile pull quote scales proportionally through 767px", async ({
@@ -136,11 +139,31 @@ test("mobile pull quote scales proportionally through 767px", async ({
     expectNear(quote.height, 767 * 0.898, 6);
     expect(text.y).toBeGreaterThanOrEqual(quote.y);
     expect(text.y + text.height).toBeLessThanOrEqual(quote.y + quote.height);
-    expectNear(
+    expectNear(text.y + text.height / 2, quote.y + (quote.height - 16) / 2, 8);
-        text.y + text.height / 2,
+});
-        quote.y + (quote.height - 16) / 2,
+
-        8,
+test("pull quote restores the configured artwork at 768px", async ({
-    );
+    page,
+}) => {
+    await page.setViewportSize({ width: 768, height: 900 });
+    await page.goto(homepage);
+
+    const desktopVector = page.locator(".pull-quote__vector--bg");
+    const mobileVector = page.locator(".pull-quote__vector--mobile");
+    const quote = await getBox(page.locator(".pull-quote"));
+    const vector = await getBox(desktopVector);
+    const borderWidth = await page
+        .locator(".pull-quote")
+        .evaluate((element) =>
+            Number.parseFloat(getComputedStyle(element).borderBottomWidth),
+        );
+
+    await expect(desktopVector).toBeVisible();
+    await expect(mobileVector).toBeHidden();
+    expectNear(vector.x, quote.x, 3);
+    expectNear(vector.width, quote.width, 3);
+    expectNear(vector.height, quote.height - borderWidth, 3);
+    await expect(desktopVector).toHaveCSS("object-fit", "cover");
 });
 
 test("mobile pull quote matches the supplied visual reference", async ({
@@ -152,7 +175,7 @@ test("mobile pull quote matches the supplied visual reference", async ({
         "pullquote-reference.png",
         {
             animations: "disabled",
-            maxDiffPixelRatio: 0.111,
+            maxDiffPixelRatio: 0.071,
             threshold: 0.05,
         },
     );

views/blocks/pull-quote/pull-quote.css

@@ -18,6 +18,10 @@
         width: 100%;
     }
 
+    .pull-quote__vector .pull-quote__vector--mobile {
+        display: none;
+    }
+
     .pull-quote__content {
         padding: 5rem 0;
         position: relative;
@@ -32,7 +36,8 @@
         text-align: center;
         text-wrap: balance;
 
-        strong, b {
+        strong,
+        b {
             color: var(--color-cwc-blue-02);
             font-weight: 800;
         }
@@ -66,10 +71,15 @@
         bottom: 1rem;
     }
 
-    .pull-quote .pull-quote__vector img {
+    .pull-quote .pull-quote__vector .pull-quote__vector--bg {
+        display: none;
+    }
+
+    .pull-quote .pull-quote__vector .pull-quote__vector--mobile {
+        display: block;
         height: 100%;
         max-width: none;
-        object-fit: fill;
+        object-fit: cover;
         width: 100%;
     }
 

views/blocks/pull-quote/pull-quote.php

@@ -31,6 +31,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
 	<?php if ( $quote_bg ) : ?>
         <div class="pull-quote__vector" aria-hidden="true">
             <img class="pull-quote__vector--bg" src="<?php echo esc_url( $quote_bg['url'] ); ?>" alt="" loading="lazy" role="presentation" />
+            <img class="pull-quote__vector--mobile" src="<?php echo esc_url( get_theme_file_uri( '/static/img/pullquote-mobile-linework.png' ) ); ?>" alt="" loading="lazy" role="presentation" />
         </div>
 	<?php endif; ?>