@reuters-graphics/graphics-components 0.0.1-beta.7 → 0.0.1

package/dist/@types/components/Article/Article.svelte.d.ts

@@ -27,6 +27,11 @@ declare const __propDef: {
 export declare type ArticleProps = typeof __propDef.props;
 export declare type ArticleEvents = typeof __propDef.events;
 export declare type ArticleSlots = typeof __propDef.slots;
+/**
+ * The `Article` component contains all the content of our story and also establishes the dimensions of our article well, the default central trunk of our page layout.
+ *
+ * [Docs](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-article--default)
+ */
 export default class Article extends SvelteComponentTyped<ArticleProps, ArticleEvents, ArticleSlots> {
 }
 export {};

package/dist/@types/components/SEO/SEO.svelte.d.ts

@@ -1,11 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        /**
+           * Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path)
+           * is globally available as `import.meta.env.BASE_URL`.
+           * @required
+           * @type {string}
+           */ baseUrl?: string;
         /**
            * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
            * @required
            * @type {URL}
-           */ url?: URL | null;
+           */ pageUrl?: URL | null;
         /**
            * SEO title
            * @required

package/dist/@types/components/Scroller/docProps.d.ts

@@ -0,0 +1,32 @@
+import type { ComponentType } from 'svelte';
+interface BlockStep {
+    Background: string;
+    Text: string;
+}
+interface Block {
+    Type: string;
+    Width: string;
+    ForegroundPosition: string;
+    StackBackground?: string;
+    EmbeddedLayout?: string;
+    ID?: string;
+    Steps: BlockStep[];
+}
+interface AiCharts {
+    [key: string]: ComponentType;
+}
+export declare const getScrollerPropsFromDoc: (docBlock: Block, aiCharts: AiCharts, assetsPath?: string) => {
+    id: string;
+    backgroundWidth: string;
+    foregroundPosition: string;
+    stackBackground: boolean;
+    embeddedLayout: string;
+    steps: {
+        background: ComponentType<import("svelte").SvelteComponentTyped<any, any, any>>;
+        backgroundProps: {
+            assetsPath: string;
+        };
+        foreground: string;
+    }[];
+};
+export {};

package/dist/@types/index.d.ts

@@ -23,4 +23,5 @@ export { default as Spinner } from "./components/Spinner/Spinner.svelte";
 export { default as Video } from "./components/Video/Video.svelte";
 export { default as Visible } from "./components/Visible/Visible.svelte";
 export { getPhotoPackPropsFromDoc } from "./components/PhotoPack/docProps.js";
+export { getScrollerPropsFromDoc } from "./components/Scroller/docProps.js";
 export { default as Theme, themes } from "./components/Theme/Theme.svelte";

package/dist/components/Article/Article.svelte

@@ -1,3 +1,8 @@
+<!-- 
+  @component The `Article` component contains all the content of our story and also establishes the dimensions of our article well, the default central trunk of our page layout.
+  
+  [Docs](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-article--default)
+-->
 <script>/** Set to true for embeddables. */
 export let embedded = false;
 /** Add an id to the article tag to target it with custom CSS. */

package/dist/components/NoteText/NoteText.svelte

@@ -8,7 +8,7 @@ import { marked } from 'marked';
 import Block from '../Block/Block.svelte';
 </script>
 
-<Block cls="notes">
+<Block cls="notes mb-6">
   {#if text}
     {@html marked.parse(text)}
   {/if}

package/dist/components/SEO/SEO.svelte

@@ -1,11 +1,18 @@
 <script>import analytics from './analytics';
 import publisherTags from './publisherTags';
+/**
+ * Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path)
+ * is globally available as `import.meta.env.BASE_URL`.
+ * @required
+ * @type {string}
+ */
+export let baseUrl = '';
 /**
  * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
  * @required
  * @type {URL}
  */
-export let url = null;
+export let pageUrl = null;
 /**
  * SEO title
  * @required
@@ -59,9 +66,23 @@ export let authors = [];
  * Whether to inject Google Analytics code for this page.
  */
 export let includeAnalytics = false;
+const getOrigin = (baseUrl) => {
+    try {
+        return new URL(baseUrl).origin;
+    }
+    catch {
+        // This handles a weird case where Vite's base path is
+        // reset to './' after the app hydrates...
+        if (typeof window !== 'undefined')
+            return getOrigin(window.location.href);
+        return '';
+    }
+};
+$: origin = getOrigin(baseUrl);
+$: canonicalUrl = origin + pageUrl.pathname;
 // Only fire analytics on prod sites
 if (typeof window !== 'undefined' && includeAnalytics) {
-    analytics(url, seoTitle);
+    analytics(canonicalUrl, seoTitle);
     publisherTags();
 }
 const orgLdJson = {
@@ -81,10 +102,10 @@ const articleLdJson = {
     '@context': 'http://schema.org',
     '@type': 'NewsArticle',
     headline: seoTitle,
-    url: url.href,
+    url: canonicalUrl,
     mainEntityOfPage: {
         '@type': 'WebPage',
-        '@id': url.href,
+        '@id': canonicalUrl,
     },
     thumbnailUrl: shareImgPath,
     image: [
@@ -117,7 +138,7 @@ const articleLdJson = {
   <html lang="{lang}"></html>
   <title>{seoTitle}</title>
   <meta name="description" content="{seoDescription}" />
-  <link rel="canonical" href="{url.href}" />
+  <link rel="canonical" href="{canonicalUrl}" />
   <link
     rel="shortcut icon"
     type="image/x-icon"
@@ -142,7 +163,7 @@ const articleLdJson = {
     sizes="96x96"
   />
 
-  <meta property="og:url" content="{url.href}" />
+  <meta property="og:url" content="{canonicalUrl}" />
   <meta property="og:type" content="article" />
   <meta property="og:title" content="{shareTitle}" itemprop="name" />
   <meta
@@ -150,17 +171,13 @@ const articleLdJson = {
     content="{shareDescription}"
     itemprop="description"
   />
-  <meta
-    property="og:image"
-    content="{shareImgPath}"
-    itemprop="image"
-  />
+  <meta property="og:image" content="{shareImgPath}" itemprop="image" />
   <meta property="og:site_name" content="Reuters" />
 
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:site" content="@ReutersGraphics" />
   <meta name="twitter:creator" content="@ReutersGraphics" />
-  <meta name="twitter:domain" content="{url.origin}" />
+  <meta name="twitter:domain" content="{origin}" />
   <meta name="twitter:title" content="{shareTitle}" />
   <meta name="twitter:description" content="{shareDescription}" />
   <meta name="twitter:image:src" content="{shareImgPath}" />

package/dist/components/Scroller/docProps.js

@@ -0,0 +1,14 @@
+export const getScrollerPropsFromDoc = (docBlock, aiCharts, assetsPath = '') => {
+    return {
+        id: docBlock.ID,
+        backgroundWidth: docBlock.Width,
+        foregroundPosition: docBlock.ForegroundPosition,
+        stackBackground: docBlock.StackBackground === 'true' || !docBlock.StackBackground,
+        embeddedLayout: docBlock.EmbeddedLayout,
+        steps: docBlock.Steps.map((step) => ({
+            background: aiCharts[step.Background],
+            backgroundProps: { assetsPath },
+            foreground: step.Text,
+        })),
+    };
+};

package/dist/components/SiteFooter/SiteFooter.svelte

@@ -10,6 +10,7 @@ export let referrals = [];
 </script>
 
 <footer
+  class="my-0"
   style="{`
     --nav-background: var(--theme-colour-background, #fff);
     --nav-primary: var(--theme-colour-text-primary, #404040);
@@ -26,7 +27,7 @@ export let referrals = [];
 
 <!-- svelte-ignore css-unused-selector -->
 <style>footer {
-  margin-top: 4rem;
+  margin-top: 0;
   background-color: var(--nav-background, #fff);
 }
 footer div {

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

@@ -1,5 +1,5 @@
 <script>
-  import { ReutersLogo } from '../../../index.js';
+  import ReutersLogo from '../../ReutersLogo/ReutersLogo.svelte';
   import CloseIcon from '../svgs/Close.svelte';
   import { normalizeUrl } from '../NavBar/utils/index.js';
 

package/dist/components/SiteHeader/SiteHeader.svelte

@@ -1,4 +1,4 @@
-<script>import { ReutersLogo } from '../../index.js';
+<script>import ReutersLogo from '../ReutersLogo/ReutersLogo.svelte';
 import NavBar from './NavBar/index.svelte';
 import data from './data.json';
 import { setContext } from 'svelte';

package/dist/components/Theme/Theme.svelte

@@ -17,18 +17,16 @@ export let theme = {};
  * explicitly set.
  */
 export let base = 'light';
-import cssVariables from '../../actions/cssVariables';
 import flatten from './utils/flatten';
 import mergeThemes from './utils/merge';
 /** @type {Theme} */
 $: mergedTheme = mergeThemes({}, themes[base] || themes.light, theme);
+$: cssVariables = Object.entries(flatten({ theme: mergedTheme }))
+    .map(([key, value]) => `--${key}: ${value};`)
+    .join(' ');
 </script>
 
-<div
-  class="theme"
-  style="display: contents;"
-  use:cssVariables="{flatten({ theme: mergedTheme })}"
->
+<div class="theme" style="{cssVariables}" style:display="contents">
   <!-- Clients can override the theme above by attaching custom properties to this element. -->
   <div class="theme-client-override" style="display: contents;">
     <!-- Themed content -->

package/dist/components/Theme/themes/dark.js

@@ -5,8 +5,8 @@ export default {
     'text-primary': '#ffffff',
     'text-secondary': 'rgb(255 255 255 / 60%)',
     accent: ' #ef3c2a',
-    'brand-logo': '#fa6400',
-    'brand-rules': '#999999',
+    'brand-logo': '#ffffff',
+    'brand-rules': 'rgb(255 255 255 / 25%)',
     'brand-shadow': 'rgb(255 255 255 / 10%)',
   },
   font: {

package/dist/components/Video/Video.svelte

@@ -238,7 +238,7 @@ if (ariaHidden && !ariaDescription) {
         </div>
       {/if}
       {#if caption}
-        <figcaption>{caption}</figcaption>
+        <div class="caption">{caption}</div>
       {/if}
     {/if}
   </div>
@@ -265,7 +265,7 @@ if (ariaHidden && !ariaDescription) {
   border: 0 !important;
 }
 
-figcaption {
+div.caption {
   font-size: 0.8rem;
   color: var(--theme-colour-text-secondary, #666666);
 }

package/dist/index.js

@@ -31,3 +31,4 @@ export { default as Visible } from './components/Visible/Visible.svelte';
 
 // Utilities
 export { getPhotoPackPropsFromDoc } from './components/PhotoPack/docProps.js';
+export { getScrollerPropsFromDoc } from './components/Scroller/docProps.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "0.0.1-beta.7",
+  "version": "0.0.1",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -15,7 +15,7 @@
     "postversion": "git push origin && git push origin --tags"
   },
   "license": "MIT",
-  "types": "dist/@types/index.d.ts",
+  "types": "./dist/@types/index.d.ts",
   "files": [
     "dist"
   ],
@@ -127,6 +127,7 @@
     "./components/Scroller/Embedded/index.svelte": "./dist/components/Scroller/Embedded/index.svelte",
     "./components/Scroller/Foreground.svelte": "./dist/components/Scroller/Foreground.svelte",
     "./components/Scroller/Scroller.svelte": "./dist/components/Scroller/Scroller.svelte",
+    "./components/Scroller/docProps.ts": "./dist/components/Scroller/docProps.ts",
     "./components/Sharer/Sharer.svelte": "./dist/components/Sharer/Sharer.svelte",
     "./components/Sharer/utils/copyToClipboard": "./dist/components/Sharer/utils/copyToClipboard.js",
     "./components/Sharer/utils/facebook": "./dist/components/Sharer/utils/facebook.js",
@@ -189,7 +190,7 @@
     "./scss/fonts/mixins": "./dist/scss/fonts/_mixins.scss",
     "./scss/fonts/rules": "./dist/scss/fonts/_rules.scss",
     "./scss/fonts/variables": "./dist/scss/fonts/_variables.scss",
-    "./scss/main.scss": "./dist/scss/main.scss",
+    "./scss/main": "./dist/scss/main.scss",
     "./scss/mixins/block": "./dist/scss/mixins/_block.scss",
     "./scss/mixins/body-text": "./dist/scss/mixins/_body-text.scss",
     "./scss/mixins/graphic": "./dist/scss/mixins/_graphic.scss",