@reuters-graphics/graphics-components 0.0.1-beta.1

package/dist/components/SiteFooter/LegalLinks.svelte

@@ -0,0 +1,202 @@
+<script>
+  import { normalizeUrl } from '../SiteHeader/NavBar/utils';
+
+  export let links = {};
+</script>
+
+{#if links.ad_links}
+  <section class="legal">
+    <div class="content-container">
+      <section class="ad-links">
+        <ul class="link-group">
+          {#each links.ad_links as link}
+            <li>
+              <a href="{normalizeUrl(link.url)}">
+                {link.text}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      </section>
+      <p class="disclaimer">
+        All quotes delayed a minimum of 15 minutes. <a
+          href="{normalizeUrl(links.disclaimer_link)}"
+          >See here for a complete list of exchanges and delays</a
+        >.
+      </p>
+      <section class="misc-links">
+        <ul class="link-group">
+          {#each links.misc_links.filter((d) => !d.self) as link}
+            <li>
+              <a href="{normalizeUrl(link.url)}">
+                {link.text}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      </section>
+      <p class="copyright">
+        © {links.copyright_year} Reuters.
+        <a href="{normalizeUrl(links.copyright_link)}">All rights reserved</a>
+      </p>
+    </div>
+  </section>
+{/if}
+
+<style>.content-container {
+  max-width: 1440px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.legal {
+  padding-top: 24px;
+  padding-bottom: 24px;
+  box-sizing: border-box;
+}
+.legal .content-container {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-column-gap: 2.2222222222vw;
+}
+@media (max-width: 1023px) {
+  .legal .content-container {
+    grid-column-gap: 4.2666666667vw;
+  }
+}
+@media (min-width: 1440px) {
+  .legal .content-container {
+    grid-column-gap: 32px;
+  }
+}
+@media (max-width: 1023px) {
+  .legal .content-container {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.legal {
+  border-top: 1px solid var(--nav-rules, #d0d0d0);
+}
+.legal .content-container {
+  padding-left: 2.2222222222vw;
+  padding-right: 2.2222222222vw;
+  box-sizing: border-box;
+}
+@media (max-width: 1023px) {
+  .legal .content-container {
+    padding-left: 4.2666666667vw;
+    padding-right: 4.2666666667vw;
+  }
+}
+@media (min-width: 1440px) {
+  .legal .content-container {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+}
+
+.legal .content-container {
+  grid-row-gap: 1.1111111111vw;
+}
+@media (min-width: 1440px) {
+  .legal .content-container {
+    grid-row-gap: 16px;
+  }
+}
+.legal .content-container .ad-links {
+  grid-column: 1/span 5;
+  grid-row: 1;
+}
+.legal .content-container .misc-links {
+  grid-column: 5/span 8;
+  grid-row: 1;
+  justify-self: end;
+}
+.legal .content-container .disclaimer {
+  grid-column: 1/span 7;
+  grid-row: 2;
+}
+.legal .content-container .copyright {
+  grid-column: 8/span 5;
+  grid-row: 2;
+  justify-self: end;
+}
+@media (max-width: 1023px) {
+  .legal .content-container {
+    grid-row-gap: 2.2222222222vw;
+  }
+}
+@media (max-width: 1023px) and (max-width: 1023px) {
+  .legal .content-container {
+    grid-row-gap: 4.2666666667vw;
+  }
+}
+@media (max-width: 1023px) and (min-width: 1440px) {
+  .legal .content-container {
+    grid-row-gap: 32px;
+  }
+}
+@media (max-width: 1023px) {
+  .legal .content-container .ad-links,
+.legal .content-container .misc-links,
+.legal .content-container .disclaimer,
+.legal .content-container .copyright {
+    grid-column: 1/span 4;
+    justify-self: start;
+  }
+}
+@media (max-width: 1023px) {
+  .legal .content-container .ad-links {
+    grid-row: 1;
+  }
+}
+@media (max-width: 1023px) {
+  .legal .content-container .disclaimer {
+    grid-row: 2;
+  }
+}
+@media (max-width: 1023px) {
+  .legal .content-container .misc-links {
+    grid-row: 3;
+  }
+}
+@media (max-width: 1023px) {
+  .legal .content-container .copyright {
+    grid-row: 4;
+  }
+}
+
+.link-group {
+  margin: 0;
+  padding: 0;
+}
+.link-group li {
+  display: inline-flex;
+  margin-right: 16px;
+  list-style: none;
+  align-items: center;
+}
+.link-group li a {
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  color: var(--nav-primary, #404040);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+section {
+  max-width: 100%;
+  margin: 0;
+}
+
+p.copyright,
+p.disclaimer {
+  margin: 0;
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  font-size: 14px;
+  color: var(--nav-primary, #404040);
+}
+p.copyright a,
+p.disclaimer a {
+  color: inherit;
+}</style>

package/dist/components/SiteFooter/QuickLinks.svelte

@@ -0,0 +1,259 @@
+<script>
+  import { normalizeUrl } from '../SiteHeader/NavBar/utils';
+
+  import Graphics from './svgs/Graphics.svelte';
+  import Pictures from './svgs/Pictures.svelte';
+  import Videos from './svgs/Videos.svelte';
+
+  const symbols = {
+    graphics: Graphics,
+    pictures: Pictures,
+    videos: Videos,
+  };
+
+  export let links = {};
+
+  let windowWidth = 1200;
+  const mobileBreakpoint = 745;
+</script>
+
+<svelte:window bind:innerWidth="{windowWidth}" />
+
+{#if links.latest_links}
+  <section class="quick-links">
+    <h2 class="visually-hidden">Site Index</h2>
+    <div class="content-container">
+      {#if windowWidth < mobileBreakpoint}
+        <div class="latest-and-media">
+          <section class="link-group">
+            <h3>Latest</h3>
+            <ul>
+              {#each links.latest_links as link}
+                <li>
+                  <a href="{normalizeUrl(link.url)}">{link.text}</a>
+                </li>
+              {/each}
+            </ul>
+          </section>
+          <section class="link-group media">
+            <h3>Media</h3>
+            <ul>
+              {#each links.media_links as link}
+                <li>
+                  <div class="symbol">
+                    <svelte:component this="{symbols[link.symbol]}" />
+                  </div>
+                  <a href="{normalizeUrl(link.url)}">
+                    {link.text}
+                  </a>
+                </li>
+              {/each}
+            </ul>
+          </section>
+        </div>
+      {:else}
+        <section class="link-group">
+          <h3>Latest</h3>
+          <ul>
+            {#each links.latest_links as link}
+              <li>
+                <a href="{normalizeUrl(link.url)}">{link.text}</a>
+              </li>
+            {/each}
+          </ul>
+        </section>
+      {/if}
+
+      <section class="link-group">
+        <h3>Browse</h3>
+        <ul>
+          {#each links.browse_links as link}
+            <li>
+              <a href="{normalizeUrl(link.url)}">{link.text}</a>
+            </li>
+          {/each}
+        </ul>
+      </section>
+      {#if windowWidth >= mobileBreakpoint}
+        <section class="link-group media">
+          <h3>Media</h3>
+          <ul>
+            {#each links.media_links as link}
+              <li>
+                <div class="symbol">
+                  <svelte:component this="{symbols[link.symbol]}" />
+                </div>
+                <a href="{normalizeUrl(link.url)}">
+                  {link.text}
+                </a>
+              </li>
+            {/each}
+          </ul>
+        </section>
+      {/if}
+      <div class="about-and-stay-informed">
+        <section class="about">
+          <h3>About Reuters</h3>
+          <ul>
+            {#each links.about_links as link}
+              <li>
+                <a href="{normalizeUrl(link.url)}">{link.text}</a>
+              </li>
+            {/each}
+          </ul>
+        </section>
+        <section class="stay-informed">
+          <h3>Stay Informed</h3>
+          <ul>
+            {#each links.stay_informed_links as link}
+              <li>
+                <a href="{normalizeUrl(link.url)}">{link.text}</a>
+              </li>
+            {/each}
+          </ul>
+        </section>
+      </div>
+    </div>
+  </section>
+{/if}
+
+<style>.content-container {
+  max-width: 1440px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.quick-links {
+  padding-top: 24px;
+  padding-bottom: 24px;
+  box-sizing: border-box;
+}
+.quick-links .content-container {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-column-gap: 2.2222222222vw;
+}
+@media (max-width: 1023px) {
+  .quick-links .content-container {
+    grid-column-gap: 4.2666666667vw;
+  }
+}
+@media (min-width: 1440px) {
+  .quick-links .content-container {
+    grid-column-gap: 32px;
+  }
+}
+@media (max-width: 1023px) {
+  .quick-links .content-container {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+.quick-links ul {
+  margin: 0;
+  padding: 0;
+}
+.quick-links ul li {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  margin: 8px 0;
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+}
+.quick-links ul li a {
+  color: var(--nav-primary, #404040);
+  font-weight: 500;
+  font-size: 16px;
+}
+
+section.quick-links {
+  border-top: 1px solid var(--nav-rules, #d0d0d0);
+  max-width: 100%;
+}
+section.quick-links .content-container {
+  padding-left: 2.2222222222vw;
+  padding-right: 2.2222222222vw;
+  box-sizing: border-box;
+}
+@media (max-width: 1023px) {
+  section.quick-links .content-container {
+    padding-left: 4.2666666667vw;
+    padding-right: 4.2666666667vw;
+  }
+}
+@media (min-width: 1440px) {
+  section.quick-links .content-container {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+}
+section.quick-links h3 {
+  color: var(--nav-primary, #404040);
+  font-size: 16px;
+  font-weight: 400;
+  margin: 0;
+}
+
+.quick-links .content-container {
+  grid-row-gap: 2.2222222222vw;
+}
+@media (max-width: 1023px) {
+  .quick-links .content-container {
+    grid-row-gap: 4.2666666667vw;
+  }
+}
+@media (min-width: 1440px) {
+  .quick-links .content-container {
+    grid-row-gap: 32px;
+  }
+}
+.quick-links .content-container section.link-group {
+  grid-column: auto/span 2;
+  margin: 0;
+}
+@media (min-width: 1024px) {
+  .quick-links .content-container section.link-group:last-child {
+    grid-column: 10/span 3;
+  }
+}
+.quick-links .content-container .latest-and-media {
+  grid-column: 1/span 2;
+  grid-row: 1;
+}
+.quick-links .content-container .latest-and-media .media {
+  margin-top: 24px;
+}
+.quick-links .content-container .about-and-stay-informed {
+  grid-column: 7/span 3;
+  grid-row: 1;
+}
+@media (max-width: 1023px) {
+  .quick-links .content-container .about-and-stay-informed {
+    grid-column: 9/span 3;
+  }
+}
+@media (max-width: 745px) {
+  .quick-links .content-container .about-and-stay-informed {
+    grid-column: 1/span 2;
+    grid-row: 2;
+  }
+}
+.quick-links .content-container .stay-informed {
+  margin-top: 24px;
+}
+
+.symbol {
+  width: 20px;
+  margin-right: 16px;
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}</style>

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

@@ -0,0 +1,45 @@
+<script>
+  import { onMount } from 'svelte';
+  export let once = false;
+  export let top = 0;
+  export let bottom = 0;
+  export let left = 0;
+  export let right = 0;
+  let intersecting = false;
+  let container;
+  onMount(() => {
+    if (typeof IntersectionObserver !== 'undefined') {
+      const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          intersecting = entries[0].isIntersecting;
+          if (intersecting && once) {
+            observer.unobserve(container);
+          }
+        },
+        {
+          rootMargin,
+        }
+      );
+      observer.observe(container);
+      return () => observer.unobserve(container);
+    }
+    function handler() {
+      const bcr = container.getBoundingClientRect();
+      intersecting =
+        bcr.bottom + bottom > 0 &&
+        bcr.right + right > 0 &&
+        bcr.top - top < window.innerHeight &&
+        bcr.left - left < window.innerWidth;
+      if (intersecting && once) {
+        window.removeEventListener('scroll', handler);
+      }
+    }
+    window.addEventListener('scroll', handler);
+    return () => window.removeEventListener('scroll', handler);
+  });
+</script>
+
+<div bind:this="{container}">
+  <slot intersecting="{intersecting}" />
+</div>

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

@@ -0,0 +1,73 @@
+<script>
+  import IntersectionObserver from './IntersectionObserver.svelte';
+  export let url;
+  export let image;
+  export let title;
+  export let description;
+</script>
+
+<div class="referral" title="{description}">
+  <a href="{url.replace('index.html', '')}">
+    <IntersectionObserver let:intersecting top="{600}" once="{true}">
+      {#if intersecting}
+        <div class="image" style="{`background-image: url(${image});`}"></div>
+      {:else}
+        <div class="image"></div>
+      {/if}
+    </IntersectionObserver>
+    <p>{title}</p>
+  </a>
+</div>
+
+<!-- svelte-ignore css-unused-selector -->
+<style>a {
+  text-decoration: none;
+}
+
+.image {
+  width: 100%;
+  padding-bottom: 50%;
+  background-size: cover;
+  background-position: 50%;
+}
+
+.referral {
+  width: 25%;
+  padding: 0 10px;
+}
+.referral div.image {
+  margin-bottom: 5px;
+  border: 1px solid var(--nav-rules, #efefef);
+  border-radius: 8px;
+}
+.referral a:hover {
+  text-decoration: none;
+}
+.referral a:hover p {
+  text-decoration: underline;
+}
+.referral p {
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  color: var(--nav-primary, #666);
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+  text-transform: none;
+  margin: 0;
+  font-weight: 400;
+}
+@media (max-width: 768px) {
+  .referral {
+    width: 33.33333%;
+  }
+  .referral:nth-child(4) {
+    display: none;
+  }
+}
+@media (max-width: 575px) {
+  .referral {
+    width: 50%;
+  }
+  .referral:nth-child(3) {
+    display: none;
+  }
+}</style>

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

@@ -0,0 +1,56 @@
+<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/index.svelte

@@ -0,0 +1,53 @@
+<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">
+      <h2>
+        <a href="https://graphics.reuters.com/">More from Reuters Graphics</a>
+      </h2>
+      {#if typeof window !== 'undefined'}
+        <Referrals referrals="{referrals}" />
+      {/if}
+    </section>
+  {/if}
+</IntersectionObserver>
+
+<style>section.referrals {
+  margin: 0;
+  max-width: 1400px;
+  padding: 25px 0;
+  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 {
+  font-size: 16px;
+  font-weight: 500;
+  margin: 0 0 10px;
+  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>