From d294d1db8688ad7fb69817d201ed300afa352335 Mon Sep 17 00:00:00 2001
From: Adam Tirella <adam@tirel.la>
Date: Wed, 22 May 2024 09:46:26 -0700
Subject: [PATCH] chore: Update placeholder images in stories and demos (#9395)

**Related Issue:** #9361 , #9392

## Summary
Removes served images from stories and local demo. We keep them in `.md`
file, as these need to be hosted somewhere in order to work if the
samples are used in an external location. cc @driskull

Ideally, we could use map tiles or something
(https://codepen.io/mac_and_cheese/pen/XWwXXqx?editors=1000) for these,
but not sure how reliable those are.
---
 .../src/components/carousel/carousel.stories.ts       | 11 ++++++-----
 .../calcite-components/src/custom-theme.stories.ts    |  8 ++++----
 packages/calcite-components/src/demos/carousel.html   |  4 ++--
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/calcite-components/src/components/carousel/carousel.stories.ts b/packages/calcite-components/src/components/carousel/carousel.stories.ts
index b455536a448..e779a772579 100644
--- a/packages/calcite-components/src/components/carousel/carousel.stories.ts
+++ b/packages/calcite-components/src/components/carousel/carousel.stories.ts
@@ -2,6 +2,7 @@ import { select, number, text } from "../../../.storybook/fake-knobs";
 import { modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { boolean } from "../../../.storybook/helpers";
+import { placeholderImage } from "../../../.storybook/placeholderImage";
 
 export default {
   title: "Components/Carousel",
@@ -59,7 +60,7 @@ export const carouselAutoplayFullImageWithOverlayAndEdge = (): string =>
     <style>
       .bg-image-example {
         color: red;
-        background-image: url("https://placebear.com/3000/2000");
+        background-image: url("${placeholderImage({ width: 3000, height: 2000 })}");
         background-size: cover;
         padding: 1rem;
         height: 300px;
@@ -89,7 +90,7 @@ export const carouselAutoplayFullImageWithNoOverlay = (): string =>
     <style>
       .bg-image-example {
         color: red;
-        background-image: url("https://placebear.com/3000/2000");
+        background-image: url("${placeholderImage({ width: 3000, height: 2000 })}");
         background-size: cover;
         padding: 1rem;
         height: 300px;
@@ -119,7 +120,7 @@ export const carouselFullImageWithOverlay = (): string =>
     <style>
       .bg-image-example {
         color: red;
-        background-image: url("https://placebear.com/3000/2000");
+        background-image: url("${placeholderImage({ width: 3000, height: 2000 })}");
         background-size: cover;
         padding: 1rem;
         height: 300px;
@@ -203,7 +204,7 @@ export const themed_simple = (): string =>
     <style>
       .bg-image-example {
         color: red;
-        background-image: url("https://placebear.com/3000/2000");
+        background-image: url("${placeholderImage({ width: 3000, height: 2000 })}");
         background-size: cover;
         padding: 1rem;
         height: 300px;
@@ -264,7 +265,7 @@ export const themed_carouselFullImageWithOverlay = (): string =>
     <style>
       .bg-image-example {
         color: red;
-        background-image: url("https://placebear.com/3000/2000");
+        background-image: url("${placeholderImage({ width: 3000, height: 2000 })}");
         background-size: cover;
         padding: 1rem;
         height: 300px;
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index 5ac907ff9b8..b741aa3353b 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -53,16 +53,16 @@ export const themingInteractive = (): string => {
       <div class="demo-column">
         <calcite-accordion>
           <calcite-accordion-item heading="Accordion Item"
-            ><img src="https://placem.at/places?w=200&txt=0" />
+            ><img src="${placeholderImage({ width: 300, height: 200 })}" />
           </calcite-accordion-item>
           <calcite-accordion-item heading="Accordion Item 2"
-            ><img src="https://placem.at/places?w=200&txt=0" />
+            ><img src="${placeholderImage({ width: 300, height: 200 })}" />
           </calcite-accordion-item>
           <calcite-accordion-item heading="Accordion Item 3"
-            ><img src="https://placem.at/places?w=200&txt=0" />
+            ><img src="${placeholderImage({ width: 300, height: 200 })}" />
           </calcite-accordion-item>
           <calcite-accordion-item heading="Accordion Item 4"
-            ><img src="https://placem.at/places?w=200&txt=0" />
+            ><img src="${placeholderImage({ width: 300, height: 200 })}" />
           </calcite-accordion-item>
           <calcite-accordion-item heading="Accordion Item 5" expanded>
             <calcite-tree lines>
diff --git a/packages/calcite-components/src/demos/carousel.html b/packages/calcite-components/src/demos/carousel.html
index b62e236f1a9..4fb500a67fc 100644
--- a/packages/calcite-components/src/demos/carousel.html
+++ b/packages/calcite-components/src/demos/carousel.html
@@ -54,13 +54,13 @@
       }
 
       .bg-image-example {
-        background-image: url("https://placebear.com/3000/2000");
+        background-image: url("./_assets/images/placeholder.svg");
         background-size: cover;
         padding: 1.5rem 3rem;
         height: 300px;
         margin: 0;
         font-size: 32px;
-        color: white;
+        color: red;
         font-weight: 600;
         line-height: 32px;
       }