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

package/README.md

@@ -2,6 +2,8 @@
 
 # ⚙️ graphics-components
 
+[![npm version](https://badge.fury.io/js/@reuters-graphics%2Fgraphics-components.svg)](https://badge.fury.io/js/@reuters-graphics%2Fgraphics-components)
+
 Svelte components, SCSS and more for Reuters Graphics pages.
 
 [Read the docs.](https://reuters-graphics.github.io/graphics-components/)

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

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         /** Set to true for embeddables. */ embedded?: boolean;
         /** Add an id to the article tag to target it with custom CSS. */ id?: string | null;
-        /** ARIA role of the article. */ role?: string | null;
+        /** ARIA role of the article */ role?: string | null;
         /** Set custom widths for the normal, wide and wider column dimensions */ columnWidths?: {
             /** Narrower column width */
             narrower: number;

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  PaddingResetProps */
+/** @typedef {typeof __propDef.events}  PaddingResetEvents */
+/** @typedef {typeof __propDef.slots}  PaddingResetSlots */
+export default class PaddingReset extends SvelteComponentTyped<{
+    containerIsFluid?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type PaddingResetProps = typeof __propDef.props;
+export type PaddingResetEvents = typeof __propDef.events;
+export type PaddingResetSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        containerIsFluid?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -10,6 +10,8 @@ export { default as GraphicBlock } from "./components/GraphicBlock/GraphicBlock.
 export { default as Headline } from "./components/Headline/Headline.svelte";
 export { default as Hero } from "./components/Hero/Hero.svelte";
 export { default as NoteText } from "./components/NoteText/NoteText.svelte";
+export { default as PaddingReset } from "./components/PaddingReset/PaddingReset.svelte";
+export { default as PhotoPack } from "./components/PhotoPack/PhotoPack.svelte";
 export { default as PymChild } from "./components/PymChild/PymChild.svelte";
 export { default as ReutersLogo } from "./components/ReutersLogo/ReutersLogo.svelte";
 export { default as Scroller } from "./components/Scroller/Scroller.svelte";
@@ -20,5 +22,5 @@ export { default as SiteHeader } from "./components/SiteHeader/SiteHeader.svelte
 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";
+export { getPhotoPackPropsFromDoc } from "./components/PhotoPack/docProps.js";
 export { default as Theme, themes } from "./components/Theme/Theme.svelte";

package/dist/components/Article/Article.svelte

@@ -2,7 +2,7 @@
 export let embedded = false;
 /** Add an id to the article tag to target it with custom CSS. */
 export let id = null;
-/** ARIA role of the article. */
+/** ARIA role of the article */
 export let role = null;
 /** Set custom widths for the normal, wide and wider column dimensions */
 export let columnWidths = {

package/dist/components/BeforeAfter/BeforeAfter.svelte

@@ -1,6 +1,7 @@
 <script>import { throttle } from 'lodash-es';
 import { onMount } from 'svelte';
 import Block from '../Block/Block.svelte';
+import PaddingReset from '../PaddingReset/PaddingReset.svelte';
 /** Width of the chart within the text well. */
 export let width = 'normal'; // options: wide, wider, widest, fluid
 /** Height of the component */
@@ -205,10 +206,12 @@ onMount(() => {
       </figure>
     </div>
     {#if $$slots.caption}
-      <aside class="before-after-caption" id="{`${id}-caption`}">
-        <!-- Caption for image credits -->
-        <slot name="caption" />
-      </aside>
+      <PaddingReset containerIsFluid="{width === 'fluid'}">
+        <aside class="before-after-caption" id="{`${id}-caption`}">
+          <!-- Caption for image credits -->
+          <slot name="caption" />
+        </aside>
+      </PaddingReset>
     {/if}
   </Block>
 {/if}

package/dist/components/FeaturePhoto/FeaturePhoto.svelte

@@ -1,5 +1,6 @@
 <script>import { onMount } from 'svelte';
 import Block from '../Block/Block.svelte';
+import PaddingReset from '../PaddingReset/PaddingReset.svelte';
 /**
  * Photo src
  * @type {string}
@@ -60,18 +61,16 @@ onMount(() => {
 </script>
 
 <Block width="{width}" cls="photo">
-  <figure
-    bind:this="{container}"
-    aria-label="media"
-    class:fluid="{width === 'fluid'}"
-  >
+  <figure bind:this="{container}" aria-label="media">
     {#if !lazy || (intersectable && intersecting)}
       <img src="{src}" alt="{altText}" />
     {:else}
       <div class="placeholder" height="{`${height}px`}"></div>
     {/if}
     {#if caption}
-      <figcaption>{caption}</figcaption>
+      <PaddingReset containerIsFluid="{width === 'fluid'}">
+        <figcaption>{caption}</figcaption>
+      </PaddingReset>
     {/if}
     {#if !altText}
       <div class="alt-warning">altText</div>
@@ -107,7 +106,4 @@ figure figcaption {
   font-size: 0.8rem;
   font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
   color: var(--theme-colour-text-secondary, #666666);
-}
-figure.fluid figcaption {
-  padding-left: 15px;
 }</style>

package/dist/components/GraphicBlock/GraphicBlock.svelte

@@ -55,7 +55,7 @@ export let ariaDescription = null;
 import AriaHidden from './AriaHidden.svelte';
 import TextBlock from './TextBlock.svelte';
 import Block from '../Block/Block.svelte';
-import PaddingReset from '../PaddingReset/index.svelte';
+import PaddingReset from '../PaddingReset/PaddingReset.svelte';
 import { marked } from 'marked';
 </script>
 
@@ -69,14 +69,14 @@ import { marked } from 'marked';
 >
   <div>
     {#if $$slots.title}
-      <PaddingReset width="{width}">
+      <PaddingReset containerIsFluid="{width === 'fluid'}">
         <TextBlock width="{textWidth}">
           <!-- Custom title content -->
           <slot name="title" />
         </TextBlock>
       </PaddingReset>
     {:else if title}
-      <PaddingReset width="{width}">
+      <PaddingReset containerIsFluid="{width === 'fluid'}">
         <TextBlock width="{textWidth}">
           <h3>{title}</h3>
           {#if description}
@@ -100,14 +100,14 @@ import { marked } from 'marked';
       </div>
     {/if}
     {#if $$slots.notes}
-      <PaddingReset width="{width}">
+      <PaddingReset containerIsFluid="{width === 'fluid'}">
         <TextBlock width="{textWidth}">
           <!-- Custom notes content -->
           <slot name="notes" />
         </TextBlock>
       </PaddingReset>
     {:else if notes}
-      <PaddingReset width="{width}">
+      <PaddingReset containerIsFluid="{width === 'fluid'}">
         <TextBlock width="{textWidth}">
           <aside>
             {@html marked(notes)}

package/dist/components/PaddingReset/PaddingReset.svelte

@@ -0,0 +1,22 @@
+<script>
+  /**
+   * If parent container is fluid, which resets the padding around contained elements.
+   */
+  export let containerIsFluid = true;
+</script>
+
+{#if containerIsFluid}
+  <div>
+    <!-- Padded content -->
+    <slot />
+  </div>
+{:else}
+  <!-- Padded content -->
+  <slot />
+{/if}
+
+<style>
+  div {
+    width: 100%;
+    padding: 0 15px;
+  }</style>

package/dist/components/PhotoPack/PhotoPack.svelte

@@ -36,7 +36,7 @@ export let width = 'normal';
  */
 export let captionWidth = 'normal';
 import Block from '../Block/Block.svelte';
-import PaddingReset from '../PaddingReset/index.svelte';
+import PaddingReset from '../PaddingReset/PaddingReset.svelte';
 import { marked } from 'marked';
 let containerWidth;
 const groupRows = (images, layout) => {
@@ -89,7 +89,7 @@ $: rows = groupRows(images, layout);
       </div>
     {/each}
   </div>
-  <PaddingReset width="{width}">
+  <PaddingReset containerIsFluid="{width === 'fluid'}">
     <Block width="{captionWidth}">
       <div class="captions-container">
         {#each rows as row, ri}

package/dist/index.js

@@ -11,6 +11,8 @@ export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.
 export { default as Headline } from './components/Headline/Headline.svelte';
 export { default as Hero } from './components/Hero/Hero.svelte';
 export { default as NoteText } from './components/NoteText/NoteText.svelte';
+export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
+export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
 export { default as PymChild } from './components/PymChild/PymChild.svelte';
 export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';
 export { default as Scroller } from './components/Scroller/Scroller.svelte';
@@ -28,4 +30,4 @@ export { default as Video } from './components/Video/Video.svelte';
 export { default as Visible } from './components/Visible/Visible.svelte';
 
 // Utilities
-export { getPhotoPackPropsFromDoc } from './components/PhotoPack/docProps';
+export { getPhotoPackPropsFromDoc } from './components/PhotoPack/docProps.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.4",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -11,7 +11,8 @@
     "build:package": "node ./bin/buildPackage/index.js",
     "build:docs": "build-storybook -o docs && touch ./docs/.nojekyll",
     "build": "npm-run-all build:package build:docs",
-    "prepublishOnly": "npm run build:package"
+    "prepublishOnly": "npm run build:package",
+    "postversion": "git push origin && git push origin --tags"
   },
   "license": "MIT",
   "types": "dist/@types/index.d.ts",
@@ -112,7 +113,7 @@
     "./components/Headline/Headline.svelte": "./dist/components/Headline/Headline.svelte",
     "./components/Hero/Hero.svelte": "./dist/components/Hero/Hero.svelte",
     "./components/NoteText/NoteText.svelte": "./dist/components/NoteText/NoteText.svelte",
-    "./components/PaddingReset/index.svelte": "./dist/components/PaddingReset/index.svelte",
+    "./components/PaddingReset/PaddingReset.svelte": "./dist/components/PaddingReset/PaddingReset.svelte",
     "./components/PhotoPack/PhotoPack.svelte": "./dist/components/PhotoPack/PhotoPack.svelte",
     "./components/PhotoPack/docProps.ts": "./dist/components/PhotoPack/docProps.ts",
     "./components/PymChild/PymChild.svelte": "./dist/components/PymChild/PymChild.svelte",

package/dist/@types/components/PaddingReset/index.svelte.d.ts

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  IndexProps */
-/** @typedef {typeof __propDef.events}  IndexEvents */
-/** @typedef {typeof __propDef.slots}  IndexSlots */
-export default class Index extends SvelteComponentTyped<{
-    width?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type IndexProps = typeof __propDef.props;
-export type IndexEvents = typeof __propDef.events;
-export type IndexSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        width?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

package/dist/components/PaddingReset/index.svelte

@@ -1,17 +0,0 @@
-<script>
-  export let width = 'normal';
-</script>
-
-{#if width === 'fluid'}
-  <div>
-    <slot />
-  </div>
-{:else}
-  <slot />
-{/if}
-
-<style>
-  div {
-    width: 100%;
-    padding: 0 15px;
-  }</style>