@reuters-graphics/graphics-components 2.0.0 → 2.0.2

package/dist/components/Block/Block.stories.svelte

@@ -3,10 +3,16 @@ import customLayoutsDocs from "./stories/docs/customLayouts.md?raw";
 import snapWidthsDocs from "./stories/docs/snapWidths.md?raw";
 import Block from "./Block.svelte";
 import { withComponentDocs, withStoryDocs } from "$docs/utils/withParams.js";
+import { toId } from "@storybook/csf";
 export const meta = {
   title: "Components/Page layout/Block",
   component: Block,
-  ...withComponentDocs(componentDocs),
+  parameters: {
+    ...withComponentDocs(componentDocs).parameters,
+    canvasDocs: {
+      [toId("Components/Page layout/Block", "default")]: componentDocs
+    }
+  },
   argTypes: {
     width: {
       control: "select",

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

@@ -1,16 +1,19 @@
 import { SvelteComponent } from "svelte";
 export declare const meta: {
+    title: string;
+    component: typeof Block;
+    parameters: {
+        canvasDocs: {
+            [x: string]: any;
+        };
+        docs: any;
+    };
     argTypes: {
         width: {
             control: string;
             options: string[];
         };
     };
-    parameters: {
-        docs: any;
-    };
-    title: string;
-    component: typeof Block;
 };
 declare const __propDef: {
     props: Record<string, never>;

package/dist/components/FeaturePhoto/stories/docs/archieML.md

@@ -0,0 +1,37 @@
+```yaml
+[blocks]
+
+type: photo
+width: normal
+src: images/shark.jpg
+altText: The king of the sea
+caption: Carcharodon carcharias - REUTERS
+
+[]
+```
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
+
+  import content from '$locales/en/content.json';
+  import { assets } from '$app/paths';
+</script>
+
+{#each content.blocks as block}
+  {#if block.Type === 'text'}
+  <!-- ... -->
+
+  {:else if block.type === 'photo'}
+    <FeaturePhoto
+      width="{block.width}"
+      src="{`${assets}/${block.src}`}"
+      altText="{block.altText}"
+      caption="{block.caption}"
+    />
+
+  <!-- ... -->
+  {/if}
+{/each}
+```

package/dist/components/GraphicBlock/stories/docs/archieML.md

@@ -0,0 +1,40 @@
+For Graphics Kit users, the `GraphicBlock` component is built-in to handle [ai2svelte](https://github.com/reuters-graphics/ai2svelte) graphics.
+
+First, import your ai2svelte graphic in `App.svelte` and add it to the `aiCharts` object;
+
+```svelte
+<!-- App.svelte -->
+<script>
+  // Other stuff...
+
+  import AiMap from './ai2svelte/my-map.svelte';
+
+  const aiCharts = {
+    // Other charts...
+    AiMap,
+  };
+</script>
+```
+
+Then add the following structure to your ArchieML doc, taking care that the name of your chart in the `aiCharts` object matches the name of your `chart`:
+
+```yaml
+[blocks]
+# ...
+
+type: ai-graphic
+chart: AiMap
+width: normal
+textWidth: normal
+title: Earthquake in Haiti
+description: The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021.
+notes: \Note: A shakemap represents the ground shaking produced by an earthquake.
+
+\Source: USGIS
+:end
+altText: A map that shows the shake intensity of the earthquake, which was worst in central Haiti.
+:end
+
+# ...
+[]
+```

package/dist/components/PhotoPack/stories/docs/archieML.md

@@ -0,0 +1,63 @@
+```yaml
+[blocks]
+# ...
+
+type: photo-pack
+id: my-photo-pack
+class: mb-2
+width: wide
+textWidth: normal
+gap: 10
+[.images]
+  src: images/my-img-1.jpg
+  altText: Alt text
+  caption: Lorem ipsum. REUTERS/Photog
+
+  src: images/my-img-2.jpg
+  altText: Alt text
+  caption: Lorem ipsum. REUTERS/Photog
+
+  src: images/my-img-3.jpg
+  altText: Alt text
+  caption: Lorem ipsum. REUTERS/Photog
+
+  src: images/my-img-4.jpg
+  altText: Alt text
+  caption: Lorem ipsum. REUTERS/Photog
+
+  src: images/my-img-5.jpg
+  altText: Alt text
+  caption: Lorem ipsum. REUTERS/Photog
+[]
+
+# ...
+[]
+```
+
+```svelte
+<!-- App.svelte -->
+{#each content.blocks as block}
+  {#if block.type === 'text'}
+  <!-- ... -->
+
+  {:else if block.type === 'photo-pack'}
+    <PhotoPack
+      id={block.id}
+      class={block.class}
+      width={block.width}
+      textWidth={block.textWidth}
+      images={block.images.map((img) => ({
+        src: `${assets}/${img.src}`,
+        altText: img.altText,
+        caption: img.caption,
+      }))}
+      layouts={[
+        { breakpoint: 750, rows: [2, 3] },
+        { breakpoint: 450, rows: [1, 2, 2] },
+      ]}
+    />
+    
+  <!-- ... -->
+  {/if}
+{/each}
+```

package/dist/components/ReferralBlock/ReferralBlock.svelte

@@ -11,6 +11,7 @@ export { cls as class };
 import Block from "../Block/Block.svelte";
 import { onMount } from "svelte";
 import { getTime } from "../SiteHeader/NavBar/NavDropdown/StoryCard/time";
+import { articleIsNotCurrentPage } from "./filterCurrentPage";
 let clientWidth;
 const SECTION_API = "recent-stories-by-sections-v1";
 const COLLECTION_API = "articles-by-collection-alias-or-id-v1";
@@ -30,7 +31,9 @@ const getReferrals = async () => {
       })
     );
     const data = await response.json();
-    const articles = data.result.articles.filter((a) => a?.headline_category || a?.kicker?.name).filter((a) => a?.thumbnail?.renditions?.landscape?.["240w"]).filter((a) => !a?.content?.third_party).slice(0, number);
+    const articles = data.result.articles.filter((a) => a?.headline_category || a?.kicker?.name).filter(
+      (a) => a?.thumbnail?.renditions?.landscape?.["240w"] || a?.thumbnail?.resizer_url
+    ).filter((a) => !a?.content?.third_party).filter(articleIsNotCurrentPage).slice(0, number);
     referrals = articles;
   } catch {
     console.warn("Unable to fetch referral links.");
@@ -94,13 +97,24 @@ onMount(getReferrals);
                   class="image-container block m-0 overflow-hidden relative"
                   class:xs="{clientWidth && clientWidth < 450}"
                 >
-                  <img
-                    class="block object-cover m-0 w-full"
-                    data-chromatic="ignore"
-                    src="{referral.thumbnail.renditions.landscape['240w']}"
-                    alt="{referral.thumbnail.caption ||
-                      referral.thumbnail.alt_text}"
-                  />
+                  {#if referral.thumbnail.resizer_url}
+                    <img
+                      class="block object-cover m-0 w-full"
+                      data-chromatic="ignore"
+                      src="{referral.thumbnail
+                        .resizer_url}&width=120&quality=80"
+                      alt="{referral.thumbnail.caption ||
+                        referral.thumbnail.alt_text}"
+                    />
+                  {:else}
+                    <img
+                      class="block object-cover m-0 w-full"
+                      data-chromatic="ignore"
+                      src="{referral.thumbnail.renditions.landscape['240w']}"
+                      alt="{referral.thumbnail.caption ||
+                        referral.thumbnail.alt_text}"
+                    />
+                  {/if}
                 </div>
               </div>
             </a>

package/dist/components/ReferralBlock/filterCurrentPage.d.ts

@@ -0,0 +1,2 @@
+import type { Article } from './types';
+export declare const articleIsNotCurrentPage: (article: Article) => boolean;

package/dist/components/ReferralBlock/filterCurrentPage.js

@@ -0,0 +1,32 @@
+const getUrlFromPath = (path) => {
+    const base = 'https://www.reuters.com';
+    try {
+        return new URL(path);
+    }
+    catch {
+        try {
+            return new URL(path, base);
+        }
+        catch {
+            return null;
+        }
+    }
+};
+const isCurrentPage = (urlPath) => {
+    if (typeof window === 'undefined' || typeof window.location === 'undefined') {
+        return false;
+    }
+    const url = getUrlFromPath(urlPath);
+    if (!url)
+        return false;
+    return (window.location.origin === url.origin &&
+        window.location.pathname === url.pathname);
+};
+export const articleIsNotCurrentPage = (article) => {
+    const { redirect_url: redirectUrl, canonical_url: canonicalUrl } = article;
+    if (redirectUrl)
+        return !isCurrentPage(redirectUrl);
+    if (canonicalUrl)
+        return !isCurrentPage(canonicalUrl);
+    return true;
+};

package/dist/components/ReferralBlock/types.d.ts

@@ -0,0 +1,99 @@
+export interface Referrals {
+    statusCode: number;
+    message: string;
+    result: Result;
+}
+interface Result {
+    date_modified: Date;
+    pagination: Pagination;
+    fetch_type: string;
+    title: string;
+    articles: Article[];
+}
+export interface Article {
+    id: string;
+    canonical_url: string;
+    basic_headline: string;
+    title: string;
+    lead_art: LeadArt;
+    description: string;
+    web: string;
+    content_code: string;
+    updated_time: Date;
+    published_time: Date;
+    display_time: Date;
+    thumbnail: LeadArt;
+    primary_media_type: string;
+    source: Source;
+    redirect_url: string;
+    distributor: string;
+    authors: Author[];
+    kicker: Kicker;
+    content_elements: unknown[];
+    headline_category?: unknown;
+    content?: {
+        third_party?: unknown;
+    };
+}
+interface Author {
+    topic_url: string;
+    thumbnail: Thumbnail;
+    id: string;
+    name: string;
+    first_name: string;
+    last_name: string;
+    company: string;
+    social_links: SocialLink[];
+    byline: string;
+}
+interface SocialLink {
+    url: string;
+    site: string;
+}
+interface Thumbnail {
+    url: string;
+    resizer_url: string;
+    renditions: Renditions;
+}
+interface Renditions {
+    square: Landscape;
+    landscape: Landscape;
+    portrait: Landscape;
+    original: Landscape;
+}
+interface Landscape {
+    '60w': string;
+    '120w': string;
+    '240w': string;
+    '480w': string;
+    '960w': string;
+    '1080w': string;
+    '1200w': string;
+    '1920w': string;
+}
+interface Kicker {
+    name: string;
+    path: string;
+    names: string[];
+}
+interface LeadArt {
+    type: string;
+    url: string;
+    resizer_url: string;
+    renditions: Renditions;
+    id: string;
+    caption?: string;
+    alt_text: string;
+    width: number;
+    height: number;
+    subtitle: string;
+    updated_at: Date;
+}
+interface Source {
+    name: string;
+}
+interface Pagination {
+    size: number;
+    expected_size: number;
+}
+export {};

package/dist/components/ReferralBlock/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/SEO/stories/docs/archieML.md

@@ -0,0 +1,36 @@
+```yaml
+slug:  ROOT-SLUG/WILD
+seoTitle: Page title for search
+seoDescription: Page description for search
+shareTitle: Page title for social media
+shareDescription: Page description for social media
+shareImgPath: images/reuters-graphics.jpg
+shareImgAlt: Alt text for share image.
+```
+
+```svelte
+<script>
+  import { SEO } from '@reuters-graphics/graphics-components';
+  import pkg from '$pkg';
+  import content from '$locales/en/content.json';
+  import { assets } from '$app/paths';
+  import { page } from '$app/stores';
+</script>
+
+<SEO
+  baseUrl="{VITE_BASE_URL}"
+  pageUrl="{$page.url}"
+  seoTitle="{content.seoTitle}"
+  seoDescription="{content.seoDescription}"
+  shareTitle="{content.shareTitle}"
+  shareDescription="{content.shareDescription}"
+  shareImgPath="{`${assets}/${content.shareImgPath}`}"
+  shareImgAlt="{content.shareImgAlt}"
+  publishTime="{pkg?.reuters?.graphic?.published}"
+  updateTime="{pkg?.reuters?.graphic?.updated}"
+  authors="{pkg?.reuters?.graphic?.authors}"
+/>
+```
+
+> **Note:** For _reasons_, we can't document the value of `VITE_BASE_URL` below. It's `import` + `.meta.env.BASE_URL` (concatenate all that) in the Graphics Kit and other Vite-based rigs.
+

package/dist/components/Scroller/stories/docs/ai2svelte.md

@@ -40,85 +40,3 @@ A more detailed example of using `Scroller` with graphics created by [ai2svelte]
   embedded="{false}"
 />
 ```
-
-When working with a ArchieML doc, here's an example of how you can tie your text into your steps.
-
-```yaml
-# Google doc block
-Type: scroller
-ID: map-scrolly
-Step1Text: #### Step 1
-
-Lorem Ipsum
-:end
-AltText1: A map showing the Upper West side in New York City.
-:end
-
-Step2Text: #### Step 2
-
-Lorem Ipsum
-:end
-AltText2: The same map now highlights 98th Street.
-:end
-
-Step3Text: #### Step 3
-
-Lorem Ipsum
-:end
-AltText3: The same map now highlights three locations near 98th Street where something particulary important happened.
-:end
-```
-
-```svelte
-<!-- App.svelte -->
-<script>
-  // Previos imports and stuff...
-
-  // This should be already imported for you.
-  import content from '$locales/en/content.json';
-
-  // Get the data for the block in content by its ID
-  const scrollerBlock = content.blocks.find(
-    (block) => block.ID === 'map-scrolly'
-  );
-
-  // Now plug your text into your step foregrounds
-  const steps = [
-    {
-      background: MyAiMap1,
-      backgroundProps: { basePath: assets },
-      foreground: scrollerBlock.Step1Text,
-      altText: scrollerBlock.AltText1,
-    },
-    {
-      background: MyAiMap2,
-      backgroundProps: { basePath: assets },
-      foreground: scrollerBlock.Step2Text,
-      altText: scrollerBlock.AltText2,
-    },
-    {
-      background: MyAiMap3,
-      backgroundProps: { basePath: assets },
-      foreground: scrollerBlock.Step3Text,
-      altText: scrollerBlock.AltText3,
-    },
-  ];
-</script>
-
-{#each content.blocks as block}
-  {#if block.Type === 'text'}
-    <!-- ... other blocks -->
-
-    <!-- Copy/paste into your blocks loop! -->
-  {:else if block.Type === 'scroller' && block.ID === 'map-scrolly'}
-    <Scroller
-      steps="{steps}"
-      backgroundWidth="fluid"
-      foregroundPosition="middle"
-      stackBackground="{true}"
-      embedded="{false}"
-    />
-    <!-- END copy/paste -->
-  {/if}
-{/each}
-```

package/dist/components/Scroller/stories/docs/archieML.md

@@ -0,0 +1,87 @@
+First, import your ai2svelte graphics in `App.svelte` and add them to the `aiCharts` object;
+
+```svelte
+<!-- App.svelte -->
+<script>
+  // Other stuff...
+
+  import AiMap1 from './ai2svelte/my-map-1.svelte';
+  import AiMap2 from './ai2svelte/my-map-2.svelte';
+  import AiMap3 from './ai2svelte/my-map-3.svelte';
+
+  const aiCharts = {
+    // Other charts...
+    AiMap1,
+    AiMap2,
+    AiMap3,
+  };
+</script>
+```
+
+Then add the following structure to your ArchieML Doc, taking care that the names of your charts in the `aiCharts` object match the names of your step backgrounds:
+
+```yaml
+[blocks]
+# ...
+
+type: ai-scroller
+id: my-map-scroller
+width: normal
+foregroundPosition: middle
+stackBackground: true
+[.steps]
+  background: AiMap1
+  text: #### Step 1
+
+  Lorem ipsum
+  :end
+  altText: A map showing the Upper West side in New York City.
+
+  Can add paragraphs of alt text if you want to break up sentences.
+  :end
+
+  background: AiMap2
+  text: #### Step 2
+
+  Lorem ipsum
+  :end
+  altText: The same map now highlights 98th Street.
+  :end
+
+  background: AiMap3
+  text: #### Step 3
+
+  Lorem ipsum
+  :end
+  altText: The same map now highlights three locations near 98th Street where something particulary important happened.
+  :end
+[]
+
+# ...
+[]
+```
+
+```svelte
+<!-- App.svelte -->
+{#each content.blocks as block}
+  {#if block.type === 'text'}
+  <!-- ... -->
+  
+  {:else if block.type === 'ai-scroller'}
+      <Scroller
+        id="{block.id}"
+        backgroundWidth="{block.width}"
+        foregroundPosition="{block.foregroundPosition}"
+        stackBackground="{block.stackBackground === 'true'}"
+        steps="{block.steps.map((step) => ({
+          background: aiCharts[step.background],
+          backgroundProps: { assetsPath: assets || '/' },
+          foreground: step.text,
+          altText: step.altText,
+        }))}"
+      />
+  
+  <!-- ... -->
+  {/if}
+{/each}
+```

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

@@ -13,12 +13,19 @@
       <span>{story.title}</span>
       <time datetime="{story.display_time}">{getTime(story.display_time)}</time>
     </div>
-    {#if thumbnail}
+    {#if thumbnail && (thumbnail.resizer_url || thumbnail?.renditions?.square?.['120w'])}
       <div class="thumbnail">
-        <img
-          src="{thumbnail.renditions.square['120w']}"
-          alt="{thumbnail.alt_text}"
-        />
+        {#if thumbnail.resizer_url}
+          <img
+            src="{thumbnail.resizer_url}&width=120&quality=80"
+            alt="{thumbnail.alt_text}"
+          />
+        {:else}
+          <img
+            src="{thumbnail.renditions.square['120w']}"
+            alt="{thumbnail.alt_text}"
+          />
+        {/if}
       </div>
     {/if}
   </a>

package/dist/components/SiteHeadline/stories/docs/archieML.md

@@ -0,0 +1,26 @@
+```yaml
+section: Graphics
+sectionUrl: https://www.reuters.com/graphics/
+hed: A beautiful page
+authors: Samuel Granados,Dea Bankova
+published: 2022-09-12T08:30:00.000Z
+updated:
+```
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { SiteHeadline } from '@reuters-graphics/graphics-components';
+
+  import content from '$locales/en/content.json';
+</script>
+
+<SiteHeadline
+  section="{content.section}"
+  sectionUrl="{content.sectionUrl}"
+  hed="{content.hed}"
+  authors="{content.authors.split(',')}"
+  publishTime="{content.published}"
+  updateTime="{content.updated}"
+/>
+```

package/dist/docs/docs-components/CopyColourTable/styles.module.scss

@@ -134,7 +134,7 @@ $header: #5e81ac;
 .importsnippet :global {
   max-width: 600px;
   position: relative;
-  
+
   p {
     font-size: 0.8rem;
     line-height: 1;
@@ -147,7 +147,9 @@ $header: #5e81ac;
   }
 
   pre {
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23) !important;
+    box-shadow:
+      0 5px 10px rgba(0, 0, 0, 0.19),
+      0 3px 3px rgba(0, 0, 0, 0.23) !important;
     margin-top: 0 !important;
     border-radius: 4px;
     border: 1px solid hsla(203, 50%, 30%, 0.15);

package/dist/docs/docs-components/Herbie/Herbie.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface InlineNumberProps {
+    number: number;
+    children: React.ReactNode;
+}
+declare const InlineNumber: React.FC<InlineNumberProps>;
+export default InlineNumber;