@reuters-graphics/graphics-components 0.0.23 → 0.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/@types/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte.d.ts +20 -0
- package/dist/@types/components/ToolsHeader/ToolsHeader.svelte.d.ts +39 -0
- package/dist/@types/index.d.ts +2 -0
- package/dist/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte +50 -0
- package/dist/components/ToolsHeader/ToolsHeader.svelte +75 -0
- package/dist/index.js +2 -0
- package/package.json +3 -1
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
/** "Kinesis" colour */ logoColour?: string;
|
|
5
|
+
/** Primary text colour, i.e., "Reuters" */ primaryTextColour?: string;
|
|
6
|
+
/** Secondary text colour, i.e., "Graphics" */ secondaryTextColour?: string;
|
|
7
|
+
/** CSS width value */ width?: string;
|
|
8
|
+
};
|
|
9
|
+
events: {
|
|
10
|
+
[evt: string]: CustomEvent<any>;
|
|
11
|
+
};
|
|
12
|
+
slots: {};
|
|
13
|
+
};
|
|
14
|
+
export declare type ReutersGraphicsLogoProps = typeof __propDef.props;
|
|
15
|
+
export declare type ReutersGraphicsLogoEvents = typeof __propDef.events;
|
|
16
|
+
export declare type ReutersGraphicsLogoSlots = typeof __propDef.slots;
|
|
17
|
+
/** `ReutersGraphicsLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ReutersGraphicsLogo--default) */
|
|
18
|
+
export default class ReutersGraphicsLogo extends SvelteComponentTyped<ReutersGraphicsLogoProps, ReutersGraphicsLogoEvents, ReutersGraphicsLogoSlots> {
|
|
19
|
+
}
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
/** Add an ID to target with SCSS. */ id?: string;
|
|
5
|
+
/** Add a class to target with SCSS. */ cls?: string;
|
|
6
|
+
/**
|
|
7
|
+
* Make the header stick when user scrolls.
|
|
8
|
+
*/ sticky?: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Background CSS
|
|
11
|
+
*/ background?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Border bottom CSS
|
|
14
|
+
*/ borderBottom?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Colour props passed to `ReutersGraphicsLogo` component.
|
|
17
|
+
*/ logoProps?: {
|
|
18
|
+
logoColour?: string;
|
|
19
|
+
primaryTextColor?: string;
|
|
20
|
+
secondaryTextColor?: string;
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* Link the logo points to.
|
|
24
|
+
*/ homeLink?: string;
|
|
25
|
+
};
|
|
26
|
+
events: {
|
|
27
|
+
[evt: string]: CustomEvent<any>;
|
|
28
|
+
};
|
|
29
|
+
slots: {
|
|
30
|
+
default: {};
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
export declare type ToolsHeaderProps = typeof __propDef.props;
|
|
34
|
+
export declare type ToolsHeaderEvents = typeof __propDef.events;
|
|
35
|
+
export declare type ToolsHeaderSlots = typeof __propDef.slots;
|
|
36
|
+
/** `ToolsHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ToolsHeader--default) */
|
|
37
|
+
export default class ToolsHeader extends SvelteComponentTyped<ToolsHeaderProps, ToolsHeaderEvents, ToolsHeaderSlots> {
|
|
38
|
+
}
|
|
39
|
+
export {};
|
package/dist/@types/index.d.ts
CHANGED
|
@@ -15,6 +15,7 @@ export { default as PhotoPack } from "./components/PhotoPack/PhotoPack.svelte";
|
|
|
15
15
|
export { default as PymChild } from "./components/PymChild/PymChild.svelte";
|
|
16
16
|
export { pymChildStore } from "./components/PymChild/stores.js";
|
|
17
17
|
export { default as ReferralBlock } from "./components/ReferralBlock/ReferralBlock.svelte";
|
|
18
|
+
export { default as ReutersGraphicsLogo } from "./components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte";
|
|
18
19
|
export { default as ReutersLogo } from "./components/ReutersLogo/ReutersLogo.svelte";
|
|
19
20
|
export { default as Scroller } from "./components/Scroller/Scroller.svelte";
|
|
20
21
|
export { default as SEO } from "./components/SEO/SEO.svelte";
|
|
@@ -24,6 +25,7 @@ export { default as SiteFooter } from "./components/SiteFooter/SiteFooter.svelte
|
|
|
24
25
|
export { default as SiteHeader } from "./components/SiteHeader/SiteHeader.svelte";
|
|
25
26
|
export { default as SiteHeadline } from "./components/SiteHeadline/SiteHeadline.svelte";
|
|
26
27
|
export { default as Spinner } from "./components/Spinner/Spinner.svelte";
|
|
28
|
+
export { default as ToolsHeader } from "./components/ToolsHeader/ToolsHeader.svelte";
|
|
27
29
|
export { default as Video } from "./components/Video/Video.svelte";
|
|
28
30
|
export { default as Visible } from "./components/Visible/Visible.svelte";
|
|
29
31
|
export { getPhotoPackPropsFromDoc } from "./components/PhotoPack/docProps.js";
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
<!-- @component `ReutersGraphicsLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ReutersGraphicsLogo--default) -->
|
|
2
|
+
<script>/** "Kinesis" colour */
|
|
3
|
+
export let logoColour = '#FA6400';
|
|
4
|
+
/** Primary text colour, i.e., "Reuters" */
|
|
5
|
+
export let primaryTextColour = '#404040';
|
|
6
|
+
/** Secondary text colour, i.e., "Graphics" */
|
|
7
|
+
export let secondaryTextColour = '#666666';
|
|
8
|
+
/** CSS width value */
|
|
9
|
+
export let width = '100%';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<svg
|
|
13
|
+
aria-hidden="true"
|
|
14
|
+
focusable="false"
|
|
15
|
+
viewBox="0 0 219.32 32.43"
|
|
16
|
+
style="width: {width};"
|
|
17
|
+
>
|
|
18
|
+
<path
|
|
19
|
+
d="M30.72,16.3a1.57,1.57,0,1,1-1.56-1.57A1.56,1.56,0,0,1,30.72,16.3Zm-4.8-2.74a.94.94,0,1,0,.94.94A.94.94,0,0,0,25.92,13.56Zm-1.11-3.28a1.2,1.2,0,1,0,0,2.39,1.2,1.2,0,0,0,0-2.39ZM22.87,7.79A1.11,1.11,0,1,0,24,8.9,1.11,1.11,0,0,0,22.87,7.79ZM20.43,6.31a.95.95,0,1,0,.94.94A.94.94,0,0,0,20.43,6.31ZM17.85,5.7a.8.8,0,0,0,0,1.6.8.8,0,0,0,0-1.6Zm-2.53.11a.61.61,0,0,0-.61.62.61.61,0,0,0,.61.61.61.61,0,0,0,.62-.61A.62.62,0,0,0,15.32,5.81Zm-2.2.54a.53.53,0,1,0,.53.52A.52.52,0,0,0,13.12,6.35Zm-1.88.83a.46.46,0,0,0,0,.92.46.46,0,1,0,0-.92ZM9.58,8.27a.53.53,0,1,0,.53.53A.53.53,0,0,0,9.58,8.27ZM8,9.8a.61.61,0,1,0,.61.61A.61.61,0,0,0,8,9.8Zm-1.31,2a.73.73,0,1,0,.73.73A.73.73,0,0,0,6.7,11.84Zm-.76,2.63a.77.77,0,1,0,.77.77A.77.77,0,0,0,5.94,14.47Zm0,2.68a.94.94,0,1,0,.94.94A.94.94,0,0,0,6,17.15ZM7.1,19.92a1.2,1.2,0,0,0,0,2.39,1.2,1.2,0,1,0,0-2.39Zm2,2.66a1.11,1.11,0,1,0,1.11,1.1A1.1,1.1,0,0,0,9.05,22.58Zm2.36,1.77a.94.94,0,1,0,.94.93A.94.94,0,0,0,11.41,24.35Zm2.65.95a.8.8,0,0,0,0,1.59.8.8,0,1,0,0-1.59Zm2.53.25a.61.61,0,1,0,.61.61A.61.61,0,0,0,16.59,25.55Zm2.2-.36a.53.53,0,0,0,0,1.06.53.53,0,0,0,0-1.06Zm1.88-.7a.46.46,0,0,0-.45.46.45.45,0,0,0,.45.45.46.46,0,0,0,.46-.45A.47.47,0,0,0,20.67,24.49Zm1.66-1.23a.53.53,0,0,0-.53.53.53.53,0,1,0,1.06,0A.53.53,0,0,0,22.33,23.26Zm1.57-1.69a.61.61,0,0,0,0,1.22.61.61,0,1,0,0-1.22Zm1.31-2.28a.73.73,0,0,0-.72.73.72.72,0,0,0,.72.72.73.73,0,0,0,.73-.72A.73.73,0,0,0,25.21,19.29ZM26,16.58a.77.77,0,1,0,.77.77A.76.76,0,0,0,26,16.58Zm-3-.88a.73.73,0,1,0,0,1.45.73.73,0,1,0,0-1.45Zm-2.82-.65a.41.41,0,1,0,.41.41A.41.41,0,0,0,20.15,15.05Zm-.78-2a.57.57,0,0,0-.57.57.57.57,0,1,0,.57-.57Zm-1.86-1.64a.77.77,0,0,0,0,1.54.77.77,0,1,0,0-1.54ZM15,11.16a.87.87,0,1,0,.87.87A.88.88,0,0,0,15,11.16Zm-2.13,1.21a.83.83,0,1,0,.83.83A.83.83,0,0,0,12.87,12.37Zm-1.09,2.28a.57.57,0,0,0-.56.56.56.56,0,1,0,1.12,0A.57.57,0,0,0,11.78,14.65Zm0,2.14a.41.41,0,1,0,.41.41A.41.41,0,0,0,11.82,16.79Zm.74,1.63A.58.58,0,0,0,12,19a.57.57,0,0,0,1.14,0A.58.58,0,0,0,12.56,18.42Zm1.86,1.27a.77.77,0,0,0-.77.77.78.78,0,1,0,.77-.77Zm2.51.06a.88.88,0,1,0,.87.87A.87.87,0,0,0,16.93,19.75Zm2.14-1.13a.83.83,0,0,0-.83.83.84.84,0,0,0,.83.84.85.85,0,0,0,.84-.84A.84.84,0,0,0,19.07,18.62Zm1.09-1.73a.56.56,0,1,0,.56.56A.56.56,0,0,0,20.16,16.89Zm2.44-4.12a.94.94,0,1,0,.94.94A.94.94,0,0,0,22.6,12.77ZM21,10.14a1.12,1.12,0,1,0,1.12,1.12A1.12,1.12,0,0,0,21,10.14ZM18.62,8.67a1,1,0,1,0,1,1A1,1,0,0,0,18.62,8.67ZM16,8.38a.88.88,0,1,0,.88.88A.87.87,0,0,0,16,8.38Zm-2.66.85a.66.66,0,1,0,.66.66A.66.66,0,0,0,13.3,9.23Zm-2.24,1.56a.61.61,0,1,0,.61.61A.61.61,0,0,0,11.06,10.79ZM9.54,13a.61.61,0,0,0-.61.61.62.62,0,0,0,.61.61.61.61,0,0,0,.61-.61A.61.61,0,0,0,9.54,13ZM8.9,15.46a.72.72,0,0,0-.72.72.73.73,0,0,0,.72.73.73.73,0,0,0,.73-.73A.73.73,0,0,0,8.9,15.46ZM9.28,18a.94.94,0,1,0,.93.94A.94.94,0,0,0,9.28,18Zm1.58,2.27A1.12,1.12,0,1,0,12,21.34,1.12,1.12,0,0,0,10.86,20.22Zm2.41,1.7a1,1,0,1,0,1,1A1,1,0,0,0,13.27,21.92Zm2.65.53a.89.89,0,1,0,.89.89A.89.89,0,0,0,15.92,22.45Zm2.66-.39a.66.66,0,1,0,0,1.31.66.66,0,1,0,0-1.31Zm2.24-1.45a.6.6,0,0,0-.6.61.61.61,0,1,0,.6-.61Zm1.52-2.25a.61.61,0,0,0-.61.61A.61.61,0,0,0,23,19,.61.61,0,0,0,22.34,18.36Zm6.2-7.6a1.36,1.36,0,1,0,1.35,1.36A1.35,1.35,0,0,0,28.54,10.76Zm-1.72-3.1A1.15,1.15,0,1,0,28,8.81,1.15,1.15,0,0,0,26.82,7.66ZM24.27,5.22a1,1,0,1,0,1,1A1,1,0,0,0,24.27,5.22ZM21.41,3.75a.8.8,0,1,0,.8.8A.8.8,0,0,0,21.41,3.75ZM18.6,3a.69.69,0,1,0,.69.69A.69.69,0,0,0,18.6,3ZM16,2.79a.6.6,0,1,0,.6.6A.6.6,0,0,0,16,2.79ZM13.32,3a.69.69,0,1,0,.69.69A.69.69,0,0,0,13.32,3Zm-2.82.76a.8.8,0,1,0,.81.8A.8.8,0,0,0,10.5,3.75ZM7.64,5.22a1,1,0,1,0,1,1A1,1,0,0,0,7.64,5.22ZM5.09,7.66A1.15,1.15,0,1,0,6.24,8.81,1.15,1.15,0,0,0,5.09,7.66ZM3.37,10.77a1.35,1.35,0,1,0,1.36,1.35A1.35,1.35,0,0,0,3.37,10.77Zm-.62,4A1.57,1.57,0,1,0,4.32,16.3,1.56,1.56,0,0,0,2.75,14.73Zm.63,4.39a1.35,1.35,0,1,0,1.35,1.35A1.35,1.35,0,0,0,3.38,19.12Zm1.71,3.51a1.15,1.15,0,0,0,0,2.3,1.15,1.15,0,0,0,0-2.3Zm2.55,2.76a1,1,0,1,0,1,1A1,1,0,0,0,7.64,25.39Zm2.86,1.84a.81.81,0,1,0,.81.81A.8.8,0,0,0,10.5,27.23Zm2.82,1a.7.7,0,1,0,.69.7A.69.69,0,0,0,13.32,28.21ZM16,28.6a.6.6,0,0,0-.6.6.59.59,0,0,0,.6.59.58.58,0,0,0,.59-.59A.59.59,0,0,0,16,28.6Zm2.64-.39a.7.7,0,1,0,.69.7A.7.7,0,0,0,18.6,28.21Zm2.81-1a.81.81,0,1,0,.81.8A.81.81,0,0,0,21.41,27.24Zm2.86-1.86a1,1,0,1,0,1,1A1,1,0,0,0,24.27,25.38Zm2.55-2.75A1.15,1.15,0,1,0,28,23.78,1.15,1.15,0,0,0,26.82,22.63Zm1.72-3.51a1.36,1.36,0,1,0,1.35,1.35A1.35,1.35,0,0,0,28.54,19.12Z"
|
|
20
|
+
fill="{logoColour}"></path>
|
|
21
|
+
<path
|
|
22
|
+
d="M49,23H46.68c-.21,0-.29-.2-.38-.38L43.58,18h-.42c-.49,0-2-.05-2.46-.08v4.67a.37.37,0,0,1-.36.38H38.45a.39.39,0,0,1-.38-.38V10.23c0-.38.23-.51.61-.56a38.87,38.87,0,0,1,4.48-.25c2.91,0,5.6,1,5.6,4.27v.18a3.64,3.64,0,0,1-2.55,3.7l3,5.06a.23.23,0,0,1,0,.15A.21.21,0,0,1,49,23Zm-2.84-9.32c0-1.41-1.1-2-3-2-.4,0-2.12,0-2.46.08v4.1c.3,0,2.13.06,2.46.06,1.94,0,3-.38,3-2Zm8.11,5.59c0,1.58.06,1.63,1.49,1.63h4.79a.38.38,0,0,1,.37.38v1.2c0,.27-.09.37-.37.4a25.07,25.07,0,0,1-4.09.26c-3.14,0-4.8,0-4.8-3.87v-6c0-3.9,1.66-3.88,4.8-3.88a26.35,26.35,0,0,1,4.09.26c.28,0,.37.14.37.4v1.21a.38.38,0,0,1-.37.38H55.75c-1.43,0-1.49,0-1.49,1.63V15h6.05a.38.38,0,0,1,.38.38v1.36a.38.38,0,0,1-.38.38H54.26ZM69.4,23.15c-3,0-5.66-1.32-5.66-5.35V9.93a.36.36,0,0,1,.38-.36H66a.36.36,0,0,1,.38.36V17.8c0,2.16,1,3.18,3,3.18s3-1,3-3.18V9.93a.36.36,0,0,1,.38-.36h1.87a.36.36,0,0,1,.38.36V17.8C75.07,21.83,72.45,23.15,69.4,23.15ZM87.51,11.76H83.74V22.63a.4.4,0,0,1-.39.38H81.48a.39.39,0,0,1-.38-.38V11.76H77.33a.35.35,0,0,1-.38-.33V9.93a.36.36,0,0,1,.38-.36H87.51a.36.36,0,0,1,.37.36v1.5A.34.34,0,0,1,87.51,11.76ZM113.19,23h-2.31c-.21,0-.28-.2-.37-.38L107.78,18h-.42c-.49,0-2-.05-2.46-.08v4.67a.37.37,0,0,1-.35.38h-1.89a.39.39,0,0,1-.38-.38V10.23c0-.38.22-.51.6-.56a38.87,38.87,0,0,1,4.48-.25c2.92,0,5.6,1,5.6,4.27v.18a3.64,3.64,0,0,1-2.55,3.7l3,5.06a.23.23,0,0,1,0,.15A.22.22,0,0,1,113.19,23Zm-2.83-9.32c0-1.41-1.11-2-3-2-.39,0-2.12,0-2.46.08v4.1c.31,0,2.14.06,2.46.06,2,0,3-.38,3-2Zm10,9.48a20.58,20.58,0,0,1-4.28-.5.41.41,0,0,1-.35-.38V20.93a.36.36,0,0,1,.35-.36h0a35.51,35.51,0,0,0,4.28.34c1.68,0,2.19-.6,2.19-1.7,0-1.42-3.38-2.2-5-2.88A3.39,3.39,0,0,1,115.38,13c0-2.08,1.67-3.59,5.19-3.59a18.93,18.93,0,0,1,4.09.49.38.38,0,0,1,.34.36v1.4a.32.32,0,0,1-.32.34h0a41.56,41.56,0,0,0-4.19-.34c-1.4,0-2.45.49-2.45,1.34,0,.62.71,1.19,1.55,1.53l3.2,1.26c1.59.65,2.62,1.59,2.62,3.4S124.19,23.17,120.41,23.17Zm-28-3.89c0,1.58.06,1.63,1.49,1.63h4.79a.38.38,0,0,1,.38.38v1.2c0,.27-.1.37-.38.4a25.07,25.07,0,0,1-4.09.26c-3.14,0-4.8,0-4.8-3.87v-6c0-3.9,1.66-3.88,4.8-3.88a26.35,26.35,0,0,1,4.09.26c.28,0,.38.14.38.4v1.21a.38.38,0,0,1-.38.38H93.93c-1.43,0-1.49,0-1.49,1.63V15h6a.38.38,0,0,1,.38.38v1.36a.38.38,0,0,1-.38.38h-6Z"
|
|
23
|
+
fill="{primaryTextColour}"></path>
|
|
24
|
+
<g>
|
|
25
|
+
<path
|
|
26
|
+
d="M139.13,9.65a9.7,9.7,0,0,1,3.77.64l-.17.92a10.21,10.21,0,0,0-3.52-.6c-3.43,0-5.51,2.16-5.51,5.7s2,5.7,5.41,5.7a12.38,12.38,0,0,0,2.66-.31V17.14h1.06v5.28a13.27,13.27,0,0,1-3.74.52c-4.18,0-6.49-2.78-6.49-6.63S135,9.65,139.13,9.65Z"
|
|
27
|
+
fill="{secondaryTextColour}"></path>
|
|
28
|
+
<path
|
|
29
|
+
d="M151.69,17l3.75,5.67h-1.25l-3.67-5.59h-3.66v5.59h-1.1V9.88h5.06c2.68,0,4,1.58,4,3.6A3.57,3.57,0,0,1,151.69,17Zm-1-6.25h-3.85v5.43h3.85a2.66,2.66,0,0,0,3-2.74C153.67,11.81,152.63,10.79,150.71,10.79Z"
|
|
30
|
+
fill="{secondaryTextColour}"></path>
|
|
31
|
+
<path
|
|
32
|
+
d="M161.74,9.88h1.2l4.81,12.83h-1.09l-1.35-3.66h-6L158,22.71h-1.1Zm-2.06,8.22H165l-2.64-7.33Z"
|
|
33
|
+
fill="{secondaryTextColour}"></path>
|
|
34
|
+
<path
|
|
35
|
+
d="M169.84,9.88h4.83a3.59,3.59,0,0,1,3.93,3.7,3.63,3.63,0,0,1-3.93,3.7h-3.74v5.43h-1.09Zm4.73,6.47a2.62,2.62,0,0,0,2.91-2.77,2.65,2.65,0,0,0-2.93-2.79h-3.62v5.56Z"
|
|
36
|
+
fill="{secondaryTextColour}"></path>
|
|
37
|
+
<path
|
|
38
|
+
d="M180.89,9.88H182v5.76h7.28V9.88h1.12V22.71h-1.12V16.62H182v6.09h-1.1Z"
|
|
39
|
+
fill="{secondaryTextColour}"></path>
|
|
40
|
+
<path d="M193.76,9.88h1.1V22.71h-1.1Z" fill="{secondaryTextColour}"></path>
|
|
41
|
+
<path
|
|
42
|
+
d="M203.91,9.65a9.26,9.26,0,0,1,3.35.6l-.17.9a9.38,9.38,0,0,0-3-.54c-3.37,0-5.41,2.18-5.41,5.68s2,5.68,5.41,5.68a9.38,9.38,0,0,0,3-.54l.17.91a9.26,9.26,0,0,1-3.35.6c-4,0-6.35-2.68-6.35-6.65S199.92,9.65,203.91,9.65Z"
|
|
43
|
+
fill="{secondaryTextColour}"></path>
|
|
44
|
+
<path
|
|
45
|
+
d="M213.43,22.94A12.07,12.07,0,0,1,209,22l.27-.9a10.81,10.81,0,0,0,4.16.94c2,0,3.35-.81,3.35-2.46s-1.22-2.31-3.68-2.95c-3-.77-4.14-1.91-4.14-3.62,0-2.27,1.68-3.35,4.51-3.35a9.32,9.32,0,0,1,3.94.83l-.21.9a9.43,9.43,0,0,0-3.73-.82c-2.16,0-3.41.61-3.41,2.38,0,1.56,1.11,2.1,3.44,2.78,2.62.75,4.38,1.5,4.38,3.77S216.16,22.94,213.43,22.94Z"
|
|
46
|
+
fill="{secondaryTextColour}"></path>
|
|
47
|
+
</g>
|
|
48
|
+
</svg>
|
|
49
|
+
|
|
50
|
+
<style></style>
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
<!-- @component `ToolsHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ToolsHeader--default) -->
|
|
2
|
+
<script>/** Add an ID to target with SCSS. */
|
|
3
|
+
export let id = '';
|
|
4
|
+
/** Add a class to target with SCSS. */
|
|
5
|
+
export let cls = '';
|
|
6
|
+
/**
|
|
7
|
+
* Make the header stick when user scrolls.
|
|
8
|
+
*/
|
|
9
|
+
export let sticky = false;
|
|
10
|
+
/**
|
|
11
|
+
* Background CSS
|
|
12
|
+
*/
|
|
13
|
+
export let background = 'transparent';
|
|
14
|
+
/**
|
|
15
|
+
* Border bottom CSS
|
|
16
|
+
*/
|
|
17
|
+
export let borderBottom = '1px solid #dedede';
|
|
18
|
+
/**
|
|
19
|
+
* Colour props passed to `ReutersGraphicsLogo` component.
|
|
20
|
+
*/
|
|
21
|
+
export let logoProps = { logoColour: '#404040' };
|
|
22
|
+
/**
|
|
23
|
+
* Link the logo points to.
|
|
24
|
+
*/
|
|
25
|
+
export let homeLink = '/';
|
|
26
|
+
import ReutersGraphicsLogo from '../ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<header
|
|
30
|
+
id="{id}"
|
|
31
|
+
class="{cls}"
|
|
32
|
+
class:sticky
|
|
33
|
+
style:background="{background}"
|
|
34
|
+
style:border-bottom="{borderBottom}"
|
|
35
|
+
>
|
|
36
|
+
<div class="logo-container">
|
|
37
|
+
<a href="{homeLink}">
|
|
38
|
+
<ReutersGraphicsLogo {...{ ...logoProps, ...{ width: '100%' } }} />
|
|
39
|
+
</a>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="menu-items-container">
|
|
42
|
+
<!-- Any additional content -->
|
|
43
|
+
<slot />
|
|
44
|
+
</div>
|
|
45
|
+
</header>
|
|
46
|
+
|
|
47
|
+
<style>header {
|
|
48
|
+
width: 100%;
|
|
49
|
+
padding: 10px 15px;
|
|
50
|
+
display: flex;
|
|
51
|
+
gap: 15px;
|
|
52
|
+
}
|
|
53
|
+
header.sticky {
|
|
54
|
+
position: -webkit-sticky;
|
|
55
|
+
position: sticky;
|
|
56
|
+
top: 0;
|
|
57
|
+
}
|
|
58
|
+
header div.logo-container {
|
|
59
|
+
width: 250px;
|
|
60
|
+
display: flex;
|
|
61
|
+
align-items: center;
|
|
62
|
+
}
|
|
63
|
+
@media (max-width: 1200px) {
|
|
64
|
+
header div.logo-container {
|
|
65
|
+
width: 200px;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
header div.menu-items-container {
|
|
69
|
+
width: calc(100% - 265px);
|
|
70
|
+
}
|
|
71
|
+
@media (max-width: 1200px) {
|
|
72
|
+
header div.menu-items-container {
|
|
73
|
+
width: calc(100% - 215px);
|
|
74
|
+
}
|
|
75
|
+
}</style>
|
package/dist/index.js
CHANGED
|
@@ -16,6 +16,7 @@ export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
|
|
|
16
16
|
export { default as PymChild } from './components/PymChild/PymChild.svelte';
|
|
17
17
|
export { pymChildStore } from './components/PymChild/stores.js';
|
|
18
18
|
export { default as ReferralBlock } from './components/ReferralBlock/ReferralBlock.svelte';
|
|
19
|
+
export { default as ReutersGraphicsLogo } from './components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';
|
|
19
20
|
export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';
|
|
20
21
|
export { default as Scroller } from './components/Scroller/Scroller.svelte';
|
|
21
22
|
export { default as SEO } from './components/SEO/SEO.svelte';
|
|
@@ -30,6 +31,7 @@ export {
|
|
|
30
31
|
// @ts-ignore
|
|
31
32
|
themes
|
|
32
33
|
} from './components/Theme/Theme.svelte';
|
|
34
|
+
export { default as ToolsHeader } from './components/ToolsHeader/ToolsHeader.svelte';
|
|
33
35
|
export { default as Video } from './components/Video/Video.svelte';
|
|
34
36
|
export { default as Visible } from './components/Visible/Visible.svelte';
|
|
35
37
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@reuters-graphics/graphics-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.24",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"private": false,
|
|
6
6
|
"homepage": "https://reuters-graphics.github.io/graphics-components",
|
|
@@ -125,6 +125,7 @@
|
|
|
125
125
|
"./components/PymChild/stores": "./dist/components/PymChild/stores.js",
|
|
126
126
|
"./components/ReferralBlock/ReferralBlock.svelte": "./dist/components/ReferralBlock/ReferralBlock.svelte",
|
|
127
127
|
"./components/ReferralBlock/stores": "./dist/components/ReferralBlock/stores.js",
|
|
128
|
+
"./components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte": "./dist/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte",
|
|
128
129
|
"./components/ReutersLogo/ReutersLogo.svelte": "./dist/components/ReutersLogo/ReutersLogo.svelte",
|
|
129
130
|
"./components/SEO/SEO.svelte": "./dist/components/SEO/SEO.svelte",
|
|
130
131
|
"./components/SEO/analytics": "./dist/components/SEO/analytics.js",
|
|
@@ -186,6 +187,7 @@
|
|
|
186
187
|
"./components/Theme/themes/light": "./dist/components/Theme/themes/light.js",
|
|
187
188
|
"./components/Theme/utils/flatten": "./dist/components/Theme/utils/flatten.js",
|
|
188
189
|
"./components/Theme/utils/merge": "./dist/components/Theme/utils/merge.js",
|
|
190
|
+
"./components/ToolsHeader/ToolsHeader.svelte": "./dist/components/ToolsHeader/ToolsHeader.svelte",
|
|
189
191
|
"./components/Video/Controls.svelte": "./dist/components/Video/Controls.svelte",
|
|
190
192
|
"./components/Video/Video.svelte": "./dist/components/Video/Video.svelte",
|
|
191
193
|
"./components/Visible/Visible.svelte": "./dist/components/Visible/Visible.svelte",
|