headline component and general sweep

reuters-graphics · Aug 24, 2023 · 08a0e99 · 08a0e99
1 parent cc553d9
commit 08a0e99
Show file tree

Hide file tree

Showing 31 changed files with 1,189 additions and 222 deletions.
diff --git a/package.json b/package.json
@@ -358,4 +358,4 @@
     "url": "https://github.com/reuters-graphics/graphics-components/issues"
   },
   "readme": "ERROR: No README data found!"
-}
+}
diff --git a/src/components/BeforeAfter/BeforeAfter.stories.svelte b/src/components/BeforeAfter/BeforeAfter.stories.svelte
@@ -57,28 +57,26 @@
     afterSrc="{afterImg}"
     afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
   >
-    <div slot="beforeOverlay" class="overlay before">
-      <h6>July 7, 2020</h6>
-      <p>Initially, this site was far smaller.</p>
+    <div slot="beforeOverlay" class="overlay p-3 before">
+      <p class="h4 font-bold">July 7, 2020</p>
+      <p class="body-note">Initially, this site was far smaller.</p>
     </div>
-    <div slot="afterOverlay" class="overlay after">
-      <h6>Oct. 20, 2020</h6>
-      <p>But then forces built up.</p>
+    <div slot="afterOverlay" class="overlay p-3 after">
+      <p class="h4 font-bold">Oct. 20, 2020</p>
+      <p class="body-note">But then forces built up.</p>
     </div>
     <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
   </BeforeAfter>
 
   <style lang="scss">
     .overlay {
-      color: white;
-      padding: 15px;
-      background: rgba(0, 0, 0, 0.2);
+      background: rgba(0, 0, 0, 0.45);
+      max-width: 350px;
       &.after {
         text-align: right;
       }
-      h6,
       p {
-        color: white;
+        color: #ffffff;
       }
     }
   </style>
@@ -91,31 +89,32 @@
     afterSrc="{afterImg}"
     afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
   >
-    <div let:description="{id}" slot="beforeOverlay" class="overlay">
-      <p id="{id}">
+    <div let:description="{id}" slot="beforeOverlay" class="overlay p-3">
+      <p class="body-caption" id="{id}">
         On July 7, 2020, the base contained only a few transport vehicles.
       </p>
     </div>
-    <div let:description="{id}" slot="afterOverlay" class="overlay">
+    <div let:description="{id}" slot="afterOverlay" class="overlay p-3">
       <!-- 👇 id can also be used on an element containing multiple text elements -->
       <div id="{id}">
-        <p>But by October, tanks and artillery could be seen.</p>
-        <p>
+        <p class="body-caption">
+          But by October, tanks and artillery could be seen.
+        </p>
+        <p class="body-caption">
           In total, over 50 pieces of heavy machinery and 200 personnel are now
           based here.
         </p>
       </div>
     </div>
+    <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
   </BeforeAfter>
   <style lang="scss">
     div.overlay {
-      color: white;
-      padding: 15px;
       max-width: 250px;
-      background: rgba(0, 0, 0, 0.2);
-    }
-    p {
-      color: white;
+      background: rgba(0, 0, 0, 0.45);
+      p {
+        color: #ffffff;
+      }
     }
   </style>
 </Story>
diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -225,7 +225,10 @@
     </div>
     {#if $$slots.caption}
       <PaddingReset containerIsFluid="{width === 'fluid'}">
-        <aside class="before-after-caption mx-auto" id="{`${id}-caption`}">
+        <aside
+          class="before-after-caption mx-auto fmt-2"
+          id="{`${id}-caption`}"
+        >
           <!-- Caption for image credits -->
           <slot name="caption" />
         </aside>
@@ -261,10 +264,6 @@
         &:last-child {
           margin-bottom: 0;
         }
-        p {
-          @include body-caption;
-          color: #ffffff;
-        }
       }
       &.before {
         left: 0;
@@ -333,7 +332,6 @@
   }
 
   aside.before-after-caption {
-    @include fmt-2;
     :global {
       p {
         @include body-caption;

diff --git a/src/components/BeforeAfter/stories/docs/ariaDescriptions.md b/src/components/BeforeAfter/stories/docs/ariaDescriptions.md
@@ -1,29 +1,36 @@
-Use text elements in your overlays as [ARIA descriptions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) for your images by setting an ID on text elements within each overly with the `description` [slot prop](https://svelte.dev/tutorial/slot-props).
+Use text elements in your overlays as [ARIA descriptions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) for your images by setting an ID on text elements within each overlay with the `description` [slot prop](https://svelte.dev/tutorial/slot-props).
 
 > **💡 TIP:** You must always use the `beforeAlt` / `afterAlt` props to label your image for visually impaired readers, but you can use these descriptions to provide more information or context that the reader might also need.
 
 ```svelte
-<BeforeAfter
-  beforeSrc="{`${assets}/images/before-after/myrne-before.jpg`}"
-  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
-  afterSrc="{`${assets}/images/before-after/myrne-after.jpg`}"
-  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
->
-  <!-- 👇 Define the prop on each slot... -->
-  <div let:description="{id}" slot="beforeOverlay">
-    <p id="{id}">
-      On July 7, 2020, the base contained only a few transport vehicles.
-    </p>
-  </div>
-  <div let:description="{id}" slot="afterOverlay">
-    <!-- 👇 id can also be used on an element containing multiple text elements -->
-    <div id="{id}">
-      <p>But by October, tanks and artillery could be seen.</p>
-      <p>
-        In total, over 50 pieces of heavy machinery and 200 personnel are now
-        based here.
-      </p>
+  <BeforeAfter
+    beforeSrc="{beforeImg}"
+    beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
+    afterSrc="{afterImg}"
+    afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
+  >
+    <div slot="beforeOverlay" class="overlay p-3 before">
+      <p class="h4 font-bold">July 7, 2020</p>
+      <p class="body-note">Initially, this site was far smaller.</p>
     </div>
-  </div>
+    <div slot="afterOverlay" class="overlay p-3 after">
+      <p class="h4 font-bold">Oct. 20, 2020</p>
+      <p class="body-note">But then forces built up.</p>
+    </div>
+    <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
+  </BeforeAfter>
+
+  <style lang="scss">
+    .overlay {
+      background: rgba(0, 0, 0, 0.45);
+      max-width: 350px;
+      &.after {
+        text-align: right;
+      }
+      p {
+        color: #ffffff;
+      }
+    }
+  </style>
 </BeforeAfter>
 ```
diff --git a/src/components/BeforeAfter/stories/docs/withOverlays.md b/src/components/BeforeAfter/stories/docs/withOverlays.md
@@ -2,34 +2,32 @@ Add overlays with the `beforeOverlay` and `afterOverlay` slots and a caption to
 
 ```svelte
 <BeforeAfter
-  beforeSrc="{`${assets}/images/before-after/myrne-before.jpg`}"
+  beforeSrc="{beforeImg}"
   beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
-  afterSrc="{`${assets}/images/before-after/myrne-after.jpg`}"
+  afterSrc="{afterImg}"
   afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
 >
-  <div slot="beforeOverlay" class="overlay before">
-    <h6>July 7, 2020</h6>
-    <p>Initially, this site was far smaller.</p>
+  <div slot="beforeOverlay" class="overlay p-3 before">
+    <p class="h4 font-bold">July 7, 2020</p>
+    <p class="body-note">Initially, this site was far smaller.</p>
   </div>
-  <div slot="afterOverlay" class="overlay after">
-    <h6>Oct. 20, 2020</h6>
-    <p>But then forces built up.</p>
+  <div slot="afterOverlay" class="overlay p-3 after">
+    <p class="h4 font-bold">Oct. 20, 2020</p>
+    <p class="body-note">But then forces built up.</p>
   </div>
+  <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
 </BeforeAfter>
 
 <style lang="scss">
   .overlay {
-    color: white;
-    padding: 15px;
-    background: rgba(0, 0, 0, 0.2);
-    h6,
-    p {
-      color: white;
-      margin: 0;
-    }
+    background: rgba(0, 0, 0, 0.45);
+    max-width: 350px;
     &.after {
       text-align: right;
     }
+    p {
+      color: #ffffff;
+    }
   }
 </style>
 ```
diff --git a/src/components/Block/Block.svelte b/src/components/Block/Block.svelte
@@ -7,6 +7,7 @@
 
   /** Add an id to the block tag to target it with custom CSS. */
   export let id: string = '';
+
   /** Add extra classes to the block tag to target it with custom CSS. */
   let cls: string = '';
   export { cls as class };
@@ -23,7 +24,7 @@
 
 <div
   id="{id}"
-  class="article-block {width} {cls}"
+  class="article-block fmx-auto {width} {cls}"
   class:snap="{snap && width !== 'fluid' && width !== 'widest'}"
   role="{role}"
   aria-label="{ariaLabel}"
@@ -37,11 +38,6 @@
 
   .article-block {
     max-width: var(--normal-column-width, 660px);
-    @include fmx-auto;
-    // Note to P: Don't want any default top-bottom margin by default here b/c
-    // it's too hard to get rid of. Let's add default within components
-    // with class tokens...
-    // @include fmy-5;
 
     &.narrower {
       max-width: var(--narrower-column-width, 330px);

diff --git a/src/components/BodyText/BodyText.svelte b/src/components/BodyText/BodyText.svelte
@@ -15,7 +15,7 @@
   import Block from '../Block/Block.svelte';
 </script>
 
-<Block class="body-text {cls}">
+<Block class="body-text fmy-5 {cls}">
   {#if text}
     {@html marked.parse(text)}
   {/if}

diff --git a/src/components/Byline/Byline.svelte b/src/components/Byline/Byline.svelte
@@ -66,7 +66,7 @@
 
 <Block id="{id}" class="byline-container {alignmentClass} {cls}" width="normal">
   <aside class="article-metadata font-subhed">
-    <div class="byline-container body-caption">
+    <div class="byline body-caption">
       {#if $$slots.byline}
         <!-- Custom byline -->
         <slot name="byline" />
@@ -75,7 +75,7 @@
         {#if authors.length > 0}
           {#each authors as author, i}
             <a
-              class="no-underline whitespace-nowrap text-primary"
+              class="no-underline whitespace-nowrap text-primary font-medium"
               href="{getAuthorPage(author)}"
               rel="author"
             >
@@ -86,19 +86,20 @@
         {:else}
           <a
             href="https://www.reuters.com"
-            class="no-underline whitespace-nowrap text-primary">Reuters</a
+            class="no-underline whitespace-nowrap text-primary font-medium"
+            >Reuters</a
           >
         {/if}
       {/if}
     </div>
-    <div class="dateline-container fmt-0 body-caption">
+    <div class="dateline fmt-0 body-caption">
       {#if $$slots.published}
-        <div class="whitespace-nowrap">
+        <div class="whitespace-nowrap inline-block">
           <!-- Custom published dateline -->
           <slot name="published" />
         </div>
       {:else if isValidDate(publishTime)}
-        <div class="whitespace-nowrap">
+        <div class="whitespace-nowrap inline-block">
           Published
           <time datetime="{publishTime}">
             {#if isValidDate(updateTime)}
@@ -112,12 +113,12 @@
         </div>
       {/if}
       {#if $$slots.updated}
-        <div class="whitespace-nowrap">
+        <div class="whitespace-nowrap inline-block">
           <!-- Custom updated dateline -->
           <slot name="updated" />
         </div>
       {:else if isValidDate(publishTime) && isValidDate(updateTime)}
-        <div class="whitespace-nowrap">
+        <div class="whitespace-nowrap inline-block">
           Last updated
           <time datetime="{updateTime}">
             {#if areSameDay(new Date(publishTime), new Date(updateTime))}
@@ -138,19 +139,15 @@
   .byline-container {
     @include font-regular;
     a {
-      @include font-bold;
-      text-decoration-line: none;
       &:hover {
         text-decoration-line: underline;
       }
     }
   }
 
   @media (min-width: $column-width-narrower) {
-    .dateline-container {
+    .dateline {
       div {
-        white-space: nowrap;
-        display: inline-block;
         &:not(:last-child) {
           &:after {
             content: '·';

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

diff --git a/src/components/FeaturePhoto/FeaturePhoto.svelte b/src/components/FeaturePhoto/FeaturePhoto.svelte
@@ -81,7 +81,7 @@
   });
 </script>
 
-<Block width="{width}" class="photo {cls}" id="{id}">
+<Block width="{width}" class="photo fmy-5 {cls}" id="{id}">
   <figure
     bind:this="{container}"
     aria-label="media"

diff --git a/src/components/GraphicBlock/GraphicBlock.svelte b/src/components/GraphicBlock/GraphicBlock.svelte
@@ -79,7 +79,7 @@
   role="{role}"
   width="{width}"
   ariaLabel="{ariaLabel}"
-  class="graphic {cls}"
+  class="graphic fmy-5 {cls}"
 >
   <div>
     {#if $$slots.title}

diff --git a/src/components/GraphicBlock/TextBlock.svelte b/src/components/GraphicBlock/TextBlock.svelte
@@ -7,7 +7,7 @@
 </script>
 
 {#if width}
-  <Block width="{width}" class="m-0">
+  <Block width="{width}" class="mx-auto my-0">
     <slot />
   </Block>
 {:else}