@reuters-graphics/graphics-components 3.0.3 → 3.0.5

package/dist/components/ScrollerBase/ScrollerBase.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import ScrollerBase from './ScrollerBase.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ScrollerBase: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ScrollerBase = InstanceType<typeof ScrollerBase>;
+export default ScrollerBase;

package/dist/components/{Scroller/ScrollerBase/index.svelte → ScrollerBase/ScrollerBase.svelte}

@@ -117,7 +117,7 @@
     top = 0,
     bottom = 1,
     threshold = 0.5,
-    query = 'section',
+    query = 'div.step-foreground-container',
     parallax = false,
     backgroundSnippet,
     foregroundSnippet,

package/dist/components/{Scroller/ScrollerBase/index.svelte.d.ts → ScrollerBase/ScrollerBase.svelte.d.ts}

@@ -27,6 +27,6 @@ interface Props {
     /** Whether the foreground is visible */
     visible?: boolean;
 }
-declare const Index: import("svelte").Component<Props, {}, "progress" | "offset" | "index" | "count" | "visible">;
-type Index = ReturnType<typeof Index>;
-export default Index;
+declare const ScrollerBase: import("svelte").Component<Props, {}, "progress" | "offset" | "index" | "count" | "visible">;
+type ScrollerBase = ReturnType<typeof ScrollerBase>;
+export default ScrollerBase;

package/dist/components/ScrollerBase/demo/DraggableLabel.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  export let value = 0;
+  export let label = 'label';
+
+  function drag(node: HTMLElement) {
+    function handleMousedown() {
+      function handleMousemove(event: MouseEvent) {
+        event.preventDefault();
+
+        node.dispatchEvent(
+          new CustomEvent('drag', {
+            detail: {
+              value: event.clientY / window.innerHeight,
+            },
+          })
+        );
+      }
+
+      function handleMouseup() {
+        window.removeEventListener('mousemove', handleMousemove);
+        window.removeEventListener('mouseup', handleMouseup);
+      }
+
+      window.addEventListener('mousemove', handleMousemove);
+      window.addEventListener('mouseup', handleMouseup);
+    }
+
+    node.addEventListener('mousedown', handleMousedown);
+
+    return {
+      destroy() {
+        node.removeEventListener('mousedown', handleMousedown);
+      },
+    };
+  }
+
+  // Round to 2 decimal places
+  function round(value: number): number {
+    return Math.round(value * 100) / 100;
+  }
+</script>
+
+<div
+  class="label"
+  style="top: {value * 100}%"
+  use:drag
+  ondrag={(event: DragEvent) => {
+    const customEvent = event as unknown as { detail: { value: number } };
+    value = customEvent.detail.value;
+  }}
+  role="slider"
+  aria-valuemin="0"
+  aria-valuemax="1"
+  aria-valuenow={value}
+  tabindex="0"
+>
+  <div class="drag-target"></div>
+  <hr />
+  <p>{label}: {round(value)}</p>
+</div>
+
+<style>/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Scales by 1.125 */
+.label {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 150px;
+  height: 0;
+  cursor: ns-resize;
+}
+.label .drag-target {
+  position: absolute;
+  height: 20px;
+  top: -10px;
+}
+.label hr {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 2px;
+  background: red;
+  border: none;
+  margin: 0;
+}
+.label p {
+  position: absolute;
+  font-family: var(--theme-font-family-sans-serif);
+  font-weight: 500;
+  font-size: var(--theme-font-size-sm);
+}</style>

package/dist/components/ScrollerBase/demo/DraggableLabel.svelte.d.ts

@@ -0,0 +1,21 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DraggableLabel: $$__sveltets_2_IsomorphicComponent<{
+    value?: number;
+    label?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DraggableLabel = InstanceType<typeof DraggableLabel>;
+export default DraggableLabel;

package/dist/components/ScrollerBase/demo/ScrollerDemo.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import ScrollerBase from '../ScrollerBase.svelte';
+  import DraggableLabel from './DraggableLabel.svelte';
+  import BodyText from '../../BodyText/BodyText.svelte';
+
+  let count = $state(1);
+  let index = $state(0);
+  let offset = $state(0);
+  let progress = $state(0);
+  let top = $state(0.1);
+  let threshold = $state(0.5);
+  let bottom = $state(0.9);
+
+  const text =
+    'Read the documentation on the props `progress`, `top`, `threshold`, `bottom` under **Controls** to understand how they work. \n\nAdjust the red sliders on the right to see how changes in these values affect scrolling behaviour.';
+</script>
+
+<BodyText {text} />
+
+<div class="scroller-demo-container">
+  <ScrollerBase
+    {top}
+    {threshold}
+    {bottom}
+    bind:count
+    bind:index
+    bind:offset
+    bind:progress
+    query="div.step-foreground-container"
+  >
+    {#snippet backgroundSnippet()}
+      <p class="mb-0">
+        Current step: <strong>{index + 1}/{count}</strong>
+      </p>
+      <progress class="mb-4" value={(index + 1) / count}></progress>
+
+      <p class="mb-0">Offset in current step</p>
+      <progress class="mb-4" value={offset}></progress>
+
+      <p class="mb-0">Total progress</p>
+      <progress class="mb-4" value={progress}></progress>
+    {/snippet}
+    {#snippet foregroundSnippet()}
+      <div class="step-foreground-container font-medium">Step 1</div>
+      <div class="step-foreground-container font-medium">Step 2</div>
+      <div class="step-foreground-container font-medium">Step 3</div>
+      <div class="step-foreground-container font-medium">Step 4</div>
+      <div class="step-foreground-container font-medium">Step 5</div>
+    {/snippet}
+  </ScrollerBase>
+</div>
+
+<BodyText
+  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.
+"
+/>
+
+<DraggableLabel bind:value={top} label="top" />
+<DraggableLabel bind:value={threshold} label="threshold" />
+<DraggableLabel bind:value={bottom} label="bottom" />
+
+<style>/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Scales by 1.125 */
+.scroller-demo-container {
+  width: 660px;
+  margin: auto;
+}
+
+.step-foreground-container {
+  height: 100vh;
+  width: 50%;
+  background-color: rgba(0, 0, 0, 0.2);
+  padding: 1em;
+  margin: 0 0 2em 0;
+  position: relative;
+  left: 50%;
+}</style>

package/dist/components/ScrollerBase/demo/ScrollerDemo.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ScrollerDemo: import("svelte").Component<Record<string, never>, {}, "">;
+type ScrollerDemo = ReturnType<typeof ScrollerDemo>;
+export default ScrollerDemo;

package/dist/components/SearchInput/SearchInput.svelte

@@ -62,8 +62,8 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   width: 250px;
 }
 .search .search--icon {
-  left: 0.5rem;
-  top: 0.55rem;
+  inset-inline-start: 0.5rem;
+  inset-block-start: 0.55rem;
   width: 1.5rem;
   height: 1.5rem;
   fill: var(--theme-colour-brand-rules);
@@ -76,8 +76,8 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   width: 100%;
 }
 .search .search--x {
-  right: 0;
-  top: 0.55rem;
+  inset-inline-end: 0;
+  inset-block-start: 0.55rem;
   width: 1.5rem;
   height: 1.5rem;
   fill: var(--theme-colour-text-primary);

package/dist/components/SimpleTimeline/SimpleTimeline.svelte

@@ -99,19 +99,19 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 */
 /* Scales by 1.125 */
 .timeline .date {
-  border-left: 1px solid var(--symbol-colour);
+  border-inline-start: 1px solid var(--symbol-colour);
 }
 .timeline .date:last-child {
-  border-left: 1px solid var(--theme-colour-background);
-  padding-bottom: 0;
+  border-inline-start: 1px solid var(--theme-colour-background);
+  padding-block-end: 0;
 }
 .timeline svg {
-  top: -1px;
-  left: -10px;
+  inset-block-start: -1px;
+  inset-inline-start: -10px;
 }
 .timeline div.title {
-  margin-top: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
-  margin-bottom: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-start: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-end: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
   font-weight: 500;
 }
 .timeline div.event a {
@@ -127,8 +127,8 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   opacity: 0.8;
 }
 .timeline div.event :global(p) {
-  margin-top: 0;
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: 0;
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
   font-family: var(--theme-font-family-note);
   font-size: calc(0.9 * var(--theme-font-size-base));
   color: var(--theme-colour-text-primary);

package/dist/components/SiteFooter/CompanyLinks.svelte

@@ -80,8 +80,8 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 }
 
 .company {
-  padding-top: 24px;
-  padding-bottom: 24px;
+  padding-block-start: 24px;
+  padding-block-end: 24px;
   box-sizing: border-box;
 }
 .company .content-container {
@@ -114,25 +114,25 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   box-sizing: border-box;
 }
 .company .content-container {
-  padding-left: 2.2222222222vw;
+  padding-inline-start: 2.2222222222vw;
 }
 .company .content-container {
-  padding-right: 2.2222222222vw;
+  padding-inline-end: 2.2222222222vw;
 }
 @media (max-width: 1023px) {
   .company .content-container {
-    padding-left: 4.2666666667vw;
+    padding-inline-start: 4.2666666667vw;
   }
   .company .content-container {
-    padding-right: 4.2666666667vw;
+    padding-inline-end: 4.2666666667vw;
   }
 }
 @media (min-width: 1440px) {
   .company .content-container {
-    padding-left: 32px;
+    padding-inline-start: 32px;
   }
   .company .content-container {
-    padding-right: 32px;
+    padding-inline-end: 32px;
   }
 }
 
@@ -179,17 +179,17 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   list-style: none;
   display: inline-block;
   vertical-align: middle;
-  margin-left: 16px;
+  margin-inline-start: 16px;
 }
 .symbol:first-child {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 
 section.company {
   max-width: 100%;
 }
 section.company h2 {
-  margin-bottom: 12px;
+  margin-block-end: 12px;
   line-height: 1.333;
   font-size: 16px;
   color: var(--nav-primary);

package/dist/components/SiteFooter/LegalLinks.svelte

@@ -74,8 +74,8 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 }
 
 .legal {
-  padding-top: 24px;
-  padding-bottom: 24px;
+  padding-block-start: 24px;
+  padding-block-end: 24px;
   box-sizing: border-box;
 }
 .legal .content-container {
@@ -108,25 +108,25 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   box-sizing: border-box;
 }
 .legal .content-container {
-  padding-left: 2.2222222222vw;
+  padding-inline-start: 2.2222222222vw;
 }
 .legal .content-container {
-  padding-right: 2.2222222222vw;
+  padding-inline-end: 2.2222222222vw;
 }
 @media (max-width: 1023px) {
   .legal .content-container {
-    padding-left: 4.2666666667vw;
+    padding-inline-start: 4.2666666667vw;
   }
   .legal .content-container {
-    padding-right: 4.2666666667vw;
+    padding-inline-end: 4.2666666667vw;
   }
 }
 @media (min-width: 1440px) {
   .legal .content-container {
-    padding-left: 32px;
+    padding-inline-start: 32px;
   }
   .legal .content-container {
-    padding-right: 32px;
+    padding-inline-end: 32px;
   }
 }
 
@@ -199,7 +199,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 }
 .link-group li {
   display: inline-flex;
-  margin-right: 16px;
+  margin-inline-end: 16px;
   list-style: none;
   align-items: center;
 }

package/dist/components/SiteFooter/QuickLinks.svelte

@@ -161,8 +161,8 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 }
 
 .quick-links {
-  padding-top: 24px;
-  padding-bottom: 24px;
+  padding-block-start: 24px;
+  padding-block-end: 24px;
   box-sizing: border-box;
 }
 .quick-links .content-container {
@@ -212,25 +212,25 @@ section.quick-links .content-container {
   box-sizing: border-box;
 }
 section.quick-links .content-container {
-  padding-left: 2.2222222222vw;
+  padding-inline-start: 2.2222222222vw;
 }
 section.quick-links .content-container {
-  padding-right: 2.2222222222vw;
+  padding-inline-end: 2.2222222222vw;
 }
 @media (max-width: 1023px) {
   section.quick-links .content-container {
-    padding-left: 4.2666666667vw;
+    padding-inline-start: 4.2666666667vw;
   }
   section.quick-links .content-container {
-    padding-right: 4.2666666667vw;
+    padding-inline-end: 4.2666666667vw;
   }
 }
 @media (min-width: 1440px) {
   section.quick-links .content-container {
-    padding-left: 32px;
+    padding-inline-start: 32px;
   }
   section.quick-links .content-container {
-    padding-right: 32px;
+    padding-inline-end: 32px;
   }
 }
 section.quick-links h3 {
@@ -267,7 +267,7 @@ section.quick-links h3 {
   grid-row: 1;
 }
 .quick-links .content-container .latest-and-media .media {
-  margin-top: 24px;
+  margin-block-start: 24px;
 }
 .quick-links .content-container .about-and-stay-informed {
   grid-column: 7/span 3;
@@ -285,12 +285,12 @@ section.quick-links h3 {
   }
 }
 .quick-links .content-container .stay-informed {
-  margin-top: 24px;
+  margin-block-start: 24px;
 }
 
 .symbol {
   width: 20px;
-  margin-right: 16px;
+  margin-inline-end: 16px;
 }
 
 .visually-hidden {

package/dist/components/SiteFooter/SiteFooter.stories.svelte

@@ -24,6 +24,6 @@
 <style>
   div {
     width: calc(100% + 30px);
-    margin-left: -15px;
+    margin-inline-start: -15px;
   }
 </style>

package/dist/components/SiteFooter/SiteFooter.svelte

@@ -68,7 +68,7 @@
 </footer>
 
 <style>footer {
-  margin-top: 0;
+  margin-block-start: 0;
   background-color: var(--nav-background, #fff);
 }
 footer div {

package/dist/components/SiteHeader/MobileMenu/index.svelte

@@ -88,7 +88,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   left: 0;
   width: 100%;
   height: 100%;
-  padding-bottom: 60px;
+  padding-block-end: 60px;
   box-sizing: border-box;
   background: var(--nav-background);
   color: var(--nav-primary);
@@ -115,7 +115,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 .close-button {
   width: 40px;
   height: 40px;
-  margin-left: auto;
+  margin-inline-start: auto;
   display: inline-block;
   vertical-align: top;
   outline: none;
@@ -151,55 +151,55 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey));
 }
 .header {
-  padding-left: 2.2222222222vw;
+  padding-inline-start: 2.2222222222vw;
 }
 .header {
-  padding-right: 2.2222222222vw;
+  padding-inline-end: 2.2222222222vw;
 }
 @media (max-width: 1023px) {
   .header {
-    padding-left: 4.2666666667vw;
+    padding-inline-start: 4.2666666667vw;
   }
   .header {
-    padding-right: 4.2666666667vw;
+    padding-inline-end: 4.2666666667vw;
   }
 }
 @media (min-width: 1440px) {
   .header {
-    padding-left: 32px;
+    padding-inline-start: 32px;
   }
   .header {
-    padding-right: 32px;
+    padding-inline-end: 32px;
   }
 }
 
 .section {
-  padding-top: 16px;
-  padding-bottom: 16px;
+  padding-block-start: 16px;
+  padding-block-end: 16px;
   border-bottom: 1px solid var(--tr-muted-grey);
   width: 100%;
   max-width: 100%;
 }
 .section {
-  padding-left: 2.2222222222vw;
+  padding-inline-start: 2.2222222222vw;
 }
 .section {
-  padding-right: 2.2222222222vw;
+  padding-inline-end: 2.2222222222vw;
 }
 @media (max-width: 1023px) {
   .section {
-    padding-left: 4.2666666667vw;
+    padding-inline-start: 4.2666666667vw;
   }
   .section {
-    padding-right: 4.2666666667vw;
+    padding-inline-end: 4.2666666667vw;
   }
 }
 @media (min-width: 1440px) {
   .section {
-    padding-left: 32px;
+    padding-inline-start: 32px;
   }
   .section {
-    padding-right: 32px;
+    padding-inline-end: 32px;
   }
 }
 .section .subsections {

package/dist/components/SiteHeader/NavBar/DownArrow.svelte

@@ -20,7 +20,7 @@
 </svg>
 
 <style>svg {
-  margin-left: 4px;
+  margin-inline-start: 4px;
   width: 10px;
   fill: var(--nav-primary, var(--tr-dark-grey));
   transition: transform 0.15s ease;

package/dist/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte

@@ -60,7 +60,7 @@ a:hover {
 }
 
 .more-section-group.has-children {
-  margin-bottom: 20px;
+  margin-block-end: 20px;
 }
 .more-section-group .subsections {
   display: grid;
@@ -92,7 +92,7 @@ a:hover {
   font-weight: 400;
   display: inline-block;
   padding: 4px 0;
-  margin-bottom: 2px;
+  margin-block-end: 2px;
   text-decoration: none;
 }
 .more-section-group .subsections .subsection-link:hover {
@@ -100,7 +100,7 @@ a:hover {
 }
 .more-section-group .section-link {
   grid-column: 1/-1;
-  margin-bottom: 16px;
+  margin-block-end: 16px;
   line-height: 18px;
   font-size: 16px;
   display: inline-block;

package/dist/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte

@@ -73,11 +73,11 @@ a:hover {
   margin: 0;
 }
 .sections .sections-group:first-child {
-  margin-right: 16px;
+  margin-inline-end: 16px;
 }
 @media (max-width: 1023px) {
   .sections .sections-group:nth-child(2) {
-    margin-top: 0;
+    margin-block-start: 0;
   }
 }
 
@@ -86,7 +86,7 @@ a:hover {
   font-weight: 400;
   display: inline-block;
   padding: 4px 0;
-  margin-bottom: 2px;
+  margin-block-end: 2px;
   font-family: var(--theme-font-family-sans-serif);
 }
 .subsection-link:hover {

package/dist/components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte

@@ -12,7 +12,7 @@
 .spinner-container {
   position: relative;
   height: 0;
-  padding-bottom: 100%;
+  padding-block-end: 100%;
   color: var(--nav-primary, var(--tr-dark-grey));
 }