@jetshop/template-trend 5.11.2 → 5.12.0

package/.linaria-cache/packages/template-trend/src/components/ContentPage/ContentPage.linaria.css

@@ -1,3 +1,5 @@
-.Header_h1j1g21v{font-size:1.6875rem;font-weight:600;margin:1rem 0 3rem;}
-.Content_c1fnqd8r{padding-bottom:1rem;}.Content_c1fnqd8r p{margin-bottom:1rem;}
-.MaxWidth_m19kzxi7.MaxWidth_mjqp9b6{max-width:60rem;}
+.Content_c1j1g21v{padding-bottom:1rem;}.Content_c1j1g21v p{margin-bottom:1rem;}
+.container_c1fnqd8r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
+.sidebar_s19kzxi7{max-width:288px;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;border-right:1px solid #dedede;margin-right:2rem;padding:2rem 0;}@media (max-width:799px){.sidebar_s19kzxi7{display:none;}}
+.content_c18mz79g{max-width:60rem;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:2rem 0;}.content_c18mz79g h1{margin-bottom:1rem;}
+.body_bqf7s3s{margin-top:1rem;}

package/.linaria-cache/packages/template-trend/src/components/ContentPage/SubPageNavigation.linaria.css

@@ -0,0 +1,4 @@
+.menu_mn7zz18{width:100%;}@media (min-width:50em){.menu_mn7zz18{display:none;}}.menu_mn7zz18 [data-flight-dropdown-button]{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0.75em;border:1px solid #dedede;width:100%;text-align:left;background:#FFFFFF;border-radius:3px;outline:none;}.menu_mn7zz18 [data-flight-dropdown-button]:focus{color:#146DE1;}.menu_mn7zz18 [data-flight-dropdown-button][aria-expanded='true']{border-radius:3px 3px 0 0;border-bottom:0;color:#146DE1;}.menu_mn7zz18 [data-flight-dropdown-button][aria-expanded='true'] .carot{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.menu_mn7zz18 [data-flight-dropdown-items]{position:absolute;top:100%;left:0;background:white;display:block;z-index:2;outline:none;width:100%;border:1px solid #dedede;border-top:0;}.menu_mn7zz18 [data-flight-dropdown-item]{line-height:1.5;border:none;cursor:pointer;white-space:normal;padding:0.5em 1em;}.menu_mn7zz18 [data-flight-dropdown-item]:hover{color:blue;}.menu_mn7zz18 [data-flight-dropdown-item] a{-webkit-text-decoration:none;text-decoration:none;color:#000;}.menu_mn7zz18 [data-flight-dropdown-item]:focus{font-weight:bold;background:#f2f2f2;outline:none;position:relative;}.menu_mn7zz18 [data-flight-dropdown-item]:focus:before{content:'';position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#2f80ed;}
+.links_l4wjvty{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.link_lkx9gc5{color:#000;-webkit-text-decoration:none;text-decoration:none;margin-bottom:1rem;line-height:1.5;}
+.activeLink_a1iunu17{font-weight:bold;color:#2f80ed;}

package/.linaria-cache/packages/ui/Breadcrumbs/Breadcrumbs.linaria.css

@@ -1,2 +1,2 @@
-.StyledBreadcrumbs_s11md4e4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin-bottom:2rem;}.StyledBreadcrumbs_s11md4e4 a,.StyledBreadcrumbs_s11md4e4 li{color:#707070;font-size:0.75rem;}.StyledBreadcrumbs_s11md4e4.hide-last li:last-child:after{display:none;}
+.StyledBreadcrumbs_s11md4e4{line-height:1.5;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin-bottom:2rem;}.StyledBreadcrumbs_s11md4e4 a,.StyledBreadcrumbs_s11md4e4 li{color:#707070;font-size:0.75rem;}.StyledBreadcrumbs_s11md4e4.hide-last li:last-child:after{display:none;}
 .Breadcrumb_b17ekgas{white-space:nowrap;}.Breadcrumb_b17ekgas:after{display:inline-block;content:'/';padding:0 0.33em;}

package/.linaria-cache/packages/ui/DropdownMenu/DropdownMenu.linaria.css

@@ -1,2 +1,2 @@
 .DropdownMenu0_dv23fto global([data-flight-dropdown-open='false'] [data-flight-dropdown-items]){display:none;}
-.styles_ssx52uf{position:relative;}.styles_ssx52uf [data-flight-dropdown-button]{padding:0.5em 1em;border:1px solid #c0c0c0;border-radius:3px;}.styles_ssx52uf [data-flight-dropdown-items]{position:absolute;position:absolute;top:100%;left:0;background:white;white-space:nowrap;display:block;z-index:2;outline:none;}.styles_ssx52uf [data-flight-dropdown-item]{cursor:pointer;border-top:1px solid #c0c0c0;white-space:nowrap;padding:0.5em 1em;}.styles_ssx52uf [data-flight-dropdown-item]:hover{color:blue;}
+.styles_ssx52uf{position:relative;}.styles_ssx52uf [data-flight-dropdown-button]{padding:0.5em 1em;border:1px solid #c0c0c0;border-radius:3px;}.styles_ssx52uf [data-flight-dropdown-items]{position:absolute;top:100%;left:0;background:white;white-space:nowrap;display:block;z-index:2;outline:none;}.styles_ssx52uf [data-flight-dropdown-item]{cursor:pointer;border-top:1px solid #c0c0c0;white-space:nowrap;padding:0.5em 1em;}.styles_ssx52uf [data-flight-dropdown-item]:hover{color:blue;}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetshop/template-trend",
-  "version": "5.11.2",
+  "version": "5.12.0",
   "license": "MIT",
   "scripts": {
     "build": "react-scripts build",
@@ -45,11 +45,11 @@
     ]
   },
   "dependencies": {
-    "@jetshop/core": "^5.11.2",
+    "@jetshop/core": "^5.12.0",
     "@jetshop/flight-shortcodes": "^2.0.10",
-    "@jetshop/intl": "^5.11.2",
-    "@jetshop/react-scripts": "^5.11.2",
-    "@jetshop/ui": "^5.11.2",
+    "@jetshop/intl": "^5.12.0",
+    "@jetshop/react-scripts": "^5.12.0",
+    "@jetshop/ui": "^5.12.0",
     "@react-google-maps/api": "~1.7.0",
     "prop-types": "^15.6.2",
     "react": "^16.9.0",

package/schema.graphql

@@ -212,7 +212,10 @@ type Category implements Document {
   """
   isDynamic: Boolean!
 
-  """Get content data set via the Content Editor"""
+  """
+  Get content data set via the Content Editor.NB: Carries a performance cost, as
+  asking for this will result in a separate API call in the backend.
+  """
   data: Content
 }
 
@@ -1356,7 +1359,7 @@ type PagedResult {
   result: [Product]!
 }
 
-"""The `Paging` scalar type represents a numeric values between (0; 100>"""
+"""The `Paging` scalar type represents a numeric values between <1; 100>"""
 scalar Paging
 
 input PagingInput {

package/src/components/Cart/CartFlyout.js

@@ -164,8 +164,16 @@ const CartFlyoutView = ({ result, modal, ...rest }) => {
           <Checkout
             data-testid="checkout-button"
             href={checkoutUrl}
-            onClick={() => {
-              track(trackCartCheckoutEvent({ cart: result.data.cart }));
+            onClick={event => {
+              event.preventDefault();
+              track(
+                trackCartCheckoutEvent({
+                  cart: result.data.cart,
+                  callback: () => {
+                    window.location = checkoutUrl;
+                  }
+                })
+              );
             }}
           >
             {t('Check out')}

package/src/components/CategoryPage/ProductCard.js

@@ -74,7 +74,7 @@ export function ProductCard({
 }) {
   const hasImages = product.images && product.images.length > 0;
   const Tag = as;
-  let badges = [...product.badges];
+  let badges = [...(product.badges || [])];
   product.isPackage &&
     badges.push({
       location: 'TOP_RIGHT',

package/src/components/ContentPage/ContentPage.js

@@ -3,12 +3,13 @@ import { styled } from 'linaria/react';
 import React from 'react';
 import UIMaxWidth from '../Layout/MaxWidth';
 import { ContentRenderer } from '@jetshop/ui/ContentRenderer';
-
-const Header = styled('h1')`
-  font-size: 1.6875rem;
-  font-weight: 600;
-  margin: 1rem 0 3rem;
-`;
+import {
+  MobileNavigation,
+  DesktopNavigation,
+  shouldDisplayNavigation
+} from './SubPageNavigation';
+import { css } from 'linaria';
+import Breadcrumbs from '@jetshop/ui/Breadcrumbs';
 
 const Content = styled('div')`
   padding-bottom: 1rem;
@@ -18,8 +19,35 @@ const Content = styled('div')`
   }
 `;
 
-const MaxWidth = styled(UIMaxWidth)`
+const container = css`
+  display: flex;
+  flex-direction: row;
+`;
+
+const sidebar = css`
+  max-width: 288px;
+  flex: 1 1 auto;
+  border-right: 1px solid #dedede;
+  margin-right: 2rem;
+  padding: 2rem 0;
+
+  @media (max-width: 799px) {
+    display: none;
+  }
+`;
+
+const content = css`
   max-width: 60rem;
+  flex: 1 1 auto;
+  padding: 2rem 0;
+
+  h1 {
+    margin-bottom: 1rem;
+  }
+`;
+
+const body = css`
+  margin-top: 1rem;
 `;
 
 const components = {
@@ -34,44 +62,47 @@ const components = {
   }
 };
 
-function ContentPage(props) {
-  const { page } = props;
+function ContentPage({ page, result }) {
   return (
-    <>
-      <Header>
-        <MaxWidth>
+    <UIMaxWidth className={container}>
+      {page && shouldDisplayNavigation(page) && (
+        <aside className={sidebar}>
+          <DesktopNavigation page={page} />
+        </aside>
+      )}
+      <article className={content}>
+        <Breadcrumbs
+          parents={result.data?.route?.parents || []}
+          breadcrumbs={result.data?.route?.breadcrumbs || []}
+        />
+        <h1>
           {page ? page.name : <LoadingLine heightPx={27} widthRem={15} />}
-        </MaxWidth>
-      </Header>
-      <MaxWidth>
-        {page ? (
-          <>
-            {page.data ? (
+        </h1>
+        <MobileNavigation page={page} />
+        <div className={body}>
+          {page ? (
+            page.data ? (
               <ContentRenderer
                 items={page.data.items}
                 components={components}
               />
             ) : (
-              <Content
-                dangerouslySetInnerHTML={{
-                  __html: page.content
-                }}
-              />
-            )}
-          </>
-        ) : (
-          <LoadingLine
-            heightPx={14}
-            widthRem={30}
-            randomizeWidthBy={10}
-            count={10}
-            style={{
-              marginBottom: '12px'
-            }}
-          />
-        )}
-      </MaxWidth>
-    </>
+              <Content dangerouslySetInnerHTML={{ __html: page.content }} />
+            )
+          ) : (
+            <LoadingLine
+              heightPx={14}
+              widthRem={30}
+              randomizeWidthBy={10}
+              count={10}
+              style={{
+                marginBottom: '12px'
+              }}
+            />
+          )}
+        </div>
+      </article>
+    </UIMaxWidth>
   );
 }
 

package/src/components/ContentPage/ContentPageFragment.gql

@@ -1,4 +1,8 @@
 fragment ContentPage on Page {
+  primaryRoute {
+    id
+    path
+  }
   name
   id
   content
@@ -20,4 +24,29 @@ fragment ContentPage on Page {
       }
     }
   }
+
+  parent {
+    id
+    name
+    primaryRoute {
+      id
+      path
+    }
+    subPages(includeHidden: false) {
+      ...SubPage
+    }
+  }
+
+  subPages(includeHidden: false) {
+    ...SubPage
+  }
+}
+
+fragment SubPage on Page {
+  id
+  name
+  primaryRoute {
+    id
+    path
+  }
 }

package/src/components/ContentPage/SubPageNavigation.js

@@ -0,0 +1,206 @@
+import {
+  DropdownMenu,
+  DropdownMenuButton,
+  DropdownMenuItem,
+  DropdownMenuItems
+} from '@jetshop/ui/DropdownMenu';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ReactComponent as Carot } from '@jetshop/ui/svg/Carrot.svg';
+import { css, cx } from 'linaria';
+import { theme } from '../Theme';
+import { useHistory, useLocation } from 'react-router';
+
+const menu = css`
+  width: 100%;
+
+  @media (min-width: 50em) {
+    display: none;
+  }
+
+  [data-flight-dropdown-button] {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 0.75em;
+    border: 1px solid #dedede;
+    width: 100%;
+    text-align: left;
+    background: ${theme.colors.white};
+    border-radius: 3px;
+    outline: none;
+
+    :focus {
+      color: ${theme.colors.blue};
+    }
+
+    &[aria-expanded='true'] {
+      border-radius: 3px 3px 0 0;
+      border-bottom: 0;
+      color: ${theme.colors.blue};
+
+      .carot {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  [data-flight-dropdown-items] {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background: white;
+    display: block;
+    z-index: 2;
+    outline: none;
+    width: 100%;
+    border: 1px solid #dedede;
+    border-top: 0;
+  }
+
+  [data-flight-dropdown-item] {
+    line-height: 1.5;
+    border: none;
+    cursor: pointer;
+    white-space: normal;
+    padding: 0.5em 1em;
+    :hover {
+      color: blue;
+    }
+  }
+
+  [data-flight-dropdown-item] a {
+    text-decoration: none;
+    color: #000;
+  }
+
+  [data-flight-dropdown-item]:focus {
+    font-weight: bold;
+    background: #f2f2f2;
+    outline: none;
+    position: relative;
+  }
+
+  [data-flight-dropdown-item]:focus:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 2px;
+    background-color: #2f80ed;
+  }
+`;
+
+const links = css`
+  display: flex;
+  flex-direction: column;
+`;
+
+const link = css`
+  color: #000;
+  text-decoration: none;
+  margin-bottom: 1rem;
+  line-height: 1.5;
+`;
+
+const activeLink = css`
+  font-weight: bold;
+  color: #2f80ed;
+`;
+
+function getNavigationItemFromPage(page, level) {
+  return {
+    id: page.id,
+    name: page.name,
+    url: page.primaryRoute?.path,
+    level
+  };
+}
+
+function Item({ name, url, level }) {
+  return (
+    <div style={{ marginLeft: `${(level - 1) * 12}px` }}>
+      <Link to={url}>{name}</Link>
+    </div>
+  );
+}
+
+function getNavigationItems(page) {
+  const parent = page.parent ? getNavigationItemFromPage(page.parent, 1) : null;
+  const siblings = page.parent
+    ? page.parent.subPages.map(subPage => getNavigationItemFromPage(subPage, 2))
+    : [];
+  const subPages = page.subPages
+    ? page.subPages.map(subPage =>
+        getNavigationItemFromPage(subPage, parent ? 3 : 2)
+      )
+    : [];
+  const currentPage = getNavigationItemFromPage(page, parent ? 2 : 1);
+
+  if (!parent && !subPages?.length) return [];
+
+  const items = [];
+
+  if (parent) items.push(parent);
+  if (siblings.length) {
+    siblings.forEach(page => {
+      items.push(page);
+      if (page.id === currentPage.id) {
+        items.push(...subPages);
+      }
+    });
+  } else {
+    items.push(currentPage, ...subPages);
+  }
+
+  return items;
+}
+
+export function shouldDisplayNavigation(page) {
+  return Boolean(page.parent || page.subPages?.length);
+}
+
+export function DesktopNavigation({ page }) {
+  const location = useLocation();
+  const items = getNavigationItems(page);
+
+  return (
+    <div className={links}>
+      {items.map(item => (
+        <Link
+          key={item.id}
+          to={item.url}
+          className={cx(link, location.pathname === item.url && activeLink)}
+          style={{ marginLeft: `${(item.level - 1) * 12}px` }}
+        >
+          {item.name}
+        </Link>
+      ))}
+    </div>
+  );
+}
+
+export function MobileNavigation({ page }) {
+  const { push } = useHistory();
+  const items = page ? getNavigationItems(page) : [];
+
+  return (
+    <DropdownMenu className={menu}>
+      <DropdownMenuButton>
+        <span>{page?.name}</span>
+        <Carot className="carot" />
+      </DropdownMenuButton>
+      <DropdownMenuItems>
+        {items.map(item => (
+          <DropdownMenuItem key={item.id} onSelect={() => push(item.url)}>
+            <Item {...item} />
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuItems>
+    </DropdownMenu>
+  );
+}

package/src/components/Layout/Footer/FooterLinks.js

@@ -7,9 +7,8 @@ import { useQuery } from '@apollo/react-hooks';
 
 function FooterLinks() {
   const { data } = useQuery(pagesQuery);
-  const { data: storeTitleData, loading: storeTitleLoading } = useQuery(
-    StoreTitleQuery
-  );
+  const { data: storeTitleData, loading: storeTitleLoading } =
+    useQuery(StoreTitleQuery);
 
   const pages = data?.pages;
   const storeTitle = storeTitleData?.startPage?.head.title;
@@ -20,7 +19,10 @@ function FooterLinks() {
       <ul>
         {pages.map(page => (
           <li key={page.id}>
-            <ContentPageLink page={page}>{page.name}</ContentPageLink>
+            <ContentPageLink page={page}>
+              {page.subPages?.length ? '+ ' : null}
+              {page.name}
+            </ContentPageLink>
           </li>
         ))}
       </ul>

package/src/components/Layout/Footer/PagesQuery.gql

@@ -6,5 +6,14 @@ query PagesQuery {
       id
       path
     }
+
+    subPages {
+      id
+      name
+      primaryRoute {
+        id
+        path
+      }
+    }
   }
 }

package/src/components/ProductPage/AddToCart/ProductToast.js

@@ -143,9 +143,17 @@ const ProductToast = ({
           <ChannelContext.Consumer>
             {({ selectedChannel }) => (
               <CheckoutButton
-                href={`${cart.externalCheckoutUrl}&channelCountry=${selectedChannel.country.code}`}
-                onClick={() => {
-                  track(trackCartCheckoutEvent({ cart }));
+                href={cart.externalCheckoutUrl}
+                onClick={event => {
+                  event.preventDefault();
+                  track(
+                    trackCartCheckoutEvent({
+                      cart: cart,
+                      callback: () => {
+                        window.location = cart.externalCheckoutUrl;
+                      }
+                    })
+                  );
                 }}
               >
                 {t('To checkout')}

package/src/components/StartPage/Content/StartPageHero.js

@@ -80,6 +80,9 @@ const StartPageHero = ({
       src={imageSrc.value}
       className={heroStyles}
       critical={isAboveFold?.value}
+      focalPointY={imageSrc.value.focalPointY}
+      focalPointX={imageSrc.value.focalPointX}
+      aspect={'2:1'}
     >
       <Container>
         <Title>{header.value}</Title>

package/src/components/StartPage/ContentItemFragment.gql

@@ -3,11 +3,16 @@
 
 fragment ContentItemFragment on ContentItem {
   type
-  properties {
+  properties(getImageAsImageValue: true) {
     name
     type
     valueType
     value {
+      ... on ImageValue {
+        value
+        focalPointX
+        focalPointY
+      }
       ... on Product {
         ...StartPageProductGrid
       }