From 96a10123df74d4a629dc3ee0e255670d15adcb08 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 29 May 2025 14:07:56 -0700
Subject: [PATCH] adds demo, changes back to px

---
 src/components/Visible/Visible.svelte         | 37 ++++++-------
 .../Visible/demo/VisibleDemo.svelte           | 54 +++++++++++++------
 2 files changed, 58 insertions(+), 33 deletions(-)

diff --git a/src/components/Visible/Visible.svelte b/src/components/Visible/Visible.svelte
index f8860595..6582e4eb 100644
--- a/src/components/Visible/Visible.svelte
+++ b/src/components/Visible/Visible.svelte
@@ -11,24 +11,24 @@
     once?: boolean;
     /**
      * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top`.
-     * Specify a value and unit (e.g. `px`, `%`, `vw`, `vh`, `rem`, `em`).
+     * Specify a pixel value.
      */
-    top?: { value: number; unit: 'px' | '%' | 'vw' | 'vh' | 'rem' | 'em' };
+    top?: number;
     /**
      * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom`.
-     * Specify a value and unit (e.g. `px`, `%`, `vw`, `vh`, `rem`, `em`).
+     * Specify a pixel value.
      */
-    bottom?: { value: number; unit: 'px' | '%' | 'vw' | 'vh' | 'rem' | 'em' };
+    bottom?: number;
     /**
      * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left`.
-     * Specify a value and unit (e.g. `px`, `%`, `vw`, `vh`, `rem`, `em`).
+     * Specify a pixel value.
      */
-    left?: { value: number; unit: 'px' | '%' | 'vw' | 'vh' | 'rem' | 'em' };
+    left?: number;
     /**
      * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right`.
-     * Specify a value and unit (e.g. `px`, `%`, `vw`, `vh`, `rem`, `em`).
+     * Specify a pixel value.
      */
-    right?: { value: number; unit: 'px' | '%' | 'vw' | 'vh' | 'rem' | 'em' };
+    right?: number;
     /** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */
     threshold?: number;
     children?: Snippet<[boolean]>;
@@ -36,10 +36,10 @@
 
   let {
     once = false,
-    top = { value: 0, unit: 'px' },
-    bottom = { value: 0, unit: 'px' },
-    left = { value: 0, unit: 'px' },
-    right = { value: 0, unit: 'px' },
+    top = 0,
+    bottom = 0,
+    left = 0,
+    right = 0,
     threshold = 0,
     children,
   }: Props = $props();
@@ -49,7 +49,7 @@
 
   onMount(() => {
     if (typeof IntersectionObserver !== 'undefined') {
-      const rootMargin = `${bottom.value}${bottom.unit} ${left.value}${left.unit} ${top.value}${top.unit} ${right.value}${right.unit}`;
+      const rootMargin = `${top}px ${right}px ${bottom}px ${left}px`;
 
       const observer = new IntersectionObserver(
         (entries) => {
@@ -71,11 +71,12 @@
     function handler() {
       if (container) {
         const bcr = container.getBoundingClientRect();
+
         visible =
-          bcr.bottom + bottom.value > 0 &&
-          bcr.right + right.value > 0 &&
-          bcr.top - top.value < window.innerHeight &&
-          bcr.left - left.value < window.innerWidth;
+          bcr.bottom + bottom > 0 &&
+          bcr.right + right > 0 &&
+          bcr.top - top < window.innerHeight &&
+          bcr.left - left < window.innerWidth;
       }
       if (visible && once) {
         window.removeEventListener('scroll', handler);
@@ -86,7 +87,7 @@
   });
 </script>
 
-<div bind:this={container}>
+<div class="visibility-tracker" bind:this={container}>
   {#if children}
     {@render children(visible)}
   {/if}
diff --git a/src/components/Visible/demo/VisibleDemo.svelte b/src/components/Visible/demo/VisibleDemo.svelte
index 66224052..c0b47208 100644
--- a/src/components/Visible/demo/VisibleDemo.svelte
+++ b/src/components/Visible/demo/VisibleDemo.svelte
@@ -2,11 +2,16 @@
   import Visible from '../Visible.svelte';
   import BodyText from '../../BodyText/BodyText.svelte';
   import Block from '../../Block/Block.svelte';
+  import FeaturePhoto from '../../FeaturePhoto/FeaturePhoto.svelte';
+  import sharkSrc from '../../FeaturePhoto/images/shark.jpg';
 
   const demoText =
-    'Adjust the window dimension to see what happens when the HTML element wrapped in `Visible` becomes enters the viewport.';
+    "Adjust the window dimension to see what happens when `<div class=\'visibility-tracker\'>` comes into <a href=\'https://codepen.io/michellebarker/full/xxwLpRG\'>Internsection Observer's</a> view.";
+
   const text =
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+
+  let top = 500;
 </script>
 
 <BodyText text={`**${demoText}**`} />
@@ -14,22 +19,41 @@
 <BodyText {text} />
 <BodyText {text} />
 
-<Block>
-  <Visible top={{ value: 10, unit: 'px' }}>
-    {#snippet children(visible)}
-      {#if visible}
-        <h2>Visible!</h2>
-      {:else}
-        <h2>Not yet visible.</h2>
-      {/if}
-    {/snippet}
-  </Visible>
-</Block>
-
-<BodyText {text} />
-<BodyText {text} />
+<!-- <div class="root-margin-demo" style="padding-top:{top}px;">
+  <p class="margin-value font-note font-medium">Root margin top: {top}px</p>
+</div> -->
+<Visible {top}>
+  {#snippet children(visible)}
+    {#if visible}
+      <FeaturePhoto
+        src={sharkSrc}
+        altText="A shark!"
+        caption="Carcharodon carcharias - REUTERS"
+      />
+    {:else}
+      <Block>
+        <h2 class="not-visible">Not yet visible.</h2>
+      </Block>
+    {/if}
+  {/snippet}
+</Visible>
 <BodyText {text} />
 <BodyText {text} />
 
 <style lang="scss">
+  @use '../../../scss/mixins' as mixins;
+
+  .root-margin-demo {
+    position: relative;
+    background: lightblue;
+    margin: auto;
+    max-width: mixins.$column-width-normal;
+
+    p.margin-value {
+      position: absolute;
+      top: 5px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
 </style>