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

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

@@ -0,0 +1,277 @@
+<script>
+  import { afterUpdate } from 'svelte';
+  import StoryCard from './StoryCard/index.svelte';
+  import Spinner from './Spinner/index.svelte';
+  import { getContext } from 'svelte';
+
+  const activeSection = getContext('nav-active-section');
+
+  export let headingText = 'Trending Stories';
+
+  let stories = [];
+  let lastFetched = null;
+
+  afterUpdate(async () => {
+    if (lastFetched === $activeSection) return;
+    if ($activeSection === 'more') {
+      await fetch(
+        'https://www.reuters.com/pf/api/v3/content/fetch/articles-by-trends-v1?' +
+          new URLSearchParams({
+            query: JSON.stringify({
+              size: 4,
+              website: 'reuters',
+            }),
+          })
+      )
+        .then((response) => response.json())
+        .then((data) => {
+          stories = data.result.articles;
+          lastFetched = $activeSection;
+        });
+    } else {
+      await fetch(
+        'https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?' +
+          new URLSearchParams({
+            query: JSON.stringify({
+              section_ids: $activeSection,
+              size: 4,
+              website: 'reuters',
+            }),
+          })
+      )
+        .then((response) => response.json())
+        .then((data) => {
+          stories = data.result.articles;
+          lastFetched = $activeSection;
+        });
+    }
+  });
+</script>
+
+<div class="dropdown">
+  <div class="dropdown-container">
+    <div class="inner">
+      <div class="submenu">
+        <div class="inner">
+          <slot />
+        </div>
+      </div>
+      <div class="stories-container">
+        <div class="inner">
+          {#if stories.length > 0}
+            <span class="latest">{headingText}</span>
+            <ul class="story-list">
+              {#each stories as story}
+                <li class="story-item">
+                  <StoryCard
+                    story="{story}"
+                    withSection="{$activeSection === 'more'}"
+                  />
+                </li>
+              {/each}
+            </ul>
+          {:else}
+            <div class="spinner">
+              <Spinner />
+            </div>
+          {/if}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>@charset "UTF-8";
+/*
+Several components utilize z-index, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.
+These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors.
+To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit z-index values of 1, 2, and 3 for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher z-index value to show their border over the sibling elements.
+*/
+.dropdown {
+  position: absolute;
+  z-index: 1000;
+  left: 0;
+  top: 64px;
+  width: 100%;
+}
+@media (max-width: 745px) {
+  .dropdown {
+    top: 56px;
+  }
+}
+
+.dropdown-container {
+  border-top: 1px solid var(--nav-rules, #d0d0d0);
+  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  background: var(--nav-background, #fff);
+}
+.dropdown-container > .inner {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-column-gap: 2.2222222222vw;
+  padding-left: 2.2222222222vw;
+  padding-right: 2.2222222222vw;
+  max-width: 1440px;
+  margin: 0 auto;
+}
+@media (max-width: 1023px) {
+  .dropdown-container > .inner {
+    grid-column-gap: 4.2666666667vw;
+  }
+}
+@media (min-width: 1440px) {
+  .dropdown-container > .inner {
+    grid-column-gap: 32px;
+  }
+}
+@media (max-width: 1023px) {
+  .dropdown-container > .inner {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+@media (max-width: 1023px) {
+  .dropdown-container > .inner {
+    padding-left: 4.2666666667vw;
+    padding-right: 4.2666666667vw;
+  }
+}
+@media (min-width: 1440px) {
+  .dropdown-container > .inner {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+}
+
+.submenu,
+.stories-container {
+  padding: 24px 0;
+  grid-row: 1;
+}
+.submenu .inner,
+.stories-container .inner {
+  position: relative;
+  height: 100%;
+}
+
+.submenu {
+  grid-column: 1/span 4;
+}
+@media (min-width: 1440px) {
+  .submenu {
+    grid-column: 2/span 3;
+  }
+}
+@media (max-width: 1023px) {
+  .submenu {
+    grid-column: 1/span 2;
+  }
+}
+
+.stories-container {
+  grid-column: 5/span 8;
+  min-height: 300px;
+}
+.stories-container .inner {
+  padding-left: 2.2222222222vw;
+  border-left: 1px solid var(--nav-rules, #d0d0d0);
+}
+@media (max-width: 1023px) {
+  .stories-container .inner {
+    padding-left: 4.2666666667vw;
+  }
+}
+@media (min-width: 1440px) {
+  .stories-container .inner {
+    padding-left: 32px;
+  }
+}
+@media (min-width: 1440px) {
+  .stories-container {
+    grid-column: 5/span 7;
+  }
+}
+@media (max-width: 1023px) {
+  .stories-container {
+    grid-column: 3/span 2;
+  }
+}
+
+.story-list {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-column-gap: 2.2222222222vw;
+  list-style: none;
+  padding: 0;
+  margin: 20px 0 0 0;
+}
+@media (max-width: 1023px) {
+  .story-list {
+    grid-column-gap: 4.2666666667vw;
+  }
+}
+@media (min-width: 1440px) {
+  .story-list {
+    grid-column-gap: 32px;
+  }
+}
+@media (max-width: 1023px) {
+  .story-list {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+.story-item {
+  padding-bottom: 20px;
+  -webkit-animation: fadein 0.5s both cubic-bezier(0.19, 1, 0.22, 1);
+          animation: fadein 0.5s both cubic-bezier(0.19, 1, 0.22, 1);
+}
+.story-item:nth-child(1), .story-item:nth-child(2) {
+  border-bottom: 1px solid var(--nav-rules, #d0d0d0);
+}
+.story-item:nth-child(3), .story-item:nth-child(4) {
+  padding-top: 20px;
+}
+@media (max-width: 1023px) {
+  .story-item:nth-child(2) {
+    padding-top: 20px;
+  }
+  .story-item:nth-child(3) {
+    border-bottom: 1px solid var(--nav-rules, #d0d0d0);
+  }
+}
+
+.spinner {
+  width: 40px;
+  margin-left: -20px;
+  position: absolute;
+  top: 60px;
+  left: 50%;
+}
+
+@-webkit-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+span.latest {
+  font-size: 16px;
+  color: var(--nav-primary, #404040);
+}
+@media (min-width: 1300px) {
+  span.latest {
+    font-size: 18px;
+  }
+}</style>

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

@@ -0,0 +1,234 @@
+<script>
+  import DownArrow from './DownArrow.svelte';
+  import SectionDropdown from './NavDropdown/SectionDropdown.svelte';
+  import MoreDropdown from './NavDropdown/MoreDropdown.svelte';
+  import { normalizeUrl } from './utils/index';
+  import { getContext } from 'svelte';
+
+  export let sections = [];
+
+  const activeSection = getContext('nav-active-section');
+
+  let windowWidth = 1200;
+
+  $: getDisplayCount = () => {
+    if (windowWidth >= 1300) return 7;
+    return 5;
+  };
+
+  let navTimeout;
+  const timeout = 250;
+
+  $: displayCount = getDisplayCount();
+  $: displaySections = sections.slice(0, displayCount);
+  $: hiddenSections = sections.slice(displayCount);
+</script>
+
+<svelte:window bind:innerWidth="{windowWidth}" />
+
+<div class="nav-bar">
+  <nav aria-label="Main navigation">
+    <ul class="nav-list">
+      {#each displaySections as section}
+        {#if section.children}
+          <li
+            class="nav-item category link"
+            on:mouseenter="{() => {
+              navTimeout = setTimeout(
+                () => activeSection.set(section.id),
+                timeout
+              );
+            }}"
+            on:focus="{() => activeSection.set(section.id)}"
+            on:mouseleave="{() => {
+              clearTimeout(navTimeout);
+              activeSection.set(null);
+            }}"
+            on:blur="{() => {
+              clearTimeout(navTimeout);
+              activeSection.set(null);
+            }}"
+            on:click="{() => {
+              if ($activeSection === section.id) {
+                clearTimeout(navTimeout);
+                activeSection.set(null);
+              }
+            }}"
+          >
+            <div
+              class="nav-button link"
+              class:open="{section.id === $activeSection}"
+            >
+              <a href="{normalizeUrl(section.url)}">
+                {section.name}
+              </a>
+              <button class="button">
+                <DownArrow rotate="{section.id === $activeSection}" />
+              </button>
+            </div>
+            {#if $activeSection === section.id}
+              <SectionDropdown
+                section="{section}"
+                headingText="{`Latest in ${section.name}`}"
+              />
+            {/if}
+          </li>
+        {:else}
+          <li class="nav-item category link">
+            <div class="nav-button link">
+              <a href="{normalizeUrl(section.url)}">
+                {section.name}
+              </a>
+            </div>
+          </li>
+        {/if}
+      {/each}
+      <li
+        class="nav-item"
+        on:mouseenter="{() => {
+          navTimeout = setTimeout(() => activeSection.set('more'), timeout);
+        }}"
+        on:focus="{() => activeSection.set('more')}"
+        on:mouseleave="{() => {
+          clearTimeout(navTimeout);
+          activeSection.set(null);
+        }}"
+        on:blur="{() => {
+          clearTimeout(navTimeout);
+          activeSection.set(null);
+        }}"
+        on:click="{() => {
+          if ($activeSection === 'more') {
+            clearTimeout(navTimeout);
+            activeSection.set(null);
+          }
+        }}"
+      >
+        <div
+          class="nav-button more link"
+          class:open="{$activeSection === 'more'}"
+        >
+          <button class="button">
+            <span>More <DownArrow rotate="{$activeSection === 'more'}" /></span>
+          </button>
+        </div>
+        {#if $activeSection === 'more'}
+          <MoreDropdown sections="{hiddenSections}" />
+        {/if}
+      </li>
+    </ul>
+  </nav>
+</div>
+
+<style>@charset "UTF-8";
+/*
+Several components utilize z-index, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.
+These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors.
+To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit z-index values of 1, 2, and 3 for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher z-index value to show their border over the sibling elements.
+*/
+.nav-bar {
+  margin-left: auto;
+}
+@media (max-width: 745px) {
+  .nav-bar {
+    display: none;
+  }
+}
+
+.nav-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-item {
+  display: inline-flex;
+  padding: 0 10px;
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+}
+.nav-item .nav-button {
+  position: relative;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.nav-item .nav-button a,
+.nav-item .nav-button span {
+  color: var(--nav-primary, #404040);
+  text-decoration: none;
+}
+.nav-item .nav-button a:hover, .nav-item .nav-button a:active,
+.nav-item .nav-button span:hover,
+.nav-item .nav-button span:active {
+  text-decoration: none;
+}
+@media (max-width: 745px) {
+  .nav-item .nav-button {
+    height: 56px;
+  }
+}
+.nav-item .nav-button.open:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: block;
+  height: 4px;
+  background: var(--nav-accent, #fa6400);
+  opacity: 1 !important;
+}
+.nav-item .link {
+  position: relative;
+  line-height: 64px;
+}
+.nav-item .link:hover:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: block;
+  height: 4px;
+  background: var(--nav-accent, #fa6400);
+}
+
+.button {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background-color: unset;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  color: var(--nav-primary, #404040);
+}
+.button:not(.focused) {
+  outline: none;
+}
+
+.category {
+  display: none;
+}
+@media (max-width: 1023px) {
+  .category:nth-child(-n+4) {
+    display: inline-flex;
+  }
+}
+@media (min-width: 1024px) {
+  .category:nth-child(-n+5) {
+    display: inline-flex;
+  }
+}
+@media (min-width: 1300px) {
+  .category:nth-child(-n+7) {
+    display: inline-flex;
+  }
+}</style>

package/dist/components/SiteHeader/NavBar/utils/index.js

@@ -0,0 +1,2 @@
+export const normalizeUrl = (url) =>
+  /^http/.test(url) ? url : `https://www.reuters.com${url}`;