Merge pull request #270 from reuters-graphics/jon-site-footer
SiteFooter
This commit is contained in:
Jon McClure
GitHub
commit
e0b9da1b29
10 changed files with 120 additions and 79 deletions
|
|
@ -31,11 +31,11 @@
|
|||
/**
|
||||
* Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.
|
||||
*/
|
||||
linkTarget: string;
|
||||
linkTarget?: string;
|
||||
/**
|
||||
* Add a heading to the referral block.
|
||||
*/
|
||||
heading: string;
|
||||
heading?: string;
|
||||
/**
|
||||
* Width of the component within the text well: 'normal' | 'wide' | 'wider' | 'widest' | 'fluid'
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -14,7 +14,17 @@
|
|||
linkedin: LinkedIn,
|
||||
};
|
||||
|
||||
let { links = {} } = $props();
|
||||
interface Props {
|
||||
links: {
|
||||
company_description?: string;
|
||||
social_links?: {
|
||||
type: string;
|
||||
url: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
let { links = {} }: Props = $props();
|
||||
</script>
|
||||
|
||||
{#if links.social_links}
|
||||
|
|
@ -29,7 +39,8 @@
|
|||
<div>
|
||||
<ul class="links">
|
||||
{#each links.social_links as link}
|
||||
{@const SvelteComponent = symbols[link.type]}
|
||||
{@const SvelteComponent =
|
||||
symbols[link.type as keyof typeof symbols]}
|
||||
<li class="social-links symbol">
|
||||
<a href={normalizeUrl(link.url)}>
|
||||
<div class="button">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,24 @@
|
|||
<script lang="ts">
|
||||
import { normalizeUrl } from '../SiteHeader/NavBar/utils';
|
||||
|
||||
let { links = {} } = $props();
|
||||
interface Props {
|
||||
links: {
|
||||
ad_links?: {
|
||||
url: string;
|
||||
text: string;
|
||||
}[];
|
||||
misc_links: {
|
||||
self?: boolean;
|
||||
url: string;
|
||||
text: string;
|
||||
}[];
|
||||
disclaimer_link?: string;
|
||||
copyright_year: string;
|
||||
copyright_link: string;
|
||||
};
|
||||
}
|
||||
|
||||
let { links }: Props = $props();
|
||||
</script>
|
||||
|
||||
{#if links.ad_links}
|
||||
|
|
@ -36,8 +53,8 @@
|
|||
</ul>
|
||||
</section>
|
||||
<p class="copyright">
|
||||
© {links.copyright_year} Reuters.
|
||||
<a href={normalizeUrl(links.copyright_link)}>All rights reserved</a>
|
||||
© {new Date().getFullYear()} Reuters.
|
||||
<a href={normalizeUrl(links.copyright_link)}>All rights reserved.</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,33 @@
|
|||
videos: Videos,
|
||||
};
|
||||
|
||||
let { links = {} } = $props();
|
||||
interface Props {
|
||||
links: {
|
||||
latest_links: {
|
||||
url: string;
|
||||
text: string;
|
||||
}[];
|
||||
media_links: {
|
||||
symbol: string;
|
||||
url: string;
|
||||
text: string;
|
||||
}[];
|
||||
browse_links: {
|
||||
url: string;
|
||||
text: string;
|
||||
}[];
|
||||
about_links: {
|
||||
url: string;
|
||||
text: string;
|
||||
}[];
|
||||
stay_informed_links: {
|
||||
url: string;
|
||||
text: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
let { links }: Props = $props();
|
||||
|
||||
let windowWidth = $state(1200);
|
||||
const mobileBreakpoint = 745;
|
||||
|
|
@ -39,7 +65,8 @@
|
|||
<h3>Media</h3>
|
||||
<ul>
|
||||
{#each links.media_links as link}
|
||||
{@const SvelteComponent = symbols[link.symbol]}
|
||||
{@const SvelteComponent =
|
||||
symbols[link.symbol as keyof typeof symbols]}
|
||||
<li>
|
||||
<div class="symbol">
|
||||
<SvelteComponent />
|
||||
|
|
@ -80,7 +107,8 @@
|
|||
<h3>Media</h3>
|
||||
<ul>
|
||||
{#each links.media_links as link}
|
||||
{@const SvelteComponent_1 = symbols[link.symbol]}
|
||||
{@const SvelteComponent_1 =
|
||||
symbols[link.symbol as keyof typeof symbols]}
|
||||
<li>
|
||||
<div class="symbol">
|
||||
<SvelteComponent_1 />
|
||||
|
|
|
|||
45
src/components/SiteFooter/SiteFooter.mdx
Normal file
45
src/components/SiteFooter/SiteFooter.mdx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import { Meta } from '@storybook/blocks';
|
||||
|
||||
import * as SiteFooterStories from './SiteFooter.stories.svelte';
|
||||
|
||||
<Meta of={SiteFooterStories} />
|
||||
|
||||
# SiteFooter
|
||||
|
||||
Reuters dotcom site footer with graphics referrals, ported from [Raptor UI components](https://github.com/tr/rcom-arc_raptor-ui/tree/develop/packages/rcom-raptor-ui_common/src/components/site-footer).
|
||||
|
||||
> **Note:** In the Graphics Kit, you can find this component in `pages/+page.svelte`. Customise it there for the default page.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { SiteFooter } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<SiteFooter />
|
||||
```
|
||||
|
||||
## Dark theme
|
||||
|
||||
Colours are customised by the [`Theme`](?path=/docs/theming-theme--default) component. ([Demo](?path=/story/components-page-furniture-sitefooter--customised-theme))
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { SiteFooter, Theme } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<Theme base="dark">
|
||||
<SiteFooter />
|
||||
</Theme>
|
||||
```
|
||||
|
||||
## Removing referrals
|
||||
|
||||
Remove graphics referrals. ([Demo](?path=/story/components-page-furniture-sitefooter--remove-referrals))
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { SiteFooter } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<SiteFooter includeReferrals={false} />
|
||||
```
|
||||
|
|
@ -1,42 +1,17 @@
|
|||
<script module lang="ts">
|
||||
// @ts-ignore raw
|
||||
import componentDocs from './stories/docs/component.md?raw';
|
||||
// @ts-ignore raw
|
||||
import darkThemeDocs from './stories/docs/darkTheme.md?raw';
|
||||
// @ts-ignore raw
|
||||
import removeReferralsDocs from './stories/docs/removeReferrals.md?raw';
|
||||
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import SiteFooter from './SiteFooter.svelte';
|
||||
import Theme from '../Theme/Theme.svelte';
|
||||
|
||||
import {
|
||||
withComponentDocs,
|
||||
withStoryDocs,
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
export const meta = {
|
||||
const { Story } = defineMeta({
|
||||
title: 'Components/Page furniture/SiteFooter',
|
||||
component: SiteFooter,
|
||||
...withComponentDocs(componentDocs),
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { Template, Story } from '@storybook/addon-svelte-csf';
|
||||
<Story name="Demo" />
|
||||
|
||||
import Theme from '../Theme/Theme.svelte';
|
||||
</script>
|
||||
|
||||
<Template>
|
||||
{#snippet children({ args })}
|
||||
<div>
|
||||
<SiteFooter {...args} />
|
||||
</div>
|
||||
{/snippet}
|
||||
</Template>
|
||||
|
||||
<Story name="Default" />
|
||||
|
||||
<Story name="Customised theme" {...withStoryDocs(darkThemeDocs)}>
|
||||
<Story name="Customised theme">
|
||||
<div>
|
||||
<Theme base="dark">
|
||||
<SiteFooter />
|
||||
|
|
@ -44,11 +19,7 @@
|
|||
</div>
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Remove referrals"
|
||||
args={{ includeReferrals: false }}
|
||||
{...withStoryDocs(removeReferralsDocs)}
|
||||
/>
|
||||
<Story name="Remove referrals" args={{ includeReferrals: false }} />
|
||||
|
||||
<style>
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"company_description": "Reuters, the news and media division of Thomson Reuters, is the world’s largest multimedia news provider, reaching billions of people worldwide every day. Reuters provides business, financial, national and international news to professionals via desktop terminals, the world's media organizations, industry events and directly to consumers.",
|
||||
"disclaimer_link": "https://www.reuters.com/info-pages/disclaimer/",
|
||||
"copyright_link": "https://www.thomsonreuters.com/en/policies/copyright.html",
|
||||
"copyright_year": "2022",
|
||||
"copyright_year": "2025",
|
||||
"latest_links": [
|
||||
{
|
||||
"text": "Home",
|
||||
|
|
@ -203,7 +203,7 @@
|
|||
{
|
||||
"text": "Do Not Sell My Personal Information",
|
||||
"url": "javascript:window.OneTrust.ToggleInfoDisplay();",
|
||||
"self": "true"
|
||||
"self": true
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
Reuters dotcom site footer with graphics referrals, ported from [Raptor UI components](https://github.com/tr/rcom-arc_raptor-ui/tree/develop/packages/rcom-raptor-ui_common/src/components/site-footer).
|
||||
|
||||
> **Note:** In the Graphics Kit, you can find this component in `pages/+page.svelte`. Customise it there for the default page.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { SiteFooter } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<SiteFooter />
|
||||
```
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
Colours are customised by the [`Theme`](?path=/docs/theming-theme--default) component.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { SiteFooter, Theme } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<Theme base="dark">
|
||||
<SiteFooter />
|
||||
</Theme>
|
||||
```
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
Remove graphics referrals.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { SiteFooter } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<SiteFooter includeReferrals="{false}" />
|
||||
```
|
||||
Loading…
Reference in a new issue