diff --git a/CHANGELOG.md b/CHANGELOG.md index 75e6de88..27747ab7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,28 @@ # @reuters-graphics/graphics-components +## 3.0.3 + +### Patch Changes + +- c074a18: Allows step.background to be undefined + +## 3.0.2 + +### Patch Changes + +- 737f2e1: Adds a simple dropdown option to search embeds for Framer +- a032218: Don't fetch referrals on non-dotcom domains +- 2d4a641: Cleans up a spare console log left in +- c91807e: a11y fixes for SiteHeader and SiteFooter +- b13463f: fixes for Ad types that were colliding with their component names and a bug in the Framer Resizer +- a48d333: Ignore hydration mismatch in SEO component ld+json + +## 3.0.1 + +### Patch Changes + +- 93a41f3: Exposes bindable props for the Scroller component + ## 3.0.0 ### Major Changes diff --git a/package.json b/package.json index d962f662..f945eda4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@reuters-graphics/graphics-components", - "version": "3.0.0", + "version": "3.0.3", "type": "module", "private": false, "homepage": "https://reuters-graphics.github.io/graphics-components", diff --git a/src/components/@types/global.ts b/src/components/@types/global.ts index 0d9323ba..9fb19b5f 100644 --- a/src/components/@types/global.ts +++ b/src/components/@types/global.ts @@ -31,7 +31,7 @@ export interface ScrollerStep { /** * A background component */ - background: Component; + background: Component | undefined; /** * Optional props for background component */ diff --git a/src/components/AdSlot/@types/ads.ts b/src/components/AdSlot/@types/ads.ts index 3812be38..93e32b72 100644 --- a/src/components/AdSlot/@types/ads.ts +++ b/src/components/AdSlot/@types/ads.ts @@ -1,4 +1,4 @@ -export type LeaderboardAd = { +export type LeaderboardAdType = { mobile: { adType: 'leaderboard'; placementName: 'reuters_mobile_leaderboard'; @@ -8,8 +8,7 @@ export type LeaderboardAd = { placementName: 'reuters_desktop_leaderboard_atf'; }; }; - -export type SponsorshipAd = { +export type SponsorshipAdType = { mobile: { adType: 'sponsorlogo'; placementName: 'reuters_sponsorlogo'; @@ -19,8 +18,7 @@ export type SponsorshipAd = { placementName: 'reuters_sponsorlogo'; }; }; - -export type InlineAd = { +export type InlineAdType = { mobile: { adType: 'mpu' | 'native' | 'mpu2'; placementName: @@ -36,23 +34,19 @@ export type InlineAd = { | 'reuters_desktop_native_3'; }; }; - export type DesktopPlacementName = - | LeaderboardAd['desktop']['placementName'] - | SponsorshipAd['desktop']['placementName'] - | InlineAd['desktop']['placementName']; - + | LeaderboardAdType['desktop']['placementName'] + | SponsorshipAdType['desktop']['placementName'] + | InlineAdType['desktop']['placementName']; export type MobilePlacementName = - | LeaderboardAd['mobile']['placementName'] - | SponsorshipAd['mobile']['placementName'] - | InlineAd['mobile']['placementName']; - + | LeaderboardAdType['mobile']['placementName'] + | SponsorshipAdType['mobile']['placementName'] + | InlineAdType['mobile']['placementName']; export type DesktopAdType = - | LeaderboardAd['desktop']['adType'] - | SponsorshipAd['desktop']['adType'] - | InlineAd['desktop']['adType']; - + | LeaderboardAdType['desktop']['adType'] + | SponsorshipAdType['desktop']['adType'] + | InlineAdType['desktop']['adType']; export type MobileAdType = - | LeaderboardAd['mobile']['adType'] - | SponsorshipAd['mobile']['adType'] - | InlineAd['mobile']['adType']; + | LeaderboardAdType['mobile']['adType'] + | SponsorshipAdType['mobile']['adType'] + | InlineAdType['mobile']['adType']; diff --git a/src/components/AdSlot/InlineAd.svelte b/src/components/AdSlot/InlineAd.svelte index 6a0e8331..09cb4d26 100644 --- a/src/components/AdSlot/InlineAd.svelte +++ b/src/components/AdSlot/InlineAd.svelte @@ -2,7 +2,7 @@ diff --git a/src/components/AdSlot/LeaderboardAd.svelte b/src/components/AdSlot/LeaderboardAd.svelte index fdc4435b..95aada3d 100644 --- a/src/components/AdSlot/LeaderboardAd.svelte +++ b/src/components/AdSlot/LeaderboardAd.svelte @@ -1,6 +1,6 @@ diff --git a/src/components/Framer/Dropdown/index.svelte b/src/components/Framer/Dropdown/index.svelte new file mode 100644 index 00000000..8798d5b6 --- /dev/null +++ b/src/components/Framer/Dropdown/index.svelte @@ -0,0 +1,50 @@ + + +
+ + +
+ + diff --git a/src/components/Framer/Framer.svelte b/src/components/Framer/Framer.svelte index acbe4aa4..9359e624 100644 --- a/src/components/Framer/Framer.svelte +++ b/src/components/Framer/Framer.svelte @@ -7,6 +7,7 @@ import { width } from './stores'; import getUniqNames from './uniqNames'; import Typeahead from './Typeahead/index.svelte'; + import Dropdown from './Dropdown/index.svelte'; import ReutersGraphicsLogo from '../ReutersGraphicsLogo/ReutersGraphicsLogo.svelte'; interface Props { @@ -14,6 +15,7 @@ breakpoints?: number[]; minFrameWidth?: number; maxFrameWidth?: number; + searchType?: 'dropdown' | 'typeahead'; } let { @@ -21,6 +23,7 @@ breakpoints = [330, 510, 660, 930, 1200], minFrameWidth = 320, maxFrameWidth = 1200, + searchType = 'dropdown', }: Props = $props(); const getDefaultEmbed = (embeds: Props['embeds']) => { @@ -71,37 +74,62 @@

No embeds to show.

{:else} -
-
- - Live link - + {#if searchType === 'typeahead'} +
+
+ + Live link + +
+ embedTitles[d.index]} + data={embeds.map((embed, index) => ({ index, embed }))} + showDropdownOnFocus={true} + onselect={(detail) => { + if (typeof window !== 'undefined') { + window.localStorage.setItem( + 'framer-active-embed', + detail.original.embed + ); + } + activeEmbed = detail.original.embed; + // activeEmbedIndex = detail.original.index; + }} + />
- embedTitles[d.index]} - data={embeds.map((embed, index) => ({ index, embed }))} - showDropdownOnFocus={true} - onselect={(detail) => { - if (typeof window !== 'undefined') { - window.localStorage.setItem( - 'framer-active-embed', - detail.original.embed - ); - } - activeEmbed = detail.original.embed; - // activeEmbedIndex = detail.original.index; - }} - /> -
+ {:else} + + {/if}

Preview

@@ -139,26 +167,27 @@ } } - div#typeahead-container { + div#typeahead-container, + div#dropdown-container { max-width: 660px; margin: 0 auto 15px; position: relative; - } - div#typeahead-container div.embed-link { - position: absolute; - top: 0; - right: 0; - display: inline-block; - z-index: 2; - } - div#typeahead-container div.embed-link a { - font-family: 'Knowledge', 'Source Sans Pro', Arial, sans-serif; - color: #bbb; - font-size: 12px; - text-decoration: none !important; - } - div#typeahead-container div.embed-link a:hover { - color: #666; + div.embed-link { + position: absolute; + top: 0; + right: 0; + display: inline-block; + z-index: 2; + a { + font-family: 'Knowledge', 'Source Sans Pro', Arial, sans-serif; + color: #bbb; + font-size: 12px; + text-decoration: none !important; + &:hover { + color: #666; + } + } + } } div#preview-label { diff --git a/src/components/Framer/Resizer/index.svelte b/src/components/Framer/Resizer/index.svelte index 66942e07..e406ed9b 100644 --- a/src/components/Framer/Resizer/index.svelte +++ b/src/components/Framer/Resizer/index.svelte @@ -27,8 +27,7 @@ if ($width > maxWidth) width.set(maxWidth); }); - // svelte-ignore state_referenced_locally - let offset = $state(($width - minWidth) / pixelRange); + let offset = $derived(($width - minWidth) / pixelRange); let sliding = $state(false); let isFocused = $state(false); @@ -55,7 +54,7 @@ } else if (keyCode === 37) { offset = Math.max(0, offset - pixelWidth / sliderWidth); } - width.set(getPx()); + $width = getPx(); }; const start = (e: MouseEvent) => { sliding = true; @@ -77,17 +76,17 @@ .filter((b) => b <= maxWidth) .filter((b) => b > $width); if (availableBreakpoints.length === 0) { - width.set(maxWidth); + $width = maxWidth; } else { - width.set(availableBreakpoints[0]); + $width = availableBreakpoints[0]; } }; const decrement = () => { const availableBreakpoints = breakpoints.filter((b) => b < $width); if (availableBreakpoints.length === 0) { - width.set(minWidth); + $width = minWidth; } else { - width.set(availableBreakpoints.slice(-1)[0]); + $width = availableBreakpoints.slice(-1)[0]; } }; diff --git a/src/components/Framer/Typeahead/index.svelte b/src/components/Framer/Typeahead/index.svelte index 42e978c7..798f2198 100644 --- a/src/components/Framer/Typeahead/index.svelte +++ b/src/components/Framer/Typeahead/index.svelte @@ -177,7 +177,6 @@ { - console.log('HELLO', !comboboxRef?.contains(target as Node)); if (!hideDropdown && !comboboxRef?.contains(target as Node)) { close(); } diff --git a/src/components/Framer/stories/docs/component.md b/src/components/Framer/stories/docs/component.md deleted file mode 100644 index 05f26772..00000000 --- a/src/components/Framer/stories/docs/component.md +++ /dev/null @@ -1,11 +0,0 @@ -An embed tool for development in the graphics kit. - -```svelte - - - -``` diff --git a/src/components/ReferralBlock/ReferralBlock.svelte b/src/components/ReferralBlock/ReferralBlock.svelte index 889bed68..fe26c887 100644 --- a/src/components/ReferralBlock/ReferralBlock.svelte +++ b/src/components/ReferralBlock/ReferralBlock.svelte @@ -67,6 +67,9 @@ let referrals: Article[] = $state([]); const getReferrals = async () => { + if (typeof window === 'undefined') return; + // fetch only reliably works on prod sites + if (window?.location?.hostname !== 'www.reuters.com') return; const isCollection = Boolean(collection); const API = isCollection ? COLLECTION_API : SECTION_API; try { diff --git a/src/components/SEO/SEO.svelte b/src/components/SEO/SEO.svelte index 8ceb2cd5..19bc6940 100644 --- a/src/components/SEO/SEO.svelte +++ b/src/components/SEO/SEO.svelte @@ -185,9 +185,11 @@ + {@html `<${'script'} type="application/ld+json">${JSON.stringify( orgLdJson )}`} + {@html `<${'script'} type="application/ld+json">${JSON.stringify( articleLdJson )}`} diff --git a/src/components/Scroller/Scroller.stories.svelte b/src/components/Scroller/Scroller.stories.svelte index 101b4967..ca233b30 100644 --- a/src/components/Scroller/Scroller.stories.svelte +++ b/src/components/Scroller/Scroller.stories.svelte @@ -19,6 +19,24 @@ control: 'select', options: ['fb', 'bf'], }, + index: { + control: false, + table: { + category: 'Bindable states (Read-only)', + }, + }, + offset: { + control: false, + table: { + category: 'Bindable states (Read-only)', + }, + }, + progress: { + control: false, + table: { + category: 'Bindable states (Read-only)', + }, + }, }, }); diff --git a/src/components/Scroller/Scroller.svelte b/src/components/Scroller/Scroller.svelte index 777cef59..b6c897b2 100644 --- a/src/components/Scroller/Scroller.svelte +++ b/src/components/Scroller/Scroller.svelte @@ -74,6 +74,12 @@ id?: string; /** Set a class to target with SCSS */ class?: string; + /** The currently active section */ + index?: number; + /** How far the section has scrolled past the threshold, as a value between 0 and 1 */ + offset?: number; + /** How far the foreground has travelled, where 0 is the top of the foreground crossing top, and 1 is the bottom crossing bottom */ + progress?: number; } let { @@ -90,12 +96,10 @@ bottom = 1, parallax = false, class: cls = '', + index = $bindable(0), + offset = $bindable(0), + progress = $bindable(0), }: Props = $props(); - - // Bindable variables passed to ScrollerBase - let index = $state(0); - let offset = $state(0); - let progress = $state(0); {#if !embedded} diff --git a/src/components/SimpleTimeline/SimpleTimeline.mdx b/src/components/SimpleTimeline/SimpleTimeline.mdx index 7ff74758..7eb4c72b 100644 --- a/src/components/SimpleTimeline/SimpleTimeline.mdx +++ b/src/components/SimpleTimeline/SimpleTimeline.mdx @@ -40,24 +40,20 @@ With the graphics kit, you'll likely get your text value from an ArchieML doc. ```yaml # Archie ML doc -[timeline] - -# date object with events -date: May 18 -[.events] -title: Mariupol defenders surrender to Russia but their fate is uncertain -context: More than 250 Ukrainian fighters surrendered to Russian forces at the Azovstal steelworks in Mariupol after weeks of desperate resistance, bringing an end to the most devastating siege of Russia's war in Ukraine and allowing President Vladimir Putin to claim a rare victory in his faltering campaign. -titleLink: https://www.reuters.com/world/europe/ukrainian-troops-evacuate-mariupol-ceding-control-russia-2022-05-17/ - -# More events... -[] - -date: May 10 -[.events] -title: U.S. House passes $40 bln bill to bolster Ukraine against Russian invasion -context: The U.S. House of Representatives approved more than $40 billion more aid for Ukraine on Tuesday, as Congress races to keep military aid flowing and boost the government in Kyiv as it grapples with the Russian invasion. -titleLink: https://www.reuters.com/world/us-house-vote-40-billion-ukraine-aid-package-tuesday-pelosi-2022-05-10/ -[] +type: timeline +# Optional +class: timeline +id: timeline-1 +symbolColour: var(--theme-colour-brand-rules, grey) +dateColour: var(--theme-colour-accent, red) +[.dates] + # date object with events + date: May 10 + [.events] + title: U.S. House passes $40 bln bill to bolster Ukraine against Russian invasion + context: The U.S. House of Representatives approved more than $40 billion more aid for Ukraine on Tuesday, as Congress races to keep military aid flowing and boost the government in Kyiv as it grapples with the Russian invasion. + titleLink: https://www.reuters.com/world/us-house-vote-40-billion-ukraine-aid-package-tuesday-pelosi-2022-05-10/ + [] # More dates and events... [] @@ -72,7 +68,13 @@ titleLink: https://www.reuters.com/world/us-house-vote-40-billion-ukraine-aid-pa import content from '$locales/en/content.json'; - + ``` diff --git a/src/components/SiteFooter/CompanyLinks.svelte b/src/components/SiteFooter/CompanyLinks.svelte index e6703d15..4ed6b018 100644 --- a/src/components/SiteFooter/CompanyLinks.svelte +++ b/src/components/SiteFooter/CompanyLinks.svelte @@ -25,6 +25,11 @@ } let { links = {} }: Props = $props(); + + const normaliseSocialName = (name: string) => { + if (name === 'twitter') return 'X'; + return name; + }; {#if links.social_links} @@ -42,7 +47,10 @@ {@const SvelteComponent = symbols[link.type as keyof typeof symbols]}