@treely/strapi-slices 4.2.0 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "license": "MIT",
   "author": "Tree.ly GmbH",
   "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",

package/src/models/PortfolioProject.ts

@@ -3,7 +3,9 @@ import CreditsAvailableState from './CreditsAvailableState';
 import FPMProject from './fpm/FPMProject';
 
 interface PortfolioProject extends FPMProject {
+  /** Remember to prefix the slug with portfolioHost */
   slug?: string;
+  portfolioHost?: string;
   thumbnail?: StrapiImage | null;
   creditsAvailable?: CreditsAvailableState;
   footerSubTitle?: string;

package/src/models/strapi/StrapiPortfolio.ts

@@ -3,6 +3,7 @@ import Locale from '../Locale';
 interface StrapiPortfolio {
   name: string;
   title: string;
+  host?: string;
   slices: any[];
   locale: Locale;
   createdAt: string;

package/src/slices/ProjectsGrid/ProjectsGrid.test.tsx

@@ -34,4 +34,27 @@ describe('The ProjectsGrid component', () => {
 
     expect(screen.getByText(fpmProjectMock.title)).toBeInTheDocument();
   });
+
+  it('links to the portfolio', () => {
+    setup();
+
+    expect(screen.getByRole('link')).toHaveProperty(
+      'href',
+      'http://localhost/portfolio/slug'
+    );
+  });
+
+  it('prefixes the url with the portfolio host', () => {
+    setup({
+      ...defaultProps,
+      projects: [
+        { ...defaultProps.projects[0], portfolioHost: 'https://example.org' },
+      ],
+    });
+
+    expect(screen.getByRole('link')).toHaveProperty(
+      'href',
+      'https://example.org/portfolio/slug'
+    );
+  });
 });

package/src/slices/ProjectsGrid/ProjectsGrid.tsx

@@ -46,7 +46,9 @@ export const ProjectsGrid: React.FC<ProjectsGridProps> = ({
               condition={!!project.slug}
               wrapper={(children: JSX.Element) => (
                 <Link
-                  href={`/portfolio/${project.slug}`}
+                  href={`${project.portfolioHost || ''}/portfolio/${
+                    project.slug
+                  }`}
                   passHref
                   key={project.id}
                   legacyBehavior

package/src/slices/ProjectsMap/MapMarker.test.tsx

@@ -6,6 +6,7 @@ import messagesEn from './messages.en';
 
 const defaultProps: MapMarkerProps = {
   title: 'Project title',
+  portfolioHost: '',
   isPublic: true,
 };
 
@@ -37,7 +38,26 @@ describe('The MapMarker component', () => {
 
     expect(screen.getByTestId('mapmarker-pin').parentElement).toHaveProperty(
       'href',
-      expect.stringContaining('/portfolio/slug')
+      'http://localhost/portfolio/slug'
+    );
+
+    fireEvent.mouseEnter(screen.getByTestId('mapmarker-pin'));
+
+    waitFor(() => {
+      const button = screen.getByText(
+        messagesEn['sections.projectsMap.link.text']
+      );
+      expect(button).toBeInTheDocument();
+      expect(button).toHaveProperty('href', '/portfolio/slug');
+    });
+  });
+
+  it('prefixes the url with the portfolio host', () => {
+    setup({ slug: 'slug', portfolioHost: 'https://example.com' });
+
+    expect(screen.getByTestId('mapmarker-pin').parentElement).toHaveProperty(
+      'href',
+      'https://example.com/portfolio/slug'
     );
 
     fireEvent.mouseEnter(screen.getByTestId('mapmarker-pin'));
@@ -49,7 +69,7 @@ describe('The MapMarker component', () => {
       expect(button).toBeInTheDocument();
       expect(button).toHaveProperty(
         'href',
-        expect.stringContaining('/portfolio/slug')
+        'https://example.com/portfolio/slug'
       );
     });
   });

package/src/slices/ProjectsMap/MapMarker.tsx

@@ -20,6 +20,7 @@ export interface MapMarkerProps {
   isPublic?: boolean;
   projectDeveloper?: string;
   slug?: string;
+  portfolioHost?: string;
   creditsAvailable?: CreditsAvailableState;
 }
 
@@ -28,6 +29,7 @@ const MapMarker = ({
   projectDeveloper,
   slug,
   creditsAvailable,
+  portfolioHost = '',
   isPublic = false,
 }: MapMarkerProps) => {
   const { formatMessage } = useContext(IntlContext);
@@ -42,7 +44,10 @@ const MapMarker = ({
       onMouseLeave={onClose}
       cursor="grab"
     >
-      <Box as={slug ? NextLink : undefined} href={slug && `/portfolio/${slug}`}>
+      <Box
+        as={slug ? NextLink : undefined}
+        href={slug && `${portfolioHost}/portfolio/${slug}`}
+      >
         <MapPin
           size="40px"
           color={blue600}
@@ -64,7 +69,7 @@ const MapMarker = ({
               <>
                 <CreditsAvailableBadge
                   status={creditsAvailable}
-                  href={slug && `/portfolio/${slug}`}
+                  href={slug && `${portfolioHost}/portfolio/${slug}`}
                 />
                 <Box height="3" />
               </>
@@ -84,7 +89,7 @@ const MapMarker = ({
                 variant="outline"
                 size="sm"
                 as={NextLink}
-                href={`/portfolio/${slug}`}
+                href={`${portfolioHost}/portfolio/${slug}`}
                 mt="4"
                 whiteSpace="nowrap"
               >

package/src/slices/ProjectsMap/ProjectsMap.tsx

@@ -97,6 +97,7 @@ export const ProjectsMap: React.FC<ProjectsMapProps> = ({
             <MapMarker
               title={project.title}
               isPublic={project.isPublic}
+              portfolioHost={project.portfolioHost}
               slug={project.slug}
               creditsAvailable={project.creditsAvailable}
               projectDeveloper={project.projectDeveloper?.name}