From 0ed0c89940b9ba0ada11e34476273dfd76d63efc Mon Sep 17 00:00:00 2001
From: Prasanta Kumar Dutta <7580745+pkd2512@users.noreply.github.com>
Date: Tue, 5 Sep 2023 13:06:20 +0530
Subject: [PATCH] edits for #116

---
 src/components/BodyText/BodyText.svelte         |  5 ++++-
 .../FeaturePhoto/FeaturePhoto.stories.svelte    |  4 ++++
 src/components/FeaturePhoto/FeaturePhoto.svelte | 17 ++++++++++++++---
 src/components/GraphicBlock/TextBlock.svelte    |  2 +-
 .../PhotoCarousel/PhotoCarousel.svelte          |  4 ++++
 src/components/SearchInput/SearchInput.svelte   |  2 +-
 .../SimpleTimeline/SimpleTimeline.svelte        |  7 +------
 src/components/Table/Table.svelte               |  5 ++---
 8 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/components/BodyText/BodyText.svelte b/src/components/BodyText/BodyText.svelte
index cdab904a..f65b299a 100644
--- a/src/components/BodyText/BodyText.svelte
+++ b/src/components/BodyText/BodyText.svelte
@@ -11,11 +11,14 @@
   let cls: string = '';
   export { cls as class };
 
+  /** Add an id to the block tag to target it with custom CSS. */
+  export let id: string = '';
+
   import { marked } from 'marked';
   import Block from '../Block/Block.svelte';
 </script>
 
-<Block class="body-text fmy-5 {cls}">
+<Block id="{id}" class="fmy-5 {cls}">
   {#if text}
     {@html marked.parse(text)}
   {/if}
diff --git a/src/components/FeaturePhoto/FeaturePhoto.stories.svelte b/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
index 62ece47d..59e1fa51 100644
--- a/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
@@ -25,6 +25,10 @@
         control: 'select',
         options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
       },
+      textWidth: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
     },
   };
 </script>
diff --git a/src/components/FeaturePhoto/FeaturePhoto.svelte b/src/components/FeaturePhoto/FeaturePhoto.svelte
index 4ae8030b..b221966f 100644
--- a/src/components/FeaturePhoto/FeaturePhoto.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.svelte
@@ -41,6 +41,15 @@
    * Width of the container, one of: normal, wide, wider, widest or fluid
    */
   export let width: ContainerWidth = 'normal';
+
+  /**
+   * Set a different width for the text within the text well, for example,
+   * "normal" to keep the title, description and notes inline with the rest
+   * of the text well. Can't ever be wider than `width`.
+   * @type {string}
+   */
+  export let textWidth: ContainerWidth | null = 'normal';
+
   /**
    * Whether to lazy load the photo using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
    */
@@ -94,9 +103,11 @@
     {/if}
     {#if caption}
       <PaddingReset containerIsFluid="{width === 'fluid'}">
-        <figcaption>
-          {caption}
-        </figcaption>
+        <Block width="{textWidth}" class="fmx-auto fmy-0">
+          <figcaption>
+            {caption}
+          </figcaption>
+        </Block>
       </PaddingReset>
     {/if}
     {#if !altText}
diff --git a/src/components/GraphicBlock/TextBlock.svelte b/src/components/GraphicBlock/TextBlock.svelte
index 70fa2ca9..0e1cd96a 100644
--- a/src/components/GraphicBlock/TextBlock.svelte
+++ b/src/components/GraphicBlock/TextBlock.svelte
@@ -7,7 +7,7 @@
 </script>
 
 {#if width}
-  <Block width="{width}" class="mx-auto my-0">
+  <Block width="{width}" class="fmx-auto fmy-0">
     <slot />
   </Block>
 {:else}
diff --git a/src/components/PhotoCarousel/PhotoCarousel.svelte b/src/components/PhotoCarousel/PhotoCarousel.svelte
index 5aa64a37..4f91b640 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.svelte
@@ -205,6 +205,10 @@
         max-height: 100%;
       }
 
+      li {
+        padding: 0;
+      }
+
       .splide__arrows {
         width: 275px;
         margin: 0 auto;
diff --git a/src/components/SearchInput/SearchInput.svelte b/src/components/SearchInput/SearchInput.svelte
index 981fc847..4d212124 100644
--- a/src/components/SearchInput/SearchInput.svelte
+++ b/src/components/SearchInput/SearchInput.svelte
@@ -27,7 +27,7 @@
 </script>
 
 <div class="search relative inline-flex items-center" class:active="{active}">
-  <div class="search--icon absolute ml-2 mt-1.5">
+  <div class="search--icon absolute ml-2 mt-1">
     <MagnifyingGlass />
   </div>
   <input
diff --git a/src/components/SimpleTimeline/SimpleTimeline.svelte b/src/components/SimpleTimeline/SimpleTimeline.svelte
index 5ae58e15..f4e51f2a 100644
--- a/src/components/SimpleTimeline/SimpleTimeline.svelte
+++ b/src/components/SimpleTimeline/SimpleTimeline.svelte
@@ -95,6 +95,7 @@
       border-left: 1px solid var(--symbol-colour);
       &:last-child {
         border-left: 1px solid $theme-colour-background;
+        @include fpb-0;
       }
     }
     svg {
@@ -124,12 +125,6 @@
       }
       :global(p) {
         @include body-note;
-        // @include fmb-2;
-        // @include leading-normal;
-        // @include font-light;
-        // @include text-sm;
-        // @include font-note;
-        // @include text-primary;
       }
     }
   }
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index a846dd96..896edb93 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -225,7 +225,7 @@
           <p class="table--header--dek body-note">{@html dek}</p>
         {/if}
         {#if searchable || filterList}
-          <nav class="input">
+          <nav class="input fmx-0 fmy-2">
             {#if filterList}
               <div class="table--header--filter">
                 <Select
@@ -418,7 +418,6 @@
   }
 
   nav.input {
-    margin: 0.5rem 0;
     padding: 0;
     width: 100%;
     display: flex;
@@ -426,7 +425,7 @@
     align-items: flex-end;
     flex-direction: row;
     flex-wrap: wrap;
-    gap: 1rem;
+    gap: clamp(0.31rem, calc(0.29rem + 0.1vw), 0.38rem);
   }
 
   nav.show-all {