@reuters-graphics/graphics-components 0.1.4 → 0.1.6

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

@@ -7,6 +7,7 @@ interface BlockStep {
 interface Block {
     Type: string;
     Width: string;
+    Preload?: string;
     ForegroundPosition: string;
     StackBackground?: string;
     EmbeddedLayout?: string;
@@ -22,6 +23,7 @@ export declare const getScrollerPropsFromDoc: (docBlock: Block, aiCharts: AiChar
     foregroundPosition: string;
     stackBackground: boolean;
     embeddedLayout: string;
+    preload: number;
     steps: {
         background: ComponentType;
         backgroundProps: {

package/dist/components/ReferralBlock/ReferralBlock.svelte

@@ -67,7 +67,7 @@ getTime();
       class="referral-container"
       class:stacked="{clientWidth && clientWidth < 750}"
       class:xs="{clientWidth && clientWidth < 450}"
-      bind:clientWidth
+      bind:clientWidth="{clientWidth}"
     >
       {#each $referrals as referral}
         <div class="referral">
@@ -81,9 +81,13 @@ getTime();
                 class="headline"
                 class:xs="{clientWidth && clientWidth < 450}"
               >
-                <div class="kicker">{referral.kicker.name}</div>
-                <div class="title">{referral.title}</div>
-                <div class="publish-time">
+                <div class="kicker" data-chromatic="ignore">
+                  {referral.kicker.name}
+                </div>
+                <div class="title" data-chromatic="ignore">
+                  {referral.title}
+                </div>
+                <div class="publish-time" data-chromatic="ignore">
                   {getTime(new Date(referral.display_time))}
                 </div>
               </div>
@@ -92,6 +96,7 @@ getTime();
                 class:xs="{clientWidth && clientWidth < 450}"
               >
                 <img
+                  data-chromatic="ignore"
                   src="{referral.thumbnail.renditions.landscape['240w']}"
                   alt="{referral.thumbnail.caption ||
                     referral.thumbnail.alt_text}"

package/dist/components/Scroller/docProps.js

@@ -5,6 +5,7 @@ export const getScrollerPropsFromDoc = (docBlock, aiCharts, assetsPath = '') =>
         foregroundPosition: docBlock.ForegroundPosition,
         stackBackground: docBlock.StackBackground === 'true' || !docBlock.StackBackground,
         embeddedLayout: docBlock.EmbeddedLayout,
+        preload: docBlock.Preload ? parseInt(docBlock.Preload) || 1 : 1,
         steps: docBlock.Steps.map((step) => ({
             background: aiCharts[step.Background],
             backgroundProps: { assetsPath },

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

@@ -10,12 +10,16 @@
   <a href="{url.replace('index.html', '')}">
     <IntersectionObserver let:intersecting top="{600}" once="{true}">
       {#if intersecting}
-        <div class="image" style="{`background-image: url(${image});`}"></div>
+        <div
+          data-chromatic="ignore"
+          class="image"
+          style="{`background-image: url(${image});`}"
+        ></div>
       {:else}
         <div class="image"></div>
       {/if}
     </IntersectionObserver>
-    <p>{title}</p>
+    <p data-chromatic="ignore">{title}</p>
   </a>
 </div>
 

package/dist/components/Video/Controls.svelte

@@ -20,8 +20,8 @@
     paused = !paused;
     clickedOnPauseBtn = paused === true; // so video doesn't autoplay when coming into view again if paused previously
     dispatch('pausePlayEvent', {
-      paused: paused,
-      clickedOnPauseBtn: clickedOnPauseBtn,
+      paused,
+      clickedOnPauseBtn,
     });
   }
 </script>
@@ -32,9 +32,14 @@
     opacity: {controlsOpacity}; 
     top: {controlsPosition === 'top left' || controlsPosition === 'top right'
     ? `${10}px`
+    : controlsPosition === 'center'
+    ? `${(heightVideoContainer - controlsBorderOffset) / 2}px`
     : `${heightVideoContainer - controlsBorderOffset}px`};
+
     left: {controlsPosition === 'top left' || controlsPosition === 'bottom left'
     ? `${10}px`
+    : controlsPosition === 'center'
+    ? `${(widthVideoContainer - controlsBorderOffset) / 2}px`
     : `${widthVideoContainer - controlsBorderOffset}px`};
     "
 >

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
-  "repository": "https://github.com/reuters-graphics/graphics-components",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/reuters-graphics/graphics-components.git"
+  },
   "scripts": {
     "start": "storybook dev -p 3000",
     "new": "node ./bin/newComponent/index.cjs",
     "build:package": "node ./bin/buildPackage/index.js",
+    "build:chromatic": "storybook build -o docs",
     "build:docs": "storybook build -o docs && touch ./docs/.nojekyll",
     "build": "npm-run-all build:package build:docs",
     "prepublishOnly": "npm run build:package",
@@ -54,6 +58,7 @@
     "autoprefixer": "^10.4.14",
     "babel-loader": "^9.1.2",
     "change-case": "^4.1.2",
+    "chromatic": "^6.19.9",
     "eslint": "^8.42.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-n": "^16.0.0",
@@ -70,6 +75,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^3.0.1",
     "rimraf": "^5.0.0",
     "sass": "^1.63.0",
     "storybook": "^7.0.20",
@@ -244,5 +250,9 @@
     "./scss/typography/variables": "./dist/scss/typography/_variables.scss",
     ".": "./dist/index.js"
   },
-  "svelte": "./dist/index.js"
+  "svelte": "./dist/index.js",
+  "bugs": {
+    "url": "https://github.com/reuters-graphics/graphics-components/issues"
+  },
+  "readme": "ERROR: No README data found!"
 }