PaddingReset

src/components/BeforeAfter/BeforeAfter.svelte

@@ -3,6 +3,7 @@
   import { onMount } from 'svelte';
   import Block from '../Block/Block.svelte';
   import type { ContainerWidth } from '../@types/global';
+  import PaddingReset from '../PaddingReset/PaddingReset.svelte';
 
   /** Width of the chart within the text well. */
   export let width: ContainerWidth = 'normal'; // options: wide, wider, widest, fluid
@@ -100,16 +101,16 @@
   const move = (e) => {
     if (sliding && imgOffset) {
       const el = e.touches ? e.touches[0] : e;
-      const figureOffset = figure
-        ? parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2))
-        : 0;
+      const figureOffset = figure ?
+        parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2)) :
+        0;
       let x = el.pageX - figureOffset - imgOffset.left;
       x =
-        x < handleMargin
-          ? handleMargin
-          : x > w - handleMargin
-          ? w - handleMargin
-          : x;
+        x < handleMargin ?
+          handleMargin :
+          x > w - handleMargin ?
+            w - handleMargin :
+            x;
       offset = x / w;
     }
   };
@@ -220,10 +221,12 @@
       </figure>
     </div>
     {#if $$slots.caption}
-      <aside class="before-after-caption" id="{`${id}-caption`}">
-        <!-- Caption for image credits -->
-        <slot name="caption" />
-      </aside>
+      <PaddingReset containerIsFluid={width === 'fluid'}>
+        <aside class="before-after-caption" id="{`${id}-caption`}">
+          <!-- Caption for image credits -->
+          <slot name="caption" />
+        </aside>
+      </PaddingReset>
     {/if}
   </Block>
 {/if}

src/components/FeaturePhoto/FeaturePhoto.svelte

@@ -2,6 +2,7 @@
   import { onMount } from 'svelte';
   import Block from '../Block/Block.svelte';
   import type { ContainerWidth } from '../@types/global';
+  import PaddingReset from '../PaddingReset/PaddingReset.svelte';
 
   /**
    * Photo src
@@ -72,7 +73,6 @@
   <figure
     bind:this="{container}"
     aria-label="media"
-    class:fluid="{width === 'fluid'}"
   >
     {#if !lazy || (intersectable && intersecting)}
       <img src="{src}" alt="{altText}" />
@@ -80,7 +80,9 @@
       <div class="placeholder" height="{`${height}px`}"></div>
     {/if}
     {#if caption}
-      <figcaption>{caption}</figcaption>
+      <PaddingReset containerIsFluid={width === 'fluid'}>
+        <figcaption>{caption}</figcaption>
+      </PaddingReset>
     {/if}
     {#if !altText}
       <div class="alt-warning">altText</div>
@@ -124,11 +126,5 @@
       font-family: var(--theme-font-family-note, $font-family-display);
       color: var(--theme-colour-text-secondary, $tr-medium-grey);
     }
-
-    &.fluid {
-      figcaption {
-        padding-left: 15px;
-      }
-    }
   }
 </style>

src/components/GraphicBlock/GraphicBlock.svelte

@@ -67,7 +67,7 @@
   import AriaHidden from './AriaHidden.svelte';
   import TextBlock from './TextBlock.svelte';
   import Block from '../Block/Block.svelte';
-  import PaddingReset from '../PaddingReset/index.svelte';
+  import PaddingReset from '../PaddingReset/PaddingReset.svelte';
   import { marked } from 'marked';
 </script>
 
@@ -81,14 +81,14 @@
 >
   <div>
     {#if $$slots.title}
-      <PaddingReset width="{width}">
+      <PaddingReset containerIsFluid="{width === 'fluid'}">
         <TextBlock width="{textWidth}">
           <!-- Custom title content -->
           <slot name="title" />
         </TextBlock>
       </PaddingReset>
     {:else if title}
-      <PaddingReset width="{width}">
+      <PaddingReset containerIsFluid="{width === 'fluid'}">
         <TextBlock width="{textWidth}">
           <h3>{title}</h3>
           {#if description}
@@ -112,14 +112,14 @@
       </div>
     {/if}
     {#if $$slots.notes}
-      <PaddingReset width="{width}">
+      <PaddingReset containerIsFluid="{width === 'fluid'}">
         <TextBlock width="{textWidth}">
           <!-- Custom notes content -->
           <slot name="notes" />
         </TextBlock>
       </PaddingReset>
     {:else if notes}
-      <PaddingReset width="{width}">
+      <PaddingReset containerIsFluid="{width === 'fluid'}">
         <TextBlock width="{textWidth}">
           <aside>
             {@html marked(notes)}

src/components/PaddingReset/PaddingReset.stories.svelte

@@ -0,0 +1,52 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import PaddingReset from './PaddingReset.svelte';
+  import Block from '../Block/Block.svelte';
+
+  import {
+    withComponentDocs
+  } from '$lib/docs/utils/withParams.js';
+
+  const meta = {
+    title: 'Utilities/PaddingReset',
+    component: PaddingReset,
+    ...withComponentDocs(componentDocs),
+  };
+</script>
+
+<Meta {...meta} />
+
+<Template let:args>
+  <Block width="fluid">
+    <div class="outer"></div>
+    <PaddingReset {...args}>
+      <div class="inner"></div>
+    </PaddingReset>
+  </Block>
+</Template>
+
+<Story
+  name="Default"
+  args={{
+    containerIsFluid: true,
+  }}
+  let:args
+/>
+
+<style lang="scss">
+  div{
+    height: 30px;
+    width: 100%;
+    margin-bottom: 2px;
+    &.outer {
+      background: grey;
+    }
+    &.inner {
+      background: salmon;
+    }
+  }
+</style>

src/components/PaddingReset/PaddingReset.svelte

@@ -0,0 +1,23 @@
+<script>
+  /**
+   * If parent container is fluid, which resets the padding around contained elements.
+   */
+  export let containerIsFluid = true;
+</script>
+
+{#if containerIsFluid}
+  <div>
+    <!-- Padded content -->
+    <slot />
+  </div>
+{:else}
+  <!-- Padded content -->
+  <slot />
+{/if}
+
+<style>
+  div {
+    width: 100%;
+    padding: 0 15px;
+  }
+</style>

src/components/PaddingReset/index.svelte

@@ -1,18 +0,0 @@
-<script>
-  export let width = 'normal';
-</script>
-
-{#if width === 'fluid'}
-  <div>
-    <slot />
-  </div>
-{:else}
-  <slot />
-{/if}
-
-<style>
-  div {
-    width: 100%;
-    padding: 0 15px;
-  }
-</style>

src/components/PaddingReset/stories/docs/component.md

@@ -0,0 +1,35 @@
+Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on text that's adajcent to it.
+
+The `PaddingReset` component resets padding on the `Article` well that's been cancelled by a `Block` with a `fluid` width.
+
+```svelte
+<script>
+  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
+</script>
+
+<Block width="fluid">
+  <!-- An edge-to-edge image -->
+  <img src="https//..." alt="..." width="100%" />
+  <PaddingReset>
+    <p>A caption for the image that will still be padded.</p>
+  </PaddingReset>
+</Block>
+```
+
+You can also add the padding conditionally by using the `containerIsFluid` prop, which is what many other components in this library do.
+
+```svelte
+<script>
+  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
+
+  export let src = 'https://...';
+  export let width = 'fluid';
+</script>
+
+<Block width="fluid">
+  <img src="{src}" alt="..." width="100%" />
+  <PaddingReset containerIsFluid="{width === 'fluid'}">
+    <p>A caption for the image that will be padded when Block is fluid.</p>
+  </PaddingReset>
+</Block>
+```

src/components/PhotoPack/PhotoPack.svelte

@@ -54,7 +54,7 @@
   export let captionWidth: ContainerWidth = 'normal';
 
   import Block from '../Block/Block.svelte';
-  import PaddingReset from '../PaddingReset/index.svelte';
+  import PaddingReset from '../PaddingReset/PaddingReset.svelte';
   import { marked } from 'marked';
 
   let containerWidth;
@@ -110,7 +110,7 @@
       </div>
     {/each}
   </div>
-  <PaddingReset width="{width}">
+  <PaddingReset containerIsFluid="{width === 'fluid'}">
     <Block width="{captionWidth}">
       <div class="captions-container">
         {#each rows as row, ri}

src/index.js

@@ -11,6 +11,8 @@ export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.
 export { default as Headline } from './components/Headline/Headline.svelte';
 export { default as Hero } from './components/Hero/Hero.svelte';
 export { default as NoteText } from './components/NoteText/NoteText.svelte';
+export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
+export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
 export { default as PymChild } from './components/PymChild/PymChild.svelte';
 export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';
 export { default as Scroller } from './components/Scroller/Scroller.svelte';