@reuters-graphics/graphics-components 0.1.6 → 0.1.7--canary.99.331bdb0.0

package/dist/@types/components/@types/global.d.ts

@@ -10,6 +10,10 @@ export type Option = {
  * Used for any props that restrict width of a container to one of pre-fab widths.
  */
 export type ContainerWidth = 'narrower' | 'narrow' | 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
+/**
+ * Used to set headline class fluid size from text-2xl to text-6xl
+ */
+export type HeadlineSize = 'small' | 'normal' | 'big' | 'bigger' | 'biggest';
 /**
  * A step in the Scroller component.
  */

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

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         /** Width of the block within the article well. */ width?: ContainerWidth;
         /** Add an id to the block tag to target it with custom CSS. */ id?: string;
-        /** Add extra classes to the block tag to target it with custom CSS. */ cls?: string;
+        /** Add extra classes to the block tag to target it with custom CSS. */ class?: string;
         /** Snap block to column widths, rather than fluidly resizing them. */ snap?: boolean;
         /** ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block */ role?: string | null;
         /** ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block */ ariaLabel?: string | null;

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

@@ -6,6 +6,7 @@ declare const __propDef: {
            * @type {string}
            * @required
            */ text: string;
+        /** Add a class to target with SCSS. */ class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -14,7 +14,7 @@ declare const __propDef: {
            * @required
            */ altText: string;
         /** Add an ID to target with SCSS. */ id?: string;
-        /** Add a class to target with SCSS. */ cls?: string;
+        /** Add a class to target with SCSS. */ class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -12,6 +12,14 @@ declare const __propDef: {
            * @type {string}
            * @required
            */ altText: string;
+        /**
+           * Add an id to target with custom CSS.
+           * @type {string}
+           */ id?: string;
+        /**
+           * Add extra classes to target with custom CSS.
+           * @type {string}
+           */ class?: string;
         /**
            * Caption below the photo
            * @type {string}

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

@@ -13,7 +13,7 @@ declare const __propDef: {
         /**
            * Add extra classes to the block tag to target it with custom CSS.
            * @type {string}
-           */ cls?: string;
+           */ class?: string;
         /** Snap block to column widths, rather than fluidly resizing them. */ snap?: boolean;
         /**
            * ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block

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

@@ -1,10 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
+import { HeadlineSize } from '../@types/global';
 declare const __propDef: {
     props: {
         /**
            * Headline, parsed as an _inline_ markdown string in an `h1` element.
            * @type {string}
            */ hed?: string;
+        /**
+           * Headline size
+           * @type {string}
+           */ hedSize?: HeadlineSize;
         /**
            * Dek, parsed as a markdown string.
            * @type {string}

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

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         /** Width of the component within the text well. */ width?: "normal" | "wide" | "wider" | "widest" | "fluid";
         /** Add an ID to target with SCSS. */ id?: string;
-        /** Add a class to target with SCSS. */ cls?: string;
+        /** Add a class to target with SCSS. */ class?: string;
         /**
            * Array of photos.
            * @required

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

@@ -28,7 +28,7 @@ declare const __propDef: {
         /**
            * Add a class to target with SCSS.
            * @type {string}
-           */ cls?: string;
+           */ class?: string;
         /** Width of the component within the text well. */ width?: "normal" | "wide" | "wider" | "widest" | "fluid";
         /**
            * Set a different width for captions within the text well, for example,

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

@@ -22,7 +22,7 @@ declare const __propDef: {
            * @required
            */ width?: "normal" | "wide" | "wider" | "widest" | "fluid";
         /** Add an ID to target with SCSS. */ id?: string;
-        /** Add a class to target with SCSS. */ cls?: string;
+        /** Add a class to target with SCSS. */ class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -23,7 +23,7 @@ declare const __propDef: {
         /**
            * Set a class to target with SCSS.
            * @type {string}
-           */ cls?: string;
+           */ class?: string;
         /**
            * Set an ID to target with SCSS.
            * @type {string}

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

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import { HeadlineSize } from '../@types/global';
 declare const __propDef: {
     props: {
         /**
@@ -6,6 +7,10 @@ declare const __propDef: {
            * @type {string}
            * @required
            */ hed?: string;
+        /**
+           * Headline size
+           * @type {string}
+           */ hedSize?: HeadlineSize;
         /**
            * Section title.
            * @type {string}
@@ -32,7 +37,7 @@ declare const __propDef: {
         /**
            * Add extra classes to target with custom CSS.
            * @type {string}
-           */ cls?: string;
+           */ class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -77,7 +77,7 @@ declare const __propDef: {
            */ fieldFormatters?: object;
         width?: "normal" | "wide" | "wider" | "widest" | "fluid";
         /** Add an ID to target with SCSS. */ id?: string;
-        /** Add a class to target with SCSS. */ cls?: string;
+        /** Add a class to target with SCSS. */ class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/@types/components/Theme/@types/component.d.ts

@@ -7,15 +7,35 @@ interface Colour {
     'brand-rules': string;
     'brand-shadow': string;
 }
+interface FontFamily {
+    'serif': string;
+    'sans-serif': string;
+    'monospace': string;
+    hed: string;
+    subhed: string;
+    body: string;
+    note: string;
+}
+interface FontSize {
+    'xxs': string;
+    'xs': string;
+    'sm': string;
+    'base': string;
+    'lg': string;
+    'xl': string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+}
 interface Font {
-    'size-base': string;
-    'family-serif': string;
-    'family-sans-serif': string;
-    'family-monospace': string;
-    'family-hed': string;
-    'family-subhed': string;
-    'family-body': string;
-    'family-note': string;
+    family: FontFamily;
+    size: FontSize;
+}
+interface CustomFont {
+    family?: Partial<FontFamily>;
+    size?: Partial<FontSize>;
 }
 export interface Theme {
     colour: Colour;
@@ -23,6 +43,6 @@ export interface Theme {
 }
 export interface CustomTheme {
     colour?: Partial<Colour>;
-    font?: Partial<Font>;
+    font?: Partial<CustomFont>;
 }
 export {};

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

@@ -4,27 +4,7 @@ import { SvelteComponentTyped } from "svelte";
  * @type {{ light, dark }}
  */
 export declare const themes: {
-    light: {
-        colour: {
-            background: string;
-            'text-primary': string;
-            'text-secondary': string;
-            accent: string;
-            'brand-logo': string;
-            'brand-rules': string;
-            'brand-shadow': string;
-        };
-        font: {
-            'size-base': string;
-            'family-serif': string;
-            'family-sans-serif': string;
-            'family-monospace': string;
-            'family-hed': string;
-            'family-subhed': string;
-            'family-body': string;
-            'family-note': string;
-        };
-    };
+    light: import("./@types/component").Theme;
     dark: import("./@types/component").Theme;
 };
 import type { CustomTheme } from './@types/component';

package/dist/@types/components/Theme/themes/common.d.ts

@@ -0,0 +1,2 @@
+declare const _default: Omit<import('../@types/component').Theme, "colour">;
+export default _default;

package/dist/@types/components/Theme/themes/light.d.ts

@@ -1,22 +1,2 @@
-declare namespace _default {
-    let colour: {
-        background: string;
-        'text-primary': string;
-        'text-secondary': string;
-        accent: string;
-        'brand-logo': string;
-        'brand-rules': string;
-        'brand-shadow': string;
-    };
-    let font: {
-        'size-base': string;
-        'family-serif': string;
-        'family-sans-serif': string;
-        'family-monospace': string;
-        'family-hed': string;
-        'family-subhed': string;
-        'family-body': string;
-        'family-note': string;
-    };
-}
+declare const _default: import('../@types/component').Theme;
 export default _default;

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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         /** Add an ID to target with SCSS. */ id?: string;
-        /** Add a class to target with SCSS. */ cls?: string;
+        /** Add a class to target with SCSS. */ class?: string;
         /**
            * Make the header stick when user scrolls.
            */ sticky?: boolean;

package/dist/components/Article/Article.svelte

@@ -26,7 +26,7 @@ $: columnWidthVars = {
 <main>
   <article
     id="{id}"
-    class:embedded
+    class:embedded="{embedded}"
     role="{role}"
     use:cssVariables="{columnWidthVars}"
   >

package/dist/components/BeforeAfter/BeforeAfter.svelte

@@ -138,14 +138,14 @@ onMount(() => {
 />
 
 {#if beforeSrc && beforeAlt && afterSrc && afterAlt}
-  <Block width="{width}" id="{id}" cls="photo before-after">
+  <Block width="{width}" id="{id}" class="photo before-after">
     <div
       style="height: {containerHeight}px;"
       bind:clientWidth="{containerWidth}"
     >
       <figure
         style="{figStyle}"
-        class="before-after-container"
+        class="before-after-container relative overflow-hidden my-0 mx-auto"
         on:touchstart="{start}"
         on:mousedown="{start}"
         bind:this="{figure}"
@@ -158,7 +158,7 @@ onMount(() => {
           on:load="{measureLoadedImage}"
           on:mousedown|preventDefault
           style="{imgStyle}"
-          class="after"
+          class="after absolute block m-0 max-w-full object-cover"
           aria-describedby="{$$slots.beforeOverlay && `${id}-before`}"
         />
 
@@ -167,13 +167,13 @@ onMount(() => {
           alt="{beforeAlt}"
           on:mousedown|preventDefault
           style="clip: rect(0 {x}px {containerHeight}px 0);{imgStyle}"
-          class="before"
+          class="before absolute block m-0 max-w-full object-cover"
           aria-describedby="{$$slots.afterOverlay && `${id}-after`}"
         />
         {#if $$slots.beforeOverlay}
           <div
             id="image-before-label"
-            class="overlay-container before"
+            class="overlay-container before absolute"
             bind:clientWidth="{beforeOverlayWidth}"
             style="clip-path: inset(0 {beforeOverlayClip}px 0 0);"
           >
@@ -185,7 +185,7 @@ onMount(() => {
           </div>
         {/if}
         {#if $$slots.afterOverlay}
-          <div id="image-after-label" class="overlay-container after">
+          <div id="image-after-label" class="overlay-container after absolute">
             <!-- Overlay for after image -->
             <slot
               name="afterOverlay"
@@ -195,6 +195,8 @@ onMount(() => {
         {/if}
         <div
           tabindex="0"
+          role="slider"
+          aria-valuenow="{Math.round(offset * 100)}"
           class="handle"
           style="left: calc({offset *
             100}% - 20px); --before-after-handle-colour: {handleColour}; --before-after-handle-inactive-opacity: {handleInactiveOpacity};"
@@ -208,7 +210,7 @@ onMount(() => {
     </div>
     {#if $$slots.caption}
       <PaddingReset containerIsFluid="{width === 'fluid'}">
-        <aside class="before-after-caption" id="{`${id}-caption`}">
+        <aside class="before-after-caption my-0 mx-auto" id="{`${id}-caption`}">
           <!-- Caption for image credits -->
           <slot name="caption" />
         </aside>
@@ -218,24 +220,15 @@ onMount(() => {
 {/if}
 
 <style>figure.before-after-container {
-  overflow: hidden;
-  position: relative;
   box-sizing: content-box;
-  margin: 0 auto;
 }
 figure.before-after-container img {
   top: 0;
   left: 0;
   z-index: 20;
-  margin: 0;
-  display: block;
-  max-width: 100%;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  -o-object-fit: cover;
-     object-fit: cover;
-  position: absolute;
 }
 figure.before-after-container img.after {
   z-index: 21;
@@ -246,14 +239,17 @@ figure.before-after-container img.before {
 figure.before-after-container .overlay-container {
   position: absolute;
 }
-figure.before-after-container .overlay-container :global(p) {
-  font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
-  font-size: 1rem;
-  line-height: 1.2rem;
+figure.before-after-container .overlay-container :global(:first-child) {
+  margin-top: 0;
 }
-figure.before-after-container .overlay-container :global(p:last-child) {
+figure.before-after-container .overlay-container :global(:last-child) {
   margin-bottom: 0;
 }
+figure.before-after-container .overlay-container :global(p) {
+  font-family: var(--theme-font-family-note);
+  font-size: var(--theme-font-size-sm);
+  line-height: 1.25;
+}
 figure.before-after-container .overlay-container.before {
   left: 0;
   z-index: 23;
@@ -317,29 +313,15 @@ figure.before-after-container .overlay-container.after {
 }
 
 aside.before-after-caption {
-  margin: 0 auto;
-  font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
-  color: var(--theme-colour-text-secondary, #666666);
+  font-family: var(--theme-font-family-note);
+  color: var(--theme-colour-text-secondary);
 }
 aside.before-after-caption :global(p) {
-  font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
-  color: var(--theme-colour-text-secondary, #666666);
-  font-size: 0.9rem;
-  line-height: 1.2rem;
+  font-family: var(--theme-font-family-note);
+  color: var(--theme-colour-text-secondary);
+  font-size: var(--theme-font-size-xs);
+  line-height: 1.25;
 }
 aside.before-after-caption :global(p:last-of-type) {
   margin-bottom: 0;
-}
-@media (max-width: 540px) {
-  aside.before-after-caption :global(p) {
-    font-size: 0.8rem;
-    line-height: 1.1rem;
-  }
-}
-aside.before-after-caption :global(p) :global(a) {
-  color: currentColor;
-  text-decoration: underline;
-}
-aside.before-after-caption :global(p) :global(a:hover) {
-  text-decoration: underline;
 }</style>

package/dist/components/Block/Block.svelte

@@ -4,7 +4,8 @@ export let width = 'normal';
 /** Add an id to the block tag to target it with custom CSS. */
 export let id = '';
 /** Add extra classes to the block tag to target it with custom CSS. */
-export let cls = '';
+let cls = '';
+export { cls as class };
 /** Snap block to column widths, rather than fluidly resizing them. */
 export let snap = false;
 /** ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block */
@@ -24,86 +25,7 @@ export let ariaLabel = null;
   <slot />
 </div>
 
-<style>.paragraph-size {
-  font-size: 1.3rem;
-  line-height: 2.1rem;
-}
-.paragraph-size.font-sans {
-  font-size: 1.1rem;
-  line-height: 1.75rem;
-}
-@media (max-width: 540px) {
-  .paragraph-size {
-    font-size: 1.1rem;
-    line-height: 1.8rem;
-  }
-  .paragraph-size.font-sans {
-    font-size: 1rem;
-    line-height: 1.6rem;
-  }
-}
-.paragraph-size.important {
-  font-size: 1.3rem !important;
-  line-height: 2.1rem !important;
-}
-.paragraph-size.important.font-sans {
-  font-size: 1.1rem !important;
-  line-height: 1.8rem !important;
-}
-@media (max-width: 540px) {
-  .paragraph-size.important {
-    font-size: 1.1rem !important;
-    line-height: 1.8rem !important;
-  }
-  .paragraph-size.important.font-sans {
-    font-size: 1rem !important;
-    line-height: 1.6rem !important;
-  }
-}
-
-.small-size {
-  font-size: 0.9rem;
-  line-height: 1.2rem;
-}
-@media (max-width: 540px) {
-  .small-size {
-    font-size: 0.8rem;
-    line-height: 1.1rem;
-  }
-}
-.small-size.important {
-  font-size: 0.9rem !important;
-  line-height: 1.2rem !important;
-}
-@media (max-width: 540px) {
-  .small-size.important {
-    font-size: 0.8rem !important;
-    line-height: 1.1rem !important;
-  }
-}
-
-.blockquote-size {
-  font-size: 1.6rem;
-  line-height: 2.1rem;
-}
-@media (max-width: 540px) {
-  .blockquote-size {
-    font-size: 1.3rem;
-    line-height: 1.9rem;
-  }
-}
-.blockquote-size.important {
-  font-size: 1.6rem !important;
-  line-height: 2rem !important;
-}
-@media (max-width: 540px) {
-  .blockquote-size.important {
-    font-size: 1.3rem !important;
-    line-height: 1.8rem !important;
-  }
-}
-
-div.article-block {
+<style>div.article-block {
   max-width: var(--normal-column-width, 660px);
   margin-left: auto;
   margin-right: auto;