more edits #116

src/components/BeforeAfter/BeforeAfter.svelte

@@ -233,10 +233,7 @@
     </div>
     {#if $$slots.caption}
       <PaddingReset containerIsFluid="{width === 'fluid'}">
-        <aside
-          class="before-after-caption mx-auto fmt-2"
-          id="{`${id}-caption`}"
-        >
+        <aside class="before-after-caption mx-auto" id="{`${id}-caption`}">
           <!-- Caption for image credits -->
           <slot name="caption" />
         </aside>

src/components/DocumentCloud/DocumentCloud.svelte

@@ -30,7 +30,7 @@
   import Block from '../Block/Block.svelte';
 </script>
 
-<Block width="{width}" id="{id}" class="photo fmy-5 {cls}">
+<Block width="{width}" id="{id}" class="photo fmy-6 {cls}">
   <iframe
     class="h-screen"
     src="https://embed.documentcloud.org/documents/{slug}/?embed=1&amp;responsive=1&amp;title=1"

src/components/GraphicBlock/GraphicBlock.svelte

@@ -122,7 +122,7 @@
   {:else if notes}
     <PaddingReset containerIsFluid="{width === 'fluid'}">
       <TextBlock width="{textWidth}">
-        <aside class="fmt-2">
+        <aside>
           {@html marked(notes)}
         </aside>
       </TextBlock>

src/components/Headline/Headline.svelte

@@ -74,7 +74,7 @@
 </script>
 
 <div class="headline-wrapper" style="display:contents;">
-  <Block width="{width}" class="headline text-center fmy-7 fmb-6 {cls}">
+  <Block width="{width}" class="headline text-center fmt-7 fmb-6 {cls}">
     <header class="relative">
       {#if $$slots.crown}
         <div class="crown-container">

src/components/NoteText/NoteText.svelte

@@ -30,6 +30,7 @@
       @include body-caption;
       @include text-primary;
       @include font-medium;
+      @include tracking-normal;
       @include fmt-3;
       @include fmb-0;
       text-transform: none;

src/components/PhotoCarousel/PhotoCarousel.svelte

@@ -5,6 +5,14 @@
   /** Width of the component within the text well. */
   export let width: ContainerWidth = 'wider';
 
+  /**
+   * Set a different width for captions within the text well, for example,
+   * "normal" to keep captions inline with the rest of the text well.
+   * Can't ever be wider than `width`.
+   * @type {string}
+   */
+  export let textWidth: ContainerWidth = 'normal';
+
   /** Add an ID to target with SCSS. */
   export let id: string = '';
 
@@ -146,21 +154,23 @@
 
         {#if photos[activeImageIndex].caption}
           <PaddingReset containerIsFluid="{width === 'fluid'}">
-            {#if $$slots.caption}
-              <slot
-                name="caption"
-                caption="{photos[activeImageIndex].caption}"
-              />
-            {:else}
-              {#key activeImageIndex}
-                <p
-                  class="caption body-caption fmt-2"
-                  in:fly|local="{{ x: 20, duration: 175 }}"
-                >
-                  {photos[activeImageIndex].caption}
-                </p>
-              {/key}
-            {/if}
+            <Block width="{textWidth}">
+              {#if $$slots.caption}
+                <slot
+                  name="caption"
+                  caption="{photos[activeImageIndex].caption}"
+                />
+              {:else}
+                {#key activeImageIndex}
+                  <p
+                    class="caption body-caption text-center"
+                    in:fly|local="{{ x: 20, duration: 175 }}"
+                  >
+                    {photos[activeImageIndex].caption}
+                  </p>
+                {/key}
+              {/if}
+            </Block>
           </PaddingReset>
         {/if}
 
@@ -216,11 +226,17 @@
         justify-content: space-between;
 
         button {
+          &.splide__arrow--prev {
+            padding-right: 7px;
+          }
+          &.splide__arrow--next {
+            padding-left: 7px;
+          }
+
           display: flex;
           font-size: 14px;
           height: 30px;
           width: 30px;
-          padding: 0;
           justify-content: center;
           align-items: center;
           border: 1px solid transparent;

src/components/PhotoPack/PhotoPack.stories.svelte

@@ -20,7 +20,7 @@
         control: 'select',
         options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
       },
-      captionWidth: {
+      textWidth: {
         control: 'select',
         options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
       },
@@ -65,7 +65,7 @@
     ID: 'my-photo-pack',
     Class: 'mb-2',
     Width: 'wide',
-    CaptionWidth: 'normal',
+    textWidth: 'normal',
     Gap: '15',
     Images: [
       {
@@ -129,7 +129,7 @@
   name="Default"
   args="{{
     width: 'wide',
-    captionWidth: 'normal',
+    textWidth: 'normal',
     images: defaultImages,
     layouts: defaultLayouts,
   }}"
@@ -145,7 +145,7 @@
   name="Missing altText"
   args="{{
     width: 'wide',
-    captionWidth: 'normal',
+    textWidth: 'normal',
     images: altTextImages,
     layouts: altTextLayouts,
   }}"

src/components/PhotoPack/PhotoPack.svelte

@@ -53,7 +53,7 @@
    * Can't ever be wider than `width`.
    * @type {string}
    */
-  export let captionWidth: ContainerWidth = 'normal';
+  export let textWidth: ContainerWidth = 'normal';
 
   import Block from '../Block/Block.svelte';
   import PaddingReset from '../PaddingReset/PaddingReset.svelte';
@@ -95,7 +95,7 @@
       <div
         class="photopack-row flex justify-between"
         style:gap="0 {gap}px"
-        style:margin-bottom="{gap + 'px'}"
+        style:margin-bottom="{ri < rows.length - 1 ? gap + 'px' : ''}"
       >
         {#each row as img, i}
           <figure
@@ -118,7 +118,7 @@
   </div>
   <PaddingReset containerIsFluid="{width === 'fluid'}">
     <div class="notes contents">
-      <Block width="{captionWidth}" class="photopack-captions-container">
+      <Block width="{textWidth}" class="photopack-captions-container">
         {#each rows as row, ri}
           {#each row as img, i}
             {#if img.caption}
@@ -150,10 +150,6 @@
   }
 
   .notes {
-    :global(.photopack-captions-container) {
-      @include fmy-2;
-    }
-
     :global(.photopack-captions-container .caption p) {
       @include body-caption;
     }

src/components/PhotoPack/docProps.ts

@@ -17,28 +17,41 @@ interface Block {
   ID?: string;
   Class?: string;
   Width: string;
-  CaptionWidth?: string;
+  textWidth?: string;
   Gap?: string;
-  Images: BlockImage[],
-  Layouts: BlockLayout[],
+  Images: BlockImage[];
+  Layouts: BlockLayout[];
 }
 
-export const getPhotoPackPropsFromDoc = (docBlock: Block, assetsPath: string = '') => {
+export const getPhotoPackPropsFromDoc = (
+  docBlock: Block,
+  assetsPath: string = ''
+) => {
   return {
     id: docBlock.ID,
     cls: docBlock.Class,
     width: docBlock.Width,
-    captionWidth: docBlock.CaptionWidth,
-    gap: docBlock.Gap && isNaN(docBlock.Gap as any) ? null : parseInt(docBlock.Gap),
+    textWidth: docBlock.textWidth,
+    gap:
+      docBlock.Gap && isNaN(docBlock.Gap as any)
+        ? null
+        : parseInt(docBlock.Gap),
     images: docBlock.Images.map((img) => ({
-      src: /^https?:\/\/|^\/\//i.test(img.Src) ? img.Src : urlJoin(assetsPath, img.Src),
+      src: /^https?:\/\/|^\/\//i.test(img.Src)
+        ? img.Src
+        : urlJoin(assetsPath, img.Src),
       altText: img.AltText,
       caption: img.Caption,
-      maxHeight: img.MaxHeight && isNaN(img.MaxHeight as any) ? null : parseFloat(img.MaxHeight),
+      maxHeight:
+        img.MaxHeight && isNaN(img.MaxHeight as any)
+          ? null
+          : parseFloat(img.MaxHeight),
     })),
     layouts: docBlock.Layouts.map((layout) => ({
-      breakpoint: isNaN(layout.Breakpoint as any) ? null : parseFloat(layout.Breakpoint),
-      rows: layout.Rows.split(',').map(r => parseInt(r.trim())),
+      breakpoint: isNaN(layout.Breakpoint as any)
+        ? null
+        : parseFloat(layout.Breakpoint),
+      rows: layout.Rows.split(',').map((r) => parseInt(r.trim())),
     })),
   };
 };

src/components/PhotoPack/stories/docs/quickit.md

@@ -6,7 +6,7 @@ Type: photo-pack
 ID: my-photo-pack
 Class: mb-2 # adjust margin class as needed
 Width: wide
-CaptionWidth: normal
+TextWidth: normal
 Gap: 10
 [.Images]
   Src: images/my-img-1.jpg

src/components/Video/Video.svelte

@@ -154,7 +154,7 @@
   description="{description}"
   notes="{notes}"
   width="{width}"
-  class="video-container fmy-5"
+  class="video-container"
 >
   <div
     role="figure"