@reuters-graphics/graphics-components 1.1.7 → 2.0.1

package/dist/components/SiteFooter/Referrals/Referrals.svelte

@@ -1,56 +0,0 @@
-<script>
-  import { onMount } from 'svelte';
-  import Link from './Link.svelte';
-
-  export let referrals = [];
-
-  $: verifiedReferrals = referrals
-    .filter((r) => r.url && r.title && r.image)
-    .slice(0, 4);
-
-  let metadata;
-
-  onMount(() => {
-    if (verifiedReferrals.length === 4) {
-      metadata = verifiedReferrals;
-      return;
-    }
-    fetch(
-      'https://graphics.thomsonreuters.com/data/reuters-graphics/homepage/graphics.json'
-    )
-      .then((resp) => resp.json())
-      .then((d) => {
-        const data = d
-          .filter(({ canonical }) => {
-            const pathname = window.location.pathname
-              .replace(/\/index\.html$/, '')
-              .replace(/\/$/, '');
-            if (!pathname) return true;
-            return !canonical.includes(pathname);
-          })
-          .slice(0, 4)
-          .map(({ url, image, title, description }) => ({
-            url,
-            image,
-            title,
-            description,
-          }));
-        metadata = [...verifiedReferrals, ...data].slice(0, 4);
-      });
-  });
-</script>
-
-{#if metadata}
-  <nav class="referral-rail row">
-    {#each metadata as referral}
-      <Link {...referral} />
-    {/each}
-  </nav>
-{/if}
-
-<style>.row {
-  margin-right: -10px;
-  margin-left: -10px;
-  display: flex;
-  flex-wrap: wrap;
-}</style>

package/dist/components/SiteFooter/Referrals/Referrals.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  ReferralsProps */
-/** @typedef {typeof __propDef.events}  ReferralsEvents */
-/** @typedef {typeof __propDef.slots}  ReferralsSlots */
-export default class Referrals extends SvelteComponent<{
-    referrals?: any[] | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ReferralsProps = typeof __propDef.props;
-export type ReferralsEvents = typeof __propDef.events;
-export type ReferralsSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        referrals?: any[] | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/components/SiteFooter/Referrals/index.svelte

@@ -1,49 +0,0 @@
-<script>
-  import Referrals from './Referrals.svelte';
-  import IntersectionObserver from './IntersectionObserver.svelte';
-
-  export let referrals = [];
-</script>
-
-<IntersectionObserver let:intersecting top="{2400}" once="{true}">
-  {#if intersecting}
-    <section class="referrals px-0 py-5">
-      <h2 class="fmt-0 text-base font-medium">
-        <a href="https://graphics.reuters.com/">More from Reuters Graphics</a>
-      </h2>
-      {#if typeof window !== 'undefined'}
-        <Referrals {referrals} />
-      {/if}
-    </section>
-  {/if}
-</IntersectionObserver>
-
-<style>section.referrals {
-  margin: 0;
-  max-width: 1400px;
-  padding-left: 2.2222222222vw;
-  padding-right: 2.2222222222vw;
-  border-top: 1px solid var(--nav-rules, #999);
-}
-@media (max-width: 1023px) {
-  section.referrals {
-    padding-left: 4.2666666667vw;
-    padding-right: 4.2666666667vw;
-  }
-}
-@media (min-width: 1440px) {
-  section.referrals {
-    padding-left: 32px;
-    padding-right: 32px;
-  }
-}
-section.referrals h2 {
-  color: var(--nav-primary, #666);
-}
-section.referrals h2 a {
-  color: var(--nav-primary, #666);
-  text-decoration: none;
-}
-section.referrals h2 a:hover {
-  text-decoration: underline;
-}</style>

package/dist/components/SiteFooter/Referrals/index.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  IndexProps */
-/** @typedef {typeof __propDef.events}  IndexEvents */
-/** @typedef {typeof __propDef.slots}  IndexSlots */
-export default class Index extends SvelteComponent<{
-    referrals?: any[] | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type IndexProps = typeof __propDef.props;
-export type IndexEvents = typeof __propDef.events;
-export type IndexSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        referrals?: any[] | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/components/SiteFooter/stories/docs/customReferrals.md

@@ -1,26 +0,0 @@
-Pass up to four custom referrals to the `referrals` prop.
-
-```svelte
-<script>
-  import { SiteFooter } from '@reuters-graphics/graphics-components';
-
-  const customReferrals = [
-    {
-      url: 'https://graphics.reuters.com/world-coronavirus-tracker-and-maps/',
-      title: 'COVID-19: the latest global statistics, charts and maps',
-      description: 'Tracking the global coronavirus outbreak, updated daily',
-      image:
-        'https://graphics.thomsonreuters.com/cdn/2020/covid-global-tracker/share-cards/global/en/share.png',
-    },
-    {
-      url: 'https://graphics.reuters.com/world-coronavirus-tracker-and-maps/regions/europe',
-      title: 'Coronavirus in Europe: the latest counts, charts and maps',
-      description: 'Tracking the global coronavirus outbreak, updated daily',
-      image:
-        'https://graphics.thomsonreuters.com/cdn/2020/covid-global-tracker/share-cards/regions/en/europe.png',
-    },
-  ];
-</script>
-
-<SiteFooter referrals="{customReferrals}" />
-```

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

@@ -1,30 +0,0 @@
-Setup your Google Doc to work with the `SiteHeadline` component.
-
-```yaml
-# Beginning of your Google doc
-Section: Global News
-SectionUrl:
-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';
-
-  // These should be already imported for you.
-  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/guides/google-docs.mdx

@@ -1,74 +0,0 @@
-import { Meta } from '@storybook/blocks';
-import { parameters } from '../utils/docsPage.js';
-
-<Meta title="Guides/Using with Google docs" parameters={{ ...parameters }} />
-
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
-# Using with Google docs
-
-Most of the default examples in these docs show how to use components by passing data into them directly through props. In the Kit, though, you likely won't be hard-coding things like text strings in your code and instead will get them from a Google Doc.
-
-It's usually easy to use a Google Doc to fill in the props for our components, but it may mean you need to write a tiny bit of code to translate strings from a doc into the data type our component's props expect.
-
-Let's look at a basic component, a `ProfileCard`, with a demo that looks like this in the docs:
-
-```svelte
-<script>
-  import { ProfileCard } from '@reuters-graphics/graphics-components';
-</script>
-
-<ProfileCard
-  name="Tom"
-  img="https://cats.com/cat1.jpg"
-  birthday="{new Date('2020-09-25')}"
-  bio="Some notes.\n\nWith multiple paragraphs."
-  isStaff="{true}"
-/>
-```
-
-The data for the component's props includes strings, a date and a boolean.
-
-In our Google doc, we might fill out a block for this component like this:
-
-```yaml
-Type: profile-card
-Name: Tom
-Image: images/tom-the-cat.jpg
-Birthday: 2020-09-25
-Bio: Some notes.
-
-With multiple paragraphs.
-:end
-Staff: true
-```
-
-Now we can tie that data into your blocks loop like this:
-
-```svelte
-<script>
-  // These are usually already imported for you
-  import { assets } from '$app/paths';
-  import content from '$locales/en/content.json';
-
-  import { ProfileCard } from '@reuters-graphics/graphics-components';
-</script>
-
-{#each content.blocks as block}
-  {#if block.Type}
-    <!-- ... -->
-  {:else if block.Type === 'profile-card'}
-    <ProfileCard
-      name="{block.Name}"
-      img="{`${assets}/${block.Image}`}"
-      birthday="{new Date(block.Birthday)}"
-      bio="{block.Bio}"
-      isStaff="{block.Staff === 'true'}"
-    />
-
-    <!-- ... -->
-  {/if}
-{/each}
-```
-
-Notice how we're coercing some of our data from strings into other data types: a boolean for `isStaff`, a date for `birthday` and an absolute path for `img`.