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

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

@@ -0,0 +1,112 @@
+<script>
+  import NavDropdown from './index.svelte';
+  import { normalizeUrl } from '../utils';
+
+  export let sections = [];
+</script>
+
+<NavDropdown>
+  <div class="more-sections">
+    <div class="groupContainer">
+      {#each sections as section}
+        <section
+          class="more-section-group"
+          class:has-children="{section.children}"
+        >
+          <a href="{normalizeUrl(section.url)}" class="section-link">
+            {section.name}
+          </a>
+          {#if section.children}
+            <ul class="subsections">
+              {#each section.children as sub}
+                <li>
+                  <a class="subsection-link" href="{normalizeUrl(sub.url)}"
+                    >{sub.name}</a
+                  >
+                </li>
+              {/each}
+            </ul>
+          {/if}
+        </section>
+      {/each}
+    </div>
+  </div>
+</NavDropdown>
+
+<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.
+*/
+a {
+  text-decoration: none;
+}
+a:hover {
+  color: inherit;
+  text-decoration: underline !important;
+}
+
+.more-sections {
+  position: relative;
+}
+@media (max-width: 1023px) {
+  .more-sections {
+    display: flex;
+    flex-direction: row;
+    -moz-column-gap: 64px;
+         column-gap: 64px;
+  }
+}
+
+.more-section-group.has-children {
+  margin-bottom: 20px;
+}
+.more-section-group .subsections {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-column-gap: 2.2222222222vw;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+@media (max-width: 1023px) {
+  .more-section-group .subsections {
+    grid-column-gap: 4.2666666667vw;
+  }
+}
+@media (min-width: 1440px) {
+  .more-section-group .subsections {
+    grid-column-gap: 32px;
+  }
+}
+.more-section-group .subsections .subsection-link {
+  font-size: 16px;
+  color: var(--nav-primary, #404040);
+  line-height: 18px;
+  font-weight: 400;
+  display: inline-block;
+  padding: 4px 0;
+  margin-bottom: 2px;
+  text-decoration: none;
+}
+.more-section-group .subsections .subsection-link:hover {
+  text-decoration: underline !important;
+}
+.more-section-group .section-link {
+  grid-column: 1/-1;
+  margin-bottom: 16px;
+  line-height: 18px;
+  font-size: 16px;
+  display: inline-block;
+  color: var(--nav-primary, #404040);
+  text-decoration: none;
+}
+@media (min-width: 1300px) {
+  .more-section-group .section-link {
+    font-size: 18px;
+  }
+}
+.more-section-group .section-link:hover {
+  text-decoration: underline !important;
+}</style>

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

@@ -0,0 +1,118 @@
+<script>
+  import { normalizeUrl } from '../utils';
+
+  import NavDropdown from './index.svelte';
+
+  export let section = {};
+  export let headingText;
+
+  $: splitCount =
+    section.children && section.children.length > 7
+      ? Math.ceil(section.children.length / 2)
+      : 0;
+</script>
+
+<NavDropdown headingText="{headingText}">
+  <a href="{normalizeUrl(section.url)}">
+    <span class="heading">
+      Browse {section.name}
+    </span>
+  </a>
+  <div class="sections">
+    {#if splitCount > 0}
+      <ul class="sections-group">
+        {#each section.children.slice(0, splitCount) as sub}
+          <li>
+            <a class="subsection-link" href="{normalizeUrl(sub.url)}">
+              {sub.name}
+            </a>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    <ul class="sections-group">
+      {#each section.children.slice(splitCount) as sub}
+        <li>
+          <a class="subsection-link" href="{normalizeUrl(sub.url)}">
+            {sub.name}
+          </a>
+        </li>
+      {/each}
+    </ul>
+  </div>
+</NavDropdown>
+
+<style>a {
+  text-decoration: none;
+}
+a:hover {
+  color: var(--nav-primary, #404040);
+  text-decoration: underline !important;
+}
+
+.sections {
+  display: flex;
+}
+@media (max-width: 1023px) {
+  .sections {
+    display: block;
+  }
+}
+.sections .sections-group {
+  width: 50%;
+  list-style: none;
+  padding: 0;
+  margin: 12px 0 0 0;
+}
+.sections .sections-group:first-child {
+  margin-right: 16px;
+}
+@media (max-width: 1023px) {
+  .sections .sections-group:nth-child(2) {
+    margin-top: 0;
+  }
+}
+
+.subsection-link {
+  line-height: 18px;
+  font-weight: 400;
+  display: inline-block;
+  padding: 4px 0;
+  margin-bottom: 2px;
+}
+.subsection-link:hover {
+  text-decoration: underline;
+}
+
+span.heading {
+  line-height: 1.333;
+  font-size: 16px;
+  font-weight: 500;
+  margin: 0;
+  padding: 0;
+  letter-spacing: 0;
+  text-decoration: none;
+  text-transform: none;
+  font-smooth: always;
+  color: var(--nav-primary, #404040);
+  -webkit-font-smoothing: antialiased;
+}
+@media (min-width: 1300px) {
+  span.heading {
+    font-size: 18px;
+  }
+}
+span.heading:hover {
+  color: inherit;
+  text-decoration: underline !important;
+}
+
+li > a {
+  line-height: 1.75;
+  letter-spacing: 0;
+  font-size: 16px;
+  color: var(--nav-primary, #404040);
+  font-weight: 400;
+  font-smooth: always;
+  -webkit-font-smoothing: antialiased;
+}</style>

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

@@ -0,0 +1,49 @@
+<div>
+  <div class="spinner-container">
+    <div class="spinner"></div>
+  </div>
+</div>
+
+<style>@-webkit-keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.spinner-container {
+  position: relative;
+  height: 0;
+  padding-bottom: 100%;
+  color: var(--nav-primary, #404040);
+}
+
+.spinner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 4px solid transparent;
+  border-top-color: currentColor;
+  -webkit-animation: spinner 0.6s linear infinite;
+          animation: spinner 0.6s linear infinite;
+  box-sizing: border-box;
+}
+.spinner::before {
+  content: "";
+  position: absolute;
+  display: block;
+  left: -4px;
+  top: -4px;
+  width: 100%;
+  height: 100%;
+  border: 4px solid currentColor;
+  box-sizing: content-box;
+  border-radius: 50%;
+  opacity: 0.25;
+}</style>

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

@@ -0,0 +1,99 @@
+<script>
+  import { normalizeUrl } from '../../utils';
+  import { getTime } from './time';
+
+  export let story;
+  export let withSection = false;
+
+  $: thumbnail = story.thumbnail;
+</script>
+
+<div class="story-card">
+  <a href="{normalizeUrl(story.canonical_url)}">
+    <div class="story-text" class:has-thumbnail="{thumbnail}">
+      {#if withSection}
+        <a href="{normalizeUrl(story.primary_section.id)}">
+          <span class="label">{story.primary_section.name}</span>
+        </a>
+      {/if}
+      <span>{story.title}</span>
+      {#if !withSection}
+        <time datetime="{story.display_time}"
+          >{getTime(story.display_time)}</time
+        >
+      {/if}
+    </div>
+    {#if thumbnail}
+      <div class="thumbnail">
+        <img
+          src="{thumbnail.renditions.square['120w']}"
+          alt="{thumbnail.alt_text}"
+        />
+      </div>
+    {/if}
+  </a>
+</div>
+
+<style>.story-card a {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  color: var(--nav-primary, #404040);
+  text-decoration: none;
+}
+.story-card a:hover, .story-card a:focus {
+  text-decoration: none;
+}
+.story-card a:hover .story-text span, .story-card a:focus .story-text span {
+  text-decoration: underline;
+}
+.story-card a:hover .story-text span.label, .story-card a:focus .story-text span.label {
+  text-decoration: none;
+}
+.story-card a .story-text {
+  margin-right: 10px;
+  width: 100%;
+}
+.story-card a .story-text.has-thumbnail {
+  width: calc(100% - 84px);
+}
+.story-card a .story-text span {
+  color: var(--nav-primary, #404040);
+  font-size: 16px;
+  font-weight: 500;
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+}
+@media (min-width: 1300px) {
+  .story-card a .story-text span {
+    font-size: 18px;
+  }
+}
+.story-card a .story-text span.label {
+  font-size: 14px;
+  line-height: 1.1;
+  margin-bottom: 8px;
+  display: block;
+  font-weight: 200;
+}
+.story-card a .story-text time {
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  margin-top: 8px;
+  display: block;
+  font-size: 12px;
+  font-weight: 400;
+  text-decoration: none !important;
+}
+.story-card a .thumbnail {
+  width: 84px;
+  height: 84px;
+  flex: 0 0 84px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #ddd;
+}
+.story-card a .thumbnail img {
+  -o-object-fit: cover;
+     object-fit: cover;
+  width: 100%;
+  height: 100%;
+}</style>

package/dist/components/SiteHeader/NavBar/NavDropdown/StoryCard/time.js

@@ -0,0 +1,70 @@
+import advancedFormat from 'dayjs/plugin/advancedFormat.js';
+import dayjs from 'dayjs';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import timezone from 'dayjs/plugin/timezone.js';
+import updateLocale from 'dayjs/plugin/updateLocale.js';
+import utc from 'dayjs/plugin/utc.js';
+
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+dayjs.extend(advancedFormat);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(updateLocale);
+
+dayjs.updateLocale('en', {
+  relativeTime: {
+    future: 'in %s',
+    past: '%s ago',
+    s: 'a few seconds',
+    m: 'a min',
+    mm: '%d min',
+    h: 'an hour',
+    hh: '%d hours',
+    d: 'a day',
+    dd: '%d days',
+    M: 'a month',
+    MM: '%d months',
+    y: 'a year',
+    yy: '%d years',
+  },
+});
+
+const getTimeZone = (local) => {
+  if (local) {
+    return dayjs.tz.guess();
+  }
+
+  return 'UTC';
+};
+
+const diff = (dateFrom, dateTo, measurement = 'day') => {
+  return dayjs(dateFrom).diff(dayjs(dateTo), measurement, true);
+};
+
+const olderThanHour = (dateFrom, dateTo, hours = 1) => {
+  return diff(dateFrom, dateTo, 'hour') < -hours;
+};
+
+const isSameDay = (dateFrom, dateTo) => {
+  const first = new Date(dateFrom);
+  const second = new Date(dateTo);
+  return (
+    first.getFullYear() === second.getFullYear() &&
+    first.getMonth() === second.getMonth() &&
+    first.getDate() === second.getDate()
+  );
+};
+
+export const getTime = (datetime) => {
+  const publishTime = dayjs(datetime, { utc: true });
+  const showRelativeTime = !olderThanHour(publishTime, Date.now());
+  const showTime = isSameDay(publishTime, Date.now());
+  const timezone = getTimeZone(false);
+  if (showRelativeTime) {
+    return dayjs().to(publishTime);
+  }
+  if (showTime) return dayjs(datetime).tz(timezone).format('h:mm A z');
+  return publishTime.format('MMMM D, YYYY');
+};