@playpilot/tpi 8.5.4 → 8.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.5.4",
+	"version": "8.5.7",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/data/translations.ts

@@ -251,6 +251,16 @@ export const translations = {
     [Language.Swedish]: 'Medverkande',
     [Language.Danish]: 'Medvirkende',
   },
+  'Home': {
+    [Language.English]: 'Home',
+    [Language.Swedish]: 'Hem',
+    [Language.Danish]: 'Hjem',
+  },
+  'Explore': {
+    [Language.English]: 'Explore',
+    [Language.Swedish]: 'Utforska',
+    [Language.Danish]: 'Udforsk',
+  },
 
   // List titles
   'List: Trending': {

package/src/routes/components/Explore/ExploreRouter.svelte

@@ -2,6 +2,7 @@
   import type { ExploreRoute } from '$lib/types/explore'
   import { useExploreRouter } from '$lib/explore'
   import { track } from '$lib/tracking'
+  import { t } from '$lib/localization'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import ExploreHome from './Routes/ExploreHome.svelte'
   import ExploreResults from './Routes/ExploreResults.svelte'
@@ -10,7 +11,7 @@
   const routes: ExploreRoute[] = [
     {
       key: 'results',
-      label: 'Explore',
+      label: t('Explore'),
       component: ExploreResults,
     },
   ]
@@ -18,7 +19,7 @@
   if (useExploreRouter()) {
     routes.unshift({
       key: 'home',
-      label: 'Home',
+      label: t('Home'),
       component: ExploreHome,
     })
   }

package/src/routes/components/Icons/IconMinus.svelte

@@ -1,3 +1,3 @@
-<svg width="18px" height="18px" viewBox="0 -960 960 960" fill="currentColor">
-  <path d="M200-440v-80h560v80H200Z"/>
+<svg width="18px" height="18px" viewBox="0 -960 960 960">
+  <path d="M200-440v-80h560v80H200Z" fill="currentColor" />
 </svg>

package/src/routes/components/Icons/IconPlus.svelte

@@ -1,3 +1,3 @@
-<svg width="18px" height="18px" viewBox="0 -960 960 960" fill="currentColor">
-  <path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/>
+<svg width="18px" height="18px" viewBox="0 -960 960 960">
+  <path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" fill="currentColor" />
 </svg>

package/src/routes/components/Modals/RailModal.svelte

@@ -110,6 +110,7 @@
 
       @include desktop() {
         transform: scale(0.9);
+        opacity: 0.35;
       }
 
       :global(*) {
@@ -169,8 +170,8 @@
     box-shadow: theme(rail-modal-arrow-shadow, 0 margin(0.25) margin(0.5) rgba(0, 0, 0, 0.35));
     color: theme(rail-modal-arrow-color, text-color);
 
-    @media (min-width: 800px) {
-      --offset: #{margin(-4)};
+    @include desktop {
+      --offset: #{margin(-3.5)};
     }
 
     &:hover,

package/src/routes/components/Rails/TitlesRail.svelte

@@ -337,6 +337,7 @@
       padding-top: 0;
       color: theme(text-color) !important;
       font-weight: theme(rail-aside-heading-font-weight, font-bold);
+      font-family: theme(rail-aside-heading-font-family, font-family);
       line-clamp: 1;
       -webkit-line-clamp: 1;
     }
@@ -349,6 +350,7 @@
     mask-image: linear-gradient(to top, transparent 0.5lh, white 1.5lh);
     overflow: hidden;
     color: theme(rail-text-color, text-color-alt) !important;
+    font-family: theme(rail-aside-font-family, font-family);
     font-size: 0.9em;
     line-height: 1.3;
   }

package/src/tests/routes/components/Explore/Routes/ExploreResults.test.js

@@ -34,7 +34,7 @@ describe('ExploreResults.svelte', () => {
   })
 
   it('Should render all returned titles', async () => {
-    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title, title, title], next: null, previous: null })
+    vi.mocked(fetchTitles).mockResolvedValue({ results: [title, title, title], next: null, previous: null })
 
     const { getAllByText } = render(ExploreResults)
 
@@ -44,7 +44,7 @@ describe('ExploreResults.svelte', () => {
   })
 
   it('Should not render Show more button when no next value is given', async () => {
-    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title], next: null, previous: null })
+    vi.mocked(fetchTitles).mockResolvedValue({ results: [title], next: null, previous: null })
 
     const { getByText, queryByText } = render(ExploreResults)
 
@@ -54,7 +54,7 @@ describe('ExploreResults.svelte', () => {
   })
 
   it('Should render Show more button when next value is given', async () => {
-    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title], next: 'truthy', previous: null })
+    vi.mocked(fetchTitles).mockResolvedValue({ results: [title], next: 'truthy', previous: null })
 
     const { getByText } = render(ExploreResults)
 
@@ -113,7 +113,7 @@ describe('ExploreResults.svelte', () => {
   })
 
   it('Should include search param when query is given', async () => {
-    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title], next: 'truthy', previous: null })
+    vi.mocked(fetchTitles).mockResolvedValue({ results: [title], next: 'truthy', previous: null })
 
     const { getAllByTestId } = render(ExploreResults, { searchQuery: 'some query' })
 
@@ -123,8 +123,8 @@ describe('ExploreResults.svelte', () => {
     })
   })
 
-  it('Should include search param when query is empty', async () => {
-    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title], next: 'truthy', previous: null })
+  it('Should not include search param when query is empty', async () => {
+    vi.mocked(fetchTitles).mockResolvedValue({ results: [title], next: 'truthy', previous: null })
 
     const { getAllByTestId } = render(ExploreResults, { searchQuery: '' })