@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/Table/LeftArrow.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  LeftArrowProps */
-/** @typedef {typeof __propDef.events}  LeftArrowEvents */
-/** @typedef {typeof __propDef.slots}  LeftArrowSlots */
-export default class LeftArrow extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type LeftArrowProps = typeof __propDef.props;
-export type LeftArrowEvents = typeof __propDef.events;
-export type LeftArrowSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/components/Table/Pagination.svelte.d.ts

@@ -1,33 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-           * The current page number.
-           * @type {number}
-           */ pageNumber?: number;
-        /**
-           * The default page size.
-           * @type {number}
-           */ pageSize?: number;
-        /**
-           * The number of records in the current page.
-           * @type {number}
-           */ pageLength?: number;
-        /**
-           * The total number of records in the data set.
-           * @type {number}
-           */ n?: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PaginationProps = typeof __propDef.props;
-export type PaginationEvents = typeof __propDef.events;
-export type PaginationSlots = typeof __propDef.slots;
-export default class Pagination extends SvelteComponent<PaginationProps, PaginationEvents, PaginationSlots> {
-}
-export {};

package/dist/components/Table/RightArrow.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  RightArrowProps */
-/** @typedef {typeof __propDef.events}  RightArrowEvents */
-/** @typedef {typeof __propDef.slots}  RightArrowSlots */
-export default class RightArrow extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type RightArrowProps = typeof __propDef.props;
-export type RightArrowEvents = typeof __propDef.events;
-export type RightArrowSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/components/Table/Select.svelte.d.ts

@@ -1,28 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { Option } from '../@types/global';
-declare const __propDef: {
-    props: {
-        /**
-           * The label that appears above the select input.
-           * @type {string}
-           */ label?: string;
-        /**
-           * The label that appears above the select input.
-           * @type {Array}
-           */ options?: Option[];
-    };
-    events: {
-        select: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SelectProps = typeof __propDef.props;
-export type SelectEvents = typeof __propDef.events;
-export type SelectSlots = typeof __propDef.slots;
-export default class Select extends SvelteComponent<SelectProps, SelectEvents, SelectSlots> {
-}
-export {};

package/dist/components/Table/SortArrow.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        sortDirection?: "ascending" | "descending";
-        /**
-           * Whether or not this arrow is currently sorting. It is false by default.
-           * @type {boolean}
-           */ active?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SortArrowProps = typeof __propDef.props;
-export type SortArrowEvents = typeof __propDef.events;
-export type SortArrowSlots = typeof __propDef.slots;
-export default class SortArrow extends SvelteComponent<SortArrowProps, SortArrowEvents, SortArrowSlots> {
-}
-export {};

package/dist/components/Table/stories/docs/both.md

@@ -1,13 +0,0 @@
-Feel free to both search and filter.
-
-```svelte
-<table
-  data="{yourData}"
-  searchable="{true}"
-  filterField="{'Region'}"
-  paginated="{true}"
-  title="{'Press Freedom Index'}"
-  dek="{'Reporters Without Borders ranks countries based on their level of press freedom using criteria such as the degree of media pluralism and violence against journalists.'}"
-  source="{'Source: Reporters Without Borders'}"
-></table>
-```

package/dist/components/Table/stories/docs/component.md

@@ -1,14 +0,0 @@
-Present structured data in a table. Consider making it interactive.
-
----
-
-```svelte
-<script>
-  import { Table } from '@reuters-graphics/graphics-components';
-
-  // Import your data as JSON, or otherwise structure it
-  import yourData from './stories/homeRuns.json';
-</script>
-
-<table data="{yourData}"></table>
-```

package/dist/components/Table/stories/docs/filter.md

@@ -1,11 +0,0 @@
-Allow users to filter the table by providing one of the attributes as the `filterField`. This works best with categorical columns.
-
-```svelte
-<table
-  data="{yourData}"
-  filterField="{'Region'}"
-  paginated="{true}"
-  title="{'Press Freedom Index'}"
-  notes="{'Source: Reporters Without Borders'}"
-></table>
-```

package/dist/components/Table/stories/docs/format.md

@@ -1,21 +0,0 @@
-Format column values by supplying functions keyed to field names with the `fieldFormatters` option. Columns are still sorted using the raw, underlying values.
-
-Among other things, this feature can be used to provide a unit of measurement with numeric fields.
-
-```svelte
-<script lang="ts">
-  const fieldFormatters = {
-    'Net worth (in billions)': (v) => '$' + v.toFixed(1),
-  };
-</script>
-
-<table
-  data="{yourData}"
-  fieldFormatters="{fieldFormatters}"
-  sortable="{true}"
-  sortField="{'Score'}"
-  sortDirection="{'descending'}"
-  title="{'The Richest Women in the World'}"
-  source="{'Source: Forbes'}"
-></table>
-```

package/dist/components/Table/stories/docs/metadata.md

@@ -1,14 +0,0 @@
-Set the `title`, `dek`, `notes` and `source` options to add supporting metadata above and below the table.
-
-```svelte
-<Table 
-  data="{yourData}"
-  title="{'Career home run leaders'}"
-  dek="{`In baseball,
-a home run (also known as a "dinger" or "tater") occurs when a batter hits the
-ball over the outfield fence. When a home run is hit, the batter and any runners
-on base are able to score.`}" 
-  notes="{'Note: As of Opening Day 2023'}"
-  source="{'Source: Baseball Reference'}"
-/>
-```

package/dist/components/Table/stories/docs/paginate.md

@@ -1,14 +0,0 @@
-When your table has lots of rows you should consider breaking it up into pages. This can be done by setting the `paginated` option.
-
-When it is enabled, readers can leaf through the data using a set of buttons below the table. By default there are 25 records per page. You can change the number by adjusting the `pageSize` option.
-
-This is a good option when publishing large tables for readers to explore. It works well with interactive features like searching and filters.
-
-```svelte
-<table
-  data="{yourData}"
-  paginated="{true}"
-  title="{'Press Freedom Index'}"
-  source="{'Reporters Without Borders'}"
-></table>
-```

package/dist/components/Table/stories/docs/search.md

@@ -1,11 +0,0 @@
-Allow users to search the table by setting the optional `searchable` variable. Modify the default text that appears in the box by supplying the `searchPlaceholder` option.
-
-```svelte
-<table
-  data="{yourData}"
-  searchable="{true}"
-  paginated="{true}"
-  title="{'Press Freedom Index'}"
-  notes="{'Source: Reporters Without Borders'}"
-></table>
-```

package/dist/components/Table/stories/docs/sort.md

@@ -1,14 +0,0 @@
-Allow users to sort the table by setting the `sortable` input. Specify the starting order by setting `sortField` to a column name and `sortDirection` to `ascending` or `descending`.
-
-By default, all fields are sortable. If you'd like to limit the columns where sorting is allowed, provide a list to the `sortableFields` option.
-
-```svelte
-<table
-  data="{yourData}"
-  sortable="{true}"
-  sortField="{'Score'}"
-  sortDirection="{'descending'}"
-  title="{'Press Freedom Index'}"
-  source="{'Source: Reporters Without Borders'}"
-></table>
-```

package/dist/components/Table/stories/docs/style.md

@@ -1,23 +0,0 @@
-You can tailor the table's appearance by crafting CSS that targets specific elements.
-
-Like other components, you can apply labels by providing the `id` of `cls` options, which allow you to make broad changes that remain limited to your element.
-
-Each column has a `data-field` attribute that contains the field's name. Use it to apply different styles to different fields. One common use is setting different text alignments on different columns.
-
-```svelte
-<table
-  id="{'custom-table'}"
-  data="{yourData}"
-  title="{'The Richest Women in the World'}"
-  source="{'Source: Forbes'}"
-></table>
-
-<style lang="scss">
-  /* Here we right align the table's numeric column. */
-  #custom-table {
-    [data-field='Net worth (in billions)'] {
-      text-align: right;
-    }
-  }
-</style>
-```

package/dist/components/Table/stories/docs/truncate.md

@@ -1,11 +0,0 @@
-When your table has 10 or more rows, consider clipping it by setting the `truncated` option. When it is enabled, the table is clipped and readers must request to see all rows by clicking a button below the table. By default this configuration will limit the table to five records. You can change the cutoff point by adjusting the `truncateLength` option.
-
-This is a good option for simple tables with row counts between 10 and 30. It works best when the table doesn't require interactivity.
-
-```svelte
-<table
-  data="{yourData}"
-  truncated="{true}"
-  source="{'Source: Baseball Reference'}"
-></table>
-```

package/dist/components/Theme/stories/ThemedPage.svelte

@@ -1,43 +0,0 @@
-<script>
-  import Article from '../../Article/Article.svelte';
-  import Headline from '../../Headline/Headline.svelte';
-  import BodyText from '../../BodyText/BodyText.svelte';
-  import GraphicBlock from '../../GraphicBlock/GraphicBlock.svelte';
-</script>
-
-<Article>
-  <Headline
-    hed="{'Reuters Graphics Interactive'}"
-    dek="{'The beginning of a beautiful page'}"
-    section="{'Global news'}"
-    authors="{['Jon McClure', 'Prasanta Kumar Dutta']}"
-    publishTime="{new Date('2021-09-12').toISOString()}"
-  />
-  <BodyText
-    text="{`Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.
-
-Prosciutto kevin brisket sirloin pork loin shoulder cupim sausage chicken jowl strip steak rump pork ball tip ham hock. Swine pork belly fatback alcatra jowl.
-
-## Brisket sirloin
-
-Shank strip steak turkey shoulder shankle leberkas pork chop, t-bone picanha buffalo ground round burgdoggen ribeye.   
-  `}"
-  />
-  <GraphicBlock
-    title="Steak tar-tar"
-    description="Andouille pork loin cow buffalo pork chop shoulder."
-    notes="Source: U.S. FDA"
-  >
-    <div class="fake-graphic"></div>
-  </GraphicBlock>
-  <BodyText
-    text="{'Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.'}"
-  />
-</Article>
-
-<style>
-  div.fake-graphic {
-    height: 200px;
-    border: 1px solid var(--theme-colour-accent);
-  }
-</style>

package/dist/components/Theme/stories/ThemedPage.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  ThemedPageProps */
-/** @typedef {typeof __propDef.events}  ThemedPageEvents */
-/** @typedef {typeof __propDef.slots}  ThemedPageSlots */
-export default class ThemedPage extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ThemedPageProps = typeof __propDef.props;
-export type ThemedPageEvents = typeof __propDef.events;
-export type ThemedPageSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/components/Theme/stories/docs/component.md

@@ -1,15 +0,0 @@
-The `Theme` component wraps your page content and uses [CSS variables](../?path=/docs/scss-css-variables--page) to set major colour and typography styles for your page. All of the components in this library will use those CSS variables for styling by default.
-
-Use our [theme builder](../?path=/docs/theming-theme-builder--docs) to customise your page's theme.
-
-```svelte
-<script>
-  import { Theme } from '@reuters-graphics/graphics-components';
-</script>
-
-<Theme base="light">
-  <!-- ...page stuff, now styled according to your theme! -->
-</Theme>
-```
-
-> For Graphics Kit users, the `Theme` is set for you in your graphics homepage (`pages/+page.svelte`). You can customise it there for the whole page.

package/dist/components/Theme/stories/docs/customise-font.md

@@ -1,52 +0,0 @@
-For some projects, you may need to use typefaces other than the defaults provided by the GraphicsKit.
-
-You will need to:
-
-- Import the fonts in your code.
-- Declare the `font-family` in the corresponding CSS variables in the Theme.
-
-There are many ways to load fonts, but care should be taken that the font files load first before page render, to avoid layout shifts during font swapping after the font is downloaded. For this reason, we will use `<link>` method in the page `head` instead of CSS imports.
-
-> ##### Importing custom fonts
-
-> In this sample from [Google Fonts](https://fonts.google.com/specimen/Bebas+Neue), once we have selected the font family, copy the `<link>` code.
-
-> ```html
-> <link rel="preconnect" href="https://fonts.googleapis.com" />
-> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-> <link
->   href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"
->   rel="stylesheet"
-> />
-> ```
-
-> In your project, navigate to `src` > `template.html` and add the copied code in `head` section :
-
-> ```svelte
-> <head>
->   <!-- HTML meta -->
->   <link rel="preconnect" href="https://fonts.googleapis.com" />
->   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
->   <link
->     href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"
->     rel="stylesheet"
->   />
->
->   %sveltekit.head%
-> </head>
-> ```
-
-> Similarly, you can add fonts from [Adobe Typekit](https://fonts.adobe.com/) or custom local fonts with the correct paths to the URL.
-
-You can customise one or more of the pre-defined font families in the Theme. Do not directly apply the font family in your CSS. Always use the CSS variables defined in the Theme so that it configures and reflects across the page design.
-
-```svelte
-<Theme
-  base="light"
-  theme="{{
-    font: { family: { hed: 'Bebas Neue, sans-serif' } },
-  }}"
->
-  <!-- Page content -->
-</Theme>
-```

package/dist/components/Theme/stories/docs/customise.md

@@ -1,28 +0,0 @@
-You can customise the theme of your page in two ways:
-
-First, you can choose the `base` theme, either `light` or `dark`.
-
-From there, you can pass a custom theme object to the `theme` prop. Any custom styles you pass to `theme` will override styles in the `base` theme.
-
-Check out the "Control" column for `theme` in the properties table above to see what properties you can customise.
-
-> **Pro tip:** The `Theme` component only styles child components or elements, so if you're changing the background colour of your page, it's still a good idea to set a `background-color` on your `body` element in global SCSS.
->
-> ```scss
-> // global.scss
-> body {
->   background-color: #2e3440;
-> }
-> ```
-
-```svelte
-<Theme
-  base="dark"
-  theme="{{
-    colour: { accent: 'var(--tr-light-orange)' },
-    font: { family: { hed: 'FreightText, serif' } },
-  }}"
->
-  <!-- Page content -->
-</Theme>
-```

package/dist/components/Theme/stories/docs/inheritance.md

@@ -1,17 +0,0 @@
-Styles that use `Theme`'s CSS variables will always use those set by the nearest parent `Theme`. That lets you change the theme for parts of your page by simply wrapping that bit in a _new_ `Theme` with different styles.
-
-The demo below shows a more complex example of nesting themes, but more likely you'll so something like this:
-
-```svelte
-<script>
-  import { Theme } from '@reuters-graphics/graphics-components';
-</script>
-
-<Theme>
-  <!-- Page content styled with the default light theme. -->
-  <Theme theme="{{ colour: { background: 'lightgrey' } }}">
-    <!-- A darker background for this section. -->
-  </Theme>
-  <!-- Back to normal here... -->
-</Theme>
-```

package/dist/components/Theme/stories/docs/pattern.md

@@ -1,40 +0,0 @@
-To use a background pattern or image, set the background colour property in your custom theme to `transparent`...
-
-```svelte
-<Theme
-  base="dark"
-  theme="{{
-    colour: { background: 'transparent' },
-  }}"
->
-  <!-- Page content -->
-</Theme>
-```
-
-... then set your background image in global SCSS:
-
-```scss
-/* global.scss */
-body {
-  background-color: darkblue;
-  background-image: url('$assets/images/my-pattern.png');
-}
-```
-
-You may also want to override the background on the header nav if it conflicts with your background, especially the dropdown menu:
-
-```scss
-/* global.scss
-Main nav container */
-.nav-container .inner {
-  background: darkblue !important;
-  /* Dropdown menu */
-  .dropdown {
-    background: darkblue !important;
-  }
-}
-/* Mobile nav overlay */
-header + .overlay {
-  background: darkblue !important;
-}
-```

package/dist/components/ToolsHeader/stories/docs/component.md

@@ -1,13 +0,0 @@
-A header for internal tooling sites.
-
-> **Note:** Don't use this component for public pages.
-
-```svelte
-<script>
-  import { ToolsHeader } from '@reuters-graphics/graphics-components';
-</script>
-
-<ToolsHeader>
-  <!-- Anything else goes right of the logo -->
-</ToolsHeader>
-```

package/dist/components/Video/Controls.svelte

@@ -1,75 +0,0 @@
-<script>
-  import Fa from 'svelte-fa';
-  import { faReply, faPlay, faPause } from '@fortawesome/free-solid-svg-icons';
-  import { createEventDispatcher } from 'svelte';
-
-  const dispatch = createEventDispatcher();
-
-  export let paused;
-  export let clickedOnPauseBtn;
-  export let controlsOpacity;
-  export let controlsPosition;
-  export let widthVideoContainer;
-  export let heightVideoContainer;
-  export let controlsBorderOffset;
-  export let resetCondition;
-  export let separateReplayIcon;
-  export let controlsColour;
-
-  function forwardBtnClick() {
-    paused = !paused;
-    clickedOnPauseBtn = paused === true; // so video doesn't autoplay when coming into view again if paused previously
-    dispatch('pausePlayEvent', {
-      paused,
-      clickedOnPauseBtn,
-    });
-  }
-</script>
-
-<button
-  on:click="{forwardBtnClick}"
-  style="
-    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`};
-    "
->
-  {#if resetCondition}
-    <i class="play-pause-icon replay">
-      {#if separateReplayIcon}
-        <Fa icon="{faReply}" size="2x" color="{controlsColour}" />
-      {:else}
-        <Fa icon="{faPlay}" size="2x" color="{controlsColour}" />
-      {/if}
-    </i>
-  {:else if paused === false}
-    <i class="play-pause-icon pause">
-      <Fa icon="{faPause}" size="2x" color="{controlsColour}" />
-    </i>
-  {:else if paused === true}
-    <i class="play-pause-icon play">
-      <Fa icon="{faPlay}" size="2x" color="{controlsColour}" />
-    </i>
-  {:else}
-    error
-  {/if}
-</button>
-
-<style>button {
-  z-index: 2;
-  position: absolute;
-  cursor: pointer;
-  background-color: transparent;
-  border: none;
-}</style>

package/dist/components/Video/Controls.svelte.d.ts

@@ -1,47 +0,0 @@
-/** @typedef {typeof __propDef.props}  ControlsProps */
-/** @typedef {typeof __propDef.events}  ControlsEvents */
-/** @typedef {typeof __propDef.slots}  ControlsSlots */
-export default class Controls extends SvelteComponent<{
-    paused: any;
-    clickedOnPauseBtn: any;
-    controlsOpacity: any;
-    controlsPosition: any;
-    widthVideoContainer: any;
-    heightVideoContainer: any;
-    controlsBorderOffset: any;
-    resetCondition: any;
-    separateReplayIcon: any;
-    controlsColour: any;
-}, {
-    pausePlayEvent: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ControlsProps = typeof __propDef.props;
-export type ControlsEvents = typeof __propDef.events;
-export type ControlsSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        paused: any;
-        clickedOnPauseBtn: any;
-        controlsOpacity: any;
-        controlsPosition: any;
-        widthVideoContainer: any;
-        heightVideoContainer: any;
-        controlsBorderOffset: any;
-        resetCondition: any;
-        separateReplayIcon: any;
-        controlsColour: any;
-    };
-    events: {
-        pausePlayEvent: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};