@jetshop/template-trend 5.10.0 → 5.12.0

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

@@ -66,12 +66,23 @@ const heroStyles = css`
   justify-content: center;
 `;
 
-const StartPageHero = ({ header, text, buttonText, buttonLink, imageSrc }) => (
+const StartPageHero = ({
+  header,
+  text,
+  buttonText,
+  buttonLink,
+  imageSrc,
+  isAboveFold
+}) => (
   <StartPageHeroWrapper>
     <Image
       fillAvailableSpace={true}
       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
       }

package/src/components/StartPage/StartPage.js

@@ -2,7 +2,6 @@ import StartPageRenderer from '@jetshop/ui/StartPageRenderer';
 import React from 'react';
 import { useQuery } from 'react-apollo';
 import { styled } from 'linaria/react';
-import MaxWidth from '../Layout/MaxWidth';
 import LoadingPage from '../LoadingPage';
 import StartPageCampaign from './Content/StartPageCampaign';
 import StartPageCategories from './Content/StartPageCategories';
@@ -12,8 +11,6 @@ import StartPageProductGrid from './Content/StartPageProductGrid';
 import startPageQuery from './StartPageQuery.gql';
 import { StartPageCategoryItem } from './Content/StartPageCategories';
 
-import { theme } from '../Theme';
-
 const startPageComponents = {
   HERO: StartPageHero,
   HTML: StartPageHTMLContent,
@@ -29,16 +26,6 @@ const StartPageWrapper = styled('div')`
   flex-direction: column;
 `;
 
-export const MainSectionWrapper = styled(MaxWidth)`
-  width: 100%;
-  align-self: center;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  ${theme.below.sm} {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-`;
 const StartPage = ({ startPageId }) => {
   const result = useQuery(startPageQuery, {
     variables: { startPageId: startPageId }

package/src/components/StartPage/StartPageProductGridFragment.gql

@@ -13,6 +13,7 @@ fragment StartPageProductGrid on Product {
     id
     path
     slug
+    breadcrumbs
   }
   ...ProductPrice
   images {

package/src/components/ui/Button.js

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import Spinner from './Spinner';
 import t from '@jetshop/intl';
 import { theme } from '../Theme';
+import { isRelativeUrl } from '@jetshop/core/helpers/isRelativeUrl';
 
 export const baseStyles = `
   background-color: ${theme.colors.blue};
@@ -47,7 +48,7 @@ const Button = styled('button')`
   ${baseStyles};
 `;
 
-export const TrendLink = styled(Link)`
+const TrendABase = styled('a')`
   ${baseStyles};
   text-decoration: none;
   display: flex;
@@ -56,6 +57,23 @@ export const TrendLink = styled(Link)`
   height: 54px;
 `;
 
+const TrendLinkBase = styled(Link)`
+  ${baseStyles};
+  text-decoration: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 54px;
+`;
+
+export function TrendLink({ to, ...props }) {
+  return typeof to === 'string' && !isRelativeUrl(to) ? (
+    <TrendABase href={to} {...props} />
+  ) : (
+    <TrendLinkBase to={to} {...props} />
+  );
+}
+
 const StyledSpinner = styled(Spinner)`
   height: 25px;
   circle.path {

package/.linaria-cache/packages/ui/ChannelSelector/Region.linaria.css

@@ -1,3 +0,0 @@
-.RegionName_r1biyodf{text-transform:uppercase;font-size:1rem;line-height:1.5rem;font-weight:600;margin:1rem 0 0.5rem 0;}
-
-

package/src/components/StartPage/Campaign.js

@@ -1,162 +0,0 @@
-import React from 'react';
-import { styled } from 'linaria/react';
-import { theme } from '../Theme';
-
-import Image from '@jetshop/ui/Image';
-import { MainSectionWrapper } from './StartPage';
-import { TrendLink } from '../ui/Button';
-
-const Container = styled('div')`
-  margin-bottom: 24px;
-`;
-const DescriptionBlock = styled('div')`
-  line-height: 1.25;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-
-  padding: 24px;
-
-  ${theme.above.sm} {
-    max-width: 60vw;
-    padding: 32px;
-  }
-  ${theme.above.md} {
-    max-width: 50vw;
-    padding: 48px;
-  }
-`;
-
-const Row = styled('div')`
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  justify-content: stretch;
-  position: relative;
-  margin-bottom: 1rem;
-  ${theme.below.sm} {
-    flex-direction: column;
-  }
-`;
-
-const NewProductImage = styled('div')`
-  width: 50%;
-  ${theme.below.sm} {
-    width: 100%;
-  }
-`;
-const NewProductText = styled(DescriptionBlock)`
-  width: 50%;
-  ${theme.below.sm} {
-    width: 100%;
-  }
-`;
-const News = styled('h3')`
-  font-size: 60px;
-  text-align: center;
-  margin-bottom: 32px;
-  ${theme.below.sm} {
-    margin-bottom: 24px;
-  }
-`;
-const SubtitleText = styled('p')`
-  color: black;
-  max-width: 420px;
-  font-size: 30px;
-  text-align: center;
-  margin-bottom: 32px;
-  ${theme.below.sm} {
-    font-size: 22px;
-    margin-bottom: 24px;
-  }
-`;
-
-const AmbassadorImage = styled('div')`
-  width: 50%;
-
-  ${theme.below.sm} {
-    width: 100%;
-  }
-`;
-const AmbassadorText = styled(DescriptionBlock)`
-  background-color: #000000;
-  width: 50%;
-  color: white;
-  ${theme.below.sm} {
-    width: 100%;
-  }
-`;
-const Ambassadors = styled('h3')`
-  margin-bottom: 32px;
-  color: #ffffff;
-  font-size: 40px;
-  ${theme.below.sm} {
-    margin-bottom: 24px;
-  }
-`;
-const LearnMore = styled('p')`
-  color: white;
-  font-size: 22px;
-  font-weight: bold;
-  margin-bottom: 32px;
-  text-align: center;
-  width: 360px;
-
-  ${theme.below.sm} {
-    font-size: 18px;
-    margin-bottom: 24px;
-    width: auto;
-  }
-`;
-const GetInspiredButton = styled(TrendLink)`
-  margin: 4px;
-  width: 100%;
-  max-width: 300px;
-`;
-
-const FirstImage = ({ src }) => (
-  <NewProductImage>
-    <Image src={src} aspect="4:5" cover sizes={[1, 1 / 2]} quality={80} />
-  </NewProductImage>
-);
-const FirstSquare = ({ mainText, subtitleText, buttonText, buttonUrl }) => (
-  <NewProductText>
-    <News>{mainText}</News>
-    <SubtitleText>{subtitleText}</SubtitleText>
-    <GetInspiredButton to={buttonUrl || '/'}>{buttonText}</GetInspiredButton>
-  </NewProductText>
-);
-
-const SecondImage = ({ src }) => (
-  <AmbassadorImage>
-    <Image src={src} aspect="5:4" cover sizes={[1, 1 / 2]} quality={80} />
-  </AmbassadorImage>
-);
-
-const SecondSquare = ({ mainText, subtitleText, buttonText, buttonUrl }) => (
-  <AmbassadorText>
-    <Ambassadors>{mainText}</Ambassadors>
-    <LearnMore>{subtitleText}</LearnMore>
-    <GetInspiredButton to={buttonUrl || '/'}>{buttonText}</GetInspiredButton>
-  </AmbassadorText>
-);
-
-const Campaign = ({ firstImage, firstSquare, secondImage, secondSquare }) => {
-  return (
-    <MainSectionWrapper>
-      <Container>
-        <Row>
-          <FirstImage {...firstImage} />
-          <FirstSquare {...firstSquare} />
-        </Row>
-        <Row>
-          <SecondSquare {...secondSquare} />
-          <SecondImage {...secondImage} />
-        </Row>
-      </Container>
-    </MainSectionWrapper>
-  );
-};
-
-export default Campaign;

package/src/components/StartPage/CampaignHeader.js

@@ -1,101 +0,0 @@
-import React from 'react';
-import { styled } from 'linaria/react';
-import { css } from 'linaria';
-import MaxWidth from '../Layout/MaxWidth';
-import { theme } from '../Theme';
-import Image from '@jetshop/ui/Image';
-import { TrendLink } from '../ui/Button';
-
-const Background = styled('div')`
-  background-color: #000000;
-  width: 100%;
-  margin-bottom: 32px;
-
-  display: flex;
-  flex: 1 1 50vh;
-  height: 100%;
-  min-height: 360px;
-`;
-
-const Content = styled(MaxWidth)``;
-const heroStyles = css`
-  height: 100%;
-  background-size: cover;
-  background-position: 50% 25%;
-
-  ${theme.above.lg} {
-    margin: 0 -2rem;
-  }
-`;
-
-const Overlay = styled('div')`
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-direction: column;
-  padding: 1.5rem;
-  color: white;
-  align-items: center;
-  ${theme.below.sm} {
-    padding: 8px;
-  }
-
-  ${theme.above.lg} {
-    padding-left: 3.5rem;
-    padding-right: 3.5rem;
-
-    background: linear-gradient(
-      to right,
-      #000,
-      rgba(0, 0, 0, 0) 10%,
-      rgba(0, 0, 0, 0) 90%,
-      #000
-    );
-  }
-`;
-
-const CampaignText = styled('h2')`
-  font-size: 5rem;
-  max-width: 50rem;
-  margin-top: auto;
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: bold;
-  line-height: 105px;
-  font-size: 76px;
-  text-align: center;
-
-  ${theme.below.sm} {
-    font-size: 2.875rem;
-    max-width: 100;
-    text-align: center;
-  }
-`;
-
-const HeaderButton = styled(TrendLink)`
-  margin: 2.5rem 0;
-  width: 14rem;
-  font-size: 1rem;
-  text-transform: uppercase;
-`;
-
-export default ({ imageSrc, text, buttonText, buttonUrl }) => {
-  return (
-    <Background>
-      <Content>
-        <Image
-          src={imageSrc}
-          aspect={null}
-          cover={true}
-          quality={80}
-          className={heroStyles}
-        >
-          <Overlay>
-            <CampaignText>{text}</CampaignText>
-            <HeaderButton to={buttonUrl || '/'}>{buttonText}</HeaderButton>
-          </Overlay>
-        </Image>
-      </Content>
-    </Background>
-  );
-};

package/src/components/StartPage/ExtraDetails.js

@@ -1,72 +0,0 @@
-import React from 'react';
-import { styled } from 'linaria/react';
-import MaxWidth from '../Layout/MaxWidth';
-import { theme } from '../Theme';
-
-const ExtraDetailsWrapper = styled('div')`
-  background-color: #f7f7f7;
-  width: 100%;
-
-  ${theme.below.md} {
-    margin-bottom: 2rem;
-  }
-`;
-
-const MainContentWrapper = styled('div')`
-  display: flex;
-  justify-content: space-around;
-  padding: 3rem 0;
-
-  ${theme.below.sm} {
-    flex-wrap: wrap;
-    align-items: flex-start;
-    padding: 1.5rem 0.5rem;
-    height: auto;
-  }
-`;
-
-const IconTextWrapper = styled('div')`
-  width: 160px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  text-align: center;
-  line-height: 18px;
-  font-size: 14px;
-
-  > svg {
-    height: 32px;
-    margin-bottom: 16px;
-  }
-
-  ${theme.below.sm} {
-    width: 50%;
-    padding: 1rem 0.5rem;
-  }
-`;
-
-const ExtraDetails = ({ deliveryText, heartText, paymentText, giftText }) => {
-  return (
-    <ExtraDetailsWrapper>
-      <MaxWidth>
-        <MainContentWrapper>
-          <IconTextWrapper>
-            <p>{deliveryText}</p>
-          </IconTextWrapper>
-          <IconTextWrapper>
-            <p>{heartText}</p>
-          </IconTextWrapper>
-          <IconTextWrapper>
-            <p>{paymentText}</p>
-          </IconTextWrapper>
-          <IconTextWrapper>
-            <p>{giftText}</p>
-          </IconTextWrapper>
-        </MainContentWrapper>
-      </MaxWidth>
-    </ExtraDetailsWrapper>
-  );
-};
-
-export default ExtraDetails;

package/src/components/StartPage/Readme.md

@@ -1,88 +0,0 @@
-# Northern Spirit Start Page
-
-In this folder you will find several start page components wih their associated JSON files. To learn how to work with these components please read the Start Page documentation [here](docs.jesthop.tech/#startpagerenderer)
-
-## Ambassador List
-
-Renders a black box with a list of ambassadors. See ambassadors.json for an example
-
-### Properties
-
-- listTitle: Title of the ambassadors list. Appears on the top
-- ambassadors: Array of names
-- buttonText: Text to go on the call to action button
-- url: relative url to go to when the button is clicked
-
-## Campaign
-
-Renders 2 images and 2 Campaign boxes with text and a CTA button
-
-### Properties
-
-- firstImage: First Image has only one property
-  - src: Url for the top left image to be rendered
-- firstSquare: First Square has four properties
-  - mainText: The largest text in the square
-  - subtitleText: Text that appears below the mainText
-  - buttonText: Text that appears on the button in this square
-  - buttonUrl: relative url to go to when the button is clicked
-- secondImage: First Image has only one property
-  - src: Url for the top left image to be rendered
-- secondSquare: First Square has four properties
-  - mainText: The largest text in the square
-  - subtitleText: Text that appears below the mainText
-  - buttonText: Text that appears on the button in this square
-  - buttonUrl: relative url to go to when the button is clicked
-
-## Campaign Header
-
-Renders a large full width Campaign image with text
-
-### Properties
-
-- text: Text to show in large font on the campaign header
-- buttonText: Text to go on the call to action button
-- buttonUrl: relative url to go to when the button is clicked
-
-## Category List
-
-Renders a list of categories with a title
-
-### Properties
-
-- title: Text to render for the title of this list of categories
-- categories: Array of Category objects
-  - Category Object:
-    - name: Name of the Category
-    - images: Array of images. Currently only the first image will be used
-      - url: url for the image of the category
-    - primaryRoute: Object containing a path
-      - path: Path for this category
-    - id: Id of the category
-
-## Extra Details
-
-Component that shows some text underneath icons
-
-### Properties
-
-- deliveryText: Text to go under the delivery icon
-- heartText: Text to go under the heart icon
-- paymentText: Text to go under the credit card icon
-- giftText: Text to go under the gift icon
-
-## Title
-
-A simple title component
-
-### Properties
-
-- text: text to render
-
-## Feed
-
-Renders the instagram feed
-
-### Properties
-
-- title: Title to render before the instagram feed

package/src/components/StartPage/campaign.json

@@ -1,20 +0,0 @@
-{
-  "firstImage": {
-    "src": "/pub_docs/files/Custom_Item_Images/brand-photo-1.jpeg"
-  },
-  "firstSquare": {
-    "mainText": "NEWS!",
-    "subtitleText": "Muscle tanks, tights, bras, shorts and hoodies",
-    "buttonText": "Shop new products",
-    "buttonUrl": "/news"
-  },
-  "secondImage": {
-    "src": "/pub_docs/files/Custom_Item_Images/brand-photo-2.jpeg"
-  },
-  "secondSquare": {
-    "mainText": "Ambassadors",
-    "subtitleText": "Learn more about the ambassadors of Northern Spirit",
-    "buttonText": "Get Inspired",
-    "buttonUrl": "/ambassadors"
-  }
-}

package/src/components/StartPage/campaignHeader.json

@@ -1,5 +0,0 @@
-{
-  "text": "NEW MUSCLE TANKS",
-  "buttonText": "Shop Now",
-  "buttonUrl": "/"
-}

package/src/components/StartPage/categoryList.json

@@ -1,65 +0,0 @@
-{
-  "title": "SHOP BY CATEGORY",
-  "categories": [
-    {
-      "name": "News!",
-      "images": [
-        {
-          "url": "/pub_docs/files/Custom_Item_Images/news.jpeg"
-        }
-      ],
-      "primaryRoute": {
-        "path": "/news"
-      },
-      "id": 159
-    },
-    {
-      "name": "Tights",
-      "images": [
-        {
-          "url": "/pub_docs/files/Custom_Item_Images/tights.jpeg"
-        }
-      ],
-      "primaryRoute": {
-        "path": "/ladies/tights"
-      },
-      "id": 181
-    },
-    {
-      "name": "Long Sleves",
-      "images": [
-        {
-          "url": "/pub_docs/files/Custom_Item_Images/long-sleves.jpeg"
-        }
-      ],
-      "primaryRoute": {
-        "path": "/ladies/womens-longsleeve"
-      },
-      "id": 218
-    },
-    {
-      "name": "T-Shirts",
-      "images": [
-        {
-          "url": "/pub_docs/files/Custom_Item_Images/t-shirts.jpeg"
-        }
-      ],
-      "primaryRoute": {
-        "path": "/ladies/t-shirts"
-      },
-      "id": 177
-    },
-    {
-      "name": "Hoodies & SweatShirts",
-      "images": [
-        {
-          "url": "/pub_docs/files/Custom_Item_Images/hoodies.jpeg"
-        }
-      ],
-      "primaryRoute": {
-        "path": "/ladies/hoodies-sweatshirts"
-      },
-      "id": 184
-    }
-  ]
-}

package/src/components/StartPage/extraDetails.json

@@ -1,6 +0,0 @@
-{
-  "deliveryText": "Express delivery in Sweden 1–3 days",
-  "heartText": "Designed with love for the people in the box",
-  "paymentText": "Safe payment with Klarna",
-  "giftText": "Make someone happy with a gift voucher"
-}

package/src/components/StartPage/title.json

@@ -1,3 +0,0 @@
-{
-  "text": "Chosen For You"
-}